diff --git a/app/hooks/useMobile.ts b/app/hooks/useMobile.ts
index 79b97255a..a0d384bb4 100644
--- a/app/hooks/useMobile.ts
+++ b/app/hooks/useMobile.ts
@@ -1,7 +1,6 @@
-import { useTheme } from "styled-components";
+import { base } from "@shared/theme";
 import useMediaQuery from "~/hooks/useMediaQuery";
 
 export default function useMobile(): boolean {
-  const theme = useTheme();
-  return useMediaQuery(`(max-width: ${theme.breakpoints.tablet - 1}px)`);
+  return useMediaQuery(`(max-width: ${base.breakpoints.tablet - 1}px)`);
 }
diff --git a/shared/theme.ts b/shared/theme.ts
index fda163fce..dddbbb324 100644
--- a/shared/theme.ts
+++ b/shared/theme.ts
@@ -227,9 +227,9 @@ export const dark: DefaultTheme = {
 
 export const lightMobile = light;
 
-export const darkMobile = (theme: DefaultTheme): DefaultTheme => ({
-  ...theme,
+export const darkMobile = {
+  ...dark,
   background: colors.black,
-});
+};
 
 export default light;