diff --git a/components/About/About.js b/components/About/About.js
index 98fed27..a67b3fd 100644
--- a/components/About/About.js
+++ b/components/About/About.js
@@ -1,37 +1,50 @@
-import React from 'react'
-import Link from 'next/link'
-import styles from './about.module.css'
-import Buttons from '../Buttons/Buttons'
+import React from "react";
+import Link from "next/link";
+import styles from "./about.module.css";
+import Buttons from "../Buttons/Buttons";
 
 function About() {
-    return (
-        <section className={styles.about}>
-            <div className={styles.row__about}  data-aos="fade-up">
-                <div className={styles.col_lg_6}  >
-                    <div className={styles.text_container__about}>
-                        <h3 className={`${styles.about__h3} ${styles.theme_text}`} >About Us</h3>
-                        <p className={styles.about__p}>
-                        Instituted in 2007, DAKSH is the annual techno management fest of Sastra University. Ever since its establishment it has been a platform for a multitude of students and aspirants to unravel their talents and showcase their technical prowess. We’ve grown together as a fest since our inception providing students with the finest exposure and skill. This edition of Daksh aims at creating a virtual forum bringing together the eccentric minded and celebrating technology.
-                        </p>
-                        {/* <Link href="#newsletter">
+	return (
+		<section className={styles.about}>
+			<div className={styles.row__about} data-aos="fade-up">
+				<div className={styles.col_lg_6}>
+					<div className={styles.text_container__about}>
+						<h3 className={`${styles.about__h3} ${styles.theme_text}`}>
+							About Us
+						</h3>
+						<p className={styles.about__p}>
+							Instituted in 2007, DAKSH is the annual techno management fest of
+							Sastra University. Ever since its establishment it has been a
+							platform for a multitude of students and aspirants to unravel
+							their talents and showcase their technical prowess. We&apos;ve
+							grown together as a fest since our inception providing students
+							with the finest exposure and skill. This edition of Daksh aims at
+							creating a virtual forum bringing together the eccentric minded
+							and celebrating technology.
+						</p>
+						{/* <Link href="#newsletter">
                             <a className={styles.button__about} >  Teams </a>
                         </Link> */}
-                         <Link href="/teams" >
-                             <div>
-                              <Buttons text="TEAMS" radius="10px" />
-                             </div>
-                        </Link>
-                    </div>
-                </div>
-                <div className={styles.col_lg_6} >
-                    <div className={styles.video_container__about}>
-                        {/* <img className={styles.about__img_fluid}src="https://dummyimage.com/700x400/fff/000000&text=Daksh" alt="dummy image"/> */}
-                        <iframe className={styles.about__video_size}  src="https://www.youtube.com/embed/pFL37QpQ5t0" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
-                    </div>
-                </div>
-            </div>
-        </section>
-    )
+						<Link href="/teams">
+							<div>
+								<Buttons text="TEAMS" radius="10px" />
+							</div>
+						</Link>
+					</div>
+				</div>
+				<div className={styles.col_lg_6}>
+					<div className={styles.image_container__about}>
+						<img
+							className={styles.about__img_fluid}
+							src="/about-img.png"
+							alt="dummy image"
+						/>
+						{/* <iframe className={styles.about__video_size}  src="https://www.youtube.com/embed/pFL37QpQ5t0" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe> */}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
 }
 // width="560" height="315"
-export default About
+export default About;
diff --git a/components/About/about.module.css b/components/About/about.module.css
index fb364ec..1cf4051 100644
--- a/components/About/about.module.css
+++ b/components/About/about.module.css
@@ -1,10 +1,18 @@
 .about{
     /* background-color: rgba(0, 0, 0, 0.9); */
     background-color: var(--color-white);
+    /* background-image: url("/aboutbg.png"); */
+    /* background: linear-gradient(90deg, rgba(105, 82, 73, 0.7) 0%, rgba(157, 147, 121, 0.7) 100%), url("/aboutbg.png"); */
+    background: linear-gradient(90deg, rgba(105, 82, 73, 0.40) 0%, rgba(157, 147, 121, 0.40) 100%), url("/aboutbg.png"), lightgray 50% / cover no-repeat;
+    mix-blend-mode: luminosity;
+    background-position: center;
+    background-size: cover;
     text-align: left;
     width: 100%;
     padding: 5rem;
     overflow-x: hidden;
+    position: relative;
+    z-index: 5;
 }
 .container__about{
     width: 100%;
@@ -21,6 +29,7 @@
 
 .col_lg_6{
     width: 100%;
+    height: auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -82,22 +91,33 @@
     line-height: 18px;
     /* margin-bottom: 1.5rem; */
 }
-.video_container__about{
-    padding: 25px;
-    align-items: center;
+.image_container__about{
+    display: flex;
+    position: relative;
+    height: auto;
+    width: 400px;
+    border-radius: 10px;
 }
-/* .about__img_fluid {
+.about__img_fluid {
     max-width: 100%;
     height: auto;
-    vertical-align: middle;
+    display: block;
     align-self: center;
-} */
-.about__video_size{
+    position: relative;
+    z-index: 0;
+    mix-blend-mode: luminosity;
+}
+
+/* .about__video_size{
     height: 250px;
     width: 400px;
     border-radius: 10px;
     border: 2px solid var(--white);
-}
+} */
+
+
+
+
 
  
 
@@ -116,14 +136,14 @@
         flex-direction: column;
         flex-wrap: wrap;
     }
-    .video_container__about {
+    .image_container__about {
         width: 100%;
         padding: 0;
         margin-top: 25px;
         display: flex;
         justify-content: center;
     }
-    .about__video_size{
+    /* .about__video_size{
         width: 100%;
-    }
+    } */
 }
\ No newline at end of file
diff --git a/components/Banner/Banner.js b/components/Banner/Banner.js
index a026c64..c140b25 100644
--- a/components/Banner/Banner.js
+++ b/components/Banner/Banner.js
@@ -1,40 +1,46 @@
-import React from 'react'
-import styles from './banner.module.css';
+import React from "react";
+import styles from "./banner.module.css";
 import homeStyles from "../../styles/Home.module.css";
-import Link from 'next/link'
-import Buttons from '../Buttons/Buttons'
-
+import Link from "next/link";
+import Buttons from "../Buttons/Buttons";
 
 function Banner() {
-    return (
-        <>
-            <div className={styles.topcover}>
-                <div className={styles.divbanner}>
-                    {/* <video className={homeStyles.bannervideo} autoPlay loop muted>
+	return (
+		<>
+			<div className={styles.topcover}>
+				<div className={styles.divbanner}>
+					{/* <video className={homeStyles.bannervideo} autoPlay loop muted>
                         <source src="/bgvideo.mp4" type='video/mp4' />
                     </video> */}
-                    <h1 className={`${styles.divbanner__headtext} ${styles.theme_text}`} data-aos="fade-up" data-aos-delay="200">
-                        build <br /> things that <br /> matter.
-                    </h1>
-                    <h3 className={styles.divbanner__descriptiontext} data-aos="fade-up" data-aos-delay="400">
-                        Daksh is Happening very soon
-                    </h3>
-                    {/* <a href='https://linktr.ee/daksh2023' data-aos="fade-up" data-aos-delay="200" className={styles.register__btn}>COMING SOON ...</a> */}
-                    {/* <Link href="#newsletter">
+					<h1
+						className={`${styles.divbanner__headtext} ${styles.theme_text}`}
+						data-aos="fade-up"
+						data-aos-delay="200"
+					>
+						build <br /> things <br /> that <br /> matter.
+					</h1>
+					<h3
+						className={styles.divbanner__descriptiontext}
+						data-aos="fade-up"
+						data-aos-delay="400"
+					>
+						Daksh is Happening very soon
+					</h3>
+					{/* <a href='https://linktr.ee/daksh2023' data-aos="fade-up" data-aos-delay="200" className={styles.register__btn}>COMING SOON ...</a> */}
+					{/* <Link href="#newsletter">
                     <a className={styles.divbanner__eveandwsbtn}>
                         Events and Workshops
                     </a>
                 </Link > */}
-                    {/* <Link href="#newsletter">
+					{/* <Link href="#newsletter">
                      <div style={{marginTop: "1rem"}}  data-aos="fade-up"  data-aos-delay="600">
                          <Buttons text="Subscribe" radius="40px" />
                      </div>
                 </Link > */}
-                </div>
-            </div>
-
-        </>
-    )
+				</div>
+			</div>
+		</>
+	);
 }
 
-export default Banner
+export default Banner;
diff --git a/components/Banner/banner.module.css b/components/Banner/banner.module.css
index 30b3096..d9eaf9c 100644
--- a/components/Banner/banner.module.css
+++ b/components/Banner/banner.module.css
@@ -16,10 +16,9 @@
   width: 100vw;
   height: 100%;
   justify-content: center;
-  /* background-color: rgba(0,0,0,0.7); */
-  /* background: url("/backgbanner.png"); */
-  background-position: center;
-  background-size: 100%;
+  background-color: rgba(0,0,0,0.7);
+  background: url("/backgbanner.png");
+  background-size: 100% 100%;
   margin: 0;
 }
 
diff --git a/components/BannerCards/BannerCards.js b/components/BannerCards/BannerCards.js
index feab269..bc6d1ae 100644
--- a/components/BannerCards/BannerCards.js
+++ b/components/BannerCards/BannerCards.js
@@ -1,102 +1,110 @@
-import React,{useState} from 'react'
-import styles from './bannercards.module.css';
+import React, { useState } from "react";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import Slider from "react-slick";
-import Link from 'next/link';
+import Link from "next/link";
+import styles from "./bannercards.module.css";
 
 function BannerCards() {
-    const carousel_items=[
-      {
-        idx:0,
-        description:"Events",
-        src:'/events.png',
-        buttonText:'view',
-        href: "/events-workshop"
-      },
-      {
-        idx:1,
-        description:"Workshops",
-        src:'/workshop.png',
-        buttonText:'view',
-        href: "/events-workshop"
-      },
-      {
-        idx:2,
-        description:"Podcasts",
-        src:'/tech.png',
-        buttonText:'view',
-        href: "/podcast"
-      },
-      {
-        idx:3,
-        description:"Teams",
-        src:'/team.png',
-        buttonText:'view',
-        href: "/teams"
-      }
-    ]
+	const carousel_items = [
+		{
+			idx: 0,
+			description: "Events",
+			src: "/events.png",
+			buttonText: "view",
+			href: "/events-workshop",
+		},
+		{
+			idx: 1,
+			description: "Workshops",
+			src: "/workshop.png",
+			buttonText: "view",
+			href: "/events-workshop",
+		},
+		{
+			idx: 2,
+			description: "Podcasts",
+			src: "/tech.png",
+			buttonText: "view",
+			href: "/podcast",
+		},
+		{
+			idx: 3,
+			description: "Teams",
+			src: "/team.png",
+			buttonText: "view",
+			href: "/teams",
+		},
+	];
 
-    const [imageIdx,setImageIdx] = useState(0);
-    
-    var settings = {
-        autoplay: true,
-        className: "center",
-        centerMode: true,
-        infinite: true,
-        dots: true,
-        arrows: false,
-        autoplaySpeed: 3000,
-        slidesToShow: 3,
-        speed: 500,
-        beforeChange: (current,next) => setImageIdx(next),
-        responsive: [
-            {
-              breakpoint: 770,
-              settings: {
-                centerMode: true,
-                centerPadding: '0px',
-                slidesToShow: 1
-              }
-            },
-            {
-              breakpoint: 480,
-              settings: {
-                centerMode: true,
-                centerPadding: '0px',
-                slidesToShow: 1
-              },
-            },
-        ]
-      };
+	const [imageIdx, setImageIdx] = useState(0);
 
-   return(   
-       <>
-       <div className={styles.cardRenderWrap}>
-          <div className={styles.cardcarousel} id="cardcarousel"  data-aos="fade-up">
-            <Slider {...settings} >
-                {carousel_items.map((item,idx)=>{
-                  return (
-                    <div className={imageIdx === idx ? styles.card_active : styles.card} key={idx}>
-                      <div className={styles.center}>
-                      <div className={styles.card__vectorimg}>
-                        <img className={styles.vector} src={item.src}/>
-                      </div>
-                      <div className={styles.card__head}>{item.description}</div>
-                      <Link href={item.href} >
-                        <div className={styles.card__viewbtn}>{item.buttonText}</div>
-                      </Link>
-                      </div>
-                    </div>
-                  )
-                })}               
-              </Slider>
-          </div>
-        </div>
-    
-     </>
-    );
-   
+	var settings = {
+		autoplay: true,
+		centerMode: true,
+		infinite: true,
+		dots: true,
+		arrows: false,
+		autoplaySpeed: 3000,
+		slidesToShow: 3,
+		speed: 500,
+		beforeChange: (current, next) => setImageIdx(next),
+		responsive: [
+			{
+				breakpoint: 770,
+				settings: {
+					centerMode: true,
+					centerPadding: "0px",
+					slidesToShow: 1,
+				},
+			},
+			{
+				breakpoint: 480,
+				settings: {
+					centerMode: true,
+					centerPadding: "0px",
+					slidesToShow: 1,
+				},
+			},
+		],
+	};
+
+	return (
+		<>
+			<div className={styles.cardRenderWrap}>
+				<div
+					className={styles.cardcarousel}
+					id="cardcarousel"
+					data-aos="fade-up"
+				>
+					<Slider {...settings}>
+						{carousel_items.map((item, idx) => {
+							return (
+								<div
+									className={
+										imageIdx === idx ? styles.card_active : styles.card
+									}
+									key={idx}
+								>
+									<div className={styles.center}>
+										<div className={styles.card__vectorimg}>
+											<img className={styles.vector} src={item.src} />
+										</div>
+										<div className={styles.card__head}>{item.description}</div>
+										<Link href={item.href}>
+											<div className={styles.card__viewbtn}>
+												{item.buttonText}
+											</div>
+										</Link>
+									</div>
+								</div>
+							);
+						})}
+					</Slider>
+				</div>
+			</div>
+		</>
+	);
 }
 
 export default BannerCards;
diff --git a/components/BannerCards/bannercards.module.css b/components/BannerCards/bannercards.module.css
index e603fd9..98ae4ff 100644
--- a/components/BannerCards/bannercards.module.css
+++ b/components/BannerCards/bannercards.module.css
@@ -7,8 +7,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    /* background-image: var(--gradient-right); */
-    background-color: var(--color-blue-1);
+    background-image: url("/cardbg.png");
+    background: linear-gradient(90deg, rgba(105, 82, 73, 0.8) 0%, rgba(157, 147, 121, 0.8) 100%), url("/cardbg.png");
     /* background-color: transparent; */
 }
 
@@ -27,9 +27,11 @@
     justify-content: center;
     transition: all 0.5s;
     transform: scale(0.8);
-    background: rgba(10, 3, 68, 0.8);
+    background:  rgba(255, 255, 255, 0.71);
     box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 30px;
+    padding-bottom: 20px;
 }
 
 .card_active {
@@ -38,7 +40,7 @@
     height: 400px;
     max-height: 400px;
     /* background-color: rgb(0,0,0); */
-    background-color: var(--color-blue-2);
+    background-color: rgba(255, 255, 255, 0.49);
     border-radius: 30px;
     margin: auto 0px;
     display: flex;
@@ -48,7 +50,9 @@
     /* box-shadow: rgb(0,0,0); */
     transform: scale(1);
     /* box-shadow: rgba(25, 25, 26, 0.5) 0px 7px 29px 0px; */
-    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.25);
+    /* box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.25); */
+    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.25);
+
 }
 
 .center {
@@ -85,4 +89,13 @@
     font-size: 1rem;
     border-radius: 10px;
     cursor: pointer;
-} 
\ No newline at end of file
+} 
+
+.slick-dots li button:before {
+    color: white !important;;
+}
+
+.slick-dots li.slick-active button:before {
+    opacity: .75;
+    color: white !important;
+}
\ No newline at end of file
diff --git a/components/Footer/Footer.js b/components/Footer/Footer.js
index f6d34b2..46f84c1 100644
--- a/components/Footer/Footer.js
+++ b/components/Footer/Footer.js
@@ -8,74 +8,76 @@ import { RiFacebookCircleFill, RiLinkedinBoxFill } from "react-icons/ri";
 
 function Footer() {
 	return (
-		<footer>
-		<div className={styles.footer}>
-			<div className={styles.footer_logo}>
-				<img src="/logo.png" style={{ width: "175px" }} alt="Daksh logo" />
-				<div id={styles.footer_icons}>
-					<a
-						href="https://www.instagram.com/daksh2k22/?hl=en"
-						target="_blank"
-						rel="noreferrer"
-					>
-						<AiOutlineInstagram className={styles.footer_icon} />
-					</a>
-					<a
-						href="https://daksh-blog.medium.com/"
-						target="_blank"
-						rel="noreferrer"
-					>
-						<AiFillMediumCircle className={styles.footer_icon} />
-					</a>
-					<a
-						href="https://www.linkedin.com/company/dakshsastra/"
-						target="_blank"
-						rel="noreferrer"
-					>
-						<RiLinkedinBoxFill className={styles.footer_icon} />
-					</a>
-					<a
-						href="https://twitter.com/Daksh2k22"
-						target="_blank"
-						rel="noreferrer"
-					>
-						<TiSocialTwitter className={styles.footer_icon} />
-					</a>
-					<a
-						href="https://www.youtube.com/channel/UCiFKilPCc87fcbIRh_tiPQA"
-						target="_blank"
-						rel="noreferrer"
-					>
-						<TiSocialYoutube className={styles.footer_icon} />
-					</a>
-					<a
-						href="https://www.facebook.com/daksh.sastra"
-						target="_blank"
-						rel="noreferrer"
-					>
-						<RiFacebookCircleFill className={styles.footer_icon} />
-					</a>
+		<footer className={styles.footer_container}>
+			<div className={styles.footer}>
+				<div className={styles.footer_logo}>
+					<img src="/logo.png" style={{ width: "175px" }} alt="Daksh logo" />
+					<div id={styles.footer_icons}>
+						<a
+							href="https://www.instagram.com/daksh2k22/?hl=en"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<AiOutlineInstagram className={styles.footer_icon} />
+						</a>
+						<a
+							href="https://daksh-blog.medium.com/"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<AiFillMediumCircle className={styles.footer_icon} />
+						</a>
+						<a
+							href="https://www.linkedin.com/company/dakshsastra/"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<RiLinkedinBoxFill className={styles.footer_icon} />
+						</a>
+						<a
+							href="https://twitter.com/Daksh2k22"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<TiSocialTwitter className={styles.footer_icon} />
+						</a>
+						<a
+							href="https://www.youtube.com/channel/UCiFKilPCc87fcbIRh_tiPQA"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<TiSocialYoutube className={styles.footer_icon} />
+						</a>
+						<a
+							href="https://www.facebook.com/daksh.sastra"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<RiFacebookCircleFill className={styles.footer_icon} />
+						</a>
+					</div>
 				</div>
-			</div>
-			<div className={styles.footer_right}>
-				<div className={styles.footer_links}>
-					<h2>Quick Links</h2>
-					<Link href="/events-workshop">
-						<a>Events / Workshops</a>
-					</Link>
-					<Link href="/teams">
-						<a>Teams</a>
-					</Link>
-					<Link href="/podcast">
-						<a>Podcasts</a>
-					</Link>
-					<Link href="https://daksh-blog.medium.com/">
-						<a  href="https://daksh-blog.medium.com/" target="blank">Blog</a>
-					</Link>
-					<Link href="/contact">
-						<a>Contact</a>
-					</Link>
-					{/* <Link href="https://merchant.razorpay.com/policy/KfyiFtCr6aXFsA/privacy" target="blank">
+				<div className={styles.footer_right}>
+					<div className={styles.footer_links}>
+						<h2>Quick Links</h2>
+						<Link href="/events-workshop">
+							<a>Events / Workshops</a>
+						</Link>
+						<Link href="/teams">
+							<a>Teams</a>
+						</Link>
+						<Link href="/podcast">
+							<a>Podcasts</a>
+						</Link>
+						<Link href="https://daksh-blog.medium.com/">
+							<a href="https://daksh-blog.medium.com/" target="blank">
+								Blog
+							</a>
+						</Link>
+						<Link href="/contact">
+							<a>Contact</a>
+						</Link>
+						{/* <Link href="https://merchant.razorpay.com/policy/KfyiFtCr6aXFsA/privacy" target="blank">
 						<a>Privacy policy</a>
 					</Link>
 					<Link href="https://merchant.razorpay.com/policy/KfyiFtCr6aXFsA/terms" target="blank">
@@ -87,8 +89,8 @@ function Footer() {
 					<Link href="https://merchant.razorpay.com/policy/KfyiFtCr6aXFsA/shipping" target="blank">
 						<a>Shipping and Delivery</a>
 					</Link> */}
-				</div>
-				{/* <div className={styles.footer_contact}>
+					</div>
+					{/* <div className={styles.footer_contact}>
 					<h2>Contact</h2>
 					<div>
 						<Link href="mailto:chairman.daksh@sastra.ac.in" target="_blank">
@@ -102,10 +104,12 @@ function Footer() {
 						</Link>
 					</div>
 				</div> */}
+				</div>
 			</div>
-		</div>
-		{/* <p className={styles.footer__contribution}>Made with 🖤 by Daksh Web Team</p> */}
-		<p className={styles.footer__contribution}>Made with 💙 by Daksh Web Team</p>
+			{/* <p className={styles.footer__contribution}>Made with 🖤 by Daksh Web Team</p> */}
+			<p className={styles.footer__contribution}>
+				Made with 💙 by Daksh Web Team
+			</p>
 		</footer>
 	);
 }
diff --git a/components/Footer/footer.module.css b/components/Footer/footer.module.css
index 654144d..f3cb530 100644
--- a/components/Footer/footer.module.css
+++ b/components/Footer/footer.module.css
@@ -1,7 +1,16 @@
+.footer_container {
+	background: linear-gradient(90deg, rgba(105, 82, 73, 0.8) 0%, rgba(157, 147, 121, 0.8) 100%), url("/footerbg.png"), lightgray 50% / cover no-repeat;
+
+	mix-blend-mode: luminosity;
+}
 .footer {
 	padding: 2rem 20px;
 	width: 100%;
-	background-color: var(--primaryBg);
+	/* background-color: var(--primaryBg); */
+	/* background: linear-gradient(90deg, rgba(105, 82, 73, 0.7) 0%, rgba(157, 147, 121, 0.7) 100%), url("/footerbg.png"); */
+	/* mix-blend-mode: luminosity; */
+	background: linear-gradient(90deg, rgba(105, 82, 73, 0.8) 0%, rgba(157, 147, 121, 0.8) 100%), url("/footerbg.png"), lightgray 50% / cover no-repeat;
+	mix-blend-mode: luminosity;
 	display: flex;
 	flex-direction: column;
 	align-items: left;
@@ -67,10 +76,10 @@
 }
 
 .footer__contribution {
-	color: var(--secondaryFontColor);
+	color: var(--color-black);
 	padding-bottom: 1.5rem;
 	text-align: center;
-	background-color: var(--primaryBg);
+	background-color:transparent;
 }
 
 @media only screen and (min-width: 700px) {
@@ -93,7 +102,6 @@
 	}
 	.footer__contribution {
 		text-align: center;
-		background-color: var(--primaryBg);
 		margin: 0;
 	}
 }
diff --git a/components/Nav/nav.module.css b/components/Nav/nav.module.css
index 3f95bb7..bfe8a67 100644
--- a/components/Nav/nav.module.css
+++ b/components/Nav/nav.module.css
@@ -9,11 +9,12 @@
     justify-content: space-between;
     padding: 0 2.5rem;
     z-index: 9999;
-    background-color: rgba(255, 0, 0, 0);
+    background: linear-gradient(90deg, rgba(105, 82, 73, 0.8) 0%, rgba(157, 147, 121, 0.8) 100%);
+    box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.25);
     transition: all 0.5s;
 }
 .active {
-    background-color: rgba(0, 0, 0, 0.90) !important;
+    background-color: rgba(0, 0, 0, 1) !important;
 }
 
 #logo{
@@ -42,7 +43,7 @@
     align-items: center;
     justify-content: center;
     padding: 1.5rem 2rem;
-    color: var(--secondaryFontColor);
+    color: black;
     transition: all 0.3s ease-in-out;
 }
 
diff --git a/components/Newsletter/Newsletter.js b/components/Newsletter/Newsletter.js
index ffab83f..abbed6d 100644
--- a/components/Newsletter/Newsletter.js
+++ b/components/Newsletter/Newsletter.js
@@ -1,75 +1,84 @@
-import React,{useEffect, useState} from 'react'
-import styles from './newsletter.module.css'
-import Buttons from '../Buttons/Buttons'
-import { toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import axios from 'axios';
+import React, { useEffect, useState } from "react";
+import styles from "./newsletter.module.css";
+import Buttons from "../Buttons/Buttons";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import axios from "axios";
 
 function Newsletter() {
-    const [email,setEmail] = useState("");
-    const [subs,setSubs] = useState("Subscribe");
+	const [email, setEmail] = useState("");
+	const [subs, setSubs] = useState("Subscribe");
 
-    const notifySuccess = (msg) => toast.success(msg, {
-        position: "top-right",
-        autoClose: 2500,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-        theme: "dark"
-    });
+	const notifySuccess = (msg) =>
+		toast.success(msg, {
+			position: "top-right",
+			autoClose: 2500,
+			hideProgressBar: false,
+			closeOnClick: true,
+			pauseOnHover: true,
+			draggable: true,
+			progress: undefined,
+			theme: "dark",
+		});
 
-    const notifyError = () => toast.error("Invalid Email", {
-        position: "top-right",
-        autoClose: 2500,
-        hideProgressBar: false,
-        closeOnClick: true,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-        theme: "dark"
-    });
+	const notifyError = () =>
+		toast.error("Invalid Email", {
+			position: "top-right",
+			autoClose: 2500,
+			hideProgressBar: false,
+			closeOnClick: true,
+			pauseOnHover: true,
+			draggable: true,
+			progress: undefined,
+			theme: "dark",
+		});
 
-    function validateEmail(e) {
-        const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        return re.test(String(e).toLowerCase());
-    }
+	function validateEmail(e) {
+		const re =
+			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+		return re.test(String(e).toLowerCase());
+	}
 
-    const subscribe = async (e) => {
-        e.preventDefault();
-        setSubs("Subscribing..")
-        if(validateEmail(email)){
-            try{
-                const response = await axios.post("/api/newsletter", {email});
-                const { data } = response;
-                notifySuccess(data.msg);
-                setEmail("");
-                setSubs("Subscribed");
-            }catch (e) {
-                notifyError();
-            }
-        }
-        else
-            notifyError();
-        setSubs("Subscribe");
-    }
+	const subscribe = async (e) => {
+		e.preventDefault();
+		setSubs("Subscribing..");
+		if (validateEmail(email)) {
+			try {
+				const response = await axios.post("/api/newsletter", { email });
+				const { data } = response;
+				notifySuccess(data.msg);
+				setEmail("");
+				setSubs("Subscribed");
+			} catch (e) {
+				notifyError();
+			}
+		} else notifyError();
+		setSubs("Subscribe");
+	};
 
-    return (
-        <div className={styles.maincontainer} id="newsletter">
-            <h3>Stay Updated!</h3>
-            <form>
-                <div className={styles.input_container}>
-                    <input type="email" name="myemail" id="" placeholder="Enter Email" onChange={(event) => setEmail(event.target.value)} value={email}/>
-                    {/* <button className={styles.btn}>Subscribe</button> */}
-                    <div style={{margin: "1rem"}}>
-                    <button type="submit" onClick={subscribe} className={styles.btn}>{subs}</button>
-                    </div>
-                </div>
-            </form>
-        </div>
-    )
+	return (
+		<div className={styles.maincontainer} id="newsletter">
+			<h3>Stay Updated!</h3>
+			<form>
+				<div className={styles.input_container}>
+					<input
+						type="email"
+						name="myemail"
+						id=""
+						placeholder="Enter Email"
+						onChange={(event) => setEmail(event.target.value)}
+						value={email}
+					/>
+					{/* <button className={styles.btn}>Subscribe</button> */}
+					<div>
+						<button type="submit" onClick={subscribe} className={styles.btn}>
+							{subs}
+						</button>
+					</div>
+				</div>
+			</form>
+		</div>
+	);
 }
 
-
-export default Newsletter
+export default Newsletter;
diff --git a/components/Newsletter/newsletter.module.css b/components/Newsletter/newsletter.module.css
index bfde78f..7c1fa68 100644
--- a/components/Newsletter/newsletter.module.css
+++ b/components/Newsletter/newsletter.module.css
@@ -1,6 +1,9 @@
 .maincontainer{
-  background-color: rgba(0, 0, 0, 0.9);
-  background-color: var(--color-blue-2);
+  /* background-color: rgba(0, 0, 0, 0.9);
+  background-color: var(--color-blue-2); */
+  background: linear-gradient(90deg, #695249 -0.66%, #9D9379 99.17%);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  margin-top:-1px;
   padding-bottom: 3%;
   overflow: hidden;
 }
@@ -22,32 +25,38 @@
   justify-content: center;
 }
 .input_container input{
-  margin:  0 25px;
+  margin:  0;
   padding: 12px 22px;
-  border-radius: 5px;
+  border-radius: 30px 0 0 30px;
   font-family: content;
   font-size: 1rem;
   min-width: 50vw;
   border: none;
+  background-color: var(--color-white);
+}
+.input_container input:focus{
+  outline: none;
 }
 .btn {
   display: inline-flex;
+  margin-left:-1px;
   position: relative;
   text-align: center;
-  padding: 15px 30px;
+  padding: 12px 22px;
   /* color: #2621b7; */
   /* color: #DA0037; */
-  color: var(--color-white);
-  background-color:var(--color-black);
+  color: var(--color-black);
+  background-color:var(--color-white);
   cursor: pointer;
-  font-size: 18px;
+  font-size: 1rem;
   font-family: content;
-  font-weight: 700;
+  font-weight: 400;
   letter-spacing: 0.3px;
-  line-height: 18px;
+  /* line-height: 18px; */
   transition: all 0.5s ease-in-out;
-  border-radius: 5px;
+  border-radius: 0 30px 30px 0;
   border: none;
+  width: 100%;
 }
 .btn:hover{
   /* color: #05559c; */
diff --git a/components/StatisticCards/statisticCards.module.css b/components/StatisticCards/statisticCards.module.css
index 5906373..2b9379c 100644
--- a/components/StatisticCards/statisticCards.module.css
+++ b/components/StatisticCards/statisticCards.module.css
@@ -2,7 +2,9 @@
     display: flex;
     padding: 5rem;
     /* background-color: rgba(0, 0, 0, 0.9); */
-    background-color: var(--color-blue-2);
+    /* background-color: var(--color-blue-2); */
+    background: linear-gradient(90deg, #695249 -0.66%, #9D9379 99.17%);
+    box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.25);
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-evenly;
diff --git a/components/TeamCards/TeamCards.js b/components/TeamCards/TeamCards.js
new file mode 100644
index 0000000..c8e2757
--- /dev/null
+++ b/components/TeamCards/TeamCards.js
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Slider from "react-slick";
+import Link from "next/link";
+import styles from "./teamCards.module.css";
+import TeamsData from "../config/teams.json";
+
+function TeamCards() {
+	const carousel_items = TeamsData;
+
+	const [imageIdx, setImageIdx] = useState(0);
+
+	var settings = {
+		autoplay: true,
+		centerMode: true,
+		infinite: true,
+		dots: true,
+		arrows: true,
+		autoplaySpeed: 3000,
+		slidesToShow: 3,
+		speed: 500,
+		beforeChange: (current, next) => setImageIdx(next),
+		responsive: [
+			{
+				breakpoint: 770,
+				settings: {
+					centerMode: true,
+					centerPadding: "0px",
+					slidesToShow: 1,
+				},
+			},
+			{
+				breakpoint: 480,
+				settings: {
+					centerMode: true,
+					centerPadding: "0px",
+					slidesToShow: 1,
+				},
+			},
+		],
+	};
+
+	return (
+		<>
+			<div className={styles.cardRenderWrap}>
+				<div
+					className={styles.cardcarousel}
+					id="cardcarousel"
+					data-aos="fade-up"
+				>
+					<h4 className={styles.card_title}>Join Us</h4>
+					<Slider {...settings}>
+						{carousel_items.map((item, idx) => {
+							return (
+								<div
+									key={idx}
+									className={
+										imageIdx === idx ? styles.card_active : styles.card
+									}
+								>
+									<div className={styles.img_container}>
+										<img className={styles.img} src={item.src} />
+									</div>
+									<div className={styles.card__head}>
+										{item.teamname.toUpperCase()}
+									</div>
+								</div>
+							);
+						})}
+					</Slider>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default TeamCards;
diff --git a/components/TeamCards/teamcards.module.css b/components/TeamCards/teamcards.module.css
new file mode 100644
index 0000000..b6c5ebd
--- /dev/null
+++ b/components/TeamCards/teamcards.module.css
@@ -0,0 +1,121 @@
+.cardcarousel{
+    width: 80%;
+    max-width: 1024px;
+    margin: 50px 50px;
+}
+.cardRenderWrap{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height:600px;
+    /* background-image: url("/joinus.png"); */
+    background: linear-gradient(90deg, rgba(144, 117, 106, 0.80) 0%, rgba(206, 198, 178, 0.80) 100%), url("/joinus.png"), lightgray 0px -423.419px / 100% 231.333% no-repeat;
+    mix-blend-mode: luminosity;
+    /* background-color: transparent; */
+}
+
+.card {
+    opacity: 1;
+    width: 326px !important;
+    height: 326px !important;
+    max-height: 326px !important;
+    /* background-color: var(--secondaryBg); */
+    /* background-color: var(--color-violet); */
+    /* border-radius: 10px; */
+    margin: auto 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s;
+    transform: scale(0.8);
+    /* background:  rgba(255, 255, 255, 1); */
+    
+    padding: 30px;
+}
+
+.card_active {
+    opacity: 1;
+    width: 326px !important;
+    height: 326px !important;
+    max-height: 326px !important;
+    /* background-color: rgb(0,0,0); */
+    /* background: rgba(255, 255, 255, 1) !important; */
+    border-radius: 30px;
+    margin: auto 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    /* box-shadow: rgb(0,0,0); */
+    transform: scale(1);
+    /* box-shadow: rgba(25, 25, 26, 0.5) 0px 7px 29px 0px; */
+    /* box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.25); */
+    padding: 30px;
+
+}
+
+.vector_container {
+    width: 326px;
+    height: 326px;
+    flex-shrink: 0;
+    border-radius: 46px;
+    background: #FFF;
+    display: flex;
+}
+
+.img_container {
+    background: #FFF;
+    padding: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 30px;
+}
+
+.img {
+    width: 80%;
+}
+
+.center {
+    margin: auto 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.img_container {
+    background: rgba(255, 255, 255, 0.9) !important;
+}
+.card__head{
+    font-family: content;
+    padding: 8px;
+    font-size: 1.25rem;
+    /* margin: 10px 0; */
+    font-weight:bold;
+    color:black !important;
+}
+.card_title {
+    color: black;
+    font-size: 3rem;
+    text-align: start;
+}
+
+.slick-dots {
+    color: white !important; 
+}
+
+.slick-dots li button:before {
+    color: white !important;
+}
+
+.slick-dots li button:before {
+    color: white !important;
+}
+
+.slick-dots li.slick-active button:before {
+    opacity: .75;
+    color: white !important;
+}
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index b9b4441..432b908 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -4,52 +4,53 @@ import styles from "../styles/Home.module.css";
 import Banner from "../components/Banner/Banner";
 import BannerCards from "../components/BannerCards/BannerCards";
 import About from "../components/About/About";
-import Sponsers from "../components/Sponsers/Sponsers";
-import Podcast from "../components/Podcast/Podcast";
+// import Sponsers from "../components/Sponsers/Sponsers";
+// import Podcast from "../components/Podcast/Podcast";
 import StatisticCards from "../components/StatisticCards/StatisticCards";
 import Newsletter from "../components/Newsletter/Newsletter";
 import Nav from "../components/Nav/Nav";
 import Footer from "../components/Footer/Footer";
 import FloatingIcons from "../components/FloatingIcons/FloatingIcons";
 import Loader from "../components/Loader/Loader";
+import TeamCards from "../components/TeamCards/TeamCards";
 import { ToastContainer } from "react-toastify";
 
-
 export default function Home() {
-  const [loader, setLoader] = useState(true);
-  useEffect(() => {
-    setTimeout(() => {
-      setLoader(false);
-    }, 500);
-  }, []);
-  return (
-    <div className={styles.container}>
-      <ToastContainer style={{ zIndex: 999999 }} />
-      <Head>
-        <title>Daksh 2023</title>
-        <meta
-          name="description"
-          content="DAKSH is the annual techno management fest of Sastra University. Ever since its establishment it has been a platform for a multitude of students and aspirants to unravel their talents and showcase their technical prowess. We’ve grown together as a fest since our inception providing students with the finest exposure and skill. This edition of Daksh aims at creating a virtual forum bringing together the eccentric minded and celebrating technology."
-        />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
+	const [loader, setLoader] = useState(true);
+	useEffect(() => {
+		setTimeout(() => {
+			setLoader(false);
+		}, 500);
+	}, []);
+	return (
+		<div className={styles.container}>
+			<ToastContainer style={{ zIndex: 999999 }} />
+			<Head>
+				<title>Daksh 2023</title>
+				<meta
+					name="description"
+					content="DAKSH is the annual techno management fest of Sastra University. Ever since its establishment it has been a platform for a multitude of students and aspirants to unravel their talents and showcase their technical prowess. We’ve grown together as a fest since our inception providing students with the finest exposure and skill. This edition of Daksh aims at creating a virtual forum bringing together the eccentric minded and celebrating technology."
+				/>
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
 
-      {loader ? (
-        <Loader />
-      ) : (
-        <main className={styles.main}>
-          <FloatingIcons />
-          <Nav />
-          <Banner />
-          <BannerCards />
-          <About />
-          <Sponsers />
-          <Podcast />
-          <StatisticCards />
-          <Newsletter />
-          <Footer />
-        </main>
-      )}
-    </div>
-  );
+			{loader ? (
+				<Loader />
+			) : (
+				<main className={styles.main}>
+					<FloatingIcons />
+					<Nav />
+					<Banner />
+					<BannerCards />
+					<About />
+					{/* <Sponsers /> */}
+					{/* <Podcast /> */}
+					<TeamCards />
+					<StatisticCards />
+					<Newsletter />
+					<Footer />
+				</main>
+			)}
+		</div>
+	);
 }
diff --git a/public/about-img.png b/public/about-img.png
new file mode 100644
index 0000000..f96266f
Binary files /dev/null and b/public/about-img.png differ
diff --git a/public/aboutbg.png b/public/aboutbg.png
new file mode 100644
index 0000000..712dea9
Binary files /dev/null and b/public/aboutbg.png differ
diff --git a/public/backgbanner.png b/public/backgbanner.png
index 8ebd38a..30906a2 100644
Binary files a/public/backgbanner.png and b/public/backgbanner.png differ
diff --git a/public/cardbg.png b/public/cardbg.png
new file mode 100644
index 0000000..6de05bf
Binary files /dev/null and b/public/cardbg.png differ
diff --git a/public/footerbg.png b/public/footerbg.png
new file mode 100644
index 0000000..533ebb7
Binary files /dev/null and b/public/footerbg.png differ
diff --git a/public/joinus.png b/public/joinus.png
new file mode 100644
index 0000000..9a24b07
Binary files /dev/null and b/public/joinus.png differ
diff --git a/public/logo.png b/public/logo.png
index 7562512..4a7823a 100644
Binary files a/public/logo.png and b/public/logo.png differ
diff --git a/styles/globals.css b/styles/globals.css
index 662ae5a..e13f1fe 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -67,7 +67,8 @@ body {
 html {
   /* background-color: var(--primaryBg); */
   /* background-color: var(--color-white); */
-  background: url("/backgbanner.webp");
+  /* background: url("/backgbanner.png") */
+  background: linear-gradient(90deg, rgba(105, 82, 73, 0.8) 0%, rgba(157, 147, 121, 0.8) 100%);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: 100%;