diff --git a/_includes/models/modal.html b/_includes/models/modal.html
index 0f233325e9..8315bf9304 100644
--- a/_includes/models/modal.html
+++ b/_includes/models/modal.html
@@ -84,7 +84,7 @@ <h2 class="modal-h2">
                 <div class="btn-tooltip-grp">
                   {% if {{model.name}} %}
                   <a href="https://docs.meshery.io/project/contributing/contributing-models-quick-start">
-                    <button class="import" style="width: 9rem;">Quick Start</button></a>
+                    <button class="import-tertiary" style="width: 9rem;">Quick Start</button></a>
                   {% endif %}
                 </div>
               </div>
diff --git a/_layouts/single-page-model.html b/_layouts/single-page-model.html
index 751369fa49..c60a577b34 100644
--- a/_layouts/single-page-model.html
+++ b/_layouts/single-page-model.html
@@ -1,13 +1,13 @@
 ---
 layout: page
-pagination: 
-  enabled: true
-  collection: models
+pagination:
+enabled: true
+collection: models
 ---
 <div class="blog-post text-container">
 
   <div class="post-content">
-  
+
     <style>
       .modal-image {
         display: flex;
@@ -15,10 +15,12 @@
         align-items: center;
         justify-content: center;
       }
-      .modal-image > img {
+
+      .modal-image>img {
         width: 100%;
         object-fit: contain;
       }
+
       .metadata-row {
         display: flex;
         border-bottom: 1px solid #eee;
@@ -36,84 +38,86 @@
         flex-grow: 1;
         color: var(--color-secondary-dark);
       }
+
       .model-metadata-container {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
         margin: 1rem 0;
       }
+
       .model-details-container {
         margin-top: 3rem;
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
       }
+
       .model-details {
         margin-top: 1.5rem;
       }
+
       .model-details h3 {
         font-size: 1.2rem;
         font-weight: 600;
         margin-bottom: 1rem;
       }
+
       .model-details ul {
         list-style-type: disc;
         padding-left: 20px;
       }
+
       .padded-box {
         padding: 1.5rem;
         border-radius: 8px;
         margin-top: 1rem;
         background-color: var(--color-components-background);
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         transition: box-shadow 0.3s ease;
       }
 
       /* Import instructions section */
-	  .import-instructions {
-		background-color: var(--color-components-background);
-		border-left: 4px solid var(--color-brand, #00b39f);
-		padding: 1rem 1.25rem;
-		margin: 1.5rem 0;
-		border-radius: 4px;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-		transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-	  }
-
-	  .import-instructions h3 {
-		margin: 0 0 0.5rem 0;
-		font-size: 1.1rem;
-		color: var(--color-secondary-dark);
-	  }
-
-	  .import-instructions p {
-		margin: 0 0 0.75rem 0;
-		color: var(--color-secondary-dark);
-		line-height: 1.5;
-	  }
-
-	  .import-instructions a {
-		color: var(--color-brand, #00b39f);
-		font-weight: 600;
-		text-decoration: none;
-		transition: color 0.2s ease;
-	  }
-
-	  .import-instructions a:hover {
-		text-decoration: underline;
-		opacity: 0.85;
-	  }
+      .import-instructions {
+        background-color: var(--color-components-background);
+        border-left: 4px solid var(--color-brand, #00b39f);
+        padding: 1rem 1.25rem;
+        margin: 1.5rem 0;
+        border-radius: 4px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+      }
+
+      .import-instructions h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1.1rem;
+        color: var(--color-secondary-dark);
+      }
+
+      .import-instructions p {
+        margin: 0 0 0.75rem 0;
+        color: var(--color-secondary-dark);
+        line-height: 1.5;
+      }
+
+      .import-instructions a {
+        color: var(--color-brand, #00b39f);
+        font-weight: 600;
+        text-decoration: none;
+        transition: color 0.2s ease;
+      }
+
+      .import-instructions a:hover {
+        text-decoration: underline;
+        opacity: 0.85;
+      }
     </style>
 
     <!-- Model Image -->
     <div class="modal-content" style="margin-top:2rem;">
       <div class="modal-image" style="padding-top:0;">
-        <img class="image-class"  
-          data-snapshot-light="{{ page.colorIcon }}"
-          data-snapshot-dark="{{ page.whiteIcon }}"
-          src="{{ page.colorIcon }}"
-          onerror="this.src='/assets/images/meshery-color.svg'" 
-          loading="lazy" 
+        <img class="image-class" data-snapshot-light="{{ page.colorIcon }}" data-snapshot-dark="{{ page.whiteIcon }}"
+          src="{{ page.colorIcon }}" onerror="this.src='/assets/images/meshery-color.svg'" loading="lazy"
           onclick="toggleFullScreenImage('{{ page.colorIcon }}', 'model')" />
       </div>
 
@@ -148,8 +152,10 @@
         <!-- Import Instructions Section -->
         <div class="import-instructions">
           <h3>How to Import This Model</h3>
-          <p>Want to use this model in your Meshery instance? Learn how to import it using either the Meshery CLI or UI.</p>
-          <a href="https://docs.meshery.io/guides/configuration-management/importing-models" target="_blank" rel="noopener noreferrer">View Import Instructions →</a>
+          <p>Want to use this model in your Meshery instance? Learn how to import it using either the Meshery CLI or UI.
+          </p>
+          <a href="https://docs.meshery.io/guides/configuration-management/importing-models" target="_blank"
+            rel="noopener noreferrer">View Import Instructions →</a>
         </div>
 
         <!-- Documentation and Contribution Buttons -->
@@ -158,9 +164,9 @@ <h3>How to Import This Model</h3>
             <div class="vertical-center" id="{{type.name}}">
               <div class="btn-grp">
                 {% if page.docURL %}
-                  <a href="{{page.docURL}}">
-                    <button class="import" style="width: 7rem;">Visit Docs</button>
-                  </a>
+                <a href="{{page.docURL}}">
+                  <button class="import" style="width: 7rem;">Visit Docs</button>
+                </a>
                 {% endif %}
                 {% assign modelName = page.path | split: '/' | last | replace: '.md', '' %}
                 <a href="/assets/modelsFiles/{{ modelName }}.tar" download>
@@ -169,7 +175,7 @@ <h3>How to Import This Model</h3>
 
                 <div class="btn-tooltip-grp">
                   <a href="https://docs.meshery.io/project/contributing/contributing-models-quick-start">
-                    <button class="import" style="width: 12rem;">Add New Model</button>
+                    <button class="import-tertiary" style="width: 12rem;">Add New Model</button>
                   </a>
                 </div>
               </div>
@@ -183,9 +189,9 @@ <h3>How to Import This Model</h3>
     <!-- Scripts -->
     <script src="{{ site.baseurl }}/assets/js/catalog-modal.js"></script>
     <script src="{{ site.baseurl }}/assets/js/thumbnail-clickable.js"></script>
-  
+
   </div> <!-- End post-content -->
-  
+
   <div class="model-details-container">
     <!-- Features List -->
     {% if page.featureList and page.featureList.size > 0 %}
@@ -193,7 +199,7 @@ <h3>How to Import This Model</h3>
       <h3>Key Features</h3>
       <ul>
         {% for feature in page.featureList %}
-          <li>{{ feature }}</li>
+        <li>{{ feature }}</li>
         {% endfor %}
       </ul>
     </div>
@@ -205,13 +211,11 @@ <h3>Key Features</h3>
       <h3>Components</h3>
       <div style="display: flex; flex-wrap: wrap; gap: 1rem;justify-content: center;">
         {% for component in page.components %}
-          <div style="text-align: center; width: 150px;">
-            <img src="{{site.baseurl}}/{{ component.colorIcon }}" 
-                 onerror="this.src='/assets/images/meshery-color.svg'"
-                 style="width: 100px; height: 100px; object-fit: contain;" 
-                 loading="lazy" />
-            <p><strong>{{ component.name }}</strong></p>
-          </div>
+        <div style="text-align: center; width: 150px;">
+          <img src="{{site.baseurl}}/{{ component.colorIcon }}" onerror="this.src='/assets/images/meshery-color.svg'"
+            style="width: 100px; height: 100px; object-fit: contain;" loading="lazy" />
+          <p><strong>{{ component.name }}</strong></p>
+        </div>
         {% endfor %}
       </div>
     </div>
@@ -221,12 +225,12 @@ <h3>Components</h3>
     <div class="blog-navigation" style="margin-bottom: 2rem;">
       <div style="justify-content:space-between; display: flex; width:100%;">
         {% if page.previous.url %}
-          <a href="{% include relative-src.html src=page.previous.url %}">&laquo; {{ page.previous.name }}</a>
+        <a href="{% include relative-src.html src=page.previous.url %}">&laquo; {{ page.previous.name }}</a>
         {% endif %}
         {% if page.next.url %}
-          <a href="{% include relative-src.html src=page.next.url %}">{{ page.next.name }} &raquo;</a>
+        <a href="{% include relative-src.html src=page.next.url %}">{{ page.next.name }} &raquo;</a>
         {% endif %}
       </div>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/_sass/catalog.scss b/_sass/catalog.scss
index 2fa1894263..530725dbee 100644
--- a/_sass/catalog.scss
+++ b/_sass/catalog.scss
@@ -1,11 +1,13 @@
 @use "./variables.scss" as *;
+
 .catalog-heading {
   text-align: center;
-  font-weight:700;
+  font-weight: 700;
   margin: 2.5rem 0 1rem 0;
   word-spacing: 5px;
   font-size: 2.5rem;
 }
+
 .catalog-subheading {
   text-align: center;
   color: var(--color-secondary-dark);
@@ -13,15 +15,18 @@
   margin: 1rem auto;
   font-size: 2rem;
 }
+
 .catalog-subtext {
   text-align: center;
   color: var(--color-secondary-dark);
   font-size: 18px;
   font-weight: 400;
 }
+
 .tabcontent h3 {
   color: var(--color-secondary-dark);
 }
+
 /* CARD-STYLES */
 .card {
   position: relative;
@@ -81,6 +86,7 @@
   //   // background: rgba(182, 215, 168, 0.4);
   // }
 }
+
 .pattern-image-overlay {
   opacity: 0.2;
   width: 60%;
@@ -92,6 +98,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .card-overlay {
   position: relative;
   width: 220px;
@@ -103,6 +110,7 @@
   box-shadow: 2px 2px 6px 0px #00d3a9;
   margin-bottom: 20px;
 }
+
 .overlay-text {
   position: absolute;
   top: 40%;
@@ -113,6 +121,7 @@
   z-index: 2;
   white-space: wrap;
 }
+
 .pattern-id-overlay {
   position: absolute;
   bottom: 0.5rem;
@@ -121,6 +130,7 @@
   margin-right: 14px;
   opacity: 0.7;
 }
+
 .catalog {
   padding-top: 1rem;
   padding-bottom: 2rem;
@@ -136,10 +146,13 @@
     height: fit-content;
     padding-top: 1rem;
   }
-  #sort, #search {
+
+  #sort,
+  #search {
     background-color: transparent;
     color: var(--color-primary-qtext);
   }
+
   #sort:focus {
     background-color: var(--color-primary-light);
   }
@@ -158,20 +171,24 @@ p {
   -webkit-font-smoothing: antialiased;
   font-size: 1.1rem;
 }
+
 .inner-span {
   font-size: 16px;
   position: relative;
   color: black;
 }
+
 .column {
   display: none;
 }
+
 .column:has(.card) {
   // float: left;
   // padding: 0 10px;
   display: block;
   // margin: 0 1rem;
 }
+
 .smp-overlay {
   width: 16px;
   bottom: 0;
@@ -180,6 +197,7 @@ p {
   vertical-align: middle;
   padding-right: 1px;
 }
+
 .smp {
   width: 16px;
   bottom: 0;
@@ -189,13 +207,20 @@ p {
 }
 
 .import {
-  background-color: #00b39fff;
+  background-color: #E4A624; // PRIMARY: Saffron yellow
   color: white;
   border-radius: 4px;
   border: none;
   padding: 10px;
   cursor: pointer;
+  transition: 0.3s;
+
+  &:hover {
+    background-color: #c98d0f;
+    color: white;
+  }
 }
+
 .import-disabled {
   background-color: #aaa;
   color: white;
@@ -203,14 +228,37 @@ p {
   border: none;
   padding: 10px;
 }
+
 .import-secondary {
-  background-color: inherit;
-  border:1px solid #00b39f;
-  color: var(--color-primary-qtext);
+  background-color: #00b39f; // SECONDARY: Keppel green
+  color: white;
   border-radius: 4px;
+  border: none;
   cursor: pointer;
   padding: 10px;
+  transition: 0.3s;
+
+  &:hover {
+    background-color: #008a7a;
+    color: white;
+  }
 }
+
+.import-tertiary {
+  background-color: transparent; // TERTIARY: Transparent background
+  border: 1px solid #00b39f;
+  color: #00b39f;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 10px;
+  transition: 0.3s;
+
+  &:hover {
+    background-color: rgba(0, 179, 159, 0.1);
+    color: #00b39f;
+  }
+}
+
 .btn-tooltip-grp {
   display: flex;
   flex-direction: row;
@@ -221,6 +269,7 @@ p {
   // -ms-transform: translateY(-60%);
   // transform: translateY(25%) translateX(0%);
 }
+
 /* Clear floats after the columns */
 
 .disabled-label {
@@ -244,6 +293,7 @@ p {
   padding-right: 12px;
   color: var(--color-primary-light-tbase);
 }
+
 .chip {
   display: inline-flex;
   flex-direction: row-reverse;
@@ -268,34 +318,40 @@ p {
   justify-content: center;
   float: left;
 }
-  .chip.COLLABORATION {
-    background-color: var(--integrations-bg);
-    box-shadow: 0px 1px 2px var(--integrations-bg);
-    .pattern-type {
-      box-shadow: none;
-      background-color: none;
-      color: var(--color-secondary-medium);
-    }
-  }
-  .chip.LIFECYCLE {
-    background-color: var(--brand-color-tertiary);
-    box-shadow: 0px 1px 2px var(--brand-color-tertiary);
-    .pattern-type {
-      box-shadow: none;
-      background-color: none;
-      color: var(--color-secondary-medium);
-    }
-  }
-  .chip.GITOPS {
-    background-color: var(--action-color-dark);
-    box-shadow: 0px 1px 2px var(--action-color-dark);
-    color: var(--color-primary-dark);
+
+.chip.COLLABORATION {
+  background-color: var(--integrations-bg);
+  box-shadow: 0px 1px 2px var(--integrations-bg);
+
+  .pattern-type {
+    box-shadow: none;
+    background-color: none;
+    color: var(--color-secondary-medium);
   }
-  .chip.CONFIGURATION {
-    background-color: var(--color-grey-light);
-    box-shadow: 0px 1px 2px var(--action-color-light);
-    color: var(--color-primary-dark);
+}
+
+.chip.LIFECYCLE {
+  background-color: var(--brand-color-tertiary);
+  box-shadow: 0px 1px 2px var(--brand-color-tertiary);
+
+  .pattern-type {
+    box-shadow: none;
+    background-color: none;
+    color: var(--color-secondary-medium);
   }
+}
+
+.chip.GITOPS {
+  background-color: var(--action-color-dark);
+  box-shadow: 0px 1px 2px var(--action-color-dark);
+  color: var(--color-primary-dark);
+}
+
+.chip.CONFIGURATION {
+  background-color: var(--color-grey-light);
+  box-shadow: 0px 1px 2px var(--action-color-light);
+  color: var(--color-primary-dark);
+}
 
 .category-label {
   display: inline;
@@ -342,17 +398,21 @@ p {
   color: var(--color-secondary-light);
   // margin: 0 3px 3px 0;
 }
+
 .pattern-image-container {
   display: flex;
   justify-content: center;
 }
-.pattern-image, .model-image {
+
+.pattern-image,
+.model-image {
   aspect-ratio: 1;
   width: 60%;
   margin-top: 24px;
   object-fit: contain;
   position: absolute;
 }
+
 .patterns-coming-soon {
   max-width: 70%;
   position: relative;
@@ -366,6 +426,7 @@ p {
   -ms-transform: translateY(0%) translateX(-0%) rotate(10deg);
   -o-transform: translateY(0%) translateX(-0%) rotate(10deg);
 }
+
 .extensions-coming-soon {
   width: 50%;
   height: 50%;
@@ -379,7 +440,7 @@ p {
   -moz-transform: translateY(0%) translateX(-0%) rotate(-10deg);
   -ms-transform: translateY(0%) translateX(-0%) rotate(-10deg);
   -o-transform: translateY(0%) translateX(-0%) rotate(-10deg);
-  
+
 }
 
 .hidden {
@@ -389,19 +450,23 @@ p {
 .external-link {
   display: inline-block;
   width: 1rem;
+
   img {
     margin-bottom: 3px;
+
     &:hover {
       opacity: 0.7;
     }
   }
 }
+
 .internal-link {
   height: 1.25rem;
   margin-left: 0.5rem;
   margin-bottom: 4px;
   vertical-align: middle;
   filter: var(--image-filter-light);
+
   &:hover {
     opacity: 0.7;
   }
@@ -416,11 +481,14 @@ p {
   border-radius: 15px;
   // margin-top: 5rem;
   // backgroud:var(--background-grey);
-  height: fit-content; /* height needs to be increased with regarding to the total no. of patterns */
+  height: fit-content;
+
+  /* height needs to be increased with regarding to the total no. of patterns */
   .load-more {
     display: none;
   }
 }
+
 label {
   display: block;
   padding-left: 15px;
@@ -437,6 +505,7 @@ input {
   top: -1px;
   display: inline;
 }
+
 input[type="checkbox"] {
   margin: 0;
 }
@@ -454,11 +523,13 @@ input[type="checkbox"] {
   pointer-events: none;
   transition: all 0.3s;
 }
+
 .modal-section {
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
 }
+
 .modal-image {
   display: flex;
   flex-direction: column;
@@ -468,6 +539,7 @@ input[type="checkbox"] {
   padding: 2rem;
   min-height: fit-content;
   background: (var(--color-primary-light-dark));
+
   img {
     max-width: 80%;
     // margin-top: 25px;
@@ -487,6 +559,7 @@ input[type="checkbox"] {
 .modal-content {
   display: flex;
   flex-direction: row;
+
   code {
     padding: 1rem;
     border-radius: 0.5rem;
@@ -498,15 +571,18 @@ input[type="checkbox"] {
     display: block;
     // & p ul {
     text-align: left;
+
     // }
     a {
       color: white;
     }
   }
+
   p {
     color: var(--color-secondary-dark);
   }
 }
+
 .modal-h2 {
   color: var(--color-secondary-dark);
   font-size: 1.5rem;
@@ -534,7 +610,7 @@ input[type="checkbox"] {
   gap: 1rem;
 }
 
-.modal-window > div {
+.modal-window>div {
   position: absolute;
   display: flex;
   flex-direction: row;
@@ -546,23 +622,24 @@ input[type="checkbox"] {
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 15px;
-  background: linear-gradient(
-    45deg,
-    var(--color-primary-dark),
-    var(--color-primary-light)
-  );
+  background: linear-gradient(45deg,
+      var(--color-primary-dark),
+      var(--color-primary-light));
   // padding: 1.5rem 2.5rem 1.5rem 3rem;
 
   .modal-info {
     overflow-y: auto;
   }
 }
-.modal-window > div::-webkit-scrollbar {
+
+.modal-window>div::-webkit-scrollbar {
   display: none;
 }
+
 .modal-info::-webkit-scrollbar {
   display: none;
 }
+
 .catalog-info {
   text-align: center;
 }
@@ -581,6 +658,7 @@ input[type="checkbox"] {
   height: 50px;
   width: 50px;
 }
+
 .modal-close {
   display: flex;
   justify-content: space-between;
@@ -590,11 +668,13 @@ input[type="checkbox"] {
   display: flex;
   text-align: center;
   text-decoration: none;
+
   img {
     width: 1rem;
     vertical-align: middle;
   }
 }
+
 .modal-pattern-name {
   color: var(--color-secondary-dark);
   text-align: center;
@@ -605,6 +685,7 @@ input[type="checkbox"] {
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
 .modal-chip {
   display: inline-flex;
   flex-direction: row-reverse;
@@ -627,6 +708,7 @@ input[type="checkbox"] {
   top: 0px;
   right: 0px;
 }
+
 .modal-card {
   overflow: hidden;
   position: relative;
@@ -639,6 +721,7 @@ input[type="checkbox"] {
   transition: 0.4s ease-out;
   box-shadow: 2px 2px 6px 0px #00d3a9;
 }
+
 .modal-smp {
   width: 20px;
   bottom: 0;
@@ -646,12 +729,14 @@ input[type="checkbox"] {
   vertical-align: middle;
   padding-right: 2px;
 }
+
 .modal-pattern-image {
   width: 60%;
   object-fit: contain;
   position: absolute;
   margin-top: 16px;
 }
+
 .modal-pattern-id {
   color: var(--color-secondary-dark);
   position: absolute;
@@ -665,9 +750,11 @@ input[type="checkbox"] {
   padding: 20px 40px 40px;
   max-width: 600px;
 }
+
 .modal-text {
   display: inline;
 }
+
 .image-container {
   flex-basis: 70%;
 }
@@ -700,6 +787,7 @@ input[type="checkbox"] {
   padding: 0px;
   cursor: pointer;
 }
+
 .close:hover {
   color: #00d3a9 !important;
   opacity: 0.8 !important;
@@ -710,12 +798,14 @@ open-modal-btn {
   display: block;
   margin: 0 auto;
 }
+
 .btn-grp {
   margin-top: 1rem;
   display: flex;
   gap: 1.5rem;
   font-size: 1rem;
 }
+
 .tooltip-modal:hover {
   text-decoration: none;
 }
@@ -723,6 +813,7 @@ open-modal-btn {
 .catalog-details li span {
   font-size: 0.25rem;
 }
+
 .catalog-item-detail {
   color: var(--color-secondary-dark);
 }
@@ -743,6 +834,7 @@ open-modal-btn {
   padding-right: 2px;
   padding-bottom: 3px;
 }
+
 label {
   white-space: nowrap;
   color: var(--color-secondary-dark);
@@ -761,6 +853,7 @@ label {
   vertical-align: middle;
   padding-right: 2px;
 }
+
 // .modal-pattern-id {.
 //   position: absolute;
 //   bottom: 0;
@@ -776,9 +869,11 @@ label {
   padding: 20px 40px 40px;
   max-width: 600px;
 }
+
 .modal-text {
   display: inline;
 }
+
 .image-container {
   flex-basis: 70%;
 }
@@ -798,6 +893,7 @@ label {
   margin-left: 5%;
   border-radius: 15px;
 }
+
 .modal-card-overlay {
   position: relative;
   width: 150px;
@@ -809,6 +905,7 @@ label {
   box-shadow: $catalog_box_shadow_color;
   margin-bottom: 20px;
 }
+
 .modal-smp-overlay {
   width: 20px;
   bottom: 0;
@@ -817,6 +914,7 @@ label {
   vertical-align: middle;
   padding-right: 2px;
 }
+
 .modal-pattern-id-overlay {
   position: absolute;
   bottom: 0.5rem;
@@ -827,6 +925,7 @@ label {
   color: white;
   opacity: 0.7;
 }
+
 .modal-overlay-text {
   position: absolute;
   top: 40%;
@@ -849,12 +948,15 @@ label {
     margin-top: 3rem;
   }
 }
+
 .catalog-load-more {
   display: none;
 }
+
 .dropbtn {
   display: none;
 }
+
 .contentdata {
   margin: 0;
   padding: 0;
@@ -875,16 +977,22 @@ label {
 }
 
 .visible-content {
-  display: inline; /* Initially show the visible content */
+  display: inline;
+  /* Initially show the visible content */
 }
 
 .hidden-content {
-  display: none; /* Initially hide the hidden content */
-  max-height: none; /* Remove the max-height limit to allow it to expand */
-  opacity: 1; /* Set opacity to fully visible */
-  overflow: visible; /* Allow the content to be fully visible */
+  display: none;
+  /* Initially hide the hidden content */
+  max-height: none;
+  /* Remove the max-height limit to allow it to expand */
+  opacity: 1;
+  /* Set opacity to fully visible */
+  overflow: visible;
+  /* Allow the content to be fully visible */
   transition: max-height 0.5s, opacity 0.5s;
 }
+
 .hide-by-default {
   display: none;
 }
@@ -895,35 +1003,41 @@ label {
     height: 100%;
     align-items: center;
   }
+
   .btn-tooltip-grp {
     justify-content: center;
   }
 }
 
 @media screen and (max-width: 1150px) {
+
   // .modal-info {
   //   overflow-y: auto;
   // }
-  .modal-window > div {
+  .modal-window>div {
     height: 80%;
     overflow-y: initial;
     flex-direction: column;
     left: 50%;
     padding: 0 28px;
     text-align: center;
+
     .modal-info {
       padding-top: 0;
       overflow-y: initial;
     }
   }
+
   .modal-content {
     display: flex;
     flex-direction: column;
     align-items: center;
+
     code {
       margin: auto auto;
     }
   }
+
   .modal-smp {
     width: 20px;
     bottom: 0;
@@ -931,6 +1045,7 @@ label {
     vertical-align: middle;
     padding-right: 2px;
   }
+
   // .modal-pattern-id {
   //   position: absolute;
   //   bottom: 0;
@@ -943,9 +1058,11 @@ label {
     padding: 20px 40px 40px;
     max-width: 600px;
   }
+
   .modal-text {
     display: inline;
   }
+
   .image-container {
     flex-basis: 70%;
   }
@@ -959,6 +1076,7 @@ label {
     margin-left: 5%;
     border-radius: 15px;
   }
+
   .modal-card-overlay {
     position: relative;
     width: 150px;
@@ -970,6 +1088,7 @@ label {
     box-shadow: 2px 2px 6px 0px #00d3a9;
     margin-bottom: 20px;
   }
+
   .modal-smp-overlay {
     width: 20px;
     bottom: 0;
@@ -979,6 +1098,7 @@ label {
     padding-right: 2px;
     padding-bottom: 3px;
   }
+
   .modal-pattern-id-overlay {
     position: absolute;
     bottom: 0;
@@ -988,6 +1108,7 @@ label {
     color: white;
     opacity: 0.7;
   }
+
   .modal-overlay-text {
     position: absolute;
     top: 40%;
@@ -999,6 +1120,7 @@ label {
     z-index: 2;
     white-space: nowrap;
   }
+
   .close {
     display: flex;
     justify-content: space-between;
@@ -1011,6 +1133,7 @@ label {
     padding: 0px;
     cursor: pointer;
   }
+
   .catalog-info {
     text-align: center;
   }
@@ -1026,6 +1149,7 @@ label {
 
   .tooltip-modal {
     position: relative;
+
     & .tooltiptext-modal {
       position: absolute;
       top: 50%;
@@ -1034,9 +1158,11 @@ label {
       transition: all 0.5s;
     }
   }
+
   .related-patterns-img {
     display: none;
   }
+
   .hide-by-default {
     display: flex;
   }
@@ -1045,6 +1171,7 @@ label {
     width: 100%;
     // padding: 4px 32px;
   }
+
   .modal-image {
     padding-bottom: 0;
     padding-top: 2.5rem;
@@ -1060,6 +1187,7 @@ label {
       max-width: 30%;
     }
   }
+
   .modal-info {
     text-align: left;
   }
@@ -1070,11 +1198,13 @@ label {
     margin-top: 0;
   }
 }
+
 .viewall {
   display: flex;
   padding: 5px;
   margin: 5px;
 }
+
 .viewallbtn {
   cursor: pointer;
   border: none;
@@ -1086,8 +1216,9 @@ label {
   padding: 0.5rem;
   background: #00b39f;
 }
-.viewallbtn:hover{
-  color:#fff;
+
+.viewallbtn:hover {
+  color: #fff;
 }
 
 @media screen and (max-width: 650px) {
@@ -1095,32 +1226,39 @@ label {
     width: 100%;
     height: 100%;
   }
-  .modal-window > div {
+
+  .modal-window>div {
     overflow-y: initial;
+
     .modal-info {
       padding-top: 0;
       overflow-y: initial;
     }
   }
 }
+
 @media screen and (min-width: 770px) {
   .viewallbtn {
     position: relative;
   }
 }
+
 @media screen and (max-width: 770px) {
   .catalog-load-more {
     display: unset;
   }
+
   .dropbtn {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
   }
+
   .viewall {
     justify-content: center;
   }
+
   .catalog {
     .row {
       display: flex;
@@ -1137,6 +1275,7 @@ label {
     .column-lg:has(.card) {
       display: block;
     }
+
     .mobile_column_sm {
       display: unset;
     }
@@ -1150,30 +1289,38 @@ label {
     gap: 1rem;
     // padding-bottom: 3rem;
     margin-bottom: .15rem;
+
     .dropdown {
       align-self: center;
       margin-bottom: 7rem;
     }
+
     .category-div {
       padding-left: 15px;
     }
+
     .compatibility-div {
       margin-bottom: 3rem;
       margin-top: -1rem;
     }
+
     .category-div,
     .compatibility-div,
     .tech-div {
       display: grid;
+
       label {
         margin: 0;
       }
+
       column-gap: 2rem;
+
       .open-service-mesh {
         grid-row: 4/5;
         grid-column: 1/3;
       }
     }
+
     .category-para,
     .category-div,
     .compatibility-div,
@@ -1182,13 +1329,16 @@ label {
     .tech-para {
       display: none;
     }
+
     .load-more {
       display: block;
       align-self: center;
     }
   }
 }
+
 @media screen and (max-width: 770px) and (min-width: 450px) {
+
   .category-div,
   .compatibility-div,
   .tech-div {
@@ -1196,7 +1346,9 @@ label {
     grid-template-columns: 1fr 1fr;
   }
 }
+
 @media screen and (max-width: 450px) {
+
   .category-div,
   .compatibility-div,
   .tech-div {
@@ -1214,12 +1366,14 @@ label {
       max-width: 40%;
     }
   }
+
   .modal-h1,
   .related-patterns {
     display: none;
   }
+
   .btn-grp {
     // flex-direction: column;
     align-items: center;
   }
-}
+}
\ No newline at end of file