diff --git a/public/assets/styles/style.css b/public/assets/styles/style.css
index 8d21911..f765825 100644
--- a/public/assets/styles/style.css
+++ b/public/assets/styles/style.css
@@ -757,6 +757,11 @@ video {
   border-width: 8px;
 }
 
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -767,10 +772,25 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
 .bg-inherit {
   background-color: inherit;
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.bg-sky-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 249 255 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
diff --git a/src/common/index.ejs b/src/common/index.ejs
index 14a3bc7..d6f9d53 100644
--- a/src/common/index.ejs
+++ b/src/common/index.ejs
@@ -1,5 +1,12 @@
 <%- include(commonPath + '/header.ejs') %>
 
+<% const scenarioButton = (title, link) => { %>
+    <a href="<%= link %>"
+        class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
+        <%= title %>
+    </a>
+<% } %>
+
 <div class="container-lg mx-auto py-8">
     <div class="flex justify-center">
         <img src="/assets/imgs/PS_Logo.svg" class="mx-auto w-24 h-24 mb-4" alt="Logo">
@@ -8,35 +15,14 @@
     <section class="text-center mb-4">
         <h2 class="text-3xl font-bold mb-4 text-center">Scenarios</h2>
         <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-            <a href="/analytics"
-                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-                🔎 Analytics Tracking
-            </a>
-            <a href="/embedded-video"
-                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-                📽️ Embedded Content
-            </a>
-            <a href="/ecommerce"
-                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-                🛒 E-Commerce
-            </a>
-            <a href="/single-sign-on"
-                class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-                🔐 Single Sign-On
-            </a>
-            <a href="/payment-gateway"
-            class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-                💳 Payment Gateway
-            </a>
+            <%= scenarioButton('🔎 Analytics Tracking', '/analytics') %>
+            <%= scenarioButton('📽️ Embedded Content', '/embedded-video') %>
+            <%= scenarioButton('🛒 E-Commerce', '/ecommerce') %>
+            <%= scenarioButton('🔐 Single Sign-On', '/single-sign-on') %>
+            <%= scenarioButton('💳 Payment Gateway', '/payment-gateway') %>
+            <%= scenarioButton('🍪 CHIPS', '/chips') %>
         </div>
     </section>
-<h2 class="text-3xl font-bold mb-4 text-center mt-4">API Demos</h2>
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <a href="/chips"
-           class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
-            🍪 CHIPS
-        </a>
-    </div>
 </div>
 
 <%- include(commonPath + '/footer.ejs') %>