diff --git a/docs/javascripts/cookbooks-card.js b/docs/javascripts/cookbooks-card.js
index dd36eacb..d2447324 100644
--- a/docs/javascripts/cookbooks-card.js
+++ b/docs/javascripts/cookbooks-card.js
@@ -1,7 +1,7 @@
 
 document.addEventListener("DOMContentLoaded", function () {
 
-  async function setCard(el, url, name, desc, labels, version, theme, authors) {
+  async function setCard(el, url, name, labels, version, theme, authors) {
     const colorList = [
       "#22c55e",
       "#14b8a6",
@@ -28,34 +28,32 @@ document.addEventListener("DOMContentLoaded", function () {
       return await response.json();
     }));
 
-    let authorHTML = '';
-    authorDataArray.forEach((authorData, index) => {
-      const marginLeft = index === 0 ? '0' : '-15px';
-      authorHTML += `
-          <div class="author-container" style="display: inline-block; margin-left: ${marginLeft}; position: relative;">
-          <a href="https://github.com/${authorData.login}" target="_blank">
-            <img src="${authorData.avatar_url}" width="32" height="32" style="border-radius: 50%;" />
-          </a>
-            <div class="tooltip" style="visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; width: 120px;">
-            ${authorData.login}
-          </div>
-          </div>
+    let authorAvatarsHTML = authorDataArray.map((authorData, index) => {
+        const marginLeft = index === 0 ? '0' : '-10px';
+        const zIndex = 100 - index;
+        return `
+            <div class="author-container" style="margin-left: ${marginLeft}; z-index: ${zIndex};">
+                <a href="https://github.com/${authorData.login}" target="_blank" style="line-height: 0;">
+                    <img class="author-avatar" src="${authorData.avatar_url}" alt="${authorData.login}'s avatar">
+                </a>
+            </div>
         `;
-    });
-
-    document.querySelectorAll('.author-container').forEach((container) => {
-      const tooltip = container.querySelector('.tooltip');
-      container.addEventListener('mouseover', () => {
-        tooltip.style.visibility = 'visible';
-        tooltip.style.opacity = '1';
-      });
-      container.addEventListener('mouseout', () => {
-        tooltip.style.visibility = 'hidden';
-        tooltip.style.opacity = '0';
-      });
-    });
+    }).join('');
 
+    let authorNamesHTML = authorDataArray.map(
+        authorData => `<span class="author-name" style="color: ${theme.color}">
+            <a href="https://github.com/${authorData.login}" target="_blank">
+                ${authorData.login}
+            </a>
+        </span>`
+    ).join(',&nbsp;');
 
+    let authorsHTML = `
+        <div class="authors">
+            ${authorAvatarsHTML}
+            <div class="author-names">${authorNamesHTML}</div>
+        </div>
+    `;
 
     el.innerText = `
       <a style="text-decoration: none; color: inherit;" href="${url}">
@@ -66,12 +64,7 @@ document.addEventListener("DOMContentLoaded", function () {
               ${name}
             </span>
           </div>
-          <div style="font-size: 12px; margin-top: 0.5rem; color: ${theme.color}; flex: 1;">
-            ${desc}
-          </div>
-          <div style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 1rem; margin-top: 1rem">
-              ${authorHTML}
-          </div>
+          ${authorsHTML}
           <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" />
@@ -92,7 +85,6 @@ document.addEventListener("DOMContentLoaded", function () {
   for (const el of document.querySelectorAll('.repo-card')) {
     const url = el.getAttribute('data-url');
     const name = el.getAttribute('data-name');
-    const desc = el.getAttribute('data-desc');
     const labels = el.getAttribute('data-labels');
     const version = el.getAttribute('data-version');
     const authors = el.getAttribute('data-author');
@@ -103,6 +95,6 @@ document.addEventListener("DOMContentLoaded", function () {
       var theme = "light-default"
     }
 
-    setCard(el, url, name, desc, labels, version, theme, authors);
+    setCard(el, url, name, labels, version, theme, authors);
   }
 })
diff --git a/docs/stylesheets/cookbooks-card.css b/docs/stylesheets/cookbooks-card.css
index d6e45fdd..f794f498 100644
--- a/docs/stylesheets/cookbooks-card.css
+++ b/docs/stylesheets/cookbooks-card.css
@@ -31,20 +31,61 @@
     transform: translateY(-0.125rem); /* Move up by -0.125rem on hover */
 }
 
-.portfolio-section {
-    padding-bottom: 1rem;
+.authors {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
 }
 
-.md-typeset h1 {
-    margin: 0 0 0.75rem;
+.author-names {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    margin-left: 0.5rem;
 }
 
-.author-name {
-  opacity: 0;
+.author-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    margin: 0;
+    transition: transform 0.2s;
 }
 
-div:hover .author-name {
-  opacity: 1;
+.author-container:hover {
+    transform: translateY(-0.125rem);
+}
+
+.author-container a {
+    padding: 0;
+    margin: 0;
+    display: block;
+}
+
+.author-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: block;
+}
+
+.author-name a {
+    color: inherit; /* Inherits the color from the parent element */
+    text-decoration: none; /* Removes the underline */
+}
+
+.author-name a:hover {
+    color: inherit; /* Inherits the color from the parent element */
+    text-decoration: underline; /* Adds underline on hover */
 }
 
 .non-selectable-text {
diff --git a/docs/theme/cookbooks.html b/docs/theme/cookbooks.html
index a76c20d4..0446c5d2 100644
--- a/docs/theme/cookbooks.html
+++ b/docs/theme/cookbooks.html
@@ -11,7 +11,8 @@
       <h1>Supervision Cookbooks</h1>
     </div>
     <div class="custom-grid">
-      <p class="card repo-card" data-url="/develop/notebooks/quickstart" data-name="Supervision Quickstart" data-desc="Quickstart to Supervision" data-labels="ANNOTATORS,DETECTIONS,SAM" data-version="v0.18.0" data-author="SkalskiP,onuralpszr"></p>
+      <p class="card repo-card" data-url="/develop/notebooks/quickstart" data-name="Supervision Quickstart" data-labels="ANNOTATORS,DETECTIONS,SAM" data-version="v0.18.0" data-author="SkalskiP,onuralpszr,roboflow"></p>
+      <p class="card repo-card" data-url="/develop/notebooks/quickstart" data-name="Supervision Quickstart" data-labels="ANNOTATORS,DETECTIONS,SAM" data-version="v0.18.0" data-author="SkalskiP,onuralpszr,roboflow"></p>
     </div>
   </div>
 </section>