diff --git a/airtime_mvc/application/views/scripts/embed/weekly-program.phtml b/airtime_mvc/application/views/scripts/embed/weekly-program.phtml
index 911cd4b87..a7bb24e69 100644
--- a/airtime_mvc/application/views/scripts/embed/weekly-program.phtml
+++ b/airtime_mvc/application/views/scripts/embed/weekly-program.phtml
@@ -55,8 +55,8 @@
                 if ($window.schedule_data["weekDays"][format_start_date] !== undefined) {
                     $window.schedule_data["weekDays"][format_start_date]["shows"].push(
                         {
-                            "show_start_hour": start_date.getHours().toString().paddingLeft("00")+":"+ start_date.getMinutes().toString().paddingLeft("00"),
-                            "show_end_hour": end_date.getHours().toString().paddingLeft("00")+":"+ end_date.getMinutes().toString().paddingLeft("00"),
+                            "show_start_hour": start_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
+                            "show_end_hour": end_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
                             "name": value.name
                         });
                 }
diff --git a/airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css b/airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css
index e8bc86c01..a74d276a7 100644
--- a/airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css
+++ b/airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css
@@ -123,7 +123,7 @@ background: rgba(53, 53, 53, 1.0);
 
 .schedule_item div.time_grid {
     /*padding-right: 10px;*/
-    width: 20%;
+    width: 30%;
     font-weight: 300;
     color: #AAAAAA;
     display: inline-block;
@@ -133,7 +133,7 @@ background: rgba(53, 53, 53, 1.0);
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 10px;
-    width: 77%;
+    width: 67%;
     display:inline-block;
     vertical-align: middle;
 }
@@ -182,11 +182,11 @@ background: rgba(53, 53, 53, 1.0);
 
 @media (max-width: 630px) {
     .schedule_item div.time_grid {
-        width: 25%;
+        width: 37%;
     }
 
     .schedule_item div.name_grid {
-        width: 70%;
+        width: 58%;
     }
 }
 
@@ -197,31 +197,31 @@ background: rgba(53, 53, 53, 1.0);
     }
 
     .schedule_item div.time_grid {
-        width: 30%;
+        width: 35%;
     }
 
     .schedule_item div.name_grid {
-        width: 67%;
+        width: 60%;
     }
 }
 
 @media (max-width: 500px) {
     .schedule_item div.time_grid {
-        width: 35%;
+        width: 40%;
     }
 
     .schedule_item div.name_grid {
-        width: 62%;
+        width: 55%;
     }
 }
 
 @media (max-width: 400px) {
     .schedule_item div.time_grid {
-        width: 40%;
+        width: 90%;
     }
 
     .schedule_item div.name_grid {
-        width: 50%;
+        width: 90%;
     }
 }
 
diff --git a/airtime_mvc/public/css/embed/weekly-schedule-widget.css b/airtime_mvc/public/css/embed/weekly-schedule-widget.css
index 2f731c7aa..59c460860 100644
--- a/airtime_mvc/public/css/embed/weekly-schedule-widget.css
+++ b/airtime_mvc/public/css/embed/weekly-schedule-widget.css
@@ -97,7 +97,7 @@ body {
 
 .schedule_item div.time_grid {
     /*padding-right: 10px;*/
-    width: 20%;
+    width: 30%;
     font-weight: 300;
     color: #AAAAAA;
     display: inline-block;
@@ -107,7 +107,7 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 10px;
-    width: 77%;
+    width: 67%;
     display:inline-block;
     vertical-align: middle;
 }
@@ -132,11 +132,11 @@ body {
 
 @media (max-width: 630px) {
     .schedule_item div.time_grid {
-        width: 25%;
+        width: 37%;
     }
 
     .schedule_item div.name_grid {
-        width: 72%;
+        width: 58%;
     }
 }
 
@@ -147,31 +147,31 @@ body {
     }
 
     .schedule_item div.time_grid {
-        width: 30%;
+        width: 35%;
     }
 
     .schedule_item div.name_grid {
-        width: 67%;
+        width: 60%;
     }
 }
 
 @media (max-width: 500px) {
     .schedule_item div.time_grid {
-        width: 35%;
+        width: 40%;
     }
 
     .schedule_item div.name_grid {
-        width: 62%;
+        width: 55%;
     }
 }
 
 @media (max-width: 400px) {
     .schedule_item div.time_grid {
-        width: 40%;
+        width: 90%;
     }
 
     .schedule_item div.name_grid {
-        width: 50%;
+        width: 90%;
     }
 }