diff --git a/src/masto/base.ts b/src/masto/base.ts
index a0bc4ee..823fad7 100644
--- a/src/masto/base.ts
+++ b/src/masto/base.ts
@@ -1,8 +1,6 @@
 import { createCacheBucket } from "~platform/cache";
 
-export const CACHE_BUCKET_NAME = "mastodon"
-
-export const cacheBucket = /* @__PURE__ */ createCacheBucket(CACHE_BUCKET_NAME);
+export const cacheBucket = /* @__PURE__ */ createCacheBucket("mastodon");
 
 export function toSmallCamelCase<T>(object: T) :T {
   if (!object || typeof object !== "object") {
diff --git a/src/material/AppTopBar.css b/src/material/AppTopBar.css
index a79321c..de3426d 100644
--- a/src/material/AppTopBar.css
+++ b/src/material/AppTopBar.css
@@ -1,31 +1,6 @@
 .AppTopBar {
-  &::before {
-    contain: strict;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--safe-area-inset-top, 0);
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-
-  &>.MuiToolbar-root {
+  & > .toolbar {
     padding-top: var(--safe-area-inset-top, 0px);
     gap: 8px;
-
-    &>button:first-child,
-    &>.MuiButtonBase-root:first-child {
-      margin-left: -0.15em;
-    }
-
-    &>button:last-child,
-    &>.MuiButtonBase-root:last-child {
-      margin-right: -0.15em;
-    }
-
-    &>.title {
-      margin-top: -0.2ch;
-    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/material/AppTopBar.tsx b/src/material/AppTopBar.tsx
index a75c7c3..a9ad382 100644
--- a/src/material/AppTopBar.tsx
+++ b/src/material/AppTopBar.tsx
@@ -20,6 +20,7 @@ const AppTopBar: ParentComponent<{
     >
       <Toolbar
         variant={windowSize.width > windowSize.height ? "dense" : "regular"}
+        class="toolbar"
         sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
       >
         {props.children}
diff --git a/src/settings/Language.tsx b/src/settings/Language.tsx
index 4a72cb1..b76495f 100644
--- a/src/settings/Language.tsx
+++ b/src/settings/Language.tsx
@@ -25,7 +25,6 @@ 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();
@@ -55,12 +54,17 @@ const ChooseLang: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar>
-          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
-            <ArrowBack />
-          </IconButton>
-          <Title>{t("Choose Language")}</Title>
-        </AppTopBar>
+        <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>
       }
     >
       <List
diff --git a/src/settings/Motions.tsx b/src/settings/Motions.tsx
index 93b900c..854e3b3 100644
--- a/src/settings/Motions.tsx
+++ b/src/settings/Motions.tsx
@@ -18,7 +18,6 @@ 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();
@@ -32,12 +31,17 @@ const Motions: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar>
-          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+        <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("motions")}</Title>
-        </AppTopBar>
+          </Toolbar>
+        </AppBar>
       }
     >
       <List
diff --git a/src/settings/Region.tsx b/src/settings/Region.tsx
index 3c87e49..ae7bd6e 100644
--- a/src/settings/Region.tsx
+++ b/src/settings/Region.tsx
@@ -23,10 +23,9 @@ 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) =>
@@ -50,12 +49,17 @@ const ChooseRegion: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar>
-          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
-            <ArrowBack />
-          </IconButton>
-          <Title>{t("Choose Region")}</Title>
-        </AppTopBar>
+        <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>
       }
     >
       <List
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 8bd5794..f783e7a 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -18,7 +18,6 @@ import {
 import {
   Animation as AnimationIcon,
   Close as CloseIcon,
-  DeleteForever,
   Logout,
   Public as PublicIcon,
   Refresh as RefreshIcon,
@@ -41,7 +40,6 @@ 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;
@@ -143,16 +141,11 @@ function setupSafeAreaEmulation(name: string) {
   }
 }
 
-const $$SAFE_AREA_EMU = "$$SAFE_AREA_EMU";
-
 if (import.meta.hot) {
-  import.meta.hot.on("vite:beforeUpdate", () => {
-    import.meta.hot!.data[$$SAFE_AREA_EMU] = screenOrientationCallback;
-  });
-
-  import.meta.hot.on("vite:afterUpdate", () => {
-    screenOrientationCallback = import.meta.hot?.data?.[$$SAFE_AREA_EMU];
+  import.meta.hot.accept((mod) => {
+    if (!mod) return;
     if (screenOrientationCallback) {
+      mod["screenOrientationCallback"] = screenOrientationCallback;
       setTimeout(screenOrientationCallback, 0);
     }
   });
@@ -200,12 +193,17 @@ const Settings: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar>
-          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
-            <CloseIcon />
-          </IconButton>
-          <Title>{t("Settings")}</Title>
-        </AppTopBar>
+        <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>
       }
     >
       <List class="setting-list" use:solid-styled>
@@ -272,17 +270,6 @@ const Settings: Component = () => {
           </ListItemButton>
           <Divider />
         </li>
-        <li>
-          <ListSubheader>Storage</ListSubheader>
-          <ListItemButton disabled>
-            <ListItemIcon>
-              <DeleteForever />
-            </ListItemIcon>
-            <ListItemText secondary={"The cache is managed by your browser."}>
-              Clear cache...
-            </ListItemText>
-          </ListItemButton>
-        </li>
         <li>
           <ListSubheader>{t("This Application")}</ListSubheader>
           <ListItemButton component={A} href="./language">
diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx
index 5b413ce..99e4fd1 100644
--- a/src/timelines/Home.tsx
+++ b/src/timelines/Home.tsx
@@ -31,7 +31,6 @@ import {
   createSingluarItemSelection,
   default as ItemSelectionProvider,
 } from "./toots/ItemSelectionProvider";
-import AppTopBar from "~material/AppTopBar";
 
 const Home: ParentComponent = (props) => {
   let panelList: HTMLDivElement;
@@ -166,34 +165,40 @@ const Home: ParentComponent = (props) => {
     <>
       <Scaffold
         topbar={
-          <AppTopBar>
-            <Tabs>
-              <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
-                Home
-              </Tab>
-              <Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
-                Trending
-              </Tab>
-              <Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
-                Public
-              </Tab>
-            </Tabs>
-            <ProfileMenuButton profile={profiles()[0]}>
-              <MenuItem
-                onClick={(e) =>
-                  $settings.setKey(
-                    "prefetchTootsDisabled",
-                    !$settings.get().prefetchTootsDisabled,
-                  )
-                }
-              >
-                <ListItemText>Prefetch Toots</ListItemText>
-                <ListItemSecondaryAction>
-                  <Switch checked={prefetching()}></Switch>
-                </ListItemSecondaryAction>
-              </MenuItem>
-            </ProfileMenuButton>
-          </AppTopBar>
+          <AppBar position="static">
+            <Toolbar
+              variant="dense"
+              class="responsive"
+              sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+            >
+              <Tabs>
+                <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
+                  Home
+                </Tab>
+                <Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
+                  Trending
+                </Tab>
+                <Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
+                  Public
+                </Tab>
+              </Tabs>
+              <ProfileMenuButton profile={profiles()[0]}>
+                <MenuItem
+                  onClick={(e) =>
+                    $settings.setKey(
+                      "prefetchTootsDisabled",
+                      !$settings.get().prefetchTootsDisabled,
+                    )
+                  }
+                >
+                  <ListItemText>Prefetch Toots</ListItemText>
+                  <ListItemSecondaryAction>
+                    <Switch checked={prefetching()}></Switch>
+                  </ListItemSecondaryAction>
+                </MenuItem>
+              </ProfileMenuButton>
+            </Toolbar>
+          </AppBar>
         }
       >
         <ItemSelectionProvider value={selectionState}>