diff --git a/components/utils-shared/__tests__/media-query.test.tsx b/components/utils-shared/__tests__/media-query.test.tsx
new file mode 100644
index 0000000..25a574d
--- /dev/null
+++ b/components/utils-shared/__tests__/media-query.test.tsx
@@ -0,0 +1,79 @@
+import { Utils } from 'components'
+import { renderHook } from '@testing-library/react-hooks'
+// @ts-ignore
+import mediaQuery from 'css-mediaquery'
+const { useMediaQuery } = Utils
+
+const mediaListMock = (width: number) => {
+  ;(window as any).listeners = [] as Array<Function>
+  return (query: string) => {
+    return {
+      matches: mediaQuery.match(query, { width }),
+      addListener: (fn: Function) => (window as any).listeners.push(fn),
+      removeListener: () => {},
+    }
+  }
+}
+
+describe('UseMediaQuery with SSR', () => {
+  beforeAll(() => {
+    ;(window as any).matchMedia = undefined
+  })
+
+  it('should work correctly', () => {
+    const { result } = renderHook(() => useMediaQuery('xs'))
+    expect(result.current).toEqual(false)
+  })
+
+  it('should work correctly with ssr match', () => {
+    const ssrMatchMedia = (query: string) => ({
+      matches: mediaQuery.match(query, {
+        width: '100px',
+      }),
+    })
+    const { result } = renderHook(() =>
+      useMediaQuery('xs', {
+        ssrMatchMedia,
+      }),
+    )
+    expect(result.current).toEqual(true)
+
+    const { result: result2 } = renderHook(() =>
+      useMediaQuery('sm', {
+        ssrMatchMedia,
+      }),
+    )
+    expect(result2.current).toEqual(false)
+  })
+})
+
+describe('UseMediaQuery', () => {
+  beforeAll(() => {
+    ;(window as any).matchMedia = mediaListMock(1500)
+  })
+
+  it('should work correctly', () => {
+    const { result } = renderHook(() => useMediaQuery('xs'))
+    expect(result.current).toEqual(false)
+  })
+
+  it('should hit', () => {
+    const { result } = renderHook(() => useMediaQuery('lg'))
+    expect(result.current).toEqual(true)
+  })
+
+  it('different match types should be supported', () => {
+    const { result } = renderHook(() =>
+      useMediaQuery('md', {
+        match: 'up',
+      }),
+    )
+    expect(result.current).toEqual(true)
+    const { result: result2 } = renderHook(() =>
+      useMediaQuery('md', {
+        match: 'down',
+      }),
+    )
+    expect(result2.current).toEqual(false)
+  })
+})
diff --git a/package.json b/package.json
index 73988fe..7472152 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "@zeit-ui/react-icons": "^1.2.2",
     "babel-jest": "^25.3.0",
     "babel-loader": "^8.0.6",
+    "css-mediaquery": "^0.1.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
diff --git a/yarn.lock b/yarn.lock
index c261a6d..763d8f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3124,6 +3124,11 @@ css-loader@3.5.3:
     schema-utils "^2.6.6"
     semver "^6.3.0"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
+
 css-select-base-adapter@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"