diff --git a/ui/kit/media.js b/ui/kit/media.js
index d9f95f3..c242d28 100644
--- a/ui/kit/media.js
+++ b/ui/kit/media.js
@@ -1,5 +1,7 @@
 // @flow
-export type MediaQuery = $Shape<{
+import styled from 'styled-components'
+
+export type MediaQueryConfig = $Shape<{
   xs: string,
   sm: string,
   md: string,
@@ -15,7 +17,7 @@ export const breakpoints = {
   xl: 1280
 }
 
-export default (mq: MediaQuery) => {
+const MediaQuery = (mq: MediaQueryConfig) => {
   const out = []
 
   for (const size in mq) {
@@ -30,3 +32,43 @@ export default (mq: MediaQuery) => {
 
   return out.join('\n')
 }
+
+export default MediaQuery
+
+export const Hide = {
+  XS: styled.div`
+    display: none;
+    ${() => MediaQuery({ sm: `display: block` })}
+  `,
+  SM: styled.div`
+    display: none;
+    ${() => MediaQuery({ md: `display: block` })}
+  `,
+  MD: styled.div`
+    display: none;
+    ${() => MediaQuery({ lg: `display: block` })}
+  `,
+  LG: styled.div`
+    display: none;
+    ${() => MediaQuery({ xl: `display: block` })}
+  `
+}
+
+export const Show = {
+  XS: styled.div`
+    display: block;
+    ${() => MediaQuery({ sm: `display: none` })}
+  `,
+  SM: styled.div`
+    display: block;
+    ${() => MediaQuery({ md: `display: none` })}
+  `,
+  MD: styled.div`
+    display: block;
+    ${() => MediaQuery({ lg: `display: none` })}
+  `,
+  LG: styled.div`
+    display: block;
+    ${() => MediaQuery({ xl: `display: none` })}
+  `
+}