diff --git a/docs/examples/examples.yml b/docs/examples/examples.yml
index 510f5238..b0acb016 100644
--- a/docs/examples/examples.yml
+++ b/docs/examples/examples.yml
@@ -1,9 +1,13 @@
 - title: Your Unstoppable Copy Machine
   author: Clockwork
   description: Clockwork is a YouTube channel about some of the really nitty-gritty biochemistry with great visuals and writing. They recently started posting videos again, having made the jump from 2D animations in After Effects to 3D animations inside of Blender using Molecular Nodes.
-  path: https://www.youtube.com/lv89fSt5jBY
+  path: https://www.youtube.com/watch?v=lv89fSt5jBY
   image: https://img.youtube.com/vi/lv89fSt5jBY/0.jpg
 
+- title: Test Nodes
+  description: Some test node info to display
+  video: https://imgur.com/eRDo2As
+
 - title: Where the Light Touches Your Eyes
   author: Clockwork
   description: 👀 Your visual system is astounding down at the molecular level-because the photoreceptor cells in your retina maintain an incredible balance of proteins that allows for an incredible visual range. Let’s meet rhodopsin, the molecular worker at the core of your visual system. We’ll discover how light physically touches and changes you every time you perceive just about anything.
@@ -24,8 +28,8 @@
 - title: Knot Theory
   author: Veritasium
   description: A popular YouTube science channel, discussing DNA topoisomerases.
-  path: https://www.youtube.com/embed/8DBhTXM_Br4?si=1nGRkAwJk6LJJQhy&start=1650
-  image: https://imgur.com/OuiWEJu.png
+  path: https://www.youtube.com/watch?v=8DBhTXM_Br4
+  image: https://img.youtube.com/vi/8DBhTXM_Br4/0.jpg
   
 - title: St Jude Children's Hospital
   description: An animation from St Jude Children's Hospital, created by Zhaowen Luo. It was shown at the Association of Medical Illustrators annual conference in 2023, and won the category for Individual Professional Motion and Interactive Media.
@@ -34,5 +38,10 @@
 
 - title: Nano Rooms
   description: Nano rooms is a YouTube channel explaining the beautilful mathematical underpinnings of biology, and many of their animations of protein structures are using Molecular Nodes and Blender.
-  path: https://www.youtube.com/embed/elRbbdJUiTU?si=7_17weJxhCVQGl3W
+  path: https://www.youtube.com/watch?v=elRbbdJUiTU
   image: https://img.youtube.com/vi/elRbbdJUiTU/0.jpg
+
+- title: Example Animation
+  description: An example animation that I made
+  video: images/6e10_spin_squishy.mp4
+
diff --git a/docs/examples/images/6e10_spin_squishy.mp4 b/docs/examples/images/6e10_spin_squishy.mp4
new file mode 100644
index 00000000..64ffd2ef
Binary files /dev/null and b/docs/examples/images/6e10_spin_squishy.mp4 differ
diff --git a/docs/examples/index.qmd b/docs/examples/index.qmd
index 461fb5ab..aeaee566 100644
--- a/docs/examples/index.qmd
+++ b/docs/examples/index.qmd
@@ -1,13 +1,21 @@
 ---
 title: Examples
 listing: 
+    id: listing-examples
     contents: examples.yml
     type: grid
     sort: date desc
     sort-ui: false
-    grid-columns: 4
+    grid-columns: 2
     filter-ui: true
+    template: template.ejs
+    
+# css: styles.css
+
 
 ---
 
-Some examples of projects that have used Molecular Nodes in their production.
\ No newline at end of file
+Some examples of projects that have used Molecular Nodes in their production.
+
+::: {#listing-examples}
+:::
\ No newline at end of file
diff --git a/docs/examples/styles.css b/docs/examples/styles.css
new file mode 100644
index 00000000..74d83315
--- /dev/null
+++ b/docs/examples/styles.css
@@ -0,0 +1,81 @@
+<style>
+  .grid-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    max-width: 100%;
+  }
+
+  @media (min-width: 992px) {
+    .grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .grid-item {
+    break-inside: avoid;
+    margin-bottom: 20px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .grid-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .media-wrapper {
+    margin-bottom: 15px;
+  }
+
+  .media-wrapper img,
+  .media-wrapper video {
+    width: 100%;
+    /* height: 100px; */
+    object-fit: cover;
+    border-radius: 8px 8px 0 0;
+  }
+
+  .card-title {
+    margin: 0 0 10px 0;
+    font-size: 1.25rem;
+    color: #333;
+  }
+
+  .quarto-grid-link {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .listing-description {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: #666;
+    margin-bottom: 15px;
+  }
+
+  .card-attribution {
+    font-size: 0.85rem;
+    color: #777;
+  }
+
+  .card-footer {
+    border-top: 1px solid #eee;
+    padding-top: 10px;
+    margin-top: auto;
+    font-size: 0.85rem;
+    color: #888;
+  }
+
+  .no-external {
+    text-decoration: none;
+    color: inherit;
+  }
+</style>
\ No newline at end of file
diff --git a/docs/examples/template.ejs b/docs/examples/template.ejs
new file mode 100644
index 00000000..02b6f7da
--- /dev/null
+++ b/docs/examples/template.ejs
@@ -0,0 +1,60 @@
+:::: {.grid .text-center .list}
+
+<% for (const item of items) { %>
+
+:::: {.quarto-grid-item .card .h-100 .w-100 .card-center .hovercard-extension}
+
+:::: {.card-body .post-contents}
+
+
+[
+`<h5 class="no-anchor card-title listing-title">`{=html}
+  <%= item.title %>
+  `</h5>`{=html}
+](<%- item.path %>){.quarto-grid-link}
+
+
+
+<% if (item.video && item.video.endsWith(".mp4")) { %>
+:::: {.media-wrapper}
+<video controls muted loop autoplay>
+  <source src="<%= item.video %>" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+:::
+<% } else if (item.video) { %>
+:::: {.media-wrapper}
+  <video controls muted loop autoplay>
+    <source src="<%= item.video %>.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+  </video>
+:::
+<% } else if (item.image) { %>
+[![](<%= item.image %>){.media-wrapper}](<%= item.path %>)
+<% } %>
+
+:::: {.card-text .listing-description}
+<%= item.description %>
+:::
+
+:::: {.card-attribution .card-text-small .justify}
+:::: {.listing-author}
+[<%= item.author %>](<%= item.path %>){.no-external}
+:::
+:::
+
+
+
+:::: {.card-footer}
+:::: {.listing-file-modified}
+***Updated**: <%= item['file-modified'] %>*
+:::
+:::
+
+:::
+
+:::
+
+<% } %>
+
+:::
\ No newline at end of file