diff --git a/html/src/app.js b/html/src/app.js
index 69de0b6b..08a4fd67 100644
--- a/html/src/app.js
+++ b/html/src/app.js
@@ -7655,6 +7655,7 @@ speechSynthesis.getVoices();
     $app.data.worldAutoCacheGPSFilter = configRepository.getBool('VRCX_worldAutoCacheGPSFilter');
     $app.data.autoSweepVRChatCache = configRepository.getBool('VRCX_autoSweepVRChatCache');
     $app.data.vrBackgroundEnabled = configRepository.getBool('VRCX_vrBackgroundEnabled');
+    $app.data.asideWidth = configRepository.getInt('VRCX_asidewidth');
     var saveOpenVROption = function () {
         configRepository.setBool('openVR', this.openVR);
         configRepository.setBool('openVRAlways', this.openVRAlways);
@@ -7775,6 +7776,10 @@ speechSynthesis.getVoices();
         $app.data.vrBackgroundEnabled = false;
         configRepository.setBool('VRCX_vrBackgroundEnabled', $app.data.vrBackgroundEnabled);
     }
+    if (!configRepository.getInt('VRCX_asidewidth')) {
+        $app.data.asideWidth = 236;
+        configRepository.setInt('VRCX_asidewidth', $app.data.asideWidth);
+    }
     if (!configRepository.getString('sharedFeedFilters')) {
         var sharedFeedFilters = {
             noty: {
@@ -13112,6 +13117,11 @@ speechSynthesis.getVoices();
         return false;
     };
 
+    $app.methods.setAsideWidth = function () {
+        document.getElementById('aside').style.width = this.asideWidth + 'px';
+        configRepository.setInt('VRCX_asidewidth', this.asideWidth);
+    };
+
     $app = new Vue($app);
     window.$app = $app;
 }());
diff --git a/html/src/app.scss b/html/src/app.scss
index d2dd9a57..9ca58941 100644
--- a/html/src/app.scss
+++ b/html/src/app.scss
@@ -198,7 +198,6 @@ a {
     display: flex;
     flex: none;
     flex-direction: column;
-    width: 236px;
     background: #f8f8f8;
 }
 
diff --git a/html/src/index.pug b/html/src/index.pug
index f9a37e3b..5ab258eb 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -682,7 +682,9 @@ html
                         span.name Use a Primary Password
                         el-switch(v-model="enablePrimaryPassword" @change="enablePrimaryPasswordChange" :disabled="!loginForm.savedCredentials[API.currentUser.username]")
                 div.options-container
-                    span.header Side Panel Sorting Options
+                    span.header Side Panel
+                    br
+                    span.sub-header Sorting
                     div.options-container-item
                         span.name Sort Private to bottom
                         el-switch(v-model="orderFriendsGroupPrivate")
@@ -702,9 +704,13 @@ html
                     div.options-container-item
                         span.name Offline
                         el-switch(v-model="orderFriendsGroup3" inactive-text="alphabetical" active-text="online for")
-                    div.options-container
-                        span.header Trust Rank Colors
-                        div.options-container-item
+                    br
+                    span.sub-header Width
+                    div.options-container-item
+                        el-slider(v-model="asideWidth" @input="setAsideWidth" :show-tooltip="false" :marks="{236: ''}" :min="141" :max="500" style="width:300px")
+                div.options-container
+                    span.header Trust Rank Colors
+                    div.options-container-item
                             div
                                 v-swatches(v-model="trustColor.untrusted" show-fallback fallback-input-type="color" popover-x="right" :swatches="trustColorSwatches" class="x-tag-untrusted")
                                     span.color-picker(slot="trigger") #[i.el-icon-s-open] Visitor
@@ -881,9 +887,9 @@ html
                         el-button(@click="ossDialog = true" size="small") Open Source Software Notice
 
             //- friends
-            .x-aside-container(v-show="$refs.menu && $refs.menu.activeIndex !== 'friendsList'")
-                div(style="display:inline-block")
-                    el-select(v-model="quickSearch" clearable placeholder="Search" filterable remote :remote-method="quickSearchRemoteMethod" popper-class="x-quick-search" @change="quickSearchChange" @visible-change="quickSearchVisibleChange" style="flex:none;padding:10px;width:139px")
+            .x-aside-container(v-show="$refs.menu && $refs.menu.activeIndex !== 'friendsList'" id="aside") 
+                div(style="display:flex;align-items:baseline")
+                    el-select(v-model="quickSearch" clearable placeholder="Search" filterable remote :remote-method="quickSearchRemoteMethod" popper-class="x-quick-search" @change="quickSearchChange" @visible-change="quickSearchVisibleChange" style="flex:1;padding:10px")
                         el-option(v-for="item in quickSearchItems" :key="item.value" :value="item.value" :label="item.label")
                             .x-friend-item
                                 template(v-if="item.ref")