diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index ca04db4..d9ff04c 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -12,6 +12,7 @@ import AudioPlayer from '@/components/AudioPlayer.vue'
 import AboutTab from '@/components/user/AboutTab.vue'
 import ShareModal from '@/components/popups/ShareButtonModal.vue'
 import VueTitle from '@/components/VueTitle.vue'
+import TheatreModeToggle from '@/components/TheatreModeToggle.vue'
 
 import type { StreamerData } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -43,7 +44,8 @@ export default {
       status,
       videoOptions,
       audioOptions,
-      shareModalVisible: ref(false)
+      shareModalVisible: ref(false),
+      isTheatreMode: ref(false)
     }
   },
   async mounted() {
@@ -73,7 +75,8 @@ export default {
     AudioPlayer,
     AboutTab,
     ShareModal,
-    VueTitle
+    VueTitle,
+    TheatreModeToggle
   },
   methods: {
     truncate,
@@ -81,6 +84,9 @@ export default {
     getSetting,
     toggleShareModal() {
       this.shareModalVisible = !this.shareModalVisible
+    },
+    toggleTheatreMode() {
+      this.isTheatreMode = !this.isTheatreMode
     }
   }
 }
@@ -188,6 +194,9 @@ export default {
           <button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
             <v-icon name="fa-share-alt"></v-icon>
           </button>
+          <button @click="toggleTheatreMode" class="px-2 py-1.5 rounded-lg bg-purple">
+              <v-icon name="fa-expand"></v-icon>
+          </button>
         </div>
       </div>
 
diff --git a/src/views/VodView.vue b/src/views/VodView.vue
index eb1ef20..81d1e6e 100644
--- a/src/views/VodView.vue
+++ b/src/views/VodView.vue
@@ -9,6 +9,7 @@ import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 import AboutTab from '@/components/user/AboutTab.vue'
 import ShareModal from '@/components/popups/ShareButtonModal.vue'
+import TheatreModeToggle from '@/components/TheatreModeToggle.vue'
 
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
@@ -41,7 +42,8 @@ export default {
       status: ref<'ok' | 'error'>(),
       videoOptions,
       time: ref(0),
-      shareModalVisible: ref(false)
+      shareModalVisible: ref(false),
+      isTheatreMode: ref(false)
     }
   },
   async mounted() {
@@ -63,7 +65,8 @@ export default {
     LoadingScreen,
     AboutTab,
     ShareModal,
-    VueTitle
+    VueTitle,
+    TheatreModeToggle
   },
   methods: {
     truncate,
@@ -77,6 +80,9 @@ export default {
     getSetting,
     toggleShareModal() {
       this.shareModalVisible = !this.shareModalVisible
+    },
+    toggleTheatreMode() {
+      this.isTheatreMode = !this.isTheatreMode
     }
   }
 }
@@ -138,6 +144,9 @@ export default {
           <button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
             <v-icon name="fa-share-alt"></v-icon>
           </button>
+          <button @click="toggleTheatreMode" class="px-2 py-1.5 rounded-lg bg-purple">
+              <v-icon name="fa-expand"></v-icon>
+          </button>
         </div>
       </div>