diff --git a/webclient/src/components/chat/QueuedMessagesChip.vue b/webclient/src/components/chat/QueuedMessagesChip.vue
index 6a7fdbe..4688f27 100644
--- a/webclient/src/components/chat/QueuedMessagesChip.vue
+++ b/webclient/src/components/chat/QueuedMessagesChip.vue
@@ -1,12 +1,9 @@
 <template>
   <Transition name="fade">
     <div v-if="chat.queuedMessages.count" class="task-chips">
-      <div class="task-chip queued" :title="titles">
-        <i class="ph ph-inbox"></i>
-        <span>
-          {{ chat.queuedMessages.count }} message{{ chat.queuedMessages.count === 1 ? '' : 's' }} queued
-        </span>
-      </div>
+      <GnChip icon="ph ph-inbox" :title="titles">
+        {{ chat.queuedMessages.count }} message{{ chat.queuedMessages.count === 1 ? '' : 's' }} queued
+      </GnChip>
     </div>
   </Transition>
 </template>
@@ -28,26 +25,6 @@
   flex-wrap: wrap;
 }
 
-.task-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 10px;
-  border-radius: 999px;
-  border: 1px solid var(--gn-border-color-muted);
-  background: var(--gn-surface-panel-muted);
-  font-size: 12px;
-  color: var(--gn-color-text-medium);
-
-  i { color: var(--gn-color-secondary); }
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-
-  &.queued i { color: var(--gn-color-secondary); }
-}
-
 .fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
 .fade-enter-from, .fade-leave-to { opacity: 0; }
 </style>
\ No newline at end of file
diff --git a/webclient/src/components/settings/ApiKeysPanel.vue b/webclient/src/components/settings/ApiKeysPanel.vue
index 968113c..498fdfa 100644
--- a/webclient/src/components/settings/ApiKeysPanel.vue
+++ b/webclient/src/components/settings/ApiKeysPanel.vue
@@ -12,47 +12,40 @@
       to authenticate without browser-based OAuth.
     </p>
 
-    <div v-if="authStore.isNoAuthMode" class="api-keys-warning">
+    <GnAlert v-if="authStore.isNoAuthMode" variant="warning" class="api-keys-warning">
       <i class="ph ph-warning-circle"></i>
       Authorization is currently disabled. Any keys created here are tied to the
       local anonymous user and grant full access to this Navi instance.
+    </GnAlert>
+
+    <div v-if="tokensStore.loading" class="api-keys-loading">
+      <GnLoader label="Loading API keys" />
     </div>
 
-    <div v-if="tokensStore.loading" class="api-keys-loading">Loading...</div>
-
-    <div v-else-if="!tokensStore.tokens.length" class="api-keys-empty">
-      No API keys yet. Create one to get started.
-    </div>
-
-    <div v-else class="api-keys-table-wrapper">
-      <div class="api-keys-table">
-        <div class="api-keys-row api-keys-header-row">
-          <span class="col-name">Name</span>
-          <span class="col-prefix">Key</span>
-          <span class="col-created">Created</span>
-          <span class="col-last-used">Last used</span>
-          <span class="col-actions"></span>
-        </div>
-
-        <div
-          v-for="token in tokensStore.tokens"
-          :key="token.id"
-          class="api-keys-row">
-          <span class="col-name">{{ token.name }}</span>
-          <span class="col-prefix">{{ token.token_prefix }}</span>
-          <span class="col-created">{{ formatDate(token.created_at) }}</span>
-          <span class="col-last-used">{{ formatDate(token.last_used_at) || 'Never' }}</span>
-          <span class="col-actions">
-            <GnIconButton
-              icon="ph ph-trash"
-              label="Revoke"
-              variant="ghost"
-              @click="onRevoke(token.id, token.name)"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
+    <GnTable
+      v-else
+      :columns="columns"
+      :rows="tokensStore.tokens"
+      empty-text="No API keys yet. Create one to get started."
+    >
+      <template #cell-token_prefix="{ row }">
+        <code>{{ row.token_prefix }}</code>
+      </template>
+      <template #cell-created_at="{ row }">
+        {{ formatDate(row.created_at) }}
+      </template>
+      <template #cell-last_used_at="{ row }">
+        {{ formatDate(row.last_used_at) || 'Never' }}
+      </template>
+      <template #cell-actions="{ row }">
+        <GnIconButton
+          icon="ph ph-trash"
+          label="Revoke"
+          variant="ghost"
+          @click="onRevoke(row.id, row.name)"
+        />
+      </template>
+    </GnTable>
 
     <CreateKeyModal
       :open="createModalOpen"
@@ -87,6 +80,14 @@
 const showTokenModal = ref(false)
 const createdToken = ref('')
 
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'token_prefix', label: 'Key' },
+  { key: 'created_at', label: 'Created' },
+  { key: 'last_used_at', label: 'Last used' },
+  { key: 'actions', label: '' },
+]
+
 onMounted(() => {
   tokensStore.fetchTokens()
 })
@@ -149,63 +150,22 @@
   color: var(--gn-color-text-medium);
 }
 
-.api-keys-loading,
-.api-keys-empty {
-  padding: 24px;
-  text-align: center;
-  color: var(--gn-color-text-dark);
-  font-size: 0.9rem;
-}
-
 .api-keys-warning {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 12px;
   margin-bottom: 16px;
-  border: 1px solid var(--gn-color-warning);
-  border-radius: 8px;
-  color: var(--gn-color-text-medium);
-  font-size: 0.875rem;
 
   i {
-    color: var(--gn-color-warning);
     font-size: 16px;
     flex-shrink: 0;
   }
 }
 
-.api-keys-row {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr 1fr auto;
-  gap: 12px;
-  align-items: center;
-  padding: 10px 12px;
-  font-size: 0.875rem;
-  border-bottom: 1px solid var(--gn-border-color-muted);
+.api-keys-loading {
+  padding: 24px;
+  text-align: center;
 }
 
-.api-keys-header-row {
-  font-weight: 600;
-  color: var(--gn-color-text-medium);
-  border-bottom-width: 2px;
-}
-
-.col-name {
+.api-keys-panel code {
+  font-family: var(--gn-font-family-base);
   color: var(--gn-color-text-medium);
 }
-
-.col-prefix {
-  font-family: monospace;
-  color: var(--gn-color-text-medium);
-}
-
-.col-created,
-.col-last-used {
-  color: var(--gn-color-text-dark);
-}
-
-.col-actions {
-  text-align: right;
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/webclient/src/components/settings/NotificationSettingsPanel.vue b/webclient/src/components/settings/NotificationSettingsPanel.vue
index d0ac9f8..eb7b366 100644
--- a/webclient/src/components/settings/NotificationSettingsPanel.vue
+++ b/webclient/src/components/settings/NotificationSettingsPanel.vue
@@ -8,13 +8,13 @@
       no Navi window is open on that session.
     </p>
 
-    <div v-if="!supported" class="notifications-unsupported">
+    <GnAlert v-if="!supported" variant="info" class="notifications-unsupported">
       <i class="ph ph-info"></i>
       <span>
         This browser does not support web push (needs HTTPS, a service worker
         and the Push API). Try Chrome or a recent Firefox.
       </span>
-    </div>
+    </GnAlert>
 
     <div v-else class="notifications-row">
       <div class="notifications-row-text">
@@ -87,11 +87,7 @@
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  padding: 12px;
-  border: 1px solid var(--gn-border-color-muted);
-  border-radius: 8px;
-  color: var(--gn-color-text-dark);
-  font-size: 0.875rem;
+  margin-bottom: 16px;
 
   i {
     font-size: 16px;
diff --git a/webclient/src/components/settings/SettingsView.vue b/webclient/src/components/settings/SettingsView.vue
index 1ad3184..81b7d92 100644
--- a/webclient/src/components/settings/SettingsView.vue
+++ b/webclient/src/components/settings/SettingsView.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="settings-view">
-    <div class="settings-header">
-      <GnIconButton
-        icon="ph ph-list"
-        label="Toggle sidebar"
-        class="settings-sidebar-toggle"
-        @click="emit('toggle-sidebar')"
-      />
-      <h1 class="settings-title">Settings</h1>
-    </div>
+    <GnPageHeader title="Settings" compact class="settings-header">
+      <template #actions>
+        <GnIconButton
+          icon="ph ph-list"
+          label="Toggle sidebar"
+          class="settings-sidebar-toggle"
+          @click="emit('toggle-sidebar')"
+        />
+      </template>
+    </GnPageHeader>
     <div class="settings-body">
       <ApiKeysPanel />
       <NotificationSettingsPanel />
@@ -32,12 +33,7 @@
 }
 
 .settings-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--gn-border-color-muted);
-  background: var(--gn-surface-panel);
+  flex-shrink: 0;
 }
 
 .settings-sidebar-toggle {
@@ -47,13 +43,6 @@
   }
 }
 
-.settings-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 0;
-  color: var(--gn-color-text-medium);
-}
-
 .settings-body {
   flex: 1 1 0;
   overflow-y: auto;
diff --git a/webclient/src/components/settings/ShowTokenModal.vue b/webclient/src/components/settings/ShowTokenModal.vue
index a16baaa..1fbd080 100644
--- a/webclient/src/components/settings/ShowTokenModal.vue
+++ b/webclient/src/components/settings/ShowTokenModal.vue
@@ -9,14 +9,12 @@
         <i class="ph ph-warning-circle"></i>
         Copy this token now — it will <strong>never be shown again</strong>.
       </p>
-      <div class="show-token-field">
+      <GnInputGroup>
         <code class="show-token-value">{{ props.token }}</code>
-        <GnIconButton
-          :icon="copied ? 'ph ph-check' : 'ph ph-copy'"
-          :label="copied ? 'Copied!' : 'Copy to clipboard'"
-          @click="copy(props.token)"
-        />
-      </div>
+        <template #action>
+          <GnCopyButton :text="props.token" label="Copy to clipboard" />
+        </template>
+      </GnInputGroup>
     </div>
 
     <template #actions>
@@ -28,16 +26,12 @@
 </template>
 
 <script setup>
-import { useCopy } from '@/composables/useCopy.js'
-
 const props = defineProps({
   open: Boolean,
   token: String,
 })
 
 const emit = defineEmits(['close'])
-
-const { copied, copy } = useCopy()
 </script>
 
 <style scoped lang="scss">
@@ -58,16 +52,6 @@
   }
 }
 
-.show-token-field {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  background: var(--gn-surface-panel);
-  border: 1px solid var(--gn-border-color-muted);
-  border-radius: 6px;
-}
-
 .show-token-value {
   flex: 1 1 0;
   font-family: monospace;
@@ -75,4 +59,4 @@
   word-break: break-all;
   color: var(--gn-color-text-medium);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/webclient/src/components/sidebar/AppSidebar.vue b/webclient/src/components/sidebar/AppSidebar.vue
index 0b8df60..dd19b32 100644
--- a/webclient/src/components/sidebar/AppSidebar.vue
+++ b/webclient/src/components/sidebar/AppSidebar.vue
@@ -9,16 +9,11 @@
 
       <div class="sidebar-controls-row">
         <div class="sidebar-profile-select">
-          <select
-            :value="profilesStore.selectedProfileId"
-            @change="profilesStore.selectedProfileId = $event.target.value"
-          >
-            <option
-              v-for="p in profilesStore.profiles"
-              :key="p.id"
-              :value="p.id"
-            >{{ p.name }}</option>
-          </select>
+          <GnSelect
+            :model-value="profilesStore.selectedProfileId"
+            :options="profileOptions"
+            @update:model-value="profilesStore.selectedProfileId = $event"
+          />
         </div>
 
         <GnButton variant="primary" icon="ph ph-plus" @click="handleNewSession">
@@ -149,7 +144,7 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import { useProfilesStore } from '@/stores/profiles.js'
 import { useSessionsStore } from '@/stores/sessions.js'
 import { useChatStore } from '@/stores/chat.js'
@@ -171,6 +166,10 @@
 const searchFieldEl = ref(null)
 let searchDebounceTimer = null
 
+const profileOptions = computed(() =>
+  profilesStore.profiles.map(p => ({ value: p.id, label: p.name }))
+)
+
 function focusSearchInput() {
   const wrap = searchFieldEl.value?.$el ?? searchFieldEl.value
   if (!wrap) return
diff --git a/webclient/src/styles/app.scss b/webclient/src/styles/app.scss
index f04945a..4ac998b 100644
--- a/webclient/src/styles/app.scss
+++ b/webclient/src/styles/app.scss
@@ -165,57 +165,20 @@
 }
 
 // ─── Sidebar profile selector ──────────────────────────────────────────────
-// Standalone .input-style select (outside .form-group context)
+// GnSelect is form-shaped (.form-group > .label > .select-wrap); collapse the
+// vertical chrome it adds for stacked forms so it fits the slim sidebar row.
 .sidebar-profile-select {
-  position: relative;
-
-  select {
-    width: 100%;
-    appearance: none;
-    -webkit-appearance: none;
-    min-height: $control-height-md;
-    font-family: inherit;
-    font-size: 13px;
-    font-weight: 500;
-    padding: $space-xs $space-xl $space-xs $space-md;
-    border: $border-width-base $border-style-base $border-color-muted;
-    border-bottom-width: $border-width-accent;
-    border-bottom-color: $color-text-light;
-    color: $color-text-light;
-    background-color: $surface-panel-muted;
-    cursor: pointer;
-    transition: border-color $motion-base $motion-ease, background-color $motion-base $motion-ease;
-    outline: none;
-
-    &:hover {
-      border-bottom-color: $color-text-dark;
-    }
-
-    &:focus {
-      @include focus_ring;
-      border-color: $color-electric-blue;
-      background-color: transparent;
-    }
-
-    option {
-      background: $surface-panel;
-      color: $color-text-light;
-    }
+  .form-group {
+    max-width: none;
+    margin-bottom: 0;
   }
 
-  // Custom chevron arrow
-  &::after {
-    content: "";
-    position: absolute;
-    right: $space-md;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 0;
-    height: 0;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 5px solid $color-text-medium;
-    pointer-events: none;
+  .label {
+    margin-bottom: 0;
+  }
+
+  .select-wrap {
+    margin-top: 0;
   }
 }