diff --git a/frontend/templates/panel/icon-trans.png b/frontend/templates/panel/icon-trans.png
new file mode 100644
index 00000000..db8da876
Binary files /dev/null and b/frontend/templates/panel/icon-trans.png differ
diff --git a/frontend/templates/panel/layout.html b/frontend/templates/panel/layout.html
index 7d4d0a03..cfec7e46 100644
--- a/frontend/templates/panel/layout.html
+++ b/frontend/templates/panel/layout.html
@@ -9,25 +9,109 @@
     <header>
       <nav class="secondary-menu">
         <ul>
-          <li class="secondary-menu__item">mCaptcha</li>
+          <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>
-          <button class="main-menu__add-site">+ New Site</button>
-        <li class="secondary-menu__item">Overview</li>
-        <li class="secondary-menu__item">Site Keys</li>
-        <li class="main-menu__item--spacer"></li>
- 
-          <li class="secondary-menu__section-partition"></li>
-          <li class="secondary-menu__item">API Docs</li>
-          <li class="secondary-menu__section-partition"></li>
-          <li class="secondary-menu__item">Settings</li>
-          <li class="secondary-menu__item">Billing</li>
-          <li class="secondary-menu__section-partition"></li>
-          <li class="secondary-menu__item">FAQ</li>
-          <li class="secondary-menu__item">Help</li>
-          <li class="secondary-menu__item">Support</li>
-          <li class="secondary-menu__section-partition"></li>
-          <li class="secondary-menu__item">Source Code</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 -->
@@ -49,31 +133,43 @@
         <!--
         <li class="task-bar__action">Brand Name</li>
         -->
+        <li class="task-bar__spacer"></li>
         <li class="task-bar__action">
-		</li>
+          <button class="main-menu__add-site">+ New Site</button>
+        </li>
         <li class="task-bar__action">
-          <img src="../../static/img/svg/bell.svg" alt="Notifications" />
+          <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 src="../../static/img/svg/user.svg" alt="Profile" />
+          <img class="task-bar__icon" src="./svg/user.svg" alt="Profile" />
         </li>
       </ul>
 
-
+      <!--
       <ul class="main-menu">
-        <!-- important actions -->
-		<!--
+        <!-- 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--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">
@@ -154,15 +250,23 @@
       padding: 0;
     }
 
-	:root {
-      --green: #5cad66;
-	}
-
-    .home-button {
-      width: 250px;
-      margin: auto;
-      flex: 5;
+    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%;
@@ -173,26 +277,75 @@
       height: 100%;
       overflow: auto;
 
-      background-color: #2b2c30;
-      color: white;
-      color: rgba(255, 255, 255, 0.87);
+      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;
-      list-style: none;
+      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 #c3c3c3;
+      border-bottom: 1px solid var(--light-text);
+      margin: auto;
+      max-width: 70%;
       list-style: none;
-      margin: 20px 0;
+      margin: 20px;
     }
+    */
 
-    .secondary-menu__item:hover {
+    .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 {
@@ -201,7 +354,7 @@
       right: 0;
       left: 14%;
       bottom: 0;
-      background-color: #f0f0f0;
+      background-color: var(--backdrop);
     }
 
     .task-bar {
@@ -211,19 +364,28 @@
       background-color: #fff;
     }
 
-    .task-bar__action {
+
+    .task-bar__action{
       display: inline-block;
-      list-style: none;
-      flex: 1;
-      padding: 15px 0px;
+      padding: 10px 0px;
       margin: auto;
     }
 
-    .task-bar__action:first-child {
+    .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;
@@ -267,37 +429,39 @@
 
     .main-menu__add-site {
       display: inline-block;
-      background-color: purple;
+      background-color: var(--violet);
       color: white;
-      padding: 10px;
+      font-weight: 500;
+      font-size: 16px;
+      padding: 10px 15px;
 
       border-radius: 5px;
       border: 1px grey solid;
       min-height: 45px;
-      min-width: 125px;
       margin: auto;
     }
 
     .main-menu__add-site:hover {
-      background-color: violet;
+      background-color: var(--violet);
       cursor: grab;
       transform: translateY(-5px);
     }
 
     .help-text {
       border-radius: 4px;
-      box-shadow: rgba(0, 0, 0.5) 0px 2px 6px 0px;
-      max-width: 70%;
-      height: 70px;
+      box-shadow: var(--secondary-backdrop) 0px 2px 6px 0px;
+      min-width: 70%;
+      max-width: 80%;
+      min-height: 70px;
       display: flex;
-      margin-top: 50px;
-      margin-left: 25px;
+      margin-left: 15px;
+      margin-top: 40px;
     }
 
     .help-text__serial-num {
       display: inline-flex;
-      background-color: purple;
-      color: #fff;
+      background-color: var(--violet);
+      color: var(--light-text);
       width: 30px;
       height: 30px;
       border-radius: 50%;
@@ -308,7 +472,8 @@
     .help-text__instructions {
       display: inline-block;
       list-style: none;
-      font-size: 16px;
+      font-size: 19px;
+      font-weight: 500;
       padding: 10px;
       margin: auto;
     }
@@ -331,23 +496,21 @@
       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 rgba(0,0,0,.125);
+      border-bottom: 0.1px solid var(--light-grey);
     }
 
-    .sitekey-form__title{
+    .sitekey-form__title {
       padding-left: 10px;
       font-size: 1rem;
-      padding: .75rem 1.25rem;
+      padding: 0.75rem 1.25rem;
     }
 
-
-
     .sitekey-form__label {
       display: block;
       margin: 10px 0;
@@ -384,12 +547,13 @@
     }
 
     .sitekey-form__add-level {
-      background-color: purple;
+      background-color: var(--violet);
       color: white;
-      padding: 10px;
+      padding: 5px;
+      font-size: 16px;
 
       border-radius: 5px;
-      border: 1px grey solid;
+      border: 1px var(--light-grey) solid;
       height: 40px;
       min-width: 125px;
       margin: auto;
@@ -398,14 +562,16 @@
     .sitekey-form__submit {
       margin-top: 50px;
       display: block;
-      background-color: purple;
+      background-color: var(--violet);
       color: white;
-      padding: 10px;
+      padding: 5px;
+      font-size: 20px;
 
       border-radius: 5px;
-      border: 1px grey solid;
+      border: 1px var(--light-grey) solid;
       min-height: 45px;
       width: 125px;
+      width: 90%;
     }
   </style>
 </html>
diff --git a/frontend/templates/panel/svg/bell.svg b/frontend/templates/panel/svg/bell.svg
new file mode 100644
index 00000000..c0ed0e1e
--- /dev/null
+++ b/frontend/templates/panel/svg/bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/credit-card.svg b/frontend/templates/panel/svg/credit-card.svg
new file mode 100644
index 00000000..9429a635
--- /dev/null
+++ b/frontend/templates/panel/svg/credit-card.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/eye-off.svg b/frontend/templates/panel/svg/eye-off.svg
new file mode 100644
index 00000000..9d28c182
--- /dev/null
+++ b/frontend/templates/panel/svg/eye-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/eye.svg b/frontend/templates/panel/svg/eye.svg
new file mode 100644
index 00000000..44f107af
--- /dev/null
+++ b/frontend/templates/panel/svg/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/file-text.svg b/frontend/templates/panel/svg/file-text.svg
new file mode 100644
index 00000000..85186e3b
--- /dev/null
+++ b/frontend/templates/panel/svg/file-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/file.svg b/frontend/templates/panel/svg/file.svg
new file mode 100644
index 00000000..fa1ecc84
--- /dev/null
+++ b/frontend/templates/panel/svg/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/filter.svg b/frontend/templates/panel/svg/filter.svg
new file mode 100644
index 00000000..3ae2cfc7
--- /dev/null
+++ b/frontend/templates/panel/svg/filter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/github.svg b/frontend/templates/panel/svg/github.svg
new file mode 100644
index 00000000..8a1c9c0a
--- /dev/null
+++ b/frontend/templates/panel/svg/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
diff --git a/frontend/templates/panel/svg/globe.svg b/frontend/templates/panel/svg/globe.svg
new file mode 100644
index 00000000..4306cdcb
--- /dev/null
+++ b/frontend/templates/panel/svg/globe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/help-circle.svg b/frontend/templates/panel/svg/help-circle.svg
new file mode 100644
index 00000000..1bbf3978
--- /dev/null
+++ b/frontend/templates/panel/svg/help-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/home.svg b/frontend/templates/panel/svg/home.svg
new file mode 100644
index 00000000..867f0799
--- /dev/null
+++ b/frontend/templates/panel/svg/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/key.svg b/frontend/templates/panel/svg/key.svg
new file mode 100644
index 00000000..e778e74e
--- /dev/null
+++ b/frontend/templates/panel/svg/key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/log-out.svg b/frontend/templates/panel/svg/log-out.svg
new file mode 100644
index 00000000..625d2724
--- /dev/null
+++ b/frontend/templates/panel/svg/log-out.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/menu.svg b/frontend/templates/panel/svg/menu.svg
new file mode 100644
index 00000000..0ea1741e
--- /dev/null
+++ b/frontend/templates/panel/svg/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/message-square.svg b/frontend/templates/panel/svg/message-square.svg
new file mode 100644
index 00000000..6a2e4e59
--- /dev/null
+++ b/frontend/templates/panel/svg/message-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/moon.svg b/frontend/templates/panel/svg/moon.svg
new file mode 100644
index 00000000..3d94f162
--- /dev/null
+++ b/frontend/templates/panel/svg/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/settings.svg b/frontend/templates/panel/svg/settings.svg
new file mode 100644
index 00000000..0318f2ce
--- /dev/null
+++ b/frontend/templates/panel/svg/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/shield-off.svg b/frontend/templates/panel/svg/shield-off.svg
new file mode 100644
index 00000000..47805eed
--- /dev/null
+++ b/frontend/templates/panel/svg/shield-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield-off"><path d="M19.69 14a6.9 6.9 0 0 0 .31-2V5l-8-3-3.16 1.18"></path><path d="M4.73 4.73L4 5v7c0 6 8 10 8 10a20.29 20.29 0 0 0 5.62-4.38"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/shield.svg b/frontend/templates/panel/svg/shield.svg
new file mode 100644
index 00000000..18c6ed24
--- /dev/null
+++ b/frontend/templates/panel/svg/shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/tag.svg b/frontend/templates/panel/svg/tag.svg
new file mode 100644
index 00000000..0c7a7704
--- /dev/null
+++ b/frontend/templates/panel/svg/tag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/toggle-left.svg b/frontend/templates/panel/svg/toggle-left.svg
new file mode 100644
index 00000000..cd4b4e62
--- /dev/null
+++ b/frontend/templates/panel/svg/toggle-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-left"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="8" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/toggle-right.svg b/frontend/templates/panel/svg/toggle-right.svg
new file mode 100644
index 00000000..01392ab6
--- /dev/null
+++ b/frontend/templates/panel/svg/toggle-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-right"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="16" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/frontend/templates/panel/svg/user.svg b/frontend/templates/panel/svg/user.svg
new file mode 100644
index 00000000..7b5bc4a7
--- /dev/null
+++ b/frontend/templates/panel/svg/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
\ No newline at end of file
diff --git a/frontend/templates/router.js b/frontend/templates/router.js
index 3cddd295..389ed543 100644
--- a/frontend/templates/router.js
+++ b/frontend/templates/router.js
@@ -1,3 +1,19 @@
+const normalizeUri = uri => {
+  if (!uri) {
+    throw new Error('uri is empty');
+  }
+
+  if (typeof uri !== 'string') {
+    throw new TypeError('URI must be a string');
+  }
+
+  let uriLength = uri.length;
+  if (uri[uriLength - 1] == '/') {
+    uri = uri.slice(0, uriLength - 1);
+  }
+  return uri;
+};
+
 export class Router {
   constructor() {
     this.routes = [];
@@ -28,11 +44,7 @@ export class Router {
       }
     });
 
-    // normalize URI for trailing slash
-    let uriLength = uri.length;
-    if (uri[uriLength - 1] == '/') {
-      uri = uri.slice(0, uriLength - 1);
-    }
+    uri = normalizeUri(uri);
 
     const route = {
       uri,
@@ -44,8 +56,9 @@ export class Router {
   route() {
     this.routes.forEach(route => {
       // normalize for trailing slash
-      let pattern = new RegExp(`^${route.uri}/$`);
+      let pattern = new RegExp(`^${route.uri}$`);
       let path = window.location.pathname;
+      path = normalizeUri(path);
       if (path.match(pattern)) {
         return route.fn.call();
       }