diff --git a/README.md b/README.md
index 63a3044..d66ea6b 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# DistriNS
+# PLAINS
 A Distributed approach to Authoritative DNS
 
 ## Useful Commands
@@ -6,7 +6,7 @@ A Distributed approach to Authoritative DNS
 inotifywait -m -q -r -e close_write --format %f ../src/ | grep --line-buffered "\.[h,c]pp$" | while IFS= read -r file; do make && src/core/Plains; done
 ```
 
-PLAINS - Peering Local Authoratative Integrated Name Server
+PLAINS - Public Ledger Authoratative Integrated Name Server
 
 ## Coding Style
 
diff --git a/static/gui/index.htm b/static/gui/index.htm
deleted file mode 100644
index f58b5a4..0000000
--- a/static/gui/index.htm
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Plains Control Panel</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-    #wrapper * {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    }
-
-    body {
-    margin: 0;
-    padding: 0;
-    background-color: #000000;
-    color: #EEEEEE;
-    font-family: sans-serif;
-    font-size: 16px;
-    }
-
-    #wrapper {
-      margin: 0 auto 0 auto;
-      vertical-align: top;
-      width: 800px;
-      min-height: 600px;
-    }
-
-    #wrapper section {
-      display: block;
-    }
-
-    #page {
-      margin-top: 40px; /*This has to match hight of #nav_top so nav-top dosesnt overlap as its not in the same flow*/
-      width: inherit;
-      min-height: inherit;
-      background-color: #FFFFFF;
-      color: #000000;
-    }
-
-    #nav_top {
-      top: 0;
-      position: fixed;
-      width: inherit;
-      height: 40px;
-      color: #AAAAFF;
-      background-color: #0066FF;
-      border-bottom: #000000 1px;
-      display: block;
-    }
-
-    #nav_top ul {
-      height: inherit;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-      justify-content: center;
-      align-items: center;
-    }
-
-    /* Sub-menu */
-    #nav_top ul ul {
-      display: none;
-      position: absolute;
-      top: 100%;
-      height: fit-content;
-    }
-
-    /*popup sub-menu*/
-    #nav_top ul li:hover > ul {
-    display: inherit;
-    }
-
-    #nav_top ul ul li {
-    min-width: 170px;
-    display: block;
-    position: relative;
-    }
-
-    #nav_top ul li {
-      height: inherit;
-      text-decoration: none;
-      list-style-type: none;
-      flex: 20px;
-
-      color: #000000;
-      font-weight: bold;
-      padding: 10px;
-    }
-
-    #nav_top ul li:hover {
-      background-color: #0088FF;
-    }
-
-    #nav_top ul li a {
-    height: inherit;
-    color: #8888FF;
-    font-weight: bold;
-    text-decoration: none;
-    }
-
-    /* Sub-menu */
-    #nav_top ul li ul {
-      height: inherit;
-      display: flex; /*change to none*/
-      flex-direction: column;
-      flex-wrap: nowrap;
-      justify-content: center;
-      align-items: center;
-      height: inherit;
-    }
-
-    #nav_top ul li ul:hover {
-      display: flex;
-    }
-    </style>
-  </head>
-  <body>
-    <div id="wrapper">
-      <section id="nav_top">
-        <ul>
-          <li>Link1</li>
-          <li>Link2</li>
-          <li>
-            Submenu
-            <ul>
-              <li>SubLink1</li>
-              <li>SubLink2</li>
-            </ul>
-          </li>
-        </ul>
-      </section>
-      <section id="page">
-        <h1>Plains Control Panel</h1>
-        <div>Content</div>
-      </section>
-    </div>
-  </body>
-</html>
diff --git a/static/ui/index.htm b/static/ui/index.htm
new file mode 100644
index 0000000..f8840eb
--- /dev/null
+++ b/static/ui/index.htm
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Plains Control Panel</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
+  </head>
+  <body>
+    <section id="nav_left">
+      <h1>PLAINS UI<h1>
+      <h2>Settings</h2>
+      <ul>
+        <li>Zones</li>
+        <li>DHCP</li>
+        <li>Cluster</li>
+      </ul>
+    </section>
+    <section id="page">
+      <h1>Plains Control Panel</h1>
+      <p>Content<br>
+        LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+        Testline<br>
+      </p>
+      </section>
+      <section id="footer">
+        <p>PLAINS v0.03 - Public Ledger Authoratative Integrated Name Server</p>
+      </section>
+      <section id="nav_top">
+      <ul>
+        <li>System Overview</li>
+        <li>Zones</li>
+        <li>DHCP Clients</li>
+        <li>Cluster</li>
+        <li>API</li>
+        <li>
+	  Documentation
+          <ul>
+            <li>API</li>
+            <li>Cluster</li>
+            <li>DHCP</li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+  </body>
+</html>
diff --git a/static/ui/style.css b/static/ui/style.css
new file mode 100644
index 0000000..48c4875
--- /dev/null
+++ b/static/ui/style.css
@@ -0,0 +1,151 @@
+#wrapper * {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-image: linear-gradient(90deg, #000000, #000030, #6000B0, #000030);
+  background-color: #000040;
+  color: #EEEEEE;
+  font-family: Tahoma, Verdana, Arial, sans-serif;
+  font-size: 16px;
+}
+
+p {
+  word-wrap: break-word;
+}
+
+#page {
+  margin: 40px 0 0 150px;
+  left: 150px;
+  top: 40px; /*This has to match hight of #nav_top so nav-top dosesnt overlap as its not in the same flow*/
+  width: 100%;
+  background-color: #FFFFFF;
+  color: #000000;
+  overflow: hidden;
+  opacity: .8;
+}
+
+#nav_top {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  left: 150px;
+  width: 100%;
+  position: fixed;
+  height: 40px;
+  background-image: linear-gradient(90deg, #202020, #000000);
+  background-color: #202020;
+  display: block;
+}
+
+#nav_top ul {
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+#nav_top ul li {
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  text-decoration: none;
+  list-style-type: none;
+  text-align: left;
+  vertical-align: middle;
+  flex: 20px;
+  font-weight: bold;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+#nav_top ul li:hover {
+  background-color: #303030;
+}
+
+/* Sub-menu */
+#nav_top ul ul {
+  display: none;
+  position: absolute;
+  top: 100%;
+  height: fit-content;
+}
+
+#nav_top ul ul:hover {
+  display: flex;
+}
+
+/*popup sub-menu*/
+#nav_top ul li:hover > ul {
+  display: inherit;
+}
+
+#nav_top ul ul li {
+  width: inherit;
+  min-width: inherit;
+  display: block;
+  position: relative;
+}
+
+#footer {
+  background-image: linear-gradient(90deg, #000000, #000030, #6000B0, #000030);
+}
+
+#footer p {
+  text-align: center;
+  margin: 20px;
+}
+
+#nav_left {
+  margin: 0;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 150px;
+  position: fixed;
+  background-image: linear-gradient(#202020, #000000);
+  background-color: #202020;
+}
+
+#nav_left ul {
+  margin: 0;
+  padding: 0;
+  text-align: left;
+}
+
+#nav_left h1 {
+  padding: 0;
+  margin: 10px;
+  text-align: center;
+}
+
+#nav_left h2 {
+  margin: 50px 10px 10px 10px;
+  padding: 0;
+  text-align: left;
+}
+
+
+#nav_left ul li {
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  text-decoration: none;
+  list-style-type: none;
+  text-align: left;
+  flex: 20px;
+  font-weight: bold;
+}
+
+#nav_left ul li:hover {
+  background-color: #303030;
+}