diff --git a/invokeai/frontend/web/src/common/hooks/useResolution.ts b/invokeai/frontend/web/src/common/hooks/useResolution.ts
new file mode 100644
index 0000000000..96b95ee074
--- /dev/null
+++ b/invokeai/frontend/web/src/common/hooks/useResolution.ts
@@ -0,0 +1,18 @@
+import { useBreakpoint } from '@chakra-ui/react';
+
+export default function useResolution():
+  | 'mobile'
+  | 'tablet'
+  | 'desktop'
+  | 'unknown' {
+  const breakpointValue = useBreakpoint();
+
+  const mobileResolutions = ['base', 'sm'];
+  const tabletResolutions = ['md', 'lg'];
+  const desktopResolutions = ['xl', '2xl'];
+
+  if (mobileResolutions.includes(breakpointValue)) return 'mobile';
+  if (tabletResolutions.includes(breakpointValue)) return 'tablet';
+  if (desktopResolutions.includes(breakpointValue)) return 'desktop';
+  return 'unknown';
+}