Index: ow/static/css/main.css
===================================================================
--- ow/static/css/main.css	(revision d52ba5023968433653203281bef774f9e997cabd)
+++ ow/static/css/main.css	(revision ffd6bb5274e3b1e1b89e01b51196b3d4acc25ab5)
@@ -663,4 +663,5 @@
   border-radius: 4px;
   padding: 0;
+  width: auto;
 }
 .workout-options li {
@@ -1009,4 +1010,5 @@
   font-size: 13px;
   font-size: 0.8125rem;
+  margin-right: 2em;
 }
 .user-profile-account {
@@ -1018,4 +1020,8 @@
     padding: 2em 6em;
   }
+}
+.user-profile-account > div {
+  display: flex;
+  align-items: center;
 }
 .user-profile-account img {
@@ -1025,4 +1031,5 @@
   border-radius: 50%;
   margin-bottom: 0.5em;
+  margin-right: 1em;
 }
 .user-profile-account h2 {
@@ -1050,15 +1057,35 @@
   font-size: 14px;
   font-size: 0.875rem;
+  background-color: white;
+  padding: 0.5em 0.75em;
+  border-radius: 4px;
+  border: 1px solid #e1e1e1;
+  max-width: 200px;
 }
 .profile-data li {
-  margin-bottom: 0.25em;
+  display: flex;
+  justify-content: space-between;
+  color: #959595;
+}
+.profile-data li:not(:last-child) {
+  margin-bottom: 0.5em;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid #e1e1e1;
+}
+.profile-data li span {
+  font-weight: bold;
+  color: #151515;
 }
 .profile-bio {
-  margin: 1em 0;
+  margin: 0.5em 0;
+  font-size: 14px;
+  font-size: 0.875rem;
 }
 .month-stats,
 .latest-workouts {
-  max-width: 40vw;
-  margin: 0 auto;
+  max-width: 700px;
+}
+.month-stats {
+  margin-bottom: 4em;
 }
 .latest-workouts h4 {
Index: ow/static/less/modules/workout.less
===================================================================
--- ow/static/less/modules/workout.less	(revision d52ba5023968433653203281bef774f9e997cabd)
+++ ow/static/less/modules/workout.less	(revision ffd6bb5274e3b1e1b89e01b51196b3d4acc25ab5)
@@ -122,4 +122,5 @@
     border-radius: 4px;
     padding: 0;
+    width: auto;
     li{
         display: inline-block;
Index: ow/static/less/pages/profile.less
===================================================================
--- ow/static/less/pages/profile.less	(revision d52ba5023968433653203281bef774f9e997cabd)
+++ ow/static/less/pages/profile.less	(revision ffd6bb5274e3b1e1b89e01b51196b3d4acc25ab5)
@@ -2,4 +2,5 @@
     .workout-options {
     	.font-size(13);
+		margin-right: 2em;
     }
 }
@@ -11,4 +12,8 @@
         padding: 2em 6em;
     }
+    >div {
+    	display: flex;
+    	align-items: center;
+    }
     img {
         width: 140px;
@@ -17,4 +22,5 @@
         border-radius: 50%;
         margin-bottom: .5em;
+        margin-right: 1em;
     }
 	h2 {
@@ -40,17 +46,37 @@
 	padding: 0;
 	.font-size(14);
+	background-color: white;
+	padding: .5em .75em;
+	border-radius: 4px;
+	border: 1px solid @color-main-light;
+	max-width: 200px;
 	li {
-		margin-bottom: .25em;
+		display: flex;
+		justify-content: space-between;
+		color: @color-main-medium;
+		&:not(:last-child) {
+			margin-bottom: .5em;
+			padding-bottom: .5em;
+			border-bottom: 1px solid @color-main-light;
+		}
+		span {
+			font-weight: bold;
+			color: @color-main;
+		}
 	}
 }
 
 .profile-bio {
-	margin: 1em 0;
+	margin: .5em 0;
+	.font-size(14);
 }
 
 .month-stats,
 .latest-workouts {
-	max-width: 40vw;
-	margin: 0 auto;
+	max-width: 700px
+}
+
+.month-stats {
+	margin-bottom: 4em;
 }
 
Index: ow/templates/profile.pt
===================================================================
--- ow/templates/profile.pt	(revision d52ba5023968433653203281bef774f9e997cabd)
+++ ow/templates/profile.pt	(revision ffd6bb5274e3b1e1b89e01b51196b3d4acc25ab5)
@@ -16,27 +16,37 @@
     <div class="user-profile">
       <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-bio" tal:content="getattr(context, 'bio', '')"></div>
-
+        <div>
+          <tal:c tal:condition="getattr(context, 'picture', None)">
+            <img tal:attributes="src request.resource_path(context, 'picture')"
+                 width="450" />
+          </tal:c>
+          <div>
+            <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-bio" tal:content="getattr(context, 'bio', '')"></div>
+            <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>
         <ul class="profile-data">
           <li>
-            <tal:t i18n:translate="">Gender:</tal:t>
+            <span><tal:t i18n:translate="">Gender:</tal:t></span>
             <tal:c tal:content="getattr(context, 'gender', '-')"></tal:c>
           </li>
           <li tal:define="birth_date getattr(context, 'birth_date', None)">
-            <tal:t i18n:translate="">Birth date:</tal:t>
+            <span><tal:t i18n:translate="">Birth date:</tal:t></span>
             <tal:c tal:condition="birth_date"
                    tal:content="birth_date.strftime('%d/%m/%Y')"></tal:c>
@@ -44,102 +54,96 @@
           </li>
           <li>
-            <tal:t i18n:translate="">Height:</tal:t>
+            <span><tal:t i18n:translate="">Height:</tal:t></span>
             <tal:c tal:content="getattr(context, 'height', '-')"></tal:c> meters
           </li>
           <li>
-            <tal:t i18n:translate="">Weight:</tal:t>
+            <span><tal:t i18n:translate="">Weight:</tal:t></span>
             <tal:c tal:content="getattr(context, 'weight', '-')"></tal:c> kg
           </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="total-workouts">
-        <tal:w tal:replace="context.num_workouts"></tal:w>
-        <tal:t i18n:translate="">workouts</tal:t>
-      </div>
+      <div class="workout-content">
+        <div class="workout-list">
+          <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">
-        <div class="svg-cotent">
-          <svg width="800" height="180" viewBox="0 0 800 180"></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 class="month-stats js-month-stats">
+            <div class="svg-cotent">
+              <svg width="900" height="180" viewBox="0 0 900 180"></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>
 
-        <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>
+            <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>
 
 
-      <tal:r tal:repeat="workout workouts">
+          <tal:r tal:repeat="workout workouts">
 
-        <a name="workouts"></a>
+            <article class="workout-resume">
 
+              <h2 class="workout-title">
+                <a href="" tal:content="workout.title"
+                   tal:attributes="href request.resource_url(workout)"></a>
+              </h2>
 
-        <article class="workout-resume">
+              <ul class="workout-info">
+                <li>
+                  <tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
+                </li>
+                <li>
+                  <!--! use the properly formatted duration instead of the timedelta object -->
+                  <tal:c tal:content="workout._duration"></tal:c>
+                </li>
+                <li tal:condition="workout.distance">
+                  <tal:c tal:content="workout.rounded_distance"></tal:c> km
+                </li>
+              </ul>
 
-          <h2 class="workout-title">
-            <a href="" tal:content="workout.title"
-               tal:attributes="href request.resource_url(workout)"></a>
-          </h2>
+              <ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
+                <li tal:condition="hr">
+                  <span i18n:translate="">HR (bpm)</span>:
+                  <tal:c tal:content="hr['min']"></tal:c>
+                  <tal:t i18n:translate="">Min.</tal:t>,
+                  <tal:c tal:content="hr['avg']"></tal:c>
+                  <tal:t i18n:translate="">Avg.</tal:t>,
+                  <tal:c tal:content="hr['max']"></tal:c>
+                  <tal:t i18n:translate="">Max.</tal:t>
+                </li>
+                <li tal:condition="cad">
+                  <span i18n:translate="">Cad</span>:
+                  <tal:c tal:content="cad['min']"></tal:c>
+                  <tal:t i18n:translate="">Min.</tal:t>,
+                  <tal:c tal:content="cad['avg']"></tal:c>
+                  <tal:t i18n:translate="">Avg.</tal:t>,
+                  <tal:c tal:content="cad['max']"></tal:c>
+                  <tal:t i18n:translate="">Max.</tal:t>
+                </li>
+              </ul>
 
-          <ul class="workout-info">
-            <li>
-              <tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
-            </li>
-            <li>
-              <!--! use the properly formatted duration instead of the timedelta object -->
-              <tal:c tal:content="workout._duration"></tal:c>
-            </li>
-            <li tal:condition="workout.distance">
-              <tal:c tal:content="workout.rounded_distance"></tal:c> km
-            </li>
-          </ul>
+              <div class="workout-intro" tal:content="workout.notes"></div>
 
-          <ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
-            <li tal:condition="hr">
-              <span i18n:translate="">HR (bpm)</span>:
-              <tal:c tal:content="hr['min']"></tal:c>
-              <tal:t i18n:translate="">Min.</tal:t>,
-              <tal:c tal:content="hr['avg']"></tal:c>
-              <tal:t i18n:translate="">Avg.</tal:t>,
-              <tal:c tal:content="hr['max']"></tal:c>
-              <tal:t i18n:translate="">Max.</tal:t>
-            </li>
-            <li tal:condition="cad">
-              <span i18n:translate="">Cad</span>:
-              <tal:c tal:content="cad['min']"></tal:c>
-              <tal:t i18n:translate="">Min.</tal:t>,
-              <tal:c tal:content="cad['avg']"></tal:c>
-              <tal:t i18n:translate="">Avg.</tal:t>,
-              <tal:c tal:content="cad['max']"></tal:c>
-              <tal:t i18n:translate="">Max.</tal:t>
-            </li>
-          </ul>
+              <div class="workout-map" tal:condition="workout.has_gpx">
+                <a href="" tal:attributes="href request.resource_url(workout)">
+                  <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
+                            alt workout.title; title workout.title">
+                </a>
+              </div>
 
-          <div class="workout-intro" tal:content="workout.notes"></div>
+            </article>
 
-          <div class="workout-map" tal:condition="workout.has_gpx">
-            <a href="" tal:attributes="href request.resource_url(workout)">
-              <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
-                        alt workout.title; title workout.title">
-            </a>
-          </div>
-
-        </article>
-
-      </tal:r>
+          </tal:r>
+        </div>
+      </div>
     </div>
 
