diff --git a/src/components/Corner-popup/index.js b/src/components/Corner-popup/index.js
index 0a77b25560b5c..35fb59d17206c 100644
--- a/src/components/Corner-popup/index.js
+++ b/src/components/Corner-popup/index.js
@@ -1,20 +1,21 @@
 import React, { useState, useEffect } from "react";
 import Button from "../../reusecore/Button";
 import { ReactComponent as CloseIcon } from "./closeIcon.svg";
-import popupImageSmall from "./power-of-meshery-small.webp";
 import CornerPopupWrapper from "./popup.style";
 
-const CornerPopup = () => {
+const CornerPopup = ({ storageKey = "showPopup", link, text, content }) => {
   const [showPopup, setShowPopup] = useState(false);
 
   useEffect(() => {
-    if (!localStorage.getItem("showPopup")) {
+    if (!localStorage.getItem(storageKey)) {
       setTimeout(() => {
         setShowPopup(true);
+        localStorage.setItem(storageKey, true);
       }, 8000);
-      localStorage.setItem("showPopup", true);
-    } else setShowPopup(false);
-  },[]);
+    } else {
+      setShowPopup(false);
+    }
+  }, [storageKey]);
 
   return (
     showPopup &&
@@ -25,10 +26,10 @@ const CornerPopup = () => {
             <div className="close-btn" onClick={() => setShowPopup(false)}>
               <CloseIcon />
             </div>
-            <a href="https://play.meshery.io/">
-              <img className="popup-image" src={popupImageSmall} />
+            <a href={link}>
+              {content}
             </a>
-            <Button $primary className="explore-playground-button" title="Access Playground" $url="https://play.meshery.io/" $external={true}/>
+            <Button $primary className="explore-playground-button" title={text} $url={link} $external={true}/>
           </div>
         </div>
       </div>
diff --git a/src/components/Corner-popup/popup.style.js b/src/components/Corner-popup/popup.style.js
index d4d1ba94766da..35df0171a329b 100644
--- a/src/components/Corner-popup/popup.style.js
+++ b/src/components/Corner-popup/popup.style.js
@@ -34,7 +34,7 @@ const CornerPopupWrapper = styled.div`
     align-items: center;
     padding: 1rem;
     border: 1px solid #00d3a9;
-    border-radius: 5%;
+    border-radius: 12px;
     box-shadow: 0 0 30px rgba(0,211,169, 0.6);
     @media only screen and (max-width: 640px) {
         padding: 0.5rem;
@@ -47,16 +47,6 @@ const CornerPopupWrapper = styled.div`
     right: 0rem;
     cursor: pointer;
 }
-.popup-image{
-    border: 1px solid ${props => props.theme.whiteToBlack};
-    border-radius: 3%;
-}
-/* .popup-image-small{
-    box-shadow: 0 0 30px rgba(0,211,169, 0.6);
-    @media only screen and (min-width: 767px) {
-        display: none;
-    }
-} */
 
 .explore-playground-button {
     min-width: 140px;
diff --git a/src/pages/index.js b/src/pages/index.js
index f8d2512f5540e..206bbcb27a687 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,6 +5,7 @@ import Partners from "../sections/Home/Partners-home";
 import Banner from "../sections/Home/Banner";
 import loadable from "@loadable/component";
 import CornerPopup from "../components/Corner-popup";
+
 const CloudNativeManagement = loadable(() => import("../sections/Home/CloudNativeManagement"));
 const SubscribeSection = loadable(() => import("../sections/subscribe/subscribe"));
 // const ServiceMeshFocussed = loadable(() => import("../sections/Home/Service-mesh-focussed"));
@@ -14,6 +15,7 @@ import CaseStudyBanner from "../components/Case-study-banner";
 // const SoSpecial = loadable(() => import("../sections/Home/So-Special-Section"));
 const MesheryIntegration = loadable(() => import("../sections/Meshery/Meshery-integrations"));
 const FeaturesContainer = loadable(() => import("../sections/Home/FeaturesContainer"));
+import popupImageSmall from "../sections/Home/CornerPopup/power-of-meshery-small.png";
 
 // import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
 
@@ -21,13 +23,17 @@ const FeaturesContainer = loadable(() => import("../sections/Home/FeaturesContai
 const IndexPage = () => {
   return (
     <>
-      <Banner />
-      <FeaturesContainer />
-      <Partners />
-      <CornerPopup/>
+      <Banner/>
+      <FeaturesContainer/>
+      <Partners/>
+      <CornerPopup storageKey="homepageShowPopup" image={popupImageSmall} link="https://play.meshery.io/"
+        content={
+          <img alt="popup image" className="popup-image" src={popupImageSmall}/>
+        }
+        text="Access Playground"/>
       {/* <ServiceMeshManagement /> */}
-      <CloudNativeManagement />
-      <MesheryIntegration  />
+      <CloudNativeManagement/>
+      <MesheryIntegration/>
       {/* <Statement /> */}
       {/* <AppScreens /> */}
       {/* <Pricing /> */}
@@ -41,7 +47,7 @@ const IndexPage = () => {
       <CaseStudyBanner/>
       {/* <ServiceMeshFocussed bookName={"enterprise-path"} /> */}
       {/* <EngineerEnabler /> */}
-      <SubscribeSection />
+      <SubscribeSection/>
 
     </>
   );
diff --git a/src/components/Corner-popup/power-of-meshery-small.png b/src/sections/Home/CornerPopup/power-of-meshery-small.png
similarity index 100%
rename from src/components/Corner-popup/power-of-meshery-small.png
rename to src/sections/Home/CornerPopup/power-of-meshery-small.png
diff --git a/src/components/Corner-popup/power-of-meshery-small.svg b/src/sections/Home/CornerPopup/power-of-meshery-small.svg
similarity index 100%
rename from src/components/Corner-popup/power-of-meshery-small.svg
rename to src/sections/Home/CornerPopup/power-of-meshery-small.svg
diff --git a/src/components/Corner-popup/power-of-meshery.svg b/src/sections/Home/CornerPopup/power-of-meshery.svg
similarity index 100%
rename from src/components/Corner-popup/power-of-meshery.svg
rename to src/sections/Home/CornerPopup/power-of-meshery.svg
diff --git a/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js b/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
index 89fe4d68cd519..36c8262b703dd 100644
--- a/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
+++ b/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
@@ -1,49 +1,22 @@
-import React, { useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import Button from "../../../reusecore/Button";
-import { ReactComponent as IngressGatewayImage } from "./images/banner-transitions/ingress-gateway-partial-colorMode.svg";
-import { ReactComponent as KubernetesImage } from "./images/banner-transitions/kubernetes-partial-colorMode.svg";
-import { ReactComponent as PodImage } from "./images/banner-transitions/pod-partial-colorMode.svg";
-import { ReactComponent as PrometheusImage } from "./images/banner-transitions/prometheus-partial-colorMode.svg";
-import { ReactComponent as ServiceIntefaceImage } from "./images/banner-transitions/service-interface-partial-colorMode.svg";
-import SupportingArrows from "./images/banner-transitions/supporting-arrows.svg";
-import EmptyLight from "./images/banner-transitions/empty-light.svg";
-import EmptyDark from "./images/banner-transitions/empty-dark.svg";
-import { useInView } from "react-intersection-observer";
-import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
+import KanvasArchitecturalTransition from "../kanvas-architectural-transition";
 
 const CollaborationBannerWrapper = styled.div`
-
     .banner {
         display: flex;
         flex-direction: column;
         background: ${props => props.theme.linearToLinear2};
-        /* background-color: ${props => props.theme.grey121212ToWhite}; */
         max-width: 1920px;
         width: 100%;
         height: fit-content;
         justify-content: space-evenly;
         align-items: center;
-        padding: 4% 5% 6%;
-        /* transform: rotateX(40deg); */
-
-        /* @media only screen and (max-width: 500px) {
-            max-height: 400px;
-        } */
+        position: relative;
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-
-        svg {
-            .service-interface-partial-colorMode_svg__colorMode1,
-            .prometheus-partial-colorMode_svg__colorMode1,
-            .pod-partial-colorMode_svg__colorMode1,
-            .kubernetes-partial-colorMode_svg__colorMode1,
-            .ingress-gateway-partial-colorMode_svg__colorMode1 {
-              fill: ${props => props.theme.whiteToBlack};
-              transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-            }
     }
 
-
     .banner-text {
         display: flex;
         flex-direction: column;
@@ -54,42 +27,19 @@ const CollaborationBannerWrapper = styled.div`
     }
 
     h1 {
-        /* font-size: 4rem; */
         position: relative;
         display: inline-block;
-        /* color: ${props => props.theme.primaryColor}; */
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-/*
-        @media only screen and (min-width: 500px) {
-            font-size: 3.5rem;
-        }
-        @media only screen and (min-width: 767px) {
-            font-size: 4rem;
-        }
-        @media only screen and (min-width: 950px) {
-            font-size: 5rem;
-        } */
         @media only screen and (min-width: 1400px) {
             font-size: 3.75rem;
         }
     }
 
-    .heading {
-        opacity: 0;
-    }
-
-    .heading-transition {
-        opacity: 1;
-        transition: opacity 2.5s;
-    }
-
     h4 {
-        padding: 3% 0%;
+        padding: 3% 0;
         color: ${props => props.theme.greyA0AAAAToGrey666666};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-        /* font-size: 20px; */
         max-width: 40%;
-        /* font-weight: bold; */
         @media only screen and (max-width: 500px) {
             font-size: 1rem;
             max-width: 100%;
@@ -106,119 +56,32 @@ const CollaborationBannerWrapper = styled.div`
     p {
         padding-top: 2rem;
     }
-
-    .transition-container {
-        margin: 10% 0% 0%;
-        max-width: 70%;
-        position: relative;
-    }
-
-    .ingress-gateway, .kubernetes, .pod, .prometheus, .supporting-arrows, .service-interface {
-        /* max-width: 70%; */
-        position: absolute;
-        top: 0%;
-        left: 0%;
-        scale: 0.7;
-        opacity: 1;
-        transition: 1s;
-    }
-
-    .supporting-arrows {
-        opacity: 0;
-        scale: 1;
-    }
-
-    .supporting-arrows-transition {
-        opacity: 1;
-        transition: 0.5s ease-out 1s ;
-    }
-
-    .ingress-gateway {
-        translate: -40% 0;
-    }
-
-    .ingress-gateway-transition {
-        transform: translateX(40%);
-        scale: 1;
-        transition: 1s;
-    }
-
-    .kubernetes {
-        translate: 50% -30%;
-    }
-
-    .kubernetes-transition {
-        transform: translateX(-50%) translateY(30%);
-        scale: 1;
-        transition: 0.75s;
-    }
-
-    .pod {
-        translate: 40% 30%;
-    }
-
-    .pod-transition {
-        transform: translateX(-40%) translateY(-30%);
-        scale: 1;
-        transition: 1s;
-    }
-
-    .prometheus {
-        translate: -50% 30%;
-    }
-
-    .prometheus-transition {
-        transform: translateX(50%) translateY(-30%);
-        scale: 1;
-        transition: 1.25s;
-    }
-
-    .service-interface {
-        scale: 1;
-    }
-}
 `;
 
 const KanvasCollaborateBanner = () => {
-  const [transitionRef, inView] = useInView({ threshold: 0.7 });
-  const [imageInView, setimageInView] = useState(false);
-  if (inView && !imageInView)
-    setimageInView(true);
-  else if (imageInView && !inView)
-    setimageInView(false);
-
-  const { isDark } = useStyledDarkMode();
-
   return (
     <CollaborationBannerWrapper>
       <div className="banner">
         <div className="banner-text">
-          <h1>Collaborate with the team. <br /> Build solutions together </h1>
-          <h4>Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.</h4>
-          <Button $primary className="join-community-button" title="Start Collaborating" $url="https://kanvas.new/" $external={true} />
-        </div>
-        <div className="transition-container" ref={transitionRef}>
-          <img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />
-          <div>
-            <ServiceIntefaceImage className="service-interface" alt="ServiceIntefaceImage" />
-          </div>
-          <div>
-            <IngressGatewayImage className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"} alt="IngressGatewayImage" />
-          </div>
-          <div>
-            <KubernetesImage className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"} alt="KubernetesImage" />
-          </div>
-          <div>
-            <PodImage className={imageInView ? "pod-transition pod" : "pod"} alt="PodImage" />
-          </div>
-          <div>
-            <PrometheusImage alt="PrometheusImage" className={imageInView ? "prometheus-transition prometheus" : "prometheus"} />
-          </div>
-          <img className={imageInView ? "supporting-arrows-transition supporting-arrows" : "supporting-arrows"} src={SupportingArrows} alt="" />
+          <h1>
+            Collaborate with the team. <br /> Build solutions together
+          </h1>
+          <h4>
+            Designer and Operator live side-by-side, so all design work, from
+            ideation to operation, can be found in one place.
+          </h4>
+          <Button
+            $primary
+            className="join-community-button"
+            title="Start Collaborating"
+            $url="https://kanvas.new/"
+            $external={true}
+          />
         </div>
+        <KanvasArchitecturalTransition />
       </div>
     </CollaborationBannerWrapper>
   );
 };
 
-export default KanvasCollaborateBanner;
\ No newline at end of file
+export default KanvasCollaborateBanner;
diff --git a/src/sections/Kanvas/index.js b/src/sections/Kanvas/index.js
index e5df2d5a8e617..a89d811dd9b97 100644
--- a/src/sections/Kanvas/index.js
+++ b/src/sections/Kanvas/index.js
@@ -38,15 +38,17 @@ import Alex from "../../sections/Pricing/reviews/alex-hokanson.jpeg";
 import TeaserModal from "../../components/TeaserModal";
 import GuyM from "./images/guym.jpg";
 import Abdechakour from "../../sections/Pricing/reviews/abdechakour-h.jpeg";
+import KanvasCornerPopup from "./kanvas-corner-popup";
 
 
 const Kanvas = (props) => {
 
   return (
     <KanvasWrapper>
-      <div >
+      <div>
+        <KanvasCornerPopup />
         <Container>
-          <KanvasBanner />
+          <KanvasBanner/>
           <div className="mobile-modes">
             <Features
               heading="Kanvas Modes"
@@ -84,7 +86,7 @@ const Kanvas = (props) => {
               ]}
             />
           </div>
-          <KanvasModes />
+          <KanvasModes/>
           <InlineQuotes
             person="Guy Menahem"
             title="Software Engineer at AWS"
@@ -98,28 +100,28 @@ const Kanvas = (props) => {
                   title: "Design your deployments the way you want",
                   description: "Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components and Cloud services. Say goodbye to YAML configurations.",
                   imgContent: (
-                    <RoleBind1 id="design-image1" style={{ transform: "translateX(-2rem)" }} alt="design-image1" />
+                    <RoleBind1 id="design-image1" style={{ transform: "translateX(-2rem)" }} alt="design-image1"/>
                   )
                 },
                 {
                   title: "Manage your applications visually and intuitively",
                   description: "Play with powerful features including context-aware designs and namespace configurations to easily manage all services.",
                   imgContent: (
-                    <RoleBind2 id="design-image2" alt="design-image2" />
+                    <RoleBind2 id="design-image2" alt="design-image2"/>
                   )
                 },
                 {
                   title: "Build the bridge",
                   description: "Go from developer handoffs to ongoing conversations with a shared language between design and development.",
                   imgContent: (
-                    <RoleBind3 id="design-image3" style={{ transform: "translateX(-2rem)" }} alt="design-image3" />
+                    <RoleBind3 id="design-image3" style={{ transform: "translateX(-2rem)" }} alt="design-image3"/>
                   )
                 },
                 {
                   title: "Stop finger-pointing",
                   description: "Make infrastructure and application management less about finger-pointing and more about collaborating.",
                   imgContent: (
-                    <RoleBind4 id="design-image4" style={{ transform: "translateX(-2rem)" }} alt="design-image4" />
+                    <RoleBind4 id="design-image4" style={{ transform: "translateX(-2rem)" }} alt="design-image4"/>
                   )
                 },
               ]}
@@ -138,14 +140,14 @@ const Kanvas = (props) => {
                   title: "All your Kubernetes and Cloud infrastructure under a common management",
                   description: "Deploy designs, apply patterns, manage and operate your deployments and services in real-time.",
                   imgContent: (
-                    <Visualize1 id="visualize-image1" alt="visualize-image1" />
+                    <Visualize1 id="visualize-image1" alt="visualize-image1"/>
                   )
                 },
                 {
                   title: "Continuous visibility across all of your clusters and workloads.",
                   description: "Import your existing Kubernetes, Kustomize, Helm, or Docker Compose applications. Interactively connect to terminal sessions or initiate and search log streams from your containers.",
                   imgContent: (
-                    <Visualize2 id="visualize-image2" alt="visualize-image2" />
+                    <Visualize2 id="visualize-image2" alt="visualize-image2"/>
                   )
                 },
               ]}
@@ -173,7 +175,7 @@ const Kanvas = (props) => {
                         height="48"
                         style={{ objectFit: "cover" }}
                       />
-                      <Collab1 id="collaborate-image1" alt="collaborate-image1" />
+                      <Collab1 id="collaborate-image1" alt="collaborate-image1"/>
                     </>
                   )
                   // Invite any Layer5 Cloud user, or all Meshery users, to work with you on a public design, including making changes and releasing new versions."
@@ -195,7 +197,7 @@ const Kanvas = (props) => {
                         height="48"
                         style={{ objectFit: "cover" }}
                       />
-                      <Collab2 id="collaborate-image2" alt="collaborate-image2" />
+                      <Collab2 id="collaborate-image2" alt="collaborate-image2"/>
                     </>
                   )
                 },
@@ -212,7 +214,7 @@ const Kanvas = (props) => {
                         height="48"
                         style={{ objectFit: "cover" }}
                       />
-                      <Collab3 id="collaborate-image3" alt="collaborate-image3" />
+                      <Collab3 id="collaborate-image3" alt="collaborate-image3"/>
                     </>
                   )
                 },
@@ -233,7 +235,7 @@ const Kanvas = (props) => {
                         height="48"
                         style={{ objectFit: "cover" }}
                       />
-                      <Collab4 id="collaborate-image4" alt="collaborate-image4" />
+                      <Collab4 id="collaborate-image4" alt="collaborate-image4"/>
                     </>
                   )
                 }
@@ -294,8 +296,8 @@ const Kanvas = (props) => {
             image={Alex}
           />
           {/* <MesheryAction /> */}
-          <KanvasBtn style={{ marginBottom: "2rem" }} />
-          <Platform />
+          <KanvasBtn style={{ marginBottom: "2rem" }}/>
+          <Platform/>
           <InlineQuotes
             quote="Guys, I love Kanvas! This tool is crazy!"
             person="Ala Eddine BENHASSIR"
@@ -305,8 +307,8 @@ const Kanvas = (props) => {
         </Container>
       </div>
       <>
-        <Reviews />
-        <TeaserModal title="Kanvas Teaser" open={props?.teaser} />
+        <Reviews/>
+        <TeaserModal title="Kanvas Teaser" open={props?.teaser}/>
       </>
     </KanvasWrapper>
   );
diff --git a/src/sections/Kanvas/kanvas-architectural-transition.js b/src/sections/Kanvas/kanvas-architectural-transition.js
new file mode 100644
index 0000000000000..561bb450e283f
--- /dev/null
+++ b/src/sections/Kanvas/kanvas-architectural-transition.js
@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import EmptyDark from "./Kanvas-collaborate/images/banner-transitions/empty-dark.svg";
+import EmptyLight from "./Kanvas-collaborate/images/banner-transitions/empty-light.svg";
+import { ReactComponent as IngressGatewayImage } from "./Kanvas-collaborate/images/banner-transitions/ingress-gateway-partial-colorMode.svg";
+import { ReactComponent as KubernetesImage } from "./Kanvas-collaborate/images/banner-transitions/kubernetes-partial-colorMode.svg";
+import { ReactComponent as PodImage } from "./Kanvas-collaborate/images/banner-transitions/pod-partial-colorMode.svg";
+import { ReactComponent as PrometheusImage } from "./Kanvas-collaborate/images/banner-transitions/prometheus-partial-colorMode.svg";
+import {
+  ReactComponent as ServiceIntefaceImage
+} from "./Kanvas-collaborate/images/banner-transitions/service-interface-partial-colorMode.svg";
+import SupportingArrows from "./Kanvas-collaborate/images/banner-transitions/supporting-arrows.svg";
+import { useInView } from "react-intersection-observer";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
+
+const TransitionWrapper = styled.div`
+
+    .transition-container {
+        margin: auto;
+        max-width: 70%;
+        position: relative;
+    }
+
+    svg {
+        .service-interface-partial-colorMode_svg__colorMode1,
+        .prometheus-partial-colorMode_svg__colorMode1,
+        .pod-partial-colorMode_svg__colorMode1,
+        .kubernetes-partial-colorMode_svg__colorMode1,
+        .ingress-gateway-partial-colorMode_svg__colorMode1 {
+            fill: ${props => props.theme.whiteToBlack};
+            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        }
+    }
+
+    .ingress-gateway, .kubernetes, .pod, .prometheus, .supporting-arrows, .service-interface {
+        /* max-width: 70%; */
+        position: absolute;
+        top: 0%;
+        left: 0%;
+        scale: 0.7;
+        opacity: 1;
+        transition: 1s;
+    }
+
+    .supporting-arrows {
+        opacity: 0;
+        scale: 1;
+    }
+
+    .supporting-arrows-transition {
+        opacity: 1;
+        transition: 0.5s ease-out 1s;
+    }
+
+    .ingress-gateway {
+        translate: -40% 0;
+    }
+
+    .ingress-gateway-transition {
+        transform: translateX(40%);
+        scale: 1;
+        transition: 1s;
+    }
+
+    .kubernetes {
+        translate: 50% -30%;
+    }
+
+    .kubernetes-transition {
+        transform: translateX(-50%) translateY(30%);
+        scale: 1;
+        transition: 0.75s;
+    }
+
+    .pod {
+        translate: 40% 30%;
+    }
+
+    .pod-transition {
+        transform: translateX(-40%) translateY(-30%);
+        scale: 1;
+        transition: 1s;
+    }
+
+    .prometheus {
+        translate: -50% 30%;
+    }
+
+    .prometheus-transition {
+        transform: translateX(50%) translateY(-30%);
+        scale: 1;
+        transition: 1.25s;
+    }
+
+    .service-interface {
+        scale: 1;
+    }
+
+`;
+
+const KanvasArchitecturalTransition = () => {
+  const [transitionRef, inView] = useInView({ threshold: 0.7 });
+  const [imageInView, setImageInView] = useState(false);
+
+  if (inView && !imageInView) setImageInView(true);
+  else if (imageInView && !inView) setImageInView(false);
+
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <TransitionWrapper>
+      <div className="transition-container" ref={transitionRef}>
+        <img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />
+        <div>
+          <ServiceIntefaceImage className="service-interface" alt="ServiceIntefaceImage"/>
+        </div>
+        <div>
+          <IngressGatewayImage
+            className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"}
+            alt="IngressGatewayImage"
+          />
+        </div>
+        <div>
+          <KubernetesImage
+            className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"}
+            alt="KubernetesImage"
+          />
+        </div>
+        <div>
+          <PodImage
+            className={imageInView ? "pod-transition pod" : "pod"}
+            alt="PodImage"
+          />
+        </div>
+        <div>
+          <PrometheusImage
+            className={imageInView ? "prometheus-transition prometheus" : "prometheus"}
+            alt="PrometheusImage"
+          />
+        </div>
+        <img
+          className={imageInView ? "supporting-arrows-transition supporting-arrows" : "supporting-arrows"}
+          src={SupportingArrows}
+          alt=""
+        />
+      </div>
+    </TransitionWrapper>
+  );
+};
+
+export default KanvasArchitecturalTransition;
diff --git a/src/sections/Kanvas/kanvas-corner-popup.js b/src/sections/Kanvas/kanvas-corner-popup.js
new file mode 100644
index 0000000000000..e42a27fdf6a3e
--- /dev/null
+++ b/src/sections/Kanvas/kanvas-corner-popup.js
@@ -0,0 +1,86 @@
+import React from "react";
+import CornerPopup from "../../components/Corner-popup";
+import KanvasArchitecturalTransition from "./kanvas-architectural-transition";
+import styled from "styled-components";
+
+const TransitionWrapper = styled.div`
+    .popup-container {
+        background: ${props => props.theme.linearToLinear2};
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        border-radius: 12px;
+    }
+
+    .popup-text {
+        display: flex;
+        gap: 0;
+        flex-direction: column;
+        text-align: center;
+        z-index: 1;
+        padding-top: 2%;
+    }
+
+    h1 {
+        display: inline-block;
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        font-size: 1.8rem;
+    }
+
+    h4 {
+        padding: 3% 0;
+        color: ${props => props.theme.greyA0AAAAToGrey666666};
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        @media only screen and (max-width: 500px) {
+            font-size: 1rem;
+            max-width: 100%;
+        }
+        @media only screen and (max-width: 767px) {
+            max-width: 100%;
+        }
+    }
+
+    .try-it-text {
+        z-index: 1;
+        padding: 1rem 2rem 2rem;
+        text-align: center;
+        font-size: 1.1rem;
+
+        span {
+            color: ${props => props.theme.greyA0AAAAToGrey666666};
+        }
+
+        strong {
+            color: #FFFFFF;
+            font-weight: 600;
+            font-size: 1.5rem
+        }
+    }
+`;
+
+const KanvasCornerPopup = () => {
+  return (
+    <CornerPopup storageKey="kanvasShowPopup" content={
+      <TransitionWrapper>
+        <div className="popup-container">
+          <div className="popup-text">
+            <h4>
+              Build solutions together
+            </h4>
+            <h1>
+              Collaborate with the team
+            </h1>
+          </div>
+          <KanvasArchitecturalTransition/>
+          <div className="try-it-text">
+            <span>Try it now at </span>
+            <strong>kanvas.new</strong>
+          </div>
+        </div>
+      </TransitionWrapper>
+    } link="https://kanvas.new/" text="Access Kanvas"/>
+  );
+};
+
+export default KanvasCornerPopup;