diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a53a3dd..4a5d88a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -711,16 +711,20 @@
       >
         <template #actions>
           <div class="header-actions">
-            <div class="search-line header-search">
-              <GnSearchField v-model="query" placeholder="service, login, tag, source" />
-              <GnButton variant="primary" icon="ph ph-magnifying-glass" @click="loadSecrets">Search</GnButton>
-            </div>
             <div class="session-box">
               <span>{{ me?.email || "Session loading" }}</span>
               <GnBadge :variant="me?.role === 'admin' ? 'warning' : 'info'">
                 {{ me?.role || "user" }}
               </GnBadge>
             </div>
+            <GnSearchField
+              v-model="query"
+              class="header-search"
+              placeholder="service, login, tag, source"
+              :clearable="Boolean(query)"
+              @keydown.enter.prevent="loadSecrets"
+              @clear="loadSecrets"
+            />
           </div>
         </template>
       </GnPageHeader>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index a3f6b16..6b83056 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -91,28 +91,17 @@
   animation: gnexus-creds-modal-dialog-out 0.28s ease-in both;
 }
 
-.search-line {
-  display: flex;
-  gap: 10px;
-  align-items: end;
-  flex-wrap: wrap;
-}
-
-.search-line > *:first-child {
-  flex: 1 1 280px;
-  min-width: 220px;
-}
-
 .header-actions {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: flex-end;
-  gap: 14px;
+  gap: 8px;
   min-width: 0;
 }
 
 .header-search {
-  min-width: min(520px, 42vw);
+  width: min(360px, 34vw);
 }
 
 .secrets-page {
@@ -311,13 +300,12 @@
 
 @media (max-width: 1260px) {
   .header-actions {
-    width: 100%;
     align-items: stretch;
-    flex-direction: column-reverse;
+    width: 100%;
   }
 
   .header-search {
-    min-width: 0;
+    width: 100%;
   }
 
   .list-panel {