diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
index fb46add..cc5ce17 100644
--- a/app/(auth)/sign-in/page.tsx
+++ b/app/(auth)/sign-in/page.tsx
@@ -1,6 +1,9 @@
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 
+import { AuthInput } from "@/components/auth/auth-input";
+import { OAuthButton } from "@/components/auth/oauth-button";
+
 export default function SignInPage() {
   return (
     <div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-700">
@@ -14,45 +17,27 @@ export default function SignInPage() {
       </div>
 
       <form className="flex flex-col gap-5 mt-2">
-        <div className="flex flex-col gap-1.5">
-          <label
-            htmlFor="email"
-            className="text-sm font-medium text-foreground"
-          >
-            Email address
-          </label>
-          <input
-            id="email"
-            type="email"
-            placeholder="name@student.university.edu"
-            className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
-            required
-          />
-        </div>
+        <AuthInput
+          id="email"
+          type="email"
+          label="Email address"
+          placeholder="name@student.university.edu"
+        />
 
-        <div className="flex flex-col gap-1.5">
-          <div className="flex items-center justify-between">
-            <label
-              htmlFor="password"
-              className="text-sm font-medium text-foreground"
-            >
-              Password
-            </label>
+        <AuthInput
+          id="password"
+          type="password"
+          label="Password"
+          placeholder="••••••••"
+          rightElement={
             <Link
               href="#"
               className="text-xs font-medium text-[#1D4ED8] transition-colors hover:text-[#1E40AF] dark:text-blue-400 dark:hover:text-blue-300"
             >
               Forgot password?
             </Link>
-          </div>
-          <input
-            id="password"
-            type="password"
-            placeholder="••••••••"
-            className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
-            required
-          />
-        </div>
+          }
+        />
 
         <button
           type="button"
@@ -74,27 +59,7 @@ export default function SignInPage() {
         </div>
       </div>
 
-      <button
-        type="button"
-        className="flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-muted/50 hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="mr-2 h-5 w-5"
-        >
-          <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
-          <path d="M9 18c-4.51 2-5-2-7-2" />
-        </svg>
-        GitHub
-      </button>
+      <OAuthButton />
 
       <p className="text-center text-sm text-muted-foreground mt-2">
         Don&apos;t have an account?{" "}
diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index f31adb3..8567689 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -1,6 +1,9 @@
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 
+import { AuthInput } from "@/components/auth/auth-input";
+import { OAuthButton } from "@/components/auth/oauth-button";
+
 export default function SignUpPage() {
   return (
     <div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-700">
@@ -15,73 +18,35 @@ export default function SignUpPage() {
 
       <form className="flex flex-col gap-5 mt-2">
         <div className="grid grid-cols-2 gap-4">
-          <div className="flex flex-col gap-1.5">
-            <label
-              htmlFor="firstName"
-              className="text-sm font-medium text-foreground"
-            >
-              First name
-            </label>
-            <input
-              id="firstName"
-              type="text"
-              placeholder="John"
-              className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
-              required
-            />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <label
-              htmlFor="lastName"
-              className="text-sm font-medium text-foreground"
-            >
-              Last name
-            </label>
-            <input
-              id="lastName"
-              type="text"
-              placeholder="Doe"
-              className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
-              required
-            />
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-1.5">
-          <label
-            htmlFor="email"
-            className="text-sm font-medium text-foreground"
-          >
-            Email address
-          </label>
-          <input
-            id="email"
-            type="email"
-            placeholder="name@student.university.edu"
-            className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
-            required
+          <AuthInput
+            id="firstName"
+            type="text"
+            label="First name"
+            placeholder="John"
           />
-        </div>
-
-        <div className="flex flex-col gap-1.5">
-          <label
-            htmlFor="password"
-            className="text-sm font-medium text-foreground"
-          >
-            Password
-          </label>
-          <input
-            id="password"
-            type="password"
-            placeholder="••••••••"
-            className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
-            required
+          <AuthInput
+            id="lastName"
+            type="text"
+            label="Last name"
+            placeholder="Doe"
           />
-          <p className="text-xs text-muted-foreground mt-1">
-            Must be at least 8 characters long.
-          </p>
         </div>
 
+        <AuthInput
+          id="email"
+          type="email"
+          label="Email address"
+          placeholder="name@student.university.edu"
+        />
+
+        <AuthInput
+          id="password"
+          type="password"
+          label="Password"
+          placeholder="••••••••"
+          hint="Must be at least 8 characters long."
+        />
+
         <button
           type="button"
           className="group mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-[#1D4ED8] px-4 py-3.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#1E40AF] hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 dark:bg-blue-600 dark:hover:bg-blue-700"
@@ -102,27 +67,7 @@ export default function SignUpPage() {
         </div>
       </div>
 
-      <button
-        type="button"
-        className="flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-muted/50 hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="mr-2 h-5 w-5"
-        >
-          <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
-          <path d="M9 18c-4.51 2-5-2-7-2" />
-        </svg>
-        GitHub
-      </button>
+      <OAuthButton />
 
       <p className="text-center text-sm text-muted-foreground mt-2">
         Already have an account?{" "}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 6db3e19..19eb110 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,13 +1,8 @@
 import Link from "next/link";
-import {
-  GraduationCap,
-  BookOpen,
-  FileText,
-  Sparkles,
-  ArrowRight,
-  Clock,
-  ChevronRight,
-} from "lucide-react";
+import { GraduationCap, BookOpen, FileText, Sparkles } from "lucide-react";
+
+import { QuickActionCard } from "@/components/dashboard/quick-action-card";
+import { RecentActivityCard } from "@/components/dashboard/recent-activity-card";
 
 export default function DashboardPage() {
   return (
@@ -44,81 +39,34 @@ export default function DashboardPage() {
             </h2>
           </div>
           <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-            {/* Action 1 */}
-            <Link
+            <QuickActionCard
+              title="Browse Universities"
+              description="Explore available institutions and branches."
               href="/#Universities"
-              className="group relative flex flex-col gap-4 overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#1D4ED8]/30 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] dark:hover:border-blue-500/30"
-            >
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-[#1D4ED8] transition-colors group-hover:bg-[#1D4ED8] group-hover:text-white dark:bg-blue-500/10 dark:text-blue-400 dark:group-hover:bg-blue-500 dark:group-hover:text-white">
-                <GraduationCap className="h-6 w-6" />
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground transition-colors group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
-                  Browse Universities
-                </h3>
-                <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed">
-                  Explore available institutions and branches.
-                </p>
-              </div>
-              <ArrowRight className="absolute bottom-6 right-6 h-5 w-5 text-muted-foreground opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400" />
-            </Link>
-
-            {/* Action 2 */}
-            <Link
+              icon={GraduationCap}
+              colorVariant="blue"
+            />
+            <QuickActionCard
+              title="View Syllabus"
+              description="Access detailed syllabus breakdowns."
               href="/rgpv"
-              className="group relative flex flex-col gap-4 overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/30 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:border-indigo-500/30"
-            >
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600 transition-colors group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/10 dark:text-indigo-400 dark:group-hover:bg-indigo-500 dark:group-hover:text-white">
-                <BookOpen className="h-6 w-6" />
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground transition-colors group-hover:text-indigo-600 dark:group-hover:text-indigo-400">
-                  View Syllabus
-                </h3>
-                <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed">
-                  Access detailed syllabus breakdowns.
-                </p>
-              </div>
-              <ArrowRight className="absolute bottom-6 right-6 h-5 w-5 text-muted-foreground opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:text-indigo-600 dark:group-hover:text-indigo-400" />
-            </Link>
-
-            {/* Action 3 */}
-            <Link
+              icon={BookOpen}
+              colorVariant="indigo"
+            />
+            <QuickActionCard
+              title="Explore PYQs"
+              description="Practice with past year questions."
               href="/rgpv"
-              className="group relative flex flex-col gap-4 overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-emerald-500/30 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:border-emerald-500/30"
-            >
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 transition-colors group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500 dark:group-hover:text-white">
-                <FileText className="h-6 w-6" />
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground transition-colors group-hover:text-emerald-600 dark:group-hover:text-emerald-400">
-                  Explore PYQs
-                </h3>
-                <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed">
-                  Practice with past year questions.
-                </p>
-              </div>
-              <ArrowRight className="absolute bottom-6 right-6 h-5 w-5 text-muted-foreground opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:text-emerald-600 dark:group-hover:text-emerald-400" />
-            </Link>
-
-            {/* Action 4 */}
-            <Link
+              icon={FileText}
+              colorVariant="emerald"
+            />
+            <QuickActionCard
+              title="AI Assistant"
+              description="Get instant help from the AI tutor."
               href="/rgpv"
-              className="group relative flex flex-col gap-4 overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-purple-500/30 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 dark:hover:border-purple-500/30"
-            >
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 text-purple-600 transition-colors group-hover:bg-purple-600 group-hover:text-white dark:bg-purple-500/10 dark:text-purple-400 dark:group-hover:bg-purple-500 dark:group-hover:text-white">
-                <Sparkles className="h-6 w-6" />
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground transition-colors group-hover:text-purple-600 dark:group-hover:text-purple-400">
-                  AI Assistant
-                </h3>
-                <p className="mt-1.5 text-sm text-muted-foreground leading-relaxed">
-                  Get instant help from the AI tutor.
-                </p>
-              </div>
-              <ArrowRight className="absolute bottom-6 right-6 h-5 w-5 text-muted-foreground opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:text-purple-600 dark:group-hover:text-purple-400" />
-            </Link>
+              icon={Sparkles}
+              colorVariant="purple"
+            />
           </div>
         </section>
 
@@ -137,77 +85,24 @@ export default function DashboardPage() {
           </div>
 
           <div className="grid gap-6 md:grid-cols-2">
-            {/* Placeholder Card 1 */}
-            <Link
+            <RecentActivityCard
+              title="Mathematics-III (BT-401)"
+              subtitle="RGPV • CSE • Semester 4"
               href="/rgpv/cse/semester-4/bt-401"
-              className="group flex flex-col justify-between overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:border-[#1D4ED8]/30 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] dark:hover:border-blue-500/30"
-            >
-              <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-                <div className="flex gap-4">
-                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground transition-colors group-hover:bg-[#1D4ED8]/10 group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
-                    <BookOpen className="h-6 w-6" />
-                  </div>
-                  <div className="flex flex-col justify-center">
-                    <h3 className="font-semibold text-foreground transition-colors group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
-                      Mathematics-III (BT-401)
-                    </h3>
-                    <p className="mt-1 text-sm text-muted-foreground">
-                      RGPV • CSE • Semester 4
-                    </p>
-                  </div>
-                </div>
-                <div className="flex w-fit items-center gap-1.5 rounded-md bg-muted/50 px-2.5 py-1 text-xs text-muted-foreground self-start">
-                  <Clock className="h-3.5 w-3.5" />
-                  <span>2 hours ago</span>
-                </div>
-              </div>
-              <div className="mt-8 flex items-center justify-between border-t border-border pt-4">
-                <div className="flex items-center gap-2.5 text-sm text-muted-foreground">
-                  <span className="h-2 w-2 rounded-full bg-emerald-500" />
-                  Unit 2: Laplace Transform
-                </div>
-                <div className="flex items-center text-sm font-medium text-[#1D4ED8] transition-colors dark:text-blue-400">
-                  Resume{" "}
-                  <ChevronRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </div>
-              </div>
-            </Link>
-
-            {/* Placeholder Card 2 */}
-            <Link
+              timeAgo="2 hours ago"
+              progressText="Unit 2: Laplace Transform"
+              statusColor="bg-emerald-500"
+              type="book"
+            />
+            <RecentActivityCard
+              title="Data Structures (BT-402)"
+              subtitle="RGPV • CSE • Semester 4"
               href="/rgpv/cse/semester-4/bt-402"
-              className="group flex flex-col justify-between overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:border-[#1D4ED8]/30 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] dark:hover:border-blue-500/30"
-            >
-              <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-                <div className="flex gap-4">
-                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground transition-colors group-hover:bg-[#1D4ED8]/10 group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
-                    <FileText className="h-6 w-6" />
-                  </div>
-                  <div className="flex flex-col justify-center">
-                    <h3 className="font-semibold text-foreground transition-colors group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
-                      Data Structures (BT-402)
-                    </h3>
-                    <p className="mt-1 text-sm text-muted-foreground">
-                      RGPV • CSE • Semester 4
-                    </p>
-                  </div>
-                </div>
-                <div className="flex w-fit items-center gap-1.5 rounded-md bg-muted/50 px-2.5 py-1 text-xs text-muted-foreground self-start">
-                  <Clock className="h-3.5 w-3.5" />
-                  <span>Yesterday</span>
-                </div>
-              </div>
-              <div className="mt-8 flex items-center justify-between border-t border-border pt-4">
-                <div className="flex items-center gap-2.5 text-sm text-muted-foreground">
-                  <span className="h-2 w-2 rounded-full bg-orange-500" />
-                  Viewing June-2024 PYQ
-                </div>
-                <div className="flex items-center text-sm font-medium text-[#1D4ED8] transition-colors dark:text-blue-400">
-                  Resume{" "}
-                  <ChevronRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </div>
-              </div>
-            </Link>
+              timeAgo="Yesterday"
+              progressText="Viewing June-2024 PYQ"
+              statusColor="bg-orange-500"
+              type="file"
+            />
           </div>
         </section>
       </div>
diff --git a/components/auth/auth-input.tsx b/components/auth/auth-input.tsx
new file mode 100644
index 0000000..eb0c4b0
--- /dev/null
+++ b/components/auth/auth-input.tsx
@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+
+interface AuthInputProps {
+  id: string;
+  type: string;
+  label: string;
+  placeholder: string;
+  required?: boolean;
+  hint?: ReactNode;
+  rightElement?: ReactNode;
+}
+
+export function AuthInput({
+  id,
+  type,
+  label,
+  placeholder,
+  required = true,
+  hint,
+  rightElement,
+}: AuthInputProps) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between">
+        <label htmlFor={id} className="text-sm font-medium text-foreground">
+          {label}
+        </label>
+        {rightElement}
+      </div>
+      <input
+        id={id}
+        type={type}
+        placeholder={placeholder}
+        className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
+        required={required}
+      />
+      {hint && <p className="text-xs text-muted-foreground mt-1">{hint}</p>}
+    </div>
+  );
+}
diff --git a/components/auth/oauth-button.tsx b/components/auth/oauth-button.tsx
new file mode 100644
index 0000000..e0518a8
--- /dev/null
+++ b/components/auth/oauth-button.tsx
@@ -0,0 +1,25 @@
+export function OAuthButton() {
+  return (
+    <button
+      type="button"
+      className="flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-muted/50 hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="mr-2 h-5 w-5"
+      >
+        <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+        <path d="M9 18c-4.51 2-5-2-7-2" />
+      </svg>
+      GitHub
+    </button>
+  );
+}
diff --git a/components/dashboard/quick-action-card.tsx b/components/dashboard/quick-action-card.tsx
new file mode 100644
index 0000000..787dcd5
--- /dev/null
+++ b/components/dashboard/quick-action-card.tsx
@@ -0,0 +1,83 @@
+import Link from "next/link";
+import { ArrowRight, LucideIcon } from "lucide-react";
+
+type ColorVariant = "blue" | "indigo" | "emerald" | "purple";
+
+interface QuickActionCardProps {
+  title: string;
+  description: string;
+  href: string;
+  icon: LucideIcon;
+  colorVariant: ColorVariant;
+}
+
+export function QuickActionCard({
+  title,
+  description,
+  href,
+  icon: Icon,
+  colorVariant,
+}: QuickActionCardProps) {
+  const variants = {
+    blue: {
+      wrapper:
+        "hover:border-[#1D4ED8]/30 focus-visible:ring-[#1D4ED8] dark:hover:border-blue-500/30",
+      iconBox:
+        "bg-blue-50 text-[#1D4ED8] group-hover:bg-[#1D4ED8] group-hover:text-white dark:bg-blue-500/10 dark:text-blue-400 dark:group-hover:bg-blue-500 dark:group-hover:text-white",
+      title: "group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400",
+      arrow: "group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400",
+    },
+    indigo: {
+      wrapper:
+        "hover:border-indigo-500/30 focus-visible:ring-indigo-500 dark:hover:border-indigo-500/30",
+      iconBox:
+        "bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/10 dark:text-indigo-400 dark:group-hover:bg-indigo-500 dark:group-hover:text-white",
+      title: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
+      arrow: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
+    },
+    emerald: {
+      wrapper:
+        "hover:border-emerald-500/30 focus-visible:ring-emerald-500 dark:hover:border-emerald-500/30",
+      iconBox:
+        "bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500 dark:group-hover:text-white",
+      title: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400",
+      arrow: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400",
+    },
+    purple: {
+      wrapper:
+        "hover:border-purple-500/30 focus-visible:ring-purple-500 dark:hover:border-purple-500/30",
+      iconBox:
+        "bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white dark:bg-purple-500/10 dark:text-purple-400 dark:group-hover:bg-purple-500 dark:group-hover:text-white",
+      title: "group-hover:text-purple-600 dark:group-hover:text-purple-400",
+      arrow: "group-hover:text-purple-600 dark:group-hover:text-purple-400",
+    },
+  };
+
+  const style = variants[colorVariant];
+
+  return (
+    <Link
+      href={href}
+      className={`group relative flex flex-col gap-4 overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 ${style.wrapper}`}
+    >
+      <div
+        className={`flex h-12 w-12 items-center justify-center rounded-xl transition-colors ${style.iconBox}`}
+      >
+        <Icon className="h-6 w-6" />
+      </div>
+      <div>
+        <h3
+          className={`font-semibold text-foreground transition-colors ${style.title}`}
+        >
+          {title}
+        </h3>
+        <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
+          {description}
+        </p>
+      </div>
+      <ArrowRight
+        className={`absolute bottom-6 right-6 h-5 w-5 text-muted-foreground opacity-0 transition-all duration-300 group-hover:opacity-100 ${style.arrow}`}
+      />
+    </Link>
+  );
+}
diff --git a/components/dashboard/recent-activity-card.tsx b/components/dashboard/recent-activity-card.tsx
new file mode 100644
index 0000000..05d035a
--- /dev/null
+++ b/components/dashboard/recent-activity-card.tsx
@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { BookOpen, FileText, Clock, ChevronRight } from "lucide-react";
+
+interface RecentActivityCardProps {
+  title: string;
+  subtitle: string;
+  href: string;
+  timeAgo: string;
+  progressText: string;
+  statusColor: string;
+  type: "book" | "file";
+}
+
+export function RecentActivityCard({
+  title,
+  subtitle,
+  href,
+  timeAgo,
+  progressText,
+  statusColor,
+  type,
+}: RecentActivityCardProps) {
+  const Icon = type === "book" ? BookOpen : FileText;
+
+  return (
+    <Link
+      href={href}
+      className="group flex flex-col justify-between overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-sm transition-all duration-300 hover:border-[#1D4ED8]/30 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] dark:hover:border-blue-500/30"
+    >
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex gap-4">
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground transition-colors group-hover:bg-[#1D4ED8]/10 group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
+            <Icon className="h-6 w-6" />
+          </div>
+          <div className="flex flex-col justify-center">
+            <h3 className="font-semibold text-foreground transition-colors group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
+              {title}
+            </h3>
+            <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+          </div>
+        </div>
+        <div className="flex w-fit items-center gap-1.5 self-start rounded-md bg-muted/50 px-2.5 py-1 text-xs text-muted-foreground">
+          <Clock className="h-3.5 w-3.5" />
+          <span>{timeAgo}</span>
+        </div>
+      </div>
+      <div className="mt-8 flex items-center justify-between border-t border-border pt-4">
+        <div className="flex items-center gap-2.5 text-sm text-muted-foreground">
+          <span className={`h-2 w-2 rounded-full ${statusColor}`} />
+          {progressText}
+        </div>
+        <div className="flex items-center text-sm font-medium text-[#1D4ED8] transition-colors dark:text-blue-400">
+          Resume{" "}
+          <ChevronRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
+        </div>
+      </div>
+    </Link>
+  );
+}