diff --git a/components/Modal.vue b/components/Modal.vue
new file mode 100644
index 0000000..8d66b48
--- /dev/null
+++ b/components/Modal.vue
@@ -0,0 +1,25 @@
+<template>
+  <Teleport to="body">
+    <div 
+      v-if="opened"
+      class="absolute z-10 top-0 bottom-0 left-0 right-0"
+    >
+      <slot />
+      <div
+        class="bg-black/70 w-screen h-screen"
+        @click="$emit('close')"
+      />
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+defineEmits(['close']);
+
+defineProps({
+	opened: {
+		type: Boolean,
+		required: true
+	}
+});
+</script>
\ No newline at end of file
diff --git a/public/annie-spratt-8mqOw4DBBSg-unsplash.jpg b/public/annie-spratt-8mqOw4DBBSg-unsplash.jpg
new file mode 100644
index 0000000..56f8dc7
Binary files /dev/null and b/public/annie-spratt-8mqOw4DBBSg-unsplash.jpg differ
diff --git a/public/daiga-ellaby-snUtnGUp2zU-unsplash.jpg b/public/daiga-ellaby-snUtnGUp2zU-unsplash.jpg
new file mode 100644
index 0000000..ac9240c
Binary files /dev/null and b/public/daiga-ellaby-snUtnGUp2zU-unsplash.jpg differ
diff --git a/public/eberhard-grossgasteiger-eBXIZe1DU7Y-unsplash.jpg b/public/eberhard-grossgasteiger-eBXIZe1DU7Y-unsplash.jpg
new file mode 100644
index 0000000..3583053
Binary files /dev/null and b/public/eberhard-grossgasteiger-eBXIZe1DU7Y-unsplash.jpg differ
diff --git a/public/nahil-naseer-xljtGZ2-P3Y-unsplash.jpg b/public/nahil-naseer-xljtGZ2-P3Y-unsplash.jpg
new file mode 100644
index 0000000..3c76967
Binary files /dev/null and b/public/nahil-naseer-xljtGZ2-P3Y-unsplash.jpg differ
diff --git a/public/ryan-klaus-5CkzYaubjkk-unsplash.jpg b/public/ryan-klaus-5CkzYaubjkk-unsplash.jpg
new file mode 100644
index 0000000..bc4aa2c
Binary files /dev/null and b/public/ryan-klaus-5CkzYaubjkk-unsplash.jpg differ
diff --git a/public/tansu-topuzoglu-v2mlqhy5dLU-unsplash.jpg b/public/tansu-topuzoglu-v2mlqhy5dLU-unsplash.jpg
new file mode 100644
index 0000000..9ac04f5
Binary files /dev/null and b/public/tansu-topuzoglu-v2mlqhy5dLU-unsplash.jpg differ
diff --git a/server/api/user/[id]/[guildId]/profile.get.ts b/server/api/user/[id]/[guildId]/profile.get.ts
new file mode 100644
index 0000000..9ea02c2
--- /dev/null
+++ b/server/api/user/[id]/[guildId]/profile.get.ts
@@ -0,0 +1,47 @@
+import { IServer } from '~/types';
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient();
+
+export default defineEventHandler(async (event) => {
+	if (!event.context.user.authenticated) {
+		throw createError({
+			statusCode: 401,
+			statusMessage: 'You must be logged in to view a user in a guild.',
+		});
+	}
+
+	if (!event.context.params?.id || !event.context.params?.guildId) {
+		throw createError({
+			statusCode: 400,
+			statusMessage: 'A userId or guildId is required',
+		});
+	}
+
+	const { id: userId, guildId } = event.context.params;
+
+	if (!userId || !guildId) throw new Error('id or guild id missing on a dynamic route?');
+
+	const user = await prisma.user.findFirst({
+		where: {
+			id: userId,
+		},
+		select: {
+			id: true,
+			username: true,
+			roles: {
+				where: {
+					serverId: guildId,
+				},
+				select: {
+					id: true,
+					name: true,
+					administrator: true,
+					owner: true,
+				},
+			},
+			createdAt: true,
+		},
+	});
+
+	return user;
+});
\ No newline at end of file
diff --git a/server/api/user/[id]/profile.get.ts b/server/api/user/[id]/profile.get.ts
new file mode 100644
index 0000000..4fd76f1
--- /dev/null
+++ b/server/api/user/[id]/profile.get.ts
@@ -0,0 +1,35 @@
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient();
+
+export default defineEventHandler(async (event) => {
+	if (!event.context.user.authenticated) {
+		throw createError({
+			statusCode: 401,
+			statusMessage: 'You must be logged in to view a user in a guild.',
+		});
+	}
+
+	if (!event.context.params?.id) {
+		throw createError({
+			statusCode: 400,
+			statusMessage: 'A userId is required',
+		});
+	}
+
+	const { id: userId } = event.context.params;
+
+	if (!userId) throw new Error('id missing on a dynamic route?');
+
+	const user = await prisma.user.findFirst({
+		where: {
+			id: userId,
+		},
+		select: {
+			id: true,
+			username: true,
+			createdAt: true,
+		},
+	});
+
+	return user;
+});
\ No newline at end of file
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
new file mode 100644
index 0000000..1c3f2b4
--- /dev/null
+++ b/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"version":"5.0.2"}
\ No newline at end of file