diff --git a/docs/javascripts/cookbooks-card.js b/docs/javascripts/cookbooks-card.js
index 654169af..dd36eacb 100644
--- a/docs/javascripts/cookbooks-card.js
+++ b/docs/javascripts/cookbooks-card.js
@@ -3,16 +3,20 @@ document.addEventListener("DOMContentLoaded", function () {
 
   async function setCard(el, url, name, desc, labels, version, theme, authors) {
     const colorList = [
-      "A351FB", "FF4040", "FFA1A0", "FF7633", "FFB633", "D1D435", "4CFB12",
-      "94CF1A", "40DE8A", "1B9640", "00D6C1", "2E9CAA", "00C4FF", "364797",
-      "6675FF", "0019EF", "863AFF", "530087", "CD3AFF", "FF97CA", "FF39C9"
+      "#22c55e",
+      "#14b8a6",
+      "#ef4444",
+      "#eab308",
+      "#8b5cf6",
+      "#f97316",
+      "#3b82f6",
     ]
 
     let labelHTML = ''
     if (labels) {
       const labelArray = labels.split(',').map((label, index) => {
         const color = colorList[index % colorList.length]
-        return `<span style="background-color: #${color}; color: #fff; padding: 2px 6px; border-radius: 12px; margin-right: 4px;">${label}</span>`
+        return `<span class="non-selectable-text" style="background-color: ${color}; color: #fff; padding: 2px 4px; border-radius: 4px; margin-right: 4px;">${label}</span>`
       })
 
       labelHTML = labelArray.join(' ')
@@ -54,30 +58,32 @@ document.addEventListener("DOMContentLoaded", function () {
 
 
     el.innerText = `
-      <div style="flex-direction: column; height: 100%; display: flex;
-      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; background: ${theme.background}; font-size: 14px; line-height: 1.5; color: ${theme.color}">
-        <div style="display: flex; align-items: center;">
-          <i class="fa-solid:book-open" style="color: ${theme.color}; margin-right: 8px;"></i>
-          <span style="font-weight: 600; color: ${theme.linkColor};">
-            <a style="text-decoration: none; color: inherit;" href="${url}">${name}</a>
-          </span>
-        </div>
-        <div style="font-size: 12px; margin-bottom: 10px; margin-top: 8px; color: ${theme.color}; flex: 1;">${desc}</div>
-        <div style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 8px;">
-            ${authorHTML}
-        </div>
-        <div style="font-size: 12px; color: ${theme.color}; display: flex; flex: 0;">
-          <div style="display: 'flex'; align-items: center; margin-right: 16px;">
+      <a style="text-decoration: none; color: inherit;" href="${url}">
+        <div style="flex-direction: column; height: 100%; display: flex;
+        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; background: ${theme.background}; font-size: 14px; line-height: 1.5; color: ${theme.color}">
+          <div style="display: flex; align-items: center;">
+            <span style="font-weight: 700; font-size: 1rem; color: ${theme.linkColor};">
+              ${name}
+            </span>
           </div>
-          <div style="display: 'flex'; align-items: center; margin-right: 16px;">
-            <img src="/assets/supervision-lenny.png" aria-label="stars" width="16" height="16" role="img" />
-            &nbsp; <span>${version}</span>
+          <div style="font-size: 12px; margin-top: 0.5rem; color: ${theme.color}; flex: 1;">
+            ${desc}
           </div>
-          <div style="display: 'flex'}; align-items: center;">
-            &nbsp; <span>${labelHTML}</span>
+          <div style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 1rem; margin-top: 1rem">
+              ${authorHTML}
+          </div>
+          <div style="font-size: 12px; color: ${theme.color}; display: flex; flex: 0; justify-content: space-between">
+            <div style="display: flex; align-items: center;">
+              <img src="/assets/supervision-lenny.png" aria-label="stars" width="20" height="20" role="img" />
+              &nbsp;
+              <span style="margin-left: 4px">${version}</span>
+            </div>
+            <div style="display: flex; align-items: center;">
+              ${labelHTML}
+            </div>
           </div>
         </div>
-      </div>
+      </a>
         `
 
     let sanitizedHTML = DOMPurify.sanitize(el.innerText);
diff --git a/docs/stylesheets/cookbooks-card.css b/docs/stylesheets/cookbooks-card.css
index 7d58d030..d6e45fdd 100644
--- a/docs/stylesheets/cookbooks-card.css
+++ b/docs/stylesheets/cookbooks-card.css
@@ -1,5 +1,34 @@
+.custom-grid {
+    display: grid;
+    grid-gap: 1rem;
+    /* Start with a single column layout */
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+/* Medium screens (640px and up) */
+@media (min-width: 640px) {
+    .custom-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+/* Large screens (1024px and up) */
+@media (min-width: 1024px) {
+    .custom-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
 .repo-card {
-    min-height: 130px;
+    background: radial-gradient(at right top, #A351FB25, #A5F9EA25);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    transition: transform 0.2s ease-in-out; /* Smooth transition for the transform */
+    cursor: pointer;
+}
+
+.repo-card:hover {
+    transform: translateY(-0.125rem); /* Move up by -0.125rem on hover */
 }
 
 .portfolio-section {
@@ -17,3 +46,10 @@
 div:hover .author-name {
   opacity: 1;
 }
+
+.non-selectable-text {
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera, and Edge */
+}