diff --git a/app.vue b/app.vue
index 9e6e124..717f0fd 100644
--- a/app.vue
+++ b/app.vue
@@ -49,9 +49,4 @@ a {
   border-radius: .3rem;
 }
 
-
-.invisible {
-	visibility: hidden;
-}
-
 </style>
diff --git a/components/Channel.vue b/components/Channel.vue
index a41974a..a0cdc78 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -1,21 +1,19 @@
 <template>
-  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
+  <div v-if="current" class="channel-list-link-container">
 	<NuxtLink class="channel-list-link" :href="props.href">
-		# {{ props.name }}
+		# {{ name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container rounded-corners">
+  <div v-else class="channel-list-link-container current-channel">
 	<NuxtLink class="channel-list-link" :href="props.href">
-		# {{ props.name }}
+		# {{ name }}
 	</NuxtLink>
   </div>
 </template>
 
 <script lang="ts" setup>
 
-const props = defineProps<{ name: string, uuid: string, currentUuid: string, href: string }>();
-
-const isCurrentChannel = props.uuid == props.currentUuid;
+const props = defineProps<{ name: string, href: string, current?: boolean }>();
 
 </script>
 
@@ -32,7 +30,6 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 	display: flex;
 	height: 4dvh;
 	white-space: nowrap;
-	align-items: center;
 }
 
 .current-channel {
diff --git a/components/Message.vue b/components/Message.vue
index bf85a17..e37d1e4 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,6 +1,6 @@
 <template>
-	<div v-if="props.type == 'normal'" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
-		<div class="left-column">
+	<div class="message">
+		<div>
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
@@ -11,6 +11,10 @@
 				</span>
 				<span class="message-date" :title="date.toString()">
 					{{ messageDate }}
+					<!--
+					<div class="message-date-hover" v-if="showHover">
+					</div>
+					-->
 				</span>
 			</div>
 			<div class="message-text">
@@ -18,45 +22,17 @@
 			</div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" class="message compact-message">
-		<div class="left-column">
-			<div>
-				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
-					{{ messageDate }}
-				</span>
-			</div>
-		</div>
-		<div class="message-data">
-			<div class="message-text">
-				{{ text }}
-			</div>
-		</div>
-	</div>
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{
-	class?: string,
-	img?: string | null,
-	username: string,
-	text: string,
-	timestamp: number,
-	format: "12" | "24",
-	type: "normal" | "compact",
-	marginBottom: boolean
-}>();
+const props = defineProps<{ class?: string, img?: string | null, username: string, text: string, timestamp: number, format: "12" | "24" }>();
 
 const messageDate = ref<string>();
-
-const messageElement = ref<HTMLDivElement>();
-
-const dateHidden = ref<boolean>(true);
+const showHover = ref(false);
 
 const date = new Date(props.timestamp);
 
-console.log("Message.vue: message:", props.text);
-console.log("Message.vue: message type:", props.type);
-
+console.log("message:", props.text);
 let dateHour = date.getHours();
 let dateMinute = date.getMinutes();
 if (props.format == "12") {
@@ -71,19 +47,7 @@ if (props.format == "12") {
 	}
 } else {
 	messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
-}
-
-onMounted(() => {
-	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
-		console.log("mouse enter");
-		dateHidden.value = false;
-	});
-
-	messageElement.value?.addEventListener("mouseleave", (e: Event) => {
-		console.log("mouse leave");
-		dateHidden.value = true;
-	});
-});
+	}
 
 //function toggleTooltip(e: Event) {
 //	showHover.value = !showHover.value;
@@ -95,13 +59,10 @@ onMounted(() => {
 .message {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
-	display: grid;
-	grid-template-columns: 1fr 19fr;
-	align-items: center;
-}
-
-.message-margin-bottom {
 	margin-bottom: 1dvh;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	align-items: center;
 }
 
 .message-metadata {
@@ -125,25 +86,22 @@ onMounted(() => {
 }
 
 .message-author-avatar {
-	height: 2.3em;
-	width: 2.3em;
+	margin-right: 1dvw;
+	width: 3em;
 	border-radius: 50%;
 }
 
-.left-column {
-	margin-right: .5dvw;
-	text-align: center;
-	align-content: center;
-}
-
 .author-username {
 	margin-right: .5dvw;
 	color: white;
 }
 
 .message-date {
-	font-size: .7em;
+	font-size: small;
 	color: rgb(150, 150, 150);
+}
+
+.message-date:hover {
 	cursor: default;
 }
 
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 7d3520c..a1be77d 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,23 +1,18 @@
 <template>
-	<div id="message-area">
-		<div id="messages" ref="messagesElement">
-			<div v-for="(message, i) of messages">
-				<Message :username="message.user.display_name ?? message.user.username"
-					:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
-					format="12" :type="messagesType[message.uuid]"
-					:margin-bottom="messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal'" />
-			</div>
-		</div>
-		<div id="message-box" class="rounded-corners">
-			<form id="message-form" @submit="sendMessage">
-				<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 id="message-area">
+	<div id="messages" ref="messagesElement">
+		<Message v-for="message of messages" :username="message.user.display_name ?? message.user.username" :text="message.message"
+			:timestamp="uuidToTimestamp(message.uuid)" :img="message.user.avatar" format="12" />
 	</div>
+	<div id="message-box" class="rounded-corners">
+		<form id="message-form" @submit="sendMessage">
+			<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>
 </template>
 
 <script lang="ts" setup>
@@ -26,59 +21,12 @@ import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
-const messageTimestamps = ref<Record<string, number>>({});
-const messagesType = ref<Record<string, "normal" | "compact">>({});
-
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
 	{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
 );
 if (messagesRes) {
-	messagesRes.reverse();
-	console.log("messages res:", messagesRes.map(msg => msg.message));
-	const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
-	for (const message of messagesRes) {
-		messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
-
-		console.log("message:", message.message);
-		const firstByUser = firstMessageByUsers.value[message.user.uuid];
-		if (firstByUser) {
-			console.log("first by user exists");
-			if (message.user.uuid != firstByUser.user.uuid) {
-				console.log("message is by new user, setting their first message")
-				firstMessageByUsers.value[message.user.uuid] = message;
-				console.log("RETURNING FALSE");
-				messagesType.value[message.uuid] = "normal";
-				continue;
-			}
-		} else {
-			console.log("first by user doesn't exist");
-			console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
-			firstMessageByUsers.value[message.user.uuid] = message;
-			console.log("RETURNING FALSE");
-			messagesType.value[message.uuid] = "normal";
-			continue;
-		}
-		const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference;
-		const prevTimestamp = messageTimestamps.value[firstByUser.uuid];
-		const timestamp = messageTimestamps.value[message.uuid];
-		console.log("first message timestamp:", prevTimestamp);
-		console.log("timestamp:", timestamp);
-		const diff = (timestamp - prevTimestamp);
-		console.log("min diff:", messageGroupingMaxDifference);
-		console.log("diff:", diff);
-		const lessThanMax = diff <= messageGroupingMaxDifference;
-		console.log("group?", lessThanMax);
-		if (!lessThanMax) {
-			console.log("diff exceeds max");
-			console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
-			firstMessageByUsers.value[message.user.uuid] = message;
-			messagesType.value[message.uuid] = "normal";
-			continue;
-		}
-		console.log("RETURNING " + lessThanMax.toString().toUpperCase());
-		messagesType.value[message.uuid] = "compact";
-	}
+  messagesRes.reverse();
 }
 
 const messages = ref<MessageResponse[]>([]);
@@ -101,28 +49,29 @@ if (accessToken && apiBase) {
 	do {
 		console.log("Trying to connect to channel WebSocket...");
 		ws = new WebSocket(`${apiBase.replace("http", "ws").replace("3000", "8080")}/${props.channelUrl}/socket`,
-			["Authorization", accessToken]
-		);
-		if (ws) break;
-		await sleep(5000);
-	} while (!ws);
+		["Authorization", accessToken]
+	);
+	if (ws) break;
+	await sleep(5000);
+} while (!ws);
+
+ws.addEventListener("open", (event) => {
+	console.log("WebSocket connected!");
+});
+
+ws.addEventListener("message", async (event) => {
+	console.log("event data:", event.data);
+	messages.value?.push(
+		JSON.parse(event.data)
+	);
+	await nextTick();
+	if (messagesElement.value) {
+		console.log("scrolling to bottom");
+		scrollToBottom(messagesElement);
+	}
+});
 
-	ws.addEventListener("open", (event) => {
-		console.log("WebSocket connected!");
-	});
 
-	ws.addEventListener("message", async (event) => {
-		console.log("event data:", event.data);
-		console.log("message uuid:", event.data.uuid);
-		const parsedData = JSON.parse(event.data);
-		messageTimestamps.value[parsedData.uuid] = uuidToTimestamp(parsedData.uuid);
-		messages.value.push(parsedData);
-		await nextTick();
-		if (messagesElement.value) {
-			console.log("scrolling to bottom");
-			scrollToBottom(messagesElement);
-		}
-	});
 
 } else {
 	await refresh();
@@ -133,7 +82,7 @@ function sendMessage(e: Event) {
 	const text = messageInput.value;
 	console.log("text:", text);
 	if (text) {
-		ws.send(text);
+		ws.send(text);	
 		messageInput.value = "";
 		console.log("MESSAGE SENT!!!");
 	}
@@ -148,11 +97,13 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+
 #message-area {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 8fr 1fr;
 	justify-content: space-between;
+	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
@@ -167,7 +118,7 @@ onMounted(async () => {
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
-	margin-top: 2dvh;
+	margin-top: 1dvh;
 }
 
 #message-form {
@@ -201,4 +152,5 @@ onMounted(async () => {
 #submit-button:hover {
 	color: rgb(255, 255, 255);
 }
+
 </style>
\ No newline at end of file
diff --git a/layouts/client.vue b/layouts/client.vue
index 1038412..ae749e3 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -21,12 +21,23 @@
 </template>
 
 <script lang="ts" setup>
-import type { GuildResponse } from '~/types/interfaces';
-
 
 const loading = useState("loading", () => false);
 
-const servers: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+const servers = [
+	{
+		name: "Test",
+		uuid: "0197088b-e4e8-7033-8e6b-7ceb065e9acd"
+	},
+	{
+		name: "Test",
+		uuid: "0197088b-e4e8-7033-8e6b-7ceb065e9acd"
+	},
+	{
+		name: "Test",
+		uuid: "0197088b-e4e8-7033-8e6b-7ceb065e9acd"
+	}
+];
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("servers:", servers);
@@ -69,6 +80,14 @@ const members = [
 	}
 ];
 
+function sendMessage(e: Event) {
+	e.preventDefault();
+	const textInput = document.getElementById("message-box-input") as HTMLInputElement;
+	const text = textInput.value;
+	console.log("MESSAGE SENT!!!");
+	console.log("text:", text);
+}
+
 </script>
 
 <style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 63d9372..560e664 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -26,8 +26,7 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      apiVersion: 1,
-      messageGroupingMaxDifference: 300000
+      apiVersion: 1
     }
   },
   /* nitro: {
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index cdb2c94..eb6ba46 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -18,9 +18,10 @@
 				</h3>
 			</div>
 			<div id="channels-list">
-				<Channel v-for="channel of channels" :name="channel.name"
-					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-					:href="`/guilds/${route.params.serverId}/channels/${channel.uuid}`" />
+				<Channel v-for="channel of channels" v-if="route.params.channelId == channel?.uuid" :name="channel.name"
+					:href="route.path" :current="true" />
+				<Channel v-for="channel of channels" v-else :name="channel.name"
+					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
@@ -40,7 +41,7 @@ const route = useRoute();
 
 const loading = useState("loading");
 
-const channelUrlPath = `/channels/${route.params.channelId}`;
+const channelUrlPath = `servers/${route.params.serverId}/channels/${route.params.channelId}`;
 
 const server = ref<GuildResponse | undefined>();
 const channels = ref<ChannelResponse[] | undefined>();
@@ -101,15 +102,19 @@ const members = [
 ];
 
 onMounted(async () => {
+	loading.value = true;
 	console.log("channelid: set loading to true");
 	server.value = await fetchWithApi(`servers/${route.params.serverId}`);
 
-	channels.value = await fetchWithApi(`/channels`);
-	console.log("channels:", channels.value);
-	channel.value = await fetchWithApi(route.path);
-	console.log("channel:", channel.value);
+	channels.value = await fetchWithApi(
+		`servers/${route.params.serverId}/channels`
+	);
+	channel.value = await fetchWithApi(
+		route.path
+	);
 
 	console.log("channelid: channel:", channel);
+	loading.value = false;
 	console.log("channelid: set loading to false");
 });
 
@@ -146,10 +151,4 @@ function toggleInvitePopup(e: Event) {
 	border-left: 1px solid rgb(70, 70, 70);
 }
 
-#channels-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1dvh;
-}
-
 </style>
\ No newline at end of file
diff --git a/pages/servers/[serverId]/index.vue b/pages/servers/[serverId]/index.vue
index ce6bea5..b45982a 100644
--- a/pages/servers/[serverId]/index.vue
+++ b/pages/servers/[serverId]/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-const server = await fetchWithApi(`/guilds/${useRoute().params.serverId}`);
+const server = await fetchWithApi(`/servers/${useRoute().params.serverId}`);
 console.log("server:", server);
 
 </script>
diff --git a/utils/fetchMember.ts b/utils/fetchMember.ts
index 8f4a9e4..a0f5782 100644
--- a/utils/fetchMember.ts
+++ b/utils/fetchMember.ts
@@ -1,6 +1,6 @@
 import type { UserResponse } from "~/types/interfaces"
 
 export default async (serverId: string, memberId: string): Promise<UserResponse> => {
-	const user = await fetchWithApi(`/guilds/${serverId}/members/${memberId}`) as UserResponse;
+	const user = await fetchWithApi(`/servers/${serverId}/members/${memberId}`) as UserResponse;
 	return user;
 }