diff --git a/app/Data/SecurityData.php b/app/Data/SecurityData.php
new file mode 100644
index 0000000..6954dcc
--- /dev/null
+++ b/app/Data/SecurityData.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Data;
+
+use Spatie\LaravelData\Data;
+use App\Data\UserData;
+
+class SecurityData extends Data
+{
+    public function __construct(
+        public readonly ?UserData $user,
+    ) {
+    }
+}
diff --git a/app/Data/SharedData.php b/app/Data/SharedData.php
index 5b78850..3eb4a76 100644
--- a/app/Data/SharedData.php
+++ b/app/Data/SharedData.php
@@ -5,10 +5,12 @@
 namespace App\Data;
 
 use Spatie\LaravelData\Data;
+use App\Data\SecurityData;
 
 class SharedData extends Data
 {
-    public function __construct()
-    {
+    public function __construct(
+        public readonly SecurityData $security,
+    ) {
     }
 }
diff --git a/app/Http/Middleware/HandleHybridRequests.php b/app/Http/Middleware/HandleHybridRequests.php
index b3a4c96..8ee4910 100644
--- a/app/Http/Middleware/HandleHybridRequests.php
+++ b/app/Http/Middleware/HandleHybridRequests.php
@@ -4,7 +4,9 @@
 
 namespace App\Http\Middleware;
 
+use App\Data\SecurityData;
 use App\Data\SharedData;
+use App\Data\UserData;
 use Hybridly\Http\Middleware;
 
 class HandleHybridRequests extends Middleware
@@ -12,6 +14,9 @@ class HandleHybridRequests extends Middleware
     public function share(): SharedData
     {
         return SharedData::from([
+            'security' => [
+                'user' => UserData::optional(auth()->user())
+            ]
         ]);
     }
 }
diff --git a/app/Models/Action.php b/app/Models/Action.php
index c8d9931..c36a2e6 100644
--- a/app/Models/Action.php
+++ b/app/Models/Action.php
@@ -11,6 +11,7 @@
 /**
  * @property Server $server
  * @property Action\Status $status
+ * @mixin IdeHelperAction
  */
 class Action extends Model
 {
diff --git a/app/Models/Server.php b/app/Models/Server.php
index 557e493..9e34e4e 100644
--- a/app/Models/Server.php
+++ b/app/Models/Server.php
@@ -11,6 +11,7 @@
 
 /**
  * @property array<string, mixed> $meta
+ * @mixin IdeHelperServer
  */
 class Server extends Model
 {
diff --git a/app/Models/Site.php b/app/Models/Site.php
index eeaa82d..02172b8 100644
--- a/app/Models/Site.php
+++ b/app/Models/Site.php
@@ -10,6 +10,7 @@
 
 /**
  * @property Site\Type $type
+ * @mixin IdeHelperSite
  */
 class Site extends Model
 {
diff --git a/app/Models/User.php b/app/Models/User.php
index aa9cde3..ce4cd6f 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -10,6 +10,9 @@
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 
+/**
+ * @mixin IdeHelperUser
+ */
 class User extends Authenticatable
 {
     use HasFactory, Notifiable, Unguarded;
diff --git a/lang/en/app.php b/lang/en/app.php
index f4f903b..76871ca 100644
--- a/lang/en/app.php
+++ b/lang/en/app.php
@@ -4,6 +4,12 @@
 
 return [
     'home' => [
-        'title' => 'Home',
+        'title' => 'Dashboard',
+    ],
+    'servers' => [
+        'title' => 'Servers',
+    ],
+    'sites' => [
+        'title' => 'Sites',
     ],
 ];
diff --git a/lang/en/nouns.php b/lang/en/nouns.php
index 7930689..cb88778 100644
--- a/lang/en/nouns.php
+++ b/lang/en/nouns.php
@@ -6,4 +6,6 @@
     'home' => 'Home',
     'servers' => 'Servers',
     'sites' => 'Sites',
+    'profile' => 'Profile',
+    'sign-out' => 'Sign out',
 ];
diff --git a/package-lock.json b/package-lock.json
index bf4aed5..ddf5862 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@heroicons/vue": "^2.1.3",
                 "@unhead/vue": "^1.9.2",
                 "@vueuse/core": "^10.9.0",
                 "axios": "^1.6.8",
@@ -15,6 +16,7 @@
                 "vue": "^3.4.21"
             },
             "devDependencies": {
+                "@iconify-json/mdi": "^1.1.65",
                 "@intlify/unplugin-vue-i18n": "^4.0.0",
                 "@tailwindcss/postcss": "^4.0.0-alpha.10",
                 "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -769,6 +771,14 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
+        "node_modules/@heroicons/vue": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.3.tgz",
+            "integrity": "sha512-CP4ipIwFbV4NEn8ULUCN110wkV0wZq6dsViDL3HwgIh+jn5yQGlRm6QaRN+Mv+o+UsUBbRDei3Je/q0NZHf5Gg==",
+            "peerDependencies": {
+                "vue": ">= 3"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -900,6 +910,15 @@
                 "vue": "^3.2.45"
             }
         },
+        "node_modules/@iconify-json/mdi": {
+            "version": "1.1.65",
+            "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.1.65.tgz",
+            "integrity": "sha512-P9ovos4pKjqwbcUaF5axnHKc1J4djfwLQ6vheJSzbTuZ7gLyonAI/mDDc+ekC4HFCnrYWPjdpkKT+mIujuqOaA==",
+            "dev": true,
+            "dependencies": {
+                "@iconify/types": "*"
+            }
+        },
         "node_modules/@iconify/types": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
diff --git a/package.json b/package.json
index f9b1289..9086250 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,10 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@iconify-json/mdi": "^1.1.65",
+        "@intlify/unplugin-vue-i18n": "^4.0.0",
         "@tailwindcss/postcss": "^4.0.0-alpha.10",
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-        "@intlify/unplugin-vue-i18n": "^4.0.0",
         "@types/node": "^20.11.30",
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/runtime-core": "^3.4.21",
@@ -24,16 +25,17 @@
         "tailwindcss": "^4.0.0-alpha.10",
         "typescript": "^5.4.3",
         "vite": "^5.0",
-        "vue-i18n": "^9.10.2",
-        "vue-eslint-parser": "^9.4.2"
+        "vue-eslint-parser": "^9.4.2",
+        "vue-i18n": "^9.10.2"
     },
     "dependencies": {
+        "@heroicons/vue": "^2.1.3",
         "@unhead/vue": "^1.9.2",
         "@vueuse/core": "^10.9.0",
         "axios": "^1.6.8",
-        "hybridly": "^0.7.3",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "hybridly": "^0.7.3",
         "tailwind-merge": "^2.2.2",
         "vue": "^3.4.21"
     }
diff --git a/resources/components/main-header.vue b/resources/components/main-header.vue
new file mode 100644
index 0000000..dfa3616
--- /dev/null
+++ b/resources/components/main-header.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ChevronDownIcon, BellIcon, MagnifyingGlassIcon } from "@heroicons/vue/24/outline"
+import { ref } from "vue"
+
+const i18n = useI18n()
+const user = useProperty("security.user")
+
+const UserRoutes = [
+    { text: i18n.t("nouns.profile"), url: "#" },
+    { text: i18n.t("nouns.sign-out"), url: "#" },
+]
+
+const open = ref(false)
+</script>
+
+<template>
+    <div class="[ flex flex-1 gap-x-4 self-stretch lg:gap-x-6 ]">
+        <form class="[ relative flex flex-1 ]" action="#" method="GET">
+            <label for="search-field" class="[ sr-only ]">Search</label>
+            <MagnifyingGlassIcon class="[ pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400 ]" aria-hidden="true" />
+            <input
+                id="search-field"
+                class="[ block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm ]"
+                placeholder="Search..."
+                type="search"
+                name="search"
+            />
+        </form>
+        <div class="[ flex items-center gap-x-4 lg:gap-x-6 ]">
+            <button type="button" class="[ -m-2.5 p-2.5 text-gray-400 hover:text-gray-500 ]">
+                <span class="[ sr-only ]">View notifications</span>
+                <BellIcon class="[ h-6 w-6 ]" aria-hidden="true" />
+            </button>
+
+            <!-- Separator -->
+            <div class="[ hidden lg:block lg:h-6 lg:w-px lg:bg-gray-200 ]" aria-hidden="true" />
+
+            <!-- Profile dropdown -->
+            <div class="[ relative ]">
+                <div class="[ -m-1.5 flex items-center p-1.5 ]" @click="open = !open">
+                    <span class="[ sr-only ]">Open user menu</span>
+                    <span class="[ h-8 w-8 rounded-full bg-gray-200 ]"></span>
+                    <span class="[ hidden lg:flex lg:items-center ]">
+                        <span class="[ ml-4 text-sm font-semibold leading-6 text-gray-900 ]" aria-hidden="true">{{ user.name }}</span>
+                        <ChevronDownIcon class="[ ml-2 h-5 w-5 text-gray-400 ]" aria-hidden="true" />
+                    </span>
+                </div>
+                <transition
+                    v-show="open"
+                    enter-active-class="[ transition ease-out duration-100 ]"
+                    enter-from-class="[ transform opacity-0 scale-95 ]"
+                    enter-to-class="[ transform opacity-100 scale-100 ]"
+                    leave-active-class="[ transition ease-in duration-75 ]"
+                    leave-from-class="[ transform opacity-100 scale-100 ]"
+                    leave-to-class="[ transform opacity-0 scale-95 ]"
+                >
+                    <div class="[ absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none ]">
+                        <div v-for="route in UserRoutes" :key="route.url">
+                            <RouterLink :href="route.url" :class="['block px-3 py-1 text-sm leading-6 text-gray-900']">{{ route.text }}</RouterLink>
+                        </div>
+                    </div>
+                </transition>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/components/sidebar.vue b/resources/components/sidebar.vue
new file mode 100644
index 0000000..9b74d37
--- /dev/null
+++ b/resources/components/sidebar.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { XMarkIcon, HomeIcon, ServerIcon, GlobeAltIcon } from "@heroicons/vue/24/outline"
+
+const i18n = useI18n()
+const { matches } = useRoute()
+
+const SidebarRoutes = [
+    { text: i18n.t("nouns.home"), url: route("home.index"), name: "home", icon: HomeIcon },
+    { text: i18n.t("nouns.servers"), url: route("servers.index"), name: "servers", icon: ServerIcon },
+    { text: i18n.t("nouns.sites"), url: route("sites.index"), name: "sites", icon: GlobeAltIcon },
+]
+
+type Props = {
+    sidebarOpen: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+    <div v-show="sidebarOpen">
+        <div class="[ relative z-50 lg:hidden ]" @click="sidebarOpen = false">
+            <transition
+                v-show="sidebarOpen"
+                enter="[ transition-opacity ease-linear duration-300 ]"
+                enter-from="[ opacity-0 ]"
+                enter-to="[ opacity-100 ]"
+                leave="[ transition-opacity ease-linear duration-300 ]"
+                leave-from="[ opacity-100 ]"
+                leave-to="[ opacity-0 ]"
+            >
+                <div class="[ fixed inset-0 bg-gray-900/80 ]" />
+            </transition>
+
+            <div class="[ fixed inset-0 flex ]">
+                <transition
+                    v-show="sidebarOpen"
+                    enter="[ transition ease-in-out duration-300 transform ]"
+                    enter-from="[ -translate-x-full ]"
+                    enter-to="[ translate-x-0 ]"
+                    leave="[ transition ease-in-out duration-300 transform ]"
+                    leave-from="[ translate-x-0 ]"
+                    leave-to="[ -translate-x-full ]"
+                >
+                    <div class="[ relative mr-16 flex w-full max-w-xs flex-1 ]">
+                        <transition
+                            v-show="sidebarOpen"
+                            enter="[ ease-in-out duration-300 ]"
+                            enter-from="[ opacity-0 ]"
+                            enter-to="[ opacity-100 ]"
+                            leave="[ ease-in-out duration-300 ]"
+                            leave-from="[ opacity-100 ]"
+                            leave-to="[ opacity-0 ]"
+                        >
+                            <div class="[ absolute left-full top-0 flex w-16 justify-center pt-5 ]">
+                                <button type="button" class="[ -m-2.5 p-2.5 ]" @click="sidebarOpen = false">
+                                    <span class="[ sr-only ]">Close sidebar</span>
+                                    <XMarkIcon class="[ h-6 w-6 text-white ]" aria-hidden="true" />
+                                </button>
+                            </div>
+                        </transition>
+
+                        <div class="[ flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-4 ]">
+                            <div class="[ flex h-16 shrink-0 items-center ]">
+                                <RouterLink :href="route('home.index')" class="[ text-lg font-extrabold tracking-tight ]"> roost </RouterLink>
+                            </div>
+                            <nav class="[ flex flex-1 flex-col ]">
+                                <ul role="list" class="[ flex flex-1 flex-col gap-y-7 ]">
+                                    <li>
+                                        <ul role="list" class="[ -mx-2 space-y-1 ]">
+                                            <li v-for="route in SidebarRoutes" :key="route.url">
+                                                <RouterLink
+                                                    :href="route.url"
+                                                    :class="[
+                                                        matches(`${route.name}.*`) ? 'bg-gray-50 text-indigo-600' : 'text-gray-700 hover:text-indigo-600 hover:bg-gray-50',
+                                                        'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
+                                                    ]"
+                                                    @click="sidebarOpen = false"
+                                                >
+                                                    <component :is="route.icon" class="[ h-6 w-6 ]" />
+                                                    {{ route.text }}
+                                                </RouterLink>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+                </transition>
+            </div>
+        </div>
+    </div>
+
+    <div class="[ hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col ]">
+        <div class="[ flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4 ]">
+            <div class="[ flex h-16 shrink-0 items-center ]">
+                <RouterLink :href="route('home.index')" class="[ text-lg font-extrabold tracking-tight ]"> roost </RouterLink>
+            </div>
+            <nav class="[ flex flex-1 flex-col ]">
+                <ul role="list" class="[ flex flex-1 flex-col gap-y-7 ]">
+                    <li>
+                        <ul role="list" class="[ -mx-2 space-y-1 ]">
+                            <li v-for="route in SidebarRoutes" :key="route.url">
+                                <RouterLink
+                                    :href="route.url"
+                                    class="[ items-center gap-2 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold hover:bg-gray-50 hover:text-indigo-600 ]"
+                                    :class="[matches(`${route.name}.*`) ? 'bg-gray-50 text-indigo-600' : 'text-gray-700']"
+                                >
+                                    <component :is="route.icon" class="[ h-6 w-6 ]" />
+                                    <span>{{ route.text }}</span>
+                                </RouterLink>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</template>
diff --git a/resources/layouts/auth.vue b/resources/layouts/auth.vue
index c63b6d3..fa56519 100644
--- a/resources/layouts/auth.vue
+++ b/resources/layouts/auth.vue
@@ -3,7 +3,7 @@ import { ContentContainer } from "@/primitives/content-container"
 </script>
 
 <template>
-    <main class="[ h-screen w-screen flex justify-center ]">
+    <main class="[ flex min-h-full flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8 ]">
         <ContentContainer class="[ max-w-lg ]">
             <div class="[ mt-12 ]">
                 <slot />
diff --git a/resources/layouts/default.vue b/resources/layouts/default.vue
index 848f6d8..fb7618d 100644
--- a/resources/layouts/default.vue
+++ b/resources/layouts/default.vue
@@ -1,34 +1,33 @@
 <script setup lang="ts">
-const i18n = useI18n()
+import { Bars3Icon } from "@heroicons/vue/24/outline"
+import { ref } from "vue"
 
-const SidebarRoutes = [
-    { text: i18n.t("nouns.home"), url: route("home.index") },
-    { text: i18n.t("nouns.servers"), url: route("servers.index") },
-    { text: i18n.t("nouns.sites"), url: route("sites.index") },
-]
+const sidebarOpen = ref(false)
 </script>
 
 <template>
-    <div class="[ flex min-h-screen ]">
-        <aside class="[ w-[275px] hidden md:block h-screen p-4 text-sm border-r ]">
-            <div>
-                <div>
-                    <RouterLink :href="route('home.index')" class="[ text-lg font-extrabold tracking-tight ]"> roost </RouterLink>
-                </div>
+    <div class="[ bg-gray-100 h-screen ]">
+        <Sidebar :sidebar-open="sidebarOpen" />
+        <div class="lg:pl-72">
+            <div class="[ bg-white sticky top-0 z-40 lg:mx-auto lg:max-w-7xl lg:px-8 ]">
+                <div class="flex h-16 items-center gap-x-4 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-0 lg:shadow-none">
+                    <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" @click="sidebarOpen = !sidebarOpen">
+                        <span class="sr-only">Open sidebar</span>
+                        <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+                    </button>
+
+                    <!-- Separator -->
+                    <div class="[ h-6 w-px bg-gray-200 lg:hidden ]" aria-hidden="true" />
 
-                <div class="[ mt-5 grid gap-2 ]">
-                    <div v-for="route in SidebarRoutes" :key="route.url">
-                        <RouterLink :href="route.url" class="[ inline-flex items-center gap-2 ]">
-                            <span class="[ h-6 w-6 rounded border ]"></span>
-                            <span>{{ route.text }}</span>
-                        </RouterLink>
-                    </div>
+                    <MainHeader />
                 </div>
             </div>
-        </aside>
 
-        <main class="[ w-full min-h-screen p-4 ]">
-            <slot />
-        </main>
+            <main class="[ py-10 ]">
+                <div class="[ mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 ]">
+                    <slot />
+                </div>
+            </main>
+        </div>
     </div>
 </template>
diff --git a/resources/primitives/button/Button.vue b/resources/primitives/button/Button.vue
new file mode 100644
index 0000000..fa61833
--- /dev/null
+++ b/resources/primitives/button/Button.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { buttonLooks } from "."
+
+type Props = {
+    look?: NonNullable<Parameters<typeof buttonLooks>>
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+    <button type="submit" :class="className(buttonLooks({ look }))">
+        <slot />
+    </button>
+</template>
+
+<style scoped></style>
diff --git a/resources/primitives/button/index.ts b/resources/primitives/button/index.ts
new file mode 100644
index 0000000..61b2d6f
--- /dev/null
+++ b/resources/primitives/button/index.ts
@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+const lookOptions = {
+    default: "bg-indigo-600 hover:bg-indigo-500 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
+    outline: "bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50",
+    soft: "bg-indigo-50 text-indigo-600 hover:bg-indigo-100",
+    danger: "bg-red-600 hover:bg-red-500 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600",
+}
+
+export const buttonLooks = cva("rounded-md px-3 py-1.5 text-sm flex justify-center font-semibold leading-6 shadow-sm ", {
+    variants: {
+        look: lookOptions,
+    },
+    defaultVariants: {
+        look: "default",
+    },
+})
diff --git a/resources/primitives/card-heading/CardHeading.vue b/resources/primitives/card-heading/CardHeading.vue
new file mode 100644
index 0000000..2ea6c65
--- /dev/null
+++ b/resources/primitives/card-heading/CardHeading.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+type Props = {
+    title: string
+    button?: {
+        title: string
+        route: string
+    }
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+    <div class="[ border-b border-gray-200 bg-white px-4 py-5 sm:px-6 ]">
+        <div class="[ -ml-4 -mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap ]">
+            <div class="[ ml-4 mt-2 ]">
+                <h3 class="[ text-base font-semibold leading-6 text-gray-900 ]">{{ title }}</h3>
+            </div>
+            <div v-if="button" class="[ ml-4 mt-2 flex-shrink-0 ]">
+                <RouterLink
+                    :href="button.route"
+                    class="[ flex justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ]"
+                    >{{ button.title }}</RouterLink
+                >
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/primitives/card-heading/index.ts b/resources/primitives/card-heading/index.ts
new file mode 100644
index 0000000..6746a55
--- /dev/null
+++ b/resources/primitives/card-heading/index.ts
@@ -0,0 +1 @@
+export { default as CardHeading } from './CardHeading.vue'
diff --git a/resources/primitives/field-message/FieldMessage.vue b/resources/primitives/field-message/FieldMessage.vue
index 5c6ccea..5a07f40 100644
--- a/resources/primitives/field-message/FieldMessage.vue
+++ b/resources/primitives/field-message/FieldMessage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-    <div class="field-message [ text-sm text-muted-stroke ]"><slot /></div>
+    <div class="field-message [ text-sm text-muted-stroke mt-2 text-red-600 ]"><slot /></div>
 </template>
 
 <style scoped></style>
diff --git a/resources/primitives/field/Field.vue b/resources/primitives/field/Field.vue
index 0556d98..1c188b5 100644
--- a/resources/primitives/field/Field.vue
+++ b/resources/primitives/field/Field.vue
@@ -17,9 +17,9 @@ provide("field/error", error)
 
 <template>
     <div class="field">
-        <label :for="id" class="field__label [ text-sm font-medium ]">{{ label }}</label>
+        <label :for="id" class="field__label [ block text-sm font-medium leading-6 text-gray-900 ]">{{ label }}</label>
 
-        <div class="field__control">
+        <div class="field__control [ mt-2 ]">
             <slot />
         </div>
 
diff --git a/resources/views/home/index.vue b/resources/views/home/index.vue
index 4feda10..cb2fd68 100644
--- a/resources/views/home/index.vue
+++ b/resources/views/home/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { CardHeading } from "@/primitives/card-heading"
 import { ContentContainer } from "@/primitives/content-container"
-import { PageTitle } from "@/primitives/page-title"
 
 defineProps<{
     servers: App.Data.ServerData[]
@@ -12,29 +12,33 @@ useHead({
 </script>
 
 <template layout>
-    <div>
-        <ContentContainer class="[ bg-canvas ]">
-            <header>
-                <PageTitle>
-                    {{ $t("app.home.title") }}
-                </PageTitle>
-            </header>
+    <CardHeading :title="$t('app.home.title')" />
 
-            <section class="[ mt-8 ]">
-                <h2 class="[ text-2xl font-bold tracking-tight ]">{{ $t("nouns.servers") }}</h2>
-
-                <div>
-                    <div v-for="server in servers" :key="server.id">
-                        <div>{{ server.name }}</div>
-
-                        <RouterLink :href="route('servers.show', { server: server.id })" preload>
-                            {{ $t("actions.view") }}
-                        </RouterLink>
+    <ContentContainer class="[ bg-canvas py-8 ]">
+        <ul role="list" class="[ divide-y divide-gray-100 overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl ]">
+            <li v-for="server in servers" :key="server.id" class="[ flex items-center justify-between gap-x-6 py-5 px-4 ]">
+                <div class="[ min-w-0 ]">
+                    <div class="[ flex items-start gap-x-3 ]">
+                        <p class="[ text-sm font-semibold leading-6 text-gray-900 ]">{{ server.name }}</p>
                     </div>
+                    <div class="[ mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500 ]">
+                        <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
+                            <circle cx="1" cy="1" r="1" />
+                        </svg>
+                    </div>
+                </div>
+                <div class="[ flex flex-none items-center gap-x-4 ]">
+                    <RouterLink
+                        :href="route('servers.show', { server: server.id })"
+                        preload
+                        class="[ hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block ]"
+                    >
+                        {{ $t("actions.view") }}
+                    </RouterLink>
                 </div>
-            </section>
-        </ContentContainer>
-    </div>
+            </li>
+        </ul>
+    </ContentContainer>
 </template>
 
 <style scoped></style>
diff --git a/resources/views/servers/CreateSiteForm.vue b/resources/views/servers/CreateSiteForm.vue
index 95f55ae..54fefcc 100644
--- a/resources/views/servers/CreateSiteForm.vue
+++ b/resources/views/servers/CreateSiteForm.vue
@@ -2,6 +2,7 @@
 import { CsrfField } from "@/primitives/csrf-field"
 import { Field } from "@/primitives/field"
 import { Input } from "@/primitives/input"
+import { Button } from "~/resources/primitives/button"
 
 type Props = {
     server: App.Data.ServerData
@@ -22,7 +23,7 @@ const form = useForm({
 
 <template>
     <section>
-        <h2>Create a new site</h2>
+        <h2 class="[ font-bold ]">Create a new site</h2>
 
         <form :action="route('servers.sites.store', { server: server.id })" method="POST" @submit.prevent="form.submit">
             <CsrfField />
@@ -31,7 +32,9 @@ const form = useForm({
                 <Input type="text" name="name" v-model="form.fields.name" />
             </Field>
 
-            <button>Submit</button>
+            <div class="[ flex mt-4 ]">
+                <Button>Submit</Button>
+            </div>
         </form>
     </section>
 </template>
diff --git a/resources/views/servers/index.vue b/resources/views/servers/index.vue
index 1ee3aa8..b4e3e30 100644
--- a/resources/views/servers/index.vue
+++ b/resources/views/servers/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { CardHeading } from "@/primitives/card-heading"
 import { ContentContainer } from "@/primitives/content-container"
 
 type Props = {
@@ -9,24 +10,33 @@ defineProps<Props>()
 </script>
 
 <template layout>
-    <div>
-        <ContentContainer class="[ bg-canvas ]">
-            <header>
-                <h1>Servers</h1>
+    <CardHeading :title="$t('app.servers.title')" :button="{ title: 'New server', route: route('servers.create') }" />
 
-                <RouterLink :href="route('servers.create')">New Server</RouterLink>
-            </header>
-
-            <div>
-                <div v-for="server in servers" :key="server.id" class="[ flex gap-4 ]">
-                    <div>{{ server.name }}</div>
-                    <div>{{ server.ip_address }}</div>
-
-                    <RouterLink :href="route('servers.show', { server: server.id })">View Server</RouterLink>
+    <ContentContainer class="[ bg-canvas py-8 ]">
+        <ul role="list" class="[ divide-y divide-gray-100 overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl ]">
+            <li v-for="server in servers" :key="server.id" class="[ flex items-center justify-between gap-x-6 py-5 px-4 ]">
+                <div class="[ min-w-0 ]">
+                    <div class="[ flex items-start gap-x-3 ]">
+                        <p class="[ text-sm font-semibold leading-6 text-gray-900 ]">{{ server.name }}</p>
+                    </div>
+                    <div class="[ mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500 ]">
+                        <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
+                            <circle cx="1" cy="1" r="1" />
+                        </svg>
+                    </div>
+                </div>
+                <div class="[ flex flex-none items-center gap-x-4 ]">
+                    <RouterLink
+                        :href="route('servers.show', { server: server.id })"
+                        preload
+                        class="[ hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block ]"
+                    >
+                        {{ $t("actions.view") }}
+                    </RouterLink>
                 </div>
-            </div>
-        </ContentContainer>
-    </div>
+            </li>
+        </ul>
+    </ContentContainer>
 </template>
 
 <style scoped></style>
diff --git a/resources/views/servers/show.vue b/resources/views/servers/show.vue
index cc83b0d..743aa31 100644
--- a/resources/views/servers/show.vue
+++ b/resources/views/servers/show.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ContentContainer } from "@/primitives/content-container"
 import CreateSiteForm from "@/views/servers/CreateSiteForm.vue"
+import CardHeading from "~/resources/primitives/card-heading/CardHeading.vue"
 
 // import CreateSiteForm from "./CreateSiteForm.vue"
 
@@ -13,31 +14,30 @@ defineProps<Props>()
 </script>
 
 <template layout>
-    <ContentContainer>
-        <header class="[ flex justify-between ]">
-            <div>
-                <h1>{{ server.name }}</h1>
+    <CardHeading :title="server.name" />
 
-                <div>
-                    <div>{{ server.ip_address }}</div>
-                </div>
-            </div>
+    <ContentContainer class="[ bg-canvas py-8 ]">
+        <header class="[ flex justify-between ]">
+            <div>{{ server.ip_address }}</div>
         </header>
 
         <details>
             <summary>Public Key</summary>
 
-            <textarea class="[ font-mono ]">{{ server.public_key }}</textarea>
+            <textarea
+                class="[ font-mono block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 px-4 ]"
+                >{{ server.public_key }}</textarea
+            >
         </details>
 
-        <CreateSiteForm :server />
+        <CreateSiteForm :server class="mt-6" />
 
-        <div>
-            <div v-for="site in sites" :key="site.id" class="[ flex gap-4 ]">
+        <ul role="list" class="[ divide-y divide-gray-200 mt-6 border border-gray-100 ]">
+            <li v-for="site in sites" :key="site.id" class="[ flex justify-between p-4 ]">
                 <div>{{ site.name }}</div>
                 <div>{{ site.type }}</div>
-            </div>
-        </div>
+            </li>
+        </ul>
     </ContentContainer>
 </template>
 
diff --git a/resources/views/signin/create.vue b/resources/views/signin/create.vue
index 848acb6..5e3eae4 100644
--- a/resources/views/signin/create.vue
+++ b/resources/views/signin/create.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Button } from "@/primitives/button"
 import { CsrfField } from "@/primitives/csrf-field"
 import { Field } from "@/primitives/field"
 import { Input } from "@/primitives/input"
@@ -16,22 +17,28 @@ const login = useForm({
 </script>
 
 <template layout="auth">
-    <div>
-        <h1>Sign in to Roost</h1>
+    <div class="[ sm:mx-auto sm:w-full sm:max-w-md ]">
+        <h2 class="[ mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 ]">Sign in to Roost</h2>
+    </div>
 
-        <form :action="route('signin.store')" method="POST" @submit.prevent="login.submit">
-            <CsrfField />
+    <div class="[ mt-10 sm:mx-auto sm:w-full sm:max-w-[480px] ]">
+        <div class="[ bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12 ]">
+            <form :action="route('signin.store')" method="POST" @submit.prevent="login.submit" class="[ space-y-6 ]">
+                <CsrfField />
 
-            <Field id="email" label="Email address" :error="login.errors.email">
-                <Input name="email" type="email" v-model="login.fields.email" />
-            </Field>
+                <Field id="email" label="Email address" :error="login.errors.email">
+                    <Input name="email" type="email" v-model="login.fields.email" />
+                </Field>
 
-            <Field id="password" label="Password" :error="login.errors.password">
-                <Input name="password" type="password" v-model="login.fields.password" />
-            </Field>
+                <Field id="password" label="Password" :error="login.errors.password">
+                    <Input name="password" type="password" v-model="login.fields.password" />
+                </Field>
 
-            <button type="submit">Sign in</button>
-        </form>
+                <div>
+                    <Button>Sign in</Button>
+                </div>
+            </form>
+        </div>
     </div>
 </template>
 
diff --git a/resources/views/sites/index.vue b/resources/views/sites/index.vue
new file mode 100644
index 0000000..06a11b4
--- /dev/null
+++ b/resources/views/sites/index.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { CardHeading } from "@/primitives/card-heading"
+import { ContentContainer } from "@/primitives/content-container"
+
+type Props = {
+    servers: App.Data.ServerData[]
+}
+
+defineProps<Props>()
+</script>
+
+<template layout>
+    <CardHeading :title="$t('app.sites.title')" />
+
+    <ContentContainer class="[ bg-canvas py-8 ]">
+        <ul role="list" class="[ divide-y divide-gray-100 overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl ]">
+            <li v-for="server in servers" :key="server.id" class="[ flex items-center justify-between gap-x-6 py-5 px-4 ]">
+                <div class="[ min-w-0 ]">
+                    <div class="[ flex items-start gap-x-3 ]">
+                        <p class="[ text-sm font-semibold leading-6 text-gray-900 ]">{{ server.name }}</p>
+                    </div>
+                    <div class="[ mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500 ]">
+                        <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
+                            <circle cx="1" cy="1" r="1" />
+                        </svg>
+                    </div>
+                </div>
+                <div class="[ flex flex-none items-center gap-x-4 ]">
+                    <RouterLink
+                        :href="route('servers.show', { server: server.id })"
+                        preload
+                        class="[ hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block ]"
+                    >
+                        {{ $t("actions.view") }}
+                    </RouterLink>
+                </div>
+            </li>
+        </ul>
+    </ContentContainer>
+</template>
+
+<style scoped></style>