diff --git a/storybook/DocsTheme.js b/storybook/DocsTheme.js
index bbac44b..72d0181 100644
--- a/storybook/DocsTheme.js
+++ b/storybook/DocsTheme.js
@@ -1,9 +1,32 @@
+/**Defines the theme for the documentation */
 import { create } from '@storybook/theming';
 
 export default create({
+	/**
+	 * Set the base styling of the theme
+	 * @type {string}*/
   base: 'light',
+  	/**
+	 * The title of the documentation
+	 * @type {string}
+	 * @example webqueue2 Style Guide
+	 * @default <app name from package.json> + Front End Docs
+	 */
   brandTitle: 'webqueue2 Front End Docs',
+  	/**
+	 * The URL for the website associated with the documentation.
+	 * @type {string}
+	 */
   brandUrl: 'https://engineering.purdue.edu/webqueue/webqueue2/build',
+    	/**
+	 * The the brand icon used in the Storybook sidebar. Can use any common image formats
+	 * @type {string}
+	 */
   brandImage: 'https://github.itap.purdue.edu/ECN/webqueue2-frontend/blob/master/public/logo192.png?raw=true',
+     	/**
+	 * Set the background of the UI.
+	 * @type {string}
+	 * @default 'white'
+	 */
   appBg: 'white'
 });
\ No newline at end of file
diff --git a/storybook/main.js b/storybook/main.js
index a2e0335..7a650e3 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -1,8 +1,18 @@
-
+/**This file is used by Storyboook to determine where to look for stories and what file types can be stories. This is also where you define what addons you want to use. */
 module.exports = {
+     	/**
+	 * Determines where to look for stories and what file types can be stories
+	 * @type {string[]}
+	 * @default
+	 */
   "stories": [
     "../src/**/*.stories.@(js|jsx|ts|tsx|md|mdx)"
   ],
+    	/**
+	 * Define what addons you want to use.
+	 * @type {string[]}
+	 * @default
+	 */
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
diff --git a/storybook/manager.js b/storybook/manager.js
index 470c222..76981f5 100644
--- a/storybook/manager.js
+++ b/storybook/manager.js
@@ -1,6 +1,11 @@
+/**Sets the theme for the Storybook UI */
 import { addons } from '@storybook/addons';
 import DocsTheme from './DocsTheme';
 
 addons.setConfig({
+     	/**
+	 * The the brand icon used in the Storybook sidebar. Can use any common image formats
+	 * @type {Object}
+	 */
   theme: DocsTheme,
-});
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/storybook/preview.js b/storybook/preview.js
index 78af2c6..f91b369 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -1,12 +1,13 @@
+/**Set globals imputs for ALL stories.  Globals can only be defined here. */
 import React, { useState } from "react";
 import ItemProvider from '../src/components/ItemProvider';
 import { ThemeProvider } from "@material-ui/core/styles";
 import webqueueTheme from "../src/theme";
-import { Paper } from "@material-ui/core";
-
-
-
 
+	/**
+	 * Adds a toolbar item that allow users to toggle dark mode on and off.
+	 * @type {Object}
+	 */
 export const globalTypes = {
   theme: {
     name: 'Set Dark Mode',
@@ -22,9 +23,10 @@ export const globalTypes = {
   },
 };
 
-
+/**Defines global theme ALL stories stories.
+ *  * @type {Object | Function}
+	*/
 const withThemeProvider = (Story, context) => {
-
   const theme = webqueueTheme(context.globals.theme);
   return (
     <ThemeProvider theme={theme} >
@@ -32,7 +34,10 @@ const withThemeProvider = (Story, context) => {
     </ThemeProvider>
   )
 }
-
+/**
+	 * Wraps all sotrys in the defined decorators.
+	 * @type {Array[]}
+	 */
 export const decorators = [
   (Story) => (
     <ItemProvider>
@@ -42,6 +47,9 @@ export const decorators = [
   withThemeProvider
 ];
 
+/**Set of static metadata for a story.  Is also used to define the sort order of the stories and backgrounds for every story.
+ * @type {Object}
+ */
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   options: {