From ce6bb0a27ad1b4e564155df1236cd71fc86d57e3 Mon Sep 17 00:00:00 2001
From: mertyercel <mertesatyercel@gmail.com>
Date: Sat, 24 Jan 2026 15:05:00 -0600
Subject: [PATCH 1/2] Fixed most of non-mobile friendly UI

---
 app/educator/dashboard/page.tsx               | 148 +++++---
 .../students/StudentDetailsDialog.tsx         | 213 +++++++----
 app/educator/students/page.tsx                |  81 +++--
 app/student/diagnostic/page.tsx               | 107 ++++--
 app/student/learning-style-quiz/page.tsx      |  82 +++--
 app/student/onboarding/page.tsx               | 332 ++++++++++++++++--
 domains/auth/LoginForm.tsx                    |  53 ++-
 domains/auth/SignupForm.tsx                   | 125 ++++---
 .../educator/onboarding/OnboardingForm.tsx    |  36 +-
 domains/student/dashboard/GreetingCard.tsx    |  36 +-
 .../dashboard/PromptDiagnosticCard.tsx        |  25 +-
 .../dashboard/RecentQuizCompletions.tsx       |  33 +-
 .../student/dashboard/RecommendedQuizzes.tsx  |  51 +--
 .../dashboard/StudentDashboardClient.tsx      |  13 +-
 .../dashboard/StudentDashboardHeader.tsx      |  57 ++-
 domains/student/dashboard/WritingFeedback.tsx | 106 ++++--
 16 files changed, 1015 insertions(+), 483 deletions(-)

diff --git a/app/educator/dashboard/page.tsx b/app/educator/dashboard/page.tsx
index 4723778..bab669c 100644
--- a/app/educator/dashboard/page.tsx
+++ b/app/educator/dashboard/page.tsx
@@ -11,57 +11,79 @@ import { usePathname } from "next/navigation";
 
 export default function InstructorDashboard() {
   const pathname = usePathname();
+
   return (
     <div className="min-h-screen bg-gray-50">
+      {/* Header */}
       <div className="bg-black w-full sticky top-0 z-50 shadow-sm">
-        <header className="relative w-full py-4 px-8 flex items-center justify-between">
-          <h1 className="text-lg font-semibold z-10">
-            <Image src={logo} alt="My Image" width={120} height={72} />
-          </h1>
-
-          <div className="relative w-full max-w-sm">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-black w-4 h-4" />
-            <Input
-              type="text"
-              placeholder="      Search for lessons, assessments..."
-              className="w-full bg-white rounded-full"
+        <header className="relative w-full py-3 sm:py-4 px-4 sm:px-6 md:px-8 flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-4">
+          {/* Logo and User Info Row (mobile) / Logo (desktop) */}
+          <div className="flex items-center justify-between w-full sm:w-auto">
+            <Image
+              src={logo}
+              alt="Logo"
+              width={120}
+              height={72}
+              className="w-[100px] sm:w-[120px] h-auto"
             />
-          </div>
 
-          <div className="flex items-start gap-4 z-10 justify-end">
-            <div className="flex flex-col items-center justify-end"></div>
-
-            <div className="flex items-center space-x-4">
-              <BellIcon className="text-white h-10 w-10" />
-              <Avatar className="h-14 w-14">
+            {/* Mobile: Show avatar and bell in header row */}
+            <div className="flex items-center gap-3 sm:hidden">
+              <BellIcon className="text-white h-6 w-6" />
+              <Avatar className="h-9 w-9">
                 <AvatarImage
                   src="https://github.com/shadcn.png"
                   alt="Instructor"
                 />
+                <AvatarFallback>IN</AvatarFallback>
               </Avatar>
             </div>
           </div>
+
+          {/* Search Bar */}
+          <div className="relative w-full sm:w-auto sm:flex-1 sm:max-w-sm order-3 sm:order-2">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-black w-4 h-4" />
+            <Input
+              type="text"
+              placeholder="Search for lessons, assessments..."
+              className="w-full bg-white rounded-full pl-9 text-sm sm:text-base"
+            />
+          </div>
+
+          {/* Desktop: Avatar and Bell */}
+          <div className="hidden sm:flex items-center gap-4 order-2 sm:order-3">
+            <BellIcon className="text-white h-7 w-7 md:h-10 md:w-10" />
+            <Avatar className="h-10 w-10 md:h-14 md:w-14">
+              <AvatarImage
+                src="https://github.com/shadcn.png"
+                alt="Instructor"
+              />
+              <AvatarFallback>IN</AvatarFallback>
+            </Avatar>
+          </div>
         </header>
       </div>
 
       {/* Main */}
-      <main className="max-w-7xl mx-auto p-8 space-y-6">
+      <main className="max-w-7xl mx-auto p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-6">
         {/* Greeting Card */}
         <Card className="rounded-xl">
-          <CardContent className="flex items-center gap-3 py-4 px-5">
-            <Avatar className="h-12 w-12">
+          <CardContent className="flex flex-col sm:flex-row items-center gap-3 py-3 sm:py-4 px-4 sm:px-5 text-center sm:text-left">
+            <Avatar className="h-10 w-10 sm:h-12 sm:w-12">
               <AvatarImage src="https://github.com/shadcn.png" />
               <AvatarFallback>IN</AvatarFallback>
             </Avatar>
-            <h1 className="text-xl font-semibold">Hello Mr. Burns!</h1>
+            <h1 className="text-lg sm:text-xl font-semibold">
+              Hello Mr. Burns!
+            </h1>
           </CardContent>
         </Card>
 
         {/* Tabs */}
-        <div className="flex gap-3">
+        <div className="flex gap-2 sm:gap-3">
           <Link href="/educator/dashboard">
             <Button
-              className="rounded-md"
+              className="rounded-md text-sm sm:text-base px-3 sm:px-4"
               variant={
                 pathname === "/educator/dashboard" ? "default" : "outline"
               }
@@ -72,7 +94,7 @@ export default function InstructorDashboard() {
 
           <Link href="/educator/students">
             <Button
-              className="rounded-md"
+              className="rounded-md text-sm sm:text-base px-3 sm:px-4"
               variant={
                 pathname === "/educator/students" ? "default" : "outline"
               }
@@ -84,65 +106,87 @@ export default function InstructorDashboard() {
 
         {/* Recent Assessments */}
         <Card>
-          <CardHeader>
+          <CardHeader className="px-4 sm:px-6">
             <div className="flex items-center gap-2">
-              <BellIcon className="h-4 w-4 text-gray-600" />
-              <CardTitle>Recent Assessment Results</CardTitle>
+              <BellIcon className="h-4 w-4 text-gray-600 shrink-0" />
+              <CardTitle className="text-base sm:text-lg">
+                Recent Assessment Results
+              </CardTitle>
             </div>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex justify-between">
+          <CardContent className="space-y-3 sm:space-y-4 px-4 sm:px-6">
+            <div className="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-0">
               <div>
-                <p className="font-medium">Sarah Johnson</p>
-                <p className="text-sm text-gray-500">Math Quiz 3</p>
+                <p className="font-medium text-sm sm:text-base">
+                  Sarah Johnson
+                </p>
+                <p className="text-xs sm:text-sm text-gray-500">Math Quiz 3</p>
+              </div>
+              <div className="text-xs sm:text-sm text-gray-600">
+                95% · 10 min ago
               </div>
-              <div className="text-sm text-gray-600">95% · 10 min ago</div>
             </div>
-            <div className="flex justify-between">
+            <div className="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-0">
               <div>
-                <p className="font-medium">Emily Rodriguez</p>
-                <p className="text-sm text-gray-500">Reading Quiz 2</p>
+                <p className="font-medium text-sm sm:text-base">
+                  Emily Rodriguez
+                </p>
+                <p className="text-xs sm:text-sm text-gray-500">
+                  Reading Quiz 2
+                </p>
+              </div>
+              <div className="text-xs sm:text-sm text-gray-600">
+                95% · 10 min ago
               </div>
-              <div className="text-sm text-gray-600">95% · 10 min ago</div>
             </div>
           </CardContent>
         </Card>
 
         {/* Analytics Grid */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
           {/* Proficiency */}
           <Card className="lg:col-span-2">
-            <CardHeader>
-              <CardTitle>Student Proficiency</CardTitle>
+            <CardHeader className="px-4 sm:px-6">
+              <CardTitle className="text-base sm:text-lg">
+                Student Proficiency
+              </CardTitle>
             </CardHeader>
-            <CardContent className="h-64 flex items-center justify-center text-gray-400">
+            <CardContent className="h-48 sm:h-56 md:h-64 flex items-center justify-center text-gray-400 text-sm sm:text-base px-4 sm:px-6">
               Chart goes here
             </CardContent>
           </Card>
 
           {/* Weaknesses */}
           <Card>
-            <CardHeader>
-              <CardTitle>Cohort Weaknesses</CardTitle>
+            <CardHeader className="px-4 sm:px-6">
+              <CardTitle className="text-base sm:text-lg">
+                Cohort Weaknesses
+              </CardTitle>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="border rounded-lg p-3">
-                <p className="font-medium">Quadratic Equations</p>
-                <p className="text-sm text-gray-500">
+            <CardContent className="space-y-3 sm:space-y-4 px-4 sm:px-6">
+              <div className="border rounded-lg p-2 sm:p-3">
+                <p className="font-medium text-sm sm:text-base">
+                  Quadratic Equations
+                </p>
+                <p className="text-xs sm:text-sm text-gray-500">
                   Math · 8 students affected
                 </p>
               </div>
-              <div className="border rounded-lg p-3">
-                <p className="font-medium">Verb Conjugation</p>
-                <p className="text-sm text-gray-500">
+              <div className="border rounded-lg p-2 sm:p-3">
+                <p className="font-medium text-sm sm:text-base">
+                  Verb Conjugation
+                </p>
+                <p className="text-xs sm:text-sm text-gray-500">
                   English · 6 students affected
                 </p>
               </div>
-              <Button className="w-full rounded-full">View All</Button>
+              <Button className="w-full rounded-full text-sm sm:text-base">
+                View All
+              </Button>
             </CardContent>
           </Card>
         </div>
       </main>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/educator/students/StudentDetailsDialog.tsx b/app/educator/students/StudentDetailsDialog.tsx
index d7bb350..f4b6880 100644
--- a/app/educator/students/StudentDetailsDialog.tsx
+++ b/app/educator/students/StudentDetailsDialog.tsx
@@ -41,11 +41,14 @@ interface StudentDetails {
     correct: number;
     wrong: number;
     completed_at: string | null;
-    performance_by_subject: Record<string, {
-      correct: number;
-      total: number;
-      topics: Record<string, { correct: number; total: number }>;
-    }>;
+    performance_by_subject: Record<
+      string,
+      {
+        correct: number;
+        total: number;
+        topics: Record<string, { correct: number; total: number }>;
+      }
+    >;
   } | null;
 }
 
@@ -67,87 +70,119 @@ export default function StudentDetailsDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="h-[80vh] p-0 rounded-xl flex flex-col overflow-hidden"
+        className="w-[95vw] max-w-4xl h-[90vh] sm:h-[80vh] p-0 rounded-xl flex flex-col overflow-hidden"
         showCloseButton={false}
       >
         <VisuallyHidden>
-          <DialogTitle>{student ? `${student.first_name} ${student.last_name}` : "Student Details"}</DialogTitle>
+          <DialogTitle>
+            {student
+              ? `${student.first_name} ${student.last_name}`
+              : "Student Details"}
+          </DialogTitle>
         </VisuallyHidden>
+
         {/* Header */}
-        <div className="relative bg-[#A3E635] px-8 py-3 shrink-0">
+        <div className="relative bg-[#A3E635] px-4 sm:px-6 md:px-8 py-3 shrink-0">
           <button
             onClick={() => onOpenChange(false)}
-            className="absolute top-4 right-4 text-xl font-bold"
+            className="absolute top-3 sm:top-4 right-3 sm:right-4 text-xl font-bold"
           >
             ×
           </button>
 
-          <h2 className="text-2xl font-bold capitalize text-black">
+          <h2 className="text-xl sm:text-2xl font-bold capitalize text-black pr-8">
             {student ? `${student.first_name} ${student.last_name}` : ""}
           </h2>
 
           {details && (
-            <p className="mt-1 text-sm text-black/70">
-              Last Active: {details.lastActive || "No recent activity"} | Total
-              Lessons: {details.totalLessons}
+            <p className="mt-1 text-xs sm:text-sm text-black/70">
+              <span className="block sm:inline">
+                Last Active: {details.lastActive || "No recent activity"}
+              </span>
+              <span className="hidden sm:inline"> | </span>
+              <span className="block sm:inline">
+                Total Lessons: {details.totalLessons}
+              </span>
             </p>
           )}
         </div>
 
-        <div className="px-8 py-5 space-y-5 overflow-y-auto">
+        <div className="px-4 sm:px-6 md:px-8 py-4 sm:py-5 space-y-4 sm:space-y-5 overflow-y-auto flex-1">
           {loading ? (
-            <div className="text-center py-16 text-gray-500">
+            <div className="text-center py-12 sm:py-16 text-gray-500 text-sm sm:text-base">
               Loading student details…
             </div>
           ) : details ? (
             <>
               {/* Diagnostic Results */}
               {details.diagnosticResults && (
-                <Card className="p-5 rounded-2xl">
-                  <h3 className="text-xl font-semibold text-[#4D6A12] mb-4">
+                <Card className="p-4 sm:p-5 rounded-xl sm:rounded-2xl">
+                  <h3 className="text-lg sm:text-xl font-semibold text-[#4D6A12] mb-3 sm:mb-4">
                     Diagnostic Results
                   </h3>
-                  <div className="space-y-4">
-                    <div className="grid grid-cols-3 gap-4">
+                  <div className="space-y-3 sm:space-y-4">
+                    <div className="grid grid-cols-3 gap-2 sm:gap-4">
                       <div>
-                        <div className="text-sm text-gray-500">Score</div>
-                        <div className="text-2xl font-bold text-[#4D6A12]">
+                        <div className="text-xs sm:text-sm text-gray-500">
+                          Score
+                        </div>
+                        <div className="text-xl sm:text-2xl font-bold text-[#4D6A12]">
                           {details.diagnosticResults.score}%
                         </div>
                       </div>
                       <div>
-                        <div className="text-sm text-gray-500">Correct</div>
-                        <div className="text-2xl font-bold text-green-600">
+                        <div className="text-xs sm:text-sm text-gray-500">
+                          Correct
+                        </div>
+                        <div className="text-xl sm:text-2xl font-bold text-green-600">
                           {details.diagnosticResults.correct}
                         </div>
                       </div>
                       <div>
-                        <div className="text-sm text-gray-500">Wrong</div>
-                        <div className="text-2xl font-bold text-red-600">
+                        <div className="text-xs sm:text-sm text-gray-500">
+                          Wrong
+                        </div>
+                        <div className="text-xl sm:text-2xl font-bold text-red-600">
                           {details.diagnosticResults.wrong}
                         </div>
                       </div>
                     </div>
-                    <div className="text-sm text-gray-500">
-                      Total Questions: {details.diagnosticResults.total_questions}
+                    <div className="text-xs sm:text-sm text-gray-500">
+                      <span className="block sm:inline">
+                        Total Questions:{" "}
+                        {details.diagnosticResults.total_questions}
+                      </span>
                       {details.diagnosticResults.completed_at && (
-                        <span className="ml-4">
-                          Completed: {new Date(details.diagnosticResults.completed_at).toLocaleDateString()}
+                        <span className="block sm:inline sm:ml-4">
+                          Completed:{" "}
+                          {new Date(
+                            details.diagnosticResults.completed_at
+                          ).toLocaleDateString()}
                         </span>
                       )}
                     </div>
-                    
+
                     {/* Performance by Subject */}
-                    {Object.keys(details.diagnosticResults.performance_by_subject || {}).length > 0 && (
-                      <div className="mt-4">
-                        <h4 className="text-sm font-semibold text-gray-700 mb-2">
+                    {Object.keys(
+                      details.diagnosticResults.performance_by_subject || {}
+                    ).length > 0 && (
+                      <div className="mt-3 sm:mt-4">
+                        <h4 className="text-xs sm:text-sm font-semibold text-gray-700 mb-2">
                           Performance by Subject
                         </h4>
-                        <div className="space-y-2">
-                          {Object.entries(details.diagnosticResults.performance_by_subject).map(([subject, data]: [string, any]) => {
-                            const accuracy = data.total > 0 ? Math.round((data.correct / data.total) * 100) : 0;
+                        <div className="space-y-1 sm:space-y-2">
+                          {Object.entries(
+                            details.diagnosticResults.performance_by_subject
+                          ).map(([subject, data]: [string, any]) => {
+                            const accuracy =
+                              data.total > 0
+                                ? Math.round((data.correct / data.total) * 100)
+                                : 0;
                             return (
-                              <div key={subject} className="flex items-center justify-between text-sm">
+                              <div
+                                key={subject}
+                                className="flex items-center justify-between text-xs sm:text-sm"
+                              >
                                 <span className="font-medium">{subject}</span>
                                 <span className="text-gray-600">
                                   {data.correct}/{data.total} ({accuracy}%)
@@ -163,27 +198,29 @@ export default function StudentDetailsDialog({
               )}
 
               {/* Strengths & Weaknesses */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
                 {/* Strengths */}
-                <Card className="p-5 rounded-2xl">
-                  <h3 className="text-xl font-semibold text-[#4D6A12]">
+                <Card className="p-4 sm:p-5 rounded-xl sm:rounded-2xl">
+                  <h3 className="text-lg sm:text-xl font-semibold text-[#4D6A12] mb-3 sm:mb-4">
                     Top Strengths
                   </h3>
 
                   {details.strengths.length === 0 ? (
-                    <p className="text-sm text-gray-400">
+                    <p className="text-xs sm:text-sm text-gray-400">
                       No strengths recorded
                     </p>
                   ) : (
-                    <div className="space-y-4">
+                    <div className="space-y-3 sm:space-y-4">
                       {details.strengths.map((s, i) => (
                         <div key={i}>
-                          <div className="font-medium">{s.skill}</div>
-                          <div className="text-sm text-gray-500">
+                          <div className="font-medium text-sm sm:text-base">
+                            {s.skill}
+                          </div>
+                          <div className="text-xs sm:text-sm text-gray-500">
                             {s.description}
                           </div>
                           {i < details.strengths.length - 1 && (
-                            <hr className="my-3" />
+                            <hr className="my-2 sm:my-3" />
                           )}
                         </div>
                       ))}
@@ -192,25 +229,27 @@ export default function StudentDetailsDialog({
                 </Card>
 
                 {/* Weaknesses */}
-                <Card className="p-5 rounded-2xl">
-                  <h3 className="text-xl font-semibold text-[#4D6A12]">
+                <Card className="p-4 sm:p-5 rounded-xl sm:rounded-2xl">
+                  <h3 className="text-lg sm:text-xl font-semibold text-[#4D6A12] mb-3 sm:mb-4">
                     Top Weaknesses
                   </h3>
 
                   {details.weaknesses.length === 0 ? (
-                    <p className="text-sm text-gray-400">
+                    <p className="text-xs sm:text-sm text-gray-400">
                       No weaknesses recorded
                     </p>
                   ) : (
-                    <div className="space-y-4">
+                    <div className="space-y-3 sm:space-y-4">
                       {details.weaknesses.map((w, i) => (
                         <div key={i}>
-                          <div className="font-medium">{w.skill}</div>
-                          <div className="text-sm text-gray-500">
+                          <div className="font-medium text-sm sm:text-base">
+                            {w.skill}
+                          </div>
+                          <div className="text-xs sm:text-sm text-gray-500">
                             {w.description}
                           </div>
                           {i < details.weaknesses.length - 1 && (
-                            <hr className="my-3" />
+                            <hr className="my-2 sm:my-3" />
                           )}
                         </div>
                       ))}
@@ -221,15 +260,15 @@ export default function StudentDetailsDialog({
 
               {/* Lesson Tracker */}
               <Card>
-                <CardContent>
-                  <h3 className="text-xl font-semibold text-[#4D6A12] mb-4">
+                <CardContent className="p-4 sm:p-6">
+                  <h3 className="text-lg sm:text-xl font-semibold text-[#4D6A12] mb-3 sm:mb-4">
                     Lesson Tracker
                   </h3>
 
                   {/* Filters */}
-                  <div className="flex gap-3 mb-4">
+                  <div className="flex flex-col sm:flex-row gap-2 sm:gap-3 mb-3 sm:mb-4">
                     <Select>
-                      <SelectTrigger className="w-[140px] rounded-md">
+                      <SelectTrigger className="w-full sm:w-[140px] rounded-md text-sm">
                         <SelectValue placeholder="Sort by Date" />
                       </SelectTrigger>
                       <SelectContent>
@@ -238,7 +277,7 @@ export default function StudentDetailsDialog({
                     </Select>
 
                     <Select>
-                      <SelectTrigger className="w-[160px] rounded-md">
+                      <SelectTrigger className="w-full sm:w-[160px] rounded-md text-sm">
                         <SelectValue placeholder="Sort by Subject" />
                       </SelectTrigger>
                       <SelectContent>
@@ -247,14 +286,48 @@ export default function StudentDetailsDialog({
                     </Select>
                   </div>
 
-                  {/* Table */}
-                  <div className="max-h-[260px] overflow-y-auto">
+                  {/* Mobile: Card-based layout */}
+                  <div className="block sm:hidden space-y-3 max-h-[200px] overflow-y-auto">
+                    {details.lessonHistory.length === 0 ? (
+                      <p className="text-center text-gray-400 py-6 text-sm">
+                        No lessons yet
+                      </p>
+                    ) : (
+                      details.lessonHistory.map((lesson, index) => (
+                        <div
+                          key={index}
+                          className="p-3 bg-gray-50 rounded-lg border border-gray-200"
+                        >
+                          <div className="flex justify-between items-start mb-1">
+                            <span className="font-medium text-sm">
+                              {lesson.assignment}
+                            </span>
+                            <span className="text-xs text-gray-500">
+                              {lesson.lastAttempt}
+                            </span>
+                          </div>
+                          <p className="text-xs text-gray-600">
+                            {lesson.feedback}
+                          </p>
+                        </div>
+                      ))
+                    )}
+                  </div>
+
+                  {/* Desktop: Table layout */}
+                  <div className="hidden sm:block max-h-[260px] overflow-y-auto">
                     <Table>
                       <TableHeader>
                         <TableRow>
-                          <TableHead>Assignment</TableHead>
-                          <TableHead>Last Attempt</TableHead>
-                          <TableHead>Feedback</TableHead>
+                          <TableHead className="text-xs sm:text-sm">
+                            Assignment
+                          </TableHead>
+                          <TableHead className="text-xs sm:text-sm">
+                            Last Attempt
+                          </TableHead>
+                          <TableHead className="text-xs sm:text-sm">
+                            Feedback
+                          </TableHead>
                         </TableRow>
                       </TableHeader>
                       <TableBody>
@@ -262,7 +335,7 @@ export default function StudentDetailsDialog({
                           <TableRow>
                             <TableCell
                               colSpan={3}
-                              className="text-center text-gray-400 py-8"
+                              className="text-center text-gray-400 py-8 text-sm"
                             >
                               No lessons yet
                             </TableCell>
@@ -270,9 +343,15 @@ export default function StudentDetailsDialog({
                         ) : (
                           details.lessonHistory.map((lesson, index) => (
                             <TableRow key={index}>
-                              <TableCell>{lesson.assignment}</TableCell>
-                              <TableCell>{lesson.lastAttempt}</TableCell>
-                              <TableCell>{lesson.feedback}</TableCell>
+                              <TableCell className="text-xs sm:text-sm">
+                                {lesson.assignment}
+                              </TableCell>
+                              <TableCell className="text-xs sm:text-sm whitespace-nowrap">
+                                {lesson.lastAttempt}
+                              </TableCell>
+                              <TableCell className="text-xs sm:text-sm">
+                                {lesson.feedback}
+                              </TableCell>
                             </TableRow>
                           ))
                         )}
@@ -287,4 +366,4 @@ export default function StudentDetailsDialog({
       </DialogContent>
     </Dialog>
   );
-}
+}
\ No newline at end of file
diff --git a/app/educator/students/page.tsx b/app/educator/students/page.tsx
index 6b059c3..c8b33dd 100644
--- a/app/educator/students/page.tsx
+++ b/app/educator/students/page.tsx
@@ -145,19 +145,20 @@ export default function StudentRoster() {
   });
 
   if (loading) {
-    // Diisplays Loading... state while waiting for data
+    // Displays Loading... state while waiting for data
     return <div>Loading...</div>;
   }
 
   return (
     <div className="min-h-screen bg-gray-50">
+      {/* Header */}
       <div className="bg-black w-full sticky top-0 z-50 shadow-sm">
-        <header className="relative w-full py-4 px-8 flex items-center justify-between">
-          <h1 className="text-lg font-semibold z-10">
+        <header className="relative w-full py-4 px-4 md:px-8 flex flex-col md:flex-row items-center gap-4 md:gap-0 justify-between">
+          <h1 className="text-lg font-semibold z-10 shrink-0">
             <Image src={logo} alt="My Image" width={120} height={72} />
           </h1>
 
-          <div className="relative w-full max-w-sm">
+          <div className="relative w-full max-w-sm order-3 md:order-2">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-black w-4 h-4" />
             <Input
               type="text"
@@ -166,12 +167,10 @@ export default function StudentRoster() {
             />
           </div>
 
-          <div className="flex items-start gap-4 z-10 justify-end">
-            <div className="flex flex-col items-center justify-end"></div>
-
+          <div className="flex items-center gap-4 z-10 order-2 md:order-3">
             <div className="flex items-center space-x-4">
-              <BellIcon className="text-white h-10 w-10" />
-              <Avatar className="h-14 w-14">
+              <BellIcon className="text-white h-8 w-8 md:h-10 md:w-10" />
+              <Avatar className="h-10 w-10 md:h-14 md:w-14">
                 <AvatarImage
                   src="https://github.com/shadcn.png"
                   alt="Instructor"
@@ -183,12 +182,12 @@ export default function StudentRoster() {
       </div>
 
       {/* Main content area */}
-      <main className="max-w-7xl mx-auto p-8">
+      <main className="max-w-7xl mx-auto p-4 md:p-8">
         {/* Tabs */}
         <div className="flex gap-3">
           <Link href="/educator/dashboard">
             <Button
-              className="rounded-md"
+              className="rounded-md text-sm md:text-base"
               variant={
                 pathname === "/educator/dashboard" ? "default" : "outline"
               }
@@ -199,7 +198,7 @@ export default function StudentRoster() {
 
           <Link href="/educator/students">
             <Button
-              className="rounded-md"
+              className="rounded-md text-sm md:text-base"
               variant={
                 pathname === "/educator/students" ? "default" : "outline"
               }
@@ -210,18 +209,18 @@ export default function StudentRoster() {
         </div>
 
         {/* Students table */}
-        <Card className="shadow-sm mt-8 rounded-lg border border-gray-200 py-2 gap-1">
-          <CardHeader className="flex items-center justify-between px-6 py-2">
-            <CardTitle className="text-2xl font-bold">My Students</CardTitle>
+        <Card className="shadow-sm mt-6 md:mt-8 rounded-lg border border-gray-200 py-2 gap-1">
+          <CardHeader className="flex items-center justify-between px-4 md:px-6 py-2">
+            <CardTitle className="text-xl md:text-2xl font-bold">My Students</CardTitle>
           </CardHeader>
 
           {/* Filter buttons */}
-          <div className="flex items-center justify-between px-6 py-3">
-            <div className="flex items-center gap-6">
+          <div className="flex flex-col md:flex-row items-start md:items-center justify-between px-4 md:px-6 py-3 gap-4">
+            <div className="flex flex-wrap items-center gap-2 md:gap-6">
               <Button
                 variant="outline"
                 size="sm"
-                className={`h-9 px-5 text-sm ${
+                className={`h-8 md:h-9 px-3 md:px-5 text-xs md:text-sm ${
                   filter === "All" ? "bg-[#ABFF2C80] border-0" : ""
                 }`}
                 onClick={() => setFilter("All")}
@@ -231,7 +230,7 @@ export default function StudentRoster() {
               <Button
                 variant="outline"
                 size="sm"
-                className={`h-9 px-5 text-sm ${
+                className={`h-8 md:h-9 px-3 md:px-5 text-xs md:text-sm ${
                   filter === "At Risk" ? "bg-[#ABFF2C80] border-0" : ""
                 }`}
                 onClick={() => setFilter("At Risk")}
@@ -241,7 +240,7 @@ export default function StudentRoster() {
               <Button
                 variant="outline"
                 size="sm"
-                className={`h-9 px-5 text-sm ${
+                className={`h-8 md:h-9 px-3 md:px-5 text-xs md:text-sm ${
                   filter === "Inactive" ? "bg-[#ABFF2C80] border-0" : ""
                 }`}
                 onClick={() => setFilter("Inactive")}
@@ -251,7 +250,7 @@ export default function StudentRoster() {
               <Button
                 variant="outline"
                 size="sm"
-                className={`h-9 px-5 text-sm ${
+                className={`h-8 md:h-9 px-3 md:px-5 text-xs md:text-sm ${
                   filter === "On Track" ? "bg-[#ABFF2C80] border-0" : ""
                 }`}
                 onClick={() => setFilter("On Track")}
@@ -264,7 +263,7 @@ export default function StudentRoster() {
               defaultValue={timeRange}
               onValueChange={(v) => setTimeRange(v as "all" | "week" | "month")}
             >
-              <SelectTrigger className="h-9 w-35 rounded-md border border-gray-300 bg-gray-100 text-sm pl-3 pr-2">
+              <SelectTrigger className="h-8 md:h-9 w-full md:w-35 rounded-md border border-gray-300 bg-gray-100 text-xs md:text-sm pl-3 pr-2">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -275,21 +274,21 @@ export default function StudentRoster() {
             </Select>
           </div>
 
-          <CardContent className="p-6">
+          <CardContent className="p-4 md:p-6">
             <div className="overflow-x-auto">
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead className="w-[260px] text-sm text-gray-500">
+                    <TableHead className="min-w-[180px] md:w-[260px] text-xs md:text-sm text-gray-500">
                       Student
                     </TableHead>
-                    <TableHead className="w-[280px] text-sm text-gray-500">
+                    <TableHead className="min-w-[160px] md:w-[280px] text-xs md:text-sm text-gray-500">
                       Progress
                     </TableHead>
-                    <TableHead className="w-[220px] text-sm text-gray-500">
+                    <TableHead className="hidden lg:table-cell w-[220px] text-sm text-gray-500">
                       Engagement
                     </TableHead>
-                    <TableHead className="w-[100px] text-sm text-gray-500">
+                    <TableHead className="min-w-[80px] md:w-[100px] text-xs md:text-sm text-gray-500">
                       Status
                     </TableHead>
                   </TableRow>
@@ -303,14 +302,14 @@ export default function StudentRoster() {
                     >
                       {/* Student */}
                       <TableCell>
-                        <div className="flex items-center gap-3">
-                          <Avatar className="h-9 w-9">
+                        <div className="flex items-center gap-2 md:gap-3">
+                          <Avatar className="h-8 w-8 md:h-9 md:w-9 shrink-0">
                             <AvatarImage src={student.avatar ?? undefined} />
-                            <AvatarFallback>
+                            <AvatarFallback className="text-xs md:text-sm">
                               {student.first_name?.[0] || ""}{student.last_name?.[0] || ""}
                             </AvatarFallback>
                           </Avatar>
-                          <span className="font-medium text-gray-900">
+                          <span className="font-medium text-gray-900 text-sm md:text-base truncate max-w-[120px] md:max-w-none">
                             {student.first_name} {student.last_name}
                           </span>
                         </div>
@@ -318,19 +317,19 @@ export default function StudentRoster() {
 
                       {/* Progress */}
                       <TableCell>
-                        <div className="flex items-center gap-3">
+                        <div className="flex items-center gap-2 md:gap-3">
                           <Progress
                             value={student.progress}
-                            className="h-3 w-[180px] [&>div]:bg-[#ABFF2C80]"
+                            className="h-2 md:h-3 w-[80px] md:w-[180px] [&>div]:bg-[#ABFF2C80]"
                           />
-                          <span className="text-sm text-gray-700 w-10 text-right">
+                          <span className="text-xs md:text-sm text-gray-700 w-8 md:w-10 text-right">
                             {student.progress}%
                           </span>
                         </div>
                       </TableCell>
 
-                      {/* Engagement - fix later */}
-                      <TableCell className="text-sm text-gray-700">
+                      {/* Engagement - hidden on mobile */}
+                      <TableCell className="hidden lg:table-cell text-sm text-gray-700">
                         {student.progress >= 80
                           ? "more than 10 hours"
                           : student.progress >= 60
@@ -343,7 +342,7 @@ export default function StudentRoster() {
                       {/* Status */}
                       <TableCell>
                         <Badge
-                          className={`rounded-full px-3 py-1 text-sm font-medium ${
+                          className={`rounded-full px-2 md:px-3 py-0.5 md:py-1 text-xs md:text-sm font-medium whitespace-nowrap ${
                             student.status === "On Track"
                               ? "bg-lime-400 text-black"
                               : "bg-red-100 text-red-700"
@@ -360,9 +359,9 @@ export default function StudentRoster() {
           </CardContent>
         </Card>
 
-        {/* Pagination or additional controls can go here */}
-        <div className="mt-2 flex items-center justify-between">
-          <p className="text-sm text-gray-600 ml-1">
+        {/* Pagination */}
+        <div className="mt-2 flex flex-col sm:flex-row items-center justify-between gap-2">
+          <p className="text-xs md:text-sm text-gray-600 ml-1">
             Showing {filteredStudents.length} of {filteredStudents.length}{" "}
             students
           </p>
@@ -385,4 +384,4 @@ export default function StudentRoster() {
       />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/student/diagnostic/page.tsx b/app/student/diagnostic/page.tsx
index c298a94..12ed299 100644
--- a/app/student/diagnostic/page.tsx
+++ b/app/student/diagnostic/page.tsx
@@ -301,11 +301,11 @@ export default function QuizzesPage() {
     if (!passage) return null;
 
     return (
-      <div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-        <p className="text-sm font-semibold text-blue-900 mb-2">
+      <div className="mb-4 sm:mb-6 p-3 sm:p-4 bg-blue-50 border border-blue-200 rounded-lg">
+        <p className="text-xs sm:text-sm font-semibold text-blue-900 mb-1 sm:mb-2">
           Reading Passage:
         </p>
-        <p className="text-sm text-blue-800 whitespace-pre-wrap">{passage}</p>
+        <p className="text-xs sm:text-sm text-blue-800 whitespace-pre-wrap">{passage}</p>
       </div>
     );
   };
@@ -318,7 +318,7 @@ export default function QuizzesPage() {
     const details = currentQuestion.question_details;
 
     return (
-      <div className="space-y-6">
+      <div className="space-y-4 sm:space-y-6">
         {/* Reading Passage */}
         {renderPassage(
           (details as FreeResponseDetails | MCQDetails | DragDropDetails)
@@ -326,27 +326,27 @@ export default function QuizzesPage() {
         )}
 
         {/* Question Box */}
-        <div className="bg-gray-100 rounded-lg p-6 min-h-[200px] flex items-center">
+        <div className="bg-gray-100 rounded-lg p-4 sm:p-6 min-h-[150px] sm:min-h-[200px] flex items-center">
           <div className="w-full">
-            <p className="text-gray-400 text-sm mb-2">
+            <p className="text-gray-400 text-xs sm:text-sm mb-1 sm:mb-2">
               {currentQuestion.subject} - {currentQuestion.topic}
             </p>
             {currentQuestion.question_type === "free_response" && (
               <>
-                <p className="text-xl font-semibold">
+                <p className="text-base sm:text-xl font-semibold">
                   {(details as FreeResponseDetails).question}
                 </p>
               </>
             )}
             {currentQuestion.question_type === "mcq" && (
               <>
-                <p className="text-xl font-semibold">
+                <p className="text-base sm:text-xl font-semibold">
                   {(details as MCQDetails).question}
                 </p>
               </>
             )}
             {currentQuestion.question_type === "drag_drop" && (
-              <p className="text-xl font-semibold">
+              <p className="text-base sm:text-xl font-semibold">
                 Match each item with the correct answer from the dropdowns.
               </p>
             )}
@@ -354,23 +354,23 @@ export default function QuizzesPage() {
         </div>
 
         {/* Answer Options */}
-        <div className="space-y-3">
+        <div className="space-y-2 sm:space-y-3">
           {currentQuestion.question_type === "free_response" && (
             <Textarea
               placeholder="Enter your answer"
               value={(answer as string) || ""}
               onChange={(e) => setCurrentAnswer(e.target.value)}
-              className="w-full min-h-[120px]"
+              className="w-full min-h-[100px] sm:min-h-[120px] text-sm sm:text-base"
               autoFocus
             />
           )}
 
           {currentQuestion.question_type === "mcq" && (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 sm:gap-3">
               {(details as MCQDetails).options.map((option, index) => (
                 <label
                   key={index}
-                  className="flex items-start gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
+                  className="flex items-start gap-2 sm:gap-3 p-3 sm:p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
                 >
                   <input
                     type="radio"
@@ -378,10 +378,10 @@ export default function QuizzesPage() {
                     value={option}
                     checked={answer === option}
                     onChange={(e) => setCurrentAnswer(e.target.value)}
-                    className="mt-1 w-4 h-4"
+                    className="mt-0.5 sm:mt-1 w-4 h-4 shrink-0"
                   />
-                  <div className="flex-1">
-                    <span className="font-semibold block text-gray-900">
+                  <div className="flex-1 min-w-0">
+                    <span className="font-semibold block text-gray-900 text-sm sm:text-base">
                       {option}
                     </span>
                   </div>
@@ -392,7 +392,50 @@ export default function QuizzesPage() {
 
           {currentQuestion.question_type === "drag_drop" && (
             <div className="border border-gray-300 rounded-lg overflow-hidden">
-              <div className="grid grid-cols-2">
+              {/* Mobile: Stacked layout */}
+              <div className="block md:hidden">
+                {(details as DragDropDetails).qa_pairs.map((pair, index) => (
+                  <div
+                    key={index}
+                    className="p-3 border-b border-gray-300 last:border-b-0"
+                  >
+                    <div className="flex items-start gap-2 mb-2">
+                      <span className="text-sm font-semibold text-gray-700">
+                        {index + 1}.
+                      </span>
+                      <p className="text-sm text-gray-900 flex-1">
+                        {pair.question}
+                      </p>
+                    </div>
+                    <Select
+                      value={Array.isArray(answer) ? answer[index] || "" : ""}
+                      onValueChange={(value) => {
+                        const currentAnswers = Array.isArray(answer)
+                          ? [...answer]
+                          : [];
+                        currentAnswers[index] = value;
+                        setCurrentAnswer(currentAnswers);
+                      }}
+                    >
+                      <SelectTrigger className="w-full text-sm">
+                        <SelectValue placeholder="Select an answer" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(details as DragDropDetails).options.map(
+                          (option, optIndex) => (
+                            <SelectItem key={optIndex} value={option}>
+                              {String.fromCharCode(65 + optIndex)}. {option}
+                            </SelectItem>
+                          )
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ))}
+              </div>
+
+              {/* Desktop: Two-column layout */}
+              <div className="hidden md:grid md:grid-cols-2">
                 {/* Left Column - Premises */}
                 <div className="border-r border-gray-300">
                   {(details as DragDropDetails).qa_pairs.map((pair, index) => (
@@ -455,32 +498,32 @@ export default function QuizzesPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
-        <p className="text-gray-600">Loading questions...</p>
+      <div className="min-h-screen bg-white flex items-center justify-center p-4">
+        <p className="text-gray-600 text-sm sm:text-base">Loading questions...</p>
       </div>
     );
   }
 
   if (questions.length === 0) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
-        <p className="text-gray-600">No questions available</p>
+      <div className="min-h-screen bg-white flex items-center justify-center p-4">
+        <p className="text-gray-600 text-sm sm:text-base">No questions available</p>
       </div>
     );
   }
 
   return (
     <div className="min-h-screen bg-white">
-      <div className="container mx-auto max-w-4xl py-8 px-6">
+      <div className="container mx-auto max-w-4xl py-4 sm:py-6 md:py-8 px-4 sm:px-6">
         {/* Progress Bar */}
-        <div className="mb-8">
-          <div className="w-full bg-gray-200 rounded-full h-2.5">
+        <div className="mb-6 sm:mb-8">
+          <div className="w-full bg-gray-200 rounded-full h-2 sm:h-2.5">
             <div
-              className="bg-gray-600 h-2.5 rounded-full transition-all duration-300"
+              className="bg-gray-600 h-2 sm:h-2.5 rounded-full transition-all duration-300"
               style={{ width: `${progress}%` }}
             />
           </div>
-          <p className="text-sm text-gray-600 mt-2">
+          <p className="text-xs sm:text-sm text-gray-600 mt-1 sm:mt-2">
             Question {currentQuestionIndex + 1} of {totalQuestions}
           </p>
         </div>
@@ -489,16 +532,20 @@ export default function QuizzesPage() {
         {renderQuestion()}
 
         {/* Navigation Buttons */}
-        <div className="flex justify-end items-center mt-8 pt-6">
+        <div className="flex flex-col-reverse sm:flex-row justify-end items-stretch sm:items-center gap-3 sm:gap-0 mt-6 sm:mt-8 pt-4 sm:pt-6">
           <Button
             variant="outline"
             onClick={handlePrevious}
             disabled={currentQuestionIndex === 0}
-            className="mr-3"
+            className="sm:mr-3 text-sm sm:text-base"
           >
             Previous
           </Button>
-          <Button onClick={handleNext} disabled={isSubmitting}>
+          <Button 
+            onClick={handleNext} 
+            disabled={isSubmitting}
+            className="text-sm sm:text-base"
+          >
             {currentQuestionIndex === totalQuestions - 1
               ? isSubmitting
                 ? "Submitting..."
@@ -509,4 +556,4 @@ export default function QuizzesPage() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/student/learning-style-quiz/page.tsx b/app/student/learning-style-quiz/page.tsx
index f5d2ebc..634f374 100644
--- a/app/student/learning-style-quiz/page.tsx
+++ b/app/student/learning-style-quiz/page.tsx
@@ -395,14 +395,14 @@ export default function LearningStyleQuiz() {
     const value = getCurrentQuestionValue(question.id);
 
     return (
-      <div className="space-y-6">
+      <div className="space-y-4 sm:space-y-6">
         {/* Question Box */}
-        <div className="bg-gray-100 rounded-lg p-6 min-h-[200px] flex items-center">
+        <div className="bg-gray-100 rounded-lg p-4 sm:p-6 min-h-[150px] sm:min-h-[200px] flex items-center">
           <div className="w-full">
-            <p className="text-gray-400 text-sm mb-2">Question</p>
-            <p className="text-xl font-semibold">{question.label}</p>
+            <p className="text-gray-400 text-xs sm:text-sm mb-1 sm:mb-2">Question</p>
+            <p className="text-base sm:text-xl font-semibold">{question.label}</p>
             {question.instructions && (
-              <p className="text-sm text-gray-600 mt-3">
+              <p className="text-xs sm:text-sm text-gray-600 mt-2 sm:mt-3">
                 {question.instructions}
               </p>
             )}
@@ -410,7 +410,7 @@ export default function LearningStyleQuiz() {
         </div>
 
         {/* Answer Options */}
-        <div className="space-y-3">
+        <div className="space-y-2 sm:space-y-3">
           {question.type === "text" && (
             <Input
               type="text"
@@ -419,17 +419,17 @@ export default function LearningStyleQuiz() {
               onChange={(e) =>
                 setCurrentQuestionValue(question.id, e.target.value)
               }
-              className="w-full"
+              className="w-full text-sm sm:text-base"
               autoFocus
             />
           )}
 
           {question.type === "select" && question.options && (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 sm:gap-3">
               {question.options.map((option) => (
                 <label
                   key={option}
-                  className="flex items-start gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
+                  className="flex items-start gap-2 sm:gap-3 p-3 sm:p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
                 >
                   <input
                     type="radio"
@@ -439,10 +439,10 @@ export default function LearningStyleQuiz() {
                     onChange={(e) =>
                       setCurrentQuestionValue(question.id, e.target.value)
                     }
-                    className="mt-1 w-4 h-4"
+                    className="mt-0.5 sm:mt-1 w-4 h-4 shrink-0"
                   />
-                  <div className="flex-1">
-                    <span className="font-semibold block text-gray-900">
+                  <div className="flex-1 min-w-0">
+                    <span className="font-semibold block text-gray-900 text-sm sm:text-base">
                       {option}
                     </span>
                   </div>
@@ -452,14 +452,14 @@ export default function LearningStyleQuiz() {
           )}
 
           {question.type === "multi-select" && question.options && (
-            <div className="space-y-3">
+            <div className="space-y-2 sm:space-y-3">
               {question.options.map((option) => {
                 const isChecked =
                   Array.isArray(value) && value.includes(option);
                 return (
                   <label
                     key={option}
-                    className="flex items-start gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
+                    className="flex items-start gap-2 sm:gap-3 p-3 sm:p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
                   >
                     <input
                       type="checkbox"
@@ -469,20 +469,20 @@ export default function LearningStyleQuiz() {
                           handleAppFeatureChange(option, e.target.checked);
                         }
                       }}
-                      className="mt-1 w-4 h-4"
+                      className="mt-0.5 sm:mt-1 w-4 h-4 shrink-0"
                     />
-                    <div className="flex-1">
-                      <span className="font-semibold block text-gray-900">
+                    <div className="flex-1 min-w-0">
+                      <span className="font-semibold block text-gray-900 text-sm sm:text-base">
                         {option}
                       </span>
-                      <span className="text-sm text-gray-500 block mt-1">
+                      <span className="text-xs sm:text-sm text-gray-500 block mt-0.5 sm:mt-1">
                         specifics
                       </span>
                     </div>
                   </label>
                 );
               })}
-              <p className="text-sm text-gray-500 mt-3">
+              <p className="text-xs sm:text-sm text-gray-500 mt-2 sm:mt-3">
                 Selected: {Array.isArray(value) ? value.length : 0}/
                 {question.maxSelections}
               </p>
@@ -490,14 +490,14 @@ export default function LearningStyleQuiz() {
           )}
 
           {question.type === "multi-select-other" && question.options && (
-            <div className="space-y-3">
+            <div className="space-y-2 sm:space-y-3">
               {question.options.map((option) => {
                 const isChecked =
                   Array.isArray(value) && value.includes(option);
                 return (
                   <label
                     key={option}
-                    className="flex items-start gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
+                    className="flex items-start gap-2 sm:gap-3 p-3 sm:p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
                   >
                     <input
                       type="checkbox"
@@ -505,30 +505,30 @@ export default function LearningStyleQuiz() {
                       onChange={(e) =>
                         handleHardFactorChange(option, e.target.checked)
                       }
-                      className="mt-1 w-4 h-4"
+                      className="mt-0.5 sm:mt-1 w-4 h-4 shrink-0"
                     />
-                    <div className="flex-1">
-                      <span className="font-semibold block text-gray-900">
+                    <div className="flex-1 min-w-0">
+                      <span className="font-semibold block text-gray-900 text-sm sm:text-base">
                         {option}
                       </span>
-                      <span className="text-sm text-gray-500 block mt-1">
+                      <span className="text-xs sm:text-sm text-gray-500 block mt-0.5 sm:mt-1">
                         specifics
                       </span>
                     </div>
                   </label>
                 );
               })}
-              <label className="flex items-start gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
+              <label className="flex items-start gap-2 sm:gap-3 p-3 sm:p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                 <input
                   type="checkbox"
                   checked={Array.isArray(value) && value.includes("Other")}
                   onChange={(e) =>
                     handleHardFactorChange("Other", e.target.checked)
                   }
-                  className="mt-1 w-4 h-4"
+                  className="mt-0.5 sm:mt-1 w-4 h-4 shrink-0"
                 />
-                <div className="flex-1">
-                  <span className="font-semibold block text-gray-900 mb-2">
+                <div className="flex-1 min-w-0">
+                  <span className="font-semibold block text-gray-900 text-sm sm:text-base mb-2">
                     Other:
                   </span>
                   {Array.isArray(value) && value.includes("Other") && (
@@ -537,13 +537,13 @@ export default function LearningStyleQuiz() {
                       placeholder="Please specify"
                       value={hardFactorOther}
                       onChange={(e) => setHardFactorOther(e.target.value)}
-                      className="w-full"
+                      className="w-full text-sm sm:text-base"
                       autoFocus
                     />
                   )}
                 </div>
               </label>
-              <p className="text-sm text-gray-500 mt-3">
+              <p className="text-xs sm:text-sm text-gray-500 mt-2 sm:mt-3">
                 Selected: {Array.isArray(value) ? value.length : 0}/
                 {question.maxSelections}
               </p>
@@ -556,12 +556,12 @@ export default function LearningStyleQuiz() {
 
   return (
     <div className="min-h-screen bg-white">
-      <div className="container mx-auto max-w-4xl py-8 px-6">
+      <div className="container mx-auto max-w-4xl py-4 sm:py-6 md:py-8 px-4 sm:px-6">
         {/* Progress Bar */}
-        <div className="mb-8">
-          <div className="w-full bg-gray-200 rounded-full h-2.5">
+        <div className="mb-6 sm:mb-8">
+          <div className="w-full bg-gray-200 rounded-full h-2 sm:h-2.5">
             <div
-              className="bg-gray-600 h-2.5 rounded-full transition-all duration-300"
+              className="bg-gray-600 h-2 sm:h-2.5 rounded-full transition-all duration-300"
               style={{ width: `${progress}%` }}
             />
           </div>
@@ -571,16 +571,20 @@ export default function LearningStyleQuiz() {
         {renderQuestion()}
 
         {/* Navigation Buttons */}
-        <div className="flex justify-end items-center mt-8 pt-6">
+        <div className="flex flex-col-reverse sm:flex-row justify-end items-stretch sm:items-center gap-3 sm:gap-0 mt-6 sm:mt-8 pt-4 sm:pt-6">
           <Button
             variant="outline"
             onClick={handlePrevious}
             disabled={currentQuestionIndex === 0}
-            className="mr-3"
+            className="sm:mr-3 text-sm sm:text-base"
           >
             Previous
           </Button>
-          <Button onClick={handleNext} disabled={isSubmitting}>
+          <Button 
+            onClick={handleNext} 
+            disabled={isSubmitting}
+            className="text-sm sm:text-base"
+          >
             {currentQuestionIndex === totalQuestions - 1
               ? isSubmitting
                 ? "Submitting..."
@@ -591,4 +595,4 @@ export default function LearningStyleQuiz() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/student/onboarding/page.tsx b/app/student/onboarding/page.tsx
index f29f867..94e2fa5 100644
--- a/app/student/onboarding/page.tsx
+++ b/app/student/onboarding/page.tsx
@@ -1,37 +1,297 @@
-import { createClient } from "@/lib/supabase/server";
-import { redirect } from "next/navigation";
-import StudentOnboardingForm from "./StudentOnboardingForm";
-
-export default async function StudentOnboardingPage() {
-  const supabase = await createClient();
-  
-  const { data: { user }, error: authError } = await supabase.auth.getUser();
-  
-  // If not authenticated, redirect to login
-  if (authError || !user) {
-    redirect('/auth/login');
-  }
-  
-  // Check if user already completed onboarding
-  const { data: existingRole } = await supabase
-    .from('user_role')
-    .select('role')
-    .eq('user_id', user.id)
-    .single();
-  
-  if (existingRole) {
-    // User already onboarded, redirect to dashboard
-    redirect(existingRole.role === 'student' ? '/student/dashboard' : '/educator/dashboard');
-  }
-  
-  // Check role from metadata - make sure they should be here
-  const role = user.user_metadata?.role;
-  
-  if (role !== 'student') {
-    // Wrong onboarding page, redirect to correct one or home
-    redirect(role === 'educator' ? '/educator/onboarding' : '/');
-  }
-  
-  // User is authenticated, has student role, and hasn't completed onboarding
-  return <StudentOnboardingForm />;
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import Image from "next/image";
+
+export default function StudentOnboardingForm() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [step, setStep] = useState(1);
+  const [formData, setFormData] = useState({
+    firstname: "",
+    lastname: "",
+    plan: "",
+    grade_reading: "",
+    grade_math: "",
+    current_level: "",
+    career_interests: "",
+    goals: "",
+  });
+
+  const stepOneValid =
+    formData.firstname.trim() !== "" && formData.lastname.trim() !== "";
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch("/api/student/onboarding", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to create profile");
+      }
+
+      // Redirect to dashboard
+      router.push(data.redirectTo || "/student/dashboard");
+      router.refresh(); // Refresh to update any server components
+    } catch (error) {
+      console.error("Error:", error);
+      setError(error instanceof Error ? error.message : "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-4xl mx-auto p-4 sm:p-6 md:p-8">
+        {/* Progress Bar */}
+        <Card className="mb-4 sm:mb-6">
+          <CardContent className="p-4 sm:p-6">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-lg sm:text-xl font-bold">Create your profile</h2>
+              <span className="text-xs sm:text-sm text-gray-500">Step {step} of 3</span>
+            </div>
+
+            <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-lime-400 transition-all"
+                style={{ width: `${(step / 3) * 100}%` }}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-white">
+          <CardHeader className="text-center pb-3 px-4 sm:px-6">
+            <CardTitle className="text-xl sm:text-2xl font-bold">
+              Ready to ace the GED?
+            </CardTitle>
+            <CardTitle className="text-xs sm:text-sm text-gray-400">
+              Let's start with the basics.
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-4 sm:px-6">
+            {error && (
+              <div className="mb-4 p-3 sm:p-4 bg-red-50 border border-red-200 rounded-md">
+                <p className="text-xs sm:text-sm text-red-600">{error}</p>
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit}>
+              {step === 1 && (
+                <StepOne formData={formData} setFormData={setFormData} />
+              )}
+
+              {step === 2 && (
+                <StepTwo formData={formData} setFormData={setFormData} />
+              )}
+
+              {step === 3 && (
+                <StepThree formData={formData} setFormData={setFormData} />
+              )}
+
+              {/* Navigation */}
+              <div className="flex justify-between pt-4 sm:pt-6">
+                <div>
+                  {step > 1 && (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="text-sm sm:text-base px-4 sm:px-6"
+                      onClick={() => setStep(step - 1)}
+                    >
+                      Back
+                    </Button>
+                  )}
+                </div>
+
+                {step < 3 ? (
+                  <Button
+                    type="button"
+                    className="bg-lime-300 text-black rounded-full px-6 sm:px-8 text-sm sm:text-base disabled:opacity-50"
+                    disabled={!stepOneValid}
+                    onClick={() => setStep(step + 1)}
+                  >
+                    Next
+                  </Button>
+                ) : (
+                  <Button
+                    type="submit"
+                    className="bg-lime-300 text-black rounded-full px-6 sm:px-8 text-sm sm:text-base"
+                    disabled={loading}
+                  >
+                    {loading ? "Saving..." : "Done"}
+                  </Button>
+                )}
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      </main>
+    </div>
+  );
+}
+
+function StepOne({ formData, setFormData }: any) {
+  return (
+    <div className="space-y-4 sm:space-y-6">
+      {/* Profile photo */}
+      <div className="flex flex-col items-center gap-2 sm:gap-3">
+        <Label className="text-sm sm:text-base font-semibold">
+          Profile Photo <span className="text-gray-400">(optional)</span>
+        </Label>
+
+        <div className="relative">
+          {/* Avatar */}
+          <Avatar className="h-24 w-24 sm:h-32 sm:w-32 bg-gray-200 text-2xl sm:text-3xl">
+            {/* add uploaded image here */}
+            {/* <AvatarImage src={photoUrl} /> */}
+
+            <AvatarFallback className="bg-gray-300 text-gray-700 font-semibold">
+              {formData.firstname || formData.lastname
+                ? `${formData.firstname?.[0]?.toUpperCase() ?? ""}${
+                    formData.lastname?.[0]?.toUpperCase() ?? ""
+                  }`
+                : "?"}
+            </AvatarFallback>
+          </Avatar>
+
+          {/* Camera badge */}
+          <button
+            type="button"
+            onClick={() => document.getElementById("photo-upload")?.click()}
+            className="
+              absolute
+              bottom-0
+              right-0
+              sm:bottom-1
+              sm:right-1
+              h-8
+              w-8
+              sm:h-10
+              sm:w-10
+              rounded-full
+              bg-lime-300
+              flex
+              items-center
+              justify-center
+              shadow
+              hover:bg-lime-400
+              transition
+            "
+          >
+            <Image
+              src="/camera.png"
+              alt="upload"
+              width={16}
+              height={16}
+              className="object-contain sm:w-[18px] sm:h-[18px]"
+            />
+          </button>
+
+          {/* File input */}
+          <input
+            id="photo-upload"
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) {
+                // TODO: handle upload later
+                console.log(file);
+              }
+            }}
+          />
+        </div>
+
+        <p className="text-xs sm:text-sm text-gray-400">Help instructors recognize you.</p>
+      </div>
+
+      <Input
+        placeholder="First name"
+        className="text-sm sm:text-base"
+        value={formData.firstname}
+        onChange={(e) =>
+          setFormData({ ...formData, firstname: e.target.value })
+        }
+        required
+      />
+
+      <Input
+        placeholder="Last name"
+        className="text-sm sm:text-base"
+        value={formData.lastname}
+        onChange={(e) => setFormData({ ...formData, lastname: e.target.value })}
+        required
+      />
+    </div>
+  );
+}
+
+function StepTwo({ formData, setFormData }: any) {
+  return (
+    <div className="space-y-4 sm:space-y-6">
+      <h3 className="text-lg sm:text-xl font-bold">What are your career interests?</h3>
+      <p className="text-sm sm:text-base text-gray-500">
+        Select areas you're curious about or want to explore.
+      </p>
+
+      <Textarea
+        placeholder="Tell us more about your interests..."
+        className="min-h-[120px] sm:min-h-[150px] text-sm sm:text-base"
+        value={formData.career_interests}
+        onChange={(e) =>
+          setFormData({ ...formData, career_interests: e.target.value })
+        }
+      />
+    </div>
+  );
+}
+
+function StepThree({ formData, setFormData }: any) {
+  return (
+    <div className="space-y-4 sm:space-y-6">
+      <h3 className="text-lg sm:text-xl font-bold">What are your goals?</h3>
+      <p className="text-sm sm:text-base text-gray-500">
+        What do you hope to achieve with Eight Million Stories?
+      </p>
+
+      <div className="bg-lime-100 border border-lime-300 rounded-lg p-3 sm:p-4 text-xs sm:text-sm">
+        <p className="font-medium mb-2">Think about:</p>
+        <ul className="list-disc list-inside space-y-1">
+          <li>Education milestones</li>
+          <li>Skills you want to learn</li>
+          <li>Jobs you're interested in</li>
+        </ul>
+      </div>
+
+      <Textarea
+        placeholder="e.g. I want to earn my GED, improve my writing..."
+        className="min-h-[140px] sm:min-h-[180px] text-sm sm:text-base"
+        value={formData.goals}
+        onChange={(e) => setFormData({ ...formData, goals: e.target.value })}
+        required
+      />
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/domains/auth/LoginForm.tsx b/domains/auth/LoginForm.tsx
index 59a45f5..8649a68 100644
--- a/domains/auth/LoginForm.tsx
+++ b/domains/auth/LoginForm.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useState } from "react";
@@ -25,34 +24,27 @@ export default function LoginForm() {
       toast.error("Password is required");
       return;
     }
-
     setLoading(true);
-
     try {
       const supabase = await createClient();
-
       // Sign in
       const { data: signInData, error: signInError } =
         await supabase.auth.signInWithPassword({
           email: email,
           password: password,
         });
-
       if (signInError) {
         console.error(signInError);
         toast.error(signInError.message || "Invalid email or password");
         return;
       }
-
       // Check if user is in Students table
       const { data: studentData } = await supabase
         .from("Students")
         .select("*")
         .eq("email", email)
         .single();
-
       toast.success("Login successful!");
-
       // Route based on whether they're in Students table
       if (studentData) {
         router.push("/student/onboarding");
@@ -68,45 +60,42 @@ export default function LoginForm() {
   };
 
   return (
-    <div className="flex w-full min-h-screen">
-      {/* Left Column */}
-      <div className="flex w-1/2 justify-center items-center bg-white">
-        <div className="flex flex-col w-full max-w-md bg-white border rounded-3xl overflow-hidden outline outline-1 outline-black">
+    <div className="flex flex-col lg:flex-row w-full min-h-screen">
+      {/* Left Column - Form */}
+      <div className="flex w-full lg:w-1/2 justify-center items-center bg-white p-4 sm:p-6 md:p-8 order-2 lg:order-1">
+        <div className="flex flex-col w-full max-w-sm sm:max-w-md bg-white border rounded-2xl sm:rounded-3xl overflow-hidden outline outline-1 outline-black">
           {/* Header */}
-          <h1 className="text-xl font-semibold bg-lime-300 py-6 text-center outline outline-1 outline-black">
+          <h1 className="text-lg sm:text-xl font-semibold bg-lime-300 py-4 sm:py-6 text-center outline outline-1 outline-black">
             Log In
           </h1>
 
           {/* Form */}
-          <div className="flex flex-col gap-4 px-8 py-10">
+          <div className="flex flex-col gap-3 sm:gap-4 px-5 sm:px-8 py-6 sm:py-10">
             <Input
               type="text"
               placeholder="Email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="h-11 rounded-xl border border-black bg-gray-100 px-4 text-black placeholder:text-black"
+              className="h-10 sm:h-11 rounded-xl border border-black bg-gray-100 px-3 sm:px-4 text-sm sm:text-base text-black placeholder:text-black"
             />
-
             <Input
               type="password"
               placeholder="Password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
-              className="h-11 rounded-xl border border-black bg-gray-100 px-4 text-black placeholder:text-black"
+              className="h-10 sm:h-11 rounded-xl border border-black bg-gray-100 px-3 sm:px-4 text-sm sm:text-base text-black placeholder:text-black"
             />
-
             <Button
               variant="outline"
               onClick={handleLogin}
               disabled={loading}
-              className="w-full bg-lime-300 border rounded-3xl"
+              className="w-full bg-lime-300 border rounded-3xl h-10 sm:h-11 text-sm sm:text-base"
             >
               {loading ? "Logging in..." : "Log In"}
             </Button>
-
-            <p className="text-center text-sm text-gray-600 mt-2">
+            <p className="text-center text-xs sm:text-sm text-gray-600 mt-1 sm:mt-2">
               Don&apos;t have an account?{" "}
               <Link href="/signup" className="text-blue-600 hover:underline">
                 Sign up
@@ -116,18 +105,16 @@ export default function LoginForm() {
         </div>
       </div>
 
-      {/* Right Column */}
-      <div className="flex justify-center items-center w-1/2 bg-black">
-        <h1>
-          <Image
-            className="p-10 h-full w-full"
-            src={logo}
-            alt="8MS logo"
-            width={1200}
-            height={720}
-          />
-        </h1>
+      {/* Right Column - Logo */}
+      <div className="flex justify-center items-center w-full lg:w-1/2 bg-black p-6 sm:p-8 lg:p-10 min-h-[200px] sm:min-h-[250px] lg:min-h-screen order-1 lg:order-2">
+        <Image
+          className="w-full max-w-[200px] sm:max-w-[300px] lg:max-w-[500px] h-auto"
+          src={logo}
+          alt="8MS logo"
+          width={1200}
+          height={720}
+        />
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/domains/auth/SignupForm.tsx b/domains/auth/SignupForm.tsx
index ba0ab21..8f5e128 100644
--- a/domains/auth/SignupForm.tsx
+++ b/domains/auth/SignupForm.tsx
@@ -94,57 +94,68 @@ export default function SignupForm() {
 
   if (signupComplete) {
     return (
-      <div className="flex flex-col gap-5 w-1/3 min-h-[300px] bg-white rounded-lg border p-8">
-        <h1 className="text-2xl font-bold">Check your email</h1>
-        <div className="flex flex-col gap-3">
-          <p className="text-gray-600">We've sent a confirmation email to:</p>
-          <p className="font-semibold">{email}</p>
-          <p className="text-gray-600">
-            Click the link in the email to complete your signup and you'll be
-            automatically redirected to the onboarding page.
-          </p>
+      <div className="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-gray-50">
+        <div className="flex flex-col gap-4 sm:gap-5 w-full max-w-sm sm:max-w-md min-h-[280px] sm:min-h-[300px] bg-white rounded-lg border p-6 sm:p-8">
+          <h1 className="text-xl sm:text-2xl font-bold">Check your email</h1>
+          <div className="flex flex-col gap-2 sm:gap-3">
+            <p className="text-sm sm:text-base text-gray-600">
+              We've sent a confirmation email to:
+            </p>
+            <p className="font-semibold text-sm sm:text-base break-all">
+              {email}
+            </p>
+            <p className="text-sm sm:text-base text-gray-600">
+              Click the link in the email to complete your signup and you'll be
+              automatically redirected to the onboarding page.
+            </p>
+          </div>
+          <Button
+            onClick={handleSignup}
+            disabled={loading}
+            className="
+              w-full 
+              h-10
+              sm:h-11
+              rounded-full 
+              bg-lime-300 
+              text-black 
+              font-semibold
+              hover:bg-lime-400
+              border-none
+              text-sm
+              sm:text-base
+            "
+          >
+            {loading ? "Signing up..." : "Resend Email"}
+          </Button>
         </div>
-        <Button
-          onClick={handleSignup}
-          disabled={loading}
-          className="
-            w-full 
-            h-11
-            rounded-full 
-            bg-lime-300 
-            text-black 
-            font-semibold
-            hover:bg-lime-400
-            border-none
-          "
-        >
-          {loading ? "Signing up..." : "Resend Email"}
-        </Button>
       </div>
     );
   }
 
   return (
-    <div className="flex w-full">
-      {/* Left Column */}
-      <div className="flex w-1/2 justify-center items-center p-5">
+    <div className="flex flex-col lg:flex-row w-full min-h-screen">
+      {/* Left Column - Form */}
+      <div className="flex w-full lg:w-1/2 justify-center items-center p-4 sm:p-6 md:p-8 lg:p-5 order-2 lg:order-1">
         <div
           className="
-          flex flex-col 
-          w-full 
-          max-w-md
-          bg-white 
-          border 
-          rounded-3xl 
-          overflow-hidden 
-          outline outline-1 outline-black
-        "
+            flex flex-col 
+            w-full 
+            max-w-sm
+            sm:max-w-md
+            bg-white 
+            border 
+            rounded-2xl
+            sm:rounded-3xl 
+            overflow-hidden 
+            outline outline-1 outline-black
+          "
         >
-          <h1 className="text-xl font-semibold bg-lime-300 py-6 text-center outline outline-1 outline-black">
+          <h1 className="text-lg sm:text-xl font-semibold bg-lime-300 py-4 sm:py-6 text-center outline outline-1 outline-black">
             Sign Up
           </h1>
 
-          <div className="flex flex-col gap-5 px-8 py-10">
+          <div className="flex flex-col gap-4 sm:gap-5 px-5 sm:px-8 py-6 sm:py-10">
             <FormItem placeholder="Email" input={email} setInput={setEmail} />
             <FormPassword
               placeholder="Password"
@@ -157,16 +168,16 @@ export default function SignupForm() {
               setInput={setConfirmPassword}
             />
             <RoleSelect role={role} setRole={setRole} />
-            <div className="flex flex-col gap-4 justify-center h-full">
+            <div className="flex flex-col gap-3 sm:gap-4 justify-center h-full">
               <Button
                 variant="outline"
                 onClick={handleSignup}
                 disabled={loading}
-                className="w-full bg-lime-300 border rounded-3xl"
+                className="w-full bg-lime-300 border rounded-3xl text-sm sm:text-base h-10 sm:h-11"
               >
                 {loading ? "Signing up..." : "Sign Up"}
               </Button>
-              <p className="text-center text-sm text-gray-600">
+              <p className="text-center text-xs sm:text-sm text-gray-600">
                 Already have an account?{" "}
                 <Link href="/login" className="text-blue-600 hover:underline">
                   Log in
@@ -177,17 +188,15 @@ export default function SignupForm() {
         </div>
       </div>
 
-      {/* Right Column */}
-      <div className="flex justify-center items-center w-1/2 bg-black">
-        <h1>
-          <Image
-            className="p-10 h-full w-full"
-            src={logo}
-            alt="8MS logo"
-            width={1200}
-            height={720}
-          />
-        </h1>
+      {/* Right Column - Logo */}
+      <div className="flex justify-center items-center w-full lg:w-1/2 bg-black p-6 sm:p-8 lg:p-10 min-h-[200px] sm:min-h-[250px] lg:min-h-screen order-1 lg:order-2">
+        <Image
+          className="w-full max-w-[200px] sm:max-w-[300px] lg:max-w-[500px] h-auto"
+          src={logo}
+          alt="8MS logo"
+          width={1200}
+          height={720}
+        />
       </div>
     </div>
   );
@@ -210,7 +219,7 @@ const FormItem = ({
       value={input}
       onChange={(e) => setInput(e.target.value)}
       required
-      className="border border-black h-11 bg-gray-100 text-black placeholder:text-black"
+      className="border border-black h-10 sm:h-11 bg-gray-100 text-black placeholder:text-black text-sm sm:text-base"
     />
   );
 };
@@ -232,7 +241,7 @@ const FormPassword = ({
       value={input}
       onChange={(e) => setInput(e.target.value)}
       required
-      className="border border-black h-11 bg-gray-100 text-black placeholder:text-black"
+      className="border border-black h-10 sm:h-11 bg-gray-100 text-black placeholder:text-black text-sm sm:text-base"
     />
   );
 };
@@ -247,16 +256,16 @@ const RoleSelect = ({
   const roles = Object.values(UserRole);
   return (
     <Select value={role} onValueChange={setRole}>
-      <SelectTrigger className="border border-black h-14">
+      <SelectTrigger className="border border-black h-12 sm:h-14 text-sm sm:text-base">
         <SelectValue placeholder="Select a role" />
       </SelectTrigger>
       <SelectContent>
         {roles.map((role) => (
-          <SelectItem key={role} value={role}>
+          <SelectItem key={role} value={role} className="text-sm sm:text-base">
             {role}
           </SelectItem>
         ))}
       </SelectContent>
     </Select>
   );
-};
+};
\ No newline at end of file
diff --git a/domains/educator/onboarding/OnboardingForm.tsx b/domains/educator/onboarding/OnboardingForm.tsx
index fc00efe..1a6232a 100644
--- a/domains/educator/onboarding/OnboardingForm.tsx
+++ b/domains/educator/onboarding/OnboardingForm.tsx
@@ -1,13 +1,12 @@
 "use client";
-
-import {Button} from "@/components/ui/button";
-import {useRouter} from "next/navigation";
-import {toast} from "sonner";
-import {useEducatorOnboarding} from "./hooks/useEducatorOnboarding";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { useEducatorOnboarding } from "./hooks/useEducatorOnboarding";
 
 export default function OnboardingForm() {
   const router = useRouter();
-  const {mutate: insertEducator, isPending} = useEducatorOnboarding();
+  const { mutate: insertEducator, isPending } = useEducatorOnboarding();
 
   const handleFinishOnboarding = () => {
     insertEducator(undefined, {
@@ -16,18 +15,29 @@ export default function OnboardingForm() {
         router.push("/educator/dashboard");
         router.refresh();
       },
-      onError: error => {
+      onError: (error) => {
         toast.error(error.message || "Failed to complete onboarding");
       },
     });
   };
 
   return (
-    <div>
-      <h1>Educator Onboarding</h1>
-      <Button onClick={handleFinishOnboarding} disabled={isPending}>
-        {isPending ? "Processing..." : "Finish Onboarding"}
-      </Button>
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4 sm:p-6 md:p-8">
+      <div className="w-full max-w-md bg-white rounded-lg shadow-sm border border-gray-200 p-6 sm:p-8 text-center">
+        <h1 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">
+          Educator Onboarding
+        </h1>
+        <p className="text-sm sm:text-base text-gray-500 mb-6 sm:mb-8">
+          Complete your setup to start managing your students and courses.
+        </p>
+        <Button
+          onClick={handleFinishOnboarding}
+          disabled={isPending}
+          className="w-full sm:w-auto px-6 sm:px-8 py-2 sm:py-3 text-sm sm:text-base"
+        >
+          {isPending ? "Processing..." : "Finish Onboarding"}
+        </Button>
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/domains/student/dashboard/GreetingCard.tsx b/domains/student/dashboard/GreetingCard.tsx
index eafc206..8d8430f 100644
--- a/domains/student/dashboard/GreetingCard.tsx
+++ b/domains/student/dashboard/GreetingCard.tsx
@@ -1,31 +1,33 @@
-import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
-import {Badge} from "@/components/ui/badge";
-import {Card, CardContent} from "@/components/ui/card";
-import {Progress} from "@/components/ui/progress";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
 
 interface GreetingCardProps {
   student: string | null;
 }
 
-export default function GreetingCard({student}: GreetingCardProps) {
+export default function GreetingCard({ student }: GreetingCardProps) {
   return (
-    <Card className="mb-8">
-      <CardContent>
-        <div className="flex items-center gap-4 mb-6">
-          <Avatar className="h-20 w-20">
+    <Card className="mb-6 sm:mb-8">
+      <CardContent className="p-4 sm:p-6">
+        <div className="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 mb-4 sm:mb-6 text-center sm:text-left">
+          <Avatar className="h-16 w-16 sm:h-20 sm:w-20">
             <AvatarImage src="https://github.com/shadcn.png" />
-            <AvatarFallback>{student?.charAt(0).toUpperCase() || "S"}</AvatarFallback>
+            <AvatarFallback className="text-lg sm:text-xl">
+              {student?.charAt(0).toUpperCase() || "S"}
+            </AvatarFallback>
           </Avatar>
-          <h1 className="text-3xl font-bold">Hello {student || "Student"}!</h1>
+          <h1 className="text-2xl sm:text-3xl font-bold">
+            Hello {student || "Student"}!
+          </h1>
         </div>
-
         <div className="flex justify-between items-center mb-2">
-          <h2 className="font-bold text-lg">COURSE PROGRESS</h2>
-          <Badge className="bg-white text-black">33%</Badge>
+          <h2 className="font-bold text-base sm:text-lg">COURSE PROGRESS</h2>
+          <Badge className="bg-white text-black text-xs sm:text-sm">33%</Badge>
         </div>
-
-        <Progress value={33} className="[&>div]:bg-lime-400" />
+        <Progress value={33} className="h-2 sm:h-3 [&>div]:bg-lime-400" />
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/domains/student/dashboard/PromptDiagnosticCard.tsx b/domains/student/dashboard/PromptDiagnosticCard.tsx
index 9470340..ef6707f 100644
--- a/domains/student/dashboard/PromptDiagnosticCard.tsx
+++ b/domains/student/dashboard/PromptDiagnosticCard.tsx
@@ -1,21 +1,24 @@
 import Link from "next/link";
-
-import {Button} from "@/components/ui/button";
-import {Card, CardContent} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 
 export default function PromptDiagnosticCard() {
   return (
-    <Card className="mb-8 border-2 border-dashed border-gray-300">
-      <CardContent className="py-10 flex flex-col items-center text-center gap-4">
-        <h2 className="text-2xl font-semibold">Start Your Diagnostic Assessment</h2>
-        <p className="text-gray-500 max-w-md">
-          Complete this one-time quiz to unlock lessons, feedback, and progress tracking.
+    <Card className="mb-6 sm:mb-8 border-2 border-dashed border-gray-300">
+      <CardContent className="py-6 sm:py-8 md:py-10 px-4 sm:px-6 flex flex-col items-center text-center gap-3 sm:gap-4">
+        <h2 className="text-xl sm:text-2xl font-semibold">
+          Start Your Diagnostic Assessment
+        </h2>
+        <p className="text-gray-500 text-sm sm:text-base max-w-md">
+          Complete this one-time quiz to unlock lessons, feedback, and progress
+          tracking.
         </p>
-
         <Link href="/student/diagnostic">
-          <Button className="bg-black text-white px-8 py-3 text-lg">Start Quiz</Button>
+          <Button className="bg-black text-white px-6 sm:px-8 py-2 sm:py-3 text-base sm:text-lg">
+            Start Quiz
+          </Button>
         </Link>
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/domains/student/dashboard/RecentQuizCompletions.tsx b/domains/student/dashboard/RecentQuizCompletions.tsx
index 04a3bd1..9fb6457 100644
--- a/domains/student/dashboard/RecentQuizCompletions.tsx
+++ b/domains/student/dashboard/RecentQuizCompletions.tsx
@@ -1,30 +1,37 @@
-import {Button} from "@/components/ui/button";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import QuizCompletionCard from "@/components/quiz-completion";
 
 interface RecentQuizCompletionsProps {
   completedQuizzes: any[];
 }
 
-export default function RecentQuizCompletions({completedQuizzes}: RecentQuizCompletionsProps) {
+export default function RecentQuizCompletions({
+  completedQuizzes,
+}: RecentQuizCompletionsProps) {
   return (
     <Card>
-      <CardHeader>
-        <CardTitle>Recent Quiz Completions</CardTitle>
+      <CardHeader className="px-4 sm:px-6">
+        <CardTitle className="text-lg sm:text-xl">
+          Recent Quiz Completions
+        </CardTitle>
       </CardHeader>
-      <CardContent>
+      <CardContent className="px-4 sm:px-6">
         {completedQuizzes.length > 0 ? (
-          <>
-            {completedQuizzes.map(quiz => (
+          <div className="space-y-3 sm:space-y-4">
+            {completedQuizzes.map((quiz) => (
               <QuizCompletionCard key={quiz.id} quiz={quiz} />
             ))}
-            <Button className="mt-4 w-full">View All</Button>
-          </>
+            <Button className="mt-3 sm:mt-4 w-full text-sm sm:text-base">
+              View All
+            </Button>
+          </div>
         ) : (
-          <p className="text-sm text-gray-500 text-center py-6">No completed quizzes yet</p>
+          <p className="text-xs sm:text-sm text-gray-500 text-center py-4 sm:py-6">
+            No completed quizzes yet
+          </p>
         )}
       </CardContent>
     </Card>
   );
-}
+}
\ No newline at end of file
diff --git a/domains/student/dashboard/RecommendedQuizzes.tsx b/domains/student/dashboard/RecommendedQuizzes.tsx
index b71f4f2..346f223 100644
--- a/domains/student/dashboard/RecommendedQuizzes.tsx
+++ b/domains/student/dashboard/RecommendedQuizzes.tsx
@@ -1,36 +1,47 @@
-import {Badge} from "@/components/ui/badge";
-import {Button} from "@/components/ui/button";
-import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
 interface RecommendedQuizzesProps {
   hasCompletedDiagnostic: boolean;
 }
 
-export default function RecommendedQuizzes({hasCompletedDiagnostic}: RecommendedQuizzesProps) {
-  
+export default function RecommendedQuizzes({
+  hasCompletedDiagnostic,
+}: RecommendedQuizzesProps) {
   return (
-    <div className="relative mb-10">
+    <div className="relative mb-6 sm:mb-8 md:mb-10">
       {!hasCompletedDiagnostic && (
-        <div className="absolute inset-0 z-10 bg-white/70 backdrop-blur-sm flex items-center justify-center rounded-lg">
-          <p className="text-gray-500 text-sm">Complete the diagnostic quiz to unlock this section</p>
+        <div className="absolute inset-0 z-10 bg-white/70 backdrop-blur-sm flex items-center justify-center rounded-lg p-4">
+          <p className="text-gray-500 text-xs sm:text-sm text-center">
+            Complete the diagnostic quiz to unlock this section
+          </p>
         </div>
       )}
-
       <div className={hasCompletedDiagnostic ? "" : "pointer-events-none"}>
-        <h2 className="text-lg font-bold mb-4">Recommended Quizzes</h2>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {[1, 2, 3].map(i => (
+        <h2 className="text-base sm:text-lg font-bold mb-3 sm:mb-4">
+          Recommended Quizzes
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+          {[1, 2, 3].map((i) => (
             <Card key={i} className="overflow-hidden">
               <CardHeader className="bg-lime-100 p-2">
-                <Badge className="bg-lime-300 text-black rounded-full">Subject</Badge>
+                <Badge className="bg-lime-300 text-black rounded-full text-xs sm:text-sm w-fit">
+                  Subject
+                </Badge>
               </CardHeader>
-              <CardContent className="flex justify-between items-center p-4">
-                <div>
-                  <h3 className="font-semibold">Lesson Name</h3>
-                  <p className="text-gray-400 text-sm">Duration XXX</p>
+              <CardContent className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-2 p-3 sm:p-4">
+                <div className="min-w-0 flex-1">
+                  <h3 className="font-semibold text-sm sm:text-base">
+                    Lesson Name
+                  </h3>
+                  <p className="text-gray-400 text-xs sm:text-sm">
+                    Duration XXX
+                  </p>
                 </div>
-                <Button className="bg-black text-white">Start</Button>
+                <Button className="bg-black text-white w-full sm:w-auto text-sm shrink-0">
+                  Start
+                </Button>
               </CardContent>
             </Card>
           ))}
@@ -38,4 +49,4 @@ export default function RecommendedQuizzes({hasCompletedDiagnostic}: Recommended
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/domains/student/dashboard/StudentDashboardClient.tsx b/domains/student/dashboard/StudentDashboardClient.tsx
index 2bbebd2..bf3eccb 100644
--- a/domains/student/dashboard/StudentDashboardClient.tsx
+++ b/domains/student/dashboard/StudentDashboardClient.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import GreetingCard from "./GreetingCard";
 import PromptDiagnosticCard from "./PromptDiagnosticCard";
 import RecentQuizCompletions from "./RecentQuizCompletions";
@@ -13,13 +12,17 @@ interface Props {
   hasCompletedDiagnostic: boolean;
 }
 
-export default function StudentDashboardClient({student, completedQuizzes, hasCompletedDiagnostic}: Props) {
+export default function StudentDashboardClient({
+  student,
+  completedQuizzes,
+  hasCompletedDiagnostic,
+}: Props) {
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Sticky Header */}
       <StudentDashboardHeader student={student} />
 
-      <main className="max-w-6xl mx-auto p-8">
+      <main className="max-w-6xl mx-auto p-4 sm:p-6 md:p-8">
         {/* Greeting / Progress */}
         <GreetingCard student={student} />
 
@@ -30,7 +33,7 @@ export default function StudentDashboardClient({student, completedQuizzes, hasCo
         <RecommendedQuizzes hasCompletedDiagnostic={hasCompletedDiagnostic} />
 
         {/* Writing Feedback + Quiz Completions */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
           {/* Writing Feedback */}
           <WritingFeedback />
 
@@ -40,4 +43,4 @@ export default function StudentDashboardClient({student, completedQuizzes, hasCo
       </main>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/domains/student/dashboard/StudentDashboardHeader.tsx b/domains/student/dashboard/StudentDashboardHeader.tsx
index 906bcc2..ebf559d 100644
--- a/domains/student/dashboard/StudentDashboardHeader.tsx
+++ b/domains/student/dashboard/StudentDashboardHeader.tsx
@@ -1,34 +1,61 @@
 import Image from "next/image";
-
-import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
-import {Input} from "@/components/ui/input";
-
-import {BellIcon, Search} from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Input } from "@/components/ui/input";
+import { BellIcon, Search } from "lucide-react";
 import logo from "../../../assets/logo.webp";
 
 interface StudentDashboardHeaderProps {
   student: string | null;
 }
 
-export default function StudentDashboardHeader({student}: StudentDashboardHeaderProps) {
+export default function StudentDashboardHeader({
+  student,
+}: StudentDashboardHeaderProps) {
   return (
     <div className="bg-black w-full sticky top-0 z-50 shadow-sm">
-      <header className="w-full py-4 px-8 flex items-center justify-between">
-        <Image src={logo} alt="Logo" width={120} height={72} />
+      <header className="w-full py-3 sm:py-4 px-4 sm:px-6 md:px-8 flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-4">
+        {/* Logo and User Info Row (mobile) / Logo (desktop) */}
+        <div className="flex items-center justify-between w-full sm:w-auto">
+          <Image
+            src={logo}
+            alt="Logo"
+            width={120}
+            height={72}
+            className="w-[100px] sm:w-[120px] h-auto"
+          />
 
-        <div className="relative w-full max-w-sm">
+          {/* Mobile: Show avatar and bell in header row */}
+          <div className="flex items-center gap-3 sm:hidden">
+            <BellIcon className="text-white h-6 w-6" />
+            <Avatar className="h-9 w-9">
+              <AvatarImage src="https://github.com/shadcn.png" />
+              <AvatarFallback>
+                {student?.charAt(0).toUpperCase() || "S"}
+              </AvatarFallback>
+            </Avatar>
+          </div>
+        </div>
+
+        {/* Search Bar */}
+        <div className="relative w-full sm:w-auto sm:flex-1 sm:max-w-sm order-3 sm:order-2">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-black w-4 h-4" />
-          <Input placeholder="      Search for lessons, assessments..." className="bg-white rounded-full" />
+          <Input
+            placeholder="Search for lessons, assessments..."
+            className="bg-white rounded-full pl-9 text-sm sm:text-base"
+          />
         </div>
 
-        <div className="flex items-center gap-4">
-          <BellIcon className="text-white h-8 w-8" />
-          <Avatar className="h-12 w-12">
+        {/* Desktop: Avatar and Bell */}
+        <div className="hidden sm:flex items-center gap-4 order-2 sm:order-3">
+          <BellIcon className="text-white h-7 w-7 md:h-8 md:w-8" />
+          <Avatar className="h-10 w-10 md:h-12 md:w-12">
             <AvatarImage src="https://github.com/shadcn.png" />
-            <AvatarFallback>{student?.charAt(0).toUpperCase() || "S"}</AvatarFallback>
+            <AvatarFallback>
+              {student?.charAt(0).toUpperCase() || "S"}
+            </AvatarFallback>
           </Avatar>
         </div>
       </header>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/domains/student/dashboard/WritingFeedback.tsx b/domains/student/dashboard/WritingFeedback.tsx
index 68561d1..56c420e 100644
--- a/domains/student/dashboard/WritingFeedback.tsx
+++ b/domains/student/dashboard/WritingFeedback.tsx
@@ -1,21 +1,32 @@
 "use client";
-
-import {useState} from "react";
-
-import {Button} from "@/components/ui/button";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import {Select, SelectTrigger, SelectValue, SelectContent, SelectItem} from "@/components/ui/select";
-import {Table, TableHeader, TableRow, TableHead, TableBody, TableCell} from "@/components/ui/table";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+} from "@/components/ui/table";
 
 export default function WritingFeedback() {
   const [timeRange, setTimeRange] = useState<"all" | "week" | "month">("all");
 
   return (
-    <Card className="md:col-span-2">
-      <CardHeader className="flex justify-between items-center">
-        <CardTitle>Writing Feedback</CardTitle>
-        <Select value={timeRange} onValueChange={v => setTimeRange(v as any)}>
-          <SelectTrigger className="h-9 w-36 rounded-md bg-gray-100">
+    <Card className="lg:col-span-2">
+      <CardHeader className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 px-4 sm:px-6">
+        <CardTitle className="text-lg sm:text-xl">Writing Feedback</CardTitle>
+        <Select value={timeRange} onValueChange={(v) => setTimeRange(v as any)}>
+          <SelectTrigger className="h-8 sm:h-9 w-full sm:w-36 rounded-md bg-gray-100 text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -25,28 +36,56 @@ export default function WritingFeedback() {
           </SelectContent>
         </Select>
       </CardHeader>
+      <CardContent className="px-4 sm:px-6">
+        {/* Mobile: Card-based layout */}
+        <div className="block sm:hidden space-y-3">
+          {feedbacks.map((f) => (
+            <div
+              key={f.date}
+              className="p-3 bg-gray-50 rounded-lg border border-gray-200"
+            >
+              <div className="flex justify-between items-start mb-2">
+                <span className="font-medium text-sm text-gray-900">
+                  {f.assignment}
+                </span>
+                <span className="text-xs text-gray-500">{f.date}</span>
+              </div>
+              <p className="text-sm text-gray-600">{f.feedback}</p>
+            </div>
+          ))}
+        </div>
 
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Date</TableHead>
-              <TableHead>Assignment</TableHead>
-              <TableHead>Feedback</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {feedbacks.map(f => (
-              <TableRow key={f.date}>
-                <TableCell>{f.date}</TableCell>
-                <TableCell>{f.assignment}</TableCell>
-                <TableCell>{f.feedback}</TableCell>
+        {/* Desktop: Table layout */}
+        <div className="hidden sm:block overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-xs sm:text-sm">Date</TableHead>
+                <TableHead className="text-xs sm:text-sm">Assignment</TableHead>
+                <TableHead className="text-xs sm:text-sm">Feedback</TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+            </TableHeader>
+            <TableBody>
+              {feedbacks.map((f) => (
+                <TableRow key={f.date}>
+                  <TableCell className="text-xs sm:text-sm whitespace-nowrap">
+                    {f.date}
+                  </TableCell>
+                  <TableCell className="text-xs sm:text-sm">
+                    {f.assignment}
+                  </TableCell>
+                  <TableCell className="text-xs sm:text-sm max-w-[200px] md:max-w-none truncate md:whitespace-normal">
+                    {f.feedback}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
 
-        <Button className="ml-auto mt-4">View All</Button>
+        <div className="flex justify-end mt-4">
+          <Button className="w-full sm:w-auto text-sm">View All</Button>
+        </div>
       </CardContent>
     </Card>
   );
@@ -66,6 +105,7 @@ const feedbacks = [
   {
     date: "Mar 9, 2025",
     assignment: "Persuasive Essay",
-    feedback: "Strong argument and supporting points. Really great work overall",
+    feedback:
+      "Strong argument and supporting points. Really great work overall",
   },
-];
+];
\ No newline at end of file

From faa1c3c4da6a83fab4a0411248052950384426c1 Mon Sep 17 00:00:00 2001
From: mertyercel <mertesatyercel@gmail.com>
Date: Sat, 31 Jan 2026 15:40:04 -0600
Subject: [PATCH 2/2] Spinner added for loading page.

---
 app/loadingSpinner.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 app/loadingSpinner.tsx

diff --git a/app/loadingSpinner.tsx b/app/loadingSpinner.tsx
new file mode 100644
index 0000000..9394a09
--- /dev/null
+++ b/app/loadingSpinner.tsx
@@ -0,0 +1,12 @@
+interface LoadingSpinnerProps {
+  message?: string;
+}
+
+export default function LoadingSpinner({ message = "Loading..." }: LoadingSpinnerProps) {
+  return (
+    <div className="fixed inset-0 flex flex-col items-center justify-center bg-gray-900 bg-opacity-95 z-50 p-4">
+      <div className="animate-spin rounded-full h-12 w-12 sm:h-16 sm:w-16 border-4 border-dashed border-orange-500"></div>
+      <p className="mt-4 text-sm sm:text-base text-white text-center px-4 font-medium">{message}</p>
+    </div>
+  );
+}
\ No newline at end of file