diff --git a/Frontend/README.md b/Frontend/README.md
index 5dc893c..be4b6e5 100644
--- a/Frontend/README.md
+++ b/Frontend/README.md
@@ -48,13 +48,4 @@ To learn React, check out the [React documentation](https://reactjs.org/).
 
 
 
-## FRAMER-MOTION INSTAL
-npm install framer-motion
-
-## MUI
-npm install @mui/lab @types/material-ui
-npm install @mui/icons-material
-npm install react-swipeable-views
-
-
 
diff --git a/Frontend/package.json b/Frontend/package.json
index b05879a..8b3445d 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -33,6 +33,7 @@
     "react-router-dom": "^6.21.3",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "react-scroll": "^1.9.0",
     "react-slideshow-image": "^4.3.0",
     "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "^0.14.0",
@@ -73,6 +74,7 @@
   "devDependencies": {
     "@types/aria-query": "^5.0.4",
     "@types/react-router-hash-link": "^2.4.9",
+    "@types/react-scroll": "^1.8.10",
     "@types/react-swipeable-views-utils": "^0.13.7",
     "@types/react-vertical-timeline-component": "^3.3.6",
     "tailwindcss": "^3.4.1"
diff --git a/Frontend/pnpm-lock.yaml b/Frontend/pnpm-lock.yaml
index c9495c8..0510efc 100644
--- a/Frontend/pnpm-lock.yaml
+++ b/Frontend/pnpm-lock.yaml
@@ -95,6 +95,9 @@ dependencies:
   react-scripts:
     specifier: 5.0.1
     version: 5.0.1(@babel/plugin-syntax-flow@7.23.3)(@babel/plugin-transform-react-jsx@7.23.4)(eslint@8.56.0)(react@18.2.0)(sass@1.70.0)(typescript@4.9.5)
+  react-scroll:
+    specifier: ^1.9.0
+    version: 1.9.0(react-dom@18.2.0)(react@18.2.0)
   react-slideshow-image:
     specifier: ^4.3.0
     version: 4.3.0(react@18.2.0)
@@ -139,6 +142,9 @@ devDependencies:
   '@types/react-router-hash-link':
     specifier: ^2.4.9
     version: 2.4.9
+  '@types/react-scroll':
+    specifier: ^1.8.10
+    version: 1.8.10
   '@types/react-swipeable-views-utils':
     specifier: ^0.13.7
     version: 0.13.7
@@ -3201,6 +3207,12 @@ packages:
       '@types/react': 18.2.52
     dev: true
 
+  /@types/react-scroll@1.8.10:
+    resolution: {integrity: sha512-RD4Z7grbdNGOKwKnUBKar6zNxqaW3n8m9QSrfvljW+gmkj1GArb8AFBomVr6xMOgHPD3v1uV3BrIf01py57daQ==}
+    dependencies:
+      '@types/react': 18.2.52
+    dev: true
+
   /@types/react-swipeable-views-utils@0.13.7:
     resolution: {integrity: sha512-ED8pf8dq3S79uWtP8EnSdrg7dUCrxyL9Uapq1dSA2mz+H83SjS8vsqmlFWmmBQoTuEHsQp5Ru9fxxsofQ+bI9Q==}
     dependencies:
@@ -9609,6 +9621,18 @@ packages:
       - webpack-plugin-serve
     dev: false
 
+  /react-scroll@1.9.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==}
+    peerDependencies:
+      react: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      lodash.throttle: 4.1.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-slideshow-image@4.3.0(react@18.2.0):
     resolution: {integrity: sha512-SPiZtZRcBYAtin5Nva5ZgnLlMQHCcccBInkJ2Q8PEBBBMGhXZgSlAm+3VoMDjKUWYfNjTN3gEL6y+SrBzBeLXQ==}
     peerDependencies:
diff --git a/Frontend/public/footerbg.png b/Frontend/public/footerbg.png
new file mode 100644
index 0000000..d7eaa8a
Binary files /dev/null and b/Frontend/public/footerbg.png differ
diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx
index 66e1446..0ed8fbb 100644
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -22,7 +22,6 @@ function App() {
         <Navbar />       
       <Routes>
         <Route path="/team" element={<Registration />} />
-        
         <Route path="/*" element={
           <div>     
             <Particles />     
@@ -37,6 +36,8 @@ function App() {
           </div>
         } />     
       </Routes>
+
+
       <Footer />
     </div>
   );
diff --git a/Frontend/src/Assets/Footer/ieee-wie2.png b/Frontend/src/Assets/Footer/ieee-wie2.png
new file mode 100644
index 0000000..f875f8c
Binary files /dev/null and b/Frontend/src/Assets/Footer/ieee-wie2.png differ
diff --git a/Frontend/src/Assets/Footer/wie-ucsc2.png b/Frontend/src/Assets/Footer/wie-ucsc2.png
new file mode 100644
index 0000000..7db62d7
Binary files /dev/null and b/Frontend/src/Assets/Footer/wie-ucsc2.png differ
diff --git a/Frontend/src/Assets/NavBar/as-lpgp.png b/Frontend/src/Assets/NavBar/as-lpgp.png
index 2f2847c..42f7c3b 100644
Binary files a/Frontend/src/Assets/NavBar/as-lpgp.png and b/Frontend/src/Assets/NavBar/as-lpgp.png differ
diff --git a/Frontend/src/Components/Card/Card.tsx b/Frontend/src/Components/Card/Card.tsx
index 03c0a0f..a305850 100644
--- a/Frontend/src/Components/Card/Card.tsx
+++ b/Frontend/src/Components/Card/Card.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, ReactElement } from 'react';
 import './Card.css'
 
+
 // Data
 import data from './data.json';
 // import { WidthFull } from '@mui/icons-material';
@@ -52,10 +53,16 @@ const Carousel: React.FC = (): ReactElement => {
   }, []);
 
   return (
-    <div className="carousel bg-white pt-10 pb-24">
-      <h2 className="relative text-5xl leading-8 font-semibold mb-16 mt-4 text-secondary tracking-widest font-sfont text-center hover:text-primary">
-        Hackaholics 5.0
-      </h2>
+    <div className="carousel bg-secondary pt-10 pb-24 p-2">
+      <div className="prizeHead">
+      <div
+          className="shape "
+        >
+          <h1 className="font-sfont font-semibold tracking-wider">
+            <span>Hackaholics 5.0</span>
+          </h1>
+        </div>
+      </div>
       <div className="relative overflow-hidden">
         <div className="flex justify-between absolute top left w-full h-full">
           <button
diff --git a/Frontend/src/Components/ContactUs/ContactUs.css b/Frontend/src/Components/ContactUs/ContactUs.css
index 3b8f490..2113da7 100644
--- a/Frontend/src/Components/ContactUs/ContactUs.css
+++ b/Frontend/src/Components/ContactUs/ContactUs.css
@@ -92,12 +92,12 @@
 .nameDivContactUs h6 {
   text-align: center;
   font-size: 1.3rem;
-  color: #18113a;
+  color: white;
 }
 
 .roleDivContactUs {
   width: 80%;
-  color: #18113a;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -106,12 +106,12 @@
 .roleDivContactUs p {
   text-align: center;
   font-size: 1rem;
-  color: #18113a;
+  color: white;
 }
 
 .phoneNumberDiv {
   width: 80%;
-  color: #18113a;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -120,12 +120,12 @@
 .phoneNumberDiv p {
   text-align: center;
   font-size: 1rem;
-  color: #18113a;
+  color: white;
 }
 
 .emailDiv {
   width: 80%;
-  color: #18113a;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -134,7 +134,7 @@
 .emailDiv p {
   text-align: center;
   font-size: 1rem;
-  color: #18113a;
+  color: white;
 }
 
 .contactUsHead {
diff --git a/Frontend/src/Components/ContactUs/ContactUs.tsx b/Frontend/src/Components/ContactUs/ContactUs.tsx
index cd9e3d2..3080fb2 100644
--- a/Frontend/src/Components/ContactUs/ContactUs.tsx
+++ b/Frontend/src/Components/ContactUs/ContactUs.tsx
@@ -5,25 +5,25 @@ import image3 from "../../Assets/Contact Us/Dilanga Harshani.png";
 
 const ContactUs = () => {
   return (
-    <div className="contactUsDiv">
+    <div className="contactUsDiv bg-secondary">
       <div className="contactUsHead">
         <div className="shape">
-          <h1>
+        <h1 className="font-sfont font-semibold tracking-wider">
             <span>Contact Us</span>
           </h1>
         </div>
       </div>
-      <div className="contactUsDivRow">
-        <div className="contactUsColumn">
+      <div className="contactUsDivRow text-neutral-100 font-pfont">
+        <div className="contactUsColumn ">
           <div className="ocPeopleImageDiv1">
             <img src={image1} alt="Avatar" className="ocPeopleImage" />
           </div>
-          <div className="nameDivContactUs">
+          <div className="nameDivContactUs text-neutral-50 font-pfont tracking-wide text-xl">
             <p>
-              <b>Ms. Uthpalani Jayasinghe</b>
+              Ms. Uthpalani Jayasinghe
             </p>
           </div>
-          <div className="roleDivContactUs">
+          <div className="roleDivContactU">
             <p>Chairperson</p>
           </div>
           <div className="phoneNumberDiv">
@@ -32,7 +32,7 @@ const ContactUs = () => {
             </p>
           </div>
           <div className="emailDiv">
-            <p>
+            <p className="tracking-widest font-pfont">
               <b className="fas fa-envelope">uthpalani.jayasinghe@ieee.org</b>
             </p>
           </div>
@@ -41,9 +41,9 @@ const ContactUs = () => {
           <div className="ocPeopleImageDiv2">
             <img src={image2} alt="Avatar" className="ocPeopleImage" />
           </div>
-          <div className="nameDivContactUs">
+          <div className="nameDivContactUs text-neutral-50 font-pfont tracking-wide text-lg">
             <p>
-              <b>Ms. Oshani Wickramasinghe</b>
+              Ms. Oshani Wickramasinghe
             </p>
           </div>
           <div className="roleDivContactUs">
@@ -55,18 +55,18 @@ const ContactUs = () => {
             </p>
           </div>
           <div className="emailDiv">
-            <p>
+          <p className="tracking-widest font-pfont">
               <b className="fas fa-envelope">oewickramasingha@gmail.com</b>
             </p>
           </div>
         </div>
         <div className="contactUsColumn">
-          <div className="ocPeopleImageDiv3">
+          <div className="ocPeopleImageDiv2">
             <img src={image3} alt="Avatar" className="ocPeopleImage" />
           </div>
-          <div className="nameDivContactUs">
+          <div className="nameDivContactUs text-neutral-50 font-pfont tracking-wide text-lg">
             <p>
-              <b>Ms. Dilanga Harshani</b>
+              Ms. Dilanga Harshani
             </p>
           </div>
           <div className="roleDivContactUs">
@@ -74,28 +74,22 @@ const ContactUs = () => {
           </div>
           <div className="phoneNumberDiv">
             <p>
-              <i className="fas fa-phone-alt"></i> +94 70 1 665 087
+              <i className="fas fa-phone-alt"></i> +94 70 166 5087
             </p>
           </div>
           <div className="emailDiv">
-            <p>
-              <b className="fas fa-envelope">
-                Email: aadilangaharshani@ieee.org
-              </b>
+          <p className="tracking-widest font-pfont">
+              <b className="fas fa-envelope">aadilangaharshani@gmail.com</b>
             </p>
           </div>
         </div>
         <div className="contactUsColumn">
-          <div className="ocPeopleImageDiv4">
-            <img
-              src="https://www.w3schools.com/howto/img_avatar.png"
-              alt="Avatar"
-              className="ocPeopleImage"
-            />
-          </div>
-          <div className="nameDivContactUs">
+          <div className="ocPeopleImageDiv2">
+            <img src={image2} alt="Avatar" className="ocPeopleImage" />
+          </div>
+          <div className="nameDivContactUs text-neutral-50 font-pfont tracking-wide text-lg">
             <p>
-              <b>Ms. Buddhi Yapa</b>
+              Ms. Buddhi Yapa
             </p>
           </div>
           <div className="roleDivContactUs">
@@ -107,8 +101,8 @@ const ContactUs = () => {
             </p>
           </div>
           <div className="emailDiv">
-            <p>
-              <b className="fas fa-envelope">buddhi_yapa@ieee.org</b>
+          <p className="tracking-widest font-pfont">
+              <b className="fas fa-envelope">oewickramasingha@gmail.com</b>
             </p>
           </div>
         </div>
diff --git a/Frontend/src/Components/FAQ/FAQ.tsx b/Frontend/src/Components/FAQ/FAQ.tsx
index 1905e90..2988621 100644
--- a/Frontend/src/Components/FAQ/FAQ.tsx
+++ b/Frontend/src/Components/FAQ/FAQ.tsx
@@ -3,12 +3,12 @@ import FAQcomponent from "./FAQContainor";
 import img from "../../Assets/Astronaut/astronut 8.png";
 const FAQ = () => {
   return (
-    <div className="faqDiv">
+    <div className="faqDiv bg-secondary">
       <div className="FAQHead">
         <div
           className="shape"
         >
-          <h1>
+          <h1 className="font-sfont font-semibold tracking-wider">
             <span>Frequently Asked Questions</span>
           </h1>
         </div>
diff --git a/Frontend/src/Components/Footer/Footer.css b/Frontend/src/Components/Footer/Footer.css
index 37ba4fe..47ba5a6 100644
--- a/Frontend/src/Components/Footer/Footer.css
+++ b/Frontend/src/Components/Footer/Footer.css
@@ -1,4 +1,4 @@
-* {
+/* * {
   margin: 0;
   padding: 0;
 }
@@ -32,4 +32,4 @@
   .contactUsColumn {
     width: 50%;
   }
-}
+} */
diff --git a/Frontend/src/Components/Footer/Footer.tsx b/Frontend/src/Components/Footer/Footer.tsx
index a2ce446..c7b7369 100644
--- a/Frontend/src/Components/Footer/Footer.tsx
+++ b/Frontend/src/Components/Footer/Footer.tsx
@@ -1,52 +1,72 @@
-import ucscwie from '../../Assets/Footer/wie-ucsc.png';
-import ieeewiee from '../../Assets/Footer/ieee-wie.png';
-import "./Footer.css";
+// import ucscwie from '../../Assets/Footer/wie-ucsc.png';
+// import ieeewiee from '../../Assets/Footer/ieee-wie.png';
+import ucscwie2 from '../../Assets/Footer/wie-ucsc2.png';
+import ieeewiee2 from '../../Assets/Footer/ieee-wie2.png';
+// import logo from '../../Assets/NavBar/logo.png'
+
 
 const Footer = () => {
   return (
-    <footer className="bg-secondary text-white bg-opacity-100">
-      <div className="container mx-auto sm-auto px-6 py-12 space-x-1" id={"footer"}>
-        <div className="flex flex-col mt-1">
-{/* First Row */}
-          <div className="flex justify-center">
-            <div className="flex items-center justify-center">
-              <img className="inline-block h-60 w-50 mt-1 ml-0.5 mr-0.5 rounded-full" src={ieeewiee} alt="wie-logo" />
-            </div>
-            <div className="flex items-center justify-center" id='footerLogoDiv'>
-              <img className="inline-block h-60 w-50 mt-1 ml-0.5 mr-0.5 rounded-full" src={ucscwie} alt="wie-logo" />
-            </div>
+    <main className='flex flex-row md:flex-col py-5 md:py-12 items-center content-center justify-center bg-gradient-to-b from-secondary to-black'>
+      <div>
+        {/* Logos */}
+        <div className='flex flex-row mt-3 space-x-12 justify-center md:flex-row items-center mb-6 md:justify-center md:gap-32 md:mb-16'>
+          {/* First Image */}
+          <div>
+            <img className="inline-block w-28 mb-2 md:w-32 md:mt-1 md:ml-0.5 md:mr-0.5" src={ieeewiee2} alt="wie-logo" />
           </div>
+          {/* Second Image - Hackaholics Logo */}
+
+          {/* <div>
+            <img className="inline-block md:w-80 md:mt-10 md:ml-0.5 md:mr-0.5" src={logo} alt="wie-logo" />
+          </div> */}
 
-{/* Second Row - Text Links */}
-          <div className="flex flex-row justify-center my-4 space-x-12" id='footerLinks'>
-            <div>
-              <a href="https://github.com/IEEEUCSC">
-                <div className="text-xl hover:text-violet-400 text-white text-center transition-transform transform hover:scale-90 capitalize " id='footerLink'>Official WebSite</div>
-              </a>
-            </div>
-            <div>
-              <a href="https://github.com/IEEEUCSC">
-                <div className="text-xl hover:text-violet-400 text-white text-center transition-transform transform hover:scale-90 capitalize "id='footerLink'>LinkedIn</div>
-              </a>
-            </div>
-            <div>
-              <a href="https://github.com/IEEEUCSC">
-                <div className="text-xl hover:text-violet-400 text-white text-center transition-transform transform hover:scale-90 capitalize "id='footerLink'>Instagram</div>
-              </a>
-            </div>
-            <div>
-              <a href="https://github.com/IEEEUCSC">
-                <div className="text-xl hover:text-violet-400 text-white text-center transition-transform transform hover:scale-90 capitalize "id='footerLink'>FaceBook</div>
-              </a>
-            </div>
+          {/* Third Image */}
+          <div>
+            <img className="inline-block w-24 md:w-32 md:mt-1 md:ml-0.5 md:mr-0.5" src={ucscwie2} alt="wie-logo" />
           </div>
+
         </div>
-        <p className="text-xm text-cyan-950 mt-5 hover:text-tertiary text-center" id='footerRights'>
-          © {new Date().getFullYear()} IEEE- UCSC All rights reserved.
-        </p>
+
+        {/* Socila Links */}
+        <div className='flex flex-col text-xl gap-y-2 mb-5 md:flex-row md:justify-center md:gap-14 text-white font-pfont tracking-widest md:text-2xl'>
+          <div className=''>
+            <a href="https://github.com/IEEEUCSC">
+              <div className="md:text-1xl md:p-1 hover:text-violet-400 text-white text-center transition-transform transform hover:scale-90 capitalize ">WebSite</div>
+            </a>
+          </div>
+          <div>
+            <a href="https://github.com/IEEEUCSC">
+              <div className="md:text-2xl md:p-1 hover:text-violet-400 text-white text-center transition-transform transform hover:scale-90 capitalize ">LinkedIn</div>
+            </a>
+          </div>
+          <div>
+            <a href="https://github.com/IEEEUCSC">
+              <div className="md:text-2xl md:p-1 hover:text-violet-400 text-white text-center transition-transform transform hover:scale-90 capitalize ">Instagram</div>
+            </a>
+          </div>
+          <div>
+            <a href="https://github.com/IEEEUCSC">
+              <div className="md:text-2xl md:p-1 hover:text-violet-400 text-white text-center transition-transform transform hover:scale-90 capitalize ">FaceBook</div>
+            </a>
+          </div>
+
+        </div>
+
+        {/* Copy right Part */}
+        <div>
+          <p className="md:text-base text-base items-center content-center justify-center font-pfont ml-8 text-tertiary md:mt-14 hover:text-neutral-500 hover:font-thin md:text-center">
+            © {new Date().getFullYear()} IEEE - UCSC All Rights Reserved.
+          </p>
+
+        </div>
+
+
+
       </div>
-    </footer>
+    </main>
+
   );
 };
 
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/Frontend/src/Components/Home/Home.tsx b/Frontend/src/Components/Home/Home.tsx
index f4b0942..aeac927 100644
--- a/Frontend/src/Components/Home/Home.tsx
+++ b/Frontend/src/Components/Home/Home.tsx
@@ -42,46 +42,46 @@ const Home = () => {
 
     return (
         <motion.main
-            className="flex flex-col h-screen items-center justify-center text-slate-50 bg-secondary "
+            className="flex flex-col h-screen items-center justify-center text-slate-50 font-bold bg-secondary "
             initial="hidden"
             animate={controls}
             variants={containerVariants}
             id='homeComponent'
         >
             <motion.div variants={textVariants}>
-                <div className="text-white font-sfont text-lg md:text-xl lg:text-2xl tracking-wide text-center hover:text-orange-100">
+                <div className="text-white font-sfont text-xl md:text-2xl md:tracking-widest tracking-wide text-center hover:text-orange-100">
                     <p>IEEE WIE STUDENT BRANCH</p>
                     <p>AFFINITY GROUP OF UCSC</p>
                 </div>
             </motion.div>
 
             <motion.div variants={textVariants}>
-                <div className="mt-3 md:mt-5 lg:mt-10">
-                    <h1 className="text-white tracking-widestone text-3xl md:text-5xl lg:text-8xl font-pfont">
+                <div className="mt-8 md:mt-5">
+                    <h1 className="text-white tracking-widest text-4xl md:text-8xl landing-8 font-pfont">
                         HACKAHOLICS
                     </h1>
                 </div>
             </motion.div>
 
             <motion.div variants={textVariants}>
-                <div className="mt-2 md:mt-3 lg:mt-4">
+                <div className="mt-5 md:mt-3 ">
                     <h1 className="text-white tracking-wide text-sm md:text-lg lg:text-2xl font-sfont text-center">
                         For the girls with innovative ideas
                     </h1>
                 </div>
             </motion.div>
 
-            <motion.div variants={buttonVariants} className="flex flex-col md:flex-row justify-center items-center">
+            <motion.div variants={buttonVariants} className="flex flex-row md:flex-row justify-center items-center space-x-5">
 
-                <div className="mt-3 md:mt-1 lg:mt-10 md:mr-4 z-50">
-                    <div className="hover:text-primary text-white font-bold">
+                <div className="mt-10 md:mt-1 lg:mt-10 md:mr-4">
+                    <div className="">
                         <a
                             href="https://github.com/IEEEUCSC"
                             className="relative items-center justify-start inline-block p-6 px-6 py-3 overflow-hidden font-medium rounded-full group"
                         >
                             <span className="w-32 h-32 rotate-45 translate-x-12 -translate-y-2 absolute left-0 top-0 bg- opacity-[3%]"></span>
                             <span className="absolute top-0 left-0 w-48 h-48 -mt-1 transition-all duration-500 ease-in-out rotate-45 -translate-x-56 -translate-y-24 bg-purple-200 opacity-100 group-hover:-translate-x-8"></span>
-                            <span className="relative w-full text-left text-white-100 transition-colors duration-200 ease-in-out group-hover:text-secondary tracking-wide font-bold">
+                            <span className="relative w-full text-left text-white-100 transition-colors duration-200 ease-in-out group-hover:text-secondary tracking-wider">
                                 Delegate Book
                             </span>
                             <span className="absolute inset-0 border-2 border-purple-100 rounded-full hover:font-bold tracking-wide"></span>
@@ -89,16 +89,16 @@ const Home = () => {
                     </div>
                 </div>
 
-                <div className="mt-3 md:mt-1 lg:mt-10 md:mr-4">
-                    <div className="hover:text-primary text-white font-bold">
+                <div className="mt-10 md:mt-1 lg:mt-10 md:mr-4">
+                    <div className="">
                         <a
                             href="https://github.com/IEEEUCSC"
-                            className="relative items-center justify-start inline-block p-5 px-10 py-3 overflow-hidden font-medium rounded-full group"
+                            className="relative items-center justify-start inline-block p-6 px-6 py-3 overflow-hidden font-medium rounded-full group"
                         >
-                            <span className="w-36 h-32 rotate-45 translate-x-14 -translate-y-3 absolute left-0 top-0 bg- opacity-[3%]"></span>
+                            <span className="w-32 h-32 rotate-45 translate-x-12 -translate-y-2 absolute left-0 top-0 bg- opacity-[3%]"></span>
                             <span className="absolute top-0 left-0 w-48 h-48 -mt-1 transition-all duration-500 ease-in-out rotate-45 -translate-x-56 -translate-y-24 bg-purple-200 opacity-100 group-hover:-translate-x-8"></span>
-                            <span className="relative w-full text-left text-white-100 transition-colors duration-200 ease-in-out group-hover:text-secondary tracking-wide font-bold">
-                                Register
+                            <span className="relative w-full text-left text-white-100 transition-colors duration-200 ease-in-out group-hover:text-secondary tracking-wider">
+                                Register Now
                             </span>
                             <span className="absolute inset-0 border-2 border-purple-100 rounded-full hover:font-bold tracking-wide"></span>
                         </a>
diff --git a/Frontend/src/Components/Introduction/Intro.tsx b/Frontend/src/Components/Introduction/Intro.tsx
index ec2d6a2..fe98edc 100644
--- a/Frontend/src/Components/Introduction/Intro.tsx
+++ b/Frontend/src/Components/Introduction/Intro.tsx
@@ -5,24 +5,24 @@ import Image2 from "../../Assets/Astronaut/astronut 5.png";
 
 export default function Intro() {
   return (
-    <div className="Intro" id={"intro"}>
+    <div className="Intro bg-secondary" id={"intro"}>
       <div className="IntroHead">
         <div
           className="shape"
         >
-          <h1>
+          <h1 className="font-sfont font-semibold tracking-wider">
             <span>What is Hackaholics 6.0 ?</span>
           </h1>
         </div>
       </div>
-      <div className="introDetailsAndImageOne">
+      <div className="introDetailsAndImageOne ">
         <div className="text">
-          <p>
-            <b>Hackaholics 6.0</b> is an{" "}
-            <b>Inter-University Girls’ Only Hackathon </b>
+          <p className="text-neutral-50 tracking-wider landing-2 font-pfont font-thin">
+            <b className="tracking-widest text-white">Hackaholics 6.0</b> is an{" "}
+            <b className="tracking-wider text-white">Inter-University Girls’ Only Hackathon </b>
             organized by the{" "}
-            <b>IEEE WIE Student Branch Affinity Group of UCSC</b>, held for the
-            sixth consecutive year. This <b>ideathon</b> empowers female
+            <b className="tracking-widest text-white">IEEE WIE Student Branch Affinity Group of UCSC</b>, held for the
+            sixth consecutive year. This <b className="tracking-widest text-white">ideathon</b> empowers female
             undergraduates to discuss and develop solutions to critical issues
             in our society through cooperation, collaboration, and coordination.
           </p>
@@ -44,17 +44,17 @@ export default function Intro() {
           />
         </div>
         <div className="text">
-          <p>
-            The event commences with a <b>virtual scholarship awareness session</b> for
-            undergraduates, followed by a <b>proposal submission phase</b> for <b>teams of
-            three students</b> from the <b>same university</b>, focusing on innovative
-            ideas within given topics. The <b>top 10 teams</b> are advancing to the
-            next round where they prepare <b>UI prototypes</b> and <b>presentations</b>. The
-            <b> physical competition on March 2nd, 2024</b>, involves <b>presenting
+        <p className="text-neutral-50 tracking-wider landing-2 font-pfont font-thin z-40">
+            The event commences with a <b className="tracking-widest text-white">virtual scholarship awareness session</b> for
+            undergraduates, followed by a <b className="tracking-widest text-white">proposal submission phase</b> for <b>teams of
+            three students</b> from the <b className="tracking-widest text-white">same university</b>, focusing on innovative
+            ideas within given topics. The <b className="tracking-widest text-white">top 10 teams</b> are advancing to the
+            next round where they prepare <b className="tracking-widest text-white">UI prototypes</b> and <b className="tracking-widest text-white">presentations</b>. The
+            <b className="tracking-widest text-white"> physical competition on March 2nd, 2024</b>, involves <b className="tracking-widest text-white">presenting
             proposed ideas</b>, with the top five teams selected based on various
-            criteria. These <b>finalists</b> then tackle a <b>scenario challenge</b> presented
-            by judges, and <b>winners</b> are determined by industry experts, receiving
-            <b> cash prizes</b>.
+            criteria. These <b className="tracking-widest text-white">finalists</b> then tackle a <b className="tracking-widest text-white">scenario challenge</b> presented
+            by judges, and <b className="tracking-widest text-white">winners</b> are determined by industry experts, receiving
+            <b className="tracking-widest text-white"> cash prizes</b>.
           </p>
         </div>
       </div>
diff --git a/Frontend/src/Components/NavBar/NavBar.tsx b/Frontend/src/Components/NavBar/NavBar.tsx
index 1a7b0cf..28f4cdb 100644
--- a/Frontend/src/Components/NavBar/NavBar.tsx
+++ b/Frontend/src/Components/NavBar/NavBar.tsx
@@ -5,6 +5,8 @@ import MenuIcon from "@mui/icons-material/Menu";
 import CloseIcon from "@mui/icons-material/Close";
 import mobileLogo from "../../Assets/NavBar/as-lpgp.png";
 import { HashLink } from "react-router-hash-link";
+import { Link } from "react-scroll";
+import { ClassNames } from "@emotion/react";
 
 const Navbar: React.FC = () => {
     const [isOpen, setIsOpen] = useState(false);
@@ -15,28 +17,31 @@ const Navbar: React.FC = () => {
 
     return (
         <div
-            className={`fixed top-0 py- w-screen bg-secondary bg-opacity-90 z-10 ${isOpen ? "" : "overflow-hidden"
+            className={`fixed top-0  w-screen bg-secondary bg-opacity-15 z-20 ${isOpen ? "" : "overflow-hidden"
                 }`}
         >
-            <div className="flex flex-col lg:flex-row justify-between items-right ml-0 lg:ml-1 mr-1 md:mr-0 mb-0 px-2 md:px-9 py-5 md:py-5">
+            <div className="flex flex-col md:flex-row justify-between items-right ml-0 mt-2 mr-1 md:mr-1 mb-1 md:mb-1 px-2 md:px-9 py-5 md:pt-3 md:pb-10">
                 <div className="flex items-center">
                     <a href="/" className="block md:hidden">
                         <img
-                            className="relative inline-block h-20 ml-auto -mt-2"
+                            className="relative inline-block h-15 w-9 ml-8 mt-0"
                             src={mobileLogo}
                             alt="mobile-logo"
                         />
                     </a>
 
-                    <a href="https://github.com/IEEEUCSC" className="hidden md:block mt-1">
+                    <a
+                        href="https://github.com/IEEEUCSC"
+                        className="hidden md:block mt-1"
+                    >
                         <img
-                            className="inline-block h-10 ml-2 mt-0 md:mr-10"
+                            className="absolute inline-block h-14 ml-0 mt-0 "
                             src={logo}
                             alt="wie-logo"
                         />
                     </a>
 
-                    <div className="md:hidden flex justify-end items-end absolute top-7 right-10">
+                    <div className="md:hidden mt-2 flex justify-end items-end absolute top-5 right-10">
                         <IconButton
                             onClick={toggleMenu}
                             color="inherit"
@@ -48,21 +53,27 @@ const Navbar: React.FC = () => {
                 </div>
                 <div className="">
                 <div
-                    className={`md:flex flex-col md:flex-row md:space-y-0 space-y-1 text-xl  flex justify-end items-center absolute top- right-10 whitespace-nowrap ${isOpen ? "block box-border border-primary h-60 w-44  md:absolute md:items-center md:top-7 md:right-10 border-2 font-pfont rounded-lg" : "hidden"
+                    className={`md:flex flex-col md:flex-row font-sfont md:space-x-1 md:text-base md:space-y-0 space-y-2 md:ml text-base md:tracking-wide flex justify-end items-center absolute top- right-10 whitespace-nowrap ${isOpen ? "py-4 block box-border border-tertiary  bg-white bg-transparent shadow-xl text-white row-gap-1 md:absolute md:items-center  md:right-10 border-2 font-pfont rounded-lg" : "hidden"
                         }`}
                 >
                     {[
-                        { label: "Home", link: "/#home" },
-                        { label: "Time Line", link: "/#time" },
-                        { label: "Prizes", link: "/#price" },
-                        { label: "Register Now", link: "https://github.com/IEEEUCSC" },
+                        
+                        { label: "HOME", link: "" },
+                        { label: "INTRO", link: "" },
+                        { label: "TIMELINE", link: "" },
+                        { label: "FAQ", link: "" },
+                        { label: "PRIZES", link: "" },
+                        { label: "MEMORIES", link: "" },
+                        { label: "CONTACT US", link: "" },
+                        { label: "REGISTER NOW", link: ""},
+                      
                     ].map((item, index) => (
 
-                        !(item.label === "Register Now" && !isOpen) && (
-                            <a key={index} href={item.link} className="group relative md:mr-9">
-                                <div className="py-3 md:py-2 px-3 md:mt-2 z-30 indigo-950 text-white hover:text-purple-300 active:bg-indigo-600 active:text-white text-center">
+                        !(item.label === ("Register Now" && "REGISTER NOW") && !isOpen) && (
+                            <a key={index} href={item.link} className="group relative ">
+                                <div className="md:py-1 px-3 md:mt-2 z-100 indigo-950 md:text-white md:mb-2 hover:text-purple-300 active:bg-indigo-600 active:text-white text-center">
                                     {item.label}
-                                    <div className="absolute inset-x-0 bottom-0 h-0.5 bg-white transition-all duration-300 transform scale-x-0 group-hover:scale-x-100 active:bg-indigo-600 active:text-white"></div>
+                                    <div className="absolute inset-x-0 z-100 bottom-0 h-0.5 bg-white transition-all duration-300 transform scale-x-0 group-hover:scale-x-100 active:bg-indigo-600 active:text-white"></div>
                                 </div>
                             </a>
                         )
@@ -72,7 +83,7 @@ const Navbar: React.FC = () => {
                     {!isOpen && (
                     <HashLink smooth to="/team" className="relative rounded px-3 py-2 overflow-hidden group bg-secondary hover:bg-gradient-to-r hover:from-violet-700 hover:to-purple-900 text-white hover:ring-1 hover:ring-offset-1 hover:ring-white transition-all ease-out duration-500 md:align-middle md:items-center mx-auto">
                         <span className="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-tertiary opacity-10 rotate-12 group-hover:-translate-x-40 ease"></span>
-                        <span className="relative text-center">Register Now</span>
+                        <span className="relative text-center">REGISTER NOW</span>
                     </HashLink>
 
                     )}
@@ -83,4 +94,4 @@ const Navbar: React.FC = () => {
     );
 };
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/Frontend/src/Components/Prizes/Prizes.tsx b/Frontend/src/Components/Prizes/Prizes.tsx
index 12f8104..a117ff0 100644
--- a/Frontend/src/Components/Prizes/Prizes.tsx
+++ b/Frontend/src/Components/Prizes/Prizes.tsx
@@ -8,7 +8,7 @@ const Prizes = () => {
     <div className="prizeDiv" id ={"prize"}>
       <div className="prizeHead">
         <div className="shape">
-          <h1>
+        <h1 className="font-sfont font-semibold tracking-wider">
             <span>Awards for Winners</span>
           </h1>
         </div>
diff --git a/Frontend/src/Components/Timeline/Timeline.tsx b/Frontend/src/Components/Timeline/Timeline.tsx
index 63ea5d0..8937a9e 100644
--- a/Frontend/src/Components/Timeline/Timeline.tsx
+++ b/Frontend/src/Components/Timeline/Timeline.tsx
@@ -85,7 +85,7 @@ const Timeline: React.FC = () => {
         className={`timeline-4 ${index % 2 === 0 ? "left" : "right"}-4`}
         key={index}
       >
-        <div className={`card gradient-custom${index % 2 === 0 ? "-4" : ""}`}>
+        <div className={` opacity-90 rounded card gradient-custom${index % 2 === 0 ? "-4" : ""}`}>
           <div className="card-body p-4">
             <i className="fas fa-brain fa-2x mb-3"></i>
             <b>
@@ -110,7 +110,7 @@ const Timeline: React.FC = () => {
             className="shape"
             id="timeLineComponentShape"
           >
-            <h1>
+            <h1 className="font-sfont font-semibold tracking-wider">
               <span>Hackaholics 6.0 Timeline</span>
             </h1>
           </div>
diff --git a/Frontend/tailwind.config.js b/Frontend/tailwind.config.js
index 5e6ab6b..a281b82 100644
--- a/Frontend/tailwind.config.js
+++ b/Frontend/tailwind.config.js
@@ -14,9 +14,6 @@ module.exports = {
         'pfont': ['source-sans-pro'],
         'sfont': ['raleway'],
     },
-    letterSpacing: {
-      widestone: '.3em',
-    },
   },
   plugins: [],
 }