diff --git a/packages/web/src/components/modals/ConnectedInstances.tsx b/packages/web/src/components/modals/ConnectedInstances.tsx
index 5c4860d9..03dcd18f 100644
--- a/packages/web/src/components/modals/ConnectedInstances.tsx
+++ b/packages/web/src/components/modals/ConnectedInstances.tsx
@@ -381,12 +381,13 @@ export function ConnectedInstances() {
   const [showAddForm, setShowAddForm] = useState(false);
 
   return (
-    <div className="border-t border-white/[0.06] pt-4">
-      <h3 className="text-xs font-bold text-txt-secondary uppercase mb-3">
+    <div>
+      <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
         Connected Instances
-      </h3>
+      </div>
+      <p className="text-xs text-txt-tertiary mb-2">Link accounts across federated Backspace instances.</p>
 
-      <div className="space-y-2">
+      <div className="rounded-lg bg-white/[0.02] p-3 space-y-2">
         {/* Home instance (always shown, non-removable) */}
         <div className="flex items-center justify-between p-3 bg-surface-channel rounded-lg">
           <div className="flex items-center gap-2 min-w-0">
diff --git a/packages/web/src/components/modals/SpaceSettings.tsx b/packages/web/src/components/modals/SpaceSettings.tsx
index 1003d9da..39216545 100644
--- a/packages/web/src/components/modals/SpaceSettings.tsx
+++ b/packages/web/src/components/modals/SpaceSettings.tsx
@@ -84,107 +84,121 @@ function StreamingLimitsPanel() {
   const pillOff = 'bg-surface-elevated text-txt-secondary hover:bg-interactive-hover';
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-5">
       <div className="text-xs text-txt-tertiary">
         These limits apply to all users on this instance. Users can pick values within these bounds.
       </div>
 
-      {/* Bitrate Range */}
+      {/* Bandwidth */}
       <div>
-        <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-2">
-          Bitrate Range
-        </div>
-        <div className="flex items-center gap-3">
-          <div className="flex-1">
-            <label className="text-[11px] text-txt-tertiary mb-1 block">Min</label>
-            <input
-              type="range"
-              min={100}
-              max={draft.maxBitrateKbps - 500}
-              step={100}
-              value={draft.minBitrateKbps}
-              onChange={(e) => setDraft({ ...draft, minBitrateKbps: Number(e.target.value) })}
-              className="w-full h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
-                [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
-                [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
-                [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0"
-            />
-            <div className="text-[11px] text-txt-secondary mt-0.5">{formatKbps(draft.minBitrateKbps)}</div>
+        <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Bandwidth</div>
+        <p className="text-xs text-txt-tertiary mb-2">Minimum and maximum bitrate bounds, and the step size for the quality slider.</p>
+        <div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
+          {/* Bitrate Range */}
+          <div>
+            <div className="text-xs text-txt-secondary mb-1.5">
+              Bitrate Range
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="flex-1">
+                <label className="text-[11px] text-txt-tertiary mb-1 block">Min</label>
+                <input
+                  type="range"
+                  min={100}
+                  max={draft.maxBitrateKbps - 500}
+                  step={100}
+                  value={draft.minBitrateKbps}
+                  onChange={(e) => setDraft({ ...draft, minBitrateKbps: Number(e.target.value) })}
+                  className="w-full h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
+                    [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
+                    [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
+                    [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0"
+                />
+                <div className="text-[11px] text-txt-secondary mt-0.5">{formatKbps(draft.minBitrateKbps)}</div>
+              </div>
+              <div className="flex-1">
+                <label className="text-[11px] text-txt-tertiary mb-1 block">Max</label>
+                <input
+                  type="range"
+                  min={draft.minBitrateKbps + 500}
+                  max={50000}
+                  step={500}
+                  value={draft.maxBitrateKbps}
+                  onChange={(e) => setDraft({ ...draft, maxBitrateKbps: Number(e.target.value) })}
+                  className="w-full h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
+                    [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
+                    [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
+                    [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0"
+                />
+                <div className="text-[11px] text-txt-secondary mt-0.5">{formatKbps(draft.maxBitrateKbps)}</div>
+              </div>
+            </div>
           </div>
-          <div className="flex-1">
-            <label className="text-[11px] text-txt-tertiary mb-1 block">Max</label>
-            <input
-              type="range"
-              min={draft.minBitrateKbps + 500}
-              max={50000}
-              step={500}
-              value={draft.maxBitrateKbps}
-              onChange={(e) => setDraft({ ...draft, maxBitrateKbps: Number(e.target.value) })}
-              className="w-full h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
-                [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
-                [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
-                [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0"
-            />
-            <div className="text-[11px] text-txt-secondary mt-0.5">{formatKbps(draft.maxBitrateKbps)}</div>
+
+          {/* Bitrate Step */}
+          <div>
+            <div className="text-xs text-txt-secondary mb-1.5">
+              Slider Step
+            </div>
+            <div className="flex items-center gap-2">
+              <input
+                type="number"
+                min={50}
+                max={5000}
+                step={50}
+                value={draft.bitrateStepKbps}
+                onChange={(e) => {
+                  const v = Number(e.target.value);
+                  if (v >= 50 && v <= 5000) setDraft({ ...draft, bitrateStepKbps: v });
+                }}
+                className="w-24 px-2 py-1 bg-surface-input rounded text-sm text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary"
+              />
+              <span className="text-[12px] text-txt-tertiary">kbps</span>
+            </div>
           </div>
         </div>
       </div>
 
-      {/* Bitrate Step */}
+      {/* Quality */}
       <div>
-        <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
-          Slider Step
-        </div>
-        <div className="flex items-center gap-2">
-          <input
-            type="number"
-            min={50}
-            max={5000}
-            step={50}
-            value={draft.bitrateStepKbps}
-            onChange={(e) => {
-              const v = Number(e.target.value);
-              if (v >= 50 && v <= 5000) setDraft({ ...draft, bitrateStepKbps: v });
-            }}
-            className="w-24 px-2 py-1 bg-surface-input rounded text-sm text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary"
-          />
-          <span className="text-[12px] text-txt-tertiary">kbps</span>
-        </div>
-      </div>
+        <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Quality</div>
+        <p className="text-xs text-txt-tertiary mb-2">Available resolution and frame rate options for screen sharing.</p>
+        <div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
+          {/* Allowed Resolutions */}
+          <div>
+            <div className="text-xs text-txt-secondary mb-1.5">
+              Allowed Resolutions
+            </div>
+            <div className="flex gap-1.5">
+              {VALID_RESOLUTIONS.map((res) => (
+                <button
+                  key={res}
+                  onClick={() => toggleResolution(res)}
+                  className={`${pillBase} ${draft.allowedResolutions.includes(res) ? pillOn : pillOff}`}
+                >
+                  {res}p
+                </button>
+              ))}
+            </div>
+          </div>
 
-      {/* Allowed Resolutions */}
-      <div>
-        <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
-          Allowed Resolutions
-        </div>
-        <div className="flex gap-1.5">
-          {VALID_RESOLUTIONS.map((res) => (
-            <button
-              key={res}
-              onClick={() => toggleResolution(res)}
-              className={`${pillBase} ${draft.allowedResolutions.includes(res) ? pillOn : pillOff}`}
-            >
-              {res}p
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Allowed Frame Rates */}
-      <div>
-        <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
-          Allowed Frame Rates
-        </div>
-        <div className="flex gap-1.5">
-          {VALID_FRAMERATES.map((fps) => (
-            <button
-              key={fps}
-              onClick={() => toggleFramerate(fps)}
-              className={`${pillBase} ${draft.allowedFramerates.includes(fps) ? pillOn : pillOff}`}
-            >
-              {fps} fps
-            </button>
-          ))}
+          {/* Allowed Frame Rates */}
+          <div>
+            <div className="text-xs text-txt-secondary mb-1.5">
+              Allowed Frame Rates
+            </div>
+            <div className="flex gap-1.5">
+              {VALID_FRAMERATES.map((fps) => (
+                <button
+                  key={fps}
+                  onClick={() => toggleFramerate(fps)}
+                  className={`${pillBase} ${draft.allowedFramerates.includes(fps) ? pillOn : pillOff}`}
+                >
+                  {fps} fps
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
 
@@ -276,7 +290,7 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
   ];
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-5">
       {!discoveryEnabled && (
         <div className="p-2.5 bg-accent-amber/10 border border-accent-amber/30 rounded text-[13px] text-accent-amber">
           Space discovery is disabled by the instance administrator. Changing visibility will have no effect until discovery is re-enabled.
@@ -284,48 +298,50 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
       )}
 
       <div>
-        <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-2">
-          Visibility
-        </div>
-        <div className="space-y-1.5">
-          {visibilityOptions.map((opt) => (
-            <label
-              key={opt.value}
-              className={`flex items-start gap-3 p-2.5 rounded cursor-pointer transition-colors ${
-                visibility === opt.value
-                  ? 'bg-interactive-selected'
-                  : 'hover:bg-interactive-hover'
-              }`}
-            >
-              <input
-                type="radio"
-                name="visibility"
-                value={opt.value}
-                checked={visibility === opt.value}
-                onChange={() => setVisibility(opt.value)}
-                className="mt-0.5 accent-accent-primary"
-              />
-              <div>
-                <div className="text-sm font-medium text-txt-primary">{opt.label}</div>
-                <div className="text-xs text-txt-tertiary">{opt.desc}</div>
-              </div>
-            </label>
-          ))}
+        <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Visibility</div>
+        <p className="text-xs text-txt-tertiary mb-2">Control who can discover and join this space.</p>
+        <div className="rounded-lg bg-white/[0.02] p-3.5">
+          <div className="space-y-1.5">
+            {visibilityOptions.map((opt) => (
+              <label
+                key={opt.value}
+                className={`flex items-start gap-3 p-2.5 rounded cursor-pointer transition-colors ${
+                  visibility === opt.value
+                    ? 'bg-interactive-selected'
+                    : 'hover:bg-interactive-hover'
+                }`}
+              >
+                <input
+                  type="radio"
+                  name="visibility"
+                  value={opt.value}
+                  checked={visibility === opt.value}
+                  onChange={() => setVisibility(opt.value)}
+                  className="mt-0.5 accent-accent-primary"
+                />
+                <div>
+                  <div className="text-sm font-medium text-txt-primary">{opt.label}</div>
+                  <div className="text-xs text-txt-tertiary">{opt.desc}</div>
+                </div>
+              </label>
+            ))}
+          </div>
         </div>
       </div>
 
       <div>
-        <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
-          Description
+        <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Description</div>
+        <p className="text-xs text-txt-tertiary mb-2">A short summary shown on the Explore page.</p>
+        <div className="rounded-lg bg-white/[0.02] p-3.5">
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value.slice(0, 200))}
+            placeholder="A short description for the Explore page..."
+            rows={3}
+            className="w-full px-3 py-2 bg-surface-input rounded text-sm text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary resize-none placeholder:text-txt-tertiary"
+          />
+          <div className="text-[11px] text-txt-tertiary text-right">{description.length}/200</div>
         </div>
-        <textarea
-          value={description}
-          onChange={(e) => setDescription(e.target.value.slice(0, 200))}
-          placeholder="A short description for the Explore page..."
-          rows={3}
-          className="w-full px-3 py-2 bg-surface-input rounded text-sm text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary resize-none placeholder:text-txt-tertiary"
-        />
-        <div className="text-[11px] text-txt-tertiary text-right">{description.length}/200</div>
       </div>
 
       {saveError && (
@@ -334,6 +350,12 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
       {saveSuccess && (
         <div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Settings saved</div>
       )}
+
+      {/* Pending Join Requests — only shown when visibility is 'request' */}
+      {(visibility === 'request' || (space.visibility as SpaceVisibility) === 'request') && (
+        <JoinRequestsSection spaceId={spaceId} />
+      )}
+
       {hasChanges && (
         <div className="sticky bottom-0 z-10 pointer-events-none">
           <div className="flex justify-center pt-3 pb-1">
@@ -355,11 +377,6 @@ function DiscoveryPanel({ spaceId }: { spaceId: string }) {
           </div>
         </div>
       )}
-
-      {/* Pending Join Requests — only shown when visibility is 'request' */}
-      {(visibility === 'request' || (space.visibility as SpaceVisibility) === 'request') && (
-        <JoinRequestsSection spaceId={spaceId} />
-      )}
     </div>
   );
 }
@@ -493,9 +510,9 @@ export function SpaceSettingsModal() {
 
   return (
     <Modal isOpen={isOpen} onClose={closeModal} title="Space Settings" maxWidth="max-w-xl">
-      <div className="flex gap-4">
+      <div className="flex gap-4 h-[min(460px,65vh)]">
         {/* Tabs */}
-        <div className="w-32 flex-shrink-0 sticky top-0 self-start z-10">
+        <div className="w-32 flex-shrink-0 self-start z-10">
           <div className="glass-bubble rounded-lg p-1.5 space-y-0.5">
             <button onClick={() => setTab('overview')} className={tabClass('overview')}>
               Overview
@@ -522,7 +539,7 @@ export function SpaceSettingsModal() {
         </div>
 
         {/* Content */}
-        <div className="flex-1 min-w-0">
+        <div className="flex-1 min-w-0 overflow-y-auto scrollbar-thin">
           {tab === 'overview' && <OverviewPanel spaceId={currentSpaceId} />}
           {tab === 'discovery' && canManageSpace && <DiscoveryPanel spaceId={currentSpaceId} />}
           {tab === 'members' && <MembersPanel spaceId={currentSpaceId} />}
diff --git a/packages/web/src/components/modals/UserSettings.tsx b/packages/web/src/components/modals/UserSettings.tsx
index 651ee3f7..6d22d711 100644
--- a/packages/web/src/components/modals/UserSettings.tsx
+++ b/packages/web/src/components/modals/UserSettings.tsx
@@ -57,7 +57,7 @@ export function UserSettingsModal() {
 
   return (
     <Modal isOpen={isOpen} onClose={closeModal} title="User Settings" maxWidth="max-w-lg">
-      <div className="space-y-6">
+      <div className="space-y-5">
         {/* Profile preview */}
         <div className="flex items-center gap-4 p-4 bg-surface-channel rounded-lg">
           <Avatar
@@ -83,89 +83,96 @@ export function UserSettingsModal() {
           <div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">{success}</div>
         )}
 
+        {/* Profile section card */}
         <div>
-          <label className="block text-xs font-bold text-txt-secondary uppercase mb-2">
-            Status
-          </label>
-          <select
-            value={status}
-            onChange={(e) => setStatus(e.target.value as any)}
-            className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary appearance-none"
-          >
-            <option value="online">Online</option>
-            <option value="idle">Idle</option>
-            <option value="dnd">Do Not Disturb</option>
-          </select>
+          <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Profile</div>
+          <div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
+            <div>
+              <label className="block text-xs text-txt-secondary mb-1.5">
+                Status
+              </label>
+              <select
+                value={status}
+                onChange={(e) => setStatus(e.target.value as any)}
+                className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary appearance-none"
+              >
+                <option value="online">Online</option>
+                <option value="idle">Idle</option>
+                <option value="dnd">Do Not Disturb</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-xs text-txt-secondary mb-1.5">
+                Display Name
+              </label>
+              <input
+                type="text"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs text-txt-secondary mb-1.5">
+                Custom Status
+              </label>
+              <input
+                type="text"
+                value={customStatus}
+                onChange={(e) => setCustomStatus(e.target.value)}
+                className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary"
+                placeholder="What are you up to?"
+              />
+            </div>
+          </div>
         </div>
 
+        {/* Voice Processing section card */}
         <div>
-          <label className="block text-xs font-bold text-txt-secondary uppercase mb-2">
-            Display Name
-          </label>
-          <input
-            type="text"
-            value={displayName}
-            onChange={(e) => setDisplayName(e.target.value)}
-            className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary"
-          />
-        </div>
-
-        <div>
-          <label className="block text-xs font-bold text-txt-secondary uppercase mb-2">
-            Custom Status
-          </label>
-          <input
-            type="text"
-            value={customStatus}
-            onChange={(e) => setCustomStatus(e.target.value)}
-            className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary"
-            placeholder="What are you up to?"
-          />
-        </div>
-
-        {/* Voice Processing */}
-        <div className="border-t border-white/[0.06] pt-4">
-          <h3 className="text-xs font-bold text-txt-secondary uppercase mb-3">
+          <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
             Voice Processing
-          </h3>
-
-          <div className="flex items-center justify-between py-2">
-            <div>
-              <div className="text-sm text-txt-primary">AI Noise Suppression</div>
-              <div className="text-xs text-txt-tertiary">ML-based noise removal (RNNoise) — filters keyboard, fans, and background noise</div>
-            </div>
-            <button
-              onClick={() => setRnnoiseEnabled(!rnnoiseEnabled)}
-              className={`relative w-10 h-5 rounded-full transition-colors ${rnnoiseEnabled ? 'bg-status-online' : 'bg-surface-input'}`}
-            >
-              <div className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${rnnoiseEnabled ? 'translate-x-5' : 'translate-x-0'}`} />
-            </button>
           </div>
-
-          <div className="flex items-center justify-between py-2">
-            <div>
-              <div className="text-sm text-txt-primary">Echo Cancellation</div>
-              <div className="text-xs text-txt-tertiary">Removes echo when using speakers</div>
+          <div className="rounded-lg bg-white/[0.02] p-3.5">
+            <div className="flex items-center justify-between py-2">
+              <div>
+                <div className="text-sm text-txt-primary">AI Noise Suppression</div>
+                <div className="text-xs text-txt-tertiary">ML-based noise removal (RNNoise) — filters keyboard, fans, and background noise</div>
+              </div>
+              <button
+                onClick={() => setRnnoiseEnabled(!rnnoiseEnabled)}
+                className={`relative w-10 h-5 rounded-full transition-colors ${rnnoiseEnabled ? 'bg-status-online' : 'bg-surface-input'}`}
+              >
+                <div className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${rnnoiseEnabled ? 'translate-x-5' : 'translate-x-0'}`} />
+              </button>
             </div>
-            <button
-              onClick={() => setEchoCancellation(!echoCancellation)}
-              className={`relative w-10 h-5 rounded-full transition-colors ${echoCancellation ? 'bg-status-online' : 'bg-surface-input'}`}
-            >
-              <div className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${echoCancellation ? 'translate-x-5' : 'translate-x-0'}`} />
-            </button>
-          </div>
 
-          <div className="flex items-center justify-between py-2">
-            <div>
-              <div className="text-sm text-txt-primary">Auto Gain Control</div>
-              <div className="text-xs text-txt-tertiary">Auto-adjusts mic volume — can cause voice ducking during streams</div>
+            <div className="flex items-center justify-between py-2">
+              <div>
+                <div className="text-sm text-txt-primary">Echo Cancellation</div>
+                <div className="text-xs text-txt-tertiary">Removes echo when using speakers</div>
+              </div>
+              <button
+                onClick={() => setEchoCancellation(!echoCancellation)}
+                className={`relative w-10 h-5 rounded-full transition-colors ${echoCancellation ? 'bg-status-online' : 'bg-surface-input'}`}
+              >
+                <div className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${echoCancellation ? 'translate-x-5' : 'translate-x-0'}`} />
+              </button>
+            </div>
+
+            <div className="flex items-center justify-between py-2">
+              <div>
+                <div className="text-sm text-txt-primary">Auto Gain Control</div>
+                <div className="text-xs text-txt-tertiary">Auto-adjusts mic volume — can cause voice ducking during streams</div>
+              </div>
+              <button
+                onClick={() => setAutoGainControl(!autoGainControl)}
+                className={`relative w-10 h-5 rounded-full transition-colors ${autoGainControl ? 'bg-status-online' : 'bg-surface-input'}`}
+              >
+                <div className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${autoGainControl ? 'translate-x-5' : 'translate-x-0'}`} />
+              </button>
             </div>
-            <button
-              onClick={() => setAutoGainControl(!autoGainControl)}
-              className={`relative w-10 h-5 rounded-full transition-colors ${autoGainControl ? 'bg-status-online' : 'bg-surface-input'}`}
-            >
-              <div className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${autoGainControl ? 'translate-x-5' : 'translate-x-0'}`} />
-            </button>
           </div>
         </div>
 
diff --git a/packages/web/src/components/modals/spaceSettingsPanels/MembersPanel.tsx b/packages/web/src/components/modals/spaceSettingsPanels/MembersPanel.tsx
index d8079be5..0d5ff8b6 100644
--- a/packages/web/src/components/modals/spaceSettingsPanels/MembersPanel.tsx
+++ b/packages/web/src/components/modals/spaceSettingsPanels/MembersPanel.tsx
@@ -24,6 +24,7 @@ export function MembersPanel({ spaceId }: MembersPanelProps) {
   const canKick = hasPermissionBit(myPerms, PermissionBits.KICK_MEMBERS);
 
   const [pendingRoleChanges, setPendingRoleChanges] = useState<Map<string, Set<string>>>(new Map());
+  const [expandedMemberId, setExpandedMemberId] = useState<string | null>(null);
   const [error, setError] = useState('');
 
   // Assignable roles: exclude @everyone (where role.id === spaceId)
@@ -57,6 +58,7 @@ export function MembersPanel({ spaceId }: MembersPanelProps) {
         next.delete(userId);
         return next;
       });
+      setExpandedMemberId(null);
       await loadSpaceDetail(spaceId);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to update roles');
@@ -80,105 +82,139 @@ export function MembersPanel({ spaceId }: MembersPanelProps) {
     }
   };
 
-  return (
-    <div>
-      {error && (
-        <div className="mb-3 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
-      )}
-      <div className="space-y-2 max-h-[400px] overflow-y-auto scrollbar-thin">
-        {members.map((member) => {
-          const displayName = member.user.displayName ?? member.user.username;
-          const isOwner = member.userId === space.ownerId;
-          const memberRoleIds = getMemberRoleIds(member);
-          const hasPendingChanges = pendingRoleChanges.has(member.userId);
+  const canExpandMember = (member: MemberWithUser) =>
+    canManageRoles && member.userId !== currentUser?.id && member.userId !== space.ownerId && assignableRoles.length > 0;
 
-          return (
-            <div key={member.userId} className="p-2 rounded hover:bg-interactive-hover">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <Avatar
-                    src={member.user.avatar}
-                    name={displayName}
-                    size={32}
-                    status={member.user.status}
-                    user={member.user}
-                  />
-                  <div>
-                    <div className="text-sm font-medium">{displayName}</div>
-                    <div className="flex items-center gap-1 flex-wrap">
-                      {isOwner && (
-                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-accent-rose/20 text-txt-danger font-medium">
-                          Owner
-                        </span>
-                      )}
-                      {member.roles?.filter((r) => r.id !== spaceId).map((r) => (
-                        <span
-                          key={r.id}
-                          className="text-[10px] px-1.5 py-0.5 rounded font-medium"
-                          style={{ backgroundColor: `${r.color}20`, color: r.color }}
+  return (
+    <div className="space-y-4">
+      {error && (
+        <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
+      )}
+      <p className="text-xs text-txt-tertiary">Manage members of this space. Click a member to edit their roles.</p>
+
+      <div>
+        <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
+          Members ({members.length})
+        </div>
+        <div className="rounded-lg bg-white/[0.02] p-2">
+          <div className="space-y-0.5">
+            {members.map((member) => {
+              const displayName = member.user.displayName ?? member.user.username;
+              const isOwner = member.userId === space.ownerId;
+              const memberRoleIds = getMemberRoleIds(member);
+              const hasPendingChanges = pendingRoleChanges.has(member.userId);
+              const isExpanded = expandedMemberId === member.userId;
+              const expandable = canExpandMember(member);
+
+              return (
+                <div key={member.userId}>
+                  <div
+                    className={`flex items-center justify-between p-2 rounded transition-colors ${
+                      expandable ? 'cursor-pointer hover:bg-interactive-hover' : ''
+                    } ${isExpanded ? 'bg-interactive-hover' : ''}`}
+                    onClick={() => {
+                      if (expandable) {
+                        setExpandedMemberId(isExpanded ? null : member.userId);
+                      }
+                    }}
+                  >
+                    <div className="flex items-center gap-2 min-w-0">
+                      <Avatar
+                        src={member.user.avatar}
+                        name={displayName}
+                        size={32}
+                        status={member.user.status}
+                        user={member.user}
+                      />
+                      <div className="min-w-0">
+                        <div className="text-sm font-medium truncate">{displayName}</div>
+                        <div className="flex items-center gap-1 flex-wrap">
+                          {isOwner && (
+                            <span className="text-[10px] px-1.5 py-0.5 rounded bg-accent-rose/20 text-txt-danger font-medium">
+                              Owner
+                            </span>
+                          )}
+                          {member.roles?.filter((r) => r.id !== spaceId).map((r) => (
+                            <span
+                              key={r.id}
+                              className="text-[10px] px-1.5 py-0.5 rounded font-medium"
+                              style={{ backgroundColor: `${r.color}20`, color: r.color }}
+                            >
+                              {r.name}
+                            </span>
+                          ))}
+                          {!isOwner && (!member.roles || member.roles.filter((r) => r.id !== spaceId).length === 0) && (
+                            <span className="text-[10px] text-txt-tertiary">No roles</span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-1 flex-shrink-0">
+                      {canKick && member.userId !== currentUser?.id && !isOwner && (
+                        <button
+                          onClick={(e) => { e.stopPropagation(); handleKick(member.userId); }}
+                          className="px-2 py-1 text-xs text-txt-danger hover:bg-accent-rose/10 rounded transition-colors"
                         >
-                          {r.name}
-                        </span>
-                      ))}
-                      {!isOwner && (!member.roles || member.roles.filter((r) => r.id !== spaceId).length === 0) && (
-                        <span className="text-[10px] text-txt-tertiary">No roles</span>
+                          Kick
+                        </button>
+                      )}
+                      {expandable && (
+                        <svg
+                          className={`w-4 h-4 text-txt-tertiary transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          strokeWidth={2}
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                        </svg>
                       )}
                     </div>
                   </div>
-                </div>
 
-                {canKick && member.userId !== currentUser?.id && !isOwner && (
-                  <div className="flex items-center gap-2">
-                    <button
-                      onClick={() => handleKick(member.userId)}
-                      className="px-2 py-1 text-xs text-txt-danger hover:bg-accent-rose/10 rounded transition-colors"
-                    >
-                      Kick
-                    </button>
-                  </div>
-                )}
-              </div>
-
-              {/* Role checkboxes — shown for non-self, non-owner members when user can manage roles */}
-              {canManageRoles && member.userId !== currentUser?.id && !isOwner && assignableRoles.length > 0 && (
-                <div className="mt-2 ml-10 space-y-1">
-                  {assignableRoles.map((role) => (
-                    <label key={role.id} className="flex items-center gap-2 cursor-pointer group/role">
-                      <input
-                        type="checkbox"
-                        checked={memberRoleIds.has(role.id)}
-                        onChange={() => handleRoleToggle(member.userId, role.id, memberRoleIds)}
-                        className="w-3.5 h-3.5 rounded border-txt-tertiary accent-accent-primary"
-                      />
-                      <span
-                        className="text-xs font-medium"
-                        style={{ color: role.color !== '#9ca3af' ? role.color : undefined }}
-                      >
-                        {role.name}
-                      </span>
-                    </label>
-                  ))}
-                  {hasPendingChanges && (
-                    <div className="flex items-center gap-2 mt-1.5">
-                      <button
-                        onClick={() => handleSaveRoles(member.userId)}
-                        className="px-2 py-0.5 text-xs bg-accent-primary hover:bg-accent-primary/80 text-white rounded transition-colors"
-                      >
-                        Save
-                      </button>
-                      <button
-                        onClick={() => handleCancelRoleChange(member.userId)}
-                        className="px-2 py-0.5 text-xs text-txt-tertiary hover:text-txt-secondary transition-colors"
-                      >
-                        Cancel
-                      </button>
+                  {/* Role checkboxes — only shown when expanded */}
+                  {isExpanded && expandable && (
+                    <div className="mt-1 mb-1 ml-10 space-y-1">
+                      {assignableRoles.map((role) => (
+                        <label key={role.id} className="flex items-center gap-2 cursor-pointer group/role">
+                          <input
+                            type="checkbox"
+                            checked={memberRoleIds.has(role.id)}
+                            onChange={() => handleRoleToggle(member.userId, role.id, memberRoleIds)}
+                            className="w-3.5 h-3.5 rounded border-txt-tertiary accent-accent-primary"
+                          />
+                          <span
+                            className="text-xs font-medium"
+                            style={{ color: role.color !== '#9ca3af' ? role.color : undefined }}
+                          >
+                            {role.name}
+                          </span>
+                        </label>
+                      ))}
+                      {hasPendingChanges && (
+                        <div className="flex items-center gap-2 mt-1.5">
+                          <button
+                            onClick={() => handleSaveRoles(member.userId)}
+                            className="px-2 py-0.5 text-xs bg-accent-primary hover:bg-accent-primary/80 text-white rounded transition-colors"
+                          >
+                            Save
+                          </button>
+                          <button
+                            onClick={() => handleCancelRoleChange(member.userId)}
+                            className="px-2 py-0.5 text-xs text-txt-tertiary hover:text-txt-secondary transition-colors"
+                          >
+                            Cancel
+                          </button>
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>
-              )}
-            </div>
-          );
-        })}
+              );
+            })}
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx b/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx
index 1467bf47..5205b7bf 100644
--- a/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx
+++ b/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx
@@ -6,6 +6,7 @@ import { useAuthStore } from '../../../stores/authStore';
 import { useUIStore } from '../../../stores/uiStore';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../../../api/client';
+import { getApiForOrigin } from '../../../stores/spaceStore';
 import { hasPermissionBit, PermissionBits } from '../../../utils/permissions';
 
 interface OverviewPanelProps {
@@ -56,7 +57,9 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
   const hasIconChange = iconFilename !== null;
   const hasChanges = hasNameChange || hasIconChange;
 
-  const currentIconUrl = space.icon ? api.uploads.url(space.icon) : null;
+  const currentIconUrl = space.icon
+    ? (space.icon.startsWith('http') ? space.icon : api.uploads.url(space.icon))
+    : null;
 
   const handleIconSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -76,7 +79,8 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
     const file = new File([blob], 'icon.png', { type: 'image/png' });
     setUploadingIcon(true);
     try {
-      const attachment = await api.uploads.upload(file);
+      const spaceApi = getApiForOrigin(space._instanceOrigin);
+      const attachment = await spaceApi.uploads.upload(file);
       setIconFilename(attachment.filename);
     } catch {
       setSaveError('Failed to upload icon');
@@ -149,10 +153,14 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
 
   return (
     <>
-      <div className="space-y-4">
+      <div className="space-y-5">
+        {/* Space Identity */}
+        <div>
+          <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Space Identity</div>
+          <div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
         {/* Space Icon */}
         <div>
-          <label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
+          <label className="block text-xs text-txt-secondary mb-1.5">
             Space Icon
           </label>
           <div className="flex items-center gap-3">
@@ -209,7 +217,7 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
 
         {/* Space Name */}
         <div>
-          <label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
+          <label className="block text-xs text-txt-secondary mb-1.5">
             Space Name
           </label>
           <input
@@ -220,6 +228,8 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
             disabled={!canManageSpace}
           />
         </div>
+          </div>
+        </div>
 
         {/* Save / Discard */}
         {saveError && (
@@ -228,6 +238,22 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
         {saveSuccess && (
           <div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Settings saved</div>
         )}
+        {/* Danger Zone */}
+        {isOwner && (
+          <div>
+            <div className="text-[11px] font-semibold text-txt-danger uppercase tracking-wider mb-1.5">Danger Zone</div>
+            <div className="rounded-lg bg-white/[0.02] p-3.5">
+              <p className="text-xs text-txt-tertiary mb-3">Permanently delete this space and all its data. This cannot be undone.</p>
+              <button
+                onClick={handleDelete}
+                className="px-4 py-2 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors"
+              >
+                {confirmDelete ? 'Click again to confirm deletion' : 'Delete Space'}
+              </button>
+            </div>
+          </div>
+        )}
+
         {canManageSpace && hasChanges && (
           <div className="sticky bottom-0 z-10 pointer-events-none">
             <div className="flex justify-center pt-3 pb-1">
@@ -249,19 +275,6 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
             </div>
           </div>
         )}
-
-        {/* Danger Zone */}
-        {isOwner && (
-          <div className="pt-4 border-t border-border-soft">
-            <h3 className="text-sm font-bold text-txt-danger mb-2">Danger Zone</h3>
-            <button
-              onClick={handleDelete}
-              className="px-4 py-2 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors"
-            >
-              {confirmDelete ? 'Click again to confirm deletion' : 'Delete Space'}
-            </button>
-          </div>
-        )}
       </div>
 
       <ImageCropModal
diff --git a/packages/web/src/components/modals/spaceSettingsPanels/RolesPanel.tsx b/packages/web/src/components/modals/spaceSettingsPanels/RolesPanel.tsx
index 89719c0b..234e1e05 100644
--- a/packages/web/src/components/modals/spaceSettingsPanels/RolesPanel.tsx
+++ b/packages/web/src/components/modals/spaceSettingsPanels/RolesPanel.tsx
@@ -108,7 +108,7 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
   }
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-5">
       {error && (
         <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{error}</div>
       )}
@@ -127,36 +127,42 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
         </button>
       </div>
 
-      <div className="space-y-1">
-        {sortedRoles.map((role) => {
-          const isEveryone = role.id === spaceId;
-          return (
-            <button
-              key={role.id}
-              onClick={() => setEditingRoleId(role.id)}
-              className="w-full flex items-center justify-between px-3 py-2 rounded hover:bg-interactive-hover transition-colors text-left group"
-            >
-              <div className="flex items-center gap-2.5 min-w-0">
-                <div
-                  className="w-3 h-3 rounded-full flex-shrink-0"
-                  style={{ backgroundColor: role.color }}
-                />
-                <span className="text-sm text-txt-primary truncate">
-                  {isEveryone ? '@everyone' : role.name}
-                </span>
-              </div>
-              <svg
-                className="w-4 h-4 text-txt-tertiary group-hover:text-txt-secondary transition-colors flex-shrink-0"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-              </svg>
-            </button>
-          );
-        })}
+      <div>
+        <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Roles</div>
+        <p className="text-xs text-txt-tertiary mb-2">Roles define what permissions members have. Higher roles take priority.</p>
+        <div className="rounded-lg bg-white/[0.02] p-2">
+          <div className="space-y-0.5">
+            {sortedRoles.map((role) => {
+              const isEveryone = role.id === spaceId;
+              return (
+                <button
+                  key={role.id}
+                  onClick={() => setEditingRoleId(role.id)}
+                  className="w-full flex items-center justify-between px-3 py-2 rounded hover:bg-interactive-hover transition-colors text-left group"
+                >
+                  <div className="flex items-center gap-2.5 min-w-0">
+                    <div
+                      className="w-3 h-3 rounded-full flex-shrink-0"
+                      style={{ backgroundColor: role.color }}
+                    />
+                    <span className="text-sm text-txt-primary truncate">
+                      {isEveryone ? '@everyone' : role.name}
+                    </span>
+                  </div>
+                  <svg
+                    className="w-4 h-4 text-txt-tertiary group-hover:text-txt-secondary transition-colors flex-shrink-0"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+              );
+            })}
+          </div>
+        </div>
       </div>
     </div>
   );
@@ -190,12 +196,14 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
   const hasColorChange = !isEveryone && draftColor !== role.color;
   const hasPermChange = permissionsToString(draftPermissions) !== (role.permissions ?? '0');
   const hasChanges = hasNameChange || hasColorChange || hasPermChange;
+  const showPill = hasChanges || !isEveryone;
 
   const togglePermission = (bit: bigint) => {
     setDraftPermissions((prev) => (prev & bit) !== 0n ? prev & ~bit : prev | bit);
   };
 
   const handleSave = async () => {
+    setConfirmDelete(false);
     setSaving(true);
     setSaveError('');
     setSaveSuccess(false);
@@ -219,6 +227,7 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
     setDraftName(role.name);
     setDraftColor(role.color);
     setDraftPermissions(stringToPermissions(role.permissions));
+    setConfirmDelete(false);
     setSaveError('');
   };
 
@@ -242,7 +251,7 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-5">
       {/* Back button */}
       <div className="sticky top-0 z-10 pointer-events-none pb-3">
         <button
@@ -256,149 +265,153 @@ function RoleEditView({ role, spaceId, onBack, onDeleted }: RoleEditViewProps) {
         </button>
       </div>
 
-      {/* Role Name (not editable for @everyone) */}
+      {/* Identity card (Name + Color — not shown for @everyone) */}
       {!isEveryone && (
         <div>
-          <label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
-            Role Name
-          </label>
-          <input
-            type="text"
-            value={draftName}
-            onChange={(e) => setDraftName(e.target.value)}
-            className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary text-sm"
-          />
-        </div>
-      )}
-
-      {/* Role Color (not editable for @everyone) */}
-      {!isEveryone && (
-        <div>
-          <label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
-            Role Color
-          </label>
-          <div className="flex items-center gap-2 flex-wrap">
-            {PRESET_COLORS.map((c) => (
-              <button
-                key={c}
-                onClick={() => setDraftColor(c)}
-                className={`w-7 h-7 rounded-full border-2 transition-all ${
-                  draftColor === c ? 'border-white scale-110' : 'border-transparent hover:scale-105'
-                }`}
-                style={{ backgroundColor: c }}
-              />
-            ))}
-            <label className="relative w-7 h-7 rounded-full border-2 border-border-subtle hover:border-accent-primary transition-colors cursor-pointer overflow-hidden">
+          <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Identity</div>
+          <div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
+            <div>
+              <label className="block text-xs text-txt-secondary mb-1.5">
+                Role Name
+              </label>
               <input
-                type="color"
-                value={draftColor}
-                onChange={(e) => setDraftColor(e.target.value)}
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                type="text"
+                value={draftName}
+                onChange={(e) => setDraftName(e.target.value)}
+                className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary text-sm"
               />
-              <div className="w-full h-full rounded-full bg-gradient-to-br from-red-400 via-green-400 to-blue-400" />
-            </label>
-            <input
-              type="text"
-              value={draftColor}
-              onChange={(e) => {
-                const v = e.target.value;
-                if (/^#[0-9a-fA-F]{0,6}$/.test(v)) setDraftColor(v);
-              }}
-              className="w-20 px-2 py-1 bg-surface-input rounded text-xs text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary font-mono"
-              maxLength={7}
-            />
+            </div>
+            <div>
+              <label className="block text-xs text-txt-secondary mb-1.5">
+                Role Color
+              </label>
+              <div className="flex items-center gap-2 flex-wrap">
+                {PRESET_COLORS.map((c) => (
+                  <button
+                    key={c}
+                    onClick={() => setDraftColor(c)}
+                    className={`w-7 h-7 rounded-full border-2 transition-all ${
+                      draftColor === c ? 'border-white scale-110' : 'border-transparent hover:scale-105'
+                    }`}
+                    style={{ backgroundColor: c }}
+                  />
+                ))}
+                <label className="relative w-7 h-7 rounded-full border-2 border-border-subtle hover:border-accent-primary transition-colors cursor-pointer overflow-hidden">
+                  <input
+                    type="color"
+                    value={draftColor}
+                    onChange={(e) => setDraftColor(e.target.value)}
+                    className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                  />
+                  <div className="w-full h-full rounded-full bg-gradient-to-br from-red-400 via-green-400 to-blue-400" />
+                </label>
+                <input
+                  type="text"
+                  value={draftColor}
+                  onChange={(e) => {
+                    const v = e.target.value;
+                    if (/^#[0-9a-fA-F]{0,6}$/.test(v)) setDraftColor(v);
+                  }}
+                  className="w-20 px-2 py-1 bg-surface-input rounded text-xs text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary font-mono"
+                  maxLength={7}
+                />
+              </div>
+            </div>
           </div>
         </div>
       )}
 
-      {/* Permissions */}
-      <div>
-        <label className="block text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
-          Permissions
-        </label>
-        <div className="space-y-3">
-          {PERMISSION_GROUPS.map((group) => (
-            <div key={group.name}>
-              <div className="text-[11px] text-txt-tertiary font-medium mb-1.5 uppercase tracking-wider">
-                {group.name}
-              </div>
-              <div className="space-y-1">
-                {group.perms.map((perm) => {
-                  const isOn = (draftPermissions & perm.bit) !== 0n;
-                  const isAdmin = perm.bit === PermissionBits.ADMINISTRATOR;
-                  return (
-                    <label
-                      key={perm.label}
-                      className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-interactive-hover cursor-pointer group/perm"
+      {/* Permission groups — each gets its own section card */}
+      {PERMISSION_GROUPS.map((group) => (
+        <div key={group.name}>
+          <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
+            {group.name}
+          </div>
+          <div className="rounded-lg bg-white/[0.02] p-3.5">
+            <div className="space-y-1">
+              {group.perms.map((perm) => {
+                const isOn = (draftPermissions & perm.bit) !== 0n;
+                const isAdmin = perm.bit === PermissionBits.ADMINISTRATOR;
+                return (
+                  <label
+                    key={perm.label}
+                    className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-interactive-hover cursor-pointer group/perm"
+                  >
+                    <span className={`text-sm ${isAdmin ? 'text-txt-danger font-medium' : 'text-txt-primary'}`}>
+                      {perm.label}
+                    </span>
+                    <div
+                      onClick={(e) => {
+                        e.preventDefault();
+                        togglePermission(perm.bit);
+                      }}
+                      className={`relative w-9 h-5 rounded-full transition-colors cursor-pointer ${
+                        isOn ? 'bg-accent-primary' : 'bg-interactive-muted'
+                      }`}
                     >
-                      <span className={`text-sm ${isAdmin ? 'text-txt-danger font-medium' : 'text-txt-primary'}`}>
-                        {perm.label}
-                      </span>
                       <div
-                        onClick={(e) => {
-                          e.preventDefault();
-                          togglePermission(perm.bit);
-                        }}
-                        className={`relative w-9 h-5 rounded-full transition-colors cursor-pointer ${
-                          isOn ? 'bg-accent-primary' : 'bg-interactive-muted'
+                        className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform ${
+                          isOn ? 'translate-x-4' : 'translate-x-0.5'
                         }`}
-                      >
-                        <div
-                          className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform ${
-                            isOn ? 'translate-x-4' : 'translate-x-0.5'
-                          }`}
-                        />
-                      </div>
-                    </label>
-                  );
-                })}
-              </div>
+                      />
+                    </div>
+                  </label>
+                );
+              })}
             </div>
-          ))}
+          </div>
         </div>
-      </div>
+      ))}
 
-      {/* Save / Discard */}
       {saveError && (
         <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{saveError}</div>
       )}
       {saveSuccess && (
         <div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Role saved</div>
       )}
-      {hasChanges && (
+      {showPill && (
         <div className="sticky bottom-0 z-10 pointer-events-none">
           <div className="flex justify-center pt-3 pb-1">
-            <div className="glass-bubble rounded-full px-4 py-2 flex items-center gap-2 animate-slide-up pointer-events-auto">
-              <button
-                onClick={handleDiscard}
-                className="px-3 py-1 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
-              >
-                Discard
-              </button>
-              <button
-                onClick={handleSave}
-                disabled={saving || (!isEveryone && !draftName.trim())}
-                className="px-3 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-full transition-colors disabled:opacity-50"
-              >
-                {saving ? 'Saving...' : 'Save'}
-              </button>
+            <div className={`glass-bubble rounded-full px-4 py-2 flex items-center gap-2 pointer-events-auto${
+              isEveryone ? ' animate-slide-up' : ''
+            }`}>
+              {hasChanges && (
+                <>
+                  <button
+                    onClick={handleDiscard}
+                    className="px-3 py-1 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
+                  >
+                    Discard
+                  </button>
+                  <button
+                    onClick={handleSave}
+                    disabled={saving || (!isEveryone && !draftName.trim())}
+                    className="px-3 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-full transition-colors disabled:opacity-50"
+                  >
+                    {saving ? 'Saving...' : 'Save'}
+                  </button>
+                </>
+              )}
+              {!isEveryone && hasChanges && (
+                <div className="w-px h-5 bg-white/10" />
+              )}
+              {!isEveryone && (
+                <button
+                  onClick={handleDelete}
+                  disabled={deleting}
+                  className={`px-3 py-1.5 text-sm font-medium rounded-full transition-colors disabled:opacity-50 ${
+                    confirmDelete
+                      ? 'bg-accent-rose/15 text-accent-rose'
+                      : 'text-accent-rose hover:bg-accent-rose/10'
+                  }`}
+                >
+                  {deleting ? 'Deleting...' : confirmDelete ? 'Confirm?' : 'Delete Role'}
+                </button>
+              )}
             </div>
           </div>
         </div>
       )}
-
-      {/* Delete Role (not for @everyone) */}
-      {!isEveryone && (
-        <div className="pt-4 border-t border-border-soft">
-          <button
-            onClick={handleDelete}
-            disabled={deleting}
-            className="px-4 py-1.5 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
-          >
-            {deleting ? 'Deleting...' : confirmDelete ? 'Click again to confirm' : 'Delete Role'}
-          </button>
-        </div>
-      )}
     </div>
   );
 }
diff --git a/packages/web/src/stores/instanceStore.ts b/packages/web/src/stores/instanceStore.ts
index 20d92005..bdc81d2c 100644
--- a/packages/web/src/stores/instanceStore.ts
+++ b/packages/web/src/stores/instanceStore.ts
@@ -24,21 +24,39 @@ interface CachedInstanceToken {
   username: string;
 }
 
-const STORAGE_KEY = 'backspace_instances';
+const STORAGE_KEY_PREFIX = 'backspace_instances';
+const LEGACY_STORAGE_KEY = 'backspace_instances';
+
+function storageKey(userId: string): string {
+  return `${STORAGE_KEY_PREFIX}_${userId}`;
+}
 
 // ─── localStorage helpers ────────────────────────────────────────────────────
 
-function loadCachedTokens(): Record<string, CachedInstanceToken> {
+function loadCachedTokens(userId: string): Record<string, CachedInstanceToken> {
   try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return {};
-    return JSON.parse(raw) as Record<string, CachedInstanceToken>;
+    const scopedKey = storageKey(userId);
+    const raw = localStorage.getItem(scopedKey);
+    if (raw) {
+      return JSON.parse(raw) as Record<string, CachedInstanceToken>;
+    }
+
+    // One-time migration: adopt legacy unscoped key if it exists
+    const legacy = localStorage.getItem(LEGACY_STORAGE_KEY);
+    if (legacy) {
+      const parsed = JSON.parse(legacy) as Record<string, CachedInstanceToken>;
+      localStorage.setItem(scopedKey, legacy);
+      localStorage.removeItem(LEGACY_STORAGE_KEY);
+      return parsed;
+    }
+
+    return {};
   } catch {
     return {};
   }
 }
 
-function saveCachedTokens(instances: ConnectedInstance[]): void {
+function saveCachedTokens(instances: ConnectedInstance[], userId: string): void {
   const cache: Record<string, CachedInstanceToken> = {};
   for (const inst of instances) {
     // Skip tokenless placeholders — writing an empty token would cause
@@ -50,7 +68,7 @@ function saveCachedTokens(instances: ConnectedInstance[]): void {
       username: inst.username,
     };
   }
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
+  localStorage.setItem(storageKey(userId), JSON.stringify(cache));
 }
 
 // ─── Network error detection ────────────────────────────────────────────────
@@ -216,7 +234,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
 
       set((state) => {
         const updated = [...state.instances, instance];
-        saveCachedTokens(updated);
+        saveCachedTokens(updated, currentUser.id);
         return { instances: updated, isLoading: false };
       });
 
@@ -255,7 +273,8 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
 
       set((state) => {
         const updated = [...state.instances, instance];
-        saveCachedTokens(updated);
+        const userId = useAuthStore.getState().user?.id;
+        if (userId) saveCachedTokens(updated, userId);
         return { instances: updated, isLoading: false };
       });
 
@@ -284,7 +303,8 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
 
     set((state) => {
       const updated = state.instances.filter(i => i.origin !== origin);
-      saveCachedTokens(updated);
+      const userId = useAuthStore.getState().user?.id;
+      if (userId) saveCachedTokens(updated, userId);
       return { instances: updated };
     });
 
@@ -405,7 +425,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
       return;
     }
 
-    const cached = loadCachedTokens();
+    const cached = loadCachedTokens(currentUser.id);
 
     // Split server-known instances into two groups:
     // - withToken: have a cached token → attempt reconnection
@@ -543,7 +563,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
 
     // Save final state to localStorage — persist ALL instances regardless of status
     // so disconnected instances survive page reload and can auto-reconnect later
-    saveCachedTokens(get().instances);
+    saveCachedTokens(get().instances, currentUser.id);
 
     // Mark auto-connect complete so syncInstanceList is now safe to run
     set({ _autoConnectDone: true });
@@ -560,7 +580,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
     disconnectAllRemote();
 
     set({ instances: [], isLoading: false, error: null, _autoConnectDone: false });
-    localStorage.removeItem(STORAGE_KEY);
+    // Token cache preserved — scoped per user, survives logout for seamless reconnect
   },
 }));
 
diff --git a/packages/web/src/stores/spaceStore.ts b/packages/web/src/stores/spaceStore.ts
index 13417e4e..1e9d39b3 100644
--- a/packages/web/src/stores/spaceStore.ts
+++ b/packages/web/src/stores/spaceStore.ts
@@ -199,7 +199,14 @@ export const useSpaceStore = create<SpaceState>((set, get) => ({
   },
 
   updateSpace: async (spaceId: string, data: UpdateSpaceRequest) => {
-    const updated = await api.spaces.update(spaceId, data);
+    const space = get().spaces.find(s => s.id === spaceId);
+    const origin = space?._instanceOrigin ?? '';
+    const client = getApiForOrigin(origin);
+    const updated = await client.spaces.update(spaceId, data);
+    // Normalize remote asset URL so the icon displays correctly in-app
+    if (origin && updated.icon) {
+      updated.icon = resolveAssetUrl(updated.icon, origin) ?? updated.icon;
+    }
     set((state) => ({
       spaces: state.spaces.map(s => s.id === spaceId ? { ...s, ...updated } : s),
     }));