diff --git a/assets/styles/base.less b/assets/styles/base.less
index 2611f7a4d3..a92b6890be 100644
--- a/assets/styles/base.less
+++ b/assets/styles/base.less
@@ -494,17 +494,6 @@ a.link {
 }
 
 //Scrollbar
-.ps__thumb-x,
-.ps__thumb-y,
-.ps__rail-x:hover > .ps__thumb-x,
-.ps__rail-x:focus > .ps__thumb-x,
-.ps__rail-x.ps--clicking .ps__thumb-x,
-.ps__rail-y:hover > .ps__thumb-y,
-.ps__rail-y:focus > .ps__thumb-y,
-.ps__rail-y.ps--clicking .ps__thumb-y {
-  background: @flair-color !important;
-}
-
 .auto-scroll {
   &::-webkit-scrollbar-thumb {
     &:extend(.background-flair);
diff --git a/assets/styles/framework/colors.less b/assets/styles/framework/colors.less
index 7729b3b09a..53464b428e 100644
--- a/assets/styles/framework/colors.less
+++ b/assets/styles/framework/colors.less
@@ -166,6 +166,12 @@
   rgba(34, 44, 63, 0) 100%
 );
 
+@lighter-splash-radial: radial-gradient(
+  circle,
+  rgba(96, 109, 136, 0.813) 0%,
+  rgba(101, 114, 139, 0.616) 100%
+);
+
 @midground-gradient: -webkit-radial-gradient(
     top left,
     #1c273a,
diff --git a/assets/styles/framework/framework.less b/assets/styles/framework/framework.less
index cfc97485db..812d76cf90 100644
--- a/assets/styles/framework/framework.less
+++ b/assets/styles/framework/framework.less
@@ -16,8 +16,6 @@
 @fifth-layer-zindex: 50;
 @viewport-width: 100vw;
 
-@import url('~/assets/styles/thirdparty/scrollbar.less');
-
 #__nuxt,
 #__layout,
 #app-wrap,
diff --git a/assets/styles/themes/moonless_night.less b/assets/styles/themes/moonless_night.less
index 1ebad54a58..e0d8461f94 100644
--- a/assets/styles/themes/moonless_night.less
+++ b/assets/styles/themes/moonless_night.less
@@ -30,9 +30,7 @@
   }
 
   &body,
-  #app,
-  .horizontal-rule,
-  .vertical-divider {
+  #app {
     background: @midground !important;
   }
 
diff --git a/assets/styles/thirdparty/scrollbar.less b/assets/styles/thirdparty/scrollbar.less
deleted file mode 100644
index 0d3a52e705..0000000000
--- a/assets/styles/thirdparty/scrollbar.less
+++ /dev/null
@@ -1,65 +0,0 @@
-.scroll-area {
-  &.scrollbar-visible {
-    &.ps:hover > .ps__rail-x,
-    &.ps:hover > .ps__rail-y,
-    &.ps--focus > .ps__rail-x,
-    &.ps--focus > .ps__rail-y,
-    &.ps--scrolling-x > .ps__rail-x,
-    &.ps--scrolling-y > .ps__rail-y {
-      opacity: 1;
-    }
-
-    &.ps .ps__rail-x:hover,
-    &.ps .ps__rail-y:hover,
-    &.ps .ps__rail-x:focus,
-    &.ps .ps__rail-y:focus,
-    &.ps .ps__rail-x.ps--clicking,
-    &.ps .ps__rail-y.ps--clicking {
-      opacity: 1;
-    }
-
-    &.always {
-      &.ps--active-x > .ps__rail-x,
-      &.ps--active-y > .ps__rail-y {
-        opacity: 1;
-      }
-    }
-  }
-
-  &.ps:hover > .ps__rail-x,
-  &.ps:hover > .ps__rail-y,
-  &.ps--focus > .ps__rail-x,
-  &.ps--focus > .ps__rail-y,
-  &.ps--scrolling-x > .ps__rail-x,
-  &.ps--scrolling-y > .ps__rail-y {
-    opacity: 0;
-  }
-
-  &.ps .ps__rail-x:hover,
-  &.ps .ps__rail-y:hover,
-  &.ps .ps__rail-x:focus,
-  &.ps .ps__rail-y:focus,
-  &.ps .ps__rail-x.ps--clicking,
-  &.ps .ps__rail-y.ps--clicking {
-    opacity: 0;
-    background: transparent !important;
-  }
-
-  .ps__thumb-x {
-    width: @scrollbar-width;
-  }
-
-  .ps__thumb-y {
-    width: @scrollbar-width;
-  }
-}
-
-@media only screen and (max-width: @mobile-breakpoint) {
-  .ps__thumb-x {
-    width: @scrollbar-width-mobile;
-  }
-
-  .ps__thumb-y {
-    width: @scrollbar-width-mobile;
-  }
-}
diff --git a/components/interactables/Close/Close.less b/components/interactables/Close/Close.less
index 82965a8434..bf7b7a18a6 100644
--- a/components/interactables/Close/Close.less
+++ b/components/interactables/Close/Close.less
@@ -15,9 +15,18 @@
   cursor: pointer;
 }
 
+.wrapper .close-button {
+  right: 0;
+  top: 0;
+}
+
 @media only screen and (max-width: @mobile-breakpoint) {
   .close-button {
     right: @normal-spacing;
     top: @normal-spacing;
   }
+
+  .wrapper .close-button {
+    top: @large-spacing;
+  }
 }
diff --git a/components/interactables/UserPicker/UserPicker.html b/components/interactables/UserPicker/UserPicker.html
index d8bc87ca19..10c181d47d 100644
--- a/components/interactables/UserPicker/UserPicker.html
+++ b/components/interactables/UserPicker/UserPicker.html
@@ -15,8 +15,8 @@
     type="dark"
     :placeholder="$t('servers.create.select_friends_placeholder')"
   />
-  <UiScroll verticalScroll scrollbarVisibility="scroll" enableWrap>
-    <TypographyText
+  <UiSimpleScroll scrollMode="vertical" scrollShow="scroll"
+    ><TypographyText
       v-if="!filteredFriends.length"
       :text="$t('servers.create.user_picker_empty')"
       class="empty-results-text"
@@ -29,5 +29,5 @@
       :selected="isSelected(friend)"
       @click="toggle(friend)"
     />
-  </UiScroll>
+  </UiSimpleScroll>
 </div>
diff --git a/components/ui/ComingSoon/ComingSoon.less b/components/ui/ComingSoon/ComingSoon.less
index 3a88469448..72d7b9e5a6 100644
--- a/components/ui/ComingSoon/ComingSoon.less
+++ b/components/ui/ComingSoon/ComingSoon.less
@@ -25,15 +25,4 @@
     pointer-events: none;
     padding: 20px;
   }
-
-  .coming-soon-overlay::before {
-    content: 'Coming Soon';
-    position: absolute;
-    font-size: 2.5em;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    &:extend(.third-layer);
-  }
 }
diff --git a/components/ui/HorizontalRule/HorizontalRule.vue b/components/ui/HorizontalRule/HorizontalRule.vue
index fd537465ab..c5aece5be7 100644
--- a/components/ui/HorizontalRule/HorizontalRule.vue
+++ b/components/ui/HorizontalRule/HorizontalRule.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="horizontal-rule">
-    <hr />
+  <div class="horizontal-container">
+    <div class="horizontal-rule" />
   </div>
 </template>
 <script lang="ts">
@@ -9,14 +9,16 @@ import Vue from 'vue'
 export default Vue.extend({})
 </script>
 <style scoped lang="less">
-hr {
-  height: 0px;
-  border: none;
-  border-bottom: transparents;
-}
-div {
+.horizontal-rule {
   height: 1px;
   background: @splash-radial;
-  margin: @normal-spacing 0;
+}
+.horizontal-container {
+  padding: @normal-spacing 0;
+}
+.moonless-night {
+  .horizontal-rule {
+    background: @lighter-splash-radial;
+  }
 }
 </style>
diff --git a/components/ui/Scroll/Scroll.html b/components/ui/Scroll/Scroll.html
deleted file mode 100644
index 1ad38312d4..0000000000
--- a/components/ui/Scroll/Scroll.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<vue-custom-scrollbar
-  v-scroll-lock="true"
-  :class="[padded ? 'padded scroll-area' : 'scroll-area', classObject]"
-  :settings="settings"
-  ref="scrollRef"
->
-  <slot />
-</vue-custom-scrollbar>
diff --git a/components/ui/Scroll/Scroll.less b/components/ui/Scroll/Scroll.less
deleted file mode 100644
index 9fd36c6dac..0000000000
--- a/components/ui/Scroll/Scroll.less
+++ /dev/null
@@ -1,15 +0,0 @@
-.scroll-area {
-  margin: auto;
-  position: relative;
-  &:extend(.full-width);
-  height: @full;
-  white-space: nowrap;
-}
-
-.padded {
-  padding: 0 @normal-spacing;
-}
-
-.enable-wrap {
-  white-space: normal !important;
-}
diff --git a/components/ui/Scroll/Scroll.vue b/components/ui/Scroll/Scroll.vue
deleted file mode 100644
index 1d19fc7264..0000000000
--- a/components/ui/Scroll/Scroll.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template src="./Scroll.html"></template>
-
-<script>
-import Vue from 'vue'
-import vueCustomScrollbar from 'vue-custom-scrollbar'
-import 'vue-custom-scrollbar/dist/vueScrollbar.css'
-
-export default Vue.extend({
-  name: 'Scroll',
-  components: {
-    vueCustomScrollbar,
-  },
-  props: {
-    verticalScroll: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    horizontalScroll: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    scrollbarVisibility: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    theme: {
-      type: String,
-      default: 'light',
-      required: false,
-    },
-    padded: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    enableWrap: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-  },
-  data() {
-    return {
-      newMessageAlert: false,
-    }
-  },
-  computed: {
-    classObject() {
-      return {
-        'scrollbar-visible': ['always', 'scroll'].includes(
-          this.scrollbarVisibility,
-        ),
-        'enable-wrap': this.enableWrap,
-        always: this.scrollbarVisibility === 'always',
-        dark: this.theme === 'dark',
-      }
-    },
-    settings() {
-      return {
-        suppressScrollY: !this.verticalScroll,
-        suppressScrollX: !this.horizontalScroll,
-        wheelPropagation: false,
-      }
-    },
-  },
-})
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less" src="./Scroll.less"></style>
diff --git a/components/ui/SimpleScroll/SimpleScroll.less b/components/ui/SimpleScroll/SimpleScroll.less
index 5088d7a02d..8c8524f908 100644
--- a/components/ui/SimpleScroll/SimpleScroll.less
+++ b/components/ui/SimpleScroll/SimpleScroll.less
@@ -5,7 +5,8 @@
   .wrapper {
     pointer-events: auto;
     width: @full;
-    height: @full;
+    height: fit-content;
+    height: -moz-fit-content;
     margin: auto;
     position: relative;
     white-space: normal;
diff --git a/components/ui/VerticalRule/VerticalRule.vue b/components/ui/VerticalRule/VerticalRule.vue
index 685199b35c..d1ad37d208 100644
--- a/components/ui/VerticalRule/VerticalRule.vue
+++ b/components/ui/VerticalRule/VerticalRule.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="vertical-rule">
-    <div />
+  <div class="vertical-container">
+    <div class="vertical-rule" />
   </div>
 </template>
 <script lang="ts">
@@ -9,12 +9,12 @@ import Vue from 'vue'
 export default Vue.extend({})
 </script>
 <style scoped lang="less">
-div {
+.vertical-rule {
   width: 1px;
   height: 40px;
   background: @splash-radial;
 }
-div.vertical-rule {
-  margin: 0 @normal-spacing;
+.vertical-container {
+  padding: 0 @normal-spacing;
 }
 </style>
diff --git a/components/views/marketplace/Marketplace.html b/components/views/marketplace/Marketplace.html
index e409e86b50..9c1fc22057 100644
--- a/components/views/marketplace/Marketplace.html
+++ b/components/views/marketplace/Marketplace.html
@@ -45,16 +45,11 @@
         </InteractablesButtonGroup>
       </div>
       <div class="listing-panel">
-        <UiScroll
-          verticalScroll
-          scrollbarVisibility="scroll"
-          enableWrap
-          noPadding
-        >
+        <UiSimpleScroll scrollMode="vertical" scrollShow="scroll">
           <MarketplaceListing v-if="subject==='Themes'" />
           <MarketplaceGlyphs v-if="subject==='Glyphs'" />
           <MarketplaceNfts v-if="subject==='NFTs'" />
-        </UiScroll>
+        </UiSimpleScroll>
       </div>
     </swiper-slide>
   </swiper>
diff --git a/components/views/navigation/mobile/sidebar/sidebar.vue b/components/views/navigation/mobile/sidebar/sidebar.vue
index aadd481b2f..8b8ecb039d 100644
--- a/components/views/navigation/mobile/sidebar/sidebar.vue
+++ b/components/views/navigation/mobile/sidebar/sidebar.vue
@@ -95,7 +95,11 @@
         v-scroll-lock="true"
         class="scrolling hidden-scroll users"
       >
-        <UiSimpleScroll scroll-mode="vertical" scroll-show="scroll">
+        <UiSimpleScroll
+          scroll-mode="vertical"
+          scroll-show="scroll"
+          :container-class="isNoFriends ? 'no-friends-scrollbar' : ''"
+        >
           <UiLoadersAddress
             v-if="dataState.friends === DataStateType.Loading"
             :count="4"
@@ -318,13 +322,20 @@ export default Vue.extend({
       top: 2.5rem;
       right: 1rem;
     }
+
+    #simple-scrollbar.no-friend-scrollbar {
+      display: flex;
+      align-items: center;
+    }
+
     .no-friends {
       &:extend(.full-width);
       display: inline-flex;
       justify-content: center;
       flex-direction: column;
       align-items: center;
-      height: calc(100% - @sidebar-inner-offset);
+      height: @full;
+      padding-bottom: @xlarge-spacing;
 
       .button {
         margin-top: @normal-spacing;
diff --git a/components/views/navigation/slimbar/Slimbar.html b/components/views/navigation/slimbar/Slimbar.html
index 29f171bf76..289cff74dd 100644
--- a/components/views/navigation/slimbar/Slimbar.html
+++ b/components/views/navigation/slimbar/Slimbar.html
@@ -1,51 +1,41 @@
 <div :id="horizontal ? 'servers-horizontal-list' : 'servers-vertical-list'">
-  <div class="servers">
-    <div
-      v-if="horizontal"
-      class="circle-group"
-      @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
-    >
-      <UiCircle type="icon" :size="40">
-        <plus-icon size="0.75x" />
-      </UiCircle>
-    </div>
+  <div
+    v-if="horizontal"
+    class="circle-group"
+    @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
+  >
+    <UiCircle type="icon" :size="40">
+      <plus-icon size="0.75x" />
+    </UiCircle>
+  </div>
+
+  <div
+    v-on:click="$router.push('/chat/direct')"
+    class="circle-group"
+    v-if="horizontal"
+  >
+    <UiCircle type="icon" :size="40">
+      <satellite-icon size="0.75x" />
+    </UiCircle>
+  </div>
 
+  <div id="list-container-vertical" v-else>
     <div v-on:click="$router.push('/chat/direct')" class="circle-group">
       <UiCircle type="icon" :size="40">
         <satellite-icon size="0.75x" />
       </UiCircle>
     </div>
-    <UiScroll verticalScroll v-if="!horizontal">
-      <div class="slimbar-spinner" v-if="friendsDS === DataStateType.Loading">
-        <UiLoadersSpinner :spinning="true" />
-      </div>
-      <div id="list-container" v-else>
-        <UiHorizontalRule v-if="friendsWithUnreadMessages.length" />
-        <div class="unreads" v-for="user in friendsWithUnreadMessages">
-          <Unread
-            :key="user.address"
-            :user="user"
-            :active="$route.params.address === user.address"
-          />
-        </div>
-        <UiHorizontalRule v-if="servers.length > 0" />
-        <UiComingSoon :tooltipText="$t('coming_soon.communities')">
-          <div
-            class="server"
-            v-for="server in servers"
-            v-on:click="$router.push('/server/chat')"
-          >
-            <UiCircle
-              type="random"
-              :size="40"
-              :seed="server.address"
-              :name="server.name"
-            />
-          </div>
-        </UiComingSoon>
-      </div>
-    </UiScroll>
-    <div id="list-container" v-else>
+
+    <UiHorizontalRule
+      class="horizontal-rule-padding"
+      v-if="friendsWithUnreadMessages.length && friendsDS !== DataStateType.Loading"
+    />
+
+    <div class="slimbar-spinner" v-if="friendsDS === DataStateType.Loading">
+      <UiLoadersSpinner :spinning="true" />
+    </div>
+
+    <UiSimpleScroll scrollMode="vertical" scrollShow="scroll" v-else>
       <div class="unreads" v-for="user in friendsWithUnreadMessages">
         <Unread
           :key="user.address"
@@ -54,13 +44,9 @@
         />
       </div>
 
-      <UiVerticalRule v-if="servers.length > 0" />
+      <UiHorizontalRule />
 
-      <UiComingSoon
-        :tooltipText="$t('coming_soon.communities')"
-        :horizontal="horizontal"
-        :tooltipPosition="'bottom'"
-      >
+      <UiComingSoon :tooltipText="$t('coming_soon.communities')">
         <div
           class="server"
           v-for="server in servers"
@@ -74,9 +60,8 @@
           />
         </div>
       </UiComingSoon>
-    </div>
+    </UiSimpleScroll>
     <div
-      v-if="!horizontal"
       class="circle-group"
       v-tooltip.right="$t('servers.new_server')"
       @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
@@ -96,4 +81,34 @@
       </UiCircle>
     </div>
   </div>
+  <div id="list-container" v-else>
+    <div class="unreads" v-for="user in friendsWithUnreadMessages">
+      <Unread
+        :key="user.address"
+        :user="user"
+        :active="$route.params.address === user.address"
+      />
+    </div>
+
+    <UiVerticalRule v-if="servers.length > 0" />
+
+    <UiComingSoon
+      :tooltipText="$t('coming_soon.communities')"
+      :horizontal="horizontal"
+      :tooltipPosition="'bottom'"
+    >
+      <div
+        class="server"
+        v-for="server in servers"
+        v-on:click="$router.push('/server/chat')"
+      >
+        <UiCircle
+          type="random"
+          :size="40"
+          :seed="server.address"
+          :name="server.name"
+        />
+      </div>
+    </UiComingSoon>
+  </div>
 </div>
diff --git a/components/views/navigation/slimbar/Slimbar.less b/components/views/navigation/slimbar/Slimbar.less
index 3ccfa06cca..4c52a58590 100644
--- a/components/views/navigation/slimbar/Slimbar.less
+++ b/components/views/navigation/slimbar/Slimbar.less
@@ -2,13 +2,11 @@
   height: @full;
   width: @slimbar-size;
   min-width: @slimbar-size;
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
   justify-content: flex-start;
   pointer-events: none;
-  padding-left: 0.6rem;
-  padding-top: @normal-spacing;
-
-  &:extend(.first-layer);
+  box-sizing: border-box;
 
   .circle-group {
     margin: @normal-spacing 0;
@@ -27,16 +25,15 @@
     margin-bottom: unset;
   }
 
-  .servers {
-    .circle {
-      margin: 0.25rem 0;
-    }
+  .circle {
+    margin: @xlight-spacing 0;
+    &:extend(.first-layer);
   }
 
   .unreads {
     position: relative;
     .unread {
-      margin: 0.5rem 0;
+      padding: @xlight-spacing 0;
     }
   }
 
@@ -47,16 +44,21 @@
     &:extend(.first-layer);
   }
 
-  .scroll-area {
-    height: auto;
-    max-height: calc(@full - 10rem);
-    width: 200px;
-    overflow: hidden;
+  #list-container-vertical {
     display: flex;
+    flex-direction: column;
+    height: @full;
+    pointer-events: auto;
+    box-sizing: border-box;
+    padding-left: @light-spacing;
+    padding-top: @normal-spacing;
+
+    #simple-scrollbar {
+      height: auto;
+    }
   }
   #list-container {
     height: fit-content;
-    max-height: calc(@full - 10rem);
     position: relative;
     pointer-events: auto;
   }
@@ -70,6 +72,10 @@
     justify-content: center;
     text-align: center;
   }
+
+  .horizontal-rule-padding {
+    margin-right: @scroll-bar-size * 2;
+  }
 }
 
 #servers-horizontal-list {
@@ -88,6 +94,10 @@
     margin-bottom: unset;
   }
 
+  .circle {
+    margin: 0 @light-spacing;
+  }
+
   .servers {
     &::-webkit-scrollbar {
       display: none;
@@ -97,7 +107,6 @@
       align-items: center;
     }
     .circle {
-      margin: 0 @light-spacing;
       position: relative;
     }
     display: inline-flex;
diff --git a/components/views/settings/modal/Modal.html b/components/views/settings/modal/Modal.html
index 5500a3de61..2a575e5cd2 100644
--- a/components/views/settings/modal/Modal.html
+++ b/components/views/settings/modal/Modal.html
@@ -16,10 +16,10 @@
         </UiSimpleScroll>
       </swiper-slide>
       <swiper-slide class="not-sidebar hidden-scroll" v-scroll-lock="true">
-        <UiScroll
-          :verticalScroll="verticalScroll"
-          enableWrap
-          scrollbarVisibility="scroll"
+        <UiSimpleScroll
+          containerClass="modal-container"
+          scrollMode="vertical"
+          scrollShow="scroll"
         >
           <menu-icon
             v-if="$device.isMobile"
@@ -65,7 +65,7 @@
           <SettingsPagesPrivacy
             v-if="this.ui.settingsRoute === SettingsRoutes.PRIVACY"
           />
-        </UiScroll>
+        </UiSimpleScroll>
       </swiper-slide>
     </swiper>
   </div>
diff --git a/components/views/settings/modal/Modal.less b/components/views/settings/modal/Modal.less
index f4223fa95b..d9f18c4a19 100644
--- a/components/views/settings/modal/Modal.less
+++ b/components/views/settings/modal/Modal.less
@@ -56,6 +56,20 @@ p {
     width: 100%;
     box-sizing: border-box;
     &:extend(.background-semitransparent-dark);
+
+    #simple-scrollbar.modal-container {
+      width: calc(@full - @sidebar-size);
+      height: @full;
+      padding: @xlarge-spacing;
+      box-sizing: border-box;
+    }
+
+    @media only screen and (max-width: @mobile-breakpoint) {
+      #simple-scrollbar.modal-container {
+        width: @full;
+        padding-bottom: @mobile-nav-size;
+      }
+    }
   }
 }
 
diff --git a/components/views/settings/pages/info/index.vue b/components/views/settings/pages/info/index.vue
index 0e50c0092c..7f288d6b91 100644
--- a/components/views/settings/pages/info/index.vue
+++ b/components/views/settings/pages/info/index.vue
@@ -39,3 +39,13 @@ export default Vue.extend({
   },
 })
 </script>
+<style scoped lang="less">
+#developer-settings {
+  pre {
+    white-space: pre-wrap;
+    text-align: left;
+    &:extend(.bordered);
+    &:extend(.round-corners);
+  }
+}
+</style>
diff --git a/package.json b/package.json
index e270c75f74..f07ccb8e24 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,6 @@
     "v-scroll-lock": "^1.3.1",
     "vue-awesome-swiper": "^4.1.1",
     "vue-croppie": "^2.0.2",
-    "vue-custom-scrollbar": "^1.4.3",
     "vue-emoji-picker": "git+https://git@github.com/Satellite-im/vue-emoji-picker#build-satellite",
     "vue-markdown": "^2.2.4",
     "vue-multiselect": "^2.1.6",