diff --git a/smash/web/forms.py b/smash/web/forms.py
index 4a3b4c64bf12eabf8925e53ebaa552c88eb55b7d..ee7d125774ba686dede8a5c6da27a43ee4122af1 100644
--- a/smash/web/forms.py
+++ b/smash/web/forms.py
@@ -15,6 +15,10 @@ DATEPICKER_DATE_ATTRS = {
     'data-date-format':'yyyy-mm-dd',
     'data-date-orientation': 'bottom'
 }
+DATETIMEPICKER_DATE_ATTRS = {
+    'class':'datetimepicker',
+    'data-date-format':'Y-MM-DD HH:mm',
+}
 
 def validate_subject_nd_number(self):
     subject = self.cleaned_data
@@ -119,20 +123,27 @@ class AppointmentDetailForm(ModelForm):
         model = Appointment
         fields = '__all__'
 
+    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM)',
+        widget=forms.DateTimeInput(DATETIMEPICKER_DATE_ATTRS)
+    )
 
 class AppointmentEditForm(ModelForm):
     class Meta:
         model = Appointment
         fields = '__all__'
 
-    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM:SS)')
+    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM)',
+        widget=forms.DateTimeInput(DATETIMEPICKER_DATE_ATTRS)
+    )
 
 class AppointmentAddForm(ModelForm):
     class Meta:
         model = Appointment
         exclude = ['is_finished']
 
-    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM:SS)')
+    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM)',
+        widget=forms.DateTimeInput(DATETIMEPICKER_DATE_ATTRS)
+    )
 
 class VisitDetailForm(ModelForm):
     datetime_begin = forms.DateField(label="Visit begins on",
diff --git a/smash/web/templates/appointments/add.html b/smash/web/templates/appointments/add.html
index ac6a5371077597b7bc887b47e4bb17d76d8bc868..cbfab41313139b6f86ca04f75ecf70884db431f8 100644
--- a/smash/web/templates/appointments/add.html
+++ b/smash/web/templates/appointments/add.html
@@ -6,6 +6,8 @@
 {{ block.super }}
 	<!-- DataTables -->
   <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+
+  {% include "includes/datetimepicker.css.html" %}
 {% endblock styles %}
 
 {% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -88,4 +90,6 @@
 			});
 		});
 	</script>
+
+  {% include "includes/datetimepicker.js.html" %}
 {% endblock scripts %}
diff --git a/smash/web/templates/appointments/details.html b/smash/web/templates/appointments/details.html
index b08c51d0a0a1b388c2a12f97b075d00fd69924df..28d1ef3b47aef5e3fef916b7836a4d9187ae7e36 100644
--- a/smash/web/templates/appointments/details.html
+++ b/smash/web/templates/appointments/details.html
@@ -1,10 +1,13 @@
 {% extends "_base.html" %}
 {% load static %}
+{% load filters %}
 
 {% block styles %}
 {{ block.super }}
 	<!-- DataTables -->
   <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+
+  {% include "includes/datetimepicker.css.html" %}
 {% endblock styles %}
 
 {% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -35,12 +38,12 @@
 		<div class="box-body">
 			{% for field in form %}
 				<div class="form-group">
-					<label for="{# TODO #}" class="col-sm-2 control-label">
+					<label class="col-sm-3 control-label">
 						{{ field.label }}
 					</label>
 
-					<div class="col-sm-10">
-						{{ field }}
+					<div class="col-sm-9">
+						{{ field|add_class:'form-control' }}
 					</div>
 
 					{% if field.help_text %}
@@ -81,4 +84,6 @@
 			});
 		});
 	</script>
+
+  {% include "includes/datetimepicker.js.html" %}
 {% endblock scripts %}
diff --git a/smash/web/templates/appointments/edit.html b/smash/web/templates/appointments/edit.html
index 218051834dde14be299cdae1732a89ed5f88a8fb..0b53364f4d057564b06d7272fabc28ec384ca9f0 100644
--- a/smash/web/templates/appointments/edit.html
+++ b/smash/web/templates/appointments/edit.html
@@ -6,6 +6,8 @@
 {{ block.super }}
 	<!-- DataTables -->
   <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+
+  {% include "includes/datetimepicker.css.html" %}
 {% endblock styles %}
 
 {% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -87,4 +89,6 @@
 			});
 		});
 	</script>
+
+  {% include "includes/datetimepicker.js.html" %}
 {% endblock scripts %}
diff --git a/smash/web/templates/includes/datetimepicker.css.html b/smash/web/templates/includes/datetimepicker.css.html
new file mode 100644
index 0000000000000000000000000000000000000000..0a34152592cab55fc1fe7aca8354135337e71d32
--- /dev/null
+++ b/smash/web/templates/includes/datetimepicker.css.html
@@ -0,0 +1,3 @@
+{% load static %}
+<!-- Bootstrap datepicker -->
+<link rel="stylesheet" href="{% static 'AdminLTE/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}">
diff --git a/smash/web/templates/includes/datetimepicker.js.html b/smash/web/templates/includes/datetimepicker.js.html
new file mode 100644
index 0000000000000000000000000000000000000000..f6b5f8a785b10e6ad5eb6fc96eebc2d56801b168
--- /dev/null
+++ b/smash/web/templates/includes/datetimepicker.js.html
@@ -0,0 +1,10 @@
+{% load static %}
+<script src="{% static 'AdminLTE/plugins/moment.js/moment.min.js' %}"></script>
+<script src="{% static 'AdminLTE/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
+<script>
+  $(document).ready(function () {
+    $(".datetimepicker").datetimepicker({
+      'sideBySide': true
+    });
+  });
+</script>
diff --git a/todos.txt b/todos.txt
index b3492bba995b1d3626cabfef9ac0f92acf3f9525..261e8d71eccbefea0f53193c9a39530a6c980183 100644
--- a/todos.txt
+++ b/todos.txt
@@ -1,5 +1,8 @@
 * TODO List
 
+** Notice
+Moved all the important stuff to gitlab issues
+
 ** Important
  - label for's => give them correct html id's (all html forms).
    Currently it works, but it's not valid HTML, as the ID (for labels) are all the same.