diff --git a/layouts/client.vue b/layouts/client.vue
index 6c629da..73a40d6 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -123,30 +123,6 @@ const members = [
 	grid-row: 1;
 }
 
-#test {
-	grid-column: 3;
-	grid-row: 1;
-}
-
-.member-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-#message-history,
-#members-list {
-	padding-top: 3dvh;
-}
-
-#message-history {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	padding-left: 3dvw;
-	padding-right: 3dvw;
-}
-
 #left-column {
 	display: flex;
 	flex-direction: column;
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 4f3e4ec..3975e5b 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -24,11 +24,13 @@
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
-		<div id="members-list">
-			<div class="member-item" v-for="member of members">
-				<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
-				<Icon v-else class="member-avatar" name="lucide:user" />
-				<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
+		<div id="members-container">
+			<div id="members-list">
+				<div class="member-item" v-for="member of members">
+					<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
+					<Icon v-else class="member-avatar" name="lucide:user" />
+					<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
+				</div>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -79,18 +81,6 @@ function toggleInvitePopup(e: Event) {
 </script>
 
 <style>
-.member-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-top: .5em;
-	margin-bottom: .5em;
-	gap: .5em;
-}
-
-#members-list {
-	padding-top: 3dvh;
-}
 
 #middle-left-column {
 	padding-left: 1dvw;
@@ -98,12 +88,29 @@ function toggleInvitePopup(e: Event) {
 	border-right: 1px solid rgb(70, 70, 70);
 }
 
-#members-list {
+#members-container {
+	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-left: 1px solid rgb(70, 70, 70);
 }
 
+#members-list {
+	display: grid;
+	grid-template-columns: auto;
+}
+
+.member-item {
+	display: grid;
+	grid-template-columns: 2dvw auto;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: 1em;
+	align-items: center;
+	text-align: left;
+	
+}
+
 #channels-list {
 	display: flex;
 	flex-direction: column;
@@ -116,4 +123,9 @@ function toggleInvitePopup(e: Event) {
 	border-radius: 50%;
 }
 
+.member-display-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 </style>
\ No newline at end of file