diff --git a/commafeed-client/src/components/responsive/OnDesktop.tsx b/commafeed-client/src/components/responsive/OnDesktop.tsx
index 156338d5..6eb22902 100644
--- a/commafeed-client/src/components/responsive/OnDesktop.tsx
+++ b/commafeed-client/src/components/responsive/OnDesktop.tsx
@@ -1,11 +1,8 @@
-import { Box, MediaQuery } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Box } from "@mantine/core"
+import { useMobile } from "hooks/useMobile"
 import React from "react"
 
 export function OnDesktop(props: { children: React.ReactNode }) {
-    return (
-        <MediaQuery smallerThan={Constants.layout.mobileBreakpoint} styles={{ display: "none" }}>
-            <Box>{props.children}</Box>
-        </MediaQuery>
-    )
+    const mobile = useMobile()
+    return <Box>{!mobile && props.children}</Box>
 }
diff --git a/commafeed-client/src/components/responsive/OnMobile.tsx b/commafeed-client/src/components/responsive/OnMobile.tsx
index bf7a369d..132c1678 100644
--- a/commafeed-client/src/components/responsive/OnMobile.tsx
+++ b/commafeed-client/src/components/responsive/OnMobile.tsx
@@ -1,11 +1,8 @@
-import { Box, MediaQuery } from "@mantine/core"
-import { Constants } from "app/constants"
+import { Box } from "@mantine/core"
+import { useMobile } from "hooks/useMobile"
 import React from "react"
 
 export function OnMobile(props: { children: React.ReactNode }) {
-    return (
-        <MediaQuery largerThan={Constants.layout.mobileBreakpoint} styles={{ display: "none" }}>
-            <Box>{props.children}</Box>
-        </MediaQuery>
-    )
+    const mobile = useMobile()
+    return <Box>{mobile && props.children}</Box>
 }