diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 5082bf2..1f8b6b6 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -468,7 +468,7 @@ function SshHostsSection() {
     setBusyFlag(key, true)
     try {
       const { config, secrets } = buildPayload(fieldsWithJumpHost(), values)
-      const name = values.host ? `SSH: ${values.host}` : 'SSH Host'
+      const name = values.__name?.trim() || (values.host ? `SSH: ${values.host}` : 'SSH Host')
       await api.createIntegration({ type: 'ssh', name, config, secrets })
       removeNewDraft(key)
       refresh()
@@ -598,11 +598,7 @@ function SshHostsSection() {
                     boxShadow: online ? '0 0 6px rgba(46,204,113,0.6)' : 'none',
                   }}
                 />
-                <input
-                  value={draft.__name ?? host.name}
-                  onChange={(e) => setDraftField(host.id, '__name', e.target.value)}
-                  style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600, backgroundColor: 'transparent', border: 'none', outline: 'none', padding: 0, width: '180px' }}
-                />
+                <span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>{draft.__name ?? host.name}</span>
               </div>
               <div className="flex items-center gap-2">
                 {statusMsg[host.id] && <span style={{ fontSize: '11px', color: '#7A7D85' }}>{statusMsg[host.id]}</span>}
@@ -633,6 +629,15 @@ function SshHostsSection() {
               </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"
+                />
+              </div>
               {renderFields(fieldsWithJumpHost(), draft, (k, v) => setDraftField(host.id, k, v), host.id, host, host.id)}
             </div>
           </div>
@@ -663,6 +668,15 @@ function SshHostsSection() {
             </div>
           </div>
           <div className="grid grid-cols-3 gap-4">
+            <div>
+              <label style={labelStyle}>Host Name</label>
+              <input
+                style={inputStyle}
+                value={d.values.__name ?? ''}
+                onChange={(e) => setNewDraftField(d.key, '__name', e.target.value)}
+                placeholder="SSH Host"
+              />
+            </div>
             {renderFields(fieldsWithJumpHost(), d.values, (k, v) => setNewDraftField(d.key, k, v), d.key, undefined)}
           </div>
         </div>