diff --git a/frontend/package.json b/frontend/package.json
index 8b65e4aa..2fd21795 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,7 +33,7 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@radix-ui/react-visually-hidden": "^1.1.1",
diff --git a/frontend/src/app/(main)/page.tsx b/frontend/src/app/(main)/page.tsx
index 0be78895..befe02a2 100644
--- a/frontend/src/app/(main)/page.tsx
+++ b/frontend/src/app/(main)/page.tsx
@@ -12,6 +12,7 @@ import { SignInModal } from '@/components/sign-in-modal';
 import { SignUpModal } from '@/components/sign-up-modal';
 import { useRouter } from 'next/navigation';
 import { logger } from '../log/logger';
+import { AuroraText } from '@/components/magicui/aurora-text';
 export default function HomePage() {
   // States for AuthChoiceModal
   const [showAuthChoice, setShowAuthChoice] = useState(false);
@@ -31,6 +32,8 @@ export default function HomePage() {
 
     try {
       const chatId = await createProjectFromPrompt(message, isPublic, model);
+
+      console.log('Project created with ID:', chatId);
       promptFormRef.current.clearMessage();
       router.push(`/chat?id=${chatId}`);
     } catch (error) {
@@ -39,85 +42,144 @@ export default function HomePage() {
   };
 
   return (
-    <div className="pt-32 pb-24 px-6">
-      <motion.div
-        className="flex flex-col items-center"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-      >
-        <div className="mb-6">
-          <Image
-            src="/codefox.svg"
-            alt="CodeFox Logo"
-            width={120}
-            height={120}
-            className="h-32 w-auto"
-          />
-        </div>
-
-        <div className="mb-16">
-          <div className="flex flex-col items-center">
-            <p className="text-5xl font-medium text-primary-600 dark:text-primary-400 mb-3">
-              Sentence to a project in seconds.
-            </p>
-            <p className="text-xl text-gray-600 dark:text-gray-400">
-              Codefox built AI agents crew for you to create your next project
-            </p>
+    <div className="min-h-screen pt-16 pb-24 px-6 flex flex-col items-center justify-center relative overflow-hidden">
+      <div className="fixed inset-0 -z-20">
+        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-primary-500/5 rounded-full blur-[120px] transform translate-x-1/2 -translate-y-1/2"></div>
+        <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-primary-500/5 rounded-full blur-[100px] transform -translate-x-1/2 translate-y-1/2"></div>
+      </div>
+
+      <div className="w-full mx-auto flex flex-col items-center mt-40 ">
+        <motion.div
+          className="flex flex-col items-center w-full"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="mb-6">
+            <Image
+              src="/codefox.svg"
+              alt="CodeFox Logo"
+              width={120}
+              height={120}
+              className="h-32 w-auto"
+            />
           </div>
-        </div>
-
-        <div className="w-full mb-12">
-          <PromptForm
-            ref={promptFormRef}
-            isAuthorized={isAuthorized}
-            onSubmit={handleSubmit}
-            onAuthRequired={() => setShowAuthChoice(true)}
-            isLoading={isLoading}
-          />
-        </div>
-
-        <div className="w-full mb-24 mt-24">
-          <ProjectsSection />
-        </div>
-      </motion.div>
-
-      {/* Choice Modal */}
-      <AuthChoiceModal
-        isOpen={showAuthChoice}
-        onClose={() => setShowAuthChoice(false)}
-        onSignUpClick={() => {
-          setShowAuthChoice(false);
-          setTimeout(() => {
-            setShowSignUp(true);
-          }, 100);
-        }}
-        onSignInClick={() => {
-          setShowAuthChoice(false);
-          setTimeout(() => {
-            setShowSignIn(true);
-          }, 100);
-        }}
-      />
-
-      {/* SignInModal & SignUpModal */}
-      <SignInModal isOpen={showSignIn} onClose={() => setShowSignIn(false)} />
-      <SignUpModal isOpen={showSignUp} onClose={() => setShowSignUp(false)} />
-
-      <style jsx global>{`
-        .animate-pulse-subtle {
-          animation: pulse-subtle 2s infinite;
-        }
-        @keyframes pulse-subtle {
-          0%,
-          100% {
-            opacity: 1;
-          }
-          50% {
-            opacity: 0.85;
-          }
-        }
-      `}</style>
+          <motion.div
+            className="mb-16 relative"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8 }}
+          >
+            <div className="flex flex-col items-center">
+              <motion.h1
+                className="text-5xl sm:text-6xl font-bold mb-8 tracking-tight leading-tight text-center"
+                initial={{ y: -20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{
+                  duration: 0.8,
+                  ease: [0.22, 1, 0.36, 1],
+                }}
+              >
+                From Idea to <AuroraText>Full-Stack</AuroraText> in Seconds
+              </motion.h1>
+
+              <motion.p
+                className="text-xl sm:text-2xl text-gray-600 dark:text-gray-400 max-w-2xl text-center"
+                initial={{ y: 20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{
+                  duration: 0.7,
+                  delay: 0.5,
+                  ease: 'easeOut',
+                }}
+              >
+                CodeFox provides an AI-driven multi-agent crew to help you
+                create your next project instantly
+              </motion.p>
+            </div>
+
+            <motion.div
+              className="absolute -z-10 left-1/4 -translate-x-1/2 top-0 w-32 h-32 rounded-full bg-primary-500/10 blur-2xl"
+              animate={{
+                scale: [1, 1.2, 1],
+                opacity: [0.5, 0.7, 0.5],
+              }}
+              transition={{
+                duration: 6,
+                repeat: Infinity,
+                repeatType: 'reverse',
+              }}
+            />
+
+            <motion.div
+              className="absolute -z-10 right-1/4 translate-x-1/2 top-0 w-32 h-32 rounded-full bg-primary-500/10 blur-2xl"
+              animate={{
+                scale: [1, 1.2, 1],
+                opacity: [0.5, 0.7, 0.5],
+              }}
+              transition={{
+                duration: 6,
+                delay: 1.5,
+                repeat: Infinity,
+                repeatType: 'reverse',
+              }}
+            />
+          </motion.div>
+
+          <motion.div
+            className="relative w-full max-w-3xl"
+            initial={{ y: 40, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{
+              duration: 0.8,
+              delay: 0.7,
+              ease: 'easeOut',
+            }}
+          >
+            <div className="absolute -z-10 inset-0 bg-gradient-to-r from-primary-500/5 to-primary-600/5 rounded-2xl blur-xl transform scale-105"></div>
+
+            <div className=" bg-white/10 dark:bg-gray-800/30 backdrop-blur-md rounded-lg border border-primary/20 dark:border-gray-700/40 shadow-[0_8px_30px_rgb(0,0,0,0.12)] transition-all duration-300 hover:shadow-[0_8px_30px_rgba(120,120,255,0.5)] hover:border-primary-500/60">
+              <PromptForm
+                ref={promptFormRef}
+                isAuthorized={isAuthorized}
+                onSubmit={handleSubmit}
+                onAuthRequired={() => setShowAuthChoice(true)}
+                isLoading={isLoading}
+              />
+            </div>
+          </motion.div>
+
+          <motion.div
+            className="w-full mb-24 mt-40"
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true, margin: '-100px' }}
+            transition={{ duration: 0.8 }}
+          >
+            <ProjectsSection />
+          </motion.div>
+        </motion.div>
+
+        <AuthChoiceModal
+          isOpen={showAuthChoice}
+          onClose={() => setShowAuthChoice(false)}
+          onSignUpClick={() => {
+            setShowAuthChoice(false);
+            setTimeout(() => {
+              setShowSignUp(true);
+            }, 100);
+          }}
+          onSignInClick={() => {
+            setShowAuthChoice(false);
+            setTimeout(() => {
+              setShowSignIn(true);
+            }, 100);
+          }}
+        />
+
+        <SignInModal isOpen={showSignIn} onClose={() => setShowSignIn(false)} />
+        <SignUpModal isOpen={showSignUp} onClose={() => setShowSignUp(false)} />
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index ba273e10..0b10650f 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -168,8 +168,8 @@
 .button-no-border {
   @apply !border-none !outline-none !shadow-none;
 }
-.button-no-border:hover, 
-.button-no-border:focus, 
+.button-no-border:hover,
+.button-no-border:focus,
 .button-no-border:active {
   @apply !border-none !outline-none !shadow-none !ring-0;
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 5c78ab6d..ee27ef53 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,12 +1,16 @@
-//frontend/src/app/layout.tsx
+// frontend/src/app/layout.tsx
 import type { Metadata, Viewport } from 'next';
-import { Inter } from 'next/font/google';
+import { Inter, Playfair_Display } from 'next/font/google';
 import './globals.css';
 import { BaseProviders } from '@/providers/BaseProvider';
 import NavLayout from '@/components/root/nav-layout';
 import RootLayout from '@/components/root/root-layout';
 
-const inter = Inter({ subsets: ['latin'] });
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
+const playfair = Playfair_Display({
+  subsets: ['latin'],
+  variable: '--font-playfair',
+});
 
 export const metadata: Metadata = {
   title: 'Codefox - The best dev project generator',
@@ -23,7 +27,7 @@ export const viewport: Viewport = {
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={`${inter.variable} ${playfair.variable}  font-sans`}>
         <BaseProviders>
           <div className="min-h-screen w-full bg-gray-50 dark:bg-gray-900 transition-colors">
             <RootLayout>{children}</RootLayout>
diff --git a/frontend/src/components/chat/chat-bottombar.tsx b/frontend/src/components/chat/chat-bottombar.tsx
index 501782d2..7435e9cd 100644
--- a/frontend/src/components/chat/chat-bottombar.tsx
+++ b/frontend/src/components/chat/chat-bottombar.tsx
@@ -1,51 +1,40 @@
 'use client';
-
-import React, { useEffect } from 'react';
-import { ChatProps } from './chat-panel';
-import Link from 'next/link';
-import { cn } from '@/lib/utils';
-import { Button, buttonVariants } from '../ui/button';
-import TextareaAutosize from 'react-textarea-autosize';
+import React, { useEffect, useRef, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import {
-  Cross2Icon,
-  ImageIcon,
-  PaperPlaneIcon,
-  StopIcon,
-} from '@radix-ui/react-icons';
-import { Mic, SendHorizonal } from 'lucide-react';
-import useSpeechToText from '@/hooks/useSpeechRecognition';
-import MultiImagePicker from '../image-embedder';
-import useChatStore from '@/hooks/useChatStore';
+import TextareaAutosize from 'react-textarea-autosize';
+import { PaperclipIcon, Send, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { ChatProps } from './chat-panel';
 import Image from 'next/image';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
 export default function ChatBottombar({
   messages,
   input,
   handleInputChange,
   handleSubmit,
-  stop,
   formRef,
   setInput,
 }: ChatProps) {
-  const [message, setMessage] = React.useState(input);
-  const [isMobile, setIsMobile] = React.useState(false);
-  const inputRef = React.useRef<HTMLTextAreaElement>(null);
-  const base64Images = useChatStore((state) => state.base64Images);
-  const setBase64Images = useChatStore((state) => state.setBase64Images);
-  const env = process.env.NODE_ENV;
+  const [isMobile, setIsMobile] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [attachments, setAttachments] = useState<File[]>([]);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const checkScreenWidth = () => {
       setIsMobile(window.innerWidth <= 768);
     };
-
     // Initial check
     checkScreenWidth();
-
     // Event listener for screen width changes
     window.addEventListener('resize', checkScreenWidth);
-
     // Cleanup the event listener on component unmount
     return () => {
       window.removeEventListener('resize', checkScreenWidth);
@@ -55,26 +44,30 @@ export default function ChatBottombar({
   const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
-      handleSubmit(e as unknown as React.FormEvent<HTMLFormElement>);
+      submitWithAttachments(e as unknown as React.FormEvent<HTMLFormElement>);
     }
   };
 
-  const { isListening, transcript, startListening, stopListening } =
-    useSpeechToText({ continuous: true });
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const fileArray = Array.from(e.target.files);
+      setAttachments((prev) => [...prev, ...fileArray]);
+    }
+  };
 
-  const listen = () => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    isListening ? stopVoiceInput() : startListening();
+  const handleFileSelect = () => {
+    fileInputRef.current?.click();
   };
 
-  const stopVoiceInput = () => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    setInput && setInput(transcript.length ? transcript : '');
-    stopListening();
+  const removeAttachment = (index: number) => {
+    setAttachments((prev) => prev.filter((_, i) => i !== index));
   };
 
-  const handleListenClick = () => {
-    listen();
+  const submitWithAttachments = (e: React.FormEvent<HTMLFormElement>) => {
+    // Here you would normally handle attachments with your form submission
+    // For this example, we'll just clear them after submission
+    handleSubmit(e);
+    setAttachments([]);
   };
 
   useEffect(() => {
@@ -84,109 +77,169 @@ export default function ChatBottombar({
   }, []);
 
   return (
-    <div className="p-4 pb-7 flex justify-between w-full items-center gap-2">
-      <AnimatePresence initial={false}>
-        <div className="w-full items-center flex relative gap-2">
-          <div className="flex flex-col relative w-full bg-accent dark:bg-card rounded-lg">
-            <div className="flex w-full">
-              <form
-                onSubmit={handleSubmit}
-                className="w-full items-center flex relative gap-2"
-              >
-                <div className="absolute flex left-3 z-10">
-                  <MultiImagePicker
-                    disabled={env === 'production'}
-                    onImagesPick={setBase64Images}
-                  />
-                </div>
-                <TextareaAutosize
-                  autoComplete="off"
-                  value={
-                    isListening ? (transcript.length ? transcript : '') : input
-                  }
-                  ref={inputRef}
-                  onKeyDown={handleKeyPress}
-                  onChange={handleInputChange}
-                  name="message"
-                  placeholder={
-                    !isListening ? 'Enter your prompt here' : 'Listening'
-                  }
-                  className=" max-h-24 px-14 bg-accent py-[22px] rounded-lg  text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 w-full flex items-center h-16 resize-none overflow-hidden dark:bg-card"
-                />
-
-                <div className="flex absolute right-3 items-center">
-                  {isListening ? (
-                    <div className="flex">
-                      <Button
-                        className="shrink-0 relative rounded-full bg-blue-500/30 hover:bg-blue-400/30 "
-                        variant="ghost"
-                        size="icon"
-                        type="button"
-                        onClick={handleListenClick}
-                      >
-                        <Mic className="w-5 h-5 " />
-                        <span className="animate-pulse absolute h-[120%] w-[120%] rounded-full bg-blue-500/30" />
-                      </Button>
-                    </div>
-                  ) : (
-                    <Button
-                      className="shrink-0 rounded-full"
-                      variant="ghost"
-                      size="icon"
-                      type="button"
-                      onClick={handleListenClick}
-                    >
-                      <Mic className="w-5 h-5 " />
-                    </Button>
-                  )}
-                  <Button
-                    className="shrink-0 rounded-full"
-                    variant="ghost"
-                    size="icon"
-                    type="submit"
-                    disabled={!input.trim() || isListening}
-                  >
-                    <SendHorizonal className="w-5 h-5 " />
-                  </Button>
-                </div>
-              </form>
-            </div>
-            {base64Images && (
-              <div className="flex px-2 pb-2 gap-2 ">
-                {base64Images.map((image, index) => {
-                  return (
-                    <div
-                      key={index}
-                      className="relative bg-muted-foreground/20 flex w-fit flex-col gap-2 p-1 border-t border-x rounded-md"
-                    >
-                      <div className="flex text-sm">
+    <div className="px-4 pb-4 pt-2 bg-white dark:bg-[#151718]">
+      <motion.div
+        initial={{ y: 10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.2 }}
+        className={cn(
+          'relative border shadow-sm rounded-lg overflow-hidden',
+          isFocused
+            ? 'ring-1 ring-blue-500 border-blue-500'
+            : 'border-gray-200 hover:border-gray-300 dark:border-zinc-700 dark:hover:border-zinc-600',
+          'bg-white dark:bg-[#1e1e1e]'
+        )}
+      >
+        {/* Attachments preview */}
+        <AnimatePresence>
+          {attachments.length > 0 && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              className="flex flex-wrap gap-2 p-2 border-b border-gray-100 dark:border-zinc-800"
+            >
+              {attachments.map((file, index) => (
+                <motion.div
+                  key={`${file.name}-${index}`}
+                  initial={{ scale: 0.8, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0.8, opacity: 0 }}
+                  className="relative group"
+                >
+                  <div className="w-16 h-16 rounded border overflow-hidden bg-gray-50 dark:bg-zinc-800">
+                    {file.type.startsWith('image/') ? (
+                      <div className="relative w-full h-full">
                         <Image
-                          src={image}
-                          width={20}
-                          height={20}
-                          className="h-auto rounded-md w-auto max-w-[100px] max-h-[100px]"
-                          alt={''}
+                          src={URL.createObjectURL(file)}
+                          alt={file.name}
+                          fill
+                          className="object-cover"
                         />
                       </div>
-                      <Button
-                        onClick={() => {
-                          const updatedImages = (prevImages: string[]) =>
-                            prevImages.filter((_, i) => i !== index);
-                          setBase64Images(updatedImages(base64Images));
-                        }}
-                        size="icon"
-                        className="absolute -top-1.5 -right-1.5 text-white cursor-pointer  bg-red-500 hover:bg-red-600 w-4 h-4 rounded-full flex items-center justify-center"
-                      >
-                        <Cross2Icon className="w-3 h-3" />
-                      </Button>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center text-xs text-gray-500 dark:text-zinc-400 p-1 overflow-hidden">
+                        {file.name}
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => removeAttachment(index)}
+                    className="absolute -top-1 -right-1 size-5 rounded-full flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    <X className="size-3" />
+                  </button>
+                </motion.div>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <form
+          ref={formRef}
+          onSubmit={submitWithAttachments}
+          className="flex items-center w-full"
+        >
+          {/* Hidden file input */}
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            className="hidden"
+            multiple
+          />
+
+          {/* Left icons with tooltips */}
+          <div className="flex items-center ml-2">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="p-1.5 text-gray-400 dark:text-zinc-400 rounded-md cursor-not-allowed opacity-50"
+                    aria-label="Attach file (not available)"
+                    disabled
+                  >
+                    <PaperclipIcon className="h-4 w-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  <p>Feature not available yet</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="p-1.5 text-gray-400 dark:text-zinc-400 rounded-md cursor-not-allowed opacity-50"
+                    aria-label="Record (not available)"
+                    disabled
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-4 w-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <circle cx="12" cy="12" r="10"></circle>
+                      <circle cx="12" cy="12" r="4"></circle>
+                    </svg>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  <p>Feature not available yet</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+
+          {/* Text input */}
+          <div className="relative flex-1 flex items-center">
+            <TextareaAutosize
+              autoComplete="off"
+              value={input}
+              ref={inputRef}
+              onKeyDown={handleKeyPress}
+              onChange={handleInputChange}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              name="message"
+              placeholder="Message Agent..."
+              className="resize-none px-2 py-2.5 w-full focus:outline-none bg-transparent text-gray-800 dark:text-zinc-200 text-sm placeholder:text-gray-400 dark:placeholder:text-zinc-400"
+              maxRows={5}
+            />
+          </div>
+
+          {/* Right side - feedback & send */}
+          <div className="flex items-center mr-2 gap-2">
+            <div className="text-sm text-gray-400 dark:text-zinc-400">
+              <span>Have feedback?</span>
+            </div>
+
+            <button
+              type="submit"
+              className={cn(
+                'h-7 w-7 rounded-md flex items-center justify-center',
+                input.trim() || attachments.length > 0
+                  ? 'bg-gray-100 hover:bg-gray-200 text-gray-700 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-zinc-200'
+                  : 'bg-gray-50 text-gray-300 cursor-not-allowed dark:bg-zinc-800 dark:text-zinc-500'
+              )}
+              disabled={!input.trim() && attachments.length === 0}
+              aria-label="Send message"
+            >
+              <Send className="h-3.5 w-3.5" />
+            </button>
           </div>
-        </div>
-      </AnimatePresence>
+        </form>
+      </motion.div>
     </div>
   );
 }
diff --git a/frontend/src/components/chat/chat-list.tsx b/frontend/src/components/chat/chat-list.tsx
index a3dfe1d9..e620538a 100644
--- a/frontend/src/components/chat/chat-list.tsx
+++ b/frontend/src/components/chat/chat-list.tsx
@@ -1,15 +1,15 @@
 'use client';
 
 import React, { useRef, useEffect } from 'react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { cn } from '@/lib/utils';
-import { Avatar, AvatarFallback, AvatarImage, SmallAvatar } from '../ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import CodeDisplayBlock from '../code-display-block';
 import { Message } from '../../const/MessageType';
 import { Button } from '../ui/button';
-import { Pencil } from 'lucide-react';
+import { Check, Pencil, X, Code, Terminal } from 'lucide-react';
 import { useAuthContext } from '@/providers/AuthProvider';
 
 interface ChatListProps {
@@ -19,6 +19,8 @@ interface ChatListProps {
 }
 
 const isUserMessage = (role: string) => role.toLowerCase() === 'user';
+const isToolCall = (content: string) =>
+  content.includes('```') || content.includes('executing');
 
 export default function ChatList({
   messages,
@@ -41,7 +43,7 @@ export default function ChatList({
   }, [messages]);
 
   if (!user) {
-    return <></>;
+    return null;
   }
 
   const handleEditStart = (message: Message) => {
@@ -50,13 +52,18 @@ export default function ChatList({
   };
 
   const handleEditSubmit = (messageId: string) => {
-    if (onMessageEdit) {
+    if (onMessageEdit && editContent.trim()) {
       onMessageEdit(messageId, editContent);
     }
     setEditingMessageId(null);
     setEditContent('');
   };
 
+  const handleEditCancel = () => {
+    setEditingMessageId(null);
+    setEditContent('');
+  };
+
   const renderMessageContent = (content: string) => {
     return content.split('```').map((part, index) => {
       if (index % 2 === 0) {
@@ -67,9 +74,9 @@ export default function ChatList({
         );
       }
       return (
-        <pre className="whitespace-pre-wrap" key={index}>
+        <div className="my-2 w-full" key={index}>
           <CodeDisplayBlock code={part} lang="" />
-        </pre>
+        </div>
       );
     });
   };
@@ -77,136 +84,201 @@ export default function ChatList({
   if (messages.length === 0) {
     return (
       <div className="w-full h-full flex justify-center items-center">
-        <div className="flex flex-col  items-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="flex flex-col items-center text-center p-6 max-w-md"
+        >
           <img
             src="/codefox.svg"
             alt="AI"
-            className="h-24 w-24 aspect-square object-contain dark:invert"
+            className="h-24 w-24 mb-4 aspect-square object-contain dark:invert"
           />
-          <p className="text-center text-lg text-muted-foreground">
-            How can I help you today?
+          <h3 className="text-xl font-semibold mb-2">Welcome to CodeFox</h3>
+          <p className="text-muted-foreground">
+            Ask me anything about coding, project development, or technical
+            problems. I&apos;m here to help!
           </p>
-        </div>
+        </motion.div>
       </div>
     );
   }
 
   return (
-    <div className="w-full overflow-y-scroll overflow-x-hidden h-full justify-end">
-      <div className="w-full flex flex-col overflow-x-hidden overflow-y-hidden min-h-full justify-end">
-        {messages.map((message, index) => {
-          const isUser = isUserMessage(message.role);
-          const isEditing = message.id === editingMessageId;
-
-          return (
-            <motion.div
-              key={`${message.id}-${index}`}
-              layout
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 20 }}
-              transition={{
-                opacity: { duration: 0.1 },
-                layout: {
-                  type: 'spring',
-                  bounce: 0.3,
-                  duration: index * 0.05 + 0.2,
-                },
-              }}
-              className={cn(
-                'flex flex-col gap-2 p-4 whitespace-pre-wrap group',
-                isUser ? 'items-end' : 'items-start'
-              )}
-            >
-              <div className="flex gap-3 items-center">
-                {isUser ? (
-                  <div className="flex items-end gap-3">
-                    <div className="relative flex flex-col gap-2 bg-accent p-3 rounded-md max-w-xs sm:max-w-2xl overflow-x-auto">
-                      {isEditing ? (
-                        <div className="flex flex-col gap-2">
-                          <textarea
-                            value={editContent}
-                            onChange={(e) => setEditContent(e.target.value)}
-                            className="min-h-[100px] w-full p-2 rounded border bg-background resize-none"
-                            autoFocus
-                          />
-                          <div className="flex justify-end gap-2">
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              onClick={() => setEditingMessageId(null)}
-                            >
-                              Cancel
-                            </Button>
-                            <Button
-                              size="sm"
-                              onClick={() => handleEditSubmit(message.id)}
-                            >
-                              Save
-                            </Button>
-                          </div>
-                        </div>
-                      ) : (
-                        <>
-                          <p className="text-end">{message.content}</p>
-                          <Button
-                            size="icon"
-                            variant="ghost"
-                            className="absolute -left-12 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
-                            onClick={() => handleEditStart(message)}
-                          >
-                            <Pencil className="h-4 w-4" />
-                          </Button>
-                        </>
+    <div className="w-full overflow-y-auto overflow-x-hidden h-full px-4 py-6">
+      <div className="w-full flex flex-col gap-3 min-h-full pb-4 max-w-3xl mx-auto">
+        <AnimatePresence initial={false}>
+          {messages.map((message, index) => {
+            const isUser = isUserMessage(message.role);
+            const isEditing = message.id === editingMessageId;
+            const isTool = !isUser && isToolCall(message.content);
+
+            return (
+              <motion.div
+                key={`${message.id}-${index}`}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                transition={{
+                  opacity: { duration: 0.15 },
+                  y: { duration: 0.15 },
+                }}
+                className="flex flex-col gap-1 w-full group"
+              >
+                {/* Sender info - always on the left */}
+                <div className="flex items-center gap-2 ml-1">
+                  <Avatar
+                    className={cn(
+                      'h-6 w-6',
+                      isUser ? 'bg-primary/10' : 'bg-secondary/10'
+                    )}
+                  >
+                    {isUser ? (
+                      <>
+                        <AvatarImage src="/" alt="user" />
+                        <AvatarFallback className="text-primary-foreground text-xs">
+                          {user.username?.substring(0, 2).toUpperCase()}
+                        </AvatarFallback>
+                      </>
+                    ) : (
+                      <>
+                        <AvatarImage
+                          src="/codefox.svg"
+                          alt="AI"
+                          className="p-1 dark:invert"
+                        />
+                        <AvatarFallback className="text-secondary-foreground">
+                          AI
+                        </AvatarFallback>
+                      </>
+                    )}
+                  </Avatar>
+                  <span className="text-xs text-muted-foreground">
+                    {isUser ? user.username || 'You' : 'CodeFox'}
+                  </span>
+                </div>
+
+                {/* Message content */}
+                <div className="flex flex-col gap-1 pl-8 relative">
+                  {/* Edit buttons for user messages */}
+                  {isUser && !isEditing && onMessageEdit && (
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="absolute -left-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6"
+                      onClick={() => handleEditStart(message)}
+                    >
+                      <Pencil className="h-3 w-3" />
+                    </Button>
+                  )}
+
+                  {/* Message bubble */}
+                  {isEditing ? (
+                    <div className="flex flex-col gap-2 w-full pl-0">
+                      <textarea
+                        value={editContent}
+                        onChange={(e) => setEditContent(e.target.value)}
+                        className="min-h-[100px] w-full p-2 rounded bg-background border resize-none text-foreground"
+                        autoFocus
+                      />
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={handleEditCancel}
+                          className="h-7 px-2 text-xs"
+                        >
+                          <X className="h-3 w-3 mr-1" />
+                          Cancel
+                        </Button>
+                        <Button
+                          size="sm"
+                          onClick={() => handleEditSubmit(message.id)}
+                          className="h-7 px-2 text-xs"
+                        >
+                          <Check className="h-3 w-3 mr-1" />
+                          Save
+                        </Button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div
+                      className={cn(
+                        'px-4 py-3 rounded-lg w-auto max-w-full',
+                        isUser
+                          ? 'bg-muted text-foreground border border-border/50'
+                          : isTool
+                            ? 'bg-slate-50 dark:bg-slate-900 border border-border/50'
+                            : 'bg-card text-card-foreground border border-border/50'
                       )}
+                    >
+                      <div className="whitespace-pre-wrap">
+                        {isUser ? (
+                          message.content
+                        ) : isTool ? (
+                          <div className="prose dark:prose-invert prose-sm max-w-none">
+                            <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-1.5">
+                              <Terminal className="h-3.5 w-3.5" />
+                              <span>Tool Execution</span>
+                            </div>
+                            {renderMessageContent(message.content)}
+                          </div>
+                        ) : (
+                          <div className="prose dark:prose-invert prose-sm max-w-none">
+                            {renderMessageContent(message.content)}
+                          </div>
+                        )}
+                      </div>
                     </div>
-                    <SmallAvatar className="flex justify-start items-center overflow-hidden">
-                      <AvatarImage
-                        src="/"
-                        alt="user"
-                        className="h-full w-full object-cover"
-                      />
-                      <AvatarFallback>
-                        {user.username?.substring(0, 2).toUpperCase()}
-                      </AvatarFallback>
-                    </SmallAvatar>
-                  </div>
-                ) : (
-                  <div className="flex items-end gap-2">
-                    <SmallAvatar className="flex justify-start items-center">
-                      <AvatarImage
-                        src="/codefox.svg"
-                        alt="AI"
-                        className="h-full w-full object-contain dark:invert"
-                      />
-                    </SmallAvatar>
-                    <span className="bg-accent p-3 rounded-md max-w-xs sm:max-w-2xl overflow-x-auto">
-                      {renderMessageContent(message.content)}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </motion.div>
-          );
-        })}
+                  )}
+
+                  {/* Tool result or additional info could be added here */}
+                  {isTool && (
+                    <div className="text-xs text-muted-foreground mt-1 ml-2">
+                      <span>Tool output</span>
+                    </div>
+                  )}
+                </div>
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
 
         {loadingSubmit && (
-          <div className="flex pl-4 pb-4 gap-2 items-center">
-            <Avatar className="h-10 w-10 flex justify-start items-center">
-              <AvatarImage
-                src="/codefox.svg"
-                alt="AI"
-                className="h-full w-full object-contain dark:invert"
-              />
-            </Avatar>
-            <div className="bg-accent p-3 rounded-md max-w-xs sm:max-w-2xl overflow-x-auto">
-              <div className="flex gap-1">
-                <span className="size-1.5 rounded-full bg-slate-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-slate-300"></span>
-                <span className="size-1.5 rounded-full bg-slate-700 motion-safe:animate-[bounce_0.5s_ease-in-out_infinite] dark:bg-slate-300"></span>
-                <span className="size-1.5 rounded-full bg-slate-700 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-slate-300"></span>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="flex flex-col gap-1 w-full"
+          >
+            <div className="flex items-center gap-2 ml-1">
+              <Avatar className="h-6 w-6 bg-secondary/10">
+                <AvatarImage
+                  src="/codefox.svg"
+                  alt="AI"
+                  className="p-1 dark:invert"
+                />
+                <AvatarFallback>AI</AvatarFallback>
+              </Avatar>
+              <span className="text-xs text-muted-foreground">CodeFox</span>
+            </div>
+
+            <div className="flex pl-8">
+              <div className="px-3 py-2 flex items-center">
+                <div className="flex gap-1.5">
+                  <span className="size-2 rounded-full bg-foreground/30 animate-bounce"></span>
+                  <span
+                    className="size-2 rounded-full bg-foreground/30 animate-bounce"
+                    style={{ animationDelay: '0.2s' }}
+                  ></span>
+                  <span
+                    className="size-2 rounded-full bg-foreground/30 animate-bounce"
+                    style={{ animationDelay: '0.4s' }}
+                  ></span>
+                </div>
               </div>
             </div>
-          </div>
+          </motion.div>
         )}
       </div>
       <div ref={bottomRef} />
diff --git a/frontend/src/components/chat/chat-panel.tsx b/frontend/src/components/chat/chat-panel.tsx
index 6753516d..f194929c 100644
--- a/frontend/src/components/chat/chat-panel.tsx
+++ b/frontend/src/components/chat/chat-panel.tsx
@@ -1,4 +1,7 @@
+'use client';
+
 import React from 'react';
+import { motion } from 'framer-motion';
 import ChatBottombar from './chat-bottombar';
 import ChatTopbar from './chat-topbar';
 import { ChatRequestOptions, Message } from '../../const/MessageType';
@@ -37,22 +40,42 @@ export default function ChatContent({
   setMessages,
 }: ChatProps) {
   return (
-    <div className="flex flex-col justify-between w-full h-full">
-      <ChatTopbar />
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+      className="flex flex-col justify-between w-full h-full p-2 rounded-lg shadow-sm  border"
+    >
+      <div className="sticky top-0 z-10">
+        <ChatTopbar />
+      </div>
 
-      <ChatList messages={messages} loadingSubmit={loadingSubmit} />
+      <div className="flex-grow overflow-hidden">
+        <ChatList
+          messages={messages}
+          loadingSubmit={loadingSubmit}
+          onMessageEdit={(messageId, newContent) => {
+            const updatedMessages = messages.map((msg) =>
+              msg.id === messageId ? { ...msg, content: newContent } : msg
+            );
+            setMessages(updatedMessages);
+          }}
+        />
+      </div>
 
-      <ChatBottombar
-        setSelectedModel={setSelectedModel}
-        messages={messages}
-        input={input}
-        handleInputChange={handleInputChange}
-        handleSubmit={handleSubmit}
-        stop={stop}
-        formRef={formRef}
-        setInput={setInput}
-        setMessages={setMessages}
-      />
-    </div>
+      <div className="sticky bottom-0 z-10 bg-gradient-to-t from-background to-transparent pt-2">
+        <ChatBottombar
+          setSelectedModel={setSelectedModel}
+          messages={messages}
+          input={input}
+          handleInputChange={handleInputChange}
+          handleSubmit={handleSubmit}
+          stop={stop}
+          formRef={formRef}
+          setInput={setInput}
+          setMessages={setMessages}
+        />
+      </div>
+    </motion.div>
   );
 }
diff --git a/frontend/src/components/chat/chat-topbar.tsx b/frontend/src/components/chat/chat-topbar.tsx
index 89f1093c..dbe4a015 100644
--- a/frontend/src/components/chat/chat-topbar.tsx
+++ b/frontend/src/components/chat/chat-topbar.tsx
@@ -1,100 +1,140 @@
 'use client';
+import React, { useState } from 'react';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
-import React from 'react';
-import { CaretSortIcon } from '@radix-ui/react-icons';
 import { Button } from '../ui/button';
-import { useModels } from '@/hooks/useModels';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
+import { HistoryIcon, ArchiveIcon, PlusIcon, FileTextIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { Badge } from '../ui/badge';
 
-export default function ChatTopbar() {
-  const [open, setOpen] = React.useState(false);
-  const {
-    models,
-    loading: modelsLoading,
-    setSelectedModel,
-    selectedModel,
-  } = useModels();
+// Mock data for chat history
+const mockChatHistory = [
+  {
+    id: 'chat-1',
+    title: 'still working on this feature',
+    date: '2 hours ago',
+    isPinned: true,
+  },
+  {
+    id: 'chat-2',
+    title: 'Portfolio website design',
+    date: 'Yesterday',
+    isPinned: false,
+  },
+];
 
-  const handleModelChange = (modelName: string) => {
-    setSelectedModel(modelName);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('selectedModel', modelName);
-    }
-    setOpen(false);
-  };
+interface ChatTopbarProps {
+  currentChatId?: string;
+  onChatSelect?: (chatId: string) => void;
+  onNewChat?: () => void;
+}
+
+export default function ChatTopbar({
+  currentChatId,
+  onChatSelect,
+  onNewChat,
+}: ChatTopbarProps) {
+  const [open, setOpen] = useState(false);
+
+  // Get current chat title
+  const currentChat = currentChatId
+    ? mockChatHistory.find((chat) => chat.id === currentChatId)
+    : null;
 
   return (
-    <div className="w-full flex px-4 py-6 items-center justify-center">
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            disabled={modelsLoading}
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            className="w-[300px] justify-between"
-          >
-            {modelsLoading
-              ? 'Loading models...'
-              : selectedModel || 'Loading models...'}
-            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="w-[300px] p-0 overflow-hidden"
-          align="center"
-          side="bottom"
-          sideOffset={4}
-        >
-          <div className="px-3 py-2 border-b">
-            <h4 className="font-medium text-sm">Select Model</h4>
-            <p className="text-xs text-muted-foreground">
-              Choose a model for your chat
-            </p>
-          </div>
-          <ScrollArea className="h-[320px]">
-            {modelsLoading ? (
-              <div className="px-3 py-2">
-                <Button variant="ghost" disabled className="w-full">
-                  Loading models...
-                </Button>
-              </div>
-            ) : models.length > 0 ? (
+    <div className="w-full flex px-4 py-2 items-center justify-between border-b">
+      <div className="flex items-center gap-2">
+        <FileTextIcon className="h-5 w-5 text-primary" />
+        <h1 className="font-medium text-sm">
+          {currentChat ? currentChat.title : 'New Chat'}
+        </h1>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {/* History dropdown */}
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-8 gap-1.5 text-xs">
+              <HistoryIcon className="h-3.5 w-3.5" />
+              <span className="hidden sm:inline">History</span>
+              <Badge variant="secondary" className="ml-1 text-xs px-1 py-0 h-4">
+                {mockChatHistory.length}
+              </Badge>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[280px] p-0" align="end">
+            <div className="px-3 py-2 border-b">
+              <h4 className="font-medium text-sm">Recent Chats</h4>
+              <p className="text-xs text-muted-foreground">
+                Your conversation history
+              </p>
+            </div>
+            <ScrollArea className="h-[320px]">
               <div className="flex flex-col">
-                {models.map((model, index) => (
-                  <div key={model}>
+                {mockChatHistory.map((chat) => (
+                  <div key={chat.id}>
                     <Button
                       variant="ghost"
                       className={cn(
                         'w-full justify-start font-normal rounded-none px-3 py-2 h-auto',
-                        selectedModel === model && 'bg-accent'
+                        currentChatId === chat.id && 'bg-accent'
                       )}
-                      onClick={() => handleModelChange(model)}
+                      onClick={() => {
+                        if (onChatSelect) onChatSelect(chat.id);
+                        setOpen(false);
+                      }}
                     >
-                      {model}
+                      <div className="flex flex-col items-start text-left w-full">
+                        <div className="flex items-center w-full gap-2">
+                          <span className="truncate flex-1">{chat.title}</span>
+                          {chat.isPinned && <span className="text-xs">📌</span>}
+                        </div>
+                        <span className="text-xs text-muted-foreground">
+                          {chat.date}
+                        </span>
+                      </div>
                     </Button>
-                    {index < models.length - 1 && (
-                      <Separator className="mx-3" />
-                    )}
+                    <Separator />
                   </div>
                 ))}
               </div>
-            ) : (
-              <div className="px-3 py-2">
-                <Button variant="ghost" disabled className="w-full">
-                  No models available
-                </Button>
-              </div>
-            )}
-          </ScrollArea>
-        </PopoverContent>
-      </Popover>
+            </ScrollArea>
+            <div className="p-2 border-t flex justify-between">
+              <Button variant="ghost" size="sm" className="text-xs h-8 px-2">
+                <ArchiveIcon className="h-3.5 w-3.5 mr-1" />
+                Archived Chats
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="text-xs h-8 px-2"
+                onClick={() => {
+                  if (onNewChat) onNewChat();
+                  setOpen(false);
+                }}
+              >
+                <PlusIcon className="h-3.5 w-3.5 mr-1" />
+                New Chat
+              </Button>
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        {/* New chat button */}
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={onNewChat}
+        >
+          <PlusIcon className="h-4 w-4" />
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/chat/code-engine/tabs/code-tab.tsx b/frontend/src/components/chat/code-engine/tabs/code-tab.tsx
index 344a6140..c14e3762 100644
--- a/frontend/src/components/chat/code-engine/tabs/code-tab.tsx
+++ b/frontend/src/components/chat/code-engine/tabs/code-tab.tsx
@@ -43,14 +43,12 @@ const CodeTab = ({
       const extension = filePath.split('.').pop()?.toLowerCase();
       switch (extension) {
         case 'js':
+        case 'jsx':
           setType('javascript');
           break;
         case 'ts':
-          setType('typescript');
-          break;
-        case 'jsx':
         case 'tsx':
-          setType('typescriptreact');
+          setType('typescript');
           break;
         case 'html':
           setType('html');
@@ -100,7 +98,7 @@ const CodeTab = ({
         <Editor
           height="100%"
           width="100%"
-          defaultLanguage="typescriptreact"
+          defaultLanguage="typescript"
           value={newCode}
           language={type}
           loading={isLoading}
@@ -111,12 +109,15 @@ const CodeTab = ({
             minimap: { enabled: false },
             wordWrap: 'on',
             wrappingStrategy: 'advanced',
+            folding: true,
+            foldingHighlight: true,
+            foldingStrategy: 'indentation',
             scrollbar: {
               useShadows: false,
-              vertical: 'visible',
-              horizontal: 'visible',
-              verticalScrollbarSize: 10,
-              horizontalScrollbarSize: 10,
+              vertical: 'hidden',
+              horizontal: 'hidden',
+              verticalScrollbarSize: 0,
+              horizontalScrollbarSize: 0,
             },
           }}
           theme={theme.theme === 'dark' ? 'vs-dark' : 'vs'}
diff --git a/frontend/src/components/chat/index.tsx b/frontend/src/components/chat/index.tsx
index e659dafd..05730c3e 100644
--- a/frontend/src/components/chat/index.tsx
+++ b/frontend/src/components/chat/index.tsx
@@ -9,29 +9,25 @@ import { GET_CHAT_HISTORY } from '@/graphql/request';
 import { useQuery } from '@apollo/client';
 import { toast } from 'sonner';
 import { EventEnum } from '@/const/EventEnum';
-import UserSetting from '@/components/settings/settings';
 import ChatContent from '@/components/chat/chat-panel';
 import { useModels } from '@/hooks/useModels';
 import { useChatList } from '@/hooks/useChatList';
 import { useChatStream } from '@/hooks/useChatStream';
 import { CodeEngine } from './code-engine/code-engine';
 import { useProjectStatusMonitor } from '@/hooks/useProjectStatusMonitor';
-import { Loader2 } from 'lucide-react';
 import { useAuthContext } from '@/providers/AuthProvider';
-import { useRouter } from 'next/navigation';
 
 export default function Chat() {
   // Initialize state, refs, and custom hooks
   const { isAuthorized } = useAuthContext();
   const urlParams = new URLSearchParams(window.location.search);
   const [chatId, setChatId] = useState('');
-  const [messages, setMessages] = useState<any[]>([]);
+  const [messages, setMessages] = useState([]);
   const [input, setInput] = useState('');
   const formRef = useRef<HTMLFormElement>(null);
   const { models } = useModels();
   const [selectedModel, setSelectedModel] = useState(models[0] || 'gpt-4o');
   const { refetchChats } = useChatList();
-  const route = useRouter();
 
   // Project status monitoring for the current chat
   const { isReady, projectId, projectName, error } =
@@ -102,37 +98,41 @@ export default function Chat() {
   return chatId ? (
     <ResizablePanelGroup
       direction="horizontal"
-      className="h-full w-full"
+      className="h-full w-full p-2"
       key="with-chat"
     >
       <ResizablePanel
-        defaultSize={15}
-        minSize={15}
-        maxSize={80}
+        defaultSize={40}
+        minSize={20}
+        maxSize={70}
         className="h-full"
       >
-        <ChatContent
-          chatId={chatId}
-          setSelectedModel={setSelectedModel}
-          messages={messages}
-          input={input}
-          handleInputChange={handleInputChange}
-          handleSubmit={handleSubmit}
-          loadingSubmit={loadingSubmit}
-          stop={stop}
-          formRef={formRef}
-          setInput={setInput}
-          setMessages={setMessages}
-        />
+        <div className="h-full overflow-hidden">
+          <ChatContent
+            chatId={chatId}
+            setSelectedModel={setSelectedModel}
+            messages={messages}
+            input={input}
+            handleInputChange={handleInputChange}
+            handleSubmit={handleSubmit}
+            loadingSubmit={loadingSubmit}
+            stop={stop}
+            formRef={formRef}
+            setInput={setInput}
+            setMessages={setMessages}
+          />
+        </div>
       </ResizablePanel>
-      <ResizableHandle withHandle className="hidden md:flex" />
+
+      <ResizableHandle withHandle className="bg-border/20  w-[3px]" />
+
       <ResizablePanel
-        defaultSize={80}
-        minSize={20}
+        defaultSize={60}
+        minSize={30}
         maxSize={80}
-        className="h-full overflow-auto"
+        className="h-full"
       >
-        <div className="p-4 h-full">
+        <div className="h-full overflow-auto">
           <CodeEngine
             chatId={chatId}
             isProjectReady={isReady}
diff --git a/frontend/src/components/magicui/aurora-text.tsx b/frontend/src/components/magicui/aurora-text.tsx
new file mode 100644
index 00000000..1486b9db
--- /dev/null
+++ b/frontend/src/components/magicui/aurora-text.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+import React, { useEffect, useId, useRef } from 'react';
+
+interface AuroraTextProps {
+  children: React.ReactNode;
+  className?: string;
+  colors?: string[];
+  speed?: number; // 1 is default speed, 2 is twice as fast, 0.5 is half speed
+}
+
+export function AuroraText({
+  children,
+  className = '',
+  colors = ['#FF0080', '#7928CA', '#0070F3', '#38bdf8', '#a855f7', '#2dd4bf'],
+  speed = 1,
+}: AuroraTextProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const textRef = useRef<SVGTextElement>(null);
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const [fontSize, setFontSize] = React.useState(0);
+  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+  const [isReady, setIsReady] = React.useState(false);
+  const [textStyle, setTextStyle] = React.useState<
+    Partial<CSSStyleDeclaration>
+  >({});
+  const maskId = useId();
+
+  // Updated effect to compute all text styles from parent
+  useEffect(() => {
+    if (containerRef.current) {
+      const computedStyle = window.getComputedStyle(containerRef.current);
+
+      // Extract text-related styles
+      const relevantStyles = {
+        fontSize: computedStyle.fontSize,
+        fontFamily: computedStyle.fontFamily,
+        fontWeight: computedStyle.fontWeight,
+        fontStyle: computedStyle.fontStyle,
+        letterSpacing: computedStyle.letterSpacing,
+        lineHeight: computedStyle.lineHeight,
+        textTransform: computedStyle.textTransform,
+        fontVariant: computedStyle.fontVariant,
+        fontStretch: computedStyle.fontStretch,
+        fontFeatureSettings: computedStyle.fontFeatureSettings,
+      };
+
+      requestAnimationFrame(() => {
+        setTextStyle(relevantStyles);
+      });
+    }
+  }, [className]);
+
+  // Updated effect to compute font size from both inline and class styles
+  useEffect(() => {
+    const updateFontSize = () => {
+      if (containerRef.current) {
+        const computedStyle = window.getComputedStyle(containerRef.current);
+        const computedFontSize = parseFloat(computedStyle.fontSize);
+
+        requestAnimationFrame(() => {
+          setFontSize(computedFontSize);
+        });
+      }
+    };
+
+    updateFontSize();
+    window.addEventListener('resize', updateFontSize);
+
+    return () => window.removeEventListener('resize', updateFontSize);
+  }, [className]);
+
+  // Update effect to set ready state after dimensions are computed
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (textRef.current) {
+        const bbox = textRef.current.getBBox();
+        setDimensions({
+          width: bbox.width,
+          height: bbox.height,
+        });
+        setIsReady(true);
+      }
+    };
+
+    updateDimensions();
+    window.addEventListener('resize', updateDimensions);
+
+    return () => window.removeEventListener('resize', updateDimensions);
+  }, [children, fontSize]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Set canvas size
+    canvas.width = dimensions.width;
+    canvas.height = dimensions.height;
+
+    let time = 0;
+    const baseSpeed = 0.008; // Original speed as base unit
+
+    function animate() {
+      if (!ctx || !canvas) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      time += baseSpeed * speed;
+
+      colors.forEach((color, i) => {
+        const x =
+          canvas.width *
+          (0.5 +
+            Math.cos(time * 0.8 + i * 1.3) * 0.4 +
+            Math.sin(time * 0.5 + i * 0.7) * 0.2);
+        const y =
+          canvas.height *
+          (0.5 +
+            Math.sin(time * 0.7 + i * 1.5) * 0.4 +
+            Math.cos(time * 0.6 + i * 0.8) * 0.2);
+
+        const gradient = ctx.createRadialGradient(
+          x,
+          y,
+          0,
+          x,
+          y,
+          canvas.width * 0.4
+        );
+
+        gradient.addColorStop(0, `${color}99`);
+        gradient.addColorStop(0.5, `${color}33`);
+        gradient.addColorStop(1, '#00000000');
+
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      });
+
+      requestAnimationFrame(animate);
+    }
+    animate();
+  }, [dimensions, colors, speed]);
+
+  return (
+    <span
+      ref={containerRef}
+      className={`relative inline-block align-middle ${className}`}
+      style={{
+        width: dimensions.width || 'auto',
+        height: dimensions.height || 'auto',
+      }}
+    >
+      {/* Hidden text for SEO */}
+      <span className="sr-only">{children}</span>
+
+      {/* Visual placeholder while canvas loads */}
+      <span
+        style={{
+          opacity: isReady ? 0 : 1,
+          transition: 'opacity 0.2s ease-in',
+          position: isReady ? 'absolute' : 'relative',
+          display: 'inline-block',
+          whiteSpace: 'nowrap',
+        }}
+        aria-hidden="true"
+      >
+        {children}
+      </span>
+
+      <div
+        className="absolute inset-0"
+        style={{
+          opacity: isReady ? 1 : 0,
+          transition: 'opacity 0.2s ease-in',
+        }}
+        aria-hidden="true"
+      >
+        <svg
+          width={dimensions.width}
+          height={dimensions.height}
+          className="absolute inset-0"
+        >
+          <defs>
+            <clipPath id={maskId}>
+              <text
+                ref={textRef}
+                x="50%"
+                y="50%"
+                dominantBaseline="middle"
+                textAnchor="middle"
+                style={textStyle as CSSProperties}
+              >
+                {children}
+              </text>
+            </clipPath>
+          </defs>
+        </svg>
+
+        <canvas
+          ref={canvasRef}
+          style={{
+            clipPath: `url(#${maskId})`,
+            WebkitClipPath: `url(#${maskId})`,
+          }}
+          className="h-full w-full"
+        />
+      </div>
+    </span>
+  );
+}
diff --git a/frontend/src/components/root/nav-layout.tsx b/frontend/src/components/root/nav-layout.tsx
index 13dc185f..7e0932fc 100644
--- a/frontend/src/components/root/nav-layout.tsx
+++ b/frontend/src/components/root/nav-layout.tsx
@@ -13,13 +13,7 @@ export default function NavLayout({ children }: NavLayoutProps) {
   const { isAuthorized } = useAuthContext();
 
   const logoElement = !isAuthorized ? (
-    <Image
-      src="/codefox.svg"
-      alt="CodeFox Logo"
-      width={40}
-      height={40}
-      className="h-10 w-auto"
-    />
+    <Image src="/codefox.svg" alt="CodeFox Logo" width={64} height={64} />
   ) : null;
 
   return (
diff --git a/frontend/src/components/root/nav.tsx b/frontend/src/components/root/nav.tsx
index 565b0b17..a2062415 100644
--- a/frontend/src/components/root/nav.tsx
+++ b/frontend/src/components/root/nav.tsx
@@ -7,7 +7,6 @@ import {
   ReactNode,
 } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Github, Star, SunMoon, Home, Info, DollarSign } from 'lucide-react';
 import { useTheme } from 'next-themes';
@@ -185,7 +184,7 @@ const FloatingNavbar = forwardRef<NavbarRef, FloatingNavbarProps>(
       <>
         <div className={` top-5 left-0 right-0 z-50 ${className}`}>
           <motion.div
-            className={`w-full flex justify-around items-center px-6 py-4 ${containerClassName}`}
+            className={`w-full flex justify-around items-center px-8 py-7 ${containerClassName}`}
             initial="hidden"
             animate="visible"
             variants={containerVariants}
@@ -195,11 +194,8 @@ const FloatingNavbar = forwardRef<NavbarRef, FloatingNavbarProps>(
               className={`flex items-center space-x-3 ${logoContainerClassName}`}
               variants={itemVariants}
             >
-              {logo && (
-                <div className="h-10 w-auto overflow-hidden">{logo}</div>
-              )}
               <span
-                className={`font-bold text-2xl text-primary-600 dark:text-primary-400 transition-transform hover:scale-105 duration-300 ${nameClassName}`}
+                className={` font-bold text-3xl text-primary-600 dark:text-primary-400 transition-transform hover:scale-105 duration-300 ${nameClassName}`}
               >
                 {name}
               </span>
@@ -247,7 +243,7 @@ const FloatingNavbar = forwardRef<NavbarRef, FloatingNavbarProps>(
                 <div className="flex items-center space-x-4 transition-transform duration-300">
                   <button
                     onClick={() => setShowSignIn(true)}
-                    className="px-4 py-1 rounded-sm border border-primary-500 text-primary-500 dark:text-primary-400
+                    className="px-4 py-2 rounded-sm border border-primary-500 text-primary-500 dark:text-primary-400
                  hover:bg-primary-500 hover:text-white transition-colors"
                   >
                     Sign In
@@ -255,7 +251,7 @@ const FloatingNavbar = forwardRef<NavbarRef, FloatingNavbarProps>(
 
                   <button
                     onClick={() => setShowSignUp(true)}
-                    className="px-4 py-1 rounded-sm bg-primary-500 text-white hover:bg-primary-600 transition-colors"
+                    className="px-4 py-2 rounded-sm bg-primary-500 text-white hover:bg-primary-600 transition-colors"
                   >
                     Sign Up
                   </button>
diff --git a/frontend/src/components/root/projects-section.tsx b/frontend/src/components/root/projects-section.tsx
index 792d2a42..9a06e5a2 100644
--- a/frontend/src/components/root/projects-section.tsx
+++ b/frontend/src/components/root/projects-section.tsx
@@ -31,7 +31,7 @@ export function ProjectsSection() {
         {/* Header and "View All" button always visible */}
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-2xl font-semibold dark:text-white">
-            From the Community
+            Featured Projects
           </h2>
           <button className="text-primary-600 dark:text-primary-400 hover:underline">
             View All &rarr;
diff --git a/frontend/src/components/root/prompt-form.tsx b/frontend/src/components/root/prompt-form.tsx
index c7920c7f..68a9c1c2 100644
--- a/frontend/src/components/root/prompt-form.tsx
+++ b/frontend/src/components/root/prompt-form.tsx
@@ -1,18 +1,8 @@
 'use client';
 
 import { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
-import {
-  SendIcon,
-  FileUp,
-  Sparkles,
-  Globe,
-  Lock,
-  Loader2,
-  Cpu,
-  Command,
-} from 'lucide-react';
+import { SendIcon, Sparkles, Globe, Lock, Loader2, Cpu } from 'lucide-react';
 import Typewriter from 'typewriter-effect';
-import { AnimatedInputBorder } from '@/components/ui/moving-border';
 import {
   Select,
   SelectContent,
@@ -30,7 +20,6 @@ import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { useModels } from '@/hooks/useModels';
 import { gql, useMutation } from '@apollo/client';
-import { useTheme } from 'next-themes';
 import { logger } from '@/app/log/logger';
 
 export interface PromptFormRef {
@@ -60,20 +49,14 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
     { isAuthorized, onSubmit, onAuthRequired, isLoading = false },
     ref
   ) {
-    // Internal state
     const [message, setMessage] = useState('');
     const [visibility, setVisibility] = useState<'public' | 'private'>(
       'public'
     );
     const [isEnhanced, setIsEnhanced] = useState(false);
-    // New state for tracking input focus
-    const [isFocused, setIsFocused] = useState(false);
-    // State for regeneration loading
+    const [isFocused, setIsFocused] = useState(false); // 追踪 textarea focus
     const [isRegenerating, setIsRegenerating] = useState(false);
 
-    const { theme } = useTheme();
-    const isDarkMode = theme === 'dark';
-
     const {
       selectedModel,
       setSelectedModel,
@@ -81,12 +64,11 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
       models,
     } = useModels();
 
-    // Set up the regenerate mutation
+    // GraphQL: regenerateDescription
     const [regenerateDescriptionMutation] = useMutation(
       REGENERATE_DESCRIPTION,
       {
         onCompleted: (data) => {
-          // Update the message with the regenerated description
           setMessage(data.regenerateDescription);
           setIsRegenerating(false);
         },
@@ -97,7 +79,6 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
       }
     );
 
-    // Handle form submission
     const handleSubmit = () => {
       if (isLoading || isRegenerating) return;
       if (!isAuthorized) {
@@ -107,63 +88,33 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
       }
     };
 
-    // Handle magic enhance button click
     const handleMagicEnhance = () => {
-      // Don't do anything if already loading
-      if (isLoading || isRegenerating) {
-        return;
-      }
-
-      // Check if user is authorized
+      if (isLoading || isRegenerating) return;
       if (!isAuthorized) {
         onAuthRequired();
         return;
       }
-
-      // If there's text, regenerate it
       if (message.trim()) {
         setIsRegenerating(true);
-        regenerateDescriptionMutation({
-          variables: {
-            input: message,
-          },
-        });
+        regenerateDescriptionMutation({ variables: { input: message } });
       }
-
-      // Toggle the enhanced state regardless
       setIsEnhanced(!isEnhanced);
     };
 
-    // Set up keyboard shortcut for submission
     useEffect(() => {
-      const handleKeyDown = (e) => {
-        // Skip if currently loading, regenerating, or enhancing
-        if (isLoading || isRegenerating) {
-          return;
-        }
-
-        // Check for Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux)
-        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-          e.preventDefault();
-          handleSubmit();
-        }
-        // Also support Alt+Enter as an alternative shortcut
-        if (e.altKey && e.key === 'Enter') {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (isLoading || isRegenerating) return;
+        if ((e.altKey || e.metaKey || e.ctrlKey) && e.key === 'Enter') {
           e.preventDefault();
           handleSubmit();
         }
       };
-
-      // Add event listener
       document.addEventListener('keydown', handleKeyDown);
-
-      // Clean up
       return () => {
         document.removeEventListener('keydown', handleKeyDown);
       };
-    }, [isAuthorized, isLoading, isRegenerating]);
+    }, [handleSubmit, isAuthorized, isLoading, isRegenerating]);
 
-    // Expose methods to parent component
     useImperativeHandle(ref, () => ({
       getPromptData: () => ({
         message,
@@ -173,8 +124,7 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
       clearMessage: () => setMessage(''),
     }));
 
-    // Typewriter initialization function
-    const handleTypewriterInit = (typewriter) => {
+    const handleTypewriterInit = (typewriter: any) => {
       typewriter
         .typeString("Create a personal website for me, I'm an engineer...")
         .changeDelay(50)
@@ -184,189 +134,199 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
     };
 
     return (
-      <div className="relative w-full max-w-4xl mx-auto">
-        {/* Main content area with textarea */}
-        <AnimatedInputBorder borderWidth={200} borderHeight={30}>
-          <div className="flex flex-col">
-            <textarea
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              onFocus={() => setIsFocused(true)}
-              onBlur={() => setIsFocused(false)}
-              placeholder=""
-              className="w-full min-h-[200px] py-6 px-6 pr-12 text-lg border border-transparent rounded-lg focus:outline-none focus:ring-0 bg-white dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 resize-none font-normal"
-              disabled={isLoading || isRegenerating}
-              rows={3}
-              style={{ paddingBottom: '48px' }} // Extra padding at bottom to avoid text touching buttons
-            />
-
-            {/* The typewriter only shows when the input is empty, not loading, and not focused */}
-            {message === '' && !isLoading && !isRegenerating && !isFocused && (
-              <div className="absolute top-[26px] left-[23px] right-12 pointer-events-none text-gray-500 dark:text-gray-400 text-lg font-normal overflow-hidden">
-                <Typewriter onInit={handleTypewriterInit} />
-              </div>
+      <div
+        className={cn(
+          'w-full border border-gray-300 dark:border-gray-700',
+          'bg-white dark:bg-gray-700 rounded-md'
+        )}
+      >
+        {/* Typewriter */}
+        <div className="relative">
+          <textarea
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            placeholder=""
+            rows={5}
+            className={cn(
+              'w-full min-h-[150px] py-4 px-4 text-base leading-snug',
+              'bg-transparent rounded-t-md focus:outline-none resize-none',
+              'dark:text-white dark:placeholder-gray-400'
             )}
-          </div>
+            disabled={isLoading || isRegenerating}
+          />
+          {message === '' && !isLoading && !isRegenerating && !isFocused && (
+            <div className="pointer-events-none text-gray-500 dark:text-gray-400 text-base font-normal absolute top-4 left-4 right-4 overflow-hidden">
+              <Typewriter onInit={handleTypewriterInit} />
+            </div>
+          )}
+        </div>
 
-          {/* Controls section - now separated with a background */}
-          <div className="absolute bottom-0 left-0 right-0 py-1 px-3 flex items-center justify-between bg-white dark:bg-gray-600 rounded-b-lg dark:border-gray-600">
-            <div className="flex items-center gap-2">
-              <Select
-                value={visibility}
-                onValueChange={(value) =>
-                  !isLoading &&
-                  !isRegenerating &&
-                  setVisibility(value as 'public' | 'private')
-                }
-                disabled={isLoading || isRegenerating}
+        <div className="border-t border-gray-300 dark:border-gray-600" />
+
+        <div className="flex items-center justify-between px-4 py-3">
+          <div className="flex items-center gap-2">
+            {/* visibility */}
+            <Select
+              value={visibility}
+              onValueChange={(value) =>
+                !isLoading &&
+                !isRegenerating &&
+                setVisibility(value as 'public' | 'private')
+              }
+              disabled={isLoading || isRegenerating}
+            >
+              <SelectTrigger
+                className={cn(
+                  'h-9 px-3 text-sm font-medium border border-gray-300 dark:border-gray-600',
+                  'bg-white dark:bg-gray-800 dark:text-gray-100',
+                  'rounded-md focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700',
+                  (isLoading || isRegenerating) &&
+                    'opacity-50 cursor-not-allowed'
+                )}
               >
-                <SelectTrigger
-                  className={cn(
-                    'w-[72px] h-6 border-0 focus:ring-0 hover:bg-gray-100 dark:hover:bg-gray-600 pl-1',
-                    (isLoading || isRegenerating) &&
-                      'opacity-50 cursor-not-allowed'
-                  )}
-                >
-                  <div className="flex items-center gap-2">
-                    <SelectValue />
+                {visibility === 'public' ? (
+                  <div className="flex items-center gap-2 font-semibold">
+                    <Globe size={16} />
+                    <span>Public</span>
                   </div>
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="public">
-                    <div className="flex items-center gap-2">
-                      <Globe size={16} />
-                      <span>Public</span>
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="private">
-                    <div className="flex items-center gap-2">
-                      <Lock size={16} />
-                      <span>Private</span>
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+                ) : (
+                  <div className="flex items-center gap-2 font-semibold">
+                    <Lock size={16} />
+                    <span>Private</span>
+                  </div>
+                )}
+              </SelectTrigger>
 
-              <Select
-                value={selectedModel}
-                onValueChange={(value) =>
-                  !isLoading && !isRegenerating && setSelectedModel(value)
-                }
-                disabled={isLoading || isRegenerating}
-              >
-                <SelectTrigger
-                  className={cn(
-                    'h-6 border-0 focus:ring-0 hover:bg-gray-100 dark:hover:bg-gray-600 pl-1 min-w-max',
-                    (isLoading || isRegenerating) &&
-                      'opacity-50 cursor-not-allowed'
-                  )}
+              <SelectContent>
+                <SelectItem
+                  value="public"
+                  className="p-3 rounded-md transition hover:bg-gray-50 dark:hover:bg-gray-700"
                 >
-                  <div className="flex items-center gap-2">
-                    {!isModelLoading ? <SelectValue /> : 'Loading...'}
+                  <div className="flex items-center gap-2 font-semibold">
+                    <Globe size={16} />
+                    <span>Public</span>
                   </div>
-                </SelectTrigger>
-                <SelectContent>
-                  {!isModelLoading ? (
-                    models.map((model) => (
-                      <SelectItem key={model} value={model}>
-                        <div className="flex items-center gap-2">
-                          <Cpu size={16} />
-                          <span>{model}</span>
-                        </div>
-                      </SelectItem>
-                    ))
-                  ) : (
-                    <>Loading...</>
-                  )}
-                </SelectContent>
-              </Select>
-            </div>
+                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                    Anyone can view this project
+                  </p>
+                </SelectItem>
 
-            <div className="flex items-center gap-2">
-              {/* Magic enhance tooltip */}
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div
-                      onClick={
-                        !isLoading && !isRegenerating && message.trim()
-                          ? handleMagicEnhance
-                          : undefined
-                      }
-                      className={cn(
-                        'flex items-center justify-center w-12 h-12 rounded-full p-2 cursor-pointer transition-all',
-                        'focus:outline-none focus:ring-0 focus:border-0',
-                        'active:outline-none active:ring-0 active:border-0',
-                        isEnhanced
-                          ? isDarkMode
-                            ? 'text-primary-100 hover:text-primary-100'
-                            : 'text-yellow-300 hover:text-yellow-300'
-                          : 'text-gray-500 hover:text-gray-500',
-                        (isLoading || isRegenerating || !message.trim()) &&
-                          'opacity-50 cursor-not-allowed'
-                      )}
-                      style={{
-                        border: 'none',
-                        outline: 'none',
-                        boxShadow: 'none',
-                        WebkitTapHighlightColor: 'transparent',
-                        WebkitAppearance: 'none',
-                        MozAppearance: 'none',
-                        WebkitUserSelect: 'none',
-                        userSelect: 'none',
-                      }}
-                      tabIndex={-1}
-                      onMouseDown={(e) => e.preventDefault()}
-                      onMouseUp={(e) => e.preventDefault()}
-                    >
-                      <Sparkles
-                        size={24}
-                        className={cn(
-                          'w-5 h-5',
-                          isRegenerating && 'animate-spin'
-                        )}
-                      />
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom">
-                    <p>
-                      {message.trim()
-                        ? 'Regenerate & enhance'
-                        : 'Magic enhance generation'}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+                <SelectItem
+                  value="private"
+                  className="p-3 rounded-md transition hover:bg-gray-50 dark:hover:bg-gray-700"
+                >
+                  <div className="flex items-center gap-2 font-semibold">
+                    <Lock size={16} />
+                    <span>Private</span>
+                  </div>
+                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                    Only you can access this project
+                  </p>
+                </SelectItem>
+              </SelectContent>
+            </Select>
 
-              {/* Submit button */}
-              <Button
+            {/* Model */}
+            <Select
+              value={selectedModel}
+              onValueChange={(value) =>
+                !isLoading && !isRegenerating && setSelectedModel(value)
+              }
+              disabled={isLoading || isRegenerating}
+            >
+              <SelectTrigger
                 className={cn(
-                  'bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white shadow-md hover:shadow-lg transition-all px-5 py-3 h-10 rounded-full',
-                  (isLoading || isRegenerating || !message.trim()) &&
-                    'opacity-80 cursor-not-allowed'
+                  'h-9 px-3 text-sm font-medium border border-gray-300 dark:border-gray-600',
+                  'bg-white dark:bg-gray-800 dark:text-gray-100',
+                  'rounded-md focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700',
+                  (isLoading || isRegenerating) &&
+                    'opacity-50 cursor-not-allowed'
                 )}
-                onClick={handleSubmit}
-                disabled={isLoading || isRegenerating || !message.trim()}
               >
-                {isLoading ? (
-                  <>
-                    <Loader2 size={18} className="mr-2 animate-spin" />
-                    <span>Creating...</span>
-                  </>
+                {!isModelLoading ? <SelectValue /> : 'Loading...'}
+              </SelectTrigger>
+              <SelectContent>
+                {!isModelLoading ? (
+                  models.map((model) => (
+                    <SelectItem key={model} value={model}>
+                      <div className="flex items-center gap-2">
+                        <Cpu size={16} />
+                        <span>{model}</span>
+                      </div>
+                    </SelectItem>
+                  ))
                 ) : (
-                  <>
-                    <SendIcon size={18} className="mr-2" />
-                    <span>Create</span>
-                    <span className="ml-2 text-xs opacity-80 border-l border-white pl-2">
-                      Alt+↵
-                    </span>
-                  </>
+                  <>Loading...</>
                 )}
-              </Button>
-            </div>
+              </SelectContent>
+            </Select>
           </div>
-        </AnimatedInputBorder>
+
+          <div className="flex items-center gap-2">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className={cn(
+                      'h-9 px-3 text-sm font-medium',
+                      'bg-white hover:bg-gray-50 text-gray-900',
+                      'dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-100',
+                      'border border-gray-200 dark:border-gray-700',
+                      'rounded-md focus:outline-none',
+                      'transform-gpu transition-[background-color,border-color] duration-200',
+                      (isLoading || isRegenerating) &&
+                        'opacity-50 cursor-not-allowed'
+                    )}
+                    onClick={handleMagicEnhance}
+                    disabled={isLoading || isRegenerating}
+                  >
+                    <Sparkles
+                      size={16}
+                      className={cn(isRegenerating && 'animate-spin')}
+                    />
+                    {isEnhanced ? 'Enhanced' : 'Enhance'}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <p>
+                    {message.trim()
+                      ? 'Regenerate & enhance'
+                      : 'Magic enhance generation'}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            <Button
+              className={cn(
+                'h-9 px-4 text-sm font-medium text-white rounded-md',
+                'bg-gradient-to-r from-primary-500 to-primary-600',
+                'hover:from-primary-600 hover:to-primary-700',
+                'focus:outline-none shadow-md hover:shadow-lg transition-all',
+                (isLoading || isRegenerating) && 'opacity-50 cursor-not-allowed'
+              )}
+              onClick={handleSubmit}
+              disabled={isLoading || isRegenerating}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 size={16} className="animate-spin" />
+                  <span className="ml-1">Creating...</span>
+                </>
+              ) : (
+                <>
+                  <SendIcon size={16} />
+                  <span className="ml-1">Create</span>
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
       </div>
     );
   }
 );
+
+PromptForm.displayName = 'PromptForm';
diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
index 547bc4c2..620570ea 100644
--- a/frontend/src/components/sidebar.tsx
+++ b/frontend/src/components/sidebar.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';
 import { memo, useCallback, useContext, useState } from 'react';
@@ -21,9 +22,12 @@ import {
   useSidebar,
 } from './ui/sidebar';
 import { ProjectContext } from './chat/code-engine/project-context';
-import { useChatList } from '@/hooks/useChatList';
 import { motion } from 'framer-motion';
 import { logger } from '@/app/log/logger';
+import { useChatList } from '@/hooks/useChatList';
+import { cn } from '@/lib/utils';
+import { PlusIcon } from 'lucide-react';
+import { HomeIcon } from '@radix-ui/react-icons';
 
 interface SidebarProps {
   setIsModalOpen: (value: boolean) => void;
@@ -70,6 +74,7 @@ const ChatRow = memo(
     );
   },
   (prevProps: ChatRowProps, nextProps: ChatRowProps) => {
+    // Only re-render if chatId or currentChatId changes
     return (
       prevProps.data.chats[prevProps.index].id ===
         nextProps.data.chats[nextProps.index].id &&
@@ -93,13 +98,6 @@ function ChatSideBarComponent({
   const [currentChatid, setCurrentChatid] = useState('');
   const { setCurProject, pollChatProject } = useContext(ProjectContext);
 
-  const handleNewChat = useCallback(() => {
-    router.push('/');
-    setCurrentChatid('');
-    const event = new Event(EventEnum.NEW_CHAT);
-    window.dispatchEvent(event);
-  }, [router]);
-
   const handleChatSelect = useCallback(
     (chatId: string) => {
       setCurrentChatid(chatId);
@@ -123,25 +121,34 @@ function ChatSideBarComponent({
   return (
     <div
       data-collapsed={isCollapsed}
-      className="relative flex flex-col h-full justify-between group lg:bg-accent/0 lg:dark:bg-card/0"
+      // Unified text & background style:
+      className="relative flex flex-col h-full justify-between bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 font-sans"
     >
-      <Sidebar collapsible="icon" side="left">
-        {/* Header Row: Fox Logo (clickable) on the left, SidebarTrigger on the right */}
+      <Sidebar
+        collapsible="icon"
+        side="left"
+        // Give the sidebar a border on the right to match the rest of the layout
+        className="border-r flex-col  border-gray-200 dark:border-gray-700"
+      >
+        {/* Header Row */}
         <div
-          className={`flex items-center ${isCollapsed ? 'justify-center w-full px-0' : 'justify-between px-3'} pt-3`}
+          className={`flex items-center ${
+            isCollapsed ? 'justify-center w-full px-0' : 'justify-between px-3'
+          } pt-3`}
         >
           {!isCollapsed && (
             <div className="flex flex-1 items-center justify-between">
+              {/* Logo + Title */}
               <Button
                 onClick={() => router.push('/')}
                 variant="ghost"
-                className="inline-flex items-center gap-2 pl-0 rounded-md ease-in-out"
+                className="inline-flex items-center gap-2 pl-0 rounded-md"
               >
                 <Image
                   src="/codefox.svg"
                   alt="CodeFox Logo"
-                  width={40}
-                  height={40}
+                  width={36}
+                  height={36}
                   className="dark:invert"
                 />
                 <span className="text-primary-500 font-semibold text-base">
@@ -149,8 +156,9 @@ function ChatSideBarComponent({
                 </span>
               </Button>
 
+              {/* Collapse Trigger */}
               <SidebarTrigger
-                className="flex items-center justify-center w-12 h-12"
+                className="flex items-center justify-center w-10 h-10 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                 onClick={() => setIsCollapsed(!isCollapsed)}
               />
             </div>
@@ -158,66 +166,52 @@ function ChatSideBarComponent({
 
           {isCollapsed && (
             <SidebarTrigger
-              className="flex items-center justify-center w-full p-2 mt"
+              className="flex items-center justify-center w-full p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
               onClick={() => setIsCollapsed(!isCollapsed)}
             />
           )}
         </div>
 
         {/* Divider Line */}
-        <div className="border-t border-dotted border-gray-300 my-2 w-full mx-auto" />
+        <div className="border-t border-gray-200 dark:border-gray-700 my-2 w-full" />
 
         {/* New Project Button */}
         <div
-          className={`flex ${isCollapsed ? 'justify-center items-center w-full px-0' : ''} w-full mt-4`}
+          className={`flex ${
+            isCollapsed ? 'justify-center items-center w-full px-0' : ''
+          } w-full mt-3`}
         >
           <Button
             onClick={() => {
-              if (isCollapsed) {
-                router.push('/');
-              } else {
-                setIsModalOpen(true);
-              }
+              router.push('/');
+              // if (isCollapsed) {
+              //   router.push('/');
+              // } else {
+              //   setIsModalOpen(true);
+              // }
             }}
             variant="ghost"
-            className={`h-7 w-7 flex items-center justify-center rounded-md ease-in-out ${
-              !isCollapsed && 'w-full gap-2 pl-4 justify-start'
-            }`}
-          >
-            <svg
-              data-name="Layer 1"
-              viewBox="0 0 32 32"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              className={
-                isCollapsed
-                  ? 'w-8 h-8 min-w-[32px] min-h-[32px] ml-[-5px] mt-[-10px]'
-                  : 'w-10 h-10 min-w-[32px] min-h-[32px] mr-1'
-              }
-              strokeWidth="0.1"
-            >
-              <g transform="scale(-1,1) translate(-32,0)">
-                <path
-                  d="M5,8A1,1,0,0,0,7,8V7H8A1,1,0,0,0,8,5H7V4A1,1,0,0,0,5,4V5H4A1,1,0,0,0,4,7H5ZM18,5H12a1,1,0,0,0,0,2h6a1,1,0,0,1,1,1v9.72l-1.57-1.45a1,1,0,0,0-.68-.27H8a1,1,0,0,1-1-1V12a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3h8.36l3,2.73A1,1,0,0,0,20,21a1.1,1.1,0,0,0,.4-.08A1,1,0,0,0,21,20V8A3,3,0,0,0,18,5Z"
-                  fill="#808080"
-                />
-              </g>
-            </svg>
-            {!isCollapsed && (
-              <span className="text-gray-600 hover:text-gray-800 font-semibold text-sm relative -top-0.5">
-                New Project
-              </span>
+            className={cn(
+              'h-9 px-5 text-sm font-medium flex justify-start items-center gap-2 rounded-sm transition-colors  w-full',
+              isCollapsed &&
+                'justify-center w-11 h-11 px-0 bg-white border-gray-700/30 border dark:bg-gray-800 dark:border-gray-700'
             )}
+          >
+            <HomeIcon className="h-4 w-4" />
+            {!isCollapsed && <span>Home</span>}
           </Button>
         </div>
-
         {/* Chat List with Virtualization */}
-        <SidebarContent>
+        <SidebarContent className="">
           <SidebarGroup>
             <SidebarGroupContent>
               {!isCollapsed && chats.length > 0 && (
                 <FixedSizeList
-                  height={Math.min(window.innerHeight - 300, chats.length * 56)} // 56px is the height of each chat item
+                  height={Math.min(
+                    // Adjust the max height for your layout
+                    window.innerHeight - 300,
+                    chats.length * 56
+                  )}
                   width="100%"
                   itemCount={chats.length}
                   itemSize={56}
@@ -237,7 +231,9 @@ function ChatSideBarComponent({
 
         {/* Footer Settings */}
         <SidebarFooter
-          className={`mt-auto ${isCollapsed ? 'flex justify-center px-0' : ''}`}
+          className={`mt-auto border-t border-gray-200  dark:border-gray-700 ${
+            isCollapsed ? 'flex justify-center items-center  px-0' : 'px-3'
+          }`}
         >
           <UserSettingsBar isSimple={false} />
         </SidebarFooter>
@@ -251,7 +247,6 @@ function ChatSideBarComponent({
   );
 }
 
-// Optimized memo comparison
 export const ChatSideBar = memo(
   ChatSideBarComponent,
   (prevProps: SidebarProps, nextProps: SidebarProps) => {
@@ -260,7 +255,7 @@ export const ChatSideBar = memo(
     if (prevProps.error !== nextProps.error) return false;
     if (prevProps.chats.length !== nextProps.chats.length) return false;
 
-    // Only compare chat IDs instead of full objects
+    // Compare chat IDs only
     const prevIds = prevProps.chats.map((chat) => chat.id).join(',');
     const nextIds = nextProps.chats.map((chat) => chat.id).join(',');
     return prevIds === nextIds;
@@ -287,7 +282,7 @@ export function SidebarWrapper({
     refetchChats,
   } = useChatList();
 
-  // When user collapses or expands the sidebar, update both local state and Sidebar context
+  // Toggle sidebar collapsed
   const handleCollapsedChange = useCallback(
     (collapsed: boolean) => {
       setIsCollapsed(collapsed);
@@ -297,15 +292,15 @@ export function SidebarWrapper({
   );
 
   return (
-    <div className="min-h-screen flex">
+    <div className="min-h-screen flex bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 font-sans">
       {isAuthorized && (
         <motion.div
-          initial={{ x: isCollapsed ? -80 : -250, opacity: 0 }}
+          initial={{ x: isCollapsed ? -55 : -250, opacity: 0 }}
           animate={{ x: 0, opacity: 1 }}
-          exit={{ x: isCollapsed ? -80 : -250, opacity: 0 }}
+          exit={{ x: isCollapsed ? -55 : -250, opacity: 0 }}
           transition={{ type: 'spring', stiffness: 80, damping: 20 }}
           className="fixed left-0 top-0 h-full z-50"
-          style={{ width: isCollapsed ? '80px' : '250px' }}
+          style={{ width: isCollapsed ? '55px' : '250px' }}
         >
           <ChatSideBar
             setIsModalOpen={() => {}}
@@ -325,7 +320,7 @@ export function SidebarWrapper({
       <div
         className="transition-all duration-300 flex justify-center w-full"
         style={{
-          marginLeft: isAuthorized ? (isCollapsed ? '80px' : '250px') : '0px',
+          marginLeft: isAuthorized ? (isCollapsed ? '55px' : '250px') : '0px',
         }}
       >
         <div className="w-full">{children}</div>
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
new file mode 100644
index 00000000..9c6c4d9b
--- /dev/null
+++ b/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index 813199e1..4e7e429c 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -120,17 +120,22 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      // Use flex + justify-between so the text is on the left
+      // and the check indicator is on the right
+      'relative flex w-full items-center justify-between cursor-default select-none rounded-sm py-1.5 px-2 text-sm outline-none',
+      'focus:bg-accent focus:text-accent-foreground',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
   >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
+    {/* The main text on the left */}
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+
+    {/* The check icon on the right */}
+    <SelectPrimitive.ItemIndicator>
+      <CheckIcon className="h-4 w-4" />
+    </SelectPrimitive.ItemIndicator>
   </SelectPrimitive.Item>
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index 06689f68..9c99fd20 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -290,8 +290,8 @@ const SidebarRail = React.forwardRef<
 >(({ className, setIsSimple, isSimple, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    toggleSidebar(); // 保留原有的逻辑
-    setIsSimple(!isSimple); // 更新 isSimple 状态
+    toggleSidebar();
+    setIsSimple(!isSimple);
   };
 
   return (
diff --git a/frontend/src/components/user-settings-bar.tsx b/frontend/src/components/user-settings-bar.tsx
index a72a4bdd..abe0f379 100644
--- a/frontend/src/components/user-settings-bar.tsx
+++ b/frontend/src/components/user-settings-bar.tsx
@@ -89,7 +89,6 @@ export const UserSettingsBar = ({ isSimple }: UserSettingsProps) => {
           />
           <AvatarFallback>{avatarFallback}</AvatarFallback>
         </SmallAvatar>
-        {!isSimple && <span className="truncate">{displayUsername}</span>}
       </Button>
     );
   }, [
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index db6d5831..2f70d7fa 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -19,6 +19,11 @@ const config = {
       },
     },
     extend: {
+      fontFamily: {
+        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
+        serif: ['var(--font-playfair)', 'Georgia', 'serif'],
+        mono: ['ui-monospace', 'monospace'],
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c88cd79..37fdfda0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -380,7 +380,7 @@ importers:
         specifier: ^1.1.1
         version: 1.1.2(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
       '@radix-ui/react-slot':
-        specifier: ^1.1.1
+        specifier: ^1.1.2
         version: 1.1.2(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-tabs':
         specifier: ^1.1.2
@@ -7939,96 +7939,6 @@ packages:
     dev: false
     optional: true
 
-  /@oxc-resolver/binding-darwin-arm64@5.0.0:
-    resolution: {integrity: sha512-zwHAf+owoxSWTDD4dFuwW+FkpaDzbaL30H5Ltocb+RmLyg4WKuteusRLKh5Y8b/cyu7UzhxM0haIqQjyqA1iuA==}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-darwin-x64@5.0.0:
-    resolution: {integrity: sha512-1lS3aBNVjVQKBvZdHm13+8tSjvu2Tl1Cv4FnUyMYxqx6+rsom2YaOylS5LhDUwfZu0zAgpLMwK6kGpF/UPncNg==}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-freebsd-x64@5.0.0:
-    resolution: {integrity: sha512-q9sRd68wC1/AJ0eu6ClhxlklVfe8gH4wrUkSyEbIYTZ8zY5yjsLY3fpqqsaCvWJUx65nW+XtnAxCGCi5AXr1Mw==}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-linux-arm-gnueabihf@5.0.0:
-    resolution: {integrity: sha512-catYavWsvqViYnCveQjhrK6yVYDEPFvIOgGLxnz5r2dcgrjpmquzREoyss0L2QG/J5HTTbwqwZ1kk+g56hE/1A==}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-linux-arm64-gnu@5.0.0:
-    resolution: {integrity: sha512-l/0pWoQM5kVmJLg4frQ1mKZOXgi0ex/hzvFt8E4WK2ifXr5JgKFUokxsb/oat7f5YzdJJh5r9p+qS/t3dA26Aw==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-linux-arm64-musl@5.0.0:
-    resolution: {integrity: sha512-bx0oz/oaAW4FGYqpIIxJCnmgb906YfMhTEWCJvYkxjpEI8VKLJEL3PQevYiqDq36SA0yRLJ/sQK2fqry8AFBfA==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-linux-x64-gnu@5.0.0:
-    resolution: {integrity: sha512-4PH++qbSIhlRsFYdN1P9neDov4OGhTGo5nbQ1D7AL6gWFLo3gdZTc00FM2y8JjeTcPWEXkViZuwpuc0w5i6qHg==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-linux-x64-musl@5.0.0:
-    resolution: {integrity: sha512-mLfQFpX3/5y9oWi0b+9FbWDkL2hM0Y29653beCHiHxAdGyVgb2DsJbK74WkMTwtSz9by8vyBh8jGPZcg1yLZbQ==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-wasm32-wasi@5.0.0:
-    resolution: {integrity: sha512-uEhsAZSo65qsRi6+IfBTEUUFbjg7T2yruJeLYpFfEATpm3ory5Mgo5vx3L0c2/Cz1OUZXBgp3A8x6VMUB2jT2A==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    requiresBuild: true
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.7
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-win32-arm64-msvc@5.0.0:
-    resolution: {integrity: sha512-8DbSso9Jp1ns8AYuZFXdRfAcdJrzZwkFm/RjPuvAPTENsm685dosBF8G6gTHQlHvULnk6o3sa9ygZaTGC/UoEw==}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@oxc-resolver/binding-win32-x64-msvc@5.0.0:
-    resolution: {integrity: sha512-ylppfPEg63NuRXOPNsXFlgyl37JrtRn0QMO26X3K3Ytp5HtLrMreQMGVtgr30e1l2YmAWqhvmKlCryOqzGPD/g==}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@parcel/watcher-android-arm64@2.5.1:
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -10794,6 +10704,96 @@ packages:
   /@ungap/structured-clone@1.3.0:
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
+  /@unrs/rspack-resolver-binding-darwin-arm64@1.1.2:
+    resolution: {integrity: sha512-bQx2L40UF5XxsXwkD26PzuspqUbUswWVbmclmUC+c83Cv/EFrFJ1JaZj5Q5jyYglKGOtyIWY/hXTCdWRN9vT0Q==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-darwin-x64@1.1.2:
+    resolution: {integrity: sha512-dMi9a7//BsuPTnhWEDxmdKZ6wxQlPnAob8VSjefGbKX/a+pHfTaX1pm/jv2VPdarP96IIjCKPatJS/TtLQeGQA==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-freebsd-x64@1.1.2:
+    resolution: {integrity: sha512-RiBZQ+LSORQObfhV1yH7jGz+4sN3SDYtV53jgc8tUVvqdqVDaUm1KA3zHLffmoiYNGrYkE3sSreGC+FVpsB4Vg==}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-linux-arm-gnueabihf@1.1.2:
+    resolution: {integrity: sha512-IyKIFBtOvuPCJt1WPx9e9ovTGhZzrIbW11vWzw4aPmx3VShE+YcMpAldqQubdCep0UVKZyFt+2hQDQZwFiJ4jg==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-linux-arm64-gnu@1.1.2:
+    resolution: {integrity: sha512-RfYtlCtJrv5i6TO4dSlpbyOJX9Zbhmkqrr9hjDfr6YyE5KD0ywLRzw8UjXsohxG1XWgRpb2tvPuRYtURJwbqWg==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-linux-arm64-musl@1.1.2:
+    resolution: {integrity: sha512-MaITzkoqsn1Rm3+YnplubgAQEfOt+2jHfFvuFhXseUfcfbxe8Zyc3TM7LKwgv7mRVjIl+/yYN5JqL0cjbnhAnQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-linux-x64-gnu@1.1.2:
+    resolution: {integrity: sha512-Nu981XmzQqis/uB3j4Gi3p5BYCd/zReU5zbJmjMrEH7IIRH0dxZpdOmS/+KwEk6ao7Xd8P2D2gDHpHD/QTp0aQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-linux-x64-musl@1.1.2:
+    resolution: {integrity: sha512-xJupeDvaRpV0ADMuG1dY9jkOjhUzTqtykvchiU2NldSD+nafSUcMWnoqzNUx7HGiqbTMOw9d9xT8ZiFs+6ZFyQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-wasm32-wasi@1.1.2:
+    resolution: {integrity: sha512-un6X/xInks+KEgGpIHFV8BdoODHRohaDRvOwtjq+FXuoI4Ga0P6sLRvf4rPSZDvoMnqUhZtVNG0jG9oxOnrrLQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    requiresBuild: true
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.7
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-win32-arm64-msvc@1.1.2:
+    resolution: {integrity: sha512-2lCFkeT1HYUb/OOStBS1m67aZOf9BQxRA+Wf/xs94CGgzmoQt7H4V/BrkB/GSGKsudXjkiwt2oHNkHiowAS90A==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@unrs/rspack-resolver-binding-win32-x64-msvc@1.1.2:
+    resolution: {integrity: sha512-EYfya5HCQ/8Yfy7rvAAX2rGytu81+d/CIhNCbZfNKLQ690/qFsdEeTXRsMQW1afHoluMM50PsjPYu8ndy8fSQg==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@webassemblyjs/ast@1.14.1:
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
     dependencies:
@@ -14050,8 +14050,8 @@ packages:
       '@typescript-eslint/parser': 8.26.1(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.9.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-typescript@3.9.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.4(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -14081,8 +14081,8 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-import-resolver-typescript@3.9.0(eslint-plugin-import@2.31.0)(eslint@8.57.1):
-    resolution: {integrity: sha512-EUcFmaz0zAa6P2C9jAb5XDymRld8S6TURvWcIW7y+czOW+K8hrjgQgbhBsNE0J/dDZ6HLfcn70LqnIil9W+ICw==}
+  /eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+    resolution: {integrity: sha512-euxa5rTGqHeqVxmOHT25hpk58PxkQ4mNoX6Yun4ooGaCHAxOCojJYNvjmyeOQxj/LyW+3fulH0+xtk+p2kPPTw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -14097,17 +14097,17 @@ packages:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0(supports-color@5.5.0)
       eslint: 8.57.1
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-typescript@3.9.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1)
       get-tsconfig: 4.10.0
       is-bun-module: 1.3.0
-      oxc-resolver: 5.0.0
+      rspack-resolver: 1.1.2
       stable-hash: 0.0.5
       tinyglobby: 0.2.12
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.12.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.9.0)(eslint@8.57.1):
+  /eslint-module-utils@2.12.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1):
     resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -14132,12 +14132,12 @@ packages:
       debug: 3.2.7
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.9.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-typescript@3.9.0)(eslint@8.57.1):
+  /eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1):
     resolution: {integrity: sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -14157,7 +14157,7 @@ packages:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.9.0)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.26.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -20535,22 +20535,6 @@ packages:
       safe-push-apply: 1.0.0
     dev: true
 
-  /oxc-resolver@5.0.0:
-    resolution: {integrity: sha512-66fopyAqCN8Mx4tzNiBXWbk8asCSuxUWN62gwTc3yfRs7JfWhX/eVJCf+fUrfbNOdQVOWn+o8pAKllp76ysMXA==}
-    optionalDependencies:
-      '@oxc-resolver/binding-darwin-arm64': 5.0.0
-      '@oxc-resolver/binding-darwin-x64': 5.0.0
-      '@oxc-resolver/binding-freebsd-x64': 5.0.0
-      '@oxc-resolver/binding-linux-arm-gnueabihf': 5.0.0
-      '@oxc-resolver/binding-linux-arm64-gnu': 5.0.0
-      '@oxc-resolver/binding-linux-arm64-musl': 5.0.0
-      '@oxc-resolver/binding-linux-x64-gnu': 5.0.0
-      '@oxc-resolver/binding-linux-x64-musl': 5.0.0
-      '@oxc-resolver/binding-wasm32-wasi': 5.0.0
-      '@oxc-resolver/binding-win32-arm64-msvc': 5.0.0
-      '@oxc-resolver/binding-win32-x64-msvc': 5.0.0
-    dev: true
-
   /p-cancelable@3.0.0:
     resolution: {integrity: sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==}
     engines: {node: '>=12.20'}
@@ -23218,6 +23202,22 @@ packages:
     dependencies:
       glob: 10.4.5
 
+  /rspack-resolver@1.1.2:
+    resolution: {integrity: sha512-eHhz+9JWHFdbl/CVVqEP6kviLFZqw1s0MWxLdsGMtUKUspSO3SERptPohmrUIC9jT1bGV9Bd3+r8AmWbdfNAzQ==}
+    optionalDependencies:
+      '@unrs/rspack-resolver-binding-darwin-arm64': 1.1.2
+      '@unrs/rspack-resolver-binding-darwin-x64': 1.1.2
+      '@unrs/rspack-resolver-binding-freebsd-x64': 1.1.2
+      '@unrs/rspack-resolver-binding-linux-arm-gnueabihf': 1.1.2
+      '@unrs/rspack-resolver-binding-linux-arm64-gnu': 1.1.2
+      '@unrs/rspack-resolver-binding-linux-arm64-musl': 1.1.2
+      '@unrs/rspack-resolver-binding-linux-x64-gnu': 1.1.2
+      '@unrs/rspack-resolver-binding-linux-x64-musl': 1.1.2
+      '@unrs/rspack-resolver-binding-wasm32-wasi': 1.1.2
+      '@unrs/rspack-resolver-binding-win32-arm64-msvc': 1.1.2
+      '@unrs/rspack-resolver-binding-win32-x64-msvc': 1.1.2
+    dev: true
+
   /rtl-detect@1.1.2:
     resolution: {integrity: sha512-PGMBq03+TTG/p/cRB7HCLKJ1MgDIi07+QU1faSjiYRfmY5UsAttV9Hs08jDAHVwcOwmVLcSJkpwyfXszVjWfIQ==}
     dev: false