diff --git a/apps/web/src/components/LandingPage/footer.tsx b/apps/web/src/components/LandingPage/footer.tsx
index 15d773a..11025de 100644
--- a/apps/web/src/components/LandingPage/footer.tsx
+++ b/apps/web/src/components/LandingPage/footer.tsx
@@ -2,7 +2,7 @@ import { Instagram, Linkedin, Mail, Twitter } from "lucide-react";
 
 const Footer = () => {
 	return (
-		<footer className="bg-background border-t-4 border-primary py-12">
+		<footer className="bg-background border-t-4 border-primary py-12 transition-colors duration-500">
 			<div className="container mx-auto px-4">
 				<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
 					<div className="col-span-1 md:col-span-2">
@@ -10,7 +10,7 @@ const Footer = () => {
 							<div className="w-8 h-8 bg-secondary border-2 border-primary pixel-pulse"></div>
 							<h3 className="pixel-font text-xl text-primary">IIITBuzz</h3>
 						</div>
-						<p className="text-sm text-footer mb-4">
+						<p className="text-sm text-muted mb-4">
 							The ultimate community platform for IIIT students. Connect, learn,
 							and grow together in our vibrant digital campus ecosystem.
 						</p>
@@ -19,14 +19,14 @@ const Footer = () => {
 								href="https://www.linkedin.com/company/p-soc"
 								target="_blank"
 								rel="noopener noreferrer"
-								className="w-8 h-8 neo-brutal-card bg-foreground/20 border-foreground flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
+								className="w-8 h-8 neo-brutal-card bg-muted border-border flex items-center justify-center cursor-pointer hover:scale-110 hover:bg-primary hover:text-primary-foreground transition-all"
 							>
 								<Linkedin className="text-foreground w-4 h-4" />
 							</a>
 
 							<a
 								href="mailto:tech-society@eiiit-bh.ac.in"
-								className="w-8 h-8 neo-brutal-card bg-foreground/20 border-foreground flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
+								className="w-8 h-8 neo-brutal-card bg-muted border-border flex items-center justify-center cursor-pointer hover:scale-110 hover:bg-primary hover:text-primary-foreground transition-all"
 							>
 								<Mail className="text-foreground w-4 h-4" />
 							</a>
@@ -35,18 +35,18 @@ const Footer = () => {
 								href="https://twitter.com/psociiit"
 								target="_blank"
 								rel="noopener noreferrer"
-								className="w-8 h-8 neo-brutal-card bg-secondary/20 border-secondary flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
+								className="w-8 h-8 neo-brutal-card bg-muted border-border flex items-center justify-center cursor-pointer hover:scale-110 hover:bg-secondary hover:text-secondary-foreground transition-all"
 							>
-								<Twitter className="text-secondary w-4 h-4" />
+								<Twitter className="text-foreground w-4 h-4" />
 							</a>
 
 							<a
 								href="https://www.instagram.com/psoc_iiitbh"
 								target="_blank"
 								rel="noopener noreferrer"
-								className="w-8 h-8 neo-brutal-card bg-accent/20 border-accent flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
+								className="w-8 h-8 neo-brutal-card bg-muted border-border flex items-center justify-center cursor-pointer hover:scale-110 hover:bg-accent hover:text-accent-foreground transition-all"
 							>
-								<Instagram className="text-accent w-4 h-4" />
+								<Instagram className="text-foreground w-4 h-4" />
 							</a>
 						</div>
 					</div>
@@ -56,87 +56,43 @@ const Footer = () => {
 							QUICK LINKS
 						</h4>
 						<ul className="space-y-2 text-sm">
-							<li>
-								<a
-									href="#about"
-									className="text-footer hover:text-primary transition-colors"
-								>
-									About Us
-								</a>
-							</li>
-							<li>
-								<a
-									href="#features"
-									className="text-footer hover:text-primary transition-colors"
-								>
-									Features
-								</a>
-							</li>
-							<li>
-								<a
-									href="#contact"
-									className="text-footer hover:text-primary transition-colors"
-								>
-									Contact
-								</a>
-							</li>
-							<li>
-								<a
-									href="#help"
-									className="text-footer hover:text-primary transition-colors"
-								>
-									Help & Support
-								</a>
-							</li>
+							{["About Us", "Features", "Contact", "Help & Support"].map((link) => (
+								<li key={link}>
+									<a
+										href={`#${link.toLowerCase().replace(/ & | /g, "-")}`}
+										className="text-muted hover:text-primary transition-colors"
+									>
+										{link}
+									</a>
+								</li>
+							))}
 						</ul>
 					</div>
 
 					<div>
 						<h4 className="pixel-font text-sm text-primary mb-4">POLICIES</h4>
 						<ul className="space-y-2 text-sm">
-							<li>
-								<a
-									href="#privacy"
-									className="text-footer hover:text-primary transition-colors"
-								>
-									Privacy Policy
-								</a>
-							</li>
-							<li>
-								<a
-									href="#terms"
-									className="text-footer hover:text-primary transition-colors"
-								>
-									Terms of Service
-								</a>
-							</li>
-							<li>
-								<a
-									href="#community"
-									className="text-footer hover:text-primary transition-colors"
-								>
-									Community Guidelines
-								</a>
-							</li>
-							<li>
-								<a
-									href="#cookies"
-									className="text-footer hover:text-primary transition-colors"
-								>
-									Cookie Policy
-								</a>
-							</li>
+							{["Privacy Policy", "Terms of Service", "Community Guidelines", "Cookie Policy"].map((policy) => (
+								<li key={policy}>
+									<a
+										href={`#${policy.toLowerCase().replace(/ /g, "-")}`}
+										className="text-muted hover:text-primary transition-colors"
+									>
+										{policy}
+									</a>
+								</li>
+							))}
 						</ul>
 					</div>
 				</div>
 
-				<div className="border-t-2 border-primary/30 pt-8 text-center">
-					<p className="pixel-font text-xs text-footer m-4">© 2025 IIITBuzz</p>
-					<p className="text-xs text-footer mt-2">by- P-Soc IIIT-bh</p>
+				<div className="border-t-2 border-muted pt-8 text-center">
+					<p className="pixel-font text-xs text-muted m-4">© 2025 IIITBuzz</p>
+					<p className="text-xs text-muted mt-2">by- P-Soc IIIT-bh</p>
 				</div>
 			</div>
 		</footer>
 	);
 };
 
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 7cd3a73..e20b1a5 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -8,79 +8,33 @@
 @tailwind utilities;
 
 :root {
-	--primary: #040403;
-	--secondary: #00ff04;
-	--accent: #f87171;
-	--background: #ffffff;
-	--foreground: #e6be30;
-	--border: #000000;
-	--card: #000;
-	--button-bg: #000000;
-	--card-foreground: #030303;
-	--button-text: #ffffff;
 	--button-green: #22c55e;
 	--button-yellow: #facc15;
 	--button-red: #ef4444;
-	--muted: #dde1e8;
 	--muted-foreground: #c1cbde;
-	--stat-bg: #000;
-	--stat-border: #22c55e;
-	--stat-yellow: #facc15;
-	--stat-red: #ef4444;
-	--footer: #000000b7;
 	--ring: #c084fc;
-}
-
-.dark {
-	--background: #d5d640;
-	--foreground: #1a1a1a;
-	--card: #d5d640;
-	--card-foreground: #1a1a1a;
-	--popover: #f9fafb;
-	--popover-foreground: #1a1a1a;
-	--primary: #9b44f2;
-	--primary-foreground: #000000;
-	--secondary: #5a2ca5;
-	--secondary-foreground: #000000;
-	--accent: #5a2ca5;
-	--accent-foreground: #000000;
-	--destructive: #ef4444;
-	--muted: #f3f4f6;
-	--muted-foreground: #2a2e34;
-	--border: #e5e7eb;
-	--input: #e5e7eb;
-	--ring: #9333ea;
-	--sidebar: #ffffff;
-	--sidebar-foreground: #1a1a1a;
-	--sidebar-primary: #9333ea;
-	--sidebar-primary-foreground: #ffffff;
-	--sidebar-accent: #e5e7eb;
-	--sidebar-accent-foreground: #1a1a1a;
-	--sidebar-border: #9333ea;
-	--sidebar-ring: #9333ea;
-	--title-shadow: #1b150f;
 	--footer: #000000b7;
 }
 
 .light {
 	--background: #ffffff;
 	--foreground: #e7b52a;
+	--bg: #ffffff;
+	--surface: #f5f5f5;
+	--primary: #040403;
+	--accent: #f87171;
+	--secondary: #22c55e;
+	--badge: #facc15;
+	--border: #374151;
+	--text-primary: #1a1a1a;
+	--text-secondary: #374151;
 	--card: #000;
 	--card-foreground: #030302;
 	--popover: #262626;
 	--popover-foreground: #f5f5f5;
-	--primary: #040403;
-	--primary-foreground: #1a1a1a;
-	--secondary: #22c55e;
-	--secondary-foreground: #1a1a1a;
 	--muted: #374151;
-	--muted-foreground: #c1cbde;
-	--accent: #f87171;
-	--accent-foreground: #1a1a1a;
 	--destructive: #ef4444;
-	--border: #374151;
 	--input: #374151;
-	--ring: #c084fc;
 	--sidebar: #262626;
 	--sidebar-foreground: #f5f5f5;
 	--sidebar-primary: #c084fc;
@@ -89,5 +43,41 @@
 	--sidebar-accent-foreground: #f5f5f5;
 	--sidebar-border: #c084fc;
 	--sidebar-ring: #c084fc;
-	--footer: #000000b7;
+	--background-image: url('/backgrounds/bg-light.png');
+}
+
+.dark {
+	--background: #141420;
+	--foreground: #f5f5f5;
+	--bg: #141420;
+	--surface: #1c1c2a;
+	--primary: #62d8e2;
+	--accent: #e870a7;
+	--secondary: #f18e5d;
+	--badge: #bca4e2;
+	--border: #3c3c4a;
+	--text-primary: #f5f5f5;
+	--text-secondary: #aaaaaa;
+	--card: #1c1c2a;
+	--card-foreground: #f5f5f5;
+	--popover: #262626;
+	--popover-foreground: #f5f5f5;
+	--muted: #3c3c4a;
+	--muted-foreground: #aaaaaa;
+	--destructive: #ef4444;
+	--input: #3c3c4a;
+	--sidebar: #1c1c2a;
+	--sidebar-foreground: #f5f5f5;
+	--sidebar-primary: #62d8e2;
+	--sidebar-primary-foreground: #f5f5f5;
+	--sidebar-accent: #e870a7;
+	--sidebar-accent-foreground: #f5f5f5;
+	--sidebar-border: #3c3c4a;
+	--sidebar-ring: #bca4e2;
+	--background-image: url('/backgrounds/bg-dark.png');
+}
+
+body {
+  @apply transition-colors duration-500;
 }
+