diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js
index c179eeacff5e..6269615b8348 100644
--- a/src/sections/Home/Playground-home/index.js
+++ b/src/sections/Home/Playground-home/index.js
@@ -19,100 +19,106 @@ const ViewsSectionWrapper = styled.div`
     .small-card-container {
       display: flex;
       gap: 1rem;
+
+      @media only screen and (max-width: 767px) {
+        justify-content: center;
+      }
     }
 
     .views-section {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    background-color: ${(props) => props.theme.grey191919ToGreyF2F5F7};
-    margin: 3%;
-    border-radius: 1rem;
-    max-width: 1920px;
-    width: 90vw;
-    height: 500px;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 0 5% 0 0;
-    box-sizing: border-box;
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    overflow: hidden;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      background-color: ${(props) => props.theme.grey191919ToGreyF2F5F7};
+      margin: 3%;
+      border-radius: 1rem;
+      max-width: 1920px;
+      width: 90vw;
+      height: 500px;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 0 5% 0 0;
+      box-sizing: border-box;
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      overflow: hidden;
 
-    @media only screen and (max-width: 767px) {
-      text-align: center;
-      flex-direction: column-reverse;
-      height: auto;
-      padding: 10% 0;
+      @media only screen and (max-width: 767px) {
+        text-align: center;
+        flex-direction: column-reverse;
+        height: auto;
+        padding: 1.5rem;
+      }
     }
-}
+
     .hero-text {
-        display: flex;
-        flex-direction: column;
-        flex: 0 0 50%;
-        max-width: 50%;
-        padding-bottom: 3rem;
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-          justify-content: center;
-          text-align: center;
-        }
+      display: flex;
+      flex-direction: column;
+      flex: 0 0 50%;
+      max-width: 50%;
+      padding-bottom: 3rem;
+
+      @media only screen and (max-width: 767px) {
+        max-width: 100%;
+        justify-content: center;
+        text-align: center;
+        padding-bottom: 1rem;
+      }
     }
 
     h2 {
-        padding-bottom: 2%;
-      }
+      padding-bottom: 2%;
     }
 
     h4 {
-        max-width: 90%;
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-          }
+      max-width: 90%;
+
+      @media only screen and (max-width: 767px) {
+        max-width: 100%;
+      }
     }
 
     .hero-image {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        flex: 0 0 50%;
-        max-width: 50%;
-
-        
-
-        svg {
-          align-items: center;
-          justify-content: center;
-          width: 70%;
-          .visualizer-views-colorMode_svg__colorMode1 {
-            fill: ${(props) => props.theme.whiteToGrey737373};
-            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-          }
-        }
+      position: relative;
+      display: flex;
+      justify-content: center;
+      flex: 0 0 50%;
+      max-width: 50%;
 
-        .visible {
-                opacity: 1;
-                transition: all 0.2s ease-in;
+      svg {
+        align-items: center;
+        justify-content: center;
+        width: 70%;
+        .visualizer-views-colorMode_svg__colorMode1 {
+          fill: ${(props) => props.theme.whiteToGrey737373};
+          transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
         }
+      }
 
-        .not-visible {
-                opacity: 0;
-                transition: all 0.5s ease;
-        }
+      .visible {
+        opacity: 1;
+        transition: all 0.2s ease-in;
+      }
 
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-        }
+      .not-visible {
+        opacity: 0;
+        transition: all 0.5s ease;
+      }
 
+      @media only screen and (max-width: 767px) {
+        max-width: 100%;
+      }
     }
 
     .container {
       display: flex;
       justify-content: center;
       width: 100%;
-      overflow: hidden;
+      // overflow: hidden;
 
       @media only screen and (max-width: 767px) {
-        flex-direction: row;
+        flex-direction: column;
+        margin: 1rem 0;
+        padding: 0 1rem;
       }
     }
     
@@ -125,85 +131,44 @@ const ViewsSectionWrapper = styled.div`
 
       @media only screen and (max-width: 767px) {
         flex-direction: row;
-      }
-    }
-    .position-line-down{
-      transform: translateY(-20em);
-
-      @media only screen and (max-width: 767px) {
-        transform: translateX(-20em)
-      }
-    }
-    .position-line-up{
-      transform: translateY(20em);
-
-      @media only screen and (max-width: 767px) {
-        transform: translateX(20em)
+        flex-wrap: nowrap;
+        white-space: nowrap;
+        align-items: center;
+        justify-content: center;
       }
     }
 
-    .line-primary, .line-secondary {
+    .line-primary {
       width: 100%;
       display: flex;
       flex-direction: column;
-    }
+      flex: 1;
+      margin: 0 5%;
 
-    .line-primary {
       @media only screen and (max-width: 767px) {
         flex-direction: row;
-        width: auto;
-        margin: 0 5%;
-      }
-    }
+      } 
+    }  
 
-    .animation-up-scroll {
-        animation: scroll-up-animation 15s linear infinite;
-
-        @keyframes scroll-up-animation {
-            0% {
-                transform: translateY(0%);
-            }
-            100% {
-                transform: translateY(-100%);
-            }
-        }
-          @media only screen and (max-width: 767px) {
-            animation: none /*to disable vertical animation on mobile*/
-          }
-    }
-    .animation-down-scroll {
+    .position-line-down-left {
+      //For tablet/desktop screens, icons will move down vertically
+      transform: translateY(-20rem);
 
-        animation: scroll-down-animation 15s linear infinite;
-        @keyframes scroll-down-animation {
-            0% {
-                transform: translateY(0);
-            }
-            100% {
-                transform: translateY(100%);
-            }
-        }
-        @media only screen and (max-width: 767px) {
-          animation: none /*to disable vertical animation on mobile*/
-        }
+      //For mobile screens, icons will move to the left horizontally
+      @media only screen and (max-width: 767px) {
+        transform: translateX(-20rem);
+      }
     }
 
-    .animation-left-right {
-      animation: scroll-left-right 15s linear infinite;
-
-      
+    .position-line-up-right {
+      //For tablet/desktop screens, icons will move up vertically
+      transform: translateY(20rem);
 
-      @media only screen and (min-width: 768px) {
-        animation: none; /* Disable horizontal scroll animation on desktop */
-        @keyframes scroll-left-right {
-        0% {
-          transform: translateX(0%);
-        }
-        100% {
-          transform: translateX(-50%);
-        }
-      }
+      //For mobile screens, icons will move to the right horizontally
+      @media only screen and (max-width: 767px) {
+        transform: translateX(20rem);
       }
-  }
+    } 
     
     .box {
       display: flex;
@@ -211,12 +176,19 @@ const ViewsSectionWrapper = styled.div`
       align-items: center;
       justify-content: center;
       width: 100%;
-      height:150px;
+      height: 150px;
       padding: 2rem;
       box-sizing: border-box;
       background-color: ${(props) => props.theme.backgroundColor}; 
       margin-bottom: 1rem; 
       border-radius: 1rem;
+
+      @media only screen and (max-width: 767px) {
+        flex: 0 0 auto;
+        margin: 5%;
+        width: 125px;
+        height: 125px;
+      }
     }
 
     .box .boxImg {
@@ -230,17 +202,81 @@ const ViewsSectionWrapper = styled.div`
       text-align: center;
     }
 
-    @media only screen and (max-width: 700px) {
-      .views-section {
-        padding: 2rem 2rem 0 2rem;
-        height: auto;
+    // Animation
+
+      // Vertical animation for tablet screen sizes and up.
+    .animation-up-scroll {
+      animation: scroll-up-animation 15s linear infinite;
+
+      @keyframes scroll-up-animation {
+        0% {
+          transform: translateY(0%);
+        }
+        100% {
+          transform: translateY(-100%);
+        }
       }
-      .small-card-container {
-        display: flex;
-        justify-content: center;
+
+      @media only screen and (max-width: 767px) {
+        //to disable vertical animation on mobile in favor of horizontal animation
+        animation: none; 
       }
     }
 
+    .animation-down-scroll {
+      animation: scroll-down-animation 15s linear infinite;
+      
+      @keyframes scroll-down-animation {
+        0% {
+            transform: translateY(0%);
+        }
+        100% {
+            transform: translateY(100%);
+        }
+      }
+
+      @media only screen and (max-width: 767px) {
+        //to disable vertical animation on mobile in favor of horizontal animation for smaller screens
+        animation: none; 
+      }
+    }
+
+    .animation-left-scroll {
+      animation: scroll-left-animation 10s linear infinite;
+
+      @keyframes scroll-left-animation {
+        0% {
+          transform: translateX(0);
+        }
+        100% {
+          transform: translateX(-20rem);
+        }
+      }
+
+     @media only screen and (min-width: 768px) {
+        //to disable horizontal animation on mobile in favor of vertical animation for larger screens
+        animation: none; 
+      }
+    }
+
+    //horizontal animation- to the right
+    .animation-right-scroll {
+      animation: scroll-right-animation 10s linear infinite;
+
+      @keyframes scroll-right-animation {
+        0% {
+          transform: translateX(-20rem);
+        }
+        100% {
+          transform: translateX(0);
+        }
+      }
+
+     @media only screen and (min-width: 768px) {
+        //to disable horizontal animation on mobile in favor of vertical animation for larger screens
+        animation: none; 
+      }
+    }
 `;
 
 const MeshmapVisualizerViews = () => {
@@ -256,8 +292,8 @@ const MeshmapVisualizerViews = () => {
         <div className="hero-image" ref={imageRef}>
           <div className={
             imageInView ? "visible container" : "not-visible container"}>
-            <div className="line animation-down-scroll">
-              <div className="line-primary position-line-down animation-left-right">
+            <div className="line position-line-down-left animation-left-scroll">
+              <div className="line-primary animation-down-scroll">
                 <div className="box">
                   <img className="boxImg" src={prometheus} alt="" />
                   <div>Prometheus</div>
@@ -277,8 +313,8 @@ const MeshmapVisualizerViews = () => {
               </div>
 
             </div>
-            <div className="line animation-up-scroll">
-              <div className="line-primary position-line-up animation-left-right">
+            <div className="line position-line-up-right animation-right-scroll">
+              <div className="line-primary animation-up-scroll">
                 <div className="box">
                   <img className="boxImg" src={kubernetes} alt="" />
                   <div>Kubernetes</div>