diff --git a/package-lock.json b/package-lock.json
index 395786c..a9e2926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,9 +75,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.7.tgz",
-      "integrity": "sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2227,9 +2227,9 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -4840,9 +4840,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 29056ca..d02db44 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -21,7 +21,7 @@ export default function Dashboard() {
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
           >
             <p className="text-xl sm:text-2xl">Events</p>
-            <span className="text-6xl text-blue-500 sm:text-[120px]">
+            <span className="text-blue-500 text-6xl sm:text-[120px]">
               <FaCalendarAlt />
             </span>
             <p className="text-center text-sm sm:text-base">
@@ -33,7 +33,7 @@ export default function Dashboard() {
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
           >
             <p className="text-xl sm:text-2xl">Projects</p>
-            <span className="text-6xl text-blue-500 sm:text-[120px]">
+            <span className="text-blue-500 text-6xl sm:text-[120px]">
               <BsPcDisplay />
             </span>
             <p className="text-center text-sm sm:text-base">
@@ -45,7 +45,7 @@ export default function Dashboard() {
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
           >
             <p className="text-xl sm:text-2xl">Inventory</p>
-            <span className="text-6xl text-blue-500 sm:text-[120px]">
+            <span className="text-blue-500 text-6xl sm:text-[120px]">
               <FaBoxOpen />
             </span>
             <p className="text-center text-sm sm:text-base">
@@ -57,7 +57,7 @@ export default function Dashboard() {
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
           >
             <p className="text-xl sm:text-2xl">Analytics</p>
-            <span className="text-6xl text-blue-500 sm:text-[120px]">
+            <span className="text-blue-500 text-6xl sm:text-[120px]">
               <FaChartLine />
             </span>
             <p className="text-center text-sm sm:text-base">
diff --git a/src/app/globals.css b/src/app/globals.css
index 1a67f4b..e29e79b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -16,7 +16,8 @@ textarea {
 }
 
 body {
-  font-family: "Space Grotesk", serif !important;
+  /* font-family: "Space Grotesk", serif !important; */
+  font-family: "Space Mono", serif;
   background-color: #ffffff;
   overflow-x: hidden;
 }
@@ -76,25 +77,41 @@ body {
   filter: blur(20px);
 }
 
-
-/*  monospace font - will update later */
-
-.m {
-  font-family: "Space Mono", serif; 
-}
-
 /* fade background of hero */
 
-
 .hero-btn:hover {
   /* Apply a full (all-around) shadow with #79C7FD */
   box-shadow: 0 0 20px 5px rgba(121, 199, 253, 0.7);
 }
 
 .hero-fade {
-  background: linear-gradient(180deg,#080d1400 0%, #080d14 100%);
+  background: linear-gradient(180deg, #080d1400 0%, #080d14 100%);
 }
 
 .about-fade {
-    background: linear-gradient(0deg,#080d1400 0%, #080d14 100%);
-}
\ No newline at end of file
+  background: linear-gradient(0deg, #080d1400 0%, #080d14 100%);
+}
+
+/* Custom minimalist scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(59, 130, 246, 0.2);
+  border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(59, 130, 246, 0.5);
+}
+
+/* Firefox */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(59, 130, 246, 0.2) transparent;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 13708ca..4b40498 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,14 +5,13 @@ import Events from "@/components/landing/Events";
 import Faq from "@/components/landing/Faq";
 import Hero from "@/components/landing/Hero";
 
-
 const Website = () => {
   return (
     <div className="min-h-screen w-full bg-[#080d14] text-white">
       <Hero />
-      <About/>
-      <Events/>
-      <Faq/>
+      <About />
+      <Events />
+      <Faq />
       <Footer />
     </div>
   );
diff --git a/src/components/Buttons/BackButton.tsx b/src/components/Buttons/BackButton.tsx
index a20c583..4dfc440 100644
--- a/src/components/Buttons/BackButton.tsx
+++ b/src/components/Buttons/BackButton.tsx
@@ -13,12 +13,12 @@ const BackButton: React.FC = () => {
   return (
     <button
       onClick={handleBack}
-      className="flex items-center gap-2 rounded-md bg-blue-500 px-4 py-2 text-white transition-all hover:bg-blue-600 active:bg-blue-800"
+      className="bg-blue-500 hover:bg-blue-600 active:bg-blue-800 flex items-center gap-2 rounded-md px-4 py-2 transition-all"
     >
       <span className="sm:text-lg">
         <FaLongArrowAltLeft />
       </span>
-     <span className="text-sm sm:text-base">Back</span>
+      <span className="text-sm sm:text-base">Back</span>
     </button>
   );
 };
diff --git a/src/components/Navbar/Sidebar.tsx b/src/components/Navbar/Sidebar.tsx
index f314e2e..44635ca 100644
--- a/src/components/Navbar/Sidebar.tsx
+++ b/src/components/Navbar/Sidebar.tsx
@@ -10,6 +10,7 @@ import {
   ChevronLeft,
   Calendar,
   PackageOpen,
+  ChartLine,
 } from "lucide-react";
 
 interface SidebarProps {
@@ -30,8 +31,9 @@ const Sidebar: React.FC<SidebarProps> = ({
     { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
     { name: "Events", href: "/dashboard/events", icon: Calendar },
     { name: "Projects", href: "/dashboard/projects", icon: FileText },
-    { name: "Inventory", href: "/dashboard/inventory", icon: PackageOpen },
-    { name: "Settings", href: "/dashboard/settings", icon: Settings },
+    // { name: "Inventory", href: "/dashboard/inventory", icon: PackageOpen },
+    // { name: "Settings", href: "/dashboard/settings", icon: Settings },
+    { name: "Analytics", href: "/dashboard/analytics", icon: ChartLine },
   ];
 
   const isLinkActive = (href: string) => pathname === href;
@@ -42,7 +44,7 @@ const Sidebar: React.FC<SidebarProps> = ({
       {!isMobileMenuOpen && (
         <button
           onClick={() => setIsMobileMenuOpen(true)}
-          className="fixed -left-1 top-2.5 z-50 rounded-md bg-gray-700 p-2 text-white hover:bg-gray-600 lg:hidden text-sm"
+          className="fixed -left-1 top-2.5 z-50 rounded-md bg-gray-700 p-2 text-sm text-white hover:bg-gray-600 lg:hidden"
         >
           <span>Admin</span>
         </button>
diff --git a/src/components/admin/events/EditEventsForm.tsx b/src/components/admin/events/EditEventsForm.tsx
index 9c31b73..fd8abe6 100644
--- a/src/components/admin/events/EditEventsForm.tsx
+++ b/src/components/admin/events/EditEventsForm.tsx
@@ -10,11 +10,11 @@ import toast from "react-hot-toast";
 import { LuLoader2, LuX } from "react-icons/lu";
 import EventForm from "./EventForm";
 
-type EditEventFormProps  = {
-  month: Date
-}
+type EditEventFormProps = {
+  month: Date;
+};
 
-export default function EditEventsForm({month} : EditEventFormProps) {
+export default function EditEventsForm({ month }: EditEventFormProps) {
   const { data: events, isLoading, isError, error } = useCachedEvents(month);
   const [selectedEvent, setSelectedEvent] = useState<FirebaseEvent | null>(
     null,
@@ -85,7 +85,7 @@ export default function EditEventsForm({month} : EditEventFormProps) {
 
   if (isLoading) {
     return (
-      <div className="flex pt-20 items-center justify-center">
+      <div className="flex items-center justify-center pt-20">
         <span className="animate-spin text-5xl text-gray-800">
           <LuLoader2 />
         </span>
@@ -150,7 +150,7 @@ export default function EditEventsForm({month} : EditEventFormProps) {
       )}
       {showEditForm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 px-3 backdrop-blur-sm">
-          <div className="max-h-[80vh] w-full max-w-2xl overflow-auto rounded-lg bg-white py-6 px-5">
+          <div className="max-h-[80vh] w-full max-w-2xl overflow-auto rounded-lg bg-white px-5 py-6">
             <div className="flex justify-between">
               <p className="text-2xl font-medium">Edit Event</p>
               <span
diff --git a/src/components/admin/events/Event.tsx b/src/components/admin/events/Event.tsx
index 319e3de..c6bf00b 100644
--- a/src/components/admin/events/Event.tsx
+++ b/src/components/admin/events/Event.tsx
@@ -13,21 +13,21 @@ const Event: React.FC<EventProps> = ({ event, onDeleteClick, onEditClick }) => {
   const { date, time } = formatTimestampToDateTime(event.time);
 
   return (
-    <div className="flex items-center justify-between rounded-md border p-4 bg-white gap-4">
+    <div className="flex items-center justify-between gap-4 rounded-md border bg-white p-4">
       <div className="flex items-end gap-4">
-        <p className="font-bold text-sm sm:text-base">{event.title}</p>
-        <p className="text-sm hidden md:inline-block">{date}</p>
-        <p className="text-sm hidden md:inline-block">{time}</p>
+        <p className="text-sm font-bold sm:text-base">{event.title}</p>
+        <p className="hidden text-sm md:inline-block">{date}</p>
+        <p className="hidden text-sm md:inline-block">{time}</p>
       </div>
       <div className="flex gap-2">
         <button
-          className="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600 text-sm sm:text-base"
+          className="bg-blue-500 hover:bg-blue-600 rounded px-4 py-2 text-sm transition-colors sm:text-base"
           onClick={() => onEditClick(event, date, time)}
         >
           Edit
         </button>
         <button
-          className="flex items-center gap-2 rounded bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600 text-sm sm:text-base"
+          className="flex items-center gap-2 rounded bg-red-500 px-4 py-2 text-sm text-white transition-colors hover:bg-red-600 sm:text-base"
           onClick={() => onDeleteClick(event)}
         >
           <Trash2 size={18} />
diff --git a/src/components/admin/events/EventForm.tsx b/src/components/admin/events/EventForm.tsx
index d5c95af..5943c80 100644
--- a/src/components/admin/events/EventForm.tsx
+++ b/src/components/admin/events/EventForm.tsx
@@ -28,11 +28,7 @@ interface EventFormProps {
   id?: string;
 }
 
-export default function EventForm({
-  initialData,
-  mode,
-  id,
-}: EventFormProps) {
+export default function EventForm({ initialData, mode, id }: EventFormProps) {
   const [formData, setFormData] = useState<EventFormData>(
     initialData || emptyFormState,
   );
@@ -113,7 +109,7 @@ export default function EventForm({
       await updateDoc(eventRef, eventData);
 
       toast.dismiss(loadingToast);
-     
+
       toast.success("Event updated successfully!", {
         duration: 3000,
         icon: "🎉",
@@ -187,7 +183,10 @@ export default function EventForm({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="mt-6 sm:mt-8 flex w-full flex-col gap-4">
+    <form
+      onSubmit={handleSubmit}
+      className="mt-6 flex w-full flex-col gap-4 sm:mt-8"
+    >
       <div>
         <label htmlFor="" className="text-sm font-medium">
           Title
@@ -233,7 +232,7 @@ export default function EventForm({
           <input
             type="date"
             name="date"
-            className="mt-2 block w-full cursor-pointer rounded-md border p-2 min-h-11"
+            className="mt-2 block min-h-11 w-full cursor-pointer rounded-md border p-2"
             onFocus={handleFocus}
             onChange={handleChange}
             value={formData.date}
@@ -246,7 +245,7 @@ export default function EventForm({
           <input
             type="time"
             name="time"
-            className="mt-2 block w-full cursor-pointer rounded-md border p-2 "
+            className="mt-2 block w-full cursor-pointer rounded-md border p-2"
             onFocus={handleFocus}
             onChange={handleChange}
             value={formData.time}
@@ -282,7 +281,7 @@ export default function EventForm({
       </div>
       <button
         type="submit"
-        className="mt-2 rounded-md bg-blue-500 p-2 text-white"
+        className="mt-2 rounded-md bg-green-500 p-2 text-white"
       >
         {mode === "create" ? "Create" : "Edit"} Event
       </button>
diff --git a/src/components/admin/projects/EditForm.tsx b/src/components/admin/projects/EditForm.tsx
index a35fb5f..91e3b83 100644
--- a/src/components/admin/projects/EditForm.tsx
+++ b/src/components/admin/projects/EditForm.tsx
@@ -206,7 +206,7 @@ export default function EditForm() {
               <div className="flex gap-2">
                 <button
                   onClick={() => handleEditClick(project)}
-                  className="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
+                  className="bg-blue-500 hover:bg-blue-600 rounded bg-gray-300 px-4 py-2 transition-colors"
                 >
                   Edit
                 </button>
diff --git a/src/components/landing/About.tsx b/src/components/landing/About.tsx
index 7f3fd3b..9f6ebae 100644
--- a/src/components/landing/About.tsx
+++ b/src/components/landing/About.tsx
@@ -36,12 +36,11 @@ const About: React.FC = () => {
   const isInView = useInView(h3Ref, { once: true });
 
   return (
-    <div className="pb-20 pt-16 sm:pt-32 max-w-7xl mx-auto px-10 overflow-hidden relative">
-      <div className="about-fade absolute left-0 right-0 top-0 h-10 z-20" />
+    <div className="relative mx-auto max-w-7xl overflow-hidden px-10 pt-16 sm:pt-32">
       <motion.img
         src="/landing/tube.png"
         alt=""
-        className={`hidden sm:block absolute -top-48 z-0 left-1/2 -translate-x-1/2 overflow-hidden transition-all ${
+        className={`absolute -top-64 left-1/2 z-0 hidden -translate-x-1/2 overflow-hidden transition-all sm:block ${
           isInView ? "scale-x-100" : "scale-x-[0.25]"
         } duration-1000`}
         initial={{ opacity: 0 }}
@@ -50,7 +49,10 @@ const About: React.FC = () => {
       />
 
       <div className="relative z-10">
-        <h3 ref={h3Ref} className="text-[40px] font-medium pb-6 sm:pb-10 text-center">
+        <h3
+          ref={h3Ref}
+          className="pb-6 text-center text-[40px] font-medium sm:pb-10"
+        >
           Why SPCB?
         </h3>
         <ul>
@@ -69,18 +71,18 @@ interface AboutItemProps {
 
 const AboutItem: React.FC<AboutItemProps> = ({ info }) => {
   return (
-    <li className="py-12 sm:py-16 border-b border-[#1a2a3d] gap-8 grid md:grid-cols-2">
-      <div className="flex flex-col items-center text-center md:text-left md:items-start justify-between gap-3 sm:gap-4">
-        <p className="text-3xl sm:text-4xl lg:text-4xl leading-[1.2] xl:leading-[1.2] balance max-w-[320px] sm:max-w-[410px]">
+    <li className="grid gap-8 border-b border-[#1a2a3d] py-12 sm:py-16 md:grid-cols-2">
+      <div className="flex flex-col items-center justify-between gap-3 text-center sm:gap-4 md:items-start md:text-left">
+        <p className="balance max-w-[320px] text-3xl leading-[1.2] sm:max-w-[410px] sm:text-4xl lg:text-4xl xl:leading-[1.2]">
           {info.title}
         </p>
-        <p className="text-lg lg:text-xl text-dull max-w-[445px] text-balance">
+        <p className="max-w-[445px] text-balance text-lg text-dull lg:text-xl">
           {info.desc}
         </p>
       </div>
 
       <div className="flex justify-center md:justify-end">
-        <div className="bg-[#090f1a] border border-[#1a2a3d] rounded-xl w-full max-w-96 aspect-square overflow-hidden">
+        <div className="aspect-square w-full max-w-96 overflow-hidden rounded-xl border border-[#1a2a3d] bg-[#090f1a]">
           {info.children}
         </div>
       </div>
diff --git a/src/components/landing/Events.tsx b/src/components/landing/Events.tsx
index e7a2c2d..8ae0cc5 100644
--- a/src/components/landing/Events.tsx
+++ b/src/components/landing/Events.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import GlowingLine from "../decorations/GlowingLine";
 
-
 const Events: React.FC = () => {
   const [isDesktop, setIsDesktop] = useState<boolean>(false);
 
@@ -17,10 +16,12 @@ const Events: React.FC = () => {
   }, []);
 
   return (
-    <div className="relative pt-16 sm:pt-28 overflow-x-hidden overflow-y-hidden pb-40">
+    <div className="relative overflow-x-hidden overflow-y-hidden pb-40 pt-16 sm:pt-28">
       {/* Background Gradients */}
 
-      <h3 className="text-center text-[40px] font-medium mb-36">Popular Events</h3>
+      <h3 className="mb-36 text-center text-[40px] font-medium">
+        Popular Events
+      </h3>
 
       {/* Activities Section */}
       <div className="relative min-h-screen w-full">
@@ -90,7 +91,7 @@ const Events: React.FC = () => {
         />
 
         {/* Content Cards */}
-        <div className="relative mx-auto max-w-7xl px-4 overflow-hidden">
+        <div className="relative mx-auto max-w-7xl overflow-hidden px-4">
           {/* Socials Card */}
           <motion.div
             className="relative left-[10%] mb-32 mt-32 w-2/3 sm:w-[35%]"
@@ -99,7 +100,7 @@ const Events: React.FC = () => {
             transition={{ duration: 0.7, ease: "easeOut" }}
             viewport={{ once: true, amount: 0.2 }}
           >
-            <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black border border-[#1a2a3d] to-blue-900/50">
+            <div className="to-blue-900/50 overflow-hidden rounded-lg border border-[#1a2a3d] bg-gradient-to-b from-black">
               <div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
                 <img
                   src="/landing/images/socials.jpg"
@@ -118,14 +119,14 @@ const Events: React.FC = () => {
 
           {/* GBMs Card */}
           <motion.div
-            className="relative left-[40%] mt-44 sm:mt-32 sm:left-[55%] mb-32 w-2/3 sm:w-[35%]"
+            className="relative left-[35%] mb-32 mt-44 w-2/3 sm:left-[55%] sm:mt-32 sm:w-[35%]"
             initial={{ opacity: 0, y: 80 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7, ease: "easeOut" }}
             viewport={{ once: true, amount: 0.2 }}
           >
             <a href="/events">
-              <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black border border-[#1a2a3d] to-blue-900/50 transition-transform duration-200 hover:scale-105">
+              <div className="to-blue-900/50 overflow-hidden rounded-lg border border-[#1a2a3d] bg-gradient-to-b from-black transition-transform duration-200 hover:scale-105">
                 <div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
                   <img
                     src="/landing/images/gbms.jpg"
@@ -152,7 +153,7 @@ const Events: React.FC = () => {
             viewport={{ once: true, amount: 0.2 }}
           >
             <a href="/projects">
-              <div className="overflow-hidden rounded-lg bg-gradient-to-b from-black border border-[#1a2a3d] to-blue-900/50 transition-transform duration-200 hover:scale-105">
+              <div className="to-blue-900/50 overflow-hidden rounded-lg border border-[#1a2a3d] bg-gradient-to-b from-black transition-transform duration-200 hover:scale-105">
                 <div className="relative aspect-video w-full overflow-hidden rounded-t-lg">
                   <img
                     src="/landing/images/pc-builds.jpg"
diff --git a/src/components/landing/Faq.tsx b/src/components/landing/Faq.tsx
index 62205ed..9639fc0 100644
--- a/src/components/landing/Faq.tsx
+++ b/src/components/landing/Faq.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Monitor from "./ui/Monitor";
 
 interface FAQ {
@@ -25,23 +25,36 @@ const faqs: FAQ[] = [
 ];
 
 export default function Faq(): JSX.Element {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkIfMobile = () => {
+      setIsMobile(window.innerWidth < 620);
+    };
+    checkIfMobile();
+    window.addEventListener("resize", checkIfMobile);
+    return () => window.removeEventListener("resize", checkIfMobile);
+  }, []);
+
   return (
-    <div className="relative mx-auto max-w-7xl pb-14 pt-16 sm:pt-28 px-6 sm:px-10">
-      <h3 className="text-center text-3xl sm:text-[40px] font-medium">
+    <div className="relative mx-auto max-w-7xl px-6 pb-14 pt-16 sm:px-10 sm:pt-28">
+      <h3 className="text-center text-3xl font-medium sm:text-[40px]">
         Frequently Asked Questions
       </h3>
 
-      <div className="grid lg:grid-cols-2 gap-16 sm:gap-24 lg:gap-12 pt-16 sm:pt-24">
+      <div className="grid gap-16 pt-16 sm:gap-24 sm:pt-24 lg:grid-cols-2 lg:gap-12">
         <div className="grid gap-12">
           {faqs.map((faq, i) => (
             <Item faq={faq} i={i} key={faq.question} />
           ))}
         </div>
-        <div className="relative z-10 flex justify-center lg:justify-end min-h-[400px] mb-12 sm:pb-0">
-          <div className="absolute sm:block">
-          <Monitor />
+        {!isMobile && (
+          <div className="relative z-10 mb-12 flex min-h-[400px] justify-center sm:pb-0 lg:justify-end">
+            <div className="absolute sm:block">
+              <Monitor />
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 6ce4c17..175c4ef 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -11,7 +11,7 @@ export default function Hero() {
   const [contentVisible, setContentVisible] = useState<boolean>(false);
   const discordCount = useDiscordCount();
   return (
-    <div className="relative min-h-[920px] overflow-hidden pb-16 sm:pb-24 pt-32 md:pt-44 text-white">
+    <div className="relative min-h-[920px] overflow-hidden pb-16 pt-32 text-white sm:pb-24 md:pt-44">
       <Image
         src="/hero/lights.png"
         alt="Lights Background"
@@ -25,13 +25,13 @@ export default function Hero() {
         className="absolute left-0 top-0 z-[12] object-cover opacity-[0.012]"
       />
       <div className="hero-fade absolute bottom-0 left-0 right-0 z-[13] h-10" />
-      <div className="relative mx-auto flex flex-col lg:grid max-w-7xl px-6 sm:px-10 lg:grid-cols-5 w-full">
+      <div className="relative mx-auto flex w-full max-w-7xl flex-col px-6 sm:px-10 lg:grid lg:grid-cols-5">
         <div className="relative z-40 col-span-3">
           <div className="min-h-9 sm:min-h-12">
             <AnimatePresence>
               {contentVisible && (
                 <motion.p
-                  className="text-lg sm:text-2xl text-dull text-balance pb-2 sm:pb-4"
+                  className="text-balance pb-2 text-lg text-dull sm:pb-4 sm:text-2xl"
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: 10 }}
@@ -43,7 +43,7 @@ export default function Hero() {
             </AnimatePresence>
           </div>
 
-          <h1 className="text-2xl sm:text-4xl xl:text-[40px] font-semibold md:leading-[1.42] xl:leading-[1.42]">
+          <h1 className="text-2xl font-semibold sm:text-4xl md:leading-[1.42] xl:text-[40px] xl:leading-[1.42]">
             <AnimatedText
               text={
                 "A community for students to build PCs, expand their skills, and form meaningful connections."
@@ -56,19 +56,23 @@ export default function Hero() {
           <AnimatePresence>
             {contentVisible && (
               <motion.div
-                className="flex flex-col sm:flex-row gap-4 pt-4 font-medium text-sm sm:text-base"
+                className="flex flex-col gap-4 pt-4 text-sm font-medium sm:flex-row sm:text-base"
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: 10 }}
                 transition={{ duration: 0.5, delay: 0.1 }}
               >
-                <a href="https://linktr.ee/pcbuildinguf" target="_blank" className="flex items-center gap-2 rounded-lg bg-blue px-8 py-2.5 text-black justify-center hero-btn transition-all duration-300">
+                <a
+                  href="https://linktr.ee/pcbuildinguf"
+                  target="_blank"
+                  className="hero-btn flex items-center justify-center gap-2 rounded-lg bg-blue px-8 py-2.5 text-black transition-all duration-300"
+                >
                   Get Involved <FaArrowRightLong />
                 </a>
                 <a
                   href="https://discord.gg/CmqKbnBDBG"
                   target="_blank"
-                  className="flex items-center gap-3 rounded-lg px-8 py-2.5 transition-all bg-blue hover:bg-opacity-20 justify-center bg-opacity-20 sm:bg-opacity-0"
+                  className="flex items-center justify-center gap-3 rounded-lg bg-blue bg-opacity-20 px-8 py-2.5 transition-all hover:bg-opacity-20 sm:bg-opacity-0"
                 >
                   Join {discordCount} Discord Members{" "}
                   <FaDiscord className="text-lg" />
@@ -107,7 +111,7 @@ export default function Hero() {
                   />
                   <p className="opacity-70">+ More!</p>
                 </div>
-                <LogoCarousel/>
+                <LogoCarousel />
               </motion.div>
             )}
           </AnimatePresence>
@@ -129,13 +133,13 @@ const HeroImages: React.FC<HeroImagesProps> = ({ contentVisible }) => {
       <AnimatePresence>
         {contentVisible && (
           <motion.div
-            className="relative z-40 col-span-2 sm:hidden flex-col items-end pt-6 lg:flex"
+            className="relative z-40 col-span-2 flex-col items-end pt-6 sm:hidden lg:flex"
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 10 }}
             transition={{ duration: 0.5, delay: 0.3 }}
           >
-            <div className="mb-4 flex gap-2 sm:gap-4 justify-center lg:justify-start ">
+            <div className="mb-4 flex justify-center gap-2 sm:gap-4 lg:justify-start">
               <motion.img
                 src="/hero/h1.png"
                 alt=""
@@ -153,7 +157,7 @@ const HeroImages: React.FC<HeroImagesProps> = ({ contentVisible }) => {
                 transition={{ duration: 0.5, delay: 0.3 }}
               />
             </div>
-            <div className="mb-4 flex gap-2 sm:gap-4 justify-center lg:justify-start">
+            <div className="mb-4 flex justify-center gap-2 sm:gap-4 lg:justify-start">
               <motion.img
                 src="/hero/h3.png"
                 alt=""
@@ -163,7 +167,7 @@ const HeroImages: React.FC<HeroImagesProps> = ({ contentVisible }) => {
                 transition={{ duration: 0.5, delay: 0.4 }}
               />
             </div>
-            <div className="flex gap-2 sm:gap-4 justify-center lg:justify-start">
+            <div className="flex justify-center gap-2 sm:gap-4 lg:justify-start">
               <motion.img
                 src="/hero/h4.png"
                 alt=""
@@ -188,7 +192,7 @@ const HeroImages: React.FC<HeroImagesProps> = ({ contentVisible }) => {
         <AnimatePresence>
           {contentVisible && (
             <motion.div
-              className="relative z-40  w-full flex-wrap gap-4 pt-6 hidden sm:flex lg:hidden"
+              className="relative z-40 hidden w-full flex-wrap gap-4 pt-6 sm:flex lg:hidden"
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: 10 }}
diff --git a/src/components/projects/ProjectModal.tsx b/src/components/projects/ProjectModal.tsx
index e72d565..69cd273 100644
--- a/src/components/projects/ProjectModal.tsx
+++ b/src/components/projects/ProjectModal.tsx
@@ -1,6 +1,15 @@
 import { useState, useRef, useEffect } from "react";
 import { Project } from "@/types/project";
-import { X } from "lucide-react";
+import {
+  X,
+  MonitorPlay,
+  Camera,
+  Info,
+  Cpu,
+  Users,
+  Calendar,
+} from "lucide-react";
+import { Timestamp } from "firebase/firestore";
 
 interface ProjectModalProps {
   project: Project;
@@ -30,77 +39,132 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
     };
   }, [onClose]);
 
+  const formatDate = (date: Timestamp) => {
+    return new Date(
+      date.toDate().getTime() - date.toDate().getTimezoneOffset() * 60000,
+    ).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  // Define tab icons
+  const tabIcons = {
+    description: <Info size={18} />,
+    specs: <Cpu size={18} />,
+    builders: <Users size={18} />,
+  };
+
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/90 p-4 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85 p-4"
       onClick={() => onClose()}
     >
       <div
-        className="relative my-4 h-[85vh] w-full max-w-6xl overflow-y-auto overflow-x-hidden rounded-xl bg-[#080d14] text-white shadow-white-glow"
+        ref={modalRef}
+        className="relative my-4 h-[85vh] w-full max-w-5xl overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-[#0a101c] to-[#080d14] text-white shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
-        {/* Noise background */}
-        <div className="absolute inset-0 opacity-30" />
-
         {/* Close button */}
         <button
           onClick={onClose}
-          className="absolute right-4 top-4 z-10 rounded-full bg-white/10 p-2 text-white/80 backdrop-blur-md transition-all hover:bg-white/20 hover:text-white"
+          className="absolute right-4 top-4 z-10 rounded-full bg-black/30 p-2 text-white/90 hover:bg-black/50 hover:text-white"
+          aria-label="Close modal"
         >
           <X size={20} />
         </button>
 
         <div className="flex h-full flex-col md:flex-row">
-          {/* Left side - Image */}
-          <div className="h-[300px] w-full md:h-full md:w-1/2">
+          {/* Left side - Image with title overlay and buttons at bottom */}
+          <div className="relative h-[250px] md:h-full md:w-2/5">
             <div className="relative h-full">
               <img
                 src={project.Image}
                 alt={project.Title}
                 className="h-full w-full object-cover"
               />
-              {/* Gradient overlay */}
-              <div className="absolute inset-0 hidden bg-gradient-to-r from-transparent to-[#080d14] md:block" />
-            </div>
-          </div>
 
-          {/* Right side - Content */}
-          <div className="relative flex w-full flex-col p-8 md:w-1/2">
-            <h2 className="text-3xl font-bold tracking-tight">
-              {project.Title}
-            </h2>
-            <div className="flex items-center justify-between">
-              <p className="mt-2 font-medium text-blue-400">
-                {project.semester.term} {project.semester.year}
-              </p>
-              <p className="text-gray-400">
-                Built on{" "}
-                {new Date(
-                  project.buildDate.toDate().getTime() -
-                    project.buildDate.toDate().getTimezoneOffset() * 60000,
-                ).toLocaleDateString()}
-              </p>
+              {/* Gradient overlays for text readability */}
+              <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-black/70" />
+
+              {/* Title and info at the top */}
+              <div className="absolute inset-x-0 top-0 p-6">
+                <h2 className="text-xl font-bold tracking-tight text-white drop-shadow-md md:text-2xl">
+                  {project.Title}
+                </h2>
+
+                <div className="mt-2 flex flex-wrap items-center gap-3 text-xs md:text-sm">
+                  <div className="text-blue-300 flex items-center gap-1.5">
+                    <Calendar size={14} />
+                    <span className="font-medium">
+                      {project.semester.term} {project.semester.year}
+                    </span>
+                  </div>
+
+                  <div className="flex items-center gap-1.5 text-gray-200">
+                    <span>Built on {formatDate(project.buildDate)}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action buttons at bottom */}
+              <div className="absolute inset-x-0 bottom-0 flex gap-2 p-4">
+                <a
+                  href={project.Youtube}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-300 flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 hover:bg-black/70"
+                >
+                  <MonitorPlay size={14} />
+                  <span className="text-xs font-medium md:text-sm">
+                    Watch Stream
+                  </span>
+                </a>
+                <a
+                  href={project.Photos}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-300 flex items-center gap-2 rounded-lg bg-black/50 px-3 py-2 hover:bg-black/70"
+                >
+                  <Camera size={14} />
+                  <span className="text-xs font-medium md:text-sm">
+                    View Photos
+                  </span>
+                </a>
+              </div>
             </div>
+          </div>
 
-            {/* Tabs */}
-            <div className="mt-8 flex space-x-6">
+          {/* Right side - Only tabs and their content - NOW SCROLLABLE */}
+          <div className="relative flex w-full flex-1 flex-col overflow-hidden md:w-3/5">
+            {/* Tabs with fixed mobile layout - sticky */}
+            <div className="sticky top-0 z-10 flex overflow-x-auto border-b border-white/10 bg-[#0a101c] pb-px pt-1">
               {(["description", "specs", "builders"] as const).map((tab) => (
                 <button
                   key={tab}
                   onClick={() => setActiveTab(tab)}
-                  className={`pb-2 transition-all ${
+                  className={`flex min-w-max items-center gap-2 whitespace-nowrap px-3 py-3 sm:px-4 ${
                     activeTab === tab
-                      ? "border-b-2 border-blue-500 font-medium text-blue-400"
+                      ? "border-blue-500 text-blue-400 border-b-2 font-medium"
                       : "text-gray-400 hover:text-white"
                   }`}
                 >
+                  {tabIcons[tab]}
                   {tab.charAt(0).toUpperCase() + tab.slice(1)}
                 </button>
               ))}
             </div>
 
-            {/* Tab Content */}
-            <div className="scrollbar-thin scrollbar-track-blue-900/20 scrollbar-thumb-blue-400/20 mt-6 flex-1 overflow-y-auto pr-4">
+            {/* Tab Content with custom modern scrollbar - FULL HEIGHT SCROLLABLE CONTAINER */}
+            <div
+              className="custom-scrollbar flex-1 overflow-y-auto p-4"
+              style={{
+                // Custom scrollbar styles for Firefox and IE/Edge - see CSS for webkit (Chrome/Safari)
+                scrollbarWidth: "thin",
+                scrollbarColor: "rgba(59, 130, 246, 0.2) transparent",
+              }}
+            >
               {activeTab === "description" && (
                 <p className="leading-relaxed text-gray-300">
                   {project.Description}
@@ -108,51 +172,38 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
               )}
 
               {activeTab === "specs" && (
-                <div className="space-y-3">
+                <div className="space-y-3 pb-2">
                   {Object.entries(project.Parts).map(([part, value]) => (
                     <div
                       key={part}
-                      className="flex items-center justify-between rounded-lg bg-white/5 p-3 backdrop-blur-sm"
+                      className="hover:bg-white/8 rounded-lg bg-white/5"
                     >
-                      <span className="font-medium text-gray-300">{part}</span>
-                      <span className="text-white">{value}</span>
+                      <div className="border-b border-white/10 bg-white/5 px-4 py-2">
+                        <span className="text-sm font-medium uppercase tracking-wider text-gray-400">
+                          {part}
+                        </span>
+                      </div>
+                      <div className="p-3">
+                        <span className="text-white">{value || "TBA"}</span>
+                      </div>
                     </div>
                   ))}
                 </div>
               )}
 
               {activeTab === "builders" && (
-                <div className="space-y-2">
+                <div className="space-y-3">
                   {project.Builders.map((builder, index) => (
-                    <div key={index} className="text-gray-300">
+                    <div
+                      key={index}
+                      className="hover:bg-white/8 rounded-lg bg-white/5 p-4 text-gray-300"
+                    >
                       {builder}
                     </div>
                   ))}
                 </div>
               )}
             </div>
-
-            {/* Links */}
-            <div className="mt-6 space-y-3 border-t border-white/10 pt-6">
-              <a
-                href={project.Youtube}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center justify-between rounded-lg bg-white/5 p-4 text-blue-400 transition-all hover:bg-white/10 hover:text-blue-300"
-              >
-                <span>Watch Build Stream</span>
-                <span>→</span>
-              </a>
-              <a
-                href={project.Photos}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center justify-between rounded-lg bg-white/5 p-4 text-blue-400 transition-all hover:bg-white/10 hover:text-blue-300"
-              >
-                <span>View Photo Album</span>
-                <span>→</span>
-              </a>
-            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/projects/ProjectsPage.tsx b/src/components/projects/ProjectsPage.tsx
index 2cfa0ca..8aebddd 100644
--- a/src/components/projects/ProjectsPage.tsx
+++ b/src/components/projects/ProjectsPage.tsx
@@ -50,10 +50,25 @@ export default function ProjectsPage() {
     fetchProjects();
   }, []);
 
+  useEffect(() => {
+    // When selectedProject changes (modal opens/closes)
+    if (selectedProject) {
+      // Prevent scrolling on the main page when modal is open
+      document.body.style.overflow = "hidden";
+    } else {
+      // Re-enable scrolling when modal is closed
+      document.body.style.overflow = "";
+    }
+
+    // Cleanup function to ensure scrolling is re-enabled if component unmounts
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [selectedProject]);
+
   return (
     <div className="relative min-h-screen w-full overflow-x-hidden">
       {/* Applied noise background for consistency */}
-      <div className="noise-bg" />
 
       {/* Hero Section with Title */}
       <div className="relative flex min-h-[40vh] items-center justify-center">
@@ -109,7 +124,7 @@ export default function ProjectsPage() {
       <div className="container mx-auto px-4 py-16">
         {loading ? (
           <div className="flex h-64 items-center justify-center">
-            <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
+            <div className="border-blue-500 h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"></div>
           </div>
         ) : (
           <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
@@ -124,7 +139,7 @@ export default function ProjectsPage() {
                   <img
                     src={project.Image}
                     alt={project.Title}
-                    className="h-full w-full object-cover transition-transform group-hover:scale-110"
+                    className="h-full w-full object-cover transition-transform"
                   />
                 </div>