diff --git a/servers/php/css/dark.css b/servers/php/css/dark.css
index 1549414..0a7459a 100644
--- a/servers/php/css/dark.css
+++ b/servers/php/css/dark.css
@@ -1,21 +1,18 @@
 
 body {
-    background-color: #555;
-
-    background-image: url('../images/matrix.jpg'); background-repeat: repeat;
-    background-position: top left; background-attachment: fixed;
+   /* background-color: #ccc; */
 }
+
 .container {
-    background-color: rgba(0,0,0,0.8);
-    border: 1px solid #000;
+    /* background-color: #272b30; for slate */
+    border: 1px solid #aaa;
     margin-top: 10px;
 }
 .col-sm-2 {
     height: 50px;           
 }
 .col-sm-3 {  
-    height: 50px;
-    margin-bottom: 10px;          
+    height: 50px;        
 }
 .col-sm-6 { 
     height: 50px;          
@@ -26,49 +23,36 @@
 .col-sm-10 {
     height: 50px;           
 }
-.paddingright15 { 
-    padding-right: 15px; 
-}
-#mapdiv { 
-    height: 475px;
-}
 #toplogo {
     padding-top: 10px;
-    color: #33ffcc; 
 }
 #messages {
-    padding-top: 17px;
+    padding-top: 19px;
     text-align: right;
-    color: #33ffcc;        
+    margin: 0px 0px 10px 0px;
+    clear:right;       
 }
 #routeSelect {
     width: 100%;
-    background-color: #33ffcc;
-    color: #000; 
+    margin-bottom:5px;
+    background-color: #ccc;
+
 }
 #autorefresh {
-    width: 100%;
-    height: 44px;
-    background-color: #33ffcc;    
-    color: #000;       
+    width: 100%;  
+    margin-bottom:5px;
 }
 #delete {
-    width: 100%;
-    height: 44px;
-    background-color: #33ffcc;    
-    color: #000;                   
+    width: 100%;                
+    margin-bottom:5px;
 }
 #refresh {
-    width: 100%;
-    height: 44px;
-    background-color: #33ffcc;     
-    color: #000;   
+    width: 100%;   
+    margin-bottom:5px;
 }
 #viewall {
-    width: 100%;
-    height: 44px;
-    background-color: #33ffcc;     
-    color: #000;   
+    width: 100%;   
+    margin-bottom:5px;
 }
 .deletediv {
     text-align: center;
@@ -86,18 +70,7 @@
     .container {
         margin-top: 25px;
     }
-    #autorefresh {
-        width: 150px;      
-    }
-    #delete {
-        width: 150px;                  
-    }
-    #refresh {
-        width: 150px; 
-    }
-    #viewall {
-        width: 150px; 
-    }
+
     .deletediv {
         text-align: left;
     }
@@ -113,21 +86,27 @@
         text-align: right;
         padding-right: 15px;
     }    
-}        
+}      
 #map-canvas {
     border: 1px solid #000;
     width: 100%;
-    height: 460px;
-    background-color: rgba(0,0,0,0.7);     
+    height: 460px;    
 }
-#blankrow {
-    background-color: transparent;
+#mapdiv { 
+    height: 475px;
 }
 #selectdiv {
     height: 50px;
 }
 #halimage {
+    float:left;
     width: 37px;
     height: 37px;
-    vertical-align: middle;
+    padding-left: 40px;
+    margin-bottom: 5px;
+    background: url('../images/gpstracker-man-blue-37.png')  no-repeat; 
+}
+#gpstrackertext {
+    position:relative;
+    margin-top:10px;
 }
diff --git a/servers/php/css/light.css b/servers/php/css/light.css
index 6f0f71c..df1aed9 100644
--- a/servers/php/css/light.css
+++ b/servers/php/css/light.css
@@ -1,15 +1,18 @@
 
+body {
+   /* background-color: #ccc; */
+}
+
 .container {
-    background-color: #D8D8D8;
-    border: 1px solid #000;
+    /* background-color: #272b30; for slate */
+    border: 1px solid #aaa;
     margin-top: 10px;
 }
 .col-sm-2 {
     height: 50px;           
 }
 .col-sm-3 {  
-    height: 50px;
-    margin-bottom: 10px;          
+    height: 50px;        
 }
 .col-sm-6 { 
     height: 50px;          
@@ -20,44 +23,35 @@
 .col-sm-10 {
     height: 50px;           
 }
-.paddingright15 { 
-    padding-right: 15px; 
-}
-#mapdiv { 
-    height: 475px;
-}
 #toplogo {
     padding-top: 10px;
-    color: #000; 
 }
 #messages {
-    padding-top: 17px;
-    text-align: right;       
+    padding-top: 19px;
+    text-align: right;
+    margin: 0px 0px 10px 0px;
+    clear:right;       
 }
 #routeSelect {
     width: 100%;
-    color: #000;
-    background-color: #E8E8E8;  
+    margin-bottom:5px;
+    /* background-color: #ccc; */
 }
 #autorefresh {
-    width: 100%;
-    height: 44px;
-    color: #000;       
+    width: 100%;  
+    margin-bottom:5px;
 }
 #delete {
-    width: 100%;
-    height: 44px;
-    color: #000;                   
+    width: 100%;                
+    margin-bottom:5px;
 }
 #refresh {
-    width: 100%;
-    height: 44px; 
-    color: #000;   
+    width: 100%;   
+    margin-bottom:5px;
 }
 #viewall {
-    width: 100%;
-    height: 44px; 
-    color: #000;   
+    width: 100%;   
+    margin-bottom:5px;
 }
 .deletediv {
     text-align: center;
@@ -75,18 +69,7 @@
     .container {
         margin-top: 25px;
     }
-    #autorefresh {
-        width: 150px;      
-    }
-    #delete {
-        width: 150px;                  
-    }
-    #refresh {
-        width: 150px; 
-    }
-    #viewall {
-        width: 150px; 
-    }
+
     .deletediv {
         text-align: left;
     }
@@ -106,17 +89,23 @@
 #map-canvas {
     border: 1px solid #000;
     width: 100%;
-    height: 460px;
-    background-color: #E8E8E8;     
+    height: 460px;    
 }
-#blankrow {
-    background-color: transparent;
+#mapdiv { 
+    height: 475px;
 }
 #selectdiv {
     height: 50px;
 }
 #halimage {
+    float:left;
     width: 37px;
     height: 37px;
-    vertical-align: middle;
+    padding-left: 40px;
+    margin-bottom: 5px;
+    background: url('../images/gpstracker-man-blue-37.png')  no-repeat; 
+}
+#gpstrackertext {
+    position:relative;
+    margin-top:10px;
 }
diff --git a/servers/php/displaymap-blue.php b/servers/php/displaymap-blue.php
new file mode 100644
index 0000000..d8b7de4
--- /dev/null
+++ b/servers/php/displaymap-blue.php
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Gps Tracker</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+    <script src="//maps.google.com/maps/api/js?v=3&sensor=false&libraries=adsense"></script>
+    <script src="js/maps.js"></script>
+    <script src="js/leaflet-0.7.3/leaflet.js"></script>
+    <script src="js/leaflet-plugins/google.js"></script>
+    <script src="js/leaflet-plugins/bing.js"></script>
+    <link rel="stylesheet" href="js/leaflet-0.7.3/leaflet.css">
+    
+    <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
+    
+    <!-- 
+        to change themes, select a theme here:  http://www.bootstrapcdn.com/#bootswatch_tab 
+        and then change the word after 3.2.0 in the following link to the new theme name
+    
+        use cerulean for light, slate for dark, superhero for blue
+    -->    
+    
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/superhero/bootstrap.min.css">
+    <link rel="stylesheet" href="css/dark.css">
+            
+</head>
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-4" id="toplogo">
+                <div id="halimage"><div id="gpstrackertext">GpsTracker</div></div>
+            </div>
+            <div class="col-sm-8" id="messages"></div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12" id="mapdiv">
+                <div id="map-canvas"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12" id="selectdiv">
+                <select id="routeSelect" tabindex="1" class="form-control"></select>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-3 deletediv">
+                <input type="button" id="delete" value="Delete" tabindex="2" class="btn btn-primary">
+            </div>
+            <div class="col-sm-3 autorefreshdiv">
+                <input type="button" id="autorefresh" value="Auto Refresh - Off" tabindex="3" class="btn btn-primary">
+            </div>
+            <div class="col-sm-3 refreshdiv">
+                <input type="button" id="refresh" value="Refresh" tabindex="4" class="btn btn-primary">
+            </div>
+            <div class="col-sm-3 viewalldiv">
+                <input type="button" id="viewall" value="View All" tabindex="5" class="btn btn-primary">
+            </div>
+        </div>
+    </div>       
+</body>
+</html>
+    
\ No newline at end of file
diff --git a/servers/php/displaymap-dark.php b/servers/php/displaymap-dark.php
index db10b3f..8566cbc 100644
--- a/servers/php/displaymap-dark.php
+++ b/servers/php/displaymap-dark.php
@@ -11,18 +11,28 @@
     <script src="js/leaflet-0.7.3/leaflet.js"></script>
     <script src="js/leaflet-plugins/google.js"></script>
     <script src="js/leaflet-plugins/bing.js"></script>
-    <link href="css/dark.css" rel="stylesheet" type="text/css" />
-    <link href="js/leaflet-0.7.3/leaflet.css" rel="stylesheet" type="text/css" />
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-
+    <link rel="stylesheet" href="js/leaflet-0.7.3/leaflet.css">
+    
+    <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
+    
+    <!-- 
+        to change themes, select a theme here:  http://www.bootstrapcdn.com/#bootswatch_tab 
+        and then change the word after 3.2.0 in the following link to the new theme name
+    
+        use cerulean for light, slate for dark, superhero for blue
+    -->    
+    
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/slate/bootstrap.min.css">
+    <link rel="stylesheet" href="css/dark.css">
+            
 </head>
 <body>
     <div class="container">
         <div class="row">
             <div class="col-sm-4" id="toplogo">
-                <img src="images/gpstracker-man.png" alt="hal" id="halimage" >GpsTracker
+                <div id="halimage"><div id="gpstrackertext">GpsTracker</div></div>
             </div>
-            <div class="col-sm-8 paddingright15" id="messages"></div>
+            <div class="col-sm-8" id="messages"></div>
         </div>
         <div class="row">
             <div class="col-sm-12" id="mapdiv">
@@ -30,22 +40,22 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 paddingright15" id="selectdiv">
-                <select id="routeSelect" tabindex="1"></select>
+            <div class="col-sm-12" id="selectdiv">
+                <select id="routeSelect" tabindex="1" class="form-control"></select>
             </div>
         </div>
         <div class="row">
             <div class="col-sm-3 deletediv">
-                <input type="button" id="delete" value="Delete" tabindex="2">
+                <input type="button" id="delete" value="Delete" tabindex="2" class="btn btn-primary">
             </div>
             <div class="col-sm-3 autorefreshdiv">
-                <input type="button" id="autorefresh" value="Auto Refresh - Off" tabindex="3">
+                <input type="button" id="autorefresh" value="Auto Refresh - Off" tabindex="3" class="btn btn-primary">
             </div>
             <div class="col-sm-3 refreshdiv">
-                <input type="button" id="refresh" value="Refresh" tabindex="4">
+                <input type="button" id="refresh" value="Refresh" tabindex="4" class="btn btn-primary">
             </div>
             <div class="col-sm-3 viewalldiv">
-                <input type="button" id="viewall" value="View All" tabindex="5">
+                <input type="button" id="viewall" value="View All" tabindex="5" class="btn btn-primary">
             </div>
         </div>
     </div>       
diff --git a/servers/php/displaymap.php b/servers/php/displaymap.php
index 049fbd2..bfb1e3a 100644
--- a/servers/php/displaymap.php
+++ b/servers/php/displaymap.php
@@ -11,18 +11,28 @@
     <script src="js/leaflet-0.7.3/leaflet.js"></script>
     <script src="js/leaflet-plugins/google.js"></script>
     <script src="js/leaflet-plugins/bing.js"></script>
-    <link href="css/light.css" rel="stylesheet" type="text/css" />
-    <link href="js/leaflet-0.7.3/leaflet.css" rel="stylesheet" type="text/css" />
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-
+    <link rel="stylesheet" href="js/leaflet-0.7.3/leaflet.css">
+    
+    <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
+    
+    <!-- 
+        to change themes, select a theme here:  http://www.bootstrapcdn.com/#bootswatch_tab 
+        and then change the word after 3.2.0 in the following link to the new theme name
+    
+        use cerulean for light, slate for dark, superhero for blue
+    -->    
+    
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css">
+    <link rel="stylesheet" href="css/light.css">
+            
 </head>
 <body>
     <div class="container">
         <div class="row">
             <div class="col-sm-4" id="toplogo">
-                <img src="images/gpstracker-man-blue.png" alt="hal" id="halimage" >GpsTracker
+                <div id="halimage"><div id="gpstrackertext">GpsTracker</div></div>
             </div>
-            <div class="col-sm-8 paddingright15" id="messages"></div>
+            <div class="col-sm-8" id="messages"></div>
         </div>
         <div class="row">
             <div class="col-sm-12" id="mapdiv">
@@ -30,22 +40,22 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 paddingright15" id="selectdiv">
-                <select id="routeSelect" tabindex="1"></select>
+            <div class="col-sm-12" id="selectdiv">
+                <select id="routeSelect" tabindex="1" class="form-control"></select>
             </div>
         </div>
         <div class="row">
             <div class="col-sm-3 deletediv">
-                <input type="button" id="delete" value="Delete" tabindex="2">
+                <input type="button" id="delete" value="Delete" tabindex="2" class="btn btn-primary">
             </div>
             <div class="col-sm-3 autorefreshdiv">
-                <input type="button" id="autorefresh" value="Auto Refresh - Off" tabindex="3">
+                <input type="button" id="autorefresh" value="Auto Refresh - Off" tabindex="3" class="btn btn-primary">
             </div>
             <div class="col-sm-3 refreshdiv">
-                <input type="button" id="refresh" value="Refresh" tabindex="4">
+                <input type="button" id="refresh" value="Refresh" tabindex="4" class="btn btn-primary">
             </div>
             <div class="col-sm-3 viewalldiv">
-                <input type="button" id="viewall" value="View All" tabindex="5">
+                <input type="button" id="viewall" value="View All" tabindex="5" class="btn btn-primary">
             </div>
         </div>
     </div>       
diff --git a/servers/php/images/gpstracker-man-blue-37.png b/servers/php/images/gpstracker-man-blue-37.png
new file mode 100644
index 0000000..d1ce958
--- /dev/null
+++ b/servers/php/images/gpstracker-man-blue-37.png
Binary files differ
diff --git a/servers/php/js/maps.js b/servers/php/js/maps.js
index f6cd4ba..96fb08c 100644
--- a/servers/php/js/maps.js
+++ b/servers/php/js/maps.js
@@ -9,6 +9,12 @@
     
     var viewingAllRoutes = false;
     
+    //var bodyBackgroundColor = $('body').css('backgroundColor');
+    //$('.container').css('background-color', bodyBackgroundColor);
+    //$('body').css('background-color', '#ccc');
+    
+    // $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
+    
     getAllRoutesForMap();
     load();
     
@@ -51,7 +57,7 @@
         
         viewingAllRoutes = true;
         routeSelect.selectedIndex = 0;
-        showPermanentMessage('Please select a route below.');
+        showPermanentMessage('Please select a route below');
                    
         $.ajax({
             url: 'getallroutesformap.php',
@@ -88,7 +94,7 @@
     
     function loadRoutes(json) {
         if (json.length == 0) {
-            showPermanentMessage('There are no routes available to view.');
+            showPermanentMessage('There are no routes available to view');
             map.innerHTML = '';
         }
         else {
@@ -117,7 +123,7 @@
             // need to reset this for firefox
             routeSelect.selectedIndex = 0;
 
-            showPermanentMessage('Please select a route below.');
+            showPermanentMessage('Please select a route below');
         }
     }
 
@@ -165,7 +171,7 @@
 
     function loadGPSLocations(json) {
         if (json.length == 0) {
-            showPermanentMessage('There is no tracking data to view.');
+            showPermanentMessage('There is no tracking data to view');
             map.innerHTML = '';
         }
         else {
@@ -371,7 +377,7 @@
 
     function turnOffAutoRefresh() {
         console.log('turnOffAutoRefresh');
-        showMessage('Auto Refresh Off.');
+        showMessage('Auto Refresh Off');
         $('#autorefresh').val('Auto Refresh - Off');
     
         autoRefresh = false;
@@ -381,21 +387,17 @@
     function turnOnAutoRefresh() {
         console.log('turnOnAutoRefresh');
     
-       // if (hasMap()) {
-            showMessage('Auto Refresh On (1 min).'); 
-            $('#autorefresh').val('Auto Refresh - On');
-            autoRefresh = true;
-    
-            clearInterval(intervalID);
-            
-            if (viewingAllRoutes) {
-                intervalID = setInterval(getAllRoutesForMap, 60 * 1000); // one minute 
-            } else {
-                intervalID = setInterval(getRouteForMap, 60 * 1000);          
-            } 
-      //  } else {
-      //      showMessage('Please select a route first.');            
-      //  }           
+        showMessage('Auto Refresh On (1 min)'); 
+        $('#autorefresh').val('Auto Refresh - On');
+        autoRefresh = true;
+
+        clearInterval(intervalID);
+        
+        if (viewingAllRoutes) {
+            intervalID = setInterval(getAllRoutesForMap, 60 * 1000); // one minute 
+        } else {
+            intervalID = setInterval(getRouteForMap, 60 * 1000);          
+        }          
     }
 
     function deleteRoute() {