diff --git a/application/templates/timer_box.mustache b/application/templates/timer_box.mustache
index 779e40a..cee7fed 100644
--- a/application/templates/timer_box.mustache
+++ b/application/templates/timer_box.mustache
@@ -1,13 +1,14 @@
-<div id="{{guid}}" class="col-lg-4 timer_box">
+<div id="{{guid}}" class="col-lg-4 timer_box" style="display: none;">
     <button type="button" class="close" data-dismiss="alert">
         <span aria-hidden="true">&times;</span>
         <span class="sr-only">Close</span>
     </button>
-    <a id="{{guid}}_link" href="#" class="thumbnail">
+    <a id="{{guid}}" href="#" class="thumbnail">
         <div class="svg_placeholder"></div>
         <div class="laptime_display"></div>
-        <div class="digital_display">12:12 AM</div>
+        <!-- <div class="digital_display"></div> -->
+        <div class="{{guid}}"></div>
         <div class="btns"></div>
         <div class="title">{{title}}</div>
     </a>
-</div>
\ No newline at end of file
+</div>
diff --git a/application/views/home.php b/application/views/home.php
index 58cb67b..a10c65a 100644
--- a/application/views/home.php
+++ b/application/views/home.php
@@ -4,9 +4,17 @@
         <div id="left_col" class="col-md-3" style="background-color:#f5f5f5; padding-top: 1em; height:100%;">
             
             <input id="title" type="text" class="form-control" placeholder="Title">
-            <input id="size" type="text" class="form-control" placeholder="Size" value="120">
+            <input id="size" type="text" class="form-control" value="" placeholder="Size (Maximum '130')">
             
-            <input id="timezone" type="text" class="form-control" placeholder="Timezone" style="display:none;">
+            <select id="timezone" class="form-control" style="display:none;">
+             <option value="0">Please, select timezone</option>
+                <?php foreach(tz_list() as $t) { ?>
+                  <option value="<?php print $t['offset'] ?>">
+                    <?php print $t['diff_from_GMT'] . ' - ' . $t['timezone_name'] ?>
+                  </option>
+                <?php } ?>
+              </select>
+
             <input id="countdown_time" type="text" class="form-control" placeholder="Time to countdown" style="display:none;">
             <input id="alarm_time" type="text" data-time-format="H:i:s" class="form-control" placeholder="Wake Up Time" style="display:none;">
 
@@ -54,7 +62,9 @@
                 <div id="timer_holder"></div>
 
                 <!-- scrap, needs to be trashed, leaving for now for testing -->
-                <div id="London" class="col-lg-4 timer_box">
+
+
+                <!--<div id="London" class="col-lg-4 timer_box">
                     <button type="button" class="close" data-dismiss="alert">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
@@ -65,7 +75,7 @@
                         <div class="digital_display">11:11 AM</div>
                         <div class="title">Photo Title</div>
                     </a>
-                </div>
+                </div>-->
                 <!-- scrap, needs to be trashed, leaving for now for testing -->
 
               
@@ -79,4 +89,22 @@
         </div>
         <!-- >>> RIGHT COLUMN >>> -->
     </div> <!-- /.row -->
-</div><!-- /.container -->
\ No newline at end of file
+</div><!-- /.container -->
+<?php
+    function tz_list() {
+      $timezone_array = array();
+
+      $timestamp = time();
+
+      foreach(timezone_identifiers_list() as $key => $timezone) {
+
+        date_default_timezone_set($timezone);
+
+        $timezone_array[$key]['timezone_name'] = $timezone;
+        $timezone_array[$key]['diff_from_GMT'] = 'UTC/GMT ' . date('P', $timestamp);
+        $timezone_array[$key]['offset'] = date('P', $timestamp);
+      }
+      return $timezone_array;
+    }
+
+?>
diff --git a/js/timer.js b/js/timer.js
index 2496bb5..7b32bca 100644
--- a/js/timer.js
+++ b/js/timer.js
@@ -135,6 +135,8 @@ var clock = {
             ui.set_type(clocks[guid].type, true)
         });
 
+
+
         //updateData(offset);	//draw them in the correct starting position
 
         setInterval(function(){
@@ -142,6 +144,9 @@ var clock = {
             moveHands(guid);
         }, 1000);
 
+
+
+
         var width = (clockRadius+margin)*2,// replace global definition in function scope.
                 height = (clockRadius+margin)*2,
                 secondTickStart = clockRadius,
@@ -169,6 +174,7 @@ var clock = {
                 .attr('y2',secondTickStart + secondTickLength)
                 .attr('transform',function(d){
                     return 'rotate(' + secondScale(d) + ')';
+                    $(".digital_display").text(d);
                 });
         //and labels
 
@@ -254,15 +260,15 @@ var timerClock = {
     postRender : function(guid){
         //alert('yo');
         $('#btns').append(' \
-            <p><button onclick="startTimerOnClick(guid);">Start</button> \
-            <button onclick="stopTimerOnClick(guid);">Stop</button></p>');
+            <p><button onclick="startTimerOnClick(\' + guid + \');">Start</button> \
+            <button onclick="stopTimerOnClick(\' + guid + \');">Stop</button></p>');
     }
 };
 var countDownClock = {
     postRender : function(guid){
         $('#btns').append(' \
-            <p><button onclick="startCountDownOnClick(guid);">Start</button> \
-            <button onclick="stopCountDownOnClick(guid);">Stop</button></p>');
+            <p><button onclick="startCountDownOnClick(\' + guid + \');">Start</button> \
+            <button onclick="stopCountDownOnClick(\' + guid + \');">Stop</button></p>');
 
         updateCountDown(guid);
         moveCountDownHands(guid, guid);
@@ -271,20 +277,10 @@ var countDownClock = {
 
 var lapTimerClock = {
     postRender : function(guid){
-
-        //var start = document.createElement("button");
-        //start.setAttribute('type', 'button');
-        //start.setAttribute('class', 'btn btn-danger');
-        //start.setAttribute('onclick', 'startLapTimerOnClick(guid);');
-        //start.innerHTML = '<span class="glyphicon glyphicon-ok"></span> Start';
-        //
-        //var btn = document.getElementById('buttons_lap_timer');
-        //btn.appendChild(start);
-
         $('#buttons_lap_timer').append(' \
-            <button onclick="startLapTimerOnClick(guid);" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span> Start</button> \
-            <button onclick="stopLapTimerOnClick(guid);"type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Stop</button> \
-            <button onclick="splitTimerOnClick(guid);"type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Lap / Split</button>');
+            <button onclick="startLapTimerOnClick(\' + guid + \');" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span> Start</button> \
+            <button onclick="stopLapTimerOnClick(\' + guid + \');"type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Stop</button> \
+            <button onclick="splitTimerOnClick(\' + guid + \');"type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Lap / Split</button>');
     }
 };
 
@@ -316,9 +312,10 @@ var playSound = {
 };
 
 var digitalTimer = {
-    render : function() {
+    render : function(view) {
         digitalTimer.preRender();
         var dd = document.getElementsByClassName('digital_display')[0],
+
             start = document.getElementById('start'),
             stop = document.getElementById('stop'),
             clear = document.getElementById('clear'),
@@ -380,6 +377,7 @@ function moveHands(area){
             .attr('transform',function(d){
                 return 'rotate('+ d.scale(d.value) +')';
             });
+    $('.current_time.').text(area);
 }
 
 function moveTimerHands(guid, area){
@@ -423,8 +421,61 @@ function updateData(offset){
     handData[0].value = (nd.getHours() % 12) + nd.getMinutes()/60;
     handData[1].value = nd.getMinutes();
     handData[2].value = nd.getSeconds();
+  
 }
 
+
+var times = [];
+function gettime(view){
+
+    var guid = view['guid'];
+    times[guid] = view;
+    var offset = parseInt(times[guid].timezone);
+    d = new Date(); 
+    utc = d.getTime() + (d.getTimezoneOffset() * 60000);
+    nd = new Date(utc + (3600000*offset)); 
+
+    if (nd.getHours() >= 12){
+        var hour = nd.getHours() - 12;
+        
+        var amPm = "PM";
+
+    } else {
+        var hour = nd.getHours(); 
+        
+        var amPm = "AM";
+    }
+
+    if (nd.getSeconds() < 10){
+
+        var seconds = "0" + nd.getSeconds();
+
+    } else {
+
+        var seconds = nd.getSeconds();
+    }
+
+    if (nd.getMinutes() < 10){
+
+        var minutes = "0" + nd.getMinutes();
+
+    } else {
+
+        var minutes = nd.getMinutes();
+    }
+
+    if(hour == 0){
+        hour = 1;
+    }
+
+
+    $('.'+guid).text(hour + ":" + minutes + ":" + seconds + " " + amPm);
+    setTimeout(function(){gettime(view)}, 1000);
+ }
+
+
+
+
 function updateTimer(guid, counter) {
 
     if(typeof window[guid] === 'undefined') {
@@ -727,4 +778,4 @@ function initCountDownTimer(guid, time) {
     }
 }
 
-d3.select(self.frameElement).style("height", height + "px");
\ No newline at end of file
+d3.select(self.frameElement).style("height", height + "px");
diff --git a/js/ui.js b/js/ui.js
index 1f33ce7..e6d9c75 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,6 +1,7 @@
 var timer_count=1; // eventually need to load from storage so not to override current timers
 var timer_type = '1';
 
+
 var ui = {
     nav: function(){
         $('#sign_up a').on('click', function(){
@@ -120,11 +121,22 @@ var ui = {
             var size = $('#size').val();
             var timezone = $('#timezone').val();
             var time = parseInt($('#countdown_time').val());
-            //console.log(title, size, timezone, time);
-            if(title !== '' && size !== ''/* && timezone !== ''*/) {
-                var view = {'guid' : 'timer'+timer_count, 'timezone': timezone, 'title': title, 'clockSize': size, 'type' : timer_type, 'time': time};
-                timer_count++;
-                preDraw(view);
+
+            if(title !== '' && size !== '' && timezone != 0/* && timezone !== ''*/) {
+                if($.isNumeric(size)){
+                    if(size <= 130){
+                        var view = {'guid' : 'timer'+timer_count, 'timezone': timezone, 'title': title, 'clockSize': size, 'type' : timer_type, 'time': time};
+                        timer_count++;
+                        preDraw(view);
+                        $('.timer_box').show();
+                    } else {
+                        alert('Please Set a size of clock a maximum 130');
+                    }
+                    
+                } else {
+                    alert('Please Input Number on size');
+
+                }  
             }
             else{
                 alert('Please enter a valid value.');
@@ -140,12 +152,14 @@ var ui = {
 }
 
 function preDraw(view){
-    switch(timer_type) {
+    switch(view['type']) {
         case '1':
             clock.render(view);
+            gettime(view);
             break;
         case '2':
             timerClock.render(view);
+            digitalTimer.render(view);
             break;
         case '3':
             countDownClock.render(view);
@@ -159,5 +173,4 @@ function preDraw(view){
             alert('error, unknown type');
             break;
     }
-
-}
\ No newline at end of file
+}