diff --git a/.storybook/DocsContainer.js b/.storybook/Containers.js
similarity index 86%
rename from .storybook/DocsContainer.js
rename to .storybook/Containers.js
index 84237d8c..ff272f73 100644
--- a/.storybook/DocsContainer.js
+++ b/.storybook/Containers.js
@@ -5,7 +5,7 @@ import { useDarkMode } from "storybook-dark-mode";
 import { darkTheme, lightTheme } from "./customTheme";
 import "./static/fonts/WorkSans/font.css";
 
-export const DocsContainer = ({ children, context }) => {
+export function DocsContainer({ children, context }) {
     const isStorybookUiDark = useDarkMode();
 
     const theme = isStorybookUiDark ? darkTheme : lightTheme;
@@ -58,4 +58,19 @@ export const DocsContainer = ({ children, context }) => {
             </BaseContainer>
         </>
     );
-};
+}
+
+export function CanvasContainer({ children }) {
+
+    return (
+        <>
+            <style>{`
+                body {
+                    padding: 0 !important;
+                }
+            `}</style>
+            {children}
+        </>
+    );
+
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
index baac555b..77e674f9 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,5 @@
 import { darkTheme, lightTheme } from "./customTheme";
-import { DocsContainer } from "./DocsContainer";
+import { DocsContainer, CanvasContainer } from "./Containers";
 
 export const parameters = {
     "actions": { "argTypesRegex": "^on[A-Z].*" },
@@ -103,6 +103,14 @@ export const parameters = {
     },
 };
 
+export const decorators = [
+    (Story) => (
+        <CanvasContainer>
+            <Story />
+        </CanvasContainer>
+    ),
+];
+
 const { getHardCodedWeight } = (() => {
 
     const orderedPagesPrefix = [