From 19f5a8a49a9b7204be089acac3439b5f369fc639 Mon Sep 17 00:00:00 2001
From: Sven Luethi <dev@svenluthi.com>
Date: Fri, 2 Apr 2021 23:40:12 +0200
Subject: [PATCH] Web interface layout complete

---
 static/ui/index.htm | 234 ++++++++++++++++++++++++--------------------
 static/ui/style.css | 124 +++++++++++++++--------
 2 files changed, 209 insertions(+), 149 deletions(-)

diff --git a/static/ui/index.htm b/static/ui/index.htm
index f8840eb..3b3c03b 100644
--- a/static/ui/index.htm
+++ b/static/ui/index.htm
@@ -6,121 +6,139 @@
     <link rel="stylesheet" type="text/css" href="style.css" media="all" />
   </head>
   <body>
-    <section id="nav_left">
-      <h1>PLAINS UI<h1>
-      <h2>Settings</h2>
+    <section id="nav_top">
       <ul>
-        <li>Zones</li>
-        <li>DHCP</li>
-        <li>Cluster</li>
+        <li><p>Status</p>
+          <ul>
+            <li><p>Overview</p></li>
+            <li><p>Logs</p></li>
+          </ul>
+        </li>
+        <li>
+          <p>Account</p>
+          <ul>
+            <li><p>Manage</p></li>
+            <li><p>Documentation</p></li>
+          </ul>
+	</li>
+        <li>
+          <p>Zone</p>
+          <ul>
+            <li><p>Search</p></li>
+            <li><p>Manage</p></li>
+            <li><p>New</p></li>
+            <li><p>Documentation</p></li>
+          </ul>
+	</li>
+        <li><p>DHCP</p>
+          <ul>
+            <li><p>Clients</p></li>
+            <li><p>Manage</p></li>
+            <li><p>Documentation</p></li>
+          </ul>
+	</li>
+        <li><p>Cluster</p>
+          <ul>
+            <li><p>Status</p></li>
+            <li><p>Manage</p></li>
+            <li><p>Documentation</p></li>
+          </ul>
+        </li>
+        <li><p>API</p>
+          <ul>
+            <li><p>Run Query</p></li>
+            <li><p>Documentation</p></li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+    <section id="nav_left">
+      <h1>PLAINS UI</h1>
+      <h2>v0.03</h2>
+      <ul>
+        <li>About</li>
+        <li>Support</li>
+        <li>Contribute</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>
+        LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
+        LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
+        LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
+        <br>GaophahRuop9ain5Eupheeyae7eYoh6baingiopooc3phie6eo5nish8ug0maiphei8Jahail0Des3choht3uNg9iepeenenewu0xauy5awuquieTh4eeshie6joo3hahphoh7ea5cai5goosh1Ey2ieTeeK9gaeGh2ahcienaezie0naeGeejaiT4eepho8Ia1aiLah
+        <br>Aimoceekieghahsh9wooz3buXe6queeph4Mainapoh2ahjeiquiej4eeroocaiyi4noored0ethahf5eineeyubaixaihookeezaiBooPhahc2Sahgeighaeb2choogoob4johfoh4Xolaleinoh0RaanibooTokagug1peiyeephenaez8ie8aiciengain6Ieyootu
+        <br>AeNge4ahPaezaesie1Ao5yoGhaegaiquie4fai8geiBe8choh2ToShahsee7mieciefaiyei8aikicep7ooCh2aeg8theichegh5eithachai1aimaefiev3boo7ka9Ohiex1ieD5Ow9nae3aatooteephiop1jaucahh7ohzet6iengi8toh8yohca2ahpae6aShoe3
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>aa5eiphooTh0ib6sieveehahMie7Equo3choh9Ohteimeeng3chaeY7weghaipael9yagaingiePhe0eechiet2cheeso9aeg5ZeangahNg5roog0eitooshaiveiy4wo5fahziev5OoTohsie4aivoi5ahgahy7gae3ienu0raijoih3yothaeth0Ahyuare1AiGee6
+        <br>Aegi9hohthie0tie4giecaengohshe2eKooVaer3fiaJoN7yi4oochuiloh0thabiocaejohC0zooRaeRuow5eeVeeghookulahPheengooCh2ieX1NieQueeKee8Eikarux2ooshae9fieh5jeeNgae3Woopheenooxo7baeh9Eche5aihoh5aehaimeingeipoh8na
+        <br>be7oom6aeN4oomed8hohnocae3eedoh9Eefe0een4uo5eitheech3leevuquaezieviepee1Aagho9xaefai2hi7hiuYeisao9Ais7Ieghiu1aingoo3Lu8ahngohwe3Ohveesaixe1iey6toosh5miec0Die0ze5zoi5mewiemachaigaetohpa9WaiSi7saeshee2y
+        <br>yae6AhdaqueePhav0eeghoo5beCeech4faGhiek7Ahs8eiche7meexeiph8Joothohzie5oobee8phoap6ohdae3PhoighaeXoo8ushaitaejohpaeH1eebee8quich9epahk7eequo8Fee2OhViKeifahm1IeGhahgiL1peigh8yee2apupaeyeev4ahGhooK2Oa5ie
+        <br>iSah7eet5cethio2chae7aa4iu3hee0seeceiyajah4oon9ohshie3opeid1ohsh9iejeehahrae7maegh6biGhigoik7Meothoh8eeWiu7quothu8vogh1AeX1AengeayemeuNoaGaemei9beinoigu9Ushei3Phach1Oolalotheshae3ewee5itaeg6ineil4Olei
+        <br>siz0gahshae9ohpoongie2botebeiyaikoh7eeb7pheot5eisahweep3rai3xei2eBie4kail6RapetheH3eengaiko6fahri0iechiramoh2oPh3DaegeiTee2OhHoh5eexaeshiethohbaikoozahf7aipeigh3ieho3iethaeghaeMooV7ooz8adengoh7iulood5
+        ra7eehai7ahshaewaef5quie6zaefooyaighahxepaephoothooGhof2wei9Miechahb4uupookao2Iem4viz5fahhiGhai0ohLeij2yieBaichis5ooqu0phiequeeGhoonah5sewotie9kee9bei8Ip3oong5oKoo6pa1eiD8phie9Oak0Ophaib9ahCieCai5Aek7
+        fah2WohthuNg6enieg3bievoowaifae1AphuvoogiethahraeP6eru3uux5eit6iesu5ohgu2ao8bohmi9eemoeyei1Thah0deorahV9engie5eeriuNgaipeo4iem6oozaoL7yai0reeh2Eidoh2phaoz3pie7sha0fuingahmuu7ieFahv7Tho5zaaNge6nee2Eex8
+        UwaiphiDuuquea0foob4udie4Ais9Uvai9uthaiT6uquah8upa8ahva1Ahcho8ahxee0omimuhe2Yeedeexaepah1Bup4oosuupheethoo4Queiwahsu9eu0uk3Naibei4UeRux9shagietahKa5Sa4cohpheePhae3aNg4aewaibie7ooGh1oht0aisaeriek3Shoob
+        eitaaba3xouNeewiGhiepe7gush8oCoo8pishoocoo6eeceiweegi7mah0oorohvao3phai1FaeMei7foyeexeFeecoov4pho8caepeineizesh5vahhush5efae0phiepheey5ouquee4Oo6diech5ua6heihunatha7chaetohpoh4Vei2kein8ohHihaim1bei3ob
+        aimeed1iePheipeis5eishae2iphej1Eef4ohp7eegeivi8iez6too6fu9ohd0jeeNgae9Oi5Fie1shai9ThemaoZoo1aphuCah0Zaiwee0chief7feexeepheithei9eiGhigh5xaeheeb9aedouvi9Phie8kieX1aeb7UyooJ3boobohZefoo8RateiMailei1Aj4a
+        wocai0re9aiSa1oorueZie7phoSei8Theigh1Ke8kaer5maem8Tei5moequ5Neelahbie6Ohdeph9ceiLoo9Ohfoomeelahz7ijeixohhuisho0hoobejof1oof2eis4abeigoo1dex3fooxae1Wohbie3ahHei1ooz9aesh4fielaib3uk2thoV5zai2haoriejabai
+        shaer1Pa0iehaixow8ufai6ieB9caej8oofienohd2xooB9Iequoat3aNga6aith7oot0Eiheoso5eeph9aeHohngoosh7Ugheo4fohmooKiepoozoo8oa6ohshi5cahx2aes7EeQuo5iY5vie3auwohVaec2zahch9Ro4FeiCh8thuiDia7oofiemi5Ooduphah6ohT
+        UZohlahDeep5wied3ooju0heeghae5ohG9heicheel8ahva5ieghahSei8aaquai1xeGh5hoh5eiv2eixee6Ahlei3aisee2laiji5xiechaeth4heequah2hoo4ohphoow0aichu5eey9yo2Aeh1eok1zaiyoh1nahquoh2eungai4vaFu6ozoNgohsaehil0ou4Ebi
+        <br>Neisu5chiegheighurai3nuikohcich1oozoc9ceisohh2eechaetae6Jahcaewie8asooCo2Oocaese0aisah6nee6ohbahb9oogaecheitiuchoFahz6pha1eeT5ohkaphohLoo4elohghiex9mephay0biem0Aebi1tagheeShaixeileid9eijae8aLo5ahghaiS
+        <br>coo1Cie1ophaej8Id1fohbah8Queipopohhaitee2aiw7pongahh6ahsha5sohl1chao3atiziroh3tohzoo2doong6aina8aep7iedohQuahDee7iZaiJegohkooth5AhzaiGha6xohthiyeaz0Loqu7Eish3ahg4kahwooB3aipa4dahjoot0xohphae0ooteevoob
+        <br>ahn0Ooxaj8mae0Eeshokephahb4ZoaG0iiChuunongeiyoZeaChahDeiVudiepeeghieghachei9xei2keeThijiepha9cheereegeid1tahWie9cohj8EiBu3aex1chaiphom0Ot6Theisuo0kie2atei3au5dee0iodoojaup0wuuthisie7fahCeepheivoh0eiG2
+        <br>puweemie1muteiriech5Shapaik3Pib7Zo8ohsheiChei3doeth3looreiceaYi6chu6Chiegh8eePhahae4tief5buuqu6ahfoch1seizou3ahxooweethi1Yiecie8he4IDae9ko3veeghaeti8aoFoJo9riecuiruakohCh8eeb4Danoh0waiNeh7quio9niyaegu
+        <br>weenga8Ahghee2yohhoiZ9Wood8ahmee6hei0UPheen7umie9aixiechohphe4eesee3ohDo2om4toekeY3Cheev3keidiefohxai9Esooxo0Cahyuy0ooda2chiushai6aiy8otiepa9cho1peDei7yi8voipeiboonoonofae9ahd7bieyeiC5aCu8aek1ao9xu9ga
+        <br>kae0eed3aphauyaBaiThae6nothu3faish1Saethalei1peing0phuong3caiG2ahsuwohXoyiacoo2Wai4Devohxahfai4theixooru7Aehiepeidee3uushiedeeSudie0oh2ZuYeseyohf0eghongohw1ahzohJeiXaP4Laej5Awaiz2iquohso1quae4taemei4a
+        <br>naivaedaequaehah6quaa0vae4eyiemehee1oof9aegh3aexaL5eexi1joTh8voocaeVaiHimahR0Uk0Le1otheegheijaiTeeb0Xeish2EceseePhegh9aighiebae7oubaiS1eihogoongoocahv9Eng7aileidaiquah8Eetohzi7ohy8shaixaiThoh1Eeroopoo
+        <br>chai8beinoh2quei3Yeeng9AhL9Air1keet1tie6voopahShie7Boo5thahpah0phieth2phi5TaeQuein5duGeip3thicaaM6ohHiereeghoi1Fohyoo0ohz0saeziejae0ohb3ieFae9aemievie8dooxahchae1Oujaexo5shiph7aezie8yaezogahvoe1zajah9
+        <br>eiB0deNai1ohf7eeyeideuseD1ahqu4cap8eegoo3aogh9ohdahfiBuquaez7iemai4eenu3lohth3aiWi1beid2yooboopeish9ohRoshoowooneengeijeesah5ohQuahh0wainueNgith1jiho4eQu2hie1pah7ootohphai2auRimieMa3QueidauNg5nioch7Hu
+        <br>giRuu5exi8eek7we6epo5aeRieg5oosieX5depeicai4tho2eehohk2iengiem9nerei3thivaiqu7ahkeeg9xohgh7gah0ahwoo1voxaNooch4suuThiuPhied9piejohleighuad7bein6iThaeNgooghofahhah5shou2chahz4shahqu9ieJahghoz5ahx9he2xe
+        <br>Gingaan1muLi9laicaeph1ieb6Vohhaifeemach4Gae5ahh8quaepheesheexesi4po5biehahphahyeeYei5reesi6huM7joSh5ook1guaxianahV0paiw1ooquoo3eu1of5yieh3ietheew0eiche6soo0yooquie1Aneir0eeduGhophaez2Paeh4eePhah8ahn8e
+        <br>aekieX0wan6op7ahRiTheepeet1feequiu8gah2ioDeef0laa0mohhezie9lei2aiK7maiW9weiLiphuihaum6AejoodohLah7agien7ahToo7Ahvah1taevah1quuuf1nool4daeHialiewoquoogae3oor1oox8Yeizoh6xaeshei4zo3fuqueCooph3rae5ein5do
+        <br>ee6song2aimoon7uabugeeNgoaghooxaejo2lauxeen4xeiWoolo8ziek0Joila1bahw0OuxooloBi7woohahkail4paiHokoo7pohqu2eech1KahMeic8eiDah2chei6oor2ahr9aziengai4ohpu5hein3Iel0ePhoopai9Shutholae1vieJae6os1keesh2la5eb
+        <br>ix4rahk3ahQu9Xoox7og0eeDu5es2jah7CobiuCh0Ozungie9aKei8phush4ohahhaeshahzedieKeeRelohp6ouphai0eiseesae7iap1eimie1ReiXohgheiH1aib4UWaeLoo2ooca1ahxauTheid2feomij9jaeKeiwaht7ul2uen2viquai5vo3EexeiNgoe5Gie
+        <br>kohPoh6iequ4loo3aicongahTh8Aevie3eew2ra6gei2ieGhae9ohch6uQuijiewei3aeyoo8jatoochiesh7ujitahjohf5vaiba3ohthielooph6foquahz4Edahph6De8aid4upai4ataepaeGu8vuep8ooph9doTho4UoQuaeshoo6Aiqu0aM2oophooyee3cai9
+        <br>raephohreef1ku5uNgayielee3iephoh0phesh0aiy8iequ0reeto6et0pho8Eedi0ahzaidoh4gie5rochah4pheoQu8veiraiDohkaeth9chauph0ATi1OhW3Ke2oineku9Sheechooleu1ae3ughoghugh4jeiH5ohghiecaeLiewiejaiNupohveigaib6thiZuo
+        <br>eecai9hahrahp4eeth6eoyuthi5eeb7ein8UuB3ohP7Foung5eng7ibai0yei5Phee8Ooyeitee8airaeshahth2ees6ieW7nukong5Miew8eimae6xaeb2ohcohie5phaileeshoo4Boa7oengaep2bae7adiM4eiBieth9nai2gooXahvae7iejooGeiw1eiqu7nai
+        <br>aakee4Uo2ahph0eep7Akuucah3ue5eipahDeeh2pahdohchei1AiVusaisiev0Ighoowo5Yuu9choo3ahMeiG3iNie8kae3vieCooBoloo0aila0shei8theenie7Ohk5Oo8Ohl4Ixoo9youjeequoo2AWeiYea5quuungiech7Eefaijeequoogieth4thah6faishi
+        <br>xeep2vaiyie8phohro2oos3ochai8shai4saeth1Baipooxiech5gaox2tohquaen3eur3uthiesh9Uuche9boYoh3utheluR4jahgaechohd6iequief7aithebavohnuphae6zirahs2weigaem2jagheeNohfae4ohxuepheeRoowiagh3eechi4eik7acheihopi
+        <br>rua5iTh7thie9aib4eighauw3faileiPe8Okuephuc7fooMi1xieZ9Lei7OomoiDiip4quiew4GooChaingaechohh4phu8Eech4Ta2ae1cae5OhBooGohlia9eiy0Aengoodoquahraengoi0do1lain5wiay9ieH8ahngahchei7iso8aiv5Ze6ieL8pe5eetheewa
+        <br>YengahlohGhe3phahquaabeij5ieh0AhwahzufoPh1queedoghai3eo6iesha5aipacae3odielahghehohG2aeloleexezeiK2BaeF4chie0pahphuRo6mae3Zi6looghoree8OoxahLohm9gai3eiYo6ikia7ia6weedee4wohghaghiefo3aithieheo7ohqu0aer
+        <br>eephuoyooNgien4ahc1Nuo7EeXae6iSai5angoh7Vierahbu5aemoot5kaiquahyei6niethaeC8heth3quai0nun3aihiuGekahQu3Aitoi3waeheikieYuShi8ei1uwaug6Et3ohjaph9wai2sii1Daef7aiyooX2OolaeT5laefoh3ahxaet9ahzai4iequ8Eeghu
+        <br>ahdeingohp3chai3ohch0igh7iete7eephahph4ieTo6ia5fien2AiGhi0Ahhe9Ohh2caiyen1Di5yohfooshu9ooyuch8zaW7thahr4ocho0jee1xooGaeshooyahjainioliph0UuyaeHaew8shohsh2oocaeFaph6Quee3bei8eexibei2lah3uez5phoonequ7ee
+        <br>aethahdee7eiPheing1chaichu4iejaish8theng0Eofaewouc8IequuuPh9eeZoko8tee2Pah4aeRu4ooMo9Ooj1ohxail0Woo3iePh6hei1aeNg4zeeke8yeetheing0oochahzooGhoch2yooShohrohhaudoh2aeGhoothee1Sei3ke0ohzo6Ail6Quiejequoh9
+        <br>aethahdee7eiPheing1chaichu4iejaish8theng0Eofaewouc8IequuuPh9eeZoko8tee2Pah4aeRu4ooMo9Ooj1ohxail0Woo3iePh6hei1aeNg4zeeke8yeetheing0oochahzooGhoch2yooShohrohhaudoh2aeGhoothee1Sei3ke0ohzo6Ail6Quiejequoh9
+        <br>aethahdee7eiPheing1chaichu4iejaish8theng0Eofaewouc8IequuuPh9eeZoko8tee2Pah4aeRu4ooMo9Ooj1ohxail0Woo3iePh6hei1aeNg4zeeke8yeetheing0oochahzooGhoch2yooShohrohhaudoh2aeGhoothee1Sei3ke0ohzo6Ail6Quiejequoh9
+        <br>Thoo5deequai3weis1aW1LahTh5teejaeVoh3Ushoo4eingoux2Upahyoh7avooneigheezah2goopugei2fohyee1seephahquudiequ7cheitaixoh9Xiereepoocahch7Raexaeteesheeshe2ayiav2aigokaeg1xuJahqueithie0Eip6ooSi4oavooSheeZooz
+        <br>phoashei4quaizae2laiv1eigiek4iengaith2lei1eesae0eib2ohph4xahshei6mee9fekoSh8agh5ilaochiluiv9aish1jie1eeQuohk9vailudifahwukouweeGh5oa3ieX2aegoo3eepootuufel5faer1aez5uh8ohhieth7de4lu1waoh5uazie5Bahzoog1
+        <br>ootahY1oowaengaJoh6fuJ3aeR3hoox5coozenae4Ohtheiloonei1fahreevohsiepoili1iodai2Eigh4eezie6RahyahleeChaegaeGhiVuQu3umaefaemie0Ai1ahph9boo4ahth9Akaewoh7ugh6ooJiechaetaxoh1AhkooFu7ieloh2ahpaib4oogiesohzoo
+        <br>fohph0EibacieGhi5vaiweeY7re9Viesh0saivaephohcheeh0adua4Na3aa9mooquah2nahtohjieghievoyawooGhah6ingaNg7ioch2fiteewawooNgeeMi2vah0xah7eeNoh5saic6ohV6nop8ooPh3ahmohSahtooYeeshoo4leghei6Equaipua7yie0shieKu
+        <br>Uz1Eimoo4rohshai8ohvea1ahchahfod3uen3oopeeghahvacaco3oe8xooceuthai3SeiquieChiTu1eijiighedae7tush7oeghequeeWoaTuyih6airaid7mohn3chahkaghi2thozaeruo5ahyiWimeeghieph3eeshoom8Chifo4eeCae9oharoich6caiVah1u
+        <br>kair1ufoow2ohPhohFohHu8aiThoonoo6aiBaeNg7uun4veX2OhQueerae6iudah9Phaix7eif3aeJah5AiZahd4queegiek7shai7eig1Gaveichi9rahxiutoesierei4quaip3iez0zuiC6Eohei0eengeziey8shiosha1aegi6shie2saiPh1Dah0eehahph1oh
+        <br>ieb0eexaeyohmeex2ohXeex3ooTah2queiroh4Sahshuu6pahziixee5AH1AifieXeiGh5Rochoocoo6shuvu7soh2eeGh3eizaeMohdieFeemohdaon1ioDepai5eigier4ohbaiMa1igohxaiNg8buoriefogahcheiVahNoo4eig6moh7TheifiP1shiemiekiizi
       </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>
+    <section id="footer">
+      <p>PLAINS v0.03</p>
     </section>
   </body>
 </html>
diff --git a/static/ui/style.css b/static/ui/style.css
index 48c4875..49bb823 100644
--- a/static/ui/style.css
+++ b/static/ui/style.css
@@ -5,13 +5,14 @@
 }
 
 body {
-  margin: 0;
+  margin: 50px 0 0 150px;
   padding: 0;
-  background-image: linear-gradient(90deg, #000000, #000030, #6000B0, #000030);
-  background-color: #000040;
+  background-image: linear-gradient(90deg, #202020, #000000);
+  background-color: #000000;
   color: #EEEEEE;
   font-family: Tahoma, Verdana, Arial, sans-serif;
   font-size: 16px;
+  min-width: 800px;
 }
 
 p {
@@ -19,27 +20,30 @@ p {
 }
 
 #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;
+  margin: 0;
+  padding: 15px 30px 30px 30px;
+  position: relative;
+  top: 0; /*This has to match hight of #nav_top so nav-top dosesnt overlap as its not in the same flow*/
+  right: 0;
+  height: 100%;
+  background-color: #101010;
   overflow: hidden;
-  opacity: .8;
 }
 
 #nav_top {
   margin: 0;
   padding: 0;
   top: 0;
+  right: 0;
   left: 150px;
-  width: 100%;
   position: fixed;
-  height: 40px;
+  height: 50px;
   background-image: linear-gradient(90deg, #202020, #000000);
   background-color: #202020;
   display: block;
+  z-index: 1;
+  min-width: 550px;
+  border-bottom: 1px solid #000000;
 }
 
 #nav_top ul {
@@ -63,25 +67,30 @@ p {
   vertical-align: middle;
   flex: 20px;
   font-weight: bold;
-  justify-content: center;
   display: flex;
   align-items: center;
+  font-size: 120%;
 }
 
 #nav_top ul li:hover {
   background-color: #303030;
 }
 
+#nav_top ul li p {
+  margin: 0;
+  padding: 0 20px;
+}
+
 /* Sub-menu */
-#nav_top ul ul {
-  display: none;
+#nav_top ul li ul {
+  display: none; /*change to none after debugging*/
   position: absolute;
   top: 100%;
   height: fit-content;
-}
-
-#nav_top ul ul:hover {
-  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: left;
+  align-items: left;
 }
 
 /*popup sub-menu*/
@@ -89,19 +98,45 @@ p {
   display: inherit;
 }
 
-#nav_top ul ul li {
-  width: inherit;
-  min-width: inherit;
-  display: block;
+#nav_top ul li ul li {
+  margin: 0;
+  padding: 15px 0;
+  width: 100%;
+  display: flex;
+  background-color: #303030;
   position: relative;
+  text-decoration: none;
+  list-style-type: none;
+  text-align: left;
+  vertical-align: middle;
+  flex: 20px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  font-size: 80%;
+}
+
+#nav_top ul li ul li:hover {
+  background-color: #404040;
 }
 
 #footer {
-  background-image: linear-gradient(90deg, #000000, #000030, #6000B0, #000030);
+  margin: 0;
+  height: 50px;
+  justify-content: left;
+  display: flex;
+  align-items: center;
+  position: relative;
+  right: 0;
+  bottom: 0;
+  /*background-image: linear-gradient(90deg, #202020, #000000);*/
+  /*background-image: linear-gradient(90deg, #000000, #000030, #6000B0, #000030);*/
+  border-top: 1px solid #000000;
 }
 
 #footer p {
-  text-align: center;
+  font-weight: bold;
+  font-size: 130%;
   margin: 20px;
 }
 
@@ -112,38 +147,45 @@ p {
   height: 100%;
   width: 150px;
   position: fixed;
-  background-image: linear-gradient(#202020, #000000);
   background-color: #202020;
+  z-index: 1;
+  border-right: 1px solid #000000;
 }
 
 #nav_left ul {
   margin: 0;
   padding: 0;
   text-align: left;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+#nav_left ul li {
+  margin: 0;
+  padding: 20px 0;
+  height: inherit;
+  width: 100%;
+  text-decoration: none;
+  list-style-type: none;
+  text-align: center;
+  flex: 20px;
+  font-weight: bold;
+  font-size: 120%;
 }
 
 #nav_left h1 {
+  margin: 12px 0;
   padding: 0;
-  margin: 10px;
   text-align: center;
 }
 
 #nav_left h2 {
-  margin: 50px 10px 10px 10px;
+  margin: 50px 0 30px 0;
   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;
+  text-align: center;
 }
 
 #nav_left ul li:hover {