diff --git a/.eslintignore b/.eslintignore
index 4688ba10e..635624629 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -39,4 +39,6 @@ src/renderer/ethers.js
 # ignore storybook build files
 # ignore source for now
 src/stories
+src/stories/Generic
+src/stories/Presentational
 storybook-static
diff --git a/src/renderer/Generics/redesign/Button/Button.tsx b/src/renderer/Generics/redesign/Button/Button.tsx
index 1d554b94c..38f4289ee 100644
--- a/src/renderer/Generics/redesign/Button/Button.tsx
+++ b/src/renderer/Generics/redesign/Button/Button.tsx
@@ -11,17 +11,8 @@ export interface ButtonProps {
    * Is this the principal call to action on the page?
    */
   primary?: boolean;
-  /**
-   * What state is the button in?
-   */
   disabled?: boolean;
-  /**
-   * What background color to use
-   */
   backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
   size?: 'small' | 'medium' | 'large';
   /**
    * Text only, with icon, or just icon?
@@ -32,19 +23,13 @@ export interface ButtonProps {
    */
   icon?: React.ReactNode;
   /**
-   * Button contents
+   * Button text content
    */
   label: string;
-  /**
-   * Optional click handler
-   */
   onClick?: () => void;
 }
 
-/**
- * Primary UI component for user interaction.
- */
-export const Button = ({
+const Button = ({
   primary = false,
   size = 'medium',
   disabled = false,
@@ -72,3 +57,5 @@ export const Button = ({
     </button>
   );
 };
+
+export default Button;
diff --git a/src/renderer/Generics/redesign/Splash/Splash.tsx b/src/renderer/Generics/redesign/Splash/Splash.tsx
index 85b7d5f2c..2e45d6ec6 100644
--- a/src/renderer/Generics/redesign/Splash/Splash.tsx
+++ b/src/renderer/Generics/redesign/Splash/Splash.tsx
@@ -1,6 +1,6 @@
 import { container, titleFont, descriptionFont, iconClass } from './splash.css';
 import icon from '../../../../../assets/icon.png';
-import { Button } from '../Button';
+import Button from '../Button/Button';
 
 export interface SplashProps {
   title: string;
@@ -13,7 +13,11 @@ const Splash = ({ title, description }: SplashProps) => {
       <img className={iconClass} alt="NiceNode logo" src={icon} />
       <div className={titleFont}>{title}</div>
       <div className={descriptionFont}>{description}</div>
-      <Button label="Get started" onClick={() => console.log('Get started')} />
+      <Button
+        label="Get started"
+        primary
+        onClick={() => console.log('Get started')}
+      />
     </div>
   );
 };
diff --git a/src/renderer/Generics/redesign/Stepper/Stepper.tsx b/src/renderer/Generics/redesign/Stepper/Stepper.tsx
index 0ea6d1d82..d02734ad8 100644
--- a/src/renderer/Generics/redesign/Stepper/Stepper.tsx
+++ b/src/renderer/Generics/redesign/Stepper/Stepper.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { Button } from '../Button/Button';
+import Button from '../Button/Button';
 import { bottomBar, previousButton, nextButton } from './stepper.css';
 
 export interface StepperProps {
   /**
-   * When a step changes ('prev' or 'next')
+   * When a step changes ('previous' or 'next')
    */
-  onChange?: (change: string) => void;
+  onChange: (change: 'next' | 'previous') => void;
   /**
-   * The current step component to show
+   * Optional: Renders above buttons
    */
   children?: React.ReactNode;
 }
@@ -19,10 +19,10 @@ const Stepper = ({ onChange, children }: StepperProps) => {
       {children}
       <div className={bottomBar}>
         <div className={previousButton}>
-          <Button label="Previous" />
+          <Button label="Previous" onClick={() => onChange('previous')} />
         </div>
         <div className={nextButton}>
-          <Button label="Next step" primary />
+          <Button label="Next step" primary onClick={() => onChange('next')} />
         </div>
       </div>
     </div>
diff --git a/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx b/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx
index 2fde3a4f1..ec8a8c541 100644
--- a/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx
+++ b/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx
@@ -10,7 +10,7 @@ import {
 import ExternalLink from '../../Generics/redesign/Link/ExternalLink';
 import SpecialSelect from '../../Generics/redesign/SpecialSelect/SpecialSelect';
 import electron from '../../electronGlobal';
-import { Button } from '../../Generics/redesign/Button/Button';
+import Button from '../../Generics/redesign/Button/Button';
 import Input from '../../Generics/redesign/Input/Input';
 import DropdownLink from '../../Generics/redesign/Link/DropdownLink';
 import Select from '../../Generics/redesign/Select/Select';
diff --git a/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx b/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx
new file mode 100644
index 000000000..2824aa268
--- /dev/null
+++ b/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx
@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  container,
+  descriptionFont,
+  sectionFont,
+  titleFont,
+} from './addNodeStepper.css';
+import ExternalLink from '../../Generics/redesign/Link/ExternalLink';
+import SpecialSelect from '../../Generics/redesign/SpecialSelect/SpecialSelect';
+import electron from '../../electronGlobal';
+import Button from '../../Generics/redesign/Button/Button';
+import Input from '../../Generics/redesign/Input/Input';
+import DropdownLink from '../../Generics/redesign/Link/DropdownLink';
+import Select from '../../Generics/redesign/Select/Select';
+
+export interface AddNodeStepperProps {
+  /**
+   * Listen to node config changes
+   */
+  onChange: (newValue: string) => void;
+}
+
+const AddNodeStepper = ({ onChange }: AddNodeStepperProps) => {
+  const { t } = useTranslation();
+  const [sIsOptionsOpen, setIsOptionsOpen] = useState<boolean>();
+
+  return (
+    <div className={container}>
+      <div className={titleFont}>{t('EthereumNode')}</div>
+      <div className={descriptionFont}>
+        <>{t('AddNodeStepperDescription')}</>
+      </div>
+      <ExternalLink
+        text={t('LearnMoreClientDiversity')}
+        url="https://ethereum.org/en/developers/docs/nodes-and-clients/client-diversity/"
+      />
+      <p className={sectionFont}>Recommended execution client</p>
+      <SpecialSelect onChange={(newEc) => console.log('val', newEc)} />
+      <p className={sectionFont}>Recommended consensus client</p>
+      <SpecialSelect onChange={(newcc) => console.log('val', newcc)} />
+      <p className={sectionFont}>Data location</p>
+      <DropdownLink
+        text={`${sIsOptionsOpen ? 'Hide' : 'Show'} advanced options`}
+        onClick={() => setIsOptionsOpen(!sIsOptionsOpen)}
+        isDown={!sIsOptionsOpen}
+      />
+      {sIsOptionsOpen && (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            width: '100%',
+          }}
+        >
+          <span style={{ fontWeight: 600 }}>Network</span>{' '}
+          <div
+            style={{ width: 300, display: 'inline-block', marginLeft: 'auto' }}
+          >
+            <Select onChange={console.log} />
+          </div>
+        </div>
+      )}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          padding: '0px',
+          gap: '4px',
+          width: '100%',
+        }}
+      >
+        <div style={{ flexGrow: 1 }}>
+          <Input disabled placeholder="files/" />
+        </div>
+        <Button
+          size="small"
+          label="Change..."
+          onClick={() => electron.openDialogForNodeDataDir('')}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AddNodeStepper;
diff --git a/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts b/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts
new file mode 100644
index 000000000..8b9c2aefc
--- /dev/null
+++ b/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts
@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../Generics/redesign/theme.css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: 16,
+});
+
+export const titleFont = style({
+  fontWeight: 500,
+  fontSize: 32,
+  lineHeight: '32px',
+  letterSpacing: '-0.01em',
+});
+
+export const descriptionFont = style({
+  fontWeight: 400,
+  fontSize: 13,
+  lineHeight: '18px',
+  color: vars.color.font70,
+});
+
+export const sectionFont = style({
+  fontWeight: 600,
+});
diff --git a/src/renderer/assets/sass/app.scss b/src/renderer/assets/sass/app.scss
index 6b10b96e6..572a9da5c 100644
--- a/src/renderer/assets/sass/app.scss
+++ b/src/renderer/assets/sass/app.scss
@@ -6,15 +6,12 @@
 @import 'core/_typography';
 
 // Components
-@import 'components/_button';
 @import 'components/_tag';
 @import 'components/_bubble';
 @import 'components/_toggle';
 @import 'components/_nodeIcon';
 @import 'components/_sidebarNodeItem';
 @import 'components/_sidebarLinkItem';
-@import 'components/_selectCard';
-@import 'components/_radioButtonBackground';
 
 // // Layout
 // @import "layout/all";
diff --git a/src/renderer/assets/sass/components/_button.scss b/src/renderer/assets/sass/components/_button.scss
deleted file mode 100644
index 3c96420dd..000000000
--- a/src/renderer/assets/sass/components/_button.scss
+++ /dev/null
@@ -1,175 +0,0 @@
-.storybook-button {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  border: 0px;
-  gap: 6px;
-
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-size: 13px;
-  line-height: 16px;
-}
-
-.storybook-button--primary .storybook-button-icon {
-  background-color: #ffffff;
-}
-
-.storybook-button--primary {
-  background: #6057f0;
-  color: #ffffff;
-}
-
-.storybook-button--primary.darkMode {
-  background: #766ef2;
-}
-
-.storybook-button--primary:hover:not([disabled]) {
-  background: rgba(96, 87, 240, 0.9);
-}
-
-.storybook-button--primary.darkMode:hover:not([disabled]) {
-  background: #766ef2e5;
-}
-
-.storybook-button--primary:active:not([disabled]) {
-  background: rgba(96, 87, 240, 0.85);
-}
-
-.storybook-button--primary.darkMode:active:not([disabled]) {
-  background: #766ef2d9;
-}
-
-.storybook-button--secondary {
-  color: rgba(0, 0, 2, 0.7);
-  background: rgba(0, 0, 2, 0.04);
-}
-
-.storybook-button--secondary.darkMode {
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.storybook-button--secondary .storybook-button-icon {
-  background-color: rgba(0, 0, 2, 0.7);
-}
-
-.storybook-button--secondary.darkMode {
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.storybook-button--secondary.darkMode .storybook-button-icon {
-  background-color: rgba(255, 255, 255, 0.85);
-}
-
-.storybook-button--secondary:hover:not([disabled]) {
-  background: rgba(0, 0, 2, 0.08);
-}
-
-.storybook-button--secondary.hover .storybook-button-icon {
-  background-color: rgba(0, 0, 2, 0.7);
-}
-
-.storybook-button--secondary.darkMode:hover:not([disabled]) {
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.storybook-button--secondary.darkMode:hover:not([disabled])
-  .storybook-button-icon {
-  background-color: rgba(255, 255, 255, 0.85);
-}
-
-.storybook-button--secondary:active:not([disabled]) {
-  background: rgba(0, 0, 2, 0.1);
-  color: rgba(0, 0, 2, 0.85);
-}
-
-.storybook-button--secondary:active:not([disabled]) .storybook-button-icon {
-  background-color: rgba(0, 0, 2, 0.85);
-}
-
-.storybook-button--secondary.darkMode:active:not([disabled]) {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.storybook-button--secondary.darkMode:active:not([disabled])
-  .storybook-button-icon {
-  background-color: rgba(255, 255, 255, 0.9);
-}
-
-.storybook-button:disabled {
-  color: rgba(0, 0, 2, 0.25);
-  background: rgba(0, 0, 2, 0.04);
-}
-
-.storybook-button:disabled .storybook-button-icon {
-  background: rgba(0, 0, 2, 0.25);
-}
-
-.storybook-button.darkMode:disabled {
-  color: rgba(255, 255, 255, 0.25);
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.storybook-button.darkMode:disabled .storybook-button-icon {
-  background: rgba(255, 255, 255, 0.25);
-}
-
-.storybook-button--small {
-  font-size: 13px;
-  padding: 6px 10px;
-}
-
-.storybook-button--small.icon {
-  padding: 6px;
-}
-
-.storybook-button--medium {
-  font-size: 13px;
-  padding: 8px 12px;
-}
-
-.storybook-button--medium.icon {
-  padding: 8px;
-}
-
-.storybook-button--large {
-  font-size: 13px;
-  padding: 10px 14px;
-}
-
-.storybook-button--large.icon {
-  padding: 10px;
-}
-
-.storybook-button-icon {
-  -webkit-mask-size: cover;
-  mask-size: cover;
-
-  width: 16px;
-  height: 16px;
-
-  flex: none;
-  flex-grow: 0;
-}
-
-.storybook-button-icon.icon-left {
-  order: 0;
-}
-
-.storybook-button-text.icon-left {
-  order: 1;
-}
-
-.storybook-button-icon.icon-right {
-  order: 1;
-}
-
-.storybook-button-text.icon-right {
-  order: 0;
-}
diff --git a/src/renderer/assets/sass/components/_radioButtonBackground.scss b/src/renderer/assets/sass/components/_radioButtonBackground.scss
deleted file mode 100644
index 078ffbac6..000000000
--- a/src/renderer/assets/sass/components/_radioButtonBackground.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-// TODO: Consolidate CSS
-.storybook-radio-button-background {
-  cursor: pointer;
-
-  input[type='radio'] {
-    opacity: 0;
-  }
-
-  .storybook-radio-button-background-contents {
-    position: relative;
-    display: flex;
-    /* padding: 5px 20px 5px 20px; */
-    box-sizing: border-box;
-    background: rgba(0, 0, 2, 0.04);
-    border-radius: 5px;
-
-    &.darkMode {
-      background: rgba(255, 255, 255, 0.04);
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.08);
-      }
-    }
-
-    &:hover {
-      background: rgba(0, 0, 2, 0.08);
-    }
-  }
-
-  input[type='radio']:checked ~ .storybook-radio-button-background-contents {
-    border-width: 5px;
-    background: rgba(115, 81, 235, 0.08);
-    box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.08);
-
-    &.darkMode {
-      background: rgba(130, 103, 239, 0.08);
-    }
-  }
-
-  input[type='radio']:checked
-    ~ .storybook-radio-button-background-contents::before {
-    content: '';
-    position: absolute;
-    width: -webkit-fill-available;
-    left: 0;
-    top: 0;
-    height: -webkit-fill-available;
-    border: 2px solid #7a64ee;
-    border-radius: 5px;
-  }
-}
diff --git a/src/renderer/assets/sass/components/_selectCard.scss b/src/renderer/assets/sass/components/_selectCard.scss
deleted file mode 100644
index 3950c62c6..000000000
--- a/src/renderer/assets/sass/components/_selectCard.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-// TODO: Consolidate CSS
-.storybook-select-card {
-  width: 516px;
-}
-
-.storybook-select-card-contents {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: 10px 12px;
-  gap: 12px;
-  width: 516px;
-  border-radius: 5px;
-
-  & > * {
-    &:first-child {
-      flex: none;
-      order: 0;
-      flex-grow: 0;
-    }
-    font-family: 'Inter';
-    font-style: normal;
-  }
-}
-
-.storybook-select-card-container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0px;
-  gap: 2px;
-
-  height: 100%;
-
-  justify-content: center;
-
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-}
-
-.storybook-select-card-title {
-  order: 0;
-  flex: none;
-  align-self: stretch;
-  flex-grow: 0;
-  font-weight: 600;
-  font-size: 13px;
-  line-height: 16px;
-  color: rgba(0, 0, 2, 0.85);
-}
-
-.darkMode {
-  .storybook-select-card-title {
-    color: rgba(255, 255, 255, 0.85);
-  }
-
-  .storybook-select-card-info,
-  .storybook-select-card-selection {
-    color: rgba(255, 255, 255, 0.5);
-  }
-
-  .storybook-select-card-icon .storybook-button-icon {
-    background: rgba(255, 255, 255, 0.7);
-  }
-}
-
-.storybook-select-card-info {
-  order: 1;
-  flex: none;
-  align-self: stretch;
-  flex-grow: 0;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 16px;
-  color: rgba(0, 0, 2, 0.7);
-}
-
-.storybook-select-card-type {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 100%;
-  justify-content: flex-end;
-}
-
-.storybook-select-card-selection {
-  display: none;
-  font-weight: 400;
-  font-size: 11px;
-  line-height: 14px;
-  color: rgba(0, 0, 2, 0.4);
-  height: 100%;
-  flex-direction: row;
-  width: 100%;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.storybook-select-card-icon {
-  margin-left: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-}
-
-.storybook-radio-button-background-contents:hover {
-  .storybook-select-card-type {
-    display: flex;
-    &.selection {
-      display: none;
-    }
-  }
-  .storybook-select-card-selection {
-    display: flex;
-  }
-}
-
-input[type='radio']:checked ~ .storybook-radio-button-background-contents {
-  .storybook-select-card-type {
-    display: flex;
-    &.selection {
-      display: none;
-    }
-  }
-  .storybook-select-card-selection {
-    display: flex;
-  }
-}
-
-.storybook-select-card-icon .storybook-button-icon {
-  background: rgba(0, 0, 2, 0.7);
-}
diff --git a/src/stories/AddEthereumNode.stories.tsx b/src/stories/AddEthereumNode.stories.tsx
deleted file mode 100644
index 2a01906fb..000000000
--- a/src/stories/AddEthereumNode.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import AddEthereumNode from '../renderer/Presentational/AddEthereumNode/AddEthereumNode';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Presentational/AddEthereumNode',
-  component: AddEthereumNode,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-  },
-} as ComponentMeta<typeof AddEthereumNode>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof AddEthereumNode> = (args) => <AddEthereumNode {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  onChange: (newValue) => console.log(newValue)
-};
diff --git a/src/stories/Bubble.stories.tsx b/src/stories/Bubble.stories.tsx
deleted file mode 100644
index 89aad4860..000000000
--- a/src/stories/Bubble.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Bubble } from '../renderer/Generics/redesign/Bubble';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Generic/Bubble',
-  component: Bubble,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Bubble>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Bubble> = (args) => <Bubble {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  count: 23,
-};
diff --git a/src/stories/Generic/Bubble.stories.tsx b/src/stories/Generic/Bubble.stories.tsx
new file mode 100644
index 000000000..0dbfad5ca
--- /dev/null
+++ b/src/stories/Generic/Bubble.stories.tsx
@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Bubble } from '../../renderer/Generics/redesign/Bubble';
+
+export default {
+  title: 'Generic/Bubble',
+  component: Bubble,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Bubble>;
+
+const Template: ComponentStory<typeof Bubble> = (args) => <Bubble {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  count: 23,
+};
diff --git a/src/stories/Button.stories.tsx b/src/stories/Generic/Button.stories.tsx
similarity index 73%
rename from src/stories/Button.stories.tsx
rename to src/stories/Generic/Button.stories.tsx
index 26d6567dd..3f588046f 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Generic/Button.stories.tsx
@@ -1,23 +1,19 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { Button } from '../renderer/Generics/redesign/Button/Button';
+import Button from '../../renderer/Generics/redesign/Button/Button';
 import { ReactComponent as SettingsIcon } from '../renderer/assets/images/icons/Settings.svg';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/Button',
   component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
 } as ComponentMeta<typeof Button>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const PrimarySmall = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 PrimarySmall.args = {
   primary: true,
   label: 'Button',
diff --git a/src/stories/Checklist.stories.tsx b/src/stories/Generic/Checklist.stories.tsx
similarity index 73%
rename from src/stories/Checklist.stories.tsx
rename to src/stories/Generic/Checklist.stories.tsx
index 1ce85191d..4b3d0affc 100644
--- a/src/stories/Checklist.stories.tsx
+++ b/src/stories/Generic/Checklist.stories.tsx
@@ -1,21 +1,18 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { Checklist } from '../renderer/Generics/redesign/Checklist/Checklist';
+import { Checklist } from '../../renderer/Generics/redesign/Checklist/Checklist';
+
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/Checklist',
   component: Checklist,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
   },
 } as ComponentMeta<typeof Checklist>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof Checklist> = (args) => <Checklist {...args} />;
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   title: 'Node requirements',
   items: [
diff --git a/src/stories/ExternalLink.stories.tsx b/src/stories/Generic/ExternalLink.stories.tsx
similarity index 50%
rename from src/stories/ExternalLink.stories.tsx
rename to src/stories/Generic/ExternalLink.stories.tsx
index 38daabd42..585d85978 100644
--- a/src/stories/ExternalLink.stories.tsx
+++ b/src/stories/Generic/ExternalLink.stories.tsx
@@ -1,19 +1,16 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import ExternalLink from '../renderer/Generics/redesign/Link/ExternalLink';
+import ExternalLink from '../../renderer/Generics/redesign/Link/ExternalLink';
+
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/ExternalLink',
   component: ExternalLink,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
 } as ComponentMeta<typeof ExternalLink>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof ExternalLink> = (args) => <ExternalLink {...args} />;
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   text: 'Docker Install Guide',
   url: 'https://docs.docker.com/desktop/#download-and-install',
diff --git a/src/stories/Input.stories.tsx b/src/stories/Generic/Input.stories.tsx
similarity index 51%
rename from src/stories/Input.stories.tsx
rename to src/stories/Generic/Input.stories.tsx
index fcee06f27..a2fd65202 100644
--- a/src/stories/Input.stories.tsx
+++ b/src/stories/Generic/Input.stories.tsx
@@ -1,18 +1,16 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import Input from '../renderer/Generics/redesign/Input/Input';
+import Input from '../../renderer/Generics/redesign/Input/Input';
+
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/Input',
   component: Input,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
 } as ComponentMeta<typeof Input>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof Input> = (args) => (
   <div style={{ width: 300 }}>
     <Input {...args} />
@@ -20,7 +18,6 @@ const Template: ComponentStory<typeof Input> = (args) => (
 );
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   placeholder: 'Test placeholder',
 };
diff --git a/src/stories/LineKeyValues.stories.tsx b/src/stories/Generic/LineKeyValues.stories.tsx
similarity index 66%
rename from src/stories/LineKeyValues.stories.tsx
rename to src/stories/Generic/LineKeyValues.stories.tsx
index 1384fc0db..7f4ba8320 100644
--- a/src/stories/LineKeyValues.stories.tsx
+++ b/src/stories/Generic/LineKeyValues.stories.tsx
@@ -1,21 +1,17 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import LabelValues from '../renderer/Generics/redesign/LabelValues/LabelValues';
+import LabelValues from '../../renderer/Generics/redesign/LabelValues/LabelValues';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/LabelValues',
   component: LabelValues,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
   },
 } as ComponentMeta<typeof LabelValues>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof LabelValues> = (args) => <LabelValues {...args} />;
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   title: 'Node requirements',
   items: [
diff --git a/src/stories/NodeIcon.stories.tsx b/src/stories/Generic/NodeIcon.stories.tsx
similarity index 64%
rename from src/stories/NodeIcon.stories.tsx
rename to src/stories/Generic/NodeIcon.stories.tsx
index 25eebe125..4af7a8b47 100644
--- a/src/stories/NodeIcon.stories.tsx
+++ b/src/stories/Generic/NodeIcon.stories.tsx
@@ -1,18 +1,15 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { NodeIcon } from '../renderer/Generics/redesign/NodeIcon';
+import { NodeIcon } from '../../renderer/Generics/redesign/NodeIcon';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/NodeIcon',
   component: NodeIcon,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
 } as ComponentMeta<typeof NodeIcon>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof NodeIcon> = (args) => (
   <NodeIcon {...args} />
 );
@@ -24,7 +21,6 @@ Default.args = {
 };
 
 export const Small = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Small.args = {
   iconId: 'ethereum',
   status: 'healthy',
diff --git a/src/stories/ProgressBar.stories.tsx b/src/stories/Generic/ProgressBar.stories.tsx
similarity index 84%
rename from src/stories/ProgressBar.stories.tsx
rename to src/stories/Generic/ProgressBar.stories.tsx
index 32991647e..30180e0fe 100644
--- a/src/stories/ProgressBar.stories.tsx
+++ b/src/stories/Generic/ProgressBar.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import ProgressBar from '../renderer/Generics/redesign/ProgressBar/ProgressBar';
+import ProgressBar from '../../renderer/Generics/redesign/ProgressBar/ProgressBar';
 
 export default {
   title: 'Generic/ProgressBar',
diff --git a/src/stories/Generic/Select.stories.tsx b/src/stories/Generic/Select.stories.tsx
new file mode 100644
index 000000000..9bea4efba
--- /dev/null
+++ b/src/stories/Generic/Select.stories.tsx
@@ -0,0 +1,14 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Select from '../../renderer/Generics/redesign/Select/Select';
+
+export default {
+  title: 'Generic/Select',
+  component: Select,
+} as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;
+
+export const Single = Template.bind({});
+Single.args = {
+};
diff --git a/src/stories/SelectCard.stories.tsx b/src/stories/Generic/SelectCard.stories.tsx
similarity index 74%
rename from src/stories/SelectCard.stories.tsx
rename to src/stories/Generic/SelectCard.stories.tsx
index 6ecd2c93e..457c3304c 100644
--- a/src/stories/SelectCard.stories.tsx
+++ b/src/stories/Generic/SelectCard.stories.tsx
@@ -1,14 +1,11 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { NodeIconId } from '../renderer/assets/images/nodeIcons';
+import { NodeIconId } from '../../renderer/assets/images/nodeIcons';
 
-import { SelectCard as OldSelectCard } from '../renderer/Generics/redesign/SelectCard';
-import SelectCard from '../renderer/Generics/redesign/SelectCard/SelectCard';
+import SelectCard from '../../renderer/Generics/redesign/SelectCard/SelectCard';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/SelectCard',
   component: SelectCard,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
@@ -70,13 +67,11 @@ const clientsCards = [
   { iconId: 'nimbus', title: 'Nimbus', info: 'Consensus Client' },
 ];
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const NetworksTemplate: ComponentStory<typeof SelectCard> = (args) => (
   <>
     {networksCards.map((obj) => {
-      const darkMode = args.darkMode;
       const { iconId, ...rest } = obj
-      return <OldSelectCard iconId={iconId as NodeIconId} {...rest} darkMode={darkMode} />;
+      return <SelectCard iconId={iconId as NodeIconId} {...rest} />;
     })}
   </>
 );
@@ -84,13 +79,11 @@ const NetworksTemplate: ComponentStory<typeof SelectCard> = (args) => (
 const ClientsTemplate: ComponentStory<typeof SelectCard> = (args) => (
   <>
     {clientsCards.map((obj) => {
-      const darkMode = args.darkMode;
       const { iconId, ...rest } = obj
-      return <SelectCard iconId={iconId as NodeIconId} {...rest} darkMode={darkMode} />;
+      return <SelectCard iconId={iconId as NodeIconId} {...rest} />;
     })}
   </>
 );
 
 export const Networks = NetworksTemplate.bind({});
 export const Clients = ClientsTemplate.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
diff --git a/src/stories/SidebarLinkItem.stories.tsx b/src/stories/Generic/SidebarLinkItem.stories.tsx
similarity index 61%
rename from src/stories/SidebarLinkItem.stories.tsx
rename to src/stories/Generic/SidebarLinkItem.stories.tsx
index 9c23a85c7..3eba13ae6 100644
--- a/src/stories/SidebarLinkItem.stories.tsx
+++ b/src/stories/Generic/SidebarLinkItem.stories.tsx
@@ -1,24 +1,20 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { SidebarLinkItem } from '../renderer/Generics/redesign/SidebarLinkItem';
+import { SidebarLinkItem } from '../../renderer/Generics/redesign/SidebarLinkItem';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/SidebarLinkItem',
   component: SidebarLinkItem,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
 } as ComponentMeta<typeof SidebarLinkItem>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof SidebarLinkItem> = (args) => (
   <SidebarLinkItem {...args} />
 );
 
 export const Notifications = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Notifications.args = {
   count: 4,
   label: 'Notifications',
diff --git a/src/stories/SidebarNodeItem.stories.tsx b/src/stories/Generic/SidebarNodeItem.stories.tsx
similarity index 53%
rename from src/stories/SidebarNodeItem.stories.tsx
rename to src/stories/Generic/SidebarNodeItem.stories.tsx
index 45e289b45..e5ed37054 100644
--- a/src/stories/SidebarNodeItem.stories.tsx
+++ b/src/stories/Generic/SidebarNodeItem.stories.tsx
@@ -1,24 +1,20 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { SidebarNodeItem } from '../renderer/Generics/redesign/SidebarNodeItem';
+import { SidebarNodeItem } from '../../renderer/Generics/redesign/SidebarNodeItem';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/SidebarNodeItem',
   component: SidebarNodeItem,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
 } as ComponentMeta<typeof SidebarNodeItem>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof SidebarNodeItem> = (args) => (
   <SidebarNodeItem {...args} />
 );
 
 export const Ethereum = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Ethereum.args = {
   iconId: 'ethereum',
   status: 'healthy',
diff --git a/src/stories/SpecialSelect.stories.tsx b/src/stories/Generic/SpecialSelect.stories.tsx
similarity index 79%
rename from src/stories/SpecialSelect.stories.tsx
rename to src/stories/Generic/SpecialSelect.stories.tsx
index d5380aa79..41a993bbe 100644
--- a/src/stories/SpecialSelect.stories.tsx
+++ b/src/stories/Generic/SpecialSelect.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import SpecialSelect from '../renderer/Generics/redesign/SpecialSelect/SpecialSelect';
+import SpecialSelect from '../../renderer/Generics/redesign/SpecialSelect/SpecialSelect';
 
 export default {
   title: 'Generic/SpecialSelect',
diff --git a/src/stories/Splash.stories.tsx b/src/stories/Generic/Splash.stories.tsx
similarity index 57%
rename from src/stories/Splash.stories.tsx
rename to src/stories/Generic/Splash.stories.tsx
index 387e1b26b..ef95ec5d0 100644
--- a/src/stories/Splash.stories.tsx
+++ b/src/stories/Generic/Splash.stories.tsx
@@ -1,19 +1,15 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import Splash from '../renderer/Generics/redesign/Splash/Splash';
+import Splash from '../../renderer/Generics/redesign/Splash/Splash';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Generic/SplashScreen',
   component: Splash,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
 } as ComponentMeta<typeof Splash>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof Splash> = (args) => <Splash {...args} />;
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   title: 'Welcome to NiceNode',
   description: 'Run a node how you want it — without commands and a terminal. NiceNode shows what the node is doing at a glance. Stats like how many peer nodes are connected and synching progress are built into the app.'
diff --git a/src/stories/Generic/Stepper.stories.tsx b/src/stories/Generic/Stepper.stories.tsx
new file mode 100644
index 000000000..de4e78195
--- /dev/null
+++ b/src/stories/Generic/Stepper.stories.tsx
@@ -0,0 +1,19 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Stepper from '../../renderer/Generics/redesign/Stepper/Stepper';
+import {Bubble} from '../../renderer/Generics/redesign/Bubble'
+
+export default {
+  title: 'Generic/Stepper',
+  component: Stepper,
+  argTypes: {
+  },
+} as ComponentMeta<typeof Stepper>;
+
+const Template: ComponentStory<typeof Stepper> = (args) => <Stepper {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  onChange: (change) => window.alert(change),
+  children: <Bubble count={110}/>
+}
diff --git a/src/stories/Generic/Tag.stories.tsx b/src/stories/Generic/Tag.stories.tsx
new file mode 100644
index 000000000..43db2c4f3
--- /dev/null
+++ b/src/stories/Generic/Tag.stories.tsx
@@ -0,0 +1,19 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Tag } from '../../renderer/Generics/redesign/Tag';
+
+export default {
+  title: 'Generic/Tag',
+  component: Tag,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Tag>;
+
+const Template: ComponentStory<typeof Tag> = (args) => <Tag {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  label: 'Minority Client',
+  type: 'pink',
+};
diff --git a/src/stories/Generic/Toggle.stories.tsx b/src/stories/Generic/Toggle.stories.tsx
new file mode 100644
index 000000000..645b4a3bf
--- /dev/null
+++ b/src/stories/Generic/Toggle.stories.tsx
@@ -0,0 +1,16 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Toggle } from '../../renderer/Generics/redesign/Toggle';
+
+export default {
+  title: 'Generic/Toggle',
+  component: Toggle,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Toggle>;
+
+const Template: ComponentStory<typeof Toggle> = (args) => <Toggle {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {};
diff --git a/src/stories/Presentational/AddEthereumNode.stories.tsx b/src/stories/Presentational/AddEthereumNode.stories.tsx
new file mode 100644
index 000000000..40f0397ee
--- /dev/null
+++ b/src/stories/Presentational/AddEthereumNode.stories.tsx
@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AddEthereumNode from '../../renderer/Presentational/AddEthereumNode/AddEthereumNode';
+
+export default {
+  title: 'Presentational/AddEthereumNode',
+  component: AddEthereumNode,
+  argTypes: {
+  },
+} as ComponentMeta<typeof AddEthereumNode>;
+
+const Template: ComponentStory<typeof AddEthereumNode> = (args) => <AddEthereumNode {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  onChange: (newValue) => console.log(newValue)
+};
diff --git a/src/stories/Presentational/AddNode.stories.tsx b/src/stories/Presentational/AddNode.stories.tsx
index 776ecf65c..46e525b18 100644
--- a/src/stories/Presentational/AddNode.stories.tsx
+++ b/src/stories/Presentational/AddNode.stories.tsx
@@ -2,20 +2,17 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import AddNode from '../../renderer/Presentational/AddNode/AddNode';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+
 export default {
   title: 'Presentational/AddNode',
   component: AddNode,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
   },
 } as ComponentMeta<typeof AddNode>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof AddNode> = (args) => <AddNode {...args} />;
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   onChange: (newValue) => console.log(newValue)
 };
diff --git a/src/stories/Presentational/AddNodeStepper.stories.tsx b/src/stories/Presentational/AddNodeStepper.stories.tsx
new file mode 100644
index 000000000..c86fe24e8
--- /dev/null
+++ b/src/stories/Presentational/AddNodeStepper.stories.tsx
@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AddNodeStepper from '../../renderer/Presentational/AddNodeStepper/AddNodeStepper';
+
+export default {
+  title: 'Presentational/AddNodeStepper',
+  component: AddNodeStepper,
+  argTypes: {
+  },
+} as ComponentMeta<typeof AddNodeStepper>;
+
+const Template: ComponentStory<typeof AddNodeStepper> = (args) => <AddNodeStepper {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  onChange: (newValue) => console.log(newValue)
+};
diff --git a/src/stories/Presentational/DockerInstallation.stories.tsx b/src/stories/Presentational/DockerInstallation.stories.tsx
index 4d10f6a7e..796737221 100644
--- a/src/stories/Presentational/DockerInstallation.stories.tsx
+++ b/src/stories/Presentational/DockerInstallation.stories.tsx
@@ -2,20 +2,17 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import DockerInstallation from '../../renderer/Presentational/DockerInstallation/DockerInstallation';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+
 export default {
   title: 'Presentational/DockerInstallation',
   component: DockerInstallation,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
   },
 } as ComponentMeta<typeof DockerInstallation>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof DockerInstallation> = (args) => <DockerInstallation {...args} />;
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   onChange: (newValue) => console.log(newValue)
 };
diff --git a/src/stories/NodeRequirements.stories.tsx b/src/stories/Presentational/NodeRequirements.stories.tsx
similarity index 96%
rename from src/stories/NodeRequirements.stories.tsx
rename to src/stories/Presentational/NodeRequirements.stories.tsx
index a42683d73..4b9afc633 100644
--- a/src/stories/NodeRequirements.stories.tsx
+++ b/src/stories/Presentational/NodeRequirements.stories.tsx
@@ -1,21 +1,17 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import NodeRequirements from '../renderer/Presentational/NodeRequirements/NodeRequirements';
+import NodeRequirements from '../../renderer/Presentational/NodeRequirements/NodeRequirements';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Presentational/NodeRequirements',
   component: NodeRequirements,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
   },
 } as ComponentMeta<typeof NodeRequirements>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template: ComponentStory<typeof NodeRequirements> = (args) => <NodeRequirements {...args} />;
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   nodeRequirements: {
     documentationUrl: 'https://www.nicenode.xyz/#requirements',
diff --git a/src/stories/RadioButtonBackground.stories.tsx b/src/stories/RadioButtonBackground.stories.tsx
deleted file mode 100644
index 06101abd4..000000000
--- a/src/stories/RadioButtonBackground.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { RadioButtonBackground } from '../renderer/Generics/redesign/RadioButtonBackground';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Generic/RadioButtonBackground',
-  component: RadioButtonBackground,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof RadioButtonBackground>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof RadioButtonBackground> = (args) => (
-  <RadioButtonBackground {...args} />
-);
-
-export const Ethereum = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Ethereum.args = {
-  children: <div> Test </div>,
-};
diff --git a/src/stories/Select.stories.tsx b/src/stories/Select.stories.tsx
deleted file mode 100644
index f253e98b6..000000000
--- a/src/stories/Select.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import Select from '../renderer/Generics/redesign/Select/Select';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Generic/Select',
-  component: Select,
-} as ComponentMeta<typeof Select>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;
-
-export const Single = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Single.args = {
-};
diff --git a/src/stories/Stepper.stories.tsx b/src/stories/Stepper.stories.tsx
deleted file mode 100644
index a72c8e56b..000000000
--- a/src/stories/Stepper.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import Stepper from '../renderer/Generics/redesign/Stepper/Stepper';
-import {Bubble} from '../renderer/Generics/redesign/Bubble'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Stepper',
-  component: Stepper,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-  },
-} as ComponentMeta<typeof Stepper>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Stepper> = (args) => <Stepper {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  onChange: (change) => window.alert(change),
-  children: <Bubble count={110}/>
-}
diff --git a/src/stories/Tag.stories.tsx b/src/stories/Tag.stories.tsx
deleted file mode 100644
index 745a8164d..000000000
--- a/src/stories/Tag.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Tag } from '../renderer/Generics/redesign/Tag';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Generic/Tag',
-  component: Tag,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Tag>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Tag> = (args) => <Tag {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  label: 'Minority Client',
-  type: 'pink',
-};
diff --git a/src/stories/Toggle.stories.tsx b/src/stories/Toggle.stories.tsx
deleted file mode 100644
index 153f91bf3..000000000
--- a/src/stories/Toggle.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Toggle } from '../renderer/Generics/redesign/Toggle';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Generic/Toggle',
-  component: Toggle,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Toggle>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Toggle> = (args) => <Toggle {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {};