diff --git a/packages/extension/e2e.mjs b/packages/extension/e2e.mjs
index cc90368..7e22f8c 100644
--- a/packages/extension/e2e.mjs
+++ b/packages/extension/e2e.mjs
@@ -80,7 +80,7 @@
   await options.fill('input[type="email"]', EMAIL);
   await options.fill('input[type="password"]', PASSWORD);
   await options.click("text=Sign in");
-  await options.waitForSelector("text=Signed in as", { timeout: 10000 });
+  await options.waitForSelector("text=Default project", { timeout: 10000 });
   await options.selectOption("select", project.id);
   console.log("options page: signed in, project selected");
 
diff --git a/packages/extension/src/options/Options.vue b/packages/extension/src/options/Options.vue
index 85aa534..6fade5f 100644
--- a/packages/extension/src/options/Options.vue
+++ b/packages/extension/src/options/Options.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import browser from "webextension-polyfill";
+import { GnAvatar, GnButton, GnCard, GnInput, GnSelect } from "gnexus-ui-kit/vue";
 
 interface SettingsView {
   serverUrl: string;
@@ -22,6 +23,19 @@
 const error = ref<string | null>(null);
 const busy = ref(false);
 
+/** GnSelect is a native <select>: a null modelValue matches no option and blanks it. */
+const defaultProjectId = computed({
+  get: () => settings.value.defaultProjectId ?? "",
+  set: (value: string) => {
+    settings.value = { ...settings.value, defaultProjectId: value || null };
+    if (value) void saveDefaultProject();
+  },
+});
+const projectOptions = computed(() => [
+  { value: "", label: "Select a project…" },
+  ...projects.value.map((project) => ({ value: project.id, label: project.name })),
+]);
+
 async function sendMessage<T>(message: Record<string, unknown>): Promise<T> {
   const response = (await browser.runtime.sendMessage(message)) as { ok: boolean; data?: T; error?: string };
   if (!response?.ok) throw new Error(response?.error ?? "Request failed");
@@ -88,152 +102,166 @@
 
 <template>
   <div class="options">
-    <h1>Live Testing Tool</h1>
+    <header class="options-head">
+      <i class="ph ph-bug options-logo" />
+      <div>
+        <h1 class="options-title">Live Testing Tool</h1>
+        <p class="options-tagline">Capture element notes and recordings into your projects</p>
+      </div>
+    </header>
 
-    <section class="card">
-      <h2>Server</h2>
-      <label class="field">
-        <span>Server URL</span>
-        <input v-model="settings.serverUrl" type="url" placeholder="http://localhost:8001" />
-      </label>
-      <button type="button" :disabled="busy" @click="saveServerUrl">Save server URL</button>
-    </section>
+    <GnCard class="options-card">
+      <h2 class="options-card-title">Server</h2>
+      <GnInput v-model="settings.serverUrl" label="Server URL" icon="ph-plugs" type="url" />
+      <div class="options-actions">
+        <GnButton variant="secondary" size="sm" icon="ph-floppy-disk" :disabled="busy" @click="saveServerUrl">
+          Save server URL
+        </GnButton>
+      </div>
+    </GnCard>
 
-    <section class="card">
-      <h2>Account</h2>
+    <GnCard class="options-card">
+      <h2 class="options-card-title">Account</h2>
       <template v-if="settings.user">
-        <p class="signed-in">
-          Signed in as <strong>{{ settings.user.nickname }}</strong> ({{ settings.user.email }})
-        </p>
-        <button type="button" class="ghost" @click="signOut">Sign out</button>
+        <div class="options-profile">
+          <GnAvatar :name="settings.user.nickname" />
+          <div class="options-profile-info">
+            <span class="options-profile-name">{{ settings.user.nickname }}</span>
+            <span class="options-profile-email">{{ settings.user.email }}</span>
+          </div>
+          <GnButton variant="secondary" size="sm" icon="ph-sign-out" @click="signOut">Sign out</GnButton>
+        </div>
       </template>
       <template v-else>
-        <label class="field">
-          <span>Email</span>
-          <input v-model="email" type="email" autocomplete="username" />
-        </label>
-        <label class="field">
-          <span>Password</span>
-          <input v-model="password" type="password" autocomplete="current-password" @keyup.enter="signIn" />
-        </label>
-        <button type="button" :disabled="busy || !email || !password" @click="signIn">Sign in</button>
+        <GnInput v-model="email" label="Email" icon="ph-envelope-simple" type="email" autocomplete="username" />
+        <GnInput
+          v-model="password"
+          label="Password"
+          icon="ph-lock-key"
+          type="password"
+          autocomplete="current-password"
+          @keyup.enter="signIn"
+        />
+        <div class="options-actions">
+          <GnButton
+            variant="accent"
+            icon="ph-sign-in"
+            :loading="busy"
+            :disabled="busy || !email || !password"
+            @click="signIn"
+          >
+            Sign in
+          </GnButton>
+        </div>
       </template>
-    </section>
+    </GnCard>
 
-    <section v-if="settings.token" class="card">
-      <h2>Default project</h2>
-      <p class="hint">Reports captured with the extension are filed into this project.</p>
-      <label class="field">
-        <span>Project</span>
-        <select v-model="settings.defaultProjectId" @change="saveDefaultProject">
-          <option :value="null" disabled>Select a project…</option>
-          <option v-for="project in projects" :key="project.id" :value="project.id">{{ project.name }}</option>
-        </select>
-      </label>
-      <button type="button" class="ghost" @click="loadProjects">Refresh projects</button>
-    </section>
+    <GnCard v-if="settings.token" class="options-card">
+      <h2 class="options-card-title">Default project</h2>
+      <p class="options-hint">Reports captured with the extension are filed into this project.</p>
+      <GnSelect v-model="defaultProjectId" :options="projectOptions" icon="ph-folders" />
+      <div class="options-actions">
+        <GnButton variant="secondary" size="sm" icon="ph-arrows-clockwise" :disabled="busy" @click="loadProjects">
+          Refresh projects
+        </GnButton>
+      </div>
+    </GnCard>
 
-    <p v-if="status" class="status">{{ status }}</p>
-    <p v-if="error" class="error">{{ error }}</p>
+    <p v-if="status" class="options-status">
+      <i class="ph ph-check-circle" /> {{ status }}
+    </p>
+    <p v-if="error" class="options-error">
+      <i class="ph ph-warning-octagon" /> {{ error }}
+    </p>
   </div>
 </template>
 
-<style>
-:root {
-  color-scheme: dark;
-}
-body {
-  margin: 0;
-  padding: 32px;
-  background: #10121c;
-  color: #c0caf5;
-  font-family: "IBM Plex Mono", ui-monospace, monospace;
-  font-size: 14px;
-}
+<style scoped>
 .options {
   max-width: 560px;
   margin: 0 auto;
+  padding: 40px 24px 64px;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
-h1 {
-  font-size: 18px;
+.options-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.options-logo {
+  font-size: 34px;
+  color: var(--ltt-accent, #7aa2f7);
+}
+.options-title {
+  margin: 0;
+  font-size: 16px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
-h2 {
-  font-size: 13px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin: 0 0 12px;
+.options-tagline {
+  margin: 2px 0 0;
+  font-size: 12px;
+  opacity: 0.65;
 }
-.card {
-  padding: 16px;
-  border: 2px solid #2f334d;
-  background: #1a1c2b;
-}
-.field {
+.options-card {
+  width: 100%;
+  max-width: none;
+  padding: 20px;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin-bottom: 12px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  gap: 14px;
 }
-input,
-select {
-  padding: 6px 8px;
-  border: 2px solid #2f334d;
-  background: #10121c;
-  color: #c0caf5;
-  font: inherit;
-  font-size: 13px;
-  text-transform: none;
-  letter-spacing: normal;
-}
-input:focus,
-select:focus {
-  outline: none;
-  border-color: #7aa2f7;
-}
-button {
-  padding: 6px 14px;
-  border: 2px solid #7aa2f7;
-  background: #7aa2f7;
-  color: #10121c;
-  font: inherit;
+.options-card-title {
+  margin: 0;
   font-size: 12px;
-  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: pointer;
+  letter-spacing: 0.1em;
+  opacity: 0.6;
 }
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.options-actions {
+  display: flex;
+  justify-content: flex-end;
 }
-button.ghost {
-  background: transparent;
-  color: inherit;
-  border-color: #2f334d;
+.options-profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
-.signed-in {
-  margin: 0 0 12px;
+.options-profile-info {
+  display: flex;
+  flex-direction: column;
+  margin-right: auto;
+  min-width: 0;
 }
-.hint {
+.options-profile-name {
+  font-weight: 600;
+}
+.options-profile-email {
   font-size: 12px;
   opacity: 0.7;
-  text-transform: none;
-  letter-spacing: normal;
-  margin: 0 0 12px;
+  overflow-wrap: anywhere;
 }
-.status {
-  color: #9ece6a;
+.options-hint {
+  margin: 0;
+  font-size: 12px;
+  opacity: 0.6;
 }
-.error {
-  color: #f7768e;
+.options-status,
+.options-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 13px;
+}
+.options-status {
+  color: var(--ltt-success, #9ece6a);
+}
+.options-error {
+  color: var(--ltt-danger, #f7768e);
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 </style>
\ No newline at end of file
diff --git a/packages/extension/src/options/main.ts b/packages/extension/src/options/main.ts
index c07dded..3f8249a 100644
--- a/packages/extension/src/options/main.ts
+++ b/packages/extension/src/options/main.ts
@@ -1,4 +1,11 @@
+// The options page is a plain extension page (not a shadow-root overlay), so
+// it can use the kit's global CSS and components directly — same look as the
+// web panel. Font URLs in kit.css are absolute /assets/... and resolve inside
+// the extension bundle (dist/assets/fonts/... is shipped via static-copy).
+import "gnexus-ui-kit/dist/css/kit.css";
+import "gnexus-ui-kit/dist/assets/fonts/phosphor-icons/src/css/icons.css";
 import { createApp } from "vue";
+import { GnexusUiVue } from "gnexus-ui-kit/vue";
 import Options from "./Options.vue";
 
-createApp(Options).mount("#app");
\ No newline at end of file
+createApp(Options).use(GnexusUiVue).mount("#app");
\ No newline at end of file
diff --git a/packages/extension/vite.config.ts b/packages/extension/vite.config.ts
index 4e75090..d83a52c 100644
--- a/packages/extension/vite.config.ts
+++ b/packages/extension/vite.config.ts
@@ -59,7 +59,12 @@
           entryFileNames: (chunk) =>
             chunk.name === "background" || chunk.name === "content" ? `${chunk.name}.js` : "assets/[name].js",
           chunkFileNames: "assets/[name].js",
-          assetFileNames: "assets/[name][extname]",
+          assetFileNames: () => {
+            // cssCodeSplit:false funnels each pass's CSS into one file; give the
+            // options page its own name so the content pass (which runs last and
+            // owns assets/style.css for the overlay) cannot overwrite it
+            return only === "options" ? "assets/options.css" : "assets/style.css";
+          },
         },
       },
     },
diff --git a/packages/web/src/components/AppShell.vue b/packages/web/src/components/AppShell.vue
index 4a2c807..2d5cdae 100644
--- a/packages/web/src/components/AppShell.vue
+++ b/packages/web/src/components/AppShell.vue
@@ -27,23 +27,6 @@
 
 <template>
   <GnNavigationShell brand="Live Testing Tool" :items="items" @select="onSelect">
-    <!-- the kit renders this slot in a chip in the topbar's right corner;
-         an identity chip beats an empty "current section" box -->
-    <template #current>
-      <div v-if="auth.user.value" class="shell-user">
-        <GnAvatar :name="auth.user.value.nickname" size="sm" />
-        <span class="shell-user-name">{{ auth.user.value.nickname }}</span>
-        <button
-          type="button"
-          class="shell-user-logout"
-          :title="t('nav.logout')"
-          @click="logout"
-        >
-          <i class="ph ph-sign-out" />
-        </button>
-      </div>
-      <span v-else class="shell-user-name">{{ t("common.loading") }}</span>
-    </template>
     <template #content>
       <div class="shell-body">
         <slot />
@@ -68,34 +51,6 @@
   padding: 20px 24px 60px;
   width: 100%;
 }
-.shell-user {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-.shell-user-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.shell-user-logout {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--ltt-text-dim, #787c99);
-  font-size: 16px;
-  cursor: pointer;
-  transition: color 0.15s ease;
-}
-.shell-user-logout:hover {
-  color: var(--ltt-danger, #f7768e);
-}
 .shell-footer {
   display: flex;
   align-items: center;
diff --git a/packages/web/src/pages/ProjectsPage.vue b/packages/web/src/pages/ProjectsPage.vue
index e254b70..26f0ba7 100644
--- a/packages/web/src/pages/ProjectsPage.vue
+++ b/packages/web/src/pages/ProjectsPage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import {
   GnButton,
@@ -21,7 +20,6 @@
 
 const { t } = useI18n();
 const toast = useToast();
-const router = useRouter();
 
 const projects = ref<Project[]>([]);
 const loading = ref(true);
@@ -69,68 +67,79 @@
 
 <template>
   <AppShell>
-    <GnPageHeader :title="t('projects.title')" :subtitle="t('app.tagline')">
-      <template #actions>
-        <GnButton variant="accent" icon="ph-plus" @click="createOpen = true">
-          {{ t("projects.create") }}
-        </GnButton>
-      </template>
-    </GnPageHeader>
-
-    <GnToolbar :title="t('projects.count', filtered.length)">
-      <template #actions>
-        <GnSearchField v-model="query" :placeholder="t('projects.search')" />
-      </template>
-    </GnToolbar>
-
-    <GnEmptyState
-      v-if="!loading && filtered.length === 0"
-      icon="ph-folders"
-      :title="t('projects.empty')"
-      :text="t('projects.emptyHint')"
-    >
-      <template #actions>
-        <GnButton variant="accent" icon="ph-plus" @click="createOpen = true">
-          {{ t("projects.create") }}
-        </GnButton>
-      </template>
-    </GnEmptyState>
-
-    <div v-else-if="filtered.length" class="projects-grid">
-      <GnCard v-for="project in filtered" :key="project.id" class="project-card">
-        <div class="project-card-head">
-          <h2 class="project-name">
-            <RouterLink :to="`/p/${project.share_token}`">{{ project.name }}</RouterLink>
-          </h2>
-        </div>
-        <p class="project-description">{{ project.description ?? "—" }}</p>
-        <div class="project-card-actions">
-          <GnButton variant="secondary" size="sm" icon="ph-arrow-right" @click="router.push(`/p/${project.share_token}`)">
-            {{ t("projects.open") }}
+    <div class="projects-page">
+      <GnPageHeader :title="t('projects.title')" :subtitle="t('app.tagline')">
+        <template #actions>
+          <GnButton variant="accent" icon="ph-plus" @click="createOpen = true">
+            {{ t("projects.create") }}
           </GnButton>
-          <GnCopyButton :text="api.projectShareUrl(project)" :label="t('projects.share')" />
-        </div>
-      </GnCard>
+        </template>
+      </GnPageHeader>
+
+      <GnToolbar :title="t('projects.count', filtered.length)">
+        <template #actions>
+          <GnSearchField v-model="query" :placeholder="t('projects.search')" />
+        </template>
+      </GnToolbar>
+
+      <GnEmptyState
+        v-if="!loading && filtered.length === 0"
+        icon="ph-folders"
+        :title="t('projects.empty')"
+        :text="t('projects.emptyHint')"
+      >
+        <template #actions>
+          <GnButton variant="accent" icon="ph-plus" @click="createOpen = true">
+            {{ t("projects.create") }}
+          </GnButton>
+        </template>
+      </GnEmptyState>
+
+      <div v-else-if="filtered.length" class="projects-grid">
+        <GnCard v-for="project in filtered" :key="project.id" class="project-card">
+          <div class="project-card-head">
+            <h2 class="project-name">
+              <RouterLink :to="`/p/${project.share_token}`">{{ project.name }}</RouterLink>
+            </h2>
+            <GnCopyButton
+              :text="api.projectShareUrl(project)"
+              :label="t('projects.share')"
+              size="sm"
+            />
+          </div>
+          <p class="project-description">{{ project.description ?? "—" }}</p>
+          <div class="project-card-footer">
+            <RouterLink :to="`/p/${project.share_token}`" class="project-card-open">
+              {{ t("projects.open") }} <i class="ph ph-arrow-right" />
+            </RouterLink>
+          </div>
+        </GnCard>
+      </div>
+
+      <GnModal v-model:open="createOpen" :title="t('projects.createTitle')">
+        <form class="create-form" @submit.prevent="createProject">
+          <GnInput v-model="newName" :label="t('projects.name')" icon="ph-folder-simple" required />
+          <GnTextarea v-model="newDescription" :label="t('projects.description')" :rows="3" />
+          <div class="create-form-actions">
+            <GnButton variant="secondary" type="button" @click="createOpen = false">
+              {{ t("projects.cancel") }}
+            </GnButton>
+            <GnButton type="submit" variant="accent" :loading="creating" :disabled="!newName.trim()">
+              {{ t("projects.confirm") }}
+            </GnButton>
+          </div>
+        </form>
+      </GnModal>
     </div>
-
-    <GnModal v-model:open="createOpen" :title="t('projects.createTitle')">
-      <form class="create-form" @submit.prevent="createProject">
-        <GnInput v-model="newName" :label="t('projects.name')" icon="ph-folder-simple" required />
-        <GnTextarea v-model="newDescription" :label="t('projects.description')" :rows="3" />
-        <div class="create-form-actions">
-          <GnButton variant="secondary" type="button" @click="createOpen = false">
-            {{ t("projects.cancel") }}
-          </GnButton>
-          <GnButton type="submit" variant="accent" :loading="creating" :disabled="!newName.trim()">
-            {{ t("projects.confirm") }}
-          </GnButton>
-        </div>
-      </form>
-    </GnModal>
   </AppShell>
 </template>
 
 <style scoped>
+.projects-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
 .projects-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -154,24 +163,47 @@
 .project-name {
   margin: 0;
   font-size: 16px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .project-name a {
   color: inherit;
   text-decoration: none;
 }
 .project-name a:hover {
-  color: var(--color-accent, #7aa2f7);
+  color: var(--ltt-accent, #7aa2f7);
 }
 .project-description {
   margin: 0;
   font-size: 13px;
+  line-height: 1.5;
   opacity: 0.75;
   flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
-.project-card-actions {
+.project-card-footer {
   display: flex;
-  gap: 8px;
   align-items: center;
+  border-top: 1px solid var(--ltt-border, rgba(192, 202, 245, 0.24));
+  padding-top: 10px;
+}
+.project-card-open {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ltt-accent, #7aa2f7);
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.project-card-open:hover {
+  text-decoration: underline;
 }
 .create-form {
   display: flex;
@@ -184,5 +216,6 @@
 .create-form-actions {
   display: flex;
   justify-content: flex-end;
+  gap: 10px;
 }
 </style>
\ No newline at end of file
diff --git a/packages/web/src/theme.css b/packages/web/src/theme.css
index b04edea..6fe46b0 100644
--- a/packages/web/src/theme.css
+++ b/packages/web/src/theme.css
@@ -45,4 +45,10 @@
   --color-success: var(--ltt-success);
   --color-warning: var(--ltt-warning);
   --color-danger: var(--ltt-danger);
+}
+
+/* the kit's topbar "current section" chip: the page headers already carry
+   context, an empty box in the corner is noise */
+.nav-topbar-current {
+  display: none;
 }
\ No newline at end of file