diff --git a/components/Guild/ChannelNavbar.vue b/components/Guild/ChannelNavbar.vue
deleted file mode 100644
index c490d73..0000000
--- a/components/Guild/ChannelNavbar.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-	<div id="navbar" class="navbar-row">
-		<div id="channel-info" class="navbar-row">
-			<!-- h1 to help screen readers -->
-			<h1 id="channel-name">
-				# {{ channel.name }}
-			</h1>
-			<span id="channel-description">
-				{{ channel.description }}
-			</span>
-		</div>
-
-		<div id="buttons" class="navbar-row">
-			<a class="button" href="https://git.gorb.app/gorb/frontend">
-				<Icon name="lucide:code-xml" title="Source"/>
-			</a>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import type { INavbar } from '~/types/interfaces';
-
-const props = defineProps<INavbar>();
-
-</script>
-
-<style scoped>
-.navbar-row {
-	display: flex;
-	flex-direction: row;
-}
-
-#navbar {
-	--font-size: calc(var(--navbar-height) * 0.45);
-	--side-margins: calc(var(--font-size) * 0.5);
-	
-	min-height: var(--navbar-height);
-	max-height: var(--navbar-height);
-	width: 100%;
-
-	background: var(--optional-topbar-background);
-	background-color: var(--topbar-background-color);
-	border-bottom: 1px solid var(--padding-color);
-}
-
-#channel-info {
-	margin-left: var(--side-margins);
-	gap: calc(var(--font-size) * 0.75);
-
-	align-items: center;
-}
-
-#channel-name {
-	font-size: var(--font-size);
-	font-weight: 500;
-}
-
-#channel-description {
-	font-size: calc(var(--font-size) * 0.8);
-	text-overflow: ellipsis;
-
-	/* TODO make new theme colour? unsure of it's name, this is good enough for now */
-	color: var(--reply-text-color);
-}
-
-#buttons {
-	margin-right: var(--side-margins);
-
-	flex-grow: 1;
-	align-items: center;
-	justify-content: end;
-}
-
-.button {
-	color: var(--secondary-text-color);
-	transition: color 300ms;
-
-	right: 0;
-}
-
-.button:hover {
-	color: var(--primary-highlighted-color);
-}
-</style>
\ No newline at end of file
diff --git a/components/Guild/GuildSidebar.vue b/components/Guild/GuildSidebar.vue
deleted file mode 100644
index 50c376e..0000000
--- a/components/Guild/GuildSidebar.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<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>
-#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%;
-}
-
-#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 */
-
-	padding-left: .5em;
-	padding-right: .5em;
-}
-</style>
diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index 1c7b843..baf0e67 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -32,13 +32,7 @@ function hideModalPopup() {
 
 <style>
 .member-item {
-	display: flex;
-	margin-top: .5em;
-	margin-bottom: .5em;
-	gap: .5em;
-	align-items: center;
-	text-align: left;
-	cursor: pointer;
+    position: relative;
 }
 
 .member-avatar {
@@ -47,9 +41,4 @@ 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
deleted file mode 100644
index 9b4fa19..0000000
--- a/components/Guild/MemberList.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<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;
-
-	padding-left: .5em;
-	padding-right: .5em;
-}
-</style>
\ No newline at end of file
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index b93db1c..e2788ae 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -45,8 +45,6 @@ import { generateIrcColor } from '#imports';
 const { getDisplayName } = useProfile()
 const { fetchMe } = useApi()
 
-// TODO this file is a mess, and we need to stop using fetchWithApi
-
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
 const me = await fetchMe() as UserResponse;
diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 2ea411b..79e95bd 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -135,7 +135,8 @@ function loadStoredWidth() {
 
 .sidebar-content {
 	width: 100%;
-	height: 100%;
+	padding-left: .25em;
+	padding-right: .25em;
 }
 
 .sidebar-content > :first-child {
diff --git a/components/UserInterface/SidebarColumn.vue b/components/UserInterface/SidebarColumn.vue
deleted file mode 100644
index f09cee3..0000000
--- a/components/UserInterface/SidebarColumn.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-	<div id="sidebar-column">
-		<div class="side-column-segment">
-			<NuxtLink id="home-button" href="/me">
-				<img class="sidebar-icon" src="/public/icon.svg"/>
-			</NuxtLink>
-		</div>
-
-		<VerticalSpacer />
-		<div class="sidebar-column-segment" id="guild-column">
-			<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="sidebar-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>
-</template>
-
-<script lang="ts" setup>
-import { ModalBase } from '#components';
-import { render } from 'vue';
-import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
-import DefaultIcon from '~/components/DefaultIcon.vue';
-import Button from '~/components/UserInterface/Button.vue';
-import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
-import type { GuildResponse } from '~/types/interfaces';
-
-const { getDisplayName } = useProfile()
-const { fetchMyGuilds, joinGuild, createGuild, createChannel } = useApi();
-
-const createButtonContainer = ref<HTMLButtonElement>();
-
-const guilds = await fetchMyGuilds();
-
-// TODO we need to turn this into an actual modal
-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 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 createGuild(name)) as GuildResponse;
-							await createChannel(guild.uuid, "general");
-						} catch (error) {
-							alert(`Couldn't create guild: ${error}`);
-						}
-					}
-				})
-			]);
-			document.body.appendChild(div);
-			render(guildCreateModal, div);
-		}
-	}
-];
-
-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>
-
-<style scoped>
-#sidebar-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);
-	text-align: center;
-}
-
-#guild-column {
-	overflow-y: scroll;
-	flex-grow: 1;
-	gap: var(--sidebar-icon-gap);
-}
-#guild-icon-container {
-	text-decoration: none;
-}
-
-.sidebar-column-segment {
-	display: flex;
-	flex-direction: column;
-
-	scrollbar-width: none;
-}
-.guild-column-segment::-webkit-scrollbar {
-	display: none;
-}
-
-#home-button {
-	height: var(--sidebar-icon-width);
-}
-
-.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);
-}
-</style>
\ No newline at end of file
diff --git a/layouts/client.vue b/layouts/client.vue
index eb1c524..800a097 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -1,17 +1,59 @@
 <template>
 	<Loading v-show="loading" />
-
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
-		<div class="flex-container-row">
-			<SidebarColumn />
+		<div id="homebar">
+			<div class="homebar-item">
+				<marquee>
+					gorb!!!!!
+				</marquee>
+			</div>
+		</div>
+		<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>
 			<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 SidebarColumn from '~/components/UserInterface/SidebarColumn.vue';
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { GuildResponse } from '~/types/interfaces';
 
 definePageMeta({
 	keepalive: true
@@ -19,6 +61,117 @@ definePageMeta({
 
 const loading = useState("loading", () => false);
 
+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>
 
 <style>
@@ -26,6 +179,8 @@ const loading = useState("loading", () => false);
 	height: 100dvh;
 	width: 100dvw;
 	display: flex;
+	flex-direction: column;
+	text-align: center;
 }
 
 .hidden {
@@ -37,20 +192,89 @@ const loading = useState("loading", () => false);
 	transition: opacity 500ms;
 }
 
-
-.flex-container-row,
-.flex-container-column {
+#homebar {
+	min-height: 4dvh;
 	display: flex;
-    overflow: auto;
-	flex-grow: 1;
+	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;
 }
 
-.flex-container-row {
+.homebar-item {
+	width: 100dvw;
+}
+
+#page-content {
+	display: flex;
 	flex-direction: row;
+	flex-grow: 1;
+    overflow: auto;
 }
 
-.flex-container-column {
+#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);
+}
+
+#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);
 }
 
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 30e0793..cb5f57e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,4 +1,18 @@
+<template>
+  <NuxtLayout>
+
+  </NuxtLayout>
+</template>
+
 <script lang="ts" setup>
 await navigateTo("/me/", { replace: true })
 
-</script>
\ No newline at end of file
+definePageMeta({
+	layout: "client"
+});
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/me/[userId].vue b/pages/me/[userId].vue
index 650e14f..209ffab 100644
--- a/pages/me/[userId].vue
+++ b/pages/me/[userId].vue
@@ -8,14 +8,6 @@
 
 <script lang="ts" setup>
 import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
-
-onMounted(async () => {
-	updateNavbar({isDirectMessages: true})
-})
-
-onActivated(async () => {
-	updateNavbar({isDirectMessages: true})
-})
 </script>
 
 <style>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index e82a317..f07dabd 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,43 +1,163 @@
 <template>
 	<NuxtLayout name="client">
-		<GuildSidebar v-if="guild" :guild="guild" />
-		<div class="flex-container-column">
-			<GuildChannelNavbar id="navbar" 
-				v-if="guild && channel"
-				:guild="guild"
-				:channel="channel"/>
-
-			<div class="flex-container-row">
-				<MessageArea :channel-url="channelUrlPath" />
-				<GuildMemberList v-if="guild" :guild="guild" />
+		<ResizableSidebar
+				width="14rem" min-width="8rem" max-width="30rem"
+				border-sides="right" local-storage-name="middleLeftColumn">
+			<div id="middle-left-column" class="main-grid-row">
+				<div id="server-name-container">
+					<span id="server-name" :title="server?.name">{{ server?.name }}</span>
+					<button id="server-settings-button" @click="toggleGuildSettings">
+						<Icon id="server-settings-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>
-		</div>
+		</ResizableSidebar>
+		<MessageArea :channel-url="channelUrlPath" />
+		<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" :member="member" tabindex="0"/>
+				</div>
+			</div>
+		</ResizableSidebar>
 	</NuxtLayout>
 </template>
 
 <script lang="ts" setup>
+import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
+import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
+import MemberEntry from "~/components/Guild/MemberEntry.vue";
+import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse } from "~/types/interfaces";
 
 const route = useRoute();
-const { fetchGuild, fetchChannel } = useApi()
 
-const channelId = route.params.channelId as string
-const guildId = route.params.serverId as string
+const loading = useState("loading");
 
-const channelUrlPath = `channels/${channelId}`;
+const channelUrlPath = `channels/${route.params.channelId}`;
 
-const guild = await fetchGuild(guildId)
-const channel = await fetchChannel(channelId)
+const server = ref<GuildResponse | undefined>();
+const channels = ref<ChannelResponse[] | undefined>();
+const channel = ref<ChannelResponse | undefined>();
 
-// function toggleInvitePopup(e: Event) {
-// 	e.preventDefault();
-// 	showInvitePopup.value = !showInvitePopup.value;
-// }
+const members = ref<GuildMemberResponse[]>();
 
-// function handleMemberClick(member: GuildMemberResponse) {
-// }
+const showInvitePopup = ref(false);
+const showGuildSettings = ref(false);
 
+//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
+//console.log("channelid: servers:", servers);
+
+const { fetchMembers } = useApi();
+
+onMounted(async () => {
+	console.log("mounting");
+	const guildUrl = `guilds/${route.params.serverId}`;
+	server.value = await fetchWithApi(guildUrl);
+	console.log("fetched guild");
+	await setArrayVariables();
+	console.log("set array variables");
+});
+
+onActivated(async () => {
+	console.log("activating");
+	const guildUrl = `guilds/${route.params.serverId}`;
+	server.value = await fetchWithApi(guildUrl);
+	console.log("fetched guild");
+	await setArrayVariables();
+	console.log("set array variables");
+});
+
+async function setArrayVariables() {
+	const membersRes = await fetchMembers(route.params.serverId as string);
+	members.value = membersRes.objects;
+	const guildUrl = `guilds/${route.params.serverId}`;
+	channels.value = await fetchWithApi(`${guildUrl}/channels`);
+	console.log("channels:", channels.value);
+	channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
+	console.log("channel:", channel.value);
+}
+
+function toggleGuildSettings(e: Event) {
+	e.preventDefault();
+	showGuildSettings.value = !showGuildSettings.value;
+}
+
+function toggleInvitePopup(e: Event) {
+	e.preventDefault();
+	showInvitePopup.value = !showInvitePopup.value;
+}
+
+function handleMemberClick(member: GuildMemberResponse) {
+}
 </script>
 
-<style scoped>
+<style>
+#members-container {
+	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 */
+}
+
+.member-item {
+	display: flex;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: .5em;
+	align-items: center;
+	text-align: left;
+	cursor: pointer;
+}
+
+#channels-list {
+	display: flex;
+	flex-direction: column;
+	gap: .5em;
+	text-overflow: ellipsis;
+}
+
+.member-display-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#server-name-container {
+	padding-top: 3dvh;
+	padding-bottom: 3dvh;
+	display: flex;
+	justify-content: center;
+	position: relative;
+}
+
+#server-name {
+	font-size: 1.5em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#server-settings-button {
+	background-color: transparent;
+	font-size: 1em;
+	color: white;
+	border: none;
+	padding: 0%;
+}
 </style>
\ No newline at end of file
diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css
index de6a0b6..1cee0b4 100644
--- a/public/themes/layout/gorb.css
+++ b/public/themes/layout/gorb.css
@@ -8,10 +8,6 @@ complementaryColor = white
 	--sidebar-icon-width: 2.5em;
 	--sidebar-icon-gap: .25em;
 	--sidebar-margin: .5em;
-
-	--navbar-height: 5dvh;
-	--navbar-icon-size: 3dvh;
-	--navbar-gap: calc(3dvh * .2);
 	
 	--minor-radius: .35em;
 	--standard-radius: .5em;
diff --git a/types/interfaces.ts b/types/interfaces.ts
index bb6489b..d175d76 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -121,22 +121,3 @@ export interface ContextMenuInterface {
 	pointerY: number,
 	items: ContextMenuItem[]
 }
-
-export interface NavbarItem {
-	title: string,
-	icon: string,
-	hasPing?: boolean, // whether to draw a "ping" icon or not
-	callback: (...args: any[]) => any;
-}
-
-export interface INavbar {
-	guild: GuildResponse
-	channel: ChannelResponse
-}
-
-export interface NavbarOptions {
-	guild?: GuildResponse
-	channel?: ChannelResponse
-	isDirectMessages?: boolean
-}
-