diff --git a/src/components/marquee/Marquee.astro b/src/components/marquee/Marquee.astro
index 73d8ba2..7ba13b6 100644
--- a/src/components/marquee/Marquee.astro
+++ b/src/components/marquee/Marquee.astro
@@ -31,7 +31,9 @@ const ph = placeholders();
   </div>
   <div id="marquee-content" class="marquee-content" data-scroll="0">
     {ph.map(item => <div class="marquee-item">
-      <div class="marquee-item-spacing marquee-item-content">{item}</div>
+      <video class="marquee-item-spacing marquee-item-content" controls>
+        <source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
+      </video>
     </div>)}
   </div>
 </div>
diff --git a/src/styles/main-page.css b/src/styles/main-page.css
index 2318fd1..52bfbd5 100644
--- a/src/styles/main-page.css
+++ b/src/styles/main-page.css
@@ -91,12 +91,6 @@
   aspect-ratio: 16 / 9;
 }
 
-.marquee-item-content {
-  border: 1px solid red;
-  border-radius: 8px;
-  background-color: gray;
-}
-
 .marquee-scroll {
   position: absolute;
   width: 100%;
@@ -108,12 +102,14 @@
   z-index: 10;
   user-select: none;
   align-items: stretch;
+  pointer-events: none;
 }
 
 .marquee-scroll-arrow {
   flex-grow: 1;
   max-width: 8rem;
   font-size: 2rem;
+  pointer-events: all;
 }
 
 .marquee-scroll-arrow > div {