diff --git a/src/material/AppTopBar.tsx b/src/material/AppTopBar.tsx
index b786646..dca5852 100644
--- a/src/material/AppTopBar.tsx
+++ b/src/material/AppTopBar.tsx
@@ -1,12 +1,15 @@
 import { AppBar, Toolbar } from "@suid/material";
 import { splitProps, type JSX, type ParentComponent } from "solid-js";
 import "./AppTopBar.css";
+import { useWindowSize } from "@solid-primitives/resize-observer";
 
 const AppTopBar: ParentComponent<{
   class?: string;
   style?: JSX.HTMLAttributes<HTMLElement>["style"];
 }> = (oprops) => {
   const [props, rest] = splitProps(oprops, ["children", "class"]);
+  const windowSize = useWindowSize();
+
   return (
     <AppBar
       class={`AppTopBar ${props.class || ""}`}
@@ -15,7 +18,7 @@ const AppTopBar: ParentComponent<{
       {...rest}
     >
       <Toolbar
-        variant="dense"
+        variant={windowSize.width > windowSize.height ? "dense" : "regular"}
         class="toolbar"
         sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
       >