diff --git a/studio/src/main/resources/static/api.html b/studio/src/main/resources/static/api.html
index 4cc108491a..026e36c062 100644
--- a/studio/src/main/resources/static/api.html
+++ b/studio/src/main/resources/static/api.html
@@ -1,139 +1,621 @@
 <div class="tab-pane fade" id="tab-api" role="tabpanel">
-  <div class="row">
-    <div class="col-12">
-      <h4><i class="fa fa-plug"></i> HTTP API</h4>
-    </div>
-  </div>
-
-  <hr />
-
-  <div class="row">
-    <div class="col-12">
-      <div class="row py-2">
-        <div class="col-1">
-          <b>Method</b>
-        </div>
-        <div class="col-4">
-          <b>URL</b>
-        </div>
-        <div class="col-7">
-          <b>Documentation</b>
-        </div>
+  <div class="docs-panel">
+    <!-- Left: Endpoint List -->
+    <div class="docs-sidebar docs-sidebar-api">
+      <div class="docs-sidebar-header">
+        <span class="docs-sidebar-title"><i class="fa fa-plug"></i> HTTP API Reference</span>
+        <a class="docs-open-external" href="https://docs.arcadedb.com/#http-json-api" target="_blank" title="Open full docs">
+          <i class="fa fa-external-link-alt"></i>
+        </a>
       </div>
 
-      <div class="row">
-        <div class="col-1">GET</div>
-        <div class="col-4">
-          <pre>/api/v1/ready</pre>
-        </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-checkready">Get server status</a>
+      <div class="docs-sidebar-body">
+        <!-- Health & Status -->
+        <div class="api-section">
+          <div class="api-section-label">Health &amp; Status</div>
+          <div class="api-endpoint" onclick="showApiDetail('ready')">
+            <span class="api-method api-method-get">GET</span>
+            <span class="api-path">/api/v1/ready</span>
+            <span class="api-desc">Server readiness check</span>
+          </div>
         </div>
-      </div>
 
-      <div class="row">
-        <div class="col-1">GET</div>
-        <div class="col-4">
-          <pre>/api/v1/server</pre>
-        </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-serverinfo">Get server information</a>
+        <!-- Authentication -->
+        <div class="api-section">
+          <div class="api-section-label">Authentication</div>
+          <div class="api-endpoint" onclick="showApiDetail('login')">
+            <span class="api-method api-method-post">POST</span>
+            <span class="api-path">/api/v1/login</span>
+            <span class="api-desc">Authenticate with credentials</span>
+          </div>
+          <div class="api-endpoint" onclick="showApiDetail('logout')">
+            <span class="api-method api-method-post">POST</span>
+            <span class="api-path">/api/v1/logout</span>
+            <span class="api-desc">End current session</span>
+          </div>
         </div>
-      </div>
-
-      <div class="row">
-        <div class="col-1">GET</div>
-        <div class="col-4">
-          <pre>/api/v1/server</pre>
-        </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-servercommand"
-            >Send server command (create/drop/open/close database, create/drop user, shutdown)</a
-          >
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="col-1">GET</div>
-        <div class="col-4">
-          <pre>/api/v1/databases</pre>
-        </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-listdatabases">List databases</a>
-        </div>
-      </div>
 
-      <div class="row">
-        <div class="col-1">GET</div>
-        <div class="col-4">
-          <pre>/api/v1/exists/{database}</pre>
+        <!-- Query Execution -->
+        <div class="api-section">
+          <div class="api-section-label">Query Execution</div>
+          <div class="api-endpoint" onclick="showApiDetail('queryGet')">
+            <span class="api-method api-method-get">GET</span>
+            <span class="api-path">/api/v1/query/{db}/{lang}/{cmd}</span>
+            <span class="api-desc">Execute a query via GET</span>
+          </div>
+          <div class="api-endpoint" onclick="showApiDetail('queryPost')">
+            <span class="api-method api-method-post">POST</span>
+            <span class="api-path">/api/v1/query/{db}</span>
+            <span class="api-desc">Execute a query via POST</span>
+          </div>
         </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-databaseexists">Does database exist?</a>
-        </div>
-      </div>
 
-      <div class="row">
-        <div class="col-1">GET</div>
-        <div class="col-4">
-          <pre>/api/v1/query/{database}/{language}/{query}</pre>
-        </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-executequery">Execute a query (GET)</a>
+        <!-- Commands -->
+        <div class="api-section">
+          <div class="api-section-label">Commands</div>
+          <div class="api-endpoint" onclick="showApiDetail('command')">
+            <span class="api-method api-method-post">POST</span>
+            <span class="api-path">/api/v1/command/{db}</span>
+            <span class="api-desc">Execute a database command</span>
+          </div>
         </div>
-      </div>
 
-      <div class="row">
-        <div class="col-1">POST</div>
-        <div class="col-4">
-          <pre>/api/v1/query/{database}</pre>
-        </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-executequery">Execute a query (POST)</a>
+        <!-- Transactions -->
+        <div class="api-section">
+          <div class="api-section-label">Transactions</div>
+          <div class="api-endpoint" onclick="showApiDetail('begin')">
+            <span class="api-method api-method-post">POST</span>
+            <span class="api-path">/api/v1/begin/{db}</span>
+            <span class="api-desc">Begin a new transaction</span>
+          </div>
+          <div class="api-endpoint" onclick="showApiDetail('commit')">
+            <span class="api-method api-method-post">POST</span>
+            <span class="api-path">/api/v1/commit/{db}</span>
+            <span class="api-desc">Commit current transaction</span>
+          </div>
+          <div class="api-endpoint" onclick="showApiDetail('rollback')">
+            <span class="api-method api-method-post">POST</span>
+            <span class="api-path">/api/v1/rollback/{db}</span>
+            <span class="api-desc">Rollback current transaction</span>
+          </div>
         </div>
-      </div>
 
-      <div class="row">
-        <div class="col-1">POST</div>
-        <div class="col-4">
-          <pre>/api/v1/command/{database}</pre>
-        </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-executecommand">Execute a command</a>
+        <!-- Server Management -->
+        <div class="api-section">
+          <div class="api-section-label">Server Management</div>
+          <div class="api-endpoint" onclick="showApiDetail('serverGet')">
+            <span class="api-method api-method-get">GET</span>
+            <span class="api-path">/api/v1/server</span>
+            <span class="api-desc">Get server information</span>
+          </div>
+          <div class="api-endpoint" onclick="showApiDetail('serverPost')">
+            <span class="api-method api-method-post">POST</span>
+            <span class="api-path">/api/v1/server</span>
+            <span class="api-desc">Execute server command</span>
+          </div>
         </div>
-      </div>
 
-      <div class="row">
-        <div class="col-1">POST</div>
-        <div class="col-4">
-          <pre>/api/v1/begin/{database}</pre>
+        <!-- Database Management -->
+        <div class="api-section">
+          <div class="api-section-label">Database Management</div>
+          <div class="api-endpoint" onclick="showApiDetail('databases')">
+            <span class="api-method api-method-get">GET</span>
+            <span class="api-path">/api/v1/databases</span>
+            <span class="api-desc">List all databases</span>
+          </div>
+          <div class="api-endpoint" onclick="showApiDetail('exists')">
+            <span class="api-method api-method-get">GET</span>
+            <span class="api-path">/api/v1/exists/{db}</span>
+            <span class="api-desc">Check if database exists</span>
+          </div>
         </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-begin">Begin a new transaction</a>
-        </div>
-      </div>
 
-      <div class="row">
-        <div class="col-1">POST</div>
-        <div class="col-4">
-          <pre>/api/v1/commit/{database}</pre>
-        </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-commit">Commit a transaction</a>
+        <!-- Documentation -->
+        <div class="api-section">
+          <div class="api-section-label">Documentation</div>
+          <div class="api-endpoint" onclick="window.open('/docs', '_blank')">
+            <span class="api-method api-method-get">GET</span>
+            <span class="api-path">/docs</span>
+            <span class="api-desc">Swagger UI (interactive)</span>
+          </div>
         </div>
       </div>
+    </div>
 
-      <div class="row">
-        <div class="col-1">POST</div>
-        <div class="col-4">
-          <pre>/api/v1/rollback/{database}</pre>
-        </div>
-        <div class="col-7">
-          <a class="link" href="https://docs.arcadedb.com/#http-rollback">Rollback a transaction</a>
-        </div>
+    <!-- Right: Endpoint Detail -->
+    <div class="api-detail-container" id="apiDetailPanel">
+      <div class="api-detail-welcome">
+        <div class="api-detail-welcome-icon"><i class="fa fa-plug"></i></div>
+        <h5>HTTP API Reference</h5>
+        <p>Select an endpoint from the sidebar to view its documentation, including request format, parameters, and response examples.</p>
+        <p class="api-detail-welcome-hint">All endpoints use JSON for request and response bodies. Authentication is via <code>Authorization: Bearer {token}</code> header after login.</p>
+        <a href="https://docs.arcadedb.com/#http-json-api" target="_blank" class="api-detail-docs-link"><i class="fa fa-external-link-alt"></i> Full HTTP API Documentation</a>
       </div>
-
-      <hr />
     </div>
   </div>
 </div>
+
+<script>
+var apiEndpoints = {
+  ready: {
+    method: "GET", path: "/api/v1/ready", auth: false, tryIt: false,
+    docsAnchor: "http-checkready",
+    title: "Server Readiness Check",
+    description: "Returns the server status. If the server is running and ready to accept requests, it returns <code>204 No Content</code>. Useful for health checks, load balancers, and monitoring.",
+    params: [],
+    requestBody: null,
+    responseCode: "204 No Content",
+    responseBody: null,
+    notes: "This endpoint does not require authentication and can be used by external monitoring systems."
+  },
+  login: {
+    method: "POST", path: "/api/v1/login", auth: false, tryIt: true,
+    docsAnchor: "http-login",
+    title: "Authenticate",
+    description: "Authenticates a user with the server using HTTP Basic Authentication. Returns a session token for subsequent requests.",
+    params: [],
+    requestBody: null,
+    requestHeaders: [
+      { name: "Authorization", value: "Basic base64(username:password)", desc: "HTTP Basic credentials" }
+    ],
+    responseCode: "200 OK",
+    responseBody: '{\n  "token": "abc123..."\n}',
+    notes: "Use the returned token as a Bearer token for all subsequent API calls."
+  },
+  logout: {
+    method: "POST", path: "/api/v1/logout", auth: true, tryIt: true,
+    docsAnchor: "http-logout",
+    title: "End Session",
+    description: "Invalidates the current session token, logging the user out.",
+    params: [],
+    requestBody: null,
+    responseCode: "204 No Content",
+    responseBody: null,
+    notes: null
+  },
+  queryGet: {
+    method: "GET", path: "/api/v1/query/{database}/{language}/{command}", auth: true, tryIt: true,
+    docsAnchor: "http-executequery",
+    title: "Execute Query (GET)",
+    description: "Executes a read-only query against the specified database. The query is URL-encoded in the path. This is an idempotent operation intended for queries that do not modify data.",
+    params: [
+      { name: "database", desc: "Database name" },
+      { name: "language", desc: "Query language: <code>sql</code>, <code>cypher</code>, <code>gremlin</code>, <code>graphql</code>, <code>mongo</code>" },
+      { name: "command", desc: "URL-encoded query text" }
+    ],
+    requestBody: null,
+    responseCode: "200 OK",
+    responseBody: '{\n  "user": "root",\n  "version": "26.x",\n  "serverName": "ArcadeDB_0",\n  "result": [ { ... } ]\n}',
+    notes: "Queries executed via GET are always read-only. For write operations, use the command endpoint."
+  },
+  queryPost: {
+    method: "POST", path: "/api/v1/query/{database}", auth: true, tryIt: true,
+    docsAnchor: "http-executequery",
+    title: "Execute Query (POST)",
+    description: "Executes a read-only query against the specified database. The query is passed in the request body as JSON. Preferred over GET for longer or complex queries.",
+    params: [
+      { name: "database", desc: "Database name" }
+    ],
+    requestBody: '{\n  "language": "sql",\n  "command": "SELECT FROM V"\n}',
+    responseCode: "200 OK",
+    responseBody: '{\n  "user": "root",\n  "version": "26.x",\n  "serverName": "ArcadeDB_0",\n  "result": [ { ... } ]\n}',
+    notes: "Supports all query languages: sql, cypher, gremlin, graphql, mongo."
+  },
+  command: {
+    method: "POST", path: "/api/v1/command/{database}", auth: true, tryIt: true,
+    docsAnchor: "http-executecommand",
+    title: "Execute Command",
+    description: "Executes a database command that may modify data (DDL/DML). Use this for INSERT, UPDATE, DELETE, CREATE, ALTER, and other write operations.",
+    params: [
+      { name: "database", desc: "Database name" }
+    ],
+    requestBody: '{\n  "language": "sql",\n  "command": "CREATE VERTEX TYPE Product"\n}',
+    responseCode: "200 OK",
+    responseBody: '{\n  "user": "root",\n  "version": "26.x",\n  "serverName": "ArcadeDB_0",\n  "result": [ { ... } ]\n}',
+    notes: "Commands run inside an implicit transaction unless a managed transaction is active."
+  },
+  begin: {
+    method: "POST", path: "/api/v1/begin/{database}", auth: true, tryIt: true,
+    docsAnchor: "http-begin",
+    title: "Begin Transaction",
+    description: "Starts a new managed transaction on the specified database. Returns a transaction ID in the response header that must be included in subsequent operations.",
+    params: [
+      { name: "database", desc: "Database name" }
+    ],
+    requestBody: null,
+    responseCode: "204 No Content",
+    responseBody: null,
+    responseHeaders: [
+      { name: "arcadedb-session-id", desc: "Transaction session ID to include in subsequent requests" }
+    ],
+    notes: "Include the <code>arcadedb-session-id</code> header in all subsequent command/query calls within the transaction."
+  },
+  commit: {
+    method: "POST", path: "/api/v1/commit/{database}", auth: true, tryIt: true,
+    docsAnchor: "http-commit",
+    title: "Commit Transaction",
+    description: "Commits the current managed transaction, making all changes permanent.",
+    params: [
+      { name: "database", desc: "Database name" }
+    ],
+    requestBody: null,
+    requestHeaders: [
+      { name: "arcadedb-session-id", value: "{session-id}", desc: "Transaction session ID from begin" }
+    ],
+    responseCode: "204 No Content",
+    responseBody: null,
+    notes: null
+  },
+  rollback: {
+    method: "POST", path: "/api/v1/rollback/{database}", auth: true, tryIt: true,
+    docsAnchor: "http-rollback",
+    title: "Rollback Transaction",
+    description: "Rolls back the current managed transaction, discarding all uncommitted changes.",
+    params: [
+      { name: "database", desc: "Database name" }
+    ],
+    requestBody: null,
+    requestHeaders: [
+      { name: "arcadedb-session-id", value: "{session-id}", desc: "Transaction session ID from begin" }
+    ],
+    responseCode: "204 No Content",
+    responseBody: null,
+    notes: null
+  },
+  serverGet: {
+    method: "GET", path: "/api/v1/server", auth: true, tryIt: true,
+    docsAnchor: "http-serverinfo",
+    title: "Get Server Information",
+    description: "Returns detailed information about the server, including version, uptime, databases, metrics, and cluster status.",
+    params: [],
+    requestBody: null,
+    responseCode: "200 OK",
+    responseBody: '{\n  "user": "root",\n  "version": "26.x",\n  "serverName": "ArcadeDB_0",\n  "databases": [ "mydb" ],\n  "metrics": { ... }\n}',
+    notes: null
+  },
+  serverPost: {
+    method: "POST", path: "/api/v1/server", auth: true, tryIt: true,
+    docsAnchor: "http-servercommand",
+    title: "Execute Server Command",
+    description: "Executes a server-level command such as creating/dropping databases, managing users, or shutting down the server.",
+    params: [],
+    requestBody: '{\n  "command": "create database newdb"\n}',
+    responseCode: "200 OK",
+    responseBody: '{\n  "result": "ok"\n}',
+    notes: "Available commands: <code>create database</code>, <code>drop database</code>, <code>open database</code>, <code>close database</code>, <code>create user</code>, <code>drop user</code>, <code>shutdown</code>, <code>set server setting</code>, <code>get server events</code>, <code>align database</code>."
+  },
+  databases: {
+    method: "GET", path: "/api/v1/databases", auth: true, tryIt: true,
+    docsAnchor: "http-listdatabases",
+    title: "List Databases",
+    description: "Returns a list of all databases available on the server that the current user has access to.",
+    params: [],
+    requestBody: null,
+    responseCode: "200 OK",
+    responseBody: '{\n  "result": [\n    "mydb",\n    "testdb"\n  ]\n}',
+    notes: null
+  },
+  exists: {
+    method: "GET", path: "/api/v1/exists/{database}", auth: true, tryIt: true,
+    docsAnchor: "http-databaseexists",
+    title: "Check Database Exists",
+    description: "Checks whether a specific database exists on the server.",
+    params: [
+      { name: "database", desc: "Database name to check" }
+    ],
+    requestBody: null,
+    responseCode: "200 OK",
+    responseBody: '{\n  "result": true\n}',
+    notes: null
+  }
+};
+
+var _apiPlaygroundVisible = {};
+
+function showApiDetail(key) {
+  var ep = apiEndpoints[key];
+  if (!ep) return;
+
+  // Highlight active endpoint
+  var endpoints = document.querySelectorAll("#tab-api .api-endpoint");
+  for (var i = 0; i < endpoints.length; i++)
+    endpoints[i].classList.remove("active");
+  if (event && event.currentTarget)
+    event.currentTarget.classList.add("active");
+
+  var methodClass = "api-method-" + ep.method.toLowerCase();
+  var html = "<div class='api-detail-content'>";
+
+  // Header
+  html += "<div class='api-detail-header'>";
+  html += "<div class='api-detail-title-row'>";
+  html += "<span class='api-method " + methodClass + "' style='font-size:0.72rem;padding:3px 10px'>" + ep.method + "</span>";
+  html += "<span class='api-detail-path'>" + escapeHtml(ep.path) + "</span>";
+  html += "</div>";
+  html += "<h5 class='api-detail-title'>" + ep.title + "</h5>";
+  html += "<div class='api-detail-meta'>";
+  html += ep.auth ? "<span class='api-detail-tag api-detail-tag-auth'><i class='fa fa-lock'></i> Auth required</span>"
+                   : "<span class='api-detail-tag api-detail-tag-public'><i class='fa fa-lock-open'></i> No auth</span>";
+  html += "<a href='https://docs.arcadedb.com/#" + ep.docsAnchor + "' target='_blank' class='api-detail-tag api-detail-tag-docs'><i class='fa fa-external-link-alt'></i> Full docs</a>";
+  if (ep.tryIt)
+    html += "<span class='api-detail-tag api-detail-tag-tryit' onclick='toggleApiPlayground(\"" + key + "\")'><i class='fa fa-play'></i> Try It</span>";
+  html += "</div>";
+  html += "</div>";
+
+  // Description
+  html += "<div class='api-detail-section'>";
+  html += "<p>" + ep.description + "</p>";
+  html += "</div>";
+
+  // Path Parameters
+  if (ep.params && ep.params.length > 0) {
+    html += "<div class='api-detail-section'>";
+    html += "<h6>Path Parameters</h6>";
+    html += "<table class='api-detail-table'><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody>";
+    for (var i = 0; i < ep.params.length; i++)
+      html += "<tr><td><code>" + ep.params[i].name + "</code></td><td>" + ep.params[i].desc + "</td></tr>";
+    html += "</tbody></table>";
+    html += "</div>";
+  }
+
+  // Request Headers
+  if (ep.requestHeaders && ep.requestHeaders.length > 0) {
+    html += "<div class='api-detail-section'>";
+    html += "<h6>Request Headers</h6>";
+    html += "<table class='api-detail-table'><thead><tr><th>Header</th><th>Value</th><th>Description</th></tr></thead><tbody>";
+    for (var i = 0; i < ep.requestHeaders.length; i++) {
+      var h = ep.requestHeaders[i];
+      html += "<tr><td><code>" + h.name + "</code></td><td><code>" + escapeHtml(h.value) + "</code></td><td>" + h.desc + "</td></tr>";
+    }
+    html += "</tbody></table>";
+    html += "</div>";
+  }
+
+  // Request Body
+  if (ep.requestBody) {
+    html += "<div class='api-detail-section'>";
+    html += "<h6>Request Body</h6>";
+    html += "<pre class='api-detail-code'>" + escapeHtml(ep.requestBody) + "</pre>";
+    html += "</div>";
+  }
+
+  // Response
+  html += "<div class='api-detail-section'>";
+  html += "<h6>Response</h6>";
+  html += "<div class='api-detail-response-code'>" + ep.responseCode + "</div>";
+  if (ep.responseBody)
+    html += "<pre class='api-detail-code'>" + escapeHtml(ep.responseBody) + "</pre>";
+  html += "</div>";
+
+  // Response Headers
+  if (ep.responseHeaders && ep.responseHeaders.length > 0) {
+    html += "<div class='api-detail-section'>";
+    html += "<h6>Response Headers</h6>";
+    html += "<table class='api-detail-table'><thead><tr><th>Header</th><th>Description</th></tr></thead><tbody>";
+    for (var i = 0; i < ep.responseHeaders.length; i++)
+      html += "<tr><td><code>" + ep.responseHeaders[i].name + "</code></td><td>" + ep.responseHeaders[i].desc + "</td></tr>";
+    html += "</tbody></table>";
+    html += "</div>";
+  }
+
+  // Notes
+  if (ep.notes) {
+    html += "<div class='api-detail-section api-detail-note'>";
+    html += "<i class='fa fa-info-circle'></i> " + ep.notes;
+    html += "</div>";
+  }
+
+  // Playground container (hidden by default)
+  if (ep.tryIt) {
+    var display = _apiPlaygroundVisible[key] ? 'block' : 'none';
+    html += "<div class='api-playground' id='apiPlayground_" + key + "' style='display:" + display + "'>";
+    html += renderApiPlayground(key, ep);
+    html += "</div>";
+  }
+
+  html += "</div>";
+  document.getElementById("apiDetailPanel").innerHTML = html;
+}
+
+function toggleApiPlayground(key) {
+  _apiPlaygroundVisible[key] = !_apiPlaygroundVisible[key];
+  var el = document.getElementById('apiPlayground_' + key);
+  if (el)
+    el.style.display = _apiPlaygroundVisible[key] ? 'block' : 'none';
+  else
+    showApiDetail(key);
+
+  if (_apiPlaygroundVisible[key]) {
+    setTimeout(function() {
+      var pg = document.getElementById('apiPlayground_' + key);
+      if (pg) pg.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, 50);
+  }
+}
+
+function renderApiPlayground(key, ep) {
+  var html = "<div class='api-playground-title'><i class='fa fa-play-circle'></i> API Playground</div>";
+
+  // Auth section
+  html += "<div class='api-playground-section'>";
+  html += "<label>Authentication</label>";
+  html += "<select class='api-playground-auth-select' id='apiAuth_" + key + "' onchange='onApiAuthChange(\"" + key + "\")'>";
+  html += "<option value='session'>Current Session</option>";
+  html += "<option value='basic'>Basic Auth</option>";
+  html += "<option value='bearer'>Bearer Token</option>";
+  if (!ep.auth) html += "<option value='none'>No Auth</option>";
+  html += "</select>";
+  html += "<div class='api-playground-auth-fields' id='apiAuthFields_" + key + "'></div>";
+  html += "</div>";
+
+  // Path parameters
+  if (ep.params && ep.params.length > 0) {
+    html += "<div class='api-playground-section'>";
+    html += "<label>Path Parameters</label>";
+    for (var i = 0; i < ep.params.length; i++) {
+      var p = ep.params[i];
+      var defaultVal = '';
+      if (p.name === 'database') {
+        var db = typeof getCurrentDatabase === 'function' ? getCurrentDatabase() : '';
+        defaultVal = db || '';
+      } else if (p.name === 'language')
+        defaultVal = 'sql';
+      else if (p.name === 'command')
+        defaultVal = 'SELECT 1';
+
+      html += "<div class='api-playground-param-row'>";
+      html += "<code>" + escapeHtml(p.name) + "</code>";
+      html += "<input class='api-playground-input' id='apiParam_" + key + "_" + p.name + "' value='" + escapeHtml(defaultVal) + "' placeholder='" + escapeHtml(p.name) + "'>";
+      html += "</div>";
+    }
+    html += "</div>";
+  }
+
+  // Request body
+  if (ep.requestBody) {
+    html += "<div class='api-playground-section'>";
+    html += "<label>Request Body</label>";
+    html += "<textarea class='api-playground-body-editor' id='apiBody_" + key + "'>" + escapeHtml(ep.requestBody) + "</textarea>";
+    html += "</div>";
+  }
+
+  // Send button
+  html += "<div style='margin-bottom:16px'>";
+  html += "<button class='api-playground-send' id='apiSendBtn_" + key + "' onclick='sendApiRequest(\"" + key + "\")'><i class='fa fa-paper-plane'></i> Send Request</button>";
+  html += "</div>";
+
+  // Response area
+  html += "<div id='apiResponse_" + key + "'></div>";
+
+  return html;
+}
+
+function onApiAuthChange(key) {
+  var authType = document.getElementById('apiAuth_' + key).value;
+  var container = document.getElementById('apiAuthFields_' + key);
+
+  if (authType === 'basic') {
+    container.innerHTML =
+      "<div class='api-playground-param-row mt-2'><code>Username</code><input class='api-playground-input' id='apiAuthUser_" + key + "' placeholder='username'></div>" +
+      "<div class='api-playground-param-row'><code>Password</code><input class='api-playground-input' id='apiAuthPass_" + key + "' type='password' placeholder='password'></div>";
+  } else if (authType === 'bearer') {
+    container.innerHTML =
+      "<div class='api-playground-param-row mt-2'><code>Token</code><input class='api-playground-input' id='apiAuthToken_" + key + "' placeholder='Bearer token'></div>";
+  } else {
+    container.innerHTML = '';
+  }
+}
+
+function sendApiRequest(key) {
+  var ep = apiEndpoints[key];
+  if (!ep) return;
+
+  var sendBtn = document.getElementById('apiSendBtn_' + key);
+  sendBtn.disabled = true;
+  sendBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Sending...';
+
+  // Build URL
+  var url = ep.path;
+  if (ep.params) {
+    for (var i = 0; i < ep.params.length; i++) {
+      var p = ep.params[i];
+      var val = document.getElementById('apiParam_' + key + '_' + p.name);
+      var paramVal = val ? encodeURIComponent(val.value) : '';
+      url = url.replace('{' + p.name + '}', paramVal);
+    }
+  }
+
+  // Build auth header
+  var authType = document.getElementById('apiAuth_' + key).value;
+  var headers = {};
+
+  if (authType === 'session' && typeof globalCredentials !== 'undefined' && globalCredentials) {
+    headers['Authorization'] = globalCredentials;
+  } else if (authType === 'basic') {
+    var user = (document.getElementById('apiAuthUser_' + key) || {}).value || '';
+    var pass = (document.getElementById('apiAuthPass_' + key) || {}).value || '';
+    headers['Authorization'] = 'Basic ' + btoa(user + ':' + pass);
+  } else if (authType === 'bearer') {
+    var token = (document.getElementById('apiAuthToken_' + key) || {}).value || '';
+    headers['Authorization'] = 'Bearer ' + token;
+  }
+
+  // Build request body
+  var body = null;
+  var bodyEl = document.getElementById('apiBody_' + key);
+  if (bodyEl && bodyEl.value.trim())
+    body = bodyEl.value.trim();
+
+  var startTime = Date.now();
+
+  $.ajax({
+    type: ep.method,
+    url: url,
+    data: body,
+    contentType: body ? 'application/json' : undefined,
+    headers: headers,
+    timeout: 30000
+  })
+  .done(function(data, textStatus, jqXHR) {
+    var elapsed = Date.now() - startTime;
+    renderApiResponse(key, jqXHR.status, elapsed, data, jqXHR);
+  })
+  .fail(function(jqXHR) {
+    var elapsed = Date.now() - startTime;
+    var responseData = jqXHR.responseText;
+    try { responseData = JSON.parse(responseData); } catch(e) {}
+    renderApiResponse(key, jqXHR.status, elapsed, responseData, jqXHR);
+  })
+  .always(function() {
+    sendBtn.disabled = false;
+    sendBtn.innerHTML = '<i class="fa fa-paper-plane"></i> Send Request';
+  });
+}
+
+function renderApiResponse(key, status, elapsed, data, jqXHR) {
+  var container = document.getElementById('apiResponse_' + key);
+  var isOk = status >= 200 && status < 400;
+  var statusClass = isOk ? 'api-playground-status-ok' : 'api-playground-status-error';
+  var statusText = jqXHR ? (jqXHR.status + ' ' + jqXHR.statusText) : (status + '');
+
+  var responseText = '';
+  if (data !== null && data !== undefined) {
+    if (typeof data === 'object')
+      responseText = JSON.stringify(data, null, 2);
+    else
+      responseText = data.toString();
+  } else {
+    responseText = '(empty response)';
+  }
+
+  // Show response headers
+  var headersText = '';
+  if (jqXHR) {
+    var allHeaders = jqXHR.getAllResponseHeaders();
+    if (allHeaders) headersText = allHeaders.trim();
+  }
+
+  var html = "<div class='api-playground-response'>";
+  html += "<div class='api-playground-response-header'>";
+  html += "<span class='api-playground-status " + statusClass + "'>" + escapeHtml(statusText) + "</span>";
+  html += "<span class='api-playground-timing'>" + elapsed + "ms</span>";
+  html += "</div>";
+  html += "<div style='position:relative'>";
+  html += "<pre class='api-playground-response-body'>" + escapeHtml(responseText) + "</pre>";
+  html += "<button class='api-playground-copy' onclick='copyApiResponse(this)' title='Copy to clipboard'><i class='fa fa-copy'></i></button>";
+  html += "</div>";
+  html += "</div>";
+
+  container.innerHTML = html;
+}
+
+function copyApiResponse(btn) {
+  var pre = btn.parentNode.querySelector('.api-playground-response-body');
+  if (pre) {
+    navigator.clipboard.writeText(pre.textContent).then(function() {
+      btn.innerHTML = '<i class="fa fa-check"></i>';
+      setTimeout(function() { btn.innerHTML = '<i class="fa fa-copy"></i>'; }, 1500);
+    });
+  }
+}
+</script>
diff --git a/studio/src/main/resources/static/css/studio.css b/studio/src/main/resources/static/css/studio.css
index 29e8ac9573..fcd4b450fb 100644
--- a/studio/src/main/resources/static/css/studio.css
+++ b/studio/src/main/resources/static/css/studio.css
@@ -1,24 +1,233 @@
+/* ===== CSS Custom Properties (Theme Tokens) ===== */
+
+:root {
+  --color-brand: #00aeee;
+  --color-brand-hover: #0098d4;
+  --color-brand-light: #e8f4fd;
+  --color-brand-border: #0e76bc;
+  --color-brand-link: #02a3ff;
+
+  --bg-page: white;
+  --bg-sidebar: #f8f9fa;
+  --bg-sidebar-header: #f0f1f3;
+  --bg-active-tab: #f7f7f7;
+  --bg-card: white;
+  --bg-input: white;
+  --bg-code: #1e293b;
+  --bg-reference: #f0f1f3;
+  --bg-nav: white;
+  --bg-hover: #e8f4fd;
+  --bg-hover-alt: #b9d8f9;
+  --bg-note: #f0f9ff;
+  --bg-note-code: #e0f2fe;
+
+  --text-primary: #333;
+  --text-secondary: #555;
+  --text-muted: #666;
+  --text-faint: #777;
+  --text-nav: #545454;
+  --text-lighter: #888;
+  --text-lightest: #999;
+  --text-placeholder: #bbb;
+  --text-code: #e2e8f0;
+
+  --border-main: #e0e0e0;
+  --border-light: #eee;
+  --border-ddd: #ddd;
+  --border-table: #dee2e6;
+  --border-f0: #f0f0f0;
+
+  --btn-secondary-bg: #f7f7f7;
+  --table-hover: #e8f4fd;
+  --link-color: #545454;
+  --modal-bg: white;
+  --shadow-dropdown: rgba(0,0,0,0.1);
+
+  --icon-color: #545454;
+  --icon-muted: #999;
+  --icon-light: #ccc;
+  --icon-lighter: #ddd;
+}
+
+[data-theme="dark"] {
+  --color-brand: #29b6f6;
+  --color-brand-hover: #4fc3f7;
+  --color-brand-light: #1a3a4a;
+  --color-brand-border: #29b6f6;
+  --color-brand-link: #4fc3f7;
+
+  --bg-page: #1a1d21;
+  --bg-sidebar: #22262b;
+  --bg-sidebar-header: #1e2227;
+  --bg-active-tab: #2a2f36;
+  --bg-card: #22262b;
+  --bg-input: #2a2f36;
+  --bg-code: #0d1117;
+  --bg-reference: #2a2f36;
+  --bg-nav: #1e2227;
+  --bg-hover: #2a3a4a;
+  --bg-hover-alt: #1a3a5a;
+  --bg-note: #1a2a3a;
+  --bg-note-code: #1a3a4a;
+
+  --text-primary: #e2e8f0;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --text-faint: #64748b;
+  --text-nav: #cbd5e1;
+  --text-lighter: #94a3b8;
+  --text-lightest: #64748b;
+  --text-placeholder: #475569;
+  --text-code: #e2e8f0;
+
+  --border-main: #2d3748;
+  --border-light: #374151;
+  --border-ddd: #374151;
+  --border-table: #374151;
+  --border-f0: #2d3748;
+
+  --btn-secondary-bg: #2a2f36;
+  --table-hover: #2a3a4a;
+  --link-color: #cbd5e1;
+  --modal-bg: #22262b;
+  --shadow-dropdown: rgba(0,0,0,0.4);
+
+  --icon-color: #cbd5e1;
+  --icon-muted: #64748b;
+  --icon-light: #475569;
+  --icon-lighter: #374151;
+}
+
+/* ===== Base Styles ===== */
+
+html {
+  height: 100%;
+}
+
 body {
-  font-family: Poppins, Verdana, sans-serif, Tahoma;
-  background-color: white;
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, sans-serif;
+  background-color: var(--bg-page);
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  font-weight: 400;
+}
+
+/* Global font overrides to ensure Poppins everywhere */
+h1, h2, h3, h4, h5, h6,
+.nav-link,
+.btn,
+label,
+select,
+input,
+table,
+.form-select,
+.form-control,
+.dropdown-item,
+.card-header,
+.modal-title,
+.modal-body {
+  font-family: inherit;
+}
+
+#studioPanel {
+  height: 100vh;
+  margin: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-page);
+}
+
+#studioPanel > .card-header-tab.card-header {
+  flex: 1;
+  min-height: 0;
+  padding: 0;
+  display: flex;
+  background-color: var(--bg-page);
+  border-bottom: none;
+}
+
+#studioPanel > .card-header > .row {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+#studioPanel > .card-header > .row > .col-1 {
+  padding: 0;
+}
+
+#studioPanel > .card-header > .row > .col-11 {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+#studioPanel > .card-header > .row > .col-11 > .tab-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+#studioPanel > .card-header > .row > .col-11 > .tab-content > .tab-pane {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  visibility: hidden;
+}
+
+#studioPanel > .card-header > .row > .col-11 > .tab-content > .tab-pane.active.show {
+  visibility: visible;
+}
+
+#tab-query {
+  overflow-y: hidden !important;
+}
+
+#tab-database {
+  overflow-y: hidden !important;
+}
+
+#tab-database > .tab-content > .tab-pane {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+}
+
+#tab-schema {
+  overflow: hidden !important;
 }
 
 a,
 a:visited {
-  color: #545454;
+  color: var(--link-color);
 }
 
 .link {
-  color: #02a3ff !important;
+  color: var(--color-brand-link) !important;
 }
 
 .btn-secondary {
-  color: black;
-  background-color: #f7f7f7 !important;
+  color: var(--text-primary);
+  background-color: var(--btn-secondary-bg) !important;
   border: 0px;
 }
 .btn-secondary:hover {
-  background-color: #b9d8f9 !important;
+  background-color: var(--bg-hover-alt) !important;
 }
 
 .btn-outline-primary {
@@ -26,80 +235,234 @@ a:visited {
 }
 
 .nav-link {
-  background-color: white;
-  color: #545454;
+  background-color: var(--bg-nav);
+  color: var(--text-nav);
+  font-size: 0.85rem;
+  font-weight: 500;
 }
 .nav-link:hover {
-  background-color: #b9d8f9 !important;
+  background-color: var(--bg-hover-alt) !important;
 }
 
 a.vertical-tab.nav-link.active.show {
-  background-color: #f7f7f7;
-  border-right-color: #f7f7f7;
+  background-color: var(--bg-active-tab);
+  border-right-color: var(--bg-active-tab);
   border-top-right-radius: 0;
 }
 
 .nav-label {
   font-size: 0.65rem;
   margin-top: 2px;
-  color: #666;
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 a.nav-link.active.show {
-  background-color: #f7f7f7;
-  border-bottom-color: #f7f7f7;
+  background-color: var(--bg-active-tab);
+  border-bottom-color: var(--bg-active-tab);
 }
 
 .btn-primary {
-  background-color: #00aeee;
-  border-color: #0e76bc;
+  background-color: var(--color-brand);
+  border-color: var(--color-brand-border);
 }
 
 .btn-primary:hover,
 .page-item.active .page-link {
-  background-color: #b9d8f9;
-  border-color: #b9d8f9;
+  background-color: var(--bg-hover-alt);
+  border-color: var(--bg-hover-alt);
+}
+
+.query-editor-container {
+  display: flex;
+  align-items: stretch;
+  border: 1px solid var(--border-ddd);
+  border-radius: 8px;
+  background: var(--bg-card);
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.query-editor-area {
+  flex: 1;
+  min-width: 0;
+}
+
+.query-editor-actions {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+  padding: 8px 6px;
+  flex-shrink: 0;
+}
+
+.editor-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--text-faint);
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.editor-save-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  font-size: 0.95rem;
+}
+
+.editor-save-btn:hover {
+  color: var(--color-brand);
+  background-color: var(--color-brand-light);
+}
+
+.editor-action-divider {
+  width: 1px;
+  height: 28px;
+  background-color: var(--border-ddd);
+  margin: 2px 4px;
+  align-self: center;
+}
+
+.editor-run-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  font-size: 0.85rem;
+  color: #fff;
+  background-color: var(--color-brand);
+}
+
+.editor-run-btn:hover {
+  background-color: var(--color-brand-hover);
+  color: #fff;
+}
+
+.editor-run-btn i {
+  color: #fff !important;
 }
 
 .CodeMirror {
-  color: black;
-  border-size: 2px;
-  font-size: 1.2em;
-  padding: 8px;
+  color: var(--text-primary);
+  font-size: 1rem;
+  padding: 4px 0;
   width: 100%;
   height: auto;
+  border: none !important;
+  background-color: var(--bg-card);
 }
 .CodeMirror-scroll {
   overflow-y: hidden;
   overflow-x: auto;
-  min-height: 30px;
+  min-height: 80px;
   max-height: 400px;
 }
 
-div.dt-buttons {
-  float: left;
+.CodeMirror-gutters {
+  background-color: var(--bg-card);
+  border-right: none;
+}
+
+.CodeMirror-linenumber {
+  color: var(--text-placeholder);
+  font-size: 0.85em;
 }
+
 div.dt-length {
   float: left;
-  margin-left: 50px;
+  margin-left: 10px;
 }
 div.dt-search {
   float: right;
 }
 
+/* Export dropdown */
+.dt-export-dropdown {
+  float: right;
+  position: relative;
+  margin-left: 8px;
+  padding: 7px 0;
+}
+
+.dt-export-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid var(--border-ddd);
+  border-radius: 6px;
+  background: var(--bg-reference);
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.dt-export-btn:hover {
+  background-color: var(--color-brand-light);
+  border-color: var(--color-brand);
+  color: var(--color-brand);
+}
+
+.dt-export-btn i {
+  color: inherit !important;
+}
+
+.dt-export-menu {
+  display: none;
+  position: fixed;
+  z-index: 10000;
+  min-width: 150px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-ddd);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px var(--shadow-dropdown);
+  padding: 4px 0;
+}
+
+.dt-export-menu.open {
+  display: block;
+}
+
+.dt-export-menu-item {
+  display: block;
+  width: 100%;
+  padding: 7px 14px;
+  border: none;
+  background: none;
+  color: var(--text-primary);
+  font-size: 0.82rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.dt-export-menu-item:hover {
+  background-color: var(--color-brand-light);
+  color: var(--color-brand);
+}
+
+.dt-export-menu-item i {
+  color: inherit !important;
+  width: 18px;
+  text-align: center;
+  margin-right: 6px;
+}
+
 #graphMainPanel {
   transition: width 0.3s ease;
 }
 
 #graphPropertiesPanel {
-  /* for the animation */
   transition: margin 0.3s ease;
 }
 
 .collapsed {
-  /* hide it for small displays*/
   display: none;
 }
 
@@ -109,7 +472,7 @@ div.dt-search {
 .nav-link i.fas,
 .nav-link i.far,
 .nav-link i.fab {
-  color: #545454 !important;
+  color: var(--icon-color) !important;
 }
 
 .nav-link:hover i[class*="fa-"],
@@ -117,7 +480,7 @@ div.dt-search {
 .nav-link:hover i.fas,
 .nav-link:hover i.far,
 .nav-link:hover i.fab {
-  color: #545454 !important;
+  color: var(--icon-color) !important;
 }
 
 .nav-link.active i[class*="fa-"],
@@ -125,7 +488,7 @@ div.dt-search {
 .nav-link.active i.fas,
 .nav-link.active i.far,
 .nav-link.active i.fab {
-  color: #545454 !important;
+  color: var(--icon-color) !important;
 }
 
 /* Fix database dropdown layout */
@@ -146,4 +509,2083 @@ div.dt-search {
   min-width: auto;
   width: auto;
   display: inline-block;
+  font-size: 0.85rem;
+}
+
+/* Consistent form element sizing */
+.form-select,
+.form-control {
+  font-size: 0.85rem;
+}
+
+.btn {
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+/* Icon Sidebar */
+#queryIconSidebar {
+  width: 45px;
+  min-width: 45px;
+  flex-shrink: 0;
+  height: 100%;
+  background-color: var(--bg-reference);
+  border-right: 1px solid var(--border-main);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 6px;
+}
+
+.icon-sidebar-btn {
+  width: 45px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--text-faint);
+  font-size: 1rem;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.icon-sidebar-btn:hover {
+  background-color: var(--color-brand-light);
+  color: var(--text-secondary);
+}
+
+.icon-sidebar-btn.active {
+  border-left: 3px solid var(--color-brand);
+  background-color: var(--color-brand-light);
+  color: var(--color-brand);
+}
+
+.icon-sidebar-btn i {
+  color: inherit !important;
+}
+
+/* Query Sidebar */
+#querySidebar {
+  width: 210px;
+  min-width: 210px;
+  flex-shrink: 0;
+  height: 100%;
+  overflow-y: auto;
+  background-color: var(--bg-sidebar);
+  border-right: 1px solid var(--border-main);
+}
+
+.sidebar-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background-color: var(--bg-sidebar);
+  border-bottom: 1px solid var(--border-main);
+}
+
+.sidebar-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+}
+
+.sidebar-refresh-btn {
+  padding: 2px 6px;
+  font-size: 0.75rem;
+  line-height: 1;
+  border: none;
+}
+
+.sidebar-section {
+  padding: 10px 12px 4px;
+}
+
+.sidebar-section-header {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-faint);
+  margin-bottom: 6px;
+}
+
+.sidebar-section-header i {
+  color: var(--icon-muted) !important;
+  font-size: 0.65rem;
+  margin-right: 2px;
+}
+
+.sidebar-count {
+  font-weight: 400;
+  color: var(--text-lightest);
+}
+
+.sidebar-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-bottom: 6px;
+}
+
+.sidebar-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 0.72rem;
+  color: #fff !important;
+  text-decoration: none;
+  max-width: 100%;
+  transition: opacity 0.15s, transform 0.15s;
+  line-height: 1.3;
+}
+
+.sidebar-badge:hover {
+  opacity: 0.85;
+  transform: translateY(-1px);
+  text-decoration: none;
+  color: #fff !important;
+}
+
+.sidebar-badge-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 110px;
+}
+
+.sidebar-badge-count {
+  font-size: 0.62rem;
+  opacity: 0.8;
+  white-space: nowrap;
+}
+
+.sidebar-empty {
+  padding: 20px 12px;
+  text-align: center;
+  color: var(--text-lightest);
+  font-size: 0.85rem;
+}
+
+/* Sidebar Panels */
+.sidebar-panel {
+  display: none;
+}
+
+.sidebar-panel.active {
+  display: block;
+}
+
+#queryWorkArea {
+  padding-left: 12px;
+}
+
+/* Result stats styling */
+.result-stats .result-stat-value {
+  font-weight: 700;
+  color: var(--color-brand);
+}
+
+/* Table improvements */
+.table,
+.dataTables_wrapper,
+.dt-length,
+.dt-search,
+.dt-info,
+.dt-paging {
+  font-family: inherit;
+}
+
+/* DataTables footer: info + paging on same row */
+.dt-layout-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.dt-layout-row .dt-layout-cell {
+  flex: none;
+}
+
+.dt-layout-cell.dt-layout-end {
+  margin-left: auto;
+}
+
+.dt-info {
+  white-space: nowrap;
+}
+
+.dt-paging {
+  margin-left: auto;
+}
+
+/* Allow export dropdown to overflow; dataTables wrapper handles scrolling */
+#tab-table .table-responsive {
+  overflow: visible;
+}
+
+#tab-table .dataTables_wrapper {
+  overflow-x: auto;
+}
+
+/* Ensure footer stretches to table width when table overflows */
+#tab-table .dataTables_wrapper > .dt-layout-row:last-child {
+  width: 100%;
+  min-width: fit-content;
+}
+
+#tab-table .table thead th {
+  text-transform: uppercase;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  color: var(--text-muted);
+  padding: 8px 10px;
+  border-bottom: 2px solid var(--border-table);
+}
+
+#tab-table .table tbody td {
+  font-size: 0.84rem;
+  padding: 6px 10px;
+  vertical-align: middle;
+}
+
+#tab-table .table tbody tr:hover {
+  background-color: var(--table-hover);
+}
+
+/* History Panel */
+.history-date-group {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-faint);
+  padding: 8px 12px 4px;
+  background-color: var(--bg-reference);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+.history-entry {
+  padding: 6px 10px 6px 8px;
+  border-bottom: 1px solid var(--border-light);
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  transition: background-color 0.1s;
+}
+
+.history-entry:hover {
+  background-color: var(--color-brand-light);
+}
+
+.history-entry .history-checkbox {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.history-entry-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.history-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 2px;
+}
+
+.history-time {
+  font-size: 0.68rem;
+  color: var(--text-lightest);
+}
+
+.history-lang {
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #fff;
+  background-color: var(--color-brand);
+  padding: 1px 5px;
+  border-radius: 3px;
+  letter-spacing: 0.3px;
+}
+
+.history-cmd {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.75rem;
+  color: var(--text-primary);
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.35;
+}
+
+.history-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border-main);
+  background-color: var(--bg-sidebar);
+}
+
+.history-toolbar .form-check {
+  margin-bottom: 0;
+}
+
+.history-search {
+  width: 100%;
+  padding: 5px 10px;
+  border: 1px solid var(--border-ddd);
+  border-radius: 4px;
+  font-size: 0.78rem;
+  margin: 6px 10px;
+  outline: none;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+}
+
+.history-search:focus {
+  border-color: var(--color-brand);
+}
+
+/* Saved Query Entries */
+.saved-query-entry {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border-light);
+  cursor: pointer;
+  transition: background-color 0.1s;
+  position: relative;
+}
+
+.saved-query-entry:hover {
+  background-color: var(--color-brand-light);
+}
+
+.saved-query-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.saved-query-name .saved-query-delete {
+  opacity: 0;
+  color: #cc4444;
+  font-size: 0.7rem;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.saved-query-entry:hover .saved-query-delete {
+  opacity: 1;
+}
+
+.saved-query-preview {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.3;
+}
+
+.saved-query-lang {
+  font-size: 0.58rem;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #fff;
+  background-color: #6366f1;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-left: 6px;
+}
+
+/* Reference Panel */
+.reference-section {
+  border-bottom: 1px solid var(--border-light);
+}
+
+.reference-section-header {
+  padding: 8px 12px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+}
+
+.reference-section-header:hover {
+  background-color: var(--bg-reference);
+}
+
+.reference-section-header i.fa-chevron-right {
+  font-size: 0.6rem;
+  color: var(--icon-muted) !important;
+  transition: transform 0.2s;
+}
+
+.reference-section-header i.fa-chevron-right.open {
+  transform: rotate(90deg);
+}
+
+.reference-section-body {
+  display: none;
+  padding: 4px 12px 8px;
+}
+
+.reference-section-body.open {
+  display: block;
+}
+
+.reference-example {
+  padding: 4px 8px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.72rem;
+  color: var(--text-primary);
+  background-color: var(--bg-reference);
+  cursor: pointer;
+  transition: background-color 0.1s;
+  word-break: break-all;
+}
+
+.reference-example:hover {
+  background-color: #dbeafe;
+}
+
+/* Settings Panel */
+.settings-section {
+  padding: 12px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.settings-section-header {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+  margin-bottom: 10px;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 0.8rem;
+}
+
+.settings-row label {
+  flex: 1;
+  color: var(--text-secondary);
+  margin-bottom: 0;
+}
+
+.settings-row select {
+  font-size: 0.78rem;
+  padding: 2px 6px;
+  border: 1px solid var(--border-ddd);
+  border-radius: 4px;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+}
+
+.sidebar-action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border-main);
+}
+
+.sidebar-action-btn {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 0.85rem;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.sidebar-action-btn:hover {
+  color: var(--color-brand);
+  background-color: var(--color-brand-light);
+}
+
+/* Database Panel */
+#dbTypeSidebar {
+  width: 230px;
+  min-width: 230px;
+  flex-shrink: 0;
+  height: 100%;
+  overflow-y: auto;
+  background-color: var(--bg-sidebar);
+  border-right: 1px solid var(--border-main);
+}
+
+#dbTypeDetail {
+  background-color: var(--bg-card);
+}
+
+.db-type-empty {
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--text-lightest);
+  font-size: 0.9rem;
+}
+
+.db-type-category-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.db-type-meta {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.db-type-meta a {
+  color: var(--color-brand) !important;
+  font-weight: 600;
+}
+
+.db-detail-section {
+  margin-bottom: 20px;
+}
+
+.db-detail-section h6 {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--text-secondary);
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.db-detail-section h6 i {
+  color: var(--color-brand) !important;
+  margin-right: 4px;
+  font-size: 0.75rem;
+}
+
+.db-detail-table thead th {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.3px;
+  color: var(--text-faint);
+  padding: 6px 8px;
+  border-bottom: 2px solid var(--border-table);
+  white-space: nowrap;
+}
+
+.db-detail-table tbody td {
+  font-size: 0.82rem;
+  padding: 5px 8px;
+  vertical-align: middle;
+}
+
+.db-detail-table tbody tr:hover {
+  background-color: var(--table-hover);
+}
+
+.db-action-btn {
+  background-color: var(--bg-reference);
+  border: 1px solid var(--border-ddd);
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  border-radius: 6px;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.db-action-btn:hover {
+  background-color: var(--color-brand-light);
+  border-color: var(--color-brand);
+  color: var(--color-brand);
+}
+
+.db-action-btn i {
+  color: inherit !important;
+}
+
+.db-action-btn-danger:hover {
+  background-color: #fef2f2;
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+.db-badge-active {
+  outline: 2px solid var(--text-primary);
+  outline-offset: 1px;
+}
+
+#dbTypeBadges .sidebar-badge-name {
+  max-width: 130px;
+}
+
+/* ===== API & Info Panels (shared docs layout) ===== */
+
+#tab-api,
+#tab-resources {
+  overflow: hidden !important;
+}
+
+.docs-panel {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.docs-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+  background-color: var(--bg-sidebar);
+  border-right: 1px solid var(--border-main);
+}
+
+.docs-sidebar-api {
+  width: 360px;
+  min-width: 300px;
+}
+
+.docs-sidebar-info {
+  width: 280px;
+  min-width: 240px;
+}
+
+.docs-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border-main);
+  background-color: var(--bg-sidebar-header);
+  flex-shrink: 0;
+}
+
+.docs-sidebar-title {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: 0.2px;
+}
+
+.docs-sidebar-title i {
+  color: var(--color-brand) !important;
+  margin-right: 6px;
+}
+
+.docs-open-external {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 5px;
+  color: var(--text-faint);
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+  font-size: 0.8rem;
+}
+
+.docs-open-external:hover {
+  background-color: var(--color-brand-light);
+  color: var(--color-brand);
+}
+
+.docs-open-external i {
+  color: inherit !important;
+}
+
+.docs-sidebar-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+/* --- API Detail Panel --- */
+
+.api-detail-container {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow-y: auto;
+  background-color: var(--bg-card);
+}
+
+.api-detail-welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 40px;
+  text-align: center;
+  color: var(--text-lighter);
+}
+
+.api-detail-welcome-icon {
+  font-size: 2.5rem;
+  color: var(--icon-lighter);
+  margin-bottom: 16px;
+}
+
+.api-detail-welcome h5 {
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.api-detail-welcome p {
+  max-width: 400px;
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.api-detail-welcome-hint {
+  font-size: 0.78rem !important;
+  color: var(--text-lightest);
+  margin-top: 4px;
+}
+
+.api-detail-welcome-hint code {
+  font-size: 0.75rem;
+  background-color: var(--bg-reference);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+.api-detail-docs-link {
+  display: inline-block;
+  margin-top: 16px;
+  font-size: 0.8rem;
+  color: var(--color-brand) !important;
+  text-decoration: none;
+}
+
+.api-detail-docs-link:hover {
+  text-decoration: underline;
+}
+
+.api-detail-docs-link i {
+  color: inherit !important;
+}
+
+.api-detail-content {
+  padding: 24px 28px;
+}
+
+.api-detail-header {
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.api-detail-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.api-detail-path {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.88rem;
+  color: var(--text-primary);
+}
+
+.api-detail-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 6px 0 8px;
+}
+
+.api-detail-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.api-detail-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.7rem;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.api-detail-tag i {
+  color: inherit !important;
+  font-size: 0.65rem;
+}
+
+.api-detail-tag-auth {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.api-detail-tag-public {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.api-detail-tag-docs {
+  background-color: var(--color-brand-light);
+  color: var(--color-brand) !important;
+}
+
+.api-detail-tag-docs:hover {
+  background-color: #d0ebfa;
+  text-decoration: none;
+}
+
+.api-detail-tag-tryit {
+  background-color: var(--color-brand);
+  color: #fff !important;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.api-detail-tag-tryit:hover {
+  background-color: var(--color-brand-hover);
+  text-decoration: none;
+}
+
+.api-detail-section {
+  margin-bottom: 18px;
+}
+
+.api-detail-section h6 {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.api-detail-section p {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.api-detail-section p code {
+  font-size: 0.78rem;
+  background-color: var(--bg-reference);
+  padding: 1px 5px;
+  border-radius: 3px;
+  color: var(--text-primary);
+}
+
+.api-detail-table {
+  width: 100%;
+  font-size: 0.82rem;
+  border-collapse: collapse;
+}
+
+.api-detail-table th {
+  text-transform: uppercase;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  color: var(--text-lighter);
+  padding: 6px 10px;
+  border-bottom: 2px solid var(--border-light);
+  text-align: left;
+}
+
+.api-detail-table td {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border-f0);
+  color: var(--text-secondary);
+  vertical-align: top;
+}
+
+.api-detail-table code {
+  font-size: 0.78rem;
+  background-color: var(--bg-reference);
+  padding: 1px 5px;
+  border-radius: 3px;
+  color: var(--text-primary);
+}
+
+.api-detail-code {
+  background-color: var(--bg-code);
+  color: var(--text-code);
+  padding: 14px 16px;
+  border-radius: 6px;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.api-detail-response-code {
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #28a745;
+  margin-bottom: 8px;
+}
+
+.api-detail-note {
+  background-color: var(--bg-note);
+  border-left: 3px solid var(--color-brand);
+  padding: 10px 14px;
+  border-radius: 0 4px 4px 0;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.api-detail-note i {
+  color: var(--color-brand) !important;
+  margin-right: 4px;
+}
+
+.api-detail-note code {
+  font-size: 0.75rem;
+  background-color: var(--bg-note-code);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+/* --- Info Detail Panel --- */
+
+.info-detail-container {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow-y: auto;
+  background-color: var(--bg-card);
+}
+
+.info-overview {
+  padding: 40px 36px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.info-overview-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.info-overview-header h4 {
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.info-overview-header p {
+  font-size: 0.88rem;
+  color: var(--text-faint);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.info-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.info-card {
+  background-color: var(--bg-sidebar);
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
+  padding: 20px 16px;
+  text-align: center;
+  transition: border-color 0.15s;
+}
+
+.info-card:hover {
+  border-color: var(--color-brand);
+}
+
+.info-card-icon {
+  font-size: 1.4rem;
+  color: var(--color-brand);
+  margin-bottom: 10px;
+}
+
+.info-card-icon i {
+  color: inherit !important;
+}
+
+.info-card h6 {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.info-card p {
+  font-size: 0.75rem;
+  color: var(--text-faint);
+  line-height: 1.4;
+  margin: 0;
+}
+
+.info-quick-links {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.info-quick-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: 1px solid var(--border-ddd);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--text-secondary) !important;
+  text-decoration: none;
+  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
+}
+
+.info-quick-link:hover {
+  border-color: var(--color-brand);
+  color: var(--color-brand) !important;
+  background-color: var(--color-brand-light);
+  text-decoration: none;
+}
+
+.info-quick-link i {
+  color: inherit !important;
+  font-size: 0.85rem;
+}
+
+/* --- API endpoint styles --- */
+
+.api-section {
+  padding: 4px 0;
+}
+
+.api-section-label {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-lighter);
+  padding: 8px 14px 4px;
+}
+
+.api-endpoint {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 6px 14px;
+  cursor: pointer;
+  transition: background-color 0.12s;
+  flex-wrap: wrap;
+}
+
+.api-endpoint:hover {
+  background-color: var(--color-brand-light);
+}
+
+.api-endpoint.active {
+  background-color: #dbeafe;
+  border-left: 3px solid var(--color-brand);
+  padding-left: 11px;
+}
+
+.api-method {
+  display: inline-block;
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  padding: 2px 7px;
+  border-radius: 3px;
+  color: #fff;
+  flex-shrink: 0;
+  text-align: center;
+  min-width: 38px;
+}
+
+.api-method-get {
+  background-color: #28a745;
+}
+
+.api-method-post {
+  background-color: #007bff;
+}
+
+.api-method-put {
+  background-color: #fd7e14;
+}
+
+.api-method-delete {
+  background-color: #dc3545;
+}
+
+.api-path {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.78rem;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.api-desc {
+  font-size: 0.72rem;
+  color: var(--text-lighter);
+  width: 100%;
+  padding-left: 46px;
+  margin-top: -2px;
+}
+
+/* --- Info TOC styles --- */
+
+.docs-toc-section {
+  border-bottom: 1px solid var(--border-light);
+}
+
+.docs-toc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 14px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.12s;
+}
+
+.docs-toc-header:hover {
+  background-color: var(--bg-reference);
+}
+
+.docs-toc-header > span > i {
+  color: var(--icon-muted) !important;
+  font-size: 0.75rem;
+  margin-right: 6px;
+  width: 16px;
+  text-align: center;
+}
+
+.docs-toc-header > i.fa-chevron-right {
+  font-size: 0.55rem;
+  color: var(--text-placeholder) !important;
+  transition: transform 0.2s;
+}
+
+.docs-toc-header > i.fa-chevron-right.open {
+  transform: rotate(90deg);
+}
+
+.docs-toc-body {
+  display: none;
+  padding: 0 0 6px;
+}
+
+.docs-toc-body.open {
+  display: block;
+}
+
+.docs-toc-entry {
+  display: block;
+  padding: 5px 14px 5px 36px;
+  font-size: 0.78rem;
+  color: var(--text-secondary) !important;
+  cursor: pointer;
+  transition: background-color 0.12s, color 0.12s;
+  text-decoration: none;
+}
+
+.docs-toc-entry:hover {
+  background-color: var(--color-brand-light);
+  color: var(--text-primary) !important;
+  text-decoration: none;
+}
+
+.docs-toc-entry i {
+  color: inherit !important;
+  margin-right: 4px;
+  font-size: 0.72rem;
+  width: 14px;
+  text-align: center;
+}
+
+.docs-toc-ext {
+  font-size: 0.58rem !important;
+  opacity: 0;
+  margin-left: 4px;
+  transition: opacity 0.15s;
+}
+
+.docs-toc-entry:hover .docs-toc-ext {
+  opacity: 0.6;
+}
+
+/* ===== API Playground ===== */
+
+.api-playground {
+  border-top: 2px solid var(--border-main);
+  margin-top: 24px;
+  padding-top: 20px;
+}
+
+.api-playground-title {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.api-playground-title i {
+  color: var(--color-brand) !important;
+}
+
+.api-playground-section {
+  margin-bottom: 14px;
+}
+
+.api-playground-section label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+  display: block;
+}
+
+.api-playground-input {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--border-ddd);
+  border-radius: 4px;
+  font-size: 0.82rem;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+}
+
+.api-playground-input:focus {
+  border-color: var(--color-brand);
+  outline: none;
+}
+
+.api-playground-body-editor {
+  width: 100%;
+  min-height: 100px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-ddd);
+  border-radius: 6px;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  resize: vertical;
+}
+
+.api-playground-body-editor:focus {
+  border-color: var(--color-brand);
+  outline: none;
+}
+
+.api-playground-send {
+  background-color: var(--color-brand);
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.api-playground-send:hover {
+  background-color: var(--color-brand-hover);
+}
+
+.api-playground-send:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.api-playground-response {
+  margin-top: 16px;
+}
+
+.api-playground-response-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.api-playground-status {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.api-playground-status-ok {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.api-playground-status-error {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.api-playground-timing {
+  font-size: 0.72rem;
+  color: var(--text-lightest);
+}
+
+.api-playground-response-body {
+  background-color: var(--bg-code);
+  color: var(--text-code);
+  padding: 14px 16px;
+  border-radius: 6px;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.78rem;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre;
+  max-height: 400px;
+  overflow-y: auto;
+  position: relative;
+}
+
+.api-playground-copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(255,255,255,0.1);
+  border: none;
+  color: var(--text-code);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  cursor: pointer;
+}
+
+.api-playground-copy:hover {
+  background: rgba(255,255,255,0.2);
+}
+
+.api-playground-auth-select {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--border-ddd);
+  border-radius: 4px;
+  font-size: 0.82rem;
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+}
+
+.api-playground-auth-fields {
+  margin-top: 8px;
+}
+
+.api-playground-param-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.api-playground-param-row code {
+  font-size: 0.78rem;
+  min-width: 80px;
+  color: var(--text-primary);
+}
+
+.api-playground-param-row input {
+  flex: 1;
+}
+
+/* ===== Settings Tab (main sidebar) ===== */
+
+.studio-settings-panel {
+  padding: 24px 28px;
+  max-width: 600px;
+}
+
+.studio-settings-panel h5 {
+  color: var(--text-primary);
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.studio-settings-panel h5 i {
+  color: var(--color-brand) !important;
+}
+
+.studio-settings-section {
+  margin-bottom: 24px;
+}
+
+.studio-settings-section h6 {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: var(--text-secondary);
+  margin-bottom: 12px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.theme-option-group {
+  display: flex;
+  gap: 8px;
+}
+
+.theme-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: 2px solid var(--border-ddd);
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  transition: border-color 0.15s, background-color 0.15s;
+  user-select: none;
+}
+
+.theme-option:hover {
+  border-color: var(--color-brand);
+  background-color: var(--color-brand-light);
+}
+
+.theme-option.active {
+  border-color: var(--color-brand);
+  background-color: var(--color-brand-light);
+  color: var(--color-brand);
+  font-weight: 600;
+}
+
+.theme-option i {
+  font-size: 1rem;
+}
+
+/* ===== Toast Container ===== */
+
+.studio-toast {
+  min-width: 280px;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-ddd);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px var(--shadow-dropdown);
+  color: var(--text-primary);
+}
+
+.studio-toast .toast-header {
+  background-color: var(--bg-sidebar);
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text-primary);
+}
+
+.studio-toast .toast-body {
+  font-size: 0.85rem;
+}
+
+/* ===== Global Modal Styles ===== */
+
+#globalModal .modal-content {
+  background-color: var(--modal-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--border-ddd);
+}
+
+#globalModal .modal-header {
+  background-color: var(--bg-sidebar);
+  border-bottom: 1px solid var(--border-light);
+}
+
+#globalModal .modal-footer {
+  border-top: 1px solid var(--border-light);
+}
+
+#globalModal .modal-body {
+  color: var(--text-secondary);
+}
+
+#globalModal .modal-body input,
+#globalModal .modal-body textarea {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border: 1px solid var(--border-ddd);
+  border-radius: 4px;
+  padding: 6px 10px;
+  width: 100%;
+}
+
+#globalModal .modal-body input:focus,
+#globalModal .modal-body textarea:focus {
+  border-color: var(--color-brand);
+  outline: none;
+}
+
+/* ===== Dark Theme Overrides for Bootstrap Components ===== */
+
+[data-theme="dark"] .form-control,
+[data-theme="dark"] .form-select,
+[data-theme="dark"] textarea.form-control {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .form-control:focus,
+[data-theme="dark"] .form-select:focus {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 0.15rem rgba(41, 182, 246, 0.25);
+}
+
+[data-theme="dark"] .modal-content {
+  background-color: var(--modal-bg);
+  border-color: var(--border-ddd);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .modal-header {
+  border-bottom-color: var(--border-light);
+}
+
+[data-theme="dark"] .modal-footer {
+  border-top-color: var(--border-light);
+}
+
+[data-theme="dark"] .btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+[data-theme="dark"] .table {
+  color: var(--text-primary);
+  --bs-table-color: var(--text-primary);
+  --bs-table-bg: var(--bg-card);
+  --bs-table-striped-color: var(--text-primary);
+  --bs-table-striped-bg: var(--bg-sidebar);
+  --bs-table-hover-color: var(--text-primary);
+  --bs-table-hover-bg: var(--table-hover);
+  --bs-table-border-color: var(--border-ddd);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .table > :not(caption) > * > * {
+  color: var(--text-primary);
+  border-bottom-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .table thead th {
+  color: var(--text-muted);
+  border-bottom-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .table tbody td {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] div.dt-search input {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] div.dt-search label,
+[data-theme="dark"] div.dt-length label,
+[data-theme="dark"] div.dt-info,
+[data-theme="dark"] .dataTables_wrapper label,
+[data-theme="dark"] .dataTables_info {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] div.dt-length select {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .dt-paging .page-link {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .dt-paging .page-item.active .page-link {
+  background-color: var(--color-brand);
+  border-color: var(--color-brand);
+  color: #fff;
+}
+
+[data-theme="dark"] .dt-paging .page-item.disabled .page-link {
+  background-color: var(--bg-sidebar);
+  color: var(--text-faint);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .CodeMirror {
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .CodeMirror-gutters {
+  background-color: var(--bg-card);
+}
+
+[data-theme="dark"] .CodeMirror-cursor {
+  border-left-color: var(--text-primary);
+}
+
+[data-theme="dark"] .CodeMirror-linenumber {
+  color: var(--text-faint);
+}
+
+[data-theme="dark"] .dropdown-menu {
+  background-color: var(--bg-card);
+  border-color: var(--border-ddd);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .dropdown-item {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .dropdown-item:hover {
+  background-color: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] #tabs {
+  background-color: var(--bg-nav) !important;
+}
+
+[data-theme="dark"] .card {
+  background-color: var(--bg-card);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .card-header {
+  background-color: var(--bg-sidebar);
+  border-bottom-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .alert-warning {
+  background-color: #332b00;
+  border-color: #664e00;
+  color: #ffc107;
+}
+
+[data-theme="dark"] .alert-info {
+  background-color: #00263a;
+  border-color: #004d7a;
+  color: #17a2b8;
+}
+
+[data-theme="dark"] .api-endpoint.active {
+  background-color: var(--color-brand-light);
+}
+
+[data-theme="dark"] .api-path {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .api-desc {
+  color: var(--text-muted);
+}
+
+[data-theme="dark"] .api-section-label {
+  color: var(--text-muted);
+}
+
+[data-theme="dark"] .api-detail-tag-docs {
+  background-color: var(--color-brand-light);
+  color: var(--color-brand) !important;
+}
+
+[data-theme="dark"] .api-detail-tag-docs:hover {
+  background-color: #1a4a5a;
+}
+
+[data-theme="dark"] .docs-sidebar-title {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .docs-sidebar-header {
+  background-color: var(--bg-sidebar-header);
+}
+
+[data-theme="dark"] .docs-open-external {
+  color: var(--text-muted);
+}
+
+[data-theme="dark"] .api-detail-path {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .api-detail-title {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .api-detail-response-code {
+  color: #4ade80;
+}
+
+[data-theme="dark"] .reference-example:hover {
+  background-color: var(--bg-hover);
+}
+
+[data-theme="dark"] .db-action-btn-danger:hover {
+  background-color: #3a1010;
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+[data-theme="dark"] .api-detail-tag-auth {
+  background-color: #3a2e00;
+  color: #ffc107;
+}
+
+[data-theme="dark"] .api-detail-tag-public {
+  background-color: #0a3a1a;
+  color: #28a745;
+}
+
+/* ApexCharts dark theme overrides */
+[data-theme="dark"] .apexcharts-text,
+[data-theme="dark"] .apexcharts-text tspan {
+  fill: var(--text-secondary) !important;
+}
+
+[data-theme="dark"] .apexcharts-datalabel-label {
+  fill: var(--text-muted) !important;
+}
+
+[data-theme="dark"] .apexcharts-datalabel-value {
+  fill: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .apexcharts-title-text {
+  fill: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .apexcharts-yaxis-label tspan,
+[data-theme="dark"] .apexcharts-xaxis-label tspan {
+  fill: var(--text-muted) !important;
+}
+
+[data-theme="dark"] .apexcharts-yaxis-title text {
+  fill: var(--text-muted) !important;
+}
+
+[data-theme="dark"] .apexcharts-legend-text {
+  color: var(--text-secondary) !important;
+}
+
+[data-theme="dark"] .apexcharts-gridline {
+  stroke: var(--border-ddd);
+}
+
+[data-theme="dark"] .apexcharts-grid-borders line {
+  stroke: var(--border-ddd);
+}
+
+[data-theme="dark"] .apexcharts-tooltip {
+  background: var(--bg-card) !important;
+  border-color: var(--border-ddd) !important;
+  color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .apexcharts-tooltip-title {
+  background: var(--bg-sidebar) !important;
+  border-bottom-color: var(--border-ddd) !important;
+  color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .apexcharts-tooltip-text {
+  color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .apexcharts-tooltip-series-group {
+  background: transparent !important;
+}
+
+[data-theme="dark"] .apexcharts-xaxistooltip,
+[data-theme="dark"] .apexcharts-yaxistooltip {
+  background: var(--bg-card) !important;
+  border-color: var(--border-ddd) !important;
+  color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] .apexcharts-xaxistooltip-text {
+  color: var(--text-primary) !important;
+}
+
+[data-theme="dark"] kbd {
+  background-color: var(--bg-sidebar);
+  color: var(--text-primary);
+  border: 1px solid var(--border-ddd);
+}
+
+[data-theme="dark"] .nav-tabs {
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .nav-tabs .nav-link {
+  border-color: transparent;
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .nav-tabs .nav-link:hover {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .nav-tabs .nav-link.active,
+[data-theme="dark"] .nav-tabs .nav-link.active.show {
+  border-color: var(--border-ddd) var(--border-ddd) var(--bg-active-tab);
+  background-color: var(--bg-active-tab);
+  color: var(--text-primary);
+}
+
+/* General dark theme text and form overrides */
+[data-theme="dark"] label {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] select {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] input[type="text"],
+[data-theme="dark"] input[type="number"],
+[data-theme="dark"] input[type="search"],
+[data-theme="dark"] input[type="password"],
+[data-theme="dark"] input[type="time"] {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] b,
+[data-theme="dark"] strong {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] span {
+  color: inherit;
+}
+
+[data-theme="dark"] .btn-outline-primary {
+  color: var(--color-brand);
+  border-color: var(--color-brand);
+}
+
+[data-theme="dark"] .btn-outline-primary:hover {
+  background-color: var(--color-brand);
+  color: #fff;
+}
+
+[data-theme="dark"] .btn-pill {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .result-stats {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] textarea {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] .card-header-tab.card-header {
+  background-color: var(--bg-card);
+  border-color: var(--border-ddd);
+}
+
+[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
+[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] p {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .form-check-label {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .btn-sm {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .btn-success {
+  color: #fff;
+}
+
+[data-theme="dark"] .form-label {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] small,
+[data-theme="dark"] .text-muted {
+  color: var(--text-muted) !important;
+}
+
+/* ===== Record Editor ===== */
+
+.record-editor-fields {
+  overflow-y: auto;
+  max-height: calc(100vh - 300px);
+  padding: 4px 0;
+}
+
+.record-editor-fields .form-label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 2px;
+}
+
+.record-editor-fields .form-control {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border: 1px solid var(--border-ddd);
+  font-size: 0.84rem;
+  margin-bottom: 10px;
+}
+
+.record-editor-fields .form-control:focus {
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 0.15rem rgba(0, 174, 238, 0.15);
+}
+
+.record-editor-fields textarea.form-control {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.8rem;
+  min-height: 60px;
+  resize: vertical;
+}
+
+.record-editor-buttons {
+  display: flex;
+  gap: 6px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-light);
+  flex-wrap: wrap;
+}
+
+.record-editor-overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: -420px;
+  width: 400px;
+  background-color: var(--bg-card);
+  border-left: 1px solid var(--border-main);
+  box-shadow: -4px 0 12px var(--shadow-dropdown);
+  overflow-y: auto;
+  padding: 16px;
+  transition: right 0.25s ease;
+  z-index: 10050;
+}
+
+.record-editor-overlay.open {
+  right: 0;
+}
+
+.record-editor-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  z-index: 101;
+}
+
+.record-editor-close:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-reference);
+}
+
+#recordEditorContainer {
+  height: 100%;
+  overflow-y: auto;
+  padding: 16px;
+  background-color: var(--bg-card);
+  border-left: 1px solid var(--border-main);
+}
+
+#graphPropertiesPanel.col-12 #recordEditorContainer {
+  max-width: 800px;
+  margin: 0 auto;
+  border-left: none;
 }
diff --git a/studio/src/main/resources/static/database.html b/studio/src/main/resources/static/database.html
index 5b0194cf53..b8279ef192 100644
--- a/studio/src/main/resources/static/database.html
+++ b/studio/src/main/resources/static/database.html
@@ -1,161 +1,108 @@
-<div class="tab-pane fade" id="tab-database" role="tabpanel">
-  <div class="row">
-    <div class="col-12">
-      <h4><i class="fa fa-database"></i> Database</h4>
+<div class="tab-pane fade d-flex flex-column" id="tab-database" role="tabpanel">
+  <div class="d-flex align-items-center justify-content-between flex-shrink-0" style="padding: 10px 12px 6px;">
+    <div class="d-flex align-items-center gap-2">
+      <i class="fa fa-database" style="font-size: 1.2rem; color: #00aeee;"></i>
+      <label>Connected as&nbsp;</label><label id="databaseUser"></label>@
+      <select id="schemaInputDatabase" class="inputDatabase form-select form-select-sm" style="width: auto; display: inline-block;"></select>
+    </div>
+    <div class="d-flex gap-2">
+      <button class="btn btn-sm db-action-btn" onclick="createDatabase()"><i class="fa fa-plus"></i> Create</button>
+      <button class="btn btn-sm db-action-btn db-action-btn-danger" onclick="dropDatabase()"><i class="fa fa-trash"></i> Drop</button>
+      <button class="btn btn-sm db-action-btn" onclick="resetDatabase()"><i class="fa fa-rotate"></i> Reset</button>
+      <button class="btn btn-sm db-action-btn" onclick="backupDatabase()"><i class="fa fa-box-archive"></i> Backup</button>
     </div>
   </div>
 
-  <div class="d-flex justify-content-between">
-    <div>
-      <div class="form-inline">
-        <div class="form-group">
-          <label>Connected as&nbsp;</label><label for="schemaInputDatabase" id="databaseUser"></label>@
-          <select id="schemaInputDatabase" class="inputDatabase form-select"></select>
+  <ul class="nav nav-tabs flex-shrink-0" id="tabs-database" style="padding: 0 12px;">
+    <li class="nav-item"><a data-toggle="tab" href="#tab-schema" class="active show nav-link" id="tab-schema-sel">Schema</a></li>
+    <li class="nav-item"><a data-toggle="tab" href="#tab-db-settings" class="nav-link" id="tab-db-settings-sel">Settings</a></li>
+    <li class="nav-item"><a data-toggle="tab" href="#tab-db-backup" class="nav-link" id="tab-db-backup-sel">Backup</a></li>
+  </ul>
+
+  <div class="tab-content" style="flex: 1; min-height: 0; position: relative;">
+    <!-- Schema Tab -->
+    <div class="tab-pane fade show active d-flex flex-column" id="tab-schema" role="tabpanel">
+      <div class="d-flex" style="flex: 1; min-height: 0;">
+        <!-- Type Badge Sidebar -->
+        <div id="dbTypeSidebar">
+          <div class="sidebar-header">
+            <span class="sidebar-title">Types</span>
+            <button class="btn btn-sm btn-light sidebar-refresh-btn" onclick="displaySchema()" title="Refresh">
+              <i class="fa fa-sync"></i>
+            </button>
+          </div>
+          <div id="dbTypeBadges">
+            <div class="sidebar-empty">Loading...</div>
+          </div>
+        </div>
+        <!-- Type Detail Panel -->
+        <div id="dbTypeDetail" style="flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px;">
+          <div class="db-type-empty">
+            <i class="fa fa-database" style="font-size: 2rem; color: #ddd; margin-bottom: 12px; display: block;"></i>
+            Select a type from the sidebar to view its schema.
+          </div>
         </div>
       </div>
     </div>
-    <div>
-      <button class="btn btn-pill" onclick="createDatabase()"><i class="fa fa-plus"></i> Create</button>
-      <button class="btn btn-pill" onclick="dropDatabase()"><i class="fa fa-minus"></i> Drop</button>
-      <button class="btn btn-pill" onclick="resetDatabase()"><i class="fa fa-sync"></i> Reset</button>
-      <button class="btn btn-pill" onclick="backupDatabase()"><i class="fa fa-archive"></i> Backup</button>
-    </div>
-  </div>
-
-  <hr />
 
-  <div class="row">
-    <div class="col-6">
-      <button class="btn btn-pill" onclick="updateDatabases()">Refresh <i class="fa fa-sync"></i></button>
-    </div>
-    <div class="col-6">
-      <ul class="nav nav-tabs text-center" id="tabs-database" style="float: right">
-        <li class="nav-item"><a data-toggle="tab" href="#tab-schema" class="active show nav-link" id="tab-schema-sel">Database Schema</a></li>
-        <li class="nav-item text-center"><a data-toggle="tab" href="#tab-db-settings" class="nav-link" id="tab-db-settings-sel">Database Settings</a></li>
-        <li class="nav-item text-center"><a data-toggle="tab" href="#tab-db-backup" class="nav-link" id="tab-db-backup-sel">Backup</a></li>
-      </ul>
+    <!-- Settings Tab -->
+    <div class="tab-pane fade" id="tab-db-settings" role="tabpanel">
+      <div style="padding: 16px;">
+        <div class="table-responsive">
+          <table id="dbSettings" class="table table-striped table-sm" style="width: 100%; table-layout: fixed"></table>
+        </div>
+      </div>
     </div>
-    <div class="col-12">
-      <div class="tab-content">
-        <div class="tab-pane fade show active" id="tab-schema" role="tabpanel">
-          <div class="col-12">
-            <ul class="nav nav-tabs" id="tabs-schema">
-              <li class="nav-item text-center"><a data-toggle="tab" href="#tab-vertices" class="active show nav-link" id="tab-vertices-sel">Vertices</a></li>
-              <li class="nav-item text-center"><a data-toggle="tab" href="#tab-edges" class="nav-link" id="tab-edges-sel">Edges</a></li>
-              <li class="nav-item text-center"><a data-toggle="tab" href="#tab-documents" class="nav-link" id="tab-documents-sel">Documents</a></li>
-            </ul>
-          </div>
-
-          <br />
 
+    <!-- Backup Tab -->
+    <div class="tab-pane fade" id="tab-db-backup" role="tabpanel">
+      <div style="padding: 16px;">
+        <div class="row mb-3">
           <div class="col-12">
-            <div class="tab-content">
-              <div class="tab-pane show active" id="tab-vertices" role="tabpanel">
-                <div class="row">
-                  <div class="col-12">
-                    <br />Below you can find the declared Vertex Types with the number of defined properties in parentheses. Click on the type on the left to
-                    display it properties and indexes.<br /><br />
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-2">
-                    <ul id="vTypesTabs" class="nav nav-tabs"></ul>
-                  </div>
-                  <div class="col-10">
-                    <div id="vTypesPanels" class="tab-content"></div>
-                  </div>
-                </div>
-              </div>
-              <div class="tab-pane fade" id="tab-edges" role="tabpanel">
-                <div class="row">
-                  <div class="col-12">
-                    <br />Below you can find the declared Edge Types with the number of defined properties in parentheses. Click on the type on the left to
-                    display it properties and indexes.<br /><br />
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-2">
-                    <ul id="eTypesTabs" class="nav nav-tabs"></ul>
-                  </div>
-                  <div class="col-10">
-                    <div id="eTypesPanels" class="tab-content"></div>
-                  </div>
-                </div>
-              </div>
-              <div class="tab-pane fade" id="tab-documents" role="tabpanel">
-                <div class="row">
-                  <div class="col-12">
-                    <br />Below you can find the declared Document Types with the number of defined properties in parentheses. Click on the type on the left to
-                    display it properties and indexes.<br /><br />
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-2">
-                    <ul id="dTypesTabs" class="nav nav-tabs"></ul>
-                  </div>
-                  <div class="col-10">
-                    <div id="dTypesPanels" class="tab-content"></div>
-                  </div>
-                </div>
+            <div class="d-flex justify-content-between align-items-center">
+              <h5><i class="fa fa-box-archive"></i> Database Backups</h5>
+              <div class="d-flex gap-2">
+                <button class="btn btn-sm db-action-btn" onclick="loadDatabaseBackups()">
+                  <i class="fa fa-sync"></i> Refresh
+                </button>
+                <button class="btn btn-sm db-action-btn" style="background-color: #00aeee; color: #fff;" onclick="triggerDatabaseBackup()">
+                  <i class="fa fa-play"></i> Backup Now
+                </button>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="tab-pane fade" id="tab-db-settings" role="tabpanel">
-          <div class="table-responsive">
-            <table id="dbSettings" class="table table-striped table-sm" style="width: 100%; table-layout: fixed"></table>
-          </div>
-        </div>
-
-        <div class="tab-pane fade" id="tab-db-backup" role="tabpanel">
-          <div class="row mb-3">
-            <div class="col-12">
-              <div class="d-flex justify-content-between align-items-center">
-                <h5><i class="fa fa-archive"></i> Database Backups</h5>
-                <div>
-                  <button class="btn btn-sm btn-outline-primary" onclick="loadDatabaseBackups()">
-                    <i class="fa fa-sync"></i> Refresh
-                  </button>
-                  <button class="btn btn-sm btn-success" onclick="triggerDatabaseBackup()">
-                    <i class="fa fa-play"></i> Backup Now
-                  </button>
+        <div class="card mb-3">
+          <div class="card-header">Backup Configuration &amp; Statistics</div>
+          <div class="card-body">
+            <div class="row">
+              <div class="col-md-8">
+                <div id="dbBackupConfigInfo">
+                  <p class="text-muted">Loading configuration...</p>
                 </div>
               </div>
-            </div>
-          </div>
-
-          <div class="card mb-3">
-            <div class="card-header">Backup Configuration &amp; Statistics</div>
-            <div class="card-body">
-              <div class="row">
-                <div class="col-md-8">
-                  <div id="dbBackupConfigInfo">
-                    <p class="text-muted">Loading configuration...</p>
+              <div class="col-md-4">
+                <div class="row text-center">
+                  <div class="col-6">
+                    <div class="text-muted small">Total Backups</div>
+                    <div class="fs-4" id="dbBackupTotalCount">-</div>
                   </div>
-                </div>
-                <div class="col-md-4">
-                  <div class="row text-center">
-                    <div class="col-6">
-                      <div class="text-muted small">Total Backups</div>
-                      <div class="fs-4" id="dbBackupTotalCount">-</div>
-                    </div>
-                    <div class="col-6">
-                      <div class="text-muted small">Total Size</div>
-                      <div class="fs-4" id="dbBackupTotalSize">-</div>
-                    </div>
+                  <div class="col-6">
+                    <div class="text-muted small">Total Size</div>
+                    <div class="fs-4" id="dbBackupTotalSize">-</div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
+        </div>
 
-          <div class="card">
-            <div class="card-header">Available Backups</div>
-            <div class="card-body">
-              <div class="table-responsive">
-                <table id="dbBackupList" class="table table-striped table-sm" style="width: 100%"></table>
-              </div>
+        <div class="card">
+          <div class="card-header">Available Backups</div>
+          <div class="card-body">
+            <div class="table-responsive">
+              <table id="dbBackupList" class="table table-striped table-sm" style="width: 100%"></table>
             </div>
           </div>
         </div>
diff --git a/studio/src/main/resources/static/index.html b/studio/src/main/resources/static/index.html
index 836913e3f0..93ce82cb31 100644
--- a/studio/src/main/resources/static/index.html
+++ b/studio/src/main/resources/static/index.html
@@ -7,6 +7,15 @@
     <title>ArcadeDB - The Next Generation Multi-Model DBMS</title>
     <link rel="shortcut icon" href="images/arcade-favico.png" type="image/png" />
 
+    <!-- Theme init (before CSS to prevent FOUC) -->
+    <script>
+    (function() {
+      var p = localStorage.getItem('studio-theme') || 'light';
+      var t = p === 'system' ? (matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light') : p;
+      document.documentElement.setAttribute('data-theme', t);
+    })();
+    </script>
+
     <!-- SECURE NPM-MANAGED CSS DEPENDENCIES -->
     <link rel="stylesheet" href="dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="dist/css/dataTables.bootstrap5.min.css" />
@@ -17,7 +26,10 @@
     <link rel="stylesheet" href="dist/css/neo.css" />
     <link rel="stylesheet" href="dist/css/fontawesome.min.css" />
     <link rel="stylesheet" href="dist/css/apexcharts.css" />
-    <link rel="stylesheet" href="dist/css/sweetalert2.min.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="css/studio.css" />
 
@@ -26,9 +38,6 @@
     <script src="dist/js/jquery.min.js"></script>
     <script src="dist/js/bootstrap.bundle.min.js"></script>
 
-    <!-- UI/Notification Libraries -->
-    <script src="dist/js/sweetalert2.all.min.js"></script>
-
     <!-- Code Editor -->
     <script src="dist/js/codemirror.js"></script>
     <script src="dist/js/cypher.js"></script>
@@ -66,69 +75,63 @@
     <!-- COMPATIBILITY LAYER -->
     <script>
       // Bootstrap 4 → 5 Compatibility Shims
-      // Map old Bootstrap 4 data attributes to Bootstrap 5
       $(document).ready(function() {
-        // Update data-toggle to data-bs-toggle
         $('[data-toggle]').each(function() {
           const toggle = $(this).attr('data-toggle');
           $(this).attr('data-bs-toggle', toggle);
         });
-
-        // Update data-dismiss to data-bs-dismiss
         $('[data-dismiss]').each(function() {
           const dismiss = $(this).attr('data-dismiss');
           $(this).attr('data-bs-dismiss', dismiss);
         });
       });
 
-      // Initialize SweetAlert2 Toast (replacement for Notyf)
-      let Toast = null;
-      let notificationQueue = [];
-      let isToastReady = false;
+      // Notification system using Bootstrap Toasts
+      var isToastReady = false;
+      var notificationQueue = [];
 
       document.addEventListener('DOMContentLoaded', function() {
-        // Initialize SweetAlert2 Toast mixin
-        Toast = Swal.mixin({
-          toast: true,
-          position: 'top-end',
-          showConfirmButton: false,
-          timer: 4000,
-          timerProgressBar: true,
-          didOpen: (toast) => {
-            toast.onmouseenter = Swal.stopTimer;
-            toast.onmouseleave = Swal.resumeTimer;
-          }
-        });
-
-        // Mark as ready and process queued notifications
         isToastReady = true;
         processNotificationQueue();
       });
 
       function processNotificationQueue() {
         while (notificationQueue.length > 0 && isToastReady) {
-          const notification = notificationQueue.shift();
-          showNotification(notification.title, notification.message, notification.type);
+          var n = notificationQueue.shift();
+          showNotification(n.title, n.message, n.type);
         }
       }
 
       function showNotification(title, message, type) {
-        const icon = (type === 'danger' || type === 'error') ? 'error' : 'success';
-        Toast.fire({
-          icon: icon,
-          title: title || '',
-          text: message
-        });
+        var container = document.getElementById('toastContainer');
+        if (!container) return;
+
+        var isError = (type === 'danger' || type === 'error');
+        var iconClass = isError ? 'fa-circle-exclamation' : (type === 'warning' ? 'fa-triangle-exclamation' : 'fa-circle-check');
+        var iconColor = isError ? '#dc3545' : (type === 'warning' ? '#ffc107' : '#28a745');
+
+        var toastEl = document.createElement('div');
+        toastEl.className = 'toast studio-toast';
+        toastEl.setAttribute('role', 'alert');
+        toastEl.innerHTML =
+          '<div class="toast-header">' +
+            '<i class="fa ' + iconClass + ' me-2" style="color:' + iconColor + '"></i>' +
+            '<strong class="me-auto">' + (title || '') + '</strong>' +
+            '<button type="button" class="btn-close" data-bs-dismiss="toast"></button>' +
+          '</div>' +
+          '<div class="toast-body">' + (message || '') + '</div>';
+
+        container.appendChild(toastEl);
+        var toast = new bootstrap.Toast(toastEl, { delay: 3500 });
+        toast.show();
+        toastEl.addEventListener('hidden.bs.toast', function() { toastEl.remove(); });
       }
 
-      // Global compatibility function for notifications
       function globalNotify(title, message, type) {
         if (!isToastReady) {
-          // Queue notification for later processing
-          notificationQueue.push({ title, message, type });
+          notificationQueue.push({ title: title, message: message, type: type });
           return;
         }
-
         showNotification(title, message, type);
       }
     </script>
@@ -141,6 +144,7 @@
     <script src="js/studio-graph.js"></script>
     <script src="js/studio-graph-widget.js"></script>
     <script src="js/studio-graph-functions.js"></script>
+    <script src="js/studio-record-editor.js"></script>
   </head>
   <body>
     <div class="container" id="welcomePanel">
@@ -154,12 +158,12 @@
       </div>
     </div>
 
-    <div id="studioPanel" class="card-hover-shadow-2x mb-3 card" style="display: none">
+    <div id="studioPanel" class="card-hover-shadow-2x card" style="display: none">
       <div class="card-header-tab card-header">
         <div class="row">
           <div class="col-1">
-            <ul class="nav nav-tabs flex-column" id="tabs" style="height: 100%; background-color: white">
-              <li class="nav-item text-center" style="padding: 5px 0px"><img src="images/arcadedb-logo-mini.png" style="width: 100%" /></li>
+            <ul class="nav nav-tabs flex-column" id="tabs" style="height: 100%">
+              <li class="nav-item text-center" style="padding: 8px 6px"><img src="images/arcadedb-logo-mini.png" style="width: 80%" /></li>
               <li class="nav-item pt-3">
                 <a data-bs-toggle="tab" href="#tab-query" class="vertical-tab nav-link active show" id="tab-query-sel">
                   <center>
@@ -208,6 +212,18 @@
                   </center>
                 </a>
               </li>
+              <!-- Spacer pushes Settings + Logout to bottom -->
+              <li style="flex: 1;"></li>
+              <!-- Settings -->
+              <li class="nav-item" style="border-top: 1px solid var(--border-main);">
+                <a data-bs-toggle="tab" href="#tab-settings" class="vertical-tab nav-link" id="tab-settings-sel">
+                  <center>
+                    <i class="fa fa-gear" style="font-size: 1.5rem;"></i>
+                    <div class="nav-label">Settings</div>
+                  </center>
+                </a>
+              </li>
+              <!-- Logout (pinned bottom) -->
               <li class="nav-item">
                 <a
                   href="javascript:logout()"
@@ -225,7 +241,7 @@
 
           <div class="col-11">
             <div class="tab-content">
-              ${include:query.html} ${include:database.html} ${include:server.html} ${include:cluster.html} ${include:api.html} ${include:resources.html}
+              ${include:query.html} ${include:database.html} ${include:server.html} ${include:cluster.html} ${include:api.html} ${include:resources.html} ${include:settings.html}
             </div>
           </div>
         </div>
@@ -242,9 +258,26 @@ <h5 class="modal-title" id="popupLabel"></h5>
         </div>
       </div>
     </div>
-    ${include:popup-login.html}
 
-    <div style="text-align: center; vertical-align: bottom">Copyright 2021-present <a href="https://arcadedb.com" rel="nofollow">Arcade Data Ltd</a></div>
+    <!-- Global reusable modal -->
+    <div class="modal fade" id="globalModal" tabindex="-1" style="z-index: 10100">
+      <div class="modal-dialog" id="globalModalDialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <span id="globalModalIcon" class="me-2"></span>
+            <h5 class="modal-title" id="globalModalLabel"></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+          </div>
+          <div class="modal-body" id="globalModalBody"></div>
+          <div class="modal-footer" id="globalModalFooter"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Toast container -->
+    <div id="toastContainer" class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 10500;"></div>
+
+    ${include:popup-login.html}
 
     <script>
       var studioCurrentTab = "query";
@@ -273,6 +306,8 @@ <h5 class="modal-title" id="popupLabel"></h5>
             studioCurrentTab = "api";
           } else if (activeTab == "tab-resources-sel") {
             studioCurrentTab = "resources";
+          } else if (activeTab == "tab-settings-sel") {
+            studioCurrentTab = "settings";
           }
         });
 
@@ -282,7 +317,6 @@ <h5 class="modal-title" id="popupLabel"></h5>
 
         // Check for existing session in localStorage
         if (initSessionFromStorage()) {
-          // Session found, try to use it
           console.log("Found stored session, attempting auto-login");
           updateDatabases(function () {
             console.log("Auto-login successful, initializing query editor");
diff --git a/studio/src/main/resources/static/js/studio-cluster.js b/studio/src/main/resources/static/js/studio-cluster.js
index 51b9011343..9b8b4c6a83 100644
--- a/studio/src/main/resources/static/js/studio-cluster.js
+++ b/studio/src/main/resources/static/js/studio-cluster.js
@@ -148,51 +148,36 @@ function alignDatabase(dbName) {
 function connectToCluster() {
   let lastClusterServerAddress = globalStorageLoad("lastClusterServerAddress", "");
 
-  let html =
-    "<label for='clusterServerAddress'>Enter the server name/ip-address and the optional port with the format &lt;ip&gt;[:&lt;port&gt;].<br>The default port for replication is 2424.&nbsp;&nbsp;</label><input onkeydown='if (event.which === 13) Swal.clickConfirm()' id='clusterServerAddress' value='" +
-    lastClusterServerAddress +
-    "'>";
-
-  Swal.fire({
-    title: "Connect to a cluster",
-    html: html,
-    inputAttributes: {
-      autocapitalize: "off",
-    },
-    confirmButtonColor: "#3ac47d",
-    cancelButtonColor: "red",
-    showCancelButton: true,
-    confirmButtonText: "Send",
-  }).then((result) => {
-    if (result.value) {
-      let serverAddress = encodeURI($("#clusterServerAddress").val().trim());
-      if (serverAddress == "") {
-        globalNotify("Error", "Server address is empty", "danger");
-        return;
-      }
-
-      globalStorageSave("lastClusterServerAddress", serverAddress);
-
-      jQuery
-        .ajax({
-          type: "POST",
-          url: "api/v1/server",
-          data: "{ 'command': 'connect cluster " + serverAddress + "' }",
-          beforeSend: function (xhr) {
-            xhr.setRequestHeader("Authorization", globalCredentials);
-          },
-        })
-        .done(function (data) {
-          globalNotify("Connection to the cluster", "The command was correctly sent to the server", "success");
-          updateCluster();
-        })
-        .fail(function (jqXHR, textStatus, errorThrown) {
-          globalNotifyError(jqXHR.responseText);
-        });
+  let html = "<label for='clusterServerAddress'>Enter the server name/ip-address and the optional port with the format &lt;ip&gt;[:&lt;port&gt;].<br>The default port for replication is 2424.</label>" +
+    "<input class='form-control mt-2' id='clusterServerAddress' value='" + escapeHtml(lastClusterServerAddress) + "' " +
+    "onkeydown='if (event.which === 13) document.getElementById(\"globalModalConfirmBtn\").click()'>";
+
+  globalPrompt("Connect to a cluster", html, "Connect", function() {
+    let serverAddress = encodeURI($("#clusterServerAddress").val().trim());
+    if (serverAddress == "") {
+      globalNotify("Error", "Server address is empty", "danger");
+      return;
     }
-  });
 
-  $("#clusterServerAddress").focus();
+    globalStorageSave("lastClusterServerAddress", serverAddress);
+
+    jQuery
+      .ajax({
+        type: "POST",
+        url: "api/v1/server",
+        data: "{ 'command': 'connect cluster " + serverAddress + "' }",
+        beforeSend: function (xhr) {
+          xhr.setRequestHeader("Authorization", globalCredentials);
+        },
+      })
+      .done(function (data) {
+        globalNotify("Connection to the cluster", "The command was correctly sent to the server", "success");
+        updateCluster();
+      })
+      .fail(function (jqXHR, textStatus, errorThrown) {
+        globalNotifyError(jqXHR.responseText);
+      });
+  });
 }
 
 function executeServerCommand(command, successMessage) {
diff --git a/studio/src/main/resources/static/js/studio-database.js b/studio/src/main/resources/static/js/studio-database.js
index b6fc54c89a..13ea7b3dd5 100644
--- a/studio/src/main/resources/static/js/studio-database.js
+++ b/studio/src/main/resources/static/js/studio-database.js
@@ -3,6 +3,7 @@ var globalResultset = null;
 var globalGraphMaxResult = 1000;
 var globalCredentials = null;
 var globalUsername = null;
+var globalSchemaTypes = null;
 
 var SESSION_STORAGE_KEY = "arcadedb-session";
 var USERNAME_STORAGE_KEY = "arcadedb-username";
@@ -262,7 +263,16 @@ function updateDatabases(callback) {
       console.log("Set user to:", username);
 
       // CRITICAL: Always hide login and show studio, even if other operations fail
-      $("#loginPopup").modal("hide");
+      var loginModal = bootstrap.Modal.getInstance(document.getElementById("loginPopup"));
+      if (loginModal)
+        loginModal.hide();
+      // Ensure no stale backdrop remains (Bootstrap 5 can leave orphaned backdrops)
+      setTimeout(function() {
+        document.querySelectorAll(".modal-backdrop").forEach(function(el) { el.remove(); });
+        document.body.classList.remove("modal-open");
+        document.body.style.removeProperty("overflow");
+        document.body.style.removeProperty("padding-right");
+      }, 300);
       $("#welcomePanel").hide();
       $("#studioPanel").show();
       console.log("UI updated - login popup hidden, studio panel shown");
@@ -306,14 +316,10 @@ function updateDatabases(callback) {
         globalCredentials = null;
         globalUsername = null;
 
-        // Show login popup
+        // Silently redirect to login - no error popup needed
         $("#studioPanel").hide();
         $("#welcomePanel").show();
-        $("#loginPopup").modal("show");
-
-        if (typeof globalNotify === 'function') {
-          globalNotify("Session Expired", "Your session has expired. Please log in again.", "danger");
-        }
+        showLoginPopup();
         return;
       }
 
@@ -346,48 +352,34 @@ function updateDatabases(callback) {
 }
 
 function createDatabase() {
-  let html =
-    "<label for='inputCreateDatabaseName'>Enter the database name:&nbsp;&nbsp;</label><input onkeydown='if (event.which === 13) Swal.clickConfirm()' id='inputCreateDatabaseName'>";
-
-  Swal.fire({
-    title: "Create a new database",
-    html: html,
-    inputAttributes: {
-      autocapitalize: "off",
-    },
-    confirmButtonColor: "#3ac47d",
-    cancelButtonColor: "red",
-    showCancelButton: true,
-    confirmButtonText: "Send",
-  }).then((result) => {
-    if (result.value) {
-      let database = encodeURI($("#inputCreateDatabaseName").val().trim());
-      if (database == "") {
-        globalNotify("Error", "Database name empty", "danger");
-        return;
-      }
-
-      jQuery
-        .ajax({
-          type: "POST",
-          url: "api/v1/server",
-          data: "{ 'command': 'create database " + database + "' }",
-          beforeSend: function (xhr) {
-            xhr.setRequestHeader("Authorization", globalCredentials);
-          },
-        })
-        .done(function (data) {
-          $(".inputDatabase").val(database);
-          $("#schemaInputDatabase").val(database);
-          updateDatabases();
-        })
-        .fail(function (jqXHR, textStatus, errorThrown) {
-          globalNotifyError(jqXHR.responseText);
-        });
+  let html = "<label for='inputCreateDatabaseName'>Enter the database name:</label>" +
+    "<input class='form-control mt-2' id='inputCreateDatabaseName' onkeydown='if (event.which === 13) document.getElementById(\"globalModalConfirmBtn\").click()'>";
+
+  globalPrompt("Create a new database", html, "Create", function() {
+    let database = encodeURI($("#inputCreateDatabaseName").val().trim());
+    if (database == "") {
+      globalNotify("Error", "Database name empty", "danger");
+      return;
     }
-  });
 
-  $("#inputCreateDatabaseName").focus();
+    jQuery
+      .ajax({
+        type: "POST",
+        url: "api/v1/server",
+        data: "{ 'command': 'create database " + database + "' }",
+        beforeSend: function (xhr) {
+          xhr.setRequestHeader("Authorization", globalCredentials);
+        },
+      })
+      .done(function (data) {
+        $(".inputDatabase").val(database);
+        $("#schemaInputDatabase").val(database);
+        updateDatabases();
+      })
+      .fail(function (jqXHR, textStatus, errorThrown) {
+        globalNotifyError(jqXHR.responseText);
+      });
+  });
 }
 
 function dropDatabase() {
@@ -601,36 +593,415 @@ function getQueryHistory() {
   return queryHistory;
 }
 
-function loadQueryHistory() {
-  $("#inputHistory").html("");
-  $("#inputHistory").append("<option value='-1'>History</option>");
+// Sidebar panel state
+var sidebarPanelsLoaded = {};
+var activeSidebarPanel = "overview";
+
+function initSidebarPanels() {
+  sidebarPanelsLoaded = { overview: true };
+  activeSidebarPanel = "overview";
+}
+
+function switchSidebarPanel(panelName) {
+  $(".sidebar-panel").removeClass("active");
+  $(".icon-sidebar-btn").removeClass("active");
+
+  $("#sidebarPanel" + panelName.charAt(0).toUpperCase() + panelName.slice(1)).addClass("active");
+  $(".icon-sidebar-btn[data-panel='" + panelName + "']").addClass("active");
+
+  activeSidebarPanel = panelName;
+
+  // Update header title and refresh button
+  var titles = { overview: "Database Info", saved: "Saved Queries", history: "History", reference: "Reference", settings: "Settings" };
+  $("#sidebarPanelTitle").text(titles[panelName] || panelName);
+
+  // Show refresh button only for overview
+  if (panelName == "overview")
+    $("#sidebarRefreshBtn").show();
+  else
+    $("#sidebarRefreshBtn").hide();
+
+  // Lazy-load panel content
+  if (!sidebarPanelsLoaded[panelName]) {
+    sidebarPanelsLoaded[panelName] = true;
+    if (panelName == "saved") populateSavedQueriesPanel();
+    else if (panelName == "history") populateHistoryPanel();
+    else if (panelName == "reference") populateReferencePanel();
+    else if (panelName == "settings") populateSettingsPanel();
+  }
+}
+
+function refreshActiveSidebarPanel() {
+  if (activeSidebarPanel == "overview") {
+    populateQuerySidebar();
+  } else if (activeSidebarPanel == "history") {
+    sidebarPanelsLoaded.history = true;
+    populateHistoryPanel();
+  }
+}
+
+// --- Saved Queries ---
+
+function getSavedQueries() {
+  let raw = globalStorageLoad("database.saved.queries");
+  if (raw == null) return [];
+  try { return JSON.parse(raw); } catch (e) { return []; }
+}
+
+function storeSavedQueries(arr) {
+  globalStorageSave("database.saved.queries", JSON.stringify(arr));
+}
+
+function populateSavedQueriesPanel() {
+  let container = $("#sidebarPanelSaved");
+  let queries = getSavedQueries();
+
+  let html = "<div class='sidebar-action-bar'>";
+  html += "<span style='font-size:0.75rem;color:#777;'>" + queries.length + " saved</span>";
+  html += "</div>";
+
+  if (queries.length == 0) {
+    html += "<div class='sidebar-empty'><i class='fa fa-bookmark' style='font-size:1.5rem;color:#ccc !important;margin-bottom:8px;display:block'></i>No saved queries yet.<br><small>Use the <i class='fa fa-bookmark'></i> button in the editor to save a query.</small></div>";
+    container.html(html);
+    return;
+  }
+
+  for (let i = 0; i < queries.length; i++) {
+    let q = queries[i];
+    let name = escapeHtml(q.name);
+    let cmd = escapeHtml(q.c || "");
+    let lang = escapeHtml(q.l || "sql");
+    html += "<div class='saved-query-entry' onclick='executeSavedQuery(" + i + ")'>";
+    html += "<div class='saved-query-name'><span>" + name + "<span class='saved-query-lang'>" + lang + "</span></span>";
+    html += "<span class='saved-query-delete' onclick='event.stopPropagation(); deleteSavedQuery(" + i + ")' title='Delete'><i class='fa fa-times'></i></span></div>";
+    html += "<div class='saved-query-preview'>" + cmd + "</div>";
+    html += "</div>";
+  }
+
+  container.html(html);
+}
+
+function saveCurrentQuery() {
+  let command = editor.getValue();
+  let language = $("#inputLanguage").val();
+  let database = getCurrentDatabase();
 
+  if (!command || command.trim() == "") {
+    globalNotify("Save Query", "Editor is empty - write a query first.", "warning");
+    return;
+  }
+
+  let html = "<label>Query name</label>" +
+    "<input class='form-control mt-2' id='inputSaveQueryName' placeholder='e.g. Get all users' " +
+    "onkeydown='if (event.which === 13) document.getElementById(\"globalModalConfirmBtn\").click()'>";
+
+  globalPrompt("Save Query", html, "Save", function() {
+    let name = $("#inputSaveQueryName").val();
+    if (!name || name.trim() == "") {
+      globalNotify("Error", "Please enter a name", "warning");
+      return;
+    }
+    let queries = getSavedQueries();
+    queries.unshift({ name: name.trim(), l: language, c: command, d: database });
+    storeSavedQueries(queries);
+    populateSavedQueriesPanel();
+    globalNotify("Saved", "Query saved as '" + escapeHtml(name.trim()) + "'", "success");
+  });
+}
+
+function executeSavedQuery(index) {
+  let queries = getSavedQueries();
+  let q = queries[index];
+  if (q) executeCommand(q.l, q.c);
+}
+
+function deleteSavedQuery(index) {
+  let queries = getSavedQueries();
+  let name = queries[index] ? queries[index].name : "";
+  queries.splice(index, 1);
+  storeSavedQueries(queries);
+  populateSavedQueriesPanel();
+}
+
+// --- History Panel ---
+
+function populateHistoryPanel() {
+  let container = $("#sidebarPanelHistory");
   let queryHistory = getQueryHistory();
-  if (queryHistory != null && queryHistory.length > 0) {
-    let database = escapeHtml(getCurrentDatabase());
-    for (let index = 0; index < queryHistory.length; ++index) {
-      let q = queryHistory[index];
-      if (q != null && q.d == database && q.l != null && q.c != null)
-        $("#inputHistory").append("<option value='" + index + "'>(" + q.l + ") " + q.c + "</option>");
+  let database = escapeHtml(getCurrentDatabase());
+
+  // Filter for current database
+  let filtered = [];
+  for (let i = 0; i < queryHistory.length; i++) {
+    let q = queryHistory[i];
+    if (q != null && q.d == database && q.l != null && q.c != null)
+      filtered.push({ index: i, q: q });
+  }
+
+  let html = "<div class='history-toolbar'>";
+  html += "<div class='form-check'><input class='form-check-input history-checkbox' type='checkbox' id='historySelectAll' onchange='toggleSelectAllHistory()'>";
+  html += "<label class='form-check-label' for='historySelectAll' style='font-size:0.72rem;'>All</label></div>";
+  html += "<button class='sidebar-action-btn' onclick='deleteSelectedHistory()' title='Delete selected'><i class='fa fa-trash'></i></button>";
+  html += "</div>";
+  html += "<input type='text' class='history-search' id='historySearchInput' placeholder='Search history...' oninput='filterHistoryEntries()'>";
+
+  if (filtered.length == 0) {
+    html += "<div class='sidebar-empty'><i class='fa fa-clock' style='font-size:1.5rem;color:#ccc !important;margin-bottom:8px;display:block'></i>No history yet.<br><small>Run a query to see it here.</small></div>";
+    container.html(html);
+    return;
+  }
+
+  // Group by date
+  let groups = {};
+  let noDateEntries = [];
+  for (let i = 0; i < filtered.length; i++) {
+    let entry = filtered[i];
+    if (entry.q.t) {
+      let d = new Date(entry.q.t);
+      let dateKey = d.toDateString();
+      if (!groups[dateKey]) groups[dateKey] = [];
+      groups[dateKey].push(entry);
+    } else
+      noDateEntries.push(entry);
+  }
+
+  let today = new Date().toDateString();
+  let yesterday = new Date(Date.now() - 86400000).toDateString();
+
+  // Render grouped entries
+  let dateKeys = Object.keys(groups);
+  for (let di = 0; di < dateKeys.length; di++) {
+    let dateKey = dateKeys[di];
+    let label = dateKey;
+    if (dateKey == today) label = "Today";
+    else if (dateKey == yesterday) label = "Yesterday";
+    html += "<div class='history-date-group'>" + escapeHtml(label) + "</div>";
+    html += renderHistoryEntries(groups[dateKey]);
+  }
+
+  if (noDateEntries.length > 0) {
+    if (dateKeys.length > 0)
+      html += "<div class='history-date-group'>Older</div>";
+    html += renderHistoryEntries(noDateEntries);
+  }
+
+  container.html(html);
+}
+
+function renderHistoryEntries(entries) {
+  let html = "";
+  for (let i = 0; i < entries.length; i++) {
+    let entry = entries[i];
+    let q = entry.q;
+    let idx = entry.index;
+    let lang = escapeHtml(q.l || "sql");
+    let cmd = escapeHtml(q.c || "");
+    let time = "";
+    if (q.t) {
+      let d = new Date(q.t);
+      time = ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);
     }
+
+    html += "<div class='history-entry' data-index='" + idx + "' data-cmd='" + cmd.toLowerCase() + "'>";
+    html += "<input type='checkbox' class='history-checkbox history-item-check' data-index='" + idx + "' onclick='event.stopPropagation()'>";
+    html += "<div class='history-entry-content' onclick='executeHistoryEntry(" + idx + ")'>";
+    html += "<div class='history-meta'>";
+    if (time) html += "<span class='history-time'>" + time + "</span>";
+    html += "<span class='history-lang'>" + lang + "</span>";
+    html += "</div>";
+    html += "<div class='history-cmd'>" + cmd + "</div>";
+    html += "</div></div>";
   }
+  return html;
 }
 
-function copyQueryFromHistory() {
-  let index = $("#inputHistory").val();
-  if (index == -1) return;
+function executeHistoryEntry(index) {
+  let queryHistory = getQueryHistory();
+  let q = queryHistory[index];
+  if (q) executeCommand(q.l, q.c);
+}
 
-  if (index != "") {
-    let queryHistory = getQueryHistory();
-    let q = queryHistory[index];
-    if (q != null) {
-      setCurrentDatabase(q.d);
-      $("#inputLanguage").val(q.l);
-      editor.setValue(q.c);
+function filterHistoryEntries() {
+  let search = ($("#historySearchInput").val() || "").toLowerCase();
+  $("#sidebarPanelHistory .history-entry").each(function () {
+    let cmd = $(this).attr("data-cmd") || "";
+    if (search == "" || cmd.indexOf(search) >= 0)
+      $(this).show();
+    else
+      $(this).hide();
+  });
+}
+
+function toggleSelectAllHistory() {
+  let checked = $("#historySelectAll").prop("checked");
+  $(".history-item-check:visible").prop("checked", checked);
+}
+
+function deleteSelectedHistory() {
+  let indices = [];
+  $(".history-item-check:checked").each(function () {
+    indices.push(parseInt($(this).attr("data-index")));
+  });
+  if (indices.length == 0) {
+    globalNotify("History", "No entries selected.", "warning");
+    return;
+  }
+
+  // Sort descending so splicing doesn't shift indices
+  indices.sort(function (a, b) { return b - a; });
+
+  let queryHistory = getQueryHistory();
+  for (let i = 0; i < indices.length; i++)
+    queryHistory.splice(indices[i], 1);
+
+  globalStorageSave("database.query.history", JSON.stringify(queryHistory));
+  populateHistoryPanel();
+}
+
+// --- Reference Panel ---
+
+function populateReferencePanel() {
+  let container = $("#sidebarPanelReference");
+  let sections = [
+    {
+      title: "SQL", lang: "sql",
+      examples: [
+        { label: "SELECT", code: "SELECT * FROM MyType" },
+        { label: "SELECT with WHERE", code: "SELECT * FROM MyType WHERE name = 'value'" },
+        { label: "INSERT", code: "INSERT INTO MyType SET name = 'value', age = 25" },
+        { label: "UPDATE", code: "UPDATE MyType SET name = 'new' WHERE name = 'old'" },
+        { label: "DELETE", code: "DELETE FROM MyType WHERE name = 'value'" },
+        { label: "CREATE TYPE (Vertex)", code: "CREATE VERTEX TYPE MyVertex" },
+        { label: "CREATE TYPE (Edge)", code: "CREATE EDGE TYPE MyEdge" },
+        { label: "CREATE TYPE (Document)", code: "CREATE DOCUMENT TYPE MyDoc" },
+        { label: "CREATE PROPERTY", code: "CREATE PROPERTY MyType.name STRING" },
+        { label: "CREATE INDEX", code: "CREATE INDEX ON MyType (name) UNIQUE" },
+        { label: "CREATE EDGE", code: "CREATE EDGE MyEdge FROM #1:0 TO #2:0 SET weight = 1.0" },
+        { label: "MATCH", code: "MATCH {type: Person, as: p} -FriendOf-> {as: f} RETURN p, f" }
+      ]
+    },
+    {
+      title: "Cypher", lang: "opencypher",
+      examples: [
+        { label: "MATCH all", code: "MATCH (n) RETURN n" },
+        { label: "MATCH with label", code: "MATCH (n:Person) RETURN n" },
+        { label: "MATCH relationship", code: "MATCH (a:Person)-[:KNOWS]->(b:Person) RETURN a, b" },
+        { label: "CREATE node", code: "CREATE (n:Person {name: 'John', age: 30}) RETURN n" },
+        { label: "WHERE clause", code: "MATCH (n:Person) WHERE n.age > 25 RETURN n.name" }
+      ]
+    },
+    {
+      title: "Gremlin", lang: "gremlin",
+      examples: [
+        { label: "All vertices", code: "g.V()" },
+        { label: "All edges", code: "g.E()" },
+        { label: "Filter by property", code: "g.V().has('name', 'John')" },
+        { label: "Outgoing edges", code: "g.V().has('name', 'John').out('knows')" },
+        { label: "Incoming edges", code: "g.V().has('name', 'John').in('knows')" },
+        { label: "Path traversal", code: "g.V().has('name', 'John').out().out().path()" }
+      ]
+    },
+    {
+      title: "GraphQL", lang: "graphql",
+      examples: [
+        { label: "Query type", code: "{ bookByName(name: \"Harry\") { name, author } }" }
+      ]
+    }
+  ];
+
+  let html = "";
+  for (let s = 0; s < sections.length; s++) {
+    let sec = sections[s];
+    html += "<div class='reference-section'>";
+    html += "<div class='reference-section-header' onclick='toggleReferenceSection(this)'><span>" + sec.title + "</span><i class='fa fa-chevron-right'></i></div>";
+    html += "<div class='reference-section-body'>";
+    for (let e = 0; e < sec.examples.length; e++) {
+      let ex = sec.examples[e];
+      let escapedCode = escapeHtml(ex.code).replace(/'/g, "&#39;");
+      html += "<div class='reference-example' title='" + escapeHtml(ex.label) + "' onclick='pasteReferenceExample(\"" + escapedCode.replace(/"/g, "&quot;") + "\", \"" + sec.lang + "\")'>";
+      html += "<small style='color:#999;font-family:inherit;'>" + escapeHtml(ex.label) + "</small><br>";
+      html += escapeHtml(ex.code);
+      html += "</div>";
     }
+    html += "</div></div>";
+  }
+
+  container.html(html);
+}
+
+function toggleReferenceSection(header) {
+  let body = $(header).next(".reference-section-body");
+  let icon = $(header).find("i.fa-chevron-right");
+  body.toggleClass("open");
+  icon.toggleClass("open");
+}
+
+function pasteReferenceExample(code, lang) {
+  // Decode HTML entities back to plain text
+  let tmp = document.createElement("textarea");
+  tmp.innerHTML = code;
+  let decoded = tmp.value;
+  if (lang) {
+    $("#inputLanguage").val(lang);
+    editor.setOption("mode", getEditorMode());
+  }
+  editor.setValue(decoded);
+  editor.focus();
+}
+
+// --- Settings Panel ---
+
+function populateSettingsPanel() {
+  let container = $("#sidebarPanelSettings");
+
+  let truncateSaved = globalStorageLoad("table.truncateColumns");
+  let truncateChecked = (truncateSaved == null || truncateSaved == "true") ? "checked" : "";
+
+  let fitSaved = globalStorageLoad("table.fitInPage");
+  let fitChecked = (fitSaved == null || fitSaved == "true") ? "checked" : "";
+
+  let currentLimit = $("#inputLimit").val() || "20";
+
+  let html = "<div class='settings-section'>";
+  html += "<div class='settings-section-header'>Table Settings</div>";
+  html += "<div class='settings-row'><label>Truncate long values</label>";
+  html += "<input type='checkbox' class='form-check-input' id='settingTruncate' " + truncateChecked + " onchange='applySidebarSetting(\"table.truncateColumns\", this.checked)'></div>";
+  html += "<div class='settings-row'><label>Fit table in page</label>";
+  html += "<input type='checkbox' class='form-check-input' id='settingFitPage' " + fitChecked + " onchange='applySidebarSetting(\"table.fitInPage\", this.checked)'></div>";
+  html += "</div>";
+
+  html += "<div class='settings-section'>";
+  html += "<div class='settings-section-header'>Query Defaults</div>";
+  html += "<div class='settings-row'><label>Default auto-limit</label>";
+  html += "<select id='settingDefaultLimit' onchange='applyDefaultLimit(this.value)'>";
+  let limits = [{ v: "20", l: "20" }, { v: "100", l: "100" }, { v: "500", l: "500" }, { v: "-1", l: "No limit" }];
+  for (let i = 0; i < limits.length; i++) {
+    let sel = limits[i].v == currentLimit ? " selected" : "";
+    html += "<option value='" + limits[i].v + "'" + sel + ">" + limits[i].l + "</option>";
   }
+  html += "</select></div>";
+  html += "</div>";
+
+  html += "<div class='settings-section'>";
+  html += "<div class='settings-section-header'>Keyboard Shortcuts</div>";
+  html += "<div style='font-size:0.75rem;color:#666;padding:0 2px;'>";
+  html += "<div style='margin-bottom:4px;'><kbd>Ctrl+Enter</kbd> Execute query</div>";
+  html += "<div style='margin-bottom:4px;'><kbd>Ctrl+Up</kbd> Previous history</div>";
+  html += "<div><kbd>Ctrl+Down</kbd> Next history</div>";
+  html += "</div></div>";
+
+  container.html(html);
+}
+
+function applySidebarSetting(key, value) {
+  globalStorageSave(key, value.toString());
+  // Re-render table if it's currently visible
+  let activeTab = $("#tabs-command .active").attr("id");
+  if (activeTab == "tab-table-sel") renderTable();
+}
 
-  $("#inputHistory").val(-1);
+function applyDefaultLimit(value) {
+  $("#inputLimit").val(value);
 }
 
 function executeCommand(language, query) {
@@ -670,10 +1041,11 @@ function executeCommand(language, query) {
   // REMOVE OLD QUERIES
   while (queryHistory.length > 25) queryHistory.pop();
 
-  queryHistory = [{ d: database, l: language, c: query }].concat(queryHistory);
+  queryHistory = [{ d: database, l: language, c: query, t: Date.now() }].concat(queryHistory);
   globalStorageSave("database.query.history", JSON.stringify(queryHistory));
 
-  loadQueryHistory();
+  // Refresh history panel if visible
+  if (activeSidebarPanel == "history") populateHistoryPanel();
 }
 
 function executeCommandTable() {
@@ -789,7 +1161,7 @@ function executeCommandGraph() {
     });
 }
 
-function displaySchema() {
+function fetchSchemaTypes(callback) {
   let database = getCurrentDatabase();
   if (database == null || database == "") return;
 
@@ -806,164 +1178,245 @@ function displaySchema() {
       },
     })
     .done(function (data) {
-      let tabVHtml = "";
-      let tabEHtml = "";
-      let tabDHtml = "";
+      globalSchemaTypes = data.result;
+      if (callback)
+        callback(data.result);
+      populateQuerySidebar();
+    })
+    .fail(function (jqXHR, textStatus, errorThrown) {
+      globalNotifyError(jqXHR.responseText);
+    })
+    .always(function (data) {
+      $("#executeSpinner").hide();
+    });
+}
 
-      let panelVHtml = "";
-      let panelEHtml = "";
-      let panelDHtml = "";
+function displaySchema() {
+  fetchSchemaTypes(function (types) {
+    // Build sub-types map
+    let subTypes = {};
+    for (let i in types) {
+      let row = types[i];
+      for (let ptidx in row.parentTypes) {
+        let pt = row.parentTypes[ptidx];
+        if (subTypes[pt] == null) subTypes[pt] = [];
+        subTypes[pt].push(row.name);
+      }
+    }
 
-      // BUILD SUB TYPES
-      let subTypes = {};
-      for (let i in data.result) {
-        let row = data.result[i];
+    // Store for later use by showTypeDetail
+    window._schemaSubTypes = subTypes;
+    window._schemaTypes = types;
 
-        for (ptidx in row.parentTypes) {
-          let pt = row.parentTypes[ptidx];
+    // Group types by category
+    let groups = { vertex: [], edge: [], document: [] };
+    for (let i in types) {
+      let row = types[i];
+      let cat = row.type == "vertex" ? "vertex" : (row.type == "edge" ? "edge" : "document");
+      groups[cat].push(row);
+    }
 
-          let array = subTypes[pt];
-          if (array == null) {
-            array = [];
-            subTypes[pt] = array;
-          }
-          array.push(row.name);
-        }
+    // Render badge sidebar
+    let sections = [
+      { key: "vertex",   label: "Vertices",  icon: "fa-circle-nodes" },
+      { key: "edge",     label: "Edges",     icon: "fa-right-left" },
+      { key: "document", label: "Documents", icon: "fa-file-lines" }
+    ];
+
+    let html = "";
+    let palette = sidebarBadgeColors;
+
+    for (let s = 0; s < sections.length; s++) {
+      let sec = sections[s];
+      let items = groups[sec.key];
+      if (items.length == 0) continue;
+
+      let total = 0;
+      for (let j = 0; j < items.length; j++) total += (items[j].records || 0);
+
+      html += "<div class='sidebar-section'>";
+      html += "<div class='sidebar-section-header'><i class='fa " + sec.icon + "'></i> " + sec.label + " <span class='sidebar-count'>(" + total.toLocaleString() + ")</span></div>";
+      html += "<div class='sidebar-badges'>";
+
+      let colors = palette[sec.key];
+      for (let j = 0; j < items.length; j++) {
+        let row = items[j];
+        let color = colors[j % colors.length];
+        let name = escapeHtml(row.name);
+        let records = (row.records || 0).toLocaleString();
+        html += "<a class='sidebar-badge' href='#' style='background-color: " + color + "' ";
+        html += "onclick='showTypeDetail(\"" + row.name.replace(/"/g, "&quot;") + "\"); return false;' ";
+        html += "title='" + name + " (" + records + " records)'>";
+        html += "<span class='sidebar-badge-name'>" + name + "</span>";
+        html += "<span class='sidebar-badge-count'>" + records + "</span>";
+        html += "</a>";
       }
 
-      for (let i in data.result) {
-        let row = data.result[i];
-        let tabName = row.name.replaceAll(":", "-");
-
-        let tabHtml =
-          "<li class='nav-item' style='height: 32px; width: 240px'><a data-bs-toggle='tab' href='#tab-" +
-          tabName +
-          "' class='nav-link vertical-tab" +
-          (i == 0 ? " active show" : "");
-        tabHtml += "' id='tab-" + tabName + "-sel'>" + row.name + "</a></li>";
-
-        let panelHtml = "<div class='tab-pane fade" + (i == 0 ? " active show" : "") + "' id='tab-" + tabName + "' role='tabpanel'>";
-
-        panelHtml += "<h3>" + row.name + " <span style='font-size: 60%'>(" + row.records + " records)</span></h3>";
-        if (row.parentTypes != "") {
-          panelHtml += "Super Types: <b>";
-          for (ptidx in row.parentTypes) {
-            if (ptidx > 0) panelHtml += ", ";
-            let pt = row.parentTypes[ptidx];
-            let ptName = pt.replaceAll(":", "-");
-
-            panelHtml += "<b><a href='#' onclick=\"globalActivateTab('tab-" + ptName + "')\">" + pt + "</a></b>";
-          }
-          panelHtml += "</b>";
-        }
+      html += "</div></div>";
+    }
 
-        let typeSubTypes = subTypes[row.name];
-        if (typeSubTypes != null) {
-          panelHtml += "<br>Sub Types: <b>";
-          for (stidx in typeSubTypes) {
-            if (stidx > 0) panelHtml += ", ";
-            let st = typeSubTypes[stidx];
-            let stName = st.replaceAll(":", "-");
+    if (html == "")
+      html = "<div class='sidebar-empty'>No types defined.<br><small>Create vertex or document types to see them here.</small></div>";
 
-            panelHtml += "<b><a href='#' onclick=\"globalActivateTab('tab-" + stName + "')\">" + st + "</a></b>";
-          }
-          panelHtml += "</b>";
-        }
+    $("#dbTypeBadges").html(html);
 
-        panelHtml += "<br>";
+    // Reset detail panel
+    $("#dbTypeDetail").html("<div class='db-type-empty'><i class='fa fa-database' style='font-size: 2rem; color: #ddd; margin-bottom: 12px; display: block;'></i>Select a type from the sidebar to view its schema.</div>");
+  });
+}
 
-        if (row.indexes != "") {
-          panelHtml += "<br><h6>Indexes</h6>";
-          panelHtml += "<div class='table-responsive'>";
-          panelHtml += "<table class='table table-striped table-sm' style='border: 0px; width: 100%'>";
-          panelHtml += "<thead><tr><th scope='col'>Name</th>";
-          panelHtml += "<th scope='col'>Defined In</th>";
-          panelHtml += "<th scope='col'>Properties</th>";
-          panelHtml += "<th scope='col'>Type</th>";
-          panelHtml += "<th scope='col'>Unique</th>";
-          panelHtml += "<th scope='col'>Automatic</th>";
-          panelHtml += "<th scope='col'>Actions</th>";
-          panelHtml += "<tbody>";
+function showTypeDetail(typeName) {
+  let types = window._schemaTypes;
+  let subTypes = window._schemaSubTypes;
+  if (!types) return;
+
+  let row = null;
+  for (let i in types)
+    if (types[i].name == typeName) { row = types[i]; break; }
+  if (row == null) return;
+
+  // Mark active badge
+  $("#dbTypeBadges .sidebar-badge").removeClass("db-badge-active");
+  $("#dbTypeBadges .sidebar-badge").each(function () {
+    if ($(this).find(".sidebar-badge-name").text() == typeName)
+      $(this).addClass("db-badge-active");
+  });
 
-          panelHtml += renderIndexes(row, data.result);
+  let catLabel = row.type == "vertex" ? "Vertex" : (row.type == "edge" ? "Edge" : "Document");
+  let catColor = row.type == "vertex" ? "#3b82f6" : (row.type == "edge" ? "#f97316" : "#22c55e");
 
-          panelHtml += "</tbody></table></div>";
-        }
+  let html = "";
+  html += "<div class='d-flex align-items-center gap-3 mb-3'>";
+  html += "<h4 style='margin:0;'>" + escapeHtml(row.name) + "</h4>";
+  html += "<span class='db-type-category-badge' style='background-color:" + catColor + ";'>" + catLabel + "</span>";
+  html += "<span style='color:#888; font-size:0.9rem;'>" + (row.records || 0).toLocaleString() + " records</span>";
+  html += "</div>";
+
+  // Parent types
+  if (row.parentTypes && row.parentTypes.length > 0 && row.parentTypes[0] != "") {
+    html += "<div class='db-type-meta'>Super Types: ";
+    for (let ptidx in row.parentTypes) {
+      if (ptidx > 0) html += ", ";
+      html += "<a class='link' href='#' onclick='showTypeDetail(\"" + row.parentTypes[ptidx] + "\"); return false;'>" + escapeHtml(row.parentTypes[ptidx]) + "</a>";
+    }
+    html += "</div>";
+  }
 
-        panelHtml += "<br><h6>Properties</h6>";
-        //panelHtml += "<button class='btn btn-pill' onclick='createProperty()'><i class='fa fa-plus'></i> Create Property</button>";
-        panelHtml += "<div class='table-responsive'>";
-        panelHtml += "<table class='table table-striped table-sm' style='border: 0px; width: 100%'>";
-        panelHtml += "<thead><tr><th scope='col'>Name</th>";
-        panelHtml += "<th scope='col'>Defined In</th>";
-        panelHtml += "<th scope='col'>Type</th>";
-        panelHtml += "<th scope='col'>Mandatory</th>";
-        panelHtml += "<th scope='col'>Not Null</th>";
-        panelHtml += "<th scope='col'>Hidden</th>";
-        panelHtml += "<th scope='col'>Read Only</th>";
-        panelHtml += "<th scope='col'>Default Value</th>";
-        panelHtml += "<th scope='col'>Min</th>";
-        panelHtml += "<th scope='col'>Max</th>";
-        panelHtml += "<th scope='col'>Regexp</th>";
-        panelHtml += "<th scope='col'>Indexes</th>";
-        panelHtml += "<th scope='col'>Actions</th>";
-        panelHtml += "<tbody>";
-
-        panelHtml += renderProperties(row, data.result);
-
-        panelHtml += "</tbody></table></div>";
-
-        panelHtml += "<br><h6>Actions</h6>";
-        panelHtml += "<ul>";
-        panelHtml +=
-          "<li><a class='link' href='#' onclick='executeCommand(\"sql\", \"select from `" +
-          row.name +
-          "` limit 30\")'>Display the first 30 records of " +
-          row.name +
-          "</a>";
-        if (row.type == "vertex")
-          panelHtml +=
-            "<li><a class='link' href='#' onclick='executeCommand(\"sql\", \"select *, bothE() as `@edges` from `" +
-            row.name +
-            "` limit 30\")'>Display the first 30 records of " +
-            row.name +
-            " together with all the vertices that are directly connected</a>";
-        panelHtml +=
-          "<li><a class='link' href='#' onclick='executeCommand(\"sql\", \"select count(*) from `" +
-          row.name +
-          "`\")'>Count the records of type " +
-          row.name +
-          "</a>";
-        panelHtml += "</ul>";
-
-        panelHtml += "</div>";
-
-        if (row.type == "vertex") {
-          tabVHtml += tabHtml;
-          panelVHtml += panelHtml;
-        } else if (row.type == "edge") {
-          tabEHtml += tabHtml;
-          panelEHtml += panelHtml;
-        } else {
-          tabDHtml += tabHtml;
-          panelDHtml += panelHtml;
-        }
-      }
+  // Sub types
+  let typeSubTypes = subTypes[row.name];
+  if (typeSubTypes != null && typeSubTypes.length > 0) {
+    html += "<div class='db-type-meta'>Sub Types: ";
+    for (let stidx in typeSubTypes) {
+      if (stidx > 0) html += ", ";
+      html += "<a class='link' href='#' onclick='showTypeDetail(\"" + typeSubTypes[stidx] + "\"); return false;'>" + escapeHtml(typeSubTypes[stidx]) + "</a>";
+    }
+    html += "</div>";
+  }
 
-      $("#vTypesTabs").html(tabVHtml);
-      $("#eTypesTabs").html(tabEHtml);
-      $("#dTypesTabs").html(tabDHtml);
+  // Properties section
+  html += "<div class='db-detail-section'>";
+  html += "<h6><i class='fa fa-list'></i> Properties</h6>";
+  let propHtml = renderProperties(row, types);
+  if (propHtml == "") {
+    html += "<p class='text-muted' style='font-size:0.85rem;'>No properties defined.</p>";
+  } else {
+    html += "<div class='table-responsive'>";
+    html += "<table class='table table-sm db-detail-table'>";
+    html += "<thead><tr><th>Name</th><th>Defined In</th><th>Type</th><th>Mandatory</th><th>Not Null</th><th>Hidden</th><th>Read Only</th><th>Default</th><th>Min</th><th>Max</th><th>Regexp</th><th>Indexes</th><th>Actions</th></tr></thead>";
+    html += "<tbody>" + propHtml + "</tbody></table></div>";
+  }
+  html += "</div>";
+
+  // Indexes section
+  if (row.indexes && row.indexes.length > 0) {
+    html += "<div class='db-detail-section'>";
+    html += "<h6><i class='fa fa-bolt'></i> Indexes</h6>";
+    html += "<div class='table-responsive'>";
+    html += "<table class='table table-sm db-detail-table'>";
+    html += "<thead><tr><th>Name</th><th>Defined In</th><th>Properties</th><th>Type</th><th>Unique</th><th>Automatic</th><th>Actions</th></tr></thead>";
+    html += "<tbody>" + renderIndexes(row, types) + "</tbody></table></div>";
+    html += "</div>";
+  }
 
-      $("#vTypesPanels").html(panelVHtml != "" ? panelVHtml : "Not defined.");
-      $("#eTypesPanels").html(panelEHtml != "" ? panelEHtml : "Not defined.");
-      $("#dTypesPanels").html(panelDHtml != "" ? panelDHtml : "Not defined.");
-    })
-    .fail(function (jqXHR, textStatus, errorThrown) {
-      globalNotifyError(jqXHR.responseText);
-    })
-    .always(function (data) {
-      $("#executeSpinner").hide();
-    });
+  // Actions section
+  html += "<div class='db-detail-section'>";
+  html += "<h6><i class='fa fa-play-circle'></i> Quick Actions</h6>";
+  html += "<div class='d-flex flex-wrap gap-2'>";
+  html += "<button class='btn btn-sm db-action-btn' onclick='executeCommand(\"sql\", \"select from \\`" + row.name + "\\`\")'><i class='fa fa-table'></i> Browse records</button>";
+  if (row.type == "vertex")
+    html += "<button class='btn btn-sm db-action-btn' onclick='executeCommand(\"sql\", \"select *, bothE() as \\`@edges\\` from \\`" + row.name + "\\`\")'><i class='fa fa-project-diagram'></i> With connections</button>";
+  html += "<button class='btn btn-sm db-action-btn' onclick='executeCommand(\"sql\", \"select count(*) from \\`" + row.name + "\\`\")'><i class='fa fa-calculator'></i> Count records</button>";
+  html += "</div>";
+  html += "</div>";
+
+  $("#dbTypeDetail").html(html);
+}
+
+var sidebarBadgeColors = {
+  vertex:   ["#3b82f6", "#0ea5e9", "#6366f1", "#8b5cf6", "#06b6d4", "#2563eb", "#4f46e5", "#0284c7"],
+  edge:     ["#f97316", "#f59e0b", "#ef4444", "#e11d48", "#ea580c", "#d97706", "#dc2626", "#be123c"],
+  document: ["#22c55e", "#10b981", "#14b8a6", "#059669", "#16a34a", "#0d9488", "#15803d", "#047857"]
+};
+
+function populateQuerySidebar() {
+  let container = $("#sidebarPanelOverview");
+  if (container.length == 0) return;
+
+  if (globalSchemaTypes == null || globalSchemaTypes.length == 0) {
+    container.html("<div class='sidebar-empty'>No types defined.<br><small>Create vertex or document types to see them here.</small></div>");
+    return;
+  }
+
+  let groups = { vertex: [], edge: [], document: [] };
+  let totals = { vertex: 0, edge: 0, document: 0 };
+
+  for (let i in globalSchemaTypes) {
+    let row = globalSchemaTypes[i];
+    let cat = row.type == "vertex" ? "vertex" : (row.type == "edge" ? "edge" : "document");
+    groups[cat].push(row);
+    totals[cat] += (row.records || 0);
+  }
+
+  let html = "";
+  let sections = [
+    { key: "vertex",   label: "Vertices",  icon: "fa-circle-nodes" },
+    { key: "edge",     label: "Edges",     icon: "fa-right-left" },
+    { key: "document", label: "Documents", icon: "fa-file-lines" }
+  ];
+
+  for (let s = 0; s < sections.length; s++) {
+    let sec = sections[s];
+    let items = groups[sec.key];
+    if (items.length == 0) continue;
+
+    let totalFormatted = totals[sec.key].toLocaleString();
+    html += "<div class='sidebar-section'>";
+    html += "<div class='sidebar-section-header'><i class='fa " + sec.icon + "'></i> " + sec.label + " <span class='sidebar-count'>(" + totalFormatted + ")</span></div>";
+    html += "<div class='sidebar-badges'>";
+
+    let palette = sidebarBadgeColors[sec.key];
+    for (let j = 0; j < items.length; j++) {
+      let row = items[j];
+      let color = palette[j % palette.length];
+      let name = escapeHtml(row.name);
+      let records = (row.records || 0).toLocaleString();
+      html += "<a class='sidebar-badge' href='#' style='background-color: " + color + "' ";
+      html += "onclick='executeCommand(\"sql\", \"select from \\`" + row.name + "\\`\"); return false;' ";
+      html += "title='" + name + " (" + records + " records)'>";
+      html += "<span class='sidebar-badge-name'>" + name + "</span>";
+      html += "<span class='sidebar-badge-count'>" + records + "</span>";
+      html += "</a>";
+    }
+
+    html += "</div></div>";
+  }
+
+  container.html(html);
+}
+
+function refreshQuerySidebar() {
+  globalSchemaTypes = null;
+  fetchSchemaTypes();
 }
 
 function findTypeInResult(name, results) {
@@ -996,7 +1449,7 @@ function renderProperties(row, results) {
 
     panelHtml += "<td>" + (totalIndexes > 0 ? totalIndexes : "None") + "</td>";
     panelHtml +=
-      "<td><button class='btn btn-pill' onclick='dropProperty(\"" +
+      "<td><button class='btn btn-sm db-action-btn db-action-btn-danger' onclick='dropProperty(\"" +
       row.name +
       '", "' +
       property.name +
@@ -1034,7 +1487,7 @@ function renderIndexes(row, results) {
 
     panelHtml += "<td>" + (index.unique ? true : false) + "</td>";
     panelHtml += "<td>" + (index.automatic ? true : false) + "</td>";
-    panelHtml += "<td><button class='btn btn-pill' onclick='dropIndex(\"" + index.name + "\")'><i class='fa fa-minus'></i> Drop Index</button></td></tr>";
+    panelHtml += "<td><button class='btn btn-sm db-action-btn db-action-btn-danger' onclick='dropIndex(\"" + index.name + "\")'><i class='fa fa-minus'></i> Drop Index</button></td></tr>";
   }
   return panelHtml;
 }
@@ -1105,38 +1558,30 @@ function displayDatabaseSettings() {
 }
 
 function updateDatabaseSetting(key, value) {
-  let html = "<b>" + key + "</b> = <input id='updateSettingInput' value='" + value + "'>";
+  let html = "<b>" + escapeHtml(key) + "</b> = <input class='form-control mt-2' id='updateSettingInput' value='" + escapeHtml(value) + "' " +
+    "onkeydown='if (event.which === 13) document.getElementById(\"globalModalConfirmBtn\").click()'>";
   html += "<br><p><i>The setting will be saved in the database configuration.</i></p>";
 
-  Swal.fire({
-    title: "Update Database Setting",
-    html: html,
-    showCancelButton: true,
-    width: 600,
-    confirmButtonColor: "#3ac47d",
-    cancelButtonColor: "red",
-  }).then((result) => {
-    if (result.value) {
-      jQuery
-        .ajax({
-          type: "POST",
-          url: "api/v1/server",
-          data: JSON.stringify({
-            command: "set database setting " + getCurrentDatabase() + " " + key + " " + $("#updateSettingInput").val(),
-          }),
-          beforeSend: function (xhr) {
-            xhr.setRequestHeader("Authorization", globalCredentials);
-          },
-        })
-        .done(function (data) {
-          if (data.error) {
-            $("#authorizationCodeMessage").html(data.error);
-            return false;
-          }
-          displayDatabaseSettings();
-          return true;
-        });
-    }
+  globalPrompt("Update Database Setting", html, "Update", function() {
+    jQuery
+      .ajax({
+        type: "POST",
+        url: "api/v1/server",
+        data: JSON.stringify({
+          command: "set database setting " + getCurrentDatabase() + " " + key + " " + $("#updateSettingInput").val(),
+        }),
+        beforeSend: function (xhr) {
+          xhr.setRequestHeader("Authorization", globalCredentials);
+        },
+      })
+      .done(function (data) {
+        if (data.error) {
+          $("#authorizationCodeMessage").html(data.error);
+          return false;
+        }
+        displayDatabaseSettings();
+        return true;
+      });
   });
 }
 
diff --git a/studio/src/main/resources/static/js/studio-graph-widget.js b/studio/src/main/resources/static/js/studio-graph-widget.js
index 87a3234d54..30f87382a2 100644
--- a/studio/src/main/resources/static/js/studio-graph-widget.js
+++ b/studio/src/main/resources/static/js/studio-graph-widget.js
@@ -554,32 +554,16 @@ function displaySelectedNode() {
 
   globalSelected = globalCy.elements("node:selected");
   if (globalSelected.length < 1) {
-    $("#customToolbar").empty();
-    $("#graphPropertiesTable").empty();
-    $("#graphPropertiesType").html("Select an element to see its properties");
+    $("#recordEditorBody").html("<span id='graphPropertiesType'>Select an element to see its properties</span>");
+    $("#graphActions").empty();
+    $("#graphLayout").empty();
     return;
   }
 
   let data = null;
   if (globalSelected.length == 1) {
     data = globalSelected[0].data();
-
-    let summary = "<label class='form-label'>Node&nbsp</label><label class='form-label'><b>" + data.id + "</b></label>&nbsp;";
-    summary += "<label class='form-label'>Type&nbsp</label><label class='form-label'><b>" + data.type + "</b></label><br>";
-    summary += "<br><h5>Properties</h5>";
-
-    $("#graphPropertiesType").html(summary);
-
-    let table = "<thead><tr><th scope='col'>Name</th><th scope='col'>Value</th></tr>";
-    table += "<tbody>";
-
-    for (let p in data.properties) {
-      let value = data.properties[p];
-      if (Array.isArray(value) || typeof value === "object") value = JSON.stringify(value);
-      table += "<tr><td>" + escapeHtml(p) + "</td><td>" + escapeHtml(value) + "</td>";
-    }
-
-    $("#graphPropertiesTable").html(table);
+    openRecordEditor(data.id, data.type, data.properties, "graph");
   }
 
   let selectedElementTypes = {};
@@ -794,14 +778,13 @@ function displaySelectedNode() {
   }
 
   if (globalSelected.length == 1) {
-    let actions = "<br><h5>Actions</h5>";
-    actions += "<ul>";
-    actions += "<li>Load adjacent <button class='btn btn-outline-primary btn-sm' onclick='loadNodeNeighbors(\"out\", \"" + data.id + "\")'>outgoing</button>, ";
+    let actions = "<ul class='list-unstyled mt-2' style='font-size: 0.84rem;'>";
+    actions += "<li class='mb-1'>Load adjacent <button class='btn btn-outline-primary btn-sm' onclick='loadNodeNeighbors(\"out\", \"" + data.id + "\")'>outgoing</button>, ";
     actions += "<button class='btn btn-outline-primary btn-sm' href='#' onclick='loadNodeNeighbors(\"in\", \"" + data.id + "\")'>incoming</button> or ";
     actions += "<button class='btn btn-outline-primary btn-sm' href='#' onclick='loadNodeNeighbors(\"both\", \"" + data.id + "\")'>both</button></li>";
-    actions += "<li><button class='btn btn-outline-primary btn-sm' href='#' onclick='removeGraphElement(globalSelected)'>Hide</button> selected elements</li>";
+    actions += "<li class='mb-1'><button class='btn btn-outline-primary btn-sm' href='#' onclick='removeGraphElement(globalSelected)'>Hide</button> selected elements</li>";
     actions +=
-      "<li>Select all the element of type <button class='btn btn-outline-primary btn-sm' href='#' onclick='selectGraphElementByType(\"" +
+      "<li class='mb-1'>Select all <button class='btn btn-outline-primary btn-sm' href='#' onclick='selectGraphElementByType(\"" +
       type +
       "\")'>" +
       type +
@@ -815,33 +798,16 @@ function displaySelectedNode() {
 function displaySelectedEdge() {
   globalSelected = globalCy.elements("edge:selected");
   if (globalSelected.length < 1) {
-    $("#customToolbar").empty();
-    $("#graphPropertiesTable").empty();
-    $("#graphPropertiesType").html("Select an element to see its properties");
+    $("#recordEditorBody").html("<span id='graphPropertiesType'>Select an element to see its properties</span>");
+    $("#graphActions").empty();
+    $("#graphLayout").empty();
     return;
   }
 
   let data = null;
   if (globalSelected.length == 1) {
     data = globalSelected[0].data();
-
-    let summary = "<label class='form-label'>Edge&nbsp</label><label class='form-label'><b>" + data.id + "</b></label>&nbsp;";
-    summary += "<label class='form-label'>Type&nbsp</label><label class='form-label'><b>" + data.type + "</b></label><br>";
-    summary += "<br><h5>Properties</h5>";
-
-    $("#graphPropertiesType").html(summary);
-
-    let table = "<thead><tr><th scope='col'>Name</th><th scope='col'>Value</th></tr>";
-    table += "<tbody>";
-
-    for (let p in data.properties) {
-      let value = data.properties[p];
-      if (Array.isArray(value) || typeof value === "object") value = JSON.stringify(value);
-      table += "<tr><td>" + escapeHtml(p) + "</td><td>" + escapeHtml(value) + "</td>";
-    }
-    table += "</tbody>";
-
-    $("#graphPropertiesTable").html(table);
+    openRecordEditor(data.id, data.type, data.properties, "graph");
   }
 
   let selectedElementTypes = {};
diff --git a/studio/src/main/resources/static/js/studio-record-editor.js b/studio/src/main/resources/static/js/studio-record-editor.js
new file mode 100644
index 0000000000..2ecfe64b73
--- /dev/null
+++ b/studio/src/main/resources/static/js/studio-record-editor.js
@@ -0,0 +1,287 @@
+var globalRecordEditorState = {
+  active: false,
+  rid: null,
+  type: null,
+  properties: {},
+  expanded: false,
+  source: null
+};
+
+function openRecordEditor(rid, type, properties, source) {
+  globalRecordEditorState.active = true;
+  globalRecordEditorState.rid = rid;
+  globalRecordEditorState.type = type;
+  globalRecordEditorState.properties = properties || {};
+  globalRecordEditorState.source = source;
+  globalRecordEditorState.expanded = false;
+
+  renderRecordEditorContent();
+
+  if (source === "table")
+    showTableRecordEditor();
+}
+
+function getRecordEditorTarget() {
+  if (globalRecordEditorState.source === "table")
+    return "#tableRecordEditorContent";
+  return "#recordEditorBody";
+}
+
+function renderRecordEditorContent() {
+  var rid = globalRecordEditorState.rid;
+  var type = globalRecordEditorState.type;
+  var properties = globalRecordEditorState.properties;
+  var source = globalRecordEditorState.source;
+
+  var html = "";
+
+  // Header: type badge + RID + expand/close
+  html += "<div class='d-flex align-items-center justify-content-between mb-2'>";
+  html += "<div>";
+  html += "<span class='badge bg-primary me-2'>" + escapeHtml(type) + "</span>";
+  html += "<strong>" + escapeHtml(rid) + "</strong>";
+  html += "</div>";
+  html += "<div class='d-flex gap-1'>";
+  if (source === "graph")
+    html += "<button class='btn btn-sm btn-outline-secondary' onclick='toggleRecordEditorExpand()' title='Expand/Collapse'><i class='fa fa-expand'></i></button>";
+  html += "<button class='btn btn-sm btn-outline-secondary' onclick='cancelRecordEditor()' title='Close'><i class='fa fa-times'></i></button>";
+  html += "</div>";
+  html += "</div>";
+
+  // Editable fields
+  html += "<div class='record-editor-fields'>";
+  for (var p in properties) {
+    var value = properties[p];
+    var isComplex = (Array.isArray(value) || typeof value === "object");
+    var displayValue = isComplex ? JSON.stringify(value, null, 2) : (value != null ? String(value) : "");
+
+    html += "<label class='form-label'>" + escapeHtml(p) + "</label>";
+    if (isComplex || displayValue.length > 80) {
+      html += "<textarea class='form-control record-editor-field' data-prop='" + escapeHtml(p) + "' data-original='" + escapeHtml(displayValue) + "' rows='3'>" + escapeHtml(displayValue) + "</textarea>";
+    } else {
+      html += "<input type='text' class='form-control record-editor-field' data-prop='" + escapeHtml(p) + "' data-original='" + escapeHtml(displayValue) + "' value='" + escapeHtml(displayValue) + "' />";
+    }
+  }
+  html += "</div>";
+
+  // Action buttons
+  html += "<div class='record-editor-buttons'>";
+  html += "<button class='btn btn-sm btn-primary' onclick='saveRecordEditor()'><i class='fa fa-save'></i> Save</button>";
+  html += "<button class='btn btn-sm btn-secondary' onclick='cancelRecordEditor()'>Cancel</button>";
+  if (source === "table")
+    html += "<button class='btn btn-sm btn-outline-primary' onclick='showRecordInGraph()'><i class='fa fa-project-diagram'></i> Graph</button>";
+  html += "<button class='btn btn-sm btn-outline-danger ms-auto' onclick='deleteRecord()'><i class='fa fa-trash'></i> Delete</button>";
+  html += "</div>";
+
+  $(getRecordEditorTarget()).html(html);
+}
+
+function saveRecordEditor() {
+  var rid = globalRecordEditorState.rid;
+  var setParts = [];
+
+  $(getRecordEditorTarget() + " .record-editor-field").each(function () {
+    var prop = $(this).data("prop");
+    var original = $(this).data("original");
+    var current = $(this).val();
+
+    if (current === original)
+      return;
+
+    var sqlValue;
+    if (current === "")
+      sqlValue = "null";
+    else if (current === "null")
+      sqlValue = "null";
+    else if (current === "true" || current === "false")
+      sqlValue = current;
+    else if (!isNaN(current) && current.trim() !== "")
+      sqlValue = current;
+    else if ((current.startsWith("{") && current.endsWith("}")) || (current.startsWith("[") && current.endsWith("]"))) {
+      try {
+        JSON.parse(current);
+        sqlValue = current;
+      } catch (e) {
+        sqlValue = "'" + current.replace(/'/g, "\\'") + "'";
+      }
+    } else
+      sqlValue = "'" + current.replace(/'/g, "\\'") + "'";
+
+    setParts.push("`" + prop + "` = " + sqlValue);
+  });
+
+  if (setParts.length === 0) {
+    globalNotify("Info", "No changes to save", "warning");
+    return;
+  }
+
+  var sql = "UPDATE " + rid + " SET " + setParts.join(", ");
+  var database = escapeHtml($(".inputDatabase").val());
+
+  $.ajax({
+    type: "POST",
+    url: "api/v1/command/" + database,
+    data: JSON.stringify({ language: "sql", command: sql }),
+    beforeSend: function (xhr) {
+      xhr.setRequestHeader("Authorization", globalCredentials);
+    }
+  })
+  .done(function () {
+    globalNotify("Success", "Record updated", "success");
+    refreshRecordAfterSave();
+  })
+  .fail(function (jqXHR) {
+    globalNotify("Error", escapeHtml(jqXHR.responseText), "danger");
+  });
+}
+
+function refreshRecordAfterSave() {
+  var rid = globalRecordEditorState.rid;
+  var database = escapeHtml($(".inputDatabase").val());
+
+  $.ajax({
+    type: "POST",
+    url: "api/v1/command/" + database,
+    data: JSON.stringify({ language: "sql", command: "SELECT FROM " + rid, serializer: "record" }),
+    beforeSend: function (xhr) {
+      xhr.setRequestHeader("Authorization", globalCredentials);
+    }
+  })
+  .done(function (data) {
+    if (data.result && data.result.length > 0) {
+      var record = data.result[0];
+      var newProps = {};
+      for (var key in record) {
+        if (key.charAt(0) !== "@")
+          newProps[key] = record[key];
+      }
+
+      globalRecordEditorState.properties = newProps;
+
+      // Update Cytoscape node data if in graph
+      if (globalCy) {
+        var node = globalCy.nodes("[id = '" + rid + "']");
+        if (node.length > 0)
+          node.data("properties", newProps);
+      }
+
+      renderRecordEditorContent();
+    }
+  })
+  .fail(function (jqXHR) {
+    globalNotify("Error", "Failed to refresh record: " + escapeHtml(jqXHR.responseText), "danger");
+  });
+}
+
+function cancelRecordEditor() {
+  globalRecordEditorState.active = false;
+
+  if (globalRecordEditorState.source === "table") {
+    hideTableRecordEditor();
+  } else {
+    // Restore collapsed state if expanded
+    if (globalRecordEditorState.expanded)
+      toggleRecordEditorExpand();
+
+    $("#recordEditorBody").html("<span id='graphPropertiesType'>Select an element to see its properties</span>");
+    $("#graphActions").empty();
+    $("#graphLayout").empty();
+  }
+}
+
+function deleteRecord() {
+  var rid = globalRecordEditorState.rid;
+
+  globalConfirm("Delete Record", "Are you sure you want to delete record " + rid + "? This action cannot be undone.", "warning",
+    function () {
+      var database = escapeHtml($(".inputDatabase").val());
+
+      $.ajax({
+        type: "POST",
+        url: "api/v1/command/" + database,
+        data: JSON.stringify({ language: "sql", command: "DELETE FROM " + rid }),
+        beforeSend: function (xhr) {
+          xhr.setRequestHeader("Authorization", globalCredentials);
+        }
+      })
+      .done(function () {
+        globalNotify("Success", "Record " + rid + " deleted", "success");
+
+        // Remove from Cytoscape graph if present
+        if (globalCy) {
+          var node = globalCy.nodes("[id = '" + rid + "']");
+          if (node.length > 0)
+            removeGraphElement(node);
+        }
+
+        globalRecordEditorState.active = false;
+
+        if (globalRecordEditorState.source === "table") {
+          hideTableRecordEditor();
+        } else {
+          $("#recordEditorBody").html("<span id='graphPropertiesType'>Select an element to see its properties</span>");
+          $("#graphActions").empty();
+          $("#graphLayout").empty();
+        }
+      })
+      .fail(function (jqXHR) {
+        globalNotify("Error", escapeHtml(jqXHR.responseText), "danger");
+      });
+    }
+  );
+}
+
+function showRecordInGraph() {
+  var rid = globalRecordEditorState.rid;
+  hideTableRecordEditor();
+  globalRecordEditorState.active = false;
+  addNodeFromRecord(rid);
+}
+
+function toggleRecordEditorExpand() {
+  globalRecordEditorState.expanded = !globalRecordEditorState.expanded;
+
+  if (globalRecordEditorState.expanded) {
+    $("#graphMainPanel").addClass("d-none");
+    $("#graphPropertiesPanel").removeClass("col-3").addClass("col-12");
+  } else {
+    $("#graphMainPanel").removeClass("d-none");
+    $("#graphPropertiesPanel").removeClass("col-12").addClass("col-3");
+  }
+}
+
+function openRecordEditorFromTable(rid) {
+  var database = escapeHtml($(".inputDatabase").val());
+
+  $.ajax({
+    type: "POST",
+    url: "api/v1/command/" + database,
+    data: JSON.stringify({ language: "sql", command: "SELECT FROM " + rid, serializer: "record" }),
+    beforeSend: function (xhr) {
+      xhr.setRequestHeader("Authorization", globalCredentials);
+    }
+  })
+  .done(function (data) {
+    if (data.result && data.result.length > 0) {
+      var record = data.result[0];
+      var type = record["@type"] || "unknown";
+      var props = {};
+      for (var key in record) {
+        if (key.charAt(0) !== "@")
+          props[key] = record[key];
+      }
+      openRecordEditor(rid, type, props, "table");
+    }
+  })
+  .fail(function (jqXHR) {
+    globalNotify("Error", escapeHtml(jqXHR.responseText), "danger");
+  });
+}
+
+function showTableRecordEditor() {
+  $("#tableRecordEditorOverlay").addClass("open");
+}
+
+function hideTableRecordEditor() {
+  $("#tableRecordEditorOverlay").removeClass("open");
+}
diff --git a/studio/src/main/resources/static/js/studio-server.js b/studio/src/main/resources/static/js/studio-server.js
index dd563c0de3..b6c448d5a5 100644
--- a/studio/src/main/resources/static/js/studio-server.js
+++ b/studio/src/main/resources/static/js/studio-server.js
@@ -31,15 +31,26 @@ function updateServer(callback) {
     })
     .done(function (data) {
       let version = data.version;
+      let buildInfo = '';
       let pos = data.version.indexOf("(build");
       if (pos > -1) {
-        version = version.substring(0, pos) + " <span style='font-size: 70%'>" + version.substring(pos) + "</span>";
+        buildInfo = version.substring(pos);
+        version = version.substring(0, pos).trim();
       }
 
-      let serverInfo = "Connected to <b>" + data.user + "@" + data.serverName + "</b> - v." + version;
-      if (data.metrics.profiler.configuration.description) serverInfo += "<br>Runs on " + data.metrics.profiler.configuration.description;
+      // Compact header label
+      let compactLabel = "Connected to <b>" + escapeHtml(data.user) + "@" + escapeHtml(data.serverName) + "</b> - v." + escapeHtml(version);
+      $("#serverConnectionLabel").html(compactLabel);
 
-      $("#serverConnection").html(serverInfo);
+      // Popover details
+      let popoverHtml = "<div style='margin-bottom:8px;font-weight:600;color:var(--text-primary);'>Server Details</div>";
+      popoverHtml += "<div style='margin-bottom:6px;'><b>Server:</b> " + escapeHtml(data.user) + "@" + escapeHtml(data.serverName) + "</div>";
+      popoverHtml += "<div style='margin-bottom:6px;'><b>Version:</b> " + escapeHtml(version) + "</div>";
+      if (buildInfo)
+        popoverHtml += "<div style='margin-bottom:6px;font-size:0.78rem;color:var(--text-muted);word-break:break-all;'><b>Build:</b> " + escapeHtml(buildInfo) + "</div>";
+      if (data.metrics && data.metrics.profiler && data.metrics.profiler.configuration && data.metrics.profiler.configuration.description)
+        popoverHtml += "<div style='font-size:0.78rem;color:var(--text-muted);'><b>Platform:</b> " + escapeHtml(data.metrics.profiler.configuration.description) + "</div>";
+      $("#serverInfoPopoverBody").html(popoverHtml);
 
       serverData = data;
 
@@ -146,9 +157,9 @@ function displayServerSummary() {
       dataLabels: { enabled: true },
       stroke: { curve: "smooth" },
       grid: {
-        borderColor: "#e7e7e7",
+        borderColor: getComputedStyle(document.documentElement).getPropertyValue('--border-ddd').trim() || "#e7e7e7",
         row: {
-          colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
+          colors: [getComputedStyle(document.documentElement).getPropertyValue('--bg-sidebar').trim() || "#f3f3f3", "transparent"],
           opacity: 0.5,
         },
       },
@@ -390,51 +401,63 @@ function displayMetrics() {
     tableRecords.push(record);
   }
 
+  // Sort alphabetically by metric name
+  tableRecords.sort(function(a, b) { return a[0].localeCompare(b[0]); });
+
   $("#serverMetrics").DataTable({
     paging: false,
-    ordering: false,
+    ordering: true,
+    order: [[0, "asc"]],
     columns: [{ title: "Metric Name" }, { title: "Value" }, { title: "Req/Sec" }],
     data: tableRecords,
   });
 }
 
 function updateServerSetting(key, value) {
-  let html = "<b>" + key + "</b> = <input id='updateSettingInput' value='" + value + "'>";
+  let html = "<b>" + escapeHtml(key) + "</b> = <input class='form-control mt-2' id='updateSettingInput' value='" + escapeHtml(value) + "' " +
+    "onkeydown='if (event.which === 13) document.getElementById(\"globalModalConfirmBtn\").click()'>";
   html += "<br><p><i>The update will not be persistent and will be reset at the next restart of the server.</i></p>";
 
-  Swal.fire({
-    title: "Update Server Setting",
-    html: html,
-    showCancelButton: true,
-    width: 600,
-    confirmButtonColor: "#3ac47d",
-    cancelButtonColor: "red",
-  }).then((result) => {
-    if (result.value) {
-      jQuery
-        .ajax({
-          type: "POST",
-          url: "api/v1/server",
-          data: JSON.stringify({
-            language: "sql",
-            command: "set server setting " + key + " " + $("#updateSettingInput").val(),
-          }),
-          beforeSend: function (xhr) {
-            xhr.setRequestHeader("Authorization", globalCredentials);
-          },
-        })
-        .done(function (data) {
-          if (data.error) {
-            $("#authorizationCodeMessage").html(data.error);
-            return false;
-          }
-          displayServerSettings();
-          return true;
-        });
-    }
+  globalPrompt("Update Server Setting", html, "Update", function() {
+    jQuery
+      .ajax({
+        type: "POST",
+        url: "api/v1/server",
+        data: JSON.stringify({
+          language: "sql",
+          command: "set server setting " + key + " " + $("#updateSettingInput").val(),
+        }),
+        beforeSend: function (xhr) {
+          xhr.setRequestHeader("Authorization", globalCredentials);
+        },
+      })
+      .done(function (data) {
+        if (data.error) {
+          $("#authorizationCodeMessage").html(data.error);
+          return false;
+        }
+        displayServerSettings();
+        return true;
+      });
   });
 }
 
+function toggleServerInfoPopover() {
+  var el = document.getElementById('serverInfoPopover');
+  if (el.style.display === 'none')
+    el.style.display = 'block';
+  else
+    el.style.display = 'none';
+}
+
+// Close popover when clicking outside
+document.addEventListener('click', function(e) {
+  var popover = document.getElementById('serverInfoPopover');
+  var trigger = document.getElementById('serverConnectionCompact');
+  if (popover && trigger && !trigger.contains(e.target) && !popover.contains(e.target))
+    popover.style.display = 'none';
+});
+
 function loadServerSessions() {
   jQuery
     .ajax({
diff --git a/studio/src/main/resources/static/js/studio-table.js b/studio/src/main/resources/static/js/studio-table.js
index c7b1fd5b3a..5fcb086efb 100644
--- a/studio/src/main/resources/static/js/studio-table.js
+++ b/studio/src/main/resources/static/js/studio-table.js
@@ -91,7 +91,7 @@ function renderTable() {
 
         if (colName == "@rid") {
           //RID
-          value = "<a class='link' onclick=\"addNodeFromRecord('" + value + "')\">" + value + "</a>";
+          value = "<a class='link' onclick=\"openRecordEditorFromTable('" + value + "')\">" + value + "</a>";
         } else if (value != null && (typeof value === "string" || value instanceof String) && value.toString().length > 30) {
           if (tableTruncateColumns) value = value.toString().substr(0, 30) + "...";
         }
@@ -120,51 +120,76 @@ function renderTable() {
         ["10", "20", "50", "100", "all"],
       ],
       buttons: [
-        { extend: "copy", text: "<i class='fas fa-copy'></i> Copy", className: "btn btn-secondary" },
-        { extend: "excel", text: "<i class='fas fa-file-excel'></i> Excel", className: "btn btn-secondary" },
-        { extend: "csv", text: "<i class='fas fa-file-csv'></i> CSV", className: "btn btn-secondary" },
-        { extend: "pdf", text: "<i class='fas fa-file-pdf'></i> PDF", className: "btn btn-secondary", orientation: "landscape" },
-        { extend: "print", text: "<i class='fas fa-print'></i> Print", className: "btn btn-secondary", orientation: "landscape" },
-        {
-          text:
-            "<a class='btn btn-secondary dropdown-toggle' href='#' role='button' aria-haspopup='true' aria-expanded='false' data-bs-toggle='dropdown'>" +
-            "    <i class='fa fa-sliders-h'></i> Settings" +
-            "  </a>" +
-            "  <ul class='dropdown-menu dropdown-menu-end' style='width: 300px'>" +
-            "    <li class='dropdown-item'>" +
-            "      <div class='form-check'>" +
-            "        <input id='tableTruncateColumns' class='form-check-input' type='checkbox' " +
-            tableTruncateColumnsChecked +
-            ' onclick=\'globalCheckboxAndSave("#tableTruncateColumns", "table.truncateColumns");renderTable()\'>' +
-            "        <label for='tableTruncateColumns' class='form-check-label' onclick='globalToggleCheckboxAndSave(\"#tableTruncateColumns\", \"table.truncateColumns\");renderTable()'>Truncate long values</label>" +
-            "      </div>" +
-            "    </li>" +
-            "    <li class='dropdown-item'>" +
-            "      <div class='form-check'>" +
-            "        <input id='tableFitInPage' class='form-check-input' type='checkbox' " +
-            tableFitInPageChecked +
-            ' onclick=\'globalCheckboxAndSave("#tableFitInPage", "table.fitInPage");renderTable()\'>' +
-            "        <label for='tableFitInPage' class='form-check-label' onclick='globalToggleCheckboxAndSave(\"#tableFitInPage\", \"table.fitInPage\");renderTable()'>Fit table in page</label>" +
-            "      </div>" +
-            "    </li>" +
-            "  </ul>",
-        },
+        { extend: "copy", text: "<i class='fas fa-copy'></i> Copy" },
+        { extend: "excel", text: "<i class='fas fa-file-excel'></i> Excel" },
+        { extend: "csv", text: "<i class='fas fa-file-csv'></i> CSV" },
+        { extend: "pdf", text: "<i class='fas fa-file-pdf'></i> PDF", orientation: "landscape" },
+        { extend: "print", text: "<i class='fas fa-print'></i> Print", orientation: "landscape" },
       ],
       initComplete: function () {
-        $(this.api().table().container()).find("input").attr("autocomplete", "off");
+        let api = this.api();
+        $(api.table().container()).find("input").attr("autocomplete", "off");
+
+        let wrapper = $(api.table().container());
+
+        // Build custom export dropdown (defer to ensure buttons are in DOM)
+        setTimeout(function () {
+          let exportHtml = "<div class='dt-export-dropdown'>";
+          exportHtml += "<button class='dt-export-btn' onclick='toggleExportMenu(this)' title='Export'><i class='fa fa-arrow-up-from-bracket'></i></button>";
+          exportHtml += "<div class='dt-export-menu'></div>";
+          exportHtml += "</div>";
+
+          let exportEl = $(exportHtml);
+          let menu = exportEl.find(".dt-export-menu");
+
+          // Move DataTables buttons into the dropdown menu
+          wrapper.find(".dt-buttons button, .dt-buttons a").each(function () {
+            $(this).removeClass("dt-button btn-secondary").addClass("dt-export-menu-item");
+            menu.append($(this));
+          });
+          wrapper.find(".dt-buttons").remove();
+
+          // Insert export dropdown after search
+          let searchBox = wrapper.find(".dt-search");
+          if (searchBox.length)
+            searchBox.after(exportEl);
+          else
+            wrapper.prepend(exportEl);
+        }, 50);
       },
     });
 
-    $(".dt-buttons").css("padding", "7px");
     $(".dt-length").css("padding", "7px");
     $(".dt-search").css("padding", "7px");
-    $(".buttons-copy").removeClass("buttons-copy").removeClass("buttons-html5");
-    $(".buttons-excel").removeClass("buttons-excel").removeClass("buttons-html5");
-    $(".buttons-csv").removeClass("buttons-csv").removeClass("buttons-html5");
-    $(".buttons-pdf").removeClass("buttons-pdf").removeClass("buttons-html5");
-    $(".buttons-print").removeClass("buttons-print").removeClass("buttons-html5");
   }
 
   // FORCE RESET OF THE SEARCH FIELD
   $("#result_filter>label>input").val("");
 }
+
+function toggleExportMenu(btn) {
+  let menu = $(btn).siblings(".dt-export-menu");
+  let isOpen = menu.hasClass("open");
+
+  // Close any open export menus
+  $(".dt-export-menu").removeClass("open");
+
+  if (!isOpen) {
+    // Position menu below the button using fixed positioning
+    let rect = btn.getBoundingClientRect();
+    menu.css({
+      top: rect.bottom + 4 + "px",
+      left: (rect.right - menu.outerWidth()) + "px"
+    });
+    menu.addClass("open");
+    // Recalc left after menu is visible and has width
+    let menuWidth = menu.outerWidth();
+    menu.css("left", (rect.right - menuWidth) + "px");
+
+    // Close on outside click
+    $(document).one("click", function (e) {
+      if (!$(e.target).closest(".dt-export-dropdown").length)
+        $(".dt-export-menu").removeClass("open");
+    });
+  }
+}
diff --git a/studio/src/main/resources/static/js/studio-utils.js b/studio/src/main/resources/static/js/studio-utils.js
index 25b2e6ebc5..08ae071928 100644
--- a/studio/src/main/resources/static/js/studio-utils.js
+++ b/studio/src/main/resources/static/js/studio-utils.js
@@ -1,32 +1,119 @@
 var globalWidgetExpanded = {};
 
+function _globalModalIcon(icon) {
+  if (icon === "error" || icon === "danger")
+    return '<i class="fa fa-circle-exclamation" style="color:#dc3545;font-size:1.2rem"></i>';
+  if (icon === "warning")
+    return '<i class="fa fa-triangle-exclamation" style="color:#ffc107;font-size:1.2rem"></i>';
+  if (icon === "info")
+    return '<i class="fa fa-circle-info" style="color:#0dcaf0;font-size:1.2rem"></i>';
+  if (icon === "success")
+    return '<i class="fa fa-circle-check" style="color:#28a745;font-size:1.2rem"></i>';
+  return '';
+}
+
 function globalAlert(title, text, icon, callback) {
   if (!icon) icon = "error";
 
-  let swal = Swal.fire({
-    title: title,
-    html: text,
-    icon: icon,
-  }).then((result) => {
+  var el = document.getElementById('globalModal');
+  var label = document.getElementById('globalModalLabel');
+  var iconEl = document.getElementById('globalModalIcon');
+  var body = document.getElementById('globalModalBody');
+  var footer = document.getElementById('globalModalFooter');
+
+  label.textContent = title || '';
+  iconEl.innerHTML = _globalModalIcon(icon);
+  body.innerHTML = text || '';
+  footer.innerHTML = '<button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>';
+
+  var modal = bootstrap.Modal.getOrCreateInstance(el);
+
+  function onHidden() {
+    el.removeEventListener('hidden.bs.modal', onHidden);
     if (callback) callback();
-  });
+  }
+  el.addEventListener('hidden.bs.modal', onHidden);
+
+  modal.show();
 }
 
 function globalConfirm(title, text, icon, yes, no) {
-  let swal = Swal.fire({
-    title: title,
-    html: text,
-    icon: icon,
-    showCancelButton: true,
-    confirmButtonColor: "#3ac47d",
-    cancelButtonColor: "red",
-  }).then((result) => {
-    if (result.value) {
+  var el = document.getElementById('globalModal');
+  var label = document.getElementById('globalModalLabel');
+  var iconEl = document.getElementById('globalModalIcon');
+  var body = document.getElementById('globalModalBody');
+  var footer = document.getElementById('globalModalFooter');
+
+  label.textContent = title || '';
+  iconEl.innerHTML = _globalModalIcon(icon);
+  body.innerHTML = text || '';
+
+  var confirmed = false;
+  footer.innerHTML =
+    '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>' +
+    '<button type="button" class="btn btn-primary" id="globalModalConfirmBtn">Yes</button>';
+
+  var modal = bootstrap.Modal.getOrCreateInstance(el);
+
+  var confirmBtn = document.getElementById('globalModalConfirmBtn');
+  function onConfirm() {
+    confirmed = true;
+    modal.hide();
+  }
+  confirmBtn.addEventListener('click', onConfirm);
+
+  function onHidden() {
+    el.removeEventListener('hidden.bs.modal', onHidden);
+    confirmBtn.removeEventListener('click', onConfirm);
+    if (confirmed) {
       if (yes) yes();
     } else {
       if (no) no();
     }
-  });
+  }
+  el.addEventListener('hidden.bs.modal', onHidden);
+
+  modal.show();
+}
+
+function globalPrompt(title, bodyHtml, confirmText, callback) {
+  var el = document.getElementById('globalModal');
+  var label = document.getElementById('globalModalLabel');
+  var iconEl = document.getElementById('globalModalIcon');
+  var body = document.getElementById('globalModalBody');
+  var footer = document.getElementById('globalModalFooter');
+
+  label.textContent = title || '';
+  iconEl.innerHTML = '';
+  body.innerHTML = bodyHtml || '';
+
+  var confirmed = false;
+  footer.innerHTML =
+    '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>' +
+    '<button type="button" class="btn btn-primary" id="globalModalConfirmBtn">' + (confirmText || 'OK') + '</button>';
+
+  var modal = bootstrap.Modal.getOrCreateInstance(el);
+
+  var confirmBtn = document.getElementById('globalModalConfirmBtn');
+  function onConfirm() {
+    confirmed = true;
+    modal.hide();
+  }
+  confirmBtn.addEventListener('click', onConfirm);
+
+  function onHidden() {
+    el.removeEventListener('hidden.bs.modal', onHidden);
+    confirmBtn.removeEventListener('click', onConfirm);
+    if (confirmed && callback) callback();
+  }
+  el.addEventListener('hidden.bs.modal', onHidden);
+
+  modal.show();
+
+  // Focus first input in body if present
+  var firstInput = body.querySelector('input, textarea');
+  if (firstInput)
+    setTimeout(function() { firstInput.focus(); }, 200);
 }
 
 function globalNotifyError(response) {
@@ -36,9 +123,9 @@ function globalNotifyError(response) {
     let title = json.error ? json.error : "Error";
     let message = json.detail ? json.detail : "Error on execution of the command";
 
-    globalNotify(title, escapeHtml(message), "danger");
+    globalNotify(title, message, "danger");
   } catch (e) {
-    globalNotify("Error", escapeHtml(response), "danger");
+    globalNotify("Error", response, "danger");
   }
 }
 
@@ -156,24 +243,13 @@ function saveAs(blob, filename) {
 }
 
 function base64ToBlob(base64Image) {
-  // Split into two parts
   const parts = base64Image.split(";base64,");
-
-  // Hold the content type
   const imageType = parts[0].split(":")[1];
-
-  // Decode Base64 string
   const decodedData = window.atob(parts[1]);
-
-  // Create UNIT8ARRAY of size same as row data length
   const uInt8Array = new Uint8Array(decodedData.length);
-
-  // Insert all character code into uInt8Array
   for (let i = 0; i < decodedData.length; ++i) {
     uInt8Array[i] = decodedData.charCodeAt(i);
   }
-
-  // Return BLOB image after conversion
   return new Blob([uInt8Array], { type: imageType });
 }
 
diff --git a/studio/src/main/resources/static/query.html b/studio/src/main/resources/static/query.html
index 4fccf8b207..e154821d0c 100644
--- a/studio/src/main/resources/static/query.html
+++ b/studio/src/main/resources/static/query.html
@@ -1,337 +1,389 @@
 <div class="tab-pane fade show active" id="tab-query" role="tabpanel">
-  <div class="row mb-2" id="queryPanel">
-    <div class="col-6">
-      <label>Connected as&nbsp;</label><label for="queryInputDatabase" id="queryUser"></label>@
-      <select id="queryInputDatabase" class="inputDatabase form-select"></select>
-    </div>
-    <div class="col-6">
-      <select id="inputHistory" class="form-select">
-        <option selected>History</option>
-      </select>
+  <div class="d-flex" style="height: 100%;">
+    <!-- Icon Sidebar -->
+    <div id="queryIconSidebar">
+      <button class="icon-sidebar-btn active" data-panel="overview" onclick="switchSidebarPanel('overview')" title="Database Overview">
+        <i class="fa fa-database"></i>
+      </button>
+      <button class="icon-sidebar-btn" data-panel="history" onclick="switchSidebarPanel('history')" title="History">
+        <i class="fa fa-clock"></i>
+      </button>
+      <button class="icon-sidebar-btn" data-panel="saved" onclick="switchSidebarPanel('saved')" title="Saved Queries">
+        <i class="fa fa-bookmark"></i>
+      </button>
+      <button class="icon-sidebar-btn" data-panel="reference" onclick="switchSidebarPanel('reference')" title="Reference">
+        <i class="fa fa-book"></i>
+      </button>
+      <button class="icon-sidebar-btn" data-panel="settings" onclick="switchSidebarPanel('settings')" title="Settings">
+        <i class="fa fa-gear"></i>
+      </button>
     </div>
-  </div>
 
-  <div class="row mb-2">
-    <div class="col-4">
-      <select id="inputLanguage" class="form-select" style="color: #00aeee">
-        <option value="sql" selected>SQL</option>
-        <option value="sqlScript">SQL Script</option>
-        <option value="opencypher">Open Cypher (New Native Engine)</option>
-        <option value="gremlin">Gremlin</option>
-        <option value="cypher">Cypher (Old Engine)</option>
-        <option value="graphql">GraphQL</option>
-        <option value="mongo">MongoDB</option>
-        <option value="redis">Redis</option>
-      </select>
+    <!-- Database Information Sidebar -->
+    <div id="querySidebar">
+      <div class="sidebar-header">
+        <span class="sidebar-title" id="sidebarPanelTitle">Database Info</span>
+        <button class="btn btn-sm btn-light sidebar-refresh-btn" id="sidebarRefreshBtn" onclick="refreshQuerySidebar()" title="Refresh">
+          <i class="fa fa-sync"></i>
+        </button>
+      </div>
+      <div id="querySidebarContent">
+        <!-- Overview Panel -->
+        <div class="sidebar-panel active" id="sidebarPanelOverview">
+          <div class="sidebar-empty">Loading...</div>
+        </div>
+        <!-- History Panel -->
+        <div class="sidebar-panel" id="sidebarPanelHistory"></div>
+        <!-- Saved Queries Panel -->
+        <div class="sidebar-panel" id="sidebarPanelSaved"></div>
+        <!-- Reference Panel -->
+        <div class="sidebar-panel" id="sidebarPanelReference"></div>
+        <!-- Settings Panel -->
+        <div class="sidebar-panel" id="sidebarPanelSettings"></div>
+      </div>
     </div>
-    <div class="col-8">
-      <div class="d-flex justify-content-between align-items-center">
-        <div>
-          <label
-            >Auto Limit
-            <i
-              class="fa fa-question-circle"
-              data-toggle="tooltip"
-              data-html="true"
-              title="If the limit is not set in the query, then the following automatic limit is used."
-            ></i>
-            <select id="inputLimit">
-              <option value="25">25</option>
-              <option value="100">100</option>
-              <option value="500">500</option>
-              <option value="-1">No Limits</option>
-            </select>
-          </label>
+
+    <!-- Query Work Area -->
+    <div id="queryWorkArea" style="flex: 1; min-width: 0; overflow-y: auto; padding-left: 12px;">
+      <div class="row mb-2" id="queryPanel">
+        <div class="col">
+          <label>Connected as&nbsp;</label><label for="queryInputDatabase" id="queryUser"></label>@
+          <select id="queryInputDatabase" class="inputDatabase form-select"></select>
+        </div>
+      </div>
+
+      <div class="row mb-2">
+        <div class="col-4">
+          <select id="inputLanguage" class="form-select" style="color: var(--color-brand)">
+            <option value="sql" selected>SQL</option>
+            <option value="sqlScript">SQL Script</option>
+            <option value="opencypher">Open Cypher (New Native Engine)</option>
+            <option value="gremlin">Gremlin</option>
+            <option value="cypher">Cypher (Old Engine)</option>
+            <option value="graphql">GraphQL</option>
+            <option value="mongo">MongoDB</option>
+            <option value="redis">Redis</option>
+          </select>
         </div>
-        <div>
-          <label>Returned <span id="result-num"></span>&nbsp;records in <span id="result-elapsed"></span>ms</label>
+        <div class="col-8">
+          <div class="d-flex justify-content-between align-items-center">
+            <div>
+              <label
+                >Auto Limit
+                <i
+                  class="fa fa-question-circle"
+                  data-toggle="tooltip"
+                  data-html="true"
+                  title="If the limit is not set in the query, then the following automatic limit is used."
+                ></i>
+                <select id="inputLimit">
+                  <option value="20">20</option>
+                  <option value="50">50</option>
+                  <option value="100">100</option>
+                  <option value="500">500</option>
+                  <option value="-1">No Limits</option>
+                </select>
+              </label>
+            </div>
+            <div class="result-stats">
+              <label>Returned <span id="result-num" class="result-stat-value"></span>&nbsp;records in <span id="result-elapsed" class="result-stat-value"></span>&nbsp;ms</label>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
 
-  <div class="row">
-    <div class="col-11">
-      <textarea id="inputCommand" name="inputCommand"></textarea>
-    </div>
-    <div class="col-1 d-flex align-items-start">
-      <button class="btn btn-primary" data-testid="execute-query-button" onclick="resetHistoryNavigation(); executeCommand()" style="width: 100%">
-        <i class="fa fa-play"></i>
-        <img id="executeSpinner" class="ui-loading" src="images/color-spin-small.svg" style="display: none" />
-      </button>
-    </div>
+      <div class="row">
+        <div class="col-12">
+          <div class="query-editor-container">
+            <div class="query-editor-area">
+              <textarea id="inputCommand" name="inputCommand"></textarea>
+            </div>
+            <div class="query-editor-actions">
+              <button class="editor-action-btn editor-save-btn" onclick="saveCurrentQuery()" title="Save query">
+                <i class="fa fa-bookmark"></i>
+              </button>
+              <div class="editor-action-divider"></div>
+              <button class="editor-action-btn editor-run-btn" data-testid="execute-query-button" onclick="resetHistoryNavigation(); executeCommand()" title="Run (Ctrl+Enter)">
+                <i class="fa fa-play"></i>
+                <img id="executeSpinner" class="ui-loading" src="images/color-spin-small.svg" style="display: none" />
+              </button>
+            </div>
+          </div>
+        </div>
 
-    <div class="col-12">
-      <ul class="nav nav-tabs" id="tabs-command">
-        <li class="nav-item">
-          <a data-toggle="tab" href="#tab-graph" class="active show nav-link" id="tab-graph-sel">
-            <center><i class="fa fa-project-diagram"></i> <span class="mini-text">Graph</span></center>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a data-toggle="tab" href="#tab-table" class="nav-link" id="tab-table-sel">
-            <center><i class="fa fa-table"></i> <span class="mini-text">Table</span></center>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a data-toggle="tab" href="#tab-json" class="nav-link" id="tab-json-sel">
-            <center><i class="fa fa-file-code"></i> <span class="mini-text">Json</span></center>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a data-toggle="tab" href="#tab-explain" class="nav-link" id="tab-explain-sel">
-            <center><i class="fa fa-list"></i> <span class="mini-text">Explain</span></center>
-          </a>
-        </li>
-      </ul>
-
-      <div class="tab-content">
-        <div class="tab-pane fade show active" id="tab-graph" role="tabpanel">
-          <div class="row">
-            <div class="col-12">
-              <nav class="navbar navbar-expand-lg navbar-light">
-                <button
-                  class="navbar-toggler"
-                  type="button"
-                  data-toggle="collapse"
-                  data-target="#navbarSupportedContent"
-                  aria-controls="navbarSupportedContent"
-                  aria-expanded="false"
-                  aria-label="Toggle navigation"
-                >
-                  <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                  <div class="d-flex my-2 my-lg-0">
-                    <input id="inputGraphSearch" class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search" autocomplete="off" />
-                    <button class="btn btn-secondary" onclick="searchInGraph()" href="#"><i class="fa fa-search"></i></button>
-                  </div>
-                  <ul class="navbar-nav me-auto">
-                    <li class="nav-item"></li>
-                  </ul>
-                  <ul class="navbar-nav">
-                    <li class="nav-item">
-                      <a class="nav-link btn btn-secondary" href="#" onclick="renderGraph()"><i class="fa fa-sync"></i> Redraw</a>
-                    </li>
-                    <li class="nav-item dropdown">
-                      <a
-                        class="nav-link dropdown-toggle btn btn-secondary"
-                        href="#"
-                        role="button"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                        class="dropdown-toggle"
-                        data-toggle="dropdown"
-                      >
-                        <i class="fa fa-hand-pointer"></i> Select
-                      </a>
-                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="width: 300px">
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="selectNeighbors(1)" disabled>Direct Neighbors</a>
-                        </li>
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="selectOrphanVertices()" disabled>Orphan Vertices</a>
-                        </li>
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="invertVertexSelection()" disabled>Invert Node Selection</a>
-                        </li>
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="shortestPath()" disabled>Shortest Path</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link btn btn-secondary" href="#" onclick="cutSelection()"><i class="fa fa-cut"></i> Cut</a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link btn btn-secondary" href="#" onclick="cropSelection()"><i class="fa fa-crop"></i> Crop</a>
-                    </li>
-                    <li class="nav-item dropdown">
-                      <a
-                        class="nav-link dropdown-toggle btn btn-secondary"
-                        href="#"
-                        role="button"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                        class="dropdown-toggle"
-                        data-toggle="dropdown"
-                      >
-                        <i class="fa fa-upload"></i> Import
-                      </a>
-                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="width: 300px">
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="importGraph('json')">JSON</a>
-                        </li>
+        <div class="col-12">
+          <ul class="nav nav-tabs" id="tabs-command">
+            <li class="nav-item">
+              <a data-toggle="tab" href="#tab-table" class="active show nav-link" id="tab-table-sel">
+                <center><i class="fa fa-table"></i> <span class="mini-text">Table</span></center>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a data-toggle="tab" href="#tab-graph" class="nav-link" id="tab-graph-sel">
+                <center><i class="fa fa-project-diagram"></i> <span class="mini-text">Graph</span></center>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a data-toggle="tab" href="#tab-json" class="nav-link" id="tab-json-sel">
+                <center><i class="fa fa-file-code"></i> <span class="mini-text">Json</span></center>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a data-toggle="tab" href="#tab-explain" class="nav-link" id="tab-explain-sel">
+                <center><i class="fa fa-list"></i> <span class="mini-text">Explain</span></center>
+              </a>
+            </li>
+          </ul>
 
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" disabled>GraphML</a>
-                        </li>
+          <div class="tab-content">
+            <div class="tab-pane fade show active" id="tab-table" role="tabpanel">
+              <div class="table-responsive">
+                <table id="result" class="table table-striped table-sm" style="width: 100%; table-layout: fixed"></table>
+              </div>
+              <div id="tableRecordEditorOverlay" class="record-editor-overlay">
+                <div id="tableRecordEditorContent"></div>
+              </div>
+            </div>
 
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="importSettings()">Settings</a>
-                        </li>
+            <div class="tab-pane fade" id="tab-graph" role="tabpanel">
+              <div class="row">
+                <div class="col-12">
+                  <nav class="navbar navbar-expand-lg navbar-light">
+                    <button
+                      class="navbar-toggler"
+                      type="button"
+                      data-toggle="collapse"
+                      data-target="#navbarSupportedContent"
+                      aria-controls="navbarSupportedContent"
+                      aria-expanded="false"
+                      aria-label="Toggle navigation"
+                    >
+                      <span class="navbar-toggler-icon"></span>
+                    </button>
+
+                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                      <div class="d-flex my-2 my-lg-0">
+                        <input id="inputGraphSearch" class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search" autocomplete="off" />
+                        <button class="btn btn-secondary" onclick="searchInGraph()" href="#"><i class="fa fa-search"></i></button>
+                      </div>
+                      <ul class="navbar-nav me-auto">
+                        <li class="nav-item"></li>
                       </ul>
-                    </li>
-                    <li class="nav-item dropdown">
-                      <a
-                        class="nav-link dropdown-toggle btn btn-secondary"
-                        href="#"
-                        role="button"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                        class="dropdown-toggle"
-                        data-toggle="dropdown"
-                      >
-                        <i class="fa fa-download"></i> Export
-                      </a>
-                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="width: 300px">
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="exportGraph('json')">JSON</a>
+                      <ul class="navbar-nav">
+                        <li class="nav-item">
+                          <a class="nav-link btn btn-secondary" href="#" onclick="renderGraph()"><i class="fa fa-sync"></i> Redraw</a>
                         </li>
-
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="exportGraph('graphml')">GraphML</a>
+                        <li class="nav-item dropdown">
+                          <a
+                            class="nav-link dropdown-toggle btn btn-secondary"
+                            href="#"
+                            role="button"
+                            aria-haspopup="true"
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-toggle="dropdown"
+                          >
+                            <i class="fa fa-hand-pointer"></i> Select
+                          </a>
+                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="width: 300px">
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="selectNeighbors(1)" disabled>Direct Neighbors</a>
+                            </li>
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="selectOrphanVertices()" disabled>Orphan Vertices</a>
+                            </li>
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="invertVertexSelection()" disabled>Invert Node Selection</a>
+                            </li>
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="shortestPath()" disabled>Shortest Path</a>
+                            </li>
+                          </ul>
                         </li>
-
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="exportGraph('png')">PNG image</a>
+                        <li class="nav-item">
+                          <a class="nav-link btn btn-secondary" href="#" onclick="cutSelection()"><i class="fa fa-cut"></i> Cut</a>
                         </li>
-
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="exportGraph('jpeg')">JPEG image</a>
+                        <li class="nav-item">
+                          <a class="nav-link btn btn-secondary" href="#" onclick="cropSelection()"><i class="fa fa-crop"></i> Crop</a>
                         </li>
-
-                        <li class="dropdown-item">
-                          <a class="nav-link" href="#" onclick="exportSettings()">Settings</a>
+                        <li class="nav-item dropdown">
+                          <a
+                            class="nav-link dropdown-toggle btn btn-secondary"
+                            href="#"
+                            role="button"
+                            aria-haspopup="true"
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-toggle="dropdown"
+                          >
+                            <i class="fa fa-upload"></i> Import
+                          </a>
+                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="width: 300px">
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="importGraph('json')">JSON</a>
+                            </li>
+
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" disabled>GraphML</a>
+                            </li>
+
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="importSettings()">Settings</a>
+                            </li>
+                          </ul>
                         </li>
-                      </ul>
-                    </li>
-                    <li class="nav-item dropdown">
-                      <a
-                        class="nav-link dropdown-toggle btn btn-secondary"
-                        href="#"
-                        role="button"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                        class="dropdown-toggle"
-                        data-toggle="dropdown"
-                      >
-                        <i class="fa fa-sliders-h"></i> Settings
-                      </a>
-                      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" style="width: 300px">
-                        <li class="dropdown-item">
-                          <label for="graphSpacing" class="form-label">Graph Spacing</label>
-                          <input
-                            id="graphSpacing"
-                            class="form-control"
-                            type="range"
-                            class="custom-range"
-                            min="10"
-                            max="100"
-                            step="10"
-                            value="20"
-                            style="width: 100%"
-                          />
+                        <li class="nav-item dropdown">
+                          <a
+                            class="nav-link dropdown-toggle btn btn-secondary"
+                            href="#"
+                            role="button"
+                            aria-haspopup="true"
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-toggle="dropdown"
+                          >
+                            <i class="fa fa-download"></i> Export
+                          </a>
+                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="width: 300px">
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="exportGraph('json')">JSON</a>
+                            </li>
+
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="exportGraph('graphml')">GraphML</a>
+                            </li>
+
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="exportGraph('png')">PNG image</a>
+                            </li>
+
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="exportGraph('jpeg')">JPEG image</a>
+                            </li>
+
+                            <li class="dropdown-item">
+                              <a class="nav-link" href="#" onclick="exportSettings()">Settings</a>
+                            </li>
+                          </ul>
                         </li>
-
-                        <li
-                          class="dropdown-item"
-                          onclick="globalToggleCheckbox('#cumulativeSelection');globalGraphSettings.cumulativeSelection = $('#cumulativeSelection').prop('checked')"
-                        >
-                          <div class="form-check-input">
-                            <input id="cumulativeSelection" class="form-check-input" type="checkbox" />
-                            <label for="cumulativeSelection" class="form-label">Cumulative Selection</label>
-                            <i
-                              class="fa fa-question-circle"
-                              data-toggle="tooltip"
-                              data-html="true"
-                              title="If enabled, any new selection of elements will be added to the current selection, otherwise it will replace it."
-                            ></i>
-                          </div>
+                        <li class="nav-item dropdown">
+                          <a
+                            class="nav-link dropdown-toggle btn btn-secondary"
+                            href="#"
+                            role="button"
+                            aria-haspopup="true"
+                            aria-expanded="false"
+                            class="dropdown-toggle"
+                            data-toggle="dropdown"
+                          >
+                            <i class="fa fa-sliders-h"></i> Settings
+                          </a>
+                          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" style="width: 300px">
+                            <li class="dropdown-item">
+                              <label for="graphSpacing" class="form-label">Graph Spacing</label>
+                              <input
+                                id="graphSpacing"
+                                class="form-control"
+                                type="range"
+                                class="custom-range"
+                                min="10"
+                                max="100"
+                                step="10"
+                                value="20"
+                                style="width: 100%"
+                              />
+                            </li>
+
+                            <li
+                              class="dropdown-item"
+                              onclick="globalToggleCheckbox('#cumulativeSelection');globalGraphSettings.cumulativeSelection = $('#cumulativeSelection').prop('checked')"
+                            >
+                              <div class="form-check-input">
+                                <input id="cumulativeSelection" class="form-check-input" type="checkbox" />
+                                <label for="cumulativeSelection" class="form-label">Cumulative Selection</label>
+                                <i
+                                  class="fa fa-question-circle"
+                                  data-toggle="tooltip"
+                                  data-html="true"
+                                  title="If enabled, any new selection of elements will be added to the current selection, otherwise it will replace it."
+                                ></i>
+                              </div>
+                            </li>
+                          </ul>
+                        </li>
+                        <li class="nav-item">
+                          <button
+                            type="button"
+                            class="btn"
+                            data-toggle="tooltip"
+                            data-placement="top"
+                            data-html="true"
+                            title="1) Hold MOUSE CLICK for context menu<br>2) CMD + MOUSE for block selection"
+                          >
+                            <i class="fa fa-question-circle"></i>
+                          </button>
                         </li>
                       </ul>
-                    </li>
-                    <li class="nav-item">
-                      <button
-                        type="button"
-                        class="btn"
-                        data-toggle="tooltip"
-                        data-placement="top"
-                        data-html="true"
-                        title="1) Hold MOUSE CLICK for context menu<br>2) CMD + MOUSE for block selection"
-                      >
-                        <i class="fa fa-question-circle"></i>
-                      </button>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link btn btn-secondary" onclick="toggleSidebar()" href="#" id="toggleSidebar"
-                        ><i class="fa fa-eye-slash"></i> Hide Properties</a
-                      >
-                    </li>
-                  </ul>
+                    </div>
+                  </nav>
                 </div>
-              </nav>
-            </div>
-          </div>
+              </div>
 
-          <div class="row" style="overflow-x: hidden">
-            <div class="col-9" id="graphMainPanel">
-              <div id="graph" style="height: 800px; width: 100%"></div>
-            </div>
-            <div class="col-3" id="graphPropertiesPanel">
-              <div class="card-header-tab card-header" style="height: 100%">
-                <span id="graphPropertiesType">Select an element to see its properties</span>
-                <table id="graphPropertiesTable" class="table table-striped table-sm" style="border: 0px; width: 100%; table-layout: fixed"></table>
-                <span id="graphActions"></span>
-                <span id="graphLayout"></span>
+              <div class="row" style="overflow-x: hidden">
+                <div class="col-9" id="graphMainPanel">
+                  <div id="graph" style="height: 800px; width: 100%"></div>
+                </div>
+                <div class="col-3" id="graphPropertiesPanel">
+                  <div id="recordEditorContainer">
+                    <div id="recordEditorHeader"></div>
+                    <div id="recordEditorBody">
+                      <span id="graphPropertiesType">Select an element to see its properties</span>
+                    </div>
+                    <span id="graphActions"></span>
+                    <span id="graphLayout"></span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-12" id="graphStatus" style="height: 25px">
+                  <span>&nbsp;</span>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div class="row">
-            <div class="col-12" id="graphStatus" style="height: 25px">
-              <span>&nbsp;</span>
+            <div class="tab-pane fade" id="tab-json" role="tabpanel">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a id="jsonToClipboard" type="button" data-clipboard-target="#resultJson" class="clipboard-trigger nav-link btn btn-secondary">
+                    <i class="fa fa-copy"></i> Copy to clipboard
+                  </a>
+                </li>
+              </ul>
+              <textarea id="resultJson" style="width: 100%; height: 600px" readonly></textarea>
             </div>
-          </div>
-        </div>
 
-        <div class="tab-pane fade" id="tab-table" role="tabpanel">
-          <div class="table-responsive">
-            <table id="result" class="table table-striped table-sm" style="width: 100%; table-layout: fixed"></table>
+            <div class="tab-pane fade" id="tab-explain" role="tabpanel">
+              <nav class="navbar navbar-expand-lg navbar-light">
+                <ul class="navbar-nav">
+                  <li class="nav-item">
+                    <div class="form-check">
+                      <input id="profileCommand" class="form-check-input" type="checkbox" />
+                      <label for="profileCommand" class="form-check-label">Profile Execution</label>
+                      <i
+                        class="fa fa-question-circle"
+                        data-toggle="tooltip"
+                        data-html="true"
+                        title="If enabled, the command is profiled (only SQL and Gremlin apply) and statistics are returned. Executing a command with profiling is more expensive, use it only when needed."
+                      ></i>
+                    </div>
+                  </li>
+                </ul>
+              </nav>
+              <textarea id="resultExplain" style="width: 100%; height: 600px; font-family: courier" readonly></textarea>
+            </div>
           </div>
         </div>
-
-        <div class="tab-pane fade" id="tab-json" role="tabpanel">
-          <ul class="navbar-nav">
-            <li class="nav-item">
-              <a id="jsonToClipboard" type="button" data-clipboard-target="#resultJson" class="clipboard-trigger nav-link btn btn-secondary">
-                <i class="fa fa-copy"></i> Copy to clipboard
-              </a>
-            </li>
-          </ul>
-          <textarea id="resultJson" style="width: 100%; height: 600px" readonly></textarea>
-        </div>
-
-        <div class="tab-pane fade" id="tab-explain" role="tabpanel">
-          <nav class="navbar navbar-expand-lg navbar-light">
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <div class="form-check-input">
-                  <input id="profileCommand" class="form-check-input" type="checkbox" />
-                  <label for="profileCommand" class="form-label">Profile Execution</label>
-                  <i
-                    class="fa fa-question-circle"
-                    data-toggle="tooltip"
-                    data-html="true"
-                    title="If enabled, the command is profiled (only SQL and Gremlin apply) and statistics are returned. Executing a command with profiling is more expensive, use it only when needed."
-                  ></i>
-                </div>
-              </li>
-            </ul>
-          </nav>
-          <textarea id="resultExplain" style="width: 100%; height: 600px; font-family: courier" readonly></textarea>
-        </div>
       </div>
     </div>
   </div>
@@ -344,33 +396,28 @@
   });
 
   var editor = null;
-  var historyNavIndex = -1; // -1 means not navigating history, 0 is most recent command
-  var historyNavBuffer = ""; // stores the current input before history navigation starts
+  var historyNavIndex = -1;
+  var historyNavBuffer = "";
 
-  // Get history entries filtered for current database
   function getFilteredHistory() {
     let queryHistory = getQueryHistory();
     let database = escapeHtml(getCurrentDatabase());
     let filtered = [];
     for (let i = 0; i < queryHistory.length; i++) {
       let q = queryHistory[i];
-      if (q != null && q.d == database && q.l != null && q.c != null) {
+      if (q != null && q.d == database && q.l != null && q.c != null)
         filtered.push(q);
-      }
     }
     return filtered;
   }
 
-  // Navigate to previous (older) command in history
   function historyPrevious() {
     let filtered = getFilteredHistory();
     if (filtered.length == 0) return;
 
     // Save current input when starting navigation
-    if (historyNavIndex == -1) {
+    if (historyNavIndex == -1)
       historyNavBuffer = editor.getValue();
-    }
-
     if (historyNavIndex < filtered.length - 1) {
       historyNavIndex++;
       let q = filtered[historyNavIndex];
@@ -381,12 +428,9 @@
     }
   }
 
-  // Navigate to next (newer) command in history
   function historyNext() {
-    if (historyNavIndex == -1) return; // not navigating
-
+    if (historyNavIndex == -1) return;
     let filtered = getFilteredHistory();
-
     if (historyNavIndex > 0) {
       historyNavIndex--;
       let q = filtered[historyNavIndex];
@@ -395,21 +439,18 @@
       editor.setValue(q.c);
       editor.setCursor(editor.lineCount(), 0);
     } else {
-      // Return to the original input
       historyNavIndex = -1;
       editor.setValue(historyNavBuffer);
       editor.setCursor(editor.lineCount(), 0);
     }
   }
 
-  // Reset history navigation (called when executing command or changing database)
   function resetHistoryNavigation() {
     historyNavIndex = -1;
     historyNavBuffer = "";
   }
 
   function initQuery() {
-    // Initialize Bootstrap 5 tooltips
     document.querySelectorAll('[data-toggle="tooltip"]').forEach(function(el) {
       new bootstrap.Tooltip(el);
     });
@@ -434,8 +475,6 @@
       e.preventDefault();
     });
 
-    // Native Clipboard API replacement for ClipboardJS
-    // Use .off() first to prevent multiple bindings if initQuery is called multiple times
     $("#jsonToClipboard").off("click").on("click", async function(e) {
       e.preventDefault();
       const text = $("#resultJson").val() || $("#resultJson").text();
@@ -443,40 +482,34 @@
         await navigator.clipboard.writeText(text);
         globalNotify("Content", "successfully copied in the clipboard", "success");
       } catch (err) {
-        console.error("Failed to copy to clipboard:", err);
         globalNotify("Error", "Failed to copy to clipboard", "danger");
       }
     });
 
     renderCodeEditor();
+    initSidebarPanels();
+    populateQuerySidebar();
     executeCommand();
 
-    // APPLY SETTINGS FROM URL
     var dbPar = getURLParameter("db");
     if (dbPar != null && dbPar != "null") setCurrentDatabase(dbPar);
 
     var limitPar = getURLParameter("limit");
     if (limitPar != null && limitPar != "null") {
-      if (limitPar != "25" && limitPar != "100" && limitPar != "500" && limitPar != "-1") {
+      if (limitPar != "20" && limitPar != "100" && limitPar != "500" && limitPar != "-1") {
         var sanitizedLimitPar = escapeHtml(limitPar);
         $("#inputLimit").append("<option value='" + sanitizedLimitPar + "' selected='selected'>" + sanitizedLimitPar + "</option>");
       }
       $("#inputLimit").val(escapeHtml(limitPar));
     }
 
-    loadQueryHistory();
-
-    $("#inputHistory").change(function () {
-      copyQueryFromHistory();
-      resetHistoryNavigation();
-    });
-
     $(".inputDatabase").change(function () {
       setCurrentDatabase(this.value);
-      loadQueryHistory();
       resetHistoryNavigation();
       displaySchema();
       displayDatabaseSettings();
+      // Refresh active sidebar panel on database change
+      refreshActiveSidebarPanel();
     });
   }
 
@@ -486,7 +519,7 @@
       lineWrapping: true,
       indentWithTabs: false,
       smartIndent: true,
-      lineNumbers: false,
+      lineNumbers: true,
       matchBrackets: true,
       autofocus: true,
       viewportMargin: Infinity,
@@ -502,23 +535,13 @@
         resetHistoryNavigation();
         executeCommand();
       },
-      "Ctrl-Up": function (cm) {
-        historyPrevious();
-      },
-      "Ctrl-Down": function (cm) {
-        historyNext();
-      },
-      "Cmd-Up": function (cm) {
-        historyPrevious();
-      },
-      "Cmd-Down": function (cm) {
-        historyNext();
-      },
+      "Ctrl-Up": function (cm) { historyPrevious(); },
+      "Ctrl-Down": function (cm) { historyNext(); },
+      "Cmd-Up": function (cm) { historyPrevious(); },
+      "Cmd-Down": function (cm) { historyNext(); },
     });
 
-    setTimeout(function () {
-      editor.refresh();
-    }, 1);
+    setTimeout(function () { editor.refresh(); }, 1);
   }
 
   function getEditorMode() {
diff --git a/studio/src/main/resources/static/resources.html b/studio/src/main/resources/static/resources.html
index b5d1addd7f..ad865cc69b 100644
--- a/studio/src/main/resources/static/resources.html
+++ b/studio/src/main/resources/static/resources.html
@@ -1,81 +1,183 @@
 <div class="tab-pane fade" id="tab-resources" role="tabpanel">
-  <h4><i class="fa fa-info-circle"></i>&nbsp;Useful Resources</h4>
-  <hr />
-  <div class="row">
-    <div class="col-6">
-      <ul>
-        <li>
-          <p>Open Source project on <a class="link" href="https://github.com/ArcadeData/arcadedb">GitHub</a></p>
-        </li>
-        <li>
-          <p>ArcadeDB understands multiple languages:</p>
-          <div class="ulist">
-            <ul>
-              <li>
-                <p>
-                  <a class="link" href="https://docs.arcadedb.com#sql">SQL</a> (inspired from OrientDB SQL dialect that supports pattern matching on graphs)
-                </p>
-              </li>
-              <li>
-                <p><a class="link" href="https://docs.arcadedb.com#open-cypher">Cypher</a></p>
-              </li>
-              <li>
-                <p><a class="link" href="https://docs.arcadedb.com#gremlin-api">Apache Gremlin (Apache Tinkerpop v3.7.x)</a></p>
-              </li>
-              <li>
-                <p><a class="link" href="https://docs.arcadedb.com#mongodb-query-language">MongoDB Query Language</a></p>
-              </li>
-            </ul>
-          </div>
-        </li>
-        <li>
-          <p>Tutorials: <a class="link" href="https://docs.arcadedb.com#java-tutorial">Java Tutorial</a></p>
-        </li>
-        <li>
-          <p>Tools: <a class="link" href="https://docs.arcadedb.com#console-tutorial">Working with the Console Tutorial</a></p>
-        </li>
-      </ul>
+  <div class="docs-panel">
+    <!-- Left: Table of Contents -->
+    <div class="docs-sidebar docs-sidebar-info">
+      <div class="docs-sidebar-header">
+        <span class="docs-sidebar-title"><i class="fa fa-book"></i> Documentation</span>
+        <a class="docs-open-external" href="https://docs.arcadedb.com" target="_blank" title="Open full docs">
+          <i class="fa fa-external-link-alt"></i>
+        </a>
+      </div>
+
+      <div class="docs-sidebar-body">
+        <!-- Getting Started -->
+        <div class="docs-toc-section">
+          <div class="docs-toc-header" onclick="toggleTocSection(this)">
+            <span><i class="fa fa-rocket"></i> Getting Started</span>
+            <i class="fa fa-chevron-right open"></i>
+          </div>
+          <div class="docs-toc-body open">
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#what-is-arcadedb" target="_blank">What is ArcadeDB? <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#run-arcadedb" target="_blank">Run ArcadeDB <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#multi-model" target="_blank">Multi-Model <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#java-tutorial" target="_blank">Java Tutorial <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+          </div>
+        </div>
+
+        <!-- Query Languages -->
+        <div class="docs-toc-section">
+          <div class="docs-toc-header" onclick="toggleTocSection(this)">
+            <span><i class="fa fa-terminal"></i> Query Languages</span>
+            <i class="fa fa-chevron-right open"></i>
+          </div>
+          <div class="docs-toc-body open">
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#sql" target="_blank">SQL <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#cypher" target="_blank">Cypher <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#gremlin-api" target="_blank">Gremlin <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#graphql" target="_blank">GraphQL <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#mongodb-query-language" target="_blank">MongoDB Query Language <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#redis-query-language" target="_blank">Redis Query Language <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+          </div>
+        </div>
+
+        <!-- Connectivity & Drivers -->
+        <div class="docs-toc-section">
+          <div class="docs-toc-header" onclick="toggleTocSection(this)">
+            <span><i class="fa fa-plug"></i> Connectivity &amp; Drivers</span>
+            <i class="fa fa-chevron-right"></i>
+          </div>
+          <div class="docs-toc-body">
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#http-json-api" target="_blank">HTTP / JSON API <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#java-api-local" target="_blank">Java Embedded API <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#jdbc-driver" target="_blank">JDBC Driver <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#python" target="_blank">Python <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#postgres-driver" target="_blank">PostgreSQL Protocol <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#mongodb-protocol" target="_blank">MongoDB Protocol <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#redis-query-language" target="_blank">Redis Protocol <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+          </div>
+        </div>
+
+        <!-- Administration -->
+        <div class="docs-toc-section">
+          <div class="docs-toc-header" onclick="toggleTocSection(this)">
+            <span><i class="fa fa-cogs"></i> Administration</span>
+            <i class="fa fa-chevron-right"></i>
+          </div>
+          <div class="docs-toc-body">
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#installation" target="_blank">Installation <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#docker" target="_blank">Docker <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#kubernetes" target="_blank">Kubernetes <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#backup-restore" target="_blank">Backup &amp; Restore <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#security" target="_blank">Security <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#high-availability" target="_blank">High Availability <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#settings" target="_blank">Settings <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+          </div>
+        </div>
+
+        <!-- Core Concepts -->
+        <div class="docs-toc-section">
+          <div class="docs-toc-header" onclick="toggleTocSection(this)">
+            <span><i class="fa fa-lightbulb"></i> Core Concepts</span>
+            <i class="fa fa-chevron-right"></i>
+          </div>
+          <div class="docs-toc-body">
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#graph-model" target="_blank">Graph Database <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#schema" target="_blank">Schema <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#indexes" target="_blank">Indexes <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#transactions" target="_blank">Transactions <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+          </div>
+        </div>
+
+        <!-- Tools -->
+        <div class="docs-toc-section">
+          <div class="docs-toc-header" onclick="toggleTocSection(this)">
+            <span><i class="fa fa-wrench"></i> Tools</span>
+            <i class="fa fa-chevron-right"></i>
+          </div>
+          <div class="docs-toc-body">
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#console-tutorial" target="_blank">Console <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://docs.arcadedb.com/#importer" target="_blank">Importer <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+          </div>
+        </div>
+
+        <!-- Community -->
+        <div class="docs-toc-section">
+          <div class="docs-toc-header" onclick="toggleTocSection(this)">
+            <span><i class="fa fa-users"></i> Community</span>
+            <i class="fa fa-chevron-right"></i>
+          </div>
+          <div class="docs-toc-body">
+            <a class="docs-toc-entry" href="https://github.com/ArcadeData/arcadedb" target="_blank"><i class="fab fa-github"></i> GitHub Repository <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://github.com/ArcadeData/arcadedb/issues" target="_blank"><i class="fa fa-bug"></i> Report an Issue <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+            <a class="docs-toc-entry" href="https://github.com/ArcadeData/arcadedb/discussions" target="_blank"><i class="fa fa-comments"></i> Discussions <i class="fa fa-external-link-alt docs-toc-ext"></i></a>
+          </div>
+        </div>
+      </div>
     </div>
 
-    <div class="col-6">
-      <ul>
-        <li>
-          <p>ArcadeDB can be used as:</p>
-          <div class="ulist">
-            <ul>
-              <li>
-                <p><a class="link" href="https://docs.arcadedb.com#java-api-local">Embedded</a> from any language on top of the Java Virtual Machine</p>
-              </li>
-              <li>
-                <p>Remotely by using <a class="link" href="https://docs.arcadedb.com#http-json-api">HTTP/JSON</a></p>
-              </li>
-              <li>
-                <p>
-                  Remotely by using a <a class="link" href="https://docs.arcadedb.com#postgres-driver">Postgres driver</a> (ArcadeDB implements Postgres Wire
-                  protocol)
-                </p>
-              </li>
-              <li>
-                <p>
-                  Remotely by using a <a class="link" href="https://docs.arcadedb.com#mongodb-protocol">MongoDB driver</a> (only a subset of the operations are
-                  implemented)
-                </p>
-              </li>
-              <li>
-                <p>
-                  Remotely by using a <a class="link" href="https://docs.arcadedb.com#redis-query-language">Redis driver</a> (only a subset of the operations are
-                  implemented)
-                </p>
-              </li>
-            </ul>
-          </div>
-        </li>
-        <li>
-          <p>
-            Misc: <a class="link" href="https://docs.arcadedb.com#docker">Docker</a>, <a class="link" href="https://docs.arcadedb.com#kubernetes">Kubernetes</a>
-          </p>
-        </li>
-      </ul>
+    <!-- Right: Welcome / Overview -->
+    <div class="info-detail-container">
+      <div class="info-overview">
+        <div class="info-overview-header">
+          <img src="images/arcadedb-logo-small.png" style="height: 48px; margin-bottom: 16px;" />
+          <h4>ArcadeDB Documentation</h4>
+          <p>The Next Generation Multi-Model Database Management System. Click any topic in the sidebar to open its documentation page.</p>
+        </div>
+
+        <div class="info-cards">
+          <div class="info-card">
+            <div class="info-card-icon"><i class="fa fa-database"></i></div>
+            <h6>Multi-Model</h6>
+            <p>Graph, Document, Key/Value, Search, Time Series, and Vector in one engine.</p>
+          </div>
+          <div class="info-card">
+            <div class="info-card-icon"><i class="fa fa-terminal"></i></div>
+            <h6>Multi-Language</h6>
+            <p>SQL, Cypher, Gremlin, GraphQL, MongoDB QL, and Redis commands.</p>
+          </div>
+          <div class="info-card">
+            <div class="info-card-icon"><i class="fa fa-plug"></i></div>
+            <h6>Multi-Protocol</h6>
+            <p>HTTP/JSON, PostgreSQL, MongoDB, and Redis wire protocols.</p>
+          </div>
+          <div class="info-card">
+            <div class="info-card-icon"><i class="fa fa-bolt"></i></div>
+            <h6>Performance</h6>
+            <p>Built for speed with minimal GC pressure and efficient storage.</p>
+          </div>
+          <div class="info-card">
+            <div class="info-card-icon"><i class="fa fa-shield-halved"></i></div>
+            <h6>ACID Transactions</h6>
+            <p>Full transaction support with isolation and durability guarantees.</p>
+          </div>
+          <div class="info-card">
+            <div class="info-card-icon"><i class="fa fa-network-wired"></i></div>
+            <h6>High Availability</h6>
+            <p>Leader-follower replication with automatic failover.</p>
+          </div>
+        </div>
+
+        <div class="info-quick-links">
+          <a href="https://docs.arcadedb.com" target="_blank" class="info-quick-link">
+            <i class="fa fa-book"></i> Full Documentation
+          </a>
+          <a href="https://github.com/ArcadeData/arcadedb" target="_blank" class="info-quick-link">
+            <i class="fab fa-github"></i> GitHub
+          </a>
+          <a href="https://github.com/ArcadeData/arcadedb/discussions" target="_blank" class="info-quick-link">
+            <i class="fa fa-comments"></i> Community
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </div>
+
+<script>
+function toggleTocSection(header) {
+  var chevron = header.querySelector(".fa-chevron-right");
+  var body = header.nextElementSibling;
+  chevron.classList.toggle("open");
+  body.classList.toggle("open");
+}
+</script>
diff --git a/studio/src/main/resources/static/server.html b/studio/src/main/resources/static/server.html
index 778b8bfa6b..3818be63e4 100644
--- a/studio/src/main/resources/static/server.html
+++ b/studio/src/main/resources/static/server.html
@@ -1,20 +1,21 @@
 <div class="tab-pane fade" id="tab-server" role="tabpanel">
-  <div class="d-flex justify-content-around">
-    <div class="p-2 flex-grow-1">
-      <div>
-        <h4><i class="fa fa-server"></i> Server</h4>
-      </div>
-      <div class="p-2">
-        <span id="serverConnection"></span>
-      </div>
+  <div class="d-flex align-items-center px-3 py-2" style="border-bottom: 1px solid var(--border-light);">
+    <div class="flex-grow-1 d-flex align-items-center gap-3">
+      <span id="serverConnectionCompact" style="font-size: 0.88rem; color: var(--text-secondary); cursor: pointer; position: relative;" onclick="toggleServerInfoPopover()">
+        <i class="fa fa-server" style="color: var(--color-brand); margin-right: 6px;"></i>
+        <span id="serverConnectionLabel"></span>
+        <i class="fa fa-chevron-down" style="font-size: 0.6rem; margin-left: 4px; color: var(--text-lightest);"></i>
+        <!-- Popover for full details -->
+        <div id="serverInfoPopover" style="display:none; position:absolute; top:100%; left:0; z-index:10000; min-width:400px; background:var(--bg-card); border:1px solid var(--border-ddd); border-radius:8px; box-shadow:0 4px 16px var(--shadow-dropdown); padding:14px 18px; margin-top:4px; font-size:0.82rem; color:var(--text-secondary);">
+          <div id="serverInfoPopoverBody"></div>
+        </div>
+      </span>
     </div>
-    <div class="p-2">
-      <button class="btn" onclick="shutdownServer()">Shutdown <i class="fas fa-power-off" style="color: red"></i></button>
+    <div class="d-flex align-items-center gap-2">
+      <button class="btn btn-sm" style="color:red;" onclick="shutdownServer()" title="Shutdown Server"><i class="fas fa-power-off"></i></button>
     </div>
   </div>
 
-  <hr />
-
   <div class="d-flex justify-content-around">
     <div class="p-1 d-flex align-items-center gap-2">
       <button class="btn btn-pill" onclick="updateServer()">Refresh <i class="fa fa-sync"></i></button>
diff --git a/studio/src/main/resources/static/settings.html b/studio/src/main/resources/static/settings.html
new file mode 100644
index 0000000000..900bcaa86f
--- /dev/null
+++ b/studio/src/main/resources/static/settings.html
@@ -0,0 +1,59 @@
+<div class="tab-pane fade" id="tab-settings" role="tabpanel">
+  <div class="studio-settings-panel">
+    <h5><i class="fa fa-gear"></i> Settings</h5>
+
+    <div class="studio-settings-section">
+      <h6>Appearance</h6>
+      <div style="margin-bottom: 8px; font-size: 0.82rem; color: var(--text-secondary);">Theme</div>
+      <div class="theme-option-group" id="themeOptionGroup">
+        <div class="theme-option" data-theme-value="light" onclick="applyTheme('light')">
+          <i class="fa fa-sun"></i> Light
+        </div>
+        <div class="theme-option" data-theme-value="dark" onclick="applyTheme('dark')">
+          <i class="fa fa-moon"></i> Dark
+        </div>
+        <div class="theme-option" data-theme-value="system" onclick="applyTheme('system')">
+          <i class="fa fa-desktop"></i> System
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function applyTheme(pref) {
+  globalStorageSave('studio-theme', pref);
+
+  var resolved = pref;
+  if (pref === 'system')
+    resolved = window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light';
+
+  document.documentElement.setAttribute('data-theme', resolved);
+  updateThemeButtons(pref);
+}
+
+function updateThemeButtons(pref) {
+  var group = document.getElementById('themeOptionGroup');
+  if (!group) return;
+  var btns = group.querySelectorAll('.theme-option');
+  for (var i = 0; i < btns.length; i++) {
+    if (btns[i].getAttribute('data-theme-value') === pref)
+      btns[i].classList.add('active');
+    else
+      btns[i].classList.remove('active');
+  }
+}
+
+// Initialize theme buttons on load
+document.addEventListener('DOMContentLoaded', function() {
+  var saved = localStorage.getItem('studio-theme') || 'light';
+  updateThemeButtons(saved);
+
+  // Listen for system theme changes
+  window.matchMedia('(prefers-color-scheme:dark)').addEventListener('change', function() {
+    var current = localStorage.getItem('studio-theme') || 'light';
+    if (current === 'system')
+      applyTheme('system');
+  });
+});
+</script>