diff --git a/App.vue b/App.vue
index aec58d3..d35f5ea 100644
--- a/App.vue
+++ b/App.vue
@@ -5,7 +5,7 @@
 				<Nav :servers="servers" />
 				<Sidebar :server="activeServer"
 					:user="user" />
-				<div class="w-full h-full">
+				<div class="w-[calc(100vw-88px-240px)] h-full">
 					<NuxtPage :user="user" />
 				</div>
 			</div>
diff --git a/components/Nav.vue b/components/Nav.vue
index 8d1c7e7..eb43ea2 100644
--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -96,7 +96,7 @@ export default {
 	methods: {
 		async createServer() {
 			const serverStore = useServerStore();
-			const { server } = await $fetch('/api/channel/create', { method: 'post', body: { serverName: this.serverName } })
+			const { server } = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName } })
 			this.createServerModelOpen = false;
 			this.serverName = '';
 			serverStore.addServer(server)
diff --git a/pages/channel/@me/[dmId].vue b/pages/channel/@me/[dmId].vue
index aa692f3..17c990c 100644
--- a/pages/channel/@me/[dmId].vue
+++ b/pages/channel/@me/[dmId].vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="w-full h-full bg-[hsl(220,calc(1*7.7%),22.9%)] relative text-white">
+	<div class="h-full bg-[hsl(220,calc(1*7.7%),22.9%)] relative text-white">
 		<div class="w-full h-[calc(100%-60px)] overflow-y-scroll pb-1"
 			id="conversation-pane">
 			<div>
-				<div v-if="conversation.length === 0">
+				<div v-if="!conversation">
 					<p>No messages yet</p>
 				</div>
 				<div v-else
@@ -22,7 +22,7 @@
 						class="message-container">
 						<div class="message-sender">
 							<div class="message-sender-text">
-								<p class="message-sender-you">{{ conversations.userId }}</p>
+								<p class="message-sender">{{ conversations.userId }}</p>
 								<p>{{ conversations.body }}</p>
 							</div>
 						</div>
@@ -30,17 +30,34 @@
 				</div>
 			</div>
 		</div>
-		<div class="conversation-input w-full">
+		<div class="conversation-input w-[calc(100vw-88px-240px)]">
 			<form @submit.prevent="sendMessage"
-				class="relative px-4 w-[calc(100%-12rem)]">
-				<input type="text"
-					class="py-2 px-4 rounded-md bg-[hsl(218,calc(1*7.9%),27.3%)]"
-					id="message"
-					v-model="messageContent"
-					placeholder="Send a Message..." />
-				<input type="submit"
-					class=""
-					value="Send" />
+				class="relative px-4 w-full">
+				<div
+					id="textbox"
+					class="px-4 rounded-md w-full h-[44px] bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] flex flex-row">
+					<textarea
+						type="text"
+						id="messageBox"
+						style="position: relative; outline: none; white-space: pre-wrap; overflow-wrap: break-word;"
+						class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed"
+						v-model="messageContent"
+						placeholder="Send a Message..." />
+					<input type="submit"
+						class="absolute -top-full -left-full invisible"
+						id="submit">
+					<label for="submit"
+						class="py-1 px-1.5 h-fit my-auto"><svg width="32"
+							height="32"
+							viewBox="0 0 24 24">
+							<path fill="none"
+								stroke="currentColor"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3" />
+						</svg></label>
+				</div>
 			</form>
 		</div>
 	</div>
@@ -52,27 +69,24 @@ import { useServerStore } from '~/stores/servers'
 export default {
 	data() {
 		return {
-			conversation: [],
 			messageContent: ''
 		}
 	},
 	async setup() {
 		const route = useRoute()
 
-		const { server } = await $fetch(`/api/channel/${route.params.dmId}`)
+		const { channel: server } = await $fetch(`/api/channels/${route.params.dmId}`)
 		if (!server) return;
 		useServerStore().addDM(server);
-		const channelId = server.channels[0].id
 		await useServerStore().setActive('dms', server.id);
+
+		const conversation: Array<Record<string, unknown>> = server.messages
+
 		return {
 			server,
-			channelId
+			conversation
 		}
 	},
-	async mounted() {
-		const { channel } = await $fetch(`/api/channel/messages/${this.channelId}`)
-		this.conversation = channel.messages
-	},
 	async updated() {
 		if (!useServerStore().activeServer == this.server) await useServerStore().setActive('dms', this.server.id)
 	},
@@ -81,10 +95,22 @@ export default {
 			const route = useRoute()
 			if (!this.messageContent) return;
 
-			const { message } = await $fetch(`/api/channel/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: this.channelId } })
+			const { message } = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: route.params.dmId } })
 
 			this.conversation.push(message)
-		}
+			this.messageContent = '';
+		},
+		// resizeTextarea() {
+		// 	const textArea = document.getElementById('messageBox')
+		// 	const textBox = document.getElementById('textBox')
+		// 	var taLineHeight = 26; // This should match the line-height in the CSS
+		// 	var taHeight = textArea.scrollHeight; // Get the scroll height of the textarea
+		// 	textArea.style.height = taHeight + 'px'; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
+		// 	textBox.style.height = taHeight + 'px'; 
+		// 	var numberOfLines = Math.floor(taHeight / taLineHeight);
+		// 	console.log("there are " + numberOfLines + " lines in the text area");
+		// 	console.log('a')
+		// }
 	},
 	props: ['user']
 }
@@ -98,8 +124,25 @@ export default {
 	margin-top: 0.5rem;
 	margin-bottom: 0.5rem;
 	height: 60px;
-	border-top: #ffffff 1px solid;
-	background-color: #3C3C3C;
+	background-color: hsl(220, calc(1 * 7.7%), 22.9%);
 	bottom: calc(0px - 0.5rem);
 }
+
+.message-container {
+	transition: backdrop-filter 150ms cubic-bezier(.37, .64, .59, .33);
+	margin-top: 0.35rem;
+	margin-bottom: 0.35rem;
+	padding-left: 1.75rem;
+	padding-right: 1.75rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+}
+
+.message-container:hover {
+	backdrop-filter: brightness(1.15);
+}
+
+.message-sender-you {
+	font-weight: 600;
+}
 </style>
\ No newline at end of file
diff --git a/pages/channel/@me/index.vue b/pages/channel/@me/index.vue
index 6a4ef68..29681e8 100644
--- a/pages/channel/@me/index.vue
+++ b/pages/channel/@me/index.vue
@@ -16,7 +16,7 @@ export default {
 	},
 	methods: {
 		async startDM() {
-			const { server } = await $fetch('/api/channel/createDM', { method: 'post', body: { partnerId: this.userId } })
+			const { server } = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId } })
 
 			useServerStore().addDM(server)
 			useRouter().push({ path: '/channel/@me/' + server.id })
diff --git a/pages/channel/[id].vue b/pages/channel/[id].vue
index 201a7bf..8f76f80 100644
--- a/pages/channel/[id].vue
+++ b/pages/channel/[id].vue
@@ -9,7 +9,7 @@ export default {
 	async setup() {
 		const route = useRoute()
 
-		const { server } = await $fetch(`/api/channel/${route.params.id}`)
+		const { server } = await $fetch(`/api/channels/${route.params.id}`)
 		if (!server) return;
 		useServerStore().addServer(server);
 		await useServerStore().setActive('servers', server.id)
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 5f6b72b..df650e0 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -16,6 +16,8 @@ model User {
   serverId     String?
   messages     Message[]
   session      Session[]
+  Channel      Channel?  @relation(fields: [channelId], references: [id])
+  channelId    String?
 }
 
 model Server {
@@ -26,11 +28,13 @@ model Server {
 }
 
 model Channel {
-  id       String    @id @default(cuid())
-  name     String
-  server   Server?   @relation(fields: [serverId], references: [id])
-  serverId String?
-  messages Message[]
+  id             String    @id @default(cuid())
+  name           String
+  server         Server?   @relation(fields: [serverId], references: [id])
+  serverId       String?
+  messages       Message[]
+  DM             Boolean?
+  dmParticipants User[]
 }
 
 model Message {
diff --git a/server/api/channel/messages/[id].get.ts b/server/api/channels/[id]/index.get.ts
similarity index 61%
rename from server/api/channel/messages/[id].get.ts
rename to server/api/channels/[id]/index.get.ts
index d002bf4..a5b1e79 100644
--- a/server/api/channel/messages/[id].get.ts
+++ b/server/api/channels/[id]/index.get.ts
@@ -29,6 +29,27 @@ export default defineEventHandler(async (event) => {
 		}
 	}
 
+	if (channel.id && !channel.DM) {
+		const server = await prisma.server.findFirst({
+			where: {
+				id: channel.id
+			},
+			include: {
+				participants: true
+			}
+		})
+
+
+		const userInServer = server.participants.filter((e) => e.id === event.context.user.id)
+
+		if (!userInServer) {
+			event.node.res.statusCode = 401;
+			return {
+				message: `You mus be in the server to access a channel in that server`
+			}
+		}
+	}
+
 	return {
 		channel
 	}
diff --git a/server/api/channel/create.post.ts b/server/api/channels/create.post.ts
similarity index 100%
rename from server/api/channel/create.post.ts
rename to server/api/channels/create.post.ts
diff --git a/server/api/channel/createDM.post.ts b/server/api/channels/createDM.post.ts
similarity index 65%
rename from server/api/channel/createDM.post.ts
rename to server/api/channels/createDM.post.ts
index 7f8d2cd..912083d 100644
--- a/server/api/channel/createDM.post.ts
+++ b/server/api/channels/createDM.post.ts
@@ -30,9 +30,17 @@ export default defineEventHandler(async (event) => {
 		}
 	})
 
-	const preExistingServer = await prisma.server.findFirst({
+	if (!partner) {
+		event.node.res.statusCode = 400;
+		return {
+			message: 'No partner found'
+		}
+	}
+
+	const preExistingServer = await prisma.channel.findFirst({
 		where: {
-			name: `${user.username} and ${partner.username}`
+			name: `${user.id}-${partner.id}`,
+			DM: true
 		}
 	})
 
@@ -43,21 +51,14 @@ export default defineEventHandler(async (event) => {
 		}
 	}
 
-	const server = await prisma.server.create({
+	const server = await prisma.channel.create({
 		data: {
-			name: `${user.username} and ${partner.username}`,
-			participants: { connect: [{ id: event.context.user.id }, { id: partner.id }] },
-			channels: {
-				create: [
-					{
-						name: 'default',
-					},
-				]
-			}
+			name: `${user.username}-${partner.username}`,
+			dmParticipants: { connect: [{ id: event.context.user.id }, { id: partner.id }] },
+			DM: true
 		},
 		include: {
-			channels: true,
-			participants: true
+			dmParticipants: true
 		}
 	})
 
diff --git a/server/api/channel/sendMessage.post.ts b/server/api/channels/sendMessage.post.ts
similarity index 53%
rename from server/api/channel/sendMessage.post.ts
rename to server/api/channels/sendMessage.post.ts
index d964f37..ea6fbfb 100644
--- a/server/api/channel/sendMessage.post.ts
+++ b/server/api/channels/sendMessage.post.ts
@@ -21,31 +21,47 @@ export default defineEventHandler(async (event) => {
 	const channel = await prisma.channel.findFirst({
 		where: {
 			id: channelId
-		}
-	})
-
-	const server = await prisma.server.findFirst({
-		where: {
-			id: channel.serverId
 		},
 		include: {
-			participants: true
+			dmParticipants: true
 		}
 	})
 
-	const userInServer = server.participants.filter((e) => e.id === event.context.user.id)
+	console.log(channel)
 
-	if (!userInServer.length > 0) {
-		event.node.res.statusCode = 401;
-		return {
-			message: 'You must be in the server to send a message.'
+	if (!channel.DM) {
+		const server = await prisma.server.findFirst({
+			where: {
+				id: channel.serverId
+			},
+			include: {
+				participants: true
+			}
+		})
+
+		const userInServer = server.participants.filter((e) => e.id === event.context.user.id)
+
+		if (!userInServer.length > 0) {
+			event.node.res.statusCode = 401;
+			return {
+				message: 'You must be in the server to send a message.'
+			}
 		}
-	}
 
-	if (!server) {
-		event.node.res.statusCode = 404;
-		return {
-			message: 'Server not found'
+		if (!server) {
+			event.node.res.statusCode = 404;
+			return {
+				message: 'Server not found'
+			}
+		}
+	} else {
+		const userInDM = channel.dmParticipants.filter((e) => e.id === event.context.user.id)
+
+		if (!userInDM.length > 0) {
+			event.node.res.statusCode = 401;
+			return {
+				message: 'You must be in the DM to send a message.'
+			}
 		}
 	}
 
diff --git a/server/api/channel/[id].get.ts b/server/api/guilds/[id].get.ts
similarity index 100%
rename from server/api/channel/[id].get.ts
rename to server/api/guilds/[id].get.ts