Index: ow/templates/add_manual_workout.pt
===================================================================
--- ow/templates/add_manual_workout.pt	(revision cc4ff0559b5641a257b6a4c2806c5885f623af5e)
+++ ow/templates/add_manual_workout.pt	(revision 208da8b9e1fc029c4d757997ad6c7fd47a78c45d)
@@ -17,59 +17,75 @@
 
   <metal:css metal:fill-slot="css">
-    <link rel="stylesheet"
-          href="${request.static_url('ow:static/components/EasyAutocomplete/easy-autocomplete.min.css')}" />
+      <link rel="stylesheet" href="${request.static_url('ow:static/components/EasyAutocomplete/easy-autocomplete.min.css')}" />
+      <link rel="stylesheet" href="${request.static_url('ow:static/components/pickadate/themes/default.css')}" />
+      <link rel="stylesheet" href="${request.static_url('ow:static/components/pickadate/themes/default.date.css')}" />
   </metal:css>
 
   <metal:content metal:fill-slot="content">
-    <div id="add_workout">
-      ${form.begin()}
-      ${form.csrf_token()}
+      <h2 i18n:translate="">Add a new workout</h2>
+    <div class="add_workout ow-forms">
+        ${form.begin()}
+        ${form.csrf_token()}
 
-      <fieldset>
-        ${form.errorlist('sport')}
-        <label for="sport" i18n:translate="">Sport/Activity:</label>
-        ${form.text('sport')}
-        ${form.errorlist('title')}
-        <label for="title" i18n:translate="">Title:</label>
-        ${form.text('title')}
+        <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>
+
+        <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>
+
+            <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>
       </fieldset>
 
       <fieldset>
-        ${form.errorlist('start_date')}
-        <label for="start_date" i18n:translate="">Start date (dd/mm/yyyy):
-        </label>
-        ${form.text('start_date', size=10)}
-        ${form.errorlist('start_time')}
-        <label for="start_time" i18n:translate="">Start time (HH:MM):</label>
-        ${form.text('start_time', size=5)}
-
-        <br /> <hr />  <!-- o_O! -->
-
-        ${form.errorlist('duration_hours')}
-        <label for="duration_hours" i18n:translate="">Hours:</label>
-        ${form.text('duration_hours', size=3)}
-
-        ${form.errorlist('duration_minutes')}
-        <label for="duration_minutes" i18n:translate="">Minutes:</label>
-        ${form.text('duration_minutes', size=3)}
-
-        ${form.errorlist('duration_seconds')}
-        <label for="duration_seconds" i18n:translate="">Seconds:</label>
-        ${form.text('duration_seconds', size=3)}
-
-        ${form.errorlist('distance')}
-        <label for="distance" i18n:translate="">Distance (Km):</label>
-        ${form.text('distance', size=4)}
+          <label for="notes" i18n:translate="">Notes:</label>
+          ${form.errorlist('notes')}
+          ${form.textarea('notes', rows=10, cols=50)}
       </fieldset>
 
-      <fieldset>
-        ${form.errorlist('notes')}
-        <label for="notes" i18n:translate="">Notes:</label>
-        ${form.textarea('notes', rows=10, cols=50)}
-      </fieldset>
-
-      ${form.submit("submit", "Save")}
-      <a href="" tal:attributes="href request.resource_url(request.root)"
-         i18n:translate="">Cancel</a>
+      <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.end()}
@@ -80,13 +96,20 @@
 
   <metal:body-js metal:fill-slot="body-js">
-    <script src="${request.static_url('ow:static/components/EasyAutocomplete/jquery.easy-autocomplete.min.js')}"></script>
-    <script type="text/javascript">
-      $(document).ready(function() {
-          var options = {
-              data: ${request.root.sports_json},
-          };
-          $("#sport").easyAutocomplete(options);
-      });
-    </script>
+      <script src="${request.static_url('ow:static/components/EasyAutocomplete/jquery.easy-autocomplete.min.js')}"></script>
+      <script src="${request.static_url('ow:static/components/pickadate/picker.js')}"></script>
+      <script src="${request.static_url('ow:static/components/pickadate/picker.date.js')}"></script>
+
+      <script type="text/javascript">
+       $(document).ready(function() {
+           var options = {
+               data: ${request.root.sports_json},
+           };
+           $("#sport").easyAutocomplete(options);
+           $('#start_date').pickadate({
+               format: 'dd/mm/yyyy',
+               formatSubmit: 'dd/mm/yyyy',
+           });
+       });
+      </script>
   </metal:body-js>
 
