diff --git a/dist/getstarted.html b/dist/getstarted.html
index 1cb69ad..d05b7ab 100644
--- a/dist/getstarted.html
+++ b/dist/getstarted.html
@@ -55,79 +55,72 @@
         </div>
       </header>
       <div
-        class="flex sm:items-center sm:justify-between md:px-0 md:py-0 w-screen justify-between flex-wrap md:flex-nowrap lg:flex-nowrap md:gap-0 lg:gap-0"
+        class="flex sm:mt-28 sm:items-center sm:justify-between md:px-0 md:py-0 w-screen justify-between flex-wrap md:flex-nowrap lg:flex-nowrap md:gap-0 lg:gap-0"
       >
-        <div class="w-full md:w-1/3 lg:w-1/3 py-6 px-8 md:px-6 lg:px-8">
+        <div class="flex w-full md:w-1/3 lg:w-1/3 py-6 px-8 md:px-6 lg:px-8">
           <a
             href="logic.html"
-            class="group block overflow-hidden h-auto rounded-2xl w-full"
+            class="group block overflow-hidden h-36 rounded-2xl w-36"
           >
-            <div class="relative h-[350px] sm:h-[450px]">
+            <div class="relative h-[350px] sm:h-[180px]">
               <img
-                src="https://github.com/dakshsinghrathore/Brighter-Beginnings/assets/115932772/2058487f-eca0-4a76-a18f-813916f2ddd2"
+                src="../images/logic.png"
                 alt=""
-                class="absolute inset-0 h-full w-full object-cover  "
+                class="absolute inset-0 w-80 object-cover transition duration-300 ease-in-out transform scale-100 group-hover:scale-90"
               />
-
-           
-            </div>
-
-            <div class="relative bg-white pt-3">
-              <h3
-                class="text-sm text-gray-700 font-bold group-hover:underline group-hover:underline-offset-4"
-              >
-              <!-- Level up your logical thinking abilities with a carefully curated selection of games in the Logic Tab. These engaging activities are designed to enhance your overall programming and problem-solving skills. -->
-
-              </h3>
-
-             
             </div>
           </a>
+          <a
+            href="logic.html"
+            class="mt-12 group block h-36 rounded-2xl w-36"
+          >
+            <h2 class="text-center text-white font-bold text-3xl">
+              Logic
+            </h2>
+          </a>
         </div>
-        <div class="w-full md:w-1/3 px-8 md:px-6 py-6 lg:px-8">
+        <div class="flex w-full md:w-1/3 lg:w-1/3 py-6 px-8 md:px-6 lg:px-8">
           <a
             href="problemsolving.html"
-            class="group block overflow-hidden h-auto rounded-2xl w-full"
+            class="group block overflow-hidden h-44 rounded-2xl w-36"
           >
-            <div class="relative h-[350px] sm:h-[450px]">
+            <div class="relative h-[350px] sm:h-[180px]">
               <img
-                src="https://github.com/dakshsinghrathore/Brighter-Beginnings/assets/115932772/2edbb833-3252-4398-9602-673f5dbd2318"
+                src="../images/prob-solvingpng.png"
                 alt=""
-                class="absolute inset-0 h-full w-full object-cover"
+                class="absolute inset-0 w-96 object-cover transition duration-300 ease-in-out transform scale-100 group-hover:scale-90"
               />
             </div>
-
-            <div class="relative bg-white  pt-3">
-              <h3
-                class="text-sm text-gray-700 font-bold group-hover:underline group-hover:underline-offset-4"
-              >
-              <!-- Enhance your problem-solving abilities by exploring this thoughtfully crafted playlist of Python tutorials, accompanied by a set of challenges for you to tackle and master  -->
-              </h3>
-
-         
-            </div>
           </a>
+          <a
+            href="problemsolving.html"
+            class="mt-12 group block h-36 rounded-2xl w-36"
+          >
+            <h2 class="text-center text-white font-bold text-3xl">
+              Problem Solving
+            </h2>
+          </a> 
         </div>
-        <div class="w-full md:w-1/3 px-8 md:px-6 py-6 lg:px-8">
+        <div class="flex w-full md:w-1/3 lg:w-1/3 py-6 px-8 md:px-6 lg:px-8">
           <a
             href="development.html"
-            class="group block overflow-hidden h-auto rounded-2xl w-full"
+            class="group block overflow-hidden h-36 rounded-2xl w-36"
           >
-            <div class="relative h-[350px] sm:h-[450px]">
+            <div class="relative h-[350px] sm:h-[180px]">
               <img
-                src="https://github.com/dakshsinghrathore/Brighter-Beginnings/assets/115932772/38dfa9ff-ffaf-4a27-aced-7fba4d46e9e9"
+                src="../images/dvelopment.png"
                 alt=""
-                class="absolute inset-0 h-full w-full object-cover"
+                class="absolute inset-0 w-full h-auto object-cover transition duration-300 ease-in-out transform scale-100 group-hover:scale-90"
               />
             </div>
-
-            <div class="relative bg-white pt-3">
-              <h3
-                class="text-sm text-gray-700 font-bold group-hover:underline group-hover:underline-offset-4"
-              >
-              <!-- Elevate your Python development skills with this meticulously curated playlist of tutorials, complemented by a collection of hands-on problems designed to sharpen your expertise -->
-              </h3>
-            </div>
+          </a>
+          <a
+            href="development.html"
+            class="mt-12 group block h-36 rounded-2xl w-36"
+          >
+            <h2 class="text-center text-white font-bold text-3xl">
+              Development
+            </h2>
           </a>
         </div>
       </div>
diff --git a/images/dvelopment.png b/images/dvelopment.png
new file mode 100644
index 0000000..3993382
Binary files /dev/null and b/images/dvelopment.png differ
diff --git a/images/logic.png b/images/logic.png
new file mode 100644
index 0000000..550cd31
Binary files /dev/null and b/images/logic.png differ
diff --git a/images/prob-solvingpng.png b/images/prob-solvingpng.png
new file mode 100644
index 0000000..a2c941c
Binary files /dev/null and b/images/prob-solvingpng.png differ