diff --git a/src/sections/Meshery/meshery-operator/index.js b/src/sections/Meshery/meshery-operator/index.js
index 74bc1af114a2ce..5c950756dbcf23 100644
--- a/src/sections/Meshery/meshery-operator/index.js
+++ b/src/sections/Meshery/meshery-operator/index.js
@@ -1,7 +1,5 @@
-
 import React from "react";
 
-
 import MesheryOperatorWrapper from "./mesheryoperator.style";
 import { Container, Row, Col } from "../../../reusecore/Layout";
 import Slider from "react-slick";
@@ -9,8 +7,7 @@ import Slider from "react-slick";
 import SubscribeSection from "../../../sections/subscribe/subscribe";
 import Deployment from "./deployment.svg";
 import Initialization from "./initialization.svg";
-
-const OperatorLogo = "../../../assets/images/meshery-operator/meshery-operator.webp";
+import OperatorLogo from "../../../assets/images/meshery-operator/meshery-operator.svg";
 
 const MesheryOperatorPage = () => {
   return (
@@ -28,7 +25,7 @@ const MesheryOperatorPage = () => {
                     <h1>Meshery Operator</h1>
                     <br />
                     <p>
-                      Meshery Operator is the multi-service mesh operator (a Kubernetes custom controller) that manages MeshSync and it’s messaging broker.
+                      Meshery Operator is the multi-service mesh operator (a Kubernetes custom controller) that manages MeshSync and its messaging broker.
                     </p>
                     <p>
                       Meshery Operator is a Kubernetes controller manager, otherwise known as a Kubernetes Operator. Meshery Operator manages the lifecycle of every Meshery component that is deployed or running inside of a Kubernetes cluster.
@@ -41,19 +38,17 @@ const MesheryOperatorPage = () => {
               <h1>Controllers managed by Meshery Operator</h1>
               <div className="cards">
                 <Row>
-                  <Col $lg={6} $md={6} $sm={12}>
+                  <Col $lg={6} $md={6} $sm={12} className="card-col">
                     <div className="card">
                       <h2>BROKER CONTROLLER</h2>
-                      <br />
                       <p>Broker Controller manages the lifecycle of broker that meshery uses for data streaming across the cluster and the outside world.</p>
                     </div>
                   </Col>
 
-                  <Col $lg={6} $md={6} $sm={12}>
+                  <Col $lg={6} $md={6} $sm={12} className="card-col">
                     <div className="card">
                       <h2>MESHSYNC CONTROLLER</h2>
-                      <br />
-                      <p>MeshSync Controller manages the lifecycle of MeshSync that is deployed for resource synchronization for the cluster.</p>
+                      <p>MeshSync Controller manages the lifecycle of MeshSync that is deployed for resource synchronization in the cluster.</p>
                     </div>
                   </Col>
                 </Row>
@@ -67,17 +62,17 @@ const MesheryOperatorPage = () => {
                 className="slider"
                 arrows={true}
                 infinite={false}
-                speed="500"
+                speed={500}
                 slidesToScroll={1}
               >
                 <div>
-                  <a href={Deployment}>
-                    <img className="logo" src={Deployment} />
+                  <a href={Deployment} target="_blank" rel="noopener noreferrer">
+                    <img className="diagram-image" src={Deployment} alt="Meshery Operator and MeshSync Deployment" width="960" height="540" loading="lazy" />
                   </a>
                 </div>
                 <div>
-                  <a href={Initialization}>
-                    <img className="logo" src={Initialization} />
+                  <a href={Initialization} target="_blank" rel="noopener noreferrer">
+                    <img className="diagram-image" src={Initialization} alt="Meshery Operator and MeshSync Initialization" width="960" height="540" loading="lazy" />
                   </a>
                 </div>
               </Slider>
@@ -89,32 +84,33 @@ const MesheryOperatorPage = () => {
                   <div className="text">
                     <h2>When is Meshery Operator deployed and when is it deleted?</h2>
                     <br />
-                    <p >As a Kubernetes custom controller, Meshery Operator is provisioned and deprovisioned when Meshery Server is connected to or disconnected from Kubernetes cluster. Meshery Server connections to Kubernetes clusters are controlled using Meshery Server clients: mesheryctl or Meshery UI. This behavior described below is consistent whether your Meshery deployment is using Docker or Kubernetes as the platform to host the Meshery deployment.
+                    <p>As a Kubernetes custom controller, Meshery Operator is provisioned and deprovisioned when Meshery Server is connected to or disconnected from a Kubernetes cluster. Meshery Server connections to Kubernetes clusters are controlled using Meshery Server clients: mesheryctl or Meshery UI. This behavior is described below and is consistent whether your Meshery deployment uses Docker or Kubernetes as its host platform.
                     </p>
                   </div>
                 </Col>
                 <Col $lg={6} $md={6} $sm={12}>
                   <div className="listed">
                     <table className="table">
-                      <tr>
-                        <td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
-                        <td className="service">
-                          <h4>
-                            Meshery CLI
-                          </h4>
-                          Initiates connection to Kubernetes cluster when <span className="command">mesheryctl</span> system start is executed and disconnects when <span className="command">mesheryctl system stop</span> is executed. This behavior is consistent whether your Meshery deployment is using Docker or Kubernetes as the platform to host the Meshery deployment.
-                        </td>
-                      </tr>
-                      <tr>
-                        <td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
-                        <td className="service">
-                          <h4>
-                            Meshery UI
-                          </h4>
-                          Offers more granular control over the deployment of Meshery Operator. You can remove Meshery Operator from a Kubernetes cluster without disconnecting Meshery Server from the Kubernetes cluster. You can control the deployment of Meshery Operator using the on/off switch found in the Meshery Operator section of Settings.
-                        </td>
-                      </tr>
-
+                      <tbody>
+                        <tr>
+                          <td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40" aria-hidden="true" focusable="false"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
+                          <td className="service">
+                            <h4>
+                              Meshery CLI
+                            </h4>
+                            Initiates connection to Kubernetes cluster when <span className="command">mesheryctl</span> system start is executed and disconnects when <span className="command">mesheryctl system stop</span> is executed. This behavior is consistent whether your Meshery deployment is using Docker or Kubernetes as the platform to host the Meshery deployment.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40" aria-hidden="true" focusable="false"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
+                          <td className="service">
+                            <h4>
+                              Meshery UI
+                            </h4>
+                            Offers more granular control over the deployment of Meshery Operator. You can remove Meshery Operator from a Kubernetes cluster without disconnecting Meshery Server from the Kubernetes cluster. You can control the deployment of Meshery Operator using the on/off switch found in the Meshery Operator section of Settings.
+                          </td>
+                        </tr>
+                      </tbody>
                     </table>
                   </div>
                 </Col>
@@ -129,4 +125,4 @@ const MesheryOperatorPage = () => {
   );
 };
 
-export default MesheryOperatorPage;
\ No newline at end of file
+export default MesheryOperatorPage;
diff --git a/src/sections/Meshery/meshery-operator/mesheryoperator.style.js b/src/sections/Meshery/meshery-operator/mesheryoperator.style.js
index 97effa9b8cb9d3..3d44e6d1790504 100644
--- a/src/sections/Meshery/meshery-operator/mesheryoperator.style.js
+++ b/src/sections/Meshery/meshery-operator/mesheryoperator.style.js
@@ -9,6 +9,7 @@ const MesheryOperatorWrapper = styled.section`
             display: block;
             margin: 2rem auto;
             width: 60%;
+            max-width: 320px;
         }
         .hero-text{
             margin: 0 auto;
@@ -22,55 +23,20 @@ const MesheryOperatorWrapper = styled.section`
             }
         }
     }
-    .banner{
-        padding: 6.25rem 0 1.25rem 0;
-        .title-text{
-            margin: 3.125rem 0 6.25rem 0;
-            h1{
-                color: ${props => props.theme.black};
-            }
-            h4{
-                border: 1px solid gray;
-                padding: 0.2rem 0.625rem 0.2rem 0.625rem;
-                font-size: 1.325rem;
-                width: 15rem;
-                font-weight: 600;
-                color: ${props => props.theme.black};
-                margin:0.5rem 0;
-                text-align:center;
-            }
-        }
-        .logo{
-            float: right;
-            margin-right: 1.875rem;
-            height: 12.5rem;
-            width: auto;
-        }  
-        }
-        p{
-            width: 96%;
-        }
-        rect {
-            fill:  ${props => props.theme.grey313131ToGreenC9FCF6}; 
-            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); 
-          }
-          path {
-            stroke: ${props => props.theme.green00D3A9ToGreen00B39F};
-            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-          }
-        .iframe-div{
-            height: 450px;
-            aspect-ratio: 2;
-            display: block;
-            margin: 3.125rem auto;
-        }
-    }
+
     .showcase{
         margin: 6.25rem 0;
         text-align: center;
         .slider{
             margin: auto;
             width: 70%;
+            .diagram-image {
+                width: 100%;
+                height: auto;
+                aspect-ratio: 16 / 9;
+                max-height: 520px;
+                object-fit: contain;
+            }
             .slick-arrow{
                 margin: 0 -1.25rem 0 -3.125rem;
             }	
@@ -85,67 +51,7 @@ const MesheryOperatorWrapper = styled.section`
             }
         }
     }
-    .contributors{
-        width: 70%;
-        margin: 6.25rem auto;
-        text-align: center;
-        p{
-            margin-bottom: 3.125rem;
-        }
-    }
-    @media only screen and (max-width: 912px) {
-        .iframe-div{
-            height: 80%;
-            width: 100%;
-        }
-    }
 
-    @media only screen and (max-width: 480px) {
-        .banner{
-            padding: 3.125rem 0 1.25rem 0;
-            .title-text{
-                margin: 0 0 3.125rem 0;
-                h4{
-                    font-size: 16px;
-                    padding: 0;
-                    border: 0;
-                }
-            }
-            .logo{
-                height: 6.25rem;
-                width: auto;
-                margin: 0;
-            }
-            p{
-                width: 100%;
-            }
-            .iframe-div{
-                height: 80%;
-                width: 100%;
-                margin: 1.875rem auto;
-            }
-        }
-        .showcase{
-            margin: 3.125rem 0;
-            .slider{
-                margin: auto;
-                width: 85%;
-                .slick-arrow{
-                    margin: 0 -0.3rem 0 -0.3rem;
-                }	
-                .slick-arrow:before{	
-                    font-size: 1.5rem;
-                }
-            }
-        }
-        .contributors{
-            width: 100%;
-            margin: 3.125rem auto;
-            p{
-                margin-bottom: 1.875rem;
-            }
-        }
-    }
     .explain-1 {
         padding-top: 1rem;
         text-align: center;
@@ -156,15 +62,24 @@ const MesheryOperatorWrapper = styled.section`
         }
         h1 {
             padding: 1.25rem 0px;
+            font-size: 2rem;
+            font-weight: 700;
         }
         .cards {
-            margin: 3.125rem 0;
+            margin: 2.5rem 0 3.5rem 0;
             width: 100%;
-            padding: 5rem 1.25rem;
+            padding: 2.5rem 1.5rem;
             background-color: ${props => props.theme.secondaryLightColorTwo};
-            border-radius: 25px;
+            border-radius: 20px;
             transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+            .card-col {
+                display: flex;
+            }
             .card {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
                 box-shadow:
                 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
                 0 6.7px 5.3px rgba(0, 0, 0, 0.048),
@@ -173,23 +88,29 @@ const MesheryOperatorWrapper = styled.section`
                 0 20.8px 33.4px rgba(0, 0, 0, 0.086),
                 0 3.125rem 80px rgba(0, 0, 0, 0.12)
                 ;
-                margin: 2px;
-                padding: 1.25rem;
+                margin: 0.5rem;
+                padding: 2rem 1.75rem;
                 background: ${props => props.theme.grey212121ToWhite};
-                border-radius: 25px;
+                border-radius: 16px;
                 transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
                 p {
                     text-align: left;
-                    padding: 0px 0px;
+                    padding: 0px;
                     letter-spacing: 0;
+                    font-size: 1rem;
+                    line-height: 1.6;
+                    color: ${props => props.theme.tertiaryColor};
                 }
                 h2 {
                     text-align: left;
-                    font-size: 24px;
-                    text-transform:uppercase;
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    letter-spacing: 0.04em;
+                    text-transform: uppercase;
+                    margin-bottom: 0.75rem;
+                    color: ${props => props.theme.primaryColor};
                     clear: both;
                 }
-                }
             }
         }
     }
@@ -214,7 +135,7 @@ const MesheryOperatorWrapper = styled.section`
             }
         }
     }
-}
+
     .lists{
         margin: 0 0 3rem 0;
     }
@@ -228,6 +149,19 @@ const MesheryOperatorWrapper = styled.section`
                } 
             }
         }
+        .showcase{
+            margin: 3.125rem 0;
+            .slider{
+                margin: auto;
+                width: 85%;
+                .slick-arrow{
+                    margin: 0 -0.3rem 0 -0.3rem;
+                }	
+                .slick-arrow:before{	
+                    font-size: 1.5rem;
+                }
+            }
+        }
         .explain-1{
             padding-top: 1.125rem;
             p{
@@ -237,4 +171,4 @@ const MesheryOperatorWrapper = styled.section`
     }
 `;
 
-export default MesheryOperatorWrapper;
\ No newline at end of file
+export default MesheryOperatorWrapper;