diff --git a/app.vue b/app.vue
index 9c8fb1c..9aeae9d 100644
--- a/app.vue
+++ b/app.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
+import ContextMenu from '~/components/ContextMenu.vue';
 import { render } from 'vue';
 
 const banner = useState("banner", () => false);
@@ -14,7 +14,6 @@ const banner = useState("banner", () => false);
 onMounted(() => {
 	document.removeEventListener("contextmenu", contextMenuHandler);
 	document.addEventListener("contextmenu", (e) => {
-		if (e.target instanceof Element && e.target.classList.contains("default-contextmenu")) return;
 		contextMenuHandler(e);
 	});
 	document.addEventListener("mousedown", (e) => {
diff --git a/components/UserInterface/ContextMenu.vue b/components/ContextMenu.vue
similarity index 100%
rename from components/UserInterface/ContextMenu.vue
rename to components/ContextMenu.vue
diff --git a/components/Guild/GuildDropdown.vue b/components/Dropdown.vue
similarity index 100%
rename from components/Guild/GuildDropdown.vue
rename to components/Dropdown.vue
diff --git a/components/Guild/GuildOptionsMenu.vue b/components/GuildOptionsMenu.vue
similarity index 78%
rename from components/Guild/GuildOptionsMenu.vue
rename to components/GuildOptionsMenu.vue
index 7954c71..e9bbcf9 100644
--- a/components/Guild/GuildOptionsMenu.vue
+++ b/components/GuildOptionsMenu.vue
@@ -4,20 +4,23 @@
       <button class="guild-option-button" @click="setting.action" tabindex="0">{{ setting.name }}</button>
     </div>
   </div>
-  <ModalInvite v-if="showInviteModal" :guild-id="guildId" />
 </template>
 
 <script lang="ts" setup>
+import { render } from 'vue';
+import InviteModal from './InviteModal.vue';
 
 const settings = [
   { name: "Invite", icon: "lucide:letter", action: openInviteModal }
 ]
 
-const guildId = useRoute().params.serverId as string;
-const showInviteModal = ref(false);
-
 function openInviteModal() {
-  showInviteModal.value = true;
+  const div = document.createElement("div");
+  const guildId = useRoute().params.serverId as string;
+  console.log("guild id:", guildId);
+  const inviteModal = h(InviteModal, { guildId });
+  document.body.appendChild(div);
+  render(inviteModal, div);
 }
 
 </script>
diff --git a/components/Modal/Invite.vue b/components/InviteModal.vue
similarity index 92%
rename from components/Modal/Invite.vue
rename to components/InviteModal.vue
index 232114c..d532ae3 100644
--- a/components/Modal/Invite.vue
+++ b/components/InviteModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<ModalBase v-bind="props" :title="props.title || 'Create an invite'">
+	<Modal v-bind="props" :title="props.title || 'Create an invite'">
 		<div v-if="invite" id="invite-body">
 			<div id="invite-label">{{ invite }}</div>
 			<div id="invite-buttons">
@@ -10,12 +10,12 @@
 		<div v-else>
 			<Button text="Generate Invite" variant="normal" :callback="generateInvite">Generate Invite</Button>
 		</div>
-	</ModalBase>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
 import type { InviteResponse, ModalProps } from '~/types/interfaces';
-import Button from '~/components/UserInterface/Button.vue';
+import Button from './UserInterface/Button.vue';
 
 const props = defineProps<ModalProps & { guildId: string }>();
 
diff --git a/components/Me/AddFriend.vue b/components/Me/AddFriend.vue
index 6d2d888..49aa112 100644
--- a/components/Me/AddFriend.vue
+++ b/components/Me/AddFriend.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/UserInterface/Button.vue';
+import Button from '../UserInterface/Button.vue';
 
 const inputField = ref<HTMLInputElement>();
 const { addFriend } = useApi();
diff --git a/components/Message.vue b/components/Message.vue
index 06dc9cb..b6afc7b 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -4,10 +4,14 @@
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
-				width="1.5em" height="1.5em"
-				viewBox="0 0 150 87.5" version="1.1" id="svg1"
+				width="1.5em"
+				height="1.5em"
+				viewBox="0 0 151.14355 87.562065"
+				version="1.1"
+				id="svg1"
+				xmlns="http://www.w3.org/2000/svg"
+				xmlns:svg="http://www.w3.org/2000/svg"
 				style="overflow: visible;">
-				<defs id="defs1" />
 				<defs
 					id="defs1" />
 				<g
@@ -46,9 +50,8 @@
 					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" v-html="sanitized" tabindex="0"></div>
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 	<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
@@ -59,9 +62,8 @@
 			</span>
 		</div>
 		<div class="message-data">
-			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 </template>
 
@@ -70,8 +72,6 @@ import DOMPurify from 'dompurify';
 import { parse } from 'marked';
 import type { MessageProps } from '~/types/props';
 import generateIrcColor from '~/utils/generateIrcColor';
-import MessageMedia from './MessageMedia.vue';
-import MessageReply from './UserInterface/MessageReply.vue';
 
 const props = defineProps<MessageProps>();
 
@@ -86,13 +86,6 @@ console.log("[MSG] message to render:", props.message);
 console.log("author:", props.author);
 console.log("[MSG] reply message:", props.replyMessage);
 
-const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
-const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
-const mediaLinks: string[] = [];
-console.log("link matches:", linkMatches);
-
-const hasEmbed = ref(false);
-
 const sanitized = ref<string>();
 
 onMounted(async () => {
@@ -105,7 +98,7 @@ onMounted(async () => {
 		],
 		ALLOW_DATA_ATTR: false,
 		ALLOW_SELF_CLOSE_IN_ATTR: false,
-		ALLOWED_ATTR: ["href"]
+		ALLOWED_ATTR: []
 	});
 	console.log("adding listeners")
 	await nextTick();
@@ -119,27 +112,6 @@ onMounted(async () => {
 		});
 		console.log("added listeners");
 	}
-
-	for (const link of linkMatches) {
-	console.log("link:", link);
-	try {
-		const res = await $fetch.raw(link);
-		if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
-			console.log("link is image");
-			mediaLinks.push(link);
-		}
-		if (mediaLinks.length) {
-			hasEmbed.value = true
-			setTimeout(() => {
-				scrollToBottom(document.getElementById("messages") as HTMLDivElement);
-			}, 500);
-		};
-	} catch (error) {
-		console.error(error);
-	}
-}
-
-console.log("media links:", mediaLinks);
 });
 
 //function toggleTooltip(e: Event) {
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 9a8f17f..cae68f1 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -252,8 +252,6 @@ onMounted(async () => {
 	if (import.meta.server) return;
 	console.log("[MSG] messages keys:", Object.values(messages.value));
 	if (messagesElement.value) {
-		await nextTick();
-		await nextTick();
 		scrollToBottom(messagesElement.value);
 		let fetched = false;
 		const amount = messages.value.length;
diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue
deleted file mode 100644
index ab62387..0000000
--- a/components/MessageMedia.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-	<div class="media-container">
-		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ModalBase } from '#components';
-import { render } from 'vue';
-
-
-const props = defineProps<{ links: string[] }>();
-
-function createModal(link: string) {
-	const div = document.createElement("div");
-	const modal = h(ModalBase, {
-		obscure: true,
-		onClose: () => unrender(div),
-		onCancel: () => unrender(div),
-	},
-	[
-		h("img", {
-			src: link,
-			class: "default-contextmenu"
-		})
-	]);
-	
-	document.body.appendChild(div);
-	render(modal, div);
-}
-
-</script>
-
-<style scoped>
-
-.media-container {
-	grid-column: 2;
-	grid-row: 3;
-	margin-left: .5dvw;
-}
-
-.media-item {
-	cursor: pointer;
-	max-width: 15dvw;
-}
-
-</style>
\ No newline at end of file
diff --git a/components/UserInterface/MessageReply.vue b/components/MessageReply.vue
similarity index 100%
rename from components/UserInterface/MessageReply.vue
rename to components/MessageReply.vue
diff --git a/components/Modal/Base.vue b/components/Modal.vue
similarity index 96%
rename from components/Modal/Base.vue
rename to components/Modal.vue
index 1f57901..041dd1a 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import type { ModalProps } from '~/types/interfaces';
-import Button from '~/components/UserInterface/Button.vue';
+import Button from './UserInterface/Button.vue';
 
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
diff --git a/layouts/client.vue b/layouts/client.vue
index 65dd021..6b3bfa1 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -38,9 +38,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ModalBase } from '#components';
 import { render } from 'vue';
-import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
+import Dropdown from '~/components/Dropdown.vue';
+import Modal from '~/components/Modal.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import type { GuildResponse } from '~/types/interfaces';
 
@@ -54,7 +54,7 @@ const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");
 			const div = document.createElement("div");
-			const guildJoinModal = h(ModalBase, {
+			const guildJoinModal = h(Modal, {
 				title: "Join Guild",
 				id: "guild-join-modal",
 				onClose: () => {
@@ -97,7 +97,7 @@ const options = [
 			console.log("create guild");
 			const user = await useAuth().getUser();
 			const div = document.createElement("div");
-			const guildCreateModal = h(ModalBase, {
+			const guildCreateModal = h(Modal, {
 				title: "Create a Guild",
 				id: "guild-join-modal",
 				onClose: () => {
@@ -138,8 +138,49 @@ const options = [
 
 const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
+//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
+//console.log("servers:", servers);
+const members = [
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	}
+];
+
 function createDropdown() {
-	const dropdown = h(GuildDropdown, { options });
+	const dropdown = h(Dropdown, { options });
 	const div = document.createElement("div");
 	div.classList.add("dropdown", "destroy-on-click");
 	if (createButtonContainer.value) {
@@ -220,11 +261,6 @@ function createDropdown() {
 	align-items: center;
 	gap: 1.5dvh;
 	overflow-y: scroll;
-	scrollbar-width: none;
-}
-
-#left-column-top::-webkit-scrollbar, #left-column-bottom::-webkit-scrollbar {
-	display: none;
 }
 
 #left-column-bottom {
@@ -295,4 +331,4 @@ function createDropdown() {
 	color: var(--primary-highlighted-color)
 }
 
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index d9f6d97..4393a5d 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -25,9 +25,6 @@
 
 <script lang="ts" setup>
 import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
-import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
-import MemberEntry from "~/components/Member/MemberEntry.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 const route = useRoute();
 
@@ -44,6 +41,8 @@ const members = ref<GuildMemberResponse[]>();
 const showInvitePopup = ref(false);
 const showGuildSettings = ref(false);
 
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
+
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
 
diff --git a/utils/createContextMenu.ts b/utils/createContextMenu.ts
index 88fe6fb..f3c4aab 100644
--- a/utils/createContextMenu.ts
+++ b/utils/createContextMenu.ts
@@ -1,5 +1,5 @@
 import { render } from "vue";
-import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
+import ContextMenu from "~/components/ContextMenu.vue";
 import type { ContextMenuItem } from "~/types/interfaces";
 
 export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index cab6152..bbb453b 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -1,5 +1,5 @@
 import { render } from "vue";
-import MessageReply from "~/components/UserInterface/MessageReply.vue";
+import MessageReply from "~/components/MessageReply.vue";
 import type { MessageProps } from "~/types/props";
 
 export default (element: HTMLDivElement, props: MessageProps) => {