diff --git a/public/facebook-2.png b/public/facebook-2.png
new file mode 100644
index 0000000..d84a394
Binary files /dev/null and b/public/facebook-2.png differ
diff --git a/public/facebook-2.svg b/public/facebook-2.svg
new file mode 100644
index 0000000..74dd1d9
--- /dev/null
+++ b/public/facebook-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="240px" height="240px"><path fill="#3F51B5" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"/><path fill="#FFF" d="M34.368,25H31v13h-5V25h-3v-4h3v-2.41c0.002-3.508,1.459-5.59,5.592-5.59H35v4h-2.287C31.104,17,31,17.6,31,18.723V21h4L34.368,25z"/></svg>
\ No newline at end of file
diff --git a/public/instagram-2.png b/public/instagram-2.png
new file mode 100644
index 0000000..bfde87d
Binary files /dev/null and b/public/instagram-2.png differ
diff --git a/public/instagram-2.svg b/public/instagram-2.svg
new file mode 100644
index 0000000..ac69d51
--- /dev/null
+++ b/public/instagram-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="240px" height="240px"><radialGradient id="yOrnnhliCrdS2gy~4tD8ma" cx="19.38" cy="42.035" r="44.899" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fd5"/><stop offset=".328" stop-color="#ff543f"/><stop offset=".348" stop-color="#fc5245"/><stop offset=".504" stop-color="#e64771"/><stop offset=".643" stop-color="#d53e91"/><stop offset=".761" stop-color="#cc39a4"/><stop offset=".841" stop-color="#c837ab"/></radialGradient><path fill="url(#yOrnnhliCrdS2gy~4tD8ma)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20	c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20	C42.014,38.383,38.417,41.986,34.017,41.99z"/><radialGradient id="yOrnnhliCrdS2gy~4tD8mb" cx="11.786" cy="5.54" r="29.813" gradientTransform="matrix(1 0 0 .6663 0 1.849)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4168c9"/><stop offset=".999" stop-color="#4168c9" stop-opacity="0"/></radialGradient><path fill="url(#yOrnnhliCrdS2gy~4tD8mb)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20	c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20	C42.014,38.383,38.417,41.986,34.017,41.99z"/><path fill="#fff" d="M24,31c-3.859,0-7-3.14-7-7s3.141-7,7-7s7,3.14,7,7S27.859,31,24,31z M24,19c-2.757,0-5,2.243-5,5	s2.243,5,5,5s5-2.243,5-5S26.757,19,24,19z"/><circle cx="31.5" cy="16.5" r="1.5" fill="#fff"/><path fill="#fff" d="M30,37H18c-3.859,0-7-3.14-7-7V18c0-3.86,3.141-7,7-7h12c3.859,0,7,3.14,7,7v12	C37,33.86,33.859,37,30,37z M18,13c-2.757,0-5,2.243-5,5v12c0,2.757,2.243,5,5,5h12c2.757,0,5-2.243,5-5V18c0-2.757-2.243-5-5-5H18z"/></svg>
\ No newline at end of file
diff --git a/public/linkedin.png b/public/linkedin.png
new file mode 100644
index 0000000..2078624
Binary files /dev/null and b/public/linkedin.png differ
diff --git a/public/linkedin.svg b/public/linkedin.svg
new file mode 100644
index 0000000..c0f5147
--- /dev/null
+++ b/public/linkedin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="240px" height="240px"><path fill="#0078d4" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5	V37z"/><path d="M30,37V26.901c0-1.689-0.819-2.698-2.192-2.698c-0.815,0-1.414,0.459-1.779,1.364	c-0.017,0.064-0.041,0.325-0.031,1.114L26,37h-7V18h7v1.061C27.022,18.356,28.275,18,29.738,18c4.547,0,7.261,3.093,7.261,8.274	L37,37H30z M11,37V18h3.457C12.454,18,11,16.528,11,14.499C11,12.472,12.478,11,14.514,11c2.012,0,3.445,1.431,3.486,3.479	C18,16.523,16.521,18,14.485,18H18v19H11z" opacity=".05"/><path d="M30.5,36.5v-9.599c0-1.973-1.031-3.198-2.692-3.198c-1.295,0-1.935,0.912-2.243,1.677	c-0.082,0.199-0.071,0.989-0.067,1.326L25.5,36.5h-6v-18h6v1.638c0.795-0.823,2.075-1.638,4.238-1.638	c4.233,0,6.761,2.906,6.761,7.774L36.5,36.5H30.5z M11.5,36.5v-18h6v18H11.5z M14.457,17.5c-1.713,0-2.957-1.262-2.957-3.001	c0-1.738,1.268-2.999,3.014-2.999c1.724,0,2.951,1.229,2.986,2.989c0,1.749-1.268,3.011-3.015,3.011H14.457z" opacity=".07"/><path fill="#fff" d="M12,19h5v17h-5V19z M14.485,17h-0.028C12.965,17,12,15.888,12,14.499C12,13.08,12.995,12,14.514,12	c1.521,0,2.458,1.08,2.486,2.499C17,15.887,16.035,17,14.485,17z M36,36h-5v-9.099c0-2.198-1.225-3.698-3.192-3.698	c-1.501,0-2.313,1.012-2.707,1.99C24.957,25.543,25,26.511,25,27v9h-5V19h5v2.616C25.721,20.5,26.85,19,29.738,19	c3.578,0,6.261,2.25,6.261,7.274L36,36L36,36z"/></svg>
\ No newline at end of file
diff --git a/public/twitter-2.png b/public/twitter-2.png
new file mode 100644
index 0000000..d61eb84
Binary files /dev/null and b/public/twitter-2.png differ
diff --git a/public/twitter-2.svg b/public/twitter-2.svg
new file mode 100644
index 0000000..cb35d4c
--- /dev/null
+++ b/public/twitter-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="240px" height="240px"><path fill="#03A9F4" d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"/></svg>
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 757e2dc..ee45a33 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { Analytics } from "@vercel/analytics/react"
 import { SpeedInsights } from "@vercel/speed-insights/next"
 import { cn } from "@/lib/utils"
 import Navbar from "@/components/navbar"
+import Footer from "@/components/footer"
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -51,6 +52,7 @@ export default function RootLayout({
         <Suspense fallback={<Loading />}>{children}</Suspense>
         <Analytics />
         <SpeedInsights />
+        <Footer />
       </body>
     </html>
   );
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
new file mode 100644
index 0000000..3aa60a8
--- /dev/null
+++ b/src/components/footer.jsx
@@ -0,0 +1,106 @@
+import "@/styles/footer.css";
+import React from "react";
+import Link from "next/link";
+import { Noto_Sans , Montserrat } from "next/font/google";
+import Image from "next/image";
+
+const notoSansFont = Noto_Sans({ weight: ["300","400"], subsets: ["latin"] });
+const montserratFont = Montserrat({weight: ["100","400"], subsets: ["latin"] });
+
+function Footer() {
+    const homeLink =        "/";
+    const eventsLink =      "/events";
+    const projectsLink =    "/projects";
+    const membersLink =     "/members";
+    const ccEmailLink =     "mailto:codingclub@iiitvadodara.ac.in";
+    const addressLink =     "https://goo.gl/maps/7g5D6XJpMAD2";
+    const linkedInLink =    "https://www.linkedin.com/company/iiitvcc/";
+    const twitterLink =     "https://x.com/iiitvcc";
+    const instagramLink =   "https://www.instagram.com/codingclub_iiitv/";
+    const facebookLink =    "https://www.facebook.com/iiitvcc/";
+    const iconWidthHeight = "30";
+    return (
+        <>
+            <div className={`${notoSansFont.className} footer-container-1 grid grid-cols-1 lg:grid-cols-12`}>
+                <hr className="col-span-1 lg:col-span-12 footer-divider-1"/>
+                <div className="col-span-1 lg:col-span-4">
+                    <div className="footer-cc-logo">
+                        <img
+                            className="footer-cc-logo-img "
+                            src="https://avatars.githubusercontent.com/u/9347727?s=200&v=4"
+                            alt="IIITV Logo"
+                        />
+                        <div>
+                            <p className="footer-cc-logo-title">Coding Club</p> 
+                            <p className="footer-cc-logo-subtitle">Blog Website</p>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-span-1 lg:col-span-7 grid grid-cols-1 sm:grid-cols-12 footer-first-container-2">
+                    <div className="footer-links-container col-span-2 sm:col-start-2">
+                        <p>
+                            Links
+                        </p>
+                        <div className="footer-links-divider"></div>
+                        <Link href={homeLink} className={montserratFont.className} prefetch={false}>
+                            Home
+                        </Link>
+                        <Link href={eventsLink} className={montserratFont.className} prefetch={false}>
+                            Events
+                        </Link>
+                        <Link href={projectsLink} className={montserratFont.className} prefetch={false}>
+                            Projects
+                        </Link>
+                        <Link  className={montserratFont.className} href={membersLink} prefetch={false}>
+                            Members
+                        </Link>
+                    </div>
+
+                    <div className="footer-contact-container col-span-2 sm:col-span-8 sm:col-start-4">
+                        <p>
+                            Contact
+                        </p>
+                        <div>
+                            <p>Email</p>
+                            <Link href={ccEmailLink} target="_blank">
+                            <text className={montserratFont.className}>:  codingclub@iiitvadodara.ac.in</text>
+                            </Link>
+                            <p>Phone</p>
+                            <text className={montserratFont.className}>:  +98875503111 ,9034534472</text>
+                            <p>Address</p>
+                            <Link href={addressLink} target="_blank" className={montserratFont.className}>:  c/o Block No. 9, Government Engineering College, Sector 28,
+                            Gandhinagar, Gujarat
+                            </Link>
+                        </div>
+
+                    </div>
+                    <div className="footer-icon-container col-span-1 sm:col-start-12">
+                        <Link href={linkedInLink} prefetch={false} target="_blank"><Image src="linkedin.svg" width={iconWidthHeight} height={iconWidthHeight} alt="Linkedin logo"></Image></Link>
+                        <Link href={twitterLink} prefetch={false} target="_blank"><Image src="twitter-2.svg" width={iconWidthHeight} height={iconWidthHeight} alt="Twitter Logo"></Image></Link>
+                        <Link href={instagramLink} prefetch={false} target="_blank"><Image src="instagram-2.svg" width={iconWidthHeight} height={iconWidthHeight} alt="Instagram Logo"></Image></Link>
+                        <Link href={facebookLink} prefetch={false} target="_blank"><Image src="facebook-2.svg" width={iconWidthHeight} height={iconWidthHeight} alt="Facebook Logo"></Image></Link>
+                    </div>
+                </div>
+            </div>
+            <div className={`${montserratFont.className} footer-container-2`}>
+                <div className="footer-dot-container">
+                    <p>Designed by DOT</p>
+                    <div className="dot-icon">
+                        <div /><div /><div /><div /><div /><div /><div /><div /><div />
+                    </div>
+                </div>
+                <hr className="footer-container-2-divider"></hr>
+                <div className="footer-cc-container">
+                    <p>Developed by Coding Club</p>
+                    <img
+                        className="footer-cc-logo-img-2"
+                        src="https://avatars.githubusercontent.com/u/9347727?s=200&v=4"
+                        alt="IIITV Logo"
+                    />
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Footer;
diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
index f4a1802..3919b09 100644
--- a/src/components/navbar.jsx
+++ b/src/components/navbar.jsx
@@ -18,15 +18,15 @@ function Navbar() {
         <>
             <div id="pseudo"></div>
             <div className="navbar">
-                <a href="/" className="logo-container">
+                <Link href="/" className="logo-container" prefetch={false}>
                     <img className="logo-img"  src="https://avatars.githubusercontent.com/u/9347727?s=200&v=4" alt="IIITV Logo" />
-                    <h1 className="logo-title">Coding Club</h1>
-                </a>
+                    <p className="logo-title">Coding Club</p>
+                </Link>
                 <div className="menu-container">
-                    <Link href={eventsLink} className="text-primary">Events</Link>
-                    <Link href={projectsLink} className="text-primary">Projects</Link>
-                    <Link href={membersLink} className="text-primary">Members</Link>
-                    <Link href={contactUsLink} className="text-primary">Contact Us</Link>
+                    <Link href={eventsLink} className="text-primary" prefetch={false}>Events</Link>
+                    <Link href={projectsLink} className="text-primary" prefetch={false} >Projects</Link>
+                    <Link href={membersLink} className="text-primary" prefetch={false}>Members</Link>
+                    <Link href={contactUsLink} className="text-primary" prefetch={false}>Contact Us</Link>
                 </div>
                 <div className="mobile-menu">
                     <div className="menu-icon">
@@ -41,10 +41,10 @@ function Navbar() {
                     
                     <div className="mobile-menu-container" style={{display : (hiddenMenu ? "none" : "") }}>
                         <div className="mobile-menu-container2">
-                            <p><Link href={eventsLink} className="text-primary">Events </Link></p>
-                            <p><Link href={projectsLink} className="text-primary">Projects </Link></p>
-                            <p><Link href={membersLink} className="text-primary">Members </Link></p>
-                            <p><Link href={contactUsLink} className="text-primary">Contact Us </Link></p>
+                            <p><Link href={eventsLink} className="text-primary" prefetch={false}>Events </Link></p>
+                            <p><Link href={projectsLink} className="text-primary" prefetch={false}>Projects </Link></p>
+                            <p><Link href={membersLink} className="text-primary" prefetch={false}>Members </Link></p>
+                            <p><Link href={contactUsLink} className="text-primary" prefetch={false}>Contact Us </Link></p>
                         </div>
                     </div>
                     
diff --git a/src/styles/footer.css b/src/styles/footer.css
new file mode 100644
index 0000000..ca7e9d4
--- /dev/null
+++ b/src/styles/footer.css
@@ -0,0 +1,232 @@
+
+.footer-divider-1{  
+    width: 90%;
+    height: 2.5px;
+    border: none;
+    background-color:  #A49D9D;
+    justify-self: center;
+    box-shadow: 0px 3.34204px 3.34204px rgba(0, 0, 0, 0.25);
+    margin: 25px 0;
+}
+.footer-container-1{
+    background-color: var(--background);
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+.footer-container-1 > div>div{
+    margin-top: 50px;
+}
+.footer-cc-logo{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    cursor:default;
+}
+.footer-cc-logo-img{
+    height: 100px;
+}
+.footer-cc-logo-title{
+    font-size: 32px;
+    letter-spacing: -0.05em;
+    line-height: 100%;
+}
+.footer-cc-logo-subtitle{
+    font-weight: 100;
+    font-size: 16px;
+    color: #E9E9E9;
+    margin: 0 3px;
+}
+
+.footer-links-container>p{
+    font-weight: 700;
+    font-size: 20.0522px;
+    margin-bottom: 5px;
+    z-index: 1;
+    background-color: var(--background);
+}
+
+.footer-links-container{
+    display: flex;
+    flex-flow: column wrap;
+    font-weight: 400;
+    font-size: 15px;
+    gap: 7px;
+}
+
+.footer-first-container-2 >div> p::after{
+    content: "";
+    height: 3px;
+    width: 50px;
+    background-color: var(--primary);
+    display: inline-block;
+    position: relative;
+    bottom: 5px;
+    left: 10px;
+}
+
+.footer-contact-container{
+    font-weight: 700;
+    flex-flow: column wrap;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+}
+.footer-contact-container>p{
+    width: 100%;
+    margin-bottom:15px;
+    text-align: center;
+}
+.footer-contact-container>div{
+    display: grid;
+    width: 300px;
+    grid-template-columns: 1fr 4fr;
+    grid-template-rows: auto;
+    gap: 10px 6px;
+}
+.footer-contact-container>div>*{
+    font-weight: 400;
+    font-size: 15px;
+}
+
+.footer-contact-container>div>p{
+    font-weight: 700;
+    font-size: 16px;
+    
+}
+
+.footer-container-2{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    font-size: 20px;
+    font-weight: 300;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(90deg, #201F31 27.6%, #282739 50.91%, #201F31 72.19%);
+
+    margin-top: 50px;
+}
+
+.footer-container-2>*{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    padding: 10px;
+}
+.footer-icon-container{
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+}
+
+.dot-icon{
+    display: grid;
+    grid-template-columns: repeat(3,6px);
+    grid-template-rows: repeat(3,6px);
+    gap: 2.5px;
+}
+.dot-icon>*{
+    background-color: #E9E9E9;
+    border-radius: 100%;
+}
+.footer-cc-logo-img-2{
+    height: 35px;
+}
+.footer-container-2-divider{
+    position: relative;
+    width: 2px;
+    height: 40px;
+    background-color: var(--primary);
+    border: none;
+    padding:0;
+    margin: 0;
+}
+
+/* Footer Icons transition */
+
+.footer-icon-container>*:hover{
+    transition: 0.25s;
+    transform: scale(1.2);
+    margin: 10%;
+}
+
+.footer-icon-container>*:not(:hover){
+    transition: 0.5s ease;
+    transform: scale(1.0);
+}
+
+/* Tailwind lg responsiveness */
+@media screen and (max-width : 1280px){
+    .footer-cc-logo-img{
+        height: 70px;
+    }
+}
+/* Tailwind less than sm size resposiveness */
+@media screen and (max-width : 640px){
+    .footer-cc-logo-img{
+        height: 60px;
+    }
+    .footer-cc-logo-title{
+        font-size: 28px;
+        letter-spacing: -0.05em;
+    }
+    .footer-cc-logo-subtitle{
+        font-size: 14px;
+    }
+    .footer-links-container{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .footer-container-1 > div>div{
+        margin-top: 25px;
+    }
+    .footer-icon-container{
+        display: flex;
+        flex-direction: row;
+    }
+    .footer-first-container-2 >div> p::before{
+        content: "";
+        height: 3px;
+        width: 50px;
+        background-color: var(--primary);
+        display: inline-block;
+        position: relative;
+        bottom: 5px;
+        right: 10px;
+    }
+    /* Footer Icon transition */
+    .footer-icon-container>*:hover{
+        transition: 0.5s ease;
+        transform: scale(1.2);
+        margin: 0 1%;
+    }
+    
+    .footer-icon-container>*:not(:hover){
+        transition: 0.5s ease;
+        transform: scale(1.0);
+    }
+    
+}
+
+/* Footer Container 2 Divider Responsiveness */
+@media screen and (max-width : 580px){
+    .footer-container-2-divider{
+        width: 60%;
+        height: 2px;
+        background-color: var(--primary);
+        border: none;
+        padding:0;
+        margin: 0;
+    }
+    .footer-container-2>div>p{
+        text-align: center;
+    }
+    
+}
\ No newline at end of file
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
index d0e15f8..ae761bb 100644
--- a/src/styles/navbar.css
+++ b/src/styles/navbar.css
@@ -25,7 +25,7 @@
 	transition: transform 0.3s;
 }
 .navbar>*>*:not(.mobile-menu-container):hover{
-	transform: scale(1.15);
+	transform: scale(1.05);
 }
 .logo-container{
 	display: flex;
@@ -62,9 +62,9 @@
 	right: 10px;
 	width: 200px;
 	height: 250px;
-	background: var(--primary-foreground);
+	background: var(--secondary);
 	box-shadow: 5px 5px 4.5px rgba(0, 0, 0, 0.25);
-	border: #ffbade59 solid 1px;
+	border: #ffbade solid 1px;
 	border-radius: 10px;
 	z-index: 100;
 }