diff --git a/components/Channel.vue b/components/Channel.vue
index 0f48323..6bdc28b 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -30,7 +30,7 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 .channel-list-link-container {
 	text-align: left;
 	display: flex;
-	height: 4dvh;
+	height: 1.5em;
 	white-space: nowrap;
 	align-items: center;
 }
diff --git a/layouts/client.vue b/layouts/client.vue
index 9ce451e..acb408c 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -8,21 +8,23 @@
 				</marquee>
 			</div>
 		</div>
-		<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" />
+		<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" />
 				</NuxtLink>
 			</div>
-			<NuxtLink id="settings-menu" href="/settings">
-				<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
-			</NuxtLink>
+			<slot />
 		</div>
-		<slot />
 	</div>
 </template>
 
@@ -36,11 +38,10 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 <style>
 #client-root {
-	/* border: 1px solid white; */
 	height: 100dvh;
-	display: grid;
-	grid-template-columns: 1fr 4fr 18fr 4fr;
-	grid-template-rows: 4dvh auto;
+	width: 100dvw;
+	display: flex;
+	flex-direction: column;
 	text-align: center;
 }
 
@@ -50,17 +51,17 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 .visible {
 	opacity: 100%;
-	transition-duration: 500ms;
+	transition: opacity 500ms;
 }
 
 #homebar {
-	grid-row: 1;
-	grid-column: 1 / -1;
+	min-height: 4dvh;
 	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;
 
@@ -70,32 +71,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	width: 100dvw;
 }
 
-#client-root>div:nth-child(-n+4) {
-	border-bottom: 1px solid var(--padding-color);
-}
-
-#__nuxt {
+#page-content {
 	display: flex;
-	flex-flow: column;
-}
-
-.grid-column {
-	padding-top: 1dvh;
-}
-
-#home {
-	padding-left: .5dvw;
-	padding-right: .5dvw;
-}
-
-.sidebar-icon {
-	width: 3rem;
-	height: 3rem;
-}
-
-#current-info {
-	grid-column: 2;
-	grid-row: 1;
+	flex-direction: row;
+	flex-grow: 1;
+    overflow: auto;
 }
 
 #left-column {
@@ -110,10 +90,25 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	padding-top: 1.5dvh;
 }
 
+#servers-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1dvh;
+	width: 3.2rem;	
+}
+
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-right: 1px solid var(--padding-color);
+	min-width: 10rem;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+.sidebar-icon {
+	width: 3rem;
+	height: 3rem;
 }
 
 #home-button {
@@ -126,10 +121,4 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	bottom: .25dvh
 }
 
-#servers-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1dvh;
-}
-
 </style>
\ No newline at end of file
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 32b8104..3003e9e 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -91,9 +91,8 @@ function handleMemberClick(member: GuildMemberResponse) {
 }
 
 #members-container {
-	padding-top: 1dvh;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	min-width: 12rem;
+	padding-top: 1em;
 	border-left: 1px solid var(--padding-color);
 	background: var(--optional-member-list-background);
 }
@@ -103,14 +102,14 @@ function handleMemberClick(member: GuildMemberResponse) {
 	flex-direction: column;
 	overflow-y: scroll;
 	max-height: 92dvh;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	padding-left: 1.3em;
+	padding-right: 1.3em;
 	margin-top: 1dvh;
 }
 
 .member-item {
 	display: grid;
-	grid-template-columns: 2dvw 1fr;
+	grid-template-columns: 1.5em 1fr;
 	margin-top: .5em;
 	margin-bottom: .5em;
 	gap: 1em;
@@ -122,7 +121,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 #channels-list {
 	display: flex;
 	flex-direction: column;
-	gap: 1dvh;
+	gap: .5em;
 }
 
 .member-avatar {