diff --git a/app.vue b/app.vue
index cb5ec34..7af306b 100644
--- a/app.vue
+++ b/app.vue
@@ -33,7 +33,7 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
-	background: var(--optional-body-background);
+	background: var(--optional-chat-background);
   background-color: var(--chat-background-color);
   margin: 0;
 }
diff --git a/components/Button.vue b/components/Button.vue
index 66706de..fb44cf2 100644
--- a/components/Button.vue
+++ b/components/Button.vue
@@ -21,7 +21,7 @@ const props = defineProps<{
 	background-color: var(--primary-color);
 	color: var(--text-color);
 
-	padding: 0.4em 0.75em;
+	padding: 0.7dvh 1.2dvw;
 	font-size: 1.1em;
 	transition: background-color 0.2s;
 
diff --git a/components/Channel.vue b/components/Channel.vue
index 98f210e..0f48323 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -23,14 +23,14 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 .channel-list-link {
 	text-decoration: none;
 	color: inherit;
-	padding-left: .25em;
-	padding-right: .25em;
+	padding-left: .5dvw;
+	padding-right: .5dvw;
 }
 
 .channel-list-link-container {
 	text-align: left;
 	display: flex;
-	height: 1.5em;
+	height: 4dvh;
 	white-space: nowrap;
 	align-items: center;
 }
diff --git a/components/Message.vue b/components/Message.vue
index eb073ac..dce8ed4 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -188,12 +188,12 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style module>
 .message-text ul, h1, h2, h3, h4, h5, h6 {
-	padding-top: .5em;
-	padding-bottom: .5em;
+	padding-top: 1dvh;
+	padding-bottom: 1dvh;
 	margin: 0;
 }
 
 .message-text ul  {
-	padding-left: 1em;
+	padding-left: 2dvw;
 }
 </style>
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index fff4a5c..18b9ac5 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -9,28 +9,11 @@
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
-				<div id="message-box-left-elements">
-					<span class="message-box-button">
-						<Icon name="lucide:file-plus-2" />
-					</span>
-				</div>
-
-				<div id="message-textarea">
-					<div id="message-textbox-input" class=""
-							role="textbox" ref="messageTextboxInput"
-							autocorrect="off" spellcheck="true" contenteditable="true"
-							@keydown="handleTextboxKeyDown" @input="handleTextboxInput">
-					</div>
-				</div>
-				
-				<div id="message-box-right-elements">
-					<button class="message-box-button" type="submit">
-						<Icon name="lucide:send" />
-					</button>
-					<span class="message-box-button">
-						<Icon name="lucide:image-play" />
-					</span>
-				</div>
+				<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
+					name="message-input" autocomplete="off">
+				<button id="submit-button" type="submit">
+					<Icon name="lucide:send" />
+				</button>
 			</form>
 		</div>
 	</div>
@@ -123,38 +106,11 @@ function pushMessage(message: MessageResponse) {
 	messages.value.push(message);
 }
 
-function handleTextboxKeyDown(event: KeyboardEvent) {
-	if (event.key === "Enter" && event.shiftKey && messageTextboxInput.value) {
-		// this enters a newline, due to not preventing default
-	} else if (event.key === "Enter") {
-		event.preventDefault()
-		sendMessage(event)
-	}
-	
-	adjustTextboxHeight()
-}
-
-function handleTextboxInput() {
-	if (messageTextboxInput.value) {
-        messageInput.value = messageTextboxInput.value.innerText;
-    }
-
-	adjustTextboxHeight()
-}
-
-// this technically uses pixel units, but it's still set using dynamic units
-function adjustTextboxHeight() {
-	if (messageTextboxInput.value && messageTextboxDisplay.value) {
-		messageTextboxInput.value.style.height = "auto"
-		messageTextboxInput.value.style.height = `${messageTextboxInput.value.scrollHeight}px`
-	}
-}
-
 const messages = ref<MessageResponse[]>([]);
-const messageInput = ref<string>("");
+
+const messageInput = ref<string>();
+
 const messagesElement = ref<HTMLDivElement>();
-const messageTextboxInput = ref<HTMLDivElement>();
-const messageTextboxDisplay = ref<HTMLDivElement>();
 
 if (messagesRes) messages.value = messagesRes;
 
@@ -202,21 +158,14 @@ if (accessToken && apiBase) {
 
 function sendMessage(e: Event) {
 	e.preventDefault();
-	if (messageInput.value && messageInput.value.trim() !== "") {
-		const message = {
-			message: messageInput.value.trim().replace(/\n/g, "<br>") // trim, and replace \n with <br>
-		}
-
-		console.log("message:", message);
+	const message = {
+		message: messageInput.value
+	}
+	console.log("message:", message);
+	if (message.message) {
 		ws.send(JSON.stringify(message));
-
-		// reset input field
-		messageInput.value = ""
-		if (messageTextboxInput.value) {
-			messageTextboxInput.value.innerText = ""
-		}
-
-		adjustTextboxHeight()
+		messageInput.value = "";
+		console.log("MESSAGE SENT!!!");
 	}
 }
 
@@ -292,63 +241,38 @@ router.beforeEach((to, from, next) => {
 
 <style scoped>
 #message-area {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-rows: 8fr 1fr;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
-	flex-grow: 1;
 }
 
 #message-box {
-	margin-bottom: 2dvh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-content: center;
+	border: 1px solid var(--padding-color);
+	padding-bottom: 1dvh;
+	padding-top: 1dvh;
+	margin-bottom: 1dvh;
 	margin-left: 1dvw;
 	margin-right: 1dvw;
-
-	padding-left: 2%;
-	padding-right: 2%;
-	
-	align-items: center;
-	
-	color: var(--text-color);
-	border: 1px solid var(--padding-color);
-	background-color: var(--chatbox-background-color);
 }
 
 #message-form {
 	display: flex;
-	flex-direction: row;
-	gap: .55em;
+	justify-content: center;
 }
 
-#message-textarea {
-	flex-grow: 1;
-	min-height: 2.35em;
-}
-
-#message-textbox-input {
-	width: 100%;
-	max-height: 50dvh;
-
-	padding: 0.5em 0;
-	user-select: text;
-
-	font-family: inherit;
-	font-size: inherit;
-	line-height: normal;
+#message-box-input {
+	width: 80%;
+	background-color: var(--sidebar-background-color);
 	border: none;
-	background-color: #40404000; /* completely transparent colour */
-
-	text-align: left;
-	word-break: break-word;
-	overflow-wrap: break-word;
-	
-	overflow-y: auto;
-}
-
-#message-box-left-elements, #message-box-right-elements {
-	display: flex;
-	align-items: center;
+	color: inherit;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 }
 
 #messages {
@@ -359,7 +283,7 @@ router.beforeEach((to, from, next) => {
 	padding-right: 1dvw;
 }
 
-.message-box-button {
+#submit-button {
 	background-color: inherit;
 	border: none;
 	color: var(--primary-color);
@@ -367,7 +291,7 @@ router.beforeEach((to, from, next) => {
 	font-size: 1.5em;
 }
 
-.message-box-button:hover {
+#submit-button:hover {
 	color: var(--primary-highlighted-color);
 	cursor: pointer;
 }
diff --git a/layouts/client.vue b/layouts/client.vue
index 7227644..a1ee86d 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -3,28 +3,24 @@
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
 		<div id="homebar">
 			<div class="homebar-item">
-				<marquee>
-					gorb!!!!!
-				</marquee>
+				main bar
 			</div>
 		</div>
-		<div id = "page-content">
-			<div id="left-column">
-				<NuxtLink id="home-button" href="/">
-					<img class="sidebar-icon" src="/public/icon.svg"/>
-				</NuxtLink>
-				<div id="servers-list">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-						<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
-						<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
-					</NuxtLink>
-				</div>
-				<NuxtLink id="settings-menu" href="/settings">
-					<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
+		<div id="left-column">
+			<NuxtLink id="home-button" href="/">
+				<img class="sidebar-icon" src="/public/icon.svg"/>
+			</NuxtLink>
+			<div id="servers-list">
+				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+					<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
+					<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
 				</NuxtLink>
 			</div>
-			<slot />
+			<NuxtLink id="settings-menu" href="/settings">
+				<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
+			</NuxtLink>
 		</div>
+		<slot />
 	</div>
 </template>
 
@@ -38,10 +34,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 <style>
 #client-root {
+	/* border: 1px solid white; */
 	height: 100dvh;
-	width: 100dvw;
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: 1fr 4fr 18fr 4fr;
+	grid-template-rows: 4dvh auto;
 	text-align: center;
 }
 
@@ -51,59 +48,37 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 .visible {
 	opacity: 100%;
-	transition: opacity 500ms;
+	transition-duration: 500ms;
 }
 
 #homebar {
-	min-height: 4dvh;
+	grid-row: 1;
+	grid-column: 1 / -1;
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
 	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
-	border-bottom: 1px solid var(--padding-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
-
 }
 
-.homebar-item {
-	width: 100dvw;
+#client-root>div:nth-child(-n+4) {
+	border-bottom: 1px solid var(--padding-color);
 }
 
-#page-content {
+#__nuxt {
 	display: flex;
-	flex-direction: row;
-	flex-grow: 1;
-    overflow: auto;
+	flex-flow: column;
 }
 
-#left-column {
-	display: flex;
-	flex-direction: column;
-	gap: .75em;
-	padding-left: .25em;
-	padding-right: .25em;
-	border-right: 1px solid var(--padding-color);
-	background: var(--optional-sidebar-background);
-	background-color: var(--sidebar-background-color);
-	padding-top: .5em;
+.grid-column {
+	padding-top: 1dvh;
 }
 
-#servers-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1em;
-	width: 3.2rem;	
-}
-
-#middle-left-column {
-	padding-left: .25em;
-	padding-right: .25em;
-	border-right: 1px solid var(--padding-color);
-	min-width: 10em;
-	overflow-y: scroll;
-	overflow-x: hidden;
+#home {
+	padding-left: .5dvw;
+	padding-right: .5dvw;
 }
 
 .sidebar-icon {
@@ -111,14 +86,43 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	height: 3rem;
 }
 
+#current-info {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+#left-column {
+	display: flex;
+	flex-direction: column;
+	gap: 2dvh;
+	padding-left: .5dvw;
+	padding-right: .5dvw;
+	border-right: 1px solid var(--padding-color);
+	background: var(--optional-sidebar-background);
+	background-color: var(--sidebar-background-color);
+	padding-top: 1.5dvh;
+}
+
+#middle-left-column {
+	padding-left: 1dvw;
+	padding-right: 1dvw;
+	border-right: 1px solid var(--padding-color);
+}
+
 #home-button {
 	border-bottom: 1px solid var(--padding-color);
-	padding-bottom: .375em;
+	padding-bottom: 1dvh;
 }
 
 #settings-menu {
 	position: absolute;
-	bottom: .25em
+	bottom: .25dvh
+}
+
+#servers-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1dvh;
 }
 
 </style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 41deadf..f970926 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,19 +1,6 @@
 <template>
   <NuxtLayout>
-    <div id="left-bar">
-    </div>
-	<div id="middle-bar">
-      <h1>
-        Welcome to gorb :3
-      </h1>
-	  <p>
-		Click on a guild to the left to view a guild.
-		<br>
-		Or click the button in the bottom left to join a guild.
-	  </p>
-    </div>
-	<div id="right-bar">
-    </div>
+
   </NuxtLayout>
 </template>
 
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 5c55655..6bdcc7c 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -83,36 +83,36 @@ function handleMemberClick(member: GuildMemberResponse) {
 <style>
 
 #middle-left-column {
-	padding-left: .5em;
-	padding-right: .5em;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 	border-right: 1px solid var(--padding-color);
 	background: var(--optional-channel-list-background);
 	background-color: var(--sidebar-background-color);
 }
 
 #members-container {
-	width: 12rem;
+	padding-top: 1dvh;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 	border-left: 1px solid var(--padding-color);
-	background: var(--optional-member-list-background);
 }
 
 #members-list {
 	display: flex;
 	flex-direction: column;
-	overflow-x: hidden;
 	overflow-y: scroll;
-	padding-left: 1.25em;
-	padding-right: 1.25em;
-	padding-top: 0.75em;
-	padding-bottom: 0.75em;
-	max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
+	max-height: 92dvh;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
+	margin-top: 1dvh;
 }
 
 .member-item {
-	display: flex;
+	display: grid;
+	grid-template-columns: 2dvw 1fr;
 	margin-top: .5em;
 	margin-bottom: .5em;
-	gap: .5em;
+	gap: 1em;
 	align-items: center;
 	text-align: left;
 	cursor: pointer;
@@ -121,7 +121,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 #channels-list {
 	display: flex;
 	flex-direction: column;
-	gap: .5em;
+	gap: 1dvh;
 }
 
 .member-avatar {
diff --git a/pages/settings.vue b/pages/settings.vue
index 3aac506..1380283 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -3,13 +3,6 @@
     <div id="settings-page">
       <div id="sidebar">
         <ul>
-          <p>
-            <span @click="$router.go(-1)">
-              <Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
-            </span>
-          </p>
-          <span class="spacer"></span>
-
           <!-- categories and dynamic settings pages -->
           <div v-for="category in categories" :key="category.displayName">
             <h2>{{ category.displayName }}</h2>
@@ -35,6 +28,7 @@
             <br>
             Build Time: {{ appConfig.public.buildTimeString }}
           </p>
+
         </ul>
       </div>
       <div id="sub-page">
@@ -182,16 +176,6 @@ onMounted(() => {
   height: 100vh;
 }
 
-.back-button {
-  cursor: pointer;
-  color: var(--primary-color);
-  transition: color 100ms;
-}
-
-.back-button:hover{
-  color: var(--primary-highlighted-color);
-}
-
 #links-and-socials * {
   margin-right: 0.2em;
 }
diff --git a/public/themes/ash.css b/public/themes/ash.css
index 66923af..b685551 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -7,7 +7,6 @@
 	--sidebar-background-color: #3e3a37;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
-	--chatbox-background-color: #3a3733;
 
     --padding-color: #e0e0e0;
     
diff --git a/public/themes/dark.css b/public/themes/dark.css
index af94112..8245724 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -7,7 +7,6 @@
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
 	--topbar-background-color: #2a2723;
-	--chatbox-background-color: #1a1713;
 
     --padding-color: #484848;
     
diff --git a/public/themes/description.css b/public/themes/description.css
deleted file mode 100644
index 4b07f11..0000000
--- a/public/themes/description.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/* this is not a real theme, but rather a template for themes */
-:root {
-	--text-color: #161518;
-	--secondary-text-color: #2b2930;
-
-    --chat-background-color: #80808000;
-    --chat-highlighted-background-color: #ffffff20;
-	--sidebar-background-color: #80808000;
-	--sidebar-highlighted-background-color: #ffffff20;
-	--topbar-background-color: #80808000;
-	--chatbox-background-color: #80808000;
-
-    --padding-color: #80808000;
-    
-    --primary-color: #21b1ff80;
-    --primary-highlighted-color: #18a0df80;
-    --secondary-color: #ffd80080;
-    --secondary-highlighted-color: #dfb80080;
-    --accent-color: #ff218c80;
-    --accent-highlighted-color: #df1b6f80;
-
-    --optional-body-background: ; /* background element for the body */
-    --optional-chat-background: ; /* background element for the chat box */
-	--optional-topbar-background: ; /* background element for the topbar */
-	--optional-sidebar-background: ; /* background element for left server sidebar */
-	--optional-channel-list-background: ; /* background element for channel list and settings list */
-	--optional-member-list-background: ; /* background element for member list */
-	--optional-message-box-background: ; /* background element for message box */
-}
\ No newline at end of file
diff --git a/public/themes/light.css b/public/themes/light.css
index b9b7b86..cb51d8c 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -7,7 +7,6 @@
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
 	--topbar-background-color: #dfdbd6;
-	--chatbox-background-color: #dfdbd6;
 
     --padding-color: #484848;
     
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index 32f7449..8aeffc8 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -7,7 +7,6 @@
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
 	--topbar-background-color: #80808000;
-	--chatbox-background-color: #80808040;
 
     --padding-color: #80808000;
     
@@ -18,11 +17,8 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
-    /* --optional-body-background: background */
-    --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
+    --optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
 	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
 	--optional-sidebar-background: linear-gradient(90deg, #55cdfcd0, #f7a8b8d0, #ffffffd0, #f7a8b8d0, #55cdfcd0);
 	--optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0);
-	--optional-member-list-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
-    --optional-message-box-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
 }
\ No newline at end of file