diff --git a/assets/gitops_logo_transparent.png b/assets/gitops_logo_transparent.png
new file mode 100644
index 0000000..ec33dfc
Binary files /dev/null and b/assets/gitops_logo_transparent.png differ
diff --git a/assets/gitops_logo_white.png b/assets/gitops_logo_white.png
new file mode 100644
index 0000000..03b62bf
Binary files /dev/null and b/assets/gitops_logo_white.png differ
diff --git a/src/app.css b/src/app.css
index 765b5f3..4c9be18 100644
--- a/src/app.css
+++ b/src/app.css
@@ -8,22 +8,22 @@ body {
   color-scheme: light;
 
   /* Colors */
-  --primary: #2457FF;
+  --primary: #2457ff;
   --primary-hover: #1d46cc;
   --primary-active: #1738a3;
   --primary-soft: #dbe6ff;
   --focus-ring: rgba(36, 87, 255, 0.28);
-  --dark: #0F172A;
-  --surface: #F8FAFC;
-  --surface-hover: #F1F5F9;
-  --border: #E2E8F0;
+  --dark: #0f172a;
+  --surface: #f8fafc;
+  --surface-hover: #f1f5f9;
+  --border: #e2e8f0;
   --text-main: #111827;
-  --text-muted: #64748B;
+  --text-muted: #64748b;
 
   /* Semantic */
-  --success: #22C55E;
-  --warning: #F59E0B;
-  --danger: #EF4444;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --danger: #ef4444;
   /* Geometry */
   --radius-sm: 8px;
   --radius-md: 12px;
@@ -33,6 +33,319 @@ body {
   --font-mono: 'JetBrains Mono', monospace;
 }
 
+html.dark {
+  color-scheme: dark;
+
+  --primary: #2457ff;
+  --primary-hover: #1d46cc;
+  --primary-active: #1738a3;
+  --primary-soft: #dbe6ff;
+  --focus-ring: rgba(36, 87, 255, 0.28);
+  --dark: #f5f6fa;
+  --background: #0e0f14;
+  --background-secondary: #111217;
+  --surface: #1e2022;
+  --surface-elevated: #282b2f;
+  --surface-hover: #282b2f;
+  --border: #34373d;
+  --text-main: #f3f4f6;
+  --text-secondary: #c3c8d2;
+  --text-muted: #9aa1ae;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+  --severity-critical: #ef4444;
+  --severity-high: #f97316;
+  --severity-medium: #f59e0b;
+  --severity-low: #eab308;
+  --severity-info: #06b6d4;
+  --severity-safe: #22c55e;
+}
+
+html.dark body {
+  @apply bg-[#0E0F14] text-slate-100;
+}
+
+html.dark .bg-slate-50,
+html.dark .bg-gray-50 {
+  background-color: #0e0f14 !important;
+}
+
+html.dark .bg-white,
+html.dark .bg-slate-100,
+html.dark .bg-gray-100 {
+  background-color: #1e2022 !important;
+}
+
+html.dark .bg-slate-200 {
+  background-color: #34373d !important;
+}
+
+html.dark .lg\:bg-slate-50,
+html.dark .lg\:bg-white {
+  background-color: #0e0f14 !important;
+}
+
+html.dark .bg-white\/80 {
+  background-color: rgb(30 32 34 / 0.82) !important;
+}
+
+html.dark .bg-white\/90 {
+  background-color: rgb(30 32 34 / 0.9) !important;
+}
+
+html.dark .bg-slate-50\/80,
+html.dark .bg-slate-100\/80 {
+  background-color: rgb(30 32 34 / 0.8) !important;
+}
+
+html.dark .bg-slate-900,
+html.dark .bg-slate-950 {
+  background-color: #111217 !important;
+}
+
+html.dark .bg-linear-to-br,
+html.dark .bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, #0e0f14, #17191f, #22252b) !important;
+}
+
+html.dark .border-slate-100,
+html.dark .border-slate-200,
+html.dark .border-slate-200\/80,
+html.dark .border-slate-300,
+html.dark .border-gray-200,
+html.dark .lg\:border-slate-200,
+html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
+html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
+  border-color: #34373d !important;
+}
+
+html.dark .text-slate-950,
+html.dark .text-slate-900,
+html.dark .text-slate-800,
+html.dark .text-gray-900 {
+  color: #f3f4f6 !important;
+}
+
+html.dark .text-slate-700,
+html.dark .text-slate-600,
+html.dark .text-gray-700,
+html.dark .text-gray-600 {
+  color: #c3c8d2 !important;
+}
+
+html.dark .text-slate-500,
+html.dark .text-slate-400,
+html.dark .text-gray-500,
+html.dark .text-gray-400 {
+  color: #9aa1ae !important;
+}
+
+html.dark .text-slate-300,
+html.dark .text-slate-200,
+html.dark .text-white {
+  color: #f8fafc !important;
+}
+
+html.dark .shadow-sm,
+html.dark .shadow-md,
+html.dark .shadow-xl {
+  box-shadow: 0 16px 50px rgb(0 0 0 / 0.24) !important;
+}
+
+html.dark input,
+html.dark select,
+html.dark textarea {
+  background-color: #16181d !important;
+  color: #f3f4f6 !important;
+  border-color: #34373d !important;
+}
+
+html.dark input::placeholder,
+html.dark textarea::placeholder {
+  color: #757c89 !important;
+}
+
+html.dark .hover\:bg-slate-50:hover,
+html.dark .hover\:bg-slate-100:hover,
+html.dark .hover\:bg-gray-50:hover,
+html.dark .hover\:bg-gray-100:hover {
+  background-color: #282b2f !important;
+}
+
+html.dark .hover\:text-slate-900:hover,
+html.dark .hover\:text-slate-950:hover {
+  color: #ffffff !important;
+}
+
+html.dark .hover\:border-slate-300:hover {
+  border-color: #4a4f59 !important;
+}
+
+html.dark .bg-emerald-50 {
+  background-color: rgb(34 197 94 / 0.12) !important;
+}
+
+html.dark .border-emerald-200 {
+  border-color: rgb(34 197 94 / 0.42) !important;
+}
+
+html.dark .text-emerald-700,
+html.dark .text-emerald-800,
+html.dark .text-emerald-900 {
+  color: #22c55e !important;
+}
+
+html.dark .bg-red-50,
+html.dark .bg-rose-50 {
+  background-color: rgb(239 68 68 / 0.14) !important;
+}
+
+html.dark .border-red-200,
+html.dark .border-rose-200 {
+  border-color: rgb(239 68 68 / 0.58) !important;
+}
+
+html.dark .text-red-600,
+html.dark .text-red-700,
+html.dark .text-red-800,
+html.dark .text-red-900,
+html.dark .text-rose-700 {
+  color: #ef4444 !important;
+}
+
+html.dark .hover\:bg-red-50:hover,
+html.dark .hover\:bg-rose-50:hover {
+  background-color: rgb(239 68 68 / 0.2) !important;
+}
+
+html.dark .bg-amber-50,
+html.dark .bg-amber-100,
+html.dark .bg-amber-200 {
+  background-color: rgb(245 158 11 / 0.12) !important;
+}
+
+html.dark .border-amber-200,
+html.dark .border-amber-300 {
+  border-color: rgb(245 158 11 / 0.42) !important;
+}
+
+html.dark .text-amber-800,
+html.dark .text-amber-900,
+html.dark .text-amber-950 {
+  color: #f59e0b !important;
+}
+
+html.dark .bg-orange-50 {
+  background-color: rgb(249 115 22 / 0.13) !important;
+}
+
+html.dark .border-orange-200,
+html.dark .border-orange-300 {
+  border-color: rgb(249 115 22 / 0.45) !important;
+}
+
+html.dark .text-orange-600,
+html.dark .text-orange-700,
+html.dark .text-orange-800,
+html.dark .text-orange-900 {
+  color: #f97316 !important;
+}
+
+html.dark .bg-yellow-50,
+html.dark .bg-yellow-100 {
+  background-color: rgb(234 179 8 / 0.12) !important;
+}
+
+html.dark .border-yellow-200,
+html.dark .border-yellow-300 {
+  border-color: rgb(234 179 8 / 0.42) !important;
+}
+
+html.dark .text-yellow-600,
+html.dark .text-yellow-700,
+html.dark .text-yellow-800,
+html.dark .text-yellow-900 {
+  color: #eab308 !important;
+}
+
+html.dark .bg-cyan-50,
+html.dark .bg-cyan-100 {
+  background-color: rgb(6 182 212 / 0.12) !important;
+}
+
+html.dark .border-cyan-200,
+html.dark .border-cyan-300 {
+  border-color: rgb(6 182 212 / 0.42) !important;
+}
+
+html.dark .text-cyan-600,
+html.dark .text-cyan-700,
+html.dark .text-cyan-800,
+html.dark .text-cyan-900 {
+  color: #06b6d4 !important;
+}
+
+html.dark .bg-green-50,
+html.dark .bg-green-100 {
+  background-color: rgb(34 197 94 / 0.12) !important;
+}
+
+html.dark .border-green-200,
+html.dark .border-green-300 {
+  border-color: rgb(34 197 94 / 0.42) !important;
+}
+
+html.dark .text-green-600,
+html.dark .text-green-700,
+html.dark .text-green-800,
+html.dark .text-green-900 {
+  color: #22c55e !important;
+}
+
+html.dark :is(.severity-critical, [data-severity='critical']) {
+  --severity-color: var(--severity-critical);
+  color: var(--severity-critical) !important;
+  border-color: rgb(239 68 68 / 0.58) !important;
+  background-color: rgb(239 68 68 / 0.14) !important;
+}
+
+html.dark :is(.severity-high, [data-severity='high']) {
+  --severity-color: var(--severity-high);
+  color: var(--severity-high) !important;
+  border-color: rgb(249 115 22 / 0.45) !important;
+  background-color: rgb(249 115 22 / 0.13) !important;
+}
+
+html.dark :is(.severity-medium, [data-severity='medium']) {
+  --severity-color: var(--severity-medium);
+  color: var(--severity-medium) !important;
+  border-color: rgb(245 158 11 / 0.42) !important;
+  background-color: rgb(245 158 11 / 0.12) !important;
+}
+
+html.dark :is(.severity-low, [data-severity='low']) {
+  --severity-color: var(--severity-low);
+  color: var(--severity-low) !important;
+  border-color: rgb(234 179 8 / 0.42) !important;
+  background-color: rgb(234 179 8 / 0.12) !important;
+}
+
+html.dark :is(.severity-info, [data-severity='info']) {
+  --severity-color: var(--severity-info);
+  color: var(--severity-info) !important;
+  border-color: rgb(6 182 212 / 0.42) !important;
+  background-color: rgb(6 182 212 / 0.12) !important;
+}
+
+html.dark
+  :is(.severity-resolved, .severity-safe, [data-severity='resolved'], [data-severity='safe']) {
+  --severity-color: var(--severity-safe);
+  color: var(--severity-safe) !important;
+  border-color: rgb(34 197 94 / 0.42) !important;
+  background-color: rgb(34 197 94 / 0.12) !important;
+}
+
 /*
   Compact button system (loop-like pattern using CSS variables):
   shared state rules + per-variant token values.
@@ -52,7 +365,11 @@ body {
   background: var(--btn-bg);
   color: var(--btn-color);
   border: 1px solid var(--btn-border);
-  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 :is(.btn-primary, .btn-secondary, .btn-danger, .btn-ghost):hover:not(:disabled) {
@@ -106,6 +423,25 @@ body {
   --btn-color: var(--text-main);
 }
 
+html.dark .btn-secondary {
+  --btn-bg: var(--surface);
+  --btn-bg-hover: var(--surface-hover);
+  --btn-border: var(--border);
+  --btn-border-hover: #4a4f59;
+}
+
+html.dark .btn-primary {
+  --btn-color: #fff;
+}
+
+html.dark .btn-danger {
+  --btn-bg: #ef4444;
+  --btn-bg-hover: #f97316;
+  --btn-bg-active: #dc2626;
+  --btn-border: #ef4444;
+  --btn-ring: rgba(248, 113, 113, 0.34);
+}
+
 .field-input {
   border-color: var(--border);
 }
@@ -123,6 +459,11 @@ body {
   width: 100%;
 }
 
+html.dark .app-shell-sidebar {
+  background-color: #0e0f14 !important;
+  border-color: #34373d !important;
+}
+
 .app-shell-main {
   padding-left: 0;
 }
diff --git a/src/app.html b/src/app.html
index adf8bd8..3b6b046 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,15 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script>
+      try {
+        if (localStorage.getItem('gitvault-theme') === 'dark') {
+          document.documentElement.classList.add('dark');
+        }
+      } catch (_) {
+        // Ignore storage access failures and keep the default theme.
+      }
+    </script>
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
diff --git a/src/lib/components/AppNavbar.svelte b/src/lib/components/AppNavbar.svelte
index 0b08a16..ba31a4b 100644
--- a/src/lib/components/AppNavbar.svelte
+++ b/src/lib/components/AppNavbar.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { ChevronDown, FolderKanban, LogOut, UserRound } from 'lucide-svelte';
 
-  export let user: { username: string; role: string } | null = null;
+  type NavbarUser = { username: string; role: { name: string } | string | null };
+
+  export let user: NavbarUser | null = null;
   export let projects: { id: string; name: string; slug: string }[] = [];
   export let organizationSlug = 'gitops';
   export let projectSlug = '';
@@ -11,6 +14,20 @@
 
   let userMenuRef: HTMLDivElement | undefined;
   let projectMenuRef: HTMLDivElement | undefined;
+  let isDarkMode = false;
+
+  onMount(() => {
+    const updateLogoTheme = () => {
+      isDarkMode = document.documentElement.classList.contains('dark');
+    };
+
+    updateLogoTheme();
+
+    const observer = new MutationObserver(updateLogoTheme);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+
+    return () => observer.disconnect();
+  });
 
   function toggleUserDropdown() {
     showUserDropdown = !showUserDropdown;
@@ -43,6 +60,9 @@
   }
 
   $: currentProject = projects.find((project) => project.slug === projectSlug) ?? null;
+  $: logoSrc = isDarkMode ? '/gitops_logo_white.png' : '/gitops_logo.png';
+  $: logoClass = isDarkMode ? 'h-8 w-auto' : 'h-14 w-auto sm:h-16';
+  $: roleName = typeof user?.role === 'string' ? user.role : user?.role?.name;
 </script>
 
 <svelte:window on:click={handleWindowClick} />
@@ -50,7 +70,7 @@
 <header class="sticky top-0 z-30 border-b border-slate-200/80 bg-white/90 backdrop-blur-xl">
   <div class="mx-auto flex h-16 w-full items-center gap-4 px-4 sm:px-6">
     <a href="/" class="flex items-center">
-      <img src="/gitops_logo.png" alt="GitOps" class="h-14 w-auto sm:h-16" />
+      <img src={logoSrc} alt="GitOps" class={logoClass} />
     </a>
 
     {#if user}
@@ -129,7 +149,7 @@
             >
               <div class="border-b border-slate-100 bg-slate-50 px-4 py-3">
                 <p class="truncate text-sm font-semibold text-slate-900">{user.username}</p>
-                <p class="truncate text-xs text-slate-500 capitalize">{user.role.name} Account</p>
+                <p class="truncate text-xs text-slate-500 capitalize">{roleName} Account</p>
               </div>
               <a
                 href="/profile"
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 80ebec3..336301c 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import {
     Cloud,
     KeyRound,
@@ -13,6 +14,8 @@
     RotateCcw,
     Copy,
     Check,
+    Moon,
+    Sun,
   } from 'lucide-svelte';
 
   export let data: any;
@@ -23,6 +26,13 @@
   let apiKeyName = '';
   let apiKeyExpiresInDays = '';
   let copiedCreatedKey = false;
+  let darkMode = false;
+  let themeReady = false;
+
+  onMount(() => {
+    darkMode = document.documentElement.classList.contains('dark');
+    themeReady = true;
+  });
 
   $: if (data.user.email !== email && form?.section !== 'profile') {
     email = data.user.email || '';
@@ -68,6 +78,12 @@
     copiedCreatedKey = true;
     setTimeout(() => (copiedCreatedKey = false), 2000);
   }
+
+  function toggleDarkMode() {
+    darkMode = !darkMode;
+    document.documentElement.classList.toggle('dark', darkMode);
+    localStorage.setItem('gitvault-theme', darkMode ? 'dark' : 'light');
+  }
 </script>
 
 <svelte:head>
@@ -76,12 +92,37 @@
 
 <div class="mx-auto max-w-6xl space-y-6">
   <section class="overflow-hidden border border-slate-200 bg-white shadow-sm sm:rounded-2xl">
-    <div class="bg-linear-to-br from-slate-950 via-slate-900 to-slate-800 px-6 py-8 text-white sm:px-8">
-      <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-slate-300">Account</p>
-      <h1 class="mt-2 text-3xl font-bold tracking-tight">Profile</h1>
-      <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-300">
-        Manage your identity, password and API access from one place.
-      </p>
+    <div
+      class="bg-linear-to-br from-slate-950 via-slate-900 to-slate-800 px-6 py-8 text-white sm:px-8"
+    >
+      <div class="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-slate-300">
+            Account
+          </p>
+          <h1 class="mt-2 text-3xl font-bold tracking-tight">Profile</h1>
+          <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-300">
+            Manage your identity, password and API access from one place.
+          </p>
+        </div>
+
+        <button
+          type="button"
+          on:click={toggleDarkMode}
+          class="inline-flex shrink-0 items-center gap-2 rounded-md border border-white/15 bg-white/10 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-white/15"
+          aria-pressed={themeReady ? darkMode : undefined}
+          aria-label={darkMode ? 'Disable dark mode' : 'Enable dark mode'}
+          title={darkMode ? 'Disable dark mode' : 'Enable dark mode'}
+        >
+          {#if darkMode}
+            <Sun class="h-4 w-4" />
+            Light mode
+          {:else}
+            <Moon class="h-4 w-4" />
+            Dark mode
+          {/if}
+        </button>
+      </div>
     </div>
 
     <div class="grid gap-4 px-6 py-6 sm:grid-cols-2 lg:grid-cols-4 sm:px-8">
@@ -118,7 +159,9 @@
   </section>
 
   {#if form?.message}
-    <div class="border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 sm:rounded-xl">
+    <div
+      class="border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 sm:rounded-xl"
+    >
       {form.message}
     </div>
   {/if}
@@ -143,12 +186,16 @@
           />
         </div>
 
-        <div class="flex items-center justify-between gap-3 rounded-md border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+        <div
+          class="flex items-center justify-between gap-3 rounded-md border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600"
+        >
           <span>Username</span>
           <span class="font-medium text-slate-900">{data.user.username}</span>
         </div>
 
-        <div class="flex items-center justify-between gap-3 rounded-md border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
+        <div
+          class="flex items-center justify-between gap-3 rounded-md border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600"
+        >
           <span>Role</span>
           <span class="font-medium text-slate-900 capitalize">{data.user.role.name}</span>
         </div>
@@ -171,7 +218,9 @@
 
       <form method="POST" action="?/updatePassword" class="mt-6 space-y-4">
         <div>
-          <label for="currentPassword" class="block text-sm font-medium text-slate-700">Current password</label>
+          <label for="currentPassword" class="block text-sm font-medium text-slate-700"
+            >Current password</label
+          >
           <input
             id="currentPassword"
             name="currentPassword"
@@ -181,7 +230,9 @@
         </div>
 
         <div>
-          <label for="newPassword" class="block text-sm font-medium text-slate-700">New password</label>
+          <label for="newPassword" class="block text-sm font-medium text-slate-700"
+            >New password</label
+          >
           <input
             id="newPassword"
             name="newPassword"
@@ -191,7 +242,9 @@
         </div>
 
         <div>
-          <label for="confirmPassword" class="block text-sm font-medium text-slate-700">Confirm password</label>
+          <label for="confirmPassword" class="block text-sm font-medium text-slate-700"
+            >Confirm password</label
+          >
           <input
             id="confirmPassword"
             name="confirmPassword"
@@ -231,11 +284,15 @@
     </div>
 
     {#if form?.createdKey}
-      <div class="mt-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
+      <div
+        class="mt-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900"
+      >
         <div class="flex items-start justify-between gap-3">
           <div>
             <p class="font-medium">Copy this token now. It will not be shown again.</p>
-            <code class="mt-2 block break-all rounded bg-white px-3 py-2 text-xs text-slate-900">{form.createdKey}</code>
+            <code class="mt-2 block break-all rounded bg-white px-3 py-2 text-xs text-slate-900"
+              >{form.createdKey}</code
+            >
           </div>
 
           <button
@@ -259,18 +316,28 @@
 
     <div class="mt-6 space-y-3">
       {#if data.apiKeys.length === 0}
-        <div class="rounded-md border border-dashed border-slate-200 bg-slate-50 px-4 py-6 text-sm text-slate-500">
+        <div
+          class="rounded-md border border-dashed border-slate-200 bg-slate-50 px-4 py-6 text-sm text-slate-500"
+        >
           No API keys created yet.
         </div>
       {:else}
         {#each data.apiKeys as key}
-          <div class="flex flex-col gap-4 rounded-md border border-slate-200 bg-slate-50 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
+          <div
+            class="flex flex-col gap-4 rounded-md border border-slate-200 bg-slate-50 px-4 py-4 sm:flex-row sm:items-center sm:justify-between"
+          >
             <div>
               <p class="text-sm font-medium text-slate-900">{key.name}</p>
               <p class="mt-1 text-xs text-slate-500">
-                Prefix: {key.keyPrefix} · Created {key.createdAt} · Expires {formatDateTime(key.expiresAt)}
+                Prefix: {key.keyPrefix} · Created {key.createdAt} · Expires {formatDateTime(
+                  key.expiresAt,
+                )}
               </p>
-              <p class="mt-1 text-xs font-medium {key.revokedAt ? 'text-rose-700' : 'text-emerald-700'}">
+              <p
+                class="mt-1 text-xs font-medium {key.revokedAt
+                  ? 'text-rose-700'
+                  : 'text-emerald-700'}"
+              >
                 Status: {getKeyState(key)}
                 {#if key.revokedAt}
                   · Revoked {formatDateTime(key.revokedAt)}
@@ -302,7 +369,9 @@
                   </button>
                 </form>
               {:else}
-                <div class="rounded-md border border-slate-200 bg-white px-3 py-2 text-xs text-slate-500">
+                <div
+                  class="rounded-md border border-slate-200 bg-white px-3 py-2 text-xs text-slate-500"
+                >
                   Actions unavailable for revoked keys.
                 </div>
               {/if}
@@ -322,11 +391,18 @@
     aria-label="Close create api key modal"
   ></button>
   <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-    <div class="w-full max-w-md rounded-md border border-slate-200 bg-white shadow-xl" role="dialog" aria-modal="true" aria-label="Create API key modal">
+    <div
+      class="w-full max-w-md rounded-md border border-slate-200 bg-white shadow-xl"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Create API key modal"
+    >
       <div class="border-b border-slate-200 px-4 py-3 flex items-center justify-between">
         <div>
           <h5 class="text-sm font-semibold text-slate-900">Create API key</h5>
-          <p class="mt-1 text-xs text-slate-500">Set a name and an expiration before creating it.</p>
+          <p class="mt-1 text-xs text-slate-500">
+            Set a name and an expiration before creating it.
+          </p>
         </div>
         <button
           type="button"
@@ -353,7 +429,9 @@
         </div>
 
         <div>
-          <label for="api-key-expiration" class="block text-sm font-medium text-slate-700">Expiration</label>
+          <label for="api-key-expiration" class="block text-sm font-medium text-slate-700"
+            >Expiration</label
+          >
           <select
             id="api-key-expiration"
             name="expiresInDays"
@@ -387,4 +465,4 @@
       </form>
     </div>
   </div>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/static/gitops_logo_transparent.png b/static/gitops_logo_transparent.png
new file mode 100644
index 0000000..ec33dfc
Binary files /dev/null and b/static/gitops_logo_transparent.png differ
diff --git a/static/gitops_logo_white.png b/static/gitops_logo_white.png
new file mode 100644
index 0000000..03b62bf
Binary files /dev/null and b/static/gitops_logo_white.png differ