diff --git a/content/projects/kernel.md b/content/projects/kernel.md
index 3083576..798e11a 100644
--- a/content/projects/kernel.md
+++ b/content/projects/kernel.md
@@ -6,4 +6,7 @@ date = 2024-08-08
 [taxonomies]
 tags = ["rust", "embedded", "risc-v"]
 +++
-https://github.com/ParkerTenBroeck/milkv-duos-rs
\ No newline at end of file
+https://github.com/ParkerTenBroeck/milkv-duos-rs
+
+
+{{ video(src="/videos/kernel/os_demo.mp4", controls=true, caption="meow")}}
\ No newline at end of file
diff --git a/content/projects/software-renderer.md b/content/projects/software-renderer.md
index a3a1286..18703e0 100644
--- a/content/projects/software-renderer.md
+++ b/content/projects/software-renderer.md
@@ -6,4 +6,11 @@ date = 2025-12-12
 [taxonomies]
 tags = ["C++", "graphics"]
 +++
-https://github.com/ParkerTenBroeck/3P93
\ No newline at end of file
+
+
+[GitHub](https://github.com/ParkerTenBroeck/3P93)
+
+
+{{ video(src="/videos/rasterizer/halo.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
+{{ video(src="/videos/rasterizer/bricks.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
+{{ video(src="/videos/rasterizer/wavy.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
\ No newline at end of file
diff --git a/sass/img.scss b/sass/lightbox.scss
similarity index 56%
rename from sass/img.scss
rename to sass/lightbox.scss
index b8881f9..ac64827 100644
--- a/sass/img.scss
+++ b/sass/lightbox.scss
@@ -1,19 +1,12 @@
-/* Prevent page scroll when lightbox is open */
 body.lb-open {
   overflow: hidden;
-  touch-action: none; /* disables background gestures */
+  touch-action: none; 
 }
 
-figure.image img.zoomable {
+figure .zoomable {
   cursor: pointer;
 }
 
-// figure.image img.zoomable:hover {
-//   transform: scale(1.02);
-// }
-
-
-/* Overlay */
 .lightbox {
   position: fixed;
   inset: 0;
@@ -26,18 +19,17 @@ figure.image img.zoomable {
 
 .lightbox.open {
   opacity: 1;
-  pointer-events: auto; /* blocks clicks/scroll to the page behind */
+  pointer-events: auto; 
 }
 
-/* Stage fills viewport; it’s the only interaction surface */
 .lightbox__stage {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden;         /* hide panned edges */
-  cursor: zoom-out;         /* click outside to close */
+  overflow: hidden;
+  cursor: w-resize;         
 }
 
 .lightbox__img {
@@ -45,12 +37,19 @@ figure.image img.zoomable {
   max-height: 95vh;
   user-select: none;
   -webkit-user-drag: none;
-  cursor: grab;
   transform-origin: 50% 50%;
   will-change: transform;
   touch-action: none;
 }
 
+.lightbox__img.is-zoomed {
+  cursor: zoom-out;
+}
+
+.lightbox__img.is-unzoomed {
+  cursor: zoom-in;
+}
+
 .lightbox__img.dragging {
   cursor: grabbing;
 }
\ No newline at end of file
diff --git a/sass/style.scss b/sass/style.scss
index 296d204..33f7725 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -3,7 +3,7 @@
 @use "footer.scss";
 @use "blog.scss";
 @use "fonts.scss";
-@use "img.scss";
+@use "lightbox.scss";
 
 .z-code{
     overflow-x: auto;
@@ -100,22 +100,26 @@ figure {
   flex-direction: column;
 }
 
-figure.image {
+figure {
   margin: 2rem 0;
   text-align: center;
 }
 
-@media screen and (min-width: 978px) {
-  
-}
-
-figure.image img {
-  max-width: 80%;
+figure * {
+  max-width: 100%;
   height: auto;
   border-radius: 6px;
 }
 
-figure.image figcaption {
+@media screen and (min-width: 700px) {
+  figure * {
+    max-width: 80%;
+    height: auto;
+    border-radius: 6px;
+  }
+}
+
+figure figcaption {
   max-width: 80%;
   margin-top: 0.5rem;
   font-size: 0.9rem;
diff --git a/static/js/script.js b/static/js/script.js
index 33aab95..275d60a 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -61,6 +61,8 @@
     function applyTransform() {
         clampPan();
         img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+        img.classList.toggle("is-zoomed", scale > 1);
+        img.classList.toggle("is-unzoomed", scale === 1);
     }
 
     function resetView() {
diff --git a/static/videos/os_demo.mp4 b/static/videos/kernel/os_demo.mp4
similarity index 100%
rename from static/videos/os_demo.mp4
rename to static/videos/kernel/os_demo.mp4
diff --git a/static/videos/rasterizer/bricks.mp4 b/static/videos/rasterizer/bricks.mp4
new file mode 100644
index 0000000..4d379ce
Binary files /dev/null and b/static/videos/rasterizer/bricks.mp4 differ
diff --git a/static/videos/rasterizer/halo.mp4 b/static/videos/rasterizer/halo.mp4
new file mode 100644
index 0000000..405b265
Binary files /dev/null and b/static/videos/rasterizer/halo.mp4 differ
diff --git a/static/videos/rasterizer/wavy.mp4 b/static/videos/rasterizer/wavy.mp4
new file mode 100644
index 0000000..85371dc
Binary files /dev/null and b/static/videos/rasterizer/wavy.mp4 differ
diff --git a/templates/base.html b/templates/base.html
index c001829..43345aa 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -139,10 +139,10 @@
         </footer>
     </div>
 
-    <div id="lightbox" class="lightbox" aria-hidden="true" role="dialog" aria-label="Image viewer">
-    <div class="lightbox__stage">
-        <img id="lightbox-img" class="lightbox__img" alt="">
-    </div>
+    <div id="lightbox" class="lightbox" aria-hidden="true" role="dialog" aria-label="Media viewer">
+        <div class="lightbox__stage" id="lightbox-stage">
+            <img id="lightbox-img" class="lightbox__img" alt="">
+        </div>
     </div>
 </body>
 <script src="{{ get_url(path='/js/script.js') }}"></script>
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
index 0fe4cd6..770b2c2 100644
--- a/templates/shortcodes/image.html
+++ b/templates/shortcodes/image.html
@@ -1,5 +1,5 @@
-<figure class="image {% if class %} {{ class }} {% endif %}">
-  <img src="{{ get_url(path=src) }}" loading="lazy" decoding="async" class="zoomable" data-full="{{ get_url(path=src) }}">
+<figure class="{% if class %} {{ class }} {% endif %}">
+  <img src="{{ get_url(path=src) }}" loading="lazy" decoding="async" class="zoomable">
   {% if caption != "" %}
     <figcaption>{{ caption }}</figcaption>
   {% endif %}
diff --git a/templates/shortcodes/video.html b/templates/shortcodes/video.html
new file mode 100644
index 0000000..bf09071
--- /dev/null
+++ b/templates/shortcodes/video.html
@@ -0,0 +1,17 @@
+<figure class="{% if class %} {{ class }} {% endif %}">
+  <video
+      {% if poster %} poster="{{ poster }}"{% endif %}
+      {% if loop | default(value=false) %} loop {% endif %}
+      {% if controls  | default(value=true) %} controls {% endif %}
+      preload="metadata"
+      muted
+      {% if autoplay | default(value=false) %} autoplay {% endif %}
+      playsinline
+    >
+      <source src="{{ get_url(path=src) }}">
+    </video>
+    {% if caption != "" %}
+      <figcaption>{{ caption }}</figcaption>
+  {% endif %}
+</figure>
+