diff --git a/client/src/components/CurrentQueue.vue b/client/src/components/CurrentQueue.vue
index 4d14ce2..153358a 100644
--- a/client/src/components/CurrentQueue.vue
+++ b/client/src/components/CurrentQueue.vue
@@ -128,7 +128,6 @@ const userHasItemsInQueue = computed(() => {
   const videosOfUser = queue.value.filter((video) => {
     return video.user.id === props.userID;
   });
-  console.log(videosOfUser);
   return videosOfUser.length > 0;
 });
 
diff --git a/client/src/components/MasterControls.vue b/client/src/components/MasterControls.vue
index 8582fef..bba5daf 100644
--- a/client/src/components/MasterControls.vue
+++ b/client/src/components/MasterControls.vue
@@ -11,8 +11,8 @@
         Switch Theme
       </button>
     </div>
-    <div class="md:flex">
-      <div class="mx-auto w-full text-center lg:w-2/3">
+    <div class="text-center lg:flex">
+      <div class="mx-auto my-auto lg:w-2/3">
         <span
           class="w-full text-right text-lg text-gray-500 dark:text-white md:text-center">
           Volume - {{ playerSettings.volume }}
@@ -24,69 +24,79 @@
           min="0"
           max="100"
           :value="playerSettings.volume" />
-        <div class="container mt-2 flex">
-          <!--     Video/Radio toggle     -->
-          <div class="flex">
-            <div class="mr-3">
-              <span class="text-sm font-medium text-gray-900 dark:text-white">
-                ProTube
-              </span>
-            </div>
-            <button
-              @click="toggleRadioProtube"
-              type="button"
-              :class="
-                playerSettings.playerType === enums.TYPES.RADIO
-                  ? 'bg-proto_blue'
-                  : 'bg-proto_green'
-              "
-              class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              role="switch">
-              <span
-                :class="
-                  playerSettings.playerType === enums.TYPES.RADIO
-                    ? 'translate-x-5'
-                    : 'translate-x-0'
-                "
-                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
-              </span>
-            </button>
-            <div class="ml-3">
-              <span class="text-sm font-medium text-gray-900 dark:text-white">
-                Radio
-              </span>
-            </div>
-          </div>
-          <!--   Video controls   -->
-          <div class="mx-auto">
-            <!-- TODO: Add back button in admin controls -->
-            <!--<font-awesome-icon class="cursor-pointer text-2xl mx-2 text-gray-600 dark:text-white" icon="backward" />-->
+
+        <!--   Video controls   -->
+        <div class="mx-auto">
+          <font-awesome-icon
+            @click="playPause"
+            class="cursor-pointer text-2xl text-gray-600 dark:text-white"
+            :icon="
+              playerSettings.playerMode === enums.MODES.PLAYING
+                ? 'pause'
+                : 'play'
+            ">
+          </font-awesome-icon>
+          <font-awesome-icon
+            @click="skipVideo"
+            class="mx-2 cursor-pointer text-2xl text-gray-600 dark:text-white"
+            icon="forward">
+          </font-awesome-icon>
+        </div>
+      </div>
+      <div class="mx-auto mt-2 grid grid-cols-2 gap-2 lg:grid-cols-1">
+        <ToggleSlider
+          @click="toggleRadioProtube"
+          :isLeft="playerSettings.playerType === enums.TYPES.RADIO">
+          <template #left>
             <font-awesome-icon
-              @click="playPause"
-              class="cursor-pointer text-2xl text-gray-600 dark:text-white"
-              :icon="
-                playerSettings.playerMode === enums.MODES.PLAYING
-                  ? 'pause'
-                  : 'play'
-              ">
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-radio">
             </font-awesome-icon>
+          </template>
+          <template #right>
             <font-awesome-icon
-              @click="skipVideo"
-              class="mx-2 cursor-pointer text-2xl text-gray-600 dark:text-white"
-              icon="forward">
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-tv">
             </font-awesome-icon>
-          </div>
-          <!--     New code button     -->
-          <div class="relative ml-auto">
-            <div class="absolute -right-full min-w-max">
-              <button
-                @click="resetScreenCode"
-                class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md duration-200 hover:-translate-x-1 hover:-translate-y-0.5 hover:opacity-80">
-                New code
-              </button>
-            </div>
-          </div>
-        </div>
+          </template>
+        </ToggleSlider>
+        <ToggleSlider
+          @click="togglePhotosOverlay"
+          :isLeft="playerSettings.screenSettings.showPhotos">
+          <template #left>
+            <font-awesome-icon
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-camera">
+            </font-awesome-icon>
+          </template>
+          <template #right>
+            <font-awesome-icon
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-ban">
+            </font-awesome-icon>
+          </template>
+        </ToggleSlider>
+        <ToggleSlider
+          @click="toggleQueueOverlay"
+          :isLeft="playerSettings.screenSettings.showQueue">
+          <template #left>
+            <font-awesome-icon
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-rectangle-list">
+            </font-awesome-icon>
+          </template>
+          <template #right>
+            <font-awesome-icon
+              class="w-7 cursor-pointer text-2xl text-gray-600 dark:text-white"
+              icon="fa-ban">
+            </font-awesome-icon>
+          </template>
+        </ToggleSlider>
+        <button
+          @click="resetScreenCode"
+          class="bg-proto_blue hover:bg-proto_blue/80 rounded-md py-1 px-2 text-sm text-white shadow-md duration-200 hover:-translate-x-1 hover:-translate-y-0.5 hover:opacity-80">
+          New code
+        </button>
       </div>
     </div>
   </ContentField>
@@ -98,6 +108,7 @@ import { ref, onBeforeMount, onBeforeUnmount, defineEmits } from "vue";
 import { useRouter } from "vue-router";
 import enums from "@/js/Enums";
 import ContentField from "../layout/ContentField.vue";
+import ToggleSlider from "./ToggleSlider.vue";
 
 const emit = defineEmits(["display-toast"]);
 
@@ -106,6 +117,10 @@ const playerSettings = ref({
   volume: 75,
   playerMode: enums.MODES.IDLE,
   playerType: enums.TYPES.VIDEO,
+  screenSettings: {
+    showQueue: true,
+    showPhotos: true,
+  },
 });
 
 const router = useRouter();
@@ -136,6 +151,10 @@ socket.on("update-admin-panel", (newSettings) => {
   playerSettings.value = newSettings;
 });
 
+socket.on("queue-photos-visibility-changed", (newSetting) => {
+  playerSettings.value.screenSettings = newSetting;
+});
+
 function displayToast(toast) {
   emit("display-toast", toast);
 }
@@ -187,6 +206,32 @@ async function toggleRadioProtube() {
   });
 }
 
+async function togglePhotosOverlay() {
+  const data = await new Promise((resolve) => {
+    socket.emit("toggle-photos-visibility", (callback) => {
+      resolve(callback);
+    });
+  });
+  displayToast({
+    status: data.status ?? enums.STATUS.SUCCESS,
+    message:
+      data.message ?? `Successfully changed the photos visibility setting!`,
+  });
+}
+
+async function toggleQueueOverlay() {
+  const data = await new Promise((resolve) => {
+    socket.emit("toggle-queue-visibility", (callback) => {
+      resolve(callback);
+    });
+  });
+  displayToast({
+    status: data.status ?? enums.STATUS.SUCCESS,
+    message:
+      data.message ?? `Successfully changed the queue visibility setting!`,
+  });
+}
+
 async function skipVideo() {
   const data = await new Promise((resolve) => {
     socket.emit("skip-video", (callback) => {
diff --git a/client/src/components/PhotosOverlay.vue b/client/src/components/PhotosOverlay.vue
new file mode 100644
index 0000000..9471fa3
--- /dev/null
+++ b/client/src/components/PhotosOverlay.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div class="flex h-screen justify-center overflow-x-hidden p-5">
+      <img
+        :src="photo.url"
+        class="dark:bg-proto_secondary_gray-dark -z-10 h-full max-w-none rounded-lg bg-white"
+        alt="Loading..." />
+    </div>
+    <div class="absolute top-0 left-0 mt-2 ml-4 rounded-lg text-lg">
+      <div
+        class="border-proto_blue dark:bg-proto_secondary_gray-dark rounded-lg border-l-4 bg-white p-1 px-4 py-2 text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
+        Album: {{ photo.album_name }}<br />
+        Taken on: {{ photo.date_taken }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import socket from "@/js/ScreenSocket";
+import { ref, onMounted } from "vue";
+
+onMounted(async () => {
+  photo.value = await new Promise((resolve) => {
+    socket.emit("get-photo", (result) => {
+      resolve(result);
+    });
+  });
+});
+
+const photo = ref({
+  url: "",
+  album_name: "",
+  date_taken: 0,
+});
+
+socket.on("photo-update", (newPhoto) => {
+  photo.value = newPhoto;
+});
+</script>
diff --git a/client/src/components/RadioScreen.vue b/client/src/components/RadioScreen.vue
index 700481a..2804be1 100644
--- a/client/src/components/RadioScreen.vue
+++ b/client/src/components/RadioScreen.vue
@@ -1,28 +1,30 @@
 <template>
-  <div class="z-50">
-    <div class="relative overflow-hidden rounded-lg p-1 text-white">
-      <img
-        :alt="radio.o"
-        class="bg-proto_blue hover:bg-proto_blue/80 overflow-hidden truncate rounded-lg"
-        style="width: 150px"
-        :src="`https://www.nederland.fm/i/l/${radio.z}.gif`" />
-      <div
-        class="from-proto_blue absolute -top-1/2 -left-1/4 -z-10 h-52 w-52 animate-[spin_3s_linear_infinite] bg-gradient-to-r via-white to-white" />
+  <div class="absolute right-0 bottom-0 mr-6 place-items-end">
+    <div class="z-50">
+      <div class="relative overflow-hidden rounded-lg p-1 text-white">
+        <img
+          :alt="radio.o"
+          class="bg-proto_blue hover:bg-proto_blue/80 overflow-hidden truncate rounded-lg"
+          style="width: 150px"
+          :src="`https://www.nederland.fm/i/l/${radio.z}.gif`" />
+        <div
+          class="from-proto_blue absolute -top-1/2 -left-1/4 -z-10 h-52 w-52 animate-[spin_3s_linear_infinite] bg-gradient-to-r via-white to-white" />
+      </div>
+      <br />
+      <audio
+        id="radio"
+        autoplay
+        :src="radio.m"
+        frameborder="0"
+        width="400"
+        height="200"></audio>
+      <button
+        v-if="playButton"
+        class="bg-proto_blue hover:bg-proto_blue/80 my-auto mx-auto mt-5 flex rounded-md py-1 px-2 text-white shadow-md"
+        @click="playClick">
+        play audio
+      </button>
     </div>
-    <br />
-    <audio
-      id="radio"
-      autoplay
-      :src="radio.m"
-      frameborder="0"
-      width="400"
-      height="200"></audio>
-    <button
-      v-if="playButton"
-      class="bg-proto_blue hover:bg-proto_blue/80 my-auto mx-auto mt-5 flex rounded-md py-1 px-2 text-white shadow-md"
-      @click="playClick">
-      play audio
-    </button>
   </div>
 </template>
 
diff --git a/client/src/components/ScreenQueue.vue b/client/src/components/ScreenQueue.vue
new file mode 100644
index 0000000..930c204
--- /dev/null
+++ b/client/src/components/ScreenQueue.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="absolute bottom-0 mb-1 w-screen rounded-lg">
+    <div class="flex justify-between">
+      <div
+        class="border-proto_blue dark:bg-proto_secondary_gray-dark ml-4 mb-1 rounded-lg border-l-4 bg-white p-1 px-4 py-2 font-medium text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
+        Queue: {{ currentTimeStamp.totalDuration }}
+      </div>
+    </div>
+    <div class="mx-4 mb-1 grid grid-cols-5 gap-2 overflow-hidden">
+      <VideoCard
+        v-for="(video, index) in queueWithCurrent.slice(0, 5)"
+        :key="video.id"
+        :index="index"
+        :title="video.title"
+        :name="video.user.name"
+        :channel="video.channel"
+        :duration="video.durationFormatted"
+        :thumbnail="video.thumbnail.url"
+        :videoID="video.id"
+        :textScrolling="true"
+        :roundedCorners="true"
+        :progressBar="index === 0 ? queueProgress : 0"
+        :opacity="0.9" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import VideoCard from "@/components/VideoCard.vue";
+import { computed, defineProps } from "vue";
+
+const props = defineProps({
+  queue: Array,
+  currentTimeStamp: Object,
+  currentVideo: Object,
+});
+
+// Compute the queue with the currently playing video at the front
+const queueWithCurrent = computed(() => {
+  // if currentvideo = empty -> queue is empty
+  if (Object.keys(props.currentVideo).length === 0) return [];
+  return [props.currentVideo].concat(props.queue);
+});
+
+// Returns percentage of current queue
+const queueProgress = computed(() => {
+  return (props.currentTimeStamp.timestamp / props.currentVideo.duration) * 100;
+});
+</script>
diff --git a/client/src/components/ToggleSlider.vue b/client/src/components/ToggleSlider.vue
new file mode 100644
index 0000000..ef62955
--- /dev/null
+++ b/client/src/components/ToggleSlider.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="mx-auto flex">
+    <slot name="left">Left</slot>
+    <button
+      @click="$emit('click')"
+      type="button"
+      :class="isLeft ? 'bg-proto_blue' : 'bg-proto_green'"
+      class="relative mx-3 inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+      role="switch">
+      <span
+        :class="!isLeft ? 'translate-x-5' : 'translate-x-0'"
+        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
+      </span>
+    </button>
+    <slot name="right">Right</slot>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  isLeft: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+defineEmits(["click"]);
+</script>
diff --git a/client/src/components/VideoCard.vue b/client/src/components/VideoCard.vue
index 86f52a5..64673fa 100644
--- a/client/src/components/VideoCard.vue
+++ b/client/src/components/VideoCard.vue
@@ -11,7 +11,7 @@
       `">
       <div
         :style="`width:${progressBar}%;`"
-        class="bg-proto_blue absolute bottom-0 h-2 w-0 rounded-sm opacity-60"></div>
+        class="bg-proto_blue absolute bottom-0 h-2 w-0 rounded-sm opacity-60 duration-500 ease-linear"></div>
       <button
         :disabled="!clickable"
         @click="$emit('video-clicked', videoID)"
diff --git a/client/src/main.js b/client/src/main.js
index bfbd357..e3dd2db 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -23,6 +23,11 @@ import {
   faTrash,
   faQuestionCircle,
   faCaretDown,
+  faRadio,
+  faTv,
+  faRectangleList,
+  faBan,
+  faCamera,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -44,7 +49,12 @@ library.add(
   faSearch,
   faTrash,
   faCaretDown,
-  faQuestionCircle
+  faQuestionCircle,
+  faRadio,
+  faTv,
+  faRectangleList,
+  faBan,
+  faCamera
 );
 
 import "./assets/tailwind.css";
diff --git a/client/src/views/ProtubeScreen.vue b/client/src/views/ProtubeScreen.vue
index 82082ea..8abdb07 100644
--- a/client/src/views/ProtubeScreen.vue
+++ b/client/src/views/ProtubeScreen.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="dark:bg-proto_background_gray-dark">
-    <!-- empty filler block for the grid -->
     <div class="absolute top-0 mt-2 w-full">
       <div
         v-show="screenCode !== -1"
@@ -9,7 +8,11 @@
       </div>
     </div>
 
-    <div v-show="isPlayingVideo">
+    <div
+      v-show="
+        (isPlayingVideo && !screenSetting.showPhotos) ||
+        ytAutoPlayStarted === -1
+      ">
       <div :id="playerID" class="min-h-screen w-full" />
     </div>
 
@@ -18,71 +21,33 @@
       class="absolute top-0 right-0 mt-2">
       <div
         class="border-proto_blue dark:bg-proto_secondary_gray-dark mb-1 mr-4 mt-1 w-max rounded-lg border-r-4 bg-white px-4 py-2 font-medium text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
-        Want to add your own music? Visit www.protu.be!
+        Want to add your own music? Visit protu.be!
       </div>
     </div>
 
-    <div v-if="isPlayingVideo">
-      <div class="absolute bottom-0 mb-1 w-screen rounded-lg">
-        <div class="flex justify-between">
-          <div
-            class="border-proto_blue dark:bg-proto_secondary_gray-dark ml-4 mb-1 rounded-lg border-l-4 bg-white p-1 px-4 py-2 font-medium text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
-            Queue: {{ totalDuration }}
-          </div>
-        </div>
-        <div class="mx-4 mb-1 grid grid-cols-5 gap-2 overflow-hidden">
-          <VideoCard
-            v-for="(video, index) in queueWithCurrent.slice(0, 5)"
-            :key="video.id"
-            :index="index"
-            :title="video.title"
-            :name="video.user.name"
-            :channel="video.channel"
-            :duration="video.durationFormatted"
-            :thumbnail="video.thumbnail.url"
-            :videoID="video.id"
-            :textScrolling="true"
-            :roundedCorners="true"
-            :progressBar="index === 0 ? queueProgress : 0"
-            :opacity="0.9" />
-        </div>
-      </div>
-    </div>
+    <ScreenQueue
+      v-if="displayQueue"
+      :currentVideo="playerState.video"
+      :queue="queue"
+      :currentTimeStamp="currentTimeStamp" />
 
-    <div v-if="!isPlayingVideo" class="dark:text-white">
-      <div v-if="photo && !photo.error && photo.url !== ''">
-        <div class="flex h-screen justify-center overflow-x-hidden p-5">
-          <img
-            :src="photo.url"
-            class="dark:bg-proto_secondary_gray-dark -z-10 h-full max-w-none rounded-lg bg-white"
-            alt="Loading..." />
-        </div>
-        <div class="absolute top-0 left-0 mt-2 ml-4 rounded-lg text-lg">
-          <div
-            class="border-proto_blue dark:bg-proto_secondary_gray-dark rounded-lg border-l-4 bg-white p-1 px-4 py-2 text-gray-900 opacity-80 shadow-lg ring-1 ring-black ring-opacity-5 dark:text-gray-50">
-            Album: {{ photo.album_name }}<br />
-            Taken on: {{ photo.date_taken }}
-          </div>
-        </div>
-      </div>
-      <div
-        v-else-if="playerState.playerType === enums.TYPES.RADIO"
-        class="grid h-screen place-items-center">
-        <div class="text-4xl dark:text-white">
-          Nothing currently in the queue...<br />
-          Visit protu.be to add some tunes!
-        </div>
-      </div>
+    <RadioScreen
+      v-if="isPlayingRadio"
+      :radio="playerState.radio"
+      :volume="volume" />
 
-      <div
-        v-if="isPlayingRadio"
-        class=""
-        :class="
-          photo && !photo.error && photo.url !== ''
-            ? 'absolute right-0 bottom-0 mr-2 place-items-end'
-            : ' grid h-screen place-items-center'
-        ">
-        <RadioScreen :radio="playerState.radio" :volume="volume" />
+    <PhotosOverlay v-if="displayPhotos" />
+
+    <div
+      v-if="
+        playerState.playerType === enums.TYPES.VIDEO &&
+        !isPlayingVideo &&
+        !displayPhotos
+      "
+      class="grid h-screen place-items-center">
+      <div class="text-4xl dark:text-white">
+        Nothing currently in the queue...<br />
+        Visit protu.be to add some tunes!
       </div>
     </div>
   </div>
@@ -96,7 +61,6 @@
 <script setup>
 import RadioScreen from "@/components/RadioScreen";
 import ReconnectionHandler from "@/components/ReconnectionHandler";
-import VideoCard from "@/components/VideoCard.vue";
 import {
   onMounted,
   onBeforeUnmount,
@@ -108,11 +72,20 @@ import {
 import socket, { connectSocket } from "@/js/ScreenSocket";
 import YoutubePlayer from "youtube-player";
 import enums from "@/js/Enums";
+import ScreenQueue from "../components/ScreenQueue.vue";
+import PhotosOverlay from "../components/PhotosOverlay.vue";
 
 const playerID = "player-" + Math.random();
-const totalDuration = ref();
-const queueProgress = ref(0);
+const currentTimeStamp = ref({
+  timestamp: 0,
+  totalDuration: "00:00:00",
+});
+const ytAutoPlayStarted = ref(false);
 const queue = ref([]);
+const screenSetting = ref({
+  showQueue: true,
+  showPhotos: true,
+});
 let player;
 const playerState = ref({
   playerMode: enums.MODES.IDLE,
@@ -124,12 +97,6 @@ const playerState = ref({
   volume: 0,
 });
 
-const photo = ref({
-  url: "",
-  album_name: "",
-  date_taken: 0,
-});
-
 const emit = defineEmits(["youtube-media-error"]);
 const props = defineProps({
   volume: {
@@ -142,14 +109,6 @@ const props = defineProps({
   },
 });
 
-// Compute the queue with the currently playing video at the front
-const queueWithCurrent = computed(() => {
-  let currentVideo = playerState.value.video;
-  // if currentvideo = empty -> queue is empty
-  if (Object.keys(currentVideo).length === 0) return [];
-  return [currentVideo].concat(queue.value);
-});
-
 const isPlayingVideo = computed(
   () =>
     playerState.value.playerType === enums.TYPES.VIDEO &&
@@ -162,6 +121,18 @@ const isPlayingRadio = computed(
     playerState.value.playerMode === enums.MODES.IDLE
 );
 
+// show if playing video and when in showDefault or queue only
+const displayQueue = computed(() => {
+  return isPlayingVideo.value && screenSetting.value.showQueue;
+});
+
+// show photos if show photos, and the video is
+const displayPhotos = computed(() => {
+  if (isPlayingVideo.value && ytAutoPlayStarted.value === -1) return false;
+
+  return screenSetting.value.showPhotos;
+});
+
 onBeforeMount(() => {
   connectSocket();
 });
@@ -182,6 +153,10 @@ onMounted(() => {
   player.on("error", (event) => {
     emit("youtube-media-error", event.data);
   });
+
+  player.on("stateChange", (newstate) => {
+    ytAutoPlayStarted.value = newstate.data;
+  });
 });
 
 watch(
@@ -207,9 +182,8 @@ socket.on("player-update", (newState) => {
 });
 
 socket.on("new-video-timestamp", async (newStamp) => {
-  totalDuration.value = newStamp.totalDuration;
-  queueProgress.value =
-    (newStamp.timestamp / playerState.value.video.duration) * 100;
+  currentTimeStamp.value = newStamp;
+  // keep video in sync with backend
   if (Math.abs((await player.getCurrentTime()) - newStamp.timestamp) > 5) {
     player.seekTo(newStamp.timestamp, true);
     if ((await player.getPlayerState()) === 2) player.playVideo();
@@ -220,7 +194,7 @@ socket.on("queue-update", (newQueue) => {
   queue.value = newQueue.queue;
 });
 
-socket.on("photo-update", (newPhoto) => {
-  photo.value = newPhoto;
+socket.on("queue-photos-visibility-changed", (newSetting) => {
+  screenSetting.value = newSetting;
 });
 </script>
diff --git a/deployment.yml b/deployment.yml
new file mode 100644
index 0000000..3fa09ea
--- /dev/null
+++ b/deployment.yml
@@ -0,0 +1,38 @@
+version: "3.1"
+
+services:
+  mysql:
+    image: "mysql:8.0"
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: "thisisareallystrongpassword123"
+      MYSQL_DATABASE: "protube_production"
+      MYSQL_USER: "protube_mainuser"
+      MYSQL_PASSWORD: "hetan9t84anne"
+
+  nginx-proxy:
+    image: "jc21/nginx-proxy-manager:latest"
+    restart: always
+    ports:
+      - "80:80"
+      - "81:81"
+      - "443:443"
+    volumes:
+      - ./data:/data
+      - ./letsencrypt:/etc/letsencrypt
+
+  protube:
+    image: "hyttioaoac/protube:latest"
+    restart: "always"
+    pull_policy: "always"
+    volumes:
+      - ./protube/.env:/xxxx/.env
+      - ./protube/logs:/xxxx/logs
+
+  phpmyadmin:
+    image: phpmyadmin
+    restart: always
+    ports:
+      - 8080:80
+    environment:
+      - PMA_HOST=mysql
diff --git a/server/.env.example b/server/.env.example
index 03cfa9f..a6358f7 100644
--- a/server/.env.example
+++ b/server/.env.example
@@ -22,10 +22,8 @@ SSL_CERT_FILE=./ssl/selfsigned.crt
 # Make sure this corresponds to the host of the web app
 CORS_ORIGIN=https://localhost:3001
 
-# API key to access the Proto website's API (make sure this is set correctly on the website instance)
-LARAVEL_API_KEY=SECRET_KEY
-# API key to allow the Proto website instance to access the ProTube API
-PROTUBE_API_SECRET=321
+# API key to allow the Proto website and ProTube to use aech others API
+PROTUBE_SHARED_SECRET=321
 # Endpoint for OAuth2 authentication/API (Should be the URL of the local Proto website instance)
 LARAVEL_ENDPOINT=http://localhost:8080
 
diff --git a/server/docker-compose.yml b/server/docker-compose.yml
index 24cc4be..6d027f8 100644
--- a/server/docker-compose.yml
+++ b/server/docker-compose.yml
@@ -12,3 +12,14 @@ services:
       MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
     ports:
       - "${DATABASE_PORT}:3306"
+
+  phpmyadmin:
+    container_name: "${DOCKER_CONTAINER_NAME}-pma"
+    image: phpmyadmin
+    ports:
+      - "3002:80"
+    environment:
+      - "PMA_HOST=mysql"
+      - "PMA_USER=${DATABASE_USER}"
+      - "PMA_PASSWORD=${DATABASE_PASSWORD}"
+      - "PMA_PORT=3002"
diff --git a/server/modules/AuthService.js b/server/modules/AuthService.js
index 847de67..1f65a2f 100644
--- a/server/modules/AuthService.js
+++ b/server/modules/AuthService.js
@@ -14,7 +14,6 @@ passport.use(
       tokenURL: tokenURL,
       clientID: process.env.OAUTH_CLIENT_ID,
       clientSecret: process.env.OAUTH_CLIENT_SECRET,
-      //callbackURL: "http://localhost:3000/api/auth/example/callback"
     },
     async function (accessToken, refreshToken, profile, done) {
       let response = await fetch(
@@ -30,13 +29,14 @@ passport.use(
         await User.upsert({
           id: userData.id,
           name: userData.name,
-          admin: +userData.admin,
+          admin_from: +userData.admin_from,
+          admin_until: +userData.admin_until,
           refresh_token: refreshToken,
           access_token: accessToken,
         });
         return done(null, {
           id: userData.id,
-          admin: userData.admin,
+          admin_until: userData.admin_until,
           name: userData.name,
         });
       }
diff --git a/server/modules/DataBase.js b/server/modules/DataBase.js
index 1afdf7b..7c7d858 100644
--- a/server/modules/DataBase.js
+++ b/server/modules/DataBase.js
@@ -38,11 +38,13 @@ this.sequelize
 
 class User extends Model {
   isAdmin() {
-    return this.admin;
+    return (
+      this.admin_from < getCurrentUnix() && this.admin_until > getCurrentUnix()
+    );
   }
 
   hasValidRemote() {
-    return this.admin || this.valid_remote_until > getCurrentUnix();
+    return this.isAdmin() || this.valid_remote_until > getCurrentUnix();
   }
 
   setValidRemote() {
@@ -73,7 +75,8 @@ User.init(
       primaryKey: true,
     },
     name: DataTypes.TEXT,
-    admin: DataTypes.BOOLEAN,
+    admin_from: DataTypes.INTEGER,
+    admin_until: DataTypes.INTEGER,
     valid_remote_until: {
       type: DataTypes.INTEGER,
       defaultValue: 0,
@@ -106,7 +109,7 @@ exports.Session = this.sequelize.define("sessions", {
   data: DataTypes.TEXT,
 });
 
-//syncing tables
+//syncing tables and drop them in production upon (re)start
 this.sequelize
   .sync({ force: process.env.NODE_ENV === "production" })
   .then(() => {
diff --git a/server/modules/Middlewares.js b/server/modules/Middlewares.js
index 2a24fd1..7a4c1c5 100644
--- a/server/modules/Middlewares.js
+++ b/server/modules/Middlewares.js
@@ -45,7 +45,7 @@ exports.socketCheckAuthenticated = (socket, next) => {
 
 exports.socketCheckAdminAuthenticated = (socket, next) => {
   if (socket.request.isAuthenticated()) {
-    if (socket.request.user.admin) return next();
+    if (socket.request.user.isAdmin()) return next();
     else return next(new Error("forbidden"));
   }
   // accept localhost connections also to be admin (local client)
@@ -103,7 +103,7 @@ exports.screenCodeCheck = async (socket, next) => {
 };
 
 exports.checkBearerToken = (req, res, next) => {
-  if (req.token === process.env.PROTUBE_API_SECRET) return next();
+  if (req.token === process.env.PROTUBE_SHARED_SECRET) return next();
   return res.status(401).json({
     success: false,
     message: "Not Authorized for this API",
diff --git a/server/modules/PlaybackManager.js b/server/modules/PlaybackManager.js
index 242f890..0ba4728 100644
--- a/server/modules/PlaybackManager.js
+++ b/server/modules/PlaybackManager.js
@@ -9,7 +9,7 @@ let playerType = enums.TYPES.VIDEO;
 
 let selectedRadioStation = {};
 let playbackInterval;
-let volume = 75;
+let volume = 35;
 let timestamp = 0;
 
 exports.getCurrentVideoTimestamp = () => timestamp;
diff --git a/server/modules/ScreenSettings.js b/server/modules/ScreenSettings.js
new file mode 100644
index 0000000..000e1df
--- /dev/null
+++ b/server/modules/ScreenSettings.js
@@ -0,0 +1,21 @@
+let showQueue = true;
+let showPhotos = true;
+
+exports.getCurrentSetting = () => {
+  return {
+    showQueue: showQueue,
+    showPhotos: showPhotos,
+  };
+};
+
+exports.toggleQueueVisibility = () => {
+  showQueue = !showQueue;
+  eventBus.emit("queue-photos-visibility-changed", this.getCurrentSetting());
+  return enums.SUCCESS;
+};
+
+exports.togglePhotosVisibility = () => {
+  showPhotos = !showPhotos;
+  eventBus.emit("queue-photos-visibility-changed", this.getCurrentSetting());
+  return enums.SUCCESS;
+};
diff --git a/server/modules/api_endpoints/ProtubeApi.js b/server/modules/api_endpoints/ProtubeApi.js
index 03f2ff7..f4414e0 100644
--- a/server/modules/api_endpoints/ProtubeApi.js
+++ b/server/modules/api_endpoints/ProtubeApi.js
@@ -1,6 +1,7 @@
 const express = require("express");
 const bearerToken = require("express-bearer-token");
 const { checkBearerToken } = require("../Middlewares");
+const fetch = require("node-fetch");
 const { playSound } = require("../socket_endpoints/SoundBoard");
 const { playNextVideo, getPlayerMode } = require("../PlaybackManager");
 const { User } = require("../DataBase");
@@ -11,51 +12,29 @@ this.protubeApi.use(bearerToken());
 this.protubeApi.use(checkBearerToken);
 
 // Endpoint to update the admin status of a user id
-this.protubeApi.post("/updateadmin", async function (req, res) {
+this.protubeApi.post("/updateadmin/:userID", async function (req, res) {
+  const userID = parseInt(req.params.userID);
+
   logger.apiInfo(
-    `Attempt from ${req.hostname} to update the admin status of a user`
+    `Attempt from ${req.hostname} to update the admin status of user ${userID}`
   );
-  // Check if the required data is present and parse it
-  if (!req.body?.user_id || !req.body?.admin) {
-    logger.apiInfo("Request had incomplete body");
-    return res.send({ success: enums.FAIL, message: "Incomplete body" });
-  }
-  const userID = parseInt(req.body.user_id);
-  const isAdmin = parseInt(req.body.admin) === 1;
-
   // finding and updating the users admin status in the database
   const user = await User.findByPk(userID);
-
   if (!user) {
     logger.apiInfo("User is not found!");
     return res.send({ success: enums.FAIL, message: "User not found!" });
   }
-  user.admin = isAdmin;
-  await user.save();
-  logger.apiInfo(`User ${userID}'s new admin status: ${isAdmin}`);
-
-  if (isAdmin) return res.send({ success: enums.SUCCESS });
-
-  // disconnecting admin screen and remote sockets if present
-  const sockets = await io.of("/socket/remote/admin").fetchSockets();
-  const screenSockets = await io.of("/socket/screen/admin").fetchSockets();
-
-  for (const sock of sockets) {
-    await sock.request.user.reload();
-    if (sock.request.user.id === userID) {
-      logger.apiInfo(`Disconnected admin remote socket`);
-      sock.disconnect(true);
-    }
-  }
-
-  for (const sock of screenSockets) {
-    await sock.request.user.reload();
-    if (sock.request.user.id === userID) {
-      logger.apiInfo(`Disconnected admin screen socket`);
-      sock.disconnect(true);
-    }
-  }
-
+  // Fetch the new userdata and update the user
+  fetch(`${process.env.LARAVEL_ENDPOINT}/api/protube/userdetails`, {
+    headers: {
+      Authorization: "Bearer " + user.access_token,
+    },
+  }).then(async (response) => {
+    const userData = await response.json();
+    user.admin_from = +userData.admin_from;
+    user.admin_until = +userData.admin_until;
+    await user.save();
+  });
   return res.send({ success: enums.SUCCESS });
 });
 
diff --git a/server/modules/socket_endpoints/AdminRemote.js b/server/modules/socket_endpoints/AdminRemote.js
index 1867c34..8383651 100644
--- a/server/modules/socket_endpoints/AdminRemote.js
+++ b/server/modules/socket_endpoints/AdminRemote.js
@@ -13,6 +13,7 @@ const {
 const { adminResetScreenCode } = require("../ScreenCode");
 const radio = require("../RadioStations");
 const queueManager = require("../QueueManager");
+const screenSettings = require("../ScreenSettings");
 
 endpoint.use(socketCheckAdminAuthenticated);
 
@@ -40,6 +41,7 @@ endpoint.on("connection", (socket) => {
       volume: getVolume(),
       playerMode: getPlayerMode(),
       playerType: getPlayerType(),
+      screenSettings: screenSettings.getCurrentSetting(),
     });
   });
 
@@ -97,6 +99,24 @@ endpoint.on("connection", (socket) => {
     }
   });
 
+  socket.on("toggle-photos-visibility", (callback) => {
+    logger.adminInfo(`${socket.id} Requested to change the screensetting`);
+    try {
+      callback({ success: screenSettings.togglePhotosVisibility() });
+    } catch (e) {
+      callback(e.getInfo());
+    }
+  });
+
+  socket.on("toggle-queue-visibility", (callback) => {
+    logger.adminInfo(`${socket.id} Requested to change the screensetting`);
+    try {
+      callback({ success: screenSettings.toggleQueueVisibility() });
+    } catch (e) {
+      callback(e.getInfo());
+    }
+  });
+
   // change the screen's volume
   socket.on("set-new-volume", (volume, callback) => {
     logger.adminInfo(
@@ -121,10 +141,15 @@ eventBus.on("queue-update", () => {
   });
 });
 
+eventBus.on("queue-photos-visibility-changed", (newSetting) => {
+  endpoint.emit("queue-photos-visibility-changed", newSetting);
+});
+
 function updateAdminPanels() {
   endpoint.emit("update-admin-panel", {
     volume: getVolume(),
     playerMode: getPlayerMode(),
     playerType: getPlayerType(),
+    screenSettings: screenSettings.getCurrentSetting(),
   });
 }
diff --git a/server/modules/socket_endpoints/RemoteSocket.js b/server/modules/socket_endpoints/RemoteSocket.js
index 2dca179..d2ba8c4 100644
--- a/server/modules/socket_endpoints/RemoteSocket.js
+++ b/server/modules/socket_endpoints/RemoteSocket.js
@@ -19,7 +19,7 @@ endpoint.on("connection", (socket) => {
       const result = await youtube.search(
         request.query,
         request.continuationToken,
-        socket.request.user.admin,
+        socket.request.user.isAdmin(),
         queueManager.getQueue()
       );
       callback(result);
@@ -33,7 +33,7 @@ endpoint.on("connection", (socket) => {
     try {
       const videos = await youtube.getVideosInPlaylist(
         playlistId,
-        socket.request.user.admin
+        socket.request.user.isAdmin()
       );
       videos.forEach((video) => (video.user = formatUser(socket)));
       callback(queueManager.addAllFair(videos));
@@ -44,7 +44,10 @@ endpoint.on("connection", (socket) => {
 
   socket.on("fetch-then-add-video", async (videoId, callback) => {
     try {
-      const video = await youtube.getVideo(videoId, socket.request.user.admin);
+      const video = await youtube.getVideo(
+        videoId,
+        socket.request.user.isAdmin()
+      );
       video.user = formatUser(socket);
 
       callback({ success: queueManager.addFair(video) });
@@ -62,7 +65,7 @@ endpoint.on("connection", (socket) => {
         success: queueManager.removeVideos(
           videoIDs,
           socket.request.session.passport.user.id,
-          socket.request.user.admin
+          socket.request.user.isAdmin()
         ),
       });
     } catch (e) {
@@ -82,7 +85,7 @@ function formatUser(socket) {
   return {
     name: socket.request.user.name,
     id: socket.request.user.id,
-    admin: socket.request.user.admin,
+    admin: socket.request.user.isAdmin(),
   };
 }
 
diff --git a/server/modules/socket_endpoints/ScreenSocket.js b/server/modules/socket_endpoints/ScreenSocket.js
index c688993..08a02f4 100644
--- a/server/modules/socket_endpoints/ScreenSocket.js
+++ b/server/modules/socket_endpoints/ScreenSocket.js
@@ -2,6 +2,7 @@ const fetch = require("node-fetch");
 const endpoint = io.of("/socket/screen");
 const queueManager = require("../QueueManager");
 const playbackManager = require("../PlaybackManager");
+const { getCurrentSetting } = require("../ScreenSettings");
 let newPhotoInterval = null;
 let photo = null;
 
@@ -13,6 +14,8 @@ endpoint.on("connection", (socket) => {
   if (!photo) emitNewPhoto();
   socket.emit("photo-update", photo);
 
+  socket.emit("queue-photos-visibility-changed", getCurrentSetting());
+
   socket.emit("queue-update", {
     queue: queueManager.getQueue(),
     duration: queueManager.getTotalDurationFormatted(),
@@ -22,6 +25,10 @@ endpoint.on("connection", (socket) => {
     logger.screenInfo(`Disconnected socket: ${socket.id}`);
   });
 
+  socket.on("get-photo", (callback) => {
+    callback(photo);
+  });
+
   socket.emit("player-update", {
     playerType: playbackManager.getPlayerType(),
     playerMode: playbackManager.getPlayerMode(),
@@ -65,6 +72,10 @@ eventBus.on("new-video-timestamp", (timestamp) => {
   endpoint.emit("new-video-timestamp", timestamp);
 });
 
+eventBus.on("queue-photos-visibility-changed", (newSetting) => {
+  endpoint.emit("queue-photos-visibility-changed", newSetting);
+});
+
 function emitNewPhoto() {
   if (newPhotoInterval === null) {
     newPhotoInterval = setInterval(emitNewPhoto, 10000);