diff --git a/lib/towerops_web/components/layouts.ex b/lib/towerops_web/components/layouts.ex
index a377730d..346f25d1 100644
--- a/lib/towerops_web/components/layouts.ex
+++ b/lib/towerops_web/components/layouts.ex
@@ -302,4 +302,69 @@ defmodule ToweropsWeb.Layouts do
     </div>
     """
   end
+
+  @doc """
+  Renders the admin layout.
+
+  Use this for admin pages that require superuser access.
+
+  ## Examples
+
+      <Layouts.admin flash={@flash}>
+        <h1>Admin Content</h1>
+      </Layouts.admin>
+
+  """
+  attr :flash, :map, required: true, doc: "the map of flash messages"
+
+  slot :inner_block, required: true
+
+  def admin(assigns) do
+    ~H"""
+    <main class="min-h-screen bg-zinc-50 dark:bg-zinc-950">
+      <nav class="bg-white border-b border-zinc-200 dark:border-zinc-800 dark:bg-zinc-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex justify-between h-16">
+            <div class="flex">
+              <.link
+                navigate={~p"/admin"}
+                class="flex items-center text-xl font-bold text-zinc-900 dark:text-zinc-100"
+              >
+                Towerops Admin
+              </.link>
+              <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+                <.link
+                  navigate={~p"/admin/users"}
+                  class="inline-flex items-center px-1 pt-1 text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+                >
+                  Users
+                </.link>
+                <.link
+                  navigate={~p"/admin/organizations"}
+                  class="inline-flex items-center px-1 pt-1 text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
+                >
+                  Organizations
+                </.link>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <.link
+                navigate={~p"/orgs"}
+                class="text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+              >
+                Back to App
+              </.link>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {render_slot(@inner_block)}
+      </div>
+    </main>
+
+    <.flash_group flash={@flash} />
+    """
+  end
 end
diff --git a/lib/towerops_web/components/layouts/admin.html.heex b/lib/towerops_web/components/layouts/admin.html.heex
deleted file mode 100644
index 21eb3fa7..00000000
--- a/lib/towerops_web/components/layouts/admin.html.heex
+++ /dev/null
@@ -1,37 +0,0 @@
-<main class="min-h-screen bg-zinc-50">
-  <nav class="bg-white border-b border-zinc-200">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex justify-between h-16">
-        <div class="flex">
-          <.link navigate={~p"/admin"} class="flex items-center text-xl font-bold text-zinc-900">
-            Towerops Admin
-          </.link>
-          <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
-            <.link
-              navigate={~p"/admin/users"}
-              class="inline-flex items-center px-1 pt-1 text-sm font-medium text-zinc-700 hover:text-zinc-900"
-            >
-              Users
-            </.link>
-            <.link
-              navigate={~p"/admin/organizations"}
-              class="inline-flex items-center px-1 pt-1 text-sm font-medium text-zinc-700 hover:text-zinc-900"
-            >
-              Organizations
-            </.link>
-          </div>
-        </div>
-        <div class="flex items-center">
-          <.link navigate={~p"/orgs"} class="text-sm text-zinc-600 hover:text-zinc-900">
-            Back to App
-          </.link>
-        </div>
-      </div>
-    </div>
-  </nav>
-
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <.flash_group flash={@flash} />
-    {@inner_content}
-  </div>
-</main>