From 11684152f9fcbfff9ddb6f3ad680c2816459b3b4 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Thu, 19 Feb 2026 22:30:32 +0000
Subject: [PATCH] chore(ui): improve navigation and buttons placement

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/static/general.css           |  5 ++
 core/http/views/404.html               | 12 ++--
 core/http/views/agent-job-details.html |  8 +--
 core/http/views/backends.html          | 12 ++--
 core/http/views/error.html             | 12 ++--
 core/http/views/explorer.html          |  7 +-
 core/http/views/index.html             | 22 +++---
 core/http/views/login.html             | 10 ++-
 core/http/views/manage.html            | 99 ++++++++++----------------
 core/http/views/model-editor.html      | 20 +++---
 core/http/views/models.html            | 14 ++--
 core/http/views/partials/navbar.html   |  6 ++
 core/http/views/settings.html          | 49 +++----------
 core/http/views/sound.html             |  2 +-
 core/http/views/traces.html            | 16 ++---
 15 files changed, 125 insertions(+), 169 deletions(-)

diff --git a/core/http/static/general.css b/core/http/static/general.css
index 467821970a22..c63ceb31baa1 100644
--- a/core/http/static/general.css
+++ b/core/http/static/general.css
@@ -39,6 +39,11 @@ body {
   background-color: var(--color-bg-primary);
 }
 
+/* Pages without sidebar (e.g. login): center content */
+.app-layout.no-sidebar .main-content {
+  margin-left: 0;
+}
+
 /* Chat page: fix viewport height so messages scroll and input stays fixed at bottom */
 .app-layout.chat-layout {
   height: 100vh;
diff --git a/core/http/views/404.html b/core/http/views/404.html
index 2ac69b9e30b9..3788498bc6da 100644
--- a/core/http/views/404.html
+++ b/core/http/views/404.html
@@ -19,15 +19,13 @@ <h1 class="hero-title mb-4">
                     404 - Page Not Found
                 </h1>
                 <p class="text-xl text-[var(--color-text-secondary)] mb-6">The page you're looking for doesn't exist or has been moved</p>
-                <div class="flex flex-wrap justify-center gap-4">
-                    <a href="./" 
-                       class="btn-primary">
-                        <i class="fas fa-home mr-2"></i>
+                <div class="flex flex-wrap justify-center gap-2">
+                    <a href="./" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-home"></i>
                         <span>Return Home</span>
                     </a>
-                    <a href="browse/"
-                       class="btn-secondary">
-                        <i class="fas fa-images mr-2"></i>
+                    <a href="browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-images"></i>
                         <span>Browse Gallery</span>
                     </a>
                 </div>
diff --git a/core/http/views/agent-job-details.html b/core/http/views/agent-job-details.html
index 82a30be57e3a..3733439a5690 100644
--- a/core/http/views/agent-job-details.html
+++ b/core/http/views/agent-job-details.html
@@ -39,11 +39,11 @@ <h2 class="text-2xl font-semibold text-[var(--color-text-primary)]">Job Status</
                     }" 
                     class="px-4 py-2 rounded-lg text-sm font-semibold text-white" 
                     x-text="job.status ? job.status.toUpperCase() : 'LOADING...'"></span>
-                    <button x-show="job.status === 'pending' || job.status === 'running'" 
+                    <button type="button" x-show="job.status === 'pending' || job.status === 'running'" 
                             @click="cancelJob()" 
-                            class="btn-primary"
-                            style="background: var(--color-error);">
-                        <i class="fas fa-stop mr-2"></i>Cancel
+                            class="inline-flex items-center gap-1.5 text-xs text-red-400/90 hover:text-red-400 bg-transparent hover:bg-red-500/10 border border-[var(--color-border-subtle)] hover:border-red-500/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-stop"></i>
+                        <span>Cancel</span>
                     </button>
                 </div>
             </div>
diff --git a/core/http/views/backends.html b/core/http/views/backends.html
index f2d53349d2a9..ba22dc4fb3fa 100644
--- a/core/http/views/backends.html
+++ b/core/http/views/backends.html
@@ -61,10 +61,10 @@ <h1 class="hero-title">
                         <span class="text-[var(--color-text-secondary)] mr-1">Capability:</span>
                         <span class="font-semibold text-[var(--color-primary)]" x-text="systemCapability"></span>
                     </div>
-                    <a href="https://localai.io/backends/" target="_blank" class="btn-primary">
-                        <i class="fas fa-info-circle mr-2"></i>
+                    <a href="https://localai.io/backends/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-info-circle"></i>
                         <span>Documentation</span>
-                        <i class="fas fa-external-link-alt ml-2 text-xs"></i>
+                        <i class="fas fa-external-link-alt text-[10px]"></i>
                     </a>
                 </div>
             </div>
@@ -119,12 +119,12 @@ <h3 class="text-lg font-semibold text-[var(--color-text-primary)]">Install Backe
                 </div>
                 
                 <div class="flex items-center gap-4">
-                    <button 
+                    <button type="button"
                         @click="installExternalBackend()"
                         :disabled="installingExternal || !externalBackend.uri"
-                        class="btn-primary"
+                        class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]"
                     >
-                        <i class="mr-2" :class="installingExternal ? 'fas fa-spinner fa-spin' : 'fas fa-download'"></i>
+                        <i class="text-[10px]" :class="installingExternal ? 'fas fa-spinner fa-spin' : 'fas fa-download'"></i>
                         <span x-text="installingExternal ? 'Installing...' : 'Install Backend'"></span>
                     </button>
                     <span x-show="externalBackendProgress" class="text-sm text-[var(--color-text-secondary)]" x-text="externalBackendProgress"></span>
diff --git a/core/http/views/error.html b/core/http/views/error.html
index 49c448415052..d636dc334abf 100644
--- a/core/http/views/error.html
+++ b/core/http/views/error.html
@@ -19,15 +19,13 @@ <h1 class="hero-title mb-4" style="color: var(--color-error);">
                     {{if .ErrorCode}}{{.ErrorCode}}{{else}}Error{{end}}
                 </h1>
                 <p class="text-xl text-[var(--color-text-secondary)] mb-6">{{if .ErrorMessage}}{{.ErrorMessage}}{{else}}An unexpected error occurred{{end}}</p>
-                <div class="flex flex-wrap justify-center gap-4">
-                    <a href="./" 
-                       class="btn-primary">
-                        <i class="fas fa-home mr-2"></i>
+                <div class="flex flex-wrap justify-center gap-2">
+                    <a href="./" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-home"></i>
                         <span>Return Home</span>
                     </a>
-                    <a href="browse/"
-                       class="btn-secondary">
-                        <i class="fas fa-images mr-2"></i>
+                    <a href="browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-images"></i>
                         <span>Browse Gallery</span>
                     </a>
                 </div>
diff --git a/core/http/views/explorer.html b/core/http/views/explorer.html
index 92b93d9b6a7d..ce2ee0896fb8 100644
--- a/core/http/views/explorer.html
+++ b/core/http/views/explorer.html
@@ -195,9 +195,8 @@ <h1 class="hero-title">
         </div>
             <div class="flow-root">
             <!-- Toggle button for showing/hiding the form -->
-            <button class="btn-primary float-right mb-2" @click="toggleForm()">
-                <!-- Conditional icon display -->
-                <i :class="showForm ? 'fa-solid fa-times' : 'fa-solid fa-plus'" class="mr-2"></i>
+            <button type="button" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors float-right mb-2" @click="toggleForm()">
+                <i :class="showForm ? 'fa-solid fa-times' : 'fa-solid fa-plus'"></i>
                 <span x-text="showForm ? 'Close' : 'Add New Network'"></span>
             </button>
         </div>
@@ -216,7 +215,7 @@ <h2 class="h2"><i class="fa-solid fa-plus"></i> Add New Network</h2>
                     <label for="token">Token</label>
                     <textarea id="token" x-model="newNetwork.token" placeholder="Enter token" class="input"></textarea>
                 </div>
-                <button @click="addNetwork" class="btn-primary"><i class="fa-solid fa-plus"></i> Add Network</button>
+                <button type="button" @click="addNetwork" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors"><i class="fa-solid fa-plus"></i> <span>Add Network</span></button>
                 <template x-if="errorMessage">
                     <p class="error" x-text="errorMessage"></p>
                 </template>
diff --git a/core/http/views/index.html b/core/http/views/index.html
index c6d011c9e80e..bad6832b94d3 100644
--- a/core/http/views/index.html
+++ b/core/http/views/index.html
@@ -87,19 +87,19 @@ <h3 class="text-lg font-bold text-[var(--color-text-primary)] mb-4 flex items-ce
                 </div>
             </div>
             
-            <div class="flex flex-wrap justify-center gap-4 mb-8">
-                <a href="/browse/" class="btn-primary">
-                    <i class="fas fa-images mr-2"></i>
-                    Browse Model Gallery
+            <div class="flex flex-wrap justify-center gap-2 mb-8">
+                <a href="/browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                    <i class="fas fa-images"></i>
+                    <span>Browse Model Gallery</span>
                 </a>
-                <a href="/import-model" class="btn-primary">
-                    <i class="fas fa-upload mr-2"></i>
-                    Import Model
+                <a href="/import-model" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                    <i class="fas fa-upload"></i>
+                    <span>Import Model</span>
                 </a>
-                <a href="https://localai.io/basics/getting_started/" target="_blank" class="btn-secondary">
-                    <i class="fas fa-graduation-cap mr-2"></i>
-                    Getting Started
-                    <i class="fas fa-external-link-alt ml-2 text-sm"></i>
+                <a href="https://localai.io/basics/getting_started/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                    <i class="fas fa-graduation-cap"></i>
+                    <span>Getting Started</span>
+                    <i class="fas fa-external-link-alt text-[10px]"></i>
                 </a>
             </div>
             {{ else }}
diff --git a/core/http/views/login.html b/core/http/views/login.html
index 21bc3e31dab4..7a6842cd8bde 100644
--- a/core/http/views/login.html
+++ b/core/http/views/login.html
@@ -3,7 +3,7 @@
 {{template "views/partials/head" .}}
 
 <body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
-<div class="app-layout">
+<div class="app-layout no-sidebar">
   <main class="main-content">
     <div class="main-content-inner">
 
@@ -44,11 +44,9 @@ <h2 class="h2">
                     </div>
                     
                     <div>
-                        <button 
-                            type="submit" 
-                            class="btn-primary w-full"
-                        >
-                            <i class="fas fa-sign-in-alt mr-2"></i>
+                        <button type="submit"
+                            class="inline-flex items-center justify-center gap-1.5 w-full text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                            <i class="fas fa-sign-in-alt"></i>
                             <span>Login</span>
                         </button>
                     </div>
diff --git a/core/http/views/manage.html b/core/http/views/manage.html
index 929fafc836ae..b54018c24633 100644
--- a/core/http/views/manage.html
+++ b/core/http/views/manage.html
@@ -42,36 +42,6 @@ <h1 class="hero-title">
                     Model & Backend Management
                 </h1>
                 <p class="hero-subtitle">Manage your installed models and backends</p>
-                
-                <!-- Quick Actions -->
-                <div class="flex flex-wrap justify-center gap-3">
-                    <a href="browse/" class="btn-primary text-sm py-1.5 px-3">
-                        <i class="fas fa-images mr-1.5 text-[10px]"></i>
-                        <span>Model Gallery</span>
-                    </a>
-                    
-                    <a href="/import-model" class="btn-primary text-sm py-1.5 px-3">
-                        <i class="fas fa-plus mr-1.5 text-[10px]"></i>
-                        <span>Import Model</span>
-                    </a>
-
-                    <button id="reload-models-btn" class="btn-primary text-sm py-1.5 px-3">
-                        <i class="fas fa-sync-alt mr-1.5 text-[10px]"></i>
-                        <span>Update Models</span>
-                    </button>
-
-                    <a href="/browse/backends" class="btn-secondary text-sm py-1.5 px-3">
-                        <i class="fas fa-cogs mr-1.5 text-[10px]"></i>
-                        <span>Backend Gallery</span>
-                    </a>
-
-                    {{ if not .DisableRuntimeSettings }}
-                    <a href="/settings" class="btn-secondary text-sm py-1.5 px-3">
-                        <i class="fas fa-cog mr-1.5 text-[10px]"></i>
-                        <span>Settings</span>
-                    </a>
-                    {{ end }}
-                </div>
             </div>
         </div>
 
@@ -190,17 +160,17 @@ <h2 class="h2 mb-2">No models installed yet</h2>
                     <p class="text-sm text-[var(--color-text-secondary)] mb-6">Get started by installing a model from the gallery or importing it</p>
                     
                     <div class="flex flex-wrap justify-center gap-2 mb-6">
-                        <a href="browse" class="btn-primary text-sm py-1.5 px-3">
-                            <i class="fas fa-images mr-1.5 text-[10px]"></i>
-                            Browse Model Gallery
+                        <a href="browse" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                            <i class="fas fa-images text-[10px]"></i>
+                            <span>Browse Model Gallery</span>
                         </a>
-                        <a href="/import-model" class="btn-primary text-sm py-1.5 px-3">
-                            <i class="fas fa-upload mr-1.5 text-[10px]"></i>
-                            Import Model
+                        <a href="/import-model" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                            <i class="fas fa-upload text-[10px]"></i>
+                            <span>Import Model</span>
                         </a>
-                        <a href="https://localai.io/basics/getting_started/" target="_blank" class="btn-secondary text-sm py-1.5 px-3">
-                            <i class="fas fa-book mr-1.5 text-[10px]"></i>
-                            Documentation
+                        <a href="https://localai.io/basics/getting_started/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                            <i class="fas fa-book text-[10px]"></i>
+                            <span>Documentation</span>
                         </a>
                     </div>
 
@@ -228,13 +198,22 @@ <h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-2 flex item
             {{ $modelsN := len .ModelsConfig}}
             {{ $modelsN = add $modelsN (len .Models)}}
             <div class="mb-6">
-                <h2 class="h3 mb-1 flex items-center">
-                    <i class="fas fa-brain mr-2 text-[var(--color-primary)] text-sm"></i>
-                    Installed Models
-                </h2>
-                <p class="text-sm text-[var(--color-text-secondary)] mb-4">
-                    <span class="text-[var(--color-primary)] font-medium">{{$modelsN}}</span> model{{if gt $modelsN 1}}s{{end}} ready to use
-                </p>
+                <div class="flex items-center justify-between gap-3 mb-1">
+                    <div>
+                        <h2 class="h3 flex items-center">
+                            <i class="fas fa-brain mr-2 text-[var(--color-primary)] text-sm"></i>
+                            Installed Models
+                        </h2>
+                        <p class="text-sm text-[var(--color-text-secondary)] mt-0.5">
+                            <span class="text-[var(--color-primary)] font-medium">{{$modelsN}}</span> model{{if gt $modelsN 1}}s{{end}} ready to use
+                        </p>
+                    </div>
+                    <button id="reload-models-btn" type="button" title="Update models list from disk"
+                        class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-sync-alt text-[10px]"></i>
+                        <span>Update</span>
+                    </button>
+                </div>
             </div>
             
             <div class="overflow-x-auto mb-8">
@@ -339,13 +318,13 @@ <h2 class="h3 mb-1 flex items-center">
                             <td class="p-2">
                                 <div class="flex items-center justify-end gap-1">
                                     {{ if index $loadedModels .Name }}
-                                    <button class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors" 
+                                    <button type="button" class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors"
                                         onclick="handleStopModel('{{.Name}}')"
                                         title="Stop {{.Name}}">
                                         <i class="fas fa-stop text-xs"></i>
                                     </button>
                                     {{ end }}
-                                    <button class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors"
+                                    <button type="button" class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors"
                                         onclick="handleDeleteModel('{{.Name}}')"
                                         title="Delete {{.Name}}">
                                         <i class="fas fa-trash-alt text-xs"></i>
@@ -397,12 +376,12 @@ <h2 class="h3 flex items-center">
                         Installed Backends
                     </h2>
                     {{ if gt (len .InstalledBackends) 0 }}
-                    <button
+                    <button type="button"
                         @click="reinstallAllBackends()"
                         :disabled="reinstallingAll"
-                        class="btn-primary text-sm py-1.5 px-3"
+                        class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]"
                         title="Reinstall all backends">
-                        <i class="fas fa-arrow-rotate-right mr-1.5 text-[10px]" :class="reinstallingAll ? 'fa-spin' : ''"></i>
+                        <i class="fas fa-arrow-rotate-right text-[10px]" :class="reinstallingAll ? 'fa-spin' : ''"></i>
                         <span x-text="reinstallingAll ? 'Reinstalling...' : 'Reinstall All'"></span>
                     </button>
                     {{ end }}
@@ -422,14 +401,14 @@ <h2 class="h3 flex items-center">
                     <h2 class="h2 mb-2">No backends installed yet</h2>
                     <p class="text-sm text-[var(--color-text-secondary)] mb-6">Backends power your AI models. Install them from the backend gallery to get started</p>
                     
-                    <div class="flex flex-wrap justify-center gap-3">
-                        <a href="/browse/backends" class="btn-primary">
-                            <i class="fas fa-cogs mr-2 text-xs"></i>
-                            Browse Backend Gallery
+                    <div class="flex flex-wrap justify-center gap-2">
+                        <a href="/browse/backends" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                            <i class="fas fa-cogs text-[10px]"></i>
+                            <span>Browse Backend Gallery</span>
                         </a>
-                        <a href="https://localai.io/backends/" target="_blank" class="btn-secondary">
-                            <i class="fas fa-book mr-2 text-xs"></i>
-                            Documentation
+                        <a href="https://localai.io/backends/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                            <i class="fas fa-book text-[10px]"></i>
+                            <span>Documentation</span>
                         </a>
                     </div>
                 </div>
@@ -502,14 +481,14 @@ <h2 class="h2 mb-2">No backends installed yet</h2>
                             <td class="p-2">
                                 <div class="flex items-center justify-end gap-1">
                                     {{ if not .IsSystem }}
-                                    <button
+                                    <button type="button"
                                         @click="reinstallBackend('{{.Name}}')"
                                         :disabled="reinstallingBackends['{{.Name}}']"
                                         class="text-[var(--color-primary)]/60 hover:text-[var(--color-primary)] hover:bg-[var(--color-primary)]/10 disabled:opacity-50 disabled:cursor-not-allowed rounded p-1 transition-colors"
                                         title="Reinstall {{.Name}}">
                                         <i class="fas fa-arrow-rotate-right text-xs" :class="reinstallingBackends['{{.Name}}'] ? 'fa-spin' : ''"></i>
                                     </button>
-                                    <button
+                                    <button type="button"
                                         @click="deleteBackend('{{.Name}}')"
                                         class="text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded p-1 transition-colors"
                                         title="Delete {{.Name}}">
diff --git a/core/http/views/model-editor.html b/core/http/views/model-editor.html
index 70b7365ecf15..d72203474c28 100644
--- a/core/http/views/model-editor.html
+++ b/core/http/views/model-editor.html
@@ -24,30 +24,30 @@ <h1 class="hero-title">
                     <div class="flex gap-3">
                         <!-- Mode Toggle (only show when not in edit mode) -->
                         <template x-if="!isEditMode">
-                            <button @click="toggleMode()" class="btn-secondary">
-                                <i class="fas" :class="isAdvancedMode ? 'fa-magic mr-2' : 'fa-code mr-2'"></i>
+                            <button type="button" @click="toggleMode()" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                                <i class="fas" :class="isAdvancedMode ? 'fa-magic' : 'fa-code'"></i>
                                 <span x-text="isAdvancedMode ? 'Simple Mode' : 'Advanced Mode'"></span>
                             </button>
                         </template>
                         <!-- Advanced Mode Buttons -->
                         <template x-if="isAdvancedMode">
-                            <div class="flex gap-3">
-                                <button id="validateBtn" class="btn-primary">
-                                    <i class="fas fa-check mr-2"></i>
+                            <div class="flex gap-2">
+                                <button type="button" id="validateBtn" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                                    <i class="fas fa-check"></i>
                                     <span>Validate</span>
                                 </button>
-                                <button id="saveBtn" class="btn-primary">
-                                    <i class="fas fa-save mr-2"></i>
+                                <button type="button" id="saveBtn" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                                    <i class="fas fa-save"></i>
                                     <span>{{if .ModelName}}Update{{else}}Create{{end}}</span>
                                 </button>
                             </div>
                         </template>
                         <!-- Simple Mode Button -->
                         <template x-if="!isAdvancedMode && !isEditMode">
-                            <button @click="submitImport()" 
+                            <button type="button" @click="submitImport()" 
                                     :disabled="isSubmitting || !importUri.trim()"
-                                    class="btn-primary">
-                                <i class="fas" :class="isSubmitting ? 'fa-spinner fa-spin mr-2' : 'fa-upload mr-2'"></i>
+                                    class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]">
+                                <i class="fas text-[10px]" :class="isSubmitting ? 'fa-spinner fa-spin' : 'fa-upload'"></i>
                                 <span x-text="isSubmitting ? 'Importing...' : 'Import Model'"></span>
                             </button>
                         </template>
diff --git a/core/http/views/models.html b/core/http/views/models.html
index dca298cb9e6d..7684a9e78c05 100644
--- a/core/http/views/models.html
+++ b/core/http/views/models.html
@@ -61,14 +61,14 @@ <h1 class="hero-title">
                         <span class="font-semibold text-purple-300" x-text="repositories.length"></span>
                         <span class="text-[var(--color-text-secondary)] ml-1">repositories</span>
                     </div>
-                    <a href="/import-model" class="btn-primary">
-                        <i class="fas fa-upload mr-2"></i>
+                    <a href="/import-model" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-upload"></i>
                         <span>Import Model</span>
                     </a>
-                    <a href="https://localai.io/models/" target="_blank" class="btn-secondary">
-                        <i class="fas fa-info-circle mr-2"></i>
+                    <a href="https://localai.io/models/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-info-circle"></i>
                         <span>Documentation</span>
-                        <i class="fas fa-external-link-alt ml-2 text-xs"></i>
+                        <i class="fas fa-external-link-alt text-[10px]"></i>
                     </a>
                 </div>
             </div>
@@ -453,8 +453,8 @@ <h3 class="text-xl font-semibold text-[var(--color-text-primary)]" x-text="selec
                         </div>
                         <!-- Modal Footer -->
                         <div class="flex items-center p-4 md:p-5 border-t border-[var(--color-border-subtle)] rounded-b">
-                            <button @click="closeModal()"
-                                    class="btn-secondary">
+                            <button type="button" @click="closeModal()"
+                                    class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
                                 Close
                             </button>
                         </div>
diff --git a/core/http/views/partials/navbar.html b/core/http/views/partials/navbar.html
index 0486adcd8883..cf6038ca9e3d 100644
--- a/core/http/views/partials/navbar.html
+++ b/core/http/views/partials/navbar.html
@@ -85,9 +85,15 @@
         <span class="nav-label">Swarm</span>
       </a>
       <a href="/manage" class="nav-item">
+        <i class="fas fa-server nav-icon"></i>
+        <span class="nav-label">System</span>
+      </a>
+      {{ if not .DisableRuntimeSettings }}
+      <a href="/settings" class="nav-item">
         <i class="fas fa-cog nav-icon"></i>
         <span class="nav-label">Settings</span>
       </a>
+      {{ end }}
     </div>
   </nav>
   
diff --git a/core/http/views/settings.html b/core/http/views/settings.html
index fcc7b7784ea6..65d497a4d74a 100644
--- a/core/http/views/settings.html
+++ b/core/http/views/settings.html
@@ -36,22 +36,22 @@
 
     <div class="container mx-auto px-4 py-6 flex-grow max-w-4xl">
         <!-- Header -->
-        <div class="mb-6">
-            <div class="flex items-center justify-between mb-2">
-                <h1 class="h2">
-                    Application Settings
-                </h1>
-                <a href="/manage"
-                   class="inline-flex items-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors">
-                    <i class="fas fa-arrow-left mr-2 text-sm"></i>
-                    <span class="text-sm">Back to Manage</span>
-                </a>
-            </div>
+        <div class="mb-4">
+            <h1 class="h2 mb-2">Application Settings</h1>
             <p class="text-sm text-[var(--color-text-secondary)]">Configure watchdog and backend request settings</p>
         </div>
 
         <!-- Settings Form -->
         <form @submit.prevent="saveSettings()" class="space-y-6">
+            <!-- Sticky Save bar -->
+            <div class="sticky top-0 z-10 -mx-4 px-4 py-3 -mt-2 mb-2 bg-[var(--color-bg-primary)] border-b border-[var(--color-border-subtle)] flex justify-end">
+                <button type="submit"
+                        :disabled="saving"
+                        class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]">
+                    <i class="fas fa-save text-[10px]" :class="saving ? 'fa-spin fa-spinner' : ''"></i>
+                    <span x-text="saving ? 'Saving...' : 'Save Settings'"></span>
+                </button>
+            </div>
             <!-- Watchdog Settings Section -->
             <div class="bg-[var(--color-bg-secondary)] border border-[var(--color-primary-border)]/20 rounded-lg p-6">
                 <h2 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex items-center">
@@ -591,30 +591,6 @@ <h2 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex item
                     </div>
                 </div>
             </div>
-
-            <!-- Source Info -->
-            <div class="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4" x-show="sourceInfo">
-                <div class="flex items-start">
-                    <i class="fas fa-info-circle text-yellow-400 mr-2 mt-0.5"></i>
-                    <div class="flex-1">
-                        <p class="text-sm text-yellow-300 font-medium mb-1">Configuration Source</p>
-                        <p class="text-xs text-yellow-200" x-text="'Settings are currently loaded from: ' + sourceInfo"></p>
-                        <p class="text-xs text-yellow-200 mt-1" x-show="sourceInfo === 'env'">
-                            Environment variables take precedence. To modify settings via the UI, unset the relevant environment variables first.
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Save Button -->
-            <div class="flex justify-end">
-                <button type="submit"
-                        :disabled="saving"
-                        class="btn-primary">
-                    <i class="fas fa-save mr-2" :class="saving ? 'fa-spin fa-spinner' : ''"></i>
-                    <span x-text="saving ? 'Saving...' : 'Save Settings'"></span>
-                </button>
-            </div>
         </form>
     </div>
 
@@ -659,7 +635,6 @@ <h2 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex item
             agent_job_retention_days: 30,
             open_responses_store_ttl: '0'
         },
-        sourceInfo: '',
         saving: false,
 
         init() {
@@ -707,7 +682,6 @@ <h2 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex item
                         agent_job_retention_days: data.agent_job_retention_days || 30,
                         open_responses_store_ttl: data.open_responses_store_ttl || '0'
                     };
-                    this.sourceInfo = data.source || 'default';
                 } else {
                     this.addNotification('Failed to load settings: ' + (data.error || 'Unknown error'), 'error');
                 }
@@ -879,7 +853,6 @@ <h2 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex item
 
                 if (response.ok && data.success) {
                     this.addNotification('Settings saved successfully!', 'success');
-                    // Reload settings to get updated source info
                     setTimeout(() => this.loadSettings(), 1000);
                 } else {
                     this.addNotification('Failed to save settings: ' + (data.error || 'Unknown error'), 'error');
diff --git a/core/http/views/sound.html b/core/http/views/sound.html
index 75bc0c34305a..a221489cd0b6 100644
--- a/core/http/views/sound.html
+++ b/core/http/views/sound.html
@@ -149,7 +149,7 @@ <h1 class="hero-title">
                         </div>
 
                         <div class="pt-4">
-                            <button type="submit" id="generate-btn" class="btn-primary w-full py-3 flex items-center justify-center gap-2">
+                            <button type="submit" id="generate-btn" class="inline-flex items-center justify-center gap-1.5 w-full text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
                                 <i class="fas fa-music"></i>
                                 <span>Generate sound</span>
                             </button>
diff --git a/core/http/views/traces.html b/core/http/views/traces.html
index ad47ad588286..667643e4562e 100644
--- a/core/http/views/traces.html
+++ b/core/http/views/traces.html
@@ -43,13 +43,13 @@ <h1 class="hero-title">
                     API Traces
                 </h1>
                 <p class="hero-subtitle">View logged API requests and responses</p>
-                <div class="flex flex-wrap justify-center gap-3">
-                    <button @click="clearTraces()" class="btn-secondary text-sm py-1.5 px-3">
-                        <i class="fas fa-trash mr-1.5 text-[10px]"></i>
+                <div class="flex flex-wrap justify-center gap-2">
+                    <button type="button" @click="clearTraces()" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-trash text-[10px]"></i>
                         <span>Clear Traces</span>
                     </button>
-                    <a href="/api/traces" download="traces.json" class="btn-secondary text-sm py-1.5 px-3">
-                        <i class="fas fa-download mr-1.5 text-[10px]"></i>
+                    <a href="/api/traces" download="traces.json" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-download text-[10px]"></i>
                         <span>Export Traces</span>
                     </a>
                 </div>
@@ -93,10 +93,10 @@ <h2 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex item
 
                 <!-- Save Button -->
                 <div class="flex justify-end pt-2">
-                    <button @click="saveTracingSettings()"
+                    <button type="button" @click="saveTracingSettings()"
                             :disabled="saving"
-                            class="btn-primary px-4 py-2 text-sm">
-                        <i class="fas fa-save mr-2" :class="saving ? 'fa-spin fa-spinner' : ''"></i>
+                            class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]">
+                        <i class="fas fa-save text-[10px]" :class="saving ? 'fa-spin fa-spinner' : ''"></i>
                         <span x-text="saving ? 'Saving...' : 'Save Settings'"></span>
                     </button>
                 </div>