Several UI fixes

app/components/@settings/shared/components/TabManagement.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { useStore } from '@nanostores/react';
-import { Switch } from '@radix-ui/react-switch';
+import { Switch } from '~/components/ui/Switch';
 import { classNames } from '~/utils/classNames';
 import { tabConfigurationStore } from '~/lib/stores/settings';
 import { TAB_LABELS } from '~/components/@settings/core/constants';
@@ -177,92 +177,193 @@ export const TabManagement = () => {
 
         {/* Tab Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {filteredTabs.map((tab, index) => (
-            <motion.div
-              key={tab.id}
-              className={classNames(
-                'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
-                'bg-bolt-elements-background-depth-2',
-                'hover:bg-bolt-elements-background-depth-3',
-                'transition-all duration-200',
-                'relative overflow-hidden group',
-              )}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: index * 0.1 }}
-              whileHover={{ scale: 1.02 }}
-            >
-              {/* Status Badges */}
-              <div className="absolute top-2 right-2 flex gap-1">
-                {DEFAULT_USER_TABS.includes(tab.id) && (
-                  <span className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium">
+          {/* Default Section Header */}
+          {filteredTabs.some((tab) => DEFAULT_USER_TABS.includes(tab.id)) && (
+            <div className="col-span-full flex items-center gap-2 mt-4 mb-2">
+              <div className="i-ph:star-fill w-4 h-4 text-purple-500" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">Default Tabs</span>
+            </div>
+          )}
+
+          {/* Default Tabs */}
+          {filteredTabs
+            .filter((tab) => DEFAULT_USER_TABS.includes(tab.id))
+            .map((tab, index) => (
+              <motion.div
+                key={tab.id}
+                className={classNames(
+                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
+                  'bg-bolt-elements-background-depth-2',
+                  'hover:bg-bolt-elements-background-depth-3',
+                  'transition-all duration-200',
+                  'relative overflow-hidden group',
+                )}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                whileHover={{ scale: 1.02 }}
+              >
+                {/* Status Badges */}
+                <div className="absolute top-1 right-1.5 flex gap-1">
+                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium mr-2">
                     Default
                   </span>
+                </div>
+
+                <div className="flex items-start gap-4 p-4">
+                  <motion.div
+                    className={classNames(
+                      'w-10 h-10 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                      'transition-all duration-200',
+                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <div
+                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
+                    >
+                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
+                    </div>
+                  </motion.div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-4">
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                            {TAB_LABELS[tab.id]}
+                          </h4>
+                          {BETA_TABS.has(tab.id) && <BetaLabel />}
+                        </div>
+                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tab.visible}
+                        onCheckedChange={(checked) => {
+                          const isDisabled =
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
+
+                          if (!isDisabled) {
+                            handleTabVisibilityChange(tab.id, checked);
+                          }
+                        }}
+                        className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
+                          'opacity-50 pointer-events-none':
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
+                        })}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <motion.div
+                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                  animate={{
+                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                    scale: tab.visible ? 1 : 0.98,
+                  }}
+                  transition={{ duration: 0.2 }}
+                />
+              </motion.div>
+            ))}
+
+          {/* Optional Section Header */}
+          {filteredTabs.some((tab) => OPTIONAL_USER_TABS.includes(tab.id)) && (
+            <div className="col-span-full flex items-center gap-2 mt-8 mb-2">
+              <div className="i-ph:plus-circle-fill w-4 h-4 text-blue-500" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">Optional Tabs</span>
+            </div>
+          )}
+
+          {/* Optional Tabs */}
+          {filteredTabs
+            .filter((tab) => OPTIONAL_USER_TABS.includes(tab.id))
+            .map((tab, index) => (
+              <motion.div
+                key={tab.id}
+                className={classNames(
+                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
+                  'bg-bolt-elements-background-depth-2',
+                  'hover:bg-bolt-elements-background-depth-3',
+                  'transition-all duration-200',
+                  'relative overflow-hidden group',
                 )}
-                {OPTIONAL_USER_TABS.includes(tab.id) && (
-                  <span className="px-2 py-0.5 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium">
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                whileHover={{ scale: 1.02 }}
+              >
+                {/* Status Badges */}
+                <div className="absolute top-1 right-1.5 flex gap-1">
+                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium mr-2">
                     Optional
                   </span>
-                )}
-              </div>
+                </div>
 
-              <div className="flex items-start gap-4 p-4">
-                <motion.div
-                  className={classNames(
-                    'w-10 h-10 flex items-center justify-center rounded-xl',
-                    'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
-                    'transition-all duration-200',
-                    tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
-                  )}
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.9 }}
-                >
-                  <div className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}>
-                    <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
-                  </div>
-                </motion.div>
-
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center justify-between gap-4">
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
-                          {TAB_LABELS[tab.id]}
-                        </h4>
-                        {BETA_TABS.has(tab.id) && <BetaLabel />}
-                      </div>
-                      <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
-                        {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
-                      </p>
+                <div className="flex items-start gap-4 p-4">
+                  <motion.div
+                    className={classNames(
+                      'w-10 h-10 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                      'transition-all duration-200',
+                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <div
+                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
+                    >
+                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
                     </div>
-                    <Switch
-                      checked={tab.visible}
-                      onCheckedChange={(checked) => handleTabVisibilityChange(tab.id, checked)}
-                      disabled={!DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id)}
-                      className={classNames(
-                        'relative inline-flex h-5 w-9 items-center rounded-full',
-                        'transition-colors duration-200',
-                        tab.visible ? 'bg-purple-500' : 'bg-bolt-elements-background-depth-4',
-                        {
-                          'opacity-50 cursor-not-allowed':
+                  </motion.div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-4">
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                            {TAB_LABELS[tab.id]}
+                          </h4>
+                          {BETA_TABS.has(tab.id) && <BetaLabel />}
+                        </div>
+                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tab.visible}
+                        onCheckedChange={(checked) => {
+                          const isDisabled =
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
+
+                          if (!isDisabled) {
+                            handleTabVisibilityChange(tab.id, checked);
+                          }
+                        }}
+                        className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
+                          'opacity-50 pointer-events-none':
                             !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
-                        },
-                      )}
-                    />
+                        })}
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <motion.div
-                className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
-                animate={{
-                  borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
-                  scale: tab.visible ? 1 : 0.98,
-                }}
-                transition={{ duration: 0.2 }}
-              />
-            </motion.div>
-          ))}
+                <motion.div
+                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                  animate={{
+                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                    scale: tab.visible ? 1 : 0.98,
+                  }}
+                  transition={{ duration: 0.2 }}
+                />
+              </motion.div>
+            ))}
         </div>
       </motion.div>
     </div>

app/components/@settings/tabs/debug/DebugTab.tsx

@@ -1270,60 +1270,32 @@ export default function DebugTab() {
     <div className="flex flex-col gap-6 max-w-7xl mx-auto p-4">
       {/* Quick Stats Banner */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        {/* Ollama Service Status Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
+        {/* Errors Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
           <div className="flex items-center gap-2">
-            <div className="i-ph:robot text-purple-500 w-4 h-4" />
-            <div className="text-sm text-bolt-elements-textSecondary">Ollama Service</div>
+            <div className="i-ph:warning-octagon text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Errors</div>
           </div>
           <div className="flex items-center gap-2 mt-2">
-            <div
-              className={classNames('w-2 h-2 rounded-full animate-pulse', status.bgColor, {
-                'shadow-lg shadow-green-500/20': status.status === 'Running',
-                'shadow-lg shadow-red-500/20': status.status === 'Not Running',
-              })}
-            />
-            <span className={classNames('text-sm font-medium flex items-center gap-1.5', status.color)}>
-              {status.status === 'Running' && <div className="i-ph:check-circle-fill w-3.5 h-3.5" />}
-              {status.status === 'Not Running' && <div className="i-ph:x-circle-fill w-3.5 h-3.5" />}
-              {status.status === 'Disabled' && <div className="i-ph:prohibit-fill w-3.5 h-3.5" />}
-              {status.status}
+            <span
+              className={classNames('text-2xl font-semibold', errorLogs.length > 0 ? 'text-red-500' : 'text-green-500')}
+            >
+              {errorLogs.length}
             </span>
           </div>
           <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
             <div
-              className={classNames('w-3.5 h-3.5', {
-                'i-ph:info text-green-500': status.status === 'Running',
-                'i-ph:warning text-red-500': status.status === 'Not Running' || status.status === 'Disabled',
-              })}
+              className={classNames(
+                'w-3.5 h-3.5',
+                errorLogs.length > 0 ? 'i-ph:warning text-red-500' : 'i-ph:check-circle text-green-500',
+              )}
             />
-            {status.message}
-          </div>
-          {ollamaStatus.models && ollamaStatus.models.length > 0 && (
-            <div className="mt-3 space-y-1 border-t border-[#E5E5E5] dark:border-[#1A1A1A] pt-2">
-              <div className="text-xs font-medium text-bolt-elements-textSecondary flex items-center gap-1.5">
-                <div className="i-ph:cube-duotone w-3.5 h-3.5 text-purple-500" />
-                Installed Models
-              </div>
-              {ollamaStatus.models.map((model) => (
-                <div key={model.name} className="text-xs text-bolt-elements-textSecondary flex items-center gap-2 pl-5">
-                  <div className="i-ph:cube w-3 h-3 text-purple-500/70" />
-                  <span className="font-mono">{model.name}</span>
-                  <span className="text-bolt-elements-textTertiary">
-                    ({Math.round(parseInt(model.size) / 1024 / 1024)}MB, {model.quantization})
-                  </span>
-                </div>
-              ))}
-            </div>
-          )}
-          <div className="text-xs text-bolt-elements-textTertiary mt-3 flex items-center gap-1.5">
-            <div className="i-ph:clock w-3 h-3" />
-            Last checked: {ollamaStatus.lastChecked.toLocaleTimeString()}
+            {errorLogs.length > 0 ? 'Errors detected' : 'No errors detected'}
           </div>
         </div>
 
         {/* Memory Usage Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
           <div className="flex items-center gap-2">
             <div className="i-ph:cpu text-purple-500 w-4 h-4" />
             <div className="text-sm text-bolt-elements-textSecondary">Memory Usage</div>
@@ -1360,7 +1332,7 @@ export default function DebugTab() {
         </div>
 
         {/* Page Load Time Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
           <div className="flex items-center gap-2">
             <div className="i-ph:timer text-purple-500 w-4 h-4" />
             <div className="text-sm text-bolt-elements-textSecondary">Page Load Time</div>
@@ -1386,7 +1358,7 @@ export default function DebugTab() {
         </div>
 
         {/* Network Speed Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
           <div className="flex items-center gap-2">
             <div className="i-ph:wifi-high text-purple-500 w-4 h-4" />
             <div className="text-sm text-bolt-elements-textSecondary">Network Speed</div>
@@ -1411,27 +1383,80 @@ export default function DebugTab() {
           </div>
         </div>
 
-        {/* Errors Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
-          <div className="flex items-center gap-2">
-            <div className="i-ph:warning-octagon text-purple-500 w-4 h-4" />
-            <div className="text-sm text-bolt-elements-textSecondary">Errors</div>
-          </div>
-          <div className="flex items-center gap-2 mt-2">
-            <span
-              className={classNames('text-2xl font-semibold', errorLogs.length > 0 ? 'text-red-500' : 'text-green-500')}
-            >
-              {errorLogs.length}
-            </span>
+        {/* Ollama Service Card - Now spans all 4 columns */}
+        <div className="md:col-span-4 p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[260px] flex flex-col">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:robot text-purple-500 w-5 h-5" />
+              <div>
+                <div className="text-base font-medium text-bolt-elements-textPrimary">Ollama Service</div>
+                <div className="text-xs text-bolt-elements-textSecondary mt-0.5">{status.message}</div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2 px-2.5 py-1 rounded-full bg-bolt-elements-background-depth-3">
+                <div
+                  className={classNames('w-2 h-2 rounded-full animate-pulse', status.bgColor, {
+                    'shadow-lg shadow-green-500/20': status.status === 'Running',
+                    'shadow-lg shadow-red-500/20': status.status === 'Not Running',
+                  })}
+                />
+                <span className={classNames('text-xs font-medium flex items-center gap-1', status.color)}>
+                  {status.status}
+                </span>
+              </div>
+              <div className="text-[10px] text-bolt-elements-textTertiary flex items-center gap-1.5">
+                <div className="i-ph:clock w-3 h-3" />
+                {ollamaStatus.lastChecked.toLocaleTimeString()}
+              </div>
+            </div>
           </div>
-          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
-            <div
-              className={classNames(
-                'w-3.5 h-3.5',
-                errorLogs.length > 0 ? 'i-ph:warning text-red-500' : 'i-ph:check-circle text-green-500',
-              )}
-            />
-            {errorLogs.length > 0 ? 'Errors detected' : 'No errors detected'}
+
+          <div className="mt-6 flex-1 min-h-0 flex flex-col">
+            {status.status === 'Running' && ollamaStatus.models && ollamaStatus.models.length > 0 ? (
+              <>
+                <div className="text-xs font-medium text-bolt-elements-textSecondary flex items-center justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <div className="i-ph:cube-duotone w-4 h-4 text-purple-500" />
+                    <span>Installed Models</span>
+                    <Badge variant="secondary" className="ml-1">
+                      {ollamaStatus.models.length}
+                    </Badge>
+                  </div>
+                </div>
+                <div className="overflow-y-auto flex-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-600">
+                  <div className="grid grid-cols-2 gap-3 pr-2">
+                    {ollamaStatus.models.map((model) => (
+                      <div
+                        key={model.name}
+                        className="text-sm bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4 rounded-lg px-4 py-3 flex items-center justify-between transition-colors group"
+                      >
+                        <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                          <div className="i-ph:cube w-4 h-4 text-purple-500/70 group-hover:text-purple-500 transition-colors" />
+                          <span className="font-mono truncate">{model.name}</span>
+                        </div>
+                        <Badge variant="outline" className="ml-2 text-xs font-mono">
+                          {Math.round(parseInt(model.size) / 1024 / 1024)}MB
+                        </Badge>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="flex-1 flex items-center justify-center">
+                <div className="flex flex-col items-center gap-3 max-w-[280px] text-center">
+                  <div
+                    className={classNames('w-12 h-12', {
+                      'i-ph:warning-circle text-red-500/80':
+                        status.status === 'Not Running' || status.status === 'Disabled',
+                      'i-ph:cube-duotone text-purple-500/80': status.status === 'Running',
+                    })}
+                  />
+                  <span className="text-sm text-bolt-elements-textSecondary">{status.message}</span>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>

app/components/@settings/tabs/providers/local/LocalProvidersTab.tsx

@@ -471,6 +471,60 @@ export default function LocalProvidersTab() {
                 />
               </div>
 
+              {/* URL Configuration Section */}
+              <AnimatePresence>
+                {provider.settings.enabled && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    className="mt-4"
+                  >
+                    <div className="flex flex-col gap-2">
+                      <label className="text-sm text-bolt-elements-textSecondary">API Endpoint</label>
+                      {editingProvider === provider.name ? (
+                        <input
+                          type="text"
+                          defaultValue={provider.settings.baseUrl || OLLAMA_API_URL}
+                          placeholder="Enter Ollama base URL"
+                          className={classNames(
+                            'w-full px-3 py-2 rounded-lg text-sm',
+                            'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                            'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                            'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+                            'transition-all duration-200',
+                          )}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              handleUpdateBaseUrl(provider, e.currentTarget.value);
+                            } else if (e.key === 'Escape') {
+                              setEditingProvider(null);
+                            }
+                          }}
+                          onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
+                          autoFocus
+                        />
+                      ) : (
+                        <div
+                          onClick={() => setEditingProvider(provider.name)}
+                          className={classNames(
+                            'w-full px-3 py-2 rounded-lg text-sm cursor-pointer',
+                            'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                            'hover:border-purple-500/30 hover:bg-bolt-elements-background-depth-4',
+                            'transition-all duration-200',
+                          )}
+                        >
+                          <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                            <div className="i-ph:link text-sm" />
+                            <span>{provider.settings.baseUrl || OLLAMA_API_URL}</span>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
               {/* Ollama Models Section */}
               {provider.settings.enabled && (
                 <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="mt-6 space-y-4">
@@ -505,7 +559,19 @@ export default function LocalProvidersTab() {
                       <div className="text-center py-8 text-bolt-elements-textSecondary">
                         <div className="i-ph:cube-transparent text-4xl mx-auto mb-2" />
                         <p>No models installed yet</p>
-                        <p className="text-sm">Install your first model below</p>
+                        <p className="text-sm text-bolt-elements-textTertiary px-1">
+                          Browse models at{' '}
+                          <a
+                            href="https://ollama.com/library"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-purple-500 hover:underline inline-flex items-center gap-0.5 text-base font-medium"
+                          >
+                            ollama.com/library
+                            <div className="i-ph:arrow-square-out text-xs" />
+                          </a>{' '}
+                          and copy model names to install
+                        </p>
                       </div>
                     ) : (
                       ollamaModels.map((model) => (

app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx

@@ -429,16 +429,16 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
               }}
               disabled={isInstalling}
             />
-            <p className="text-xs text-bolt-elements-textTertiary px-1">
+            <p className="text-sm text-bolt-elements-textSecondary px-1">
               Browse models at{' '}
               <a
                 href="https://ollama.com/library"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-purple-500 hover:underline inline-flex items-center gap-0.5"
+                className="text-purple-500 hover:underline inline-flex items-center gap-1 text-base font-medium"
               >
                 ollama.com/library
-                <div className="i-ph:arrow-square-out text-[10px]" />
+                <div className="i-ph:arrow-square-out text-sm" />
               </a>{' '}
               and copy model names to install
             </p>
@@ -448,10 +448,11 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
           onClick={() => handleInstallModel(modelString)}
           disabled={!modelString || isInstalling}
           className={classNames(
-            'rounded-xl px-6 py-3',
-            'bg-purple-500 text-white',
+            'rounded-lg px-4 py-2',
+            'bg-purple-500 text-white text-sm',
             'hover:bg-purple-600',
             'transition-all duration-200',
+            'flex items-center gap-2',
             { 'opacity-50 cursor-not-allowed': !modelString || isInstalling },
           )}
           whileHover={{ scale: 1.02 }}
@@ -459,7 +460,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
         >
           {isInstalling ? (
             <div className="flex items-center gap-2">
-              <div className="i-ph:spinner-gap-bold animate-spin" />
+              <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
               <span>Installing...</span>
             </div>
           ) : (

app/components/@settings/tabs/settings/SettingsTab.tsx

@@ -3,7 +3,6 @@ import { motion } from 'framer-motion';
 import { toast } from 'react-toastify';
 import { classNames } from '~/utils/classNames';
 import { Switch } from '~/components/ui/Switch';
-import { themeStore, kTheme } from '~/lib/stores/theme';
 import type { UserProfile } from '~/components/@settings/core/types';
 import { useStore } from '@nanostores/react';
 import { shortcutsStore } from '~/lib/stores/settings';
@@ -41,7 +40,6 @@ export default function SettingsTab() {
     return saved
       ? JSON.parse(saved)
       : {
-          theme: 'system',
           notifications: true,
           language: 'en',
           timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -52,22 +50,6 @@ export default function SettingsTab() {
     setCurrentTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
   }, []);
 
-  // Apply theme when settings changes
-  useEffect(() => {
-    if (settings.theme === 'system') {
-      // Remove theme override
-      localStorage.removeItem(kTheme);
-
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      document.querySelector('html')?.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
-      themeStore.set(prefersDark ? 'dark' : 'light');
-    } else {
-      themeStore.set(settings.theme);
-      localStorage.setItem(kTheme, settings.theme);
-      document.querySelector('html')?.setAttribute('data-theme', settings.theme);
-    }
-  }, [settings.theme]);
-
   // Save settings automatically when they change
   useEffect(() => {
     try {
@@ -77,7 +59,6 @@ export default function SettingsTab() {
       // Merge with new settings
       const updatedProfile = {
         ...existingProfile,
-        theme: settings.theme,
         notifications: settings.notifications,
         language: settings.language,
         timezone: settings.timezone,
@@ -93,7 +74,7 @@ export default function SettingsTab() {
 
   return (
     <div className="space-y-4">
-      {/* Theme & Language */}
+      {/* Language & Notifications */}
       <motion.div
         className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4 space-y-4"
         initial={{ opacity: 0, y: 20 }}
@@ -102,45 +83,7 @@ export default function SettingsTab() {
       >
         <div className="flex items-center gap-2 mb-4">
           <div className="i-ph:palette-fill w-4 h-4 text-purple-500" />
-          <span className="text-sm font-medium text-bolt-elements-textPrimary">Appearance</span>
-        </div>
-
-        <div>
-          <div className="flex items-center gap-2 mb-2">
-            <div className="i-ph:paint-brush-fill w-4 h-4 text-bolt-elements-textSecondary" />
-            <label className="block text-sm text-bolt-elements-textSecondary">Theme</label>
-          </div>
-          <div className="flex gap-2">
-            {(['light', 'dark', 'system'] as const).map((theme) => (
-              <button
-                key={theme}
-                onClick={() => {
-                  setSettings((prev) => ({ ...prev, theme }));
-
-                  if (theme !== 'system') {
-                    themeStore.set(theme);
-                  }
-                }}
-                className={classNames(
-                  'inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm disabled:opacity-50 disabled:cursor-not-allowed',
-                  settings.theme === theme
-                    ? 'bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-500 dark:text-white dark:hover:bg-purple-600'
-                    : 'bg-bolt-elements-hover dark:bg-[#1A1A1A] text-bolt-elements-textSecondary hover:bg-purple-500/10 hover:text-purple-500 dark:hover:bg-purple-500/20 dark:text-bolt-elements-textPrimary dark:hover:text-purple-500',
-                )}
-              >
-                <div
-                  className={`w-4 h-4 ${
-                    theme === 'light'
-                      ? 'i-ph:sun-fill'
-                      : theme === 'dark'
-                        ? 'i-ph:moon-stars-fill'
-                        : 'i-ph:monitor-fill'
-                  }`}
-                />
-                <span className="capitalize">{theme}</span>
-              </button>
-            ))}
-          </div>
+          <span className="text-sm font-medium text-bolt-elements-textPrimary">Preferences</span>
         </div>
 
         <div>

app/lib/stores/settings.ts

@@ -179,7 +179,7 @@ const getInitialSettings = () => {
     contextOptimization: getStoredBoolean(SETTINGS_KEYS.CONTEXT_OPTIMIZATION, true),
     eventLogs: getStoredBoolean(SETTINGS_KEYS.EVENT_LOGS, true),
     localModels: getStoredBoolean(SETTINGS_KEYS.LOCAL_MODELS, true),
-    promptId: isBrowser ? localStorage.getItem(SETTINGS_KEYS.PROMPT_ID) || 'optimized' : 'optimized',
+    promptId: isBrowser ? localStorage.getItem(SETTINGS_KEYS.PROMPT_ID) || 'default' : 'default',
     developerMode: getStoredBoolean(SETTINGS_KEYS.DEVELOPER_MODE, false),
   };
 };