diff --git a/NUXT/components/Player/captions.vue b/NUXT/components/Player/captions.vue
index 1b37d817..21617173 100644
--- a/NUXT/components/Player/captions.vue
+++ b/NUXT/components/Player/captions.vue
@@ -38,7 +38,6 @@
         >
           <v-list-item-group
             v-for="src in captions"
-            :key="src"
             >
             <v-list-item
               @click="(sheet = false), $emit('captionsHandler', src)">
diff --git a/NUXT/components/Player/endscreen.vue b/NUXT/components/Player/endscreen.vue
new file mode 100644
index 00000000..1b48b9e4
--- /dev/null
+++ b/NUXT/components/Player/endscreen.vue
@@ -0,0 +1,172 @@
+<template>
+  <div ref="rootOfEndscreen" class="d-flex justify-space-between" style="border-radius: 1px; position: absolute; left: 50%; transform: translate(-50%, -60%); " id="ttttttttttt" :style="{
+    maxHeight: '50vh',
+    width: isFullscreen ? '100%' : 'fit-content',
+    height: isFullscreen ? '100%' : 'fit-content',
+    top: isFullscreen ? '' : (isLandscape ? '50%' : '0'),
+    transform: isFullscreen ? (isLandscape ? 'translate(-50%, -60%)' : 'translate(-50%, 15%)') : (isLandscape ? 'translate(-50%, -50%)' : 'translate(-50%, 0px)') ,
+
+  }">
+    <div :style="{
+    maxHeight: '50vh',
+    width: getWidth() + 'px',
+    height: getHeight() + 'px',
+  }">
+      <div v-if="endscreen?.endscreenRenderer?.elements" v-for="element in endscreen?.endscreenRenderer?.elements"
+      >
+        {{updatePlayerStyles}}
+        <div :style="{
+        ...calculatePosition(element),
+        width: calculateWidth(element),
+        height: calculateHeight(element),
+        position: 'absolute',
+        display: parseFloat(element.endscreenElementRenderer.startMs) <= currentTime * 1000 && parseFloat(element.endscreenElementRenderer.endMs) >= currentTime * 1000 ? 'block' : 'none',
+      }" >
+          <v-img :src="element.endscreenElementRenderer?.image?.thumbnails[element.endscreenElementRenderer?.image?.thumbnails.length - 1]?.url"
+                 :style="getStyleOfEndscreenElement(element.endscreenElementRenderer?.style)"
+
+          />
+        </div>
+        <!--      </div>-->
+      </div>
+    </div>
+
+
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    endscreen: {
+      required: true,
+    },
+    videoWidth: {
+      required: true,
+    },
+    videoHeight: {
+      required: true,
+    },
+    videoBlockWidth: {
+      required: true,
+    },
+    videoBlockHeight: {
+      required: true,
+    },
+    isFullscreen: {
+      required: true,
+    },
+    currentTime: {
+      required: true,
+    },
+    playerObject: {
+      required: true,
+    }
+  },
+  data: () => ({
+    temp: [
+      {
+        test: "",
+      },
+    ],
+    isLandscape: false,
+    isEndscreenStarted: false,
+    rootDimensions: {
+      width: 0,
+      height: 0,
+    },
+  }),
+  mounted() {
+    this.updateRootDimensions(screen.orientation.type);
+    window.addEventListener('resize', this.updateRootDimensions);
+    screen.orientation.addEventListener('change', (e)=> {
+
+      this.updateRootDimensions(e.currentTarget.type);
+    })
+
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateRootDimensions);
+  },
+  methods: {
+    updateRootDimensions(type) {
+
+      if (type === 'landscape-primary') {
+        this.isLandscape = true;
+      } else if (type === 'portrait-primary') {
+        this.isLandscape = false;
+      }
+      const root = this.$refs.rootOfEndscreen;
+      // if ((this.videoWidth / this.videoHeight).toFixed(2) === (root.offsetWidth / root.offsetHeight).toFixed(2)) {
+        if (root) {
+          if (this.isFullscreen && this.isLandscape) {
+            this.rootDimensions.width = window.screen.width;
+            this.rootDimensions.height = window.screen.height;
+          }
+          else {
+            this.rootDimensions.width = this.videoBlockWidth;
+            this.rootDimensions.height = this.videoBlockHeight;
+          }
+        }
+      // }
+    },
+    getWidth() {
+      if (this.isFullscreen) {
+        if (this.isLandscape) {
+          return window.screen.width;
+        }
+        return this.videoWidth * this.rootDimensions.height / this.videoHeight;
+      }
+      return this.videoWidth * this.rootDimensions.height / this.videoHeight;
+    },
+    getHeight() {
+      if (this.isFullscreen) {
+        if (this.isLandscape) {
+          return window.screen.height;
+        }
+        return this.rootDimensions.height;
+      }
+      return this.rootDimensions.height;
+    },
+    calculatePosition(element) {
+      if (!element.endscreenElementRenderer) return {};
+      const { left, top } = element.endscreenElementRenderer;
+      return {
+        marginLeft: `${left * this.getWidth()}px`,
+        marginTop: `${top * this.getHeight()}px`,
+      };
+    },
+    calculateWidth(element) {
+      if (!element.endscreenElementRenderer) return '0px';
+      const { width } = element.endscreenElementRenderer;
+      return `${width * this.getWidth()}px`;
+    },
+    calculateHeight(element) {
+      if (!element.endscreenElementRenderer) return '0px';
+      const { width, aspectRatio } = element.endscreenElementRenderer;
+      const height = width / aspectRatio;
+      return `${height * this.getWidth()}px`;
+    },
+    updatePlayerStyles() {
+      if (this.endscreen.endscreenRenderer.startMs > this.currentTime * 1000) {
+        this.playerObject.style.filter = "brightness(" + parseFloat(localStorage.getItem("brightness")) || 1 + ")";
+      }
+      else {
+        this.playerObject.style.filter = `brightness(50%)`;
+      }
+    },
+    getStyleOfEndscreenElement(style) {
+      if (!style) return {};
+      if (style.toLowerCase() === "channel") {
+        return {
+          borderRadius: '50%',
+        };
+      } else if (style.toLowerCase() == "image") {
+
+      }
+    },
+  }
+};
+</script>
+<style>
+
+</style>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 0e19e44c..25152430 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -2,9 +2,10 @@
   <!-- // TODO: down: () => minimize, -->
   <div
     ref="vidcontainer"
-    class="d-flex flex-column black"
+    class="d-flex flex-column black justify-center"
     style="position: relative"
     :style="{
+      width: 'auto',
       height: isFullscreen ? '100vh' : 'auto',
       maxHeight: isFullscreen ? '' : '50vh',
       borderRadius:
@@ -15,10 +16,10 @@
           : '0',
     }"
   >
-    <video
-      preload="metadata"
-      ref="player"
-      v-touch="{
+      <video
+        preload="metadata"
+        ref="player"
+        v-touch="{
         up: () => {
           if (!isFullscreen) fullscreenHandler(true);
           else if (verticalFullscreen) shortNext();
@@ -27,12 +28,12 @@
           if (isFullscreen) fullscreenHandler(true);
         },
       }"
-      mediagroup="vuetubecute"
-      width="100%"
-      :src="hls || dash ? '' : vidSrc"
-      :height="isFullscreen ? '100%' : 'auto'"
-      style="transition: filter 0.15s ease-in-out, transform 0.15s linear"
-      :class="
+        mediagroup="vuetubecute"
+        width="100%"
+        :src="hls || dash ? '' : vidSrc"
+        style="transition: filter 0.15s ease-in-out, transform 0.15s linear"
+        height="auto"
+        :class="
         controls ||
         seeking ||
         skipping ||
@@ -43,7 +44,7 @@
             : 'dim'
           : ''
       "
-      :style="{
+        :style="{
         transform: shortTransition ? 'translateY(-100%)' : '',
         objectFit: contain ? 'contain' : 'cover',
         maxHeight: isFullscreen ? '' : '50vh',
@@ -54,14 +55,27 @@
               }rem 0rem 0rem !important`
             : '0',
       }"
-      :poster="poster"
-      id="playerVideo"
-      @loadedmetadata="checkDimensions()"
-      :autoplay="true"
-      @click="controlsHandler()"
-    >
-      <track default kind="captions" id="captions" src=""/>
-    </video>
+        :poster="poster"
+        id="playerVideo"
+        @loadedmetadata="checkDimensions()"
+        :autoplay="true"
+        @click="controlsHandler()"
+      >
+        <track default kind="captions" id="captions" src=""/>
+      </video>
+      <endscreen
+        v-if="$refs.player?.videoHeight"
+        ref="endscrn"
+        :endscreen="video.endscreen"
+        :isFullscreen="isFullscreen"
+        :video-height="$refs.player.videoHeight"
+        :video-width="$refs.player.videoWidth"
+        :video-block-height="$refs.player.height || $refs.vidcontainer.offsetHeight" :video-block-width="$refs.player.width === 100 ? $refs.vidcontainer.offsetWidth : $refs.player.width"
+        :current-time="$refs.player.currentTime"
+      :player-object="$refs.player"
+      />
+
+
     <button id="skipButton"
             ref="skipButton" class="skip-button"
     :style="{
@@ -384,9 +398,11 @@ import constants from "@/plugins/constants";
 import { Http } from "@capacitor-community/http";
 import { convertTranscriptToVTT } from "~/plugins/utils";
 import $youtube from "@/plugins/innertube";
+import Endscreen from "./endscreen.vue";
 
 export default {
   components: {
+    Endscreen,
     // player,
     sponsorblock,
     progressbar,
@@ -460,6 +476,25 @@ export default {
     };
   },
   async mounted() {
+    window.addEventListener("resize", ()=> {
+      this.$refs.player.width = this.$refs.vidcontainer.offsetWidth;
+      if (this.$refs.player.height < (50 * window.innerHeight) / 100) {
+        this.$refs.player.height = this.$refs.vidcontainer.offsetWidth / (this.$refs.player?.videoWidth / this.$refs.player?.videoHeight);
+      }
+    });
+    screen.orientation.addEventListener('change', (e)=> {
+
+      if (e.currentTarget.type === 'landscape-primary') {
+        this.$refs.player.width = this.$refs.vidcontainer.offsetWidth;
+        this.$refs.player.height = "auto";
+      } else if (e.currentTarget.type === 'portrait-primary') {
+        this.$refs.player.width = this.$refs.vidcontainer.offsetWidth;
+        if (this.$refs.player.height < (50 * window.innerHeight) / 100) {
+          this.$refs.player.height = this.$refs.vidcontainer.offsetWidth / (this.$refs.player?.videoWidth / this.$refs.player?.videoHeight);
+        }
+      }
+    });
+
     this.isSegment = false;
     this.poster = await $youtube.getThumbnail(this.$route.query.v, '', []);
 
@@ -674,17 +709,17 @@ export default {
         this.$refs.player.addEventListener("ended", this.endedEvent);
 
         this.$refs.player.addEventListener('pause', () => {
-          this.aud.pause();
+          this.$refs.audio.pause();
         });
         this.$refs.player.addEventListener('play', () => {
-          this.aud.play();
+          this.$refs.audio.play();
         });
 
 
       }
       else {
         this.vid.pause();
-        this.aud.pause();
+        this.$refs.audio.pause();
       }
     },
     seekingEvent() {
@@ -899,6 +934,10 @@ export default {
       this.$refs.player.currentTime = time;
       this.$refs.player.playbackRate = speed;
       this.$refs.audio.playbackRate = speed;
+      this.hls = false;
+      this.dash = false;
+      this.hlsStream = null;
+      this.aud = this.audSrc;
     },
     async captionsHandler(q) {
       if (q.baseUrl != null) {
@@ -1022,8 +1061,8 @@ export default {
       return this.$refs.player;
     },
     pauseHandler() {
-      this.vid.pause();
-      this.aud.pause();
+      this.$refs.player.pause();
+      this.$refs.audio.pause();
       clearTimeout(this.bufferingDetected);
       this.bufferingDetected = false;
     },
diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js
index 7a4855bd..2495a615 100644
--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@@ -1033,6 +1033,7 @@ class Innertube {
       ),
       channelImg: ownerData?.thumbnail?.thumbnails[0].url,
       captions: captions,
+      endscreen: responseInfo.endscreen,
       availableResolutions: resolutions.formats ? resolutions.formats : resolutions,
       availableResolutionsAdaptive: resolutions?.adaptiveFormats ? resolutions.adaptiveFormats : resolutions,
       hls: hls,