Hide everything that is not necessary for the first release.

src/App.vue

@@ -1,11 +1,22 @@
 <template>
   <v-app>
     <div class="flex flex-row">
-      <div class="border-r-2 z-30">
+      <!-- Side Bar for larger screens -->
+      <div v-if="!smAndDown" class="border-r-2 z-30">
         <side-bar></side-bar>
       </div>
-      
-      <div :class="['w-full', sideBarStore.sidebarWidth]">
+
+      <!-- Mobile -->
+      <div v-if="smAndDown" class="mobile-container">
+        <div v-if="!brandingStore.loading"
+             class="min-h-screen justify-center items-center"
+             :style="{ backgroundColor: brandingStore.colors.background }">
+          <router-view></router-view>
+        </div>
+      </div>
+
+      <!-- PC -->
+      <div v-if="!smAndDown" :class="['w-full', sideBarStore.sidebarWidth]">
         <div v-if="!brandingStore.loading"
              class="min-h-screen justify-center items-center"
              :style="{ backgroundColor: brandingStore.colors.background }">
@@ -14,20 +25,26 @@
       </div>
     </div>
   </v-app>
-
-<!--  <size-indicator></size-indicator>-->
 </template>
 
 <script async setup>
 import SideBar from "@/views/main/SideBar.vue";
-import SizeIndicator from "@/views/tools/SizeIndicator.vue";
 import { useBrandingStore } from "@/stores/brandingStore.js";
 import { useSideBarStore } from "@/stores/sideBarStore.js";
+import { useDisplay } from "vuetify";
 
+const { smAndDown } = useDisplay();
 const brandingStore = useBrandingStore();
-const sideBarStore = useSideBarStore(); 
+const sideBarStore = useSideBarStore();
 </script>
 
 <style scoped>
+/* Ensure content does not overflow on mobile */
+.mobile-container {
+  width: 100%; /* Full width for mobile */
+  max-width: 100vw; /* Prevent overflow */
+  overflow-x: hidden; /* Hide horizontal overflow */
+  padding: 0; /* Remove extra padding */
+  box-sizing: border-box; /* Include padding in width/height calculation */
+}
 </style>
-s