diff --git a/app/css/clock.css b/app/css/clock.css
index dae19f5..d1d057c 100644
--- a/app/css/clock.css
+++ b/app/css/clock.css
@@ -1,8 +1,12 @@
-@media (min-width:800px) {
-    body {
-        font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
-        overflow:hidden;
+body {
+    font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
+    overflow: hidden;
+}
+
+.center {
+    text-align: center;
     }
+@media (min-width:800px) {
 
     #clock {
         font-family: 'Ubuntu Condensed', monospace, monospace;
@@ -28,8 +32,10 @@
         top: 300px;
         left: 0;
         width: 800px;
-        height: 150px;
-        background-color: #312121;
+        height: 100px;
+        /*background-color: #312121;*/
+        background-color: #000000;
+        overflow: hidden;
     }
 
     #misc {
@@ -41,11 +47,26 @@
         background-color: #213121;
     }
 
+    #datearea {
+        width:100%;
+        position:absolute;
+        top:0;
+        left:0;
+        display:table;
+        }
     .weatherBit {
         color: #dcecff;
-        font-size: 36px;
+        font-size: 3vw;
     }
 
+    #day, #date {
+        color: #dcecff;
+        font-size: 5vw;
+
+        font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
+        width:50%;
+        display:table-cell;
+        }
     .wday {
         color: #dcecff;
         text-align: center;
@@ -58,7 +79,7 @@
     body {
         font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
         background-color: #212121;
-        color: #dcecff;
+        color: #fff;
     }
 
     #clock {
@@ -73,7 +94,7 @@
         font-size:25vw;
         text-align: center;
         vertical-align: middle;
-        color: #dcecff;
+        color: #fff;
     }
 
     #clockDisplay {
@@ -99,12 +120,12 @@
     }
 
     .weatherBit {
-        color: #dcecff;
-        font-size: 36px;
+        color: #fff;
+        font-size: 3vw;
     }
 
     .wday {
-        color: #dcecff;
+        color: #fff;
         text-align: center;
         text-transform: capitalize;
     }
@@ -116,7 +137,7 @@
     body {
         font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
         background-color: #212121;
-        color: #dcecff;
+        color: #fff;
     }
 
     #clock {
@@ -131,7 +152,7 @@
         font-size:25vw;
         text-align: center;
         vertical-align: middle;
-        color: #dcecff;
+        color: #fff;
     }
 
     #clockDisplay {
@@ -154,16 +175,15 @@
         width: 100%;
         height: 256px;
         background-color: #213121;
-        display: none;
     }
 
     .weatherBit {
-        color: #dcecff;
+        color: #fff;
         font-size: 36px;
     }
 
     .wday {
-        color: #dcecff;
+        color: #fff;
         text-align: center;
         text-transform: capitalize;
     }
diff --git a/app/js/clock.js b/app/js/clock.js
index cda0ba0..baea39b 100644
--- a/app/js/clock.js
+++ b/app/js/clock.js
@@ -7,7 +7,7 @@
 
   var storedData;
   var weatherCount = 0;
-  var skycons = new Skycons({"color": "white"});
+  var skycons = new Skycons({"color": "#dcecff"});
   var refreshTimer = 0;
   var viewTimer = 0;
   var eventBus = {};
@@ -31,7 +31,7 @@
       success: function(data) {
         console.log(data);
         storedData = data;
-       // startWeather();
+        // startWeather();
         updateWeather();
       },
       error: function(xhr, type) {
@@ -48,19 +48,17 @@
     $('#wTtext').empty().html(storedData.data.weather.today);
     // $('#wDaily').empty();
 
-
     for (var t = 0; t < storedData.data.weather.data.daily.data.length; t++) {
       var m = 'icon' + (t + 1).toString();
       var d = '#d' + (t + 1).toString();
       var ts = parseInt(storedData.data.weather.data.daily.data[t].time) * 1000;
-      var n = Date.create(ts).format('{weekday}');
+      var n = Date.create(ts).format('{Dow}');
 
       skycons.remove(m);
       skycons.add(m, storedData.data.weather.data.daily.data[t].icon);
       $(d).empty().html(n);
     }
 
-
     $('#wLater').hide();
     $('#wToday').hide();
     $('#wDaily').hide();
@@ -88,9 +86,23 @@
   function refreshWeatherView() {
     eventBus.trigger('switchWeather');
     var now = new Date();
-       var mod = 10000 - (now.getTime() % 10000);
+    var mod = 10000 - (now.getTime() % 10000);
 
-       viewTimer = setTimeout(function() {refreshWeatherView();}, mod + 10);
+    viewTimer = setTimeout(function() {refreshWeatherView();}, mod + 10);
+
+  }
+
+  function updateDate() {
+    var now = new Date();
+    var n = Date.create(now).format('{Weekday}');
+    $('#day').html(n);
+
+    n = Date.create(now).format('{Month} {d}');
+    $('#date').html(n);
+
+    var mod = 60000 - (now.getTime() % 60000);
+
+    setTimeout(function() {updateDate();}, mod + 1);
 
   }
 
@@ -118,12 +130,14 @@
     refreshTimer = setTimeout(function() {refresh();}, mod + 10);
 
   }
+
   skycons.play();
+  updateDate();
   clock();
 //  getData();
   refresh();
   refreshWeatherView();
- // $('#misc').html($(window).width());
+  // $('#misc').html($(window).width());
 
 })();
 
diff --git a/views/pages/clock.ejs b/views/pages/clock.ejs
index 937c8a1..d4bac37 100644
--- a/views/pages/clock.ejs
+++ b/views/pages/clock.ejs
@@ -17,7 +17,19 @@
 </head>
 
 <body>
-<div id="clock"><div id="clockDisplay"></div></div>
+<div id="clock">
+    <div id="datearea">
+        <div id="day">
+            Today
+        </div>
+        <div id="date">
+            6 - 6
+        </div>
+    </div>
+
+    <div id="clockDisplay"></div>
+
+</div>
 <div id="weather">
     <div id="wCurrent" class="weatherBit">Currently<div id="wCtext">xxx</div></div>
     <div id="wLater" class="weatherBit">Later<div  id="wLtext">xxx</div></div>
@@ -25,14 +37,14 @@
     <div id="wDaily"><div id="wTtext">
             <table style="width:100%;">
                 <tr>
-                    <td><canvas id="icon1" width="95" height="95"></canvas></td>
-                    <td><canvas id="icon2" width="95" height="95"></canvas></td>
-                    <td><canvas id="icon3" width="95" height="95"></canvas></td>
-                    <td><canvas id="icon4" width="95" height="95"></canvas></td>
-                    <td><canvas id="icon5" width="95" height="95"></canvas></td>
-                    <td><canvas id="icon6" width="95" height="95"></canvas></td>
-                    <td><canvas id="icon7" width="95" height="95"></canvas></td>
-                    <td><canvas id="icon8" width="95" height="95"></canvas></td>
+                    <td class="center"><canvas id="icon1" width="50%" height="50%"></canvas></td>
+                    <td class="center"><canvas id="icon2" width="50%" height="50%"></canvas></td>
+                    <td class="center"><canvas id="icon3" width="50%" height="50%"></canvas></td>
+                    <td class="center"><canvas id="icon4" width="50%" height="50%"></canvas></td>
+                    <td class="center"><canvas id="icon5" width="50%" height="50%"></canvas></td>
+                    <td class="center"><canvas id="icon6" width="50%" height="50%"></canvas></td>
+                    <td class="center"><canvas id="icon7" width="50%" height="50%"></canvas></td>
+                    <td class="center"><canvas id="icon8" width="50%" height="50%"></canvas></td>
                 </tr>
                 <tr>
                     <td id="d1" class="wday"></td>
@@ -48,7 +60,7 @@
 
         </div></div>
 </div>
-<div id="misc"></div>
+<!--<div id="misc"></div>-->
 </body>
 <script src="js/clock.js"></script>
 </html>