diff --git a/src/settings/Language.tsx b/src/settings/Language.tsx
index b76495f..4a72cb1 100644
--- a/src/settings/Language.tsx
+++ b/src/settings/Language.tsx
@@ -25,6 +25,7 @@ import type { Template } from "@solid-primitives/i18n";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores";
 import { useNavigator } from "~platform/StackedRouter";
+import AppTopBar from "~material/AppTopBar";
 
 const ChooseLang: Component = () => {
   const { pop } = useNavigator();
@@ -54,17 +55,12 @@ const ChooseLang: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
-            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
-              <ArrowBack />
-            </IconButton>
-            <Title>{t("Choose Language")}</Title>
-          </Toolbar>
-        </AppBar>
+        <AppTopBar>
+          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+            <ArrowBack />
+          </IconButton>
+          <Title>{t("Choose Language")}</Title>
+        </AppTopBar>
       }
     >
       <List
diff --git a/src/settings/Motions.tsx b/src/settings/Motions.tsx
index 854e3b3..93b900c 100644
--- a/src/settings/Motions.tsx
+++ b/src/settings/Motions.tsx
@@ -18,6 +18,7 @@ import { createTranslator } from "~platform/i18n";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores";
 import { useNavigator } from "~platform/StackedRouter";
+import AppTopBar from "~material/AppTopBar";
 
 const Motions: Component = () => {
   const {pop} = useNavigator();
@@ -31,17 +32,12 @@ const Motions: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
-            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+        <AppTopBar>
+          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
               <ArrowBack />
             </IconButton>
             <Title>{t("motions")}</Title>
-          </Toolbar>
-        </AppBar>
+        </AppTopBar>
       }
     >
       <List
diff --git a/src/settings/Region.tsx b/src/settings/Region.tsx
index ae7bd6e..3c87e49 100644
--- a/src/settings/Region.tsx
+++ b/src/settings/Region.tsx
@@ -23,9 +23,10 @@ import type { Template } from "@solid-primitives/i18n";
 import { $settings } from "./stores";
 import { useStore } from "@nanostores/solid";
 import { useNavigator } from "~platform/StackedRouter";
+import AppTopBar from "~material/AppTopBar";
 
 const ChooseRegion: Component = () => {
-  const {pop} = useNavigator();
+  const { pop } = useNavigator();
   const [t] = createTranslator(
     () => import("./i18n/generic.json"),
     (code) =>
@@ -49,17 +50,12 @@ const ChooseRegion: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
-            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
-              <ArrowBack />
-            </IconButton>
-            <Title>{t("Choose Region")}</Title>
-          </Toolbar>
-        </AppBar>
+        <AppTopBar>
+          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+            <ArrowBack />
+          </IconButton>
+          <Title>{t("Choose Region")}</Title>
+        </AppTopBar>
       }
     >
       <List
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 0153c7c..8bd5794 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -41,6 +41,7 @@ import { type Template } from "@solid-primitives/i18n";
 import { useServiceWorker } from "~platform/host.js";
 import { useSessions } from "../masto/clients.js";
 import { useNavigator } from "~platform/StackedRouter.jsx";
+import AppTopBar from "~material/AppTopBar.jsx";
 
 type Inset = {
   top?: number;
@@ -199,17 +200,12 @@ const Settings: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
-            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
-              <CloseIcon />
-            </IconButton>
-            <Title>{t("Settings")}</Title>
-          </Toolbar>
-        </AppBar>
+        <AppTopBar>
+          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+            <CloseIcon />
+          </IconButton>
+          <Title>{t("Settings")}</Title>
+        </AppTopBar>
       }
     >
       <List class="setting-list" use:solid-styled>