diff --git a/.eslintrc.js b/.eslintrc.js
index f3d050ab3..d2a06c489 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,6 @@ module.exports = {
     'airbnb-base/legacy',
     'prettier',
     'plugin:vue/recommended',
-    'plugin:storybook/recommended',
     'plugin:cypress/recommended',
   ],
   parserOptions: {
diff --git a/.gitignore b/.gitignore
index 028a97f09..82f4a4df5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -74,5 +74,3 @@ yalc.lock
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
-
-/storybook-static
\ No newline at end of file
diff --git a/.storybook/main.js b/.storybook/main.js
deleted file mode 100644
index cb32634c2..000000000
--- a/.storybook/main.js
+++ /dev/null
@@ -1,56 +0,0 @@
-const path = require('path');
-const resolve = require('../config/webpack/resolve');
-
-// Chatwoot's webpack.config.js
-process.env.NODE_ENV = 'development';
-const custom = require('../config/webpack/environment');
-
-module.exports = {
-  stories: [
-    '../stories/**/*.stories.mdx',
-    '../app/javascript/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        vueDocgenOptions: {
-          alias: {
-            '@': path.resolve(__dirname, '../'),
-          },
-        },
-      },
-    },
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      /**
-       * Fix Storybook issue with PostCSS@8
-       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
-       */
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    },
-  ],
-  webpackFinal: config => {
-    const newConfig = {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        modules: custom.resolvedModules.map(i => i.value),
-      },
-    };
-
-    newConfig.module.rules.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
-      include: path.resolve(__dirname, '../app/javascript'),
-    });
-
-    return newConfig;
-  },
-};
diff --git a/.storybook/preview.js b/.storybook/preview.js
deleted file mode 100644
index 7c046d51a..000000000
--- a/.storybook/preview.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { addDecorator } from '@storybook/vue';
-import Vue from 'vue';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
-import Multiselect from 'vue-multiselect';
-import VueDOMPurifyHTML from 'vue-dompurify-html';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
-
-import WootUiKit from '../app/javascript/dashboard/components';
-import i18n from '../app/javascript/dashboard/i18n';
-import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
-
-import '../app/javascript/dashboard/assets/scss/storybook.scss';
-
-Vue.use(VueI18n);
-Vue.use(WootUiKit);
-Vue.use(Vuex);
-Vue.use(VueDOMPurifyHTML, domPurifyConfig);
-
-Vue.component('multiselect', Multiselect);
-Vue.component('fluent-icon', FluentIcon);
-
-const store = new Vuex.Store({});
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
-
-addDecorator(() => ({
-  template: '<story/>',
-  i18n: i18nConfig,
-  store,
-  beforeCreate: function () {
-    this.$root._i18n = this.$i18n;
-  },
-}));
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
diff --git a/app/javascript/dashboard/assets/scss/storybook.scss b/app/javascript/dashboard/assets/scss/storybook.scss
deleted file mode 100644
index fa2455918..000000000
--- a/app/javascript/dashboard/assets/scss/storybook.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import 'shared/assets/fonts/inter';
-@import 'shared/assets/fonts/plus-jakarta';
-@import 'shared/assets/stylesheets/animations';
-@import 'shared/assets/stylesheets/colors';
-@import 'shared/assets/stylesheets/spacing';
-@import 'shared/assets/stylesheets/font-size';
-@import 'shared/assets/stylesheets/font-weights';
-@import 'shared/assets/stylesheets/shadows';
-@import 'shared/assets/stylesheets/border-radius';
-@import 'variables';
-
-@import 'vue-multiselect/dist/vue-multiselect.min.css';
-@import '~shared/assets/stylesheets/ionicons';
-
-@import 'mixins';
-@import 'helper-classes';
-
-@import 'typography';
-@import 'layout';
-@import 'animations';
-
-@import 'widgets/buttons';
-@import 'widgets/base';
-
-@import 'plugins/multiselect';
-
-@import 'widget/assets/scss/reset';
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import 'widget/assets/scss/utilities';
-
-html,
-body {
-  font-family: 'PlusJakarta', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  height: 100%;
-}
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.stories.js b/app/javascript/dashboard/components/Accordion/AccordionItem.stories.js
deleted file mode 100644
index 5ff6af8cf..000000000
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AccordionItemComponent from './AccordionItem';
-
-export default {
-  title: 'Components/Generic/Accordion',
-  component: AccordionItemComponent,
-  argTypes: {
-    title: {
-      control: {
-        type: 'string',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AccordionItem: AccordionItemComponent },
-  template: `
-    <accordion-item v-bind="$props" @click="onClick">
-    This is a sample content you can pass as a slot
-    </accordion-item>
-  `,
-});
-
-export const AccordionItem = Template.bind({});
-AccordionItem.args = {
-  onClick: action('Added'),
-  title: 'Title of the accordion item',
-};
diff --git a/app/javascript/dashboard/components/ui/stories/AnnouncementPopup.stories.js b/app/javascript/dashboard/components/ui/stories/AnnouncementPopup.stories.js
deleted file mode 100644
index 3166eff05..000000000
--- a/app/javascript/dashboard/components/ui/stories/AnnouncementPopup.stories.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootAnnouncementPopup from '../AnnouncementPopup.vue';
-
-export default {
-  title: 'Components/Popup/Announcement Popup',
-  argTypes: {
-    popupMessage: {
-      defaultValue:
-        'Now a new key shortcut (⌘ + ↵) is available to send messages. You can enable it in the',
-      control: {
-        type: 'text',
-      },
-    },
-    routeText: {
-      defaultValue: 'profile settings',
-      control: {
-        type: 'text',
-      },
-    },
-    hasCloseButton: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-    closeButtonText: {
-      defaultValue: 'Got it',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootAnnouncementPopup },
-  template:
-    '<woot-announcement-popup v-bind="$props" @open="onClickOpenPath" @close="onClickClose"></woot-announcement-popup>',
-});
-
-export const AnnouncementPopup = Template.bind({});
-AnnouncementPopup.args = {
-  onClickOpenPath: action('opened path'),
-  onClickClose: action('closed the popup'),
-};
diff --git a/app/javascript/dashboard/components/ui/stories/Button.stories.js b/app/javascript/dashboard/components/ui/stories/Button.stories.js
deleted file mode 100644
index a4c0b4294..000000000
--- a/app/javascript/dashboard/components/ui/stories/Button.stories.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootButton from '../WootButton.vue';
-
-export default {
-  title: 'Components/Button',
-  component: WootButton,
-  argTypes: {
-    colorScheme: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'alert', 'warning'],
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['tiny', 'small', 'medium', 'large', 'expanded'],
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['hollow', 'clear'],
-      },
-    },
-    isLoading: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootButton },
-  template:
-    '<woot-button v-bind="$props" @click="onClick">{{label}}</woot-button>',
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  label: 'New message',
-  onClick: action('Hello'),
-};
diff --git a/app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js b/app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js
deleted file mode 100644
index 8cdaa2461..000000000
--- a/app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootDateRangePicker from '../DateRangePicker.vue';
-
-export default {
-  title: 'Components/Date Picker/Date Range Picker',
-  argTypes: {
-    confirmText: {
-      defaultValue: 'Apply',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Select date range',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootDateRangePicker },
-  template:
-    '<woot-date-range-picker v-bind="$props" @change="onChange"></woot-date-range-picker>',
-});
-
-export const DateRangePicker = Template.bind({});
-DateRangePicker.args = {
-  onChange: action('applied'),
-  value: new Date(),
-};
diff --git a/app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js b/app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js
deleted file mode 100644
index a636fabed..000000000
--- a/app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootDateTimePicker from '../DateTimePicker.vue';
-
-export default {
-  title: 'Components/Date Picker/Date Time Picker',
-  argTypes: {
-    confirmText: {
-      defaultValue: 'Apply',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Select date time',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootDateTimePicker },
-  template:
-    '<woot-date-time-picker v-bind="$props" @change="onChange"></woot-date-time-picker>',
-});
-
-export const DateTimePicker = Template.bind({});
-DateTimePicker.args = {
-  onChange: action('applied'),
-  value: new Date(),
-};
diff --git a/app/javascript/dashboard/components/ui/stories/Label.stories.js b/app/javascript/dashboard/components/ui/stories/Label.stories.js
deleted file mode 100644
index 38acc6258..000000000
--- a/app/javascript/dashboard/components/ui/stories/Label.stories.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Label',
-  argTypes: {
-    title: {
-      defaultValue: 'sales',
-      control: {
-        type: 'text',
-      },
-    },
-    colorScheme: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'alert', 'warning'],
-      },
-    },
-    description: {
-      defaultValue: 'label',
-      control: {
-        type: 'text',
-      },
-    },
-    href: {
-      control: {
-        type: 'text',
-      },
-    },
-    bgColor: {
-      defaultValue: '#a83262',
-      control: {
-        type: 'text',
-      },
-    },
-    small: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    showClose: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    icon: {
-      defaultValue: 'ion-close',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  template: '<woot-label v-bind="$props" @click="onClick"></woot-label>',
-});
-
-export const DefaultLabel = Template.bind({});
-DefaultLabel.args = {
-  onClick: action('clicked'),
-};
diff --git a/app/javascript/dashboard/components/ui/stories/TimeAgo.stories.js b/app/javascript/dashboard/components/ui/stories/TimeAgo.stories.js
deleted file mode 100644
index 606b2d1d4..000000000
--- a/app/javascript/dashboard/components/ui/stories/TimeAgo.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import TimeAgo from 'dashboard/components/ui/TimeAgo';
-
-export default {
-  title: 'Components/TimeAgo',
-  component: TimeAgo,
-  argTypes: {
-    isAutoRefreshEnabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    timestamp: {
-      control: {
-        type: 'text, date, number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { TimeAgo },
-  template: '<time-ago v-bind="$props"></time-ago>',
-});
-
-export const TimeAgoView = Template.bind({});
-TimeAgoView.args = {
-  timestamp: 1549843200,
-  isAutoRefreshEnabled: false,
-};
diff --git a/app/javascript/dashboard/components/widgets/InboxDropdownItem.stories.js b/app/javascript/dashboard/components/widgets/InboxDropdownItem.stories.js
deleted file mode 100644
index b5bce1e41..000000000
--- a/app/javascript/dashboard/components/widgets/InboxDropdownItem.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import InboxDropdownItem from './InboxDropdownItem';
-
-export default {
-  title: 'Components/DropDowns/InboxDropdownItem',
-  component: InboxDropdownItem,
-  argTypes: {
-    name: {
-      defaultValue: 'My new inbox',
-      control: {
-        type: 'text',
-      },
-    },
-
-    inboxIdentifier: {
-      defaultValue: 'nithin@mail.com',
-      control: {
-        type: 'text',
-      },
-    },
-
-    channelType: {
-      defaultValue: 'email',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { InboxDropdownItem },
-  template: '<inbox-dropdown-item v-bind="$props" ></inbox-dropdown-item>',
-});
-
-export const Banner = Template.bind({});
-Banner.args = {};
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.stories.js b/app/javascript/dashboard/components/widgets/LabelSelector.stories.js
deleted file mode 100644
index 77ca54b25..000000000
--- a/app/javascript/dashboard/components/widgets/LabelSelector.stories.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import LabelSelector from './LabelSelector';
-
-export default {
-  title: 'Components/Label/Contact Label',
-  component: LabelSelector,
-  argTypes: {
-    contactId: {
-      control: {
-        type: 'text ,number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LabelSelector },
-  template:
-    '<label-selector v-bind="$props" @add="onAdd" @remove="onRemove"></label-selector>',
-});
-
-export const ContactLabel = Template.bind({});
-ContactLabel.args = {
-  onAdd: action('Added'),
-  onRemove: action('Removed'),
-  allLabels: [
-    {
-      id: '1',
-      title: 'sales',
-      description: '',
-      color: '#0a5dd1',
-    },
-    {
-      id: '2',
-      title: 'refund',
-      description: '',
-      color: '#8442f5',
-    },
-    {
-      id: '3',
-      title: 'testing',
-      description: '',
-      color: '#f542f5',
-    },
-    {
-      id: '4',
-      title: 'scheduled',
-      description: '',
-      color: '#42d1f5',
-    },
-  ],
-  savedLabels: [
-    {
-      id: '2',
-      title: 'refund',
-      description: '',
-      color: '#8442f5',
-    },
-    {
-      id: '4',
-      title: 'scheduled',
-      description: '',
-      color: '#42d1f5',
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.stories.js b/app/javascript/dashboard/components/widgets/SettingIntroBanner.stories.js
deleted file mode 100644
index 47286ae21..000000000
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import SettingIntroBanner from './SettingIntroBanner';
-
-export default {
-  title: 'Components/Settings/Banner',
-  component: SettingIntroBanner,
-  argTypes: {
-    headerTitle: {
-      defaultValue: 'Acme Support',
-      control: {
-        type: 'text',
-      },
-    },
-    headerContent: {
-      defaultValue:
-        'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SettingIntroBanner },
-  template: '<setting-intro-banner v-bind="$props" ></setting-intro-banner>',
-});
-
-export const Banner = Template.bind({});
-Banner.args = {};
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.stories.js b/app/javascript/dashboard/components/widgets/Thumbnail.stories.js
deleted file mode 100644
index a6fc55f8a..000000000
--- a/app/javascript/dashboard/components/widgets/Thumbnail.stories.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import Thumbnail from './Thumbnail.vue';
-
-export default {
-  title: 'Components/Thumbnail',
-  component: Thumbnail,
-  argTypes: {
-    src: {
-      control: {
-        type: 'text',
-      },
-    },
-    size: {
-      control: {
-        type: 'text',
-      },
-    },
-    badge: {
-      control: {
-        type: 'select',
-        options: ['fb', 'whatsapp', 'sms', 'twitter-tweet', 'twitter-dm'],
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['circle', 'square'],
-      },
-    },
-    username: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    status: {
-      defaultValue: 'circle',
-      control: {
-        type: 'select',
-        options: ['online', 'busy'],
-      },
-    },
-    hasBorder: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    shouldShowStatusAlways: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Thumbnail },
-  template: '<thumbnail v-bind="$props" @click="onClick">{{label}}</thumbnail>',
-});
-
-export const Primary = Template.bind({});
diff --git a/app/javascript/dashboard/components/widgets/conversation/stories/ContactBubble.stories.js b/app/javascript/dashboard/components/widgets/conversation/stories/ContactBubble.stories.js
deleted file mode 100644
index ec000ab45..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/stories/ContactBubble.stories.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import ContactBubble from '../bubble/Contact.vue';
-
-export default {
-  title: 'Components/Messaging/ContactBubble',
-  component: ContactBubble,
-  argTypes: {
-    name: {
-      defaultValue: 'Eden Hazard',
-      control: {
-        type: 'string',
-      },
-    },
-    phoneNumber: {
-      defaultValue: '+517554433220',
-      control: {
-        type: 'string',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactBubble },
-  template: '<contact-bubble v-bind="$props" />',
-});
-
-export const ContactBubbleView = Template.bind({});
diff --git a/app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js b/app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js
deleted file mode 100644
index 8f21a9da1..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import LocationBubble from '../bubble/Location.vue';
-
-export default {
-  title: 'Components/Help Center',
-  component: LocationBubble,
-  argTypes: {
-    latitude: {
-      defaultValue: 1,
-      control: {
-        type: 'number',
-      },
-    },
-    longitude: {
-      defaultValue: 1,
-      control: {
-        type: 'number',
-      },
-    },
-    name: {
-      defaultValue: '420, Dope street',
-      control: {
-        type: 'string',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LocationBubble },
-  template: '<location-bubble v-bind="$props" />',
-});
-
-export const LocationBubbleView = Template.bind({});
diff --git a/app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js b/app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js
deleted file mode 100644
index a21a66874..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import ReplyEmailHead from '../ReplyEmailHead';
-
-export default {
-  title: 'Components/ReplyBox/EmailHead',
-  component: ReplyEmailHead,
-  argTypes: {
-    ccEmails: {
-      control: {
-        type: 'string',
-      },
-    },
-    bccEmails: {
-      control: {
-        type: 'string',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ReplyEmailHead },
-  template:
-    '<reply-email-head v-bind="$props" @add="onAdd" @click="onClick"></reply-email-head>',
-});
-
-export const Add = Template.bind({});
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.stories.js b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.stories.js
deleted file mode 100644
index 2767018c0..000000000
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import WootKeyboardShortcutModal from './WootKeyShortcutModal.vue';
-
-export default {
-  title: 'Components/Shortcuts/Keyboard Shortcut',
-  component: WootKeyboardShortcutModal,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootKeyboardShortcutModal },
-  template:
-    '<woot-keyboard-shortcut-modal v-bind="$props"></woot-keyboard-shortcut-modal>',
-});
-
-export const KeyboardShortcut = Template.bind({});
-KeyboardShortcut.args = {};
diff --git a/app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js b/app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js
deleted file mode 100644
index b5dc8e932..000000000
--- a/app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import ThumbnailGroup from '../ThumbnailGroup.vue';
-
-export default {
-  title: 'Components/ThumbnailGroup',
-  component: ThumbnailGroup,
-  argTypes: {
-    usersList: {
-      defaultValue: [
-        {
-          name: 'John',
-          id: 1,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 2,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 3,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 4,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 5,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 6,
-          thumbnail: '',
-        },
-      ],
-      control: {
-        type: 'object',
-      },
-    },
-    size: {
-      control: {
-        type: 'text',
-      },
-    },
-    moreThumbnailsText: {
-      control: {
-        type: 'text',
-        default: '2 more',
-      },
-    },
-    showMoreThumbnailsCount: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ThumbnailGroup },
-  template: '<ThumbnailGroup v-bind="$props"/>',
-});
-
-export const Primary = Template.bind({});
diff --git a/app/javascript/dashboard/modules/contact/stories/AddCustomAttribute.stories.js b/app/javascript/dashboard/modules/contact/stories/AddCustomAttribute.stories.js
deleted file mode 100644
index 603cb5167..000000000
--- a/app/javascript/dashboard/modules/contact/stories/AddCustomAttribute.stories.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import AddCustomAttribute from '../components/AddCustomAttribute';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/AddCustomAttribute',
-  component: AddCustomAttribute,
-  argTypes: {
-    show: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-    isCreating: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddCustomAttribute },
-  template: '<add-custom-attribute v-bind="$props" @create="onCreate" />',
-});
-
-export const DefaultAttribute = Template.bind({});
-DefaultAttribute.args = {
-  onCreate: action('edit'),
-};
diff --git a/app/javascript/dashboard/modules/contact/stories/ContactAttribute.stories.js b/app/javascript/dashboard/modules/contact/stories/ContactAttribute.stories.js
deleted file mode 100644
index 4deab66f2..000000000
--- a/app/javascript/dashboard/modules/contact/stories/ContactAttribute.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import ContactAttribute from '../components/ContactAttribute';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/ContactAttribute',
-  component: ContactAttribute,
-  argTypes: {
-    label: {
-      defaultValue: 'Email',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      defaultValue: 'dwight@schrute.farms',
-      control: {
-        type: 'text',
-      },
-    },
-    icon: {
-      defaultValue: 'ion-email',
-      control: {
-        type: 'text',
-      },
-    },
-    showEdit: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactAttribute },
-  template: '<contact-attribute v-bind="$props" @update="onEdit" />',
-});
-
-export const DefaultAttribute = Template.bind({});
-DefaultAttribute.args = {
-  onEdit: action('edit'),
-};
diff --git a/app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js b/app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js
deleted file mode 100644
index 3b0b02be5..000000000
--- a/app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import ContactFields from '../components/ContactFields';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/ContactFields',
-  component: ContactFields,
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactFields },
-  template:
-    '<contact-fields v-bind="$props" :contact="contact" @update="onUpdate" @create-attribute="onCreate" />',
-});
-
-export const DefaultContactFields = Template.bind({});
-DefaultContactFields.args = {
-  contact: {
-    id: 979442,
-    name: 'Eden Hazard',
-    title: 'Playmaker',
-    thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
-    company: {
-      id: 10,
-      name: 'Chelsea',
-    },
-    email: 'hazard@chelsea.com',
-    availability_status: 'offline',
-    phone_number: '',
-    custom_attributes: {},
-    additional_attributes: {
-      description:
-        'Known for his dribbling, he is considered to be one of the best players in the world.',
-      social_profiles: {
-        twitter: 'hazardeden10',
-        facebook: 'hazardeden10',
-        linkedin: 'hazardeden10',
-      },
-    },
-  },
-  onUpdate: action('update'),
-  onCreate: action('create'),
-};
diff --git a/app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js b/app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js
deleted file mode 100644
index 8c860ebd0..000000000
--- a/app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import ContactIntro from '../components/ContactIntro';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/ContactIntro',
-  component: ContactIntro,
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactIntro },
-  template:
-    '<contact-intro v-bind="$props" @edit="onEdit" @message="onNewMessage" />',
-});
-
-export const DefaultContactIntro = Template.bind({});
-DefaultContactIntro.args = {
-  contact: {
-    id: 979442,
-    name: 'Eden Hazard',
-    title: 'Playmaker',
-    thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
-    company: {
-      id: 10,
-      name: 'Chelsea',
-    },
-    email: 'hazard@chelsea.com',
-    availability_status: 'offline',
-    phone_number: '',
-    custom_attributes: {},
-    additional_attributes: {
-      description:
-        'Known for his dribbling, he is considered to be one of the best players in the world.',
-      social_profiles: {
-        twitter: 'hazardeden10',
-        facebook: 'hazardeden10',
-        linkedin: 'hazardeden10',
-      },
-    },
-  },
-  onEdit: action('edit'),
-  onNewMessage: action('new message 💬'),
-};
diff --git a/app/javascript/dashboard/modules/contact/stories/MergeContact.stories.js b/app/javascript/dashboard/modules/contact/stories/MergeContact.stories.js
deleted file mode 100644
index 3700ba0f1..000000000
--- a/app/javascript/dashboard/modules/contact/stories/MergeContact.stories.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import MergeContact from 'dashboard/modules/contact/components/MergeContact';
-
-export default {
-  title: 'Components/Contact/MergeContacts',
-  component: MergeContact,
-  argTypes: {
-    'primary-contact': {
-      defaultValue: '{}',
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MergeContact },
-  template:
-    '<merge-contact v-bind="$props" @submit="onSearch" @search="onSubmit"></merge-contact>',
-});
-
-export const List = Template.bind({});
-List.args = {
-  primaryContact: {
-    id: 12,
-    name: 'Mason Mount',
-  },
-  onSearch: action('Search'),
-  onSubmit: action('Submit'),
-};
diff --git a/app/javascript/dashboard/modules/notes/stories/AddNote.stories.js b/app/javascript/dashboard/modules/notes/stories/AddNote.stories.js
deleted file mode 100644
index 1f547d59e..000000000
--- a/app/javascript/dashboard/modules/notes/stories/AddNote.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AddNote from '../components/AddNote.vue';
-
-export default {
-  title: 'Components/Notes/Add',
-  component: AddNote,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddNote },
-  template: '<add-note v-bind="$props" @add="onAdd"></add-note>',
-});
-
-export const Add = Template.bind({});
-Add.args = {
-  onAdd: action('Added'),
-};
diff --git a/app/javascript/dashboard/modules/notes/stories/ContactNote.stories.js b/app/javascript/dashboard/modules/notes/stories/ContactNote.stories.js
deleted file mode 100644
index 71c3abd81..000000000
--- a/app/javascript/dashboard/modules/notes/stories/ContactNote.stories.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ContactNote from '../components/ContactNote.vue';
-
-export default {
-  title: 'Components/Notes/Note',
-  component: ContactNote,
-  argTypes: {
-    id: {
-      control: {
-        type: 'number',
-      },
-    },
-    note: {
-      defaultValue:
-        'A copy and paste musical notes symbols & music symbols collection for easy access.',
-      control: {
-        type: 'text',
-      },
-    },
-    userName: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    timeStamp: {
-      defaultValue: 1618046084,
-      control: {
-        type: 'number',
-      },
-    },
-    thumbnail: {
-      defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactNote },
-  template:
-    '<contact-note v-bind="$props" @edit="onEdit" @delete="onDelete"></contact-note>',
-});
-
-export const Note = Template.bind({});
-Note.args = {
-  onEdit: action('Edit'),
-  onDelete: action('Delete'),
-};
diff --git a/app/javascript/dashboard/modules/notes/stories/NoteList.stories.js b/app/javascript/dashboard/modules/notes/stories/NoteList.stories.js
deleted file mode 100644
index c9b8d6345..000000000
--- a/app/javascript/dashboard/modules/notes/stories/NoteList.stories.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import NoteList from '../components/NoteList';
-
-export default {
-  title: 'Components/Notes/List',
-  component: NoteList,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { NoteList },
-  template:
-    '<note-list v-bind="$props" @addNote="onAddNote" @editNote="onEditNote" @deleteNote="onDeleteNote" @show="onClick"></note-list>',
-});
-
-export const List = Template.bind({});
-List.args = {
-  onClick: action('show'),
-  onAddNote: action('added'),
-  onEditNote: action('edit'),
-  onDeleteNote: action('deleted'),
-  notes: [
-    {
-      id: '12345',
-      content:
-        'It is a long established fact that a reader will be distracted.',
-      user: {
-        name: 'John Doe',
-        thumbnail: 'https://randomuser.me/api/portraits/men/69.jpg',
-      },
-      created_at: 1618046084,
-    },
-    {
-      id: '12346',
-      content:
-        'It is simply dummy text of the printing and typesetting industry.',
-      user: {
-        name: 'Pearl Cruz',
-        thumbnail: 'https://randomuser.me/api/portraits/women/29.jpg',
-      },
-      created_at: 1616046076,
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/modules/search/search.routes.js b/app/javascript/dashboard/modules/search/search.routes.js
index d2d7b19c4..8323ccf00 100644
--- a/app/javascript/dashboard/modules/search/search.routes.js
+++ b/app/javascript/dashboard/modules/search/search.routes.js
@@ -1,4 +1,3 @@
-/* eslint-disable storybook/default-exports */
 import { frontendURL } from '../../helper/URLHelper';
 
 const SearchView = () => import('./components/SearchView.vue');
diff --git a/app/javascript/dashboard/modules/search/stories/MessageContent.stories.js b/app/javascript/dashboard/modules/search/stories/MessageContent.stories.js
deleted file mode 100644
index d82d1979b..000000000
--- a/app/javascript/dashboard/modules/search/stories/MessageContent.stories.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import MessageContent from '../components/MessageContent.vue';
-
-export default {
-  title: 'Components/Search/MessageContent',
-  component: MessageContent,
-  argTypes: {
-    content: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    author: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MessageContent },
-  template: '<message-content v-bind="$props"></message-content>',
-});
-
-export const MessageResultItem = Template.bind({});
diff --git a/app/javascript/dashboard/modules/search/stories/SearchResultContactItem.stories.js b/app/javascript/dashboard/modules/search/stories/SearchResultContactItem.stories.js
deleted file mode 100644
index bb2723057..000000000
--- a/app/javascript/dashboard/modules/search/stories/SearchResultContactItem.stories.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import SearchResultContactItem from '../components/SearchResultContactItem.vue';
-
-export default {
-  title: 'Components/Search/SearchResultContactItem',
-  component: SearchResultContactItem,
-  argTypes: {
-    id: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    name: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    email: {
-      defaultValue: 'johndoe@faster.com',
-      control: {
-        type: 'text',
-      },
-    },
-    phone: {
-      defaultValue: '+1 123 456 7890',
-      control: {
-        type: 'text',
-      },
-    },
-    accountId: {
-      defaultValue: '7890',
-      control: {
-        type: 'text',
-      },
-    },
-    thumbnail: {
-      defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SearchResultContactItem },
-  template:
-    '<search-result-contact-item v-bind="$props"></search-result-contact-item>',
-});
-
-export const ResultContactItem = Template.bind({});
diff --git a/app/javascript/dashboard/modules/search/stories/SearchResultConversationItem.stories.js b/app/javascript/dashboard/modules/search/stories/SearchResultConversationItem.stories.js
deleted file mode 100644
index ebfb75e65..000000000
--- a/app/javascript/dashboard/modules/search/stories/SearchResultConversationItem.stories.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import SearchResultConversationItem from '../components/SearchResultConversationItem.vue';
-
-export default {
-  title: 'Components/Search/SearchResultConversationItem',
-  component: SearchResultConversationItem,
-  argTypes: {
-    id: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    name: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    inbox: {
-      defaultValue: {
-        name: 'Livechat',
-        channel_type: 'Channel::WebWidget',
-      },
-      control: {
-        type: 'object',
-      },
-    },
-    accountId: {
-      defaultValue: '7890',
-      control: {
-        type: 'text',
-      },
-    },
-    createdAt: {
-      defaultValue: '1677672962',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SearchResultConversationItem },
-  template:
-    '<search-result-conversation-item v-bind="$props"></search-result-conversation-item>',
-});
-
-export const ResultConversationItem = Template.bind({});
diff --git a/app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js b/app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js
deleted file mode 100644
index 91383eeb6..000000000
--- a/app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Widget from '../components/Widget';
-
-const ReplyTime = {
-  'In a few minutes': 'in_a_few_minutes',
-  'In a few hours': 'in_a_few_hours',
-  'In a few day': 'in_a_day',
-};
-
-export default {
-  title: 'components/Widget',
-  component: Widget,
-  argTypes: {
-    replyTime: {
-      control: {
-        type: 'select',
-        options: ReplyTime,
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Widget },
-  template: '<Widget v-bind="$props" />',
-});
-
-export const DefaultWidget = Template.bind({});
-DefaultWidget.args = {};
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.stories.js b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.stories.js
deleted file mode 100644
index a9bdbb5e8..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.stories.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AddReminder from './AddReminder';
-
-export default {
-  title: 'Components/Reminder/Add',
-  component: AddReminder,
-  argTypes: {
-    options: {
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddReminder },
-  template:
-    '<add-reminder v-bind="$props" @add="onAdd" @click="onClick"></add-reminder>',
-});
-
-export const Add = Template.bind({});
-Add.args = {
-  onAdd: action('Added'),
-  onClick: action('Label'),
-  options: [
-    {
-      id: '12345',
-      name: 'calls',
-    },
-    {
-      id: '12346',
-      name: 'meeting',
-    },
-    {
-      id: '12347',
-      name: 'review',
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.stories.js b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.stories.js
deleted file mode 100644
index 853542357..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.stories.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ReminderItem from './ReminderItem';
-
-export default {
-  title: 'Components/Reminder/Item',
-  component: ReminderItem,
-  argTypes: {
-    id: {
-      control: {
-        type: 'number',
-      },
-    },
-    text: {
-      defaultValue:
-        'A copy and paste musical notes symbols & music symbols collection for easy access.',
-      control: {
-        type: 'text',
-      },
-    },
-    isCompleted: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    date: {
-      defaultValue: '03/06/2020',
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      defaultValue: 'Call',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ReminderItem },
-  template:
-    '<reminder-item v-bind="$props" @completed="onClick" @edit="onEdit" @delete="onDelete"></reminder-item>',
-});
-
-export const Item = Template.bind({});
-Item.args = {
-  onClick: action('Marked'),
-  onEdit: action('Edit'),
-  onDelete: action('Delete'),
-};
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.stories.js b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.stories.js
deleted file mode 100644
index 0ceaa64b4..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import SectionHeader from './SectionHeader';
-
-export default {
-  title: 'Components/Events/Section',
-  component: SectionHeader,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SectionHeader },
-  template:
-    '<section-header v-bind="$props" @notes="onClickNotes" @events="onClickEvents" @conversation="onClickConversation"></section-header>',
-});
-
-export const Section = Template.bind({});
-Section.args = {
-  onClickNotes: action('notes'),
-  onClickEvents: action('events'),
-  onClickConversation: action('conversation'),
-};
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.stories.js b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.stories.js
deleted file mode 100644
index 2aedbcd15..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.stories.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import TimelineCard from './TimelineCard';
-
-export default {
-  title: 'Components/Events/Timeline',
-  component: TimelineCard,
-  argTypes: {
-    eventType: {
-      defaultValue: 'Commented',
-      control: {
-        type: 'text',
-      },
-    },
-    eventPath: {
-      defaultValue: 'chatwoot/chatwoot',
-      control: {
-        type: 'text',
-      },
-    },
-    eventBody: {
-      defaultValue:
-        'Commentedmany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
-      control: {
-        type: 'text',
-      },
-    },
-    timeStamp: {
-      defaultValue: '1618046084',
-      control: {
-        type: 'number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { TimelineCard },
-  template: '<timeline-card v-bind="$props" @more="onClick"></timeline-card>',
-});
-
-export const Timeline = Template.bind({});
-Timeline.args = {
-  onClick: action('more'),
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/AddCategory.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/AddCategory.stories.js
deleted file mode 100644
index c0d2a7507..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/AddCategory.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import AddCategoryComponent from '../../pages/categories/AddCategory.vue';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Help Center',
-  component: AddCategoryComponent,
-  argTypes: {
-    show: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddCategoryComponent },
-  template:
-    '<add-category-component v-bind="$props" @create="onCreate" @cancel="onClose" />',
-});
-
-export const AddCategory = Template.bind({});
-AddCategory.args = {
-  portalName: 'Chatwoot help center',
-  locale: 'En-US',
-  onCreate: action('create'),
-  onClose: action('cancel'),
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleEditor.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleEditor.stories.js
deleted file mode 100644
index 923350645..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleEditor.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ArticleEditor from '../../components/ArticleEditor.vue';
-
-export default {
-  title: 'Components/Help Center',
-  component: ArticleEditor,
-  argTypes: {
-    article: {
-      defaultValue: {},
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleEditor },
-  template:
-    '<article-editor v-bind="$props" @focus="onFocus" @blur="onBlur"></article-editor>',
-});
-
-export const EditArticleView = Template.bind({});
-EditArticleView.args = {
-  article: {
-    id: '1',
-    title: 'Lorem ipsum',
-    content:
-      'L**orem ipsum** dolor sit amet, consectetur adipiscing elit. Congue diam orci tellus *varius per cras turpis aliquet commodo dolor justo* rutrum lorem venenatis aliquet orci curae hac. Sagittis ultrices felis **`ante placerat condimentum parturient erat consequat`** sollicitudin *sagittis potenti sollicitudin* quis velit at placerat mi torquent. Dignissim luctus nulla suspendisse purus cras commodo ipsum orci tempus morbi metus conubia et hac potenti quam suspendisse feugiat. Turpis eros dictum tellus natoque laoreet lacus dolor cras interdum **vitae gravida tincidunt ultricies tempor convallis tortor rhoncus suspendisse.** Nisi lacinia etiam vivamus tellus sed taciti potenti quam praesent congue euismod mauris est eu risus convallis taciti etiam. Inceptos iaculis turpis leo porta pellentesque dictum `bibendum blandit parturient nulla leo pretium` rhoncus litora dapibus fringilla hac litora.',
-  },
-  onFocus: action('focus'),
-  onBlur: action('blur'),
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleHeader.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleHeader.stories.js
deleted file mode 100644
index c1cfc21ac..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleHeader.stories.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ArticleHeader from '../Header/ArticleHeader';
-
-export default {
-  title: 'Components/Help Center/Header',
-  component: ArticleHeader,
-  argTypes: {
-    headerTitle: {
-      defaultValue: 'All articles',
-      control: {
-        type: 'text',
-      },
-    },
-    count: {
-      defaultValue: 112,
-      control: {
-        type: 'number',
-      },
-    },
-    selectedValue: {
-      defaultValue: 'Status',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleHeader },
-  template:
-    '<article-header v-bind="$props" @openModal="openFilterModal" @open="openDropdown" @close="closeDropdown" ></article-header>',
-});
-
-export const ArticleHeaderView = Template.bind({});
-ArticleHeaderView.args = {
-  headerTitle: 'All articles',
-  count: 112,
-  selectedValue: 'Status',
-  openFilterModal: action('openedFilterModal'),
-  openDropdown: action('opened'),
-  closeDropdown: action('closed'),
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleItem.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleItem.stories.js
deleted file mode 100644
index 303a96cb6..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleItem.stories.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import ArticleItemComponent from '../ArticleItem.vue';
-const STATUS_LIST = {
-  published: 'published',
-  draft: 'draft',
-  archived: 'archived',
-};
-
-export default {
-  title: 'Components/Help Center',
-  component: ArticleItemComponent,
-  argTypes: {
-    title: {
-      defaultValue: 'Setup your account',
-      control: {
-        type: 'text',
-      },
-    },
-    views: {
-      defaultValue: 13,
-      control: {
-        type: 'number',
-      },
-    },
-    category: {
-      defaultValue: 'Getting started',
-      control: {
-        type: 'text',
-      },
-    },
-    status: {
-      defaultValue: 'Status',
-      control: {
-        type: 'select',
-        options: STATUS_LIST,
-      },
-    },
-    updatedAt: {
-      defaultValue: '1657255863',
-      control: {
-        type: 'number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleItemComponent },
-  template:
-    '<article-item-component v-bind="$props" ></article-item-component>',
-});
-
-export const ArticleItem = Template.bind({});
-ArticleItem.args = {
-  title: 'Setup your account',
-  author: {
-    name: 'John Doe',
-  },
-  category: 'Getting started',
-  views: 12,
-  status: 'published',
-  updatedAt: 1657255863,
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchArticleView.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchArticleView.stories.js
deleted file mode 100644
index 629d9b6e5..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchArticleView.stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import ArticleSearchArticleView from '../ArticleSearch/ArticleView';
-
-export default {
-  title: 'Components/Help Center/ArticleSearch/ArticleView',
-  component: ArticleSearchArticleView,
-  argTypes: {
-    title: {
-      defaultValue: 'Insert article',
-      control: {
-        type: 'text',
-      },
-    },
-    selectedValue: {
-      defaultValue: 'Status',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleSearchArticleView },
-  template:
-    '<article-search-article-view v-bind="$props"></article-search-article-view>',
-});
-
-export const ArticleHeaderView = Template.bind({});
-ArticleHeaderView.args = {
-  title: 'Insert article',
-  url: 'https://staging.chatwoot.com/hc/home-rental-app/articles/filter-your-housing-search-results-0',
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchHeader.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchHeader.stories.js
deleted file mode 100644
index 7199f1ffa..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchHeader.stories.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import ArticleSearchHeader from '../ArticleSearch/Header';
-
-export default {
-  title: 'Components/Help Center/ArticleSearch/Header',
-  component: ArticleSearchHeader,
-  argTypes: {
-    title: {
-      defaultValue: 'Insert article',
-      control: {
-        type: 'text',
-      },
-    },
-    selectedValue: {
-      defaultValue: 'Status',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleSearchHeader },
-  template: '<article-search-header v-bind="$props"></article-search-header>',
-});
-
-export const ArticleHeaderView = Template.bind({});
-ArticleHeaderView.args = {
-  title: 'Insert article',
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchResultItem.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchResultItem.stories.js
deleted file mode 100644
index 5b6904c2f..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchResultItem.stories.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import ArticleSearchResultItem from '../ArticleSearch/ArticleSearchResultItem.vue';
-
-export default {
-  title: 'Components/Help Center/ArticleSearchResultItem',
-  component: ArticleSearchResultItem,
-  argTypes: {
-    title: {
-      defaultValue: 'Setup your account',
-      control: {
-        type: 'text',
-      },
-    },
-    body: {
-      defaultValue:
-        'You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.',
-      control: {
-        type: 'text',
-      },
-    },
-    category: {
-      defaultValue: 'Getting started',
-      control: {
-        type: 'text',
-      },
-    },
-    locale: {
-      defaultValue: 'en-US',
-      control: {
-        type: 'text',
-      },
-    },
-    url: {
-      defaultValue: '/app/accounts/1/conversations/23842',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleSearchResultItem },
-  template:
-    '<ArticleSearchResultItem v-bind="$props" ></ArticleSearchResultItem>',
-});
-
-export const ArticleSearchResultItemStory = Template.bind({});
-ArticleSearchResultItemStory.args = {
-  title: 'Setup your account',
-  body: `You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.
-
-You can manage your conversations and collaborate with your team on the go with Chatwoot mobile apps (available for Android and iOS).
-
-In this user guide, we’ve explained the features, capabilities, modes of operation, and step-by-step procedures for easily using the Chatwoot platform.`,
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleTable.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleTable.stories.js
deleted file mode 100644
index 7b0a692f9..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleTable.stories.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import ArticleTableComponent from '../ArticleTable.vue';
-import { action } from '@storybook/addon-actions';
-export default {
-  title: 'Components/Help Center',
-  component: ArticleTableComponent,
-  argTypes: {
-    articles: {
-      defaultValue: [],
-      control: {
-        type: 'array',
-      },
-    },
-    articleCount: {
-      defaultValue: 10,
-      control: {
-        type: 'number',
-      },
-    },
-    currentPage: {
-      defaultValue: 1,
-      control: {
-        type: 'number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleTableComponent },
-  template:
-    '<article-table-component @onPageChange="onPageChange" v-bind="$props" ></article-table-component>',
-});
-
-export const ArticleTable = Template.bind({});
-ArticleTable.args = {
-  articles: [
-    {
-      title: 'Setup your account',
-      author: {
-        name: 'John Doe',
-      },
-      readCount: 13,
-      category: 'Getting started',
-      status: 'published',
-      updatedAt: 1657255863,
-    },
-    {
-      title: 'Docker Configuration',
-      author: {
-        name: 'Sam Manuel',
-      },
-      readCount: 13,
-      category: 'Engineering',
-      status: 'draft',
-      updatedAt: 1656658046,
-    },
-    {
-      title: 'Campaigns',
-      author: {
-        name: 'Sam Manuel',
-      },
-      readCount: 28,
-      category: 'Engineering',
-      status: 'archived',
-      updatedAt: 1657590446,
-    },
-  ],
-  articleCount: 10,
-  currentPage: 1,
-  onPageChange: action('onPageChange'),
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/EditArticleHeader.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/EditArticleHeader.stories.js
deleted file mode 100644
index 1f09ee84f..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/EditArticleHeader.stories.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import EditArticleHeader from '../Header/EditArticleHeader';
-
-export default {
-  title: 'Components/Help Center/Header',
-  component: EditArticleHeader,
-  argTypes: {
-    backButtonLabel: {
-      defaultValue: 'Articles',
-      control: {
-        type: 'text',
-      },
-    },
-    draftState: {
-      defaultValue: 'saving',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { EditArticleHeader },
-  template:
-    '<edit-article-header v-bind="$props" @back="onClickGoBack" @show="showPreview" @add="onClickAdd" @open="openSidebar" @close="closeSidebar" ></edit-article-header>',
-});
-
-export const EditArticleHeaderView = Template.bind({});
-EditArticleHeaderView.args = {
-  backButtonLabel: 'Articles',
-  draftState: 'saving',
-  onClickGoBack: action('goBack'),
-  showPreview: action('previewOpened'),
-  onClickAdd: action('added'),
-  openSidebar: action('openedSidebar'),
-  closeSidebar: action('closedSidebar'),
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalListItem.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalListItem.stories.js
deleted file mode 100644
index 1e7112055..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalListItem.stories.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import PortalListItem from '../PortalListItem';
-
-export default {
-  title: 'Components/Help Center/Portal List',
-  component: PortalListItem,
-  argTypes: {
-    portals: { control: 'array' },
-    status: {
-      control: {
-        type: 'string',
-        options: ['archived', 'draft', 'published'],
-      },
-    },
-    selectedLocaleCode: { control: 'string' },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PortalListItem },
-  template:
-    '<portal-list-item v-bind="$props" @add="addLocale" @open-site="openSite" @open="openSettings" @swap="swapLocale" @delete="deleteLocale" ></portal-list-item>',
-});
-
-export const PortalListItemView = Template.bind({});
-PortalListItemView.args = {
-  addLocale: action('addLocale'),
-  openSite: action('openSite'),
-  openSettings: action('openSettings'),
-  swapLocale: action('swapLocale'),
-  deleteLocale: action('deleteLocale'),
-  status: 'published',
-  selectedLocaleCode: 'en-US',
-  portals: [
-    {
-      name: 'Chatwoot Help Center',
-      id: 1,
-      color: 'red',
-      custom_domain: 'help-center.chatwoot.com',
-      articles_count: 123,
-      header_text: 'Help center',
-      homepage_link: null,
-      page_title: 'English',
-      slug: 'help-center',
-      archived: false,
-      config: {
-        allowed_locales: [
-          {
-            code: 'en-US',
-            name: 'English',
-            articles_count: 123,
-            categories_count: 42,
-          },
-          {
-            code: 'fr-FR',
-            name: 'Français',
-            articles_count: 23,
-            categories_count: 11,
-          },
-          {
-            code: 'de-DE',
-            name: 'Deutsch',
-            articles_count: 32,
-            categories_count: 12,
-          },
-          {
-            code: 'es-ES',
-            name: 'Español',
-            articles_count: 12,
-            categories_count: 4,
-          },
-        ],
-      },
-      locales: [
-        {
-          code: 'en-US',
-          name: 'English',
-          articles_count: 123,
-          categories_count: 42,
-        },
-        {
-          code: 'fr-FR',
-          name: 'Français',
-          articles_count: 23,
-          categories_count: 11,
-        },
-        {
-          code: 'de-DE',
-          name: 'Deutsch',
-          articles_count: 32,
-          categories_count: 12,
-        },
-        {
-          code: 'es-ES',
-          name: 'Español',
-          articles_count: 12,
-          categories_count: 4,
-        },
-      ],
-    },
-    {
-      name: 'Chatwoot Docs',
-      id: 2,
-      color: 'green',
-      custom_domain: 'doc-chatwoot.com',
-      articles_count: 67,
-      header_text: 'Docs',
-      homepage_link: null,
-      page_title: 'Portal',
-      slug: 'second_portal',
-      archived: false,
-      config: {
-        allowed_locales: [
-          {
-            name: 'English',
-            code: 'en-EN',
-            articles_count: 12,
-            categories_count: 66,
-          },
-          {
-            name: 'Mandarin',
-            code: 'ch-CH',
-            articles_count: 6,
-            categories_count: 23,
-          },
-        ],
-      },
-      locales: [
-        {
-          name: 'English',
-          code: 'en-EN',
-          articles_count: 12,
-          categories_count: 66,
-        },
-        {
-          name: 'Mandarin',
-          code: 'ch-CH',
-          articles_count: 6,
-          categories_count: 23,
-        },
-      ],
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalPopover.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalPopover.stories.js
deleted file mode 100644
index 148230327..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalPopover.stories.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import PortalPopover from '../PortalPopover.vue';
-
-export default {
-  title: 'Components/Help Center/Portal Popover',
-  component: PortalPopover,
-  argTypes: {
-    active: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PortalPopover },
-  template:
-    '<PortalPopover v-bind="$props" @click="onClick">{{label}}</PortalPopover>',
-});
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  portals: [
-    {
-      name: 'Chatwoot Help Center',
-      id: 1,
-      color: null,
-      custom_domain: 'doc',
-      articles_count: 123,
-      header_text: null,
-      homepage_link: null,
-      page_title: null,
-      slug: 'first_portal',
-      archived: false,
-      config: {
-        allowed_locales: [
-          {
-            code: 'en',
-            name: 'English',
-            articles_count: 123,
-          },
-          {
-            code: 'fr',
-            name: 'Français',
-            articles_count: 123,
-          },
-          {
-            code: 'de',
-            name: 'Deutsch',
-            articles_count: 32,
-          },
-          {
-            code: 'es',
-            name: 'Español',
-            articles_count: 12,
-          },
-          {
-            code: 'it',
-            name: 'Italiano',
-            articles_count: 8,
-          },
-        ],
-      },
-      locales: [
-        {
-          name: 'English',
-          code: 'en',
-          articles_count: 12,
-        },
-        {
-          name: 'Español',
-          code: 'es',
-          articles_count: 42,
-        },
-        {
-          name: 'French',
-          code: 'fr',
-          articles_count: 29,
-        },
-        {
-          name: 'Italian',
-          code: 'it',
-          articles_count: 4,
-        },
-        {
-          name: 'German',
-          code: 'de',
-          articles_count: 66,
-        },
-      ],
-    },
-    {
-      name: 'Chatwoot Docs',
-      id: 2,
-      color: null,
-      custom_domain: 'doc',
-      articles_count: 124,
-      header_text: null,
-      homepage_link: null,
-      page_title: null,
-      slug: 'second_portal',
-      archived: false,
-      config: {
-        allowed_locales: [
-          {
-            code: 'en',
-            name: 'English',
-            articles_count: 123,
-          },
-          {
-            code: 'fr',
-            name: 'Français',
-            articles_count: 123,
-          },
-          {
-            code: 'de',
-            name: 'Deutsch',
-            articles_count: 32,
-          },
-          {
-            code: 'es',
-            name: 'Español',
-            articles_count: 12,
-          },
-          {
-            code: 'it',
-            name: 'Italiano',
-            articles_count: 8,
-          },
-        ],
-      },
-      locales: [
-        {
-          name: 'English',
-          code: 'en',
-          articles_count: 12,
-        },
-        {
-          name: 'Japanese',
-          code: 'jp',
-          articles_count: 4,
-        },
-        {
-          name: 'Mandarin',
-          code: 'CH',
-          articles_count: 6,
-        },
-      ],
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalSwitch.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalSwitch.stories.js
deleted file mode 100644
index c3b623cb5..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalSwitch.stories.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import PortalSwitch from '../PortalSwitch.vue';
-
-export default {
-  title: 'Components/Help Center/Portal Switch',
-  component: PortalSwitch,
-  argTypes: {
-    active: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PortalSwitch },
-  template:
-    '<PortalSwitch v-bind="$props" @click="onClick">{{label}}</PortalSwitch>',
-});
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  active: false,
-  portal: {
-    name: 'Chatwoot Help Center',
-    articles_count: 124,
-    locales: [
-      {
-        name: 'English',
-        code: 'en',
-        articles_count: 12,
-      },
-      {
-        name: 'Español',
-        code: 'es',
-        articles_count: 42,
-      },
-      {
-        name: 'French',
-        code: 'fr',
-        articles_count: 29,
-      },
-      {
-        name: 'Italian',
-        code: 'it',
-        articles_count: 4,
-      },
-      {
-        name: 'German',
-        code: 'de',
-        articles_count: 66,
-      },
-    ],
-  },
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/Sidebar.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/Sidebar.stories.js
deleted file mode 100644
index a574da002..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/Sidebar.stories.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import Sidebar from '../Sidebar/Sidebar';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail';
-
-export default {
-  title: 'Components/Help Center/Sidebar',
-  component: { Sidebar, Thumbnail },
-  argTypes: {
-    thumbnailSrc: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    headerTitle: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    subTitle: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    accessibleMenuItems: [],
-    additionalSecondaryMenuItems: [],
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Sidebar },
-  template: '<sidebar v-bind="$props" @input="onSearch"></sidebar>',
-});
-
-export const HelpCenterSidebarView = Template.bind({});
-HelpCenterSidebarView.args = {
-  onSearch: action('search'),
-  thumbnailSrc: '',
-  headerTitle: 'Help Center',
-  subTitle: 'English',
-  accessibleMenuItems: [
-    {
-      icon: 'book',
-      label: 'HELP_CENTER.ALL_ARTICLES',
-      key: 'helpcenter_all',
-      count: 199,
-      toState: 'accounts/1/articles/all',
-      toolTip: 'All Articles',
-      toStateName: 'helpcenter_all',
-    },
-    {
-      icon: 'pen',
-      label: 'HELP_CENTER.MY_ARTICLES',
-      key: 'helpcenter_mine',
-      count: 112,
-      toState: 'accounts/1/articles/mine',
-      toolTip: 'My articles',
-      toStateName: 'helpcenter_mine',
-    },
-    {
-      icon: 'draft',
-      label: 'HELP_CENTER.DRAFT',
-      key: 'helpcenter_draft',
-      count: 32,
-      toState: 'accounts/1/articles/draft',
-      toolTip: 'Draft',
-      toStateName: 'helpcenter_draft',
-    },
-    {
-      icon: 'archive',
-      label: 'HELP_CENTER.ARCHIVED',
-      key: 'helpcenter_archive',
-      count: 10,
-      toState: 'accounts/1/articles/archived',
-      toolTip: 'Archived',
-      toStateName: 'helpcenter_archive',
-    },
-  ],
-  additionalSecondaryMenuItems: [
-    {
-      icon: 'folder',
-      label: 'HELP_CENTER.CATEGORY',
-      hasSubMenu: true,
-      key: 'category',
-      children: [
-        {
-          id: 1,
-          label: 'Getting started',
-          count: 12,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/new',
-        },
-        {
-          id: 2,
-          label: 'Channel',
-          count: 19,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/channel',
-        },
-        {
-          id: 3,
-          label: 'Feature',
-          count: 24,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/feature',
-        },
-        {
-          id: 4,
-          label: 'Advanced',
-          count: 8,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/advanced',
-        },
-        {
-          id: 5,
-          label: 'Mobile app',
-          count: 3,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/mobile-app',
-        },
-        {
-          id: 6,
-          label: 'Others',
-          count: 39,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/others',
-        },
-      ],
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.stories.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.stories.js
deleted file mode 100644
index 701b2c9f5..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import Vue from 'vue';
-import VTooltip from 'v-tooltip';
-import ReportMetricCard from './ReportMetricCard';
-
-Vue.use(VTooltip, { defaultHtml: false });
-
-export default {
-  title: 'Components/CSAT/Metrics Card',
-  component: ReportMetricCard,
-  argTypes: {
-    label: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    infoText: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (_, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ReportMetricCard },
-  template: '<report-metric-card v-bind="$props" />',
-});
-
-export const ReportMetricCardTemplate = Template.bind({});
-ReportMetricCardTemplate.args = {
-  infoText: 'No. of responses / No. of survey messages sent * 100',
-  label: 'Satisfaction Score',
-  value: '98.5',
-};
diff --git a/app/javascript/shared/components/CustomerSatisfaction.stories.js b/app/javascript/shared/components/CustomerSatisfaction.stories.js
deleted file mode 100644
index 1636835c9..000000000
--- a/app/javascript/shared/components/CustomerSatisfaction.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import CustomerSatisfaction from './CustomerSatisfaction';
-
-export default {
-  title: 'Components/CustomerSatisfaction',
-  component: CustomerSatisfaction,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CustomerSatisfaction },
-  template: '<customer-satisfaction />',
-});
-
-export const Item = Template.bind({});
-Item.args = {
-  onClick: action('Selected'),
-};
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.stories.js b/app/javascript/shared/components/ui/MultiselectDropdown.stories.js
deleted file mode 100644
index 8b067e489..000000000
--- a/app/javascript/shared/components/ui/MultiselectDropdown.stories.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import Dropdown from './MultiselectDropdown';
-
-export default {
-  title: 'Components/Dropdown/Multiselect Dropdown',
-  component: Dropdown,
-  argTypes: {
-    options: {
-      control: {
-        type: 'object',
-      },
-    },
-    selectedItem: {
-      control: {
-        type: 'object',
-      },
-    },
-    multiselectorTitle: {
-      control: {
-        type: 'text',
-      },
-    },
-    multiselectorPlaceholder: {
-      control: {
-        type: 'text',
-      },
-    },
-    noSearchResult: {
-      control: {
-        type: 'text',
-      },
-    },
-    inputPlaceholder: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Dropdown },
-  template: '<dropdown v-bind="$props" @click="onClick"></dropdown>',
-});
-
-export const MultiselectDropdown = Template.bind({});
-MultiselectDropdown.args = {
-  onClick: action('Opened'),
-  options: [
-    {
-      id: 1,
-      availability_status: 'online',
-      name: 'James Philip',
-      thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
-    },
-  ],
-
-  selectedItem: {
-    id: 1,
-    availability_status: 'online',
-    name: 'James Philip',
-    thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
-  },
-};
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.stories.js b/app/javascript/shared/components/ui/MultiselectDropdownItems.stories.js
deleted file mode 100644
index e74b7c14d..000000000
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.stories.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import DropdownItems from './MultiselectDropdownItems';
-
-export default {
-  title: 'Components/Dropdown/Multiselect Dropdown Items',
-  component: DropdownItems,
-  argTypes: {
-    options: {
-      control: {
-        type: 'object',
-      },
-    },
-    selectedItems: {
-      control: {
-        type: 'object',
-      },
-    },
-    inputPlaceholder: {
-      control: {
-        type: 'text',
-      },
-    },
-    noSearchResult: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { DropdownItems },
-  template:
-    '<dropdown-items v-bind="$props" @click="onClick"></dropdown-items>',
-});
-
-export const MultiselectDropdownItems = Template.bind({});
-MultiselectDropdownItems.args = {
-  onClick: action('Added'),
-  options: [
-    {
-      id: '0',
-      name: 'None',
-      thumbnail: '',
-    },
-    {
-      id: '1',
-      name: 'James Philip',
-      availability_status: 'online',
-      role: 'administrator',
-      thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
-    },
-    {
-      id: '2',
-      name: 'Support Team',
-      thumbnail: '',
-    },
-    {
-      id: '3',
-      name: 'Agent',
-      thumbnail: '',
-    },
-  ],
-
-  selectedItems: [{ id: '1' }],
-};
diff --git a/app/javascript/shared/components/ui/dropdown/AddLabel.stories.js b/app/javascript/shared/components/ui/dropdown/AddLabel.stories.js
deleted file mode 100644
index fd1b52241..000000000
--- a/app/javascript/shared/components/ui/dropdown/AddLabel.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AddLabel from './AddLabel';
-
-export default {
-  title: 'Components/Label/Add Button',
-  component: AddLabel,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddLabel },
-  template: '<add-label v-bind="$props" @add="onClick"></add-label>',
-});
-
-export const AddButton = Template.bind({});
-AddButton.args = {
-  onClick: action('opened'),
-};
diff --git a/app/javascript/shared/components/ui/label/LabelDropdown.stories.js b/app/javascript/shared/components/ui/label/LabelDropdown.stories.js
deleted file mode 100644
index 21b1ad083..000000000
--- a/app/javascript/shared/components/ui/label/LabelDropdown.stories.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import LabelDropdown from './LabelDropdown';
-
-export default {
-  title: 'Components/Label/Dropdown',
-  component: LabelDropdown,
-  argTypes: {
-    conversationId: {
-      control: {
-        type: 'text',
-      },
-    },
-    accountLabels: {
-      defaultValue: [
-        {
-          color: '#555',
-          description: '',
-          id: 1,
-          title: 'sales',
-        },
-        {
-          color: '#c242f5',
-          description: '',
-          id: 1,
-          title: 'business',
-        },
-        {
-          color: '#4287f5',
-          description: '',
-          id: 1,
-          title: 'testing',
-        },
-      ],
-      control: {
-        type: 'object',
-      },
-    },
-    selectedLabels: {
-      defaultValue: 'sales, testing',
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LabelDropdown },
-  template:
-    '<label-dropdown v-bind="$props" @add="onAdd" @remove="onRemove"></label-dropdown>',
-});
-
-export const Dropdown = Template.bind({});
-Dropdown.args = {
-  onAdd: action('added'),
-  onRemove: action('removed'),
-};
diff --git a/app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js b/app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js
deleted file mode 100644
index 178f05fa9..000000000
--- a/app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import LabelDropdownItem from './LabelDropdownItem';
-
-export default {
-  title: 'Components/Label/Item',
-  component: LabelDropdownItem,
-  argTypes: {
-    title: {
-      defaultValue: 'sales',
-      control: {
-        type: 'text',
-      },
-    },
-    color: {
-      defaultValue: '#555',
-      control: {
-        type: 'text',
-      },
-    },
-    selected: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LabelDropdownItem },
-  template:
-    '<label-dropdown-item v-bind="$props" @click="onClick"></label-dropdown-item>',
-});
-
-export const Item = Template.bind({});
-Item.args = {
-  onClick: action('Selected'),
-};
diff --git a/app/javascript/widget/components/Form/Input.stories.js b/app/javascript/widget/components/Form/Input.stories.js
deleted file mode 100644
index 74879f5ee..000000000
--- a/app/javascript/widget/components/Form/Input.stories.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import wootInput from './Input';
-
-export default {
-  title: 'Components/Form/Input',
-  component: wootInput,
-  argTypes: {
-    label: {
-      defaultValue: 'Email Address',
-      control: {
-        type: 'text',
-      },
-    },
-    type: {
-      defaultValue: 'email',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Please enter your email address',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      defaultValue: 'John12@ync.in',
-      control: {
-        type: 'text ,number',
-      },
-    },
-    error: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { wootInput },
-  template: '<woot-input v-bind="$props" @input="onClick"></woot-input>',
-});
-
-export const Input = Template.bind({});
-Input.args = {
-  onClick: action('Added'),
-};
diff --git a/app/javascript/widget/components/Form/TextArea.stories.js b/app/javascript/widget/components/Form/TextArea.stories.js
deleted file mode 100644
index 3f47c3323..000000000
--- a/app/javascript/widget/components/Form/TextArea.stories.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import wootTextArea from './TextArea';
-
-export default {
-  title: 'Components/Form/Text Area',
-  component: wootTextArea,
-  argTypes: {
-    label: {
-      defaultValue: 'Message',
-      control: {
-        type: 'text',
-      },
-    },
-    type: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Please enter your message',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      defaultValue: 'Lorem ipsum is a placeholder text commonly used',
-      control: {
-        type: 'text ,number',
-      },
-    },
-    error: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { wootTextArea },
-  template:
-    '<woot-text-area v-bind="$props" @input="onClick"></woot-text-area>',
-});
-
-export const TextArea = Template.bind({});
-TextArea.args = {
-  onClick: action('Added'),
-};
diff --git a/app/javascript/widget/components/stories/ArticleHero.stories.js b/app/javascript/widget/components/stories/ArticleHero.stories.js
deleted file mode 100644
index 354eeaf2d..000000000
--- a/app/javascript/widget/components/stories/ArticleHero.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ArticleHero from '../ArticleHero.vue'; // adjust this path to match your file's location
-
-export default {
-  title: 'Components/Widgets/ArticleHero',
-  component: ArticleHero,
-  argTypes: {
-    articles: { control: 'array', description: 'Array of articles' },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleHero },
-  template:
-    '<article-hero v-bind="$props" @view-all-articles="viewAllArticles" />',
-  methods: {
-    viewAllArticles: action('view-all-articles'),
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  articles: [
-    { title: 'Article 1', content: 'This is article 1.' },
-    { title: 'Article 2', content: 'This is article 2.' },
-    { title: 'Article 3', content: 'This is article 3.' },
-    { title: 'Article 4', content: 'This is article 4.' },
-  ],
-};
diff --git a/package.json b/package.json
index b63b51905..e162bf0c5 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,6 @@
     "start:dev": "foreman start -f ./Procfile.dev",
     "start:test": "RAILS_ENV=test foreman start -f ./Procfile.test",
     "start:dev-overmind": "overmind start -f ./Procfile.dev",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
     "ruby:prettier": "bundle exec rubocop -a",
     "prepare": "husky install",
     "size": "size-limit"
@@ -109,13 +107,6 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/preset-env": "7.13.15",
     "@size-limit/file": "^8.2.4",
-    "@storybook/addon-actions": "6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
-    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/addon-links": "6.5.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "6.5.9",
-    "@storybook/vue": "6.5.9",
     "@vitejs/plugin-vue2": "^2.3.1",
     "@vitest/coverage-v8": "^2.0.1",
     "@vue/test-utils": "^1.3.6",
@@ -134,7 +125,6 @@
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-storybook": "^0.6.14",
     "eslint-plugin-vue": "^9.27.0",
     "fake-indexeddb": "^6.0.0",
     "husky": "^7.0.0",
diff --git a/stories/Sections/Button.stories.mdx b/stories/Sections/Button.stories.mdx
deleted file mode 100644
index ee20ce082..000000000
--- a/stories/Sections/Button.stories.mdx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-
-import WootButton from '../../app/javascript/dashboard/components/ui/WootButton.vue';
-
-<Meta title="Styleguide/Buttons" />
-
-# Buttons
-
-Buttons can be used by `woot-button` component in `vue`. You can play with all the props here 👉 [woot-button](/story/components-button--primary). The button component is made on top of [foundation button](https://get.foundation/sites/docs/button.html)
-so the style of button can be used outside of vue with `button` class.
-
-Other than declred props the `woot-button` can be customised by providing custom classnames through `class-names` prop.
-
-<Story name="default">
-  {{
-    template: `<woot-button size="" title="Press me">Default</woot-button>`,
-  }}
-</Story>
-
-- While naming button labels make sure to describe the action with some context.
-- For HTML forms use `<woot-button type="submit">` instead of `<input type="submit" />`
-- Provide title or tooltip if possible.
-
-## Button sizes
-
-Size of the buttons can be set with `size` to `woot-button`. By default medium is the default size of a button. Other sizes are `tiny, small, medium, large`.
-
-<Canvas>
-  <Story name="sizes">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button size="tiny">Tiny</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button size="small">Small</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button size="">Default</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button size="large">Large</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-Buttons can expanded to full width by setting the `is-expanded` prop. For with by screen size or to make it responsive try with the classnames on
-[Responsive Expanded buttons](https://get.foundation/sites/docs/button.html#responsive-expanded-buttons) with foundation.
-
-<Canvas>
-  <Story name="expanded">
-    {{
-      template: `<div class="row">
-          <div class="columns">
-              <woot-button size="large" is-expanded title="Micheal Scott said the rest">This is buttons is very long</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-## Button colors
-
-Chatwoot comes with predefined set of colors for buttons. The color of the button can be set with `color-scheme` to `woot-button`.
-Default color scheme is `primary`, other color-schemes are `secondary, success, alert, warning`.
-
-<Canvas>
-  <Story name="colors">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button >Primary</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="secondary">Secondary</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="success">Success</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="alert">Alert</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="warning">Warning</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-## Button style variations
-
-There are diffrent styles that comes with chatwoot buttons. This can set with `variants` prop for `woot-button`. By deault the filled will be the style, other variations are `smooth, hollow, clear, link`
-
-- Primary form actions like Save details, Create campaign etc should use default style.
-- The Cancel action has to use the smooth style.
-
-<Canvas>
-  <Story name="variants">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button >Default</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button variant="smooth" color-scheme="alert">Smooth</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="secondary" variant="hollow">Hollow</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="success" variant="clear">Success</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="alert" variant="link">Link</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-## Button states
-
-The button can be disbaled with `is-disabled` which accepts a boolean value. The button can set to a loading state with `is-loading` which accepts a boolean value.
-
-These are states other than the default interaction states like hover, active, focused.
-
-<Canvas>
-  <Story name="states">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="alert" is-disabled>disabled :/</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button variant="smooth" color-scheme="primary" is-loading>Loading...</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-## Button with icon and text
-
-Chatwoot currently use [IonIcons version 2](https://ionic.io/ionicons/v2) which are font-icons. The button position is fixed on the left.
-The prop `icon` can be used to pass the **ion icon classname** to render the icon.
-
-<Canvas>
-  <Story name="icons">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="alert" icon="ion-stop">Stop</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button icon="ion-person" variant="hollow">Hollow man</woot-button>
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-#### Buttons with only icon
-
-The `woot-button` can be used as an icon only button by keeping the button text empty.
-
-<Canvas>
-  <Story name="icononly">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="success" icon="ion-plus" size="tiny"></woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="secondary" icon="ion-plus" size="small" variant="smooth"></woot-button>
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button icon="ion-plus" variant="hollow"></woot-button>
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
diff --git a/stories/Sections/Introduction.stories.mdx b/stories/Sections/Introduction.stories.mdx
deleted file mode 100644
index b9c2104ed..000000000
--- a/stories/Sections/Introduction.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Chatwoot/Introduction" />
-
-# Welcome to Chatwoot styleguide
-
-Chatwoot as an opensource project is growing every day. New features are getting added in every release. The number of contributors who are actively contributing to the project is also increasing. It has become a necessity to create a standard guideline to make the contribution experience easier. This style guide resides as a central repository for the best practices we follow, a set of recommended approaches and the design guidelines/components we use.
-
-Anyone willing to contribute to Chatwoot is encouraged to read this style guide. This style guide is also open source. If you feel that there are rooms for improvement, feel free to raise an issue or a pull request to the repository.
-
-Through this style guide we intent to create a document which can be used across the repositories in the organization and build a design system for the project.
-
-The document would split into 3 major sections
-
-- **Design**: This section would contain the design choices and the documentation for the components built using these design choices.
-
-- **Frontend**: Our frontend is built on [Vue.js](https://vuejs.org/). We follow [Airbnb guidelines for Javascript](https://github.com/airbnb/javascript) and there are a couple of choices we made in structuring the code. All those would be defined in this section.
-
-- **Backend**: Our backend is written on [Ruby on Rails](https://rubyonrails.org/). This section would cover the architectural patterns we have been following so far.
diff --git a/stories/Sections/Layout.stories.mdx b/stories/Sections/Layout.stories.mdx
deleted file mode 100644
index 29ce5df83..000000000
--- a/stories/Sections/Layout.stories.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Chatwoot/Layout" />
-
-# Layout guidelines
-
-Chatwoot follows a fixed-width sidebar on the left menu on all pages. The remaining space of the layout is where the layout changes according to what the page needs.
-
-### Normal Grid
-
-Chatwoot is built on top of [foundation](https://get.foundation/sites/docs/) and uses the **flex-grid** from Foundation. We insist to solve every possible layout with this grid.
-The docs for the grid can be found here on [foundation grid docs](https://get.foundation/sites/docs/grid.html).
-
-### 3 column layout
-
-We Recommend the use of this solution only when the normal grid fails to solve it or needs severe overriding. Some layouts need custom functionality where Foundation grid is not enough. The main conversation page is an example of this grid as a candidate.
-
-**Usage** - We have created a mixin `three-column-grid` which can be included by importing the file
-
-`@import '~dashboard/assets/scss/mixins';`
-
-There are 2 parameters for this mixin, The first one being the minimum possible width for the first column in `rem`. This value is usually a multiple of `8` when converted to `px`. Eg: `256px` will be used as `25.6rem`.
-Similarly, the second param is the minimum possible width of the third column.