diff --git a/storybook/DocsTheme.js b/storybook/DocsTheme.js
index e6e3ddf..bbac44b 100644
--- a/storybook/DocsTheme.js
+++ b/storybook/DocsTheme.js
@@ -5,4 +5,5 @@ export default create({
   brandTitle: 'webqueue2 Front End Docs',
   brandUrl: 'https://engineering.purdue.edu/webqueue/webqueue2/build',
   brandImage: 'https://github.itap.purdue.edu/ECN/webqueue2-frontend/blob/master/public/logo192.png?raw=true',
+  appBg: 'white'
 });
\ No newline at end of file
diff --git a/storybook/preview.js b/storybook/preview.js
index c384ea2..78af2c6 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -28,7 +28,7 @@ const withThemeProvider = (Story, context) => {
   const theme = webqueueTheme(context.globals.theme);
   return (
     <ThemeProvider theme={theme} >
-        <Story {...context} />
+      <Story {...context} />
     </ThemeProvider>
   )
 }
@@ -50,4 +50,17 @@ export const parameters = {
       order: ['Introduction', 'Components']
     },
   },
+  backgrounds: {
+    default: 'light',
+    values: [
+      {
+        name: 'light',
+        value: '#f5f5f5',
+      },
+      {
+        name: 'dark',
+        value: '#333333'
+      },
+    ],
+  },
 }
\ No newline at end of file