diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 03b0f28..e2d3b5e 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -3,7 +3,8 @@
     "allow": [
       "Bash(npm run dev:*)",
       "Bash(npm run build:*)",
-      "Bash(timeout 30 npm run dev:*)"
+      "Bash(timeout 30 npm run dev:*)",
+      "Bash(cat:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/DATABASE_SETUP_REQUIRED.md b/DATABASE_SETUP_REQUIRED.md
new file mode 100644
index 0000000..d885997
--- /dev/null
+++ b/DATABASE_SETUP_REQUIRED.md
@@ -0,0 +1,119 @@
+# 🚨 DATABASE SETUP REQUIRED
+
+## Current Problem
+
+Your application shows these errors:
+- ❌ "Error fetching submissions"
+- ❌ "Error fetching task resources"
+- ❌ File uploads are broken
+
+**Root cause:** Database tables `submissions` and `task_resources` don't exist yet.
+
+---
+
+## Solution: Run Migrations in Supabase Dashboard
+
+### Step-by-Step Instructions:
+
+1. **Open Supabase Dashboard**
+   - Go to: https://app.supabase.com
+   - Select your project
+   - Click on **SQL Editor** in the left menu
+
+2. **Run These Migrations in Order:**
+
+   **Migration 003** - Submissions Table
+   ```
+   📁 Open: supabase/migrations/003_add_submissions.sql
+   ➡️ Copy all contents → Paste in SQL Editor → Click "Run"
+   ```
+
+   **Migration 004** - Enrollment Fields
+   ```
+   📁 Open: supabase/migrations/004_add_enrollment_fields.sql
+   ➡️ Copy all contents → Paste in SQL Editor → Click "Run"
+   ```
+
+   **Migration 005** - Task Resources Table
+   ```
+   📁 Open: supabase/migrations/005_add_task_resources.sql
+   ➡️ Copy all contents → Paste in SQL Editor → Click "Run"
+   ```
+
+   **Migration 006** - Storage Setup + Cleanup ⭐ **IMPORTANT**
+   ```
+   📁 Open: supabase/migrations/006_setup_storage_and_cleanup.sql
+   ➡️ Copy all contents → Paste in SQL Editor → Click "Run"
+   ```
+
+3. **Verify Everything Worked**
+   ```
+   📁 Open: supabase/verify_migrations.sql
+   ➡️ Copy all contents → Paste in SQL Editor → Click "Run"
+   ✅ You should see all checks showing green checkmarks
+   ```
+
+4. **Refresh Your Application**
+   - Reload the page in your browser
+   - Errors should be gone
+   - File uploads should work
+
+---
+
+## What Gets Fixed:
+
+✅ Creates `submissions` table for student file uploads
+✅ Creates `task_resources` table for teacher resource uploads
+✅ Creates storage buckets: `submissions` and `task-resources`
+✅ Sets up all security policies automatically
+✅ Removes deadline functionality (cleaned up)
+✅ Adds submission fields to enrollments
+✅ Enables file upload error handling with detailed feedback
+
+---
+
+## After Setup:
+
+### Test File Uploads:
+
+**As a Teacher:**
+1. Create a new homework/task
+2. Upload resource files (PDF, images, etc.)
+3. ✅ Should see success message with file name
+
+**As a Student:**
+1. Enroll in a homework
+2. Upload submission files
+3. ✅ Should see success message with file name
+
+---
+
+## Need Help?
+
+**If migrations fail:**
+- Make sure you're using the project owner account in Supabase
+- Try running one migration at a time
+- Check the error message in SQL Editor
+
+**If storage buckets don't create:**
+- Go to Storage section in Supabase dashboard
+- Manually create two buckets:
+  - Name: `submissions` (make it public)
+  - Name: `task-resources` (make it public)
+- Then re-run migration 006
+
+**Still having issues?**
+- Check `supabase/apply-migrations.md` for detailed troubleshooting
+- Run `supabase/verify_migrations.sql` to see what's missing
+
+---
+
+## Files Created:
+
+- ✅ `supabase/migrations/006_setup_storage_and_cleanup.sql` - New migration
+- ✅ `supabase/verify_migrations.sql` - Verification script
+- ✅ `supabase/apply-migrations.md` - Updated with latest instructions
+- ✅ File upload error handling improved in:
+  - `frontend/app/dashboard/teacher/create-homework/page.tsx`
+  - `frontend/app/dashboard/teacher/homework/[id]/page.tsx`
+  - `frontend/app/dashboard/student/homework/[id]/page.tsx`
diff --git a/frontend/app/dashboard/page.tsx b/frontend/app/dashboard/page.tsx
index 0922fe6..5f18248 100644
--- a/frontend/app/dashboard/page.tsx
+++ b/frontend/app/dashboard/page.tsx
@@ -65,8 +65,18 @@ export default function DashboardPage() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-[calc(100vh-4rem)]">
-        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      <div className="flex items-center justify-center min-h-[calc(100vh-4rem)] bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-zinc-950 dark:via-purple-950/20 dark:to-blue-950/20 relative overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-20 left-10 w-72 h-72 bg-gradient-to-r from-blue-400/20 to-purple-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '3s' }} />
+          <div className="absolute bottom-20 right-10 w-80 h-80 bg-gradient-to-r from-pink-400/20 to-orange-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '4s' }} />
+        </div>
+        <div className="relative z-10">
+          <div className="relative">
+            <Loader2 className="w-16 h-16 animate-spin text-transparent bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text" />
+            <div className="absolute -inset-4 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full blur-xl animate-pulse" />
+          </div>
+          <p className="mt-4 text-zinc-600 dark:text-zinc-400 font-medium">Loading your dashboard...</p>
+        </div>
       </div>
     );
   }
@@ -77,8 +87,18 @@ export default function DashboardPage() {
 
   // Show loading while redirecting
   return (
-    <div className="flex items-center justify-center min-h-[calc(100vh-4rem)]">
-      <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+    <div className="flex items-center justify-center min-h-[calc(100vh-4rem)] bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-zinc-950 dark:via-purple-950/20 dark:to-blue-950/20 relative overflow-hidden">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-20 left-10 w-72 h-72 bg-gradient-to-r from-blue-400/20 to-purple-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '3s' }} />
+        <div className="absolute bottom-20 right-10 w-80 h-80 bg-gradient-to-r from-pink-400/20 to-orange-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '4s' }} />
+      </div>
+      <div className="relative z-10">
+        <div className="relative">
+          <Loader2 className="w-16 h-16 animate-spin text-transparent bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text" />
+          <div className="absolute -inset-4 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-full blur-xl animate-pulse" />
+        </div>
+        <p className="mt-4 text-zinc-600 dark:text-zinc-400 font-medium">Redirecting...</p>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/dashboard/student/homework/[id]/page.tsx b/frontend/app/dashboard/student/homework/[id]/page.tsx
index 26d50f4..a685825 100644
--- a/frontend/app/dashboard/student/homework/[id]/page.tsx
+++ b/frontend/app/dashboard/student/homework/[id]/page.tsx
@@ -19,6 +19,8 @@ import { Upload, FileText, CheckCircle, MessageCircle, Loader2, ArrowLeft, Downl
 import { Input } from '@/components/ui/input';
 import Link from 'next/link';
 import { createSupabaseBrowserClient } from '@/lib/supabase/client';
+import { useToast } from '@/components/ui/toast';
+import { LoadingPage } from '@/components/ui/loading-spinner';
 
 const supabase = createSupabaseBrowserClient();
 
@@ -26,6 +28,7 @@ export default function StudentHomeworkPage() {
   const { address, isConnected } = useAccount();
   const router = useRouter();
   const params = useParams();
+  const toast = useToast();
   const homeworkId = params.id as string;
 
   const [profile, setProfile] = useState<any>(null);
@@ -74,7 +77,7 @@ export default function StudentHomeworkPage() {
         });
 
         if (enrollmentsData.length === 0) {
-          alert('You are not enrolled in this task');
+          toast.warning('Not enrolled', 'You are not enrolled in this task');
           router.push('/dashboard/student');
           return;
         }
@@ -105,7 +108,7 @@ export default function StudentHomeworkPage() {
         setTaskResources(resourcesData);
       } catch (error: any) {
         console.error('Error loading data:', error);
-        alert('Error loading task details');
+        toast.error('Loading failed', 'Error loading task details');
         router.push('/dashboard/student');
       } finally {
         setLoading(false);
@@ -113,7 +116,7 @@ export default function StudentHomeworkPage() {
     }
 
     loadData();
-  }, [address, isConnected, router, homeworkId]);
+  }, [address, isConnected, router, homeworkId, toast]);
 
   async function handleSubmitSolution() {
     if (!enrollment || !submissionText.trim()) return;
@@ -139,10 +142,10 @@ export default function StudentHomeworkPage() {
       });
 
       setEnrollment(enrollmentsData[0]);
-      alert('Solution submitted successfully! ✅ Your teacher will review it soon.');
+      toast.success('Solution submitted!', 'Your teacher will review it soon.');
     } catch (error: any) {
       console.error('Error submitting solution:', error);
-      alert('Error submitting solution. Please try again.');
+      toast.error('Submission failed', 'Error submitting solution. Please try again.');
     } finally {
       setSubmitting(false);
     }
@@ -155,14 +158,28 @@ export default function StudentHomeworkPage() {
     try {
       // Upload file to Supabase Storage
       const fileExt = uploadedFile.name.split('.').pop();
-      const fileName = `${profile.id}/${enrollment.id}/${Date.now()}.${fileExt}`;
+      const fileName = `${profile.id}/${enrollment.id}/${Date.now()}_${Math.random().toString(36).substring(7)}.${fileExt}`;
 
       const { data: uploadData, error: uploadError } = await supabase
         .storage
         .from('submissions')
         .upload(fileName, uploadedFile);
 
-      if (uploadError) throw uploadError;
+      if (uploadError) {
+        console.error('Storage upload error:', uploadError);
+        let errorMessage = 'Failed to upload file to storage.';
+
+        if (uploadError.message.includes('row-level security')) {
+          errorMessage = 'Storage access denied. Please check your permissions.';
+        } else if (uploadError.message.includes('size')) {
+          errorMessage = 'File is too large. Maximum file size is 50MB.';
+        } else if (uploadError.message) {
+          errorMessage = `Upload failed: ${uploadError.message}`;
+        }
+
+        alert(`❌ ${errorMessage}\n\nFile: ${uploadedFile.name}\n\nPlease try again or contact your teacher if the problem persists.`);
+        return;
+      }
 
       // Get public URL
       const { data: { publicUrl } } = supabase
@@ -171,14 +188,22 @@ export default function StudentHomeworkPage() {
         .getPublicUrl(fileName);
 
       // Create submission record
-      await createSubmission({
-        enrollment_id: enrollment.id,
-        student_id: profile.id,
-        homework_id: homeworkId,
-        file_url: publicUrl,
-        file_name: uploadedFile.name,
-        file_type: uploadedFile.type,
-      });
+      try {
+        await createSubmission({
+          enrollment_id: enrollment.id,
+          student_id: profile.id,
+          homework_id: homeworkId,
+          file_url: publicUrl,
+          file_name: uploadedFile.name,
+          file_type: uploadedFile.type,
+        });
+      } catch (dbError: any) {
+        console.error('Database error:', dbError);
+        // If DB insert fails, try to clean up the uploaded file
+        await supabase.storage.from('submissions').remove([fileName]);
+        alert(`❌ Failed to save submission to database.\n\nFile: ${uploadedFile.name}\nError: ${dbError.message || 'Unknown error'}\n\nPlease try again or contact your teacher.`);
+        return;
+      }
 
       // Reload submissions
       const submissionsData = await getSubmissions({
@@ -187,10 +212,33 @@ export default function StudentHomeworkPage() {
       setSubmissions(submissionsData);
 
       setUploadedFile(null);
-      alert('File uploaded successfully! ✅');
+<<<<<<< HEAD
+<<<<<<< HEAD
+      toast.success('File uploaded!', 'Your file has been uploaded successfully.');
+    } catch (error: any) {
+      console.error('Error uploading file:', error);
+      toast.error('Upload failed', 'Error uploading file. Please try again.');
+=======
+=======
+>>>>>>> c89133b (css & animations)
+      // Reset file input
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      if (fileInput) fileInput.value = '';
+
+      alert(`✅ File uploaded successfully!\n\n${uploadedFile.name}\n\nYour teacher will be able to see this file when reviewing your submission.`);
+    } catch (error: any) {
+      console.error('Unexpected error uploading file:', error);
+      alert(`❌ Unexpected error uploading file.\n\nFile: ${uploadedFile.name}\nPlease try again or contact your teacher if the problem persists.`);
+<<<<<<< HEAD
+>>>>>>> 71a7763 (versiune care merge)
+=======
+=======
+      toast.success('File uploaded!', 'Your file has been uploaded successfully.');
     } catch (error: any) {
       console.error('Error uploading file:', error);
-      alert('Error uploading file. Please try again.');
+      toast.error('Upload failed', 'Error uploading file. Please try again.');
+>>>>>>> 8ec33f1 (css & animations)
+>>>>>>> c89133b (css & animations)
     } finally {
       setUploading(false);
     }
diff --git a/frontend/app/dashboard/student/page.tsx b/frontend/app/dashboard/student/page.tsx
index 824e706..5c879f5 100644
--- a/frontend/app/dashboard/student/page.tsx
+++ b/frontend/app/dashboard/student/page.tsx
@@ -24,15 +24,20 @@ import {
   CheckCircle,
   Award,
   Eye,
+  User,
 } from 'lucide-react';
 import Link from 'next/link';
 import { createSupabaseBrowserClient } from '@/lib/supabase/client';
+import { useToast } from '@/components/ui/toast';
+import { LoadingPage } from '@/components/ui/loading-spinner';
+import { cn } from '@/lib/utils';
 
 const supabase = createSupabaseBrowserClient();
 
 export default function StudentDashboard() {
   const { address, isConnected } = useAccount();
   const router = useRouter();
+  const toast = useToast();
   const [profile, setProfile] = useState<any>(null);
   const [availableHomeworks, setAvailableHomeworks] = useState<HomeworkWithTeacher[]>([]);
   const [myEnrollments, setMyEnrollments] = useState<EnrollmentWithDetails[]>([]);
@@ -111,13 +116,13 @@ export default function StudentDashboard() {
       const homeworksData = await getAvailableHomeworks();
       setAvailableHomeworks(homeworksData);
 
-      alert('Enrolled successfully! ✅');
+      toast.success('Enrolled successfully!', 'You can now start working on this task.');
     } catch (error: any) {
       console.error('Error enrolling:', error);
       if (error.message?.includes('duplicate')) {
-        alert('You are already enrolled in this task!');
+        toast.warning('Already enrolled', 'You are already enrolled in this task!');
       } else {
-        alert('Error enrolling. Please try again.');
+        toast.error('Enrollment failed', 'Error enrolling. Please try again.');
       }
     } finally {
       setEnrolling(null);
@@ -125,7 +130,7 @@ export default function StudentDashboard() {
   }
 
   if (loading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
+    return <LoadingPage />;
   }
 
   if (!profile) {
@@ -135,96 +140,107 @@ export default function StudentDashboard() {
   const unansweredQuestions = myQuestions.filter(q => !q.is_answered).length;
 
   return (
-    <div className="container mx-auto py-8 px-4">
-      <div className="max-w-6xl mx-auto">
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold mb-2">Student Dashboard</h1>
-          <p className="text-zinc-600 dark:text-zinc-400">
-            Browse tasks, ask questions, and learn!
-          </p>
-        </div>
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-zinc-950 dark:via-purple-950/20 dark:to-blue-950/20 relative">
+      {/* Animated background blobs */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-20 left-10 w-96 h-96 bg-gradient-to-r from-blue-400/20 to-purple-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '4s' }} />
+        <div className="absolute bottom-20 right-10 w-[500px] h-[500px] bg-gradient-to-r from-pink-400/20 to-orange-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '6s' }} />
+      </div>
+
+      <div className="container mx-auto py-8 px-4 relative z-10">
+        <div className="max-w-6xl mx-auto">
+          <div className="mb-8 animate-fade-in">
+            <h1 className="text-5xl font-extrabold mb-3 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
+              Student Dashboard
+            </h1>
+            <p className="text-lg text-zinc-700 dark:text-zinc-300 font-medium">
+              Browse tasks, ask questions, and learn! 📚
+            </p>
+          </div>
 
-        {/* Mentor Eligibility Banner */}
-        {canBecomeMentor && (
-          <Card className="mb-6 border-purple-500 bg-purple-50 dark:bg-purple-900/20">
-            <CardContent className="pt-6">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <Trophy className="w-6 h-6 text-purple-600" />
-                  <div>
-                    <p className="font-semibold text-purple-900 dark:text-purple-100">
-                      🎉 You're eligible to become a Mentor!
-                    </p>
-                    <p className="text-sm text-purple-700 dark:text-purple-200">
-                      You have {profile?.rating?.toFixed(1) || '0.0'}+ stars and {profile?.completed_count || 0}+
-                      completed tasks
-                    </p>
+          {/* Mentor Eligibility Banner */}
+          {canBecomeMentor && (
+            <Card className="mb-6 border-2 border-purple-500/30 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 shadow-lg card-hover animate-scale-in">
+              <CardContent className="pt-6">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 flex items-center justify-center shadow-md">
+                      <Trophy className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                      <p className="font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent text-lg">
+                        🎉 You're eligible to become a Mentor!
+                      </p>
+                      <p className="text-sm text-purple-700 dark:text-purple-200 font-medium">
+                        You have {profile?.rating?.toFixed(1) || '0.0'}+ stars and {profile?.completed_count || 0}+
+                        completed tasks
+                      </p>
+                    </div>
                   </div>
+                  <Link href="/dashboard/student/become-mentor">
+                    <Button className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 shadow-md hover:shadow-lg smooth-transition hover:scale-105">
+                      <Award className="w-4 h-4 mr-2" />
+                      Become a Mentor
+                    </Button>
+                  </Link>
                 </div>
-                <Link href="/dashboard/student/become-mentor">
-                  <Button className="bg-purple-600 hover:bg-purple-700">
-                    <Award className="w-4 h-4 mr-2" />
-                    Become a Mentor
-                  </Button>
-                </Link>
-              </div>
-            </CardContent>
-          </Card>
-        )}
+              </CardContent>
+            </Card>
+          )}
 
-        {/* Stats Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">My Enrollments</CardTitle>
-              <BookOpen className="h-4 w-4 text-blue-600" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{myEnrollments.length}</div>
-              <p className="text-xs text-zinc-500">active tasks</p>
-            </CardContent>
-          </Card>
+          {/* Stats Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <Card className="card-hover border-2 border-blue-500/20 bg-gradient-to-br from-blue-50 to-white dark:from-blue-950/20 dark:to-zinc-900 shadow-md animate-scale-in">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">My Enrollments</CardTitle>
+                <BookOpen className="h-5 w-5 text-blue-600" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">{myEnrollments.length}</div>
+                <p className="text-xs text-zinc-600 dark:text-zinc-400 font-medium mt-1">active tasks</p>
+              </CardContent>
+            </Card>
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Completed</CardTitle>
-              <CheckCircle className="h-4 w-4 text-green-600" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{profile?.completed_count || 0}</div>
-              <p className="text-xs text-zinc-500">tasks finished</p>
-            </CardContent>
-          </Card>
+            <Card className="card-hover border-2 border-green-500/20 bg-gradient-to-br from-green-50 to-white dark:from-green-950/20 dark:to-zinc-900 shadow-md animate-scale-in" style={{ animationDelay: '0.1s' }}>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Completed</CardTitle>
+                <CheckCircle className="h-5 w-5 text-green-600" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold bg-gradient-to-r from-green-600 to-green-800 bg-clip-text text-transparent">{profile?.completed_count || 0}</div>
+                <p className="text-xs text-zinc-600 dark:text-zinc-400 font-medium mt-1">tasks finished</p>
+              </CardContent>
+            </Card>
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">My Rating</CardTitle>
-              <Star className="h-4 w-4 text-yellow-600" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{profile?.rating?.toFixed(1) || '0.0'}/5</div>
-              <p className="text-xs text-zinc-500">
-                {profile?.total_reviews || 0} {(profile?.total_reviews || 0) === 1 ? 'review' : 'reviews'}
-              </p>
-            </CardContent>
-          </Card>
+            <Card className="card-hover border-2 border-yellow-500/20 bg-gradient-to-br from-yellow-50 to-white dark:from-yellow-950/20 dark:to-zinc-900 shadow-md animate-scale-in" style={{ animationDelay: '0.2s' }}>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">My Rating</CardTitle>
+                <Star className="h-5 w-5 text-yellow-600" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold bg-gradient-to-r from-yellow-600 to-yellow-800 bg-clip-text text-transparent">{profile?.rating?.toFixed(1) || '0.0'}/5</div>
+                <p className="text-xs text-zinc-600 dark:text-zinc-400 font-medium mt-1">
+                  {profile?.total_reviews || 0} {(profile?.total_reviews || 0) === 1 ? 'review' : 'reviews'}
+                </p>
+              </CardContent>
+            </Card>
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Token Balance</CardTitle>
-              <Coins className="h-4 w-4 text-yellow-600" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{profile?.token_balance || 0}</div>
-              <p className="text-xs text-zinc-500">tokens</p>
-            </CardContent>
-          </Card>
-        </div>
+            <Card className="card-hover border-2 border-orange-500/20 bg-gradient-to-br from-orange-50 to-white dark:from-orange-950/20 dark:to-zinc-900 shadow-md animate-scale-in" style={{ animationDelay: '0.3s' }}>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">Token Balance</CardTitle>
+                <Coins className="h-5 w-5 text-orange-600" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold bg-gradient-to-r from-orange-600 to-orange-800 bg-clip-text text-transparent">{profile?.token_balance || 0}</div>
+                <p className="text-xs text-zinc-600 dark:text-zinc-400 font-medium mt-1">tokens</p>
+              </CardContent>
+            </Card>
+          </div>
 
-        {/* My Enrollments */}
-        {myEnrollments.length > 0 && (
-          <div className="mb-8">
-            <h2 className="text-2xl font-bold mb-4">My Enrollments</h2>
+          {/* My Enrollments */}
+          {myEnrollments.length > 0 && (
+            <div className="mb-8">
+              <h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">My Enrollments</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {myEnrollments.map((enrollment) => {
                 return (
@@ -283,9 +299,9 @@ export default function StudentDashboard() {
           </div>
         )}
 
-        {/* Available Tasks */}
-        <div>
-          <h2 className="text-2xl font-bold mb-4">Available Tasks</h2>
+          {/* Available Tasks */}
+          <div>
+            <h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">Available Tasks</h2>
           {availableHomeworks.length === 0 ? (
             <Card>
               <CardContent className="flex flex-col items-center justify-center py-12">
@@ -345,7 +361,12 @@ export default function StudentDashboard() {
                           </Button>
                         </Link>
                         <Button
-                          className="w-full"
+                          className={cn(
+                            "w-full smooth-transition",
+                            !isEnrolled && enrolling !== homework.id && slotsLeft > 0
+                              ? "bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-md hover:shadow-lg hover:scale-105"
+                              : ""
+                          )}
                           disabled={isEnrolled || enrolling === homework.id || slotsLeft === 0}
                           onClick={() => handleEnroll(homework.id)}
                         >
@@ -367,5 +388,6 @@ export default function StudentDashboard() {
         </div>
       </div>
     </div>
+    </div>
   );
 }
diff --git a/frontend/app/dashboard/student/task/[id]/page.tsx b/frontend/app/dashboard/student/task/[id]/page.tsx
index 2cee15d..4d4a411 100644
--- a/frontend/app/dashboard/student/task/[id]/page.tsx
+++ b/frontend/app/dashboard/student/task/[id]/page.tsx
@@ -15,6 +15,8 @@ import type { Homework, TaskResource } from '@/lib/types/database';
 import { ArrowLeft, Download, FileText, Users, Loader2 } from 'lucide-react';
 import Link from 'next/link';
 import { createSupabaseBrowserClient } from '@/lib/supabase/client';
+import { useToast } from '@/components/ui/toast';
+import { LoadingPage } from '@/components/ui/loading-spinner';
 
 const supabase = createSupabaseBrowserClient();
 
@@ -22,6 +24,7 @@ export default function StudentTaskViewPage() {
   const { address, isConnected } = useAccount();
   const router = useRouter();
   const params = useParams();
+  const toast = useToast();
   const homeworkId = params.id as string;
 
   const [profile, setProfile] = useState<any>(null);
@@ -74,7 +77,7 @@ export default function StudentTaskViewPage() {
         setTaskResources(resourcesData);
       } catch (error: any) {
         console.error('Error loading data:', error);
-        alert('Error loading task details');
+        toast.error('Loading failed', 'Error loading task details');
         router.push('/dashboard/student');
       } finally {
         setLoading(false);
@@ -82,7 +85,7 @@ export default function StudentTaskViewPage() {
     }
 
     loadData();
-  }, [address, isConnected, router, homeworkId]);
+  }, [address, isConnected, router, homeworkId, toast]);
 
   async function handleEnroll() {
     if (!profile || !homework) return;
@@ -90,14 +93,14 @@ export default function StudentTaskViewPage() {
     setEnrolling(true);
     try {
       await enrollInHomework(profile.id, homework.id);
-      alert('Enrolled successfully! ✅');
+      toast.success('Enrolled successfully!', 'Redirecting to your task...');
       router.push(`/dashboard/student/homework/${homework.id}`);
     } catch (error: any) {
       console.error('Error enrolling:', error);
       if (error.message?.includes('duplicate')) {
-        alert('You are already enrolled in this task!');
+        toast.warning('Already enrolled', 'You are already enrolled in this task!');
       } else {
-        alert('Error enrolling. Please try again.');
+        toast.error('Enrollment failed', 'Error enrolling. Please try again.');
       }
     } finally {
       setEnrolling(false);
@@ -105,7 +108,7 @@ export default function StudentTaskViewPage() {
   }
 
   if (loading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
+    return <LoadingPage />;
   }
 
   if (!profile || !homework) {
diff --git a/frontend/app/dashboard/teacher/homework/[id]/page.tsx b/frontend/app/dashboard/teacher/homework/[id]/page.tsx
index 5379408..139179c 100644
--- a/frontend/app/dashboard/teacher/homework/[id]/page.tsx
+++ b/frontend/app/dashboard/teacher/homework/[id]/page.tsx
@@ -137,14 +137,28 @@ export default function HomeworkDetailPage() {
     try {
       // Upload file to Supabase Storage
       const fileExt = uploadedFile.name.split('.').pop();
-      const fileName = `${profile.id}/${homework.id}/${Date.now()}.${fileExt}`;
+      const fileName = `${profile.id}/${homework.id}/${Date.now()}_${Math.random().toString(36).substring(7)}.${fileExt}`;
 
       const { data: uploadData, error: uploadError } = await supabase
         .storage
         .from('task-resources')
         .upload(fileName, uploadedFile);
 
-      if (uploadError) throw uploadError;
+      if (uploadError) {
+        console.error('Storage upload error:', uploadError);
+        let errorMessage = 'Failed to upload file to storage.';
+
+        if (uploadError.message.includes('row-level security')) {
+          errorMessage = 'Storage access denied. Please check your permissions.';
+        } else if (uploadError.message.includes('size')) {
+          errorMessage = 'File is too large. Maximum file size is 50MB.';
+        } else if (uploadError.message) {
+          errorMessage = `Upload failed: ${uploadError.message}`;
+        }
+
+        alert(`❌ ${errorMessage}\n\nFile: ${uploadedFile.name}`);
+        return;
+      }
 
       // Get public URL
       const { data: { publicUrl } } = supabase
@@ -153,13 +167,21 @@ export default function HomeworkDetailPage() {
         .getPublicUrl(fileName);
 
       // Create task resource record
-      await createTaskResource({
-        homework_id: homework.id,
-        teacher_id: profile.id,
-        file_url: publicUrl,
-        file_name: uploadedFile.name,
-        file_type: uploadedFile.type,
-      });
+      try {
+        await createTaskResource({
+          homework_id: homework.id,
+          teacher_id: profile.id,
+          file_url: publicUrl,
+          file_name: uploadedFile.name,
+          file_type: uploadedFile.type,
+        });
+      } catch (dbError: any) {
+        console.error('Database error:', dbError);
+        // If DB insert fails, try to clean up the uploaded file
+        await supabase.storage.from('task-resources').remove([fileName]);
+        alert(`❌ Failed to save file metadata to database.\n\nFile: ${uploadedFile.name}\nError: ${dbError.message || 'Unknown error'}`);
+        return;
+      }
 
       // Reload task resources
       const resourcesData = await getTaskResources({ homeworkId: homework.id });
@@ -170,10 +192,10 @@ export default function HomeworkDetailPage() {
       const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
       if (fileInput) fileInput.value = '';
 
-      alert('Resource file uploaded successfully!');
+      alert(`✅ Resource file uploaded successfully!\n\n${uploadedFile.name}`);
     } catch (error: any) {
-      console.error('Error uploading file:', error);
-      alert('Error uploading file. Please try again.');
+      console.error('Unexpected error uploading file:', error);
+      alert(`❌ Unexpected error uploading file.\n\nFile: ${uploadedFile.name}\nPlease try again or contact support if the problem persists.`);
     } finally {
       setUploading(false);
     }
diff --git a/frontend/app/dashboard/teacher/page.tsx b/frontend/app/dashboard/teacher/page.tsx
index 68975be..c68a863 100644
--- a/frontend/app/dashboard/teacher/page.tsx
+++ b/frontend/app/dashboard/teacher/page.tsx
@@ -103,36 +103,51 @@ export default function TeacherDashboard() {
   }
 
   return (
-    <div className="container mx-auto py-8 px-4">
-      <div className="flex items-center justify-between mb-8">
-        <div>
-          <h1 className="text-4xl font-bold mb-2">Teacher Dashboard</h1>
-          <p className="text-zinc-600 dark:text-zinc-400">
-            Manage tasks, answer questions, and review students
-          </p>
-        </div>
-        <Link href="/dashboard/teacher/create-homework">
-          <Button size="lg" disabled={profile.token_balance < 1}>
-            <Plus className="w-5 h-5 mr-2" />
-            Create Task
-          </Button>
-        </Link>
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-zinc-950 dark:via-purple-950/20 dark:to-blue-950/20 relative">
+      {/* Animated background blobs */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-20 left-10 w-96 h-96 bg-gradient-to-r from-blue-400/20 to-purple-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '4s' }} />
+        <div className="absolute bottom-20 right-10 w-[500px] h-[500px] bg-gradient-to-r from-pink-400/20 to-orange-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '6s' }} />
       </div>
 
-      {/* Token Balance Warning */}
-      {profile.token_balance < 1 && (
-        <Card className="mb-6 border-orange-500 bg-orange-50 dark:bg-orange-900/20">
-          <CardContent className="pt-6">
-            <div className="flex items-center gap-2">
-              <Coins className="w-5 h-5 text-orange-600" />
-              <p className="text-orange-900 dark:text-orange-100">
-                <strong>Insufficient tokens!</strong> You need at least 1 token to create a task.
-                Each task costs 1 token.
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      )}
+      <div className="container mx-auto py-8 px-4 relative z-10">
+        <div className="flex items-center justify-between mb-8 animate-fade-in">
+          <div>
+            <h1 className="text-5xl font-extrabold mb-3 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
+              Teacher Dashboard
+            </h1>
+            <p className="text-lg text-zinc-700 dark:text-zinc-300 font-medium">
+              Manage tasks, answer questions, and review students 👨‍🏫
+            </p>
+          </div>
+          <Link href="/dashboard/teacher/create-homework">
+            <Button
+              size="lg"
+              disabled={profile.token_balance < 1}
+              className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg hover:shadow-xl smooth-transition hover:scale-105"
+            >
+              <Plus className="w-5 h-5 mr-2" />
+              Create Task
+            </Button>
+          </Link>
+        </div>
+
+        {/* Token Balance Warning */}
+        {profile.token_balance < 1 && (
+          <Card className="mb-6 border-2 border-orange-500/30 bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 shadow-lg card-hover animate-scale-in">
+            <CardContent className="pt-6">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded-full bg-gradient-to-r from-orange-600 to-red-600 flex items-center justify-center shadow-md">
+                  <Coins className="w-6 h-6 text-white" />
+                </div>
+                <p className="font-medium text-orange-900 dark:text-orange-100">
+                  <strong className="bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent">Insufficient tokens!</strong> You need at least 1 token to create a task.
+                  Each task costs 1 token.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        )}
 
       {/* Stats Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
@@ -290,5 +305,6 @@ export default function TeacherDashboard() {
         )}
       </div>
     </div>
+    </div>
   );
 }
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 4fced5d..6bbf83c 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -120,3 +120,193 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  /* MetaMask-inspired animations */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -1000px 0;
+    }
+    100% {
+      background-position: 1000px 0;
+    }
+  }
+
+  @keyframes pulse-glow {
+    0%, 100% {
+      box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+    }
+    50% {
+      box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
+    }
+  }
+
+  @keyframes progress {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes bounce-in {
+    0% {
+      transform: scale(0.3);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    70% {
+      transform: scale(0.9);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 0.5s ease-out;
+  }
+
+  .animate-slide-in {
+    animation: slideIn 0.4s ease-out;
+  }
+
+  .animate-scale-in {
+    animation: scaleIn 0.3s ease-out;
+  }
+
+  .animate-shimmer {
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      rgba(255, 255, 255, 0.1) 50%,
+      transparent 100%
+    );
+    background-size: 1000px 100%;
+    animation: shimmer 2s infinite;
+  }
+
+  .animate-spin {
+    animation: spin 1s linear infinite;
+  }
+
+  .animate-bounce-in {
+    animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+
+  /* Glass morphism effect */
+  .glass {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .glass-dark {
+    background: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  /* Gradient borders */
+  .gradient-border {
+    position: relative;
+    background: linear-gradient(var(--background), var(--background)) padding-box,
+                linear-gradient(135deg, #667eea 0%, #764ba2 100%) border-box;
+    border: 2px solid transparent;
+  }
+
+  /* Hover effects */
+  .card-hover {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .card-hover:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  }
+
+  /* MetaMask-style button */
+  .metamask-button {
+    background: linear-gradient(135deg, #f6851b 0%, #e2761b 100%);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    transition: all 0.2s ease;
+  }
+
+  .metamask-button:hover {
+    background: linear-gradient(135deg, #e2761b 0%, #cd6116 100%);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
+    transform: translateY(-1px);
+  }
+
+  /* Smooth transitions */
+  .smooth-transition {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Loading skeleton */
+  @keyframes skeleton-loading {
+    0% {
+      background-position: -200px 0;
+    }
+    100% {
+      background-position: calc(200px + 100%) 0;
+    }
+  }
+
+  .skeleton {
+    background: linear-gradient(
+      90deg,
+      rgba(226, 232, 240, 0.2) 0px,
+      rgba(226, 232, 240, 0.3) 40px,
+      rgba(226, 232, 240, 0.2) 80px
+    );
+    background-size: 200px 100%;
+    animation: skeleton-loading 1.4s ease-in-out infinite;
+  }
+}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index b5e569c..d023e9a 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -42,46 +42,52 @@ export default function Home() {
   return (
     <div className="flex flex-col">
       {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-b from-white to-zinc-50 dark:from-zinc-950 dark:to-black border-b border-zinc-200 dark:border-zinc-800">
-        <div className="absolute inset-0 bg-grid-zinc-900/[0.04] dark:bg-grid-zinc-50/[0.02]" />
-        <div className="container relative mx-auto px-4 py-24 sm:py-32">
+      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-zinc-950 dark:via-purple-950/20 dark:to-blue-950/20 border-b border-zinc-200 dark:border-zinc-800">
+        {/* Animated background blobs */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-20 left-10 w-96 h-96 bg-gradient-to-r from-blue-400/30 to-purple-400/30 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '4s' }} />
+          <div className="absolute bottom-20 right-10 w-[500px] h-[500px] bg-gradient-to-r from-pink-400/30 to-orange-400/30 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '6s' }} />
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-gradient-to-r from-purple-400/20 to-blue-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '5s' }} />
+        </div>
+
+        <div className="container relative mx-auto px-4 py-24 sm:py-32 z-10">
           <div className="mx-auto max-w-3xl text-center">
-            <Badge variant="secondary" className="mb-4">
-              <Sparkles className="w-3 h-3 mr-1" />
+            <Badge className="mb-6 bg-gradient-to-r from-blue-500 to-purple-600 text-white border-none shadow-lg hover:shadow-xl smooth-transition animate-bounce-in">
+              <Sparkles className="w-4 h-4 mr-1 animate-pulse" />
               Education in the Era of Technology
             </Badge>
 
-            <h1 className="text-5xl sm:text-6xl font-bold tracking-tight bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6">
+            <h1 className="text-6xl sm:text-7xl font-extrabold tracking-tight bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-8 animate-scale-in">
               Learn, Stake, and Earn in Web3
             </h1>
 
-            <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed">
+            <p className="text-xl text-zinc-700 dark:text-zinc-300 mb-10 leading-relaxed font-medium animate-fade-in">
               A decentralized platform where teachers create educational tasks and students solve them.
-              Fair incentives through staking, AI-powered personalization, and complete transparency.
+              Fair incentives through staking, AI-powered personalization, and complete transparency. ✨
             </p>
 
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <div className="flex flex-col sm:flex-row gap-4 justify-center animate-slide-in">
               <Link href="/dashboard">
-                <Button size="lg" className="w-full sm:w-auto">
-                  <BookOpen className="w-5 h-5 mr-2" />
+                <Button size="lg" className="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white shadow-lg hover:shadow-xl smooth-transition hover:scale-105 group">
+                  <BookOpen className="w-5 h-5 mr-2 group-hover:rotate-12 smooth-transition" />
                   Get Started
                 </Button>
               </Link>
               <Link href="#features">
-                <Button size="lg" variant="outline" className="w-full sm:w-auto">
+                <Button size="lg" variant="outline" className="w-full sm:w-auto border-2 hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-950/20 smooth-transition hover:scale-105">
                   Learn More
                 </Button>
               </Link>
             </div>
 
             {/* Stats */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
-              {stats.map((stat) => (
-                <div key={stat.label} className="text-center">
-                  <div className="text-3xl font-bold text-zinc-900 dark:text-zinc-50">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-20">
+              {stats.map((stat, index) => (
+                <div key={stat.label} className="text-center card-hover p-4 rounded-lg bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm animate-scale-in" style={{ animationDelay: `${index * 0.1}s` }}>
+                  <div className="text-4xl font-extrabold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                     {stat.value}
                   </div>
-                  <div className="text-sm text-zinc-600 dark:text-zinc-400 mt-1">
+                  <div className="text-sm text-zinc-600 dark:text-zinc-400 mt-2 font-medium">
                     {stat.label}
                   </div>
                 </div>
@@ -102,16 +108,25 @@ export default function Home() {
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
-            {features.map((feature) => {
+            {features.map((feature, index) => {
               const Icon = feature.icon;
+              const gradients = [
+                'from-blue-500 to-cyan-500',
+                'from-green-500 to-emerald-500',
+                'from-purple-500 to-pink-500',
+                'from-orange-500 to-red-500'
+              ];
               return (
-                <Card key={feature.title} className="border-2 hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors">
-                  <CardHeader>
-                    <div className={`w-12 h-12 rounded-lg bg-zinc-100 dark:bg-zinc-900 flex items-center justify-center mb-4 ${feature.color}`}>
-                      <Icon className="w-6 h-6" />
+                <Card key={feature.title} className="border-2 border-transparent hover:border-zinc-200 dark:hover:border-zinc-800 card-hover shadow-lg bg-gradient-to-br from-white to-zinc-50 dark:from-zinc-900 dark:to-zinc-950 animate-scale-in relative overflow-hidden group" style={{ animationDelay: `${index * 0.1}s` }}>
+                  <div className={`absolute inset-0 bg-gradient-to-r ${gradients[index]} opacity-0 group-hover:opacity-5 smooth-transition`} />
+                  <CardHeader className="relative z-10">
+                    <div className={`w-14 h-14 rounded-xl bg-gradient-to-r ${gradients[index]} flex items-center justify-center mb-4 shadow-lg group-hover:scale-110 smooth-transition`}>
+                      <Icon className="w-7 h-7 text-white" />
                     </div>
-                    <CardTitle>{feature.title}</CardTitle>
-                    <CardDescription className="text-base">
+                    <CardTitle className="text-xl font-bold group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:bg-clip-text group-hover:from-blue-600 group-hover:to-purple-600 smooth-transition">
+                      {feature.title}
+                    </CardTitle>
+                    <CardDescription className="text-base text-zinc-600 dark:text-zinc-400">
                       {feature.description}
                     </CardDescription>
                   </CardHeader>
@@ -133,31 +148,34 @@ export default function Home() {
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-            <div className="text-center">
-              <div className="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center text-2xl font-bold mx-auto mb-4">
-                1
+            <div className="text-center animate-scale-in" style={{ animationDelay: '0.1s' }}>
+              <div className="relative w-20 h-20 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 text-white flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-xl group hover:scale-110 smooth-transition">
+                <div className="absolute -inset-1 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full blur opacity-50 group-hover:opacity-75 smooth-transition" />
+                <span className="relative z-10">1</span>
               </div>
-              <h3 className="text-xl font-semibold mb-2">Connect Wallet</h3>
+              <h3 className="text-xl font-bold mb-2 bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">Connect Wallet</h3>
               <p className="text-zinc-600 dark:text-zinc-400">
                 Connect your MetaMask or any Web3 wallet to get started
               </p>
             </div>
 
-            <div className="text-center">
-              <div className="w-16 h-16 rounded-full bg-purple-600 text-white flex items-center justify-center text-2xl font-bold mx-auto mb-4">
-                2
+            <div className="text-center animate-scale-in" style={{ animationDelay: '0.2s' }}>
+              <div className="relative w-20 h-20 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-xl group hover:scale-110 smooth-transition">
+                <div className="absolute -inset-1 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full blur opacity-50 group-hover:opacity-75 smooth-transition" />
+                <span className="relative z-10">2</span>
               </div>
-              <h3 className="text-xl font-semibold mb-2">Choose Your Role</h3>
+              <h3 className="text-xl font-bold mb-2 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">Choose Your Role</h3>
               <p className="text-zinc-600 dark:text-zinc-400">
                 Be a teacher creating tasks or a student solving challenges
               </p>
             </div>
 
-            <div className="text-center">
-              <div className="w-16 h-16 rounded-full bg-green-600 text-white flex items-center justify-center text-2xl font-bold mx-auto mb-4">
-                3
+            <div className="text-center animate-scale-in" style={{ animationDelay: '0.3s' }}>
+              <div className="relative w-20 h-20 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 text-white flex items-center justify-center text-2xl font-bold mx-auto mb-4 shadow-xl group hover:scale-110 smooth-transition">
+                <div className="absolute -inset-1 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full blur opacity-50 group-hover:opacity-75 smooth-transition" />
+                <span className="relative z-10">3</span>
               </div>
-              <h3 className="text-xl font-semibold mb-2">Stake & Learn</h3>
+              <h3 className="text-xl font-bold mb-2 bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">Stake & Learn</h3>
               <p className="text-zinc-600 dark:text-zinc-400">
                 Stake tokens, complete tasks, and earn rewards through learning
               </p>
@@ -213,15 +231,21 @@ export default function Home() {
       </section>
 
       {/* CTA */}
-      <section className="py-24 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-4xl font-bold mb-4">Ready to Start Learning?</h2>
-          <p className="text-xl mb-8 opacity-90">
+      <section className="py-24 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white relative overflow-hidden">
+        <div className="absolute inset-0 bg-grid-white/[0.05]" />
+        <div className="absolute inset-0">
+          <div className="absolute top-10 left-20 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '3s' }} />
+          <div className="absolute bottom-10 right-20 w-80 h-80 bg-white/10 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '4s' }} />
+        </div>
+        <div className="container relative mx-auto px-4 text-center z-10">
+          <h2 className="text-5xl font-extrabold mb-6 animate-fade-in">Ready to Start Learning? 🚀</h2>
+          <p className="text-2xl mb-10 opacity-95 font-medium animate-scale-in">
             Join thousands of students and teachers already on the platform
           </p>
           <Link href="/dashboard">
-            <Button size="lg" variant="secondary">
-              Launch App
+            <Button size="lg" className="bg-white text-purple-600 hover:bg-zinc-100 shadow-2xl hover:shadow-white/50 smooth-transition hover:scale-110 text-lg px-8 py-6 font-bold animate-bounce-in">
+              <Sparkles className="w-5 h-5 mr-2" />
+              Launch App Now
             </Button>
           </Link>
         </div>
diff --git a/frontend/app/providers.tsx b/frontend/app/providers.tsx
index bf8f519..9b6158f 100644
--- a/frontend/app/providers.tsx
+++ b/frontend/app/providers.tsx
@@ -4,6 +4,7 @@ import { WagmiProvider } from 'wagmi';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { wagmiConfig } from '@/lib/wagmi';
+import { ToastProvider } from '@/components/ui/toast';
 import React from 'react';
 
 const queryClient = new QueryClient();
@@ -13,7 +14,9 @@ export function Providers({ children }: { children: React.ReactNode }) {
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <RainbowKitProvider>
-          {children}
+          <ToastProvider>
+            {children}
+          </ToastProvider>
         </RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>
diff --git a/frontend/app/settings/page.tsx b/frontend/app/settings/page.tsx
index c5afe25..76c4c1f 100644
--- a/frontend/app/settings/page.tsx
+++ b/frontend/app/settings/page.tsx
@@ -13,11 +13,13 @@ import { Select } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { User, Settings as SettingsIcon } from 'lucide-react';
 import { createSupabaseBrowserClient } from '@/lib/supabase/client';
+import { useToast } from '@/components/ui/toast';
 
 const supabase = createSupabaseBrowserClient();
 
 export default function SettingsPage() {
   const { address } = useAccount();
+  const toast = useToast();
   const [profile, setProfile] = useState<Profile | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -60,10 +62,10 @@ export default function SettingsPage() {
     setSaving(true);
     try {
       await updateProfile(profile.id, formData);
-      alert('Profile updated successfully!');
+      toast.success('Profile updated successfully!', 'Your changes have been saved.');
     } catch (error) {
       console.error('Error updating profile:', error);
-      alert('Error updating profile. Please try again.');
+      toast.error('Error updating profile', 'Please try again later.');
     } finally {
       setSaving(false);
     }
@@ -86,21 +88,31 @@ export default function SettingsPage() {
   }
 
   return (
-    <div className="container mx-auto py-8 px-4 max-w-4xl">
-      <div className="mb-8">
-        <h1 className="text-4xl font-bold mb-2">Settings</h1>
-        <p className="text-zinc-600 dark:text-zinc-400">
-          Manage your profile, privacy settings, and understand how your data is used
+    <div className="container mx-auto py-8 px-4 max-w-4xl min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-zinc-950 dark:via-purple-950/20 dark:to-blue-950/20 relative">
+      {/* Animated background blobs */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-20 left-10 w-96 h-96 bg-gradient-to-r from-blue-400/20 to-purple-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '4s' }} />
+        <div className="absolute bottom-20 right-10 w-[500px] h-[500px] bg-gradient-to-r from-pink-400/20 to-orange-400/20 rounded-full blur-3xl animate-pulse" style={{ animationDuration: '6s' }} />
+      </div>
+
+      <div className="mb-8 relative z-10 animate-fade-in">
+        <h1 className="text-5xl font-extrabold mb-3 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
+          Settings
+        </h1>
+        <p className="text-lg text-zinc-700 dark:text-zinc-300 font-medium">
+          Manage your profile, privacy settings, and understand how your data is used ⚙️
         </p>
       </div>
 
-      <div className="space-y-6">
+      <div className="space-y-6 relative z-10">
         {/* Profile Settings */}
-        <Card>
+        <Card className="card-hover border-2 border-blue-500/20 bg-gradient-to-br from-white to-blue-50/50 dark:from-zinc-900 dark:to-blue-950/20 shadow-lg animate-scale-in">
           <CardHeader>
             <div className="flex items-center gap-2">
-              <User className="w-6 h-6 text-blue-600" />
-              <CardTitle>Profile Settings</CardTitle>
+              <div className="w-10 h-10 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center shadow-md">
+                <User className="w-6 h-6 text-white" />
+              </div>
+              <CardTitle className="text-xl">Profile Settings</CardTitle>
             </div>
             <CardDescription>Update your personal information and preferences</CardDescription>
           </CardHeader>
@@ -123,7 +135,7 @@ export default function SettingsPage() {
                 value={formData.username}
                 onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                 placeholder="Enter your username"
-                className="w-full px-4 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full px-4 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 focus:outline-none focus:ring-2 focus:ring-blue-500 smooth-transition hover:border-blue-400"
               />
             </div>
 
@@ -132,7 +144,7 @@ export default function SettingsPage() {
               <select
                 value={formData.role}
                 onChange={(e) => setFormData({ ...formData, role: e.target.value as any })}
-                className="w-full px-4 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full px-4 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 focus:outline-none focus:ring-2 focus:ring-blue-500 smooth-transition hover:border-blue-400"
               >
                 <option value="student">Student</option>
                 <option value="teacher">Teacher</option>
@@ -140,7 +152,11 @@ export default function SettingsPage() {
             </div>
 
             <div className="flex gap-4 pt-4">
-              <Button onClick={handleSave} disabled={saving}>
+              <Button
+                onClick={handleSave}
+                disabled={saving}
+                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white shadow-md hover:shadow-lg smooth-transition hover:scale-105"
+              >
                 {saving ? 'Saving...' : 'Save Changes'}
               </Button>
               <Button
@@ -151,6 +167,7 @@ export default function SettingsPage() {
                     role: profile.role || 'student',
                   });
                 }}
+                className="border-2 hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-950/20 smooth-transition hover:scale-105"
               >
                 Reset
               </Button>
@@ -159,38 +176,40 @@ export default function SettingsPage() {
         </Card>
 
         {/* Stats Overview */}
-        <Card>
+        <Card className="card-hover border-2 border-green-500/20 bg-gradient-to-br from-white to-green-50/50 dark:from-zinc-900 dark:to-green-950/20 shadow-lg animate-scale-in" style={{ animationDelay: '0.1s' }}>
           <CardHeader>
             <div className="flex items-center gap-2">
-              <SettingsIcon className="w-6 h-6 text-green-600" />
-              <CardTitle>Your Statistics</CardTitle>
+              <div className="w-10 h-10 rounded-lg bg-gradient-to-r from-green-500 to-emerald-600 flex items-center justify-center shadow-md">
+                <SettingsIcon className="w-6 h-6 text-white" />
+              </div>
+              <CardTitle className="text-xl">Your Statistics</CardTitle>
             </div>
             <CardDescription>Overview of your activity and reputation</CardDescription>
           </CardHeader>
 
           <CardContent>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <div className="text-center p-4 border rounded-lg">
-                <div className="text-2xl font-bold text-blue-600">{profile.rating.toFixed(1)}</div>
-                <div className="text-sm text-zinc-600">Rating</div>
+              <div className="text-center p-4 border-2 border-blue-500/20 rounded-lg bg-gradient-to-br from-blue-50 to-white dark:from-blue-950/20 dark:to-zinc-900 card-hover shadow-md">
+                <div className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">{profile.rating.toFixed(1)}</div>
+                <div className="text-sm text-zinc-600 dark:text-zinc-400 font-medium mt-1">Rating</div>
               </div>
-              <div className="text-center p-4 border rounded-lg">
-                <div className="text-2xl font-bold text-green-600">{profile.completed_count}</div>
-                <div className="text-sm text-zinc-600">Completed</div>
+              <div className="text-center p-4 border-2 border-green-500/20 rounded-lg bg-gradient-to-br from-green-50 to-white dark:from-green-950/20 dark:to-zinc-900 card-hover shadow-md">
+                <div className="text-3xl font-bold bg-gradient-to-r from-green-600 to-green-800 bg-clip-text text-transparent">{profile.completed_count}</div>
+                <div className="text-sm text-zinc-600 dark:text-zinc-400 font-medium mt-1">Completed</div>
               </div>
-              <div className="text-center p-4 border rounded-lg">
-                <div className="text-2xl font-bold text-purple-600">{profile.total_reviews}</div>
-                <div className="text-sm text-zinc-600">Total Reviews</div>
+              <div className="text-center p-4 border-2 border-purple-500/20 rounded-lg bg-gradient-to-br from-purple-50 to-white dark:from-purple-950/20 dark:to-zinc-900 card-hover shadow-md">
+                <div className="text-3xl font-bold bg-gradient-to-r from-purple-600 to-purple-800 bg-clip-text text-transparent">{profile.total_reviews}</div>
+                <div className="text-sm text-zinc-600 dark:text-zinc-400 font-medium mt-1">Total Reviews</div>
               </div>
-              <div className="text-center p-4 border rounded-lg">
-                <div className="text-2xl font-bold text-orange-600">{profile.token_balance}</div>
-                <div className="text-sm text-zinc-600">Tokens</div>
+              <div className="text-center p-4 border-2 border-orange-500/20 rounded-lg bg-gradient-to-br from-orange-50 to-white dark:from-orange-950/20 dark:to-zinc-900 card-hover shadow-md">
+                <div className="text-3xl font-bold bg-gradient-to-r from-orange-600 to-orange-800 bg-clip-text text-transparent">{profile.token_balance}</div>
+                <div className="text-sm text-zinc-600 dark:text-zinc-400 font-medium mt-1">Tokens</div>
               </div>
             </div>
 
-            <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+            <div className="mt-4 p-4 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg border border-blue-200/50 dark:border-blue-800/50">
               <p className="text-sm text-zinc-700 dark:text-zinc-300">
-                <strong>How your rating grows:</strong> Your rating increases through active participation,
+                <strong className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">How your rating grows:</strong> Your rating increases through active participation,
                 receiving positive reviews, and helping other students. Earn tokens by answering questions
                 and completing tasks.
               </p>
diff --git a/frontend/app/test-toast/page.tsx b/frontend/app/test-toast/page.tsx
new file mode 100644
index 0000000..b246a43
--- /dev/null
+++ b/frontend/app/test-toast/page.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useToast } from '@/components/ui/toast';
+
+export default function TestToastPage() {
+  const toast = useToast();
+
+  return (
+    <div className="container mx-auto py-8 px-4 min-h-screen bg-gradient-to-br from-zinc-50 via-white to-blue-50 dark:from-zinc-950 dark:via-zinc-900 dark:to-blue-950/20">
+      <div className="max-w-4xl mx-auto">
+        <div className="mb-8 animate-fade-in">
+          <h1 className="text-5xl font-extrabold mb-3 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
+            Toast Notifications Test
+          </h1>
+          <p className="text-lg text-zinc-600 dark:text-zinc-400">
+            Test all types of toast notifications
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <Card className="card-hover shadow-lg animate-scale-in">
+            <CardHeader>
+              <CardTitle className="text-green-600">Success Toast</CardTitle>
+              <CardDescription>Shows a success message with green gradient</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button
+                onClick={() => toast.success('Success!', 'Your action was completed successfully.')}
+                className="w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700"
+              >
+                Show Success Toast
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card className="card-hover shadow-lg animate-scale-in" style={{ animationDelay: '0.1s' }}>
+            <CardHeader>
+              <CardTitle className="text-red-600">Error Toast</CardTitle>
+              <CardDescription>Shows an error message with red gradient</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button
+                onClick={() => toast.error('Error!', 'Something went wrong. Please try again.')}
+                className="w-full bg-gradient-to-r from-red-500 to-pink-600 hover:from-red-600 hover:to-pink-700"
+              >
+                Show Error Toast
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card className="card-hover shadow-lg animate-scale-in" style={{ animationDelay: '0.2s' }}>
+            <CardHeader>
+              <CardTitle className="text-orange-600">Warning Toast</CardTitle>
+              <CardDescription>Shows a warning message with orange gradient</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button
+                onClick={() => toast.warning('Warning!', 'Please check your input before continuing.')}
+                className="w-full bg-gradient-to-r from-orange-500 to-amber-600 hover:from-orange-600 hover:to-amber-700"
+              >
+                Show Warning Toast
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card className="card-hover shadow-lg animate-scale-in" style={{ animationDelay: '0.3s' }}>
+            <CardHeader>
+              <CardTitle className="text-blue-600">Info Toast</CardTitle>
+              <CardDescription>Shows an info message with blue gradient</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button
+                onClick={() => toast.info('Information', 'Here is some useful information for you.')}
+                className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
+              >
+                Show Info Toast
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card className="mt-8 card-hover shadow-lg animate-scale-in" style={{ animationDelay: '0.4s' }}>
+          <CardHeader>
+            <CardTitle className="text-purple-600">All Toasts at Once</CardTitle>
+            <CardDescription>Test multiple toasts appearing simultaneously</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button
+              onClick={() => {
+                toast.success('Task 1 Complete', 'First task finished successfully!');
+                setTimeout(() => toast.info('Processing...', 'Working on task 2...'), 200);
+                setTimeout(() => toast.warning('Attention Needed', 'Please review task 3.'), 400);
+                setTimeout(() => toast.error('Task 4 Failed', 'Something went wrong with task 4.'), 600);
+              }}
+              className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
+            >
+              Show Multiple Toasts
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/DataPrivacyPanel.tsx b/frontend/components/DataPrivacyPanel.tsx
index e7899bb..cb1b37f 100644
--- a/frontend/components/DataPrivacyPanel.tsx
+++ b/frontend/components/DataPrivacyPanel.tsx
@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Download, Trash2, Eye, Shield, Info } from 'lucide-react';
 import { createSupabaseBrowserClient } from '@/lib/supabase/client';
+import { useToast } from '@/components/ui/toast';
 
 const supabase = createSupabaseBrowserClient();
 
@@ -14,6 +15,7 @@ interface DataPrivacyPanelProps {
 }
 
 export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
+  const toast = useToast();
   const [loading, setLoading] = useState(false);
   const [showExplanation, setShowExplanation] = useState(false);
 
@@ -44,10 +46,10 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
 
       // Display data in a modal or new page
       console.log('User Data:', { profile, submissions, homeworks });
-      alert('Your data has been loaded. Check the console for details. In production, this would show a detailed view.');
+      toast.success('Data loaded successfully', 'Check the console for details. In production, this would show a detailed view.');
     } catch (error) {
       console.error('Error viewing data:', error);
-      alert('Error loading your data. Please try again.');
+      toast.error('Error loading your data', 'Please try again later.');
     } finally {
       setLoading(false);
     }
@@ -115,9 +117,10 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
       a.click();
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
+      toast.success('Data exported successfully', `Your data has been downloaded to my-data-${new Date().toISOString()}.json`);
     } catch (error) {
       console.error('Error exporting data:', error);
-      alert('Error exporting your data. Please try again.');
+      toast.error('Error exporting your data', 'Please try again later.');
     } finally {
       setLoading(false);
     }
@@ -138,7 +141,7 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
 
     const finalConfirm = prompt('Type DELETE to confirm:');
     if (finalConfirm !== 'DELETE') {
-      alert('Deletion cancelled.');
+      toast.info('Deletion cancelled', 'Your data is safe.');
       return;
     }
 
@@ -152,11 +155,11 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
       // Delete user data (RLS policies will handle cascade)
       await supabase.from('profiles').delete().eq('id', userId);
 
-      alert('Your data has been deleted. You will be logged out.');
+      toast.success('Data deleted successfully', 'Your data has been deleted. You will be logged out.');
       // In production, handle logout and redirect
     } catch (error) {
       console.error('Error deleting data:', error);
-      alert('Error deleting your data. Please contact support.');
+      toast.error('Error deleting your data', 'Please contact support.');
     } finally {
       setLoading(false);
     }
@@ -164,11 +167,13 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
 
   return (
     <div className="space-y-6">
-      <Card>
+      <Card className="card-hover border-2 border-purple-500/20 bg-gradient-to-br from-white to-purple-50/50 dark:from-zinc-900 dark:to-purple-950/20 shadow-lg animate-scale-in" style={{ animationDelay: '0.2s' }}>
         <CardHeader>
           <div className="flex items-center gap-2">
-            <Shield className="w-6 h-6 text-blue-600" />
-            <CardTitle>Data Privacy & Transparency</CardTitle>
+            <div className="w-10 h-10 rounded-lg bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center shadow-md">
+              <Shield className="w-6 h-6 text-white" />
+            </div>
+            <CardTitle className="text-xl">Data Privacy & Transparency</CardTitle>
           </div>
           <CardDescription>
             You have full control over your personal data. View, export, or delete your information at any time.
@@ -179,7 +184,7 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             <Button
               variant="outline"
-              className="w-full flex items-center justify-center gap-2"
+              className="w-full flex items-center justify-center gap-2 border-2 hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-950/20 smooth-transition hover:scale-105"
               onClick={handleViewData}
               disabled={loading}
             >
@@ -189,7 +194,7 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
 
             <Button
               variant="outline"
-              className="w-full flex items-center justify-center gap-2"
+              className="w-full flex items-center justify-center gap-2 border-2 hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-950/20 smooth-transition hover:scale-105"
               onClick={handleExportData}
               disabled={loading}
             >
@@ -199,7 +204,7 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
 
             <Button
               variant="destructive"
-              className="w-full flex items-center justify-center gap-2"
+              className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 shadow-md hover:shadow-lg smooth-transition hover:scale-105"
               onClick={handleDeleteData}
               disabled={loading}
             >
@@ -211,14 +216,14 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
           <div className="pt-4 border-t">
             <button
               onClick={() => setShowExplanation(!showExplanation)}
-              className="flex items-center gap-2 text-sm text-blue-600 hover:text-blue-700"
+              className="flex items-center gap-2 text-sm font-medium bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent hover:from-blue-700 hover:to-purple-700 smooth-transition"
             >
-              <Info className="w-4 h-4" />
+              <Info className="w-4 h-4 text-blue-600" />
               {showExplanation ? 'Hide' : 'Show'} what data we collect
             </button>
 
             {showExplanation && (
-              <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm space-y-3">
+              <div className="mt-4 p-4 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg border border-blue-200/50 dark:border-blue-800/50 text-sm space-y-3 animate-fade-in">
                 <div>
                   <h4 className="font-semibold mb-1">Personal Information</h4>
                   <p className="text-zinc-600 dark:text-zinc-400">
@@ -256,9 +261,14 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
         </CardContent>
       </Card>
 
-      <Card>
+      <Card className="card-hover border-2 border-orange-500/20 bg-gradient-to-br from-white to-orange-50/50 dark:from-zinc-900 dark:to-orange-950/20 shadow-lg animate-scale-in" style={{ animationDelay: '0.3s' }}>
         <CardHeader>
-          <CardTitle>Algorithmic Transparency</CardTitle>
+          <div className="flex items-center gap-2">
+            <div className="w-10 h-10 rounded-lg bg-gradient-to-r from-orange-500 to-amber-600 flex items-center justify-center shadow-md">
+              <Info className="w-6 h-6 text-white" />
+            </div>
+            <CardTitle className="text-xl">Algorithmic Transparency</CardTitle>
+          </div>
           <CardDescription>
             Understand how our algorithms make decisions about recommendations and evaluations
           </CardDescription>
@@ -266,9 +276,9 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
 
         <CardContent className="space-y-4">
           <div className="space-y-3">
-            <div className="p-4 border rounded-lg">
+            <div className="p-4 border-2 border-blue-500/20 rounded-lg bg-gradient-to-br from-blue-50/50 to-white dark:from-blue-950/10 dark:to-zinc-900 card-hover shadow-sm">
               <div className="flex items-start gap-3">
-                <Badge>Recommendations</Badge>
+                <Badge className="bg-gradient-to-r from-blue-600 to-purple-600 text-white border-none">Recommendations</Badge>
                 <div className="flex-1">
                   <h4 className="font-semibold mb-2">How tasks are recommended to you:</h4>
                   <ul className="text-sm space-y-1 text-zinc-600 dark:text-zinc-400">
@@ -282,9 +292,9 @@ export function DataPrivacyPanel({ userId }: DataPrivacyPanelProps) {
               </div>
             </div>
 
-            <div className="p-4 border rounded-lg">
+            <div className="p-4 border-2 border-green-500/20 rounded-lg bg-gradient-to-br from-green-50/50 to-white dark:from-green-950/10 dark:to-zinc-900 card-hover shadow-sm">
               <div className="flex items-start gap-3">
-                <Badge variant="secondary">Reputation</Badge>
+                <Badge className="bg-gradient-to-r from-green-600 to-emerald-600 text-white border-none">Reputation</Badge>
                 <div className="flex-1">
                   <h4 className="font-semibold mb-2">How reputation is calculated:</h4>
                   <ul className="text-sm space-y-1 text-zinc-600 dark:text-zinc-400">
diff --git a/frontend/components/ui/loading-spinner.tsx b/frontend/components/ui/loading-spinner.tsx
new file mode 100644
index 0000000..fedb954
--- /dev/null
+++ b/frontend/components/ui/loading-spinner.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { Loader2 } from 'lucide-react';
+
+interface LoadingSpinnerProps {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const sizeClasses = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+  xl: 'w-12 h-12',
+};
+
+export function LoadingSpinner({ className, size = 'md' }: LoadingSpinnerProps) {
+  return (
+    <Loader2 className={cn('animate-spin', sizeClasses[size], className)} />
+  );
+}
+
+export function LoadingPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-zinc-50 via-white to-blue-50 dark:from-zinc-950 dark:via-zinc-900 dark:to-blue-950/20">
+      <div className="relative">
+        <div className="absolute inset-0 bg-blue-500/20 rounded-full blur-3xl animate-pulse" />
+        <LoadingSpinner size="xl" className="text-blue-600 dark:text-blue-500 relative z-10" />
+      </div>
+      <p className="mt-6 text-lg font-medium text-zinc-600 dark:text-zinc-400 animate-pulse">
+        Loading...
+      </p>
+    </div>
+  );
+}
+
+export function LoadingCard() {
+  return (
+    <div className="animate-pulse">
+      <div className="bg-zinc-200 dark:bg-zinc-800 rounded-lg h-48 skeleton" />
+    </div>
+  );
+}
+
+export function LoadingSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="animate-pulse" style={{ animationDelay: `${i * 0.1}s` }}>
+          <div className="bg-zinc-200 dark:bg-zinc-800 rounded-lg h-24 skeleton" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/components/ui/toast.tsx b/frontend/components/ui/toast.tsx
new file mode 100644
index 0000000..5f10345
--- /dev/null
+++ b/frontend/components/ui/toast.tsx
@@ -0,0 +1,170 @@
+'use client';
+
+import * as React from 'react';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface Toast {
+  id: string;
+  type: ToastType;
+  title: string;
+  description?: string;
+  duration?: number;
+}
+
+interface ToastProps {
+  toast: Toast;
+  onClose: (id: string) => void;
+}
+
+const toastIcons = {
+  success: CheckCircle,
+  error: AlertCircle,
+  info: Info,
+  warning: AlertTriangle,
+};
+
+const toastStyles = {
+  success: 'bg-gradient-to-r from-green-500 to-emerald-600 text-white border-green-400',
+  error: 'bg-gradient-to-r from-red-500 to-pink-600 text-white border-red-400',
+  info: 'bg-gradient-to-r from-blue-500 to-purple-600 text-white border-blue-400',
+  warning: 'bg-gradient-to-r from-orange-500 to-amber-600 text-white border-orange-400',
+};
+
+function ToastItem({ toast, onClose }: ToastProps) {
+  const Icon = toastIcons[toast.type];
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose(toast.id);
+    }, toast.duration || 5000);
+
+    return () => clearTimeout(timer);
+  }, [toast.id, toast.duration, onClose]);
+
+  return (
+    <div
+      className={cn(
+        'pointer-events-auto w-full max-w-md rounded-lg shadow-2xl border-2 p-4 animate-slide-in overflow-hidden relative',
+        toastStyles[toast.type]
+      )}
+    >
+      <div className="absolute inset-0 bg-white/10 animate-shimmer" />
+      <div className="flex items-start gap-3 relative z-10">
+        <div className="relative">
+          <Icon className="h-6 w-6 animate-scale-in" />
+          <div className="absolute -inset-1 bg-white/20 rounded-full blur-sm" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-bold">{toast.title}</p>
+          {toast.description && (
+            <p className="text-sm mt-1 opacity-90">{toast.description}</p>
+          )}
+        </div>
+        <button
+          onClick={() => onClose(toast.id)}
+          className="ml-auto flex-shrink-0 rounded-md p-1 hover:bg-white/20 smooth-transition hover:scale-110"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+      {/* Progress bar */}
+      <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/20">
+        <div
+          className="h-full bg-white/60 animate-progress"
+          style={{
+            animation: `progress ${toast.duration || 5000}ms linear forwards`,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+interface ToastContainerProps {
+  toasts: Toast[];
+  onClose: (id: string) => void;
+}
+
+export function ToastContainer({ toasts, onClose }: ToastContainerProps) {
+  return (
+    <div className="fixed top-4 right-4 z-[100] flex flex-col gap-3 pointer-events-none max-w-md w-full">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onClose={onClose} />
+      ))}
+    </div>
+  );
+}
+
+// Context and Hook
+interface ToastContextType {
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, 'id'>) => void;
+  removeToast: (id: string) => void;
+  success: (title: string, description?: string) => void;
+  error: (title: string, description?: string) => void;
+  info: (title: string, description?: string) => void;
+  warning: (title: string, description?: string) => void;
+}
+
+const ToastContext = React.createContext<ToastContextType | undefined>(undefined);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = React.useState<Toast[]>([]);
+
+  const addToast = React.useCallback((toast: Omit<Toast, 'id'>) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { ...toast, id }]);
+  }, []);
+
+  const removeToast = React.useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const success = React.useCallback(
+    (title: string, description?: string) => {
+      addToast({ type: 'success', title, description });
+    },
+    [addToast]
+  );
+
+  const error = React.useCallback(
+    (title: string, description?: string) => {
+      addToast({ type: 'error', title, description });
+    },
+    [addToast]
+  );
+
+  const info = React.useCallback(
+    (title: string, description?: string) => {
+      addToast({ type: 'info', title, description });
+    },
+    [addToast]
+  );
+
+  const warning = React.useCallback(
+    (title: string, description?: string) => {
+      addToast({ type: 'warning', title, description });
+    },
+    [addToast]
+  );
+
+  return (
+    <ToastContext.Provider
+      value={{ toasts, addToast, removeToast, success, error, info, warning }}
+    >
+      {children}
+      <ToastContainer toasts={toasts} onClose={removeToast} />
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
diff --git a/frontend/lib/animations.ts b/frontend/lib/animations.ts
new file mode 100644
index 0000000..ea5f13a
--- /dev/null
+++ b/frontend/lib/animations.ts
@@ -0,0 +1,43 @@
+// Animation utilities and variants for framer-motion
+export const fadeIn = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -20 },
+  transition: { duration: 0.3 }
+};
+
+export const slideIn = {
+  initial: { opacity: 0, x: -20 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: 20 },
+  transition: { duration: 0.3 }
+};
+
+export const scaleIn = {
+  initial: { opacity: 0, scale: 0.95 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.95 },
+  transition: { duration: 0.2 }
+};
+
+export const staggerContainer = {
+  animate: {
+    transition: {
+      staggerChildren: 0.1
+    }
+  }
+};
+
+export const cardHover = {
+  rest: { scale: 1, y: 0 },
+  hover: {
+    scale: 1.02,
+    y: -4,
+    transition: { duration: 0.2 }
+  }
+};
+
+// CSS class helpers for smooth transitions
+export const transitionClasses = 'transition-all duration-300 ease-in-out';
+export const hoverLift = 'hover:-translate-y-1 hover:shadow-lg transition-all duration-200';
+export const smoothShadow = 'shadow-sm hover:shadow-md transition-shadow duration-200';
diff --git a/supabase/apply-migrations.md b/supabase/apply-migrations.md
index e1b4ac4..49d9323 100644
--- a/supabase/apply-migrations.md
+++ b/supabase/apply-migrations.md
@@ -1,78 +1,113 @@
-# Apply Database Migrations
+# Apply Database Migrations - UPDATED
 
-To apply all new migrations, follow these steps:
+## ⚠️ IMPORTANT: Run these migrations in your Supabase Dashboard NOW!
 
-1. **Open Supabase Dashboard**: Go to your Supabase project dashboard
+Your application is currently **broken** because these database tables don't exist yet.
 
-2. **SQL Editor**: Navigate to the SQL Editor section
+---
 
-3. **Run Migrations in Order**:
-   - First: `migrations/003_add_submissions.sql` (Submissions table)
-   - Second: `migrations/004_add_enrollment_fields.sql` (Enrollment fields)
-   - Third: `migrations/005_add_task_resources.sql` (Task resources + deadline field)
+## Quick Steps:
 
-4. **Create Storage Buckets**:
+### 1. **Open Supabase Dashboard**
+   - Go to your Supabase project: https://app.supabase.com
+   - Navigate to **SQL Editor**
 
-   **Bucket 1: submissions** (for student file uploads)
-   - Go to Storage section
-   - Create a new bucket named `submissions`
-   - Make it public
-   - Add the following policies:
+### 2. **Copy & Run Migration 003** (Submissions Table)
+   - Open: `migrations/003_add_submissions.sql`
+   - Copy the entire contents
+   - Paste into SQL Editor
+   - Click **Run**
 
-```sql
--- Allow public SELECT access
-CREATE POLICY "Public Access"
-ON storage.objects FOR SELECT
-USING (bucket_id = 'submissions');
-
--- Allow authenticated INSERT
-CREATE POLICY "Authenticated users can upload"
-ON storage.objects FOR INSERT
-WITH CHECK (bucket_id = 'submissions');
-
--- Allow authenticated UPDATE (for their own files)
-CREATE POLICY "Users can update own files"
-ON storage.objects FOR UPDATE
-USING (bucket_id = 'submissions');
-
--- Allow authenticated DELETE (for their own files)
-CREATE POLICY "Users can delete own files"
-ON storage.objects FOR DELETE
-USING (bucket_id = 'submissions');
-```
+### 3. **Copy & Run Migration 004** (Enrollment Fields)
+   - Open: `migrations/004_add_enrollment_fields.sql`
+   - Copy the entire contents
+   - Paste into SQL Editor
+   - Click **Run**
+
+### 4. **Copy & Run Migration 005** (Task Resources)
+   - Open: `migrations/005_add_task_resources.sql`
+   - Copy the entire contents
+   - Paste into SQL Editor
+   - Click **Run**
+
+### 5. **Copy & Run Migration 006** (Storage Buckets + Cleanup) ⭐ NEW!
+   - Open: `migrations/006_setup_storage_and_cleanup.sql`
+   - Copy the entire contents
+   - Paste into SQL Editor
+   - Click **Run**
+   - This will:
+     - ✅ Create storage buckets (submissions, task-resources)
+     - ✅ Set up all storage policies automatically
+     - ✅ Remove deadline column (no longer used)
+     - ✅ Clean up enrollment statuses
 
-   **Bucket 2: task-resources** (for teacher resource uploads)
-   - Create a new bucket named `task-resources`
-   - Make it public
-   - Add the following policies:
+---
+
+## 6. **Verify Everything Works**
+
+Run this query in SQL Editor to verify:
 
 ```sql
--- Allow public SELECT access
-CREATE POLICY "Public Access"
-ON storage.objects FOR SELECT
-USING (bucket_id = 'task-resources');
-
--- Allow teachers to upload
-CREATE POLICY "Teachers can upload"
-ON storage.objects FOR INSERT
-WITH CHECK (bucket_id = 'task-resources');
-
--- Allow teachers to delete
-CREATE POLICY "Teachers can delete"
-ON storage.objects FOR DELETE
-USING (bucket_id = 'task-resources');
+-- Check tables exist
+SELECT table_name
+FROM information_schema.tables
+WHERE table_schema = 'public'
+AND table_name IN ('submissions', 'task_resources', 'homeworks', 'enrollments');
+
+-- Check storage buckets exist
+SELECT id, name, public
+FROM storage.buckets
+WHERE id IN ('submissions', 'task-resources');
+
+-- Check homeworks does NOT have deadline column (should return 0 rows)
+SELECT column_name
+FROM information_schema.columns
+WHERE table_name = 'homeworks'
+AND column_name = 'deadline';
 ```
 
-5. **Verify**: Check that all tables have been created successfully:
-   - `submissions`
-   - `task_resources`
-   - Check that `homeworks` has `deadline` field
-   - Check that `enrollments` supports 'missed' status
+Expected results:
+- ✅ 4 tables found: submissions, task_resources, homeworks, enrollments
+- ✅ 2 buckets found: submissions, task-resources
+- ✅ 0 rows for deadline column (it should be removed)
+
+---
+
+## What These Migrations Do:
+
+1. ✅ **003**: Creates `submissions` table for student file uploads
+2. ✅ **004**: Adds `submission_text`, `review_score`, `review_comment`, `completed_at` to enrollments
+3. ✅ **005**: Creates `task_resources` table for teacher resource uploads
+4. ✅ **006**:
+   - Creates storage buckets automatically
+   - Sets up all storage policies
+   - Removes deadline functionality
+   - Cleans up enrollment statuses
+
+---
+
+## After Running Migrations:
+
+1. **Refresh your application** - The errors should disappear
+2. **Test file uploads**:
+   - As a teacher: Create a homework and upload resource files
+   - As a student: Enroll in homework and upload submission files
+3. **All file upload error handling is now in place** with detailed user feedback
+
+---
+
+## Troubleshooting:
+
+**If you get "permission denied" errors:**
+- Make sure you're logged in as the database owner
+- Try running each migration separately
 
-## What was changed:
+**If storage buckets fail to create:**
+- Go to Storage section in dashboard
+- Manually create buckets: `submissions` and `task-resources`
+- Make both public
+- Then re-run migration 006 (just the policy parts will execute)
 
-1. ✅ Added submissions table with file upload support
-2. ✅ Added student file upload functionality
-3. ✅ Added teacher submission review page
-4. ✅ Added "Unreviewed Work" section in teacher dashboard
-5. ✅ Dashboard now redirects to role-specific pages after login
+**If you see "already exists" errors:**
+- This is OK! It means the migration was already partially applied
+- The migrations use `IF NOT EXISTS` and `ON CONFLICT` to be safe
diff --git a/supabase/migrations/006_setup_storage_and_cleanup.sql b/supabase/migrations/006_setup_storage_and_cleanup.sql
new file mode 100644
index 0000000..5ad9577
--- /dev/null
+++ b/supabase/migrations/006_setup_storage_and_cleanup.sql
@@ -0,0 +1,79 @@
+-- ============================================
+-- Setup Storage Buckets and Cleanup
+-- ============================================
+
+-- ============================================
+-- 1. CREATE STORAGE BUCKETS
+-- ============================================
+
+-- Create submissions bucket (for student file uploads)
+INSERT INTO storage.buckets (id, name, public)
+VALUES ('submissions', 'submissions', true)
+ON CONFLICT (id) DO NOTHING;
+
+-- Create task-resources bucket (for teacher file uploads)
+INSERT INTO storage.buckets (id, name, public)
+VALUES ('task-resources', 'task-resources', true)
+ON CONFLICT (id) DO NOTHING;
+
+-- ============================================
+-- 2. STORAGE POLICIES - SUBMISSIONS BUCKET
+-- ============================================
+
+-- Allow everyone to read submissions
+CREATE POLICY IF NOT EXISTS "Public Access to Submissions"
+ON storage.objects FOR SELECT
+USING (bucket_id = 'submissions');
+
+-- Allow authenticated users to upload submissions
+CREATE POLICY IF NOT EXISTS "Authenticated users can upload submissions"
+ON storage.objects FOR INSERT
+WITH CHECK (bucket_id = 'submissions' AND auth.role() = 'authenticated');
+
+-- Allow users to delete their own submissions
+CREATE POLICY IF NOT EXISTS "Users can delete own submissions"
+ON storage.objects FOR DELETE
+USING (bucket_id = 'submissions' AND auth.role() = 'authenticated');
+
+-- Allow users to update their own submissions
+CREATE POLICY IF NOT EXISTS "Users can update own submissions"
+ON storage.objects FOR UPDATE
+USING (bucket_id = 'submissions' AND auth.role() = 'authenticated');
+
+-- ============================================
+-- 3. STORAGE POLICIES - TASK-RESOURCES BUCKET
+-- ============================================
+
+-- Allow everyone to read task resources
+CREATE POLICY IF NOT EXISTS "Public Access to Task Resources"
+ON storage.objects FOR SELECT
+USING (bucket_id = 'task-resources');
+
+-- Allow authenticated users to upload task resources
+CREATE POLICY IF NOT EXISTS "Authenticated users can upload task resources"
+ON storage.objects FOR INSERT
+WITH CHECK (bucket_id = 'task-resources' AND auth.role() = 'authenticated');
+
+-- Allow users to delete their own task resources
+CREATE POLICY IF NOT EXISTS "Users can delete own task resources"
+ON storage.objects FOR DELETE
+USING (bucket_id = 'task-resources' AND auth.role() = 'authenticated');
+
+-- Allow users to update their own task resources
+CREATE POLICY IF NOT EXISTS "Users can update own task resources"
+ON storage.objects FOR UPDATE
+USING (bucket_id = 'task-resources' AND auth.role() = 'authenticated');
+
+-- ============================================
+-- 4. CLEANUP - Remove deadline column (no longer needed)
+-- ============================================
+ALTER TABLE homeworks
+DROP COLUMN IF EXISTS deadline;
+
+-- Update enrollments status constraint (remove 'missed' since no deadline)
+ALTER TABLE enrollments
+DROP CONSTRAINT IF EXISTS enrollments_status_check;
+
+ALTER TABLE enrollments
+ADD CONSTRAINT enrollments_status_check
+CHECK (status IN ('active', 'completed', 'reviewed'));
diff --git a/supabase/verify_migrations.sql b/supabase/verify_migrations.sql
new file mode 100644
index 0000000..ca37cda
--- /dev/null
+++ b/supabase/verify_migrations.sql
@@ -0,0 +1,70 @@
+-- ============================================
+-- QUICK VERIFICATION SCRIPT
+-- Run this after applying all migrations
+-- ============================================
+
+-- 1. Check all required tables exist
+SELECT
+  CASE
+    WHEN COUNT(*) = 4 THEN '✅ ALL TABLES EXIST'
+    ELSE '❌ MISSING TABLES: ' || (4 - COUNT(*))::text
+  END as table_status,
+  array_agg(table_name) as found_tables
+FROM information_schema.tables
+WHERE table_schema = 'public'
+AND table_name IN ('submissions', 'task_resources', 'homeworks', 'enrollments');
+
+-- 2. Check storage buckets exist
+SELECT
+  CASE
+    WHEN COUNT(*) = 2 THEN '✅ ALL BUCKETS EXIST'
+    ELSE '❌ MISSING BUCKETS: ' || (2 - COUNT(*))::text
+  END as bucket_status,
+  array_agg(name) as found_buckets
+FROM storage.buckets
+WHERE id IN ('submissions', 'task-resources');
+
+-- 3. Verify deadline column is REMOVED
+SELECT
+  CASE
+    WHEN COUNT(*) = 0 THEN '✅ DEADLINE REMOVED (CORRECT)'
+    ELSE '❌ DEADLINE STILL EXISTS (NEEDS CLEANUP)'
+  END as deadline_status
+FROM information_schema.columns
+WHERE table_name = 'homeworks'
+AND column_name = 'deadline';
+
+-- 4. Check enrollment fields
+SELECT
+  CASE
+    WHEN COUNT(*) = 4 THEN '✅ ALL ENROLLMENT FIELDS EXIST'
+    ELSE '❌ MISSING FIELDS: ' || (4 - COUNT(*))::text
+  END as enrollment_fields_status,
+  array_agg(column_name) as found_fields
+FROM information_schema.columns
+WHERE table_name = 'enrollments'
+AND column_name IN ('submission_text', 'completed_at', 'review_score', 'review_comment');
+
+-- 5. Check submissions table structure
+SELECT
+  CASE
+    WHEN COUNT(*) >= 8 THEN '✅ SUBMISSIONS TABLE COMPLETE'
+    ELSE '❌ SUBMISSIONS TABLE INCOMPLETE'
+  END as submissions_status,
+  array_agg(column_name) as found_columns
+FROM information_schema.columns
+WHERE table_name = 'submissions';
+
+-- 6. Check task_resources table structure
+SELECT
+  CASE
+    WHEN COUNT(*) >= 6 THEN '✅ TASK_RESOURCES TABLE COMPLETE'
+    ELSE '❌ TASK_RESOURCES TABLE INCOMPLETE'
+  END as task_resources_status,
+  array_agg(column_name) as found_columns
+FROM information_schema.columns
+WHERE table_name = 'task_resources';
+
+-- ============================================
+-- SUMMARY: If all checks show ✅, you're good to go!
+-- ============================================