Index: ow/static/css/main.css
===================================================================
--- ow/static/css/main.css	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/static/css/main.css	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -429,4 +429,139 @@
   box-sizing: inherit;
 }
+/* ==========================================================================
+   Wrappers
+   ========================================================================== */
+/**
+ * Common wrappers to use in Scms-site.
+ * To reducing css size you can use extends instead of mixins
+ * to move the selector up to the properties you wish to use.
+ *
+ * Example LESS:
+ * .myclass {
+ *		&:extend(.wrapper);
+ * }
+ */
+.wrapper,
+.wrapper-s,
+.wrapper-l,
+.wrapper-xl,
+.ow-forms {
+  display: block;
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin: 0 auto;
+}
+@media (min-width: 480px) {
+  .wrapper,
+  .wrapper-s,
+  .wrapper-l,
+  .wrapper-xl,
+  .ow-forms {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+@media (min-width: 800px) {
+  .wrapper,
+  .wrapper-s,
+  .wrapper-l,
+  .wrapper-xl,
+  .ow-forms {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+@media (min-width: 1024px) {
+  .wrapper,
+  .wrapper-s,
+  .wrapper-l,
+  .wrapper-xl,
+  .ow-forms {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+}
+@media (min-width: 1440px) {
+  .wrapper,
+  .wrapper-s,
+  .wrapper-l,
+  .wrapper-xl,
+  .ow-forms {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+}
+@media (min-width: 320px) {
+  .wrapper-s,
+  .ow-forms {
+    max-width: 740px;
+  }
+}
+@media (min-width: 320px) {
+  .wrapper-l {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 320px) {
+  .wrapper-xl {
+    max-width: 1440px;
+  }
+}
+/* Layout */
+.ly-flex {
+  display: flex;
+  justify-content: space-between;
+}
+.ly-flex.ly-center {
+  align-items: center;
+}
+.ly-flex.ly-start {
+  justify-content: flex-start;
+}
+.ly-flex.ly-2 {
+  flex-flow: row wrap;
+}
+.ly-flex.ly-2 > div,
+.ly-flex.ly-2 > li,
+.ly-flex.ly-2 > p,
+.ly-flex.ly-2 > a {
+  width: 50%;
+}
+.ly-flex.ly-2.has-gap > div,
+.ly-flex.ly-2.has-gap > li,
+.ly-flex.ly-2.has-gap > p,
+.ly-flex.ly-2.has-gap > a {
+  width: 48%;
+}
+.ly-flex.ly-3 {
+  flex-flow: row wrap;
+}
+.ly-flex.ly-3 > div,
+.ly-flex.ly-3 > li,
+.ly-flex.ly-3 > p {
+  width: 33%;
+}
+.ly-flex.ly-3.has-gap > div,
+.ly-flex.ly-3.has-gap > li,
+.ly-flex.ly-3.has-gap > p {
+  width: 31%;
+}
+.ly-flex.ly-4 {
+  flex-flow: row wrap;
+}
+.ly-flex.ly-4 > div,
+.ly-flex.ly-4 > li,
+.ly-flex.ly-4 > p {
+  width: 25%;
+}
+.ly-flex.ly-4.has-gap > div,
+.ly-flex.ly-4.has-gap > li,
+.ly-flex.ly-4.has-gap > p {
+  width: 23%;
+}
+.ly-flex-end {
+  align-items: flex-end;
+}
 /* Generic default forms */
 form {
@@ -440,5 +575,6 @@
   padding: 0;
 }
-fieldset > div {
+fieldset > div,
+fieldset > p {
   margin-bottom: 1.5em;
 }
@@ -453,4 +589,20 @@
   border: 1px solid transparent;
   border-radius: 2px;
+}
+.ow-forms label {
+  display: block;
+  margin-bottom: 0.35em;
+  color: #959595;
+}
+.ow-forms textarea {
+  resize: vertical;
+  height: 200px;
+}
+.ow-forms textarea,
+.ow-forms input {
+  width: 100%;
+  padding: 0.65em;
+  border-radius: 4px;
+  border: 1px solid #e1e1e1;
 }
 /* Generic button */
@@ -475,4 +627,15 @@
   line-height: 1.25;
   max-width: 100%;
+  width: auto;
+}
+.button-normal {
+  width: auto;
+}
+.button-normal:hover {
+  background-color: #959595;
+  color: white;
+}
+.button-important {
+  background-color: #EE4056;
 }
 .header-content {
@@ -792,9 +955,10 @@
 /* Workout detail */
 #map {
+  width: 100%;
   height: 400px;
 }
 @media (min-width: 480px) {
   #map {
-    height: calc(100vh - 380px);
+    height: calc(100vh - 465px);
   }
 }
@@ -1006,4 +1170,23 @@
   background-color: #e1e1e1;
 }
+.ow-forms {
+  padding-top: 2em;
+}
+.ow-forms h2 {
+  border-top: 1px solid #e1e1e1;
+  padding-top: 0.5em;
+}
+.back {
+  color: #EE4056;
+  text-decoration: none;
+  font-weight: 700;
+}
+.back:before {
+  content: "⬅";
+  margin-right: 0.5em;
+}
+.back:hover {
+  color: #151515;
+}
 .login-content {
   background-image: url("../media/img/back-01.jpg");
@@ -1115,4 +1298,16 @@
   font-weight: bold;
 }
+.total-workouts span {
+  color: #959595;
+  margin-right: 0.5em;
+}
+.total-workouts span:first-child {
+  color: #151515;
+}
+.total-workouts span:first-child:after {
+  content: "|";
+  color: #e1e1e1;
+  margin-left: 0.5em;
+}
 .profile-data {
   list-style-type: none;
Index: ow/static/less/layout/layout.less
===================================================================
--- ow/static/less/layout/layout.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
+++ ow/static/less/layout/layout.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -0,0 +1,50 @@
+/* Layout */
+
+.ly-flex {
+    display: flex;
+    justify-content: space-between;
+    &.ly-center {
+        align-items: center;
+    }
+    &.ly-start {
+        justify-content: flex-start;
+    }
+
+    &.ly-2 {
+        flex-flow: row wrap;
+        >div, >li, >p, >a {
+            width: 50%;
+        }
+        &.has-gap {
+            >div, >li, >p, >a   {
+                width: 48%;
+            }
+        }
+    }
+    &.ly-3 {
+        flex-flow: row wrap;
+        >div, >li, >p {
+            width: 33%;
+        }
+        &.has-gap {
+            >div, >li, >p   {
+                width: 31%;
+            }
+        }
+    }
+
+    &.ly-4 {
+        flex-flow: row wrap;
+        >div, >li, >p {
+            width: 25%;
+        }
+        &.has-gap {
+            >div, >li, >p   {
+                width: 23%;
+            }
+        }
+    }
+}
+.ly-flex-end {
+    align-items: flex-end;
+}
Index: ow/static/less/layout/wrapper.less
===================================================================
--- ow/static/less/layout/wrapper.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
+++ ow/static/less/layout/wrapper.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -0,0 +1,64 @@
+/* ==========================================================================
+   Wrappers
+   ========================================================================== */
+
+/**
+ * Common wrappers to use in Scms-site.
+ * To reducing css size you can use extends instead of mixins
+ * to move the selector up to the properties you wish to use.
+ *
+ * Example LESS:
+ * .myclass {
+ *		&:extend(.wrapper);
+ * }
+ */
+
+.wrapper,
+.wrapper-s,
+.wrapper-l,
+.wrapper-xl {
+ 	display: block;
+ 	width: 100%;
+ 	padding-left: 1rem;
+ 	padding-right: 1rem;
+ 	margin: 0 auto;
+
+ 	@media (min-width: @screen-s) {
+ 		padding-left: 2rem;
+		padding-right: 2rem;
+ 	}
+
+ 	@media (min-width: @screen-m) {
+ 		padding-left: 4rem;
+		padding-right: 4rem;
+ 	}
+
+ 	@media (min-width: @screen-l) {
+ 		padding-left: 5rem;
+		padding-right: 5rem;
+ 	}
+
+ 	@media (min-width: @screen-xl) {
+ 		padding-left: 6rem;
+		padding-right: 6rem;
+ 	}
+}
+.wrapper-s{
+	@media (min-width: @screen-xs) {
+ 		max-width: 740px;
+ 	}
+}
+
+
+.wrapper-l{
+	@media (min-width: @screen-xs) {
+ 		max-width: 1280px;
+ 	}
+}
+
+
+.wrapper-xl{
+	@media (min-width: @screen-xs) {
+ 		max-width: 1440px;
+ 	}
+}
Index: ow/static/less/main.less
===================================================================
--- ow/static/less/main.less	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/static/less/main.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -16,4 +16,8 @@
 @import "common.less";
 
+// layout
+@import "layout/wrapper.less";
+@import "layout/layout.less";
+
 // ui
 @import "ui/form.less";
@@ -23,4 +27,5 @@
 @import "modules/header.less";
 @import "modules/workout.less";
+@import "modules/forms.less";
 
 // Pages
Index: ow/static/less/modules/forms.less
===================================================================
--- ow/static/less/modules/forms.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
+++ ow/static/less/modules/forms.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -0,0 +1,33 @@
+.ow-forms {
+	&:extend(.wrapper-s);
+	padding-top: 2em;
+
+	h2 {
+		border-top: 1px solid @color-main-light;
+		padding-top: .5em;
+	}
+}
+
+// .error {
+// 	list-style-type: none;
+// 	padding: 0;
+// 	margin: 0;
+// 	li {
+// 		background-color: @color-app;
+// 		padding:.5em;
+// 		color: white;
+// 	}
+// }
+
+.back {
+	color: @color-app;
+	text-decoration: none;
+	font-weight: 700;
+	&:before {
+		content: "⬅";
+		margin-right: .5em;
+	}
+	&:hover {
+		color: @color-main;
+	}
+}
Index: ow/static/less/modules/workout.less
===================================================================
--- ow/static/less/modules/workout.less	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/static/less/modules/workout.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -191,7 +191,8 @@
 /* Workout detail */
 #map {
+    width: 100%;
     height: 400px;
     @media (min-width: @screen-s){
-        height: calc(100vh - 380px);
+        height: calc(100vh - 465px);
     }
 }
Index: ow/static/less/pages/profile.less
===================================================================
--- ow/static/less/pages/profile.less	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/static/less/pages/profile.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -42,4 +42,16 @@
 	.font-size(13);
 	font-weight: bold;
+	span {
+		color: @color-main-medium;
+		margin-right: .5em;
+		&:first-child {
+			color: @color-main;
+			&:after {
+				content: "|";
+				color: @color-main-light;
+				margin-left:  .5em;
+			}
+		}
+	}
 }
 
Index: ow/static/less/ui/buttons.less
===================================================================
--- ow/static/less/ui/buttons.less	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/static/less/ui/buttons.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -20,3 +20,15 @@
     line-height: 1.25;
     max-width: 100%;
+    width: auto;
 }
+
+.button-normal {
+    width: auto;
+    &:hover {
+        background-color: @color-main-medium;
+        color: white;
+    }
+}
+.button-important {
+    background-color: @color-app;
+}
Index: ow/static/less/ui/form.less
===================================================================
--- ow/static/less/ui/form.less	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/static/less/ui/form.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -12,5 +12,7 @@
     padding: 0;
 }
-fieldset > div {
+
+fieldset > div,
+fieldset > p {
     margin-bottom: 1.5em;
 }
@@ -27,2 +29,21 @@
     border-radius: 2px;
 }
+
+.ow-forms {
+    label {
+        display: block;
+        margin-bottom: .35em;
+        color: @color-main-medium;
+    }
+    textarea {
+        resize: vertical;
+        height: 200px;
+    }
+    textarea,
+    input {
+        width: 100%;
+        padding: .65em;
+        border-radius: 4px;
+        border: 1px solid @color-main-light;
+    }
+}
Index: ow/static/less/vendors/leaflet-elevation.less
===================================================================
--- ow/static/less/vendors/leaflet-elevation.less	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/static/less/vendors/leaflet-elevation.less	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -72,5 +72,4 @@
 
 /* txt on map */
-
 .openworkouts-theme.height-focus-label {
     display: none;
@@ -82,4 +81,3 @@
     stroke: @color-app;
     stroke-width: 10px;
-
 }
Index: ow/templates/add_manual_workout.pt
===================================================================
--- ow/templates/add_manual_workout.pt	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/templates/add_manual_workout.pt	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -23,69 +23,68 @@
 
   <metal:content metal:fill-slot="content">
-      <h2 i18n:translate="">Add a new workout</h2>
+
     <div class="add_workout ow-forms">
+      <a href="" class="back"
+             tal:attributes="href request.resource_url(context)"
+             i18n:translate="">Back</a>
+        <h2 i18n:translate="">Add a new workout</h2>
         ${form.begin()}
         ${form.csrf_token()}
 
         <fieldset>
-            <p>
-                <label for="sport" i18n:translate="">Sport/Activity</label>
-                ${form.errorlist('sport')}
-                ${form.text('sport')}
-            </p>
-            <p>
-                <label for="title" i18n:translate="">Title</label>
-                ${form.errorlist('title')}
-                ${form.text('title')}
-            </p>
-        </fieldset>
+          <p>
+              <label for="sport" i18n:translate="">Sport/Activity</label>
+              ${form.errorlist('sport')}
+              ${form.text('sport')}
+          </p>
+          <p>
+              <label for="title" i18n:translate="">Title</label>
+              ${form.errorlist('title')}
+              ${form.text('title')}
+          </p>
+          <div class="input-container ly-flex ly-2 has-gap">
+              <div>
+                  <label for="start_date" i18n:translate="">Start date (dd/mm/yyyy)</label>
+                  ${form.errorlist('start_date')}
+                  ${form.text('start_date', size=10, **{'class': "date"})}
+              </div>
+              <div>
+                  <label for="start_time" i18n:translate="">Start time (HH:MM)</label>
+                  ${form.errorlist('start_time')}
+                  ${form.text('start_time', size=5, **{'class': "time"})}
+              </div>
+          </div>
 
-        <fieldset>
-            <div class="input-container">
-                <div>
-                    <label for="start_date" i18n:translate="">Start date (dd/mm/yyyy)</label>
-                    ${form.errorlist('start_date')}
-                    ${form.text('start_date', size=10, **{'class': "date"})}
-                </div>
-                <div>
-                    <label for="start_time" i18n:translate="">Start time (HH:MM)</label>
-                    ${form.errorlist('start_time')}
-                    ${form.text('start_time', size=5, **{'class': "time"})}
-                </div>
+          <div class="input-container ly-flex ly-3 has-gap">
+            <div>
+              <label for="duration_hours" i18n:translate="">Hours</label>
+              ${form.errorlist('duration_hours')}
+              ${form.text('duration_hours', size=3, **{'class': "number"})}
             </div>
+            <div>
+              <label for="duration_minutes" i18n:translate="">Minutes</label>
+              ${form.errorlist('duration_minutes')}
+              ${form.text('duration_minutes', size=3, **{'class': "number"})}
+            </div>
+            <div>
+              <label for="duration_seconds" i18n:translate="">Seconds</label>
+              ${form.errorlist('duration_seconds')}
+              ${form.text('duration_seconds', size=3, **{'class': "number"})}
+            </div>
+          </div>
 
-            <div class="input-container">
-                <label for="duration_hours" i18n:translate="">Hours</label>
-                ${form.errorlist('duration_hours')}
-                ${form.text('duration_hours', size=3, **{'class': "number"})}
-
-                <label for="duration_minutes" i18n:translate="">Minutes</label>
-                ${form.errorlist('duration_minutes')}
-                ${form.text('duration_minutes', size=3, **{'class': "number"})}
-
-                <label for="duration_seconds" i18n:translate="">Seconds</label>
-                ${form.errorlist('duration_seconds')}
-                ${form.text('duration_seconds', size=3, **{'class': "number"})}
-            </div>
-
-            <p>
-                <label for="distance" i18n:translate="">Distance (Km):</label>
-                ${form.errorlist('distance')}
-                ${form.text('distance', size=4, **{'class': "number"})}
-            </p>
+          <p>
+              <label for="distance" i18n:translate="">Distance (Km):</label>
+              ${form.errorlist('distance')}
+              ${form.text('distance', size=4, **{'class': "number"})}
+          </p>
+          <div>
+            <label for="notes" i18n:translate="">Notes:</label>
+            ${form.errorlist('notes')}
+            ${form.textarea('notes', rows=10, cols=50)}
+          </div>
       </fieldset>
 
-      <fieldset>
-          <label for="notes" i18n:translate="">Notes:</label>
-          ${form.errorlist('notes')}
-          ${form.textarea('notes', rows=10, cols=50)}
-      </fieldset>
-
-      <p>
-          ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
-          <a href="" class="button button-important"
-             tal:attributes="href request.resource_url(context)"
-             i18n:translate="">Cancel</a>
-      </p>
+        ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
 
       ${form.end()}
Index: ow/templates/add_workout.pt
===================================================================
--- ow/templates/add_workout.pt	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/templates/add_workout.pt	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -17,40 +17,32 @@
 
   <metal:content metal:fill-slot="content">
-    <h2 i18n:translate="">Upload workout file</h2>
     <div class="upload-workout ow-forms">
+      <a href="" class="back"
+           tal:attributes="href request.resource_url(context)"
+           i18n:translate="">Back</a>
+      <h2 i18n:translate="">Upload workout file</h2>
         ${form.begin(multipart=True)}
         ${form.csrf_token()}
 
         <fieldset>
-            <p>
-                <label for="title" i18n:translate="">Title:</label>
-                ${form.errorlist('title')}
-                ${form.text('title')}
-            </p>
+          <p>
+              <label for="title" i18n:translate="">Title</label>
+              ${form.errorlist('title')}
+              ${form.text('title')}
+          </p>
+          <p>
+              <label for="notes" i18n:translate="">Notes</label>
+              ${form.errorlist('notes')}
+              ${form.textarea('notes', rows=10, cols=50)}
+          </p>
+          <p>
+              <label for="tracking_file" i18n:translate="">
+                  Workout file (gpx, fit)</label>
+              ${form.errorlist('tracking_file')}
+              ${form.file('tracking_file')}
+          </p>
         </fieldset>
 
-        <fieldset>
-            <p>
-                <label for="notes" i18n:translate="">Notes:</label>
-                ${form.errorlist('notes')}
-                ${form.textarea('notes', rows=10, cols=50)}
-            </p>
-        </fieldset>
-
-        <fieldset>
-            <p>
-                <label for="tracking_file" i18n:translate="">
-                    Workout file (gpx, fit):</label>
-                ${form.errorlist('tracking_file')}
-                ${form.file('tracking_file')}
-            </p>
-        </fieldset>
-
-        <p>
-            ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
-            <a href="" class="button button-important"
-               tal:attributes="href request.resource_url(context)"
-               i18n:translate="">Cancel</a>
-        </p>
+        ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
 
       ${form.end()}
Index: ow/templates/update_workout_from_file.pt
===================================================================
--- ow/templates/update_workout_from_file.pt	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/templates/update_workout_from_file.pt	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -19,5 +19,9 @@
 
   <metal:content metal:fill-slot="content">
-    <div id="update_workout_file">
+    <div id="update_workout_file" class="ow-forms">
+
+      <a class="back" href="" tal:attributes="href request.resource_url(request.root)"
+         i18n:translate="">Back</a>
+
       ${form.begin(multipart=True)}
       ${form.csrf_token()}
@@ -25,26 +29,31 @@
       <div tal:condition="context.has_tracking_file"
            i18n:translate="">
-        Existing
+        <h2>Existing
         <tal:filetype i18n:name="filetype"
                       tal:content="context.tracking_filetype"></tal:filetype>
-        tracking file data:
-        <tal:data i18n:name="start"
-                  tal:content="context.start"></tal:data> -
-        <tal:data i18n:name="end"
-                  tal:content="context.end"></tal:data> -
-        <tal:data i18n:name="distance"
+        tracking file data</h2>
+        <p>
+          <tal:data i18n:name="start"
+                  tal:content="context.start"></tal:data>
+        </p>
+        <p>
+          <tal:data i18n:name="end"
+                  tal:content="context.end"></tal:data>
+        </p>
+        <p>
+          <tal:data i18n:name="distance"
                   tal:content="context.distance"></tal:data> kms
+        </p>
       </div>
 
       <fieldset>
         ${form.errorlist('tracking_file')}
-        <label for="notes" i18n:translate="">Workout file (gpx, fit):</label>
-        ${form.file('tracking_file')}
+        <div>
+          <label for="notes" i18n:translate="">Workout file (gpx, fit):</label>
+          ${form.file('tracking_file')}
+        </div>
       </fieldset>
 
-      ${form.submit("submit", "Save")}
-      <a href="" tal:attributes="href request.resource_url(request.root)"
-         i18n:translate="">Cancel</a>
-
+      ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
       ${form.end()}
     </div>
Index: ow/templates/workout.pt
===================================================================
--- ow/templates/workout.pt	(revision 978575d0b6cac201f12ec312c810fd043658f7f9)
+++ ow/templates/workout.pt	(revision 01674ff268b00c33b71d0cf6fd54c8357fa37f45)
@@ -103,8 +103,8 @@
         <div id="elevation"></div>
       </div>
+
     </div>
+        <div id="map" tal:condition="context.has_gpx"></div>
 
-    <!--! Track map -->
-    <div id="map" tal:condition="context.has_gpx"></div>
   </metal:content>
 
