diff --git a/src/App.js b/src/App.js
index 80dff7121..1d45e0298 100644
--- a/src/App.js
+++ b/src/App.js
@@ -49,6 +49,7 @@ import MaveliPortfolio from "./Pages/Events/MaveliPortfolio/MaveliPortfolio";
 import Level1 from "./Pages/CapTF/Level1";
 import Spiderman from "./Pages/CapTF/Spiderman";
 import Submission from "./Pages/CapTF/Submission";
+import TopCoders from "./Pages/Top100Coders/TopCoders";
 function App() {
   const [redirects, setRedirects] = useState([]);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -149,6 +150,7 @@ function App() {
           <Route path="/level1" element={<Level1 />} />
           <Route path="/spiderman" element={<Spiderman />} />
           <Route path="/submission" element={<Submission />} />
+          <Route path="/top100coders" element={<TopCoders />} />
         </Routes>
       </Router>
     </div>
diff --git a/src/Pages/ArtOfTeaching/ArtOfTeaching.jsx b/src/Pages/ArtOfTeaching/ArtOfTeaching.jsx
index 1ea0456fc..0822c8217 100644
--- a/src/Pages/ArtOfTeaching/ArtOfTeaching.jsx
+++ b/src/Pages/ArtOfTeaching/ArtOfTeaching.jsx
@@ -18,7 +18,7 @@ import "swiper/css"
 import "swiper/css/pagination"
 import "swiper/css/navigation"
 
-import { Pagination, Navigation } from "swiper"
+// import { Pagination, Navigation } from "swiper"
 
 const ArtOfTeaching = () => {
   const data = {
@@ -132,9 +132,9 @@ const ArtOfTeaching = () => {
 
             <div className={styles.cards_container_desktop}>
               <Swiper
-                pagination={true}
-                navigation={true}
-                modules={[Pagination, Navigation]}
+                // pagination={true}
+                // navigation={true}
+                // modules={[Pagination, Navigation]}
                 className="aswiper"
               >
                 <SwiperSlide>
diff --git a/src/Pages/Top100Coders/TopCoders.jsx b/src/Pages/Top100Coders/TopCoders.jsx
new file mode 100644
index 000000000..59fabc5c2
--- /dev/null
+++ b/src/Pages/Top100Coders/TopCoders.jsx
@@ -0,0 +1,226 @@
+import React from 'react'
+import styles from './TopCoders.module.css'
+
+// Images import section
+import top100 from './assets/top100logo.png'
+import gtech from './assets/gtech.webp'
+import heroBar from './assets/heroBar.webp'
+import card from './assets/card.png'
+import cash from './assets/cash.webp'
+import topBorder from './assets/pseudo.webp'
+import arrow1 from './assets/arrow.png'
+import c1 from './assets/c1.png'
+import c2 from './assets/c2.png'
+import c3 from './assets/c3.png'
+import c4 from './assets/c4.png'
+import c5 from './assets/c5.png'
+import key from './assets/key.webp'
+import build from './assets/build.webp'
+import earth from './assets/earth.png'
+import algo from './assets/algo.png'
+import shield from './assets/shield.png'
+import signup from './assets/signup.png'
+import gt from './assets/gt.png'
+import kerala from './assets/kerala.png'
+import videoBg from './assets/vid.webm'
+
+// Icons import section
+import { BsDiscord } from 'react-icons/bs'
+import { BsInstagram } from 'react-icons/bs'
+import { AiOutlineYoutube } from 'react-icons/ai'
+import { BiLogoFacebook } from 'react-icons/bi'
+import { BsTwitter } from 'react-icons/bs'
+import { LuChevronDown } from 'react-icons/lu'
+
+export default function TopCoders() {
+
+    const navbar = React.useRef(null)
+
+    React.useEffect(() => {
+        var prevScrollpos = window.pageYOffset;
+        window.onscroll = function () {
+            var currentScrollPos = window.pageYOffset;
+            if (prevScrollpos > currentScrollPos) {
+                navbar.current.style.top = "0";
+            } else {
+                navbar.current.style.top = "-150px";
+            }
+            prevScrollpos = currentScrollPos;
+        }
+    }, [])
+
+    return (
+        <div className={styles.topCoders}>
+            <div ref={navbar} className={styles.nav}>
+                <img className={styles.top100Logo} src={top100} alt="logo" />
+                <div className={styles.navLinks}>
+                    <a href="">Home</a>
+                    <a href="">Top 100</a>
+                    <a href="">About</a>
+                </div>
+                <img className={styles.gtechLogo} src={gtech} alt="" />
+            </div>
+
+            <div className={styles.topCodersHero}>
+                <video className={styles.renderVideo} autoPlay loop muted preload="auto">
+                    <source src={videoBg} type="video/webm"></source>
+                </video>
+                <span className={styles.rect}></span>
+                <span className={styles.rect}></span>
+                <span className={styles.rect}></span>
+                <div className={styles.heroBar}>
+                    <img src={heroBar} alt="" />
+                    <a href='#'>Join the Top 100 Elite Squad</a>
+                </div>
+            </div>
+
+            <div className={styles.topCodersContent}>
+                <img className={styles.topBorder} src={topBorder} alt="" />
+                <div className={styles.text}>
+                    <div className={styles.textHead}>
+                        <span className={styles.rect2}></span>
+                        <h1>Be the top <b>100</b> of the year 2023</h1>
+                        <span className={styles.rect2}></span>
+                    </div>
+                    <p className={styles.textContent}>Welcome to the Top 100 Coders initiative Recognised by Kerala Govt.
+                        We're on a mission to recognize and empower the best coders in India.
+                        If you're passionate about coding and want to make a significant
+                        impact in the tech community, you're in the right place.</p>
+                    <div className={styles.prize}>
+                        <span>
+                            <p>PRIZES</p>
+                            <img src={cash} alt="" />
+                        </span>
+                        <p>WORTH ₹10,00,000</p>
+                    </div>
+                </div>
+                <img className={styles.card} src={card} alt="" />
+
+                <span className={styles.black}></span>
+                <span className={styles.line}></span>
+            </div>
+
+            <div className={styles.topCoderSelection}>
+                <div className={styles.selectionHead}>
+                    <img src={arrow1} alt="" />
+                    <span>
+                        <p>Criteria for Selection</p>
+                        <p>We're looking for top coders who excel in the following areas:</p>
+                    </span>
+                </div>
+                <div className={styles.slider}>
+                    <div className={styles.card}>
+                        <img className={styles.CC} src={c1} alt="" />
+                        <img className={styles.key} src={key} alt="" />
+                    </div>
+                    <div className={styles.card}>
+                        <img className={styles.CC} src={c2} alt="" />
+                        <img className={styles.build} src={build} alt="" />
+                    </div>
+                    <div className={styles.card}>
+                        <img className={styles.CC} src={c3} alt="" />
+                        <img className={styles.algo} src={algo} alt="" />
+                    </div>
+                    <div className={styles.card}>
+                        <img className={styles.CC} src={c4} alt="" />
+                        <img className={styles.earth} src={earth} alt="" />
+                    </div>
+                    <div className={styles.card}>
+                        <img className={styles.CC} src={c5} alt="" />
+                        <img className={styles.shield} src={shield} alt="" />
+                    </div>
+                </div>
+
+                <div className={styles.heroBar}>
+                    <img src={signup} alt="" />
+                </div>
+            </div>
+
+            <div className={styles.topCodersForm}>
+                <form action="" className={styles.codersForm}>
+                    <div>
+                        <input type="text" placeholder='First Name' />
+                        <input type="text" placeholder='Last Name' />
+                        <input type="text" placeholder='Email' />
+                        <input type="text" placeholder='Phone No.' />
+                        <input type="text" placeholder='Track-selected' />
+                        <input type="text" placeholder='Portfoilio' />
+                    </div>
+                    <textarea name="" id="" cols="30" rows="7"></textarea>
+                    <div className={styles.submit}>
+                        <span>
+                            <input type="checkbox" name="" id="" />
+                            <label htmlFor="">Terms & Conditions</label>
+                        </span>
+                        <button>Submit</button>
+                    </div>
+                </form>
+            </div>
+
+            <div className={styles.topcoderFaq}>
+                <div className={styles.faqHead}>
+                    <h1>Frequently Asked Questions</h1>
+                    <p>Have questions? We've got answers!</p>
+                </div>
+
+                <details className={styles.faq}>
+                    <summary className={styles.question}>What is Top 100 Coders? <LuChevronDown className={styles.chev} /> </summary>
+                    <p className={styles.answer}>
+                        <b>
+                            Top 100 Coders is an initiative by Gtech to recognize and empower the best coders in India.
+                            We're looking for top coders who excel in the following areas: Competitive Coding,
+                            Open Source, Algorithms, Community Building, and Tech Evangelism.
+                        </b>
+                    </p>
+                </details>
+                <details className={styles.faq}>
+                    <summary className={styles.question}>What happens after the selection process? <LuChevronDown className={styles.chev} /></summary>
+                    <p className={styles.answer}>
+                        <b>
+                            Top 100 Coders is an initiative by Gtech to recognize and empower the best coders in India.
+                            We're looking for top coders who excel in the following areas: Competitive Coding,
+                            Open Source, Algorithms, Community Building, and Tech Evangelism.
+                        </b>
+                    </p>
+                </details>
+                <details className={styles.faq}>
+                    <summary className={styles.question}>How do I apply? <LuChevronDown className={styles.chev} /></summary>
+                    <p className={styles.answer}>
+                        <b>
+                            Top 100 Coders is an initiative by Gtech to recognize and empower the best coders in India.
+                            We're looking for top coders who excel in the following areas: Competitive Coding,
+                            Open Source, Algorithms, Community Building, and Tech Evangelism.
+                        </b>
+                    </p>
+                </details>
+            </div>
+
+            <footer className={styles.topcodersFooter}>
+                <div>
+                    <p>Terms of Use & Privacy Policy</p>
+                    <p>User agreement</p>
+                </div>
+
+                <div>
+                    <p>Find us on</p>
+                    <span className={styles.socials}>
+                        <a href="#"> <BsDiscord /> </a>
+                        <a href="#"> <BsInstagram /> </a>
+                        <a href="#"> <BsTwitter /> </a>
+                        <a href="#"> <AiOutlineYoutube /> </a>
+                        <a href="#"> <BiLogoFacebook /> </a>
+                    </span>
+                </div>
+
+                <div className={styles.footerLogos}>
+                    <img src={kerala} alt="" />
+                    <span className={styles.line}></span>
+                    <img src={top100} alt="" />
+                    <span className={styles.line}></span>
+                    <img src={gt} alt="" />
+                </div>
+            </footer>
+
+        </div>
+    )
+}
diff --git a/src/Pages/Top100Coders/TopCoders.module.css b/src/Pages/Top100Coders/TopCoders.module.css
new file mode 100644
index 000000000..c0b53de38
--- /dev/null
+++ b/src/Pages/Top100Coders/TopCoders.module.css
@@ -0,0 +1,871 @@
+@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;200;300;400;500;600;700&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
+
+:root {
+    --yellow: #FCEE0A;
+}
+
+.topCoders {
+    font-family: 'Antonio', sans-serif;
+    height: fit-content;
+}
+
+.topCoders .nav {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    padding: 0 3rem;
+    height: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, .5);
+    transition: all .5s ease-in-out;
+}
+
+.top100Logo {
+    height: 4rem;
+}
+
+.topCoders .nav .navLinks {
+    color: #fff;
+    display: flex;
+    gap: 2rem;
+    position: relative;
+    left: 3rem;
+}
+
+.topCoders .nav .navLinks a {
+    font-weight: 100;
+    text-transform: uppercase;
+    font-size: 1.5rem;
+}
+
+.topCoders .nav .gtechLogo {
+    height: 3rem;
+}
+
+.topCodersHero {
+    position: relative;
+    height: 100vh;
+    width: 100%;
+    background: black;
+    background-image: radial-gradient(rgb(255, 215, 0, .8) 1.5px, transparent 0),
+        radial-gradient(rgb(250, 250, 250, .3) 1.5px, transparent 0);
+    background-position: -30px 55px, 70px 105px;
+    background-size: 100px 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.topCodersHero .renderVideo{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    object-fit: cover;
+}
+
+.topCodersHero .rect {
+    position: absolute;
+    width: 3rem;
+    height: 1.3rem;
+    background: var(--yellow);
+}
+
+.topCodersHero .rect:first-child {
+    top: 20%;
+    left: 15%;
+}
+
+.topCodersHero .rect:nth-child(2) {
+    bottom: 15%;
+    left: 10%;
+}
+
+.topCodersHero .rect:nth-child(3) {
+    top: 30%;
+    right: 15%;
+}
+
+.topCodersHero .rect:nth-child(4) {
+    bottom: 25%;
+    right: 0;
+}
+
+.topCodersHero .heroBar {
+    width: fit-content;
+    position: relative;
+    top: 10rem;
+}
+
+.topCodersHero .heroBar img {
+    height: 5rem;
+}
+
+.topCodersHero .heroBar a {
+    text-transform: uppercase;
+    font-size: 1.5rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.topCodersContent {
+    position: relative;
+    height: fit-content;
+    background-color: var(--yellow);
+    display: flex;
+    align-items: center;
+}
+
+.topCodersContent .topBorder {
+    position: absolute;
+    top: -2rem;
+    width: 100%;
+}
+
+.topCodersContent .text {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.topCodersContent .text .rect2 {
+    background-color: black;
+    width: 3.5rem;
+    height: 1.5rem;
+    display: block;
+}
+
+.topCodersContent .text .textHead {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 3rem;
+}
+
+.topCodersContent .text .textContent {
+    width: 60%;
+    font-size: 1.3rem;
+    margin-bottom: 1rem;
+}
+
+.topCodersContent .text h1 {
+    font-size: 3rem;
+}
+
+.topCodersContent .text b {
+    font-size: 4rem;
+}
+
+.topCodersContent .card {
+    position: relative;
+    bottom: 4rem;
+    height: 40rem;
+    transition: all .5s ease-in-out;
+}
+
+.topCodersContent .card:hover img {
+    scale: 1.1;
+}
+
+.topCodersContent .text .prize {
+    position: relative;
+}
+
+.topCodersContent .text .prize p:nth-child(1) {
+    font-size: 2rem;
+    font-weight: 100;
+    letter-spacing: 1rem;
+}
+
+.topCodersContent .text .prize p:last-child {
+    font-size: 7rem;
+    margin-top: -1rem;
+    letter-spacing: .2rem;
+}
+
+.topCodersContent .text .prize span {
+    display: flex;
+    width: fit-content;
+    position: relative;
+}
+
+.topCodersContent .text .prize img {
+    position: absolute;
+    height: 8rem;
+    top: -1rem;
+    right: -10rem;
+}
+
+.topCodersContent .black {
+    position: absolute;
+    height: 1.5rem;
+    width: 100%;
+    background-color: black;
+    display: block;
+    bottom: 4rem;
+    left: 0;
+}
+
+.topCodersContent .line {
+    position: absolute;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: black;
+    width: 3.5px;
+    height: 2rem;
+}
+
+.topCoderSelection {
+    position: relative;
+    height: fit-content;
+    padding-top: 2rem;
+    top: -2rem;
+    background-color: black;
+    color: #fff;
+}
+
+.topCoderSelection .selectionHead {
+    display: flex;
+    gap: 2rem;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 4rem;
+}
+
+.topCoderSelection .selectionHead span {
+    padding-right: 4rem;
+}
+
+.topCoderSelection .selectionHead span p:first-child {
+    font-size: 5rem;
+    text-transform: uppercase;
+}
+
+.topCoderSelection .selectionHead span p:last-child {
+    font-size: 1.7rem;
+    text-transform: uppercase;
+}
+
+.topCoderSelection .slider {
+    position: relative;
+    height: 20rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .5rem;
+    overflow-x: scroll;
+    overflow: visible;
+}
+
+.topCoderSelection .slider .CC {
+    height: 20rem;
+}
+
+.topCoderSelection .slider .card {
+    position: relative;
+    height: fit-content;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* card-1 */
+.topCoderSelection .slider .card .key {
+    position: absolute;
+    height: 12rem;
+    top: -4rem;
+    animation: key 5s ease-in-out infinite;
+}
+
+/* card-2 */
+.topCoderSelection .slider .card .build {
+    position: absolute;
+    height: 15rem;
+    top: -1.5rem;
+    right: 0rem;
+    animation: key 15s ease-in-out infinite;
+}
+
+/* card-3 */
+.topCoderSelection .slider .card .algo {
+    position: absolute;
+    height: 17rem;
+    top: -3rem;
+    animation: key 8s ease-in-out infinite;
+}
+
+/* card-4 */
+.topCoderSelection .slider .card .earth {
+    position: absolute;
+    height: 12rem;
+    top: -1rem;
+    right: -1rem;
+    animation: key 8s ease-in-out infinite;
+}
+
+/* card-5 */
+.topCoderSelection .slider .card .shield {
+    position: absolute;
+    height: 10rem;
+    top: 0rem;
+    animation: key 8s ease-in-out infinite;
+}
+
+@keyframes key {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-.3rem);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.topCoderSelection .heroBar {
+    width: 100%;
+    display: flex;
+    position: relative;
+    bottom: -5rem;
+    left: 0;
+}
+
+.topCoderSelection .heroBar img {
+    width: 100%;
+    z-index: 1;
+}
+
+.topCodersForm {
+    position: relative;
+    height: fit-content;
+    background-color: black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 0;
+    color: var(--yellow);
+}
+
+.topCodersForm .codersForm div {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+}
+
+.topCodersForm .codersForm input[type="text"] {
+    width: 100%;
+    height: 4rem;
+    border: none;
+    border-bottom: 1px solid var(--yellow);
+    background-color: transparent;
+    outline: none;
+    padding: 0 1rem;
+    color: var(--yellow);
+    width: 25rem;
+}
+
+.topCodersForm .codersForm input[type="text"]::placeholder {
+    color: var(--yellow);
+}
+
+.topCodersForm .codersForm textarea {
+    width: 100%;
+    margin-top: 1rem;
+    border: none;
+    border-bottom: 1px solid var(--yellow);
+    background-color: transparent;
+    outline: none;
+    color: var(--yellow);
+}
+
+.topCodersForm .codersForm .submit {
+    padding-top: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.topCodersForm .codersForm .submit span {
+    display: flex;
+    gap: .5rem;
+    align-items: center;
+}
+
+.topCodersForm .codersForm .submit button {
+    width: 10rem;
+    height: 3rem;
+    border: none;
+    background-color: #FCEE0A;
+    color: black;
+    font-weight: 400;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    cursor: pointer;
+    border-radius: 50px;
+}
+
+.topcoderFaq {
+    position: relative;
+    height: fit-content;
+    background-color: black;
+    color: #fff;
+    padding: 4rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.topcoderFaq .faqHead {
+    padding-bottom: 2rem;
+    width: fit-content;
+}
+
+.topcoderFaq .faqHead h1 {
+    font-size: 5rem;
+}
+
+.topcoderFaq .faqHead p {
+    font-size: 1.5rem;
+    width: 100%;
+}
+
+.topcoderFaq .faq {
+    position: relative;
+    width: 100%;
+    height: 6rem;
+    background-image: url('./assets/faq1.webp');
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    color: black;
+    text-align: center;
+    transition: all .5s ease-in-out;
+}
+
+.topcoderFaq .faq .question {
+    list-style: none;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .8rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.5rem;
+    width: 100%;
+    margin-bottom: 2rem;
+}
+
+.topcoderFaq .faq .answer {
+    position: relative;
+    top: 70%;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    height: 8rem;
+    width: 65.8%;
+    padding: 2rem 0;
+    background-image: url('./assets/faq2.webp');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: 80% 50%;
+    color: white;
+    text-align: center;
+}
+
+.faq[open] {
+    margin-bottom: 5rem;
+}
+
+.faq[open] .chev{
+    rotate: 180deg;
+}
+
+.topcodersFooter {
+    background-color: var(--yellow);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+    padding-top: 2rem;
+}
+
+.topcodersFooter div {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-size: 1.2rem;
+}
+
+.topcodersFooter span {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+.topcodersFooter .socials {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.topcodersFooter .footerLogos {
+    margin-top: 2rem;
+    padding: 3rem;
+    background-color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3rem;
+    width: 50%;
+}
+
+.topcodersFooter .footerLogos span {
+    height: 2rem;
+    width: 2px;
+    display: block;
+    background-color: white;
+}
+
+.topcodersFooter .footerLogos img {
+    height: 3rem;
+}
+
+@media(width<748px) {
+    .topCoders .nav {
+        padding: 0 1rem;
+        height: 5rem;
+    }
+
+    .topCoders .nav .navLinks {
+        display: none;
+    }
+
+
+    .topCodersContent {
+        flex-direction: column;
+        padding: 2rem 0;
+        /* align-items: flex-end; */
+    }
+
+    .topCodersContent .text .prize p:nth-child(1) {
+        font-size: 2.5rem;
+    }
+
+    .topCodersContent .text .prize p:last-child {
+        font-size: 4rem;
+    }
+
+    .topCodersContent .text .prize img {
+        height: 7rem;
+    }
+
+    .topCodersContent .card {
+        height: 25rem;
+        bottom: -1rem;
+    }
+
+    .topCodersContent .black,
+    .topCodersContent .line {
+        display: none;
+    }
+
+    .topCoderSelection .heroBar {
+        bottom: -3rem;
+    }
+
+    .topCoderSelection .heroBar img {
+        height: 5rem;
+        object-fit: cover;
+    }
+
+    /* selection section */
+    .topCoderSelection .selectionHead {
+        flex-direction: column-reverse;
+        padding: 1rem;
+    }
+
+    .topCoderSelection .selectionHead span p:first-child {
+        font-size: 4rem;
+    }
+
+    .topCoderSelection .selectionHead span p:last-child {
+        font-size: 1.3rem;
+    }
+
+    .topCoderSelection .selectionHead img {
+        height: 12rem;
+        padding-bottom: 2rem;
+    }
+
+    .topCoderSelection .slider {
+        height: 23rem;
+        gap: 1.5rem;
+        justify-content: start;
+        padding: 0 2rem;
+        overflow: scroll;
+    }
+
+    .topCodersForm .codersForm input[type="text"] {
+        width: 18rem;
+    }
+
+    /* Faq section */
+    .topcoderFaq {
+        position: relative;
+        height: fit-content;
+        background-color: black;
+        color: #fff;
+        padding: 4rem 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .topcoderFaq .faqHead {
+        padding-bottom: 0rem;
+        text-align: center;
+    }
+
+    .topcoderFaq .faqHead h1 {
+        font-size: 3rem;
+    }
+
+    .topcoderFaq .faqHead p {
+        font-size: 1rem;
+    }
+
+    .topcoderFaq .faq {
+        background-size: cover;
+    }
+
+    .topcoderFaq .faq .question {
+        list-style: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 1.5rem;
+        width: 100%;
+        margin-bottom: 2rem;
+    }
+
+    .topcoderFaq .faq .answer {
+        height: fit-content;
+        width: 100%;
+        padding: 2rem 0;
+        padding-bottom: 4rem;
+        font-size: .8rem;
+    }
+
+    /* Footer section */
+    .topcodersFooter .footerLogos {
+        gap: 2rem;
+        width: 100%;
+    }
+
+    .topcodersFooter .footerLogos img {
+        height: 2rem;
+    }
+}
+
+@media(width<=540px) {
+    .topCoders .nav .top100Logo {
+        height: 2.1rem;
+    }
+
+    .topCoders .nav .gtechLogo {
+        height: 1.8rem;
+    }
+
+    .topCodersHero .rect {
+        width: 2rem;
+        height: .8rem;
+    }
+
+    .topCodersHero .rect:nth-child(2) {
+        bottom: 25%;
+        left: 5%;
+    }
+
+    .topCodersHero .rect:nth-child(3) {
+        right: 10%;
+    }
+
+    .topCodersHero .rect:nth-child(4) {
+        bottom: 4%;
+    }
+
+    .topCodersHero .heroBar {
+        width: max-content;
+        top: 15rem;
+    }
+
+    .topCodersHero .heroBar img {
+        width: 100%;
+        object-fit: cover;
+    }
+
+    .topCodersHero .heroBar a {
+        font-size: 1.2rem;
+    }
+
+    .topCodersContent .topBorder {
+        top: -.5rem;
+    }
+
+    /* Content Section */
+    .topCodersContent .text {
+        width: 100%;
+        padding: 0 1rem;
+    }
+
+    .topCodersContent .text .rect2 {
+        width: 2rem;
+        height: 1rem;
+    }
+
+    .topCodersContent .text .textContent {
+        margin-top: -1rem;
+        width: 90%;
+        margin-bottom: 1rem;
+    }
+
+    .topCodersContent .text h1 {
+        font-size: 2.5rem;
+        line-height: 3.5rem;
+    }
+
+    .topCodersContent .text b {
+        font-size: 3rem;
+    }
+
+    .topCodersContent .text .prize p:nth-child(1) {
+        font-size: 1.5rem;
+    }
+
+    .topCodersContent .text .prize p:last-child {
+        font-size: 3rem;
+    }
+
+    .topCodersContent .text .prize img {
+        height: 5rem;
+        right: -5rem;
+    }
+
+    .topCodersContent .card {
+        height: 20rem;
+        bottom: -1rem;
+    }
+
+    /* Selection section */
+    .topCoderSelection .selectionHead {
+        flex-direction: column-reverse;
+        padding: 1rem;
+    }
+
+    .topCoderSelection .selectionHead span p:first-child {
+        font-size: 2.5rem;
+    }
+
+    .topCoderSelection .selectionHead span p:last-child {
+        font-size: 1rem;
+    }
+
+    .topCoderSelection .selectionHead img {
+        height: 8rem;
+    }
+
+    .topCoderSelection .slider {
+        height: 23rem;
+        gap: 1.5rem;
+        justify-content: start;
+        padding: 0 2rem;
+        overflow: scroll;
+    }
+
+    .topCoderSelection .slider .CC {
+        height: 23rem;
+    }
+
+    .topCoderSelection .slider .card {
+        position: relative;
+        height: fit-content;
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* card-1 */
+    .topCoderSelection .slider .card .key {
+        top: -2.5rem;
+    }
+
+    /* card-2 */
+    .topCoderSelection .slider .card .build {
+        top: .5rem;
+    }
+
+    /* card-3 */
+    .topCoderSelection .slider .card .algo {
+        top: -2rem;
+    }
+
+    /* card-4 */
+    .topCoderSelection .slider .card .earth {
+        height: 13rem;
+    }
+
+    /* card-5 */
+    .topCoderSelection .slider .card .shield {
+        height: 13rem;
+    }
+
+    /* Form section */
+    .topCodersForm .codersForm div {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .faq[open] {
+        margin-bottom: 6rem;
+    }
+}
+
+@media (width <400px){
+    .topCodersHero .heroBar a{
+        font-size: 1rem;
+    }
+
+    .topCodersContent .text .textHead .rect2:first-child{
+        display: none;
+    }
+
+    .topcoderFaq .faq .question {
+        font-size: 1.2rem;
+    }
+
+    .faq[open] {
+        margin-bottom: 7rem;
+    }
+}
\ No newline at end of file
diff --git a/src/Pages/Top100Coders/assets/algo.png b/src/Pages/Top100Coders/assets/algo.png
new file mode 100644
index 000000000..3054088e4
Binary files /dev/null and b/src/Pages/Top100Coders/assets/algo.png differ
diff --git a/src/Pages/Top100Coders/assets/arrow.png b/src/Pages/Top100Coders/assets/arrow.png
new file mode 100644
index 000000000..73d290ae1
Binary files /dev/null and b/src/Pages/Top100Coders/assets/arrow.png differ
diff --git a/src/Pages/Top100Coders/assets/arrow2.png b/src/Pages/Top100Coders/assets/arrow2.png
new file mode 100644
index 000000000..36bdc6f50
Binary files /dev/null and b/src/Pages/Top100Coders/assets/arrow2.png differ
diff --git a/src/Pages/Top100Coders/assets/build.webp b/src/Pages/Top100Coders/assets/build.webp
new file mode 100644
index 000000000..791c4065f
Binary files /dev/null and b/src/Pages/Top100Coders/assets/build.webp differ
diff --git a/src/Pages/Top100Coders/assets/c1.png b/src/Pages/Top100Coders/assets/c1.png
new file mode 100644
index 000000000..1becab37b
Binary files /dev/null and b/src/Pages/Top100Coders/assets/c1.png differ
diff --git a/src/Pages/Top100Coders/assets/c2.png b/src/Pages/Top100Coders/assets/c2.png
new file mode 100644
index 000000000..5f1717704
Binary files /dev/null and b/src/Pages/Top100Coders/assets/c2.png differ
diff --git a/src/Pages/Top100Coders/assets/c3.png b/src/Pages/Top100Coders/assets/c3.png
new file mode 100644
index 000000000..25c6ec75d
Binary files /dev/null and b/src/Pages/Top100Coders/assets/c3.png differ
diff --git a/src/Pages/Top100Coders/assets/c4.png b/src/Pages/Top100Coders/assets/c4.png
new file mode 100644
index 000000000..078226000
Binary files /dev/null and b/src/Pages/Top100Coders/assets/c4.png differ
diff --git a/src/Pages/Top100Coders/assets/c5.png b/src/Pages/Top100Coders/assets/c5.png
new file mode 100644
index 000000000..58a1c43ce
Binary files /dev/null and b/src/Pages/Top100Coders/assets/c5.png differ
diff --git a/src/Pages/Top100Coders/assets/card.png b/src/Pages/Top100Coders/assets/card.png
new file mode 100644
index 000000000..55ee2da54
Binary files /dev/null and b/src/Pages/Top100Coders/assets/card.png differ
diff --git a/src/Pages/Top100Coders/assets/cash.webp b/src/Pages/Top100Coders/assets/cash.webp
new file mode 100644
index 000000000..c7be713cc
Binary files /dev/null and b/src/Pages/Top100Coders/assets/cash.webp differ
diff --git a/src/Pages/Top100Coders/assets/circle.png b/src/Pages/Top100Coders/assets/circle.png
new file mode 100644
index 000000000..d7cbb1344
Binary files /dev/null and b/src/Pages/Top100Coders/assets/circle.png differ
diff --git a/src/Pages/Top100Coders/assets/earth.png b/src/Pages/Top100Coders/assets/earth.png
new file mode 100644
index 000000000..c8be3b6c4
Binary files /dev/null and b/src/Pages/Top100Coders/assets/earth.png differ
diff --git a/src/Pages/Top100Coders/assets/faq1.webp b/src/Pages/Top100Coders/assets/faq1.webp
new file mode 100644
index 000000000..0a5710d91
Binary files /dev/null and b/src/Pages/Top100Coders/assets/faq1.webp differ
diff --git a/src/Pages/Top100Coders/assets/faq2.webp b/src/Pages/Top100Coders/assets/faq2.webp
new file mode 100644
index 000000000..067adb0fb
Binary files /dev/null and b/src/Pages/Top100Coders/assets/faq2.webp differ
diff --git a/src/Pages/Top100Coders/assets/gt.png b/src/Pages/Top100Coders/assets/gt.png
new file mode 100644
index 000000000..51956f889
Binary files /dev/null and b/src/Pages/Top100Coders/assets/gt.png differ
diff --git a/src/Pages/Top100Coders/assets/gtech.webp b/src/Pages/Top100Coders/assets/gtech.webp
new file mode 100644
index 000000000..3cfb1d520
Binary files /dev/null and b/src/Pages/Top100Coders/assets/gtech.webp differ
diff --git a/src/Pages/Top100Coders/assets/heroBar.webp b/src/Pages/Top100Coders/assets/heroBar.webp
new file mode 100644
index 000000000..5961dffed
Binary files /dev/null and b/src/Pages/Top100Coders/assets/heroBar.webp differ
diff --git a/src/Pages/Top100Coders/assets/kerala.png b/src/Pages/Top100Coders/assets/kerala.png
new file mode 100644
index 000000000..de2c3b79f
Binary files /dev/null and b/src/Pages/Top100Coders/assets/kerala.png differ
diff --git a/src/Pages/Top100Coders/assets/key.webp b/src/Pages/Top100Coders/assets/key.webp
new file mode 100644
index 000000000..5cea7811f
Binary files /dev/null and b/src/Pages/Top100Coders/assets/key.webp differ
diff --git a/src/Pages/Top100Coders/assets/pseudo.webp b/src/Pages/Top100Coders/assets/pseudo.webp
new file mode 100644
index 000000000..33e526d8a
Binary files /dev/null and b/src/Pages/Top100Coders/assets/pseudo.webp differ
diff --git a/src/Pages/Top100Coders/assets/shield.png b/src/Pages/Top100Coders/assets/shield.png
new file mode 100644
index 000000000..316c4e9c5
Binary files /dev/null and b/src/Pages/Top100Coders/assets/shield.png differ
diff --git a/src/Pages/Top100Coders/assets/signup.png b/src/Pages/Top100Coders/assets/signup.png
new file mode 100644
index 000000000..a7b9a52f6
Binary files /dev/null and b/src/Pages/Top100Coders/assets/signup.png differ
diff --git a/src/Pages/Top100Coders/assets/top100logo.png b/src/Pages/Top100Coders/assets/top100logo.png
new file mode 100644
index 000000000..e112620d2
Binary files /dev/null and b/src/Pages/Top100Coders/assets/top100logo.png differ
diff --git a/src/Pages/Top100Coders/assets/vid.webm b/src/Pages/Top100Coders/assets/vid.webm
new file mode 100644
index 000000000..0449c94e8
Binary files /dev/null and b/src/Pages/Top100Coders/assets/vid.webm differ