diff --git a/packages/components/src/Flex/Flex.stories.tsx b/packages/components/src/Flex/Flex.stories.tsx
index 780414e08..c68775455 100644
--- a/packages/components/src/Flex/Flex.stories.tsx
+++ b/packages/components/src/Flex/Flex.stories.tsx
@@ -5,10 +5,9 @@ import { Flex, FlexProps } from '.';
 export default {
   title: 'Layout/Flex',
   component: Flex,
-
-  // args: {
-  //   gap: 'md'
-  // },
+  args: {
+    gap: 'md'
+  },
   render: (args: FlexProps) => (
     <Flex {...args}>
       <div style={{ height: 60, width: 100, background: 'red' }} />
diff --git a/packages/components/src/utils/responsive.ts b/packages/components/src/utils/responsive.ts
index b21ece63a..ef1d3494e 100644
--- a/packages/components/src/utils/responsive.ts
+++ b/packages/components/src/utils/responsive.ts
@@ -1,7 +1,7 @@
-import { ResponsiveProp, Spacing, Theme } from '@interlay/theme';
-import { css } from 'styled-components';
+import { ResponsiveProp, Spacing } from '@interlay/theme';
+import { DefaultTheme, css } from 'styled-components';
 
-const getSpacingResponsiveCSS = (theme: Theme, attribute: string, prop?: ResponsiveProp<Spacing>) =>
+const getSpacingResponsiveCSS = (theme: DefaultTheme, attribute: string, prop?: ResponsiveProp<Spacing>) =>
   typeof prop === 'object'
     ? css`
         ${prop.xs && theme.breakpoints.media.xs`${attribute}: ${theme.spacing(prop.xs)};`}
@@ -13,7 +13,7 @@ const getSpacingResponsiveCSS = (theme: Theme, attribute: string, prop?: Respons
     : prop && `${attribute}:${theme.spacing(prop)};`;
 
 const getResponsiveCSS = (
-  theme: Theme,
+  theme: DefaultTheme,
   attribute: string,
   prop?: ResponsiveProp<string | number | boolean>,
   condition?: (prop: string | number | boolean) => string | number