diff --git a/src/components/footer/footer.module.css b/src/components/footer/footer.module.css
index dc7c796..8897602 100644
--- a/src/components/footer/footer.module.css
+++ b/src/components/footer/footer.module.css
@@ -1,125 +1,144 @@
 .footerContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px 40px;
-    overflow: hidden;
-    margin-top: 100px;
-    background-color: rgb(24, 24, 24);
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    color: white;
-    height: 400px;
-    z-index: 0;
-    width: 100vw;
-    position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 20px;
+  padding-bottom: 20px; 
+  overflow: hidden;
+  margin-top: 50px; 
+  background-color: rgb(24, 24, 24);
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  color: white;
+  height: 350px; 
+  z-index: 0;
+  width: 100vw;
+  position: relative;
 }
 
 .footerHead {
-    line-height: .9;
-    position: absolute;
-    left: 80px;
-    top: 40px;
-    font-family: "Impact", sans-serif;
-    font-size: 13vw;
-    color: #141414;
-    opacity: .4;
-    text-shadow:
-            1px 1px 0 #ffffff,
-            -1px -1px 0 #ffffff,
-            1px -1px 0 #ffffff,
-            -1px 1px 0 #ffffff;
-    font-weight: 800;
-    width: fit-content;
-    margin-bottom: 10px;
+  position: absolute;
+  top: 38%; /* ↑ was 42% — moves faded text up slightly */
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: "Impact", sans-serif;
+  font-size: 13vw;
+  color: rgba(255, 255, 255, 0.05);
+  font-weight: 800;
+  line-height: 1;
+  z-index: 0;
+  pointer-events: none;
 }
 
 .footerContent {
-    position: absolute;
-    right: 80px;
-    bottom: 40px;
-}
-
-.grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr .7fr;
-    gap: 20px;
-    align-items: start;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 90px; 
+  width: 100%;
+  max-width: 1200px;
+  padding: 0 40px;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
+  gap: 30px;
+  align-items: start;
+  z-index: 2;
+  box-sizing: border-box;
 }
 
 .gridCon {
-    color: white;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 20px;
-    text-align: right;
-    z-index: 20;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  z-index: 2;
+  min-width: 0;
 }
 
 .link {
-    color: white;
-    text-decoration: none;
-    font-size: 20px;
-    font-weight: 500;
-    transition: all 0.3s ease-in-out;
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 500;
+  transition: all 0.3s ease-in-out;
 }
 
 .link:hover {
-    color: rgba(255, 255, 255, 0.66);
+  color: rgba(255, 255, 255, 0.7);
 }
 
-.link:active {
-    color: rgba(143, 143, 143, 0.99);
+.newsletter {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.lowerCon {
-    padding: 0 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 5px;
+.newsletter input {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 14px;
+}
+
+.newsletter button {
+  background: #fff;
+  color: #000;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: 0.3s;
+}
+
+.newsletter button:hover {
+  opacity: 0.85;
 }
 
-@media only screen and (max-width: 808px) {
-    .footerContainer {
-        height: 450px;
-    }
+.lowerCon {
+  position: absolute;
+  bottom: 18px; 
+  left: 40px; 
+  right: 40px; 
+  display: flex;
+  justify-content: space-between; 
+  align-items: center;
+}
 
-    .footerHead {
-        font-size: 19.5vw;
-        left: 50%;
-        top: 20px;
-        transform: translateX(-50%);
-    }
-    .footerContent {
-        right: 20px;
-        width: calc(100vw - 20px);
-        bottom: 20px;
-    }
-    .grid {
-        grid-template-columns: 1fr 1fr;
-        gap: 10px;
-    }
 
-    .gridCon, .link {
-        text-align: left;
-    }
+.footerLogo {
+  position: absolute;
+  right: 40px;
+  bottom: 0.09px;
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  z-index: 3;
+}
 
-    .gridCon {
-        padding: 0 20px;
-    }
+@media (max-width: 900px) {
+  .footerContent {
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    padding: 20px;
+  }
+}
 
-    .link {
-        font-size: 16px;
-    }
+@media (max-width: 420px) {
+  .footerContent {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    padding: 16px;
+  }
 
-    .lowerCon {
-        margin-top: 10px;
-        padding: 0 20px;
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        gap: 5px;
-    }
-}
\ No newline at end of file
+  .footerLogo {
+    right: 16px;
+    bottom: 12px;
+    width: 44px;
+    height: 44px;
+  }
+}
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index b86a71d..cbe005a 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -1,129 +1,197 @@
 import Link from "next/link";
 import styles from "./footer.module.css";
 import Image from "next/image";
-import { FaDiscord, FaGithub } from 'react-icons/fa'; 
-import { AiOutlineMail } from 'react-icons/ai'; 
-
+import { FaDiscord, FaGithub } from "react-icons/fa";
+import { AiOutlineMail } from "react-icons/ai";
 
 export default function Footer() {
-    const uniformLinkStyle = {
+  const uniformLinkStyle = {
     fontFamily: '"Roboto", sans-serif',
-    fontSize: "18px", // Uniform size
-    fontWeight: "700", // Uniform light weight (similar to 'Mail' text)
-    color: "rgba(255, 255, 255, 0.9)", // Uniform color
-    textDecoration: 'none', 
-    margin: '5px 0', // Vertical spacing between links
-    };
+    fontSize: "16px",
+    fontWeight: "500",
+    color: "rgba(255, 255, 255, 0.9)",
+    textDecoration: "none",
+    margin: "5px 0",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+  };
+
+  return (
+    <div className={styles.footerContainer}>
+      <h3 className={styles.footerHead}>JEEPEDIA.IN</h3>
+
+      <div className={styles.footerContent}>
+        {/* About Section */}
+        <div className={styles.gridCon}>
+          <h4
+            style={{
+              color: "rgba(255,255,255,0.85)",
+              fontFamily: '"Roboto", sans-serif',
+              fontSize: "18px",
+              fontWeight: "600",
+              marginBottom: "10px",
+            }}
+          >
+            About JEEPedia
+          </h4>
+          <p
+            style={{
+              fontFamily: '"Roboto", sans-serif',
+              fontSize: "15px",
+              fontWeight: "400",
+              color: "rgba(255,255,255,0.8)",
+              maxWidth: "250px",
+              lineHeight: "1.5",
+            }}
+          >
+            JEEPedia is an Open Source tool designed to help students with the
+            complex process of selecting the right university.
+          </p>
+        </div>
+
+        {/* Tools Section */}
+        <div className={styles.gridCon}>
+          <h4
+            style={{
+              color: "rgba(255,255,255,0.7)",
+              fontFamily: '"Roboto", sans-serif',
+              fontSize: "16px",
+              fontWeight: "400",
+              marginBottom: "8px",
+            }}
+          >
+            Tools
+          </h4>
+          <Link href={"/predictor"} style={uniformLinkStyle}>
+            Predictor
+          </Link>
+          <Link href={"/universities"} style={uniformLinkStyle}>
+            Universities
+          </Link>
+          <Link href={"/compare"} style={uniformLinkStyle}>
+            Compare
+          </Link>
+        </div>
+
+        {/* Your Data Section */}
+        <div className={styles.gridCon}>
+          <h4
+            style={{
+              color: "rgba(255,255,255,0.7)",
+              fontFamily: '"Roboto", sans-serif',
+              fontSize: "16px",
+              fontWeight: "400",
+              marginBottom: "8px",
+            }}
+          >
+            Your Data
+          </h4>
+          <Link href={"/privacy"} style={uniformLinkStyle}>
+            Privacy Policy
+          </Link>
+          <Link href={"/tos"} style={uniformLinkStyle}>
+            Terms of Service
+          </Link>
+        </div>
+
+        {/* This Project Section */}
+        <div className={styles.gridCon}>
+          <h4
+            style={{
+              color: "rgba(255,255,255,0.7)",
+              fontFamily: '"Roboto", sans-serif',
+              fontSize: "16px",
+              fontWeight: "400",
+              marginBottom: "8px",
+            }}
+          >
+            This Project
+          </h4>
+          <a
+            href="mailto:jeepedia.in@gmail.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={uniformLinkStyle}
+          >
+            <AiOutlineMail size={20} /> Mail
+          </a>
+          <a
+            href="https://discord.gg/Z8s9JECw4C"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={uniformLinkStyle}
+          >
+            <FaDiscord size={20} /> Discord
+          </a>
+          <a
+            href="https://github.com/J2J-App"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={uniformLinkStyle}
+          >
+            <FaGithub size={20} /> Github
+          </a>
+        </div>
+
+        {/* Stay Updated Section */}
+        <div className={styles.gridCon}>
+          <h4
+            style={{
+              color: "rgba(255,255,255,0.7)",
+              fontFamily: '"Roboto", sans-serif',
+              fontSize: "16px",
+              fontWeight: "800",
+              marginBottom: "8px",
+            }}
+          >
+            Stay Updated
+          </h4>
+          <p
+            style={{
+              fontFamily: '"Roboto", sans-serif',
+              fontSize: "15px",
+              fontWeight: "400",
+              color: "rgba(255,255,255,0.8)",
+              lineHeight: "1.5",
+              marginBottom: "10px",
+              maxWidth: "250px",
+            }}
+          >
+            Subscribe to our newsletter for updates, tips, and new features.
+          </p>
+          <div className={styles.newsletter}>
+            <input type="email" placeholder="Enter your email" />
+            <button>Subscribe</button>
+          </div>
+        </div>
+      </div>
 
-    const iconLinkStyle = { ...uniformLinkStyle, display: 'flex', alignItems: 'center', gap: '8px', margin: '5px 0' };
-    const headerStyle = {
-        color: "rgba(255,255,255,0.7)",
-        fontFamily: '"Roboto", sans-serif',
-        fontSize: "16px",
-        fontWeight: "300",
-    };
-    //TODO:
-    // 1. Fix on mobile
-    return (
-        <div className={styles.footerContainer}>
-            <h3 className={styles.footerHead}>
-                JEEPEDIA.IN
-            </h3>
-            <div className={styles.footerContent}>
-                <div className={styles.grid} style={{ marginLeft: '150px', justifyContent: 'space-between' }}>
-                    <div className={styles.gridCon}>
-                        <h4 style={{
-                            color: "rgba(255,255,255,0.7)",
-                            fontFamily: '"Roboto", sans-serif',
-                            fontSize: "16px",
-                            fontWeight: "300",
-                        }}>
-                            Tools
-                        </h4>
-                        <Link href={"/predictor"} style={uniformLinkStyle}>
-                            Predictor
-                        </Link>
-                        <Link href={"/universities"} style={uniformLinkStyle}>
-                            Universities
-                        </Link>
-                        <Link href={"/compare"} style={uniformLinkStyle}>
-                            Compare
-                        </Link>
-                    </div>
-                    <div className={styles.gridCon}>
-                        <h4 style={{
-                            color: "rgba(255,255,255,0.7)",
-                            fontFamily: '"Roboto", sans-serif',
-                            fontSize: "16px",
-                            fontWeight: "300",
-                        }}>
-                            Your Data
-                        </h4>
-                        <Link href={"/privacy"} style={uniformLinkStyle}>
-                            Privacy Policy
-                        </Link>
-                        <Link href={"/tos"} style={uniformLinkStyle}>
-                            Terms of Service
-                        </Link>
-                    </div>
-                    <div className={styles.gridCon}>
-                        <h4 style={{
-                            color: "rgba(255,255,255,0.7)",
-                            fontFamily: '"Roboto", sans-serif',
-                            fontSize: "16px",
-                            fontWeight: "300",
-                        }}>
-                            This Project
-                        </h4>
-                        <div style={{  display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '5px' }}>
-                            <a href={"mailto:jeepedia.in@gmail.com"} target={"_blank"} rel="noopener noreferrer" title="Email"
-                                className="text-neutral-300 hover:text-cyan-400"
-                                style={iconLinkStyle}>
-                                <AiOutlineMail size={22} style={{ color: 'currentColor' }}  />
-                                Mail
-                            </a>
-                            <a href={"https://discord.gg/Z8s9JECw4C"} target={"_blank"} rel="noopener noreferrer" title="Discord"
-                                className="text-neutral-300 hover:text-cyan-400"
-                                style={iconLinkStyle}>
-                                <FaDiscord size={22} style={{ color: 'currentColor' }} />
-                                Discord
-                            </a>
-                            <a href={"https://github.com/J2J-App"} target={"_blank"} rel="noopener noreferrer" title="GitHub"
-                                className="text-neutral-300 hover:text-cyan-400"
-                                style={iconLinkStyle}>
-                                <FaGithub size={22} style={{ color: 'currentColor' }}  />
-                                Github
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div className={styles.lowerCon}>
-                    <p style={{
-                        margin: "0",
-                        fontFamily: '"Roboto", sans-serif',
-                        fontSize: "12px",
-                        textAlign: "right",
-                        fontWeight: "300",
-                        color: "rgba(255,255,255,0.65)",
-                    }}>
-                        Copyright © 2025 JEEPedia. All rights reserved.
-                    </p>
-                    <div style={{
-                        position: "relative",
-                        width: "50px",
-                        height: "50px",
-                        margin: "0",
-                        borderRadius: 8,
-                        border: "1px solid rgba(255,255,255,0.1)",
-                    }}>
-                        <Image style={{
-                            objectFit: "contain",
-                            borderRadius: "5px",
-                            filter: "drop-shadow(0 0 5px rgba(0,0,0,0.5))",
-                        }} src="/icons/navbar/j2jicon.png" alt="JEEPedia logo" fill={true} />
-                    </div>
-                </div>
-            </div>
+      <div className={styles.lowerCon}>
+        <p
+          style={{
+            margin: "0",
+            fontFamily: '"Roboto", sans-serif',
+            fontSize: "12px",
+            fontWeight: "300",
+            color: "rgba(255,255,255,0.65)",
+          }}
+        >
+          © 2025 JEEPedia. All rights reserved.
+        </p>
+        <div className={styles.footerLogo}>
+          <Image
+            src="/icons/navbar/j2jicon.png"
+            alt="JEEPedia logo"
+            fill
+            style={{
+              objectFit: "contain",
+              borderRadius: "5px",
+              filter: "drop-shadow(0 0 5px rgba(0,0,0,0.5))",
+            }}
+          />
         </div>
-    )
-}
\ No newline at end of file
+      </div>
+    </div>
+  );
+}