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')}"},
