Index: ow/static/css/main.css
===================================================================
--- ow/static/css/main.css	(revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6)
+++ ow/static/css/main.css	(revision 67fc2ed5218a57e5e3dddc275aca9163b7c3f8a4)
@@ -680,4 +680,8 @@
   color: #151515;
 }
+.workout-options a.is-active {
+  background-color: #959595;
+  color: white;
+}
 .owo-del a:hover {
   color: red;
@@ -898,12 +902,4 @@
 <a class="login-remember" href="#">Forgot your password?</a>
 */
-.user-profile {
-  padding: 2em  1em;
-}
-@media (min-width: 480px) {
-  .user-profile {
-    padding: 2em 6em;
-  }
-}
 .user-profile img {
   width: 140px;
@@ -911,6 +907,69 @@
   object-fit: cover;
   border-radius: 50%;
+  margin-bottom: 0.5em;
 }
 .user-profile .workout-options {
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.user-profile-account {
+  background-color: #fbfbfb;
+  padding: 2em  1em;
+}
+@media (min-width: 480px) {
+  .user-profile-account {
+    padding: 2em 6em;
+  }
+}
+.user-profile-account h2 {
+  margin: 0 0 0.15em 0;
+  font-size: 21px;
+  font-size: 1.3125rem;
+}
+.user-profile-account p {
+  color: #555555;
+  font-size: 14px;
+  font-size: 0.875rem;
+  margin: 0;
+}
+.user-profile-account p span {
+  color: #959595;
+}
+.user-profile-account .workouts {
+  font-size: 18px;
+  font-size: 1.125rem;
+  font-weight: bold;
+}
+.profile-data {
+  list-style-type: none;
+  padding: 0;
+  font-size: 14px;
+  font-size: 0.875rem;
+}
+.profile-data li {
+  margin-bottom: 0.25em;
+}
+.profile-bio {
+  margin: 1em 0;
+}
+.month-stats,
+.latest-workouts {
+  max-width: 40vw;
+  margin: 0 auto;
+}
+.latest-workouts h4 {
+  margin: 0;
+}
+.latest-workouts h4 a {
+  color: #151515;
+  text-decoration: none;
+}
+.latest-workouts > span {
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.latest-workouts p {
+  margin-top: 0.25em;
+  color: #959595;
   font-size: 13px;
   font-size: 0.8125rem;
Index: ow/static/less/modules/workout.less
===================================================================
--- ow/static/less/modules/workout.less	(revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6)
+++ ow/static/less/modules/workout.less	(revision 67fc2ed5218a57e5e3dddc275aca9163b7c3f8a4)
@@ -136,4 +136,8 @@
         &:hover{
             color: @color-main;
+        }
+        &.is-active {
+            background-color: @color-main-medium;
+            color: white;
         }
     }
Index: ow/static/less/pages/profile.less
===================================================================
--- ow/static/less/pages/profile.less	(revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6)
+++ ow/static/less/pages/profile.less	(revision 67fc2ed5218a57e5e3dddc275aca9163b7c3f8a4)
@@ -1,7 +1,3 @@
 .user-profile {
-    padding: 2em  1em;
-    @media (min-width: @screen-s){
-        padding: 2em 6em;
-    }
     img {
         width: 140px;
@@ -9,4 +5,5 @@
         object-fit: cover;
         border-radius: 50%;
+        margin-bottom: .5em;
     }
     .workout-options {
@@ -14,2 +11,63 @@
     }
 }
+
+.user-profile-account {
+	background-color: @color-main-xtralight;
+    padding: 2em  1em;
+    @media (min-width: @screen-s){
+        padding: 2em 6em;
+    }
+	h2 {
+		margin: 0 0 .15em 0;
+		.font-size(21);
+	}
+	p{
+		color: @color-main-dark;
+		.font-size(14);
+		margin: 0;
+		span {
+			color: @color-main-medium;
+		}
+	}
+	.workouts {
+		.font-size(18);
+		font-weight: bold;
+	}
+}
+
+.profile-data {
+	list-style-type: none;
+	padding: 0;
+	.font-size(14);
+	li {
+		margin-bottom: .25em;
+	}
+}
+
+.profile-bio {
+	margin: 1em 0;
+}
+
+.month-stats,
+.latest-workouts {
+	max-width: 40vw;
+	margin: 0 auto;
+}
+
+.latest-workouts {
+	h4 {
+		margin:0;
+		a {
+			color: @color-main;
+			text-decoration: none;
+		}
+	}
+	>span {
+		.font-size(13);
+	}
+	p {
+		margin-top: .25em;
+		color: @color-main-medium;
+		.font-size(13);
+	}
+}
Index: ow/templates/profile.pt
===================================================================
--- ow/templates/profile.pt	(revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6)
+++ ow/templates/profile.pt	(revision 67fc2ed5218a57e5e3dddc275aca9163b7c3f8a4)
@@ -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>
-      </h2>
-      <p>
-        <tal:has-nickname tal:condition="context.nickname">
-            <tal:nickname tal:content="context.nickname"></tal:nickname>
-        </tal:has-nickname> (<tal:email tal:content="context.email"></tal:email>)
-      </p>
-      <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 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> | 
+          <span><tal:email tal:content="context.email"></tal:email></span>
+        </p>
 
-      <div class="profile-info">
-        <ul>
+        <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
+
+        <ul class="profile-data">
           <li>
             <tal:t i18n:translate="">Gender:</tal:t>
@@ -57,35 +52,45 @@
           </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 class="workouts">
+          <tal:w tal:replace="context.num_workouts"></tal:w>
+          <tal:t i18n:translate="">Workouts</tal:t>
+        </div>
       </div>
 
-      <div class="profile-bio" tal:content="getattr(context, 'bio', '')">
-      </div>
-
-      <div class="workouts">
-        <tal:t i18n:translate="">Total number of workouts</tal:t>:
-        <tal:w tal:replace="context.num_workouts"></tal:w>
+      <div class="month-stats js-month-stats">
+        <div class="svg-cotent">
+          <svg width="600" height="300" viewBox="0 0 600 300"></svg>
+        </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>
       </div>
 
       <div class="latest-workouts">
-        <p i18n:translate="">Latest workouts</p>
+        <h3 i18n:translate="">Latest workouts</h3>
         <tal:r tal:repeat="workout context.workouts()[:5]">
           <div class="workout">
-            <tal:c tal:content="workout.sport"></tal:c> -
-            <a href="" tal:content="workout.title"
+            <h4>
+              <a href="" tal:content="workout.title"
                tal:attributes="href request.resource_url(workout)"></a>
-            (<tal:c tal:content="workout.start"></tal:c>,
+            </h4>
+            <span><tal:c tal:content="workout.sport"></tal:c></span>
+            <p><tal:c tal:content="workout.start"></tal:c>,
             <tal:c tal:content="workout.duration"></tal:c>,
-            <tal:c tal:content="workout.rounded_distance"></tal:c> km)
+            <tal:c tal:content="workout.rounded_distance"></tal:c> km
+            </p>
           </div>
         </tal:r>
-      </div>
-
-      <div class="month-stats js-month-stats">
-        <svg width="600" height="300"></svg>
-        <ul class="filters js-filters">
-          <li><a href="#" class="js-distance" 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>
       </div>
 
