diff --git a/src/components/navigation/BottomNavigation.tsx b/src/components/navigation/BottomNavigation.tsx
index c7e527ba..69b3e50e 100644
--- a/src/components/navigation/BottomNavigation.tsx
+++ b/src/components/navigation/BottomNavigation.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useHistory, useLocation } from "react-router";
 import styled, { css } from "styled-components/macro";
 
-import { IconButton } from "@revoltchat/ui";
+import { Centred, IconButton } from "@revoltchat/ui";
 
 import ConditionalLink from "../../lib/ConditionalLink";
 
@@ -27,6 +27,11 @@ const Navbar = styled.div`
 
 const Button = styled.a<{ active: boolean }>`
     flex: 1;
+    color: var(--foreground);
+
+    a {
+        color: inherit !important;
+    }
 
     > a,
     > div,
@@ -64,7 +69,7 @@ export default observer(() => {
         <Base>
             <Navbar>
                 <Button active={homeActive}>
-                    <IconButton
+                    <Centred
                         onClick={() => {
                             if (settingsActive) {
                                 if (history.length > 0) {
@@ -81,13 +86,13 @@ export default observer(() => {
                             }
                         }}>
                         <Message size={24} />
-                    </IconButton>
+                    </Centred>
                 </Button>
                 <Button active={friendsActive}>
                     <ConditionalLink active={friendsActive} to="/friends">
-                        <IconButton>
+                        <Centred>
                             <Group size={25} />
-                        </IconButton>
+                        </Centred>
                     </ConditionalLink>
                 </Button>
                 {/*<Button active={searchActive}>
@@ -108,16 +113,16 @@ export default observer(() => {
                     <ConditionalLink
                         active={discoverActive}
                         to="/discover/servers">
-                        <IconButton>
+                        <Centred>
                             <Compass size={24} />
-                        </IconButton>
+                        </Centred>
                     </ConditionalLink>
                 </Button>
                 <Button active={settingsActive}>
                     <ConditionalLink active={settingsActive} to="/settings">
-                        <IconButton>
+                        <Centred>
                             <UserIcon target={user} size={26} status={true} />
-                        </IconButton>
+                        </Centred>
                     </ConditionalLink>
                 </Button>
             </Navbar>