diff --git a/public/index.html b/public/index.html
index c2707cf4..0113f0da 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
     <meta
       name="theme-color"
       content="#FAF9FB"
@@ -13,7 +16,10 @@
       content="#0F0F12"
       media="(prefers-color-scheme: dark)"
     />
-    <meta name="color-scheme" content="dark light" />
+    <meta name="color-scheme" content="default" />
+
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
 
     <!--
       Generated from https://realfavicongenerator.net/
diff --git a/src/components/FloatingSearch.tsx b/src/components/FloatingSearch.tsx
index 8a6307d7..6f3e4c99 100644
--- a/src/components/FloatingSearch.tsx
+++ b/src/components/FloatingSearch.tsx
@@ -58,7 +58,11 @@ export default function FloatingSearch({
           ...paperSx,
 
           ...(dockedTransition
-            ? { width: `calc(100vw - ${(48 + 8) * 2}px)` }
+            ? {
+                width: `calc(100vw - ${
+                  (48 + 8) * 2
+                }px - env(safe-area-inset-left) - env(safe-area-inset-right))`,
+              }
             : {}),
 
           ...(docked ? { boxShadow: "none" } : {}),
diff --git a/src/components/Navigation/NavDrawer.tsx b/src/components/Navigation/NavDrawer.tsx
index 1254c272..8bc85bfa 100644
--- a/src/components/Navigation/NavDrawer.tsx
+++ b/src/components/Navigation/NavDrawer.tsx
@@ -48,7 +48,7 @@ export default function NavDrawer({
         direction="row"
         spacing={1.5}
         alignItems="center"
-        sx={{ height: APP_BAR_HEIGHT, pl: 0.5 }}
+        sx={{ height: APP_BAR_HEIGHT, flexShrink: 0, pl: 0.5 }}
       >
         <IconButton
           aria-label="Close navigation drawer"
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
index 7eed9ef9..c5f55cbf 100644
--- a/src/components/Navigation/index.tsx
+++ b/src/components/Navigation/index.tsx
@@ -73,8 +73,10 @@ export default function Navigation({
             "&&": {
               minHeight: APP_BAR_HEIGHT,
               p: 0,
-              pl: 2,
-              pr: 2,
+              pl: (theme) =>
+                `max(env(safe-area-inset-left), ${theme.spacing(2)})`,
+              pr: (theme) =>
+                `max(env(safe-area-inset-right), ${theme.spacing(2)})`,
             },
           }}
         >
@@ -90,7 +92,7 @@ export default function Navigation({
           </Grow>
 
           <Grow in key={title}>
-            <Box sx={{ flex: 1, userSelect: "none" }}>
+            <Box sx={{ flex: 1, overflowX: "auto", userSelect: "none" }}>
               {titleComponent || (
                 <Typography
                   variant="h6"
diff --git a/src/components/SideDrawer/useStyles.ts b/src/components/SideDrawer/useStyles.ts
index cf90b0ff..3cfdccd1 100644
--- a/src/components/SideDrawer/useStyles.ts
+++ b/src/components/SideDrawer/useStyles.ts
@@ -31,6 +31,9 @@ export const useStyles = makeStyles((theme) =>
       overflowX: "visible",
       overflowY: "visible",
 
+      paddingRight: "env(safe-area-inset-right)",
+      boxSizing: "content-box",
+
       top: APP_BAR_HEIGHT + TABLE_HEADER_HEIGHT,
       height: `calc(100% - ${APP_BAR_HEIGHT + TABLE_HEADER_HEIGHT}px)`,
 
@@ -111,6 +114,7 @@ export const useStyles = makeStyles((theme) =>
 
     drawerContents: {
       padding: theme.spacing(5),
+      paddingBottom: `max(env(safe-area-inset-bottom), ${theme.spacing(5)})`,
       overflowY: "auto",
     },
   })
diff --git a/src/components/Table/TableHeader/index.tsx b/src/components/Table/TableHeader/index.tsx
index e08110a9..77e7ce4c 100644
--- a/src/components/Table/TableHeader/index.tsx
+++ b/src/components/Table/TableHeader/index.tsx
@@ -41,6 +41,8 @@ export default function TableHeader() {
       alignItems="center"
       spacing={1}
       sx={{
+        ml: "env(safe-area-inset-left)",
+        mr: "env(safe-area-inset-right)",
         pl: 2,
         pr: 2,
         pb: 1.5,
diff --git a/src/components/Table/styles.ts b/src/components/Table/styles.ts
index d0ca05f3..23e4feb1 100644
--- a/src/components/Table/styles.ts
+++ b/src/components/Table/styles.ts
@@ -17,6 +17,7 @@ export const useStyles = makeStyles((theme) =>
       "& > .rdg": {
         width: `calc(100% - ${DRAWER_COLLAPSED_WIDTH}px)`,
         flex: 1,
+        paddingBottom: "env(safe-area-inset-bottom)",
       },
 
       [theme.breakpoints.down("sm")]: { width: "100%" },
@@ -98,6 +99,31 @@ export const useStyles = makeStyles((theme) =>
         },
       },
 
+      ".rdg-row, .rdg-header-row": {
+        marginLeft: `max(env(safe-area-inset-left), ${theme.spacing(2)})`,
+        marginRight: `env(safe-area-inset-right)`,
+      },
+
+      ".rdg-header-row .rdg-cell:first-child": {
+        borderTopLeftRadius: theme.shape.borderRadius,
+      },
+
+      ".rdg-row .rdg-cell:first-child, .rdg-header-row .rdg-cell:first-child": {
+        borderLeft: "1px solid var(--border-color)",
+      },
+
+      ".rdg-row:last-child": {
+        borderBottomLeftRadius: theme.shape.borderRadius,
+        borderBottomRightRadius: theme.shape.borderRadius,
+
+        "& .rdg-cell:first-child": {
+          borderBottomLeftRadius: theme.shape.borderRadius,
+        },
+        "& .rdg-cell:nth-last-child(2)": {
+          borderBottomRightRadius: theme.shape.borderRadius,
+        },
+      },
+
       ".rdg-header-row .rdg-cell": {
         borderTop: "1px solid var(--border-color)",
       },
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 785cbdc5..f79e0763 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -113,8 +113,14 @@ export default function HomePage() {
           sx={{
             zIndex: "speedDial",
             position: "fixed",
-            bottom: (theme) => ({ xs: theme.spacing(2), sm: theme.spacing(3) }),
-            right: (theme) => ({ xs: theme.spacing(2), sm: theme.spacing(3) }),
+            bottom: (theme) => ({
+              xs: `max(${theme.spacing(2)}, env(safe-area-inset-bottom))`,
+              sm: `max(${theme.spacing(3)}, env(safe-area-inset-bottom))`,
+            }),
+            right: (theme) => ({
+              xs: `max(${theme.spacing(2)}, env(safe-area-inset-right))`,
+              sm: `max(${theme.spacing(3)}, env(safe-area-inset-right))`,
+            }),
           }}
         >
           <AddIcon />
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index e234cc8e..2d3df1a6 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -54,7 +54,35 @@ export const components = (theme: Theme): ThemeOptions => {
 
       MuiContainer: {
         defaultProps: { maxWidth: "xl" },
+        styleOverrides: {
+          root: {
+            paddingLeft: `max(${theme.spacing(2)}, env(safe-area-inset-left))`,
+            paddingRight: `max(${theme.spacing(
+              2
+            )}, env(safe-area-inset-right))`,
+            [theme.breakpoints.up("sm")]: {
+              paddingLeft: `max(${theme.spacing(
+                3
+              )}, env(safe-area-inset-left))`,
+              paddingRight: `max(${theme.spacing(
+                3
+              )}, env(safe-area-inset-right))`,
+            },
+
+            marginBottom: `env(safe-area-inset-bottom)`,
+          },
+        },
       },
+
+      MuiDrawer: {
+        styleOverrides: {
+          paper: { paddingBottom: "env(safe-area-inset-bottom)" },
+          paperAnchorLeft: { paddingLeft: "env(safe-area-inset-left)" },
+          paperAnchorRight: { paddingRight: "env(safe-area-inset-right)" },
+          paperAnchorTop: { paddingTop: "env(safe-area-inset-top)" },
+        },
+      },
+
       MuiPaper: {
         styleOverrides: {
           rounded: { borderRadius: (theme.shape.borderRadius as number) * 2 },
@@ -127,8 +155,8 @@ export const components = (theme: Theme): ThemeOptions => {
       MuiSnackbar: {
         styleOverrides: {
           root: {
-            left: `calc(env(safe-area-inset-left) + ${theme.spacing(1)})`,
-            bottom: `calc(env(safe-area-inset-bottom) + ${theme.spacing(1)})`,
+            left: `max(${theme.spacing(1)}, env(safe-area-inset-left))`,
+            bottom: `max(${theme.spacing(1)}, env(safe-area-inset-bottom))`,
           },
         },
       },
