diff --git a/public/landing/bg.svg b/public/landing/bg.svg
index 5d9dbb5..09fff21 100644
--- a/public/landing/bg.svg
+++ b/public/landing/bg.svg
@@ -1,18 +1,23 @@
 <svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_8_33)">
-<g filter="url(#filter0_f_8_33)">
-<path d="M582.399 275.104C691.752 275.104 780.399 190.709 780.399 86.6038C780.399 -17.5019 691.752 -101.896 582.399 -101.896C473.047 -101.896 384.399 -17.5019 384.399 86.6038C384.399 190.709 473.047 275.104 582.399 275.104Z" fill="#0018E5" fill-opacity="0.1"/>
-<path d="M718.064 555.499C827.416 555.499 916.064 471.105 916.064 366.999C916.064 262.893 827.416 178.499 718.064 178.499C608.711 178.499 520.064 262.893 520.064 366.999C520.064 471.105 608.711 555.499 718.064 555.499Z" fill="#B0B8FF" fill-opacity="0.3"/>
-<path d="M864.159 857.398C973.512 857.398 1062.16 773.004 1062.16 668.898C1062.16 564.792 973.512 480.398 864.159 480.398C754.807 480.398 666.159 564.792 666.159 668.898C666.159 773.004 754.807 857.398 864.159 857.398Z" fill="#FF804E" fill-opacity="0.4"/>
+<g clip-path="url(#clip0_17_2)">
+<mask id="mask0_17_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="800">
+<path d="M800 0H0V800H800V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_17_2)">
+<g filter="url(#filter0_f_17_2)">
+<path d="M544 279C653.353 279 742 194.605 742 90.4998C742 -13.6059 653.353 -98 544 -98C434.648 -98 346 -13.6059 346 90.4998C346 194.605 434.648 279 544 279Z" fill="#0018E5" fill-opacity="0.1"/>
+<path d="M700 465C809.352 465 898 380.606 898 276.5C898 172.394 809.352 88 700 88C590.647 88 502 172.394 502 276.5C502 380.606 590.647 465 700 465Z" fill="#B0B8FF" fill-opacity="0.3"/>
+<path d="M917 527C1026.35 527 1115 442.606 1115 338.5C1115 234.394 1026.35 150 917 150C807.648 150 719 234.394 719 338.5C719 442.606 807.648 527 917 527Z" fill="#FF804E" fill-opacity="0.25"/>
+</g>
 </g>
 </g>
 <defs>
-<filter id="filter0_f_8_33" x="304.399" y="-181.896" width="837.76" height="1119.29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_f_17_2" x="282" y="-162" width="897.001" height="753" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_8_33"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_17_2"/>
 </filter>
-<clipPath id="clip0_8_33">
+<clipPath id="clip0_17_2">
 <rect width="800" height="800" fill="white"/>
 </clipPath>
 </defs>
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 844f662..c7564a9 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -57,42 +57,36 @@ export default function Login() {
   };
 
   return (
-    <div className="">
-      {/* Background Image */}
-      <img
-        src="/images/login-bg.svg"
-        alt=""
-        className="fixed inset-0 z-0 h-screen w-full object-cover"
-      />
-
-      <div className="font-body relative z-10 mx-auto flex max-w-2xl flex-col items-center justify-center min-h-[600px] text-white h-[calc(100vh-83px)] pb-36">
-        <div className="px-10 text-center">
-          <h1 className="text-3xl font-medium">Admin Login</h1>
+    <>
+      <div className="fixed inset-0 z-0 bg-[#080d14]" />
+      <div className="relative z-10 mx-auto flex max-w-2xl flex-col items-center justify-center pt-40 text-[#eaeaea] sm:pt-56">
+        <div className="px-6 text-center sm:px-10">
+          <h1 className="text-2xl font-medium sm:text-3xl">Admin Login</h1>
           <h2 className="mt-3">Use the admin email and password to login.</h2>
         </div>
         <form
           action=""
-          className="mt-6 flex w-full flex-col gap-5 px-10"
+          className="mt-6 flex w-full flex-col gap-5 px-6 sm:px-10 "
           onSubmit={handleLogin}
         >
           <div>
-            <label htmlFor="email">Email:</label>
+            <label htmlFor="email" className="text-sm sm:text-base">Email:</label>
             <input
               id="email"
               type="email"
               name="email"
-              className="mt-2 block w-full rounded-md border border-gray-200 bg-gray-100 px-4 py-2 outline-none text-black"
+              className="mt-2 block w-full rounded-md border border-gray-700 bg-[#303742] px-4 py-1.5 sm:py-2 outline-none"
               placeholder="Email"
               onChange={handleCrendentialsChange}
             />
           </div>
           <div>
-            <label htmlFor="password">Password:</label>
+            <label htmlFor="password" className="text-sm sm:text-base">Password:</label>
             <input
               type="password"
               id="password"
               name="password"
-              className="mt-2 block w-full rounded-md border border-gray-200 bg-gray-100 px-4 py-2 outline-none text-black"
+              className="mt-2 block w-full rounded-md border border-gray-700 bg-[#303742] px-4 py-1.5 sm:py-2 outline-none"
               placeholder="Password"
               onChange={handleCrendentialsChange}
             />
@@ -100,13 +94,13 @@ export default function Login() {
           <input
             type="submit"
             value="Login"
-            className="cursor-pointer rounded-md bg-blue-500 py-2 text-sm"
+            className="cursor-pointer rounded-md bg-blue-500 py-1.5 sm:py-2 text-sm text-white"
           />
         </form>
         <Link href="/" className="mt-6 text-sm underline">
           Lost? Click to return to safety
         </Link>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/app/client-layout.tsx b/src/app/client-layout.tsx
index 1f0186f..365cd5e 100644
--- a/src/app/client-layout.tsx
+++ b/src/app/client-layout.tsx
@@ -2,11 +2,12 @@
 
 import { useAuthState } from "react-firebase-hooks/auth";
 import { auth } from "@/lib/firebase/firebase";
-import Navbar from "@/components/Navbar/PublicNavbar";
+import Navbar from "@/components/Navbar/Navbar";
 import Sidebar from "@/components/Navbar/Sidebar";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "@/lib/react-query/queryClient";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
 
 export default function ClientLayout({
   children,
@@ -16,9 +17,22 @@ export default function ClientLayout({
   const [user] = useAuthState(auth);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
+  // Set the body's background on client-view components. (Improves aesthetics on mobile browsers)
+  const pathname = usePathname();
+  const isAdminRoute = pathname?.startsWith("/dashboard");
+
+  useEffect(() => {
+      if(isAdminRoute) {
+        document.body.style.backgroundColor = "#fff"
+      }
+      else {
+        document.body.style.backgroundColor = "#080d14"
+      }
+  },[isAdminRoute])
+
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="min-h-screen">
+      <div>
         {user && (
           <Sidebar isCollapsed={isCollapsed} onCollapse={setIsCollapsed} />
         )}
diff --git a/src/app/dashboard/events/add/page.tsx b/src/app/dashboard/events/add/page.tsx
index da6969a..904545f 100644
--- a/src/app/dashboard/events/add/page.tsx
+++ b/src/app/dashboard/events/add/page.tsx
@@ -7,9 +7,9 @@ import BackButton from "@/components/Buttons/BackButton";
 export default function AddEvent() {
   return (
     <ProtectedRoute>
-      <div className="mx-auto w-full max-w-3xl p-6 pt-8">
+      <div className="mx-auto w-full max-w-3xl px-4 sm:p-6 pt-8">
         <div className="flex items-end justify-between">
-          <h1 className="text-2xl font-semibold">Create Event</h1>
+          <h1 className="text-xl sm:text-2xl font-semibold">Create Event</h1>
           <BackButton />
         </div>
         <EventForm mode="create" />
diff --git a/src/app/dashboard/events/page.tsx b/src/app/dashboard/events/page.tsx
index c82f2a2..8a962e4 100644
--- a/src/app/dashboard/events/page.tsx
+++ b/src/app/dashboard/events/page.tsx
@@ -35,22 +35,22 @@ export default function EditEvents() {
 
   return (
     <ProtectedRoute>
-      <div className="mx-auto max-w-6xl px-8 pt-10">
-        <div className="flex justify-between">
-          <h1 className="text-3xl font-bold">Events</h1>
-          <div className="flex gap-2">
+      <div className="mx-auto max-w-6xl px-4 md:px-8 pt-6 sm:pt-10">
+        <div className="flex justify-between items-center">
+          <h1 className="text-xl sm:text-2xl md:text-3xl font-bold">Events</h1>
+          <div className="flex gap-2 text-sm md:text-base">
             <BackButton />
             <button className="rounded bg-green-600 px-4 py-2 text-white transition-colors hover:bg-green-700">
               <a href="/dashboard/events/add">New Event</a>
             </button>
           </div>
         </div>
-        <div className="mt-5 flex items-center justify-between text-lg">
-          <p>
+        <div className="mt-4 flex items-center justify-between ">
+          <p className=" sm:text-lg">
             Showing events for:{" "}
             <span className="font-semibold">{currentMonth} {currentYear}</span>
           </p>
-          <div className="flex gap-2">
+          <div className="flex gap-2 text-lg">
             <button className="rounded-full p-1 hover:bg-gray-300" onClick={() => changeMonth("prev")}>
               <FaChevronLeft />
             </button>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index b24b099..af7c427 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -4,7 +4,7 @@ import { FaCalendarAlt, FaBoxOpen } from "react-icons/fa";
 import { BsPcDisplay } from "react-icons/bs";
 import Link from "next/link";
 import ProtectedRoute from "@/components/admin/auth/ProtectedRoute";
-import SignOutButton from "@/components/admin/auth/SingOut";
+import SignOutButton from "@/components/admin/auth/SignOut";
 
 export default function Dashboard() {
   return (
@@ -15,7 +15,7 @@ export default function Dashboard() {
           <SignOutButton />
         </div>
         <hr className="my-4 border-gray-200" />
-        <ul className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+        <ul className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8 pb-12">
           <Link
             href="/dashboard/events"
             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"
diff --git a/src/app/dashboard/projects/add/page.tsx b/src/app/dashboard/projects/add/page.tsx
index 3beff6b..4d05d2e 100644
--- a/src/app/dashboard/projects/add/page.tsx
+++ b/src/app/dashboard/projects/add/page.tsx
@@ -7,8 +7,8 @@ import BackButton from "@/components/Buttons/BackButton";
 export default function projects() {
   return (
     <ProtectedRoute>
-      <div className="mx-auto flex max-w-4xl justify-between p-6 pt-8">
-        <h1 className="text-2xl font-semibold">Create Project</h1>
+      <div className="mx-auto flex max-w-4xl justify-between px-4 sm:p-6 pt-8 items-center">
+        <h1 className="text-xl sm:text-2xl font-semibold">Create Project</h1>
         <BackButton />
       </div>
       <AddForm />
diff --git a/src/app/dashboard/projects/page.tsx b/src/app/dashboard/projects/page.tsx
index 4ade0f3..527dd6a 100644
--- a/src/app/dashboard/projects/page.tsx
+++ b/src/app/dashboard/projects/page.tsx
@@ -7,12 +7,12 @@ import BackButton from "@/components/Buttons/BackButton";
 export default function projects() {
   return (
     <ProtectedRoute>
-      <div className="mx-auto max-w-6xl px-8 pt-10">
-        <div className="flex justify-between">
-          <h1 className="text-3xl font-bold">Projects</h1>
+      <div className="mx-auto max-w-6xl px-4 sm:px-8 pt-10">
+        <div className="flex justify-between items-center">
+          <h1 className="text-xl sm:text-3xl font-bold">Projects</h1>
           <div className="flex gap-2">
             <BackButton />
-            <button className="rounded bg-green-600 px-4 py-2 text-white transition-colors hover:bg-green-700">
+            <button className="text-sm sm:text-base rounded bg-green-600 px-4 py-2 text-white transition-colors hover:bg-green-700">
               <a href="/dashboard/projects/add">New Project</a>
             </button>
           </div>
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 9b39b1f..e6d64fd 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -5,7 +5,7 @@ import MonthlyEvents from "@/components/events/MonthlyEvents";
 export default function Events() {
   return (
     <>
-      <section className="relative min-h-screen bg-[#050a10]">
+      <section className="relative min-h-screen bg-[#080d14]">
         <div className="noise-bg"/>
         <div className="mx-auto max-w-7xl px-4 md:px-10 pt-24 pb-12 text-white">
           <MonthlyEvents />
diff --git a/src/app/globals.css b/src/app/globals.css
index 58c280f..369cb44 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -44,7 +44,7 @@ body {
 .monthly-event {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
-      #4255f922 25%,
+      #4255f933 25%,
       #0f1319 100%
     ),
     radial-gradient(61.66% 37.6% at 6.63% 95.08%, #4255f922 25%, #0f1319 100%),
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7de3548..fef712c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,7 @@ import LandingAbout from "@/components/landing/LandingAbout";
 
 const Website = () => {
   return (
-    <div className="min-h-screen w-full bg-[#050a10]">
+    <div className="min-h-screen w-full bg-[#080d14]">
       {/* Applied a noise bg to the page for added depth */}
       <div className="noise-bg" />
       <Hero />
diff --git a/src/components/Buttons/BackButton.tsx b/src/components/Buttons/BackButton.tsx
index 7a7bb98..a20c583 100644
--- a/src/components/Buttons/BackButton.tsx
+++ b/src/components/Buttons/BackButton.tsx
@@ -15,10 +15,10 @@ const BackButton: React.FC = () => {
       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"
     >
-      <span className="text-lg">
+      <span className="sm:text-lg">
         <FaLongArrowAltLeft />
       </span>
-      Back
+     <span className="text-sm sm:text-base">Back</span>
     </button>
   );
 };
diff --git a/src/components/Navbar/PublicNavbar.tsx b/src/components/Navbar/Navbar.tsx
similarity index 56%
rename from src/components/Navbar/PublicNavbar.tsx
rename to src/components/Navbar/Navbar.tsx
index 3a3fa5f..ac8b863 100644
--- a/src/components/Navbar/PublicNavbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,49 +1,94 @@
+"use client";
 import Link from "next/link";
 import { useState } from "react";
 import { FaBars } from "react-icons/fa";
 import { FaXmark } from "react-icons/fa6";
 import { AnimatePresence, motion } from "framer-motion";
-
-
-// TODO: Fix the navbar apperance when viewing admin dashboard
+import { usePathname } from "next/navigation";
+import Image from "next/image";
 
 export default function Nav() {
   const [showMobileNav, setShowMobileNav] = useState<boolean>(false);
+  const [isMobileAdminNavOpen, setIsMobileAdminNavOpen] =
+    useState<boolean>(false);
+  const pathname = usePathname();
+  const isAdminRoute = pathname?.startsWith("/dashboard");
+
+  if (isAdminRoute) {
+    return (
+      <>
+        <div className="relative z-10 mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-10">
+          <a href="/">
+            <Image
+              src={"/iconography/spcb-color.png"}
+              height={40}
+              width={40}
+              alt=""
+              className="hidden lg:block"
+            />
+          </a>
+          <div className="hidden gap-6 md:flex">
+            <Link href={"/"}>Home</Link>
+            <Link href={"/about"}>About</Link>
+            <Link href={"/events"}>Events</Link>
+            <Link href={"/projects"}>Projects</Link>
+          </div>
+          <button className="text-2xl md:hidden" onClick={() => setIsMobileAdminNavOpen(true)}>
+            <FaBars />
+          </button>
+        </div>
+        {isMobileAdminNavOpen && (
+          <div className="fixed inset-0 z-50 bg-white">
+            <div className="relative h-full w-full flex flex-col items-center justify-center text-4xl gap-10">
+              <button onClick={() => setIsMobileAdminNavOpen(false)} className="text-4xl absolute top-4 right-4"><FaXmark/></button>
+             
+              <Link href={"/"} onClick={() => setIsMobileAdminNavOpen(false)}>Home</Link>
+              <Link href={"/projects"} onClick={() => setIsMobileAdminNavOpen(false)}>Projects</Link>
+              <Link href={"/events"} onClick={() => setIsMobileAdminNavOpen(false)}>Events</Link>
+              <Link href={"/about"} onClick={() => setIsMobileAdminNavOpen(false)}>About</Link>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+
   return (
     <nav className="fixed left-1/2 z-30 w-full max-w-5xl -translate-x-1/2 px-0 text-[#f1f1f1] md:top-4 md:px-4">
-      <div className="border-b border-[#B0B8FF] border-opacity-30 bg-[#000] bg-opacity-40 py-3 backdrop-blur-lg md:rounded-full md:border md:py-1.5">
+      <div className="border-b border-[#B0B8FF] border-opacity-30 bg-[#03080e] bg-opacity-40 py-3 backdrop-blur-lg md:rounded-full md:border md:py-1.5">
         <div className="flex justify-between px-6 md:pl-6 md:pr-4">
           <figure>
-            <a href="/">
+            <Link href="/">
               <img
                 src="/iconography/spcb-color.png"
                 alt=""
                 className="w-11 md:h-10 md:w-10"
               />
-            </a>
+            </Link>
           </figure>
           <div className="hidden items-center gap-6 text-sm md:flex">
-            <Link href={"/"}>Home</Link>
-            <Link href={"/about"}>About</Link>
-            <Link href={"/events"}>Events</Link>
-            <Link href={"/projects"}>Projects</Link>
+            <Link href="/">Home</Link>
+            <Link href="/about">About</Link>
+            <Link href="/events">Events</Link>
+            <Link href="/projects">Projects</Link>
             <a
               href="https://discord.gg/CmqKbnBDBG"
               target="_blank"
+              rel="noopener noreferrer"
               className="rounded-full bg-[#B0B8FF] px-4 py-2 text-black"
             >
               SPCB Discord
             </a>
           </div>
-          <div
+          <button
             className="flex cursor-pointer items-center text-2xl md:hidden"
             onClick={() => setShowMobileNav((prev) => !prev)}
+            aria-label={showMobileNav ? "Close menu" : "Open menu"}
           >
             {showMobileNav ? <FaXmark /> : <FaBars />}
-          </div>
+          </button>
         </div>
 
-        {/* Animate the mobile nav-links downward when clicked */}
         <AnimatePresence>
           {showMobileNav && (
             <motion.div
@@ -54,7 +99,7 @@ export default function Nav() {
               transition={{ duration: 0.3, ease: "easeInOut" }}
             >
               <Link
-                href={"/"}
+                href="/"
                 onClick={() => setShowMobileNav(false)}
                 className="border-t border-gray-800 px-6 py-3"
               >
@@ -62,7 +107,7 @@ export default function Nav() {
               </Link>
 
               <Link
-                href={"/about"}
+                href="/about"
                 onClick={() => setShowMobileNav(false)}
                 className="border-t border-gray-800 px-6 py-3"
               >
@@ -70,7 +115,7 @@ export default function Nav() {
               </Link>
 
               <Link
-                href={"/events"}
+                href="/events"
                 onClick={() => setShowMobileNav(false)}
                 className="border-t border-gray-800 px-6 py-3"
               >
@@ -78,7 +123,7 @@ export default function Nav() {
               </Link>
 
               <Link
-                href={"/projects"}
+                href="/projects"
                 onClick={() => setShowMobileNav(false)}
                 className="border-t border-gray-800 px-6 py-3"
               >
@@ -86,8 +131,9 @@ export default function Nav() {
               </Link>
 
               <a
-                href={"https://discord.gg/CmqKbnBDBG"}
+                href="https://discord.gg/CmqKbnBDBG"
                 target="_blank"
+                rel="noopener noreferrer"
                 onClick={() => setShowMobileNav(false)}
                 className="border-t border-gray-800 px-6 pt-3"
               >
diff --git a/src/components/Navbar/Sidebar.tsx b/src/components/Navbar/Sidebar.tsx
index 5095a2b..f314e2e 100644
--- a/src/components/Navbar/Sidebar.tsx
+++ b/src/components/Navbar/Sidebar.tsx
@@ -4,7 +4,6 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
-  Menu,
   LayoutDashboard,
   FileText,
   Settings,
@@ -24,7 +23,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   isCollapsed,
   onCollapse,
 }) => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState<boolean>(false);
   const pathname = usePathname();
 
   const navigation = [
@@ -43,9 +42,9 @@ const Sidebar: React.FC<SidebarProps> = ({
       {!isMobileMenuOpen && (
         <button
           onClick={() => setIsMobileMenuOpen(true)}
-          className="fixed left-4 top-24 z-50 rounded-md bg-gray-700 p-2 text-white hover:bg-gray-600 lg:hidden"
+          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"
         >
-          <Menu size={20} />
+          <span>Admin</span>
         </button>
       )}
 
@@ -80,6 +79,7 @@ const Sidebar: React.FC<SidebarProps> = ({
               <li key={item.name}>
                 <Link
                   href={item.href}
+                  onClick={() => setIsMobileMenuOpen(false)}
                   className={`flex items-center rounded-md px-3 py-2 transition-colors ${
                     isLinkActive(item.href)
                       ? "bg-blue-600 text-white"
diff --git a/src/components/admin/auth/SingOut.tsx b/src/components/admin/auth/SignOut.tsx
similarity index 91%
rename from src/components/admin/auth/SingOut.tsx
rename to src/components/admin/auth/SignOut.tsx
index df2784a..a732ccd 100644
--- a/src/components/admin/auth/SingOut.tsx
+++ b/src/components/admin/auth/SignOut.tsx
@@ -1,4 +1,3 @@
-// components/SignOutButton.tsx
 "use client";
 
 import { auth } from "@/lib/firebase/firebase";
@@ -23,7 +22,7 @@ export default function SignOutButton() {
   return (
     <button
       onClick={handleSignOut}
-      className="rounded-md bg-red-500 px-4 py-2 text-white transition-all hover:bg-red-600"
+      className="rounded-md bg-red-500 px-4 py-2 text-white transition-all hover:bg-red-600 text-sm sm:text-base"
     >
       Log Out
     </button>
diff --git a/src/components/admin/events/EditEventsForm.tsx b/src/components/admin/events/EditEventsForm.tsx
index e690128..9c31b73 100644
--- a/src/components/admin/events/EditEventsForm.tsx
+++ b/src/components/admin/events/EditEventsForm.tsx
@@ -149,8 +149,8 @@ export default function EditEventsForm({month} : EditEventFormProps) {
         </div>
       )}
       {showEditForm && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="max-h-[80vh] w-full max-w-2xl overflow-auto rounded-lg bg-white p-6">
+        <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="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 9d12f87..319e3de 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">
+    <div className="flex items-center justify-between rounded-md border p-4 bg-white gap-4">
       <div className="flex items-end gap-4">
-        <p className="font-bold">{event.title}</p>
-        <p className="text-sm">{date}</p>
-        <p className="text-sm">{time}</p>
+        <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>
       </div>
       <div className="flex gap-2">
         <button
-          className="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
+          className="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600 text-sm 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"
+          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"
           onClick={() => onDeleteClick(event)}
         >
           <Trash2 size={18} />
diff --git a/src/components/admin/events/EventForm.tsx b/src/components/admin/events/EventForm.tsx
index 69f1d22..d5c95af 100644
--- a/src/components/admin/events/EventForm.tsx
+++ b/src/components/admin/events/EventForm.tsx
@@ -187,7 +187,7 @@ export default function EventForm({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="mt-8 flex w-full flex-col gap-4">
+    <form onSubmit={handleSubmit} className="mt-6 sm:mt-8 flex w-full flex-col gap-4">
       <div>
         <label htmlFor="" className="text-sm font-medium">
           Title
@@ -233,7 +233,7 @@ export default function EventForm({
           <input
             type="date"
             name="date"
-            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 min-h-11"
             onFocus={handleFocus}
             onChange={handleChange}
             value={formData.date}
@@ -246,7 +246,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}
@@ -263,7 +263,7 @@ export default function EventForm({
             name="tags"
             value={tagsInputValue}
             onChange={(e) => setTagsInputValue(e.target.value)}
-            className="block w-full rounded-md border p-2"
+            className="block w-full rounded-md border p-1.5 sm:p-2"
           />
           <button
             className="whitespace-nowrap rounded-md bg-green-500 px-4 text-sm text-white"
diff --git a/src/components/admin/projects/AddForm.tsx b/src/components/admin/projects/AddForm.tsx
index 8b3a300..08dbe94 100644
--- a/src/components/admin/projects/AddForm.tsx
+++ b/src/components/admin/projects/AddForm.tsx
@@ -174,11 +174,11 @@ export default function AddForm({
   };
 
   return (
-    <div className="mx-auto max-w-4xl p-6">
+    <div className="mx-auto max-w-4xl sm:p-6 py-5 px-4">
       <form onSubmit={handleSubmit} className="space-y-6">
         {/* Basic Information */}
         <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label htmlFor="Title" className="block text-sm font-medium">
                 Title
@@ -260,7 +260,7 @@ export default function AddForm({
                     <img
                       src={imagePreview}
                       alt="Preview"
-                      className="h-auto max-w-xs rounded"
+                      className="max-w-[320px] w-full rounded"
                     />
                   </div>
                 )}
@@ -329,7 +329,7 @@ export default function AddForm({
           <button
             type="button"
             onClick={addBuilder}
-            className="rounded-md bg-green-500 px-4 py-2 text-white"
+            className="rounded-md bg-green-500 px-4 py-2 text-white text-sm sm:text-base"
           >
             Add Builder
           </button>
@@ -339,7 +339,7 @@ export default function AddForm({
         <button
           type="submit"
           disabled={isSubmitting}
-          className="w-full rounded-md bg-blue-500 p-3 text-white disabled:bg-blue-300"
+          className="w-full rounded-md bg-blue-500 p-3 text-white disabled:bg-blue-300 text-sm sm:text-base"
         >
           {isSubmitting
             ? "Submitting..."
diff --git a/src/components/admin/projects/EditForm.tsx b/src/components/admin/projects/EditForm.tsx
index ed1dc82..44b1485 100644
--- a/src/components/admin/projects/EditForm.tsx
+++ b/src/components/admin/projects/EditForm.tsx
@@ -134,7 +134,7 @@ export default function EditForm() {
   // Render loading state
   if (loading) {
     return (
-      <div className="flex h-[calc(100vh-80px)] items-center justify-center">
+      <div className="flex h-[calc(100vh-160px)] items-center justify-center">
         <span className="animate-spin text-5xl text-gray-800">
           <LuLoader2 />
         </span>
@@ -158,7 +158,7 @@ export default function EditForm() {
             placeholder="Search projects..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full rounded border p-2 pl-10"
+            className="w-full rounded border p-2 pl-11 text-sm sm:text-base"
           />
         </div>
 
@@ -171,7 +171,7 @@ export default function EditForm() {
             .map((project) => (
               <div
                 key={project.id}
-                className="flex items-center justify-between rounded border p-4"
+                className="flex items-center justify-between rounded border p-4 text-sm sm:text-base"
               >
                 <h3 className="font-bold">{project.Title}</h3>
                 <div className="flex gap-2">
@@ -195,9 +195,9 @@ export default function EditForm() {
 
         {/* Edit Modal */}
         {isModalOpen && selectedProject && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-            <div className="max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded bg-white p-4">
-              <div className="flex justify-between">
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 px-3">
+            <div className="max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded bg-white py-4">
+              <div className="flex justify-between px-4">
                 <p className="text-2xl font-medium">Edit Project</p>
                 <span
                   className="cursor-pointer text-3xl"
diff --git a/src/components/events/CalendarEvent.tsx b/src/components/events/CalendarEvent.tsx
index 19d927a..b8e1ead 100644
--- a/src/components/events/CalendarEvent.tsx
+++ b/src/components/events/CalendarEvent.tsx
@@ -51,7 +51,7 @@ const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {
 
       {showEventModal && (
         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-10 px-6 backdrop-blur-sm">
-          <div className="relative w-full max-w-[400px] rounded-md border border-[#242424] bg-[#050a10] px-6 py-10">
+          <div className="relative w-full max-w-[400px] rounded-md border border-[#242424] bg-[#070c13] px-6 py-10">
             <button
               onClick={handleEventClick}
               className="absolute right-4 top-4 text-2xl"
diff --git a/src/components/events/MobileCalendarEvent.tsx b/src/components/events/MobileCalendarEvent.tsx
index 9fc6076..8557d1c 100644
--- a/src/components/events/MobileCalendarEvent.tsx
+++ b/src/components/events/MobileCalendarEvent.tsx
@@ -36,7 +36,7 @@ const MobileCalendarEvent: React.FC<MobileCalendarEventProps> = ({
       </div>
       {showEventModal && (
         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-10 px-6 backdrop-blur-sm">
-          <div className="relative w-full max-w-[400px] max-h-[400px] overflow-y-auto rounded-md border border-[#242424] bg-[#050a10] px-2 py-10">
+          <div className="relative w-full max-w-[400px] max-h-[400px] overflow-y-auto rounded-md border border-[#242424] bg-[#070c13] px-2 py-10">
             <button
               onClick={handleEventClick}
               className="absolute right-4 top-4 text-2xl"
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 622a002..0fdb902 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -5,21 +5,23 @@ import { motion } from "framer-motion";
 
 export default function Hero() {
   return (
-    <div className="relative pb-12 pt-24 text-[#eaeaea] lg:h-[max(100svh,840px)] lg:pt-24" id="hero">
+    <div
+      className="relative pb-12 md:pb-32 pt-24 md:pt-52 text-[#eaeaea]"
+      id="hero"
+    >
       {/* Flex-row on desktop devices but flex-col-reverse for devices lg and smaller */}
       <div className="mx-auto flex h-full max-w-7xl flex-col-reverse items-center px-6 pb-6 sm:px-10 lg:mt-0 lg:flex-row">
         <div className="flex w-full flex-col items-center text-center lg:w-3/4 lg:items-start lg:text-left">
-        {/* Hidden on mobile */}
+          {/* Hidden on mobile */}
           <span className="hidden rounded-full border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-50 px-4 py-1.5 text-xs lg:inline">
             1000+ Active Members!
           </span>
-          <h1 className="pt-4 font-Michroma text-[26px] font-semibold leading-normal sm:text-4xl lg:text-[44px] lg:leading-normal">
-            The Society <br className="inline sm:hidden" />
-            of PC Building
+          <h1 className="font-Michroma text-[22px] font-semibold leading-normal sm:text-4xl pt-1 md:pt-4 lg:text-[44px] lg:leading-normal">
+            <span className="hidden sm:inline">The</span> Society of PC Building
           </h1>
 
           {/* On mobile devices shorten the description to limit text-length */}
-          <p className="max-w-[620px] pt-4 text-[17px] font-medium leading-relaxed sm:pt-3 sm:text-lg">
+          <p className="max-w-[620px] pt-3 text-[17px] font-medium leading-relaxed sm:pt-3 sm:text-lg px-1 sm:px-0">
             <span className="hidden sm:inline">
               Join the Society of PC Building at UF—where
             </span>
@@ -27,15 +29,18 @@ export default function Hero() {
             hardware and tech connect, innovate, and build custom PCs together.
           </p>
 
-
-          <button className="mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 px-8 py-2 font-medium text-white sm:text-base">
+          <a
+            href="https://discord.gg/CmqKbnBDBG"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-6 rounded-md border border-[#B0B8FF] border-opacity-40 bg-black bg-opacity-80 px-8 py-2 font-medium text-white text-base"
+          >
             Join the Club!
-          </button>
-
+          </a>
 
           {/* On mobile devices show the infinite carousel but on desktop static list */}
-          <div className="mt-20 lg:mt-32">
-            <p className="text-sm opacity-80">
+          <div className="mt-16 lg:mt-32">
+            <p className="text-xs sm:text-sm opacity-80">
               Led by a team of officers with experience at:
             </p>
             <div className="-mt-5 hidden h-[103px] items-center gap-6 md:flex">
@@ -53,7 +58,7 @@ export default function Hero() {
 
         {/* Animate SPCB logo upwards. Applied negative margin to center logo better */}
         <motion.div
-          className="relative -mr-6 h-[240px] w-[240px] md:h-[300px] md:w-[300px] lg:-mr-12 lg:h-[460px] lg:w-[460px]"
+          className="relative -mr-6 h-[220px] w-[220px] md:h-[300px] md:w-[300px] lg:-mr-12 lg:h-[460px] lg:w-[460px]"
           initial={{ opacity: 0, y: 60 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.4, ease: "easeOut" }}
@@ -71,7 +76,6 @@ export default function Hero() {
             priority
           />
         </motion.div>
-
       </div>
     </div>
   );
diff --git a/src/components/landing/LogoCarousel.tsx b/src/components/landing/LogoCarousel.tsx
index 3acc702..2c724c8 100644
--- a/src/components/landing/LogoCarousel.tsx
+++ b/src/components/landing/LogoCarousel.tsx
@@ -20,7 +20,7 @@ const LogoCarousel: React.FC = () => {
   const duplicatedLogos = [...logos, ...logos];
 
   return (
-    <div className="md:hidden w-full overflow-hidden -mt-5 scale-90">
+    <div className="md:hidden w-full overflow-hidden -mt-5">
       <motion.div
         className="flex items-center gap-6"
         animate={{
@@ -39,7 +39,7 @@ const LogoCarousel: React.FC = () => {
             <img 
               src={logo.src} 
               alt={logo.alt} 
-              className="w-auto object-contain"
+              className="w-auto object-contain scale-[0.75]"
             />
           </div>
         ))}