diff --git a/client/admin/src/app/app.component.css b/client/admin/src/app/app.component.css
index e69de29..8466bff 100644
--- a/client/admin/src/app/app.component.css
+++ b/client/admin/src/app/app.component.css
@@ -0,0 +1,3 @@
+.stillboxLogo {
+  font-family: "Warnes";
+}
diff --git a/client/admin/src/app/app.component.html b/client/admin/src/app/app.component.html
index d2967ad..7e3a0a0 100644
--- a/client/admin/src/app/app.component.html
+++ b/client/admin/src/app/app.component.html
@@ -1,109 +1,292 @@
-<!-- Navbar -->
-<nav class="navbar justify-between bg-base-300">
-  <!-- Logo -->
-  <a class="btn btn-ghost text-lg btn-square">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-      class="size-6"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"
-      />
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"
-      />
-    </svg>
-  </a>
-
-  <!-- Menu for mobile -->
-  <div class="dropdown dropdown-end sm:hidden">
-    <button class="btn btn-ghost">
-      <i class="fa-solid fa-bars text-lg"></i>
-    </button>
-
-    <ul
-      tabindex="0"
-      class="dropdown-content menu z-[1] bg-base-200 p-6 rounded-box shadow w-56 gap-2"
-    >
-      <li><a>Item</a></li>
-      <a class="btn btn-sm btn-primary">Do</a>
-    </ul>
-  </div>
-
-  <!-- Menu for desktop -->
-  <ul class="hidden menu sm:menu-horizontal gap-2">
-    <li><a>Item</a></li>
+<!-- ========== HEADER ========== -->
     @if (auth.loggedIn) {
-      <a (click)="logout()" class="btn btn-sm btn-primary">Logout</a>
+<header
+  class="sticky top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 lg:ps-[260px] dark:bg-neutral-800 dark:border-neutral-700"
+>
+  <nav class="px-4 sm:px-6 flex basis-full items-center w-full mx-auto">
+    <div
+      class="w-full flex items-center justify-end ms-auto md:justify-between gap-x-1 md:gap-x-3"
+    >
+
+      <div class="hidden md:block">
+        <!-- Search Input -->
+        <div class="relative">
+          <div
+            class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-3.5"
+          >
+            <svg
+              class="shrink-0 size-4 text-gray-400 dark:text-white/60"
+              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"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <path d="m21 21-4.3-4.3" />
+            </svg>
+          </div>
+          <input
+            type="text"
+            class="py-2 ps-10 pe-16 block w-full bg-white border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-600"
+            placeholder="Search"
+          />
+          <div
+            class="hidden absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-1"
+          >
+            <button
+              type="button"
+              class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:text-neutral-500 dark:hover:text-blue-500 dark:focus:text-blue-500"
+              aria-label="Close"
+            >
+              <span class="sr-only">Close</span>
+              <svg
+                class="shrink-0 size-4"
+                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"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <path d="m15 9-6 6" />
+                <path d="m9 9 6 6" />
+              </svg>
+            </button>
+          </div>
+          <div
+            class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-3 text-gray-400"
+          >
+
+            <span class="mx-1">
+
+            </span>
+            <span class="text-xs">/</span>
+          </div>
+        </div>
+        <!-- End Search Input -->
+      </div>
+
+      <div class="flex flex-row items-center justify-end gap-1">
+        <button
+          type="button"
+          class="md:hidden size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
+        >
+          <svg
+            class="shrink-0 size-4"
+            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"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3" />
+          </svg>
+          <span class="sr-only">Search</span>
+        </button>
+
+        <button
+          type="button"
+          class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
+        >
+          <svg
+            class="shrink-0 size-4"
+            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"
+          >
+            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+          </svg>
+          <span class="sr-only">Notifications</span>
+        </button>
+
+        <button
+          type="button"
+          class="size-[38px] relative inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
+        >
+          <svg
+            class="shrink-0 size-4"
+            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"
+          >
+            <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+          </svg>
+          <span class="sr-only">Activity</span>
+        </button>
+
+        <!-- Dropdown -->
+        <div
+          class="hs-dropdown [--placement:bottom-right] relative inline-flex"
+        >
+          <button
+            id="hs-dropdown-account"
+            type="button"
+            class="size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-800 focus:outline-none disabled:opacity-50 disabled:pointer-events-none dark:text-white"
+            aria-haspopup="menu"
+            aria-expanded="false"
+            aria-label="Dropdown"
+          >
+            <img
+              class="shrink-0 size-[38px] rounded-full"
+              src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
+              alt="Avatar"
+            />
+          </button>
+
+            <div
+              class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-700 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full"
+              role="menu"
+              aria-orientation="vertical"
+              aria-labelledby="hs-dropdown-account"
+            >
+              <div
+                class="py-3 px-5 bg-gray-100 rounded-t-lg dark:bg-neutral-700"
+              >
+                <p class="text-sm text-gray-500 dark:text-neutral-500">
+                  Signed in as
+                </p>
+                <p
+                  class="text-sm font-medium text-gray-800 dark:text-neutral-200"
+                >
+                  jamessite.com
+                </p>
+              </div>
+              <div class="p-1.5 space-y-0.5">
+                <a
+                  class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300"
+                  (click)="logout()"
+                >
+                  Logout
+                </a>
+              </div>
+            </div>
+        </div>
+        <!-- End Dropdown -->
+      </div>
+    </div>
+  </nav>
+</header>
     }
-  </ul>
-</nav>
-<div class="flex overflow-hidden relative">
-  <!-- Sidebar -->
-  <aside
-    class="h-screen sticky top-0 flex flex-col overflow-y-auto gap-2 py-6 px-2 bg-base-200"
-  >
-    <a
-      class="btn btn-square btn-ghost btn-secondary text-xl"
-      title="Home"
-      routerLink="/home"
-      routerLinkActive="btn-active"
+<!-- ========== END HEADER ========== -->
+
+<!-- Sidebar -->
+    @if (auth.loggedIn) {
+<div
+  id="hs-application-sidebar"
+  class="hs-overlay [--auto-close:lg] hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform w-[260px] h-full hidden fixed inset-y-0 start-0 z-[60] bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700"
+  role="dialog"
+  tabindex="-1"
+  aria-label="Sidebar"
+>
+  <div class="relative flex flex-col h-full max-h-full">
+    <div class="px-6 pt-4">
+      <!-- Logo -->
+      <a
+        class="stillboxLogo flex-none rounded-xl text-xl inline-block font-semibold focus:outline-none focus:opacity-80"
+        href="#"
+        aria-label="Stillbox"
+      >
+        Stillbox
+      </a>
+      <!-- End Logo -->
+    </div>
+
+    <!-- Content -->
+    <div
+      class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500"
     >
-      <ng-icon name="ionHome"></ng-icon>
-    </a>
+      <nav
+        class="hs-accordion-group p-3 w-full flex flex-col flex-wrap"
+        data-hs-accordion-always-open
+      >
+        <ul class="flex flex-col space-y-1">
+          <li>
+            <a
+              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-300"
+              routerLink="/home"
+              routerLinkActive="btn-active"
+            >
+              <ng-icon name="ionHome"></ng-icon>Home
+            </a>
+          </li>
+          <li>
+            <a
+              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-300"
+              routerLink="/talkgroups"
+              routerLinkActive="btn-active"
+              href="#"
+            >
+              <ng-icon name="ionChatbubbles"></ng-icon>Talkgroups
+            </a>
+          </li>
+          <li>
+            <a
+              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-300"
+              routerLink="/calls"
+              routerLinkActive="btn-active"
+              href="#"
+            >
+              <ng-icon name="ionMegaphoneOutline"></ng-icon>Calls
+            </a>
+          </li>
+          <li>
+            <a
+              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-900 dark:text-neutral-200 dark:hover:text-neutral-300"
+              routerLink="/incidents"
+              routerLinkActive="btn-active"
+              href="#"
+            >
+              <ng-icon name="ionNewspaperOutline"></ng-icon>Incidents
+            </a>
+          </li>
+          <li>
+            <a
+              class="w-full flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-900 dark:text-neutral-200 dark:hover:text-neutral-300"
+              routerLink="/alerts"
+              routerLinkActive="btn-active"
+            >
+              <ng-icon name="ionAlertCircleOutline"></ng-icon>Alerts
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <!-- End Content -->
+  </div>
+</div>
+}
+<!-- End Sidebar -->
 
-    <a
-      routerLink="/calls"
-      routerLinkActive="btn-active"
-      class="btn btn-ghost btn-secondary text-xl"
-      title="Calls"
-    >
-      <ng-icon name="ionMegaphoneOutline"></ng-icon>
-    </a>
-
-    <a
-      class="btn btn-square btn-ghost text-xl"
-      title="Talkgroups"
-      routerLink="/talkgroups"
-      routerLinkActive="btn-active"
-    >
-      <ng-icon name="ionChatbubbles"></ng-icon>
-    </a>
-
-    <div class="divider my-0"></div>
-
-    <a
-      class="btn btn-square btn-ghost text-xl"
-      title="Incidents"
-      routerLink="/incidents"
-      routerLinkActive="btn-active"
-    >
-      <ng-icon name="ionNewspaperOutline"></ng-icon>
-    </a>
-
-    <a
-      class="btn btn-square btn-ghost text-xl"
-      title="Alerts"
-      routerLink="/alerts"
-      routerLinkActive="btn-active"
-    >
-      <ng-icon name="ionAlertCircleOutline"></ng-icon>
-    </a>
-    <div class="divider my-0"></div>
-
-    <a class="btn btn-circle btn-ghost text-xl" title="Listen">
-      <ng-icon name="ionRadioOutline"></ng-icon>
-    </a>
-  </aside>
-  <div class="container mx-auto px-4 flex overflow-auto">
+<!-- Content -->
+<div class="w-full lg:ps-64">
+  <div class="p-4 sm:p-6 space-y-4 sm:space-y-6">
     <router-outlet />
   </div>
 </div>
diff --git a/client/admin/src/assets/Warnes.ttf b/client/admin/src/assets/Warnes.ttf
new file mode 100644
index 0000000..71eadc6
Binary files /dev/null and b/client/admin/src/assets/Warnes.ttf differ
diff --git a/client/admin/src/styles.css b/client/admin/src/styles.css
index d3a1a9a..f1e2196 100644
--- a/client/admin/src/styles.css
+++ b/client/admin/src/styles.css
@@ -2,3 +2,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: "Warnes";
+  src: url("./assets/Warnes.ttf");
+}