diff --git a/opal/static/css/opal.css b/opal/static/css/opal.css
index 91f1bd879..897fa9cba 100644
--- a/opal/static/css/opal.css
+++ b/opal/static/css/opal.css
@@ -1219,7 +1219,6 @@ hr.bold{
   overflow-y: auto;
 }
 
-.btn.btn-opal-xs{
-  font-size: 12px;
-  padding: 2px 5px;
+.input-group .btn{
+  padding: 8.5px 12px;
 }
diff --git a/opal/templates/_helpers/datepicker.html b/opal/templates/_helpers/datepicker.html
index f6ca1e50e..c4e6fb991 100644
--- a/opal/templates/_helpers/datepicker.html
+++ b/opal/templates/_helpers/datepicker.html
@@ -10,31 +10,31 @@
     class="col-sm-8"
     {% endifequal %}
     >
-    <input type="text" class="form-control"
-           uib-datepicker-popup="dd/MM/yyyy"
-           ng-model="{{ model }}"
-           is-open="{{ formname }}[{{ element_name }} + '_open']"
-           min-date="{{ mindate}}"
-           max-date="maxDate"
-           show-button-bar="false"
-           show-weeks="false"
-           name="[[ {{ element_name}} ]]"
-           datepicker-options="{startingDay: 1}"
-           ng-focus="{{ formname }}[{{ element_name }} + '_open']=true"
-           close-text="Close"
-           {% if change %}
-           ng-change="{{ change }}"
-           {% endif %}
-           />
+    {% if options %}
+      <div class="input-group">
+    {% endif %}
+        <input type="text" class="form-control"
+               uib-datepicker-popup="dd/MM/yyyy"
+               ng-model="{{ model }}"
+               is-open="{{ formname }}[{{ element_name }} + '_open']"
+               min-date="{{ mindate}}"
+               max-date="maxDate"
+               show-button-bar="false"
+               show-weeks="false"
+               name="[[ {{ element_name}} ]]"
+               datepicker-options="{startingDay: 1}"
+               ng-focus="{{ formname }}[{{ element_name }} + '_open']=true"
+               close-text="Close"
+               {% if change %}
+               ng-change="{{ change }}"
+               {% endif %}
+               />
+     {% if options %}
+         <span class="input-group-btn">
+           <button type="button" ng-class="{active: ({{ model }}|sameDate: now)}" class="btn btn-default" ng-click="{{ model }} = now" href="">Today</a>
+           <button type="button" ng-class="{active: ({{ model }}|sameDate: yesterday)}" class="btn btn-default" ng-click="{{ model }} = yesterday" href="">Yesterday</a>
+         </span>
+       </div>
+     {% endif %}
   </div>
-  {% if options %}
-    <div class="row">
-      <div class="col-sm-12 content-offset-5">
-        <div class="col-sm-8 col-sm-push-3">
-          <a ng-class="{active: ({{ model }}|sameDate: now)}" class="btn btn-primary btn-opal-xs" ng-click="{{ model }} = now" href="">Today</a>
-          <a ng-class="{active: ({{ model }}|sameDate: yesterday)}" class="btn btn-primary btn-opal-xs" ng-click="{{ model }} = yesterday" href="">Yesterday</a>
-        </div>
-      </div>
-    </div>
-  {% endif %}
 </div>