diff --git a/src/App.vue b/src/App.vue
index 8c7ec08..44ed6d3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,48 @@
-<template >
+<template>
+  <button v-if="isMobile" @click="viewChannels = !viewChannels" id="mobi-switch" class="button">
+    {{ viewChannels ? 'Show Chat' : 'Show Menu' }}
+  </button>
   <main class="container" v-if="done && loggedin">
-
-    <form enctype='multipart/form-data' id="file-form" class="row" @submit.prevent="greet">
+	<div class="container-v" v-show="!isMobile || viewChannels">
+	  <img @click="openSettings()" v-bind:src='myPfp' width='60px' height='60px' class='cui'
+      style='margin-bottom:0px;' />
+	  
+	  <ServerList
+      :userServers="userServers"
+      :appState="appState"
+      :serverID="serverID"
+      :textChannel="textChannel"
+      @changeServer="change_server"
+      /> 
+	  
+	  <button class="createSButton" @click="createServer()">
+        <h2 style="margin-top: 12px">+</h2>
+      </button>
+	</div>
+	<ChannelList
+	:appState="appState"
+	:serverID="serverID"
+	:textChannel="textChannel"
+	:done="done"
+	:userServers="userServers"
+	@showSID="showSID"
+	@changeChannel="change_channel"
+	@createChannel="create_channel"
+	@deleteChannel="deleteChannel"
+	v-show="!isMobile || viewChannels"
+	/>
+	<div class="container-v" style="flex-shrink: 1; min-width: 0;" v-show="!isMobile || !viewChannels">
+	  <div id="channel-header">
+        <h3>{{textChannel}}</h3>
+      </div>
+	  <ChatWindow
+        :appState="appState"
+        :serverID="serverID"
+        :textChannel="textChannel"
+        :get_date="get_date"
+      />
+	<div>
+	<form enctype='multipart/form-data' id="file-form" class="row" @submit.prevent="greet">
       <input id="file-upload" type="file" @change="onFileChange" />
       <div v-if="selectedFileUrl" class="file-preview">
         <div style="font-size:12px;color:#aaa;">
@@ -26,39 +67,18 @@
       />
       <button id="send" type="submit" @click="send_message(message)">Send</button>
     </form>
-
-    
-    <img @click="openSettings()" v-bind:src='myPfp' width='60px' height='60px' class='cui'
-      style='margin-bottom:0px;' />
-    <button class="createSButton" @click="createServer()">
-      <h2 style="margin-top: 12px">+</h2>
-    </button>
-
-
-    <ServerList
-      :userServers="userServers"
+	</div>
+	</div>
+    <div v-show="!isMobile || viewChannels" style="margin-left: auto;">
+	  <ServerUsersList
       :appState="appState"
       :serverID="serverID"
-      :textChannel="textChannel"
-      @changeServer="change_server"
-    />  
-    
+      />
+	</div>
     <div v-if="showSIDvar" class="login" style="display:flex;flex-direction:row; left:100px; top:50px; height:30px; width:660px; z-index:999999;">
       <i style="font-size: 12px"> {{serverID}} </i>
     </div>
 
-      <ChannelList
-      :appState="appState"
-      :serverID="serverID"
-      :textChannel="textChannel"
-      :done="done"
-      :userServers="userServers"
-      @showSID="showSID"
-      @changeChannel="change_channel"
-      @createChannel="create_channel"
-	  @deleteChannel="deleteChannel"
-      />
-
       <div v-if="createChannelPopUp" class="login" style="display:flex;flex-direction:row; left:200px; top:100px; height:50px; width:280px">
         <input id="greet-input" v-model="nchn" style="width:200px" placeholder="new_channel_name..."/>
         <button id="send" type="submit" style="width:80px" @click="createChannel()">Create</button>
@@ -79,22 +99,6 @@
         <button class="csvb" @click="createServerCancel()">Cancel</button>
       </div>
 
-      <ChatWindow
-        :appState="appState"
-        :serverID="serverID"
-        :textChannel="textChannel"
-        :get_date="get_date"
-      />
-
-      <div id="channel-header">
-        <h3>{{this.textChannel}}</h3>
-      </div>
-
-      <ServerUsersList
-      :appState="appState"
-      :serverID="serverID"
-      />
-
   </main>
     <main v-else-if="!loggedin">
       <LogInWindow :logInSelected='logInSelected' :lError='lError' :lErrorText='lErrorText' @changeLogIn='changeLogIn' @login='logIn' @signup='signUp' />
@@ -103,6 +107,20 @@
 	<SettingsWindow :userName="username" :profilePic="myPfp" v-if="settingsOpen" @closeSettings="closeSettings" @logOut="logOut" @setOwnPfp="setOwnPfp" />
 </template>
 
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+const MOBILE_BREAKPOINT = 768;
+
+
+const width = ref(window.innerWidth);
+function onResize() { width.value = window.innerWidth };
+onMounted(() => window.addEventListener('resize', onResize));
+onUnmounted(() => window.removeEventListener('resize', onResize));
+
+const isMobile = computed(() => width.value < MOBILE_BREAKPOINT);
+const viewChannels = ref(false);
+</script>
+
 <script>
 import app from "./app.js"
 import ChatWindow from "./components/chatWindow.vue"
diff --git a/src/components/channelList.vue b/src/components/channelList.vue
index c860048..740b2e1 100644
--- a/src/components/channelList.vue
+++ b/src/components/channelList.vue
@@ -13,14 +13,14 @@
         class="channel_button main"
         :class="{ active: div.channelTag === textChannel }"
       >
-	  <template v-if="this.confirmDelete==index">
+	  <template v-if="confirmDelete==index">
 		Confirm delete?
 	  </template>
 	  <template v-else>
         # {{ div.channelTag }}
 	  </template>
       </button>
-	  <template v-if="this.confirmDelete==index">
+	  <template v-if="confirmDelete==index">
 	    <button class="channel_options always_on" @click="deleteChannel(currentServer.serverID, div.channelTag)">
 		<i class="pi pi-check"/>
 	  </button>
@@ -28,7 +28,7 @@
 		  <i class="pi pi-times" />
 	  </button>
 	  </template>
-	  <template v-else-if="this.optionsOpenIndex==index">
+	  <template v-else-if="optionsOpenIndex==index">
 	  <button class="channel_options always_on" @click="askDelete(index)">
 		  <i class="pi pi-trash"/>
 	  </button>
@@ -111,6 +111,7 @@ export default {
 <style>
 .chanels {
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
 }
 .server-header {
diff --git a/src/components/login.vue b/src/components/login.vue
index f44ef7b..44541fe 100644
--- a/src/components/login.vue
+++ b/src/components/login.vue
@@ -6,7 +6,7 @@
         <h1 style="margin-top: 100px;">Login</h1>
         <input class="username" v-model="lusername" placeholder="Username..." />      
         <input type="password" class="password" v-model="password" placeholder="Password..." /> 
-        <button class="loginb" type="submit" @click="$emit('login', this.lusername, this.password)">Login</button>
+        <button class="loginb" type="submit" @click="$emit('login', lusername, password)">Login</button>
         </div>
         <button class="change-login" type="submit" @click="$emit('changeLogIn')">I don't have an account</button>
       </main>
@@ -18,7 +18,7 @@
         <input class="e-mail" v-model="lemail" placeholder="E-mail Address..." />      
         <input class="username" style="margin-top: 10px" v-model="lusername" placeholder="Username..." />      
         <input type="password" class="password" v-model="password" placeholder="Password..." /> 
-        <button class="loginb" type="submit" @click="$emit('signup', this.lusername, this.password, this.lemail)">SignUp</button>
+        <button class="loginb" type="submit" @click="$emit('signup', lusername, password, lemail)">SignUp</button>
         </div>
         <button class="change-login" type="submit" @click="$emit('changeLogIn')">I have an account</button>
       </main>
diff --git a/src/components/serverList.vue b/src/components/serverList.vue
index edb66c0..9e1368d 100644
--- a/src/components/serverList.vue
+++ b/src/components/serverList.vue
@@ -37,11 +37,8 @@ export default {
 .server_list {
   transition: 0.2s; 
   background-color: var(--dark-foreground-element-color);
-  position: absolute;
-  top: 75px;
-  left: 5px;
-  height: calc(100vh - 155px);
   width: 60px;
+  flex-grow: 1;
   z-index: 9999;
   border-radius: 40px 40px 40px 40px;
   border: 2px solid transparent;
diff --git a/src/components/serverUsersList.vue b/src/components/serverUsersList.vue
index 3ccc3d2..da8ae80 100644
--- a/src/components/serverUsersList.vue
+++ b/src/components/serverUsersList.vue
@@ -30,11 +30,11 @@ export default {
 
 <style scoped>
 .server-users {
+  flex-grow: 1;
   overflow-y: hidden;
   overflow-x: scroll;
   transition: 0.2s;
   background-color: var(--dark-foreground-element-color);
-  position: absolute;
   top: 5px;
   right: 5px;
   height: calc(100vh - 11px);
diff --git a/src/style.css b/src/style.css
index 3f61401..c03c73d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -59,12 +59,20 @@ input[type="file"] {
   background-color:var(--main-font-color);
 }
 .container {
-  margin: 0;
   height: 100%;
-  /*padding-top: 10vh;*/
-  /*display: flex;
-  --flex-direction: column;*/
-  justify-content: center;
+  width: 100vw;
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  text-align: center;
+}
+
+.container-v{
+  margin: 4px 4px 4px 4px;
+  gap: 3px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
   text-align: center;
 }
 
@@ -128,7 +136,6 @@ height: 40px; text-align:center; background-color:var(--dark-foreground-element-
 }
 
 .cui {
-  position: absolute;
   top: 5px;
   left: 5px;
   border-radius: 40px 40px 40px 40px;
@@ -137,13 +144,9 @@ transition: 0.2s;
 }
 
 .row {
+  min-width: 300px;
   display: flex;
   justify-content: center;
-  position: absolute;
-  bottom: 5px;
-  right: 0.5vw;
-  left: 300px;
-  width: calc(100vw - 377px);
   z-index: 9999;
 }
 
@@ -167,8 +170,6 @@ transition: 0.2s;
 .createSButton {
     transition: 0.2s; 
     background-color: var(--dark-foreground-element-color);
-    position: absolute;
-    top:calc(100vh - 70px);
     left: 5px;
     height: 60px;
     width: 60px;
@@ -178,7 +179,6 @@ transition: 0.2s;
     text-align: center;
   }
   .login {
-    
     background-color: var(--dark-foreground-element-color);
     position: absolute;
     display: flex;
@@ -212,7 +212,6 @@ transition: 0.2s;
     overflow-x: scroll;
     transition: 0.2s;
     background-color: var(--dark-foreground-element-color);
-    position: absolute;
     top: 5px;
     right: 5px;
     height: calc(100vh - 11px);
@@ -223,12 +222,8 @@ transition: 0.2s;
   }
 
   .chanels {
-
     background-color: var(--normal-foreground-element-color);
-    position: absolute;
-    top: 5px;
-    left: 73px;
-    height: calc(100vh - 15px);
+    margin: 5px 0 5px 0;
     width: 220px;
     border: 2px  solid transparent;
     display: flex;
@@ -265,25 +260,23 @@ transition: 0.2s;
 #chat {
   display: flex;
   flex-direction: column-reverse;
-  position: absolute;
-  left: 300px;
-  width: calc(100vw - 372px);
-  top: 68px;
-  height: calc(100vh - 120px);
+  width: 100%;
+  min-width: 300px;
   overflow-y: scroll;
+  flex-grow: 1;
 }
 
 #chat .message img{
   max-width:480px;
   border-radius: 8px;
-  width: auto;
+  width: 100%;
   height: auto;
 }
 
 #chat .message video{
   max-width:480px;
   border-radius: 8px;
-  width: auto;
+  width: 100%;
   height: auto;
 }
 
@@ -301,12 +294,9 @@ transition: 0.2s;
 #channel-header {
   justify-content: center;
   text-align: left;
-  position: absolute;
   top: 5px;
   border-bottom: 2px solid var(--dark-foreground-element-color);
-  width: calc(100vw - 380px);
   height: 63px;
-  left: 300px;
   padding-left: 8px;
   background-color: var(--normal-foreground-element-color);
   box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
@@ -654,3 +644,10 @@ button {
 input::placeholder {
   color: var(--main-font-color);
 }
+
+#mobi-switch {
+	position: absolute;
+	z-index: 10000;
+	left: 40%;
+	top: 40px;
+}
\ No newline at end of file