diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index 7b2afad20b..6507b22397 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -574,14 +574,19 @@ div.help {
     width: auto;
     height: 22px;
     min-width: 18px;
-    padding: 4px 6px;
+    padding: 5px 6px 3px 6px;
     font-size: @baseFontSize;
     font-weight: normal;
     line-height: @baseLineHeight;
     text-align: center;
-    text-shadow: 0 1px 0 @white;
-    background-color: @gray-10;
-    border: 1px solid @purple-l3;
+    //text-shadow: 0 1px 0 @white;
+    background-color: @white;
+    border: 1px solid @inputBorder;
+    color: @ui-option-type;
+    &:hover {
+        border-color:@inputBorderFocus;
+        color: @ui-option-type-hover;
+    }
   }
   .add-on,
   .btn,
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 09cdaf4939..9b0daa1e4d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -884,6 +884,23 @@
 .bootstrap-datetimepicker-widget .btn{padding: 0;}
 .bootstrap-datetimepicker-widget .picker-switch .btn{ background: none; border: none;}
 .umb-datepicker .input-append .add-on{cursor: pointer;}
+.umb-datepicker .input-append .on-top {
+    position: absolute;
+    margin-left: -31px;
+    margin-top: 1px;
+    display: inline-block;
+    height: 22px;
+    padding: 5px 6px 3px 6px;
+    font-size: @baseFontSize;
+    font-weight: normal;
+    line-height: @baseLineHeight;
+    text-align: center;
+    background-color: @white;
+    color: @ui-option-type;
+    &:hover {
+        color: @ui-option-type-hover;
+    }
+}
 .umb-datepicker p {margin-top:10px;}
 .umb-datepicker p a{color: @gray-3;}
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
index 47c9182650..0d3fad580e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
@@ -13,12 +13,15 @@
                 <div class="input-append">
                     <input
                         name="datepicker"
-                        id="{{model.alias}}" 
-                        type="text" 
+                        id="{{model.alias}}"
+                        type="text"
                         ng-model="model.datetimePickerValue"
                         ng-required="model.validation.mandatory"
-                        val-server="value" 
+                        val-server="value"
                         class="datepickerinput">
+                    <span class="on-top" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
+                        <i class="icon-delete"></i>
+                    </span>
                     <span class="add-on">
                         <i class="icon-calendar"></i>
                     </span>
@@ -38,9 +41,6 @@
             <small><localize key="content_scheduledPublishServerTime">This translates to the following time on the server:</localize> {{serverTime}}</small><br />
             <small><localize key="content_scheduledPublishDocumentation">What does this mean?</localize></small>
         </p>
-        <p ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
-            <a href ng-click="clearDate()"><i class="icon-delete"></i><small><localize key="content_removeDate">Clear date</localize></small></a>
-        </p>
 
     </ng-form>
 </div>