diff --git a/layouts/client.vue b/layouts/client.vue
index 7227644..b7b099f 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -25,6 +25,23 @@
 			</div>
 			<slot />
 		</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" />
+				</NuxtLink>
+			</div>
+			<slot />
+		</div>
 	</div>
 </template>
 
@@ -52,9 +69,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 .visible {
 	opacity: 100%;
 	transition: opacity 500ms;
+	transition: opacity 500ms;
 }
 
 #homebar {
+	min-height: 4dvh;
 	min-height: 4dvh;
 	display: flex;
 	justify-content: space-evenly;
@@ -62,6 +81,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
 	border-bottom: 1px solid var(--padding-color);
+	border-bottom: 1px solid var(--padding-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
 
@@ -71,11 +91,18 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	width: 100dvw;
 }
 
+.homebar-item {
+	width: 100dvw;
+}
+
 #page-content {
 	display: flex;
 	flex-direction: row;
 	flex-grow: 1;
     overflow: auto;
+	flex-direction: row;
+	flex-grow: 1;
+    overflow: auto;
 }
 
 #left-column {
@@ -84,12 +111,23 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	gap: .75em;
 	padding-left: .25em;
 	padding-right: .25em;
+	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;
 }
 
+#servers-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+	width: 3.2rem;	
+	padding-top: .5em;
+}
+
 #servers-list {
 	display: flex;
 	flex-direction: column;
@@ -98,9 +136,19 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 }
 
 #middle-left-column {
+	padding-left: .25em;
+	padding-right: .25em;
 	padding-left: .25em;
 	padding-right: .25em;
 	border-right: 1px solid var(--padding-color);
+	min-width: 13em;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+.sidebar-icon {
+	width: 3rem;
+	height: 3rem;
 	min-width: 10em;
 	overflow-y: scroll;
 	overflow-x: hidden;
@@ -119,6 +167,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 #settings-menu {
 	position: absolute;
 	bottom: .25em
+	bottom: .25em
 }
 
 </style>
\ No newline at end of file
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 5c55655..4873094 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -91,7 +91,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 }
 
 #members-container {
-	width: 12rem;
+	width: 15rem;
 	border-left: 1px solid var(--padding-color);
 	background: var(--optional-member-list-background);
 }