diff --git a/dashboard/frontend/src/App.tsx b/dashboard/frontend/src/App.tsx
index 82c7b150..675f34ea 100644
--- a/dashboard/frontend/src/App.tsx
+++ b/dashboard/frontend/src/App.tsx
@@ -5,9 +5,11 @@ import LandingPage from './pages/LandingPage'
 import MonitoringPage from './pages/MonitoringPage'
 import ConfigPage from './pages/ConfigPage'
 import PlaygroundPage from './pages/PlaygroundPage'
+import { ConfigSection } from './components/ConfigNav'
 
 const App: React.FC = () => {
   const [isInIframe, setIsInIframe] = useState(false)
+  const [configSection, setConfigSection] = useState<ConfigSection>('models')
 
   useEffect(() => {
     // Detect if we're running inside an iframe (potential loop)
@@ -70,9 +72,39 @@ const App: React.FC = () => {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<LandingPage />} />
-        <Route path="/monitoring" element={<Layout><MonitoringPage /></Layout>} />
-        <Route path="/config" element={<Layout><ConfigPage /></Layout>} />
-        <Route path="/playground" element={<Layout><PlaygroundPage /></Layout>} />
+        <Route
+          path="/monitoring"
+          element={
+            <Layout
+              configSection={configSection}
+              onConfigSectionChange={(section) => setConfigSection(section as ConfigSection)}
+            >
+              <MonitoringPage />
+            </Layout>
+          }
+        />
+        <Route
+          path="/config"
+          element={
+            <Layout
+              configSection={configSection}
+              onConfigSectionChange={(section) => setConfigSection(section as ConfigSection)}
+            >
+              <ConfigPage activeSection={configSection} />
+            </Layout>
+          }
+        />
+        <Route
+          path="/playground"
+          element={
+            <Layout
+              configSection={configSection}
+              onConfigSectionChange={(section) => setConfigSection(section as ConfigSection)}
+            >
+              <PlaygroundPage />
+            </Layout>
+          }
+        />
       </Routes>
     </BrowserRouter>
   )
diff --git a/dashboard/frontend/src/components/EditModal.tsx b/dashboard/frontend/src/components/EditModal.tsx
index c9fb89f5..bb3887f3 100644
--- a/dashboard/frontend/src/components/EditModal.tsx
+++ b/dashboard/frontend/src/components/EditModal.tsx
@@ -14,11 +14,14 @@ interface EditModalProps {
 export interface FieldConfig {
   name: string
   label: string
-  type: 'text' | 'number' | 'boolean' | 'select' | 'multiselect' | 'textarea' | 'json'
+  type: 'text' | 'number' | 'boolean' | 'select' | 'multiselect' | 'textarea' | 'json' | 'percentage'
   required?: boolean
   options?: string[]
   placeholder?: string
   description?: string
+  min?: number
+  max?: number
+  step?: number
 }
 
 const EditModal: React.FC<EditModalProps> = ({
@@ -36,10 +39,17 @@ const EditModal: React.FC<EditModalProps> = ({
 
   useEffect(() => {
     if (isOpen) {
-      setFormData(data || {})
+      // Convert percentage fields from 0-1 to 0-100 for display
+      const convertedData = { ...data }
+      fields.forEach(field => {
+        if (field.type === 'percentage' && convertedData[field.name] !== undefined) {
+          convertedData[field.name] = Math.round(convertedData[field.name] * 100)
+        }
+      })
+      setFormData(convertedData || {})
       setError(null)
     }
-  }, [isOpen, data])
+  }, [isOpen, data, fields])
 
   const handleChange = (fieldName: string, value: any) => {
     setFormData((prev: any) => ({
@@ -54,7 +64,14 @@ const EditModal: React.FC<EditModalProps> = ({
     setError(null)
 
     try {
-      await onSave(formData)
+      // Convert percentage fields from 0-100 back to 0-1 before saving
+      const convertedData = { ...formData }
+      fields.forEach(field => {
+        if (field.type === 'percentage' && convertedData[field.name] !== undefined) {
+          convertedData[field.name] = convertedData[field.name] / 100
+        }
+      })
+      await onSave(convertedData)
       onClose()
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to save')
@@ -106,7 +123,9 @@ const EditModal: React.FC<EditModalProps> = ({
                 {field.type === 'number' && (
                   <input
                     type="number"
-                    step="any"
+                    step={field.step !== undefined ? field.step : "any"}
+                    min={field.min}
+                    max={field.max}
                     className={styles.input}
                     value={formData[field.name] || ''}
                     onChange={(e) => handleChange(field.name, parseFloat(e.target.value))}
@@ -115,6 +134,37 @@ const EditModal: React.FC<EditModalProps> = ({
                   />
                 )}
 
+                {field.type === 'percentage' && (
+                  <div style={{ position: 'relative' }}>
+                    <input
+                      type="number"
+                      step={field.step !== undefined ? field.step : 1}
+                      min={0}
+                      max={100}
+                      className={styles.input}
+                      value={formData[field.name] !== undefined ? formData[field.name] : ''}
+                      onChange={(e) => {
+                        const val = e.target.value
+                        handleChange(field.name, val === '' ? '' : parseFloat(val))
+                      }}
+                      placeholder={field.placeholder}
+                      required={field.required}
+                      style={{ paddingRight: '2.5rem' }}
+                    />
+                    <span style={{
+                      position: 'absolute',
+                      right: '0.75rem',
+                      top: '50%',
+                      transform: 'translateY(-50%)',
+                      color: 'var(--color-text-secondary)',
+                      fontSize: '0.875rem',
+                      pointerEvents: 'none'
+                    }}>
+                      %
+                    </span>
+                  </div>
+                )}
+
                 {field.type === 'boolean' && (
                   <label className={styles.checkbox}>
                     <input
diff --git a/dashboard/frontend/src/components/Layout.module.css b/dashboard/frontend/src/components/Layout.module.css
index 6975dd81..c3a47f68 100644
--- a/dashboard/frontend/src/components/Layout.module.css
+++ b/dashboard/frontend/src/components/Layout.module.css
@@ -20,6 +20,14 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0 0.5rem;
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-fast);
+  cursor: pointer;
+}
+
+.brand:hover {
+  background-color: var(--color-bg-tertiary);
 }
 
 .logo {
@@ -78,9 +86,68 @@
   white-space: nowrap;
 }
 
+/* Sub Navigation (Configuration sections) - Match parent nav style */
+.subNav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  padding-left: 1.75rem;
+}
+
+.subNavLink {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+
+.subNavLink:hover {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text);
+}
+
+.subNavLinkActive {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.subNavLinkActive:hover {
+  background-color: var(--color-primary-dark);
+  color: white;
+}
+
+.subNavIcon {
+  font-size: 1rem;
+  line-height: 1;
+  width: 1.25rem;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.subNavText {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .sidebarFooter {
   margin-top: auto;
   padding: 0 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .themeToggle {
@@ -88,12 +155,33 @@
   font-size: 1.25rem;
   border-radius: var(--radius-md);
   transition: background-color var(--transition-fast);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text);
 }
 
 .themeToggle:hover {
   background-color: var(--color-bg-tertiary);
 }
 
+.iconButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-fast);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.iconButton:hover {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text);
+}
+
 .main {
   flex: 1;
   display: flex;
diff --git a/dashboard/frontend/src/components/Layout.tsx b/dashboard/frontend/src/components/Layout.tsx
index 15b97a69..fb3b397f 100644
--- a/dashboard/frontend/src/components/Layout.tsx
+++ b/dashboard/frontend/src/components/Layout.tsx
@@ -1,13 +1,18 @@
 import React, { useState, useEffect, ReactNode } from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useLocation, useNavigate } from 'react-router-dom'
 import styles from './Layout.module.css'
 
 interface LayoutProps {
   children: ReactNode
+  configSection?: string
+  onConfigSectionChange?: (section: string) => void
 }
 
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+const Layout: React.FC<LayoutProps> = ({ children, configSection, onConfigSectionChange }) => {
   const [theme, setTheme] = useState<'light' | 'dark'>('dark')
+  const location = useLocation()
+  const navigate = useNavigate()
+  const isConfigPage = location.pathname === '/config'
 
   useEffect(() => {
     // Check system preference or stored preference
@@ -28,10 +33,10 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className={styles.container}>
       <aside className={styles.sidebar}>
-        <div className={styles.brand}>
+        <NavLink to="/" className={styles.brand}>
           <img src="/vllm.png" alt="vLLM" className={styles.logo} />
           <span className={styles.brandText}>Semantic Router</span>
-        </div>
+        </NavLink>
         <nav className={styles.nav}>
           <NavLink
             to="/playground"
@@ -42,15 +47,34 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
             <span className={styles.navIcon}>🎮</span>
             <span className={styles.navText}>Playground</span>
           </NavLink>
-          <NavLink
-            to="/config"
-            className={({ isActive }) =>
-              isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink
-            }
-          >
-            <span className={styles.navIcon}>⚙️</span>
-            <span className={styles.navText}>Configuration</span>
-          </NavLink>
+
+          {/* Configuration sections - Same level as other nav items */}
+          {onConfigSectionChange && (
+            <>
+              {[
+                { id: 'models', icon: '🤖', title: 'Models' },
+                { id: 'prompt-guard', icon: '🛡️', title: 'Prompt Guard' },
+                { id: 'similarity-cache', icon: '⚡', title: 'Similarity Cache' },
+                { id: 'intelligent-routing', icon: '🧠', title: 'Intelligent Routing' },
+                { id: 'tools-selection', icon: '🔧', title: 'Tools Selection' },
+                { id: 'observability', icon: '👁️', title: 'Observability' },
+                { id: 'classification-api', icon: '🔌', title: 'Classification API' }
+              ].map((section) => (
+                <button
+                  key={section.id}
+                  className={`${styles.navLink} ${isConfigPage && configSection === section.id ? styles.navLinkActive : ''}`}
+                  onClick={() => {
+                    onConfigSectionChange(section.id)
+                    navigate('/config')
+                  }}
+                >
+                  <span className={styles.navIcon}>{section.icon}</span>
+                  <span className={styles.navText}>{section.title}</span>
+                </button>
+              ))}
+            </>
+          )}
+
           <NavLink
             to="/monitoring"
             className={({ isActive }) =>
@@ -70,6 +94,31 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           >
             {theme === 'light' ? '🌙' : '☀️'}
           </button>
+          <a
+            href="https://github.com/vllm-project/vllm"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.iconButton}
+            aria-label="GitHub"
+            title="GitHub Repository"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+            </svg>
+          </a>
+          <a
+            href="https://docs.vllm.ai"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.iconButton}
+            aria-label="Documentation"
+            title="Documentation"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
+              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
+            </svg>
+          </a>
         </div>
       </aside>
       <main className={styles.main}>{children}</main>
diff --git a/dashboard/frontend/src/pages/ConfigPage.module.css b/dashboard/frontend/src/pages/ConfigPage.module.css
index 425d0c5c..aa1703b0 100644
--- a/dashboard/frontend/src/pages/ConfigPage.module.css
+++ b/dashboard/frontend/src/pages/ConfigPage.module.css
@@ -178,25 +178,23 @@
   box-shadow: 0 4px 10px rgba(99, 102, 241, 0.4);
 }
 
+/* Main content area */
 .content {
   flex: 1;
   background-color: var(--color-bg);
   border-radius: var(--radius-lg);
   overflow: auto;
   min-height: 0;
-}
-
-.mainLayout {
   display: flex;
-  gap: 1.5rem;
-  padding: 0.5rem;
-  height: 100%;
+  flex-direction: column;
 }
 
+/* Content area for sections */
 .contentArea {
   flex: 1;
   min-width: 0;
   overflow-y: auto;
+  padding: 1rem;
 }
 
 .sectionPanel {
@@ -449,12 +447,12 @@
   color: #6b7280;
 }
 
-/* Endpoint Card */
+/* Endpoint Card - Unified with Model Card structure */
 .endpointCard {
   background-color: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  padding: 0.875rem;
+  overflow: hidden;
   margin-bottom: 0.875rem;
   transition: all var(--transition-fast);
 }
@@ -472,21 +470,24 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
-  padding-bottom: 0.75rem;
+  padding: 0.75rem 0.875rem;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
   border-bottom: 1px solid var(--color-border);
 }
 
 .endpointName {
-  font-size: 1rem;
+  font-size: 0.8rem;
   font-weight: 600;
   color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .endpointDetails {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  padding: 0.875rem;
 }
 
 .modelTags {
@@ -1017,14 +1018,28 @@
   font-style: italic;
 }
 
-/* Tools Grid */
+/* Tools Grid - Maximum 3 columns */
 .toolsGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   gap: 1.25rem;
   margin-top: 1.5rem;
 }
 
+/* Responsive: 2 columns on medium screens */
+@media (max-width: 1400px) {
+  .toolsGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Responsive: 1 column on small screens */
+@media (max-width: 900px) {
+  .toolsGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .toolCard {
   background-color: var(--color-bg);
   border: 1px solid var(--color-border);
diff --git a/dashboard/frontend/src/pages/ConfigPage.tsx b/dashboard/frontend/src/pages/ConfigPage.tsx
index 3abdd456..4e969525 100644
--- a/dashboard/frontend/src/pages/ConfigPage.tsx
+++ b/dashboard/frontend/src/pages/ConfigPage.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import styles from './ConfigPage.module.css'
-import ConfigNav, { ConfigSection } from '../components/ConfigNav'
+import { ConfigSection } from '../components/ConfigNav'
 import EditModal, { FieldConfig } from '../components/EditModal'
 
 interface VLLMEndpoint {
@@ -163,12 +163,20 @@ interface ConfigData {
   [key: string]: unknown
 }
 
-const ConfigPage: React.FC = () => {
+interface ConfigPageProps {
+  activeSection?: ConfigSection
+}
+
+// Helper function to format threshold as percentage
+const formatThreshold = (value: number): string => {
+  return `${Math.round(value * 100)}%`
+}
+
+const ConfigPage: React.FC<ConfigPageProps> = ({ activeSection = 'models' }) => {
   const [config, setConfig] = useState<ConfigData | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [selectedView, setSelectedView] = useState<'structured' | 'raw'>('structured')
-  const [activeSection, setActiveSection] = useState<ConfigSection>('models')
 
   // Tools database state
   const [toolsData, setToolsData] = useState<Tool[]>([])
@@ -751,10 +759,11 @@ const ConfigPage: React.FC = () => {
                   {
                     name: 'threshold',
                     label: 'Detection Threshold',
-                    type: 'number',
+                    type: 'percentage',
                     required: true,
-                    placeholder: '0.5',
-                    description: 'Confidence threshold for PII detection (0-1)'
+                    placeholder: '50',
+                    description: 'Confidence threshold for PII detection (0-100%)',
+                    step: 1
                   },
                   {
                     name: 'use_cpu',
@@ -805,7 +814,7 @@ const ConfigPage: React.FC = () => {
               </div>
               <div className={styles.configRow}>
                 <span className={styles.configLabel}>Threshold</span>
-                <span className={styles.configValue}>{config.classifier.pii_model.threshold}</span>
+                <span className={styles.configValue}>{formatThreshold(config.classifier.pii_model.threshold)}</span>
               </div>
               <div className={styles.configRow}>
                 <span className={styles.configLabel}>ModernBERT</span>
@@ -858,10 +867,11 @@ const ConfigPage: React.FC = () => {
                   {
                     name: 'threshold',
                     label: 'Detection Threshold',
-                    type: 'number',
+                    type: 'percentage',
                     required: true,
-                    placeholder: '0.5',
-                    description: 'Confidence threshold for jailbreak detection (0-1)'
+                    placeholder: '50',
+                    description: 'Confidence threshold for jailbreak detection (0-100%)',
+                    step: 1
                   },
                   {
                     name: 'use_cpu',
@@ -912,7 +922,7 @@ const ConfigPage: React.FC = () => {
                 </div>
                 <div className={styles.configRow}>
                   <span className={styles.configLabel}>Threshold</span>
-                  <span className={styles.configValue}>{config.prompt_guard.threshold}</span>
+                  <span className={styles.configValue}>{formatThreshold(config.prompt_guard.threshold)}</span>
                 </div>
                 <div className={styles.configRow}>
                   <span className={styles.configLabel}>Use CPU</span>
@@ -970,10 +980,11 @@ const ConfigPage: React.FC = () => {
                   {
                     name: 'threshold',
                     label: 'Similarity Threshold',
-                    type: 'number',
+                    type: 'percentage',
                     required: true,
-                    placeholder: '0.8',
-                    description: 'Minimum similarity score for cache hits (0-1)'
+                    placeholder: '80',
+                    description: 'Minimum similarity score for cache hits (0-100%)',
+                    step: 1
                   },
                   {
                     name: 'use_cpu',
@@ -1010,7 +1021,7 @@ const ConfigPage: React.FC = () => {
               </div>
               <div className={styles.configRow}>
                 <span className={styles.configLabel}>Threshold</span>
-                <span className={styles.configValue}>{config.bert_model.threshold}</span>
+                <span className={styles.configValue}>{formatThreshold(config.bert_model.threshold)}</span>
               </div>
             </div>
           </div>
@@ -1049,10 +1060,11 @@ const ConfigPage: React.FC = () => {
                         {
                           name: 'similarity_threshold',
                           label: 'Similarity Threshold',
-                          type: 'number',
+                          type: 'percentage',
                           required: true,
-                          placeholder: '0.9',
-                          description: 'Minimum similarity score for cache hits (0-1)'
+                          placeholder: '90',
+                          description: 'Minimum similarity score for cache hits (0-100%)',
+                          step: 1
                         },
                         {
                           name: 'max_entries',
@@ -1096,7 +1108,7 @@ const ConfigPage: React.FC = () => {
                 </div>
                 <div className={styles.configRow}>
                   <span className={styles.configLabel}>Similarity Threshold</span>
-                  <span className={styles.configValue}>{config.semantic_cache.similarity_threshold}</span>
+                  <span className={styles.configValue}>{formatThreshold(config.semantic_cache.similarity_threshold)}</span>
                 </div>
                 <div className={styles.configRow}>
                   <span className={styles.configLabel}>Max Entries</span>
@@ -1162,10 +1174,11 @@ const ConfigPage: React.FC = () => {
                           {
                             name: 'threshold',
                             label: 'Classification Threshold',
-                            type: 'number',
+                            type: 'percentage',
                             required: true,
-                            placeholder: '0.7',
-                            description: 'Confidence threshold for category classification (0-1)'
+                            placeholder: '70',
+                            description: 'Confidence threshold for category classification (0-100%)',
+                            step: 1
                           },
                           {
                             name: 'use_cpu',
@@ -1211,7 +1224,7 @@ const ConfigPage: React.FC = () => {
                 </div>
                 <div className={styles.configRow}>
                   <span className={styles.configLabel}>Threshold</span>
-                  <span className={styles.configValue}>{config.classifier.category_model.threshold}</span>
+                  <span className={styles.configValue}>{formatThreshold(config.classifier.category_model.threshold)}</span>
                 </div>
                 <div className={styles.configRow}>
                   <span className={styles.configLabel}>ModernBERT</span>
@@ -1295,10 +1308,11 @@ const ConfigPage: React.FC = () => {
                           {
                             name: 'threshold',
                             label: 'Classification Threshold',
-                            type: 'number',
+                            type: 'percentage',
                             required: true,
-                            placeholder: '0.7',
-                            description: 'Confidence threshold for classification (0-1)'
+                            placeholder: '70',
+                            description: 'Confidence threshold for classification (0-100%)',
+                            step: 1
                           },
                           {
                             name: 'timeout_seconds',
@@ -1350,7 +1364,7 @@ const ConfigPage: React.FC = () => {
                 )}
                 <div className={styles.configRow}>
                   <span className={styles.configLabel}>Threshold</span>
-                  <span className={styles.configValue}>{config.classifier.mcp_category_model.threshold}</span>
+                  <span className={styles.configValue}>{formatThreshold(config.classifier.mcp_category_model.threshold)}</span>
                 </div>
                 {config.classifier.mcp_category_model.timeout_seconds && (
                   <div className={styles.configRow}>
@@ -1734,9 +1748,10 @@ const ConfigPage: React.FC = () => {
                   {
                     name: 'similarity_threshold',
                     label: 'Similarity Threshold',
-                    type: 'number',
-                    placeholder: '0.7',
-                    description: 'Minimum similarity score for tool selection (0-1)'
+                    type: 'percentage',
+                    placeholder: '70',
+                    description: 'Minimum similarity score for tool selection (0-100%)',
+                    step: 1
                   },
                   {
                     name: 'fallback_to_empty',
@@ -1781,7 +1796,7 @@ const ConfigPage: React.FC = () => {
                 </div>
                 <div className={styles.configRow}>
                   <span className={styles.configLabel}>Similarity Threshold</span>
-                  <span className={styles.configValue}>{config.tools.similarity_threshold}</span>
+                  <span className={styles.configValue}>{formatThreshold(config.tools.similarity_threshold)}</span>
                 </div>
                 <div className={styles.configRow}>
                   <span className={styles.configLabel}>Fallback to Empty</span>
@@ -2258,14 +2273,8 @@ const ConfigPage: React.FC = () => {
         {config && !loading && !error && (
           <>
             {selectedView === 'structured' ? (
-              <div className={styles.mainLayout}>
-                <ConfigNav
-                  activeSection={activeSection}
-                  onSectionChange={setActiveSection}
-                />
-                <div className={styles.contentArea}>
-                  {renderActiveSection()}
-                </div>
+              <div className={styles.contentArea}>
+                {renderActiveSection()}
               </div>
             ) : (
               <pre className={styles.codeBlock}>
diff --git a/dashboard/frontend/src/pages/MonitoringPage.tsx b/dashboard/frontend/src/pages/MonitoringPage.tsx
index e29ee65b..5f347b6d 100644
--- a/dashboard/frontend/src/pages/MonitoringPage.tsx
+++ b/dashboard/frontend/src/pages/MonitoringPage.tsx
@@ -86,32 +86,6 @@ const MonitoringPage: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.controls}>
-        <div className={styles.controlGroup}>
-          <label htmlFor="grafana-path" className={styles.label}>
-            Grafana Dashboard Path:
-          </label>
-          <input
-            id="grafana-path"
-            type="text"
-            value={grafanaPath}
-            onChange={handlePathChange}
-            onKeyPress={handleKeyPress}
-            className={styles.input}
-            placeholder="/d/semantic-router-dashboard/semantic-router"
-          />
-          <button onClick={handleApply} className={styles.button}>
-            Apply
-          </button>
-        </div>
-        <div className={styles.hints}>
-          <span className={styles.hint}>💡 Tip: Press Enter to apply changes</span>
-          <span className={styles.hint}>
-            🎨 Theme: <strong>{theme}</strong> (synced with dashboard)
-          </span>
-        </div>
-      </div>
-
       {error && (
         <div className={styles.errorBanner}>
           <span className={styles.errorIcon}>⚠️</span>
@@ -138,6 +112,32 @@ const MonitoringPage: React.FC = () => {
           onError={handleIframeError}
         />
       </div>
+
+      <div className={styles.controls}>
+        <div className={styles.controlGroup}>
+          <label htmlFor="grafana-path" className={styles.label}>
+            Grafana Dashboard Path:
+          </label>
+          <input
+            id="grafana-path"
+            type="text"
+            value={grafanaPath}
+            onChange={handlePathChange}
+            onKeyPress={handleKeyPress}
+            className={styles.input}
+            placeholder="/d/semantic-router-dashboard/semantic-router"
+          />
+          <button onClick={handleApply} className={styles.button}>
+            Apply
+          </button>
+        </div>
+        <div className={styles.hints}>
+          <span className={styles.hint}>💡 Tip: Press Enter to apply changes</span>
+          <span className={styles.hint}>
+            🎨 Theme: <strong>{theme}</strong> (synced with dashboard)
+          </span>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/dashboard/frontend/src/pages/PlaygroundPage.tsx b/dashboard/frontend/src/pages/PlaygroundPage.tsx
index bed1734c..b14a6eb0 100644
--- a/dashboard/frontend/src/pages/PlaygroundPage.tsx
+++ b/dashboard/frontend/src/pages/PlaygroundPage.tsx
@@ -1,26 +1,22 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styles from './PlaygroundPage.module.css'
 
 const PlaygroundPage: React.FC = () => {
   const [openWebUIUrl, setOpenWebUIUrl] = useState('http://localhost:3001')
   const [currentUrl, setCurrentUrl] = useState('')
-  const [isEmbedMode, setIsEmbedMode] = useState(false)
+
+  // Auto-load on mount
+  useEffect(() => {
+    // Default to loading the configured URL on mount
+    setCurrentUrl(openWebUIUrl)
+  }, []) // Empty dependency array means this runs once on mount
 
   const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setOpenWebUIUrl(e.target.value)
   }
 
   const handleApply = () => {
-    if (isEmbedMode) {
-      setCurrentUrl(`/embedded/openwebui/`)
-    } else {
-      setCurrentUrl(openWebUIUrl)
-    }
-  }
-
-  const handleToggleMode = () => {
-    setIsEmbedMode(!isEmbedMode)
-    setCurrentUrl('')
+    setCurrentUrl(openWebUIUrl)
   }
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -31,61 +27,13 @@ const PlaygroundPage: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.controls}>
-        <div className={styles.controlGroup}>
-          <label className={styles.label}>
-            <input
-              type="checkbox"
-              checked={isEmbedMode}
-              onChange={handleToggleMode}
-              className={styles.checkbox}
-            />
-            Use Embedded Mode (via proxy)
-          </label>
-        </div>
-
-        {!isEmbedMode && (
-          <div className={styles.controlGroup}>
-            <label htmlFor="openwebui-url" className={styles.label}>
-              Open WebUI URL:
-            </label>
-            <input
-              id="openwebui-url"
-              type="text"
-              value={openWebUIUrl}
-              onChange={handleUrlChange}
-              onKeyPress={handleKeyPress}
-              className={styles.input}
-              placeholder="http://localhost:3001"
-            />
-            <button onClick={handleApply} className={styles.button}>
-              Load
-            </button>
-          </div>
-        )}
-
-        {isEmbedMode && (
-          <div className={styles.controlGroup}>
-            <button onClick={handleApply} className={styles.button}>
-              Load Embedded Open WebUI
-            </button>
-          </div>
-        )}
-
-        <div className={styles.hints}>
-            <span className={styles.hint}>
-            🎮 Open WebUI Playground: Test your LLM models and semantic routing. 💡 Embedded mode requires Open WebUI to be configured with proper CORS headers.
-            </span>
-        </div>
-      </div>
-
       <div className={styles.iframeContainer}>
         {!currentUrl && (
           <div className={styles.placeholder}>
             <span className={styles.placeholderIcon}>🎮</span>
             <h3>Open WebUI Playground</h3>
             <p>
-              Configure the URL above and click &quot;Load&quot; to embed Open WebUI interface.
+              Configure the URL below and click &quot;Load&quot; to embed Open WebUI interface.
             </p>
             <p className={styles.note}>
               Note: Open WebUI needs to be deployed separately. Check the dashboard README for instructions.
@@ -102,6 +50,32 @@ const PlaygroundPage: React.FC = () => {
           />
         )}
       </div>
+
+      <div className={styles.controls}>
+        <div className={styles.controlGroup}>
+          <label htmlFor="openwebui-url" className={styles.label}>
+            Open WebUI URL:
+          </label>
+          <input
+            id="openwebui-url"
+            type="text"
+            value={openWebUIUrl}
+            onChange={handleUrlChange}
+            onKeyPress={handleKeyPress}
+            className={styles.input}
+            placeholder="http://localhost:3001"
+          />
+          <button onClick={handleApply} className={styles.button}>
+            Load
+          </button>
+        </div>
+
+        <div className={styles.hints}>
+            <span className={styles.hint}>
+            🎮 Open WebUI Playground: Test your LLM models and semantic routing.
+            </span>
+        </div>
+      </div>
     </div>
   )
 }