diff --git a/.gitignore b/.gitignore
index 82e8fb40..eebe647b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,4 @@
 tarpaulin-report.html
 .env
 .env
-tarpaulin-report.html
+cobertura.xml
diff --git a/Makefile b/Makefile
new file mode 100644
index 00000000..29660e8b
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,47 @@
+# WIP
+default: build-frontend
+	cargo build
+
+run: build-frontend
+	cargo run
+
+dev-env:
+	cargo fetch
+	cd frontend; yarn install
+
+docs:
+	cargo doc --no-deps --workspace --all-features
+
+build-frontend:
+	cd frontend; yarn build
+
+test: migrate
+	cargo test
+
+xml-test-coverage: migrate
+	cargo tarpaulin -t 1200 --out Xml
+
+coverage: migrate
+	cargo tarpaulin -t 1200 --out Html
+
+release: build-frontend
+	cargo build --release
+
+clean:
+	cargo clean
+	cd frontend
+	yarn clean
+
+migrate:
+	cargo run --bin tests-migrate
+
+help:
+	@echo  '  docs      	- build documentation'
+	@echo  '  run       	- run developer instance'
+	@echo  '  test 		- run unit and integration tests'
+	@echo  '  migrate   	- run database migrations'
+	@echo  '  dev-env 	- download dependencies'
+	@echo  '  clean     	- drop builds and environments'
+	@echo  '  coverage 	- build test coverage in HTML format'
+	@echo  '  xml-coverage 	- build test coverage in XML for upload to codecov'
+	@echo  ''
diff --git a/frontend/src/main.rs b/frontend/src/main.rs
index a4f9cff8..85080aec 100644
--- a/frontend/src/main.rs
+++ b/frontend/src/main.rs
@@ -114,6 +114,8 @@ pub mod panel {
         pub active: &'static SubPanel,
     }
 
+    const TITLE: &str = "Dashboard";
+
     impl Default for IndexPage {
         fn default() -> Self {
             IndexPage {
diff --git a/frontend/templates/panel/add-site-key/index.html b/frontend/templates/panel/add-site-key/index.html
new file mode 100644
index 00000000..e2bb2ecb
--- /dev/null
+++ b/frontend/templates/panel/add-site-key/index.html
@@ -0,0 +1,48 @@
+<form class="sitekey-form" action="/something" method="post">
+  <div class="sitekey-form__title-flex-container">
+    <b class="sitekey-form__title">Add Site Key</b>
+  </div>
+  <div class="sitekey-form__add-level-flex-container">
+    <label class="sitekey-form__label" for="description">Description</label>
+  </div>
+  <input
+    class="sitekey-form__input"
+    type="text/"
+    name="description"
+    id="description"
+    value=""
+  />
+
+  <div class="sitekey-form__add-level-flex-container">
+    <!-- insert Javascript for adding more levels as needed -->
+    <label class="sitekey-form__label" for="level1">Level 1</label>
+  </div>
+
+  <input
+    class="sitekey-form__input"
+    type="text/"
+    name="level1"
+    id="level1"
+    value=""
+  />
+
+  <div class="sitekey-form__add-level-flex-container">
+    <label class="sitekey-form__label" for="level1">Level 2</label>
+  </div>
+
+  <div class="sitekey-form__add-level-flex-container">
+    <!--
+              <div class="sitekey-form__add-level-spacer"></div>
+              -->
+    <input
+      class="sitekey-form__input--add-level"
+      type="text/"
+      name="level2"
+      id="level2"
+      value=""
+    />
+
+    <button class="sitekey-form__add-level">Add Level</button>
+  </div>
+  <button class="sitekey-form__submit" type="submit">Submit</button>
+</form>
diff --git a/frontend/templates/panel/header/index.html b/frontend/templates/panel/header/index.html
new file mode 100644
index 00000000..bbab0382
--- /dev/null
+++ b/frontend/templates/panel/header/index.html
@@ -0,0 +1,3 @@
+<header>
+  <. include!("./sidebar/index.html"); .>
+</header>
diff --git a/frontend/templates/panel/header/sidebar/index.html b/frontend/templates/panel/header/sidebar/index.html
new file mode 100644
index 00000000..8199e3f8
--- /dev/null
+++ b/frontend/templates/panel/header/sidebar/index.html
@@ -0,0 +1,88 @@
+<nav class="secondary-menu">
+  <ul>
+    <li class="secondary-menu__heading">
+      <img class="secondary-menu__logo" src="./icon-trans.png" alt="Logo" />
+      <div class="secondary-menu__brand-name">
+        mCaptcha
+      </div>
+    </li>
+
+    <!--
+          <li class="secondary-menu__section-partition"></li>
+          -->
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="./svg/home.svg" alt="" />
+        <div class="secondary-menu__item-name">
+          Overview
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="./svg/key.svg" alt="" />
+        <div class="secondary-menu__item-name">
+          Site Keys
+        </div>
+      </a>
+    </li>
+    <!--
+          <li class="main-menu__item--spacer"></li>
+          -->
+
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="./svg/settings.svg" alt="" />
+        <div class="secondary-menu__item-name">
+          Settings
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="./svg/credit-card.svg" alt="" />
+        <div class="secondary-menu__item-name">
+          Billing
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="./svg/help-circle.svg" alt="" />
+        <div class="secondary-menu__item-name">
+          Help
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img
+          class="secondary-menu__icon"
+          src="./svg/message-square.svg"
+          alt=""
+        />
+
+        <div class="secondary-menu__item-name">
+          Support
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="./svg/file-text.svg" alt="" />
+        <div class="secondary-menu__item-name">
+          API Docs
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="./svg/github.svg" alt="" />
+        <div class="secondary-menu__item-name">
+          Source Code
+        </div>
+      </a>
+    </li>
+  </ul>
+</nav>
+<!-- Nav/Side/Secondary bar -->
diff --git a/frontend/templates/panel/help-banner/index.html b/frontend/templates/panel/help-banner/index.html
new file mode 100644
index 00000000..52f3fbd9
--- /dev/null
+++ b/frontend/templates/panel/help-banner/index.html
@@ -0,0 +1,14 @@
+<ul class="help-text">
+  <li class="help-text__instructions">
+    <span class="help-text__serial-num">1</span>
+    Add sitekey
+  </li>
+  <li class="help-text__instructions">
+    <span class="help-text__serial-num">2</span>
+    Add client-side code snippets in places that you want to protext
+  </li>
+  <li class="help-text__instructions">
+    <span class="help-text__serial-num">3</span>
+    Add servers-side verification logic
+  </li>
+</ul>
diff --git a/frontend/templates/panel/index.html b/frontend/templates/panel/index.html
index 261bf0ca..63e45bd8 100644
--- a/frontend/templates/panel/index.html
+++ b/frontend/templates/panel/index.html
@@ -1,39 +1,356 @@
-<. include!("../components/headers.html"); .> <. include!("nav/index.html"); .>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title><.= TITLE .></title>
+  </head>
+  <body>
 
-<section class="page-content">
-  <section class="search-and-user">
-    <form>
-      <input type="search" placeholder="Search Pages..." />
-      <button type="submit" aria-label="submit form">
-        <svg aria-hidden="true">
-          <use xlink:href="#search"></use>
-        </svg>
-      </button>
-    </form>
-    <div class="admin-profile">
-      <span class="greeting">Hello Batman</span>
-      <div class="notifications">
-        <span class="badge">1</span>
-        <svg>
-          <use xlink:href="#users"></use>
-        </svg>
+	  <. include!("./header/index.html"); .>
+
+    <main>
+
+		<. include!("./taskbar/index.html"); .>
+
+		<. include!("./help-banner/index.html"); .>
+      <!-- Main content container -->
+      <div class="inner-container">
+        <!-- Main menu/ important actions roaster -->
+
+		<. include!("./add-site-key/index.html"); .>
       </div>
-    </div>
-  </section>
-  <section class="grid">
-    <article></article>
-    <article></article>
-    <article></article>
-    <article></article>
-    <article></article>
-    <article></article>
-    <article></article>
-    <article>
+      <!-- end of container -->
+    </main>
+  </body>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    li {
+      list-style: none;
+    }
+
+    :root {
+      --green: #5cad66;
+      --violet: #800080;
+      --backdrop: #f0f0f0;
+      --light-text: rgba(255, 255, 255, 0.87);
+      --secondary-backdrop: #2b2c30;
+      --light-grey: rgba(0, 0, 0, 0.125);
+    }
+
+    .secondary-menu {
+      position: fixed;
+      width: 14%;
+      left: 0;
+      bottom: 0;
+      top: 0;
+      right: 0;
+      height: 100%;
+      overflow: auto;
+
+      background-color: var(--secondary-backdrop);
+      color: var(--light-text);
+    }
+
+    .secondary-menu__heading {
+      margin: auto;
+      padding: 20px 5px;
+      display: flex;
+    }
+    .secondary-menu__heading:hover {
+      color: var(--green);
+      cursor: grab;
+    }
+
+    .secondary-menu__logo {
+      width: 70px;
+      display: inline-block;
+    }
+
+    .secondary-menu__brand-name {
+      display: inline-block;
+      margin: auto;
+      font-size: 1.5rem;
+    }
+
+    .secondary-menu__item {
+      margin: auto;
+      padding: 20px 25px;
+      display: flex;
+    }
+
+    .secondary-menu__icon {
+      filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
+        brightness(103%) contrast(103%);
+      opacity: 0.8;
+      width: 1rem;
+      margin: auto;
+      margin-right: 10px;
+    }
 
 
-    </article>
 
-  </section>
-</section>
+    .secondary-menu__item-name {
+      display: inline-block;
+      margin: auto;
+      font-size: 1rem;
+    }
 
-<. include!("../components/footers.html"); .>
+    /*
+    .secondary-menu__section-partition {
+      border-bottom: 1px solid var(--light-text);
+      margin: auto;
+      max-width: 70%;
+      list-style: none;
+      margin: 20px;
+    }
+    */
+
+    .secondary-menu__item-link:hover {
+      color: var(--green);
+      cursor: grab;
+      filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
+        brightness(91%) contrast(92%);
+    }
+
+    .secondary-menu__item-link {
+      color: inherit;
+      width: 100%;
+      height: 100%;
+    }
+
+    main {
+      position: fixed;
+      top: 0;
+      right: 0;
+      left: 14%;
+      bottom: 0;
+      background-color: var(--backdrop);
+    }
+
+    .task-bar {
+      display: flex;
+      padding: 0px;
+      margin: 0px;
+      background-color: #fff;
+    }
+
+
+    .task-bar__action{
+      display: inline-block;
+      padding: 10px 0px;
+      margin: auto;
+    }
+
+    .task-bar__spacer {
+      min-width: 250px;
+      flex: 6;
+    }
+
+    .task-bar__icon {
+      opacity: 0.8;
+      width: 1.5rem;
+      margin: auto 20px;
+    }
+
+    .task-bar__icon:hover{
+      cursor: grab;
+    }
+
+    .main-menu {
+      display: flex;
+      flex-grow: 0;
+      padding-top: 20px;
+      padding-left: 10px;
+    }
+
+    .main-menu__item {
+      list-style: none;
+      background-color: #c3c3c3;
+      flex: 2;
+      text-align: center;
+      vertical-align: middle;
+      margin: auto 20px;
+      padding: 10px 0;
+    }
+
+    .main-menu__item--spacer {
+      list-style: none;
+      flex: 3;
+      text-align: center;
+    }
+
+    .main-menu__item:hover {
+      background-color: grey;
+      cursor: grab;
+    }
+
+    .main-menu__item:last-child {
+      padding: 0;
+      display: flex;
+      flex: 2;
+      border: none;
+      background-color: unset;
+    }
+
+    .main-menu__item:last-child:hover {
+      cursor: unset;
+      background-color: unset;
+    }
+
+    .main-menu__add-site {
+      display: inline-block;
+      background-color: var(--violet);
+      color: white;
+      font-weight: 500;
+      font-size: 16px;
+      padding: 10px 15px;
+
+      border-radius: 5px;
+      border: 1px grey solid;
+      min-height: 45px;
+      margin: auto;
+    }
+
+    .main-menu__add-site:hover {
+      background-color: var(--violet);
+      cursor: grab;
+      transform: translateY(-5px);
+    }
+
+    .help-text {
+      border-radius: 4px;
+      box-shadow: var(--secondary-backdrop) 0px 2px 6px 0px;
+      min-width: 70%;
+      max-width: 80%;
+      min-height: 70px;
+      display: flex;
+      margin-left: 15px;
+      margin-top: 40px;
+    }
+
+    .help-text__serial-num {
+      display: inline-flex;
+      background-color: var(--violet);
+      color: var(--light-text);
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .help-text__instructions {
+      display: inline-block;
+      list-style: none;
+      font-size: 19px;
+      font-weight: 500;
+      padding: 10px;
+      margin: auto;
+    }
+
+    .inner-container {
+      display: flex;
+      box-sizing: border-box;
+      max-width: 50%;
+      margin: 50px auto;
+      border-radius: 5px;
+      display: flex;
+    }
+
+    .sitekey-form {
+      display: flex;
+      flex-direction: column;
+      width: 90%;
+      justify-content: center;
+      align-items: center;
+      box-sizing: content-box;
+      background-color: #fff;
+      margin: auto;
+      padding-bottom: 30px;
+    }
+
+    .sitekey-form__title-flex-container {
+      display: flex;
+      width: 100%;
+      border-bottom: 0.1px solid var(--light-grey);
+    }
+
+    .sitekey-form__title {
+      padding-left: 10px;
+      font-size: 1rem;
+      padding: 0.75rem 1.25rem;
+    }
+
+    .sitekey-form__label {
+      display: block;
+      margin: 10px 0;
+      box-sizing: inherit;
+      justify-self: left;
+    }
+
+    .sitekey-form__input {
+      position: relative;
+      margin-top: 5px;
+      box-sizing: border-box;
+      height: 40px;
+      width: 90%;
+    }
+
+    .sitekey-form__input--add-level {
+      position: relative;
+      margin-top: 5px;
+      box-sizing: inherit;
+      flex: 3;
+      height: 40px;
+      margin-right: 20px;
+    }
+
+    .sitekey-form__add-level-flex-container {
+      display: flex;
+      box-sizing: border-box;
+      width: 90%;
+      margin-top: 10px;
+    }
+
+    .sitekey-form__add-level-spacer {
+      flex: 3;
+    }
+
+    .sitekey-form__add-level {
+      background-color: var(--violet);
+      color: white;
+      padding: 5px;
+      font-size: 16px;
+
+      border-radius: 5px;
+      border: 1px var(--light-grey) solid;
+      height: 40px;
+      min-width: 125px;
+      margin: auto;
+    }
+
+    .sitekey-form__submit {
+      margin-top: 50px;
+      display: block;
+      background-color: var(--violet);
+      color: white;
+      padding: 5px;
+      font-size: 20px;
+
+      border-radius: 5px;
+      border: 1px var(--light-grey) solid;
+      min-height: 45px;
+      width: 125px;
+      width: 90%;
+    }
+  </style>
+</html>
diff --git a/frontend/templates/panel/layout.html b/frontend/templates/panel/layout.html
deleted file mode 100644
index cfec7e46..00000000
--- a/frontend/templates/panel/layout.html
+++ /dev/null
@@ -1,577 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    <header>
-      <nav class="secondary-menu">
-        <ul>
-          <li class="secondary-menu__heading">
-            <img
-              class="secondary-menu__logo"
-              src="./icon-trans.png"
-              alt="Logo"
-            />
-            <div class="secondary-menu__brand-name">
-              mCaptcha
-            </div>
-          </li>
-
-          <!--
-          <li class="secondary-menu__section-partition"></li>
-          -->
-          <li class="secondary-menu__item">
-            <a class="secondary-menu__item-link" href="">
-              <img class="secondary-menu__icon" src="./svg/home.svg" alt="" />
-              <div class="secondary-menu__item-name">
-                Overview
-              </div>
-            </a>
-          </li>
-          <li class="secondary-menu__item">
-            <a class="secondary-menu__item-link" href="">
-              <img class="secondary-menu__icon" src="./svg/key.svg" alt="" />
-              <div class="secondary-menu__item-name">
-                Site Keys
-              </div>
-            </a>
-          </li>
-          <!--
-          <li class="main-menu__item--spacer"></li>
-          -->
-
-          <li class="secondary-menu__item">
-            <a class="secondary-menu__item-link" href="">
-              <img
-                class="secondary-menu__icon"
-                src="./svg/settings.svg"
-                alt=""
-              />
-              <div class="secondary-menu__item-name">
-                Settings
-              </div>
-            </a>
-          </li>
-          <li class="secondary-menu__item">
-            <a class="secondary-menu__item-link" href="">
-              <img
-                class="secondary-menu__icon"
-                src="./svg/credit-card.svg"
-                alt=""
-              />
-              <div class="secondary-menu__item-name">
-                Billing
-              </div>
-            </a>
-          </li>
-          <li class="secondary-menu__item">
-            <a class="secondary-menu__item-link" href="">
-              <img
-                class="secondary-menu__icon"
-                src="./svg/help-circle.svg"
-                alt=""
-              />
-              <div class="secondary-menu__item-name">
-                Help
-              </div>
-            </a>
-          </li>
-          <li class="secondary-menu__item">
-            <a class="secondary-menu__item-link" href="">
-              <img
-                class="secondary-menu__icon"
-                src="./svg/message-square.svg"
-                alt=""
-              />
-
-              <div class="secondary-menu__item-name">
-                Support
-              </div>
-            </a>
-          </li>
-          <li class="secondary-menu__item">
-            <a class="secondary-menu__item-link" href="">
-              <img
-                class="secondary-menu__icon"
-                src="./svg/file-text.svg"
-                alt=""
-              />
-              <div class="secondary-menu__item-name">
-                API Docs
-              </div>
-            </a>
-          </li>
-          <li class="secondary-menu__item">
-            <a class="secondary-menu__item-link" href="">
-              <img class="secondary-menu__icon" src="./svg/github.svg" alt="" />
-              <div class="secondary-menu__item-name">
-                Source Code
-              </div>
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <!-- Nav/Side/Secondary bar -->
-    </header>
-    <!--
-    <nav class="secondary-menu">
-      <ul>
-        <li class="secondary-menu__item">Sidebar Item</li>
-        <li class="secondary-menu__item">Sidebar Item</li>
-        <li class="secondary-menu__item">Sidebar Item</li>
-        <li class="secondary-menu__item">Sidebar Item</li>
-        <li class="secondary-menu__item">Sidebar Item</li>
-      </ul>
-    </nav>
-    -->
-
-    <main>
-      <ul class="task-bar">
-        <!--
-        <li class="task-bar__action">Brand Name</li>
-        -->
-        <li class="task-bar__spacer"></li>
-        <li class="task-bar__action">
-          <button class="main-menu__add-site">+ New Site</button>
-        </li>
-        <li class="task-bar__action">
-          <img class="task-bar__icon" src="./svg/moon.svg" alt="Profile" />
-        </li>
-
-
-        <li class="task-bar__action">
-          <img
-            class="task-bar__icon"
-            src="./svg/bell.svg"
-            alt="Notifications"
-          />
-        </li>
-
-        <li class="task-bar__action">
-          <img class="task-bar__icon" src="./svg/user.svg" alt="Profile" />
-        </li>
-      </ul>
-
-      <!--
-      <ul class="main-menu">
-        <!-- important actions
-        <!--
-        <li class="main-menu__item">Overview</li>
-        <li class="main-menu__item">Site Keys</li>
-        <li class="main-menu__item">Settings</li>
-		-->
-      <li class="main-menu__item--spacer"></li>
-      <!-- dummy
-        <li class="main-menu__item">
-          <button class="main-menu__add-site">+ New Site</button>
-        </li>
-      </ul>
-      -->
-
-      <ul class="help-text">
-        <li class="help-text__instructions">
-          <span class="help-text__serial-num">1</span>
-          Add sitekey
-        </li>
-        <li class="help-text__instructions">
-          <span class="help-text__serial-num">2</span>
-          Add client-side code snippets in places that you want to protext
-        </li>
-        <li class="help-text__instructions">
-          <span class="help-text__serial-num">3</span>
-          Add servers-side verification logic
-        </li>
-      </ul>
-
-      <!-- Main content container -->
-      <div class="inner-container">
-        <!-- Main menu/ important actions roaster -->
-
-        <form class="sitekey-form" action="/something" method="post">
-          <div class="sitekey-form__title-flex-container">
-            <b class="sitekey-form__title">Add Site Key</b>
-          </div>
-          <div class="sitekey-form__add-level-flex-container">
-            <label class="sitekey-form__label" for="description"
-              >Description</label
-            >
-          </div>
-          <input
-            class="sitekey-form__input"
-            type="text/"
-            name="description"
-            id="description"
-            value=""
-          />
-
-          <div class="sitekey-form__add-level-flex-container">
-            <!-- insert Javascript for adding more levels as needed -->
-            <label class="sitekey-form__label" for="level1">Level 1</label>
-          </div>
-
-          <input
-            class="sitekey-form__input"
-            type="text/"
-            name="level1"
-            id="level1"
-            value=""
-          />
-
-          <div class="sitekey-form__add-level-flex-container">
-            <label class="sitekey-form__label" for="level1">Level 2</label>
-          </div>
-
-          <div class="sitekey-form__add-level-flex-container">
-            <!--
-              <div class="sitekey-form__add-level-spacer"></div>
-              -->
-            <input
-              class="sitekey-form__input--add-level"
-              type="text/"
-              name="level2"
-              id="level2"
-              value=""
-            />
-
-            <button class="sitekey-form__add-level">Add Level</button>
-          </div>
-          <button class="sitekey-form__submit" type="submit">Submit</button>
-        </form>
-      </div>
-      <!-- end of container -->
-    </main>
-  </body>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-    }
-
-    a {
-      text-decoration: none;
-    }
-
-    li {
-      list-style: none;
-    }
-
-    :root {
-      --green: #5cad66;
-      --violet: #800080;
-      --backdrop: #f0f0f0;
-      --light-text: rgba(255, 255, 255, 0.87);
-      --secondary-backdrop: #2b2c30;
-      --light-grey: rgba(0, 0, 0, 0.125);
-    }
-
-    .secondary-menu {
-      position: fixed;
-      width: 14%;
-      left: 0;
-      bottom: 0;
-      top: 0;
-      right: 0;
-      height: 100%;
-      overflow: auto;
-
-      background-color: var(--secondary-backdrop);
-      color: var(--light-text);
-    }
-
-    .secondary-menu__heading {
-      margin: auto;
-      padding: 20px 5px;
-      display: flex;
-    }
-    .secondary-menu__heading:hover {
-      color: var(--green);
-      cursor: grab;
-    }
-
-    .secondary-menu__logo {
-      width: 70px;
-      display: inline-block;
-    }
-
-    .secondary-menu__brand-name {
-      display: inline-block;
-      margin: auto;
-      font-size: 1.5rem;
-    }
-
-    .secondary-menu__item {
-      margin: auto;
-      padding: 20px 25px;
-      display: flex;
-    }
-
-    .secondary-menu__icon {
-      filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
-        brightness(103%) contrast(103%);
-      opacity: 0.8;
-      width: 1rem;
-      margin: auto;
-      margin-right: 10px;
-    }
-
-
-
-    .secondary-menu__item-name {
-      display: inline-block;
-      margin: auto;
-      font-size: 1rem;
-    }
-
-    /*
-    .secondary-menu__section-partition {
-      border-bottom: 1px solid var(--light-text);
-      margin: auto;
-      max-width: 70%;
-      list-style: none;
-      margin: 20px;
-    }
-    */
-
-    .secondary-menu__item-link:hover {
-      color: var(--green);
-      cursor: grab;
-      filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
-        brightness(91%) contrast(92%);
-    }
-
-    .secondary-menu__item-link {
-      color: inherit;
-      width: 100%;
-      height: 100%;
-    }
-
-    main {
-      position: fixed;
-      top: 0;
-      right: 0;
-      left: 14%;
-      bottom: 0;
-      background-color: var(--backdrop);
-    }
-
-    .task-bar {
-      display: flex;
-      padding: 0px;
-      margin: 0px;
-      background-color: #fff;
-    }
-
-
-    .task-bar__action{
-      display: inline-block;
-      padding: 10px 0px;
-      margin: auto;
-    }
-
-    .task-bar__spacer {
-      min-width: 250px;
-      flex: 6;
-    }
-
-    .task-bar__icon {
-      opacity: 0.8;
-      width: 1.5rem;
-      margin: auto 20px;
-    }
-
-    .task-bar__icon:hover{
-      cursor: grab;
-    }
-
-    .main-menu {
-      display: flex;
-      flex-grow: 0;
-      padding-top: 20px;
-      padding-left: 10px;
-    }
-
-    .main-menu__item {
-      list-style: none;
-      background-color: #c3c3c3;
-      flex: 2;
-      text-align: center;
-      vertical-align: middle;
-      margin: auto 20px;
-      padding: 10px 0;
-    }
-
-    .main-menu__item--spacer {
-      list-style: none;
-      flex: 3;
-      text-align: center;
-    }
-
-    .main-menu__item:hover {
-      background-color: grey;
-      cursor: grab;
-    }
-
-    .main-menu__item:last-child {
-      padding: 0;
-      display: flex;
-      flex: 2;
-      border: none;
-      background-color: unset;
-    }
-
-    .main-menu__item:last-child:hover {
-      cursor: unset;
-      background-color: unset;
-    }
-
-    .main-menu__add-site {
-      display: inline-block;
-      background-color: var(--violet);
-      color: white;
-      font-weight: 500;
-      font-size: 16px;
-      padding: 10px 15px;
-
-      border-radius: 5px;
-      border: 1px grey solid;
-      min-height: 45px;
-      margin: auto;
-    }
-
-    .main-menu__add-site:hover {
-      background-color: var(--violet);
-      cursor: grab;
-      transform: translateY(-5px);
-    }
-
-    .help-text {
-      border-radius: 4px;
-      box-shadow: var(--secondary-backdrop) 0px 2px 6px 0px;
-      min-width: 70%;
-      max-width: 80%;
-      min-height: 70px;
-      display: flex;
-      margin-left: 15px;
-      margin-top: 40px;
-    }
-
-    .help-text__serial-num {
-      display: inline-flex;
-      background-color: var(--violet);
-      color: var(--light-text);
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .help-text__instructions {
-      display: inline-block;
-      list-style: none;
-      font-size: 19px;
-      font-weight: 500;
-      padding: 10px;
-      margin: auto;
-    }
-
-    .inner-container {
-      display: flex;
-      box-sizing: border-box;
-      max-width: 50%;
-      margin: 50px auto;
-      border-radius: 5px;
-      display: flex;
-    }
-
-    .sitekey-form {
-      display: flex;
-      flex-direction: column;
-      width: 90%;
-      justify-content: center;
-      align-items: center;
-      box-sizing: content-box;
-      background-color: #fff;
-      margin: auto;
-      padding-bottom: 30px;
-    }
-
-    .sitekey-form__title-flex-container {
-      display: flex;
-      width: 100%;
-      border-bottom: 0.1px solid var(--light-grey);
-    }
-
-    .sitekey-form__title {
-      padding-left: 10px;
-      font-size: 1rem;
-      padding: 0.75rem 1.25rem;
-    }
-
-    .sitekey-form__label {
-      display: block;
-      margin: 10px 0;
-      box-sizing: inherit;
-      justify-self: left;
-    }
-
-    .sitekey-form__input {
-      position: relative;
-      margin-top: 5px;
-      box-sizing: border-box;
-      height: 40px;
-      width: 90%;
-    }
-
-    .sitekey-form__input--add-level {
-      position: relative;
-      margin-top: 5px;
-      box-sizing: inherit;
-      flex: 3;
-      height: 40px;
-      margin-right: 20px;
-    }
-
-    .sitekey-form__add-level-flex-container {
-      display: flex;
-      box-sizing: border-box;
-      width: 90%;
-      margin-top: 10px;
-    }
-
-    .sitekey-form__add-level-spacer {
-      flex: 3;
-    }
-
-    .sitekey-form__add-level {
-      background-color: var(--violet);
-      color: white;
-      padding: 5px;
-      font-size: 16px;
-
-      border-radius: 5px;
-      border: 1px var(--light-grey) solid;
-      height: 40px;
-      min-width: 125px;
-      margin: auto;
-    }
-
-    .sitekey-form__submit {
-      margin-top: 50px;
-      display: block;
-      background-color: var(--violet);
-      color: white;
-      padding: 5px;
-      font-size: 20px;
-
-      border-radius: 5px;
-      border: 1px var(--light-grey) solid;
-      min-height: 45px;
-      width: 125px;
-      width: 90%;
-    }
-  </style>
-</html>
diff --git a/frontend/templates/panel/main.scss b/frontend/templates/panel/main.scss
deleted file mode 100644
index 260c57b6..00000000
--- a/frontend/templates/panel/main.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use './vars';
-
-/*
-<style>
-  /* RESET RULES
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-  :root {
-    --page-header-bgColor: #242e42;
-    --page-header-bgColor-hover: #1d2636;
-    --page-header-txtColor: #dde9f8;
-    --page-header-headingColor: #7889a4;
-    --page-header-width: 220px;
-    --page-content-bgColor: #f0f1f6;
-    --page-content-txtColor: #171616;
-    --page-content-blockColor: #fff;
-    --white: #fff;
-    --black: #333;
-    --blue: #00b9eb;
-    --red: #ec1848;
-    --border-radius: 4px;
-    --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
-    --switch-bgLightModeColor: #87cefa;
-    --switch-sunColor: gold;
-    --switch-moonColor: #f4f4f4;
-    --switch-bgDarkModeColor: #1f1f27;
-	
-  }
-
-
-
-  /* HEADER STYLES
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-
-.test-button {
-	background-color: red;
-	z-index: 500;
-}
diff --git a/frontend/templates/panel/nav/collapse-nav/index.html b/frontend/templates/panel/nav/collapse-nav/index.html
deleted file mode 100644
index 7df0e7f8..00000000
--- a/frontend/templates/panel/nav/collapse-nav/index.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<button
-  class="collapse-btn nav__colapse-btn"
-  aria-expanded="true"
-  aria-label="collapse menu"
->
-  <.# Include collapse graphics .>
-  Collapse
-</button>
diff --git a/frontend/templates/panel/nav/index.html b/frontend/templates/panel/nav/index.html
deleted file mode 100644
index 45763541..00000000
--- a/frontend/templates/panel/nav/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<header class="nav-container">
-  <nav class="nav">
-    <a href="#0" aria-label="forecastr logo" class="nav__home-btn">
-      <img class="nav__logo" src="/svg/shield.svg" alt="logo" />
-    </a>
-    <button
-      class="nav__show-menu"
-      aria-expanded="false"
-      aria-label="open menu"
-    >
-      <.# TODO change show-menu icon .>
-      <svg
-        width="20"
-        height="20"
-        class="nav__show-menu-icon"
-        aria-hidden="true"
-      >
-        <use xlink:href="#down"></use>
-      </svg>
-    </button>
-    <. include!("menu/index.html"); .> <. include!("theme-toggle/index.html");
-    .> <. include!("collapse-nav/index.html"); .>
-  </nav>
-</header>
diff --git a/frontend/templates/panel/nav/main.scss b/frontend/templates/panel/nav/main.scss
deleted file mode 100644
index 5be9e822..00000000
--- a/frontend/templates/panel/nav/main.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-@import '../vars';
-
-$nav-width: 220px;
-$nav-txt-color: #dde9f8;
-$nav-bg-color: #242e42;
-
-
-.nav-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
-  padding-top: 20px;
-  width: $nav-width;
-  color: $nav-txt-color;
-  background: $nav-bg-color;
-}
-
-.nav {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-}
-
-.nav__home-btn {
-  display: block;
-  margin: 0 15px;
-}
-
-.nav__logo {
-  max-width: 120px;
-  fill: $white;
-  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
-    brightness(104%) contrast(101%);
-}
-
-.nav__show-menu {
-  display: none;
-  margin-left: 5px;
-  padding: 4px;
-  background: $page-content-blockColor;
-  border-radius: $border-radius;
-}
-
-.nav__show-menu-icon {
-  fill: $black;
-  transition: transform 0.2s;
-}
-
-.nav-menu {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  margin-top: 35px;
-}
-
-.page-header .admin-menu li:nth-last-child(2) {
-  margin-bottom: 35px;
-}
-
-.page-header .admin-menu li:last-child {
-  margin-top: auto;
-  margin-bottom: 20px;
-}
-
-.page-header .admin-menu li > * {
-  width: 100%;
-  padding: 12px 15px;
-}
-
-.page-header .admin-menu .switcher {
-  display: inline-block;
-  width: auto;
-}
-
-.page-header .admin-menu .menu-heading h3 {
-  text-transform: uppercase;
-  letter-spacing: 0.15em;
-  font-size: 12px;
-  margin-top: 12px;
-  color: var(--page-header-headingColor);
-}
-
-.page-header .admin-menu svg {
-  width: 20px;
-  height: 20px;
-  fill: var(--page-header-txtColor);
-  margin-right: 10px;
-}
-
-.page-header .admin-menu a,
-.page-header .admin-menu button {
-  display: flex;
-  align-items: center;
-  font-size: 0.9rem;
-}
-
-.page-header .admin-menu a:hover,
-.page-header .admin-menu a:focus,
-.page-header .admin-menu button:hover,
-.page-header .admin-menu button:focus {
-  background: var(--page-header-bgColor-hover);
-  color: var(--blue);
-  outline: none;
-}
-
-.page-header .admin-menu a:hover svg,
-.page-header .admin-menu a:focus svg,
-.page-header .admin-menu button:hover svg,
-.page-header .admin-menu button:focus svg {
-  fill: var(--blue);
-}
diff --git a/frontend/templates/panel/nav/menu/index.html b/frontend/templates/panel/nav/menu/index.html
deleted file mode 100644
index 82fe721b..00000000
--- a/frontend/templates/panel/nav/menu/index.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<ul class="menu">
-  <!-- Sections -->
-  <. let section = &ADMIN_SECTION; .> <. include!("section/index.html"); .> <.
-  let section = &SETTINGS_SECTION; .> <. include!("section/index.html"); .>
-</ul>
diff --git a/frontend/templates/panel/nav/menu/section/heading.html b/frontend/templates/panel/nav/menu/section/heading.html
deleted file mode 100644
index ae0e6f42..00000000
--- a/frontend/templates/panel/nav/menu/section/heading.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<li class="menu-heading nav-menu__heading nav-section__heading">
-  <h3><.= section.name .></h3>
-</li>
diff --git a/frontend/templates/panel/nav/menu/section/index.html b/frontend/templates/panel/nav/menu/section/index.html
deleted file mode 100644
index 62564624..00000000
--- a/frontend/templates/panel/nav/menu/section/index.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<. include!("heading.html"); .>
-<. for heading in &section.elements {  .>
-   <. include!("item.html"); .>
-<.}; .>
diff --git a/frontend/templates/panel/nav/menu/section/item.html b/frontend/templates/panel/nav/menu/section/item.html
deleted file mode 100644
index 625eda38..00000000
--- a/frontend/templates/panel/nav/menu/section/item.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<li
-  class='<.= if active.name == heading.name {"nav-section__item--active"} else { "nav-section__item"} .>'
->
-  <a href="#0" class="nav-menu__item__link nav-section__item__link">
-    <img
-      class="icon nav-menu__item__icon nav-section__item__icon"
-      src="/svg/<.= heading.icon.>.svg"
-      alt=""
-    />
-    <.= heading.name .>
-  </a>
-</li>
-
-<!--
-<style>
-  .nav-section__item__link {
-    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
-      brightness(104%) contrast(101%);
-  }
-
-  .nav-section__item:hover {
-    background: var(--page-header-bgColor-hover);
-    color: var(--blue);
-    outline: none;
-  }
-</style>
--->
diff --git a/frontend/templates/panel/nav/theme-toggle/index.html b/frontend/templates/panel/nav/theme-toggle/index.html
deleted file mode 100644
index b46b4e12..00000000
--- a/frontend/templates/panel/nav/theme-toggle/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="theme-switch">
-  <input type="checkbox" id="theme-switch_checkbox" class="theme-switch__checkbox" checked />
-  <label for="theme-switch__checkbox">
-    <span></span>
-    <span class="theme-switch__dark>Dark</span>
-    <span class="theme-switch__light>Dark</span>
-  </label>
-<style>
-.theme-switch__light {
-  display: none;
-}
-</style>
-</div>
diff --git a/frontend/templates/panel/style.html b/frontend/templates/panel/style.html
deleted file mode 100644
index 8c277f21..00000000
--- a/frontend/templates/panel/style.html
+++ /dev/null
@@ -1,559 +0,0 @@
-<style>
-  /* RESET RULES
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-  @import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
-
-  :root {
-    --page-header-bgColor: #242e42;
-    --page-header-bgColor-hover: #1d2636;
-    --page-header-txtColor: #dde9f8;
-    --page-header-headingColor: #7889a4;
-    --page-header-width: 220px;
-    --page-content-bgColor: #f0f1f6;
-    --page-content-txtColor: #171616;
-    --page-content-blockColor: #fff;
-    --white: #fff;
-    --black: #333;
-    --blue: #00b9eb;
-    --red: #ec1848;
-    --border-radius: 4px;
-    --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
-    --switch-bgLightModeColor: #87cefa;
-    --switch-sunColor: gold;
-    --switch-moonColor: #f4f4f4;
-    --switch-bgDarkModeColor: #1f1f27;
-  }
-
-  * {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-  }
-
-  ul {
-    list-style: none;
-  }
-
-  a,
-  button {
-    color: inherit;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  button {
-    background: none;
-    cursor: pointer;
-  }
-
-  input {
-    -webkit-appearance: none;
-  }
-
-  [type='checkbox'] {
-    position: absolute;
-    left: -9999px;
-  }
-
-  label {
-    cursor: pointer;
-  }
-
-  button,
-  input {
-    border: none;
-  }
-
-  svg {
-    display: block;
-  }
-
-  body {
-    font: 16px/1.5 'Lato', sans-serif;
-  }
-
-  /* HEADER STYLES
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-  .page-header,
-  .nav-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
-    padding-top: 20px;
-    width: var(--page-header-width);
-    color: var(--page-header-txtColor);
-    background: var(--page-header-bgColor);
-  }
-
-  /*In case you prefer an absolutely positioned header that covers the full page height, add these styles*/
-  /*body {
-  position: relative;
-}
-
-.page-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-}*/
-
-  .nav {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
-
-  .nav__home-btn {
-    display: block;
-    margin: 0 15px;
-  }
-
-  .nav__logo {
-    max-width: 120px;
-    fill: var(--white);
-    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
-      brightness(104%) contrast(101%);
-  }
-
-  .page-header .toggle-mob-menu,
-  nav__show-menu {
-    display: none;
-    margin-left: 5px;
-    padding: 4px;
-    background: var(--page-content-blockColor);
-    border-radius: var(--border-radius);
-  }
-
-  .page-header .toggle-mob-menu svg,
-  nav__show-menu-icon {
-    fill: var(--black);
-    transition: transform 0.2s;
-  }
-
-  .page-header .admin-menu {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    margin-top: 35px;
-  }
-
-  .page-header .admin-menu li:nth-last-child(2) {
-    margin-bottom: 35px;
-  }
-
-  .page-header .admin-menu li:last-child {
-    margin-top: auto;
-    margin-bottom: 20px;
-  }
-
-  .page-header .admin-menu li > * {
-    width: 100%;
-    padding: 12px 15px;
-  }
-
-  .page-header .admin-menu .switcher {
-    display: inline-block;
-    width: auto;
-  }
-
-  .page-header .admin-menu .menu-heading h3 {
-    text-transform: uppercase;
-    letter-spacing: 0.15em;
-    font-size: 12px;
-    margin-top: 12px;
-    color: var(--page-header-headingColor);
-  }
-
-  .page-header .admin-menu svg {
-    width: 20px;
-    height: 20px;
-    fill: var(--page-header-txtColor);
-    margin-right: 10px;
-  }
-
-  .page-header .admin-menu a,
-  .page-header .admin-menu button {
-    display: flex;
-    align-items: center;
-    font-size: 0.9rem;
-  }
-
-  .page-header .admin-menu a:hover,
-  .page-header .admin-menu a:focus,
-  .page-header .admin-menu button:hover,
-  .page-header .admin-menu button:focus {
-    background: var(--page-header-bgColor-hover);
-    color: var(--blue);
-    outline: none;
-  }
-
-  .page-header .admin-menu a:hover svg,
-  .page-header .admin-menu a:focus svg,
-  .page-header .admin-menu button:hover svg,
-  .page-header .admin-menu button:focus svg {
-    fill: var(--blue);
-  }
-
-  /* PAGE CONTENT STYLES
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-  .page-content {
-    position: relative;
-    left: var(--page-header-width);
-    width: calc(100% - var(--page-header-width));
-    min-height: 100vh;
-    padding: 30px;
-    color: var(--page-content-txtColor);
-    background: var(--page-content-bgColor);
-  }
-
-  .search-and-user {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-column-gap: 50px;
-    align-items: center;
-    background: var(--page-content-bgColor);
-    margin-bottom: 30px;
-  }
-
-  .search-and-user form {
-    position: relative;
-  }
-
-  .search-and-user [type='search'] {
-    width: 100%;
-    height: 50px;
-    font-size: 1.5rem;
-    padding-left: 15px;
-    background: var(--page-content-blockColor);
-    color: var(--white);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
-  }
-
-  .search-and-user ::placeholder {
-    color: var(--page-content-txtColor);
-  }
-
-  .search-and-user form svg {
-    width: 26px;
-    height: 26px;
-    fill: var(--page-content-txtColor);
-  }
-
-  .search-and-user form button {
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    transform: translateY(-50%);
-  }
-
-  .search-and-user .admin-profile {
-    display: flex;
-    align-items: center;
-  }
-
-  .search-and-user .admin-profile .greeting {
-    margin: 0 10px 0 20px;
-  }
-
-  .search-and-user .admin-profile svg {
-    width: 30px;
-    height: 30px;
-  }
-
-  .search-and-user .admin-profile .notifications {
-    position: relative;
-  }
-
-  .search-and-user .admin-profile .badge {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: -10px;
-    right: -3px;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    font-size: 10px;
-    color: var(--white);
-    background: var(--red);
-  }
-
-  .page-content .grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 30px;
-  }
-
-  .page-content .grid > article {
-    display: flex;
-    height: 300px;
-    background: var(--page-content-blockColor);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
-  }
-
-  .page-content .grid > article:first-child,
-  .page-content .grid > article:last-child {
-    grid-column: 1 / -1;
-  }
-
-  /* MQ RULES
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-  @media screen and (max-width: 767px) {
-    .page-header,
-    .page-content {
-      position: static;
-      width: 100%;
-    }
-
-    .page-header {
-      padding: 10px;
-    }
-
-    .page-header nav {
-      flex-direction: row;
-    }
-
-    .page-header .logo {
-      margin: 0;
-    }
-
-    .page-header .logo svg {
-      width: 83px;
-      height: 35px;
-    }
-
-    .page-header .toggle-mob-menu {
-      display: block;
-    }
-
-    .page-header .admin-menu {
-      position: absolute;
-      left: 98px;
-      top: 57px;
-      margin-top: 0;
-      z-index: 2;
-      border-radius: var(--border-radius);
-      background: var(--page-header-bgColor);
-      visibility: hidden;
-      opacity: 0;
-      transform: scale(0.95);
-      transition: all 0.2s;
-    }
-
-    .page-header .admin-menu li:nth-last-child(2) {
-      margin-bottom: 12px;
-    }
-
-    .page-header .admin-menu li:last-child button,
-    .search-and-user .admin-profile .greeting {
-      display: none;
-    }
-
-    .page-content {
-      min-height: 0;
-      padding: 10px;
-    }
-
-    .page-content .grid {
-      grid-gap: 10px;
-    }
-
-    .search-and-user {
-      position: absolute;
-      left: 131px;
-      top: 10px;
-      padding: 0;
-      grid-column-gap: 5px;
-      width: calc(100% - 141px);
-      border-radius: var(--border-radius);
-      background: transparent;
-    }
-
-    .search-and-user [type='search'] {
-      font-size: 1rem;
-      height: 35px;
-    }
-
-    .search-and-user form svg {
-      width: 18px;
-      height: 18px;
-    }
-
-    .search-and-user .admin-profile svg {
-      fill: var(--white);
-    }
-  }
-
-  @media screen and (max-width: 400px) {
-    .page-content .grid > article {
-      grid-column: 1 / -1;
-    }
-  }
-
-  /* BODY CLASSES
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-  .mob-menu-opened .toggle-mob-menu svg {
-    transform: rotate(180deg);
-  }
-
-  .mob-menu-opened .page-header .admin-menu {
-    transform: scale(1);
-    visibility: visible;
-    opacity: 1;
-  }
-
-  @media screen and (min-width: 768px) {
-    .collapsed .page-header {
-      width: 40px;
-    }
-
-    .collapsed .page-header .admin-menu li > * {
-      padding: 10px;
-    }
-
-    .collapsed .page-header .logo,
-    .collapsed .page-header .admin-menu span,
-    .collapsed .page-header .admin-menu .menu-heading {
-      display: none;
-    }
-
-    .collapsed .page-header .admin-menu svg {
-      margin-right: 0;
-    }
-
-    .collapsed .page-header .collapse-btn svg {
-      transform: rotate(180deg);
-    }
-
-    .collapsed .page-content {
-      left: 40px;
-      width: calc(100% - 40px);
-    }
-  }
-
-  /* SWITCH STYLES
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-  .switch label {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-column-gap: 10px;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  .switch span:first-child {
-    position: relative;
-    width: 50px;
-    height: 26px;
-    border-radius: 15px;
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
-    background: var(--switch-bgLightModeColor);
-    transition: all 0.3s;
-  }
-
-  .switch span:first-child::before,
-  .switch span:first-child::after {
-    content: '';
-    position: absolute;
-    border-radius: 50%;
-  }
-
-  .switch span:first-child::before {
-    top: 1px;
-    left: 1px;
-    width: 24px;
-    height: 24px;
-    background: var(--white);
-    z-index: 1;
-    transition: transform 0.3s;
-  }
-
-  .switch span:first-child::after {
-    top: 50%;
-    right: 8px;
-    width: 10px;
-    height: 10px;
-    transform: translateY(-50%);
-    background: var(--switch-sunColor);
-    box-shadow: 0 0 4px 2px #ffdb1a;
-  }
-
-  .switch [type='checkbox']:checked + label span:first-child {
-    background: var(--switch-bgDarkModeColor);
-  }
-
-  .switch [type='checkbox']:focus + label span:first-child {
-    box-shadow: 0 3px 5px rgba(255, 255, 255, 0.25);
-  }
-
-  .switch [type='checkbox']:checked + label span:first-child::before {
-    transform: translateX(24px);
-  }
-
-  .switch [type='checkbox']:checked + label span:first-child::after {
-    left: 12px;
-    width: 15px;
-    height: 15px;
-    background: transparent;
-    box-shadow: -2px -5px 0 var(--switch-moonColor);
-    transform: translateY(-50%) rotate(-72deg);
-  }
-
-  /* LIGHT MODE STYLES
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-  .light-mode {
-    --page-header-bgColor: #f1efec;
-    --page-header-bgColor-hover: #b9e4e0;
-    --page-header-txtColor: #2c303a;
-    --page-header-headingColor: #979595;
-    --page-content-bgColor: #fff;
-    --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.25);
-  }
-
-  .light-mode .page-header .admin-menu a:hover,
-  .light-mode .page-header .admin-menu a:focus,
-  .light-mode .page-header .admin-menu button:hover,
-  .light-mode .page-header .admin-menu button:focus {
-    color: var(--black);
-  }
-
-  .light-mode .page-header .logo svg,
-  .light-mode .page-header .admin-menu a:hover svg,
-  .light-mode .page-header .admin-menu a:focus svg,
-  .light-mode .page-header .admin-menu button:hover svg,
-  .light-mode .page-header .admin-menu button:focus svg {
-    fill: var(--black);
-  }
-
-  .light-mode .switch [type='checkbox']:focus + label span:first-child {
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
-  }
-
-  @media screen and (max-width: 767px) {
-    .light-mode .search-and-user .admin-profile svg {
-      fill: var(--black);
-    }
-  }
-
-  /* FOOTER
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-  .page-footer {
-    font-size: 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: 10px;
-  }
-
-  .page-footer a {
-    margin-left: 4px;
-  }
-</style>
diff --git a/frontend/templates/panel/taskbar/index.html b/frontend/templates/panel/taskbar/index.html
new file mode 100644
index 00000000..30492b69
--- /dev/null
+++ b/frontend/templates/panel/taskbar/index.html
@@ -0,0 +1,20 @@
+<ul class="task-bar">
+  <!--
+        <li class="task-bar__action">Brand Name</li>
+        -->
+  <li class="task-bar__spacer"></li>
+  <li class="task-bar__action">
+    <button class="main-menu__add-site">+ New Site</button>
+  </li>
+  <li class="task-bar__action">
+    <img class="task-bar__icon" src="./svg/moon.svg" alt="Profile" />
+  </li>
+
+  <li class="task-bar__action">
+    <img class="task-bar__icon" src="./svg/bell.svg" alt="Notifications" />
+  </li>
+
+  <li class="task-bar__action">
+    <img class="task-bar__icon" src="../svg/log-out.svg" alt="Profile" />
+  </li>
+</ul>
diff --git a/frontend/templates/panel/vars.scss b/frontend/templates/panel/vars.scss
deleted file mode 100644
index e9617734..00000000
--- a/frontend/templates/panel/vars.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$page-content-blockColor: #fff;
-$border-radius: 4px;
-$black: #333;
-$white: #fff;
diff --git a/src/tests-migrate.rs b/src/tests-migrate.rs
index 43e93282..377c6157 100644
--- a/src/tests-migrate.rs
+++ b/src/tests-migrate.rs
@@ -32,8 +32,8 @@ lazy_static! {
 #[cfg(not(tarpaulin_include))]
 #[actix_rt::main]
 async fn main() {
-    let data = Data::new().await;
     pretty_env_logger::init();
+    let data = Data::new().await;
 
     sqlx::migrate!("./migrations/").run(&data.db).await.unwrap();
 }