diff --git a/core/http/views/explorer.html b/core/http/views/explorer.html
index ce2ee0896..9062ff07e 100644
--- a/core/http/views/explorer.html
+++ b/core/http/views/explorer.html
@@ -3,287 +3,179 @@
 
 {{template "views/partials/head" .}}
 
-<style>
-    body {
-        background-color: var(--color-bg-primary);
-        color: var(--color-text-primary);
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    }
-    .token {
-        word-break: break-all;
-    }
-    .container {
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 20px;
-        position: relative;
-    }
-    .network-card {
-        background-color: var(--color-bg-secondary);
-        padding: 20px;
-        border-radius: 8px;
-        margin-bottom: 20px;
-        border: 1px solid var(--color-border-subtle);
-        transition: background-color 0.2s ease;
-    }
-    .network-card:hover {
-        background-color: var(--color-bg-tertiary);
-    }
-    .network-title {
-        font-size: 24px;
-        font-weight: bold;
-        margin-bottom: 10px;
-        color: var(--color-primary);
-    }
-    .network-token {
-        font-size: 14px;
-        font-style: italic;
-        color: var(--color-text-secondary);
-        margin-bottom: 10px;
-        word-break: break-word;
-        overflow-wrap: break-word;
-        white-space: pre-wrap;
-    }
-    .cluster {
-        margin-top: 10px;
-        background-color: var(--color-bg-tertiary);
-        padding: 10px;
-        border-radius: 6px;
-        border: 1px solid var(--color-border-subtle);
-        transition: background-color 0.3s ease;
-    }
-    .cluster:hover {
-        background-color: var(--color-bg-secondary);
-    }
-    .cluster-title {
-        font-size: 18px;
-        font-weight: bold;
-        color: var(--color-text-primary);
-    }
-    .form-container {
-        background-color: var(--color-bg-secondary);
-        padding: 20px;
-        border-radius: 8px;
-        margin-bottom: 20px;
-        border: 1px solid var(--color-border-subtle);
-    }
-    .form-control {
-        margin-bottom: 15px;
-    }
-    label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: bold;
-        color: var(--color-text-primary);
-    }
-    input[type="text"],
-    textarea {
-        width: 100%;
-        padding: 10px;
-        border-radius: 4px;
-        border: 1px solid var(--color-border-subtle);
-        background-color: var(--color-bg-primary);
-        color: var(--color-text-primary);
-        transition: border-color 0.3s ease, background-color 0.3s ease;
-    }
-    input[type="text"]:focus,
-    textarea:focus {
-        border-color: var(--color-primary);
-        background-color: var(--color-bg-tertiary);
-    }
-    button {
-        background-color: var(--color-primary);
-        color: white;
-        padding: 10px 20px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-    }
-    button:hover {
-        background-color: var(--color-primary-hover);
-    }
-    .error {
-        color: var(--color-error);
-        margin-top: 5px;
-    }
-    .success {
-        color: var(--color-success);
-        margin-top: 5px;
-    }
-    .spinner {
-        display: inline-block;
-        width: 50px;
-        height: 50px;
-        border: 5px solid var(--color-border-subtle);
-        border-radius: 50%;
-        border-top-color: var(--color-primary);
-        animation: spin 1s linear infinite;
-        margin: 0 auto;
-    }
-
-    @keyframes spin {
-        to { transform: rotate(360deg); }
-    }
-
-    .loading-container {
-        text-align: center;
-        padding: 50px;
-    }
-    .warning-box {
-        border-radius: 5px;
-    }
-    .warning-box i {
-        margin-right: 10px;
-    }
-    .token-box {
-        background-color: var(--color-bg-tertiary);
-        padding: 10px;
-        border-radius: 4px;
-        margin-top: 10px;
-        position: relative;
-        cursor: pointer;
-        border: 1px solid var(--color-border-subtle);
-    }
-    .token-box:hover {
-        background-color: var(--color-bg-secondary);
-    }
-    .token-text {
-        overflow-wrap: break-word;
-        font-family: monospace;
-    }
-    .copy-icon {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        color: var(--color-text-primary);
-    }
-</style>
-
 <body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
-<div class="app-layout">
+<div class="app-layout no-sidebar">
   {{template "views/partials/navbar_explorer" .}}
-  
+
   <main class="main-content">
     <div class="main-content-inner" x-data="networkClusters()" x-init="init()">
         <div class="animation-container">
             <canvas id="networkCanvas"></canvas>
             <div class="text-overlay">
                 <header class="text-center py-12">
-                    <h1 class="hero-title">
-                        <i class="fa-solid fa-circle-nodes mr-2"></i> Network Clusters Explorer   
+                    <h1 class="hero-title" style="background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
+                        <i class="fa-solid fa-circle-nodes mr-2" style="-webkit-text-fill-color: var(--color-primary);"></i> Network Explorer
                     </h1>
-                    <p class="mt-4 text-lg">
-                        View the clusters and workers available in each network.
-                        <a href="https://localai.io/features/distribute/" target="_blank">
-                            <i class="fas fa-circle-info pr-2"></i>
+                    <p class="hero-subtitle mt-2">
+                        Explore clusters and workers across the federated network
+                        <a href="https://localai.io/features/distribute/" target="_blank" class="inline-flex items-center ml-1 text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] transition-colors">
+                            <i class="fas fa-circle-info"></i>
                         </a>
                     </p>
-        
                 </header>
             </div>
         </div>
 
-        <div class="container mx-auto px-4 flex-grow">
-        <!-- Warning Box -->
-        <div class="warning-box bg-[var(--color-warning-light)] border border-[var(--color-warning)]/30 text-[var(--color-text-primary)] mb-20 pt-5 pb-5 pr-5 pl-5 text-lg rounded-lg">
-            <i class="fa-solid fa-triangle-exclamation text-[var(--color-warning)]"></i><i class="fa-solid fa-flask text-[var(--color-warning)]"></i>
-            The explorer is a global, community-driven tool to share network tokens and view available clusters in the globe.
-            Anyone can use the tokens to offload computation and use the clusters available or share resources.
-            This is provided without any warranty. Use it at your own risk. We are not responsible for any potential harm or misuse. Sharing tokens globally allows anyone from the internet to use your instances. 
-            Although the community will address bugs, this is experimental software and may be insecure to deploy on your hardware unless you take all necessary precautions.
-        </div>
-            <div class="flow-root">
-            <!-- Toggle button for showing/hiding the form -->
-            <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>
+        <div class="container mx-auto px-4 py-6 flex-grow" style="max-width: 900px;">
+            <!-- Warning Box -->
+            <div class="card p-4 mb-6 border-l-4 border-l-[var(--color-warning)]">
+                <div class="flex items-start gap-3">
+                    <div class="flex items-center gap-1 text-[var(--color-warning)] flex-shrink-0 mt-0.5">
+                        <i class="fa-solid fa-triangle-exclamation"></i>
+                        <i class="fa-solid fa-flask text-xs"></i>
+                    </div>
+                    <p class="text-xs text-[var(--color-text-secondary)] leading-relaxed">
+                        The explorer is a community-driven tool to share network tokens and view available clusters.
+                        Anyone can use tokens to offload computation or share resources.
+                        <strong class="text-[var(--color-text-primary)]">Use at your own risk.</strong>
+                        Sharing tokens globally allows anyone to use your instances. This is experimental software.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Add Network Button -->
+            <div class="flex justify-end mb-4">
+                <button type="button"
+                    class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-[var(--color-bg-secondary)] hover:bg-[var(--color-primary-light)] border border-[var(--color-border-subtle)] hover:border-[var(--color-primary-border)] rounded-lg py-2 px-3 transition-colors"
+                    @click="toggleForm()">
+                    <i :class="showForm ? 'fa-solid fa-times' : 'fa-solid fa-plus'"></i>
+                    <span x-text="showForm ? 'Close' : 'Add Network'"></span>
+                </button>
+            </div>
+
             <!-- Form for adding a new network -->
-            <div class="form-container" x-show="showForm" @click.outside="showForm = false">
-                <h2 class="h2"><i class="fa-solid fa-plus"></i> Add New Network</h2>
-                <div class="form-control">
-                    <label for="name">Network Name</label>
-                    <input type="text" id="name" x-model="newNetwork.name" placeholder="Enter network name" class="input" />
+            <div x-show="showForm" x-transition @click.outside="showForm = false"
+                 class="card p-5 mb-6">
+                <h2 class="text-sm font-semibold text-[var(--color-text-primary)] mb-4 flex items-center gap-2">
+                    <i class="fa-solid fa-plus text-[var(--color-primary)]"></i> Add New Network
+                </h2>
+                <div class="space-y-4">
+                    <div>
+                        <label for="name" class="text-xs font-medium text-[var(--color-text-secondary)] mb-1 block">Network Name</label>
+                        <input type="text" id="name" x-model="newNetwork.name" placeholder="Enter network name"
+                               class="input w-full text-sm" />
+                    </div>
+                    <div>
+                        <label for="description" class="text-xs font-medium text-[var(--color-text-secondary)] mb-1 block">Description</label>
+                        <textarea id="description" x-model="newNetwork.description" placeholder="Enter description"
+                                  class="input w-full text-sm" rows="2"></textarea>
+                    </div>
+                    <div>
+                        <label for="token" class="text-xs font-medium text-[var(--color-text-secondary)] mb-1 block">Token</label>
+                        <textarea id="token" x-model="newNetwork.token" placeholder="Enter token"
+                                  class="input w-full text-sm font-mono" rows="2"></textarea>
+                    </div>
+                    <div class="flex items-center gap-3">
+                        <button type="button" @click="addNetwork"
+                            class="inline-flex items-center gap-1.5 text-xs text-white bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] rounded-lg py-2 px-4 transition-colors">
+                            <i class="fa-solid fa-plus"></i> Add Network
+                        </button>
+                        <p x-show="errorMessage" class="text-xs text-[var(--color-error)]" x-text="errorMessage"></p>
+                        <p x-show="successMessage" class="text-xs text-[var(--color-success)]" x-text="successMessage"></p>
+                    </div>
                 </div>
-                <div class="form-control">
-                    <label for="description">Description</label>
-                    <textarea id="description" x-model="newNetwork.description" placeholder="Enter description" class="input"></textarea>
-                </div>
-                <div class="form-control">
-                    <label for="token">Token</label>
-                    <textarea id="token" x-model="newNetwork.token" placeholder="Enter token" class="input"></textarea>
-                </div>
-                <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>
-                <template x-if="successMessage">
-                    <p class="success" x-text="successMessage"></p>
-                </template>
             </div>
 
             <!-- Loading Spinner -->
             <template x-if="networks.length === 0 && !loadingComplete">
-                <div class="loading-container">
-                    <div class="spinner"></div>
-                    <p class="text-center mt-4">Loading networks...</p>
+                <div class="text-center py-16">
+                    <svg class="animate-spin h-8 w-8 text-[var(--color-primary)] mx-auto mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    <p class="text-sm text-[var(--color-text-secondary)]">Loading networks...</p>
                 </div>
             </template>
 
             <template x-if="networks.length === 0 && loadingComplete">
-                <div class="loading-container">
-                    <p class="text-center mt-4">No networks available with online workers</p>
+                <div class="text-center py-16">
+                    <i class="fa-solid fa-circle-nodes text-3xl text-[var(--color-text-muted)] mb-3"></i>
+                    <p class="text-sm text-[var(--color-text-secondary)]">No networks available with online workers</p>
                 </div>
             </template>
 
             <!-- Display Networks -->
-            <template x-for="network in networks" :key="network.name">
-                <div class="network-card">
-                    <i class="fa-solid fa-circle-nodes mr-2"></i><span class="network-title font-bold mb-4 mt-1" x-text="network.name"></span>
-                    <div class="token-box" @click="copyToken(network.token)">
-                        <p class="text-lg font-bold mb-4 mt-1">
-                            <i class="fa-solid fa-copy copy-icon"></i>
-                            <i class="fa-solid fa-key mr-2"></i>Token (click to copy): 
-                        </p>
-                        <span class="token-text" x-text="network.token"></span>
-                    </div>
+            <div class="space-y-4">
+                <template x-for="network in networks" :key="network.name">
+                    <div class="card overflow-hidden">
+                        <!-- Network Header -->
+                        <div class="p-4 border-b border-[var(--color-border-subtle)]">
+                            <div class="flex items-center gap-2 mb-3">
+                                <i class="fa-solid fa-circle-nodes text-[var(--color-primary)]"></i>
+                                <span class="text-base font-semibold text-[var(--color-text-primary)]" x-text="network.name"></span>
+                            </div>
 
-                    <div class="cluster">
-                        <p class="text-lg font-bold mb-4 mt-1"><i class="fa-solid fa-book mr-2"></i> Description</p>
-                        <p x-text="network.description"></p>
-                    </div>
-                    <h2 class="h2">Available Clusters in this network</h2>
-                    <template x-for="cluster in network.Clusters" :key="cluster.NetworkID + cluster.Type">
-                        <div class="cluster">
-                            <div class="cluster-title"></div>
-                            <span class="inline-block bg-orange-500 text-white py-1 px-3 rounded-full text-xs"  x-text="'Cluster Type: ' + cluster.Type">
-                            </span>
-
-                            <span class="inline-block bg-orange-500 text-white py-1 px-3 rounded-full text-xs" x-show="cluster.NetworkID" x-text="'Network ID: ' + (cluster.NetworkID || 'N/A')">
-                            </span>
-                            <span class="inline-block bg-blue-500 text-white py-1 px-3 rounded-full text-xs"  x-text="'Number of Workers: ' + cluster.Workers.length">
-                            </span>
-                            <!-- Give commands and instructions to join the network -->
-                             <span class="inline-block token-box text-white py-1 px-3 text-xs" x-show="cluster.Type == 'federated'" >
-                                 <p class="text-lg font-bold mb-4 mt-1">
-                                     <i class="fa-solid fa-copy copy-icon float-right"></i>
-                                     Command to connect (click to copy): 
-                                 </p>
-                                 <code class="block bg-[var(--color-bg-primary)] text-[var(--color-warning)] p-4 rounded-lg break-words border border-[var(--color-border-subtle)]"  @click="copyToken($el.textContent)" >
-                                     docker run -d --restart=always -e ADDRESS=":80" -e LOCALAI_P2P_NETWORK_ID=<span class="token" x-text="cluster.NetworkID"></span> -e LOCALAI_P2P_LOGLEVEL=debug --name local-ai -e TOKEN="<span class="token" x-text="network.token"></span>" --net host -ti localai/localai:master federated --debug
-                                 </code>
-                                 or via CLI:
-                                 <code class="block bg-[var(--color-bg-primary)] text-[var(--color-warning)] p-4 rounded-lg break-words border border-[var(--color-border-subtle)]"  @click="copyToken($el.textContent)" >
-                                    ADDRESS=":80" LOCALAI_P2P_NETWORK_ID=<span class="token" x-text="cluster.NetworkID"></span> LOCALAI_P2P_LOGLEVEL=debug TOKEN="<span class="token" x-text="network.token"></span>" local-ai federated --debug
-                                 </code>
-                             </span>
+                            <!-- Token -->
+                            <div class="bg-[var(--color-bg-primary)] rounded-lg p-3 cursor-pointer border border-[var(--color-border-subtle)] hover:border-[var(--color-primary-border)] transition-colors group"
+                                 @click="copyToken(network.token)">
+                                <div class="flex items-center justify-between mb-1.5">
+                                    <span class="text-[10px] font-medium text-[var(--color-text-muted)] uppercase tracking-wider">
+                                        <i class="fa-solid fa-key mr-1"></i>Token (click to copy)
+                                    </span>
+                                    <i class="fa-solid fa-copy text-xs text-[var(--color-text-muted)] group-hover:text-[var(--color-primary)] transition-colors"></i>
+                                </div>
+                                <code class="text-xs text-[var(--color-text-secondary)] break-all font-mono leading-relaxed" x-text="network.token"></code>
+                            </div>
                         </div>
-                    </template>
-                </div>
-            </template>
+
+                        <!-- Description -->
+                        <div class="px-4 py-3 border-b border-[var(--color-border-subtle)]">
+                            <p class="text-xs text-[var(--color-text-secondary)]" x-text="network.description"></p>
+                        </div>
+
+                        <!-- Clusters -->
+                        <div class="p-4">
+                            <h3 class="text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider mb-3">
+                                Available Clusters
+                            </h3>
+                            <div class="space-y-3">
+                                <template x-for="cluster in network.Clusters" :key="cluster.NetworkID + cluster.Type">
+                                    <div class="bg-[var(--color-bg-primary)] rounded-lg p-3 border border-[var(--color-border-subtle)]">
+                                        <!-- Cluster badges -->
+                                        <div class="flex flex-wrap gap-1.5 mb-3">
+                                            <span class="inline-flex items-center text-[10px] px-2 py-0.5 rounded-full bg-[var(--color-warning-light)] text-[var(--color-warning)] border border-[var(--color-warning)]/20"
+                                                  x-text="'Type: ' + cluster.Type"></span>
+                                            <span x-show="cluster.NetworkID"
+                                                  class="inline-flex items-center text-[10px] px-2 py-0.5 rounded-full bg-[var(--color-accent-light)] text-[var(--color-accent)] border border-[var(--color-accent)]/20"
+                                                  x-text="'ID: ' + (cluster.NetworkID || 'N/A')"></span>
+                                            <span class="inline-flex items-center text-[10px] px-2 py-0.5 rounded-full bg-[var(--color-primary-light)] text-[var(--color-primary)] border border-[var(--color-primary)]/20"
+                                                  x-text="cluster.Workers.length + ' workers'"></span>
+                                        </div>
+
+                                        <!-- Federated connect commands -->
+                                        <div x-show="cluster.Type == 'federated'" class="space-y-2">
+                                            <p class="text-[10px] font-medium text-[var(--color-text-muted)] uppercase tracking-wider">Connect via Docker:</p>
+                                            <div class="relative group/cmd">
+                                                <code class="block bg-[var(--color-bg-secondary)] text-[var(--color-warning)] p-3 rounded-lg text-xs break-all border border-[var(--color-border-subtle)] font-mono leading-relaxed cursor-pointer"
+                                                      @click="copyToken($el.textContent)">docker run -d --restart=always -e ADDRESS=":80" -e LOCALAI_P2P_NETWORK_ID=<span x-text="cluster.NetworkID"></span> -e LOCALAI_P2P_LOGLEVEL=debug --name local-ai -e TOKEN="<span x-text="network.token"></span>" --net host -ti localai/localai:master federated --debug</code>
+                                                <i class="fa-solid fa-copy absolute top-2 right-2 text-[10px] text-[var(--color-text-muted)] group-hover/cmd:text-[var(--color-primary)] transition-colors"></i>
+                                            </div>
+                                            <p class="text-[10px] font-medium text-[var(--color-text-muted)] uppercase tracking-wider mt-2">Connect via CLI:</p>
+                                            <div class="relative group/cmd">
+                                                <code class="block bg-[var(--color-bg-secondary)] text-[var(--color-warning)] p-3 rounded-lg text-xs break-all border border-[var(--color-border-subtle)] font-mono leading-relaxed cursor-pointer"
+                                                      @click="copyToken($el.textContent)">ADDRESS=":80" LOCALAI_P2P_NETWORK_ID=<span x-text="cluster.NetworkID"></span> LOCALAI_P2P_LOGLEVEL=debug TOKEN="<span x-text="network.token"></span>" local-ai federated --debug</code>
+                                                <i class="fa-solid fa-copy absolute top-2 right-2 text-[10px] text-[var(--color-text-muted)] group-hover/cmd:text-[var(--color-primary)] transition-colors"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
         </div>
+
         <script>
             function networkClusters() {
                 return {
@@ -295,33 +187,27 @@
                     },
                     errorMessage: '',
                     successMessage: '',
-                    showForm: false, // Form visibility state
-                    loadingComplete: false, // To track if loading is complete
+                    showForm: false,
+                    loadingComplete: false,
                     toggleForm() {
                         this.showForm = !this.showForm;
-                        console.log('Toggling form:', this.showForm);
                     },
                     fetchNetworks() {
-                        console.log('Fetching networks...');
                         fetch('/networks')
                             .then(response => response.json())
                             .then(data => {
-                                console.log('Data fetched successfully:', data);
                                 this.networks = data;
-                                this.loadingComplete = true; // Set loading complete
+                                this.loadingComplete = true;
                             })
                             .catch(error => {
                                 console.error('Error fetching networks:', error);
-                                this.loadingComplete = true; // Ensure spinner is hidden if error occurs
+                                this.loadingComplete = true;
                             });
                     },
-
                     addNetwork() {
                         this.errorMessage = '';
                         this.successMessage = '';
-                        console.log('Adding new network:', this.newNetwork);
 
-                        // Validate input
                         if (!this.newNetwork.name || !this.newNetwork.description || !this.newNetwork.token) {
                             this.errorMessage = 'All fields are required.';
                             return;
@@ -329,9 +215,7 @@
 
                         fetch('/network/add', {
                             method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
+                            headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify(this.newNetwork)
                         })
                             .then(response => {
@@ -341,35 +225,32 @@
                                 return response.json();
                             })
                             .then(data => {
-                                console.log('Network added successfully:', data);
                                 this.successMessage = 'Network added successfully!';
-                                this.fetchNetworks(); // Refresh the networks list
-                                this.newNetwork = { name: '', description: '', token: '' }; // Clear form
+                                this.fetchNetworks();
+                                this.newNetwork = { name: '', description: '', token: '' };
                             })
                             .catch(error => {
                                 console.error('Error adding network:', error);
                                 this.errorMessage = 'Failed to add network. Please try again.'
                                 if (error.error) {
-                                    this.errorMessage += " Error : " + error.error;
+                                    this.errorMessage += " Error: " + error.error;
                                 }
                             });
                     },
                     copyToken(token) {
-                        navigator.clipboard.writeText(token)
-                        .then(() => {
-                            console.log('Text copied to clipboard:', token);
-                            alert('Text copied to clipboard!');
-                        })
-                        .catch(err => {
-                            console.error('Failed to copy token:', err);
-                        });
+                        if (navigator.clipboard && window.isSecureContext) {
+                            navigator.clipboard.writeText(token)
+                                .then(() => alert('Copied to clipboard!'))
+                                .catch(() => fallbackCopy(token));
+                        } else {
+                            fallbackCopy(token);
+                        }
                     },
                     init() {
-                        console.log('Initializing Alpine component...');
                         this.fetchNetworks();
                         setInterval(() => {
                             this.fetchNetworks();
-                        }, 5000); // Refresh every 5 seconds
+                        }, 5000);
                     }
                 }
             }
@@ -383,4 +264,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/core/http/views/models.html b/core/http/views/models.html
index a57a8ae8f..6881e2cce 100644
--- a/core/http/views/models.html
+++ b/core/http/views/models.html
@@ -5,14 +5,14 @@
 <body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
 <div class="app-layout">
   {{template "views/partials/navbar" .}}
-  
+
   <main class="main-content">
     <div class="main-content-inner" x-data="modelsGallery()">
 
     <!-- Notifications -->
     <div class="fixed top-20 right-4 z-50 space-y-2" style="max-width: 400px;">
         <template x-for="notification in notifications" :key="notification.id">
-            <div x-show="true" 
+            <div x-show="true"
                  x-transition:enter="transition ease-out duration-200"
                  x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100"
@@ -39,35 +39,35 @@
         <!-- Hero Header -->
         <div class="hero-section">
             <div class="hero-content">
-                <h1 class="hero-title">
+                <h1 class="hero-title" style="background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                     Model Gallery
                 </h1>
                 <p class="hero-subtitle">
                     Discover and install AI models from our curated collection
                 </p>
-                <div class="flex flex-wrap justify-center items-center gap-6 text-sm md:text-base">
-                    <div class="flex items-center bg-[var(--color-bg-primary)] rounded-lg px-4 py-2">
+                <div class="flex flex-wrap justify-center items-center gap-3 text-sm">
+                    <div class="flex items-center bg-[var(--color-bg-tertiary)] rounded-lg px-3 py-1.5 border border-[var(--color-border-subtle)]">
                         <div class="w-2 h-2 bg-[var(--color-primary)] rounded-full mr-2"></div>
-                        <span class="font-semibold text-indigo-300" x-text="availableModels"></span>
-                        <span class="text-[var(--color-text-secondary)] ml-1">models available</span>
+                        <span class="font-semibold text-[var(--color-primary)]" x-text="availableModels"></span>
+                        <span class="text-[var(--color-text-secondary)] ml-1">available</span>
                     </div>
-                    <a href="/manage" class="flex items-center bg-[var(--color-bg-primary)] hover:bg-[var(--color-bg-secondary)] rounded-lg px-4 py-2 transition-colors border border-[var(--color-primary-border)]/30 hover:border-[var(--color-primary-border)]/50">
+                    <a href="/manage" class="flex items-center bg-[var(--color-bg-tertiary)] hover:bg-[var(--color-success-light)] rounded-lg px-3 py-1.5 transition-colors border border-[var(--color-border-subtle)] hover:border-[var(--color-success)]/30">
                         <div class="w-2 h-2 bg-[var(--color-success)] rounded-full mr-2"></div>
                         <span class="font-semibold text-[var(--color-success)]" x-text="installedModels"></span>
                         <span class="text-[var(--color-text-secondary)] ml-1">installed</span>
                     </a>
-                    <div class="flex items-center bg-[var(--color-bg-primary)] rounded-lg px-4 py-2">
+                    <div class="flex items-center bg-[var(--color-bg-tertiary)] rounded-lg px-3 py-1.5 border border-[var(--color-border-subtle)]">
                         <div class="w-2 h-2 bg-[var(--color-accent)] rounded-full mr-2"></div>
-                        <span class="font-semibold text-purple-300" x-text="repositories.length"></span>
-                        <span class="text-[var(--color-text-secondary)] ml-1">repositories</span>
+                        <span class="font-semibold text-[var(--color-accent)]" x-text="repositories.length"></span>
+                        <span class="text-[var(--color-text-secondary)] ml-1">repos</span>
                     </div>
                     <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>
+                        <span>Import</span>
                     </a>
                     <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-book"></i>
+                        <span>Docs</span>
                         <i class="fas fa-external-link-alt text-[10px]"></i>
                     </a>
                 </div>
@@ -77,216 +77,281 @@
         {{template "views/partials/inprogress" .}}
 
         <!-- Search and Filter Section -->
-        <div class="card p-8 mb-8">
-            <div>
-                <!-- Search Input -->
-                <div class="mb-8">
-                    <h3 class="text-xl font-semibold text-[var(--color-text-primary)] mb-4 flex items-center">
-                        <i class="fas fa-search mr-3 text-[var(--color-primary)]"></i>
-                        Find Your Perfect Model
-                    </h3>
-                    <div class="relative">
-                        <div class="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none z-10">
-                            <i class="fas fa-search text-[var(--color-text-secondary)]"></i>
-                        </div>
-                        <input
-                            x-model="searchTerm"
-                            @input.debounce.500ms="fetchModels()"
-                            class="input w-full pr-16 py-4"
-                            style="padding-left: 3.5rem !important;"
-                            type="search"
-                            placeholder="Search models by name, tag, or description...">
-                        <span class="absolute right-4 top-4" x-show="loading">
-                            <svg class="animate-spin h-6 w-6 text-[var(--color-primary)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                            </svg>
-                        </span>
+        <div class="card p-6 mb-6">
+            <!-- Search Input -->
+            <div class="mb-6">
+                <div class="relative">
+                    <div class="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none z-10">
+                        <i class="fas fa-search text-[var(--color-text-secondary)]"></i>
                     </div>
+                    <input
+                        x-model="searchTerm"
+                        @input.debounce.500ms="fetchModels()"
+                        class="input w-full pr-16 py-3"
+                        style="padding-left: 3rem !important;"
+                        type="search"
+                        placeholder="Search models by name, tag, or description...">
+                    <span class="absolute right-4 top-3" x-show="loading">
+                        <svg class="animate-spin h-5 w-5 text-[var(--color-primary)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                    </span>
                 </div>
+            </div>
 
-                <!-- Filter by Type -->
-                <div class="mb-8">
-                    <h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-4 flex items-center">
-                        <i class="fas fa-filter mr-3 text-[var(--color-accent)]"></i>
-                        Filter by Model Type
-                    </h3>
-                    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-8 gap-3">
-                        <button @click="filterByTerm('tts')"
-                            class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-bg-secondary)] hover:bg-[var(--color-primary-light)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] hover:border-[var(--color-primary-border)] transition-colors">
-                            <i class="fas fa-microphone mr-2"></i>
-                            <span>TTS</span>
+            <!-- Filter by Type -->
+            <div class="mb-6">
+                <div class="flex flex-wrap gap-2">
+                    <template x-for="filter in typeFilters" :key="filter.term">
+                        <button @click="filterByTerm(filter.term)"
+                            :class="searchTerm === filter.term ? 'bg-[var(--color-primary)] text-white border-[var(--color-primary)]' : 'bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] border-[var(--color-border-subtle)] hover:border-[var(--color-primary-border)] hover:text-[var(--color-text-primary)]'"
+                            class="inline-flex items-center rounded-full px-3 py-1.5 text-xs font-medium border transition-colors">
+                            <i :class="filter.icon" class="mr-1.5"></i>
+                            <span x-text="filter.label"></span>
                         </button>
-                        <button @click="filterByTerm('stablediffusion')"
-                            class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-bg-secondary)] hover:bg-[var(--color-accent-light)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] hover:border-[var(--color-accent-border)] transition-colors">
-                            <i class="fas fa-image mr-2"></i>
-                            <span>Image</span>
-                        </button>
-                        <button @click="filterByTerm('llm')"
-                            class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-bg-secondary)] hover:bg-[var(--color-primary-light)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] hover:border-[var(--color-primary-border)] transition-colors">
-                            <i class="fas fa-comment-alt mr-2"></i>
-                            <span>LLM</span>
-                        </button>
-                        <button @click="filterByTerm('multimodal')"
-                            class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-bg-secondary)] hover:bg-[var(--color-secondary-light)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] hover:border-[var(--color-secondary-light)] transition-colors">
-                            <i class="fas fa-object-group mr-2"></i>
-                            <span>Multimodal</span>
-                        </button>
-                        <button @click="filterByTerm('embedding')"
-                            class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-bg-secondary)] hover:bg-[var(--color-primary-light)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] hover:border-[var(--color-primary-border)] transition-colors">
-                            <i class="fas fa-vector-square mr-2"></i>
-                            <span>Embedding</span>
-                        </button>
-                        <button @click="filterByTerm('rerank')"
-                            class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-bg-secondary)] hover:bg-[var(--color-warning-light)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] hover:border-[var(--color-warning-light)] transition-colors">
-                            <i class="fas fa-sort-amount-up mr-2"></i>
-                            <span>Rerank</span>
-                        </button>
-                        <button @click="filterByTerm('stt')"
-                            class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-[var(--color-bg-secondary)] hover:bg-[var(--color-secondary-light)] text-[var(--color-text-primary)] border border-[var(--color-border-subtle)] hover:border-[var(--color-secondary-light)] transition-colors">
-                            <i class="fas fa-headphones mr-2"></i>
-                            <span>STT</span>
-                        </button>
-                        <button @click="filterByTerm('object-detection')"
-                            class="flex items-center justify-center rounded-lg px-4 py-3 text-sm font-semibold bg-red-600/20 hover:bg-red-600/30 text-red-300 border border-red-500/30 transition-colors">
-                            <i class="fas fa-eye mr-2"></i>
-                            <span>Vision</span>
-                        </button>
-                    </div>
+                    </template>
+                    <button x-show="searchTerm" @click="clearSearch()"
+                        class="inline-flex items-center rounded-full px-3 py-1.5 text-xs font-medium bg-[var(--color-error-light)] text-[var(--color-error)] border border-[var(--color-error)]/30 hover:bg-[var(--color-error)]/20 transition-colors">
+                        <i class="fas fa-times mr-1.5"></i>
+                        <span>Clear</span>
+                    </button>
                 </div>
+            </div>
 
-                <!-- Filter by Tags -->
-                <div x-show="allTags.length > 0">
-                    <h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-4 flex items-center">
-                        <i class="fas fa-tags mr-3 text-[var(--color-accent)]"></i>
-                        Browse by Tags
-                    </h3>
-                    <div class="max-h-32 overflow-y-auto pr-2">
-                        <div class="flex flex-wrap gap-2">
-                            <template x-for="tag in allTags" :key="tag">
-                                <button @click="filterByTerm(tag)"
-                                    class="inline-flex items-center text-xs px-3 py-2 rounded bg-[var(--color-bg-primary)] hover:bg-[var(--color-bg-primary)]/80 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] border border-[var(--color-bg-secondary)] transition-colors">
-                                    <i class="fas fa-tag text-xs mr-2"></i>
-                                    <span x-text="tag"></span>
-                                </button>
-                            </template>
-                        </div>
+            <!-- Filter by Tags -->
+            <div x-show="allTags.length > 0">
+                <div class="flex items-center gap-2 mb-3">
+                    <i class="fas fa-tags text-xs text-[var(--color-accent)]"></i>
+                    <span class="text-xs font-medium text-[var(--color-text-secondary)]">Tags</span>
+                </div>
+                <div class="max-h-24 overflow-y-auto pr-2">
+                    <div class="flex flex-wrap gap-1.5">
+                        <template x-for="tag in allTags" :key="tag">
+                            <button @click="filterByTerm(tag)"
+                                :class="searchTerm === tag ? 'bg-[var(--color-accent)] text-white border-[var(--color-accent)]' : 'bg-[var(--color-bg-primary)] text-[var(--color-text-muted)] border-[var(--color-border-subtle)] hover:text-[var(--color-text-secondary)] hover:border-[var(--color-accent)]/30'"
+                                class="inline-flex items-center text-xs px-2 py-1 rounded border transition-colors">
+                                <span x-text="tag"></span>
+                            </button>
+                        </template>
                     </div>
                 </div>
             </div>
         </div>
 
+        <!-- Toolbar: Sort + View Toggle -->
+        <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center gap-2">
+                <span class="text-xs text-[var(--color-text-muted)]">Sort:</span>
+                <template x-for="col in sortColumns" :key="col.key">
+                    <button @click="setSort(col.key)"
+                        :class="sortBy === col.key ? 'text-[var(--color-primary)] border-[var(--color-primary)]/30 bg-[var(--color-primary-light)]' : 'text-[var(--color-text-secondary)] border-[var(--color-border-subtle)]'"
+                        class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border transition-colors hover:text-[var(--color-primary)]">
+                        <span x-text="col.label"></span>
+                        <i x-show="sortBy === col.key" :class="sortOrder === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down'" class="text-[10px]"></i>
+                    </button>
+                </template>
+            </div>
+            <div class="flex items-center gap-1 bg-[var(--color-bg-tertiary)] rounded-lg p-0.5 border border-[var(--color-border-subtle)]">
+                <button @click="viewMode = 'table'"
+                    :class="viewMode === 'table' ? 'bg-[var(--color-primary)] text-white' : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'"
+                    class="p-1.5 rounded transition-colors" title="Table view">
+                    <i class="fas fa-list text-xs"></i>
+                </button>
+                <button @click="viewMode = 'grid'"
+                    :class="viewMode === 'grid' ? 'bg-[var(--color-primary)] text-white' : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'"
+                    class="p-1.5 rounded transition-colors" title="Grid view">
+                    <i class="fas fa-th text-xs"></i>
+                </button>
+            </div>
+        </div>
+
         <!-- Results Section -->
         <div id="search-results" class="transition-all duration-300 relative">
             <div x-show="loading && models.length === 0" class="text-center py-12">
-                <svg class="animate-spin h-12 w-12 text-[var(--color-primary)] mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <svg class="animate-spin h-10 w-10 text-[var(--color-primary)] mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                 </svg>
-                <p class="text-[var(--color-text-secondary)]">Loading models...</p>
+                <p class="text-[var(--color-text-secondary)] text-sm">Loading models...</p>
             </div>
 
             <div x-show="!loading && models.length === 0" class="text-center py-12">
-                <i class="fas fa-search text-[var(--color-text-muted)] text-4xl mb-4"></i>
-                <p class="text-[var(--color-text-secondary)]">No models found matching your criteria</p>
+                <i class="fas fa-search text-[var(--color-text-muted)] text-3xl mb-3"></i>
+                <p class="text-[var(--color-text-secondary)] text-sm">No models found matching your criteria</p>
             </div>
 
-            <!-- Loading overlay when switching pages (we have models but loading) -->
+            <!-- Loading overlay when switching pages -->
             <div x-show="loading && models.length > 0"
                  x-transition:enter="transition ease-out duration-150"
                  x-transition:enter-start="opacity-0"
                  x-transition:enter-end="opacity-100"
-                 class="absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-[var(--color-bg-secondary)]/80 backdrop-blur-sm">
-                <div class="flex flex-col items-center gap-3">
-                    <svg class="animate-spin h-12 w-12 text-[var(--color-primary)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                 class="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-[var(--color-bg-primary)]/80 backdrop-blur-sm">
+                <div class="flex flex-col items-center gap-2">
+                    <svg class="animate-spin h-8 w-8 text-[var(--color-primary)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                     </svg>
-                    <p class="text-sm text-[var(--color-text-secondary)]">Loading page...</p>
                 </div>
             </div>
 
+            <!-- Grid View -->
+            <div x-show="models.length > 0 && viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                <template x-for="model in models" :key="model.id">
+                    <div class="group bg-[var(--color-bg-secondary)] rounded-xl border border-[var(--color-border-subtle)] hover:border-[var(--color-primary-border)] transition-all duration-200 overflow-hidden flex flex-col">
+                        <!-- Card Header -->
+                        <div class="p-4 flex items-start gap-3 flex-1">
+                            <div class="w-10 h-10 rounded-lg border border-[var(--color-border-subtle)] flex items-center justify-center bg-[var(--color-bg-primary)] flex-shrink-0">
+                                <img x-show="model.icon" :src="model.icon" class="w-full h-full object-cover rounded-lg" loading="lazy" :alt="model.name">
+                                <i x-show="!model.icon" class="fas fa-brain text-lg text-[var(--color-accent)]"></i>
+                            </div>
+                            <div class="min-w-0 flex-1">
+                                <h3 class="text-sm font-semibold text-[var(--color-text-primary)] truncate" x-text="model.name" :title="model.name"></h3>
+                                <p class="text-xs text-[var(--color-text-muted)] mt-1 line-clamp-2" x-text="model.description" :title="model.description"></p>
+                            </div>
+                        </div>
+
+                        <!-- Card Meta -->
+                        <div class="px-4 pb-2">
+                            <div class="flex flex-wrap items-center gap-1.5">
+                                <template x-if="model.estimated_size_display && model.estimated_size_display !== '0 B'">
+                                    <span class="text-[10px] px-1.5 py-0.5 rounded bg-[var(--color-bg-primary)] text-[var(--color-text-muted)] border border-[var(--color-border-subtle)]" x-text="model.estimated_size_display"></span>
+                                </template>
+                                <template x-if="model.estimated_vram_bytes && totalMemory > 0">
+                                    <span :class="model.estimated_vram_bytes <= totalMemory * 0.95 ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'"
+                                          class="text-[10px] px-1.5 py-0.5 rounded bg-[var(--color-bg-primary)] border border-[var(--color-border-subtle)]">
+                                        <i class="fas fa-microchip mr-0.5"></i>
+                                        <span x-text="model.estimated_vram_bytes <= totalMemory * 0.95 ? 'Fits GPU' : 'Large'"></span>
+                                    </span>
+                                </template>
+                                <span x-show="model.trustRemoteCode" class="text-[10px] px-1.5 py-0.5 rounded bg-[var(--color-error-light)] text-[var(--color-error)] border border-[var(--color-error)]/20">
+                                    <i class="fa-solid fa-circle-exclamation mr-0.5"></i>RTC
+                                </span>
+                            </div>
+                        </div>
+
+                        <!-- Card Footer -->
+                        <div class="px-4 py-3 border-t border-[var(--color-border-subtle)] flex items-center justify-between bg-[var(--color-bg-primary)]/50">
+                            <!-- Status -->
+                            <div>
+                                <div x-show="model.processing" class="flex items-center gap-1.5">
+                                    <svg class="animate-spin h-3 w-3 text-[var(--color-primary)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                    <span class="text-[10px] text-[var(--color-primary)]" x-text="model.isDeletion ? 'Deleting...' : 'Installing...'"></span>
+                                </div>
+                                <span x-show="!model.processing && model.installed" class="inline-flex items-center text-[10px] text-[var(--color-success)]">
+                                    <i class="fas fa-check-circle mr-1"></i>Installed
+                                </span>
+                                <span x-show="!model.processing && !model.installed" class="text-[10px] text-[var(--color-text-muted)]">
+                                    Available
+                                </span>
+                            </div>
+
+                            <!-- Actions -->
+                            <div class="flex items-center gap-1">
+                                <button @click="openModal(model)" class="p-1.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-light)] transition-colors" title="Details">
+                                    <i class="fas fa-info-circle text-xs"></i>
+                                </button>
+                                <template x-if="!model.processing && model.installed">
+                                    <div class="flex gap-1">
+                                        <button @click="reinstallModel(model.id)" class="p-1.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-light)] transition-colors" title="Reinstall">
+                                            <i class="fa-solid fa-arrow-rotate-right text-xs"></i>
+                                        </button>
+                                        <button @click="deleteModel(model.id)" class="p-1.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-error)] hover:bg-[var(--color-error-light)] transition-colors" title="Delete">
+                                            <i class="fa-solid fa-trash text-xs"></i>
+                                        </button>
+                                    </div>
+                                </template>
+                                <template x-if="!model.processing && !model.installed">
+                                    <div class="flex gap-1">
+                                        <button @click="getConfig(model.id)" class="p-1.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-accent)] hover:bg-[var(--color-accent-light)] transition-colors" title="Get config">
+                                            <i class="fa-solid fa-file-code text-xs"></i>
+                                        </button>
+                                        <button @click="installModel(model.id)" class="p-1.5 rounded bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)] transition-colors" title="Install">
+                                            <i class="fa-solid fa-download text-xs"></i>
+                                        </button>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+
+                        <!-- Progress bar for grid cards -->
+                        <div x-show="model.processing" class="progress-table">
+                            <div class="progress-bar-table" :style="'width:' + (jobProgress[model.jobID] || 0) + '%'"></div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+
             <!-- Table View -->
-            <div x-show="models.length > 0" class="bg-[var(--color-bg-secondary)] rounded-2xl border border-[var(--color-border-subtle)] overflow-hidden shadow-xl backdrop-blur-sm">
+            <div x-show="models.length > 0 && viewMode === 'table'" class="bg-[var(--color-bg-secondary)] rounded-xl border border-[var(--color-border-subtle)] overflow-hidden">
                 <div class="overflow-x-auto">
                     <table class="w-full">
                         <thead>
-                            <tr class="bg-[var(--color-primary-light)] border-b border-[var(--color-border-subtle)]">
-                                <th class="px-6 py-4 text-left text-xs font-semibold text-[var(--color-text-primary)] uppercase tracking-wider">Icon</th>
-                                <th @click="setSort('name')" 
-                                    :class="sortBy === 'name' ? 'bg-[var(--color-primary-light)]' : ''"
-                                    class="px-6 py-4 text-left text-xs font-semibold text-[var(--color-text-primary)] uppercase tracking-wider cursor-pointer hover:bg-[var(--color-bg-primary)] transition-colors">
-                                    <div class="flex items-center gap-2">
-                                        <span>Model Name</span>
-                                        <i :class="sortBy === 'name' ? (sortOrder === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'" 
-                                           :class="sortBy === 'name' ? 'text-[var(--color-primary)]' : 'text-[var(--color-text-secondary)]'"
-                                           class="text-xs"></i>
+                            <tr class="border-b border-[var(--color-border-subtle)]">
+                                <th class="px-4 py-3 text-left text-[10px] font-semibold text-[var(--color-text-muted)] uppercase tracking-wider w-12"></th>
+                                <th @click="setSort('name')"
+                                    class="px-4 py-3 text-left text-[10px] font-semibold text-[var(--color-text-muted)] uppercase tracking-wider cursor-pointer hover:text-[var(--color-text-primary)] transition-colors">
+                                    <div class="flex items-center gap-1">
+                                        <span>Name</span>
+                                        <i :class="sortBy === 'name' ? (sortOrder === 'asc' ? 'fas fa-sort-up text-[var(--color-primary)]' : 'fas fa-sort-down text-[var(--color-primary)]') : 'fas fa-sort'" class="text-[10px]"></i>
                                     </div>
                                 </th>
-                                <th class="px-6 py-4 text-left text-xs font-semibold text-[var(--color-text-primary)] uppercase tracking-wider">Description</th>
-                                <th class="px-6 py-4 text-left text-xs font-semibold text-[var(--color-text-primary)] uppercase tracking-wider">Size / VRAM</th>
-                                <th @click="setSort('status')" 
-                                    :class="sortBy === 'status' ? 'bg-[var(--color-primary-light)]' : ''"
-                                    class="px-6 py-4 text-left text-xs font-semibold text-[var(--color-text-primary)] uppercase tracking-wider cursor-pointer hover:bg-[var(--color-bg-primary)] transition-colors">
-                                    <div class="flex items-center gap-2">
+                                <th class="px-4 py-3 text-left text-[10px] font-semibold text-[var(--color-text-muted)] uppercase tracking-wider">Description</th>
+                                <th class="px-4 py-3 text-left text-[10px] font-semibold text-[var(--color-text-muted)] uppercase tracking-wider">Size</th>
+                                <th @click="setSort('status')"
+                                    class="px-4 py-3 text-left text-[10px] font-semibold text-[var(--color-text-muted)] uppercase tracking-wider cursor-pointer hover:text-[var(--color-text-primary)] transition-colors">
+                                    <div class="flex items-center gap-1">
                                         <span>Status</span>
-                                        <i :class="sortBy === 'status' ? (sortOrder === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down') : 'fas fa-sort'" 
-                                           :class="sortBy === 'status' ? 'text-[var(--color-primary)]' : 'text-[var(--color-text-secondary)]'"
-                                           class="text-xs"></i>
+                                        <i :class="sortBy === 'status' ? (sortOrder === 'asc' ? 'fas fa-sort-up text-[var(--color-primary)]' : 'fas fa-sort-down text-[var(--color-primary)]') : 'fas fa-sort'" class="text-[10px]"></i>
                                     </div>
                                 </th>
-                                <th class="px-6 py-4 text-right text-xs font-semibold text-[var(--color-text-primary)] uppercase tracking-wider">Actions</th>
+                                <th class="px-4 py-3 text-right text-[10px] font-semibold text-[var(--color-text-muted)] uppercase tracking-wider">Actions</th>
                             </tr>
                         </thead>
                         <tbody class="divide-y divide-[var(--color-border-subtle)]">
                             <template x-for="model in models" :key="model.id">
-                                <tr class="hover:bg-[var(--color-bg-primary)] transition-colors duration-200">
+                                <tr class="hover:bg-[var(--color-bg-primary)]/50 transition-colors duration-150">
                                     <!-- Icon -->
-                                    <td class="px-6 py-4">
-                                        <div class="w-12 h-12 rounded-lg border border-[var(--color-border-subtle)] flex items-center justify-center bg-[var(--color-bg-primary)]">
-                                            <img x-show="model.icon"
-                                                 :src="model.icon"
-                                                 class="w-full h-full object-cover rounded-lg"
-                                                 loading="lazy"
-                                                 :alt="model.name">
-                                            <i x-show="!model.icon" class="fas fa-brain text-xl text-[var(--color-accent)]"></i>
+                                    <td class="px-4 py-3">
+                                        <div class="w-9 h-9 rounded-lg border border-[var(--color-border-subtle)] flex items-center justify-center bg-[var(--color-bg-primary)]">
+                                            <img x-show="model.icon" :src="model.icon" class="w-full h-full object-cover rounded-lg" loading="lazy" :alt="model.name">
+                                            <i x-show="!model.icon" class="fas fa-brain text-[var(--color-accent)]"></i>
                                         </div>
                                     </td>
 
                                     <!-- Model Name -->
-                                    <td class="px-6 py-4">
+                                    <td class="px-4 py-3">
                                         <div class="flex flex-col">
-                                            <span class="text-sm font-semibold text-[var(--color-text-primary)]" x-text="model.name"></span>
-                                            <div x-show="model.trustRemoteCode" class="mt-1">
-                                                <span class="inline-flex items-center text-xs px-2 py-1 rounded bg-red-500/20 text-red-300 border border-red-500/30">
-                                                    <i class="fa-solid fa-circle-exclamation mr-1"></i>
-                                                    Trust Remote Code
-                                                </span>
-                                            </div>
+                                            <span class="text-sm font-medium text-[var(--color-text-primary)]" x-text="model.name"></span>
+                                            <span x-show="model.trustRemoteCode" class="inline-flex items-center text-[10px] mt-0.5 text-[var(--color-error)]">
+                                                <i class="fa-solid fa-circle-exclamation mr-1"></i>Trust Remote Code
+                                            </span>
                                         </div>
                                     </td>
 
                                     <!-- Description -->
-                                    <td class="px-6 py-4">
-                                        <div class="text-sm text-[var(--color-text-secondary)] max-w-xs truncate" x-text="model.description" :title="model.description"></div>
+                                    <td class="px-4 py-3">
+                                        <div class="text-xs text-[var(--color-text-secondary)] max-w-xs truncate" x-text="model.description" :title="model.description"></div>
                                     </td>
 
                                     <!-- Size / VRAM -->
-                                    <td class="px-6 py-4">
+                                    <td class="px-4 py-3">
                                         <div class="flex flex-col gap-0.5">
                                             <template x-if="(model.estimated_size_display && model.estimated_size_display !== '0 B') || (model.estimated_vram_display && model.estimated_vram_display !== '0 B')">
                                                 <div class="text-xs text-[var(--color-text-secondary)]">
-                                                    <span x-show="model.estimated_size_display && model.estimated_size_display !== '0 B'" x-text="'Size: ' + model.estimated_size_display"></span>
-                                                    <span x-show="(model.estimated_size_display && model.estimated_size_display !== '0 B') && (model.estimated_vram_display && model.estimated_vram_display !== '0 B')"> · </span>
-                                                    <span x-show="model.estimated_vram_display && model.estimated_vram_display !== '0 B'" x-text="'VRAM: ' + model.estimated_vram_display"></span>
+                                                    <span x-show="model.estimated_size_display && model.estimated_size_display !== '0 B'" x-text="model.estimated_size_display"></span>
+                                                    <span x-show="(model.estimated_size_display && model.estimated_size_display !== '0 B') && (model.estimated_vram_display && model.estimated_vram_display !== '0 B')"> / </span>
+                                                    <span x-show="model.estimated_vram_display && model.estimated_vram_display !== '0 B'" x-text="model.estimated_vram_display" class="text-[var(--color-text-muted)]"></span>
                                                 </div>
                                             </template>
                                             <template x-if="model.estimated_vram_bytes && totalMemory > 0">
-                                                <span :title="(model.estimated_vram_bytes <= totalMemory * 0.95 ? 'Fits your GPU' : 'May not fit your GPU')"
-                                                      class="inline-flex items-center text-xs">
-                                                    <i class="fas fa-microchip mr-1"
-                                                       :class="model.estimated_vram_bytes <= totalMemory * 0.95 ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'"></i>
-                                                    <span x-text="model.estimated_vram_bytes <= totalMemory * 0.95 ? 'Fits' : 'May not fit'"></span>
+                                                <span class="inline-flex items-center text-[10px]"
+                                                      :class="model.estimated_vram_bytes <= totalMemory * 0.95 ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'">
+                                                    <i class="fas fa-microchip mr-1"></i>
+                                                    <span x-text="model.estimated_vram_bytes <= totalMemory * 0.95 ? 'Fits' : 'Large'"></span>
                                                 </span>
                                             </template>
                                             <span x-show="(!model.estimated_size_display || model.estimated_size_display === '0 B') && (!model.estimated_vram_display || model.estimated_vram_display === '0 B')" class="text-xs text-[var(--color-text-muted)]">-</span>
@@ -294,75 +359,46 @@
                                     </td>
 
                                     <!-- Status -->
-                                    <td class="px-6 py-4">
-                                        <!-- Processing State -->
-                                        <div x-show="model.processing" class="min-w-[200px]">
-                                            <div class="text-xs font-medium text-[var(--color-text-primary)] mb-1">
-                                                <span x-text="model.isDeletion ? 'Deleting...' : 'Installing...'"></span>
-                                            </div>
-                                            <div x-show="(jobProgress[model.jobID] || 0) === 0" class="text-xs text-[var(--color-primary)]">
-                                                <i class="fas fa-clock mr-1"></i>Queued
-                                            </div>
+                                    <td class="px-4 py-3">
+                                        <div x-show="model.processing" class="min-w-[140px]">
+                                            <div class="text-[10px] font-medium text-[var(--color-text-primary)] mb-1" x-text="model.isDeletion ? 'Deleting...' : 'Installing...'"></div>
                                             <div class="progress-table mt-1">
                                                 <div class="progress-bar-table" :style="'width:' + (jobProgress[model.jobID] || 0) + '%'"></div>
                                             </div>
                                         </div>
-
-                                        <!-- Installed State -->
-                                        <div x-show="!model.processing && model.installed">
-                                            <span class="inline-flex items-center text-xs px-2 py-1 rounded bg-[var(--color-success-light)] text-[var(--color-success)] border border-[var(--color-success)]/30">
-                                                <i class="fas fa-check-circle mr-1"></i>
-                                                Installed
-                                            </span>
-                                        </div>
-
-                                        <!-- Not Installed State -->
-                                        <div x-show="!model.processing && !model.installed">
-                                            <span class="inline-flex items-center text-xs px-2 py-1 rounded bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] border border-[var(--color-border-subtle)]">
-                                                <i class="fas fa-circle mr-1"></i>
-                                                Not Installed
-                                            </span>
-                                        </div>
+                                        <span x-show="!model.processing && model.installed" class="inline-flex items-center text-[10px] px-2 py-0.5 rounded-full bg-[var(--color-success-light)] text-[var(--color-success)] border border-[var(--color-success)]/20">
+                                            <i class="fas fa-check-circle mr-1"></i>Installed
+                                        </span>
+                                        <span x-show="!model.processing && !model.installed" class="inline-flex items-center text-[10px] px-2 py-0.5 rounded-full bg-[var(--color-bg-primary)] text-[var(--color-text-muted)] border border-[var(--color-border-subtle)]">
+                                            Available
+                                        </span>
                                     </td>
 
                                     <!-- Actions -->
-                                    <td class="px-6 py-4">
-                                        <div class="flex items-center justify-end gap-2">
-                                            <!-- Info Button -->
-                                            <button @click="openModal(model)" 
-                                                    class="inline-flex items-center px-3 py-1.5 rounded-lg bg-[var(--color-bg-primary)] hover:bg-[var(--color-primary-light)] text-xs font-medium text-[var(--color-text-primary)] transition duration-200 border border-[var(--color-border-subtle)]"
-                                                    title="View details">
-                                                <i class="fas fa-info-circle"></i>
+                                    <td class="px-4 py-3">
+                                        <div class="flex items-center justify-end gap-1">
+                                            <button @click="openModal(model)"
+                                                    class="p-1.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-light)] transition-colors"
+                                                    title="Details">
+                                                <i class="fas fa-info-circle text-xs"></i>
                                             </button>
-                                            
-                                            <!-- Installed State Actions -->
                                             <template x-if="!model.processing && model.installed">
-                                                <div class="flex gap-2">
-                                                    <button @click="reinstallModel(model.id)" 
-                                                            class="inline-flex items-center px-3 py-1.5 rounded-lg bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-xs font-medium text-white transition duration-200"
-                                                            title="Reinstall">
-                                                        <i class="fa-solid fa-arrow-rotate-right"></i>
+                                                <div class="flex gap-1">
+                                                    <button @click="reinstallModel(model.id)" class="p-1.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-light)] transition-colors" title="Reinstall">
+                                                        <i class="fa-solid fa-arrow-rotate-right text-xs"></i>
                                                     </button>
-                                                    <button @click="deleteModel(model.id)" 
-                                                            class="inline-flex items-center px-3 py-1.5 rounded-lg bg-[var(--color-error)] hover:bg-[var(--color-error)]/80 text-xs font-medium text-white transition duration-200"
-                                                            title="Delete">
-                                                        <i class="fa-solid fa-trash"></i>
+                                                    <button @click="deleteModel(model.id)" class="p-1.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-error)] hover:bg-[var(--color-error-light)] transition-colors" title="Delete">
+                                                        <i class="fa-solid fa-trash text-xs"></i>
                                                     </button>
                                                 </div>
                                             </template>
-                                            
-                                            <!-- Not Installed State Actions -->
                                             <template x-if="!model.processing && !model.installed">
-                                                <div class="flex gap-2">
-                                                    <button @click="getConfig(model.id)"
-                                                            class="inline-flex items-center px-3 py-1.5 rounded-lg bg-[var(--color-accent-light)] hover:bg-[var(--color-accent)]/30 text-xs font-medium text-[var(--color-text-primary)] transition duration-200 border border-[var(--color-accent)]/30"
-                                                            title="Get config">
-                                                        <i class="fa-solid fa-file-code"></i>
+                                                <div class="flex gap-1">
+                                                    <button @click="getConfig(model.id)" class="p-1.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-accent)] hover:bg-[var(--color-accent-light)] transition-colors" title="Config">
+                                                        <i class="fa-solid fa-file-code text-xs"></i>
                                                     </button>
-                                                    <button @click="installModel(model.id)" 
-                                                            class="inline-flex items-center px-3 py-1.5 rounded-lg bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-xs font-medium text-white transition duration-200"
-                                                            title="Install">
-                                                        <i class="fa-solid fa-download"></i>
+                                                    <button @click="installModel(model.id)" class="p-1.5 rounded bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)] transition-colors" title="Install">
+                                                        <i class="fa-solid fa-download text-xs"></i>
                                                     </button>
                                                 </div>
                                             </template>
@@ -379,44 +415,40 @@
             <div x-show="selectedModel"
                  x-transition
                  @click.away="closeModal()"
-                 class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full md:inset-0 h-full max-h-full bg-black/50"
+                 class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full md:inset-0 h-full max-h-full bg-black/60 backdrop-blur-sm"
                  style="display: none;">
                 <div class="relative p-4 w-full max-w-2xl h-[90vh] mx-auto mt-[5vh]">
-                    <div class="relative bg-[var(--color-bg-secondary)] rounded-lg shadow h-full flex flex-col border border-[var(--color-border-subtle)]">
+                    <div class="relative bg-[var(--color-bg-secondary)] rounded-xl shadow-lg h-full flex flex-col border border-[var(--color-border-subtle)]">
                         <!-- Modal Header -->
-                        <div class="flex items-center justify-between p-4 md:p-5 border-b border-[var(--color-border-subtle)] rounded-t">
-                            <h3 class="text-xl font-semibold text-[var(--color-text-primary)]" x-text="selectedModel?.name"></h3>
+                        <div class="flex items-center justify-between p-4 border-b border-[var(--color-border-subtle)]">
+                            <div class="flex items-center gap-3">
+                                <div class="w-8 h-8 rounded-lg border border-[var(--color-border-subtle)] flex items-center justify-center bg-[var(--color-bg-primary)]">
+                                    <img x-show="selectedModel?.icon" :src="selectedModel?.icon" class="w-full h-full object-cover rounded-lg" loading="lazy">
+                                    <i x-show="!selectedModel?.icon" class="fas fa-brain text-[var(--color-accent)]"></i>
+                                </div>
+                                <h3 class="text-lg font-semibold text-[var(--color-text-primary)]" x-text="selectedModel?.name"></h3>
+                            </div>
                             <button @click="closeModal()"
-                                    class="text-[var(--color-text-secondary)] bg-transparent hover:bg-[var(--color-bg-primary)] hover:text-[var(--color-text-primary)] rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center transition-colors">
-                                <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-                                </svg>
-                                <span class="sr-only">Close modal</span>
+                                    class="text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] p-1.5 rounded-lg hover:bg-[var(--color-bg-primary)] transition-colors">
+                                <i class="fas fa-times"></i>
                             </button>
                         </div>
                         <!-- Modal Body -->
-                        <div class="p-4 md:p-5 space-y-4 overflow-y-auto flex-1 min-h-0">
-                            <div class="flex justify-center items-center">
-                                <div class="w-48 h-48 rounded-lg border border-[var(--color-border-subtle)] flex items-center justify-center bg-[var(--color-bg-primary)] mt-3">
-                                    <img x-show="selectedModel?.icon"
-                                         :src="selectedModel?.icon"
-                                         class="rounded-lg max-h-48 max-w-96 object-cover"
-                                         loading="lazy">
-                                    <i x-show="!selectedModel?.icon" class="fas fa-brain text-6xl text-[var(--color-text-muted)]"></i>
-                                </div>
-                            </div>
-                            <div class="text-base leading-relaxed text-[var(--color-text-secondary)] break-words max-w-full markdown-content" x-html="renderMarkdown(selectedModel?.description)"></div>
+                        <div class="p-4 space-y-4 overflow-y-auto flex-1 min-h-0">
+                            <div class="text-sm leading-relaxed text-[var(--color-text-secondary)] break-words max-w-full markdown-content" x-html="renderMarkdown(selectedModel?.description)"></div>
+
+                            <!-- Size & VRAM Info -->
                             <template x-if="(selectedModel?.estimated_size_display && selectedModel.estimated_size_display !== '0 B') || (selectedModel?.estimated_vram_display && selectedModel.estimated_vram_display !== '0 B')">
-                                <div class="space-y-1">
-                                    <p x-show="selectedModel?.estimated_size_display && selectedModel.estimated_size_display !== '0 B'" class="text-sm text-[var(--color-text-secondary)]">
+                                <div class="bg-[var(--color-bg-primary)] rounded-lg p-3 border border-[var(--color-border-subtle)] space-y-2">
+                                    <p x-show="selectedModel?.estimated_size_display && selectedModel.estimated_size_display !== '0 B'" class="text-xs text-[var(--color-text-secondary)]">
                                         <i class="fas fa-download mr-2 text-[var(--color-primary)]"></i>
-                                        Estimated download size: <span x-text="selectedModel?.estimated_size_display" class="font-medium text-[var(--color-text-primary)]"></span>
+                                        Download: <span x-text="selectedModel?.estimated_size_display" class="font-medium text-[var(--color-text-primary)]"></span>
                                     </p>
-                                    <p x-show="selectedModel?.estimated_vram_display && selectedModel.estimated_vram_display !== '0 B'" class="text-sm text-[var(--color-text-secondary)]">
+                                    <p x-show="selectedModel?.estimated_vram_display && selectedModel.estimated_vram_display !== '0 B'" class="text-xs text-[var(--color-text-secondary)]">
                                         <i class="fas fa-memory mr-2 text-[var(--color-primary)]"></i>
-                                        Estimated VRAM: <span x-text="selectedModel?.estimated_vram_display" class="font-medium text-[var(--color-text-primary)]"></span>
+                                        VRAM: <span x-text="selectedModel?.estimated_vram_display" class="font-medium text-[var(--color-text-primary)]"></span>
                                     </p>
-                                    <p x-show="selectedModel?.estimated_vram_bytes && totalMemory > 0" class="text-sm">
+                                    <p x-show="selectedModel?.estimated_vram_bytes && totalMemory > 0" class="text-xs">
                                         <i class="fas fa-microchip mr-2"
                                            :class="selectedModel?.estimated_vram_bytes <= totalMemory * 0.95 ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'"></i>
                                         <span x-text="selectedModel?.estimated_vram_bytes <= totalMemory * 0.95 ? 'Fits your GPU' : 'May not fit your GPU'"
@@ -424,70 +456,88 @@
                                     </p>
                                 </div>
                             </template>
+
+                            <!-- Repository & License -->
                             <template x-if="selectedModel?.gallery || selectedModel?.license">
-                                <div class="space-y-1">
-                                    <p x-show="selectedModel?.gallery" class="text-sm text-[var(--color-text-secondary)]">
+                                <div class="space-y-1.5">
+                                    <p x-show="selectedModel?.gallery" class="text-xs text-[var(--color-text-secondary)]">
                                         <i class="fa-brands fa-git-alt mr-2 text-[var(--color-primary)]"></i>
-                                        Repository: <span x-text="selectedModel?.gallery" class="font-medium text-[var(--color-text-primary)]"></span>
+                                        <span x-text="selectedModel?.gallery" class="font-medium text-[var(--color-text-primary)]"></span>
                                     </p>
-                                    <p x-show="selectedModel?.license" class="text-sm text-[var(--color-text-secondary)]">
+                                    <p x-show="selectedModel?.license" class="text-xs text-[var(--color-text-secondary)]">
                                         <i class="fas fa-book mr-2 text-[var(--color-primary)]"></i>
-                                        License: <span x-text="selectedModel?.license" class="font-medium text-[var(--color-text-primary)]"></span>
+                                        <span x-text="selectedModel?.license" class="font-medium text-[var(--color-text-primary)]"></span>
                                     </p>
                                 </div>
                             </template>
-                            <hr>
+
+                            <!-- Links -->
                             <template x-if="selectedModel?.urls && selectedModel.urls.length > 0">
                                 <div>
-                                    <p class="text-sm font-semibold text-[var(--color-text-primary)] mb-2">Links</p>
-                                    <ul>
+                                    <p class="text-xs font-semibold text-[var(--color-text-primary)] mb-2">Links</p>
+                                    <ul class="space-y-1">
                                         <template x-for="url in selectedModel.urls" :key="url">
-                                            <li>
-                                                <a :href="url" target="_blank" class="text-base leading-relaxed text-[var(--color-text-secondary)] hover:text-[var(--color-primary)]">
-                                                    <i class="fas fa-link pr-2"></i>
-                                                    <span x-text="url"></span>
+                                            <li class="p-0 m-0">
+                                                <a :href="url" target="_blank" class="text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors">
+                                                    <i class="fas fa-link mr-1"></i><span x-text="url"></span>
                                                 </a>
                                             </li>
                                         </template>
                                     </ul>
                                 </div>
                             </template>
+
+                            <!-- Files -->
                             <template x-if="selectedModel?.additionalFiles && selectedModel.additionalFiles.length > 0">
                                 <div>
-                                    <p class="text-sm font-semibold text-[var(--color-text-primary)] mb-2">Files</p>
-                                    <ul>
+                                    <p class="text-xs font-semibold text-[var(--color-text-primary)] mb-2">Files</p>
+                                    <ul class="space-y-0.5">
                                         <template x-for="file in selectedModel.additionalFiles" :key="file">
-                                            <li class="mb-0">
-                                                <p class="text-base leading-tight text-[var(--color-text-secondary)]">
-                                                    <i class="fas fa-file pr-2"></i>
-                                                    <span x-text="file.filename"></span>
-                                                </p>
+                                            <li class="p-0 m-0">
+                                                <span class="text-xs text-[var(--color-text-secondary)]">
+                                                    <i class="fas fa-file mr-1"></i><span x-text="file.filename"></span>
+                                                </span>
                                             </li>
                                         </template>
                                     </ul>
                                 </div>
                             </template>
+
+                            <!-- Tags -->
                             <template x-if="selectedModel?.tags && selectedModel.tags.length > 0">
                                 <div>
-                                    <p class="text-sm mb-3 font-semibold text-[var(--color-text-primary)]">Tags</p>
-                                    <div class="flex flex-row flex-wrap content-center">
+                                    <p class="text-xs font-semibold text-[var(--color-text-primary)] mb-2">Tags</p>
+                                    <div class="flex flex-wrap gap-1.5">
                                         <template x-for="tag in selectedModel.tags" :key="tag">
-                                            <a :href="'browse?term=' + tag"
-                                               class="inline-flex items-center text-xs px-3 py-1 rounded-full bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] border border-[var(--color-border-subtle)] hover:bg-[var(--color-primary-light)] hover:text-[var(--color-text-primary)] transition duration-200 ease-in-out mr-2 mb-2">
-                                                <i class="fas fa-tag pr-2"></i>
-                                                <span x-text="tag"></span>
-                                            </a>
+                                            <button @click="closeModal(); filterByTerm(tag)"
+                                               class="inline-flex items-center text-[10px] px-2 py-0.5 rounded-full bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] border border-[var(--color-border-subtle)] hover:bg-[var(--color-primary-light)] hover:text-[var(--color-text-primary)] transition-colors">
+                                                <i class="fas fa-tag mr-1"></i><span x-text="tag"></span>
+                                            </button>
                                         </template>
                                     </div>
                                 </div>
                             </template>
                         </div>
                         <!-- Modal Footer -->
-                        <div class="flex items-center p-4 md:p-5 border-t border-[var(--color-border-subtle)] rounded-b">
+                        <div class="flex items-center justify-between p-4 border-t border-[var(--color-border-subtle)]">
                             <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">
+                                    class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] bg-[var(--color-bg-primary)] hover:bg-[var(--color-bg-tertiary)] border border-[var(--color-border-subtle)] rounded-lg py-2 px-3 transition-colors">
                                 Close
                             </button>
+                            <div class="flex gap-2">
+                                <template x-if="selectedModel && !selectedModel.processing && !selectedModel.installed">
+                                    <button @click="installModel(selectedModel.id); closeModal()"
+                                            class="inline-flex items-center gap-1.5 text-xs text-white bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] rounded-lg py-2 px-3 transition-colors">
+                                        <i class="fa-solid fa-download"></i> Install
+                                    </button>
+                                </template>
+                                <template x-if="selectedModel && !selectedModel.processing && selectedModel.installed">
+                                    <button @click="deleteModel(selectedModel.id); closeModal()"
+                                            class="inline-flex items-center gap-1.5 text-xs text-white bg-[var(--color-error)] hover:bg-[var(--color-error)]/80 rounded-lg py-2 px-3 transition-colors">
+                                        <i class="fa-solid fa-trash"></i> Delete
+                                    </button>
+                                </template>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -495,25 +545,36 @@
         </div>
 
         <!-- Pagination -->
-        <div x-show="totalPages > 1" class="flex justify-center mt-12">
-            <div class="flex items-center gap-4 bg-[var(--color-bg-secondary)] rounded-2xl p-4 backdrop-blur-sm border border-[var(--color-border-subtle)]">
+        <div x-show="totalPages > 1" class="flex justify-center mt-8">
+            <div class="flex items-center gap-2 bg-[var(--color-bg-secondary)] rounded-xl p-2 border border-[var(--color-border-subtle)]">
+                <button @click="goToPage(1)"
+                    :disabled="currentPage <= 1"
+                    :class="currentPage <= 1 ? 'opacity-30 cursor-not-allowed' : 'hover:bg-[var(--color-bg-tertiary)]'"
+                    class="flex items-center justify-center h-8 w-8 text-[var(--color-text-secondary)] rounded-lg transition-colors text-xs">
+                    <i class="fas fa-angles-left"></i>
+                </button>
                 <button @click="goToPage(currentPage - 1)"
                     :disabled="currentPage <= 1"
-                    :class="currentPage <= 1 ? 'opacity-50 cursor-not-allowed' : ''"
-                    class="flex items-center justify-center h-12 w-12 bg-[var(--color-bg-primary)] hover:bg-[var(--color-primary)] text-[var(--color-text-secondary)] hover:text-white rounded-lg transition-colors">
+                    :class="currentPage <= 1 ? 'opacity-30 cursor-not-allowed' : 'hover:bg-[var(--color-bg-tertiary)]'"
+                    class="flex items-center justify-center h-8 w-8 text-[var(--color-text-secondary)] rounded-lg transition-colors text-xs">
                     <i class="fas fa-chevron-left"></i>
                 </button>
-                <div class="text-[var(--color-text-primary)] text-sm font-medium px-4">
-                    <span class="text-[var(--color-text-secondary)]">Page</span>
-                    <span class="text-[var(--color-text-primary)] font-bold text-lg mx-2" x-text="currentPage"></span>
-                    <span class="text-[var(--color-text-secondary)]">of</span>
-                    <span class="text-[var(--color-text-primary)] font-bold text-lg mx-2" x-text="totalPages"></span>
+                <div class="text-xs text-[var(--color-text-secondary)] px-3">
+                    <span class="text-[var(--color-text-primary)] font-semibold" x-text="currentPage"></span>
+                    <span class="mx-1">/</span>
+                    <span x-text="totalPages"></span>
                 </div>
                 <button @click="goToPage(currentPage + 1)"
                     :disabled="currentPage >= totalPages"
-                    :class="currentPage >= totalPages ? 'opacity-50 cursor-not-allowed' : ''"
-                    class="group flex items-center justify-center h-12 w-12 bg-[var(--color-bg-primary)] hover:bg-[var(--color-primary)] text-[var(--color-text-secondary)] hover:text-white rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-110">
-                    <i class="fas fa-chevron-right group-hover:animate-pulse"></i>
+                    :class="currentPage >= totalPages ? 'opacity-30 cursor-not-allowed' : 'hover:bg-[var(--color-bg-tertiary)]'"
+                    class="flex items-center justify-center h-8 w-8 text-[var(--color-text-secondary)] rounded-lg transition-colors text-xs">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+                <button @click="goToPage(totalPages)"
+                    :disabled="currentPage >= totalPages"
+                    :class="currentPage >= totalPages ? 'opacity-30 cursor-not-allowed' : 'hover:bg-[var(--color-bg-tertiary)]'"
+                    class="flex items-center justify-center h-8 w-8 text-[var(--color-text-secondary)] rounded-lg transition-colors text-xs">
+                    <i class="fas fa-angles-right"></i>
                 </button>
             </div>
         </div>
@@ -522,46 +583,18 @@
 </div>
 
 <style>
-/* Enhanced scrollbar styling */
-.scrollbar-thin::-webkit-scrollbar {
-    width: 6px;
-}
-
-.scrollbar-thin::-webkit-scrollbar-track {
-    background: rgba(31, 41, 55, 0.5);
-    border-radius: 6px;
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb {
-    background: rgba(107, 114, 128, 0.5);
-    border-radius: 6px;
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background: rgba(107, 114, 128, 0.8);
-}
-
-/* Progress bar styling */
-.progress {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
-    border-radius: 0.5rem;
-    border: 1px solid rgba(59, 130, 246, 0.3);
-    height: 24px;
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     overflow: hidden;
 }
 
-.progress-bar {
-    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
-    height: 100%;
-    transition: width 0.3s ease;
-}
-
-/* Table progress bar styling */
+/* Progress bar styling */
 .progress-table {
     background: var(--color-primary-light);
-    border-radius: 0.25rem;
-    border: 1px solid var(--color-primary-border);
-    height: 6px;
+    border-radius: 0;
+    height: 3px;
     overflow: hidden;
     width: 100%;
 }
@@ -579,14 +612,6 @@ table {
     background: var(--color-bg-secondary);
 }
 
-tbody tr:last-child td:first-child {
-    border-bottom-left-radius: 1rem;
-}
-
-tbody tr:last-child td:last-child {
-    border-bottom-right-radius: 1rem;
-}
-
 /* Markdown content overflow handling */
 .markdown-content {
     word-wrap: break-word;
@@ -599,17 +624,28 @@ tbody tr:last-child td:last-child {
     max-width: 100%;
     white-space: pre-wrap;
     word-wrap: break-word;
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 6px;
+    padding: 0.75rem;
+    font-size: 0.8rem;
 }
 
 .markdown-content code {
     word-wrap: break-word;
     overflow-wrap: break-word;
+    font-size: 0.85em;
+    background: var(--color-bg-primary);
+    padding: 0.15em 0.3em;
+    border-radius: 3px;
 }
 
 .markdown-content pre code {
     white-space: pre;
     overflow-x: auto;
     display: block;
+    background: none;
+    padding: 0;
 }
 
 .markdown-content table {
@@ -645,12 +681,34 @@ function modelsGallery() {
         notifications: [],
         sortBy: '',
         sortOrder: 'asc',
+        viewMode: localStorage.getItem('localai-models-view') || 'grid',
+
+        typeFilters: [
+            { term: 'llm', label: 'LLM', icon: 'fas fa-comment-alt' },
+            { term: 'multimodal', label: 'Multimodal', icon: 'fas fa-object-group' },
+            { term: 'stablediffusion', label: 'Image', icon: 'fas fa-image' },
+            { term: 'tts', label: 'TTS', icon: 'fas fa-microphone' },
+            { term: 'stt', label: 'STT', icon: 'fas fa-headphones' },
+            { term: 'embedding', label: 'Embedding', icon: 'fas fa-vector-square' },
+            { term: 'rerank', label: 'Rerank', icon: 'fas fa-sort-amount-up' },
+            { term: 'object-detection', label: 'Vision', icon: 'fas fa-eye' },
+        ],
+
+        sortColumns: [
+            { key: 'name', label: 'Name' },
+            { key: 'status', label: 'Status' },
+            { key: 'repository', label: 'Repo' },
+            { key: 'license', label: 'License' },
+        ],
 
         init() {
             this.fetchModels();
             this.fetchResources();
-            // Poll for job progress every 600ms
             setInterval(() => this.pollJobs(), 600);
+
+            this.$watch('viewMode', (val) => {
+                localStorage.setItem('localai-models-view', val);
+            });
         },
 
         async fetchResources() {
@@ -666,7 +724,6 @@ function modelsGallery() {
         addNotification(message, type = 'error') {
             const id = Date.now();
             this.notifications.push({ id, message, type });
-            // Auto-dismiss after 10 seconds
             setTimeout(() => this.dismissNotification(id), 10000);
         },
 
@@ -712,12 +769,16 @@ function modelsGallery() {
             this.fetchModels();
         },
 
+        clearSearch() {
+            this.searchTerm = '';
+            this.currentPage = 1;
+            this.fetchModels();
+        },
+
         setSort(column) {
             if (this.sortBy === column) {
-                // Toggle sort order if clicking the same column
                 this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
             } else {
-                // Set new column and default to ascending
                 this.sortBy = column;
                 this.sortOrder = 'asc';
             }
@@ -739,7 +800,6 @@ function modelsGallery() {
                 });
                 const data = await response.json();
                 if (data.jobID) {
-                    // Update model state
                     const model = this.models.find(m => m.id === modelId);
                     if (model) {
                         model.processing = true;
@@ -749,7 +809,7 @@ function modelsGallery() {
                 }
             } catch (error) {
                 console.error('Error installing model:', error);
-                alert('Failed to start installation');
+                this.addNotification('Failed to start installation', 'error');
             }
         },
 
@@ -773,7 +833,7 @@ function modelsGallery() {
                 }
             } catch (error) {
                 console.error('Error deleting model:', error);
-                alert('Failed to start deletion');
+                this.addNotification('Failed to start deletion', 'error');
             }
         },
 
@@ -787,10 +847,10 @@ function modelsGallery() {
                     method: 'POST'
                 });
                 const data = await response.json();
-                alert(data.message || 'Configuration saved');
+                this.addNotification(data.message || 'Configuration saved', 'success');
             } catch (error) {
                 console.error('Error getting config:', error);
-                alert('Failed to get configuration');
+                this.addNotification('Failed to get configuration', 'error');
             }
         },
 
@@ -802,10 +862,8 @@ function modelsGallery() {
                     const response = await fetch(`/api/models/job/${model.jobID}`);
                     const jobData = await response.json();
 
-                    // Handle queued status
                     if (jobData.queued) {
                         this.jobProgress[model.jobID] = 0;
-                        // Keep processing state but don't show error
                         continue;
                     }
 
@@ -815,10 +873,8 @@ function modelsGallery() {
                         model.processing = false;
                         model.installed = !jobData.deletion;
                         delete this.jobProgress[model.jobID];
-                        // Show success notification
                         const action = jobData.deletion ? 'deleted' : 'installed';
                         this.addNotification(`Model "${model.name}" ${action} successfully!`, 'success');
-                        // Refresh the models list to get updated state
                         this.fetchModels();
                     }
 
@@ -826,25 +882,19 @@ function modelsGallery() {
                         model.processing = false;
                         delete this.jobProgress[model.jobID];
                         const action = model.isDeletion ? 'deleting' : 'installing';
-                        // Extract error message - handle both string and object errors
                         let errorMessage = 'Unknown error';
                         if (typeof jobData.error === 'string') {
                             errorMessage = jobData.error;
                         } else if (jobData.error && typeof jobData.error === 'object') {
-                            // Check if error object has any properties
                             const errorKeys = Object.keys(jobData.error);
                             if (errorKeys.length > 0) {
-                                // Try common error object properties
                                 errorMessage = jobData.error.message || jobData.error.error || jobData.error.Error || JSON.stringify(jobData.error);
                             } else {
-                                // Empty object {}, fall back to message field
                                 errorMessage = jobData.message || 'Unknown error';
                             }
                         } else if (jobData.message) {
-                            // Use message field if error is not present or is empty
                             errorMessage = jobData.message;
                         }
-                        // Remove "error: " prefix if present
                         if (errorMessage.startsWith('error: ')) {
                             errorMessage = errorMessage.substring(7);
                         }
@@ -852,7 +902,6 @@ function modelsGallery() {
                     }
                 } catch (error) {
                     console.error('Error polling job:', error);
-                    // Don't show notification for every polling error, only if model is stuck
                 }
             }
         },
@@ -861,7 +910,7 @@ function modelsGallery() {
             if (!text) return '';
             try {
                 if (typeof marked === 'undefined' || typeof DOMPurify === 'undefined') {
-                    return text; // Return plain text if libraries not loaded
+                    return text;
                 }
                 const html = marked.parse(text);
                 return DOMPurify.sanitize(html);
diff --git a/core/http/views/partials/navbar_explorer.html b/core/http/views/partials/navbar_explorer.html
index f4ee4f9f8..835d29f2a 100644
--- a/core/http/views/partials/navbar_explorer.html
+++ b/core/http/views/partials/navbar_explorer.html
@@ -1,49 +1,48 @@
-<nav class="bg-[var(--color-bg-secondary)] shadow-lg border-b border-[var(--color-border-subtle)]">
-    <div class="container mx-auto px-4 py-3">
+<nav class="bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-subtle)]" style="position: sticky; top: 0; z-index: 40;">
+    <div class="container mx-auto px-4 py-2.5">
         <div class="flex items-center justify-between">
             <div class="flex items-center">
-                <!-- Logo Image -->
                 <a href="./" class="flex items-center group">
-                    <img src="static/logo_horizontal.png" 
-                         alt="LocalAI Logo" 
-                         class="h-10 mr-3 rounded-lg border border-[var(--color-primary-border)] shadow-md transition-all duration-300 group-hover:shadow-[var(--color-primary)]/20 group-hover:border-[var(--color-primary)]/50">
+                    <img src="static/logo_horizontal.png"
+                         alt="LocalAI Logo"
+                         class="h-8 rounded-lg border border-[var(--color-border-subtle)] transition-all duration-200 group-hover:border-[var(--color-primary-border)]">
                 </a>
             </div>
-            
+
             <!-- Menu button for small screens -->
             <div class="lg:hidden">
-                <button id="menu-toggle" class="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] focus:outline-none p-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-primary)]">
-                    <i class="fas fa-bars fa-lg"></i>
+                <button id="menu-toggle" class="text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] p-2 rounded-lg transition-colors hover:bg-[var(--color-bg-primary)]">
+                    <i class="fas fa-bars"></i>
                 </button>
             </div>
-            
+
             <!-- Navigation links -->
-            <div class="hidden lg:flex lg:items-center lg:justify-end lg:space-x-1">
-                <a href="./" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-primary)] flex items-center">
-                    <i class="fas fa-home text-[var(--color-primary)] mr-2"></i>Home
+            <div class="hidden lg:flex lg:items-center lg:gap-1">
+                <a href="./" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-3 py-1.5 rounded-lg text-sm transition-colors hover:bg-[var(--color-bg-primary)] flex items-center gap-2">
+                    <i class="fas fa-home text-[var(--color-primary)] text-xs"></i>Home
                 </a>
-                <a href="https://localai.io" target="_blank" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-primary)] flex items-center group">
-                    <i class="fas fa-book-reader text-[var(--color-primary)] mr-2"></i>Documentation
-                    <i class="fas fa-external-link-alt text-xs ml-1 opacity-70 group-hover:opacity-100 transition-opacity"></i>
+                <a href="https://localai.io" target="_blank" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-3 py-1.5 rounded-lg text-sm transition-colors hover:bg-[var(--color-bg-primary)] flex items-center gap-2 group">
+                    <i class="fas fa-book-reader text-[var(--color-primary)] text-xs"></i>Docs
+                    <i class="fas fa-external-link-alt text-[10px] opacity-50 group-hover:opacity-100 transition-opacity"></i>
                 </a>
-                <a href="https://models.localai.io/" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out hover:bg-[var(--color-bg-primary)] flex items-center">
-                    <i class="fas fa-brain text-[var(--color-primary)] mr-2"></i>Models
+                <a href="https://models.localai.io/" class="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] px-3 py-1.5 rounded-lg text-sm transition-colors hover:bg-[var(--color-bg-primary)] flex items-center gap-2">
+                    <i class="fas fa-brain text-[var(--color-primary)] text-xs"></i>Models
                 </a>
             </div>
         </div>
-        
+
         <!-- Collapsible menu for small screens -->
         <div class="hidden lg:hidden" id="mobile-menu">
-            <div class="pt-3 pb-2 space-y-1 border-t border-[var(--color-border-subtle)] mt-2">
-                <a href="./" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center">
-                    <i class="fas fa-home text-[var(--color-primary)] mr-3 w-5 text-center"></i>Home
+            <div class="pt-2 pb-1 space-y-0.5 border-t border-[var(--color-border-subtle)] mt-2">
+                <a href="./" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 rounded-lg text-sm transition-colors flex items-center gap-2">
+                    <i class="fas fa-home text-[var(--color-primary)] text-xs w-4 text-center"></i>Home
                 </a>
-                <a href="https://localai.io" target="_blank" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center">
-                    <i class="fas fa-book-reader text-[var(--color-primary)] mr-3 w-5 text-center"></i>Documentation
-                    <i class="fas fa-external-link-alt text-xs ml-1 opacity-70"></i>
+                <a href="https://localai.io" target="_blank" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 rounded-lg text-sm transition-colors flex items-center gap-2">
+                    <i class="fas fa-book-reader text-[var(--color-primary)] text-xs w-4 text-center"></i>Docs
+                    <i class="fas fa-external-link-alt text-[10px] opacity-50"></i>
                 </a>
-                <a href="https://models.localai.io/" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 rounded-lg transition duration-300 ease-in-out flex items-center">
-                    <i class="fas fa-brain text-[var(--color-primary)] mr-3 w-5 text-center"></i>Models
+                <a href="https://models.localai.io/" class="block text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-primary)] px-3 py-2 rounded-lg text-sm transition-colors flex items-center gap-2">
+                    <i class="fas fa-brain text-[var(--color-primary)] text-xs w-4 text-center"></i>Models
                 </a>
             </div>
         </div>
@@ -51,12 +50,10 @@
 </nav>
 
 <script>
-    // JavaScript to toggle the mobile menu with animation
     document.getElementById('menu-toggle').addEventListener('click', function () {
         var mobileMenu = document.getElementById('mobile-menu');
         if (mobileMenu.classList.contains('hidden')) {
             mobileMenu.classList.remove('hidden');
-            // Use setTimeout to create a mild animation effect
             setTimeout(function() {
                 mobileMenu.classList.add('opacity-100');
                 mobileMenu.classList.remove('opacity-0');
@@ -64,11 +61,9 @@
         } else {
             mobileMenu.classList.add('opacity-0');
             mobileMenu.classList.remove('opacity-100');
-            // Wait for transition to finish before hiding
             setTimeout(function() {
                 mobileMenu.classList.add('hidden');
             }, 300);
         }
     });
-    
 </script>