diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8fac6a7..f051dd1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,7 +5,6 @@
   GnActivityLog,
   GnBadge,
   GnButton,
-  GnCard,
   GnCheckbox,
   GnDescriptionList,
   GnEmptyState,
@@ -549,16 +548,20 @@
       <GnMetricCard label="Total" :value="total" icon="ph ph-vault" />
       <GnMetricCard label="Active" :value="activeSecrets" icon="ph ph-check-circle" />
       <GnMetricCard label="MCP" :value="mcpSecrets" icon="ph ph-plugs-connected" />
-      <GnCard title="Search" class="search-card">
-        <div class="search-line">
-          <GnSearchField v-model="query" placeholder="service, login, tag, source" />
-          <GnButton variant="primary" icon="ph ph-magnifying-glass" @click="loadSecrets">Search</GnButton>
-        </div>
-      </GnCard>
+      <section class="workspace-surface search-surface" aria-label="Search">
+        <GnToolbar title="Search">
+          <template #actions>
+            <div class="search-line">
+              <GnSearchField v-model="query" placeholder="service, login, tag, source" />
+              <GnButton variant="primary" icon="ph ph-magnifying-glass" @click="loadSecrets">Search</GnButton>
+            </div>
+          </template>
+        </GnToolbar>
+      </section>
     </section>
 
     <section v-if="activeTab === 'secrets'" class="workspace-grid">
-      <GnCard class="list-panel">
+      <section class="workspace-surface list-panel">
         <p v-if="error" class="error">{{ error }}</p>
         <GnToolbar title="Secrets" :meta="loading ? 'Loading' : `${total} records`">
           <template #actions>
@@ -590,22 +593,22 @@
           text="Create the first record using the Create button."
           icon="ph ph-vault"
         />
-      </GnCard>
+      </section>
 
-      <GnCard class="detail-panel">
-        <template #title>
-          <div class="card-title-row">
-            <span>{{ selected?.title || "No secret selected" }}</span>
+      <section class="workspace-surface detail-panel">
+        <GnToolbar :title="selected?.title || 'No secret selected'">
+          <template #actions>
             <div v-if="selected" class="card-title-actions">
               <GnBadge :variant="selected.status === 'actual' ? 'success' : 'warning'">
                 {{ selected.status }}
               </GnBadge>
               <GnButton size="sm" icon="ph ph-pencil-simple" @click="editing = !editing">Edit</GnButton>
             </div>
-          </div>
-        </template>
+          </template>
+        </GnToolbar>
         <template v-if="selected">
-          <GnCard v-if="editing" class="form-card" title="Edit metadata">
+          <section v-if="editing" class="workspace-surface inset-surface">
+            <GnToolbar title="Edit metadata" />
             <div class="form-grid two">
               <GnInput v-model="editForm.title" label="Title" icon="ph ph-text-t" />
               <GnInput v-model="editForm.purpose" label="Purpose" icon="ph ph-target" />
@@ -634,15 +637,13 @@
               <GnCheckbox v-model="editForm.allow_rest_api" label="REST API" />
               <GnCheckbox v-model="editForm.allow_mcp" label="MCP" />
             </div>
-            <template #footer>
-              <div class="actions">
-                <GnButton variant="primary" icon="ph ph-floppy-disk" @click="saveSecretMetadata">
-                  Save metadata
-                </GnButton>
-                <GnButton variant="secondary" @click="editing = false">Cancel</GnButton>
-              </div>
-            </template>
-          </GnCard>
+            <div class="actions">
+              <GnButton variant="primary" icon="ph ph-floppy-disk" @click="saveSecretMetadata">
+                Save metadata
+              </GnButton>
+              <GnButton variant="secondary" @click="editing = false">Cancel</GnButton>
+            </div>
+          </section>
 
           <GnDescriptionList :items="selectedDetails" />
 
@@ -671,30 +672,30 @@
             </template>
           </GnToolbar>
 
-          <GnCard v-if="editFields" class="form-card" title="Edit fields">
+          <section v-if="editFields" class="workspace-surface inset-surface">
+            <GnToolbar title="Edit fields" />
             <GnTextarea
               v-model="editForm.fieldsText"
               label="Fields"
               icon="ph ph-brackets-curly"
               rows="8"
             />
-            <template #footer>
-              <div class="actions">
-                <GnButton variant="primary" icon="ph ph-floppy-disk" @click="saveSecretFields">
-                  Save new version
-                </GnButton>
-                <GnButton variant="secondary" @click="editFields = false">Cancel</GnButton>
-              </div>
-            </template>
-          </GnCard>
+            <div class="actions">
+              <GnButton variant="primary" icon="ph ph-floppy-disk" @click="saveSecretFields">
+                Save new version
+              </GnButton>
+              <GnButton variant="secondary" @click="editFields = false">Cancel</GnButton>
+            </div>
+          </section>
 
-          <GnCard v-if="revealed" class="revealed-card" title="Revealed fields">
+          <section v-if="revealed" class="workspace-surface inset-surface">
+            <GnToolbar title="Revealed fields" />
             <GnActionList :items="revealedFieldItems">
               <template #controls="{ item }">
                 <code>{{ item.raw.value }}</code>
               </template>
             </GnActionList>
-          </GnCard>
+          </section>
         </template>
         <GnEmptyState
           v-else
@@ -703,11 +704,11 @@
           text="Metadata is shown by default. Values are available through reveal."
           icon="ph ph-lock-key"
         />
-      </GnCard>
+      </section>
     </section>
 
     <section v-if="activeTab === 'history'" class="panel-stack">
-      <GnCard>
+      <section class="workspace-surface">
         <GnToolbar title="Version history" :meta="selected?.title || 'Select a secret first from the Secrets tab'">
           <template #actions>
             <GnButton
@@ -724,19 +725,20 @@
             <GnButton size="sm" icon="ph ph-eye" @click="revealVersion(item.raw)">Reveal</GnButton>
           </template>
         </GnActionList>
-        <GnCard v-if="revealedVersion" class="revealed-card" :title="`Version ${revealedVersion.version_number}`">
+        <section v-if="revealedVersion" class="workspace-surface inset-surface">
+          <GnToolbar :title="`Version ${revealedVersion.version_number}`" />
           <GnActionList :items="revealedVersionItems">
             <template #controls="{ item }">
               <code>{{ item.raw.value }}</code>
               <GnButton size="sm" icon="ph ph-copy" @click="copyText(item.raw.value)">Copy</GnButton>
             </template>
           </GnActionList>
-        </GnCard>
-      </GnCard>
+        </section>
+      </section>
     </section>
 
     <section v-if="activeTab === 'audit'" class="panel-stack">
-      <GnCard>
+      <section class="workspace-surface">
         <GnToolbar title="Audit">
           <template #actions>
             <GnButton
@@ -760,17 +762,18 @@
             <code>{{ JSON.stringify(item.raw.metadata) }}</code>
           </template>
         </GnActivityLog>
-      </GnCard>
+      </section>
     </section>
 
     <section v-if="activeTab === 'tokens'" class="panel-stack">
-      <GnCard class="token-panel">
+      <section class="workspace-surface token-panel">
         <GnToolbar title="API tokens">
           <template #actions>
             <GnButton icon="ph ph-arrows-clockwise" @click="loadTokens">Refresh</GnButton>
           </template>
         </GnToolbar>
-        <GnCard class="form-card" title="Create token">
+        <section class="workspace-surface inset-surface">
+          <GnToolbar title="Create token" />
           <GnInput v-model="tokenForm.name" label="Token name" icon="ph ph-key" />
           <div class="controls-line">
             <GnCheckbox v-model="tokenForm.read" label="Read" />
@@ -779,18 +782,15 @@
             <GnCheckbox v-model="tokenForm.admin" label="Admin" />
             <GnCheckbox v-model="tokenForm.mcp" label="MCP" />
           </div>
-          <template #footer>
-            <GnButton variant="primary" icon="ph ph-plus-circle" @click="createApiToken">
-              Create token
-            </GnButton>
-          </template>
-        </GnCard>
-        <GnCard v-if="newToken" class="revealed-card" title="New token">
+          <GnButton variant="primary" icon="ph ph-plus-circle" @click="createApiToken">
+            Create token
+          </GnButton>
+        </section>
+        <section v-if="newToken" class="workspace-surface inset-surface">
+          <GnToolbar title="New token" />
           <GnTextarea :model-value="newToken.token" label="Token" icon="ph ph-key" readonly />
-          <template #footer>
-            <GnButton icon="ph ph-copy" @click="copyText(newToken.token)">Copy token</GnButton>
-          </template>
-        </GnCard>
+          <GnButton icon="ph ph-copy" @click="copyText(newToken.token)">Copy token</GnButton>
+        </section>
         <GnActionList :items="tokenItems">
           <template #controls="{ item }">
             <GnButton size="sm" variant="danger" icon="ph ph-trash" @click="revokeToken(item.raw)">
@@ -798,11 +798,12 @@
             </GnButton>
           </template>
         </GnActionList>
-      </GnCard>
+      </section>
     </section>
 
     <section v-if="activeTab === 'settings'" class="panel-stack">
-      <GnCard title="Settings">
+      <section class="workspace-surface">
+        <GnToolbar title="Settings" />
         <GnFileUpload
           v-model="importFiles"
           title="Import JSON"
@@ -835,11 +836,11 @@
             </GnButton>
           </template>
         </GnToolbar>
-      </GnCard>
+      </section>
     </section>
 
     <section v-if="activeTab === 'admin' && me?.role === 'admin'" class="panel-stack admin-stack">
-      <GnCard>
+      <section class="workspace-surface">
         <GnToolbar title="Users" :meta="`${adminUsersTotal} records`">
           <template #actions>
             <GnButton icon="ph ph-arrows-clockwise" @click="loadAdminUsers">Refresh</GnButton>
@@ -872,7 +873,7 @@
             <GnBadge :variant="value === 'admin' ? 'warning' : 'info'">{{ value }}</GnBadge>
           </template>
         </GnTable>
-      </GnCard>
+      </section>
     </section>
 
     <GnModal v-model:open="showCreateModal" title="Create secret">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5b206de..eff4530 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -40,18 +40,44 @@
 
 .metrics-row {
   display: grid;
-  grid-template-columns: repeat(3, minmax(120px, 160px)) minmax(420px, 1fr);
+  grid-template-columns: repeat(3, minmax(120px, 170px)) minmax(520px, 1fr);
   gap: 15px;
   margin-bottom: 15px;
 }
 
-.search-card,
 .list-panel,
 .detail-panel,
 .token-panel {
   min-width: 0;
 }
 
+.workspace-surface {
+  display: grid;
+  gap: 15px;
+  min-width: 0;
+  padding: 15px;
+  border: 2px solid rgba(192, 202, 245, 0.24);
+  background: rgba(192, 202, 245, 0.045);
+}
+
+.inset-surface {
+  padding: 12px;
+  border-color: rgba(192, 202, 245, 0.18);
+  background: rgba(22, 22, 30, 0.28);
+}
+
+.search-surface {
+  align-content: start;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(192, 202, 245, 0.045);
+    box-shadow: none;
+    transform: none;
+  }
+}
+
 .search-line {
   display: flex;
   gap: 10px;
@@ -66,7 +92,7 @@
 
 .workspace-grid {
   display: grid;
-  grid-template-columns: 340px minmax(420px, 1fr);
+  grid-template-columns: minmax(340px, 420px) minmax(680px, 1fr);
   gap: 15px;
   align-items: start;
 }
@@ -82,7 +108,6 @@
   overflow: auto;
 }
 
-.card-title-row,
 .card-title-actions,
 .controls-line,
 .actions {
@@ -92,11 +117,6 @@
   flex-wrap: wrap;
 }
 
-.card-title-row {
-  justify-content: space-between;
-  width: 100%;
-}
-
 .form-grid {
   display: grid;
   gap: 12px;
@@ -106,11 +126,6 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.form-card,
-.revealed-card {
-  max-width: none;
-}
-
 .create-modal-body {
   display: grid;
   gap: 16px;