diff --git a/components/Me/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
index 4b5df7a..b3d1788 100644
--- a/components/Me/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@@ -1,27 +1,30 @@
 <template>
-	<div id="middle-left-column">
-		<div id="friend-sidebar">
-			<div>
-				<h3>Direct Messages</h3>
-			</div>
-			<VerticalSpacer />
-
-			<NuxtLink class="user-item" :href="`/me`" tabindex="0">
-				<Icon class="user-avatar" name="lucide:user" />
-				<span class="user-display-name">Friends</span>
-			</NuxtLink>
-			<VerticalSpacer />
-			
-			<div id="direct-message-list">
-				<UserEntry v-for="user of friends" :user="user"
-						:href="`/me/${user.uuid}`"/> 
+	<ResizableSidebar width="14rem" min-width="10rem" max-width="30rem" border-sides="right" local-storage-name="friendsListWidth">
+		<div id="middle-left-column">
+			<div id="friend-sidebar">
+				<div>
+					<h3>Direct Messages</h3>
+				</div>
+				<VerticalSpacer />
+	
+				<NuxtLink class="user-item" :href="`/me`" tabindex="0">
+					<Icon class="user-avatar" name="lucide:user" />
+					<span class="user-display-name">Friends</span>
+				</NuxtLink>
+				<VerticalSpacer />
+				
+				<div id="direct-message-list">
+					<UserEntry v-for="user of friends" :user="user"
+							:href="`/me/${user.uuid}`"/> 
+				</div>
 			</div>
 		</div>
-	</div>
+	</ResizableSidebar>
 </template>
 
 <script lang="ts" setup>
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import ResizableSidebar from '../UserInterface/ResizableSidebar.vue';
 
 const { fetchFriends } = useApi();