diff --git a/ui/src/common/ConnectionErrorBanner.tsx b/ui/src/common/ConnectionErrorBanner.tsx
index 067a7eab1..3083c0d76 100644
--- a/ui/src/common/ConnectionErrorBanner.tsx
+++ b/ui/src/common/ConnectionErrorBanner.tsx
@@ -12,12 +12,17 @@ export const ConnectionErrorBanner = ({height, retry, message}: ConnectionErrorB
     <div
         style={{
             backgroundColor: '#e74c3c',
-            height,
+            minHeight: height,
             width: '100%',
             zIndex: 1300,
             position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '8px 16px',
+            boxSizing: 'border-box',
         }}>
-        <Typography align="center" variant="h6" style={{lineHeight: `${height}px`}}>
+        <Typography align="center" variant="h6" style={{lineHeight: 1.4}}>
             {message}{' '}
             <Button variant="outlined" onClick={retry}>
                 Retry
diff --git a/ui/src/common/ScrollUpButton.tsx b/ui/src/common/ScrollUpButton.tsx
index cf04c7f0e..1e5f007d0 100644
--- a/ui/src/common/ScrollUpButton.tsx
+++ b/ui/src/common/ScrollUpButton.tsx
@@ -9,10 +9,9 @@ const ScrollUpButton = () => {
             const currentScrollPos = Math.max(window.pageYOffset - 1000, 0);
             const opacity = Math.min(currentScrollPos / 1000, 1);
             const nextState = {display: currentScrollPos > 0 ? 'inherit' : 'none', opacity};
-            if (state.display !== nextState.display || state.opacity !== nextState.opacity) {
-                setState(nextState);
-            }
+            setState(nextState);
         };
+        scrollHandler();
         window.addEventListener('scroll', scrollHandler);
         return () => window.removeEventListener('scroll', scrollHandler);
     }, []);
diff --git a/ui/src/layout/Header.tsx b/ui/src/layout/Header.tsx
index 4ffc38a02..d9e1f96dd 100644
--- a/ui/src/layout/Header.tsx
+++ b/ui/src/layout/Header.tsx
@@ -19,6 +19,7 @@ import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
 import React, {CSSProperties} from 'react';
 import {Link} from 'react-router';
 import {useMediaQuery} from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import {ThemeKey} from './theme';
 
 const themeIcons: Record<ThemeKey, React.ReactElement> = {
@@ -36,9 +37,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     toolbar: {
         justifyContent: 'space-between',
-        [theme.breakpoints.down('sm')]: {
-            flexWrap: 'wrap',
-        },
     },
     menuButtons: {
         display: 'flex',
@@ -47,12 +45,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
         },
         justifyContent: 'center',
         [theme.breakpoints.down('sm')]: {
-            flexBasis: '100%',
-            marginTop: 5,
-            order: 1,
-            height: 50,
-            justifyContent: 'space-between',
-            alignItems: 'center',
+            flex: 'none',
+            height: 'auto',
+            margin: 0,
         },
     },
     title: {
@@ -81,6 +76,7 @@ interface IProps {
     showSettings: VoidFunction;
     logout: VoidFunction;
     style: CSSProperties;
+    navOpen: boolean;
     setNavOpen: (open: boolean) => void;
 }
 
@@ -92,6 +88,7 @@ const Header = ({
     toggleTheme,
     logout,
     style,
+    navOpen,
     setNavOpen,
     showSettings,
     themeMode,
@@ -128,29 +125,34 @@ const Header = ({
                         admin={admin}
                         name={name}
                         logout={logout}
+                        navOpen={navOpen}
                         setNavOpen={setNavOpen}
                         showSettings={showSettings}
                     />
                 )}
                 <div>
-                    <IconButton
-                        onClick={toggleTheme}
-                        color="inherit"
-                        size="large"
-                        title={themeLabel}
-                        aria-label={themeLabel}>
-                        {themeIcon}
-                    </IconButton>
-
-                    <a
-                        href="https://github.com/gotify/server"
-                        className={classes.link}
-                        target="_blank"
-                        rel="noopener noreferrer">
-                        <IconButton color="inherit" size="large">
-                            <GitHubIcon />
+                    <Tooltip title={themeLabel} arrow>
+                        <IconButton
+                            onClick={toggleTheme}
+                            color="inherit"
+                            size="large"
+                            aria-label={themeLabel}>
+                            {themeIcon}
                         </IconButton>
-                    </a>
+                    </Tooltip>
+
+                    <Tooltip title="Gotify on GitHub" arrow>
+                        <a
+                            href="https://github.com/gotify/server"
+                            className={classes.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            aria-label="Gotify on GitHub">
+                            <IconButton color="inherit" size="large" aria-label="Gotify on GitHub">
+                                <GitHubIcon />
+                            </IconButton>
+                        </a>
+                    </Tooltip>
                 </div>
             </Toolbar>
         </AppBar>
@@ -162,53 +164,64 @@ const Buttons = ({
     name,
     admin,
     logout,
+    navOpen,
     setNavOpen,
 }: {
     name: string;
     admin: boolean;
     logout: VoidFunction;
+    navOpen: boolean;
     setNavOpen: (open: boolean) => void;
     showSettings: VoidFunction;
 }) => {
     const {classes} = useStyles();
+    const mobile = useMediaQuery('(max-width:600px)');
 
     return (
         <div className={classes.menuButtons}>
             <ResponsiveButton
                 sx={{display: {sm: 'none', xs: 'block'}}}
                 icon={<MenuIcon />}
-                onClick={() => setNavOpen(true)}
+                onClick={() => setNavOpen(!navOpen)}
                 label="menu"
                 color="inherit"
             />
-            {admin && (
-                <Link className={classes.link} to="/users" id="navigate-users">
-                    <ResponsiveButton icon={<SupervisorAccount />} label="users" color="inherit" />
-                </Link>
+            {!mobile && (
+                <>
+                    {admin && (
+                        <Link className={classes.link} to="/users" id="navigate-users">
+                            <ResponsiveButton
+                                icon={<SupervisorAccount />}
+                                label="users"
+                                color="inherit"
+                            />
+                        </Link>
+                    )}
+                    <Link className={classes.link} to="/applications" id="navigate-apps">
+                        <ResponsiveButton icon={<Chat />} label="apps" color="inherit" />
+                    </Link>
+                    <Link className={classes.link} to="/clients" id="navigate-clients">
+                        <ResponsiveButton icon={<DevicesOther />} label="clients" color="inherit" />
+                    </Link>
+                    <Link className={classes.link} to="/plugins" id="navigate-plugins">
+                        <ResponsiveButton icon={<Apps />} label="plugins" color="inherit" />
+                    </Link>
+                    <ResponsiveButton
+                        icon={<AccountCircle />}
+                        label={name}
+                        onClick={showSettings}
+                        id="changepw"
+                        color="inherit"
+                    />
+                    <ResponsiveButton
+                        icon={<ExitToApp />}
+                        label="Logout"
+                        onClick={logout}
+                        id="logout"
+                        color="inherit"
+                    />
+                </>
             )}
-            <Link className={classes.link} to="/applications" id="navigate-apps">
-                <ResponsiveButton icon={<Chat />} label="apps" color="inherit" />
-            </Link>
-            <Link className={classes.link} to="/clients" id="navigate-clients">
-                <ResponsiveButton icon={<DevicesOther />} label="clients" color="inherit" />
-            </Link>
-            <Link className={classes.link} to="/plugins" id="navigate-plugins">
-                <ResponsiveButton icon={<Apps />} label="plugins" color="inherit" />
-            </Link>
-            <ResponsiveButton
-                icon={<AccountCircle />}
-                label={name}
-                onClick={showSettings}
-                id="changepw"
-                color="inherit"
-            />
-            <ResponsiveButton
-                icon={<ExitToApp />}
-                label="Logout"
-                onClick={logout}
-                id="logout"
-                color="inherit"
-            />
         </div>
     );
 };
@@ -224,9 +237,11 @@ const ResponsiveButton: React.FC<{
     const matches = useMediaQuery('(max-width:1000px)');
     if (matches) {
         return (
-            <IconButton {...rest} size="large">
-                {icon}
-            </IconButton>
+            <Tooltip title={label} arrow>
+                <IconButton {...rest} size="large" aria-label={label}>
+                    {icon}
+                </IconButton>
+            </Tooltip>
         );
     }
     return (
diff --git a/ui/src/layout/Layout.tsx b/ui/src/layout/Layout.tsx
index 15f604aaa..23efb28fb 100644
--- a/ui/src/layout/Layout.tsx
+++ b/ui/src/layout/Layout.tsx
@@ -37,14 +37,25 @@ const useStyles = makeStyles()((theme: Theme) => ({
         marginTop: 64,
         padding: theme.spacing(3),
         width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            marginLeft: 250,
+            width: 'calc(100% - 250px)',
+        },
         [theme.breakpoints.down('sm')]: {
             marginTop: 0,
             padding: theme.spacing(1),
         },
     },
+    contentWithConnectionError: {
+        marginTop: 128,
+        [theme.breakpoints.down('sm')]: {
+            marginTop: 0,
+        },
+    },
 }));
 
 const localStorageThemeKey = 'gotify-theme';
+const connectionBannerHeight = 64;
 
 const Layout = observer(() => {
     const {
@@ -106,7 +117,7 @@ const Layout = observer(() => {
                     <div key={refreshKey}>
                         {!connectionErrorMessage ? null : (
                             <ConnectionErrorBanner
-                                height={64}
+                                height={connectionBannerHeight}
                                 retry={() => tryReconnect()}
                                 message={connectionErrorMessage}
                             />
@@ -116,7 +127,7 @@ const Layout = observer(() => {
                             <Header
                                 admin={admin}
                                 name={name}
-                                style={{top: !connectionErrorMessage ? 0 : 64}}
+                                style={{top: !connectionErrorMessage ? 0 : connectionBannerHeight}}
                                 version={version}
                                 loggedIn={loggedIn}
                                 themeMode={currentTheme}
@@ -124,14 +135,25 @@ const Layout = observer(() => {
                                 showSettings={() => setShowSettings(true)}
                                 logout={logout}
                                 setNavOpen={setNavOpen}
+                                navOpen={navOpen}
                             />
                             <div style={{display: 'flex'}}>
                                 <Navigation
                                     loggedIn={loggedIn}
+                                    admin={admin}
+                                    name={name}
+                                    logout={logout}
+                                    showSettings={() => setShowSettings(true)}
+                                    bannerVisible={Boolean(connectionErrorMessage)}
                                     navOpen={navOpen}
                                     setNavOpen={setNavOpen}
                                 />
-                                <main className={classes.content}>
+                                <main
+                                    className={`${classes.content} ${
+                                        connectionErrorMessage
+                                            ? classes.contentWithConnectionError
+                                            : ''
+                                    }`}>
                                     <Routes>
                                         <Route path="/login" element={<Login />} />
                                         <Route path="/" element={authed(<Messages />)} />
diff --git a/ui/src/layout/Navigation.tsx b/ui/src/layout/Navigation.tsx
index c20f22872..fb84f6996 100644
--- a/ui/src/layout/Navigation.tsx
+++ b/ui/src/layout/Navigation.tsx
@@ -7,14 +7,18 @@ import {observer} from 'mobx-react-lite';
 import {mayAllowPermission, requestPermission} from '../snack/browserNotification';
 import {
     Button,
-    IconButton,
     Typography,
     ListItemText,
     ListItemAvatar,
     Avatar,
     ListItemButton,
 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import Apps from '@mui/icons-material/Apps';
+import Chat from '@mui/icons-material/Chat';
+import DevicesOther from '@mui/icons-material/DevicesOther';
+import ExitToApp from '@mui/icons-material/ExitToApp';
+import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
 import {makeStyles} from 'tss-react/mui';
 import {useStores} from '../stores';
 
@@ -23,13 +27,37 @@ const useStyles = makeStyles()((theme: Theme) => ({
         height: '100%',
     },
     drawerPaper: {
-        position: 'relative',
+        position: 'fixed',
         width: 250,
-        minHeight: '100%',
         height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    drawerContent: {
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        height: '100%',
+    },
+    scrollArea: {
+        minHeight: 0,
+        overflowY: 'auto',
+        flex: 1,
+        overscrollBehavior: 'contain',
+        WebkitOverflowScrolling: 'touch',
+    },
+    mobileOnly: {
+        [theme.breakpoints.up('sm')]: {
+            display: 'none',
+        },
     },
     // eslint-disable-next-line
     toolbar: theme.mixins.toolbar as any,
+    mobileToolbar: {
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
+    },
     link: {
         color: 'inherit',
         textDecoration: 'none',
@@ -38,93 +66,192 @@ const useStyles = makeStyles()((theme: Theme) => ({
 
 interface IProps {
     loggedIn: boolean;
+    admin: boolean;
+    name: string;
+    logout: VoidFunction;
+    showSettings: VoidFunction;
+    bannerVisible: boolean;
     navOpen: boolean;
     setNavOpen: (open: boolean) => void;
 }
 
-const Navigation = observer(({loggedIn, navOpen, setNavOpen}: IProps) => {
-    const [showRequestNotification, setShowRequestNotification] =
-        React.useState(mayAllowPermission);
-    const {classes} = useStyles();
-    const {appStore} = useStores();
-    const apps = appStore.getItems();
+const Navigation = observer(
+    ({loggedIn, admin, name, logout, showSettings, bannerVisible, navOpen, setNavOpen}: IProps) => {
+        const [showRequestNotification, setShowRequestNotification] =
+            React.useState(mayAllowPermission);
+        const {classes} = useStyles();
+        const {appStore} = useStores();
+        const apps = appStore.getItems();
 
-    const userApps =
-        apps.length === 0
-            ? null
-            : apps.map((app) => (
-                  <Link
-                      onClick={() => setNavOpen(false)}
-                      className={`${classes.link} item`}
-                      to={'/messages/' + app.id}
-                      key={app.id}>
-                      <ListItemButton>
-                          <ListItemAvatar style={{minWidth: 42}}>
-                              <Avatar
-                                  style={{width: 32, height: 32}}
-                                  src={app.image}
-                                  variant="square"
-                              />
-                          </ListItemAvatar>
-                          <ListItemText primary={app.name} />
-                      </ListItemButton>
-                  </Link>
-              ));
+        const userApps =
+            apps.length === 0
+                ? null
+                : apps.map((app) => (
+                      <Link
+                          onClick={() => setNavOpen(false)}
+                          className={`${classes.link} item`}
+                          to={'/messages/' + app.id}
+                          key={app.id}>
+                          <ListItemButton>
+                              <ListItemAvatar style={{minWidth: 42}}>
+                                  <Avatar
+                                      style={{width: 32, height: 32}}
+                                      src={app.image}
+                                      variant="square"
+                                  />
+                              </ListItemAvatar>
+                              <ListItemText primary={app.name} />
+                          </ListItemButton>
+                      </Link>
+                  ));
 
-    const placeholderItems = [
-        <ListItemButton disabled key={-1}>
-            <ListItemText primary="Some Server" />
-        </ListItemButton>,
-        <ListItemButton disabled key={-2}>
-            <ListItemText primary="A Raspberry PI" />
-        </ListItemButton>,
-    ];
+        const placeholderItems = [
+            <ListItemButton disabled key={-1}>
+                <ListItemText primary="Some Server" />
+            </ListItemButton>,
+            <ListItemButton disabled key={-2}>
+                <ListItemText primary="A Raspberry PI" />
+            </ListItemButton>,
+        ];
 
-    return (
-        <ResponsiveDrawer
-            classes={{root: classes.root, paper: classes.drawerPaper}}
-            navOpen={navOpen}
-            setNavOpen={setNavOpen}
-            id="message-navigation">
-            <div className={classes.toolbar} />
-            <Link className={classes.link} to="/" onClick={() => setNavOpen(false)}>
-                <ListItemButton disabled={!loggedIn} className="all">
-                    <ListItemText primary="All Messages" />
-                </ListItemButton>
-            </Link>
-            <Divider />
-            <div>{loggedIn ? userApps : placeholderItems}</div>
-            <Divider />
-            <Typography align="center" style={{marginTop: 10}}>
-                {showRequestNotification ? (
-                    <Button
-                        onClick={() => {
-                            requestPermission();
-                            setShowRequestNotification(false);
-                        }}>
-                        Enable Notifications
-                    </Button>
-                ) : null}
-            </Typography>
-        </ResponsiveDrawer>
-    );
-});
+        const mobileAction = (action: VoidFunction) => {
+            action();
+            setNavOpen(false);
+        };
+
+        return (
+            <ResponsiveDrawer
+                classes={{root: classes.root, paper: classes.drawerPaper}}
+                navOpen={navOpen}
+                setNavOpen={setNavOpen}
+                bannerVisible={bannerVisible}
+                id="message-navigation">
+                <div className={classes.drawerContent}>
+                    <div className={`${classes.toolbar} ${classes.mobileToolbar}`} />
+                    <div className={classes.scrollArea}>
+                        <Link className={classes.link} to="/" onClick={() => setNavOpen(false)}>
+                            <ListItemButton disabled={!loggedIn} className="all">
+                                <ListItemText primary="All Messages" />
+                            </ListItemButton>
+                        </Link>
+                        <Divider />
+                        {loggedIn && (
+                            <div className={classes.mobileOnly}>
+                                <Link
+                                    className={classes.link}
+                                    to="/applications"
+                                    onClick={() => setNavOpen(false)}>
+                                    <ListItemButton>
+                                        <ListItemAvatar>
+                                            <Chat />
+                                        </ListItemAvatar>
+                                        <ListItemText primary="Applications" />
+                                    </ListItemButton>
+                                </Link>
+                                <Link
+                                    className={classes.link}
+                                    to="/clients"
+                                    onClick={() => setNavOpen(false)}>
+                                    <ListItemButton>
+                                        <ListItemAvatar>
+                                            <DevicesOther />
+                                        </ListItemAvatar>
+                                        <ListItemText primary="Clients" />
+                                    </ListItemButton>
+                                </Link>
+                                <Link
+                                    className={classes.link}
+                                    to="/plugins"
+                                    onClick={() => setNavOpen(false)}>
+                                    <ListItemButton>
+                                        <ListItemAvatar>
+                                            <Apps />
+                                        </ListItemAvatar>
+                                        <ListItemText primary="Plugins" />
+                                    </ListItemButton>
+                                </Link>
+                                {admin && (
+                                    <Link
+                                        className={classes.link}
+                                        to="/users"
+                                        onClick={() => setNavOpen(false)}>
+                                        <ListItemButton>
+                                            <ListItemAvatar>
+                                                <SupervisorAccount />
+                                            </ListItemAvatar>
+                                            <ListItemText primary="Users" />
+                                        </ListItemButton>
+                                    </Link>
+                                )}
+                                <Divider />
+                                <ListItemButton onClick={() => mobileAction(showSettings)}>
+                                    <ListItemAvatar>
+                                        <AccountCircle />
+                                    </ListItemAvatar>
+                                    <ListItemText primary={name} />
+                                </ListItemButton>
+                                <ListItemButton onClick={() => mobileAction(logout)}>
+                                    <ListItemAvatar>
+                                        <ExitToApp />
+                                    </ListItemAvatar>
+                                    <ListItemText primary="Logout" />
+                                </ListItemButton>
+                                <Divider />
+                            </div>
+                        )}
+                        {loggedIn ? userApps : placeholderItems}
+                    </div>
+                    <Divider />
+                    <Typography align="center" style={{marginTop: 10}}>
+                        {showRequestNotification ? (
+                            <Button
+                                onClick={() => {
+                                    requestPermission();
+                                    setShowRequestNotification(false);
+                                    setNavOpen(false);
+                                }}>
+                                Enable Notifications
+                            </Button>
+                        ) : null}
+                    </Typography>
+                </div>
+            </ResponsiveDrawer>
+        );
+    }
+);
 
 const ResponsiveDrawer: React.FC<
-    DrawerProps & {navOpen: boolean; setNavOpen: (open: boolean) => void}
-> = ({navOpen, setNavOpen, children, ...rest}) => (
+    DrawerProps & {
+        navOpen: boolean;
+        setNavOpen: (open: boolean) => void;
+        bannerVisible: boolean;
+    }
+> = ({navOpen, setNavOpen, bannerVisible, children, ...rest}) => (
     <>
         <Drawer
-            sx={{display: {sm: 'none', xs: 'block'}}}
+            sx={{
+                display: {sm: 'none', xs: 'block'},
+                '& .MuiDrawer-paper': {
+                    top: bannerVisible ? 128 : 64,
+                    height: bannerVisible ? 'calc(100vh - 128px)' : 'calc(100vh - 64px)',
+                },
+            }}
             variant="temporary"
             open={navOpen}
+            onClose={() => setNavOpen(false)}
             {...rest}>
-            <IconButton onClick={() => setNavOpen(false)} size="large">
-                <CloseIcon />
-            </IconButton>
             {children}
         </Drawer>
-        <Drawer sx={{display: {xs: 'none', sm: 'block'}}} variant="permanent" {...rest}>
+        <Drawer
+            sx={{
+                display: {xs: 'none', sm: 'block'},
+                '& .MuiDrawer-paper': {
+                    top: bannerVisible ? 64 : 0,
+                    height: bannerVisible ? 'calc(100vh - 64px)' : '100vh',
+                },
+            }}
+            variant="permanent"
+            {...rest}>
             {children}
         </Drawer>
     </>
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index 8f946afe6..54f12de5a 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -36,6 +36,7 @@
     "src/setupTests.ts"
   ],
   "include": [
-    "src"
+    "src",
+    "vite-env.d.ts"
   ]
 }