diff --git a/components.json b/components.json
index 8c574b7..797b325 100644
--- a/components.json
+++ b/components.json
@@ -7,11 +7,13 @@
     "config": "tailwind.config.ts",
     "css": "src/app/globals.css",
     "baseColor": "slate",
-    "cssVariables": true,
+    "cssVariables": false,
     "prefix": ""
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "magicui": "@/components/magicui"
   }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 59f51fc..7b4419a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-slot": "^1.1.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "framer-motion": "^11.3.30",
         "lucide-react": "^0.436.0",
         "next": "14.2.6",
         "react": "^18",
@@ -2824,6 +2825,31 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.3.30",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.30.tgz",
+      "integrity": "sha512-9VmqGe9OIjfMoCcs+ZsKXlv6JaG5QagKX2F1uSbkG3Z33wgjnz60Kw+CngC1M49rDYau+Y9aL+8jGagAwrbVyw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index a2c9bca..b316cc4 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.3.30",
     "lucide-react": "^0.436.0",
     "next": "14.2.6",
     "react": "^18",
diff --git a/src/app/globals.css b/src/app/globals.css
index 99a7b0c..ee65b92 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,69 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a885bee..48f3d9b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,115 +1,68 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Card, CardContent, CardHeader } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-import { Menu, X } from "lucide-react"
-import AttendanceTracker from "@/components/AttendanceTracker"
-import Features from "@/components/Features"
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu"
-import Link from "next/link"
+import { useState } from 'react';
+import HomePage from '@/components/HomePage';
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
-export default function Component() {
-  const [isAttendanceTrackerOpen, setIsAttendanceTrackerOpen] = useState(false)
-  const [activeTab, setActiveTab] = useState("home")
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
+export default function Home() {
+  const [showDashboard, setShowDashboard] = useState(false);
+  const [activeTab, setActiveTab] = useState("home");
 
   const webPages = [
-    { name: "Uni-Notes", url: "https://uni-notes.netlify.app/" },
-    { name: "ERP", url: "https://erp.bits-pilani.ac.in/" },
-    { name: "ACM Library", url: "https://openlib-cs.acmbpdc.org/" },
-    { name: "GDSC Resources", url: "https://gdscbpdc.github.io" }
-  ]
+    { name: "Uni-Notes", url: "https://uninotes.com" },
+    { name: "ERP", url: "https://erp.bits-pilani.ac.in" },
+    // Add other web pages as needed
+  ];
+
+  if (!showDashboard) {
+    return <HomePage onEnter={() => setShowDashboard(true)} />;
+  }
 
   return (
     <div className="min-h-screen w-full bg-gray-100 p-2 sm:p-4 md:p-6">
       <Card className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg mb-6">
-        <CardHeader className="flex flex-col space-y-2 border-b border-gray-200 bg-gray-50 px-4 py-4">
-          <div className="flex justify-between items-center">
-            <div className="hidden md:block">
-              <NavigationMenu>
-                <NavigationMenuList>
-                  <NavigationMenuItem>
-                    <NavigationMenuTrigger onClick={() => setActiveTab("home")}>Home</NavigationMenuTrigger>
-                  </NavigationMenuItem>
-                  <NavigationMenuItem>
-                    <NavigationMenuTrigger onClick={() => setActiveTab("features")}>Features</NavigationMenuTrigger>
-                  </NavigationMenuItem>
-                  <NavigationMenuItem>
-                    <NavigationMenuLink className={navigationMenuTriggerStyle()} onClick={() => setIsAttendanceTrackerOpen(true)}>
-                      Attendance Tracker
-                    </NavigationMenuLink>
-                  </NavigationMenuItem>
-                </NavigationMenuList>
-              </NavigationMenu>
-            </div>
-            <Button variant="outline" size="icon" className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
-              {isMenuOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
-            </Button>
-            <Input className="w-full max-w-[200px]" placeholder="Search..." />
-          </div>
-          {isMenuOpen && (
-            <div className="flex flex-col space-y-2 md:hidden">
-              <Button 
-                variant={activeTab === "home" ? "default" : "outline"} 
-                onClick={() => { setActiveTab("home"); setIsMenuOpen(false); }}
-                className="w-full"
+        <CardHeader className="border-b border-gray-200 bg-gray-50 p-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-xl font-bold">University Dashboard</h2>
+            <div className="flex space-x-2">
+              <Button
+                variant={activeTab === "home" ? "default" : "outline"}
+                onClick={() => setActiveTab("home")}
               >
-                Home page
+                Home
               </Button>
-              <Button 
-                variant={activeTab === "features" ? "default" : "outline"} 
-                onClick={() => { setActiveTab("features"); setIsMenuOpen(false); }}
-                className="w-full"
+              <Button
+                variant={activeTab === "features" ? "default" : "outline"}
+                onClick={() => setActiveTab("features")}
               >
                 Features
               </Button>
-              <Button 
-                variant="outline" 
-                onClick={() => { setIsAttendanceTrackerOpen(true); setIsMenuOpen(false); }}
-                className="w-full"
-              >
-                Attendance Tracker
-              </Button>
             </div>
-          )}
+          </div>
         </CardHeader>
         <CardContent className="p-2 sm:p-4">
           {activeTab === "home" && (
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {webPages.map((page, index) => (
-                <div key={index} className="border rounded-lg overflow-hidden h-[400px] sm:h-[500px] md:h-[600px]">
-                  <h3 className="bg-gray-100 p-2 font-semibold text-sm">{page.name}</h3>
-                  <iframe 
-                    src={page.url} 
-                    title={page.name} 
-                    width="100%" 
-                    height="100%" 
-                    className="border-0"
-                  />
+                <div key={index} className="border rounded-lg p-4">
+                  <h3 className="font-semibold mb-2">{page.name}</h3>
+                  <div className="h-[400px] sm:h-[500px] md:h-[600px]">
+                    <iframe 
+                      src={page.url} 
+                      title={page.name} 
+                      width="100%" 
+                      height="100%" 
+                      className="border-0"
+                    />
+                  </div>
                 </div>
               ))}
             </div>
           )}
-          {activeTab === "features" && <Features />}
+          {activeTab === "features" && <div>Features content here</div>}
         </CardContent>
-
-        <Dialog open={isAttendanceTrackerOpen} onOpenChange={setIsAttendanceTrackerOpen}>
-          <DialogContent className="w-[90vw] max-w-[400px] sm:max-w-[600px]">
-            <AttendanceTracker />
-          </DialogContent>
-        </Dialog>
       </Card>
     </div>
-  )
+  );
 }
\ No newline at end of file
diff --git a/src/bits.png b/src/bits.png
new file mode 100644
index 0000000..cf616f0
Binary files /dev/null and b/src/bits.png differ
diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 0000000..2889c30
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Card, CardContent } from "@/components/ui/card";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+
+export default function About() {
+  return (
+    <div className="flex min-h-screen bg-gray-100">
+      {/* Left Sidebar */}
+      <aside className="w-64 bg-white p-6 shadow-md">
+        <h2 className="text-lg font-semibold mb-4">About Us</h2>
+        <nav>
+          <ul className="space-y-2">
+            <li><a href="#university" className="text-blue-600 hover:underline">Our University</a></li>
+            <li><a href="#courses" className="text-blue-600 hover:underline">Courses & Requirements</a></li>
+            <li><a href="#admissions" className="text-blue-600 hover:underline">Admissions</a></li>
+            <li><a href="#campus-life" className="text-blue-600 hover:underline">Campus Life</a></li>
+          </ul>
+        </nav>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 p-8">
+        <h1 className="text-3xl font-bold mb-6">About BITS Pilani Dubai Campus</h1>
+        
+        <section id="university" className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Our University</h2>
+          <p>BITS Pilani Dubai Campus is a premier institution of higher education known for its excellence in engineering and technology. As part of the renowned BITS Pilani network, we offer world-class education with a focus on innovation and practical learning.</p>
+        </section>
+
+        <section id="courses" className="mb-8">
+          <h2 className="text-2xl font-semibold mb-4">Courses & Requirements</h2>
+          <Accordion type="single" collapsible>
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Core Subjects and Electives</AccordionTrigger>
+              <AccordionContent>
+                <ul className="list-disc pl-5 space-y-2">
+                  <li><strong>Core Subjects:</strong> All core subjects must be completed by the end of the graduation program.</li>
+                  <li><strong>Humanities Electives:</strong> Three humanities electives are required.</li>
+                  <li><strong>Discipline Electives:</strong> Five discipline electives are required.</li>
+                  <li><strong>Open Electives:</strong> Five open electives are required.</li>
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+              <AccordionTrigger>Design Projects</AccordionTrigger>
+              <AccordionContent>
+                <p>It is recommended to incorporate more design projects starting in the second or third year to reduce workload in the fourth year.</p>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3">
+              <AccordionTrigger>Degree Programs</AccordionTrigger>
+              <AccordionContent>
+                <ul className="list-disc pl-5 space-y-2">
+                  <li>B.E. Computer Science</li>
+                  <li>B.E. Electrical and Electronics Engineering</li>
+                  <li>B.E. Mechanical Engineering</li>
+                  <li>B.E. Biotechnology</li>
+                  <li>B.E. Software Systems</li>
+                  <li>B.E. Microelectronics</li>
+                  <li>Executive MBA</li>
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </section>
+      </main>
+
+      {/* Right Sidebar */}
+      <aside className="w-64 bg-white p-6 shadow-md">
+        <h2 className="text-lg font-semibold mb-4">On this page</h2>
+        <nav>
+          <ul className="space-y-2">
+            <li><a href="#university" className="text-gray-600 hover:text-blue-600">Our University</a></li>
+            <li><a href="#courses" className="text-gray-600 hover:text-blue-600">Courses & Requirements</a></li>
+            <li><a href="#admissions" className="text-gray-600 hover:text-blue-600">Admissions</a></li>
+            <li><a href="#campus-life" className="text-gray-600 hover:text-blue-600">Campus Life</a></li>
+          </ul>
+        </nav>
+      </aside>
+    </div>
+  );
+}
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index c05d5e5..5f6c91c 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -4,6 +4,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion"
+import { Button } from "@/components/ui/button"
 
 export default function Features() {
   return (
@@ -12,18 +13,27 @@ export default function Features() {
         <AccordionTrigger>Attendance Tracking</AccordionTrigger>
         <AccordionContent>
           Easily track and manage student attendance with our intuitive interface.
+          <Button className="mt-2" variant="outline">
+            Learn More
+          </Button>
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-2">
         <AccordionTrigger>Course Management</AccordionTrigger>
         <AccordionContent>
           Organize and manage courses, including schedules, materials, and assignments.
+          <Button className="mt-2" variant="outline">
+            Learn More
+          </Button>
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-3">
         <AccordionTrigger>Grade Book</AccordionTrigger>
         <AccordionContent>
           Record and calculate grades, generate reports, and share progress with students.
+          <Button className="mt-2" variant="outline">
+            Learn More
+          </Button>
         </AccordionContent>
       </AccordionItem>
       {/* Add more AccordionItems for additional features */}
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
new file mode 100644
index 0000000..dd31869
--- /dev/null
+++ b/src/components/HomePage.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from 'react';
+import { Button } from "@/components/ui/button";
+import Link from 'next/link';
+import DotPattern from "@/components/magicui/dot-pattern"; // Adjust the import path as needed
+
+interface HomePageProps {
+  onEnter: () => void;
+}
+
+const HomePage: React.FC<HomePageProps> = ({ onEnter }) => {
+  return (
+    <div className="relative min-h-screen bg-white overflow-hidden">
+      {/* Dot pattern background */}
+      <div className="absolute inset-0 z-0">
+        <DotPattern />
+      </div>
+      
+      {/* Main Content */}
+      <div className="relative z-10">
+        {/* Header */}
+        <header className="flex justify-between items-center p-4 bg-white bg-opacity-80">
+          <h1 className="text-2xl font-bold">UniDash</h1>
+          <nav>
+            <ul className="flex space-x-4 items-center">
+              <li><Link href="/about" className="text-gray-600 hover:text-black">About Us</Link></li>
+              <li><Link href="/attendance-tracker" className="text-gray-600 hover:text-black">Attendance Tracker</Link></li>
+            </ul>
+          </nav>
+        </header>
+
+        <main className="flex flex-col items-center justify-center h-[calc(100vh-80px)]">
+          <div className="text-center mb-8 bg-white bg-opacity-80 p-8 rounded-lg">
+            <h2 className="text-5xl font-bold mb-4">All University Resources in a Single Place</h2>
+            <p className="text-xl text-gray-600 mb-8">
+              Quickly access course materials, campus services, and academic tools. 
+              Stay organized and save time with UniDash.
+            </p>
+            <Button size="lg" className="bg-black text-white hover:bg-gray-800" onClick={onEnter}>
+              Go to UniDash
+            </Button>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
\ No newline at end of file
diff --git a/src/components/magicui/dot-pattern.tsx b/src/components/magicui/dot-pattern.tsx
new file mode 100644
index 0000000..ea42a5e
--- /dev/null
+++ b/src/components/magicui/dot-pattern.tsx
@@ -0,0 +1,56 @@
+import { useId } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface DotPatternProps {
+  width?: any;
+  height?: any;
+  x?: any;
+  y?: any;
+  cx?: any;
+  cy?: any;
+  cr?: any;
+  className?: string;
+  [key: string]: any;
+}
+export function DotPattern({
+  width = 16,
+  height = 16,
+  x = 0,
+  y = 0,
+  cx = 1,
+  cy = 1,
+  cr = 1,
+  className,
+  ...props
+}: DotPatternProps) {
+  const id = useId();
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80",
+        className,
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          patternContentUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <circle id="pattern-circle" cx={cx} cy={cy} r={cr} />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+    </svg>
+  );
+}
+
+export default DotPattern;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 84287e8..ca64324 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,7 +7,7 @@ const config = {
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',
-	],
+  ],
   prefix: "",
   theme: {
     container: {
@@ -18,46 +18,6 @@ const config = {
       },
     },
     extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
       keyframes: {
         "accordion-down": {
           from: { height: "0" },