diff --git a/frontend/.babelrc b/frontend/.babelrc
index 8c99ee5a4..631979df1 100644
--- a/frontend/.babelrc
+++ b/frontend/.babelrc
@@ -5,6 +5,7 @@
         "@babel/preset-typescript"
     ],
     "plugins": [
+        "babel-plugin-react-require",
         [ "@babel/plugin-proposal-private-property-in-object", { "loose": true } ],
         [ "@babel/plugin-transform-runtime", { "regenerator": true } ],
         [ "@babel/plugin-proposal-decorators", { "legacy":true } ],
diff --git a/frontend/.storybook/config.DEPRECATED.js b/frontend/.storybook/config.DEPRECATED.js
deleted file mode 100644
index fad172b6f..000000000
--- a/frontend/.storybook/config.DEPRECATED.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { configure, addDecorator } from '@storybook/react';
-import { Provider } from 'react-redux';
-import store from '../app/store';
-import { MemoryRouter } from "react-router"
-
-const withProvider = (story) => (
-  <Provider store={store}>
-      { story() }
-  </Provider>
-)
-
-// const req = require.context('../app/components/ui', true, /\.stories\.js$/);
-// const issues = require.context('../app/components/Session/Issues', true, /\.stories\.js$/);
-// const bugFinder = require.context('../app/components/BugFinder', true, /\.stories\.js$/);
-
-addDecorator(withProvider);
-addDecorator(story => <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>);
-
-// function loadStories() {
-// 	req.keys().forEach(filename => req(filename));
-// 	bugFinder.keys().forEach(filename => bugFinder(filename));
-// }
-
-// configure(loadStories, module);
-
-
-configure(
-  [
-    // require.context('../app', true, /\.stories\.mdx$/),
-    require.context('../app', true, /\.stories\.js$/),
-  ],
-  module
-);
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
new file mode 100644
index 000000000..adf1c0504
--- /dev/null
+++ b/frontend/.storybook/main.ts
@@ -0,0 +1,36 @@
+import custom from '../webpack.config';
+
+export default {
+  stories: ['../app/components/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  reactOptions: {
+    fastRefresh: true,
+  },
+  webpackFinal: async (config: any) => {
+    // console.log('CONFIG', config);
+    // config.plugins.push(...);
+    config.module = custom.module;
+    config.resolve = custom.resolve;
+    config.plugins.unshift(custom.plugins[0]);
+    config.plugins.unshift(custom.plugins[1]);
+    config.plugins.unshift(custom.plugins[4]);
+    config.module.rules.unshift({
+      test: /\.(svg)$/i,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: 'file-loader',
+        },
+      ],
+    });
+    return config;
+  },
+};
diff --git a/frontend/.storybook/openReplayDecorator.js b/frontend/.storybook/openReplayDecorator.js
new file mode 100644
index 000000000..730eaf636
--- /dev/null
+++ b/frontend/.storybook/openReplayDecorator.js
@@ -0,0 +1,13 @@
+import { Provider } from 'react-redux';
+import store from '../app/store';
+import { StoreProvider, RootStore  } from '../app/mstore';
+
+const withProvider = (Story) => (
+  <Provider store={store}>
+    <StoreProvider store={new RootStore()}>
+      <Story />
+    </StoreProvider>
+  </Provider>
+);
+
+export default withProvider;
diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts
new file mode 100644
index 000000000..0334feb28
--- /dev/null
+++ b/frontend/.storybook/preview.ts
@@ -0,0 +1,13 @@
+import openReplayProvider from './openReplayDecorator';
+import '../app/styles/index.scss';
+
+export default {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+export const decorators = [openReplayProvider]
\ No newline at end of file
diff --git a/frontend/.storybook/webpack.config.js b/frontend/.storybook/webpack.config.js
index 1a123fa52..ff2dbcee8 100644
--- a/frontend/.storybook/webpack.config.js
+++ b/frontend/.storybook/webpack.config.js
@@ -1,15 +1,3 @@
-const pathAlias = require('../path-alias');
-const mainConfig = require('../webpack.config.js');
-
-module.exports = async ({ config }) => {
-  var conf = mainConfig();
-  config.resolve.alias = Object.assign(conf.resolve.alias, config.resolve.alias); // Path Alias
-  config.resolve.extensions = conf.resolve.extensions
-  config.module.rules = conf.module.rules;
-  config.module.rules[0].use[0] = 'style-loader';  // instead of separated css
-  config.module.rules[1].use[0] = 'style-loader';
-  config.plugins.push(conf.plugins[0]);   // global React
-  config.plugins.push(conf.plugins[5]);
-  config.entry = config.entry.concat(conf.entry.slice(2)) // CSS entries
-  return config;
-};
+export default {
+    
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/DateRangeDropdown/index.js b/frontend/app/components/shared/DateRangeDropdown/index.js
index d6e6f2f87..d5948cff3 100644
--- a/frontend/app/components/shared/DateRangeDropdown/index.js
+++ b/frontend/app/components/shared/DateRangeDropdown/index.js
@@ -1 +1 @@
-export { default } from './DateRangeDropdown';
+// export { default } from './DateRangeDropdown';
diff --git a/frontend/package.json b/frontend/package.json
index 91d8a61f7..30c2f18e2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,9 +12,10 @@
     "gen:constants": "node ./scripts/constants.js",
     "gen:icons": "node ./scripts/icons.ts",
     "gen:colors": "node ./scripts/colors.js",
-    "storybook": "start-storybook",
+    "storybook": "start-storybook -p 6006",
     "flow": "flow",
-    "postinstall": "yarn gen:icons && yarn gen:colors"
+    "postinstall": "yarn gen:icons && yarn gen:colors",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "^0.10.3",
@@ -84,7 +85,17 @@
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.17.9",
+    "@mdx-js/react": "^1.6.22",
     "@openreplay/sourcemap-uploader": "^3.0.0",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-docs": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
     "@types/luxon": "^3.0.0",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
@@ -95,6 +106,7 @@
     "@typescript-eslint/parser": "^5.24.0",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.4",
+    "babel-plugin-react-require": "^3.1.3",
     "babel-plugin-recharts": "^1.2.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "compression-webpack-plugin": "^10.0.0",
diff --git a/frontend/.storybook/preview-head.html b/frontend/stories/Introduction.stories.mdx
similarity index 100%
rename from frontend/.storybook/preview-head.html
rename to frontend/stories/Introduction.stories.mdx