diff --git a/frontend/src/components/SecretDetailPanel.vue b/frontend/src/components/SecretDetailPanel.vue
index 5087edc..fecd92f 100644
--- a/frontend/src/components/SecretDetailPanel.vue
+++ b/frontend/src/components/SecretDetailPanel.vue
@@ -7,6 +7,7 @@
   GnDescriptionList,
   GnDropdown,
   GnIconButton,
+  GnPageHeader,
   GnToolbar,
   GnTooltip
 } from "gnexus-ui-kit/vue";
@@ -95,43 +96,50 @@
 </script>
 
 <template>
-  <div v-if="showHeader" class="detail-header">
-    <GnIconButton
-      v-if="showBack"
-      icon="ph ph-arrow-left"
-      label="Back to list"
-      @click="emit('back')"
-    />
-    <strong class="detail-title">{{ secret.title }}</strong>
-    <div v-if="showActions" class="detail-actions">
-      <GnBadge :variant="secret.status === 'actual' ? 'success' : 'warning'">
-        {{ secret.status }}
-      </GnBadge>
-      <GnTooltip :text="fields ? 'Mask values' : 'Show decrypted values'">
-        <GnIconButton
-          :icon="fields ? 'ph ph-eye-slash' : 'ph ph-eye'"
-          :label="fields ? 'Hide secret' : 'Reveal secret'"
-          @click="fields ? emit('hide') : emit('reveal')"
-        />
-      </GnTooltip>
-      <GnTooltip text="Edit metadata">
-        <GnIconButton
-          icon="ph ph-pencil-simple"
-          label="Edit metadata"
-          @click="emit('edit-metadata')"
-        />
-      </GnTooltip>
-      <GnDropdown :items="actionItems" class="secret-dropdown">
-        <template #trigger="{ toggle }">
+  <GnPageHeader
+    v-if="showHeader"
+    :title="secret.title"
+    compact
+  >
+    <template #kicker>
+      <GnIconButton
+        v-if="showBack"
+        icon="ph ph-arrow-left"
+        label="Back to list"
+        @click="emit('back')"
+      />
+    </template>
+    <template #actions>
+      <div v-if="showActions" class="detail-actions">
+        <GnBadge :variant="secret.status === 'actual' ? 'success' : 'warning'">
+          {{ secret.status }}
+        </GnBadge>
+        <GnTooltip :text="fields ? 'Mask values' : 'Show decrypted values'">
           <GnIconButton
-            icon="ph ph-dots-three-outline"
-            label="Secret actions"
-            @click="toggle"
+            :icon="fields ? 'ph ph-eye-slash' : 'ph ph-eye'"
+            :label="fields ? 'Hide secret' : 'Reveal secret'"
+            @click="fields ? emit('hide') : emit('reveal')"
           />
-        </template>
-      </GnDropdown>
-    </div>
-  </div>
+        </GnTooltip>
+        <GnTooltip text="Edit metadata">
+          <GnIconButton
+            icon="ph ph-pencil-simple"
+            label="Edit metadata"
+            @click="emit('edit-metadata')"
+          />
+        </GnTooltip>
+        <GnDropdown :items="actionItems" class="secret-dropdown">
+          <template #trigger="{ toggle }">
+            <GnIconButton
+              icon="ph ph-dots-three-outline"
+              label="Secret actions"
+              @click="toggle"
+            />
+          </template>
+        </GnDropdown>
+      </div>
+    </template>
+  </GnPageHeader>
 
   <GnDescriptionList :items="details" />
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6359e01..aa44516 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -35,12 +35,6 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(192, 202, 245, 0.045);
-    box-shadow: none;
-    transform: none;
-  }
-
   .btn-icon:not(.without-hover):hover .ph,
   .btn-icon:not(.without-hover):hover .ph-bold {
     transform: none;
@@ -147,27 +141,6 @@
   flex-wrap: wrap;
 }
 
-.detail-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  border: 2px solid rgba(192, 202, 245, 0.24);
-  border-left-width: 6px;
-  background: rgba(192, 202, 245, 0.045);
-}
-
-.detail-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1;
-  text-transform: uppercase;
-}
 
 .detail-actions {
   display: flex;