diff --git a/build/media_source/system/css/fields/calendar.css b/build/media_source/system/css/fields/calendar.css
index 70dc7aa09bac3..d70a0045f48b0 100644
--- a/build/media_source/system/css/fields/calendar.css
+++ b/build/media_source/system/css/fields/calendar.css
@@ -7,7 +7,7 @@
  }
 .calendar-container {
   float: left;
-  min-width: 160px;
+  min-width: 280px;
   padding: 0;
   list-style: none;
   border-radius: 5px;
@@ -15,8 +15,9 @@
   z-index: 1100 !important;
 }
 .calendar-container table {
+  margin: 0 0 0 55px;
   table-layout: fixed;
-  max-width: 262px;
+  max-width: 290px;
   border-radius: 5px;
   background-color: #ffffff !important;
   z-index: 1100 !important;
@@ -167,6 +168,7 @@ div.calendar-container table td.title { /* This holds the current "month, year"
 .buttons-wrapper .btn:last-child {
   margin-right: 0;
 }
+
 .time .time-title {
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='22' height='22' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
diff --git a/build/media_source/system/js/fields/calendar.es5.js b/build/media_source/system/js/fields/calendar.es5.js
index 25bfc2115a248..26ec01ceaafe1 100644
--- a/build/media_source/system/js/fields/calendar.es5.js
+++ b/build/media_source/system/js/fields/calendar.es5.js
@@ -699,16 +699,15 @@
 			cell = createElement("td", row);
 			cell.className = "time time-title";
 			cell.colSpan = 1;
-			cell.style.verticalAlign = 'middle';
-			cell.innerHTML = " ";
+			cell.innerHTML = "";
 
 			var cell1 = createElement("td", row);
 			cell1.className = "time hours-select";
-			cell1.colSpan = 2;
+			cell1.colSpan = 3;
 
 			var cell2 = createElement("td", row);
 			cell2.className = "time minutes-select";
-			cell2.colSpan = 2;
+			cell2.colSpan = 3;
 
 			(function () {
 				function makeTimePart(className, selected, range_start, range_end, cellTml) {
@@ -744,8 +743,8 @@
 					hrs -= 12;
 				}
 
-				var H = makeTimePart("time time-hours", hrs, t12 ? 1 : 0, t12 ? 12 : 23, cell1),
-					M = makeTimePart("time time-minutes", mins, 0, 59, cell2),
+				var H = makeTimePart("time time-hours form-select form-select-sm w-auto", hrs, t12 ? 1 : 0, t12 ? 12 : 23, cell1),
+					M = makeTimePart("time time-minutes form-select form-select-sm w-auto", mins, 0, 59, cell2),
 					AP = null;
 
 				cell = createElement("td", row);