diff --git a/package.json b/package.json
index 2e298ff3fcfa9c664948d9fce65a63aee4f166b5..aa060bc8a8ef14312ce3c49bf8639af9f7b2433c 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
     "react-router-dom": "^5.2.0",
     "react-scroll": "^1.8.2",
     "redux": "^4.1.0",
-    "revolt.js": "4.3.3-alpha.8",
+    "revolt.js": "4.3.3-alpha.9",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "shade-blend-color": "^1.0.0",
diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
index a34921d7845548ec953fc25bb866fa2173b6b897..5995c2f53e84ded0bb16cb6f517ba2fe1d726a2d 100644
--- a/src/components/navigation/BottomNavigation.tsx
+++ b/src/components/navigation/BottomNavigation.tsx
@@ -14,8 +14,8 @@ import IconButton from "../ui/IconButton";
 
 const NavigationBase = styled.div`
     z-index: 100;
-    height: 50px;
     display: flex;
+    height: var(--bottom-navigation-height);
     background: var(--secondary-background);
 `;
 
diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss
index d5e4ff3367abbf6208768b2288eedff47750828a..4238d825cf5ede95291323d6feaa8fc9bc95b32c 100644
--- a/src/components/navigation/items/Item.module.scss
+++ b/src/components/navigation/items/Item.module.scss
@@ -150,7 +150,7 @@
         height: 40px;
 
         &.compact {
-            height: 50px;
+            height: var(--bottom-navigation-height);
 
             > div {
                 gap: 20px;
diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx
index 1381692b73fb6fa519ba98f27938e7b5adcf6114..124dabe5845dd58cbd32c5f32ae492901702acb2 100644
--- a/src/components/navigation/right/MemberSidebar.tsx
+++ b/src/components/navigation/right/MemberSidebar.tsx
@@ -233,7 +233,10 @@ export function ServerMemberSidebar({
         <GenericSidebarBase>
             <GenericSidebarList>
                 <ChannelDebugInfo id={channel._id} />
-                <Category
+                <div>
+                    {!members && <Preloader type="ring" />}
+                </div>
+                { members && <Category
                     variant="uniform"
                     text={
                         <span>
@@ -241,8 +244,7 @@ export function ServerMemberSidebar({
                             {users.length}
                         </span>
                     }
-                />
-                {!members && <Preloader type="ring" />}
+                /> }
                 {members && users.length === 0 && <img src={placeholderSVG} />}
                 {users.map(
                     (user) =>
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index ee9c6f90ef010b31c2b21ecfcdab3ee17473ad95..474f91216c469a5e4996891300eb84e581e47dcd 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -28,6 +28,10 @@
         flex-direction: column;
         justify-content: center;
     }
+
+    &[data-mobile="true"] {
+        padding-bottom: var(--bottom-navigation-height);
+    }
 }
 
 .friend {
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index d87170ea074721ac7f7e7fb9b17e867b214d462d..cb0c85cfb39d669fcbd9a92deb4f4fe708716207 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -121,7 +121,7 @@ export default function Friends() {
                     */}
                 </div>
             </Header>
-            <div className={styles.list} data-empty={isEmpty}>
+            <div className={styles.list} data-empty={isEmpty} data-mobile={isTouchscreenDevice}>
                 {isEmpty && (
                     <>
                         <img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
@@ -210,6 +210,8 @@ export default function Friends() {
                         </CollapsibleSection>
                     );
                 })}
+
+<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h1>test</h1>
             </div>
         </>
     );
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index e8648eb9cc7d26f3815e256f721dd8bdb7293325..aea20a6145543882c68be6d5b3081f4edda6ccf0 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -41,7 +41,7 @@
     }
 
     .content {
-        padding: 10px 12px 50px;
+        padding: 10px 12px var(--bottom-navigation-height);
     }
 }
 
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 6f3e02aed1ed229af8f97d3644bd653a3d262a24..ec7151d241f964edb74c5455e36db886a34a128b 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -4,4 +4,6 @@
     --app-height: 100vh;
     --codeblock-font: "Fira Code";
     --sidebar-active: var(--secondary-background);
+
+    --bottom-navigation-height: 50px;
 }
diff --git a/yarn.lock b/yarn.lock
index 6fec18642ef22fc373748e1f54afa9d80e866547..09a3cd7080bec9fd2f4457f315d48a7056b09ee2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3590,10 +3590,10 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-revolt.js@4.3.3-alpha.8:
-  version "4.3.3-alpha.8"
-  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.8.tgz#2a191ffa9d4c304e328b5eb8d9dc1e13e1f99d9a"
-  integrity sha512-A6sjZ7cmeQuqS9otzANv+Rg4CfvpsTMoDARBwQuez4O7NPRopdWNHylUPo20UutAPzW9xoqVbF8673VlTu5Jag==
+revolt.js@4.3.3-alpha.9:
+  version "4.3.3-alpha.9"
+  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.9.tgz#7015793e465438a78b7e6e57a688be4e75f9c934"
+  integrity sha512-RIFexFJMInTeEvOGx+l0VPtzoFIcl3ruQN0NA2UFYiz1zoQ4J3KGmmt5ig/OK/mZTbTysyQx1LSIdmMs2yZBFw==
   dependencies:
     "@insertish/mutable" "1.1.0"
     axios "^0.19.2"