diff --git a/NUXT/components/CompactRenderers/compactVideoRenderer.vue b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
index 00b6f2c..c95de80 100644
--- a/NUXT/components/CompactRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
@@ -1,136 +1,39 @@
 <template>
-  <v-card
-    class="entry gridVideoRenderer background"
-    :to="`/watch?v=${video.videoId}`"
-    flat
+  <base-video-renderer
+    :vidId="video.videoId"
+    :thumbnails="video.thumbnail.thumbnails"
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
+    :channelUrl="
+      this.$rendererUtils.getNavigationEndpoints(video.shortBylineText.runs[0])
+    "
+    :channelIcon="video.channelThumbnail.thumbnails[0].url"
+    :titles="video.title.runs"
+    :bottomText="parseBottom(video)"
   >
-    <div style="position: relative" class="thumbnail-container">
-      <v-img
-        :aspect-ratio="16 / 9"
-        :src="
-          $youtube.getThumbnail(
-            video.videoId,
-            'max',
-            video.thumbnail.thumbnails
-          )
-        "
-      />
-      <div
-        class="videoRuntimeFloat"
-        :class="
-          'style-' +
-          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.style
-        "
-        style="color: #fff"
-        v-text="
-          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text
-            .runs[0].text
-        "
-      />
-    </div>
-    <div id="details">
-      <a
-        :href="
-          this.$rendererUtils.getNavigationEndpoints(
-            video.shortBylineText.runs[0]
-          )
-        "
-        class="avatar-link pt-2"
-      >
-        <v-img
-          class="avatar-thumbnail"
-          :src="video.channelThumbnail.thumbnails[0].url"
-        />
-      </a>
-      <v-card-text class="video-info pt-2" v-emoji>
-        <div
-          v-for="title in video.title.runs"
-          :key="title.text"
-          style="margin-top: 0.5em"
-          class="font-weight-medium vid-title"
-        >
-          {{ title.text }}
-        </div>
-
-        <div
-          class="background--text caption"
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          v-text="parseBottom(video)"
-        />
-      </v-card-text>
-    </div>
-  </v-card>
+  </base-video-renderer>
 </template>
 
-<style scoped>
-.entry {
-  width: 100%; /* Prevent Loading Weirdness */
-}
-.videoRuntimeFloat {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  border-radius: 5px;
-  padding: 0px 4px 0px 4px;
-}
-
-.videoRuntimeFloat.style-DEFAULT {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.videoRuntimeFloat.style-LIVE {
-  background: rgba(255, 0, 0, 0.5);
-}
-
-.vid-title {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.avatar-thumbnail {
-  margin-top: 0.5rem;
-  margin-left: 0.5rem;
-  border-radius: 50%;
-  width: 35px;
-  height: 35px;
-}
-
-#details {
-  display: flex;
-  flex-direction: row;
-  flex-basis: auto;
-}
-
-@media screen and (orientation: landscape) {
-  .entry {
-    margin-bottom: 8px;
-  }
-  .thumbnail-container {
-    width: 50vh;
-    float: left;
-  }
-  #details {
-    flex-direction: column-reverse;
-  }
-  .avatar-thumbnail {
-    margin-top: 0;
-    margin-left: 16px;
-  }
-  .video-info {
-    padding-top: 0 !important;
-    padding-bottom: 0;
-    margin-top: 0;
-  }
-}
-</style>
-
 <script>
+import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
 export default {
   props: ["video"],
 
+  components: {
+    baseVideoRenderer,
+  },
+
+  computed: {
+    thumbnailOverlayText() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.text.runs[0].text;
+    },
+    thumbnailOverlayStyle() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.style;
+    },
+  },
+
   methods: {
     parseBottom(video) {
       const bottomText = [
diff --git a/NUXT/components/UtilRenderers/baseVideoRenderer.vue b/NUXT/components/UtilRenderers/baseVideoRenderer.vue
new file mode 100644
index 0000000..68d06e0
--- /dev/null
+++ b/NUXT/components/UtilRenderers/baseVideoRenderer.vue
@@ -0,0 +1,140 @@
+<template>
+  <v-card class="entry videoRenderer background" :to="`/watch?v=${vidId}`" flat>
+    <div style="position: relative" class="thumbnail-container">
+      <v-img
+        :aspect-ratio="16 / 9"
+        :src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
+      />
+      <div
+        v-if="thumbnailOverlayText && thumbnailOverlayStyle"
+        class="videoRuntimeFloat"
+        :class="'style-' + thumbnailOverlayStyle"
+        style="color: #fff"
+        v-text="thumbnailOverlayText"
+      />
+    </div>
+    <div id="details">
+      <a :href="channelUrl" class="avatar-link pt-2">
+        <v-img class="avatar-thumbnail" :src="channelIcon" />
+      </a>
+      <v-card-text class="video-info pt-2" v-emoji>
+        <span
+          v-for="title in titles"
+          :key="title.text"
+          style="margin-top: 0.5em"
+          class="font-weight-medium vid-title"
+        >
+          {{ title.text }}
+        </span>
+
+        <div
+          class="background--text text--lighten-5 caption"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          v-text="bottomText"
+        />
+      </v-card-text>
+    </div>
+  </v-card>
+</template>
+
+<style scoped>
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+.videoRuntimeFloat {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  border-radius: 5px;
+  padding: 0px 4px 0px 4px;
+}
+
+.videoRuntimeFloat.style-DEFAULT {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.videoRuntimeFloat.style-LIVE {
+  background: rgba(255, 0, 0, 0.5);
+}
+
+.vid-title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.avatar-thumbnail {
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+}
+
+#details {
+  display: flex;
+  flex-direction: row;
+  flex-basis: auto;
+}
+
+@media screen and (orientation: landscape) {
+  .entry {
+    margin-bottom: 8px;
+  }
+  .thumbnail-container {
+    width: 50vh;
+    float: left;
+  }
+  #details {
+    flex-direction: column-reverse;
+  }
+  .avatar-thumbnail {
+    margin-top: 0;
+    margin-left: 16px;
+  }
+  .video-info {
+    padding-top: 0 !important;
+    padding-bottom: 0;
+    margin-top: 0;
+  }
+}
+</style>
+
+<script>
+export default {
+  props: {
+    vidId: {
+      type: String,
+      required: true,
+    },
+    thumbnails: {
+      type: Array,
+      required: true,
+    },
+    channelUrl: {
+      type: String,
+      required: true,
+    },
+    channelIcon: {
+      type: String,
+      required: true,
+    },
+    titles: {
+      type: Array,
+      required: true,
+    },
+    bottomText: {
+      type: String,
+      required: true,
+    },
+    thumbnailOverlayText: {
+      type: String,
+    },
+    thumbnailOverlayStyle: {
+      type: String,
+    },
+  },
+};
+</script>
diff --git a/NUXT/components/gridRenderers/gridVideoRenderer.vue b/NUXT/components/gridRenderers/gridVideoRenderer.vue
index 68501a2..949336e 100644
--- a/NUXT/components/gridRenderers/gridVideoRenderer.vue
+++ b/NUXT/components/gridRenderers/gridVideoRenderer.vue
@@ -1,138 +1,41 @@
 <template>
-  <v-card
-    class="entry gridVideoRenderer background"
-    :to="`/watch?v=${video.videoId}`"
-    flat
+  <base-video-renderer
+    :vidId="video.videoId"
+    :thumbnails="video.thumbnail.thumbnails"
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
+    :channelUrl="
+      $rendererUtils.getNavigationEndpoints(
+        video.shortBylineText.runs[0].navigationEndpoint
+      )
+    "
+    :channelIcon="video.channelThumbnail.thumbnails[0].url"
+    :titles="video.title.runs"
+    :bottomText="parseBottom(video)"
   >
-    <div style="position: relative" class="thumbnail-container">
-      <v-img
-        v-if="video.thumbnail"
-        :aspect-ratio="16 / 9"
-        :src="
-          $youtube.getThumbnail(
-            video.videoId,
-            'max',
-            video.thumbnail.thumbnails
-          )
-        "
-      />
-      <div
-        v-if="video.thumbnailOverlays"
-        class="videoRuntimeFloat"
-        :class="
-          'style-' +
-          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.style
-        "
-        style="color: #fff"
-        v-text="
-          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text
-            .runs[0].text
-        "
-      />
-    </div>
-    <div id="details">
-      <a
-        :href="
-          $rendererUtils.getNavigationEndpoints(
-            video.shortBylineText.runs[0].navigationEndpoint
-          )
-        "
-        class="avatar-link pt-2"
-      >
-        <v-img
-          class="avatar-thumbnail"
-          :src="video.channelThumbnail.thumbnails[0].url"
-        />
-      </a>
-      <v-card-text class="video-info pt-2" v-emoji>
-        <div
-          v-for="title in video.title.runs"
-          :key="title.text"
-          style="margin-top: 0.5em"
-          class="font-weight-medium vid-title"
-        >
-          {{ title.text }}
-        </div>
-
-        <div
-          class="background--text text--lighten-5 caption"
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          v-text="parseBottom(video)"
-        />
-      </v-card-text>
-    </div>
-  </v-card>
+  </base-video-renderer>
 </template>
 
-<style scoped>
-.entry {
-  width: 100%; /* Prevent Loading Weirdness */
-}
-.videoRuntimeFloat {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  border-radius: 5px;
-  padding: 0px 4px 0px 4px;
-}
-
-.videoRuntimeFloat.style-DEFAULT {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.videoRuntimeFloat.style-LIVE {
-  background: rgba(255, 0, 0, 0.5);
-}
-
-.vid-title {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.avatar-thumbnail {
-  margin-top: 0.5rem;
-  margin-left: 0.5rem;
-  border-radius: 50%;
-  width: 35px;
-  height: 35px;
-}
-
-#details {
-  display: flex;
-  flex-direction: row;
-  flex-basis: auto;
-}
-
-@media screen and (orientation: landscape) {
-  .entry {
-    margin-bottom: 8px;
-  }
-  .thumbnail-container {
-    width: 50vh;
-    float: left;
-  }
-  #details {
-    flex-direction: column-reverse;
-  }
-  .avatar-thumbnail {
-    margin-top: 0;
-    margin-left: 16px;
-  }
-  .video-info {
-    padding-top: 0 !important;
-    padding-bottom: 0;
-    margin-top: 0;
-  }
-}
-</style>
-
 <script>
+import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
 export default {
   props: ["video"],
 
+  components: {
+    baseVideoRenderer,
+  },
+
+  computed: {
+    thumbnailOverlayText() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.text.runs[0].text;
+    },
+    thumbnailOverlayStyle() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.style;
+    },
+  },
+
   methods: {
     parseBottom(video) {
       const bottomText = [
diff --git a/NUXT/components/gridRenderers/videoWithContextRenderer.vue b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
index 463d5c1..a353d73 100644
--- a/NUXT/components/gridRenderers/videoWithContextRenderer.vue
+++ b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
@@ -1,141 +1,44 @@
 <template>
-  <v-card
-    class="entry videoWithContextRenderer background"
-    :to="`/watch?v=${video.videoId}`"
-    flat
+  <base-video-renderer
+    :vidId="video.videoId"
+    :thumbnails="video.thumbnail.thumbnails"
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
+    :channelUrl="
+      $rendererUtils.getNavigationEndpoints(
+        video.shortBylineText.runs[0].navigationEndpoint
+      )
+    "
+    :channelIcon="
+      video.channelThumbnail.channelThumbnailWithLinkRenderer.thumbnail
+        .thumbnails[0].url
+    "
+    :titles="video.headline.runs"
+    :bottomText="parseBottom(video)"
   >
-    <div style="position: relative" class="thumbnail-container">
-      <v-img
-        v-if="video.thumbnail"
-        :aspect-ratio="16 / 9"
-        :src="
-          $youtube.getThumbnail(
-            video.videoId,
-            'max',
-            video.thumbnail.thumbnails
-          )
-        "
-      />
-      <div
-        v-if="video.thumbnailOverlays"
-        class="videoRuntimeFloat"
-        :class="
-          'style-' +
-          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.style
-        "
-        style="color: #fff"
-        v-text="
-          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text
-            .runs[0].text
-        "
-      />
-    </div>
-    <div id="details">
-      <a
-        :href="
-          $rendererUtils.getNavigationEndpoints(
-            video.shortBylineText.runs[0].navigationEndpoint
-          )
-        "
-        class="avatar-link pt-2"
-      >
-        <v-img
-          class="avatar-thumbnail"
-          :src="
-            video.channelThumbnail.channelThumbnailWithLinkRenderer.thumbnail
-              .thumbnails[0].url
-          "
-        />
-      </a>
-      <v-card-text class="video-info pt-2" v-emoji>
-        <div
-          v-for="title in video.headline.runs"
-          :key="title.text"
-          style="margin-top: 0.5em"
-          class="font-weight-medium vid-title"
-        >
-          {{ title.text }}
-        </div>
-
-        <div
-          class="background--text text--lighten-5 caption"
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          v-text="parseBottom(video)"
-        />
-      </v-card-text>
-    </div>
-  </v-card>
+  </base-video-renderer>
 </template>
 
-<style scoped>
-.entry {
-  width: 100%; /* Prevent Loading Weirdness */
-}
-.videoRuntimeFloat {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  border-radius: 5px;
-  padding: 0px 4px 0px 4px;
-}
-
-.videoRuntimeFloat.style-DEFAULT {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.videoRuntimeFloat.style-LIVE {
-  background: rgba(255, 0, 0, 0.5);
-}
-
-.vid-title {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.avatar-thumbnail {
-  margin-top: 0.5rem;
-  margin-left: 0.5rem;
-  border-radius: 50%;
-  width: 35px;
-  height: 35px;
-}
-
-#details {
-  display: flex;
-  flex-direction: row;
-  flex-basis: auto;
-}
-
-@media screen and (orientation: landscape) {
-  .entry {
-    margin-bottom: 8px;
-  }
-  .thumbnail-container {
-    width: 50vh;
-    float: left;
-  }
-  #details {
-    flex-direction: column-reverse;
-  }
-  .avatar-thumbnail {
-    margin-top: 0;
-    margin-left: 16px;
-  }
-  .video-info {
-    padding-top: 0 !important;
-    padding-bottom: 0;
-    margin-top: 0;
-  }
-}
-</style>
-
 <script>
+import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
 export default {
   props: ["video"],
 
+  components: {
+    baseVideoRenderer,
+  },
+
+  computed: {
+    thumbnailOverlayText() {
+      return this.video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer
+        .text.runs[0].text;
+    },
+    thumbnailOverlayStyle() {
+      return this.video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer
+        .style;
+    },
+  },
+
   methods: {
     parseBottom(video) {
       const bottomText = [