diff --git a/containers/libreportal/frontend/components/admin/config/js/catalog-manager.js b/containers/libreportal/frontend/components/admin/config/js/catalog-manager.js
index d04f6ce..e8efe0a 100644
--- a/containers/libreportal/frontend/components/admin/config/js/catalog-manager.js
+++ b/containers/libreportal/frontend/components/admin/config/js/catalog-manager.js
@@ -188,7 +188,7 @@ window.validateCatalogFormat = function (input) {
 window.officialCatalogActionHTML = function (enabled) {
   return enabled
     ? `<button type="button" class="delete-domain-btn" title="Remove the official catalog from browsing" onclick="window.deleteOfficialCatalog()"><span class="delete-icon">×</span></button>`
-    : `<button type="button" class="btn btn-secondary" style="padding:.3rem .8rem;" onclick="window.enableOfficialCatalog()">Re-enable</button>`;
+    : `<button type="button" class="catalog-reenable-btn" title="Show the official catalog in browsing again" onclick="window.enableOfficialCatalog()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Re-enable</button>`;
 };
 
 window.deleteOfficialCatalog = function () {
diff --git a/containers/libreportal/frontend/core/forms/css/config.css b/containers/libreportal/frontend/core/forms/css/config.css
index 0fe5a50..187bb79 100644
--- a/containers/libreportal/frontend/core/forms/css/config.css
+++ b/containers/libreportal/frontend/core/forms/css/config.css
@@ -324,6 +324,44 @@
   pointer-events: none;
 }
 
+/* Official-catalog row action column. align-self:stretch makes it match the
+   URL field's height (whatever that computes to), so its button sits inline and
+   the same height as the input — and centres the compact × in the enabled
+   state instead of pinning it to the top. */
+.domain-header [data-official-action] {
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Re-enable action (shown when the official catalog is hidden). A clear
+   accent-tinted, accent-bordered button with a hover state so it reads as
+   clickable — the generic .btn-secondary loses its themed polish outside
+   .config-actions and rendered as a flat, greyed-out pill. Fills the row
+   height (100% of the stretched column) to line up with the URL field. */
+.catalog-reenable-btn {
+  height: 100%;
+  padding: 0 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(var(--accent-rgb), 0.55);
+  background: rgba(var(--accent-rgb), 0.16);
+  color: var(--accent);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+}
+.catalog-reenable-btn:hover {
+  background: rgba(var(--accent-rgb), 0.26);
+  border-color: var(--accent);
+}
+.catalog-reenable-btn:active { transform: translateY(1px); }
+
 /* Responsive column counts — colocated here (and not in style.css)
    because the base 3-column rule above loads later than style.css,
    so the unscoped base would otherwise win the cascade against the