Index: ow/templates/base_anonymous.pt
===================================================================
--- ow/templates/base_anonymous.pt	(revision 5cf5787d1c21f5eedd38c23d588cc1906e4bef1d)
+++ ow/templates/base_anonymous.pt	(revision 6993c72dd26b4d7afd587ce77eb4d08ed1347caf)
@@ -25,5 +25,5 @@
 
     <link rel="stylesheet"
-          href="${request.static_url('ow:static/css/main.min.css')}" />
+          href="${request.static_url('ow:static/css/main.css')}" />
 
   </head>
@@ -37,5 +37,5 @@
           <a href="#" tal:attributes="href request.resource_url(request.root)">
             <span class="logo-open">Open</span><span class="logo-work">work</span><span class="logo-outs">outs</span>
-        </a>
+          </a>
         </h1>
         <p class="description">tracking your workouts openly</p>
Index: ow/templates/dashboard.pt
===================================================================
--- ow/templates/dashboard.pt	(revision 5cf5787d1c21f5eedd38c23d588cc1906e4bef1d)
+++ ow/templates/dashboard.pt	(revision 6993c72dd26b4d7afd587ce77eb4d08ed1347caf)
@@ -25,8 +25,6 @@
       <section class="workout-list">
 
-        <h2 tal:content="context.fullname"></h2>
-
         <h3>
-            (<tal:n tal:content="len(workouts)"></tal:n>/<tal:n tal:content="context.num_workouts"></tal:n>) <tal:t i18n:translate="">workouts</tal:t>
+           <tal:n tal:content="len(workouts)"></tal:n> <tal:t i18n:translate="">Activities</tal:t>
         </h3>
 
@@ -110,4 +108,37 @@
 
       <aside class="workout-aside">
+        <div class="aside-profile">
+          <tal:c tal:condition="getattr(context, 'picture', None)">
+            <img tal:attributes="src request.resource_path(context, 'picture')"
+                 width="450" />
+          </tal:c>
+          <h2 tal:content="context.fullname"></h2>
+          <ul>
+            <Li>
+              <tal:n tal:content="context.num_workouts"></tal:n> <tal:t i18n:translate="">workouts</tal:t>
+            </Li>
+          </ul>
+        </div>
+          <div class="week-stats js-week-stats">
+            <h3><tal:t i18n:translate="">This week</tal:t></h3>
+            <p tal:define="totals context.week_totals">
+              <span class="week-stats-distance">
+                <tal:d tal:content="round(totals['distance'])"></tal:d>
+                <tal:t i18n:translate="">kms</tal:t>
+              </span>
+              <span class="week-stats-time">
+                <tal:hms tal:define="hms timedelta_to_hms(totals['time'])">
+                  <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
+                  <tal:t i18n:translate="">hours</tal:t>,
+                  <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
+                  <tal:t i18n:translate="">min.</tal:t>
+                </tal:hms>
+              </span>
+            </p>
+            <div class="svg-cotent">
+              <svg width="300" height="200" viewBox="0 0 300 200"></svg>
+            </div>
+          </div>
+
           <tal:activity_tree tal:condition="context.num_workouts > 0">
               <ul class="workout-activity-tree" tal:define="tree context.activity_dates_tree">
@@ -118,21 +149,39 @@
                                              class 'js-year viewing-year' if is_viewing_year  else 'js-year'">
                           </a>
+                          <ul tal:define="stats context.stats(year)" tal:attributes="class 'workout-activity-summary' if is_viewing_year  else 'workout-activity-summary hidden'">
+                            <li>
+                              <span i18n:translate="">Workouts:</span>
+                              <span tal:content="stats['workouts']"></span>
+                            </li>
+                            <li>
+                              <span i18n:translate="">Distance:</span>
+                              <span> <tal:kms tal:content="round(stats['distance'])"></tal:kms> km</span>
+                            </li>
+                            <li>
+                              <span i18n:translate="">Time:</span>
+                              <tal:hms tal:define="hms timedelta_to_hms(stats['time'])">
+                                <span>
+                                  <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
+                                  <tal:t i18n:translate="">hours</tal:t>,
+                                  <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
+                                  <tal:t i18n:translate="">min.</tal:t>
+                                </span>
+                              </tal:hms>
+                            </li>
+                            <li>
+                              <span i18n:translate="">Elevation:</span>
+                              <span> <tal:m tal:content="stats['elevation']"></tal:m> m</span>
+                            </li>
+                          </ul>
                           <ul class="workout-activity-tree-year"
                               tal:attributes="class 'workout-activity-tree-year' if is_viewing_year  else 'workout-activity-tree-year hidden'">
                               <tal:months tal:repeat="month sorted(tree[year].keys())">
                                   <li tal:define="is_viewing_month is_viewing_year and month == viewing_month">
-                                      <a href="" tal:content="month_name[month]"
+                                      <a href=""
                                          tal:attributes="href request.resource_url(context, query={'year': year, 'month': month});
                                                          class 'viewing-month' if is_viewing_month else ''">
+                                           <span tal:content="month_name[month]"></span>
+                                           <span tal:content="sum([tree[year][month][sport] for sport in tree[year][month]])"></span>
                                       </a>
-                                      <ul class="workout-activity-tree-month">
-                                          <tal:sports tal:repeat="sport sorted(tree[year][month].keys())">
-                                              <li>
-                                                  <a href="#">
-                                                      <tal:sport tal:content="sport"></tal:sport> (<tal:workouts tal:content="tree[year][month][sport]"></tal:workouts>)
-                                                  </a>
-                                              </li>
-                                          </tal:sports>
-                                      </ul>
                                   </li>
                               </tal:months>
@@ -142,60 +191,4 @@
               </ul>
           </tal:activity_tree>
-
-          <tal:stats>
-
-            <div class="week-stats js-week-stats">
-              <h3><tal:t i18n:translate="">This week</tal:t></h3>
-              <h4 tal:define="totals context.week_totals">
-                <span class="week_totals_left">
-                  <tal:d tal:content="round(totals['distance'])"></tal:d>
-                  <tal:t i18n:translate="">kms</tal:t>
-                </span>
-                <span class="week_totals_right">
-                  <tal:hms tal:define="hms timedelta_to_hms(totals['time'])">
-                    <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
-                    <tal:t i18n:translate="">hours</tal:t>,
-                    <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
-                    <tal:t i18n:translate="">min.</tal:t>
-                  </tal:hms>
-                </span>
-              </h4>
-              <svg width="300" height="200"></svg>
-              <style>
-
-              </style>
-            </div>
-
-            <div class="user-stats">
-              <tal:year-stats tal:repeat="year context.activity_years">
-                <h3><a href="" tal:content="year"></a></h3>
-                <ul tal:define="stats context.stats(year)">
-                  <li>
-                    <span i18n:translate="">Workouts:</span>
-                    <span tal:content="stats['workouts']"></span>
-                  </li>
-                  <li>
-                    <span i18n:translate="">Distance:</span>
-                    <span tal:content="round(stats['distance'])"></span> kms
-                  </li>
-                  <li>
-                    <span i18n:translate="">Time:</span>
-                    <tal:hms tal:define="hms timedelta_to_hms(stats['time'])">
-                      <span>
-                        <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
-                        <tal:t i18n:translate="">hours</tal:t>,
-                        <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
-                        <tal:t i18n:translate="">min.</tal:t>
-                      </span>
-                    </tal:hms>
-                  </li>
-                  <li>
-                    <span i18n:translate="">Elevation:</span>
-                    <span tal:content="stats['elevation']"></span> m
-                  </li>
-                </ul>
-              </tal:year-stats>
-            </div>
-          </tal:stats>
 
       </aside>
Index: ow/templates/login.pt
===================================================================
--- ow/templates/login.pt	(revision 5cf5787d1c21f5eedd38c23d588cc1906e4bef1d)
+++ ow/templates/login.pt	(revision 6993c72dd26b4d7afd587ce77eb4d08ed1347caf)
@@ -34,7 +34,9 @@
                      type="password" i18n:attributes="placeholder">
             </div>
-            <input class="button" type="submit" name="submit" value="Login">
+            <div>
+              <input class="button button-action" type="submit" name="submit" value="Login">
+            </div>
             <a class="login-remember" href="#" i18n:translate="">
-              Forgot your password?</a> |
+              Forgot your password?</a>
             <a class="join-now" href="" i18n:translate=""
                tal:attributes="href request.resource_url(context, 'signup')">
Index: ow/templates/profile.pt
===================================================================
--- ow/templates/profile.pt	(revision 5cf5787d1c21f5eedd38c23d588cc1906e4bef1d)
+++ ow/templates/profile.pt	(revision 6993c72dd26b4d7afd587ce77eb4d08ed1347caf)
@@ -15,27 +15,22 @@
 
     <div class="user-profile">
-      <tal:c tal:condition="getattr(context, 'picture', None)">
-        <img tal:attributes="src request.resource_path(context, 'picture')"
-             width="450" />
-      </tal:c>
-      <h2>
-          <tal:fullname tal:content="context.fullname"></tal:fullname>
+      <div class="user-profile-account">
+        <tal:c tal:condition="getattr(context, 'picture', None)">
+          <img tal:attributes="src request.resource_path(context, 'picture')"
+               width="450" />
+        </tal:c>
+        <h2>
+            <tal:fullname tal:content="context.fullname"></tal:fullname>
+        </h2>
+        <p>
           <tal:has-nickname tal:condition="context.nickname">
-              (<tal:nickname tal:content="context.nickname"></tal:nickname>)
-          </tal:has-nickname>
-      </h2>
-      <h3>
-        <tal:email tal:content="context.email"></tal:email>
-      </h3>
-      <h4>
-        <a href=""
-           tal:attributes="href request.resource_url(context, 'edit')"
-           i18n:translate="">edit profile</a> |
-        <a href=""
-           tal:attributes="href request.resource_url(context, 'passwd')"
-           i18n:translate="">change password</a>
-      </h4>
-      <div class="profile-info">
-        <ul>
+              <tal:nickname tal:content="context.nickname"></tal:nickname>
+          </tal:has-nickname> |
+          <span><tal:email tal:content="context.email"></tal:email></span>
+        </p>
+
+        <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
+
+        <ul class="profile-data">
           <li>
             <tal:t i18n:translate="">Gender:</tal:t>
@@ -57,24 +52,33 @@
           </li>
         </ul>
+        <ul class="workout-options">
+          <li><a href=""
+             tal:attributes="href request.resource_url(context, 'edit')"
+             i18n:translate="">edit profile</a></li>
+          <li><a href=""
+             tal:attributes="href request.resource_url(context, 'passwd')"
+             i18n:translate="">change password</a></li>
+        </ul>
       </div>
 
-      <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
-
-      <div class="profile-workouts">
-        <tal:t i18n:translate="">Total number of workouts</tal:t>:
+      <div class="total-workouts">
         <tal:w tal:replace="context.num_workouts"></tal:w>
+        <tal:t i18n:translate="">workouts</tal:t>
       </div>
 
       <div class="month-stats js-month-stats">
-        <svg width="600" height="300"></svg>
-        <div class="filters js-filters">
-          <a href="#" class="js-distance" i18n:translate="">distance</a>
-          <a href="#" class="js-time" i18n:translate="">time</a>
-          <a href="#" class="js-elevation" i18n:translate="">elevation</a>
+        <div class="svg-cotent">
+          <svg width="800" height="180" viewBox="0 0 800 180"></svg>
         </div>
-        <div class="switcher js-switcher">
-          <a href="#" class="js-weekly" i18n:translate="">weekly</a>
-          <a href="#" class="js-monthly" i18n:translate="">monthly</a>
-        </div>
+        <ul class="workout-options filters js-filters">
+          <li><a href="#" class="js-distance is-active" i18n:translate="">distance</a></li>
+          <li><a href="#" class="js-time" i18n:translate="">time</a></li>
+          <li><a href="#" class="js-elevation" i18n:translate="">elevation</a></li>
+        </ul>
+
+        <ul class="workout-options switcher js-switcher">
+          <li><a href="#" class="js-weekly" i18n:translate="">weekly</a></li>
+          <li><a href="#" class="js-monthly is-active" i18n:translate="">monthly</a></li>
+        </ul>
       </div>
 
@@ -138,5 +142,4 @@
 
       </tal:r>
-
     </div>
 
@@ -156,7 +159,7 @@
 
      var year_chart = owjs.year_chart({
-         chart_selector: 'div.js-month-stats svg',
-         filters_selector: 'div.js-month-stats div.js-filters a',
-         switcher_selector: 'div.js-month-stats div.js-switcher a',
+         chart_selector: '.js-month-stats svg',
+         filters_selector: '.js-month-stats .js-filters a',
+         switcher_selector: '.js-month-stats .js-switcher a',
          urls: {"monthly": "${request.resource_url(context, 'monthly')}",
                 "weekly": "${request.resource_url(context, 'weekly')}"},
Index: ow/templates/signup.pt
===================================================================
--- ow/templates/signup.pt	(revision 5cf5787d1c21f5eedd38c23d588cc1906e4bef1d)
+++ ow/templates/signup.pt	(revision 6993c72dd26b4d7afd587ce77eb4d08ed1347caf)
@@ -12,5 +12,5 @@
       <!-- Login -->
 
-      <div class="signup-content">
+      <div class="login-content">
 
         <form method="post" name="signup" action="">
@@ -57,5 +57,5 @@
           </fieldset>
 
-          <input class="button" type="submit" name="submit" value="Sign up!">
+          <input class="button button-action" type="submit" name="submit" value="Sign up!">
 
         </form>
Index: ow/templates/workout.pt
===================================================================
--- ow/templates/workout.pt	(revision 5cf5787d1c21f5eedd38c23d588cc1906e4bef1d)
+++ ow/templates/workout.pt	(revision 6993c72dd26b4d7afd587ce77eb4d08ed1347caf)
@@ -26,4 +26,80 @@
   <metal:content metal:fill-slot="content">
 
+
+    <div class="workout-detail" id="workout">
+      <div class="workout-detail-resume">
+        <h3 tal:content="context.title"></h3>
+        <div id="" tal:content="context.notes"
+             tal:attributes="id 'workout-' + context.workout_id + '-notes'">
+        </div>
+        <ul class="workout-options">
+          <li>
+            <a href="" i18n:translate=""
+             tal:attributes="href request.resource_url(context, 'edit')">
+            edit workout
+            </a>
+          </li>
+          <li>
+            <a href="" i18n:translate=""
+             tal:attributes="href request.resource_url(context, 'update-from-file')">
+            update with tracking file
+            </a>
+          </li>
+          <li class="owo-del"><a href="" i18n:translate=""
+             tal:attributes="href request.resource_url(context, 'delete')">
+            delete
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="workout-detail-info">
+        <ul id="" tal:attributes="id 'workout-' + context.workout_id + '-details'"
+            tal:define="hr context.hr; cad context.cad; atemp context.atemp; timezone context.owner.timezone">
+          <li class="important" tal:condition="context.distance">
+            <span><tal:t i18n:translate="">Distance</tal:t></span>
+            <tal:c tal:content="context.rounded_distance"></tal:c> km
+          </li>
+          <li class="important">
+            <span><tal:t i18n:translate="">Duration</tal:t></span>
+            <!--! use the properly formatted duration instead of the timedelta object -->
+            <tal:c tal:content="context._duration"></tal:c>
+          </li>
+          <li class="important">
+            <span><tal:t i18n:translate="">Start</tal:t></span>
+            <tal:c tal:content="context.start_in_timezone(timezone)"></tal:c>
+          </li>
+          <li tal:condition="context.speed">
+            <span><tal:t i18n:translate="">Speed</tal:t></span>
+            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
+            <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c>km/h</span>
+            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
+            <tal:c tal:content="round(context.speed['max'], 1)"></tal:c>km/h</span>
+          </li>
+          <li tal:condition="hr">
+            <span><tal:t i18n:translate="">Heart Rate</tal:t></span>
+            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
+            <tal:c tal:content="hr['avg']"></tal:c>bpm</span>
+            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
+            <tal:c tal:content="hr['max']"></tal:c> bpm</span>
+          </li>
+          <li tal:condition="cad">
+            <span><tal:t i18n:translate="">Cadence</tal:t></span>
+            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
+            <tal:c tal:content="cad['avg']"></tal:c></span>
+            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
+            <tal:c tal:content="cad['max']"></tal:c></span>
+          </li>
+          <li tal:condition="atemp">
+            <span><tal:t i18n:translate="">Temperature</tal:t></span>
+            <span class="min"><tal:t i18n:translate="">Min.</tal:t>
+            <tal:c tal:content="atemp['min']"></tal:c>℃</span>
+            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
+            <tal:c tal:content="atemp['avg']"></tal:c>℃</span>
+            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
+            <tal:c tal:content="atemp['max']"></tal:c>℃</span>
+          </li>
+        </ul>
+      </div>
+    </div>
     <!--! Track map -->
     <div id="map" tal:condition="context.has_gpx"></div>
@@ -49,81 +125,4 @@
       </tal:r>
 
-    </div>
-
-    <div id="workout">
-      <h3 tal:content="context.title"></h3>
-      <h4>
-        <a href="" i18n:translate=""
-           tal:attributes="href request.resource_url(context, 'edit')">
-          (edit workout)
-        </a> |
-        <a href="" i18n:translate=""
-           tal:attributes="href request.resource_url(context, 'update-from-file')">
-          (update with tracking file)
-        </a> |
-        <a href="" i18n:translate=""
-           tal:attributes="href request.resource_url(context, 'delete')">
-          (delete)
-        </a>
-      </h4>
-
-      <ul id="" tal:attributes="id 'workout-' + context.workout_id + '-details'"
-          tal:define="hr context.hr; cad context.cad; atemp context.atemp; timezone context.owner.timezone">
-        <li>
-          <tal:t i18n:translate="">Start:</tal:t>
-          <tal:c tal:content="context.start_in_timezone(timezone)"></tal:c>
-        </li>
-        <li>
-          <tal:t i18n:translate="">End:</tal:t>
-          <tal:c tal:content="context.end_in_timezone(timezone)"></tal:c>
-        </li>
-        <li>
-          <tal:t i18n:translate="">Duration:</tal:t>
-          <!--! use the properly formatted duration instead of the timedelta object -->
-          <tal:c tal:content="context._duration"></tal:c>
-        </li>
-        <li tal:condition="context.distance">
-          <tal:t i18n:translate="">Distance:</tal:t>
-          <tal:c tal:content="context.rounded_distance"></tal:c> km
-        </li>
-        <li tal:condition="context.speed">
-          <tal:t i18n:translate="">Speed:</tal:t>
-          <tal:t i18n:translate="">Avg.</tal:t>
-          <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c> km/h |
-          <tal:t i18n:translate="">Max.</tal:t>
-          <tal:c tal:content="round(context.speed['max'], 1)"></tal:c> km/h
-        </li>
-        <li tal:condition="hr">
-          <tal:t i18n:translate="">Heart Rate:</tal:t>
-          <tal:t i18n:translate="">Min.</tal:t>
-          <tal:c tal:content="hr['min']"></tal:c> bpm |
-          <tal:t i18n:translate="">Avg.</tal:t>
-          <tal:c tal:content="hr['avg']"></tal:c> bpm |
-          <tal:t i18n:translate="">Max.</tal:t>
-          <tal:c tal:content="hr['max']"></tal:c> bpm
-        </li>
-        <li tal:condition="cad">
-          <tal:t i18n:translate="">Cadence:</tal:t>
-          <tal:t i18n:translate="">Min.</tal:t>
-          <tal:c tal:content="cad['min']"></tal:c> |
-          <tal:t i18n:translate="">Avg.</tal:t>
-          <tal:c tal:content="cad['avg']"></tal:c> |
-          <tal:t i18n:translate="">Max.</tal:t>
-          <tal:c tal:content="cad['max']"></tal:c>
-        </li>
-        <li tal:condition="atemp">
-          <tal:t i18n:translate="">Temperature:</tal:t>
-          <tal:t i18n:translate="">Min.</tal:t>
-          <tal:c tal:content="atemp['min']"></tal:c> |
-          <tal:t i18n:translate="">Avg.</tal:t>
-          <tal:c tal:content="atemp['avg']"></tal:c> |
-          <tal:t i18n:translate="">Max.</tal:t>
-          <tal:c tal:content="atemp['max']"></tal:c>
-        </li>
-
-      </ul>
-      <div id="" tal:content="context.notes"
-           tal:attributes="id 'workout-' + context.workout_id + '-notes'">
-      </div>
     </div>
   </metal:content>
