diff --git a/web/gui/src/main/webapp/app/fw/nav/nav-theme.css b/web/gui/src/main/webapp/app/fw/nav/nav-theme.css
index 6111642..8d22fd0 100644
--- a/web/gui/src/main/webapp/app/fw/nav/nav-theme.css
+++ b/web/gui/src/main/webapp/app/fw/nav/nav-theme.css
@@ -19,42 +19,46 @@
  */
 
 .light #nav {
-    background-color: #bbb;
-    box-shadow: 0 2px 8px #777;
+    background-color: #231f20;
 }
 .dark #nav {
-    background-color: #444;
-    box-shadow: 0 2px 8px #111;
+    /* TODO: dark theme */
+    background-color: #231f20;
 }
 
 .light #nav .nav-hdr {
-    color: #ddd;
-    border-bottom: solid 1px #999;
-    background-color: #aaa;
+    color: #716b6a;
+    background-color: #3c3a3a;
 }
 .dark #nav .nav-hdr {
-    color: #888;
-    border-bottom: solid 1px #444;
-    background-color: #555;
+    /* TODO: dark theme */
+    color: #716b6a;
+    background-color: #3c3a3a;
 }
 
 .light #nav a {
-    color: #369;
-    border-bottom: solid #ccc 1px;
+    color: #c7c7c0;
+    border-bottom: solid #3c3a3a 1px;
 }
 .dark #nav a {
-    color: #eee;
-    border-bottom: solid #333 1px;
+    /* TODO: dark theme */
+    color: #c7c7c0;
+    border-bottom: solid #3c3a3a 1px;
 }
 
 .light #nav a:hover {
-    background-color: #ddd;
+    color: #ffffff;
 }
 .dark #nav a:hover {
-    background-color: #777;
+    /* TODO: dark theme */
+    color: #ffffff;
 }
 
 #nav a div svg.embeddedIcon g.icon .glyph {
-    fill: #c66;
+    fill: #007dc4;
+}
+
+#nav a:hover div svg.embeddedIcon g.icon .glyph {
+    fill: #20b2ff;
 }
 
diff --git a/web/gui/src/main/webapp/app/fw/nav/nav.css b/web/gui/src/main/webapp/app/fw/nav/nav.css
index 7991088..7d283bd 100644
--- a/web/gui/src/main/webapp/app/fw/nav/nav.css
+++ b/web/gui/src/main/webapp/app/fw/nav/nav.css
@@ -20,27 +20,32 @@
 
 #nav {
     position: absolute;
-    top: 45px;
-    left: 1px;
+    top: 48px;
+    left: 0;
     padding: 0;
     z-index: 3000;
     visibility: hidden;
 }
 
 html[data-platform='iPad'] #nav {
-    top: 57px;
+    top: 60px;
 }
 
 #nav .nav-hdr {
-    font-style: italic;
-    padding: 6px 8px 6px 8px;
+    font-weight: bold;
+    font-variant: small-caps;
+    text-transform: uppercase;
+    font-size: 12pt;
+    padding: 8px 15px;
 }
 
 #nav a {
     text-decoration: none;
-    font-size: 14pt;
+    font-size: 13pt;
+    font-weight: lighter;
     display: block;
-    padding: 8px 16px 6px 12px;
+    padding: 6px 10px;
+    margin: 0 7px;
 }
 
 #nav a div {
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index de42a8e..e4fa6e2 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -24,6 +24,9 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700'
+          rel='stylesheet' type='text/css'>
+
     <title>ONOS</title>
 
     <!-- Third party library code included here -->