diff --git a/css/openchoreo.css b/css/openchoreo.css
index 2ed9db5..1e990e5 100644
--- a/css/openchoreo.css
+++ b/css/openchoreo.css
@@ -125,7 +125,7 @@ background-color: #fff;
 
 
 .cButton.cOutlineCTA {
-    background-image: url(../img/bgicons-new-01.webp);
+    /* background-image: url(../img/bgicons-new-01.webp); */
     background-size: 40px;
     background-position: 10px center;
     background-repeat: no-repeat;
@@ -140,6 +140,35 @@ background-color: #fff;
 }
 
 
+.cButton.cOutlineCTA.cQuickStart {
+    background-image: url(../img/Icons_quick-start.webp);
+}
+.cButton.cOutlineCTA.cFlexibleInstall  {
+    background-image: url(../img/Icons_flexible-install.webp);
+}
+
+.cButton.cOutlineCTA.cReady-to-Use-Samples {
+    background-image: url(../img/Icons_ready-to-use-samples.webp);
+}
+
+.cButton.cOutlineCTA.cContribute {
+    background-image: url(../img/Icons_contribute.webp);
+}
+
+.cButton.cOutlineCTA.cReportIssues {
+    background-image: url(../img/Icons_report-issues.webp);
+}
+
+.cButton.cOutlineCTA.cJoinOurDiscord {
+    background-image: url(../img/Icons_join-our-discord.webp);
+}
+
+
+
+
+
+
+
 .cButton.cOutlineCTA:hover {
     background-color: #36A1FF;
 }
diff --git a/img/Icons_battle-tested.webp b/img/Icons_battle-tested.webp
new file mode 100644
index 0000000..347b469
Binary files /dev/null and b/img/Icons_battle-tested.webp differ
diff --git a/img/Icons_contribute.webp b/img/Icons_contribute.webp
new file mode 100644
index 0000000..b2d2131
Binary files /dev/null and b/img/Icons_contribute.webp differ
diff --git a/img/Icons_developer-centric.webp b/img/Icons_developer-centric.webp
new file mode 100644
index 0000000..478e88e
Binary files /dev/null and b/img/Icons_developer-centric.webp differ
diff --git a/img/Icons_flexible-install.webp b/img/Icons_flexible-install.webp
new file mode 100644
index 0000000..0d6ae1d
Binary files /dev/null and b/img/Icons_flexible-install.webp differ
diff --git a/img/Icons_join-our-discord.webp b/img/Icons_join-our-discord.webp
new file mode 100644
index 0000000..2fb2d5a
Binary files /dev/null and b/img/Icons_join-our-discord.webp differ
diff --git a/img/Icons_policy-driven.webp b/img/Icons_policy-driven.webp
new file mode 100644
index 0000000..06e00b5
Binary files /dev/null and b/img/Icons_policy-driven.webp differ
diff --git a/img/Icons_quick-start.webp b/img/Icons_quick-start.webp
new file mode 100644
index 0000000..46151fd
Binary files /dev/null and b/img/Icons_quick-start.webp differ
diff --git a/img/Icons_ready-to-use-samples.webp b/img/Icons_ready-to-use-samples.webp
new file mode 100644
index 0000000..5bcf652
Binary files /dev/null and b/img/Icons_ready-to-use-samples.webp differ
diff --git a/img/Icons_report-issues.webp b/img/Icons_report-issues.webp
new file mode 100644
index 0000000..a3c1244
Binary files /dev/null and b/img/Icons_report-issues.webp differ
diff --git a/img/Icons_unified-and-integrated.webp b/img/Icons_unified-and-integrated.webp
new file mode 100644
index 0000000..73559df
Binary files /dev/null and b/img/Icons_unified-and-integrated.webp differ
diff --git a/index.html b/index.html
index 6da9040..ad1d3d5 100644
--- a/index.html
+++ b/index.html
@@ -41,7 +41,7 @@ <h2>Why OpenChoreo</h2>
         <div class="row">
             <div class="col-lg-3- col-md-3 col-sm-12 col-xs-12">
                 <div class="cCard">
-                    <img class="cIcon" src="./img/icons-02.webp"/>
+                    <img style="height: 100px; width: 100px;" alt="Unified and Integrated" class="cIcon" src="./img/Icons_unified-and-integrated.webp"/>
              
                     
                         
@@ -51,7 +51,7 @@ <h3>Unified and Integrated</h3>
              </div>
              <div class="col-lg-3- col-md-3 col-sm-12 col-xs-12">
                 <div class="cCard">
-                    <img class="cIcon" src="./img/icons-01.webp"/>
+                    <img style="height: 100px; width: 100px;" alt="Developer-Centric" class="cIcon" src="./img/Icons_developer-centric.webp"/>
            
                     
                         
@@ -61,14 +61,14 @@ <h3>Developer-Centric</h3>
              </div>
              <div class="col-lg-3- col-md-3 col-sm-12 col-xs-12">
                 <div class="cCard">
-                    <img class="cIcon" src="./img/icons-03.webp"/>
+                    <img style="height: 100px; width: 100px;" alt="Developer-Centric" class="cIcon" src="./img/Icons_policy-driven.webp"/>
                     <h3>Policy-Driven</h3>
                     <p>Enforce security, compliance, and architectural standards at every stage.</p>
                 </div>
              </div>
              <div class="col-lg-3- col-md-3 col-sm-12 col-xs-12">
                 <div class="cCard">
-                    <img class="cIcon" src="./img/icons-04.webp"/>
+                    <img style="height: 100px; width: 100px;" alt="Battle-Tested" class="cIcon" src="./img/Icons_battle-tested.webp"/>
                     <h3>Battle-Tested</h3>
                     <p>Inspired by real-world lessons from WSO2 Choreo, trusted by global enterprises.</p>
                 </div>
@@ -220,14 +220,14 @@ <h2>Get Started Instantly</h2>
         <div class="row">
             <div class="col-sm-12 col-md-4 col-lg-4">
                 <div class="cCard cButtonContainer">
-                    <a class="cButton cOutlineCTA" href="https://github.com/openchoreo/openchoreo/blob/main/docs/quick-start-guide.md"> Quick Start</a>
+                    <a class="cButton cOutlineCTA cQuickStart" href="https://github.com/openchoreo/openchoreo/blob/main/docs/quick-start-guide.md"> Quick Start</a>
                     <p>Deploy OpenChoreo locally with one command using a dev container.</p>
                 </div>
              </div>
 
              <div class="col-sm-12 col-md-4 col-lg-4">
                 <div class="cCard cButtonContainer">
-                    <a class="cButton cOutlineCTA" href="https://github.com/openchoreo/openchoreo/blob/main/docs/install-guide.md"> Flexible Install </a>
+                    <a class="cButton cOutlineCTA cFlexibleInstall" href="https://github.com/openchoreo/openchoreo/blob/main/docs/install-guide.md"> Flexible Install </a>
                     <p> Run on your Kubernetes cluster with Cilium support.</p>
                 </div>
              </div>
@@ -235,7 +235,7 @@ <h2>Get Started Instantly</h2>
 
              <div class="col-sm-12 col-md-4 col-lg-4">
                 <div class="cCard cButtonContainer">
-                    <a class="cButton cOutlineCTA" href="https://github.com/openchoreo/openchoreo/tree/main/samples"> Ready-to-Use Samples</a>
+                    <a class="cButton cOutlineCTA cReady-to-Use-Samples" href="https://github.com/openchoreo/openchoreo/tree/main/samples"> Ready-to-Use Samples</a>
                     <p>Learn by doing with fully working examples.</p>
                 </div>
              </div>
@@ -270,14 +270,14 @@ <h2>Join the OpenChoreo Community</h2>
         <div class="row">
             <div class="col-sm-12 col-md-4 col-lg-4">
                 <div class="cCard cButtonContainer">
-                    <a class="cButton cOutlineCTA" href="https://github.com/openchoreo/openchoreo/blob/main/docs/contributors/README.md"> Contribute</a>
+                    <a class="cButton cOutlineCTA cContribute" href="https://github.com/openchoreo/openchoreo/blob/main/docs/contributors/README.md"> Contribute</a>
                     <p>Help shape OpenChoreo by submitting features, fixes, or improvements.</p>
                 </div>
              </div>
 
              <div class="col-sm-12 col-md-4 col-lg-4">
                 <div class="cCard cButtonContainer">
-                    <a class="cButton cOutlineCTA" href="https://github.com/openchoreo/openchoreo/issues"> Report Issues </a>
+                    <a class="cButton cOutlineCTA cReportIssues" href="https://github.com/openchoreo/openchoreo/issues"> Report Issues </a>
                     <p> Identify bugs and suggest enhancements to make the platform better for everyone.</p>
                 </div>
              </div>
@@ -285,7 +285,7 @@ <h2>Join the OpenChoreo Community</h2>
 
              <div class="col-sm-12 col-md-4 col-lg-4">
                 <div class="cCard cButtonContainer">
-                    <a class="cButton cOutlineCTA" href="https://discord.com/invite/asqDFC8suT"> Join Our Discord</a>
+                    <a class="cButton cOutlineCTA cJoinOurDiscord" href="https://discord.com/invite/asqDFC8suT"> Join Our Discord</a>
                     <p>Get real-time support, ask questions, and engage with other users and maintainers.</p>
                 </div>
              </div>