diff --git a/static/gui/index.htm b/static/gui/index.htm
new file mode 100644
index 0000000..4e8a8b2
--- /dev/null
+++ b/static/gui/index.htm
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Plains Control Panel</title>
+    <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: 900px;
+    }
+
+    #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;
+      height: 800px;
+      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>