diff --git a/src/App.js b/src/App.js
index 44a5f9c..cdd1469 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,3 @@
-import Appbar from "./components/Appbar";
 import { Box, useMediaQuery, useTheme } from "@mui/material";
 import Home from "./pages/Home/Home";
 import About from "./pages/About/About";
@@ -13,18 +12,16 @@ import retro from "./themes/retro";
 import React, { useEffect, useRef } from 'react';
 import useGsap, { appear } from "./hooks/useGsap";
 import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import LogoText from "./assets/svg/logo_text.svg";
-import LogoMascot from "./assets/svg/logo_mascot.svg";
 import Gallery from "./pages/Gallery/Gallery";
 import Lenis from "@studio-freight/lenis";
 import Contact from "./pages/Contact/Contact";
 import Events from "./pages/Events/Events";
 import Countdown from "./components/page/beforerelease";
 import Ambassador from "./pages/Ambassadors";
-import BeforeReleaseLayout from "./components/page/layout";
 import Team from './pages/Team/Team';
 import Game from './pages/Game/Game';
+import ScrollTrigger from 'gsap/ScrollTrigger'
+
 function App() {
   const root = useRef();
   const theme = useTheme();
@@ -46,6 +43,7 @@ function App() {
       ease: "expo.out",
     });
 
+
     if (!mobile)
       timeline.fromTo(
         ".appbar .menu",
@@ -75,13 +73,76 @@ function App() {
     requestAnimationFrame(raf);
 
   });
+
+  useEffect(() => {
+
+    const sections = gsap.utils.toArray('section.section')
+
+    gsap.to('.animateImage', {
+      scrollTrigger: {
+        scrub: true
+      },
+      y: (i, target) => -ScrollTrigger.maxScroll(window) * target.dataset.speed,
+      ease: "none",
+    });
+
+
+
+    sections.forEach((section, index) => {
+      const box = section.querySelectorAll('.gradient-box')
+      const title = section.querySelector('.gradient-text')
+      const images = section.querySelectorAll('.animateImage')
+
+      const timeline = gsap.timeline({
+        ease: 'power4.out',
+        scrollTrigger: {
+          trigger: box,
+          start: 'top center',
+          end: 'bottom center',
+          toggleActions: 'play none none reverse',
+          }
+      })
+
+
+
+
+
+
+
+
+      timeline.from(title,{
+        opacity: 0
+      })
+
+
+
+
+
+      timeline.fromTo(
+        box,
+        {
+          x: -100
+        },
+        {
+          x: 0,
+          stagger: 0.1,
+          duration: 0.5,
+          ease: 'power4.in',
+        }, '<'
+      );
+
+
+
+
+
+
+    })
+  }, []);
   return (
     <ThemeProvider theme={retro("dark")}>
       <Box
         ref={root}
-        sx={{
-          bgcolor: "background.default",
-        }}
+
         className="App"
       >
         <Countdown />
@@ -116,4 +177,10 @@ function App() {
   );
 }
 
+export const animateOnScroll = (trigger, target) => {
+
+
+};
+
+
 export default App;
diff --git a/src/assets/gif/background.gif b/src/assets/gif/background.gif
index 7f5bce8..17dd259 100644
Binary files a/src/assets/gif/background.gif and b/src/assets/gif/background.gif differ
diff --git a/src/assets/jpg/bg-new.png b/src/assets/jpg/bg-new.png
new file mode 100644
index 0000000..3105fee
Binary files /dev/null and b/src/assets/jpg/bg-new.png differ
diff --git a/src/assets/jpg/pattern.png b/src/assets/jpg/pattern.png
new file mode 100644
index 0000000..e580285
Binary files /dev/null and b/src/assets/jpg/pattern.png differ
diff --git a/src/assets/png/planet-2.png b/src/assets/png/planet-2.png
new file mode 100644
index 0000000..b25bb00
Binary files /dev/null and b/src/assets/png/planet-2.png differ
diff --git a/src/assets/png/planet.png b/src/assets/png/planet.png
new file mode 100644
index 0000000..31d78b9
Binary files /dev/null and b/src/assets/png/planet.png differ
diff --git a/src/assets/png/robot.png b/src/assets/png/robot.png
new file mode 100644
index 0000000..106a7fb
Binary files /dev/null and b/src/assets/png/robot.png differ
diff --git a/src/assets/png/satelite.png b/src/assets/png/satelite.png
new file mode 100644
index 0000000..9493326
Binary files /dev/null and b/src/assets/png/satelite.png differ
diff --git a/src/assets/png/ship.png b/src/assets/png/ship.png
new file mode 100644
index 0000000..9488ce6
Binary files /dev/null and b/src/assets/png/ship.png differ
diff --git a/src/components/Appbar.js b/src/components/Appbar.js
index d051e28..d06d0d9 100644
--- a/src/components/Appbar.js
+++ b/src/components/Appbar.js
@@ -58,26 +58,6 @@ const Appbar = ({ isGuest = false }) => {
   const color = theme.palette.text.primary;
   const ref = useRef();
 
-  // useLayoutEffect(() => {
-  //   const timeline = gsap.timeline({
-  //     scrollTrigger: {
-  //       trigger: '.appbar-trigger',
-  //       markers: true,
-  //       start: 'top top',
-  //       end: '+=1000',
-  //       scrub: true,
-  //     }
-  //   })
-  //
-  //   timeline.from('.content', {
-  //     scale: 1,
-  //     left: 50,
-  //     top: 0,
-  //     duration: 2
-  //   })
-  //
-  // }, []);
-
 
   if (isGuest)
     navLinks = navLinks.filter(
@@ -144,7 +124,6 @@ const FullscreenNav = () => {
       <Box sx={{
         backgroundColor: 'black'
       }}>
-        <Patternbg>
 
         <Spacer size='md'/>
         <Container maxWidth='md'>
@@ -194,7 +173,6 @@ const FullscreenNav = () => {
             <FiX />
           </IconButton>
         </Container>
-        </Patternbg>
       </Box>
     </Dialog>
     </div>
diff --git a/src/components/Spacer.js b/src/components/Spacer.js
index 2046a0b..8baf950 100644
--- a/src/components/Spacer.js
+++ b/src/components/Spacer.js
@@ -21,7 +21,7 @@ const Spacer = ({ size }) => {
 
     const spacerSize = getSize(size);
 
-    return <Box sx={{ m: `${spacerSize}rem` }} />;
+    return <Box sx={{ p: `${spacerSize}rem` }} />;
 };
 
 export default Spacer;
diff --git a/src/components/common/footer.js b/src/components/common/footer.js
index bb5db54..c55c04e 100644
--- a/src/components/common/footer.js
+++ b/src/components/common/footer.js
@@ -48,41 +48,6 @@ const Footer = () => {
 
 
 
-  useGsap('.footer', ()=> {
-    const timeline = gsap.timeline({
-      scrollTrigger: {
-        trigger: '.footer',
-        // markers: true,
-        scrub: true,
-      }
-    })
-
-    timeline.from('.content', {
-      scale: 3,
-      left: 0,
-      top: 0,
-      rotateZ: 360,
-      duration: 2,
-      ease: 'expo.inOut'
-    })
-
-  })
-
-  useLayoutEffect(() => {
-    if (!layoutState || !q) return;
-
-    const flip = Flip.from(layoutState, {
-      duration: 0.6,
-      // fade: true,/
-      absolute: true,
-      targets: q(".content"),
-    });
-
-    return () => {
-      flip.kill();
-    };
-  }, [layoutState]);
-
   const handleClick = () => {
     setToggle(prev => !prev)
     const containers = q(".content")
@@ -101,7 +66,7 @@ const Footer = () => {
       className='footer'
       ref={ref}
     >
-      <Container maxWidth="lg">
+      <Container maxWidth="lg" >
         <Grid container spacing={3} justifyContent="space-between">
           <Grid item xs={12} sm={6} md={3}>
             <Typography variant="h6">Contact Us</Typography>
@@ -139,7 +104,6 @@ const Footer = () => {
               </IconButton>
             </a>
           </Grid>
-          <Button onClick={handleClick}>AnAS</Button>
           <Grid item xs={12} sm={6} md={3}>
           <Typography variant="h6">Quick Links</Typography>
           {linksData.map((link, index) => (
diff --git a/src/components/common/gradientbox.js b/src/components/common/gradientbox.js
index 770094a..123e9cb 100644
--- a/src/components/common/gradientbox.js
+++ b/src/components/common/gradientbox.js
@@ -5,7 +5,7 @@ import barcode from '../../assets/png/barcode.webp'
 const GradientBox = ({
   children,
   height = "auto",
-  background = "linear-gradient(to top left, #00b8ff, transparent 75%)",
+  background = "black linear-gradient(to top left, #00b8ff, transparent 75%)",
   img = null,
   rotate = "-20deg",
   size = "medium",
@@ -15,6 +15,9 @@ const GradientBox = ({
 }) => {
 
   return (
+    <Box
+      className={className}
+    >
     <Box sx={{
       overflow: 'hidden',
       position: 'relative',
@@ -65,7 +68,6 @@ const GradientBox = ({
       height={height}
       position="relative"
       overflow="hidden"
-      className={className}
       // Add the background image here
       sx={{
         '::after': {
@@ -88,8 +90,8 @@ const GradientBox = ({
           content: "''",
           position: "absolute",
           width: '100%',
-          height: '250px',
-          bottom: 0,
+          height: '100%',
+          top: 0,
           right: 0,
           backgroundImage: `url(${img})`,
           backgroundSize: "cover",
@@ -97,6 +99,7 @@ const GradientBox = ({
           opacity: 1, // Adjust opacity as needed
           zIndex: -1,
           backgroundRepeat: 'no-repeat',// Place it behind the main content
+          filter: 'blur(2px)'
         },
 
       }}
@@ -120,6 +123,7 @@ const GradientBox = ({
       )}
     </Box>
     </Box>
+    </Box>
   );
 };
 
diff --git a/src/components/common/gradienttext.js b/src/components/common/gradienttext.js
index 5103d03..c8087a8 100644
--- a/src/components/common/gradienttext.js
+++ b/src/components/common/gradienttext.js
@@ -22,6 +22,7 @@ const GradientText = ({ primary, secondary, ...props }) => {
       fontFamily="typography.fontFamily"
       letterSpacing="-1px"
       fontSize="48px"
+      className='gradient-text'
       lineHeight="1.2" // Adjust the line height as needed for better appearance
       sx={{
         background: boxBackground, // Gradient colors from top left to bottom right
diff --git a/src/components/common/patternbg.js b/src/components/common/patternbg.js
index a53641d..7188989 100644
--- a/src/components/common/patternbg.js
+++ b/src/components/common/patternbg.js
@@ -1,13 +1,45 @@
 import React from 'react';
 import dots from '../../assets/png/dots-2.png';
-import { Box } from '@mui/material';
+import { Box, Container, Typography } from '@mui/material';
+import satelite from '../../assets/png/satelite.png'
+import planet from '../../assets/png/planet.png'
+import robot from '../../assets/png/ship.png'
+import planet2 from '../../assets/png/planet-2.png'
 
-const Patternbg = ({children}) => {
+const Patternbg = ({ children }) => {
   return (
-    <Box sx={{
-      backgroundImage: `url(${dots})`
-    }}>
-      {children}
+    <Box overflow='hidden' component='section' className='section' position='relative' bgcolor='black'>
+
+      {/* Left-side divs */}
+      <Container maxWidth='lg' sx={{position: 'relative'}}>
+        <div style={{ position: 'absolute', left: '-100px', top: '20%', zIndex: 0, filter: 'blur(8px)'}}>
+          <img width='400px' src={satelite} alt="Random content 1" className="animateImage" data-speed=".1"/>
+        </div>
+        <div style={{ position: 'absolute', left: '-20px', top: '20%', zIndex: 1 }}>
+        <img width='200px' src={satelite} alt="Random content 1" className="animateImage" data-speed=".4"/>
+      </div>
+      <div style={{ position: 'absolute', left: '-20px', bottom: '40%', zIndex: 1 }}>
+        <img  width='144px' src={planet2} alt="Random content 2" className="animateImage" data-speed=".2"/>
+      </div>
+
+      {/* Right-side divs */}
+      <div style={{ position: 'absolute', right: '-20px', top: '40%', zIndex: 1, transform: 'rotateZ(180deg)' }}>
+        <img width='140px' src={robot} alt="Random content 3" className="animateImage" data-speed=".3"/>
+      </div>
+      <div style={{ position: 'absolute', right: '-20px', bottom: '20%', zIndex: 1 }}>
+        <img  width='144px' src={planet} alt="Random content 4" className="animateImage" data-speed=".2"/>
+      </div>
+
+        <div style={{ position: 'absolute', right: '-100px', bottom: '20%', zIndex: 0, filter: 'blur(8px)' }}>
+          <img  width='400px' src={planet} alt="Random content 4" className="animateImage" data-speed=".1"/>
+        </div>
+
+      {/* Main content */}
+      <Box zIndex={0} position='relative'>
+        {children}
+      </Box>
+      </Container>
+
     </Box>
   );
 };
diff --git a/src/components/home/about.js b/src/components/home/about.js
index 3fe357b..21615dd 100644
--- a/src/components/home/about.js
+++ b/src/components/home/about.js
@@ -1,11 +1,11 @@
-import { Container, Grid, Stack, Typography } from '@mui/material';
+import { Container, Grid, Skeleton, Stack, Typography } from '@mui/material';
 import GradientText from '../common/gradienttext';
 import Spacer from '../Spacer';
 import GradientBox from '../common/gradientbox';
 import Iphone12 from '../../assets/png/iPhone 12 _ 12 Pro.png';
 import BoxContent from '../common/boxcontent';
 import Samsung from '../../assets/png/Samsung Galaxy Note20 Ultra 5G.png';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import Box from '@mui/material/Box';
 import Home from '../../assets/svg/Dayflow Party Time.svg';
@@ -15,6 +15,7 @@ import gsap from 'gsap';
 import EmblaCarousel from '../common/carousel';
 import dots from '../../assets/png/dots-2.png'
 import Patternbg from '../common/patternbg';
+import { useTimeline } from '../../hooks/useTimeline';
 
 const UserBoxContainer = styled(Box)`
   display: flex;
@@ -59,50 +60,54 @@ const SocialMediaLink = styled(Typography)`
 
 const About = () => {
   const eventsRef = useRef(null);
+  const { data, isLoading, isError, isSuccess } = useTimeline()
+
+
+  useEffect(()=> {
+    if(isSuccess){
+      const timeline = gsap.timeline({
+        scrollTrigger: {
+          trigger: '.trigger',
+          start: 'top top',
+          end: '+=1000', //this was 2000 intially, changed to get it right for 1 card
+          pin: '.trigger',
+          pinSpacing: true,
+          scrub: 1,
+          immediateRender: false,
+        },
+      });
+
+      // Calculate the height difference (scroll distance) for the left section
+      const scrollDistance = eventsRef.current.scrollWidth;
+
+// Create a new timeline to scroll the left section
+      timeline.to(eventsRef.current, {
+        x: -scrollDistance,  // Use negative to scroll to the right
+      });
+    }
+  }, [data])
 
-  useGsap('#about-root', () => {
-    const timeline = gsap.timeline({
-      scrollTrigger: {
-        trigger: '.trigger',
-        start: 'top top',
-        end: '+=500', //this was 2000 intially, changed to get it right for 1 card
-        pin: '.trigger',
-        pinSpacing: true,
-        scrub: 1,
-        immediateRender: false,
-      },
-    });
-
-    // Calculate the height difference (scroll distance) for the left section
-    const scrollDistance = eventsRef.current.scrollHeight - window.innerHeight;
-
-    // Create a new timeline to scroll the left section
-    timeline.to(eventsRef.current, {
-      y: -scrollDistance,
-    });
-    animateOnScroll('.title', '.gradient-box');
-  });
   return (
 <Patternbg>
     <Container id="about-root" maxWidth="lg">
+      <Spacer size='xl' />
+
       <GradientText className="title" primary="Timeline" secondary="Live Events." />
       <Spacer size="sm" />
       <Box className="trigger">
         <Grid container spacing={1.5}>
-          <Grid item xs={14} md={5}>
-            <Box ref={eventsRef}>
-              <Box sx={{ height: '100vh' }}>
-                <PairOfEvents key={true} /> <DummyPairOfEvents />
-                <DummyPairOfEvents />
+          <Grid item xs={12} md={12} overflow='hidden'>
+            <Box ref={eventsRef} >
+              <Box display='flex' gap={1} >
+                {
+                  isSuccess &&                    data.map((_) => (<TimelineEvent event={_} />))
+
+                }
+
               </Box>{' '}
             </Box>{' '}
           </Grid>{' '}
-          <Grid item xs={12} md={7} sx={{
-            height: {
-              md: 'auto',
-              xs: '400px'
-            }
-          }}>
+          <Grid item xs={12} md={12} height='100%'>
               <iframe
                 style={{
                   borderRadius: '18px',
@@ -112,7 +117,7 @@ const About = () => {
                 src="https://map.proxi.co/r/2HgoqtF9Ep_1pZvrvUW7"
                 allow="geolocation; clipboard-write"
                 width="100%"
-                height="100%"
+                height="450px"
                 allowFullScreen
               >
                 {' '}
@@ -121,24 +126,26 @@ const About = () => {
         </Grid>{' '}
       </Box>{' '}
     </Container>
+  <Spacer size="xl" />
+
 </Patternbg>
   );
 };
 
-const PairOfEvents = (key) => {
+const TimelineEvent = ({ event }) => {
+  const img = event.image_url
+  const name = event.name
+  const location = event.location
+  const time = event.time
   return (
     <Box my={1}>
-      <Stack direction="column">
-        <GradientBox img="https://res.cloudinary.com/det9aw4gh/image/upload/v1694977732/FlashMob.jpg">
+        <GradientBox width='300px' height='300px' img={img}>
           <BoxContent
-            key={key}
-            width="65%"
-            title="Flash Mob"
-            description="Date: 19th October 2023"
-            description2="Venue: CIDS 3.45 PM Onwards"
+            title={name}
+            description={time}
+            description2={location}
           />
         </GradientBox>{' '}
-      </Stack>{' '}
     </Box>
   );
 };
diff --git a/src/components/home/cta.js b/src/components/home/cta.js
index 899fac7..8e8c364 100644
--- a/src/components/home/cta.js
+++ b/src/components/home/cta.js
@@ -1,7 +1,7 @@
 import Box from "@mui/material/Box";
 import { Button, Container, Paper, Stack, Typography } from "@mui/material";
 import GradientText from "../common/gradienttext";
-import Background from "../../assets/gif/space.gif";
+import Background from "../../assets/jpg/bg-new.png";
 import { InlineWidget, PopupButton, PopupWidget } from "react-calendly";
 import { useEffect, useRef } from "react";
 import Spacer from "../Spacer";
@@ -57,7 +57,7 @@ const CTA = () => {
       sx={{
         backgroundImage: `linear-gradient(to bottom right, rgba(0, 0, 0, 0.8) 20%, transparent), url(${Background})`, // Gradient from top left to bottom right, darkening the background image
         padding: "80px 0",
-        backgroundSize: "120%",
+        backgroundSize: "cover",
         backgroundPosition: "center",
         boxShadow:
           "inset 0px 40px 30px -20px #1B1B1E, inset 0px -40px 30px -20px rgba(0, 0, 0, 0.8)",
diff --git a/src/components/home/hero.js b/src/components/home/hero.js
index f5712d5..770d03b 100644
--- a/src/components/home/hero.js
+++ b/src/components/home/hero.js
@@ -91,29 +91,11 @@ const Hero = () => {
         ease: "expo.inOut" // Smooth easing function for a more natural hover effect
       });
 
+
     },
     []
   );
 
-
-  useEffect(() => {
-    const element = containerRef.current;
-
-    const handleScroll = () => {
-      if (element) {
-        const scrollY = window.scrollY;
-        gsap.from(element, {
-          y: -scrollY * 0.3, // Adjust this value to control the speed of the parallax effect
-          duration: 1,
-        });
-      }
-    };
-
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
   return (
     <Box
       ref={rootRef}
@@ -124,7 +106,7 @@ const Hero = () => {
         backgroundPosition: "center",
         boxShadow:
           "inset 0px 40px 30px -20px #1B1B1E, inset 0px -40px 30px -20px rgba(0, 0, 0, 0.8)",
-        backgroundRepeat: 'no-repeat'
+        backgroundRepeat: 'no-repeat',
       }}
     >
       <Container maxWidth="lg">
@@ -213,6 +195,8 @@ const Hero = () => {
           {/* Second Grid Item */}
         </Grid>
       </Container>
+      <Spacer size="xl" />
+
     </Box>
   );
 };
diff --git a/src/components/home/tagline.js b/src/components/home/tagline.js
index f6d87b4..f38a302 100644
--- a/src/components/home/tagline.js
+++ b/src/components/home/tagline.js
@@ -140,8 +140,6 @@ const Tagline = () => {
               className={`card-container-${index}`}
               position="relative"
               overflow="hidden"
-              onMouseEnter={() => handleHover(index)}
-              onMouseLeave={() => handleMouseLeave(index)}
             >
               <TaglineCard {...service} index={index} />
               <TaglineDescriptionCard {...service} index={index} />
@@ -150,6 +148,8 @@ const Tagline = () => {
         ))}
       </Grid>
     </Container>
+      <Spacer size="lg" />
+
     </Patternbg>
   );
 };
@@ -175,8 +175,9 @@ const TaglineCard = ({ title, description, icon, imageUrl, index }) => {
     seed: title
   })
   return (
-    <Box className={`card-${index}`}>
-      <GradientBox backgroundImage={imageUrl}>
+    <Box className={`card-${index}`}
+    >
+      <GradientBox backgroundImage={imageUrl} height='300px'>
         <Box width="70%">
           <Heading variant="h2">
             {title.split(" ")[0]} {title.split(" ").slice(1).join(" ")}
diff --git a/src/components/home/videotext.js b/src/components/home/videotext.js
index 2ae69b6..a9bfa5b 100644
--- a/src/components/home/videotext.js
+++ b/src/components/home/videotext.js
@@ -51,13 +51,13 @@ const VideoText = () => {
               alignment-baseline="middle"
               font-family="Delirium"
               font-weight="900"
-              color='red'
+              stroke="black"
             >
               ENGI
             </text>
           </clipPath>
         </defs>
-      </svg>
+    </svg>
       <video playsInline  autoPlay loop muted className={classes.video}>
         <source src={clip} type="video/mp4" />
       </video>
diff --git a/src/fonts/BlenderProBook.woff2 b/src/fonts/BlenderProBook.woff2
new file mode 100644
index 0000000..452b36d
Binary files /dev/null and b/src/fonts/BlenderProBook.woff2 differ
diff --git a/src/fonts/Cyberpunk.otf b/src/fonts/Cyberpunk.otf
new file mode 100644
index 0000000..38032d6
Binary files /dev/null and b/src/fonts/Cyberpunk.otf differ
diff --git a/src/fonts/Oxanium.woff2 b/src/fonts/Oxanium.woff2
new file mode 100644
index 0000000..23b5e94
Binary files /dev/null and b/src/fonts/Oxanium.woff2 differ
diff --git a/src/hooks/useTimeline.js b/src/hooks/useTimeline.js
new file mode 100644
index 0000000..93d7cfb
--- /dev/null
+++ b/src/hooks/useTimeline.js
@@ -0,0 +1,34 @@
+import axios from 'axios';
+import { useQuery } from 'react-query';
+
+const fetchLeaderboarddData = async () => {
+  const JSONBIN_URL = "https://api.jsonbin.io/v3/b/6526d29f54105e766fc0f571"; // replace YOUR_BIN_ID with your bin's ID
+  const JSONBIN_SECRET_KEY =
+    "$2b$10$YxbqwbOKdtHuIbmpSPeL/Os5qRUvgaOj5TpY2iuVsSIDBAQZN2ULW"; // replace with your secret key from JSONBin
+
+  const headers = {
+    "secret-key": JSONBIN_SECRET_KEY,
+    "Content-Type": "application/json",
+  };
+
+  try {
+    const response = await axios.get(JSONBIN_URL, { headers });
+    return response.data.record; // This will return the JSON you stored in the bin
+  } catch (error) {
+    console.error("Error fetching data from JSONBin:", error);
+    throw error;
+  }
+};
+
+export const useTimeline = () => {
+  const queryResult = useQuery("timelineData", fetchLeaderboarddData);
+
+  // Here, you can also format or process the data further if needed
+
+  return {
+    data: queryResult.data,
+    isLoading: queryResult.isLoading,
+    isError: queryResult.isError,
+    isSuccess: queryResult.isSuccess,
+  };
+};
diff --git a/src/index.css b/src/index.css
index 1af56e3..c59b17f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,6 @@
 @font-face {
     font-family: 'Cyberpunk';
-    src: local('Cyberpunk'), url(./fonts/cyberpunk/Cyberpunk.ttf) format('opentype');
+    src: local('Cyberpunk'), url(./fonts/Cyberpunk.otf) format('opentype');
 }
 
 @font-face {
@@ -19,7 +19,6 @@
 
 body {
   margin: 0;
-
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
@@ -572,3 +571,18 @@ a {
     .gradient-box:after {
         animation: blink 2s linear infinite;
     }
+
+
+/*@keyframes yHover {*/
+/*    0%, 100% {*/
+/*        transform: translateY(0);*/
+/*    }*/
+/*    50% {*/
+/*        transform: translateY(-10px);*/
+/*    }*/
+/*}*/
+
+/*.animateImage {*/
+/*    transition: transform 0.3s ease;*/
+/*    animation: yHover 3s infinite;*/
+/*}*/
diff --git a/src/pages/Accomodation/ContactUs.js b/src/pages/Accomodation/ContactUs.js
index 806b3c3..a98d83f 100644
--- a/src/pages/Accomodation/ContactUs.js
+++ b/src/pages/Accomodation/ContactUs.js
@@ -28,9 +28,17 @@ const ContactUs = () => {
           Contact Us
         </Typography>
         <Typography variant="body1" paragraph style={{ color: "white" }}>
-          Himanshu ( 83089 88245 )
+          • Himanshu ( 83089 88245 )
           <br/>
           Himan.201me122@nitk.edu.in
+          <br/>
+          • Gaurav Kumar (6397362215)
+          <br/>
+          gk9033170@gmail.com
+          <br/>
+          • Abhay Kumar (9798499056)
+          <br/>
+          kumarabhay1407@gmail.com
         </Typography>
         {/*<Typography variant="body1" paragraph style={{ color: "white" }}>*/}
         {/*  <br />*/}
diff --git a/src/pages/Events/Events.js b/src/pages/Events/Events.js
index 2dee05b..bf93c71 100644
--- a/src/pages/Events/Events.js
+++ b/src/pages/Events/Events.js
@@ -13,6 +13,8 @@ import CustomizedDialogs from './CustomizedDialogs';
 import { AiFillTrophy } from 'react-icons/ai';
 import easyMeshGradient from "easy-mesh-gradient";
 import Patternbg from '../../components/common/patternbg';
+import { CgScrollV } from 'react-icons/cg';
+import {  GiTicket } from 'react-icons/gi';
 
 const HeadCarousel = () => {
   const { data, isLoading } = useEventData();
@@ -80,8 +82,8 @@ const HeadEvent = ({ subtitle, firstCta, secondCta, description, event }) => {
           {/*</Typography>}*/}
         </Box>
         <Stack direction="row" flexWrap='wrap' alignItems="center" gap={1} mb={1}>
-          {needRegister && <Chip label="Registration will start soon" icon={<FiClock />} />}
-          {needRegister && <CustomizedDialogs title = {title} description={rule}/> }
+          {needRegister && <a target='_blank' href={registrationLink}><Chip color='primary' label="Registration"  icon={<GiTicket />} /></a>}
+          {needRegister && <a target='_blank' href={rule}><Chip color='secondary' label="Rule book"  icon={<CgScrollV />} /></a> }
         </Stack>
         <Stack direction="row" flexWrap='wrap' alignItems="center" gap={1} mb={1}>
           {isCompetition && <>
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f557d29..1b03e73 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -20,21 +20,18 @@ const Home = () => {
   const root = useRef();
 
   return (
-    <Box ref={root} position="relative" bgcolor="black">
+    <Box ref={root} position="relative">
       <CssBaseline />
       <Appbar />
       <Appbartrigger/>
       <Hero />
 
-      <Spacer size="xl" />
 
       <About />
 
-      <Spacer size="xl" />
 
       <Tagline />
 
-      <Spacer size="lg" />
 
       <CTA />