fix: some design

README.md

@@ -142,3 +142,6 @@ git tag -d v1.0.0; git push origin :refs/tags/v1.0.0; git tag -a v1.0.0 -m "Rele
 ## To implement
 
 - Token refresh
+- No error when streaming with too large model
+- Translations
+- qtop models during geenration

src/components/Inputs.tsx

@@ -26,7 +26,7 @@ export function Slider({
           step={step}
           value={value}
           onChange={(e) => setValue(Number(e.target.value))}
-          className="flex-1 accent-violet-400"
+          className="flex-1 accent-[var(--accent2)]"
         />
         <span className="text-sm w-10 text-right">{value}</span>
       </div>
@@ -50,7 +50,7 @@ export function NumberInput({ label, value, setValue }: NumberInputProps) {
         onChange={(e) =>
           setValue(e.target.value ? Number(e.target.value) : undefined)
         }
-        className="w-full mt-2 p-2 rounded bg-black/20 border border-muted"
+        className="w-full mt-2 p-2 rounded bg-secondary border border-muted"
       />
     </div>
   );
@@ -77,7 +77,7 @@ export function TextInput({
         value={value ?? ''}
         onChange={(e) => setValue(e.target.value || undefined)}
         placeholder={placeholder}
-        className="w-full mt-2 p-2 rounded bg-black/20 border border-muted"
+        className="w-full mt-2 p-2 rounded bg-secondary border border-muted"
       />
     </div>
   );
@@ -95,8 +95,8 @@ export function Toggle({ label, value, setValue }: ToggleProps) {
       <span className="text-sm">{label}</span>
       <button
         onClick={() => setValue(!value)}
-        className={`w-10 h-5 rounded-full ${
-          value ? 'bg-violet-500' : 'bg-white/20'
+        className={`w-10 h-5 rounded-full border border-muted ${
+          value ? 'bg-[var(--accent2)]' : 'bg-secondary'
         } relative`}
       >
         <span

src/components/Sidebar.tsx

@@ -141,8 +141,8 @@ function IconRail({
           key={panel.id}
           onClick={() => toggle(panel.id, effectiveId)}
           title={panel.label}
-          className={`w-8 h-8 rounded-lg flex items-center justify-center transition-theme ${
-            effectiveId === panel.id ? 'bg-accent2' : ''
+          className={`w-8 h-8 rounded-lg flex items-center justify-center text-secondary ${
+            effectiveId === panel.id ? 'border-2 border-[var(--accent2)]' : ''
           }`}
         >
           {panel.icon}

src/components/chat/ChatUI.tsx

@@ -185,7 +185,7 @@ export default function ChatUI({
           {messages.length === 0 ? (
             /* ── Empty state: input centered within the chat column only ── */
             <div className="flex-1 flex flex-col items-center justify-center">
-              <p className="text-primary text-sm mb-3 opacity-60">
+              <p className="text-primary text-sm mb-3">
                 Start a conversation…
               </p>
               <input
@@ -195,7 +195,7 @@ export default function ChatUI({
                   e.key === 'Enter' && !loading && sendMessage()
                 }
                 disabled={loading}
-                className="w-full max-w-2xl p-3 rounded-xl bg-black/20 border border-muted outline-none disabled:opacity-50"
+                className="w-full max-w-2xl p-3 rounded-xl bg-secondary border border-muted outline-none disabled:opacity-50"
                 placeholder="Message..."
               />
             </div>
@@ -228,7 +228,7 @@ export default function ChatUI({
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && !loading && sendMessage()}
               disabled={loading}
-              className="w-full max-w-2xl mx-auto block p-3 rounded-xl bg-black/20 border border-muted outline-none disabled:opacity-50"
+              className="w-full max-w-2xl mx-auto block p-3 rounded-xl bg-secondary border border-muted outline-none disabled:opacity-50"
               placeholder="Message..."
             />
           </div>

src/proxy.ts

@@ -6,7 +6,6 @@ import { getToken } from 'next-auth/jwt';
 
 const protectedRoutes: Record<string, string[]> = {
   '/example': ['ad'],
-  '/dashboard': [],
 };
 
 const intlMiddleware = createIntlMiddleware(routing);