diff --git a/apps/web/src/components/theme-provider/index.js b/apps/web/src/components/theme-provider/index.js
index 3c272d530..5284c76cb 100644
--- a/apps/web/src/components/theme-provider/index.js
+++ b/apps/web/src/components/theme-provider/index.js
@@ -3,13 +3,18 @@ import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
 import { useStore } from "../../stores/theme-store";
 import ThemeFactory from "../../theme";
 import { injectCss } from "../../utils/css";
+import { isMobile } from "../../utils/dimensions";
 
 const factory = new ThemeFactory();
 
 function ThemeProvider(props) {
-  const themeType = useStore(store => store.theme);
-  const accent = useStore(store => store.accent);
-  const theme = factory.construct({ theme: themeType, accent, scale: 1 });
+  const themeType = useStore((store) => store.theme);
+  const accent = useStore((store) => store.accent);
+  const theme = factory.construct({
+    theme: themeType,
+    accent,
+    scale: isMobile() ? 0.8 : 1,
+  });
   injectCss(factory.transform("css", theme));
 
   return (
diff --git a/apps/web/src/navigation/route.js b/apps/web/src/navigation/route.js
index 8bd321497..0a0051e0a 100644
--- a/apps/web/src/navigation/route.js
+++ b/apps/web/src/navigation/route.js
@@ -44,7 +44,7 @@ function Header(props) {
               mr: 4,
               display: ["block", "none", "none"],
             }}
-            size={38}
+            size={28}
           />
           <Heading fontSize="heading" color={titleColor || "text"}>
             {title || params.title}