diff --git a/components/Guild/GuildSidebar.vue b/components/Guild/GuildSidebar.vue
new file mode 100644
index 0000000..4d361e4
--- /dev/null
+++ b/components/Guild/GuildSidebar.vue
@@ -0,0 +1,90 @@
+<!-- TODO  -->
+
+<template>
+	<ResizableSidebar
+			width="14rem" min-width="8rem" max-width="30rem"
+			border-sides="right" local-storage-name="middleLeftColumn">
+
+		<div id="guild-sidebar">
+			<div id="guild-top-container">
+				<span id="guild-name" :title="props.guild?.name">{{ props.guild?.name }}</span>
+				<button id="guild-settings-button" @click="toggleGuildSettings">
+					<Icon name="lucide:chevron-down" />
+				</button>
+
+				<GuildOptionsMenu v-if="showGuildSettings" />
+			</div>
+			<div id="channels-list">
+				<ChannelEntry v-for="channel of channels"
+					:name="channel.name"
+					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
+					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
+			</div>
+		</div>
+	</ResizableSidebar>
+</template>
+
+<script lang="ts" setup>
+import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
+import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
+import type { ChannelResponse, GuildResponse, INavbar } from "~/types/interfaces";
+
+const props = defineProps<{
+    guild: GuildResponse
+}>();
+
+const route = useRoute();
+const { fetchChannels } = useApi();
+
+const showGuildSettings = ref(false);
+
+const channels: ChannelResponse[] = await fetchChannels(props.guild.uuid);
+
+function toggleGuildSettings(e: Event) {
+	e.preventDefault();
+	showGuildSettings.value = !showGuildSettings.value;
+}
+
+</script>
+
+<style scoped>
+#channels-list {
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+
+	display: flex;
+	flex-direction: column;
+	gap: .5em;
+	text-overflow: ellipsis;
+	
+	padding-top: .5em;
+	padding-bottom: .5em;
+	max-height: calc(100% - 1em); /* 100% - top and bottom padding */
+}
+
+#guild-top-container {
+	min-height: var(--navbar-height);
+	max-height: var(--navbar-height);
+	width: 100%;
+
+	display: flex;
+	justify-content: center;
+	position: relative;
+
+	border-bottom: 1px solid var(--padding-color);
+}
+
+#guild-name {
+	font-size: 1.5em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#guild-settings-button {
+	background-color: transparent;
+	font-size: 1em;
+	color: white;
+	border: none;
+	padding: 0%;
+}
+</style>
diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index baf0e67..1c7b843 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -32,7 +32,13 @@ function hideModalPopup() {
 
 <style>
 .member-item {
-    position: relative;
+	display: flex;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: .5em;
+	align-items: center;
+	text-align: left;
+	cursor: pointer;
 }
 
 .member-avatar {
@@ -41,4 +47,9 @@ function hideModalPopup() {
 	min-width: 2.3em;
 	max-width: 2.3em;
 }
+
+.member-display-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 </style>
diff --git a/components/Guild/MemberList.vue b/components/Guild/MemberList.vue
new file mode 100644
index 0000000..1f55244
--- /dev/null
+++ b/components/Guild/MemberList.vue
@@ -0,0 +1,44 @@
+<template>
+	<ResizableSidebar
+			width="14rem" min-width="5.5rem" max-width="30rem"
+			border-sides="left" local-storage-name="membersListWidth">
+		<div id="members-container">
+			<div id="members-list">
+				<MemberEntry v-for="member of members.objects" :member="member" tabindex="0"/>
+			</div>
+		</div>
+	</ResizableSidebar>
+</template>
+
+<script lang="ts" setup>
+import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
+import MemberEntry from "./MemberEntry.vue";
+import type { GuildResponse } from "~/types/interfaces";
+
+const props = defineProps<{
+    guild: GuildResponse
+}>();
+
+const { fetchMembers } = useApi();
+
+// TODO implement paging
+const members = await fetchMembers(props.guild.uuid)
+
+</script>
+
+<style scoped>
+#members-container {
+	background: var(--optional-member-list-background);
+
+	padding-top: .5em;
+	padding-bottom: .5em;
+	max-height: calc(100% - 1em); /* 100% - top and bottom padding */
+}
+
+#members-list {
+	display: flex;
+	flex-direction: column;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/client.vue b/layouts/client.vue
index c327107..dd0ef44 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -1,183 +1,23 @@
 <template>
 	<Loading v-show="loading" />
+
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
-		<Navbar id="navbar" v-bind="navbar" />
-		<div id="page-content">
-			<div id="left-column">
-				<div class="left-column-segment">
-					<NuxtLink id="home-button" href="/me">
-						<img class="sidebar-icon" src="/public/icon.svg"/>
-					</NuxtLink>
-				</div>
-				<VerticalSpacer />
-				<div class="left-column-segment" id="left-column-middle">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
-						<NuxtImg v-if="guild.icon"
-							class="sidebar-icon guild-icon"
-							:alt="guild.name"
-							:src="guild.icon" />
-						<DefaultIcon v-else 
-							class="sidebar-icon guild-icon" 
-							:alt="guild.name"
-							:name="guild.name" :seed="guild.uuid"/>
-					</NuxtLink>
-				</div>
-				<VerticalSpacer />
-				<div class="left-column-segment">
-					<div ref="createButtonContainer">
-						<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
-							<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
-						</button>
-					</div>
-					<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
-						<Icon name="lucide:settings" alt="Settings menu" />
-					</NuxtLink>
-				</div>
-			</div>
+		<div class="flex-container-row">
+			<GuildList />
 			<slot />
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ModalBase } from '#components';
-import { render } from 'vue';
-import DefaultIcon from '~/components/DefaultIcon.vue';
-import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
 import Loading from '~/components/Popups/Loading.vue';
-import Button from '~/components/UserInterface/Button.vue';
-import Navbar from '~/components/UserInterface/Navbar.vue';
-import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
-import type { GuildResponse, INavbar, NavbarItem } from '~/types/interfaces';
+import GuildList from '~/components/UserInterface/GuildList.vue';
 
 definePageMeta({
 	keepalive: true
 });
 
 const loading = useState("loading", () => false);
-const navbar = useState<INavbar>("navbar", () => {
-	return {
-		clientItems: [
-			{
-				title: "Source",
-				icon: "lucide:code-xml",
-				callback: () => { open("https://git.gorb.app/gorb/frontend") } 
-			}
-		],
-		channelItems: [] // set by the channel
-	}
-})
-
-const createButtonContainer = ref<HTMLButtonElement>();
-
-const { getDisplayName } = useProfile()
-const api = useApi();
-
-const options = [
-	{ name: "Join", value: "join", callback: async () => {
-		console.log("join guild!");
-		const div = document.createElement("div");
-		const guildJoinModal = h(ModalBase, {
-			title: "Join Guild",
-			id: "guild-join-modal",
-			onClose: () => {
-				unrender(div);
-			},
-			onCancel: () => {
-				unrender(div);
-			},
-			style: "height: 20dvh; width: 15dvw"
-		},
-		[
-			h("input", {
-				id: "guild-invite-input",
-				type: "text",
-				placeholder: "oyqICZ",
-			}),
-			h(Button, {
-				text: "Join",
-				variant: "normal",
-				callback: async () => {
-					const input = document.getElementById("guild-invite-input") as HTMLInputElement;
-					const invite = input.value;
-					if (invite.length == 6) {
-						try {
-							const joinedGuild = await api.joinGuild(invite);
-							guilds.push(joinedGuild);
-							return await navigateTo(`/servers/${joinedGuild.uuid}`);
-						} catch (error) {
-							alert(`Couldn't use invite: ${error}`);
-						}
-					}
-				}
-			})
-		]);
-		document.body.appendChild(div);
-		render(guildJoinModal, div);
-	}
-},
-{ name: "Create", value: "create", callback: async () => {
-	console.log("create guild");
-	const user = await useAuth().getUser();
-	const div = document.createElement("div");
-	const guildCreateModal = h(ModalBase, {
-		title: "Create a Guild",
-		id: "guild-join-modal",
-		onClose: () => {
-			unrender(div);
-		},
-		onCancel: () => {
-			unrender(div);
-		},
-				style: "height: 20dvh; width: 15dvw;"
-			},
-			[
-				h("input", {
-					id: "guild-name-input",
-					type: "text",
-					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
-					style: "width: 100%"
-				}),
-				h(Button, {
-					text: "Create!",
-					variant: "normal",
-					callback: async () => {
-						const input = document.getElementById("guild-name-input") as HTMLInputElement;
-						const name = input.value;
-						try {
-							const guild = (await api.createGuild(name)) as GuildResponse;
-							await api.createChannel(guild.uuid, "general");
-						} catch (error) {
-							alert(`Couldn't create guild: ${error}`);
-						}
-					}
-				})
-			]);
-			document.body.appendChild(div);
-			render(guildCreateModal, div);
-		}
-	}
-];
-
-const guilds = await api.fetchMyGuilds();
-
-function createDropdown() {
-	const dropdown = h(GuildDropdown, { options });
-	const div = document.createElement("div");
-	div.classList.add("dropdown", "destroy-on-click");
-	if (createButtonContainer.value) {
-		createButtonContainer.value.appendChild(div);
-	} else {
-		document.body.appendChild(div);
-	}
-	render(dropdown, div);
-	div.addEventListener("keyup", (e) => {
-		if (e.key == "Escape") {
-			unrender(div);
-		}
-	});
-	div.focus();
-}
 
 </script>
 
@@ -186,8 +26,6 @@ function createDropdown() {
 	height: 100dvh;
 	width: 100dvw;
 	display: flex;
-	flex-direction: column;
-	text-align: center;
 }
 
 .hidden {
@@ -199,73 +37,20 @@ function createDropdown() {
 	transition: opacity 500ms;
 }
 
-#page-content {
+
+.flex-container-row,
+.flex-container-column {
 	display: flex;
-	flex-direction: row;
-	flex-grow: 1;
     overflow: auto;
-}
-
-#left-column {
-	display: flex;
-	flex-direction: column;
-
-	padding-left: var(--sidebar-margin);
-	padding-right: var(--sidebar-margin);
-	padding-top: .5em;
-	
-	background: var(--optional-sidebar-background);
-	background-color: var(--sidebar-background-color);
-
-	border-right: 1px solid var(--padding-color);
-}
-
-.left-column-segment {
-	display: flex;
-	flex-direction: column;
-
-	scrollbar-width: none;
-}
-
-.left-column-segment::-webkit-scrollbar {
-	display: none;
-}
-
-#left-column-middle {
-	overflow-y: scroll;
 	flex-grow: 1;
-	gap: var(--sidebar-icon-gap);
 }
 
-#home-button {
-	height: var(--sidebar-icon-width);
+.flex-container-row {
+	flex-direction: row;
 }
 
-#guild-icon-container {
-	text-decoration: none;
-}
-
-.guild-icon {
-	border-radius: var(--guild-icon-radius);
-}
-
-.sidebar-icon {
-	width: var(--sidebar-icon-width);
-	height: var(--sidebar-icon-width);
-}
-
-.sidebar-bottom-buttons {
-	color: var(--primary-color);
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	font-size: 2.4rem;
-	padding: 0;
-	display: inline-block;
-}
-
-.sidebar-bottom-buttons:hover {
-	color: var(--primary-highlighted-color);
+.flex-container-column {
+	flex-direction: column;
 }
 
 </style>