diff --git a/css/airspace.css b/css/airspace.css
index 9a99be1c..dbae7402 100755
--- a/css/airspace.css
+++ b/css/airspace.css
@@ -222,28 +222,94 @@ font header .navbar-default .navbar-nav li a:hover {
 /*--
   service Start
 --*/
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .col-custom {
+    flex: 0 0 100%; /* 50% width */
+    max-width: 100%;
+  }
+}
 #service {
   text-align: center;
   padding: 90px 0;
+  background-color: #f8f9fa;
+}
+#service .section-title h2 {
+  font-size: 2.5rem;
+  color: #333;
+  margin-bottom: 20px;
+}
+#service .section-title p {
+  font-size: 1.1rem;
+  color: #666;
+  margin: 0 auto 40px;
+}
+#service .activity-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 30px;
 }
 #service .service-item {
-  padding-bottom: 30px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  padding: 30px 20px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
-#service .service-item i {
-  font-size: 60px;
-  color: #4A4656;
+#service .service-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+}
+#service .activity-icon {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 20px;
 }
 #service .service-item h4 {
-  padding-top: 20px;
-  margin: 0;
-  color: #666;
+  font-size: 1.25rem;
+  color: #333;
+  margin-bottom: 10px;
 }
 #service .service-item p {
-  color: #888;
-  padding-top: 10px;
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.8;
+  color: #666;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+#service .activity-button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #4A4656;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+#service .activity-button:hover {
+  background-color: #5a566a;
+}
+
+#service .view-all-button {
+  display: inline-block;
+  padding: 12px 30px;
+  background-color: #4A4656;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 5px;
+  font-size: 1.1rem;
+  transition: background-color 0.3s ease;
+}
+#service .view-all-button:hover {
+  background-color: #5a566a;
+}
+#service .important-note {
+  margin-top: 40px;
+  font-size: 0.9rem;
+  color: #666;
+}
+#service .important-note a {
+  color: #4A4656;
+  text-decoration: underline;
 }
 /*--
   donation section start
@@ -1623,11 +1689,25 @@ header.large li{ margin-top: 0px; }
   /*--
   service Start
 --*/
-  #service {
-    padding-top: 100px;
+
+  #service .container{
+    max-width: 100%;
+  }
+  #service .activity-grid {
+    gap: 20px;
+  }
+  #service .service-item {
+    padding: 20px 15px;
+  }
+  #service .activity-icon {
+    width: 60px;
+    height: 60px;
+  }
+  #service .service-item h4 {
+    font-size: 1.1rem;
   }
-  #service .thumbnail {
-    padding-bottom: 70px;
+  #service .service-item p {
+    font-size: 0.8rem;
   }
   /*--
   call-to-action Start
diff --git a/index.html b/index.html
index 8601fbb2..054eaed5 100755
--- a/index.html
+++ b/index.html
@@ -438,110 +438,94 @@ <h3 class="text-center">For more details, click the link below!</h3>
   <div class="container">
     <div class="row">
       <div class="section-title">
-        <h2>Already using Sugar? We have many activities for you!</h2>
-        <p>The Sugar Learning Platform is a complete environment for teaching and learning, which includes individual activities. If you're already using the Sugar Desktop Environment, then you can install from the activities below, which has links to some of our most popular activities.</p>
+        <h2>Explore Sugar Activities</h2>
+        <p>Discover a world of interactive learning with our most popular Sugar activities. Perfect for students already using the Sugar Desktop Environment.</p>
       </div>
     </div>
-    <div class="row "><!-- This is one too many for this 4x2 grid and the SVG -- and only this SVG -- renders too large
-      <div class="col-sm-6 col-md-3">
+    <div class="row activity-grid">
+      <div class="col-sm-6 col-md-4 col-lg-3 col-custom">
         <div class="service-item">
-	  <img class="span1" src='{{ site.baseurl }}/assets/activity-numbers.svg' alt="Numbers activity svg">
-          <br>
+	        <img class="activity-icon" src='{{ site.baseurl }}/assets/activity-numbers.svg' alt="Numbers activity icon">
           <h4>Numbers</h4>
-          <p>Play with numbers</p>
-          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4336"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Get Numbers</button></a>
+          <p>Have fun experimenting with numbers</p>
+          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4336" class="activity-button">Get Numbers</a>
         </div>
-      </div>-->
-      <div class="col-sm-6 col-md-3">
-	<div class="service-item">
-          <img class="span1" src='{{ site.baseurl }}/assets/activity-finance.svg' alt="Finance activity svg">
-          <br>
-	  <h4>Finance</h4>
-          <p>Roleplay with money</p>
-          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4040"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Finance</button></a>
+      </div>
+      <div class="col-sm-6 col-md-4 col-lg-3 col-custom">
+	      <div class="service-item">
+          <img class="activity-icon" src='{{ site.baseurl }}/assets/activity-finance.svg' alt="Finance activity icon">
+	        <h4>Finance</h4>
+          <p>Learn money management through roleplay</p>
+          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4040" class="activity-button">Get Finance</a>
         </div>
       </div>
-      <div class="col-sm-6 col-md-3">
-	<div class="service-item" >
-          <img class="span1" src='{{ site.baseurl }}/assets/activity-maze.svg' alt="Maze Web activity svg">
-          <br>
-	  <h4>Maze</h4>
-          <p>Have fun with progressive challenges</p>
-          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4727"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Maze Web</button></a>
+      <div class="col-sm-6 col-md-4 col-lg-3 col-custom">
+	      <div class="service-item" >
+          <img class="activity-icon" src='{{ site.baseurl }}/assets/activity-maze.svg' alt="Maze Web activity icon">
+	        <h4>Maze</h4>
+          <p>Solve puzzles with increasing difficulty</p>
+          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4727" class="activity-button">Get Maze Web</a>
         </div>
       </div>
-      <div class="col-sm-6 col-md-3">
-	<div class="service-item">
-          <img class="span1" src='{{ site.baseurl }}/assets/activity-measure.svg' alt="Measure activity svg">
-          <br>
-	  <h4>Measure</h4>
+      <div class="col-sm-6 col-md-4 col-lg-3 col-custom">
+	      <div class="service-item">
+          <img class="activity-icon" src='{{ site.baseurl }}/assets/activity-measure.svg' alt="Measure activity icon">
+	        <h4>Measure</h4>
           <p>Use your computer to measure things in the physical world</p>
-          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4197"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Measure</button></a>
+          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4197" class="activity-button">Get Measure</a>
         </div>
       </div>
-      <div class="col-sm-6 col-md-3">
-	<div class="service-item">
-          <img class="span1" src='{{ site.baseurl }}/assets/activity-turtle3d.svg' alt="TurtleBlocks3D activity svg">
-          <br>
-	  <h4>TurtleBlocks3D</h4>
-          <p>Are you already using TurtleBlocks? Try it in three dimensions!</p>
-          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4757"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get TurtleBlocks3D</button></a>
+      <div class="col-sm-6 col-md-4 col-lg-3 col-custom">
+	      <div class="service-item">
+          <img class="activity-icon" src='{{ site.baseurl }}/assets/activity-turtle3d.svg' alt="TurtleBlocks3D activity icon">
+	        <h4>TurtleBlocks3D</h4>
+          <p>Are you already using TurtleBlocks? Try it in 3D!</p>
+          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4757" class="activity-button">Get TurtleBlocks3D</a>
         </div>
       </div>
-      <div class="col-sm-6 col-md-3">
+      <div class="col-sm-6 col-md-4 col-lg-3 col-custom">
         <div class="service-item">
-          <img class="span1" src='{{ site.baseurl }}/assets/activity-words.svg' alt="Words activity svg">
-          <br>
-	  <h4>Words</h4>
+          <img class="activity-icon" src='{{ site.baseurl }}/assets/activity-words.svg' alt="Words activity icon">
+	        <h4>Words</h4>
           <p>Compose and share your ideas</p>
-          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4315"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Words</button></a>
+          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4315" class="activity-button">Get Words</a>
         </div>
       </div>
-      <div class="col-sm-6 col-md-3">
-	<div class="service-item">
-          <img class="span1" src='{{ site.baseurl }}/assets/activity-ruler.svg' alt="Ruler activity svg">
-          <br>
-	  <h4>Ruler</h4>
-          <p>Measure and explore math</p>
-          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4192"><button type="button" class="btn bt-raised btn-custom bt customMargin4" >Get Ruler</button></a>
-	</div>
+      <div class="col-sm-6 col-md-4 col-lg-3 col-custom">
+	      <div class="service-item">
+          <img class="activity-icon" src='{{ site.baseurl }}/assets/activity-ruler.svg' alt="Ruler activity icon">
+	        <h4>Ruler</h4>
+          <p>Learn measurement and math concepts</p>
+          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4192" class="activity-button">Get Ruler</button></a>
+	      </div>
       </div>
-      <div class="col-sm-6 col-md-3">
-	<div class="service-item">
-          <img class="span1" src='{{ site.baseurl }}/assets/activity-star-chat.svg' alt="StarChart activity svg">
-          <br>
-	  <h4>StartChart</h4>
+      <div class="col-sm-6 col-md-4 col-lg-3 col-custom">
+	      <div class="service-item">
+          <img class="activity-icon" src='{{ site.baseurl }}/assets/activity-star-chat.svg' alt="StarChart activity icon">
+	        <h4>StartChart</h4>
           <p>Explore numbers and information in charts</p>
-          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4300"><button type="button" class="btn bt-raised btn-custom bt customMargin4">StarChart</button></a>
-	</div>
+          <a href="https://activities.sugarlabs.org/en-US/sugar/addon/4300" class="activity-button">StarChart</a>
+	      </div>
       </div>
-      <div class="col-sm-6 col-md-3">
-	<div class="service-item">
-          <img class="span1" src='{{ site.baseurl }}/assets/activity-recall.svg' alt="Recall activity svg">
-          <br>
-	  <h4>Recall</h4>
+      <div class="col-sm-6 col-md-4 col-lg-3 col-custom">
+	      <div class="service-item">
+          <img class="activity-icon" src='{{ site.baseurl }}/assets/activity-recall.svg' alt="Recall activity icon">
+	        <h4>Recall</h4>
           <p>Test your memory with this fun game</p>
-          <a href="https://v4.activities.sugarlabs.org/app/org.sugarlabs.RecallActivity.html"><button type="button" class="btn bt-raised btn-custom bt customMargin4">Get Recall</button></a>
+          <a href="https://v4.activities.sugarlabs.org/app/org.sugarlabs.RecallActivity.html" class="activity-button">Get Recall</a>
         </div>
       </div>
     </div>
-  </div>
-</section>
-
-<!-- Activites website redirect section -->
-<section id="call-to-action">
-  <div class="container customMargin3">
     <div class="row">
-      <div class="col-md-12 text-center">
+      <div class="col-md-12 customMargin7">
         <h3>Check out the remaining hundreds of activities!</h3>
-	<p>We have hundreds of activities to explore.</p>
-        <a href="https://v4.activities.sugarlabs.org/"><button type="button" class="btn bt-raised btn-custom bt">Go to Sugar Activity Library</button></a><br><br>
-	<p><em>Important: Please know that in order to install and try them, you need to be running the Sugar Desktop Environment. If you don't have that already, please consider your other options</a> to explore Sugar: <a class="footerHeaderStyle" href="{{ site.baseurl }}/#try">Try Sugar!</a></em></p>
+	      <p>We have hundreds of activities to explore.</p>
+        <a href="https://v4.activities.sugarlabs.org/" class="view-all-button">Go to Sugar Activity Library</a>
+	      <p class="important-note"><strong>Note:</strong> These activities require the Sugar Desktop Environment. Don't have it? <a href="{{ site.baseurl }}/try-sugar.html">Try Sugar now!</a></p>
       </div>
     </div>
   </div>
 </section>
-
 <!-- Donate -->
 <section id="donation">
   <div class="container">