diff --git a/packages/web/.storybook/main.js b/packages/web/.storybook/main.js
new file mode 100644
index 000000000..45fb9d2c2
--- /dev/null
+++ b/packages/web/.storybook/main.js
@@ -0,0 +1,19 @@
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-next-router"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "webpack5"
+  },
+  typescript: {
+    reactDocgen: false
+  }
+}
diff --git a/packages/web/.storybook/preview.js b/packages/web/.storybook/preview.js
new file mode 100644
index 000000000..1765ff51d
--- /dev/null
+++ b/packages/web/.storybook/preview.js
@@ -0,0 +1,22 @@
+import { RouterContext } from 'next/dist/shared/lib/router-context';
+import * as NextImage from 'next/image';
+
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: props => <OriginalNextImage {...props} unoptimized />
+})
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  nextRouter: {
+    Provider: RouterContext.Provider
+  }
+}
diff --git a/packages/web/package.json b/packages/web/package.json
index 8990886d0..7b0904cb0 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -13,7 +13,9 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:build": "jest && next build",
-    "upgrade-psdpdfkit": "cp -R '../../node_modules/pspdfkit/dist/pspdfkit-lib' public/pspdfkit-lib"
+    "upgrade-psdpdfkit": "cp -R '../../node_modules/pspdfkit/dist/pspdfkit-lib' public/pspdfkit-lib",
+    "storybook": "start-storybook -p 6006 -s ./public",
+    "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
     "@radix-ui/colors": "^0.1.7",
@@ -45,6 +47,15 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "13.5.0",
@@ -57,11 +68,13 @@
     "@types/segment-analytics": "^0.0.34",
     "@types/uuid": "^8.3.1",
     "babel-jest": "^27.4.5",
+    "babel-loader": "^8.2.3",
     "eslint-config-next": "12.0.7",
     "eslint-plugin-functional": "^4.0.2",
     "eslint-plugin-react": "^7.28.0",
     "graphql": "^15.6.1",
-    "jest": "^27.4.5"
+    "jest": "^27.4.5",
+    "storybook-addon-next-router": "^3.1.1"
   },
   "volta": {
     "node": "14.18.0",
diff --git a/packages/web/stories/Snackbar.stories.tsx b/packages/web/stories/Snackbar.stories.tsx
new file mode 100644
index 000000000..65d3f7fca
--- /dev/null
+++ b/packages/web/stories/Snackbar.stories.tsx
@@ -0,0 +1,50 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { Toaster, ToastPosition } from 'react-hot-toast'
+import { showErrorToast, showSuccessToast } from '../lib/toastHelpers'
+
+export default {
+  title: 'Components/Snackbar',
+  component: Toaster,
+  argTypes: {
+    position: {
+      description: 'The position of the snackbar',
+      options: [
+        'top-left',
+        'top-center',
+        'top-right',
+        'bottom-right',
+        'bottom-center',
+        'bottom-left',
+      ],
+      control: { type: 'select' },
+    },
+  },
+} as ComponentMeta<typeof Toaster>
+
+const Template = ({ showToast, position }: { showToast: () => void; position?: ToastPosition }) => (
+  <div>
+      <Toaster position={position} />
+      <div
+        style={{
+          height: '15rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <button onClick={showToast}>Show Toast</button>
+      </div>
+    </div>
+)
+
+export const SuccessSnackbar: ComponentStory<typeof Toaster> = (args) => {
+  return (
+    <Template {...args} showToast={() => showSuccessToast('Success Message')} />
+  )
+}
+
+export const ErrorSnackbar: ComponentStory<typeof Toaster> = (args) => {
+  return (
+    <Template {...args} showToast={() => showErrorToast('Error Message!')} />
+  )
+}