updated UI

src/components/chat/Message.tsx

@@ -84,7 +84,7 @@ export function Message({ message }: MessageProps) {
     >
       {message.role === 'assistant' && (
         <Avatar className="h-8 w-8">
-          <AvatarFallback className="bg-gradient-to-br from-blue-400 to-blue-600 text-white text-xs font-medium">
+          <AvatarFallback className="bg-gradient-to-br from-purple-300 to-purple-500 text-white text-xs font-medium">
             AI
           </AvatarFallback>
         </Avatar>
@@ -95,7 +95,7 @@ export function Message({ message }: MessageProps) {
           className={cn(
             'relative rounded-2xl px-4 py-3 text-sm',
             message.role === 'user'
-              ? 'bg-blue-500 text-white'
+              ? 'bg-gradient-to-r from-purple-400 to-purple-500 text-white'
               : 'bg-muted/50 shadow-sm border border-border/50'
           )}
         >

src/components/layout/DashboardLayout/index.tsx

@@ -5,12 +5,14 @@ import { Sidebar } from '../Sidebar/index';
 
 const DashboardLayout = () => {
   return (
-    <div className="flex h-screen flex-col overflow-hidden">
+    <div className="flex h-screen flex-col overflow-hidden bg-secondary/20">
       <Header />
-      <div className="flex flex-1 overflow-hidden">
+      <div className="flex flex-1 overflow-hidden gap-6 p-6 pt-24">
         <Sidebar />
-        <main className="flex-1 overflow-y-auto bg-muted/50 p-6">
+        <main className="flex-1 overflow-y-auto rounded-2xl bg-background shadow-sm border">
-          <Outlet />
+          <div className="p-6">
+            <Outlet />
+          </div>
         </main>
       </div>
     </div>

src/components/layout/Header/index.tsx

@@ -12,35 +12,42 @@ const Header = () => {
   };
 
   return (
-    <header className="border-b bg-background">
+    <div className="fixed w-full top-0 z-50">
-      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
+      <div className="absolute inset-x-0 -top-4 h-24 bg-gradient-to-b from-background/80 via-background/50 to-background/0 pointer-events-none" />
-        <Link to="/" className="flex items-center gap-2 text-xl font-bold">
+      <header className="mt-4 mx-4">
-          <BookOpen className="h-6 w-6 text-foreground" />
+        <div className="rounded-2xl bg-background/60 backdrop-blur-xl backdrop-saturate-150 shadow-sm shadow-black/5">
-          <span>StudyAI</span>
+          <div className="h-14 px-4 flex items-center justify-between max-w-7xl mx-auto">
-        </Link>
+            <Link to="/" className="flex items-center gap-2 text-xl font-bold">
-        <nav className="flex items-center gap-4">
+              <div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
-          {session ? (
+                <BookOpen className="h-5 w-5 text-primary" />
-            <>
+              </div>
-              <Link to="/dashboard">
+              <span className="gradient-text">RAG AI</span>
-                <Button variant="ghost">Dashboard</Button>
+            </Link>
-              </Link>
+            <nav className="flex items-center gap-4">
-              <Button variant="ghost" onClick={handleSignOut}>
+              {session ? (
-                Sign out
+                <>
-              </Button>
+                  <Link to="/dashboard">
-            </>
+                    <Button variant="ghost" className="rounded-full">Dashboard</Button>
-          ) : (
+                  </Link>
-            <>
+                  <Button variant="outline" className="rounded-full" onClick={handleSignOut}>
-              <Link to="/auth/login">
+                    Sign out
-                <Button variant="ghost">Log in</Button>
+                  </Button>
-              </Link>
+                </>
-              <Link to="/auth/signup">
+              ) : (
-                <Button>Sign up</Button>
+                <>
-              </Link>
+                  <Link to="/auth/login">
-            </>
+                    <Button variant="ghost" className="rounded-full">Log in</Button>
-          )}
+                  </Link>
-        </nav>
+                  <Link to="/auth/signup">
-      </div>
+                    <Button className="rounded-full px-8 bg-primary hover:bg-primary/90">Sign up</Button>
-    </header>
+                  </Link>
+                </>
+              )}
+            </nav>
+          </div>
+        </div>
+      </header>
+    </div>
   );
 };
 

src/components/layout/Sidebar/index.tsx

@@ -13,7 +13,7 @@ const sidebarItems = [
     icon: MessageSquarePlus,
     label: 'Ask a Question',
     path: '/dashboard/ask'
-    },
+  },
   {
     icon: History,
     label: 'Study History',
@@ -36,35 +36,42 @@ const Sidebar = () => {
 
   const isActive = (path: string) => {
     if (path === '/dashboard/ask') {
-      return location.pathname === '/dashboard' || location.pathname === path;
+      return location.pathname.startsWith('/dashboard/ask') || location.pathname === '/dashboard';
     }
     return location.pathname === path;
   };
 
   return (
-    <div className="flex h-screen w-64 flex-col border-r bg-background">
+    <div className="w-64 shrink-0">
-      <nav className="flex-1 space-y-1 px-2 py-4">
+      <div className="rounded-2xl bg-background border shadow-sm h-full p-4">
-        {sidebarItems.map((item) => {
+        <nav className="space-y-2">
-          const Icon = item.icon;
+          {sidebarItems.map((item) => {
-          const active = isActive(item.path);
+            const Icon = item.icon;
+            const active = isActive(item.path);
 
-          return (
+            return (
-            <Link
+              <Link
-              key={item.path}
+                key={item.path}
-              to={item.path}
+                to={item.path}
-              className={cn(
+                className={cn(
-                'flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                  'flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200',
-                active
+                  active
-                  ? 'bg-muted text-foreground'
+                    ? 'bg-gradient-to-r from-purple-400 to-purple-500 text-white shadow-sm hover:from-purple-500 hover:to-purple-600'
-                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                    : 'text-muted-foreground hover:bg-purple-50/50 hover:text-purple-500'
-              )}
+                )}
-            >
+              >
-              <Icon className="mr-3 h-5 w-5" />
+                <Icon className={cn(
-              {item.label}
+                  'h-5 w-5',
-            </Link>
+                  active
-          );
+                    ? 'text-white'
-        })}
+                    : 'text-muted-foreground group-hover:text-purple-500'
-      </nav>
+                )} />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
     </div>
   );
 };

src/index.css

@@ -1,59 +1,65 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 252 6% 15%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 252 6% 15%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --popover-foreground: 252 6% 15%;
-    --primary: 0 0% 9%;
+    --primary: 252 87% 48%;
-    --primary-foreground: 0 0% 98%;
+    --primary-foreground: 0 0% 100%;
-    --secondary: 0 0% 96.1%;
+    --secondary: 252 16% 95%;
-    --secondary-foreground: 0 0% 9%;
+    --secondary-foreground: 252 6% 15%;
-    --muted: 0 0% 96.1%;
+    --muted: 252 16% 95%;
-    --muted-foreground: 0 0% 45.1%;
+    --muted-foreground: 252 6% 45%;
-    --accent: 0 0% 96.1%;
+    --accent: 252 16% 95%;
-    --accent-foreground: 0 0% 9%;
+    --accent-foreground: 252 6% 15%;
-    --destructive: 0 84.2% 60.2%;
+    --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
+    --border: 252 16% 90%;
-    --input: 0 0% 89.8%;
+    --input: 252 16% 90%;
-    --ring: 0 0% 3.9%;
+    --ring: 252 87% 48%;
-    --radius: 0.5rem;
+    --radius: 1rem;
   }
- 
+
   .dark {
-    --background: 0 0% 3.9%;
+    --background: 252 6% 10%;
-    --foreground: 0 0% 98%;
+    --foreground: 252 6% 95%;
-    --card: 0 0% 3.9%;
+    --card: 252 6% 10%;
-    --card-foreground: 0 0% 98%;
+    --card-foreground: 252 6% 95%;
-    --popover: 0 0% 3.9%;
+    --popover: 252 6% 10%;
-    --popover-foreground: 0 0% 98%;
+    --popover-foreground: 252 6% 95%;
-    --primary: 0 0% 98%;
+    --primary: 252 87% 48%;
-    --primary-foreground: 0 0% 9%;
+    --primary-foreground: 0 0% 100%;
-    --secondary: 0 0% 14.9%;
+    --secondary: 252 6% 15%;
-    --secondary-foreground: 0 0% 98%;
+    --secondary-foreground: 252 6% 95%;
-    --muted: 0 0% 14.9%;
+    --muted: 252 6% 15%;
-    --muted-foreground: 0 0% 63.9%;
+    --muted-foreground: 252 6% 65%;
-    --accent: 0 0% 14.9%;
+    --accent: 252 6% 15%;
-    --accent-foreground: 0 0% 98%;
+    --accent-foreground: 252 6% 95%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive-foreground: 252 6% 95%;
-    --border: 0 0% 14.9%;
+    --border: 252 6% 15%;
-    --input: 0 0% 14.9%;
+    --input: 252 6% 15%;
-    --ring: 0 0% 83.1%;
+    --ring: 252 87% 48%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
   }
-}
+}
+
+@layer utilities {
+  .gradient-text {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-400;
+  }
+}

src/pages/Home.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowRight, Brain, Sparkles, Users, BookOpen } from 'lucide-react';
+import { ArrowRight, Brain, Sparkles, Users, FileText, Zap, Shield, MessageSquare } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { Button } from '../components/ui/Button';
 import { Header } from '../components/layout/Header';
@@ -7,41 +7,150 @@ import { Header } from '../components/layout/Header';
 function Home() {
   return (
     <div className="flex h-screen flex-col overflow-hidden">
-      <header className="border-b bg-background">
+      <Header />
-        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
+      <main className="flex-1 overflow-y-auto pt-24">
-          <Link to="/" className="flex items-center gap-2 text-xl font-bold">
-            <BookOpen className="h-6 w-6 text-foreground" />
-            <span>StudyAI</span>
-          </Link>
-          <nav className="flex items-center gap-4">
-            <Link to="/auth/login">
-              <Button variant="ghost">Log in</Button>
-            </Link>
-            <Link to="/auth/signup">
-              <Button>Sign up</Button>
-            </Link>
-          </nav>
-        </div>
-      </header>
-
-      <main className="flex-1 overflow-y-auto">
         <div className="container mx-auto px-4">
+          {/* Hero Section */}
           <section className="py-20">
-            <div className="text-center">
+            <div className="max-w-4xl mx-auto text-center space-y-6 animate-in fade-in slide-in-from-bottom-8 duration-1000">
-              <h1 className="text-4xl font-bold sm:text-6xl">
+
-                Learn Smarter with AI
+              <h1 className="text-6xl font-bold mb-6 gradient-text leading-tight">
+                Advanced Document Intelligence with RAG AI
               </h1>
-              <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
+              <p className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto">
-                Enhance your learning experience with personalized AI assistance.
+                Experience the power of Retrieval-Augmented Generation. Process documents, get instant insights, and learn more effectively with our advanced AI system.
-                Ask questions, get instant feedback, and track your progress.
               </p>
-              <div className="mt-10 flex justify-center gap-4">
+              <div className="flex justify-center gap-4">
                 <Link to="/auth/signup">
-                  <Button size="lg">Get Started</Button>
+                  <Button size="lg" className="rounded-full px-8 hover:scale-105 transition-transform">
+                    Get Started <ArrowRight className="ml-2 h-5 w-5" />
+                  </Button>
                 </Link>
                 <Link to="/auth/login">
-                  <Button variant="outline" size="lg">
+                  <Button size="lg" variant="outline" className="rounded-full px-8 hover:bg-secondary transition-colors">
-                    Learn More
+                    Try Demo
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </section>
+
+          {/* Stats Section */}
+          <section className="py-12">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-5xl mx-auto">
+              <div className="text-center p-6 rounded-2xl bg-card border animate-in fade-in-50 duration-1000 hover:shadow-lg transition-all">
+                <div className="text-4xl font-bold gradient-text mb-2">95%</div>
+                <div className="text-muted-foreground">Query Accuracy</div>
+              </div>
+              <div className="text-center p-6 rounded-2xl bg-card border animate-in fade-in-50 duration-1000 delay-150 hover:shadow-lg transition-all">
+                <div className="text-4xl font-bold gradient-text mb-2">1000+</div>
+                <div className="text-muted-foreground">Daily Queries</div>
+              </div>
+              <div className="text-center p-6 rounded-2xl bg-card border animate-in fade-in-50 duration-1000 delay-300 hover:shadow-lg transition-all">
+                <div className="text-4xl font-bold gradient-text mb-2">90%</div>
+                <div className="text-muted-foreground">Relevance Rate</div>
+              </div>
+              <div className="text-center p-6 rounded-2xl bg-card border animate-in fade-in-50 duration-1000 delay-450 hover:shadow-lg transition-all">
+                <div className="text-4xl font-bold gradient-text mb-2">40%</div>
+                <div className="text-muted-foreground">Time Saved</div>
+              </div>
+            </div>
+          </section>
+
+          {/* Features Section */}
+          <section className="py-20">
+            <div className="text-center mb-16 animate-in fade-in-50">
+              <h2 className="text-3xl font-bold mb-4">Powered by Advanced RAG Technology</h2>
+              <p className="text-muted-foreground max-w-2xl mx-auto">
+                Our system combines state-of-the-art retrieval and generation to provide accurate, context-aware responses.
+              </p>
+            </div>
+            <div className="grid md:grid-cols-3 gap-8">
+              <div className="p-6 rounded-2xl bg-card border hover:shadow-lg transition-all group">
+                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                  <Brain className="h-6 w-6 text-primary" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Intelligent Analysis</h3>
+                <p className="text-muted-foreground">
+                  Advanced RAG system processes your documents with 95% accuracy for precise answers.
+                </p>
+              </div>
+
+              <div className="p-6 rounded-2xl bg-card border hover:shadow-lg transition-all group">
+                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                  <Sparkles className="h-6 w-6 text-primary" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Smart Retrieval</h3>
+                <p className="text-muted-foreground">
+                  Context-aware document retrieval with semantic understanding of your content.
+                </p>
+              </div>
+
+              <div className="p-6 rounded-2xl bg-card border hover:shadow-lg transition-all group">
+                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                  <Users className="h-6 w-6 text-primary" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Source Attribution</h3>
+                <p className="text-muted-foreground">
+                  Transparent source referencing and attribution for all retrieved information.
+                </p>
+              </div>
+            </div>
+          </section>
+
+          {/* How It Works Section */}
+          <section className="py-20 bg-secondary/30 -mx-4 px-4">
+            <div className="max-w-6xl mx-auto">
+              <div className="text-center mb-16">
+                <h2 className="text-3xl font-bold mb-4">How RAG AI Works</h2>
+                <p className="text-muted-foreground max-w-2xl mx-auto">
+                  Experience the power of intelligent document processing in four simple steps.
+                </p>
+              </div>
+              <div className="grid md:grid-cols-4 gap-8">
+                <div className="text-center group">
+                  <div className="h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
+                    <FileText className="h-8 w-8 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">Upload Documents</h3>
+                  <p className="text-sm text-muted-foreground">Upload your documents in any format</p>
+                </div>
+                <div className="text-center group">
+                  <div className="h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
+                    <Zap className="h-8 w-8 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">AI Processing</h3>
+                  <p className="text-sm text-muted-foreground">Our RAG system analyzes and indexes your content</p>
+                </div>
+                <div className="text-center group">
+                  <div className="h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
+                    <MessageSquare className="h-8 w-8 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">Ask Questions</h3>
+                  <p className="text-sm text-muted-foreground">Get instant, accurate answers from your materials</p>
+                </div>
+                <div className="text-center group">
+                  <div className="h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
+                    <Shield className="h-8 w-8 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">Track Progress</h3>
+                  <p className="text-sm text-muted-foreground">Monitor insights and document processing</p>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* CTA Section */}
+          <section className="py-20">
+            <div className="max-w-4xl mx-auto text-center space-y-6">
+              <h2 className="text-3xl font-bold mb-4">Ready to Transform Your Document Processing?</h2>
+              <p className="text-muted-foreground max-w-2xl mx-auto mb-8">
+                Join thousands of users who are already using RAG AI for intelligent document analysis.
+              </p>
+              <div className="flex justify-center gap-4">
+                <Link to="/auth/signup">
+                  <Button size="lg" className="rounded-full px-8 hover:scale-105 transition-transform">
+                    Get Started Now <ArrowRight className="ml-2 h-5 w-5" />
                   </Button>
                 </Link>
               </div>

src/pages/auth/Login.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { Button } from '../../components/ui/Button';
 import { useAuth } from '../../contexts/AuthContext';
+import { BookOpen, ArrowRight } from 'lucide-react';
 
 interface LocationState {
   from?: string;
@@ -49,68 +50,88 @@ export default function Login() {
   };
 
   return (
-    <div className="mx-auto max-w-md space-y-6 p-6">
+    <div className="min-h-screen pt-20 flex flex-col">
-      <div className="space-y-2 text-center">
+      <div className="mx-auto max-w-md space-y-8 p-8 animate-in fade-in-50 duration-500 slide-in-from-bottom-8">
-        <h1 className="text-3xl font-bold">Welcome Back</h1>
+        <div className="space-y-2 text-center">
-        <p className="text-muted-foreground">Enter your credentials to access your account</p>
+          <div className="flex justify-center mb-6">
+            <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center">
+              <BookOpen className="h-6 w-6 text-primary" />
+            </div>
+          </div>
+
+          <h1 className="text-3xl font-bold gradient-text">Welcome to RAG AI</h1>
+          <p className="text-muted-foreground">Sign in to access intelligent document processing</p>
+        </div>
+
+        {message && (
+          <div className="rounded-xl bg-primary/10 p-4 text-sm text-primary animate-in fade-in-50 slide-in-from-top-4">
+            {message}
+          </div>
+        )}
+
+        {error && (
+          <div className="rounded-xl bg-destructive/10 p-4 text-sm text-destructive animate-in fade-in-50 slide-in-from-top-4">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1.5">
+                Email
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                value={formData.email}
+                onChange={handleChange}
+                className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="you@example.com"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1.5">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                value={formData.password}
+                onChange={handleChange}
+                className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          <Button
+            type="submit"
+            className="w-full rounded-xl h-11 hover:scale-105 transition-transform"
+            disabled={loading}
+          >
+            {loading ? (
+              'Signing in...'
+            ) : (
+              <>
+                Sign in <ArrowRight className="ml-2 h-4 w-4" />
+              </>
+            )}
+          </Button>
+        </form>
+
+        <p className="text-center text-sm text-muted-foreground">
+          Don't have an account?{' '}
+          <Link to="/auth/signup" className="font-medium text-primary hover:text-primary/90 transition-colors">
+            Sign up
+          </Link>
+        </p>
       </div>
-
-      {message && (
-        <div className="rounded-lg bg-primary/15 p-3 text-sm text-primary">
-          {message}
-        </div>
-      )}
-
-      {error && (
-        <div className="rounded-lg bg-destructive/15 p-3 text-sm text-destructive">
-          {error}
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="email" className="block text-sm font-medium text-foreground">
-            Email
-          </label>
-          <input
-            id="email"
-            name="email"
-            type="email"
-            required
-            value={formData.email}
-            onChange={handleChange}
-            className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
-            placeholder="you@example.com"
-          />
-        </div>
-
-        <div>
-          <label htmlFor="password" className="block text-sm font-medium text-foreground">
-            Password
-          </label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            required
-            value={formData.password}
-            onChange={handleChange}
-            className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
-            placeholder="••••••••"
-          />
-        </div>
-
-        <Button type="submit" className="w-full" disabled={loading}>
-          {loading ? 'Signing in...' : 'Sign in'}
-        </Button>
-      </form>
-
-      <p className="text-center text-sm text-muted-foreground">
-        Don't have an account?{' '}
-        <Link to="/auth/signup" className="font-medium text-primary hover:text-primary/90">
-          Sign up
-        </Link>
-      </p>
     </div>
   );
 }

src/pages/auth/Signup.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Button } from '../../components/ui/Button';
 import { useAuth } from '../../contexts/AuthContext';
+import { BookOpen, ArrowRight } from 'lucide-react';
 
 export default function Signup() {
   const navigate = useNavigate();
@@ -48,78 +49,105 @@ export default function Signup() {
   };
 
   return (
-    <div className="mx-auto max-w-md space-y-6 p-6">
+    <div className="min-h-screen pt-20 flex flex-col">
-      <div className="space-y-2 text-center">
+      <div className="mx-auto max-w-md space-y-8 p-8 animate-in fade-in-50 duration-500 slide-in-from-bottom-8">
-        <h1 className="text-3xl font-bold">Create an Account</h1>
+        <div className="space-y-2 text-center">
-        <p className="text-muted-foreground">Enter your details to create your account</p>
+          <div className="flex justify-center mb-6">
+            <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center">
+              <BookOpen className="h-6 w-6 text-primary" />
+            </div>
+          </div>
+          <h1 className="text-3xl font-bold gradient-text">Join RAG AI</h1>
+          <p className="text-muted-foreground">Experience intelligent document processing with AI</p>
+        </div>
+
+        {error && (
+          <div className="rounded-xl bg-destructive/10 p-4 text-sm text-destructive animate-in fade-in-50 slide-in-from-top-4">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1.5">
+                Email
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                value={formData.email}
+                onChange={handleChange}
+                className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="you@example.com"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1.5">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                value={formData.password}
+                onChange={handleChange}
+                className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="••••••••"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-1.5">
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                required
+                value={formData.confirmPassword}
+                onChange={handleChange}
+                className="block w-full rounded-xl border border-input bg-background px-4 py-2.5 transition-colors hover:border-primary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          <Button
+            type="submit"
+            className="w-full rounded-xl h-11 hover:scale-105 transition-transform"
+            disabled={loading}
+          >
+            {loading ? (
+              'Creating account...'
+            ) : (
+              <>
+                Create account <ArrowRight className="ml-2 h-4 w-4" />
+              </>
+            )}
+          </Button>
+        </form>
+
+        <div className="space-y-4">
+          <p className="text-center text-sm text-muted-foreground">
+            Already have an account?{' '}
+            <Link to="/auth/login" className="font-medium text-primary hover:text-primary/90 transition-colors">
+              Sign in
+            </Link>
+          </p>
+          <p className="text-center text-xs text-muted-foreground">
+            By creating an account, you agree to our{' '}
+            <Link to="#" className="underline hover:text-foreground transition-colors">Terms of Service</Link>
+            {' '}and{' '}
+            <Link to="#" className="underline hover:text-foreground transition-colors">Privacy Policy</Link>
+          </p>
+        </div>
       </div>
-
-      {error && (
-        <div className="rounded-lg bg-destructive/15 p-3 text-sm text-destructive">
-          {error}
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="email" className="block text-sm font-medium text-foreground">
-            Email
-          </label>
-          <input
-            id="email"
-            name="email"
-            type="email"
-            required
-            value={formData.email}
-            onChange={handleChange}
-            className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
-            placeholder="you@example.com"
-          />
-        </div>
-
-        <div>
-          <label htmlFor="password" className="block text-sm font-medium text-foreground">
-            Password
-          </label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            required
-            value={formData.password}
-            onChange={handleChange}
-            className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
-            placeholder="••••••••"
-          />
-        </div>
-
-        <div>
-          <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
-            Confirm Password
-          </label>
-          <input
-            id="confirmPassword"
-            name="confirmPassword"
-            type="password"
-            required
-            value={formData.confirmPassword}
-            onChange={handleChange}
-            className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
-            placeholder="••••••••"
-          />
-        </div>
-
-        <Button type="submit" className="w-full" disabled={loading}>
-          {loading ? 'Creating account...' : 'Create account'}
-        </Button>
-      </form>
-
-      <p className="text-center text-sm text-muted-foreground">
-        Already have an account?{' '}
-        <Link to="/auth/login" className="font-medium text-primary hover:text-primary/90">
-          Sign in
-        </Link>
-      </p>
     </div>
   );
 }

src/pages/dashboard/Settings.tsx

@@ -32,10 +32,25 @@ function Settings() {
       <h1 className="text-3xl font-bold">Settings</h1>
 
       <Tabs defaultValue="chat" className="w-full">
-        <TabsList className="mb-4">
+        <TabsList className="mb-4 bg-purple-50">
-          <TabsTrigger value="chat">Chat & RAG</TabsTrigger>
+          <TabsTrigger
-          <TabsTrigger value="ui">UI</TabsTrigger>
+            value="chat"
-          <TabsTrigger value="privacy">Privacy</TabsTrigger>
+            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-400 data-[state=active]:to-purple-500 data-[state=active]:text-white"
+          >
+            Chat & RAG
+          </TabsTrigger>
+          <TabsTrigger
+            value="ui"
+            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-400 data-[state=active]:to-purple-500 data-[state=active]:text-white"
+          >
+            UI
+          </TabsTrigger>
+          <TabsTrigger
+            value="privacy"
+            className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-400 data-[state=active]:to-purple-500 data-[state=active]:text-white"
+          >
+            Privacy
+          </TabsTrigger>
         </TabsList>
 
         <TabsContent value="chat">
@@ -45,7 +60,11 @@ function Settings() {
                 <Label>Context Retention</Label>
                 <p className="text-sm text-muted-foreground">Keep conversation context for more relevant responses</p>
               </div>
-              <Switch checked={retainContext} onCheckedChange={setRetainContext} />
+              <Switch
+                checked={retainContext}
+                onCheckedChange={setRetainContext}
+                className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
+              />
             </div>
 
             <div className="space-y-2">
@@ -57,6 +76,7 @@ function Settings() {
                 max={20}
                 min={1}
                 step={1}
+                className="[&_.SliderTrack]:bg-purple-200 [&_.SliderRange]:bg-gradient-to-r [&_.SliderRange]:from-purple-400 [&_.SliderRange]:to-purple-500 [&_.SliderThumb]:border-purple-400"
               />
             </div>
 
@@ -65,7 +85,11 @@ function Settings() {
                 <Label>Source Attribution</Label>
                 <p className="text-sm text-muted-foreground">Show source documents for responses</p>
               </div>
-              <Switch checked={showSourceAttribution} onCheckedChange={setShowSourceAttribution} />
+              <Switch
+                checked={showSourceAttribution}
+                onCheckedChange={setShowSourceAttribution}
+                className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
+              />
             </div>
 
             <div className="space-y-2">
@@ -77,6 +101,7 @@ function Settings() {
                 max={1}
                 min={0}
                 step={0.1}
+                className="[&_.SliderTrack]:bg-purple-200 [&_.SliderRange]:bg-gradient-to-r [&_.SliderRange]:from-purple-400 [&_.SliderRange]:to-purple-500 [&_.SliderThumb]:border-purple-400"
               />
             </div>
           </Card>
@@ -89,7 +114,11 @@ function Settings() {
                 <Label>Dark Mode</Label>
                 <p className="text-sm text-muted-foreground">Enable dark color theme</p>
               </div>
-              <Switch checked={darkMode} onCheckedChange={setDarkMode} />
+              <Switch
+                checked={darkMode}
+                onCheckedChange={setDarkMode}
+                className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
+              />
             </div>
 
             <div className="flex items-center justify-between">
@@ -97,7 +126,11 @@ function Settings() {
                 <Label>Compact View</Label>
                 <p className="text-sm text-muted-foreground">Reduce spacing in chat interface</p>
               </div>
-              <Switch checked={compactView} onCheckedChange={setCompactView} />
+              <Switch
+                checked={compactView}
+                onCheckedChange={setCompactView}
+                className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
+              />
             </div>
 
             <div className="flex items-center justify-between">
@@ -105,7 +138,11 @@ function Settings() {
                 <Label>Message Grouping</Label>
                 <p className="text-sm text-muted-foreground">Group consecutive messages from the same source</p>
               </div>
-              <Switch checked={messageGrouping} onCheckedChange={setMessageGrouping} />
+              <Switch
+                checked={messageGrouping}
+                onCheckedChange={setMessageGrouping}
+                className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
+              />
             </div>
           </Card>
         </TabsContent>
@@ -117,7 +154,11 @@ function Settings() {
                 <Label>Save Chat History</Label>
                 <p className="text-sm text-muted-foreground">Store conversation history locally</p>
               </div>
-              <Switch checked={saveHistory} onCheckedChange={setSaveHistory} />
+              <Switch
+                checked={saveHistory}
+                onCheckedChange={setSaveHistory}
+                className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
+              />
             </div>
 
             <div className="flex items-center justify-between">
@@ -125,7 +166,11 @@ function Settings() {
                 <Label>Anonymize Data</Label>
                 <p className="text-sm text-muted-foreground">Remove personal information from logs</p>
               </div>
-              <Switch checked={anonymizeData} onCheckedChange={setAnonymizeData} />
+              <Switch
+                checked={anonymizeData}
+                onCheckedChange={setAnonymizeData}
+                className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
+              />
             </div>
 
             <div className="flex items-center justify-between">
@@ -133,15 +178,19 @@ function Settings() {
                 <Label>Share Analytics</Label>
                 <p className="text-sm text-muted-foreground">Help improve the app by sharing usage data</p>
               </div>
-              <Switch checked={shareAnalytics} onCheckedChange={setShareAnalytics} />
+              <Switch
+                checked={shareAnalytics}
+                onCheckedChange={setShareAnalytics}
+                className="data-[state=checked]:bg-gradient-to-r data-[state=checked]:from-purple-400 data-[state=checked]:to-purple-500"
+              />
             </div>
           </Card>
         </TabsContent>
       </Tabs>
 
       <div className="flex justify-end space-x-4">
-        <Button variant="outline">Reset to Defaults</Button>
+        <Button variant="outline" className="hover:bg-purple-50">Reset to Defaults</Button>
-        <Button>Save Changes</Button>
+        <Button className="bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white">Save Changes</Button>
       </div>
     </div>
   );

src/pages/dashboard/ask.tsx

@@ -182,62 +182,79 @@ export default function AskQuestion() {
   }
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="h-[calc(100vh-4rem)] flex flex-col">
-      {/* Header */}
+      {/* Main Chat Container */}
-      <div className="flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex-1 flex flex-col relative">
-        <div className="flex h-14 items-center justify-between px-4">
+        {/* Sticky Subheader */}
-          <div className="flex items-center gap-2">
+        <div className="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
-            <MessageSquarePlus className="h-5 w-5 text-muted-foreground" />
+          <div className="flex h-14 items-center justify-between px-4">
-            <div>
+            <div className="flex items-center gap-2">
-              <h1 className="text-sm font-semibold">Ask a Question</h1>
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
-              {chat && (
+                <MessageSquarePlus className="h-4 w-4 text-primary" />
-                <p className="text-xs text-muted-foreground line-clamp-1">
+              </div>
-                  {chat.title}
+              <div>
-                </p>
+                <h1 className="text-sm font-medium">Ask a Question</h1>
+                {chat && (
+                  <p className="text-xs text-muted-foreground line-clamp-1">
+                    {chat.title}
+                  </p>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleNewChat}
+                className="text-muted-foreground hover:text-primary hover:bg-primary/10"
+              >
+                <MessageSquarePlus className="mr-2 h-4 w-4" />
+                New Chat
+              </Button>
+              {chatId && !isNewChat && messages.length > 0 && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearChat}
+                  className="text-muted-foreground hover:text-primary hover:bg-primary/10"
+                >
+                  <X className="mr-2 h-4 w-4" />
+                  Clear chat
+                </Button>
+              )}
+              {hasExistingChats && (
+                <Link to="/dashboard/history">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-muted-foreground hover:text-primary hover:bg-primary/10"
+                  >
+                    <History className="mr-2 h-4 w-4" />
+                    History
+                  </Button>
+                </Link>
               )}
             </div>
           </div>
-          <div className="flex items-center gap-2">
+        </div>
-            <Button variant="ghost" size="sm" onClick={handleNewChat}>
+
-              <MessageSquarePlus className="mr-2 h-4 w-4" />
+        {/* Error Message */}
-              New Chat
+        {error && (
-            </Button>
+          <div className="flex-none mx-4 mt-4 flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
-            {chatId && !isNewChat && messages.length > 0 && (
+            <AlertCircle className="h-4 w-4" />
-              <Button variant="ghost" size="sm" onClick={clearChat}>
+            {error}
-                <X className="mr-2 h-4 w-4" />
-                Clear chat
-              </Button>
-            )}
-            {hasExistingChats && (
-              <Link to="/dashboard/history">
-                <Button variant="ghost" size="sm">
-                  <History className="mr-2 h-4 w-4" />
-                  History
-                </Button>
-              </Link>
-            )}
           </div>
-        </div>
+        )}
-      </div>
 
-      {/* Error Message */}
+        {/* Messages Container */}
-      {error && (
+        <div className="flex-1 overflow-y-auto">
-        <div className="flex-none mx-4 mt-4 flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
-          <AlertCircle className="h-4 w-4" />
-          {error}
-        </div>
-      )}
-
-      {/* Messages Area */}
-      <div className="flex-1 min-h-0 relative">
-        <div className="absolute inset-0 overflow-y-auto">
           <div className="flex flex-col space-y-6 p-4">
             {!isNewChat && !chatId ? (
-              <div className="h-full flex items-center justify-center min-h-[calc(100vh-16rem)]">
+              <div className="h-full flex items-center justify-center min-h-[calc(100vh-12rem)]">
                 <div className="max-w-md w-full space-y-8">
                   <div className="flex flex-col items-center text-center">
-                    <div className="rounded-full bg-blue-500/20 p-6 mb-8">
+                    <div className="rounded-full bg-purple-500/20 p-6 mb-8">
-                      <div className="h-16 w-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-lg" />
+                      <div className="h-16 w-16 rounded-full bg-gradient-to-br from-purple-300 to-purple-500 shadow-lg" />
                     </div>
                     <h2 className="text-xl font-semibold mb-2">Welcome to StudyAI Chat</h2>
                     <p className="text-sm text-muted-foreground mb-6">
@@ -245,7 +262,7 @@ export default function AskQuestion() {
                     </p>
                     <Button
                       onClick={handleNewChat}
-                      className="w-full bg-blue-500 hover:bg-blue-600 mb-8"
+                      className="w-full bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white mb-8"
                     >
                       <MessageSquarePlus className="mr-2 h-5 w-5" />
                       Start New Chat
@@ -289,11 +306,11 @@ export default function AskQuestion() {
                 </div>
               </div>
             ) : messages.length === 0 ? (
-              <div className="h-full flex items-center justify-center min-h-[calc(100vh-16rem)]">
+              <div className="h-full flex items-center justify-center min-h-[calc(100vh-12rem)]">
                 <div className="max-w-md w-full space-y-8">
                   <div className="flex flex-col items-center text-center">
-                    <div className="rounded-full bg-blue-500/20 p-6 mb-8">
+                    <div className="rounded-full bg-purple-500/20 p-6 mb-8">
-                      <div className="h-16 w-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-lg" />
+                      <div className="h-16 w-16 rounded-full bg-gradient-to-br from-purple-300 to-purple-500 shadow-lg" />
                     </div>
                     <h2 className="text-xl font-semibold mb-2">Ask Your First Question</h2>
                     <p className="text-sm text-muted-foreground mb-6">
@@ -334,17 +351,17 @@ export default function AskQuestion() {
                   />
                 ))}
                 {isTyping && (
-                  <div className="flex w-full items-start gap-3 px-4">
+                  <div className="flex w-full items-start gap-3">
                     <Avatar className="h-8 w-8">
-                      <AvatarFallback className="bg-gradient-to-br from-blue-400 to-blue-600 text-white text-xs font-medium">
+                      <AvatarFallback className="bg-gradient-to-br from-purple-300 to-purple-500 text-white text-xs font-medium">
                         AI
                       </AvatarFallback>
                     </Avatar>
-                    <div className="flex max-w-3xl items-center space-x-4 rounded-2xl bg-muted/50 px-4 py-3 text-sm shadow-sm border border-border/50">
+                    <div className="flex max-w-3xl items-center space-x-4 rounded-2xl bg-primary/5 px-4 py-3 text-sm shadow-sm">
                       <div className="flex space-x-2">
-                        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:0ms]" />
+                        <div className="h-2 w-2 animate-bounce rounded-full bg-primary/40 [animation-delay:0ms]" />
-                        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:150ms]" />
+                        <div className="h-2 w-2 animate-bounce rounded-full bg-primary/40 [animation-delay:150ms]" />
-                        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:300ms]" />
+                        <div className="h-2 w-2 animate-bounce rounded-full bg-primary/40 [animation-delay:300ms]" />
                       </div>
                     </div>
                   </div>
@@ -354,42 +371,43 @@ export default function AskQuestion() {
             )}
           </div>
         </div>
-      </div>
 
-      {/* Input Area */}
+        {/* Input Box - Fixed at Bottom */}
-      <div className="flex-none border-t bg-background p-4">
+        <div className="sticky bottom-0 left-0 right-0 p-3 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <form onSubmit={handleSubmit} className="mx-auto max-w-3xl">
+          <form onSubmit={handleSubmit} className="mx-auto max-w-3xl">
-          <div className="relative flex items-center gap-2">
+            <div className="flex items-center gap-2">
-            <input
+              <input
-              type="text"
+                type="text"
-              value={question}
+                value={question}
-              onChange={(e) => setQuestion(e.target.value)}
+                onChange={(e) => setQuestion(e.target.value)}
-              placeholder="Ask me anything..."
+                placeholder="Ask me anything..."
-              className={cn(
+                className={cn(
-                'w-full rounded-full border bg-background px-4 py-2 text-sm',
+                  'flex-1 rounded-full px-4 py-2 text-sm',
-                'focus:outline-none focus:ring-2 focus:ring-blue-500/20',
+                  'bg-primary/5 border-primary/10',
-                'placeholder:text-muted-foreground'
+                  'focus:outline-none focus:ring-2 focus:ring-primary/20',
-              )}
+                  'placeholder:text-muted-foreground'
-              disabled={loading}
+                )}
-            />
+                disabled={loading}
-            <Button
+              />
-              type="submit"
+              <Button
-              disabled={loading || !question.trim()}
+                type="submit"
-              className={cn(
+                disabled={loading || !question.trim()}
-                'rounded-full bg-blue-500 text-white h-8 w-8 p-0',
+                className={cn(
-                'hover:bg-blue-600',
+                  'rounded-full bg-gradient-to-r from-purple-400 to-purple-500 text-white h-8 w-8 p-0',
-                'focus:outline-none focus:ring-2 focus:ring-blue-500/20',
+                  'hover:from-purple-500 hover:to-purple-600',
-                'disabled:bg-blue-500/50'
+                  'focus:outline-none focus:ring-2 focus:ring-primary/20',
-              )}
+                  'disabled:opacity-50'
-            >
+                )}
-              {loading ? (
+              >
-                <Loader2 className="h-4 w-4 animate-spin" />
+                {loading ? (
-              ) : (
+                  <Loader2 className="h-4 w-4 animate-spin" />
-                <Send className="h-4 w-4" />
+                ) : (
-              )}
+                  <Send className="h-4 w-4" />
-            </Button>
+                )}
-          </div>
+              </Button>
-        </form>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );

src/pages/dashboard/history.tsx

@@ -46,7 +46,7 @@ export default function StudyHistory() {
           <p className="text-muted-foreground">View your past conversations</p>
         </div>
         <Link to="/dashboard/ask">
-          <Button>
+          <Button className="bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white">
             <MessageSquare className="mr-2 h-4 w-4" />
             New Chat
           </Button>
@@ -60,7 +60,9 @@ export default function StudyHistory() {
             Start a new conversation to see it here
           </p>
           <Link to="/dashboard/ask" className="mt-4 inline-block">
-            <Button>Start a new chat</Button>
+            <Button className="bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white">
+              Start a new chat
+            </Button>
           </Link>
         </div>
       ) : (
@@ -68,7 +70,7 @@ export default function StudyHistory() {
           {chats.map((chat) => (
             <div
               key={chat.id}
-              className="group relative rounded-lg border bg-card p-4 transition-colors hover:bg-muted/50"
+              className="group relative rounded-lg border bg-card p-4 transition-colors hover:bg-purple-50/50"
             >
               <Link to={`/dashboard/ask/${chat.id}`} className="block">
                 <h3 className="font-medium">{chat.title}</h3>

src/pages/dashboard/upload.tsx

@@ -1,28 +1,47 @@
 import React from 'react';
 import { Upload } from 'lucide-react';
 import { Button } from '../../components/ui/Button';
+import { Card } from '../../components/ui/card';
 
 function UploadMaterials() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 p-6">
-      <h1 className="text-3xl font-bold">Upload Study Materials</h1>
+      <div className="flex items-center justify-between">
-      <div className="rounded-lg bg-card p-6 shadow-sm">
+        <div>
-        <div className="flex flex-col items-center justify-center space-y-4 py-12">
+          <h1 className="text-2xl font-bold">Upload Study Materials</h1>
-          <Upload className="h-12 w-12 text-muted-foreground" />
+          <p className="text-muted-foreground">Upload your documents to Google Drive</p>
-          <div className="text-center">
-            <h2 className="text-lg font-semibold">Drop your files here</h2>
-            <p className="text-sm text-muted-foreground">
-              or click to browse from your computer
-            </p>
-          </div>
-          <Button
-            variant="outline"
-            onClick={() => window.open('https://drive.google.com/drive/folders/1UVn905Gfxh7tCo2bZxjpOtGzwNAquwnI?dmr=1&ec=wgc-drive-globalnav-goto', '_blank')}
-          >
-            Upload
-          </Button>
         </div>
       </div>
+
+      <Card className="p-12">
+        <div className="flex flex-col items-center justify-center space-y-6 max-w-md mx-auto text-center">
+          <div className="relative">
+            <div className="absolute -inset-1 rounded-full bg-gradient-to-r from-purple-400/25 to-purple-500/25 blur" />
+            <div className="relative rounded-full bg-purple-50 p-6">
+              <Upload className="h-12 w-12 text-purple-500" />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <h2 className="text-xl font-semibold">Ready to upload?</h2>
+            <p className="text-sm text-muted-foreground">
+              Click below to open Google Drive and upload your study materials
+            </p>
+          </div>
+
+          <Button
+            size="lg"
+            className="bg-gradient-to-r from-purple-400 to-purple-500 hover:from-purple-500 hover:to-purple-600 text-white px-8"
+            onClick={() => window.open('https://drive.google.com/drive/folders/1UVn905Gfxh7tCo2bZxjpOtGzwNAquwnI?dmr=1&ec=wgc-drive-globalnav-goto', '_blank')}
+          >
+            Open Google Drive
+          </Button>
+
+          <p className="text-xs text-muted-foreground">
+            Supported formats: PDF, DOCX, DOC, and TXT files up to 10MB
+          </p>
+        </div>
+      </Card>
     </div>
   );
 }