diff --git a/NUXT/components/Player/VTPlayerV1.vue b/NUXT/components/Player/VTPlayerV1.vue
deleted file mode 100644
index f89b5f6..0000000
--- a/NUXT/components/Player/VTPlayerV1.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div>
-    <div class="content">
-      <v-btn class="pausePlay" text @click="playing = !playing">
-        <v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
-      </v-btn>
-
-      <div class="seekBar">
-        <v-slider
-          dense
-          hide-details
-          min="0"
-          :max="videoEnd"
-          :value="currentTime"
-          @change="scrubTo()"
-        />
-      </div>
-
-      <video
-        ref="player"
-        autoplay
-        :src="vidSrc"
-        width="100%"
-        style="max-height: 50vh"
-        @webkitfullscreenchange="handleFullscreenChange"
-      />
-    </div>
-
-    <div v-for="(source, index) in sources" :key="index">
-      {{ source.qualityLabel }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    sources: {
-      type: Array,
-      default: [],
-    },
-  },
-  data() {
-    return {
-      //---   Basic Information   ---//
-      playerVersion: 0.1,
-      vidSrc: null,
-
-      //---   Player State Information   ---//
-      playing: true,
-      currentTime: 0,
-      videoEnd: 0,
-    };
-  },
-
-  watch: {
-    playing() {
-      this.playing ? this.$refs.player.play() : this.$refs.player.pause();
-    },
-  },
-
-  mounted() {
-    const src = this.sources[this.sources.length - 1].url;
-    this.vidSrc = src;
-
-    setInterval(this.updateTiming, 100);
-  },
-
-  methods: {
-    handleFullscreenChange() {
-      if (document.fullscreenElement === this.$refs.player) {
-        this.$vuetube.statusBar.hide();
-        this.$vuetube.navigationBar.hide();
-      } else {
-        this.$vuetube.statusBar.show();
-        this.$vuetube.navigationBar.show();
-      }
-    },
-
-    scrubTo() {
-      const player = this.$refs.player;
-      player.currentTime = 0;
-      console.log(val, this.currentTime, player.currentTime);
-    },
-
-    updateTiming() {
-      const player = this.$refs.player;
-      if (player == undefined) return;
-      this.videoEnd = player.duration;
-      this.currentTime = player.currentTime;
-      console.log(player.currentTime, this.currentTime);
-    },
-  },
-};
-</script>
-
-<style scoped>
-/***   Overlay Information   ***/
-.content {
-  position: relative;
-  width: 500px;
-  margin: 0 auto;
-}
-.content video {
-  width: 100%;
-  display: block;
-}
-.content:before {
-  content: "";
-  position: absolute;
-  background: rgba(0, 0, 0, 0.5);
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-/***   General Overlay Styling   ***/
-.pausePlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.seekBar {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
-</style>
diff --git a/NUXT/components/Player/controls.vue b/NUXT/components/Player/controls.vue
new file mode 100644
index 0000000..5b94438
--- /dev/null
+++ b/NUXT/components/Player/controls.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+
+
+    <v-btn class="centerVideoControls" @click="togglePlaying()">
+      <v-icon v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
+    </v-btn>
+
+
+  </div>
+</template>
+
+<style scoped>
+  .centerVideoControls {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+</style>
+
+<script>
+  export default {
+    props: ["video"],
+
+    data() {
+      return {
+        playing: true,
+      }
+    },
+
+    methods: {
+      togglePlaying() {
+        if (this.video.paused) {
+            this.video.play()
+            this.playing = true;
+        } else {
+            this.video.pause()
+            this.playing = false;
+        }
+
+      }
+    }
+  }
+
+</script>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 0d87dd0..c76368d 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -1,75 +1,66 @@
 <template>
-  <div>
-    <div @click="toggleControls()" class="content">
+  <div style="position: relative;">
+    <video
+      ref="player"
+      autoplay
+      :src="vidSrc"
+      width="100%"
+      style="max-height: 50vh; display: block"
+      @webkitfullscreenchange="handleFullscreenChange"
+    />
+    <seekbar :video=$refs.player v-if="$refs.player" />
+
+
+
+    <!--   Video Controls   -->
+    <div class="videoControls" v-if="$refs.player">
+      <div class="videoControlsWrap">
+
+
+        <controls :video=$refs.player />
 
-      <div v-show="showControls" class="controls">
-        <v-btn class="pausePlay" text @click="playing = !playing">
-          <v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
-        </v-btn>
 
-        <scrubber class="scrubber" :duration="duration" :endDuration="endDuration" />
       </div>
-
-      <video
-        ref="player"
-        :src="vidSrc"
-        width="100%"
-        style="max-height: 50vh"
-        @webkitfullscreenchange="handleFullscreenChange"
-      />
     </div>
+    <!--   End Video Controls   -->
 
-    <div v-for="(source, index) in sources" :key="index">
-      {{ source.qualityLabel }}
-    </div>
+
+    <!-- <v-slider v-model="value" step="0"></v-slider> -->
   </div>
 </template>
 
+<style scoped>
+.videoControls {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+.videoControlsWrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
 <script>
-import scrubber from "./scrubber.vue";
+import seekbar from '~/components/Player/seekbar.vue';
+import controls from '~/components/Player/controls.vue';
 
 export default {
+  props: ["sources"],
   components: {
-    scrubber,
-  },
-  props: {
-    sources: {
-      type: Array,
-      default: [],
-    },
+    seekbar,
+    controls
   },
   data() {
     return {
-      //---   Basic Information   ---//
-      playerVersion: 0.1,
-      vidSrc: null,
-
-      //---   Player State Information   ---//
-      showControls: false,
-      playing: false,
-      duration: 0,
-      endDuration: 0,
+      vidSrc: "",
     };
   },
-
-  watch: {
-    playing() {
-      console.log("Changed Playback State");
-      this.playing ? this.$refs.player.play() : this.$refs.player.pause();
-    },
-  },
-
   mounted() {
-    const src = this.sources[this.sources.length - 1].url;
-    this.vidSrc = src;
-
-    console.log("Beta Player Sources Debug:", this.sources, src);
-
-    setTimeout(function() { this.$refs.player.play(); }, 1000); // Auto Play
-
-    setInterval(this.updateTiming, 100); // Auto Update Scrubber
+    this.vidSrc = this.sources[this.sources.length-1].url;
   },
-
   methods: {
     handleFullscreenChange() {
       if (document.fullscreenElement === this.$refs.player) {
@@ -81,57 +72,9 @@ export default {
       }
     },
 
-    updateTiming() {
-      const player = this.$refs.player;
-      if (player == undefined) return;
-      this.duration = player.currentTime;
-      this.endDuration = player.duration;
+    getPlayer() {
+      return this.$refs.player;
     },
-
-    toggleControls() {
-      this.showControls = !this.showControls;
-    }
-
   },
 };
 </script>
-
-<style scoped>
-/***   Overlay Information   ***/
-.content {
-  position: relative;
-  width: 500px;
-  margin: 0 auto;
-}
-.content video {
-  width: 100%;
-  display: block;
-}
-.content:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-/***   General Overlay Styling   ***/
-.controls {
-  z-index: 999;
-}
-.pausePlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 5em !important;
-  width: 5em !important;
-}
-.scrubber {
-  position: absolute;
-  bottom: 0;
-}
-
-
-</style>
diff --git a/NUXT/components/videoPlayer.vue b/NUXT/components/Player/legacy.vue
similarity index 56%
rename from NUXT/components/videoPlayer.vue
rename to NUXT/components/Player/legacy.vue
index 39bb193..942e04d 100644
--- a/NUXT/components/videoPlayer.vue
+++ b/NUXT/components/Player/legacy.vue
@@ -9,16 +9,6 @@
       style="max-height: 50vh; display: block"
       @webkitfullscreenchange="handleFullscreenChange"
     />
-    <v-progress-linear
-      active
-      background-color="primary"
-      background-opacity="0.5"
-      :buffer-value="buffered"
-      color="primary"
-      height="3"
-      query
-      :value="percentage"
-    />
     <!-- <v-slider v-model="value" step="0"></v-slider> -->
   </div>
 </template>
@@ -26,21 +16,6 @@
 <script>
 export default {
   props: ["vidSrc"],
-  data() {
-    return {
-      percentage: 0,
-      buffered: 0,
-    };
-  },
-  mounted() {
-    let vid = this.$refs.player;
-    vid.ontimeupdate = () => {
-      this.percentage = (vid.currentTime / vid.duration) * 100;
-    };
-    vid.addEventListener("progress", () => {
-      this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
-    });
-  },
   methods: {
     handleFullscreenChange() {
       if (document.fullscreenElement === this.$refs.player) {
diff --git a/NUXT/components/Player/scrubber.vue b/NUXT/components/Player/scrubber.vue
deleted file mode 100644
index 41c95f2..0000000
--- a/NUXT/components/Player/scrubber.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="scrubber">
-    <div id="progress" class="primary" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    duration: {
-      type: Number,
-      default: 0,
-    },
-    endDuration: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      percentage: 0,
-    };
-  },
-  mounted() {
-    const vm = this;
-    setInterval(function () {
-      vm.percentage = (vm.duration / vm.endDuration) * 100;
-
-      document.getElementById("progress").style.width = vm.percentage + "%";
-    }, 100);
-  },
-};
-</script>
-
-<style scoped>
-.scrubber {
-  width: 100%;
-  height: 5px;
-  background: rgba(255, 255, 255, 0.5);
-}
-#progress {
-  height: 100%;
-}
-</style>
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
new file mode 100644
index 0000000..3e9aced
--- /dev/null
+++ b/NUXT/components/Player/seekbar.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+
+
+    <v-progress-linear
+      active
+      background-color="primary"
+      background-opacity="0.5"
+      :buffer-value="buffered"
+      color="primary"
+      height="3"
+      query
+      :value="percentage"
+    />
+
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: ["video"],
+
+  data() {
+    return {
+      percentage: 0,
+      buffered: 0
+    }
+  },
+
+  mounted() {
+    this.video.ontimeupdate = () => {
+      this.percentage = (this.video.currentTime / this.video.duration) * 100;
+    };
+    this.video.addEventListener("progress", () => {
+      this.buffered = (this.video.buffered.end(0) / this.video.duration) * 100;
+    });
+  }
+
+}
+</script>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 479b730..6b77750 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -11,7 +11,7 @@
       />
 
       <!--   Stock Player   -->
-      <videoPlayer
+      <legacyPlayer
         id="player"
         ref="player"
         v-touch="{ down: () => $router.push('/home') }"
@@ -209,6 +209,7 @@ import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
 import { getCpn } from "~/plugins/utils";
 import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
+import legacyPlayer from "~/components/Player/legacy.vue"
 import vuetubePlayer from "~/components/Player/index.vue";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
 import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
@@ -222,6 +223,7 @@ export default {
     VidLoadRenderer,
     SlimVideoDescriptionRenderer,
     vuetubePlayer,
+    legacyPlayer,
     ItemSectionRenderer,
     SwipeableBottomSheet,
     mainCommentRenderer,
diff --git a/NUXT/pages/watch_debug.vue b/NUXT/pages/watch_debug.vue
index 1d66c68..95da87e 100644
--- a/NUXT/pages/watch_debug.vue
+++ b/NUXT/pages/watch_debug.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="accent">
+  <div>
 
     <player :sources="sources" v-if="sources.length > 0" />