diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fe22835..07e4b7b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -772,6 +772,14 @@ export default function App() {
     }
   }
 
+  function onResourceCardKeyDown(event: KeyboardEvent<HTMLElement>, onActivate: () => void) {
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return
+    }
+    event.preventDefault()
+    onActivate()
+  }
+
   async function onSavePrefs(event: FormEvent) {
     event.preventDefault()
     setPrefsStatus(i18n.t('messages.saving'))
@@ -1375,11 +1383,13 @@ export default function App() {
                   </article>
                 ) : null}
                 {filteredProviders.map((provider) => (
-                  <button
+                  <article
                     key={provider.id}
-                    type="button"
                     className={`resource-card ${providerDetailOpen && selectedProviderId === provider.id ? 'active' : ''}`}
+                    role="button"
+                    tabIndex={0}
                     onClick={() => onEditProvider(provider)}
+                    onKeyDown={(event) => onResourceCardKeyDown(event, () => onEditProvider(provider))}
                   >
                     <div className="resource-card-top">
                       <div className="resource-card-heading">
@@ -1409,7 +1419,7 @@ export default function App() {
                         <span className="resource-meta-value">{provider.apiKeyMasked || t('providers.apiKeyNotSet')}</span>
                       </div>
                     </div>
-                  </button>
+                  </article>
                 ))}
               </div>
             </article>
@@ -1490,11 +1500,13 @@ export default function App() {
                   </article>
                 ) : null}
                 {filteredAliases.map((alias) => (
-                  <button
+                  <article
                     key={alias.alias}
-                    type="button"
                     className={`resource-card ${aliasDetailOpen && selectedAliasId === alias.alias ? 'active' : ''}`}
+                    role="button"
+                    tabIndex={0}
                     onClick={() => onEditAlias(alias)}
+                    onKeyDown={(event) => onResourceCardKeyDown(event, () => onEditAlias(alias))}
                   >
                     <div className="resource-card-top">
                       <div className="resource-card-heading">
@@ -1530,7 +1542,7 @@ export default function App() {
                         </span>
                       </div>
                     </div>
-                  </button>
+                  </article>
                 ))}
               </div>
             </article>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6d11078..182de63 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -845,12 +845,16 @@ html[data-theme='dark'] button.ghost-danger:hover {
   display: grid;
   gap: 0.88rem;
   width: 100%;
+  min-height: auto;
+  height: auto;
   padding: 1rem 1.05rem;
   border: 1px solid var(--border);
   border-radius: 20px;
   background: var(--panel);
   text-align: left;
   box-shadow: none;
+  align-content: start;
+  overflow: visible;
   transition:
     border-color 160ms ease,
     background 160ms ease,
@@ -858,6 +862,15 @@ html[data-theme='dark'] button.ghost-danger:hover {
     transform 160ms ease;
 }
 
+.resource-card[role='button'] {
+  cursor: pointer;
+}
+
+.resource-card[role='button']:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 .resource-card:hover {
   border-color: var(--border-strong);
   box-shadow: var(--shadow-md);
@@ -934,6 +947,7 @@ html[data-theme='dark'] button.ghost-danger:hover {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.7rem;
+  align-items: stretch;
 }
 
 .resource-meta-item {