Index: ow/static/css/main.css
===================================================================
--- ow/static/css/main.css	(revision d0fc76b51d7770732d84573668dd62d3b995215b)
+++ ow/static/css/main.css	(revision 1fe89ea002ea79bfdaa81b47ef82c7f6a265ce0a)
@@ -753,5 +753,5 @@
 }
 .aside-profile {
-  margin-bottom: 2em;
+  margin-bottom: 1em;
 }
 .aside-profile img {
@@ -775,4 +775,57 @@
   color: #555555;
 }
+/* Week report */
+.svg-cotent svg {
+  width: 100%;
+  height: 100%;
+}
+.svg-cotent .label {
+  font-size: 13px;
+  font-size: 0.8125rem;
+  text-anchor: middle;
+}
+.svg-cotent .tick {
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.week-stats {
+  border: 1px solid #e1e1e1;
+  background-color: rgba(225, 225, 225, 0.1);
+  padding: 0.75em;
+  border-radius: 4px;
+  margin-bottom: 2em;
+}
+.week-stats h3 {
+  margin: 0;
+  font-size: 14px;
+  font-size: 0.875rem;
+}
+.week-stats h3 + p {
+  margin: 0.25em 0 2em 0;
+  color: #959595;
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.workout-activity-summary {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  background-color: rgba(21, 21, 21, 0.8);
+  margin-bottom: 0.75em;
+}
+.workout-activity-summary li {
+  color: #e1e1e1;
+  border-bottom: 1px solid #959595;
+  padding: 0.75em 1em;
+  display: flex;
+  justify-content: space-between;
+}
+.workout-activity-summary li:last-child {
+  margin-bottom: 0;
+  border: none;
+}
+.workout-activity-summary li span:first-child {
+  font-weight: bold;
+}
 .workout-activity-tree {
   list-style-type: none;
@@ -800,4 +853,6 @@
   font-weight: 700;
   margin-bottom: 0.5em;
+  font-size: 16px;
+  font-size: 1rem;
 }
 .workout-activity-tree a.viewing-month {
@@ -825,2 +880,21 @@
   background-color: #e1e1e1;
 }
+/* Workout detail */
+#map {
+  height: 50vh;
+}
+/* dashboard graphics*/
+.x-axis path,
+.x-axis line {
+  fill: none;
+  stroke: none;
+}
+.bar {
+  fill: #f8b5be;
+}
+.bar:hover {
+  fill: #ee4056;
+}
+.current {
+  fill: #ee4056;
+}
Index: ow/static/js/ow.js
===================================================================
--- ow/static/js/ow.js	(revision d0fc76b51d7770732d84573668dd62d3b995215b)
+++ ow/static/js/ow.js	(revision 1fe89ea002ea79bfdaa81b47ef82c7f6a265ce0a)
@@ -148,5 +148,5 @@
          */
         var chart = d3.select("svg"),
-            margin = {top: 20, right: 20, bottom: 30, left: 50},
+            margin = {top: 17, right: 0, bottom: 20, left: 0},
             width = +chart.attr("width") - margin.left - margin.right,
             height = +chart.attr("height") - margin.top - margin.bottom,
@@ -211,6 +211,13 @@
 	        })
 	        .attr("y", function (d) {
-                    return y(Number(d.distance) + 5);
-	        })
+                    /*
+                      Get the value for the current bar, then get the maximum
+                      value to be displayed in the bar, which is used to
+                      calculate the proper position of the label for this bar,
+                      relatively to its height (1% above the bar)
+                     */
+                    var max = y.domain()[1];
+                    return y(d.distance + y.domain()[1] * 0.02);
+            })
                 .text(function(d) {
                     if (Number(d.distance) > 0) {
Index: ow/static/less/main.less
===================================================================
--- ow/static/less/main.less	(revision d0fc76b51d7770732d84573668dd62d3b995215b)
+++ ow/static/less/main.less	(revision 1fe89ea002ea79bfdaa81b47ef82c7f6a265ce0a)
@@ -25,2 +25,27 @@
 @import "modules/workout.less";
 
+
+
+/* Workout detail */
+#map {
+    height: 50vh;
+}
+
+/* dashboard graphics*/
+
+.x-axis path, .x-axis line {
+    fill: none;
+    stroke: none;
+}
+
+.bar {
+    fill: #f8b5be;
+}
+
+.bar:hover {
+    fill: #ee4056;
+}
+
+.current {
+    fill: #ee4056;
+}
Index: ow/static/less/modules/workout.less
===================================================================
--- ow/static/less/modules/workout.less	(revision d0fc76b51d7770732d84573668dd62d3b995215b)
+++ ow/static/less/modules/workout.less	(revision 1fe89ea002ea79bfdaa81b47ef82c7f6a265ce0a)
@@ -154,6 +154,8 @@
 }
 
+
+
 .aside-profile {
-    margin-bottom: 2em;
+    margin-bottom: 1em;
     img {
         width: 80px;
@@ -177,4 +179,62 @@
 
 
+
+/* Week report */
+
+.svg-cotent {
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+
+    .label {
+        .font-size(13);
+        text-anchor: middle;
+    }
+    .tick {
+        .font-size(13);
+    }
+
+}
+.week-stats {
+    border: 1px solid @color-main-light;
+    background-color: fade(@color-main-light, 10%);
+    padding: .75em;
+    border-radius: 4px;
+    margin-bottom: 2em;
+    h3 {
+        margin: 0;
+        .font-size(14);
+        & + p {
+            margin: .25em 0 2em 0;
+            color: @color-main-medium;
+            .font-size(13);
+        }
+    }
+}
+
+.workout-activity-summary {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    background-color: fade(@color-main, 80%);
+    margin-bottom: .75em;
+    li {
+        color: @color-main-light;
+        border-bottom: 1px solid @color-main-medium;
+        padding: .75em 1em;
+        display: flex;
+        justify-content: space-between;
+        &:last-child {
+            margin-bottom: 0;
+            border: none;
+        }
+        span {
+            &:first-child {
+                font-weight: bold;
+            }
+        }
+    }
+}
 
 .workout-activity-tree {
@@ -201,4 +261,5 @@
             font-weight: 700;
             margin-bottom: .5em;
+            .font-size(16);
         }
         &.viewing-month {
Index: ow/templates/dashboard.pt
===================================================================
--- ow/templates/dashboard.pt	(revision d0fc76b51d7770732d84573668dd62d3b995215b)
+++ ow/templates/dashboard.pt	(revision 1fe89ea002ea79bfdaa81b47ef82c7f6a265ce0a)
@@ -108,16 +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="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">
@@ -128,4 +149,29 @@
                                              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'">
@@ -146,60 +192,4 @@
           </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>
 
