diff --git a/package-lock.json b/package-lock.json
index 594222b..26ea32b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "eslint": "7.28.0",
         "eslint-config-next": "13.4.5",
         "hamburger-react": "^2.5.0",
-        "next": "13.4.5",
+        "next": "^13.4.5",
         "postcss": "8.4.24",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
@@ -4542,19 +4542,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typescript": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
-      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index 8b785aa..6206f61 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,11 @@
     "autoprefixer": "10.4.14",
     "eslint": "7.28.0",
     "eslint-config-next": "13.4.5",
-
     "hamburger-react": "^2.5.0",
-    "next": "13.4.5",
+    "next": "^13.4.5",
     "postcss": "8.4.24",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-
     "react-dom": "^18.2.0",
     "sharp": "^0.32.1",
     "tailwindcss": "3.3.2"
diff --git a/public/Images/bronze-border-mobile.png b/public/Images/bronze-border-mobile.png
new file mode 100644
index 0000000..9dd1649
Binary files /dev/null and b/public/Images/bronze-border-mobile.png differ
diff --git a/public/Images/bronze-border.png b/public/Images/bronze-border.png
new file mode 100644
index 0000000..c14402b
Binary files /dev/null and b/public/Images/bronze-border.png differ
diff --git a/public/Images/gold-border-mobile.png b/public/Images/gold-border-mobile.png
new file mode 100644
index 0000000..03e9abd
Binary files /dev/null and b/public/Images/gold-border-mobile.png differ
diff --git a/public/Images/gold-border.png b/public/Images/gold-border.png
new file mode 100644
index 0000000..eab28eb
Binary files /dev/null and b/public/Images/gold-border.png differ
diff --git a/public/Images/silver-border-mobile.png b/public/Images/silver-border-mobile.png
new file mode 100644
index 0000000..b9c04a5
Binary files /dev/null and b/public/Images/silver-border-mobile.png differ
diff --git a/public/Images/silver-border.png b/public/Images/silver-border.png
new file mode 100644
index 0000000..c14402b
Binary files /dev/null and b/public/Images/silver-border.png differ
diff --git a/src/app/page.js b/src/app/page.js
index 88e70ed..60c7225 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,4 +1,3 @@
-
 import Accordion from "@/components/FAQs/Accordion";
 import Hero from "@/components/Hero/Hero";
 import Timeline from "@/components/Timeline/timeline";
@@ -6,21 +5,21 @@ import Statistics from "../components/suraj/Statistics";
 import { AboutUs } from "@/components/AboutUs";
 import Footer from "@/components/Footer/Footer";
 import { Sponsor } from "@/components/Sponsor/Sponsors";
+import Track from "@/components/TRACK/Track";
 
 export default function Home() {
   return (
     <>
-  
       <Hero />
       <AboutUs />
       <Statistics />
       <Timeline />
-      <Sponsor/>
+      <Track />
+      <Sponsor />
       <div className="relative">
-      <Accordion/>
-      <Footer/>
-
-      </div>    
+        <Accordion />
+        <Footer />
+      </div>
     </>
   );
 }
diff --git a/src/components/TRACK/Track.css b/src/components/TRACK/Track.css
new file mode 100644
index 0000000..a3ab066
--- /dev/null
+++ b/src/components/TRACK/Track.css
@@ -0,0 +1,145 @@
+.imago {
+  position: relative;
+}
+.imagos {
+  position: relative;
+}
+.text {
+  position: absolute;
+  color: white;
+  text-align: center;
+  font-family: Syoog;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 180%;
+}
+.sp {
+  color: #06ebe5;
+}
+.headin {
+  color: #ca40cd;
+  text-align: center;
+  font-family: Syoog;
+  font-size: 106px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 180%;
+  text-decoration-line: underline;
+}
+.hea {
+  color: #bbb4b4;
+  text-align: center;
+  font-family: Syoog;
+  font-size: 55px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 180%; /* 118.8px */
+  text-decoration-line: underline;
+}
+.text2 {
+  position: absolute;
+  color: #fff;
+  text-align: center;
+  font-family: Syoog;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 200;
+  line-height: 130%; /* 72px */
+}
+
+.ima-full {
+  display: block;
+}
+.ima-small {
+  display: none;
+}
+
+@media screen and (max-width: 1024px) {
+  .text2 {
+    position: absolute;
+    color: #fff;
+    text-align: center;
+    font-family: Syoog;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 50;
+    line-height: 130%; /* 72px */
+  }
+  .headin {
+    font-size: 55px;
+  }
+  .hea {
+    color: #bbb4b4;
+    text-align: center;
+    font-family: Syoog;
+    font-size: 45px;
+    font-style: normal;
+    font-weight: 100;
+    line-height: 100%; /* 118.8px */
+    text-decoration-line: underline;
+  }
+  .text {
+    font-size: 28px;
+  }
+}
+
+@media screen and (max-width: 768px) and (min-width: 600px) {
+  .text2 {
+    position: absolute;
+    top: 70px;
+    left: 38px;
+    color: #fff;
+    text-align: center;
+    font-family: Syoog;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 50;
+    line-height: 130%; /* 72px */
+  }
+  .text {
+    top: 26px;
+    font-size: 28px;
+  }
+  .hea {
+    color: #bbb4b4;
+    text-align: center;
+    font-family: Syoog;
+    font-size: 35px;
+    font-style: normal;
+    font-weight: 100;
+    line-height: 100%;
+    text-decoration-line: underline;
+  }
+  .imagio {
+    position: relative;
+  }
+
+  .parent {
+    display: grid;
+  }
+  .child {
+    display: inline;
+  }
+
+  .ima-full {
+    display: none;
+    position: relative;
+  }
+  .ima-small {
+    display: block;
+    position: relative;
+    max-width: 80vw;
+    margin: 0 auto;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .text2 {
+    font-size: 14px;
+    top: 67px;
+  }
+  .text {
+    font-size: 18px;
+  }
+}
diff --git a/src/components/TRACK/Track.js b/src/components/TRACK/Track.js
new file mode 100644
index 0000000..4ee26e5
--- /dev/null
+++ b/src/components/TRACK/Track.js
@@ -0,0 +1,98 @@
+import Image from "next/image";
+import "./Track.css";
+
+function Track() {
+  return (
+    <div className="h-fit py-40">
+      <div className=" parent max-w-[1200px] md:gap-y-0 px-4 sm:grid lg:grid-rows-2 md:grid-rows-2 gap-x-[4vw] sm:grid-rows-3 grid-flow-col mx-auto">
+        <div className="child lg:row-span-2 md:row-span-2 place-content-evenly  justify-center grid xl:justify-end mb-4 ">
+          <div className="imagio flex flex-col items-center md:justify-start justify-center h-fit ">
+            <Image
+            width={500}
+            height={400}
+              src={"/Images/gold-border.png"}
+              alt="Picture of the author"
+              className="ima-full"
+            />
+            <Image
+            width={250}
+            height={200}
+              src={"/Images/gold-border-mobile.png"}
+              alt="Picture of the author"
+              className="ima-small"
+            />
+            <div className="text flex flex-col gap-6">
+              <h1 className="headin">Gold</h1>
+              <p className="">
+                Cash Prizes <span className="sp"> ₹25k</span>
+              </p>
+              <p className="">Goodies & Tshirts</p>
+              <p className="">
+                Vouchers worth<span className="sp"> $50k </span>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className=" child h-fit  mb-4">
+          <div className="imago grid place-items-center xl:place-items-start">
+            <Image
+            width={500}
+            height={400}
+              src={"/Images/silver-border.png"}
+              alt="Picture of the author"
+              className="ima-full"
+            />
+            <Image
+            width={250}
+            height={200}
+              src={"/Images/silver-border-mobile.png"}
+              alt="Picture of the author"
+              className="ima-small"
+            />
+            <div className="text2 h-full flex flex-col gap-4 xl:translate-x-[40%] -translate-y-[25%]  md:translate-y-0">
+              <h1 className="hea">Silver</h1>
+              <p className="">
+                Cash Prizes <span className="sp">₹17k</span>
+              </p>
+              <p className="">Goodies & Tshirts</p>
+              <p className="">
+                Vouchers worth<span className="sp"> $50k </span>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className=" child mb-4">
+          <div className="imagos grid place-items-center xl:place-items-start">
+            <Image
+            width={500}
+            height={400}
+              src={"/Images/bronze-border.png"}
+              alt="Picture of the author"
+              className="ima-full"
+            />
+            <Image
+            width={250}
+            height={200}
+              src={"/Images/bronze-border-mobile.png"}
+              alt="Picture of the author"
+              className="ima-small"
+            />
+            <div className="text2 h-full flex flex-col gap-4 xl:translate-x-[40%] -translate-y-[25%]  md:translate-y-0 ">
+              <h1 className="hea">Bronze</h1>
+              <p className="">
+                Cash Prizes <span className="sp"> ₹10k</span>
+              </p>
+              <p className="">Goodies & Tshirts</p>
+              <p className="">
+                Vouchers worth<span className="sp"> $50k </span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Track;