diff --git a/public/img/DeArrow.svg b/public/img/DeArrow.svg
new file mode 100644
index 0000000000..d2d351d263
--- /dev/null
+++ b/public/img/DeArrow.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg
+   width="800px"
+   height="800px"
+   viewBox="0 0 36 36"
+   aria-hidden="true"
+   role="img"
+   class="iconify iconify--twemoji"
+   preserveAspectRatio="xMidYMid meet"
+   version="1.1"
+   id="svg10"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.65479573"
+     inkscape:cx="493.2836"
+     inkscape:cy="514.66432"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="435"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     fill="#1213BD"
+     d="M36 18.302c0 4.981-2.46 9.198-5.655 12.462s-7.323 5.152-12.199 5.152s-9.764-1.112-12.959-4.376S0 23.283 0 18.302s2.574-9.38 5.769-12.644S13.271 0 18.146 0s9.394 2.178 12.589 5.442C33.931 8.706 36 13.322 36 18.302z"
+     id="path2" />
+  <path
+     fill="#ffffff"
+     d="m 30.394282,18.410186 c 0,3.468849 -1.143025,6.865475 -3.416513,9.137917 -2.273489,2.272442 -5.670115,2.92874 -9.137918,2.92874 -3.467803,0 -6.373515,-1.147212 -8.6470033,-3.419654 -2.2734888,-2.272442 -3.5871299,-5.178154 -3.5871299,-8.647003 0,-3.46885 0.9420533,-6.746149 3.2144954,-9.0196379 2.2724418,-2.2734888 5.5507878,-3.9513905 9.0196378,-3.9513905 3.46885,0 6.492841,1.9322561 8.76633,4.204698 2.273489,2.2724424 3.788101,5.2974804 3.788101,8.7663304 z"
+     id="path4"
+     style="fill:#88c9f9;fill-opacity:1;stroke-width:1.04673" />
+  <path
+     fill="#292f33"
+     d="m 23.95823,17.818306 c 0,3.153748 -2.644888,5.808102 -5.798635,5.808102 -3.153748,0 -5.599825,-2.654354 -5.599825,-5.808102 0,-3.153747 2.446077,-5.721714 5.599825,-5.721714 3.153747,0 5.798635,2.567967 5.798635,5.721714 z"
+     id="path8"
+     style="stroke-width:1.18339;fill:#0a62a5;fill-opacity:1" />
+</svg>
diff --git a/src/App.vue b/src/App.vue
index e3319c1d1d..390022dd71 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -312,4 +312,8 @@ h2 {
 .thumbnail-left {
     @apply bottom-5px left-5px text-xs font-bold bg-red-600 uppercase;
 }
+
+.thumbnail-top-right {
+    @apply top-5px right-5px;
+}
 </style>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 19d76a7d0a..a414cd54d3 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -14,13 +14,20 @@
         >
             <VideoThumbnail :item="item" />
 
-            <div>
+            <div class="flex justify-between">
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
                     class="link flex overflow-hidden pt-2 font-bold"
                     :title="title"
                     v-text="title"
                 />
+                <img
+                    v-if="typeof item.dearrow?.titles[0]?.title !== 'undefined'"
+                    src="/img/DeArrow.svg"
+                    :title="item.title"
+                    class="m-2 box-content aspect-square hover:grayscale"
+                    :style="{ height: '1lh' }"
+                />
             </div>
         </router-link>
 
diff --git a/src/components/VideoThumbnail.vue b/src/components/VideoThumbnail.vue
index 6341da6d69..687fed7cad 100644
--- a/src/components/VideoThumbnail.vue
+++ b/src/components/VideoThumbnail.vue
@@ -1,12 +1,28 @@
 <template>
-    <div class="w-full">
-        <img
-            loading="lazy"
-            class="aspect-video w-full rounded-md object-contain"
-            :src="item.thumbnail"
-            :alt="item.title"
-            :class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
-        />
+    <div class="video-thumbnail w-full">
+        <div class="relative">
+            <img
+                loading="lazy"
+                class="actual-thumbnail aspect-video w-full rounded-md object-contain"
+                :src="thumbnail"
+                :alt="title"
+                :class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
+            />
+            <img
+                v-if="typeof item.dearrow?.thumbnails[0]?.thumbnail !== 'undefined'"
+                loading="lazy"
+                class="original-thumbnail aspect-video w-full rounded-md object-contain"
+                :src="item.thumbnail"
+                :alt="item.title"
+                :class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
+            />
+            <img
+                v-if="typeof item.dearrow?.thumbnails[0]?.thumbnail !== 'undefined'"
+                src="/img/DeArrow.svg"
+                class="dearrow-thumbnail thumbnail-overlay thumbnail-top-right box-content aspect-square bg-transparent hover:grayscale"
+                :style="{ height: '1lh' }"
+            />
+        </div>
         <!-- progress bar -->
         <div class="relative h-1 w-full">
             <div
@@ -58,8 +74,22 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .shorts-img {
     @apply w-full object-contain;
 }
+
+.original-thumbnail {
+    display: none;
+}
+
+.video-thumbnail:has(.dearrow-thumbnail:hover):has(.original-thumbnail) {
+    .actual-thumbnail {
+        display: none;
+    }
+
+    .original-thumbnail {
+        display: initial;
+    }
+}
 </style>