diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..f7b9c59
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,95 @@
+# Contributing Guidelines
+
+Thank you for your interest in contributing to this project! We welcome contributions from the community. Please read the following guidelines to help us maintain a high standard and streamline the contribution process.
+
+## How to Contribute
+
+1. **Fork the Repository**
+
+   - Click the 'Fork' button at the top right of this repository page to create your own copy.
+
+2. **Clone Your Fork**
+
+   - Clone your forked repository to your local machine:
+     ```bash
+     git clone https://github.com/<your-username>/ElixirV3.git
+     cd ElixirV3
+     ```
+
+3. **Create a New Branch**
+
+   - Create a branch for your feature or bugfix:
+     ```bash
+     git checkout -b <branch-name>
+     ```
+
+4. **Make Your Changes**
+
+   - Make your changes or additions. Please ensure your code follows the existing style and conventions.
+
+5. **Test Your Changes**
+
+   - Run the application and ensure your changes work as expected and do not break existing functionality.
+
+6. **Commit Your Changes**
+
+   - Use clear and descriptive commit messages. Follow the commit message format below.
+
+7. **Push to Your Fork**
+
+   - Push your branch to your forked repository:
+     ```bash
+     git push origin <branch-name>
+     ```
+
+8. **Open a Pull Request**
+   - Go to the original repository and open a pull request. Provide a clear description of your changes and reference any related issues.
+
+## Commit Message Format
+
+```
+<TEAM> | <type>(<scope>): <description>
+```
+
+### Examples
+
+```
+GFG | feat(event): new card designs
+GFG | fix(event): api request improve
+GFG | chore(event): title copy change
+GFG | refactor(event): mentor's search logic
+
+ELX | feat(event): new card designs
+GDG | fix(event): api request improve
+CC | chore(event): title copy change
+```
+
+- `<TEAM>`: Team code. If you are a member of one of the Elixir clubs, use your club's code:
+
+  - `GFG` for GeeksforGeeks ABESEC
+  - `GDG` for Google Developer Group ABESEC
+  - `CC` for CodeChef ABESEC
+  - `ELX` for external contributers
+
+- `<type>`: Type of change (feat, fix, chore, refactor, etc.)
+- `<scope>`: Area affected (e.g., event)
+- `<description>`: Short summary of the change
+
+## Code Style & Standards
+
+- Follow the existing code style and formatting.
+- Write clear, concise, and well-documented code.
+- Add comments where necessary, especially for complex logic.
+- Write tests for new features or bug fixes if applicable.
+
+## Community Standards
+
+- Be respectful and inclusive in all interactions.
+- Provide constructive feedback in code reviews.
+- Report issues or bugs using the issue tracker.
+
+## Need Help?
+
+If you have any questions or need guidance, feel free to open an issue or reach out to the maintainers.
+
+Thank you for contributing!
diff --git a/app/dashboard/admin/page.tsx b/app/dashboard/admin/page.tsx
new file mode 100644
index 0000000..93d8ea4
--- /dev/null
+++ b/app/dashboard/admin/page.tsx
@@ -0,0 +1,254 @@
+"use client";
+import { useState } from "react";
+import { AnimatePresence } from "framer-motion";
+import WelcomeSection from "../components/WelcomeSection";
+import ManagementSection from "../components/ManagementSection";
+import Modal from "../components/Modal";
+import StatsCards from "../components/StatsCards";
+import { ColorScheme } from "../types";
+
+// Mock Data
+const mockStudents = [
+  {
+    id: 1,
+    name: "Vaibhav Tripathi",
+    email: "vxtr@abes.ac.in",
+    role: "Student",
+    joinDate: "2024-01-15",
+  },
+  {
+    id: 2,
+    name: "Akash Chaudhary",
+    email: "akash@abes.ac.in",
+    role: "Student",
+    joinDate: "2024-02-01",
+  },
+  {
+    id: 3,
+    name: "Shreyash Singh",
+    email: "shreyash@abes.ac.in",
+    role: "Club Head",
+    joinDate: "2024-01-20",
+  },
+];
+
+const mockMentors = [
+  {
+    id: 1,
+    name: "Dewank Rastogi",
+    expertise: "Frontend",
+    achievements: "3+ years experience",
+    status: "Active",
+  },
+  {
+    id: 2,
+    name: "Rudraksh Tyagi",
+    expertise: "Open Source",
+    achievements: "LFX",
+    status: "Active",
+  },
+  {
+    id: 3,
+    name: "Vandit Singh",
+    expertise: "DevOps",
+    achievements: "Google Summer of Code",
+    status: "Active",
+  },
+];
+
+const mockEvents = [
+  {
+    id: 1,
+    name: "Binary Vault",
+    club: "GFG_ABESEC",
+    date: "2024-03-15",
+    participants: 450,
+  },
+  {
+    id: 2,
+    name: "Hackhaven",
+    club: "GDG_ABESEC",
+    date: "2024-03-20",
+    participants: 320,
+  },
+  {
+    id: 3,
+    name: "Some Event",
+    club: "CodeChef_ABESEC",
+    date: "2024-03-25",
+    participants: 280,
+  },
+];
+
+const mockBlogs = [
+  {
+    id: 1,
+    title: "Future of AI",
+    author: "Priya Kumari",
+    status: "Pending",
+    date: "2024-03-10",
+  },
+  {
+    id: 2,
+    title: "Web Development Trends",
+    author: "Radhika Chauhan",
+    status: "Approved",
+    date: "2024-03-08",
+  },
+  {
+    id: 3,
+    title: "Cloud Computing Basics",
+    author: "Granth Agarwal",
+    status: "Pending",
+    date: "2024-03-09",
+  },
+];
+
+const AdminDashboard = () => {
+  const [activeModal, setActiveModal] = useState<string | null>(null);
+  const [selectedItem, setSelectedItem] = useState<any>(null);
+
+  const openModal = (modalType: string, item?: any) => {
+    setActiveModal(modalType);
+    if (item) setSelectedItem(item);
+  };
+
+  const closeModal = () => {
+    setActiveModal(null);
+    setSelectedItem(null);
+  };
+
+  const adminStats = [
+    {
+      heading: "1.2k",
+      subheading: "Total Students",
+      description: "+120 this month",
+      colorScheme: "purple" as ColorScheme,
+    },
+    {
+      heading: "45",
+      subheading: "Upcoming Events",
+      description: "Next: 3 days",
+      colorScheme: "blue" as ColorScheme,
+    },
+    {
+      heading: "8",
+      subheading: "Blog Submissions",
+      description: "3 pending approval",
+      colorScheme: "green" as ColorScheme,
+    },
+    {
+      heading: "24",
+      subheading: "Mentors",
+      description: "5 new additions",
+      colorScheme: "orange" as ColorScheme,
+    },
+  ];
+
+  const renderModalContent = () => {
+    if (!selectedItem) return null;
+    return (
+      <div className="space-y-2">
+        <table className="w-full text-left">
+          <tbody>
+            {Object.entries(selectedItem).map(([key, value]) => (
+              <tr key={key}>
+                <td className="pr-4 font-semibold text-white/80 capitalize">
+                  {key}
+                </td>
+                <td className="text-white/60">{String(value)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-8 w-full max-w-6xl mx-auto lg:mt-38 mt-20">
+        <WelcomeSection
+          title="Admin Dashboard"
+          description="Manage your community and monitor platform metrics."
+        />
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+          {adminStats.map((stat, idx) => (
+            <StatsCards
+              key={idx}
+              heading={stat.heading}
+              subheading={stat.subheading}
+              description={stat.description}
+              colorScheme={stat.colorScheme}
+            />
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <ManagementSection
+            title="Student Management"
+            data={mockStudents}
+            columns={[
+              { header: "Name", accessor: (row) => row.name },
+              { header: "Role", accessor: (row) => row.role },
+              { header: "Join Date", accessor: (row) => row.joinDate },
+            ]}
+            onViewAll={() => openModal("students")}
+            onRowClick={(item) => openModal("Student Details", item)}
+          />
+
+          <ManagementSection
+            title="Mentor Management"
+            data={mockMentors}
+            columns={[
+              { header: "Name", accessor: (row) => row.name },
+              { header: "Expertise", accessor: (row) => row.expertise },
+              { header: "Status", accessor: (row) => row.status },
+            ]}
+            onViewAll={() => openModal("mentors")}
+            onRowClick={(item) => openModal("Mentor Details", item)}
+          />
+
+          <ManagementSection
+            title="Event Management"
+            data={mockEvents}
+            columns={[
+              { header: "Event", accessor: (row) => row.name },
+              { header: "Club", accessor: (row) => row.club },
+              { header: "Date", accessor: (row) => row.date },
+            ]}
+            onViewAll={() => openModal("events")}
+            onRowClick={(item) => openModal("Event Details", item)}
+          />
+
+          <ManagementSection
+            title="Blog Management"
+            data={mockBlogs}
+            columns={[
+              { header: "Title", accessor: (row) => row.title },
+              { header: "Author", accessor: (row) => row.author },
+              { header: "Status", accessor: (row) => row.status },
+            ]}
+            onViewAll={() => openModal("blogs")}
+            onRowClick={(item) => openModal("Blog Details", item)}
+          />
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {activeModal && (
+          <Modal
+            isOpen={true}
+            onClose={closeModal}
+            title={activeModal.charAt(0).toUpperCase() + activeModal.slice(1)}
+          >
+            {renderModalContent()}
+          </Modal>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default AdminDashboard;
diff --git a/app/dashboard/components/ManagementSection.tsx b/app/dashboard/components/ManagementSection.tsx
new file mode 100644
index 0000000..0d92b04
--- /dev/null
+++ b/app/dashboard/components/ManagementSection.tsx
@@ -0,0 +1,58 @@
+import { ManagementSectionProps, Column } from "../types";
+import { managementStyles } from "../styles";
+
+interface ExtendedManagementSectionProps extends ManagementSectionProps {
+  onRowClick?: (row: any) => void;
+}
+
+const ManagementSection: React.FC<ExtendedManagementSectionProps> = ({
+  title,
+  columns,
+  data = [],
+  onViewAll,
+  className = "",
+  onRowClick,
+}) => {
+  return (
+    <div className={`${managementStyles.container} ${className}`}>
+      <div className={managementStyles.header}>
+        <h2 className={managementStyles.title}>{title}</h2>
+        {onViewAll && (
+          <button onClick={onViewAll} className={managementStyles.viewAll}>
+            View All
+          </button>
+        )}
+      </div>
+      <div className={managementStyles.table.container}>
+        <table className={managementStyles.table.table}>
+          <thead>
+            <tr className={managementStyles.table.header}>
+              {columns.map((column: Column, index: number) => (
+                <th key={index} className={managementStyles.table.headerCell}>
+                  {column.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row, rowIndex) => (
+              <tr
+                key={rowIndex}
+                className={managementStyles.table.row}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+              >
+                {columns.map((column: Column, colIndex: number) => (
+                  <td key={colIndex} className={managementStyles.table.cell}>
+                    {column.accessor(row)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default ManagementSection;
diff --git a/app/dashboard/components/Modal.tsx b/app/dashboard/components/Modal.tsx
new file mode 100644
index 0000000..f07cdc6
--- /dev/null
+++ b/app/dashboard/components/Modal.tsx
@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import { ModalProps } from "../types";
+import { modalStyles } from "../styles";
+import { motion, AnimatePresence } from "framer-motion";
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  className = "",
+}) => {
+  useEffect(() => {
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [isOpen, onClose]);
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className={modalStyles.overlay} onClick={onClose}>
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className={`${modalStyles.container} ${className}`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className={modalStyles.header}>
+              <h2 className={modalStyles.title}>{title}</h2>
+              <button onClick={onClose} className={modalStyles.closeButton}>
+                ×
+              </button>
+            </div>
+            <div className="p-6">{children}</div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Modal;
diff --git a/app/dashboard/components/QuickStats.tsx b/app/dashboard/components/QuickStats.tsx
new file mode 100644
index 0000000..fb4d649
--- /dev/null
+++ b/app/dashboard/components/QuickStats.tsx
@@ -0,0 +1,65 @@
+type StatColorScheme = "purple" | "blue" | "green" | "orange";
+
+interface StatItem {
+  value: string;
+  label: string;
+  subtext: string;
+  colorScheme: StatColorScheme;
+}
+
+interface QuickStatsProps {
+  stats: StatItem[];
+}
+
+const colorSchemes = {
+  purple: {
+    gradient: "from-purple to-blue-500",
+    hover: "hover:border-purple/50",
+    subtext: "text-purple",
+  },
+  blue: {
+    gradient: "from-blue-400 to-cyan-400",
+    hover: "hover:border-blue-400/50",
+    subtext: "text-blue-400",
+  },
+  green: {
+    gradient: "from-green-400 to-emerald-400",
+    hover: "hover:border-green-400/50",
+    subtext: "text-green-400",
+  },
+  orange: {
+    gradient: "from-orange-400 to-red-400",
+    hover: "hover:border-orange-400/50",
+    subtext: "text-orange-400",
+  },
+};
+
+const QuickStats: React.FC<QuickStatsProps> = ({ stats }) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+      {stats.map((stat, index) => {
+        const colors = colorSchemes[stat.colorScheme];
+        return (
+          <div
+            key={index}
+            className={`group rounded-xl p-6 bg-[rgba(17,25,40,0.75)] backdrop-blur-md border border-white/10 shadow ${colors.hover} transition-all duration-300`}
+          >
+            <div className="relative z-10">
+              <span
+                className={`text-4xl font-bold bg-gradient-to-r ${colors.gradient} bg-clip-text text-transparent`}
+              >
+                {stat.value}
+              </span>
+              <span className="text-white/80 mt-2 block">{stat.label}</span>
+              <span className={`${colors.subtext} text-sm mt-1 block`}>
+                {stat.subtext}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default QuickStats;
diff --git a/app/dashboard/components/RecentActivity.tsx b/app/dashboard/components/RecentActivity.tsx
new file mode 100644
index 0000000..4ab0f6b
--- /dev/null
+++ b/app/dashboard/components/RecentActivity.tsx
@@ -0,0 +1,39 @@
+import { ActivityItem } from "../types";
+import { baseCardStyles } from "../styles";
+
+interface RecentActivityProps {
+  heading: string;
+  activities: ActivityItem[];
+  className?: string;
+}
+
+const RecentActivity: React.FC<RecentActivityProps> = ({
+  heading,
+  activities,
+  className = "",
+}) => {
+  return (
+    <div className={`${baseCardStyles.container} ${className}`}>
+      <h2 className="text-xl font-semibold text-white">{heading}</h2>
+      <div className="mt-4 space-y-4">
+        {activities.map((activity, index) => (
+          <div
+            key={index}
+            className="flex items-start space-x-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors"
+          >
+            <div className={`p-2 rounded-lg ${activity.iconBg}`}>
+              {activity.icon}
+            </div>
+            <div className="flex-1">
+              <p className="text-sm font-medium text-white">{activity.title}</p>
+              <p className="text-xs text-white/60">{activity.description}</p>
+              <p className="text-xs text-white/40 mt-1">{activity.time}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RecentActivity;
diff --git a/app/dashboard/components/StatsCards.tsx b/app/dashboard/components/StatsCards.tsx
new file mode 100644
index 0000000..ce6a00f
--- /dev/null
+++ b/app/dashboard/components/StatsCards.tsx
@@ -0,0 +1,32 @@
+import { StatCardProps } from "../types";
+import { colorSchemes, baseCardStyles } from "../styles";
+
+const StatsCards: React.FC<StatCardProps> = ({
+  heading,
+  subheading,
+  description,
+  colorScheme,
+  className = "",
+}) => {
+  const colors = colorSchemes[colorScheme];
+
+  return (
+    <div
+      className={`group ${baseCardStyles.container} ${colors.hover} ${className}`}
+    >
+      <div className="relative z-10">
+        <span
+          className={`${baseCardStyles.heading} bg-gradient-to-r ${colors.gradient}`}
+        >
+          {heading}
+        </span>
+        <span className={baseCardStyles.subheading}>{subheading}</span>
+        <span className={`${baseCardStyles.description} ${colors.text}`}>
+          {description}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default StatsCards;
diff --git a/app/dashboard/components/WelcomeCard.tsx b/app/dashboard/components/WelcomeCard.tsx
new file mode 100644
index 0000000..49f0c20
--- /dev/null
+++ b/app/dashboard/components/WelcomeCard.tsx
@@ -0,0 +1,20 @@
+const WelcomeCard = ({ name }: { name: string }) => {
+  return (
+    <>
+      <div className="rounded-2xl p-8 bg-[rgba(17,25,40,0.85)] backdrop-blur-lg border border-white/10 shadow-xl flex flex-col items-start relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-purple/20 via-transparent to-blue-500/20 opacity-50" />
+        <div className="relative z-10">
+          <h2 className="text-3xl font-bold text-white mb-2">
+            Welcome back, <span className="text-[#CBACF9]">{name}!</span>
+          </h2>
+          <p className="text-white/80 text-lg">
+            Here&apos;s what&apos;s happening today.
+          </p>
+        </div>
+        <div className="absolute -right-10 -bottom-10 w-40 h-40 bg-purple/20 rounded-full blur-3xl" />
+      </div>
+    </>
+  );
+};
+
+export default WelcomeCard;
diff --git a/app/dashboard/components/WelcomeSection.tsx b/app/dashboard/components/WelcomeSection.tsx
new file mode 100644
index 0000000..a648aec
--- /dev/null
+++ b/app/dashboard/components/WelcomeSection.tsx
@@ -0,0 +1,22 @@
+interface WelcomeSectionProps {
+  title: string;
+  description: string;
+}
+
+const WelcomeSection: React.FC<WelcomeSectionProps> = ({
+  title,
+  description,
+}) => {
+  return (
+    <div className="rounded-2xl p-8 bg-[rgba(17,25,40,0.85)] backdrop-blur-lg border border-white/10 shadow-xl flex flex-col items-start relative overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-purple/20 via-transparent to-blue-500/20 opacity-50" />
+      <div className="relative z-10">
+        <h2 className="text-3xl font-bold text-white mb-2">{title}</h2>
+        <p className="text-white/80 text-lg">{description}</p>
+      </div>
+      <div className="absolute -right-10 -bottom-10 w-40 h-40 bg-purple/20 rounded-full blur-3xl" />
+    </div>
+  );
+};
+
+export default WelcomeSection;
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
new file mode 100644
index 0000000..aabe112
--- /dev/null
+++ b/app/dashboard/page.tsx
@@ -0,0 +1,62 @@
+import StatsCards from "./components/StatsCards";
+import WelcomeCard from "./components/WelcomeCard";
+import RecentActivity from "./components/RecentActivity";
+
+const Dashboard = () => {
+  const recentActivities = [
+    {
+      icon: <span>📝</span>,
+      iconBg: "bg-green-400/20",
+      title: "Added a new note",
+      description: "Next.js Tips",
+      time: "2 hours ago",
+    },
+    {
+      icon: <span>🎉</span>,
+      iconBg: "bg-blue-400/20",
+      title: "Attended Event",
+      description: "Elixir Community Meetup",
+      time: "Yesterday",
+    },
+    {
+      icon: <span>📝</span>,
+      iconBg: "bg-purple/20",
+      title: "Created a new project",
+      description: "",
+      time: "2 days ago",
+    },
+  ];
+
+  return (
+    <>
+      <div className="flex flex-col gap-8 w-full max-w-6xl mx-auto lg:mt-38 mt-20">
+        <WelcomeCard name="User" />
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <StatsCards
+            heading="5"
+            subheading="Events Attended"
+            description="+ 2 this month"
+            colorScheme="purple"
+          />
+          <StatsCards
+            heading="12"
+            subheading="Notes Created"
+            description="+ 5 this week"
+            colorScheme="blue"
+          />
+          <StatsCards
+            heading="2"
+            subheading="Upcoming Events"
+            description="Next: 3 days"
+            colorScheme="green"
+          />
+        </div>
+        <RecentActivity activities={recentActivities} heading="Activity" />
+        <RecentActivity activities={recentActivities} heading="Recent Activity" />
+
+      </div>
+    </>
+  );
+};
+
+export default Dashboard;
diff --git a/app/dashboard/styles/index.ts b/app/dashboard/styles/index.ts
new file mode 100644
index 0000000..453e6d5
--- /dev/null
+++ b/app/dashboard/styles/index.ts
@@ -0,0 +1,60 @@
+export const colorSchemes = {
+  purple: {
+    gradient: "from-purple to-blue-500",
+    hover: "hover:border-purple/50",
+    text: "text-purple",
+    bg: "bg-purple/20",
+  },
+  blue: {
+    gradient: "from-blue-400 to-cyan-400",
+    hover: "hover:border-blue-400/50",
+    text: "text-blue-400",
+    bg: "bg-blue-400/20",
+  },
+  green: {
+    gradient: "from-green-400 to-emerald-400",
+    hover: "hover:border-green-400/50",
+    text: "text-green-400",
+    bg: "bg-green-400/20",
+  },
+  orange: {
+    gradient: "from-orange-400 to-red-400",
+    hover: "hover:border-orange-400/50",
+    text: "text-orange-400",
+    bg: "bg-orange-400/20",
+  },
+};
+
+export const baseCardStyles = {
+  container:
+    "rounded-xl p-6 bg-[rgba(17,25,40,0.75)] backdrop-blur-md border border-white/10 shadow transition-all duration-300",
+  heading: "text-4xl font-bold bg-clip-text text-transparent",
+  subheading: "text-white/80 mt-2 block",
+  description: "text-sm mt-1 block",
+};
+
+export const managementStyles = {
+  container:
+    "rounded-2xl p-6 bg-[rgba(17,25,40,0.80)] backdrop-blur-lg border border-white/10 shadow",
+  header: "flex justify-between items-center mb-6",
+  title: "text-xl font-semibold text-white",
+  viewAll: "text-sm text-blue-400 hover:text-blue-300 transition-colors",
+  table: {
+    container: "overflow-x-auto",
+    table: "w-full",
+    header: "text-left text-white/60 text-sm",
+    headerCell: "pb-4",
+    row: "cursor-pointer hover:bg-white/5 transition-colors",
+    cell: "py-3 text-white",
+  },
+};
+
+export const modalStyles = {
+  overlay:
+    "fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center",
+  container:
+    "bg-[rgba(17,25,40,0.95)] border border-white/10 rounded-2xl p-6 w-full max-w-2xl mx-4",
+  header: "flex justify-between items-center mb-4",
+  title: "text-xl font-semibold text-white",
+  closeButton: "text-white/60 text-3xl hover:text-white",
+};
diff --git a/app/dashboard/types/index.ts b/app/dashboard/types/index.ts
new file mode 100644
index 0000000..fd7891e
--- /dev/null
+++ b/app/dashboard/types/index.ts
@@ -0,0 +1,54 @@
+export type ColorScheme = "purple" | "blue" | "green" | "orange";
+
+export interface BaseCardProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export interface StatCardProps {
+  heading: string;
+  subheading: string;
+  description: string;
+  colorScheme: ColorScheme;
+  className?: string;
+}
+
+export interface ActivityItem {
+  icon: React.ReactNode;
+  iconBg: string;
+  title: string;
+  description: string;
+  time: string;
+}
+
+export interface ManagementItem {
+  id: number;
+  [key: string]: any;
+}
+
+export interface Column {
+  header: string;
+  accessor: (row: any) => React.ReactNode;
+}
+
+export interface ManagementSectionProps {
+  title: string;
+  columns: Column[];
+  data: any[];
+  onViewAll?: () => void;
+  className?: string;
+}
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface WelcomeSectionProps {
+  title: string;
+  description: string;
+  className?: string;
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 7131125..06a79e0 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -2,6 +2,7 @@ import { FaLocationArrow } from "react-icons/fa6";
 import { socialMedia } from "@/constants/constants";
 import MagicButton from "./MagicButton";
 import Image from "next/image";
+import MinFooter from "./MinFooter";
 
 const Footer = () => {
   return (
@@ -23,29 +24,7 @@ const Footer = () => {
           />
         </a>
       </div>
-      <div className="flex mt-16 md:flex-row flex-col justify-between items-center px-10 pb-10">
-        <p className="md:text-sm text-xs md:font-normal font-light">
-          Copyright © 2024 Elixir Tech Community
-        </p>
-        <div className="flex items-center md:gap-3 gap-6 mt-4 md:mt-0">
-          {socialMedia.map((info) => (
-            <a href={info.link} target="_blank" rel="noreferrer" key={info.id}>
-              <div
-                key={info.id}
-                className="w-10 h-10 cursor-pointer flex justify-center items-center backdrop-filter backdrop-blur-lg saturate-180 bg-opacity-75 bg-black-200 rounded-lg border border-black-300"
-              >
-                <Image
-                  src={info.img}
-                  alt="icons"
-                  width={20}
-                  height={20}
-                  loading="lazy"
-                />
-              </div>
-            </a>
-          ))}
-        </div>
-      </div>
+      <MinFooter />
     </footer>
   );
 };
diff --git a/components/MentorCard.tsx b/components/MentorCard.tsx
index cb4f6c7..ff2ca4a 100644
--- a/components/MentorCard.tsx
+++ b/components/MentorCard.tsx
@@ -1,42 +1,86 @@
 import Image from "next/image";
-import React, { memo } from "react";
-import { FaLinkedin } from "react-icons/fa6";
+import { FaLinkedin, FaGithub } from "react-icons/fa";
+import { motion } from "framer-motion";
 
 const MentorCard = ({ data }: { data: any }) => {
   return (
-    <div className="relative group duration-500 cursor-pointer group overflow-hidden  text-gray-50 h-80 w-64 rounded-2xl hover:duration-700 ">
-      <div className="w-64 h-80 bg-gray-400 text-gray-800">
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="relative group w-[320px] h-[420px] rounded-3xl overflow-hidden bg-black"
+    >
+      <div className="absolute inset-0">
         <Image
           src={
             "https://res.cloudinary.com/dta8uzpup/image/upload/v1719346276" +
             data.image
           }
-          width={240}
-          height={320}
           alt={data.name}
-          className="object-cover w-full h-full"
-          priority={false}
-          loading="lazy"
+          fill
+          className="object-cover transition-all duration-700 group-hover:scale-105 pointer-events-none"
         />
+        {/* gradient overlay */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent opacity-80 pointer-events-none" />
       </div>
-      <div className="absolute bg-gray-50 -bottom-[105px] h-44 w-64 p-3 flex flex-col  group-hover:-bottom-0 group-hover:duration-600 duration-500">
-        <span className="text-gray-800 font-bold text-xl">{data.name}</span>
 
-        <span className="text-gray-400 text-xs">{data.techStack}</span>
+      {/* Content overlay */}
+      <div className="relative h-full flex flex-col justify-end p-8">
+        <motion.div
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.2 }}
+          className="space-y-2"
+        >
+          <h3 className="text-2xl font-semibold text-white tracking-tight">
+            {data.name}
+          </h3>
+          <p className="text-sm text-gray-300/90 font-light tracking-wide">
+            {data.techStack}
+          </p>
+        </motion.div>
 
-        <div className="my-4 w-full flex items-center justify-between gap-10 ">
-          <a
+        {/* Social links */}
+        <motion.div
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.3 }}
+          className="flex items-center gap-4 mt-6"
+        >
+          <motion.a
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
             href={data.linkedIn}
             target="_blank"
-            className="px-8 py-2 rounded-md border border-black bg-white text-black-100 text-sm hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)] transition duration-200 flex items-center gap-1"
+            rel="noopener noreferrer"
+            className="flex items-center cursor-pointer gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 transition-all duration-300"
           >
-            Linkedin
-            <FaLinkedin color="#0072b1" size={16} />
-          </a>
-        </div>
+            <FaLinkedin className="text-blue-400 w-4 h-4" />
+            <span className="text-sm text-white/90 font-light">LinkedIn</span>
+          </motion.a>
+
+          {/* Hidden for now */}
+          {/* {data.discord && (
+            <motion.a
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              href={`https://discord.com/users/${data.discord}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 transition-all duration-300"
+            >
+              <FaDiscord className="text-indigo-400 w-4 h-4" />
+              <span className="text-sm text-white/90 font-light">Discord</span>
+            </motion.a>
+          )} */}
+          
+        </motion.div>
       </div>
-    </div>
+
+      {/* hover effect */}
+      <div className="absolute inset-0 bg-gradient-to-t from-black/0 via-black/0 to-black/0 group-hover:from-black/20 group-hover:via-black/10 group-hover:to-black/20 transition-all duration-700 pointer-events-none" />
+    </motion.div>
   );
 };
 
-export default memo(MentorCard);
+export default MentorCard;
diff --git a/components/MinFooter.tsx b/components/MinFooter.tsx
new file mode 100644
index 0000000..db63e2d
--- /dev/null
+++ b/components/MinFooter.tsx
@@ -0,0 +1,38 @@
+import { socialMedia } from "@/constants/constants";
+import Image from "next/image";
+const MinFooter = () => {
+    return (
+      <div className="w-full">
+        <div className="flex mt-16 md:flex-row flex-col justify-between items-center px-10 pb-10">
+          <p className="md:text-sm text-xs md:font-normal font-light">
+            Copyright © 2024 Elixir Tech Community
+          </p>
+          <div className="flex items-center md:gap-3 gap-6 mt-4 md:mt-0">
+            {socialMedia.map((info) => (
+              <a
+                href={info.link}
+                target="_blank"
+                rel="noreferrer"
+                key={info.id}
+              >
+                <div
+                  key={info.id}
+                  className="w-10 h-10 cursor-pointer flex justify-center items-center backdrop-filter backdrop-blur-lg saturate-180 bg-opacity-75 bg-black-200 rounded-lg border border-black-300"
+                >
+                  <Image
+                    src={info.img}
+                    alt="icons"
+                    width={20}
+                    height={20}
+                    loading="lazy"
+                  />
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+};
+
+export default MinFooter;
diff --git a/components/ui/SearchBar.tsx b/components/ui/SearchBar.tsx
index bb1f841..8980a61 100644
--- a/components/ui/SearchBar.tsx
+++ b/components/ui/SearchBar.tsx
@@ -1,22 +1,23 @@
 "use client";
 
-import { useState } from "react";
-import { PlaceholdersAndVanishInput } from "../ui/placeholders-and-vanish-input";
+import { motion } from "framer-motion";
 import { MentorData } from "@/constants/constants";
+import { cn } from "@/lib/utils";
 
-export function SearchBar({ mentors = [{}], setMentorData }: { mentors: any[]; setMentorData: (data: any) => void }) {
-  const placeholders = [
-    "Search for React",
-    "Search for Frontend",
-    "Search for Backend",
-    "Search for Go",
-    "Search for Devops",
-  ];
+export function SearchBar({
+  mentors = [{}],
+  setMentorData,
+}: {
+  mentors: any[];
+  setMentorData: (data: any) => void;
+}) {
   const getFilteredMentor = (searchTerm: string) => {
     const filteredMentors = MentorData.filter((mentor) => {
       const values = Object.values(mentor);
       return values.some(
-        (value) => typeof value === "string" && value.toLowerCase().includes(searchTerm.toLowerCase()),
+        (value) =>
+          typeof value === "string" &&
+          value.toLowerCase().includes(searchTerm.toLowerCase())
       );
     });
     return filteredMentors;
@@ -24,32 +25,69 @@ export function SearchBar({ mentors = [{}], setMentorData }: { mentors: any[]; s
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const searchTerm = e.target.value;
-
     const filteredMentors = getFilteredMentor(searchTerm);
     if (searchTerm.length === 0) {
       setMentorData(MentorData);
-    } else if (filteredMentors.length === 0) {
-      setMentorData([
-        {
-          name: "No Mentors Found",
-          image: "/jsm-logo.png",
-          description: "Please try a different search term",
-          skills: "No skills found",
-        },
-      ]);
     } else {
       setMentorData(filteredMentors);
     }
   };
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (mentors[0].name === "No Mentors Found") {
-      setMentorData(MentorData);
-    }
   };
   return (
-    <div className='flex flex-col justify-center my-10 items-center px-4 w-full'>
-      <PlaceholdersAndVanishInput placeholders={placeholders} onChange={handleChange} onSubmit={onSubmit} />
+    <div className="flex flex-col justify-center my-10 items-center w-full">
+      <form
+        className={cn(
+          "md:w-7/12 relative max-w-xl mx-auto border-b-2 border-white-100 h-12 overflow-hidden shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),_0px_1px_0px_0px_rgba(25,28,33,0.02),_0px_0px_0px_1px_rgba(25,28,33,0.08)] transition duration-200"
+        )}
+        onSubmit={onSubmit}
+      >
+        <input
+          onChange={handleChange}
+          placeholder="Search React, DevOps, Go..."
+          type="text"
+          className={cn(
+            "w-full relative text-sm sm:text-base z-50 border-none dark:text-white bg-transparent text-black h-full rounded-full focus:outline-none focus:ring-0 pl-4 sm:pl-10 pr-20"
+          )}
+        />
+
+        <button
+          type="submit"
+          className="absolute right-2 top-1/2 z-50 -translate-y-1/2 h-8 w-8 rounded-full disabled:bg-gray-100 bg-black dark:bg-zinc-900 dark:disabled:bg-zinc-800 transition duration-200 flex items-center justify-center"
+        >
+          <motion.svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="text-gray-300 h-4 w-4"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <motion.path
+              d="M5 12l14 0"
+              initial={{
+                strokeDasharray: "50%",
+                strokeDashoffset: "50%",
+              }}
+              animate={{
+                strokeDashoffset: 0,
+              }}
+              transition={{
+                duration: 0.3,
+                ease: "linear",
+              }}
+            />
+            <path d="M13 18l6 -6" />
+            <path d="M13 6l6 6" />
+          </motion.svg>
+        </button>
+      </form>
     </div>
   );
 }
diff --git a/layouts/MentorPageLayout.tsx b/layouts/MentorPageLayout.tsx
index a234ce1..ef3980d 100644
--- a/layouts/MentorPageLayout.tsx
+++ b/layouts/MentorPageLayout.tsx
@@ -9,19 +9,23 @@ const MentorPageLayout = () => {
   const [mentorData, setMentorData] = useState<typeof MentorData>(MentorData);
 
   return (
-    <div className="pt-20 relative z-10">
+    <div className="pt-20 pb-10 relative z-10 w-full">
       <div className="flex flex-col items-center justify-center">
         <PageHeading longHeading="REACH OUT FOR GUIDANCE" />
-        {mentorData.length > 0 && (
-          <SearchBar setMentorData={setMentorData} mentors={mentorData} />
-        )}
+        <SearchBar setMentorData={setMentorData} mentors={mentorData} />
         <div
           className="flex flex-wrap items-center justify-center"
           style={{ gap: "80px" }}
         >
-          {mentorData.map((mentor, idx) => (
-            <MentorCard key={idx} data={mentor} />
-          ))}
+          {mentorData?.length === 0 ? (
+            <div className="flex justify-center items-center text-3xl font-bold w-[320px] py-20 rounded-3xl overflow-hidden bg-black">
+              <p className="mb-4 text-2xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">No mentors found</p>
+            </div>
+          ) : (
+            mentorData?.map((mentor, idx) => (
+              <MentorCard key={idx} data={mentor} />
+            ))
+          )}
         </div>
       </div>
     </div>
diff --git a/layouts/WrapperLayout/Server/ServerWrapperLayout.tsx b/layouts/WrapperLayout/Server/ServerWrapperLayout.tsx
index f0991ef..7bbd0b9 100644
--- a/layouts/WrapperLayout/Server/ServerWrapperLayout.tsx
+++ b/layouts/WrapperLayout/Server/ServerWrapperLayout.tsx
@@ -1,8 +1,11 @@
+"use client";
 import dynamic from "next/dynamic";
 import BackDrop from "@/components/BackDrop/BackDrop";
 import ClientWrapperLayout from "../Client/ClientWrapperLayout";
 import FloatingNavbar from "@/components/ui/FloatingNavbar";
 import { navItems } from "@/constants/constants";
+import { usePathname } from "next/navigation";
+import MinFooter from "@/components/MinFooter";
 
 const Footer = dynamic(() => import("@/components/Footer"));
 
@@ -13,13 +16,16 @@ type ServerWrapperLayoutProps = {
 export default function ServerWrapperLayout({
   children,
 }: ServerWrapperLayoutProps) {
+  const pathname = usePathname();
+  const isDashboard = pathname.startsWith("/dashboard");
+
   return (
     <section className="flex flex-col min-h-screen items-center relative overflow-hidden bg-black-100">
       <nav className="h-20 w-full flex items-center justify-center">
         <FloatingNavbar navItems={navItems} />
       </nav>
       <ClientWrapperLayout>{children}</ClientWrapperLayout>
-      <Footer />
+      {!isDashboard ? <Footer /> : <MinFooter />}
       <BackDrop />
     </section>
   );