diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js
index 8a4ff2125430..cc438b3011cf 100644
--- a/src/sections/Home/Playground-home/index.js
+++ b/src/sections/Home/Playground-home/index.js
@@ -19,45 +19,51 @@ import kiali from "../../../collections/integrations/kiali-operator/icons/color/
 import knative from "../../../collections/integrations/knative/icons/color/knative-color.svg";
 import dapr from "../../../collections/integrations/dapr/icons/color/dapr-color.svg";
 import fabedge from "../../../collections/integrations/fabedge/icons/color/fabedge-color.svg";
-import helm from "../../../collections/integrations/helm-controller/icons/color/helm-controller-color.svg";
+import amdgpu from "../../../collections/integrations/amd-gpu/icons/color/amd-gpu-color.svg";
 import karmada from "../../../collections/integrations/karmada/icons/color/karmada-color.svg";
 import kubeflow from "../../../collections/integrations/kubeflow/icons/color/kubeflow-color.svg";
 import terraform from "../../../collections/integrations/terraform/icons/color/terraform-color.svg";
 import fluentd from "../../../collections/integrations/fluentd/icons/color/fluentd-color.svg";
 
-
 const ViewsSectionWrapper = styled.div`
+
     display: flex;
     align-items: center;
     justify-content: center;
 
-    .views-section {
-      position: relative;
+    .small-card-container {
       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;
-      overflow: hidden;
-      
-      @media only screen and (max-width: 767px) {
-        text-align: center;
-        flex-direction: column-reverse;
-      }
+      gap: 1rem;
     }
 
+    .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;
+    //box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
+    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;
+    }
+}
     .hero-text {
         display: flex;
         flex-direction: column;
-        flex: 0 0 50%; 
-        max-width: 50%; 
+        flex: 0 0 50%;
+        max-width: 50%;
         padding-bottom: 3rem;
         @media only screen and (max-width: 767px) {
           max-width: 100%;
@@ -70,69 +76,118 @@ const ViewsSectionWrapper = styled.div`
         position: relative;
         display: flex;
         justify-content: center;
-        flex: 0 0 50%; 
-        max-width: 50%; 
+        flex: 0 0 50%;
+        max-width: 50%;
         overflow: hidden;
-        height: 100%; 
-        
+        height: 100%;
+
         @media only screen and (max-width: 767px) {
           max-width: 100%;
         }
     }
 
-    .small-card-container {
+    h2 {
+      /* max-width: 90%; */
+      padding-bottom: 2%;
+    }
+  }
+
+  h4 {
+      max-width: 90%;
+      @media only screen and (max-width: 767px) {
+        max-width: 100%;
+        }
+  }
+
+   .hero-image {
+        position: relative;
         display: flex;
-        gap: 1rem; 
+        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);
+          }
+        }
+
+      
+        .visible {
+                opacity: 1;
+                transition: all 0.2s ease-in;
+        }
+
+        .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;
-      gap: 1rem; 
-      height: 100%; 
+    .overlay {
+        width: 483px;
+        height: 680px;
     }
 
+
+    .container {
+        display: flex;
+        justify-content: center;
+        gap: 1.5rem; 
+        height: 100%; 
+      }
+
     .line {
-      position: relative;
-      height: 100%; 
-      overflow: hidden;
-      width: 200px; 
+        position: relative;
+        height: 100%;
+        overflow: hidden;
+        width: 200px;
     }
 
     .scroll-track {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
     }
 
     .scroll-down .scroll-track {
-      animation: scrollDown 25s linear infinite;
+        animation: scrollDown 35s linear infinite;
     }
 
     .scroll-up .scroll-track {
-      animation: scrollUp 25s linear infinite;
+        animation: scrollUp 35s linear infinite;
     }
 
     @keyframes scrollDown {
-      0% {
-        transform: translateY(-50%);
-      }
-      100% {
-        transform: translateY(0%);
-      }
+        0% {
+            transform: translateY(-50%);
+        }
+        100% {
+            transform: translateY(0%);
+        }
     }
 
     @keyframes scrollUp {
-      0% {
-        transform: translateY(0%);
-      }
-      100% {
-        transform: translateY(-50%);
-      }
+        0% {
+            transform: translateY(0%);
+        }
+        100% {
+            transform: translateY(-50%);
+        }
     }
 
     .box {
@@ -140,25 +195,25 @@ const ViewsSectionWrapper = styled.div`
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      width: 100%; 
-      height: 150px; 
-      padding: 2rem; 
+      width: 100%;
+      height:150px;
+      padding: 2rem;
       box-sizing: border-box;
       background-color: ${(props) => props.theme.backgroundColor}; 
+      margin-bottom: 1rem; 
       border-radius: 1rem;
-      transition: transform 0.2s ease;
-
-      &:hover {
-        transform: scale(1.02);
-      }
+      //box-shadow: ${(props) => props.theme.boxShadowGreen00D3A9ToBlackTwoFive};
     }
+    // .box:hover {
+    //   box-shadow: ${(props) => props.theme.boxShadowBlue477E96};
+    // }
 
     .box .boxImg {
       width: auto;
-      height: 60px; 
+      height: 60px;
       max-width: 100%;
     }
-
+    
     .box .boxText {
       margin-top: 1rem;
       text-align: center;
@@ -172,9 +227,13 @@ const ViewsSectionWrapper = styled.div`
         padding: 2rem 2rem 0 2rem;
         height: auto;
       }
+      .small-card-container {
+        display: flex;
+        justify-content: center;
+      }
     }
-`;
 
+`;
 
 const KanvasVisualizerViews = () => {
   const [imageRef] = useInView({ threshold: 0.3 });
@@ -189,9 +248,8 @@ const KanvasVisualizerViews = () => {
     { img: docker, name: "Docker" },
     { img: envoy, name: "Envoy" },
     { img: karmada, name: "Karmada" },
-    { img: helm, name: "Helm" },
+    { img: amdgpu, name: "AMD GPU" },
     { img: fluentd, name: "Fluentd" }
-
   ];
 
   const rightColumnItems = [
@@ -206,27 +264,23 @@ const KanvasVisualizerViews = () => {
     { img: fabedge, name: "FabEdge" },
     { img: kubeflow, name: "Kubeflow" },
     { img: terraform, name: "Terraform" }
-
   ];
 
   const renderColumn = (items, direction) => (
     <div className={`line scroll-${direction}`}>
       <div className="scroll-track">
-        {/* Original set */}
         {items.map((item, index) => (
           <div className="box" key={`set1-${index}`}>
             <img className="boxImg" src={item.img} alt={item.name} />
             <div className="boxText">{item.name}</div>
           </div>
         ))}
-        {/* First duplicate set */}
         {items.map((item, index) => (
           <div className="box" key={`set2-${index}`}>
             <img className="boxImg" src={item.img} alt={item.name} />
             <div className="boxText">{item.name}</div>
           </div>
         ))}
-        {/* Second duplicate set for seamless loop */}
         {items.map((item, index) => (
           <div className="box" key={`set3-${index}`}>
             <img className="boxImg" src={item.img} alt={item.name} />
@@ -253,7 +307,7 @@ const KanvasVisualizerViews = () => {
           <p>
             Employ a set of learning paths that incorporate an application
             networking centric curriculum featuring training on 200+
-            integrations.
+            integrations.           
           </p>
           <Button
             $primary