diff --git a/app/version.py b/app/version.py
index 445cb63..8b40c27 100644
--- a/app/version.py
+++ b/app/version.py
@@ -1,7 +1,7 @@
 """Central location for the application version string."""
 from __future__ import annotations
 
-APP_VERSION = "0.1.9"
+APP_VERSION = "0.2.0"
 
 
 def get_version() -> str:
diff --git a/static/css/main.css b/static/css/main.css
index 22c399c..81c5b3b 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -362,6 +362,68 @@ code {
 	color: #2563eb;
 }
 
+.docs-sidebar-mobile {
+	border-radius: 0.75rem;
+	border: 1px solid var(--myfsio-card-border);
+}
+
+.docs-sidebar-mobile .docs-toc {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem 1rem;
+	padding-top: 0.5rem;
+}
+
+.docs-sidebar-mobile .docs-toc li {
+	flex: 1 0 45%;
+}
+
+.min-width-0 {
+	min-width: 0;
+}
+
+/* Ensure pre blocks don't overflow on mobile */
+.alert pre {
+	max-width: 100%;
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+/* IAM User Cards */
+.iam-user-card {
+	border: 1px solid var(--myfsio-card-border);
+	border-radius: 0.75rem;
+	transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.iam-user-card:hover {
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+[data-theme='dark'] .iam-user-card:hover {
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.user-avatar-lg {
+	width: 48px;
+	height: 48px;
+	border-radius: 12px;
+}
+
+.btn-icon {
+	padding: 0.25rem;
+	line-height: 1;
+	border: none;
+	background: transparent;
+	color: var(--myfsio-muted);
+	border-radius: 0.375rem;
+}
+
+.btn-icon:hover {
+	background: var(--myfsio-hover-bg);
+	color: var(--myfsio-text);
+}
+
 .badge { 
 	font-weight: 500;
 	padding: 0.35em 0.65em;
diff --git a/templates/bucket_detail.html b/templates/bucket_detail.html
index f9832e1..e4a77d7 100644
--- a/templates/bucket_detail.html
+++ b/templates/bucket_detail.html
@@ -13,8 +13,7 @@
       <div class="d-flex align-items-center gap-3">
         <div class="bucket-icon" style="width: 48px; height: 48px; border-radius: 12px;">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
-            <path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
-            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5H11a.5.5 0 0 1 0 1h-1v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1H6v1a.5.5 0 0 1-1 0v-1H4a.5.5 0 0 1 0-1h1v-1H4a.5.5 0 0 1 0-1h1.5A1.5 1.5 0 0 1 7 10.5V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1zm5 7.5v1h3v-1a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5z"/>
+            <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
           </svg>
         </div>
         <div>
@@ -1784,6 +1783,91 @@
 
 {% block extra_scripts %}
 <script>
+  // Auto-indent for JSON textareas
+  function setupJsonAutoIndent(textarea) {
+    if (!textarea) return;
+
+    textarea.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+
+        const start = this.selectionStart;
+        const end = this.selectionEnd;
+        const value = this.value;
+
+        // Get the current line
+        const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+        const currentLine = value.substring(lineStart, start);
+
+        // Calculate base indentation (leading whitespace of current line)
+        const indentMatch = currentLine.match(/^(\s*)/);
+        let indent = indentMatch ? indentMatch[1] : '';
+
+        // Check if the line ends with { or [ (should increase indent)
+        const trimmedLine = currentLine.trim();
+        const lastChar = trimmedLine.slice(-1);
+
+        let newIndent = indent;
+        let insertAfter = '';
+
+        if (lastChar === '{' || lastChar === '[') {
+          // Add extra indentation
+          newIndent = indent + '  ';
+
+          // Check if we need to add closing bracket on new line
+          const charAfterCursor = value.substring(start, start + 1).trim();
+          if ((lastChar === '{' && charAfterCursor === '}') ||
+              (lastChar === '[' && charAfterCursor === ']')) {
+            insertAfter = '\n' + indent;
+          }
+        } else if (lastChar === ',' || lastChar === ':') {
+          // Keep same indentation for continuation
+          newIndent = indent;
+        }
+
+        // Insert newline with proper indentation
+        const insertion = '\n' + newIndent + insertAfter;
+        const newValue = value.substring(0, start) + insertion + value.substring(end);
+
+        this.value = newValue;
+
+        // Set cursor position after the indentation
+        const newCursorPos = start + 1 + newIndent.length;
+        this.selectionStart = this.selectionEnd = newCursorPos;
+
+        // Trigger input event for any listeners
+        this.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+
+      // Handle Tab key for indentation
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        const start = this.selectionStart;
+        const end = this.selectionEnd;
+
+        if (e.shiftKey) {
+          // Outdent: remove 2 spaces from start of line
+          const lineStart = this.value.lastIndexOf('\n', start - 1) + 1;
+          const lineContent = this.value.substring(lineStart, start);
+          if (lineContent.startsWith('  ')) {
+            this.value = this.value.substring(0, lineStart) +
+                         this.value.substring(lineStart + 2);
+            this.selectionStart = this.selectionEnd = Math.max(lineStart, start - 2);
+          }
+        } else {
+          // Indent: insert 2 spaces
+          this.value = this.value.substring(0, start) + '  ' + this.value.substring(end);
+          this.selectionStart = this.selectionEnd = start + 2;
+        }
+
+        this.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    });
+  }
+
+  // Apply auto-indent to policy editor textarea
+  setupJsonAutoIndent(document.getElementById('policyDocument'));
+
   const formatBytes = (bytes) => {
     if (!Number.isFinite(bytes)) return `${bytes} bytes`;
     const units = ['bytes', 'KB', 'MB', 'GB', 'TB'];
diff --git a/templates/buckets.html b/templates/buckets.html
index f997f1b..a635b4f 100644
--- a/templates/buckets.html
+++ b/templates/buckets.html
@@ -46,8 +46,7 @@
           <div class="d-flex align-items-center gap-3">
             <div class="bucket-icon">
               <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
-                <path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
-                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5H11a.5.5 0 0 1 0 1h-1v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1H6v1a.5.5 0 0 1-1 0v-1H4a.5.5 0 0 1 0-1h1v-1H4a.5.5 0 0 1 0-1h1.5A1.5 1.5 0 0 1 7 10.5V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1zm5 7.5v1h3v-1a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5z"/>
+                <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
               </svg>
             </div>
             <div>
diff --git a/templates/connections.html b/templates/connections.html
index 816fd9e..07c63c5 100644
--- a/templates/connections.html
+++ b/templates/connections.html
@@ -8,8 +8,8 @@
     <p class="text-uppercase text-muted small mb-1">Replication</p>
     <h1 class="h3 mb-1 d-flex align-items-center gap-2">
       <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
-        <path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
-        <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5H12a.5.5 0 0 1 0 1H4a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 7.5 10V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"/>
+        <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
+        <path d="M10.232 8.768l.546-.353a.25.25 0 0 0 0-.418l-.546-.354a.25.25 0 0 1-.116-.21V6.25a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25v1.183a.25.25 0 0 1-.116.21l-.546.354a.25.25 0 0 0 0 .418l.546.353a.25.25 0 0 1 .116.21v1.183a.25.25 0 0 0 .25.25h.5a.25.25 0 0 0 .25-.25V8.978a.25.25 0 0 1 .116-.21z"/>
       </svg>
       Remote Connections
     </h1>
@@ -124,8 +124,7 @@
                                     <div class="d-flex align-items-center gap-2">
                                         <div class="connection-icon">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                                <path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
-                                                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5H12a.5.5 0 0 1 0 1H4a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 7.5 10V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"/>
+                                                <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
                                             </svg>
                                         </div>
                                         <span class="fw-medium">{{ conn.name }}</span>
@@ -174,8 +173,7 @@
                 <div class="empty-state text-center py-5">
                     <div class="empty-state-icon mx-auto mb-3">
                         <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16">
-                            <path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
-                            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5H12a.5.5 0 0 1 0 1H4a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 7.5 10V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"/>
+                            <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
                         </svg>
                     </div>
                     <h5 class="fw-semibold mb-2">No connections yet</h5>
diff --git a/templates/docs.html b/templates/docs.html
index ddd9fa3..7dd5bd6 100644
--- a/templates/docs.html
+++ b/templates/docs.html
@@ -14,6 +14,36 @@
   </div>
 </section>
 <div class="row g-4">
+  <div class="col-12 d-xl-none">
+    <div class="card shadow-sm docs-sidebar-mobile mb-0">
+      <div class="card-body py-3">
+        <div class="d-flex align-items-center justify-content-between mb-2">
+          <h3 class="h6 text-uppercase text-muted mb-0">On this page</h3>
+          <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#mobileDocsToc" aria-expanded="false" aria-controls="mobileDocsToc">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="collapse" id="mobileDocsToc">
+          <ul class="list-unstyled docs-toc mb-0 small">
+            <li><a href="#setup">Set up &amp; run</a></li>
+            <li><a href="#background">Running in background</a></li>
+            <li><a href="#auth">Authentication &amp; IAM</a></li>
+            <li><a href="#console">Console tour</a></li>
+            <li><a href="#automation">Automation / CLI</a></li>
+            <li><a href="#api">REST endpoints</a></li>
+            <li><a href="#examples">API Examples</a></li>
+            <li><a href="#replication">Site Replication</a></li>
+            <li><a href="#versioning">Object Versioning</a></li>
+            <li><a href="#quotas">Bucket Quotas</a></li>
+            <li><a href="#encryption">Encryption</a></li>
+            <li><a href="#troubleshooting">Troubleshooting</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="col-xl-8">
     <article id="setup" class="card shadow-sm docs-section">
       <div class="card-body">
@@ -526,15 +556,46 @@ curl -X POST "{{ api_base }}/presign/mybucket/upload.bin" \
             </li>
         </ol>
 
-        <div class="alert alert-light border mb-0">
-            <div class="d-flex gap-2">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-terminal text-muted mt-1" viewBox="0 0 16 16">
+        <div class="alert alert-light border mb-3 overflow-hidden">
+            <div class="d-flex flex-column flex-sm-row gap-2 mb-2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-terminal text-muted mt-1 flex-shrink-0 d-none d-sm-block" viewBox="0 0 16 16">
                   <path d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9zM3.854 4.146a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2z"/>
                   <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12z"/>
                 </svg>
-                <div>
-                    <strong>Headless Target Setup?</strong>
-                    <p class="small text-muted mb-0">If your target server has no UI, use the Python API directly to bootstrap credentials. See <code>docs.md</code> in the project root for the <code>setup_target.py</code> script.</p>
+                <div class="flex-grow-1 min-width-0">
+                    <strong>Headless Target Setup</strong>
+                    <p class="small text-muted mb-2">If your target server has no UI, create a <code>setup_target.py</code> script to bootstrap credentials:</p>
+<pre class="mb-0 overflow-auto" style="max-width: 100%;"><code class="language-python"># setup_target.py
+from pathlib import Path
+from app.iam import IamService
+from app.storage import ObjectStorage
+
+# Initialize services (paths match default config)
+data_dir = Path("data")
+iam = IamService(data_dir / ".myfsio.sys" / "config" / "iam.json")
+storage = ObjectStorage(data_dir)
+
+# 1. Create the bucket
+bucket_name = "backup-bucket"
+try:
+    storage.create_bucket(bucket_name)
+    print(f"Bucket '{bucket_name}' created.")
+except Exception as e:
+    print(f"Bucket creation skipped: {e}")
+
+# 2. Create the user
+try:
+    creds = iam.create_user(
+        display_name="Replication User",
+        policies=[{"bucket": bucket_name, "actions": ["write", "read", "list"]}]
+    )
+    print("\n--- CREDENTIALS GENERATED ---")
+    print(f"Access Key: {creds['access_key']}")
+    print(f"Secret Key: {creds['secret_key']}")
+    print("-----------------------------")
+except Exception as e:
+    print(f"User creation failed: {e}")</code></pre>
+                    <p class="small text-muted mt-2 mb-0">Save and run: <code>python setup_target.py</code></p>
                 </div>
             </div>
         </div>
diff --git a/templates/iam.html b/templates/iam.html
index 2ebd4e8..612f47e 100644
--- a/templates/iam.html
+++ b/templates/iam.html
@@ -10,6 +10,7 @@
       </svg>
       IAM Configuration
     </h1>
+    <p class="text-muted mb-0 mt-1">Create and manage users with fine-grained bucket permissions.</p>
   </div>
   <div class="d-flex gap-2">
     {% if not iam_locked %}
@@ -109,35 +110,68 @@
   {% else %}
   <div class="card-body px-4 pb-4">
     {% if users %}
-    <div class="table-responsive">
-      <table class="table table-hover align-middle mb-0">
-        <thead class="table-light">
-          <tr>
-            <th scope="col">User</th>
-            <th scope="col">Policies</th>
-            <th scope="col" class="text-end">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for user in users %}
-          <tr>
-            <td>
+    <div class="row g-3">
+      {% for user in users %}
+      <div class="col-md-6 col-xl-4">
+        <div class="card h-100 iam-user-card">
+          <div class="card-body">
+            <div class="d-flex align-items-start justify-content-between mb-3">
               <div class="d-flex align-items-center gap-3">
-                <div class="user-avatar">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+                <div class="user-avatar user-avatar-lg">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
                     <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                   </svg>
                 </div>
-                <div>
-                  <div class="fw-medium">{{ user.display_name }}</div>
-                  <code class="small text-muted">{{ user.access_key }}</code>
+                <div class="min-width-0">
+                  <h6 class="fw-semibold mb-0 text-truncate" title="{{ user.display_name }}">{{ user.display_name }}</h6>
+                  <code class="small text-muted d-block text-truncate" title="{{ user.access_key }}">{{ user.access_key }}</code>
                 </div>
               </div>
-            </td>
-            <td>
+              <div class="dropdown">
+                <button class="btn btn-sm btn-icon" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+                  </svg>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                  <li>
+                    <button class="dropdown-item" type="button" data-edit-user="{{ user.access_key }}" data-display-name="{{ user.display_name }}">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5z"/>
+                      </svg>
+                      Edit Name
+                    </button>
+                  </li>
+                  <li>
+                    <button class="dropdown-item" type="button" data-rotate-user="{{ user.access_key }}">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                        <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
+                        <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
+                      </svg>
+                      Rotate Secret
+                    </button>
+                  </li>
+                  <li><hr class="dropdown-divider"></li>
+                  <li>
+                    <button class="dropdown-item text-danger" type="button" data-delete-user="{{ user.access_key }}">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                        <path d="M5.5 5.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm3 .5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0z"/>
+                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                      </svg>
+                      Delete User
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="mb-3">
+              <div class="small text-muted mb-2">Bucket Permissions</div>
               <div class="d-flex flex-wrap gap-1">
                 {% for policy in user.policies %}
                   <span class="badge bg-primary bg-opacity-10 text-primary">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                      <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
+                    </svg>
                     {{ policy.bucket }}
                     {% if '*' in policy.actions %}
                       <span class="opacity-75">(full)</span>
@@ -149,38 +183,18 @@
                   <span class="badge bg-secondary bg-opacity-10 text-secondary">No policies</span>
                 {% endfor %}
               </div>
-            </td>
-            <td class="text-end">
-              <div class="btn-group btn-group-sm" role="group">
-                <button class="btn btn-outline-primary" type="button" data-rotate-user="{{ user.access_key }}" title="Rotate Secret">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
-                    <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
-                  </svg>
-                </button>
-                <button class="btn btn-outline-secondary" type="button" data-edit-user="{{ user.access_key }}" data-display-name="{{ user.display_name }}" title="Edit User">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5z"/>
-                  </svg>
-                </button>
-                <button class="btn btn-outline-secondary" type="button" data-policy-editor data-access-key="{{ user.access_key }}" title="Edit Policies">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
-                    <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319z"/>
-                  </svg>
-                </button>
-                <button class="btn btn-outline-danger" type="button" data-delete-user="{{ user.access_key }}" title="Delete User">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M5.5 5.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm3 .5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0z"/>
-                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
-                  </svg>
-                </button>
-              </div>
-            </td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+            </div>
+            <button class="btn btn-outline-primary btn-sm w-100" type="button" data-policy-editor data-access-key="{{ user.access_key }}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
+                <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319z"/>
+              </svg>
+              Manage Policies
+            </button>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
     </div>
     {% else %}
     <div class="empty-state text-center py-5">
@@ -442,6 +456,95 @@
 {{ super() }}
 <script>
   (function () {
+    // Auto-indent for JSON textareas
+    function setupJsonAutoIndent(textarea) {
+      if (!textarea) return;
+
+      textarea.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+
+          const start = this.selectionStart;
+          const end = this.selectionEnd;
+          const value = this.value;
+
+          // Get the current line
+          const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+          const currentLine = value.substring(lineStart, start);
+
+          // Calculate base indentation (leading whitespace of current line)
+          const indentMatch = currentLine.match(/^(\s*)/);
+          let indent = indentMatch ? indentMatch[1] : '';
+
+          // Check if the line ends with { or [ (should increase indent)
+          const trimmedLine = currentLine.trim();
+          const lastChar = trimmedLine.slice(-1);
+
+          // Check the character before cursor
+          const charBeforeCursor = value.substring(start - 1, start).trim();
+
+          let newIndent = indent;
+          let insertAfter = '';
+
+          if (lastChar === '{' || lastChar === '[') {
+            // Add extra indentation
+            newIndent = indent + '  ';
+
+            // Check if we need to add closing bracket on new line
+            const charAfterCursor = value.substring(start, start + 1).trim();
+            if ((lastChar === '{' && charAfterCursor === '}') ||
+                (lastChar === '[' && charAfterCursor === ']')) {
+              insertAfter = '\n' + indent;
+            }
+          } else if (lastChar === ',' || lastChar === ':') {
+            // Keep same indentation for continuation
+            newIndent = indent;
+          }
+
+          // Insert newline with proper indentation
+          const insertion = '\n' + newIndent + insertAfter;
+          const newValue = value.substring(0, start) + insertion + value.substring(end);
+
+          this.value = newValue;
+
+          // Set cursor position after the indentation
+          const newCursorPos = start + 1 + newIndent.length;
+          this.selectionStart = this.selectionEnd = newCursorPos;
+
+          // Trigger input event for any listeners
+          this.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+
+        // Handle Tab key for indentation
+        if (e.key === 'Tab') {
+          e.preventDefault();
+          const start = this.selectionStart;
+          const end = this.selectionEnd;
+
+          if (e.shiftKey) {
+            // Outdent: remove 2 spaces from start of line
+            const lineStart = this.value.lastIndexOf('\n', start - 1) + 1;
+            const lineContent = this.value.substring(lineStart, start);
+            if (lineContent.startsWith('  ')) {
+              this.value = this.value.substring(0, lineStart) +
+                           this.value.substring(lineStart + 2);
+              this.selectionStart = this.selectionEnd = Math.max(lineStart, start - 2);
+            }
+          } else {
+            // Indent: insert 2 spaces
+            this.value = this.value.substring(0, start) + '  ' + this.value.substring(end);
+            this.selectionStart = this.selectionEnd = start + 2;
+          }
+
+          this.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+      });
+    }
+
+    // Apply auto-indent to policy editor textareas
+    setupJsonAutoIndent(document.getElementById('policyEditorDocument'));
+    setupJsonAutoIndent(document.getElementById('createUserPolicies'));
+
     const currentUserKey = {{ principal.access_key | tojson }};
     const configCopyButtons = document.querySelectorAll('.config-copy');
     configCopyButtons.forEach((button) => {
diff --git a/templates/metrics.html b/templates/metrics.html
index b786ee3..6b3c695 100644
--- a/templates/metrics.html
+++ b/templates/metrics.html
@@ -219,24 +219,42 @@
   </div>
   
   <div class="col-lg-4">
-    <div class="card shadow-sm border-0 h-100 overflow-hidden" style="background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);">
+    {% set has_issues = (cpu_percent > 80) or (memory.percent > 85) or (disk.percent > 90) %}
+    <div class="card shadow-sm border-0 h-100 overflow-hidden" style="background: linear-gradient(135deg, {% if has_issues %}#ef4444 0%, #f97316{% else %}#3b82f6 0%, #8b5cf6{% endif %} 100%);">
       <div class="card-body p-4 d-flex flex-column justify-content-center text-white position-relative">
         <div class="position-absolute top-0 end-0 opacity-25" style="transform: translate(20%, -20%);">
-          <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" fill="currentColor" class="bi bi-cloud-check" viewBox="0 0 16 16">
+          <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" fill="currentColor" class="bi bi-{% if has_issues %}exclamation-triangle{% else %}cloud-check{% endif %}" viewBox="0 0 16 16">
+            {% if has_issues %}
+            <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
+            <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
+            {% else %}
             <path fill-rule="evenodd" d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
             <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
+            {% endif %}
           </svg>
         </div>
         <div class="mb-3">
-          <span class="badge bg-white text-primary fw-semibold px-3 py-2">
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-check-circle-fill me-1" viewBox="0 0 16 16">
+          <span class="badge bg-white {% if has_issues %}text-danger{% else %}text-primary{% endif %} fw-semibold px-3 py-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-{% if has_issues %}exclamation-circle-fill{% else %}check-circle-fill{% endif %} me-1" viewBox="0 0 16 16">
+              {% if has_issues %}
+              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
+              {% else %}
               <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+              {% endif %}
             </svg>
             v{{ app.version }}
           </span>
         </div>
-        <h4 class="card-title fw-bold mb-3">System Status</h4>
-        <p class="card-text opacity-90 mb-4">All systems operational. Your storage infrastructure is running smoothly with no detected issues.</p>
+        <h4 class="card-title fw-bold mb-3">System Health</h4>
+        {% if has_issues %}
+        <ul class="list-unstyled small mb-4 opacity-90">
+          {% if cpu_percent > 80 %}<li class="mb-1">CPU usage is high ({{ cpu_percent }}%)</li>{% endif %}
+          {% if memory.percent > 85 %}<li class="mb-1">Memory usage is high ({{ memory.percent }}%)</li>{% endif %}
+          {% if disk.percent > 90 %}<li class="mb-1">Disk space is critically low ({{ disk.percent }}% used)</li>{% endif %}
+        </ul>
+        {% else %}
+        <p class="card-text opacity-90 mb-4 small">All resources are within normal operating parameters.</p>
+        {% endif %}
         <div class="d-flex gap-4">
           <div>
             <div class="h3 fw-bold mb-0">{{ app.uptime_days }}d</div>