diff --git a/src/app/tasks.coffee b/src/app/tasks.coffee
index c7888cce5f..1ee480be93 100644
--- a/src/app/tasks.coffee
+++ b/src/app/tasks.coffee
@@ -174,7 +174,7 @@ module.exports.app = (appExports, model) ->
     scoring.score(model, task.get('id'), direction)
 
   appExports.tasksToggleAdvanced = (e, el) ->
-    $(el).next('.advanced').toggle()
+    $(el).next('.advanced-option').toggleClass('visuallyhidden')
 
   appExports.tasksSaveAndClose = ->
     # When they update their notes, re-establish tooltip & popover
diff --git a/styles/app/index.styl b/styles/app/index.styl
index 40204aaba0..cdd14936e9 100644
--- a/styles/app/index.styl
+++ b/styles/app/index.styl
@@ -10,15 +10,27 @@
 @import "./helpers.styl";
 @import "./responsive.styl";
 
-// where's the actual bootstrap include?
-// @import "../bootstrap-responsive.styl";
-
 @import "../../public/vendor/bootstrap-datepicker/css/datepicker.css";
 
+// fix exploding to very wide for some reason
+.datepicker
+  width: 210px
+
 html,body,p,h1,ul,li,table,tr,th,td
   margin: 0
   padding: 0
 
+*
+  -webkit-box-sizing: border-box
+  -moz-box-sizing: border-box
+  box-sizing: border-box
+
+hr
+  border-top: 0
+  border-bottom: 1px solid #ddd
+  border-color: rgba(0,0,0,0.1)
+
+
 /* Header
 -------------------------------------------------- */
 
diff --git a/styles/app/tasks.styl b/styles/app/tasks.styl
index ce121649f4..cebc396437 100644
--- a/styles/app/tasks.styl
+++ b/styles/app/tasks.styl
@@ -18,10 +18,11 @@ $stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $goo
 for $stage in $stages
   .color-{$stage[0]}
     background-color: $stage[1]
-    .task-checker label,
-    .action-plus,
-    .action-minus
+    .action-yesno label,
+    .task-action-btn
       background-color: darken($stage[1], 30%)
+      &:hover, &:focus
+        background-color: darken($stage[1], 40%)
 
 // completed has to be outside the loop to override the color class
 .completed
@@ -29,6 +30,8 @@ for $stage in $stages
   color: #999
   .task-checker label
     background-color: darken($completed, 30%)
+  .task-action-btn
+    background-color: darken($completed, 30%)
 
 .reward
   background-color: white
@@ -50,9 +53,6 @@ for $stage in $stages
     margin: 0 0 0.5em
     padding: 0
 
-  hr
-    border: 0
-    border-bottom: 1px solid #ddd
 
 // add new task form
 // -----------------
@@ -65,7 +65,7 @@ for $stage in $stages
 .addtask-field
   display: inline-block
   width: 80% // fallback for Safari 5.1
-  width: calc(unquote('100% - 3em'))
+  width: calc(unquote('100% - 2.5em'))
   input
     font-family: 'Lato', sans-serif
     border: 0
@@ -109,7 +109,7 @@ for $stage in $stages
   padding: 0 0.5em 0 0.5em
   min-height: 2.5em
   line-height: 2.5
-  margin-bottom: 0.75em
+  margin-bottom: 1em
   outline: 1px solid rgba(0,0,0,0.1)
   outline-offset: -1px
   &:hover
@@ -129,61 +129,88 @@ for $stage in $stages
   margin-left: -0.5em
   margin-right: 0.5em
 
-  // plus/minus commands
-  .task-action-btn
-    display: inline-block
+// plus/minus commands
+.task-action-btn
+  display: inline-block
+  width: 1.773em
+  height: 1.773em
+  padding: 0
+  font-size: 1.41em
+  line-height: 1.773
+  text-align: center
+  color: #222
+  vertical-align: top
+  border-right: 1px solid rgba(0,0,0,0.25)
+  &:last-child
+    border: 0
+  &:hover, &:focus
+    color: #222
+    text-decoration: none
+
+// checkbox
+.task-checker input[type=checkbox]
+  margin: 0
+  padding: 0
+  visibility: hidden
+
+.task-checker label
+  display: inline-block
+  width: 2.5em
+  height: 2.5em
+  margin: 0
+  vertical-align: top
+  cursor: pointer
+
+// plus/minus checkbox
+.action-plusminus
+  label
+    margin-right: 1.5em
+  label:after
+    font-size: 1.41em
     width: 1.773em
     height: 1.773em
-    padding: 0
-    font-size: 1.41em
     line-height: 1.773
     text-align: center
-    color: black
-    vertical-align: top
-    border-right: 1px solid rgba(0,0,0,0.25)
-    &:last-child
-      border: 0
-    &:hover, &:focus
-      text-decoration: none
-
-  // checkbox
-  .task-checker input[type=checkbox]
-    margin: 0
-    padding: 0
-    visibility: hidden
-
-  .task-checker label
     display: inline-block
-    width: 2.5em
-    height: 2.5em
-    margin: 0
-    vertical-align: top
-    cursor: pointer
+    vertical-align top
+    opacity: 0.3
+    background-color: #ddd
+    outline: 1px solid rgba(0,0,0,0.5)
+    color: #222
+  label[for$="plus"]:after
+    content: '＋'
+  label[for$="minus"]:after
+    content: '−'
 
-    // uncompleted icon
-    &:after
-      content: '○'
-      display: block
-      font-size: 3em
-      line-height: 0.76
-      text-align: center
-      color: black
-      opacity: 0.2
+  &.select-toggle input[type=checkbox]:checked + label:after
+    opacity: 1
 
-    // hint at completed icon
-    &:hover:after,
-    &:focus:after
-      content: '¬'
-      font-size: 3em
-      line-height: 1.1
-      text-align: left
-      transform: rotate(135deg)
-      opacity: 0.5 !important
-    &:active:after
-      opacity: 0.75 !important
+// yes/no checkbox
+.action-yesno
+  // uncompleted icon
+  label:after
+    content: '○'
+    display: block
+    font-size: 3em
+    line-height: 0.76
+    text-align: center
+    color: black
+    opacity: 0.2
+
+  // hint at completed icon
+  label:hover:after,
+  label:focus:after
+    content: '¬'
+    font-size: 3em
+    line-height: 1.1
+    text-align: left
+    transform: rotate(135deg)
+    opacity: 0.5 !important
+  label:active:after
+    opacity: 0.75 !important
 
   // completed icon
-  .task-checker input[type=checkbox]:checked + label:after
+  input[type=checkbox]:checked + label:after
     content: '¬'
     transform: rotate(135deg)
     line-height: 1.1
@@ -206,6 +233,78 @@ for $stage in $stages
   opacity: 1
 
 
+// task editing
+// ------------
+.task-options
+  padding: 0 0.5em
+  margin-top: 1.25em
+  color: #333
+
+  .option-group
+    border-bottom: 1px solid rgba(0,0,0,0.1)
+    padding: 0 0 1em
+    margin-bottom: 1em
+
+  .option-title
+    font-size: 1em
+    margin: 0 0 0.5em
+    line-height: 1.5
+    border: 0
+    padding: 0
+    color: #333
+    font-style: italic
+    &:not(.mega):after
+      content: ':'
+    &.mega
+      cursor: pointer
+      font-style: normal
+      font-weight: bold
+      text-decoration: underline
+
+
+  .option-content
+    height: 2.5em
+    width: 100%
+    margin: 0 0 1em
+    padding: 0 0 0 0.5em
+    outline: 0
+    border: 1px solid rgba(0,0,0,0.2)
+    box-shadow: none
+    border-radius: 0
+    font-family: 'Lato', sans-serif //bootstrap override
+  
+  textarea.option-content
+    height: 5em
+    padding-top: 0.25em
+    resize: none
+    margin-bottom: 0
+
+// button-group
+.task-controls.tile-group
+  display: block
+  text-align: center
+  margin: 0
+
+.task-action-btn.tile
+  border: 0
+  font-size: 1.15em
+  font-weight: 300
+  outline: 1px solid rgba(0,0,0,0.2)
+  outline-offset: -1px
+  margin: 0 0 0 3px
+  font-family: 'Lato', sans-serif
+  text-align: inherit
+  opacity: 0.5
+  width: auto
+  padding: 0 0.5em
+  &.active
+    opacity: 1
+  &.spacious
+    margin: 0.75em 0
+    font-size: 1.5em
+    opacity: 1
+
+
 // .context-enabled
 //   .display-context-dependant,
 //   .task-list li
diff --git a/views/app/index.html b/views/app/index.html
index e16e6fd1eb..3efc331405 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -15,7 +15,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <!-- webfonts -->
-  <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>
 
 <Header:>
   <app:modals:modals />
diff --git a/views/app/tasks.html b/views/app/tasks.html
index d1d67d137d..757c1eb7b6 100644
--- a/views/app/tasks.html
+++ b/views/app/tasks.html
@@ -142,6 +142,7 @@
 <!-- all the parts of a single task -->
 <task:>
     <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, :task.repeat)}">
+        
         <!-- right-hand side control buttons -->
         <div class="task-meta-controls">
             <!-- edit -->
@@ -163,14 +164,14 @@
         <div class="task-controls">
             <!-- Habits -->
             {#if equal(:task.type, 'habit')}
-            {#if :task.up}<a class="task-action-btn action-plus" data-direction=up x-bind=click:score>＋</a>{/}
-            {#if :task.down}<a class="task-action-btn action-minus" data-direction=down x-bind=click:score>−</a>{/}
+            {#if :task.up}<a class="task-action-btn btn-plus" data-direction=up x-bind=click:score>＋</a>{/}
+            {#if :task.down}<a class="task-action-btn btn-minus" data-direction=down x-bind=click:score>−</a>{/}
             <!-- Rewards -->
             {else if equal(:task.type, 'reward')}
             <a class="task-action-btn action-buy" x-bind=click:score class="buy-link" data-direction=down>{:task.value}<img src="/img/coin_single_gold.png"/></a>
             <!-- Daily & Todos -->
             {else}
-            <span class="task-checker">
+            <span class="task-checker action-yesno">
                 <input type=checkbox id="box-{{:task.id}}" class="visuallyhidden focusable" checked="{:task.completed}">
                 <label for="box-{{:task.id}}"></label>
             </span>
@@ -187,67 +188,73 @@
 <!-- task edit/options -->
 <taskMeta:>
     <div id="{{:task.id}}-edit" class="task-options visuallyhidden">
-        <hr>
         <form x-bind=submit:toggleTaskEdit data-toggle-id="{{:task.id}}-edit">
-            <div class=control-group>
-                <label>Text</label><input type=text value={:task.text} />
-                <label>Notes</label><textarea rows=3>{:task.notes}</textarea>
-            </div>
+            <!-- text & notes -->
+            <fieldset class="option-group">
+                <label class="option-title">Text</label><input class="option-content" type=text value={:task.text}>
+                <label class="option-title">Extra Notes</label><textarea class="option-content" rows=3>{:task.notes}</textarea>
+            </fieldset>
+
+            <!-- if Habit, plus/minus command options -->
             {#if equal(:task.type, 'habit')}
-                <hr/>
-                <label>Direction</label>
-                <div class="control-group">
-                    <label class="checkbox inline"><input type=checkbox checked={:task.up}>Up</label>
-                    <label class="checkbox inline"><input type=checkbox checked={:task.down}>Down</label>
-                </div>
+                <fieldset class="option-group">
+                    <legend class="option-title">Direction/Actions</legend>
+                    <span class="task-checker action-plusminus select-toggle">
+                        <input class="visuallyhidden focusable" type=checkbox id="{{:task.id}}-option-plus" checked={:task.up}>
+                        <label for="{{:task.id}}-option-plus"></label>
+                    </span>
+                    <span class="task-checker action-plusminus select-toggle">
+                        <input class="visuallyhidden focusable" type=checkbox id="{{:task.id}}-option-minus" checked={:task.down}>
+                        <label for="{{:task.id}}-option-minus"></label>
+                    </span>
+                </fieldset>
+
+            <!-- if Daily, calendar -->
             {else if equal(:task.type, 'daily')}
-                <hr/>
-                <label>Repeat</label>
-                <div class="control-group btn-group repeat-days">
-                    <!-- note, does not use  data-toggle="buttons-checkbox" - it would interfere with our own click binding -->
-                    <button type="button" class="btn btn-info {#if :task.repeat.su}active{/}" data-day='su' x-bind=click:toggleDay>Su</button>
-                    <button type="button" class="btn btn-info {#if :task.repeat.m}active{/}" data-day='m' x-bind=click:toggleDay>M</button>
-                    <button type="button" class="btn btn-info {#if :task.repeat.t}active{/}" data-day='t' x-bind=click:toggleDay>T</button>
-                    <button type="button" class="btn btn-info {#if :task.repeat.w}active{/}" data-day='w' x-bind=click:toggleDay>W</button>
-                    <button type="button" class="btn btn-info {#if :task.repeat.th}active{/}" data-day='th' x-bind=click:toggleDay>Th</button>
-                    <button type="button" class="btn btn-info {#if :task.repeat.f}active{/}" data-day='f' x-bind=click:toggleDay>F</button>
-                    <button type="button" class="btn btn-info {#if :task.repeat.s}active{/}" data-day='s' x-bind=click:toggleDay>S</button>
-                </div>
+                <fieldset class="option-group">
+                    <legend class="option-title">Repeat</legend>
+                    <div class="task-controls tile-group repeat-days">
+                        <!-- note, does not use  data-toggle="buttons-checkbox" - it would interfere with our own click binding -->
+                        <button type="button" class="task-action-btn tile {#if :task.repeat.su}active{/}" data-day='su' x-bind=click:toggleDay>Su</button>
+                        <button type="button" class="task-action-btn tile {#if :task.repeat.m}active{/}" data-day='m' x-bind=click:toggleDay>M</button>
+                        <button type="button" class="task-action-btn tile {#if :task.repeat.t}active{/}" data-day='t' x-bind=click:toggleDay>T</button>
+                        <button type="button" class="task-action-btn tile {#if :task.repeat.w}active{/}" data-day='w' x-bind=click:toggleDay>W</button>
+                        <button type="button" class="task-action-btn tile {#if :task.repeat.th}active{/}" data-day='th' x-bind=click:toggleDay>Th</button>
+                        <button type="button" class="task-action-btn tile {#if :task.repeat.f}active{/}" data-day='f' x-bind=click:toggleDay>F</button>
+                        <button type="button" class="task-action-btn tile {#if :task.repeat.s}active{/}" data-day='s' x-bind=click:toggleDay>S</button>
+                    </div>
+                </fieldset>
+
+            <!-- if Reward, pricing -->
             {else if equal(:task.type, 'reward')}
-                <hr/>
                 <div class=control-group>
                     <label>Price</label>
                     <div class="input-append">
                         <input class="span5" size="16" type="number" min="0" value={:task.value}><span class="add-on">Gold</span>
                     </div>
-
                 </div>
+
+            <!-- if Todo, the due date -->
             {else if equal(:task.type, 'todo')}
-                <hr/>
-                <div class=control-group>
-                    <label>Due Date</label>
-                    <input type="text" value="{:task.date}" data-date-format="mm/dd/yyyy" class="datepicker" />
-                    <div><small>Enter as date, eg 02/19/2013 or 02-19-2013</small></div>
-                </div>
+                <fieldset class="option-group">
+                    <legend class="option-title">Due Date</legend>
+                    <input class="option-content datepicker" type="text" value="{:task.date}" data-date-format="mm/dd/yyyy">
+                </fieldset>
             {/}
-
-            <hr/>
+            
+            <!-- Advanced Options -->
             {#unless equal(:task.type, 'reward')}
-                <div>
-                    <a x-bind="click:tasksToggleAdvanced">Advanced</a>
-                    <div class='advanced hide'>
-
-                        <label>Difficulty <a class='priority-multiplier-help' href="https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17" target="_blank"><i class='icon-question-sign'></i></a></label>
-                        <div class="control-group btn-group priority-multiplier" data-id="{{:task.id}}">
-                            <button type="button" class="btn btn-info {#if equal(:task.priority,'!')}active{/}{#unless :task.priority}active{/}" data-priority='!' x-bind=click:tasksSetPriority>Easy</button>
-                            <button type="button" class="btn btn-info {#if equal(:task.priority,'!!')}active{/}" data-priority='!!' x-bind=click:tasksSetPriority>Medium</button>
-                            <button type="button" class="btn btn-info {#if equal(:task.priority,'!!!')}active{/}" data-priority='!!!' x-bind=click:tasksSetPriority>Hard</button>
-                        </div>
+                <p x-bind="click:tasksToggleAdvanced" class="option-title mega">Advanced Options</p>
+                <fieldset class="option-group advanced-option visuallyhidden">
+                    <legend class="option-title"><a class='priority-multiplier-help' href="https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17" target="_blank"><i class='icon-question-sign'></i></a> Difficulty</legend>
+                    <div class="task-controls tile-group priority-multiplier" data-id="{{:task.id}}">
+                        <button type="button" class="task-action-btn tile {#if equal(:task.priority,'!')}active{/}{#unless :task.priority}active{/}" data-priority='!' x-bind=click:tasksSetPriority>Easy</button>
+                        <button type="button" class="task-action-btn tile {#if equal(:task.priority,'!!')}active{/}" data-priority='!!' x-bind=click:tasksSetPriority>Medium</button>
+                        <button type="button" class="task-action-btn tile {#if equal(:task.priority,'!!!')}active{/}" data-priority='!!!' x-bind=click:tasksSetPriority>Hard</button>
                     </div>
-                </div>
-                <br/>
+                </fieldset>
             {/}
-            <button type=submit class="btn" x-bind="click:tasksSaveAndClose">Save & Close</button>
+            <button type=submit class="task-action-btn tile spacious" x-bind="click:tasksSaveAndClose">Save & Close</button>
         </form>
     </div>