diff --git a/backend/Dockerfile b/backend/Dockerfile
index 76bbd15..a28ef01 100644
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -12,7 +12,9 @@ WORKDIR /app
 ENV NODE_ENV=production
 # Toolchain is needed again here: production deps are reinstalled fresh, and the
 # native modules (better-sqlite3, ssh2, node-pty) compile from source on install.
-RUN apk add --no-cache python3 make g++
+# openssh-client provides the `ssh` binary, which node-pty shells out to for
+# certificate-based auth (ssh2 has no OpenSSH certificate support).
+RUN apk add --no-cache python3 make g++ openssh-client
 COPY package.json package-lock.json* ./
 RUN npm install --omit=dev
 COPY --from=build /app/dist ./dist
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index a7dcfc0..073ee52 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -15,6 +15,8 @@ import {
   Upload,
   Trash2,
   Camera,
+  ChevronDown,
+  ChevronRight,
 } from 'lucide-react'
 
 const navSections = [
@@ -383,10 +385,20 @@ function SshHostsSection() {
   const [drafts, setDrafts] = useState<Record<number, Record<string, string>>>({})
   const [statusMsg, setStatusMsg] = useState<Record<number, string>>({})
   const [busy, setBusy] = useState<Set<number>>(new Set())
+  const [collapsed, setCollapsed] = useState<Set<number>>(new Set())
   const [newDrafts, setNewDrafts] = useState<{ key: number; values: Record<string, string> }[]>([])
   const nextNewKey = useRef(-1)
   const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({})
 
+  function toggleCollapsed(id: number) {
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
   useEffect(() => {
     refresh()
   }, [])
@@ -436,8 +448,8 @@ function SshHostsSection() {
     { key: 'sessionLogging', label: 'Record session to disk' },
   ]
 
-  function buildPayload(fields: FieldDef[], values: Record<string, string>) {
-    const config: Record<string, string> = {}
+  function buildPayload(fields: FieldDef[], values: Record<string, string>, existing?: Integration) {
+    const config: Record<string, string> = { ...(existing?.config ?? {}) }
     const secrets: Record<string, string> = {}
     for (const f of fields) {
       const value = values[f.key]
@@ -453,11 +465,12 @@ function SshHostsSection() {
     setStatusMsg((prev) => ({ ...prev, [host.id]: '' }))
     try {
       const draft = drafts[host.id] ?? {}
-      const { config, secrets } = buildPayload(fieldsWithJumpHost(), draft)
+      const { config, secrets } = buildPayload(fieldsWithJumpHost(), draft, host)
       const name = draft.__name?.trim()
       const { integration } = await api.updateIntegration(host.id, { ...(name ? { name } : {}), config, secrets })
       setHosts((prev) => (prev ?? []).map((h) => (h.id === integration.id ? integration : h)))
       setStatusMsg((prev) => ({ ...prev, [host.id]: 'Saved' }))
+      setCollapsed((prev) => new Set(prev).add(host.id))
     } catch (err) {
       setStatusMsg((prev) => ({ ...prev, [host.id]: err instanceof ApiError ? err.message : 'Save failed' }))
     } finally {
@@ -624,10 +637,17 @@ function SshHostsSection() {
       {hosts.map((host) => {
         const online = host.status === 'connected'
         const draft = drafts[host.id] ?? {}
+        const isCollapsed = collapsed.has(host.id)
         return (
           <div key={host.id} style={cardBase}>
-            <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
-              <div className="flex items-center gap-2.5">
+            <div className="flex items-center justify-between" style={{ marginBottom: isCollapsed ? 0 : '16px' }}>
+              <button
+                onClick={() => toggleCollapsed(host.id)}
+                className="flex items-center gap-2.5 cursor-pointer border-none bg-transparent"
+                style={{ padding: 0 }}
+                title={isCollapsed ? 'Expand' : 'Collapse'}
+              >
+                {isCollapsed ? <ChevronRight size={14} color="#7A7D85" /> : <ChevronDown size={14} color="#7A7D85" />}
                 <span
                   style={{
                     width: '8px',
@@ -638,17 +658,19 @@ function SshHostsSection() {
                   }}
                 />
                 <span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>{draft.__name ?? host.name}</span>
-              </div>
+              </button>
               <div className="flex items-center gap-2">
                 {statusMsg[host.id] && <span style={{ fontSize: '11px', color: '#7A7D85' }}>{statusMsg[host.id]}</span>}
-                <button
-                  onClick={() => handleSaveExisting(host)}
-                  disabled={busy.has(host.id)}
-                  className="cursor-pointer border-none"
-                  style={{ fontSize: '11px', fontWeight: 600, color: '#0A0B0D', backgroundColor: '#C8A434', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(host.id) ? 0.6 : 1 }}
-                >
-                  Save
-                </button>
+                {!isCollapsed && (
+                  <button
+                    onClick={() => handleSaveExisting(host)}
+                    disabled={busy.has(host.id)}
+                    className="cursor-pointer border-none"
+                    style={{ fontSize: '11px', fontWeight: 600, color: '#0A0B0D', backgroundColor: '#C8A434', borderRadius: '6px', padding: '6px 12px', opacity: busy.has(host.id) ? 0.6 : 1 }}
+                  >
+                    Save
+                  </button>
+                )}
                 <button
                   onClick={() => handleTest(host)}
                   disabled={busy.has(host.id)}
@@ -667,18 +689,20 @@ function SshHostsSection() {
                 </button>
               </div>
             </div>
-            <div className="grid grid-cols-3 gap-4">
-              <div>
-                <label style={labelStyle}>Host Name</label>
-                <input
-                  style={inputStyle}
-                  value={draft.__name ?? host.name}
-                  onChange={(e) => setDraftField(host.id, '__name', e.target.value)}
-                  placeholder="Not configured"
-                />
+            {!isCollapsed && (
+              <div className="grid grid-cols-3 gap-4" style={{ marginTop: '16px' }}>
+                <div>
+                  <label style={labelStyle}>Host Name</label>
+                  <input
+                    style={inputStyle}
+                    value={draft.__name ?? host.name}
+                    onChange={(e) => setDraftField(host.id, '__name', e.target.value)}
+                    placeholder="Not configured"
+                  />
+                </div>
+                {renderFields(fieldsWithJumpHost(), draft, (k, v) => setDraftField(host.id, k, v), host.id, host, host.id)}
               </div>
-              {renderFields(fieldsWithJumpHost(), draft, (k, v) => setDraftField(host.id, k, v), host.id, host, host.id)}
-            </div>
+            )}
           </div>
         )
       })}
@@ -782,8 +806,8 @@ function IntegrationsSection() {
     setNewDrafts((prev) => prev.filter((d) => d.id !== id))
   }
 
-  function buildPayload(def: (typeof integrationTypeDefs)[number], values: Record<string, string>) {
-    const config: Record<string, string> = {}
+  function buildPayload(def: (typeof integrationTypeDefs)[number], values: Record<string, string>, existing?: Integration) {
+    const config: Record<string, string> = { ...(existing?.config ?? {}) }
     const secrets: Record<string, string> = {}
     for (const f of def.fields) {
       const value = values[f.key]
@@ -799,7 +823,7 @@ function IntegrationsSection() {
     setBusyFlag(rowKey, true)
     setStatusMsg((prev) => ({ ...prev, [rowKey]: '' }))
     try {
-      const { config, secrets } = buildPayload(def, editDrafts[existing.id] ?? {})
+      const { config, secrets } = buildPayload(def, editDrafts[existing.id] ?? {}, existing)
       const name = editDrafts[existing.id]?.__name?.trim()
       const { integration } = await api.updateIntegration(existing.id, { ...(name ? { name } : {}), config, secrets })
       setIntegrations((prev) => (prev ?? []).map((i) => (i.id === integration.id ? integration : i)))