diff --git a/src/assets/index.css b/src/assets/index.css
index b5c61c9..00b5c41 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.content-container {
+    @apply flex bg-crust flex-col p-6 rounded-lg w-full text-contrast;
+  }
+  
+  .content-container-theatre {
+    @apply md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw];
+  }
+  
+  .content-container-normal {
+    @apply md:w-[70vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px];
+  }
\ No newline at end of file
diff --git a/src/components/ActionButtons.vue b/src/components/ActionButtons.vue
index ee353b2..5f823bf 100644
--- a/src/components/ActionButtons.vue
+++ b/src/components/ActionButtons.vue
@@ -5,7 +5,7 @@
           <v-icon name="md-download-round"></v-icon>
         </button>
       </a>
-      <button v-if="showTheatreMode" @click="$emit('toggleTheatreMode')" class="invisible xl:visible px-2 py-1.5 rounded-lg bg-purple">
+      <button v-if="showTheatreMode" @click="$emit('toggleTheatreMode')" class="hidden xl:inline px-2 py-1.5 rounded-lg bg-purple">
         <v-icon name="fa-expand"></v-icon>
       </button>
       <button v-if="showShare" @click="$emit('toggleShareModal')" class="px-2 py-1.5 rounded-lg bg-purple">
diff --git a/src/components/TheatreModeToggle.vue b/src/components/TheatreModeToggle.vue
deleted file mode 100644
index 2ce869c..0000000
--- a/src/components/TheatreModeToggle.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <button @click="toggleTheatreMode" class="invisible xl:visible px-2 py-1.5 rounded-lg bg-purple">
-    <v-icon name="fa-expand"></v-icon>
-  </button>
-</template>
-
-<script lang="ts">
-export default {
-  emits: ['toggle'],
-  methods: {
-    toggleTheatreMode() {
-      this.$emit('toggle')
-    }
-  }
-}
-</script>
diff --git a/src/views/ClipView.vue b/src/views/ClipView.vue
index 7f9a64c..8a5227d 100644
--- a/src/views/ClipView.vue
+++ b/src/views/ClipView.vue
@@ -100,10 +100,8 @@ export default {
     <VueTitle :title=" 'Clip - ' + data.title"></VueTitle>
     <div
       :class="[
-        'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
-        isTheatreMode 
-          ? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]' 
-          : 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
+        'content-container',
+        isTheatreMode ? 'content-container-theatre' : 'content-container-normal'
       ]"
     >
       <div class="w-full mx-auto rounded-lg mb-5">
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index 2df393b..70a060d 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -110,10 +110,8 @@ export default {
     <vue-title :title="data.username"></vue-title>
     <div
       :class="[
-        'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
-        isTheatreMode 
-          ? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]' 
-          : 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
+        'content-container',
+        isTheatreMode ? 'content-container-theatre' : 'content-container-normal'
       ]"
     >
       <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
diff --git a/src/views/VodView.vue b/src/views/VodView.vue
index 62bbaa5..2f31bc5 100644
--- a/src/views/VodView.vue
+++ b/src/views/VodView.vue
@@ -105,10 +105,8 @@ export default {
     <vue-title :title="'VOD - ' + data.title"></vue-title>
     <div
       :class="[
-        'flex bg-crust flex-col p-6 rounded-lg w-full text-contrast',
-        isTheatreMode 
-          ? 'md:w-[62vw] lg:w-[75vw] xl:w-[75vw] 2xl:w-[68vw]' 
-          : 'md:w-[80vw] lg:w-[70vw] xl:w-[60vw] 2xl:w-[50vw] max-w-[1200px]'
+        'content-container',
+        isTheatreMode ? 'content-container-theatre' : 'content-container-normal'
       ]"
     >
       <div class="w-full mx-auto rounded-lg mb-5">