diff --git a/.storybook/Decorator.tsx b/.storybook/Decorator.tsx
new file mode 100644
index 00000000..95ed2ba7
--- /dev/null
+++ b/.storybook/Decorator.tsx
@@ -0,0 +1,38 @@
+import React, { FC, ReactNode } from 'react'
+import { createUseStyles } from 'react-jss'
+import { ThemeType, themes } from '../src/components/assets/styles/themes'
+import cn from 'classnames'
+const { dark } = ThemeType
+
+const useStyles = createUseStyles({
+	'@global': {
+		[`.${dark} .decorator`]: {
+			backgroundColor: themes[dark].background.secondary
+		}
+	},
+	decorator: {
+		padding: '1rem'
+	}
+})
+
+export interface DecoratorProps {
+	children: ReactNode
+	classes?: string[]
+}
+
+const Decorator: FC<DecoratorProps> = ({
+	children,
+	classes = []
+}: DecoratorProps) => {
+	const decoratorClasses = useStyles()
+
+	return (
+		<div
+			className={cn(decoratorClasses.decorator, 'decorator', ...classes)}
+		>
+			{children}
+		</div>
+	)
+}
+
+export default Decorator
diff --git a/.storybook/__tests__/Decorator.test.tsx b/.storybook/__tests__/Decorator.test.tsx
new file mode 100644
index 00000000..34f5525f
--- /dev/null
+++ b/.storybook/__tests__/Decorator.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import Decorator, { DecoratorProps } from '../Decorator'
+import { shallow, ShallowWrapper } from 'enzyme'
+
+let wrapper: ShallowWrapper<DecoratorProps>
+
+describe('Decorator', () => {
+	it('renders', () => {
+		wrapper = shallow(<Decorator>Decorator</Decorator>)
+
+		expect(wrapper).toHaveLength(1)
+	})
+})
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index 212c6544..c1be6a07 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -212,20 +212,24 @@ exports[`Storyshots Input Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-5 container-d0-0-2-8"
+    className="decorator-0-2-5 decorator"
   >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
+    <div
+      className="container-0-2-6 container-d0-0-2-9"
+    >
+      <input
+        className="ant-input"
+        data-test="input"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder=""
+        type="text"
+        value=""
+      />
+    </div>
   </div>
 </div>
 `;
@@ -235,20 +239,24 @@ exports[`Storyshots Input Error 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-5 container-d5-0-2-14"
+    className="decorator-0-2-5 decorator"
   >
-    <input
-      className="ant-input error-0-2-6"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
+    <div
+      className="container-0-2-6 container-d5-0-2-15"
+    >
+      <input
+        className="ant-input error-0-2-7"
+        data-test="input"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder=""
+        type="text"
+        value=""
+      />
+    </div>
   </div>
 </div>
 `;
@@ -258,20 +266,24 @@ exports[`Storyshots Input Full Width 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-5 container-d4-0-2-13"
+    className="decorator-0-2-5 decorator"
   >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
+    <div
+      className="container-0-2-6 container-d4-0-2-14"
+    >
+      <input
+        className="ant-input"
+        data-test="input"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder=""
+        type="text"
+        value=""
+      />
+    </div>
   </div>
 </div>
 `;
@@ -281,16 +293,20 @@ exports[`Storyshots Input Loading 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-5 container-d3-0-2-11"
+    className="decorator-0-2-5 decorator"
   >
     <div
-      className="inputSkeleton-0-2-7"
+      className="container-0-2-6 container-d3-0-2-12"
     >
-      <span
-        className="container-0-2-3 container-d1-0-2-12"
+      <div
+        className="inputSkeleton-0-2-8"
       >
-         
-      </span>
+        <span
+          className="container-0-2-3 container-d1-0-2-13"
+        >
+           
+        </span>
+      </div>
     </div>
   </div>
 </div>
@@ -301,20 +317,24 @@ exports[`Storyshots Input Placeholder 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-5 container-d1-0-2-9"
+    className="decorator-0-2-5 decorator"
   >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder="Search..."
-      type="text"
-      value=""
-    />
+    <div
+      className="container-0-2-6 container-d1-0-2-10"
+    >
+      <input
+        className="ant-input"
+        data-test="input"
+        disabled={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="Search..."
+        type="text"
+        value=""
+      />
+    </div>
   </div>
 </div>
 `;
@@ -585,31 +605,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-15"
+    className="container-0-2-16"
   >
     <div
-      className="skeletonButton-0-2-17"
+      className="skeletonButton-0-2-18"
     >
       <span
-        className="container-0-2-3 container-d2-0-2-18 skeleton-0-2-16"
+        className="container-0-2-3 container-d2-0-2-19 skeleton-0-2-17"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-17"
+      className="skeletonButton-0-2-18"
     >
       <span
-        className="container-0-2-3 container-d3-0-2-19 skeleton-0-2-16"
+        className="container-0-2-3 container-d3-0-2-20 skeleton-0-2-17"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-17"
+      className="skeletonButton-0-2-18"
     >
       <span
-        className="container-0-2-3 container-d4-0-2-20 skeleton-0-2-16"
+        className="container-0-2-3 container-d4-0-2-21 skeleton-0-2-17"
       >
          
       </span>
@@ -712,10 +732,10 @@ exports[`Storyshots Select Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-22 container-d0-0-2-26"
+    className="container-0-2-23 container-d0-0-2-27"
   >
     <div
-      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -808,10 +828,10 @@ exports[`Storyshots Select Full Width 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-22 container-d2-0-2-28"
+    className="container-0-2-23 container-d2-0-2-29"
   >
     <div
-      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -858,7 +878,7 @@ exports[`Storyshots Select Full Width 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-25"
+            className="option-0-2-26"
           >
             <span>
               Lorem
@@ -909,10 +929,10 @@ exports[`Storyshots Select Icon 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-22 container-d1-0-2-27"
+    className="container-0-2-23 container-d1-0-2-28"
   >
     <div
-      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -959,10 +979,10 @@ exports[`Storyshots Select Icon 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-25"
+            className="option-0-2-26"
           >
             <span
-              className="icon-0-2-24"
+              className="icon-0-2-25"
             >
               <svg
                 fill="#7E8083"
@@ -1021,10 +1041,10 @@ exports[`Storyshots Select Search 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-22 container-d3-0-2-29"
+    className="container-0-2-23 container-d3-0-2-30"
   >
     <div
-      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow ant-select-show-search"
+      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow ant-select-show-search"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1117,7 +1137,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d6-0-2-31"
+    className="container-0-2-3 container-d6-0-2-32"
   >
      
   </span>
@@ -1129,27 +1149,27 @@ exports[`Storyshots Skeleton Count 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
@@ -1161,7 +1181,7 @@ exports[`Storyshots Skeleton Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d5-0-2-30"
+    className="container-0-2-3 container-d5-0-2-31"
   >
      
   </span>
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
index 7ebf7889..9a637a8c 100644
--- a/src/components/Form/Form.stories.tsx
+++ b/src/components/Form/Form.stories.tsx
@@ -1,4 +1,5 @@
 import { basicOptions } from '../RadioGroup/fixtures/sample_options'
+import Decorator from '../../../.storybook/Decorator'
 import { iconOptions } from '../Select/fixtures/sample_options'
 import React from 'react'
 import treeData from '../Tree/fixtures/0_sample_data'
@@ -11,6 +12,13 @@ export default {
 		onSubmit: { control: { disable: true } }
 	},
 	component: Form,
+	decorators: [
+		(ComponentStory: Story) => (
+			<Decorator>
+				<ComponentStory />
+			</Decorator>
+		)
+	],
 	parameters: {
 		// disabled because shallow rendering gives warning, but FormTree only works with shallow render
 		storyshots: { disable: true }
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index 54ea78d1..0e9a187b 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -1,3 +1,4 @@
+import Decorator from '../../../.storybook/Decorator'
 import React from 'react'
 import { Input, InputProps } from './index'
 import { Meta, Story } from '@storybook/react/types-6-0'
@@ -8,6 +9,13 @@ export default {
 		value: { control: { disable: true } }
 	},
 	component: Input,
+	decorators: [
+		(ComponentStory: Story) => (
+			<Decorator>
+				<ComponentStory />
+			</Decorator>
+		)
+	],
 	title: 'Input'
 } as Meta