diff --git a/docs/javascripts/cookbooks-card.js b/docs/javascripts/cookbooks-card.js
index e12b7d15..167e78d0 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, name, desc, labels, version, theme, authors) {
+  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",
@@ -61,7 +61,7 @@ document.addEventListener("DOMContentLoaded", function () {
         <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="/notebooks/demo/">${name}</a>
+            <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>
@@ -101,6 +101,7 @@ 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');
@@ -113,6 +114,6 @@ document.addEventListener("DOMContentLoaded", function () {
       var theme = "light-default"
     }
 
-    setCard(el, name, desc, labels, version, theme, authors);
+    setCard(el, url, name, desc, labels, version, theme, authors);
   }
 })
diff --git a/docs/theme/cookbooks.html b/docs/theme/cookbooks.html
index 9747e1f1..13bb0bd6 100644
--- a/docs/theme/cookbooks.html
+++ b/docs/theme/cookbooks.html
@@ -11,9 +11,9 @@
       <h1>Supervision Cookbooks</h1>
     </div>
     <div class="grid">
-      <p class="card repo-card" data-name="Supervision Quickstart" data-desc="Supervision's Quickstart Notebook" data-labels="annotator,annotator,linezone" data-version="v0.18.0" data-author="onuralpszr,roboflow,SkalskiP"></p>
-      <p class="card repo-card" data-name="Yolov8" data-desc="Notebook desc" data-labels="annotator,yolov8" data-version="v0.18.0" data-author="onuralpszr"></p>
-      <p class="card repo-card" data-name="Segment Anything" data-desc="Notebook desc" data-labels="segmentation,sam" data-version="v0.18.0" data-author="onuralpszr"></p>
+      <p class="card repo-card" data-url="/notebooks/demo" data-name="Supervision Quickstart" data-desc="Supervision's Quickstart Notebook" data-labels="annotator,annotator,linezone" data-version="v0.18.0" data-author="onuralpszr,roboflow,SkalskiP"></p>
+      <p class="card repo-card" data-url="/notebooks/demo" data-name="Yolov8" data-desc="Notebook desc" data-labels="annotator,yolov8" data-version="v0.18.0" data-author="onuralpszr"></p>
+      <p class="card repo-card" data-url="/notebooks/demo" data-name="Segment Anything" data-desc="Notebook desc" data-labels="segmentation,sam" data-version="v0.18.0" data-author="onuralpszr"></p>
     </div>
   </div>
 </section>