diff --git a/templates/index.html b/templates/index.html
index c0b3fab..ecfc4c2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,118 +1,195 @@
+
 {% extends 'public_base.html' %}
+{% load static %}
 {% block content %}
 
- <div class="container">
-<img src="static/images/sec-1.jpeg" alt="Soccer Player" class="background-image" />
+<!-- Hero Section -->
+<div class="relative w-full flex justify-center py-16 bg-black">
 
-<div class="text-content">
-  <h1 class="title">PLAY IT REAL</h1>
-  <p class="subtitle">SOCCER TRAINING THAT HITS LIKE GAME DAY</p>
-  
-  <!-- Using image as button -->
-  <button class="btn-image">
-    <img src="static/images/btn-2.png" alt="Boost Your Game" />
-  </button>
-   <button class="btn-image">
-    <img src="static/images/but-1.png" alt="Boost Your Game" />
-  </button>
-  
-</div>
+  <!-- Main Image -->
+  <img src="static/images/sec-1.jpeg" alt="Soccer Player" 
+       class="w-4/5 h-[50rem] md:h-[60rem] shadow-lg object-cover " />
 
+  <!-- Overlay content (Heading, Subtitle, CTA) -->
+  <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4/5 h-full flex flex-col justify-center items-center text-center pointer-events-none">
+    
+    <!-- Heading -->
+    <h1 class="text-7xl md:text-9xl font-extrabold text-black drop-shadow-lg pointer-events-auto">
+      PLAY IT REAL
+    </h1>
+
+    <!-- Subtitle -->
+    <p class="text-sm md:text-lg text-black mt-4 drop-shadow-md font-bold pointer-events-auto">
+      SOCCER TRAINING THAT HITS LIKE GAME DAY
+    </p>
+
+    <!-- CTA Button -->
+    <div class="mt-6 pointer-events-auto">
+      <a href="https://app.b-42.com/"
+         class="inline-block bg-white text-black px-8 py-3 rounded-full font-semibold transition-all hover:bg-gray-200">
+        Boost your game
+      </a>
+    </div>
   </div>
 
-<style>
+  <!-- Image Buttons at Bottom-Left (Inside Image) -->
+  <div class="absolute bottom-20 left-[15%] flex gap-4 pointer-events-auto">
+    <img src="static/images/but-1.png" alt="Boost Your Game" class="h-16 md:h-20 cursor-pointer" />
+    <img src="static/images/btn-2.png" alt="Another Action" class="h-16 md:h-20 cursor-pointer" />
+  </div>
 
-  .container {
-    position: relative;
-    height: 90vh;
-    overflow: hidden;
-  }
-  .background-image {
-    margin: auto;
-    width: 80%;
-    height: 100vh;
-    object-fit: cover;
-    object-position: bottom;
-    filter: brightness(0.85);
-    display: block;
-  }
-  .text-content {
-    position: absolute;
-    top: 35%;
-    width: 100%;
-    text-align: center;
-    left: 0;
-    color: #222;
-  }
-  .title {
-    font-size: 6vw;
-    font-weight: 900;
-    margin: 0;
-  }
-  .subtitle {
-    font-weight: 700;
-    font-size: 0.8vw;
-    margin-top: 0.5rem;
-    margin-bottom: 1.5rem;
-    letter-spacing: 0.1em;
-    color: #222;
-  }
-  .btn {
-    background-color: white;
-    color: #222;
-    border: none;
-    border-radius: 30px;
-    padding: 12px 30px;
-    font-weight: 700;
-    cursor: pointer;
-    font-size: 1rem;
-  }
-  .awards {
-    margin-top: 2rem;
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-  }
-  .award {
-    background-color: #222;
-    color: #667;
-    padding: 15px 25px;
-    border-radius: 25px;
-    font-size: 0.7vw;
-    font-weight: 600;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-  }
-  .award-title {
-    color: #99f;
-    font-weight: 700;
-    font-size: 0.85vw;
-    line-height: 1.1;
-  }
-  .award-subtitle {
-    font-size: 0.5vw;
-    color: #999;
-  }
+</div>
+
+
+<!-- App Download Section -->
+<div class="bg-black py-8">
+  <div class="flex justify-center gap-8">
+    <a href="#" class="block">
+      <img src="{% static 'images/googleplay.png' %}" alt="Get it on Google Play" class="h-16 w-auto" />
+    </a>
+    <a href="#" class="block">
+      <img src="{% static 'images/AppStore.png' %}" alt="Download on the App Store" class="h-16 w-auto" />
+    </a>
+  </div>
+</div>
+
+
+
+<div class="bg-black text-white py-16 px-6">
+  <div class="max-w-7xl mx-auto flex flex-col-reverse md:flex-row items-center gap-12">
+    
+    <!-- LEFT CONTENT -->
+    <div class="md:w-1/2">
+      <h1 class="text-2xl md:text-3xl font-bold mb-6">
+        TRAIN — No excuses, just skills.
+      </h1>
+
+      <p class="text-lg text-gray-300 mb-8 ">
+        Over 500 soccer specific training-sessions and individualized training-plans,
+        designed to push you past your limits. Every session is tailored to your level,
+        so you’re always leveling up – no matter if you’re grinding alone or with your squad.
+      </p>
+
+       <a
+         href="https://app.b-42.com/"
+         class="inline-block bg-[#6d7cff] hover:bg-[#5b6bf5] transition px-8 py-3 rounded-lg font-semibold text-white"
+       >
+         Boost your game
+       </a>
+
+    </div>
+
+    <!-- RIGHT IMAGE -->
+    <div class="md:w-1/2 flex justify-center">
+      <img
+        src="/static/images/sec-2.jpeg"
+        alt="Training Image"
+        class="max-w-full  shadow-lg"
+      />
+    </div>
+
+  </div>
+</div>
+
+<div class="bg-black py-16 px-6">
+  <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-12">
+
+    <!-- LEFT IMAGE -->
+    <div class="md:w-1/2">
+      <img
+        src="static/images/sec-3.jpeg"
+        alt="Training Image"
+        class="w-full  shadow-lg"
+      />
+    </div>
+
+    <!-- RIGHT CONTENT -->
+    <div class="md:w-1/2 text-black">
+        
+    <div class="text-right">
+       <h1 class="inline-block text-3xl md:text-4xl font-bold bg-white text-black px-2 py-1">
+         Sweat – Grind Harder,
+       </h1>
+       <br>
+       <h1 class="inline-block text-3xl md:text-4xl font-bold bg-white text-black px-2 py-1 mt-3">
+         flex louder.
+       </h1>
+
+      <p class="text-[21px] text-white mb-8 mt-5">
+        Every drop of sweat counts. Earn SweatPoints with every drill and stack them to climb the Road to Glory. The more you grind, the higher you rise – show the world how hard you’re willing to work for your spot at the top of your league table.
+       CTA Boost your game
+      </p>
+
+       <a
+        href="https://app.b-42.com/"
+        class="inline-block bg-black text-[#d0ff23] border-2 border-[#d0ff23]
+               px-8 py-3 rounded-full font-semibold
+               transition-all duration-300 hover:bg-[#d0ff23] hover:text-black"
+      >
+        Boost your game
+      </a>
+</div>
+
+
+    
+     
+    </div>
+
+  </div>
+</div>
+
+
+
+
+<div class="bg-white px-6">
+  <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-12">
+
+    <!-- LEFT IMAGE -->
+   
+
+    <!-- RIGHT CONTENT -->
+    <div class="md:w-1/2 text-black">
+        
+    <div class="text-right">
+       <h1 class="inline-block text-2xl md:text-3xl font-semibold bg-white text-black px-2 py-1">
+        WIN – Turn grind into glory.
+       </h1>
+
+      <p class="text-[21px] text-black mb-8 mt-5">
+        Every drop of sweat counts. Earn SweatPoints with every drill and stack them to climb the Road to Glory. The more you grind, the higher you rise – show the world how hard you’re willing to work for your spot at the top of your league table.
+       CTA Boost your game
+      </p>
+
+     
+</div>
+
+     <div class="mt-[7rem]">
+          <a
+              href="https://app.b-42.com/"
+              class="inline-block bg-[#6d7cff] hover:bg-[#5b6bf5] transition px-8 py-3 rounded-full font-semibold text-white"
+            >
+              Boost your game
+            </a>
+     </div>
+
+    </div>
+
+     <div class="md:w-1/2">
+      <img
+        src="static/images/sec-4.jpeg"
+        alt="Training Image"
+        class="w-full  shadow-lg"
+      />
+    </div>
+
+  </div>
+</div>
+
+<div class="w-full bg-[#5b6bf5] h-[10rem]"></div>
 
 
-  .btn-image {
-  border: none;
-  background: none;
-  padding: 0;
-  cursor: pointer;
-  margin-top: 60px;
-}
 
-.btn-image img {
-  width: 180px; /* Adjust size as needed */
-  height: auto;
-  display: block;
-  margin-left: 10px;
-}
 
-</style>
 
 {% endblock %}