diff --git a/src/pages/index.astro b/src/pages/index.astro
index 68e1843..9e8366f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,8 +15,8 @@ import HeaderLogo from "../assets/HeaderLogo.png";
   <body class="relative min-h-dvh">
     <Header />
     <div class="bg-dark text-light py-16">
-      <div class="flex flex-col items-center gap-8 w-200 m-auto">
-        <img src={HeaderLogo.src} alt="Terakoda" />
+      <div class="flex flex-col items-center gap-8 max-w-200 m-auto px-4">
+        <img src={HeaderLogo.src} alt="Terakoda" class="max-w-full" />
         <p>
           Solving Your Unique Software Challenges with Precision and Quality
         </p>
@@ -26,9 +26,9 @@ import HeaderLogo from "../assets/HeaderLogo.png";
 
     <main>
       <div class="bg-light-accent py-16 text-dark">
-        <div class="w-200 m-auto">
+        <div class="max-w-200 m-auto px-4">
           <h2 class="text-4xl mb-8 text-center">Our Expertise</h2>
-          <div class="grid grid-cols-2 gap-8">
+          <div class="grid md:grid-cols-2 grid-cols-1 gap-8">
             <div class="service-item">
               <h3>Custom Software Solutions</h3>
               <p>
@@ -55,7 +55,7 @@ import HeaderLogo from "../assets/HeaderLogo.png";
         </div>
       </div>
 
-      <div class="py-16 w-200 m-auto">
+      <div class="py-16 max-w-200 m-auto px-4">
         <h2 class="text-4xl mb-8 text-center">Our Commitment to Quality</h2>
         <div class="quality-content">
           <p>
@@ -76,7 +76,9 @@ import HeaderLogo from "../assets/HeaderLogo.png";
       </div>
 
       <div class="py-16 bg-dark text-light" id="contact">
-        <div class="w-200 m-auto flex flex-col items-center gap-8 text-center">
+        <div
+          class="max-w-200 m-auto px-4 flex flex-col items-center gap-8 text-center"
+        >
           <h2 class="text-4xl text-center">
             Ready to Solve Your Software Puzzle?
           </h2>
