diff --git a/.storybook/main.ts b/.storybook/main.ts
index 28f0f002..d59901ba 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -10,6 +10,10 @@ const config: StorybookConfig = {
       titlePrefix: "Styling",
       directory: "../packages/tailwind-formio"
     },
+    {
+      titlePrefix: "Atoms",
+      directory: "../packages/react-formio/src/atoms"
+    },
     {
       titlePrefix: "Molecules",
       directory: "../packages/react-formio/src/molecules"
diff --git a/package.json b/package.json
index 9cfea7c9..3ed5bc29 100644
--- a/package.json
+++ b/package.json
@@ -7,12 +7,12 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/TypedProject/tsed-formio.git"
+    "url": "https://github.com/tsedio/tsed-formio.git"
   },
   "bugs": {
-    "url": "https://github.com/TypedProject/tsed-formio/issues"
+    "url": "https://github.com/tsedio/tsed-formio/issues"
   },
-  "homepage": "https://github.com/TypedProject/tsed-formio",
+  "homepage": "https://github.com/tsedio/tsed-formio",
   "scripts": {
     "configure": "monorepo ci configure",
     "test": "lerna run test --stream",
diff --git a/packages/react-formio-container/package.json b/packages/react-formio-container/package.json
index 57185c4f..41c14f30 100644
--- a/packages/react-formio-container/package.json
+++ b/packages/react-formio-container/package.json
@@ -97,5 +97,6 @@
     "tooltip.js": {
       "optional": false
     }
-  }
+  },
+  "dependencies": {}
 }
diff --git a/packages/react-formio-stores/src/stores/auth/auth.reducers.ts b/packages/react-formio-stores/src/stores/auth/auth.reducers.ts
index 40f33310..afe27b42 100644
--- a/packages/react-formio-stores/src/stores/auth/auth.reducers.ts
+++ b/packages/react-formio-stores/src/stores/auth/auth.reducers.ts
@@ -1,4 +1,4 @@
-import type { FormType, RoleType, SubmissionType } from "@tsed/react-formio";
+import { FormType, JSON, RoleType, SubmissionType } from "@tsed/react-formio";
 import { createReducer } from "@tsed/redux-utils";
 
 import {
@@ -14,7 +14,7 @@ import {
 } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 
-export interface AuthState<User = any> {
+export interface AuthState<User extends { [key: string]: JSON } = any> {
   init: boolean;
   isActive: boolean;
   user: null | SubmissionType<User>;
diff --git a/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx b/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx
index 604fa7d3..1448b2f8 100644
--- a/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx
+++ b/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx
@@ -1,7 +1,7 @@
 import "./ChoicesSelect";
 
 import { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import { fn } from "@storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";
@@ -95,24 +95,6 @@ export const Usage: Story = {
     value: "option-1",
     options,
     onChange: fn()
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    const select = canvas.getByTestId("select_name");
-
-    await expect(select).toBeInTheDocument();
-    await expect(select).toHaveValue("option-1");
-
-    await userEvent.selectOptions(select, "option-2");
-
-    await expect(select).toHaveValue("option-2");
-    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
-
-    const label = canvas.getByTestId("form-group-name");
-
-    await expect(label).toBeInTheDocument();
-    await expect(label).toHaveTextContent("Label");
   }
 };
 
@@ -125,19 +107,6 @@ export const WithPlaceholder: Story = {
     placeholder: "Select an option",
     options,
     onChange: fn()
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    const select = canvas.getByTestId("select_name");
-
-    await expect(select).toBeInTheDocument();
-    await expect(select).toHaveValue("");
-
-    await userEvent.selectOptions(select, "option-2");
-
-    await expect(select).toHaveValue("option-2");
-    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
   }
 };
 /**
@@ -150,19 +119,6 @@ export const WithPlaceholderAndRequired: Story = {
     options,
     required: true,
     onChange: fn()
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    const select = canvas.getByTestId("select_name");
-
-    await expect(select).toBeInTheDocument();
-    await expect(select).toHaveValue("");
-
-    await userEvent.selectOptions(select, "option-2");
-
-    await expect(select).toHaveValue("option-2");
-    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
   }
 };
 /**
diff --git a/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx b/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx
index 9e889dc2..d16a4dd4 100644
--- a/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx
+++ b/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx
@@ -17,8 +17,8 @@ export function HTMLSelect({ name, id = name, size, value, multiple, onChange, o
 
   return (
     <select
-      {...(props as any)}
       data-testid={`select_${name}`}
+      {...(props as any)}
       className={cx("form-control", size && `form-control-${size}`)}
       name={name}
       id={id}
diff --git a/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx b/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
index f30eb08f..8607c137 100644
--- a/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
+++ b/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { Pagination } from "./Pagination";
+import { Pagination } from "./all";
 
 const args: any = {
   pageSizes: [10, 25, 50, 100],
diff --git a/packages/react-formio/src/molecules/pagination/all.ts b/packages/react-formio/src/molecules/pagination/all.ts
index 581f1f01..d6542de0 100644
--- a/packages/react-formio/src/molecules/pagination/all.ts
+++ b/packages/react-formio/src/molecules/pagination/all.ts
@@ -1,2 +1,3 @@
+import "../forms/select/all.ts";
 export * from "./Pagination";
 export * from "./PaginationButton";
diff --git a/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx b/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx
index ecdf5c58..739ae73d 100644
--- a/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx
+++ b/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx
@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import { act, fireEvent, render, screen } from "@testing-library/react";
 
 import { DefaultColumnFilter } from "./DefaultColumnFilter";
diff --git a/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx b/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx
index 5a1d0c08..65dce764 100644
--- a/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx
+++ b/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx
@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import { render, screen } from "@testing-library/react";
 
 import { SelectColumnFilter } from "./SelectColumnFilter";
diff --git a/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx b/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx
index 6ae7a379..cb2ef69c 100755
--- a/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx
@@ -1,5 +1,6 @@
 import type { CSSProperties } from "react";
 
+import { registerComponent } from "../../../registries/components";
 import { useFormBuilder, UseFormBuilderProps } from "./useFormBuilder";
 
 export function FormBuilder({
@@ -23,3 +24,5 @@ export function FormBuilder({
     </div>
   );
 }
+
+registerComponent("FormBuilder", FormBuilder);
diff --git a/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx b/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
index e6c158e1..6296e117 100644
--- a/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
@@ -1,13 +1,43 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import { FormEdit } from "./FormEdit";
+import { FormEdit, FormParameters } from "./all";
 import { defaultDisplayChoices } from "./FormParameters";
-
+console.log(FormParameters);
 /**
+ * Form Edit component to edit form schema using the form builder.
+ *
+ * ## Usage
  *
  * ```tsx
+ * import {FormEdit} from "@tsed/react-formio/organisms/form/builder/all";
+ *
+ * or
+ *
+ * // register needed components
+ * import "@tsed/react-formio/atoms/icon/Icon";
+ * import "@tsed/react-formio/molecules/button/Button";
+ * import "@tsed/react-formio/molecules/forms/input-text/InputText";
+ * import "@tsed/react-formio/molecules/forms/select/Select";
+ * import "@tsed/react-formio/molecules/forms/select/components/HtmlSelect";
+ * import "@tsed/react-formio/molecules/forms/input-tags/InputTags";
+ * import "@tsed/react-formio/organisms/form/builder/FormParameters";
+ * import "@tsed/react-formio/organisms/form/builder/FormBuilder";
+ * import "@tsed/react-formio/organisms/form/builder/FormEditCtas";
+ *
+ * // use FormEdit component
  * import {FormEdit} from "@tsed/react-formio/organisms/form/builder/FormEdit";
  * ```
+ *
+ * ## Override FormEdit
+ *
+ * This component is registered with the name `FormEdit` and can be overridden with the following code:
+ *
+ * ```ts
+ * registerComponent("FormEdit", MyFormEditComponent);
+ * registerComponent("FormEditCtas", MyFormEditCtasComponent);
+ * registerComponent("FormBuilder", MyFormBuilderComponent);
+ * registerComponent("FormParameters", MyFormParametersComponent);
+ * ```
  */
 export default {
   title: "form/builder/FormEdit",
diff --git a/packages/react-formio/src/organisms/form/builder/FormEdit.tsx b/packages/react-formio/src/organisms/form/builder/FormEdit.tsx
index c9fba411..945dcc56 100644
--- a/packages/react-formio/src/organisms/form/builder/FormEdit.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEdit.tsx
@@ -1,7 +1,8 @@
 import type { FormOptions } from "../../../interfaces";
-import { FormBuilder } from "./FormBuilder";
-import { FormEditCTAs } from "./FormEditCtas";
-import { FormParameters } from "./FormParameters";
+import { getComponent } from "../../../registries/components";
+import { FormBuilder as DefaultFormBuilder } from "./FormBuilder";
+import { FormEditCTAs as DefaultFormEditCTAs } from "./FormEditCtas";
+import { FormParameters as DefaultFormParameters } from "./FormParameters";
 import { FormBuilderEvents } from "./useFormBuilder";
 import { useFormEdit, UseFormEditHookProps } from "./useFormEdit";
 
@@ -28,7 +29,10 @@ export function FormEdit({
   });
 
   const { options = {} } = props;
-
+  const FormParameters = getComponent<typeof DefaultFormParameters>("FormParameters");
+  const FormBuilder = getComponent<typeof DefaultFormBuilder>("FormBuilder");
+  const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>("FormEditCTAs");
+  console.log(FormParameters, FormBuilder, FormEditCTAs);
   return (
     <div className='form-edit-container'>
       <div className='form-edit'>
diff --git a/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx b/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx
index 3a74ed38..a2650421 100644
--- a/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx
@@ -1,8 +1,10 @@
 import { ReactElement } from "react";
 
+import { Icon as DefaultIcon } from "../../../atoms/icon/Icon";
 import { useTooltip } from "../../../hooks/useTooltip";
 import type { FormOptions } from "../../../interfaces";
-import { iconClass } from "../../../utils/iconClass";
+import { Button as DefaultButton } from "../../../molecules/button/Button";
+import { getComponent, registerComponent } from "../../../registries/components";
 
 export interface FormEditCTAsProps extends Record<string, unknown> {
   saveText?: string;
@@ -55,40 +57,41 @@ export function FormEditCTAs({
     title: t("Reset all changes")
   });
 
+  const Button = getComponent<typeof DefaultButton>("Button");
+  const Icon = getComponent<typeof DefaultIcon>("Icon");
+
   return (
     <div className={"form-edit__actions"}>
       <div>
-        <button
-          className={`btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`}
-          disabled={disabled}
-          onClick={() => !disabled && onSubmit && onSubmit()}
-        >
-          <i className={`mr-1 ${iconClass(options.iconset, "save")}`} />
+        <Button variant='primary' className='btn-save' disabled={disabled} onClick={() => onSubmit?.()}>
+          <Icon name='save' iconset={options.iconset} />
           {saveText}
-        </button>
+        </Button>
 
         <div>
-          <button className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`} onClick={() => onUndo && onUndo()} ref={undoTooltipRef}>
-            <i className={iconClass(options.iconset, "undo")} />
-          </button>
+          <Button variant='light' className='btn-undo' disabled={!hasUndo} onClick={() => onUndo?.()} ref={undoTooltipRef}>
+            <Icon name='undo' iconset={options.iconset} />
+          </Button>
 
-          <button className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`} onClick={() => onRedo && onRedo()} ref={redoTooltipRef}>
-            <i className={iconClass(options.iconset, "redo")} />
-          </button>
+          <Button variant='light' className='btn-redo' disabled={!hasRedo} onClick={() => onRedo?.()} ref={redoTooltipRef}>
+            <Icon name='redo' iconset={options.iconset} />
+          </Button>
         </div>
 
         <div>
           {onCopy && (
-            <button className='btn btn-light' onClick={() => onCopy()} ref={copyTooltipRef!}>
-              <i className={iconClass(options.iconset, "copy")} />
-            </button>
+            <Button variant='light' className='btn-copy' onClick={() => onCopy()} ref={copyTooltipRef}>
+              <Icon name='copy' iconset={options.iconset} />
+            </Button>
           )}
 
-          <button className={`btn btn-light btn-reset`} onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
-            <i className={iconClass(options.iconset, "reset")} />
-          </button>
+          <Button variant='light' className='btn-reset' onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
+            <Icon name='reset' iconset={options.iconset} />
+          </Button>
         </div>
       </div>
     </div>
   );
 }
+
+registerComponent("FormEditCTAs", FormEditCTAs);
diff --git a/packages/react-formio/src/organisms/form/builder/FormParameters.tsx b/packages/react-formio/src/organisms/form/builder/FormParameters.tsx
index f8a9aa45..f6b5d318 100644
--- a/packages/react-formio/src/organisms/form/builder/FormParameters.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormParameters.tsx
@@ -2,8 +2,9 @@ import { ReactElement } from "react";
 
 import type { FormType } from "../../../interfaces";
 import { InputTags } from "../../../molecules/forms/input-tags/InputTags";
-import { InputText } from "../../../molecules/forms/input-text/InputText";
-import { Select } from "../../../molecules/forms/select/Select";
+import { InputText as DefaultInputText } from "../../../molecules/forms/input-text/InputText";
+import { Select as DefaultSelect } from "../../../molecules/forms/select/Select";
+import { getComponent, registerComponent } from "../../../registries/components";
 
 export const defaultDisplayChoices = [
   { label: "Form", value: "form" },
@@ -34,6 +35,9 @@ export function FormParameters({
 }: FormParametersProps): ReactElement {
   const hasTypeChoices = typeChoices && typeChoices.length > 1;
 
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const Select = getComponent<typeof DefaultSelect>("Select");
+
   return (
     <div className={`form-edit__settings ${className}`}>
       <div>
@@ -43,7 +47,7 @@ export function FormParameters({
           name={"title"}
           required={true}
           value={form.title}
-          disabled={!!readonly["title"]}
+          disabled={readonly["title"]}
           onChange={onChange}
         />
       </div>
@@ -53,7 +57,7 @@ export function FormParameters({
           placeholder='Enter the form machine name'
           name={"name"}
           required={true}
-          disabled={!!readonly["name"]}
+          disabled={readonly["name"]}
           value={form.name}
           onChange={onChange}
         />
@@ -72,7 +76,7 @@ export function FormParameters({
           }
           required={true}
           value={form.path}
-          disabled={!!readonly["path"]}
+          disabled={readonly["path"]}
           style={{ textTransform: "lowercase", width: "120px" }}
           onChange={onChange}
         />
@@ -81,15 +85,15 @@ export function FormParameters({
         <Select
           label={"Display as"}
           name={"display"}
-          disabled={!!readonly["display"]}
+          disabled={readonly["display"]}
           value={form.display}
-          choices={displayChoices}
+          options={displayChoices}
           onChange={onChange}
         />
       </div>
       {hasTypeChoices && (
         <div>
-          <Select label={"Type"} name={"type"} value={form.type} choices={typeChoices} onChange={onChange} />
+          <Select label={"Type"} name={"type"} value={form.type} options={typeChoices} onChange={onChange} />
         </div>
       )}
       {enableTags && (
@@ -100,3 +104,5 @@ export function FormParameters({
     </div>
   );
 }
+
+registerComponent("FormParameters", FormParameters);
diff --git a/packages/react-formio/src/organisms/form/builder/all.ts b/packages/react-formio/src/organisms/form/builder/all.ts
new file mode 100644
index 00000000..24156e99
--- /dev/null
+++ b/packages/react-formio/src/organisms/form/builder/all.ts
@@ -0,0 +1,13 @@
+import "../../../atoms/icon/Icon";
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/Select";
+import "../../../molecules/forms/select/components/HtmlSelect";
+import "../../../molecules/forms/input-tags/InputTags";
+
+export * from "./FormBuilder";
+export * from "./FormEdit";
+export * from "./FormEditCtas";
+export * from "./FormParameters";
+export * from "./useFormBuilder";
+export * from "./useFormEdit";
diff --git a/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx b/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx
index 4d35e88d..d7ff9aa1 100644
--- a/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx
@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
diff --git a/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx b/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
index 51186ca4..ae415b2c 100644
--- a/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
 
diff --git a/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx b/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx
index 57ffb034..ef14d842 100644
--- a/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx
@@ -37,7 +37,7 @@ export function ActionsTable({
           data-testid={"action-table-select"}
           name={"actions"}
           value={currentAction}
-          choices={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
+          options={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
           onChange={(name: string, action: string) => setAction(action)}
         />
         <div className={"pl-3"}>
diff --git a/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx b/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
index c686fb43..bf4fe5fd 100644
--- a/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
@@ -1,3 +1,8 @@
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/all";
+import "../../../molecules/pagination/all";
+
 import tailwind from "@tsed/tailwind-formio";
 
 import { FormsTable } from "./FormsTable";
diff --git a/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx b/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
index 66bb9de7..be719cf9 100644
--- a/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
@@ -1,3 +1,8 @@
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/all";
+import "../../../molecules/pagination/all";
+
 import { useState } from "react";
 
 import { mapPagination } from "../../../utils/mapPagination";
diff --git a/packages/redux-utils/package.json b/packages/redux-utils/package.json
index 772290cd..7a9e950e 100644
--- a/packages/redux-utils/package.json
+++ b/packages/redux-utils/package.json
@@ -27,5 +27,6 @@
   "peerDependencies": {
     "react": "^18.3.1",
     "redux": "^4.0.5"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/packages/tailwind-formio/package.json b/packages/tailwind-formio/package.json
index 80af637f..8b81c29e 100644
--- a/packages/tailwind-formio/package.json
+++ b/packages/tailwind-formio/package.json
@@ -49,5 +49,7 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "dependencies": {},
+  "peerDependencies": {}
 }
diff --git a/stories/Getting-started.mdx b/stories/Getting-started.mdx
index 6a478002..963c83d8 100644
--- a/stories/Getting-started.mdx
+++ b/stories/Getting-started.mdx
@@ -1,73 +1,52 @@
 import {Canvas, Meta} from '@storybook/blocks'
 import * as FormBuilderStories from '../packages/react-formio/src/organisms/form/builder/FormBuilder.stories'
+import {StoryBanner} from './home/StoryBanner.jsx'
+
+<Meta title="Getting started"/>
+
 
-<Meta title="Getting started" />
-
-<div className="flex items-center justify-center pb-5">
-  <a href="https://tsed.io" target="_blank"><img className="overflow-hidden block"
-                                                 src="https://tsed.io/tsed-og.png" width="200" alt="Ts.ED logo"/></a>
-</div>
-
-<div className="text-center pb-5">
-  <h1>Ts.ED - React Formio</h1>
-
-  <div className="flex items-center justify-center gap-3">
-    <a href="https://github.com/tsedio/tsed-formio/actions/workflows/build.yml"><img
-      src="https://github.com/tsedio/tsed-formio/actions/workflows/build.yml/badge.svg" alt="Build & Release"/></a>
-    <a href="https://github.com/semantic-release/semantic-release"><img
-      src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg"
-      alt="semantic-release"/></a>
-    <a href="https://github.com/prettier/prettier"><img
-      src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"
-      alt="code style: prettier"/></a>
-    <a href="https://opencollective.com/tsed"><img src="https://opencollective.com/tsed/tiers/badge.svg" alt="backers"/></a>
-  </div>
-</div>
-
-<div className="text-center pb-5">
-  <a href="https://tsed.io/">Website</a>
-  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://tsed.io/tutorials/prisma.html">Tutorial</a>
-  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://api.tsed.io/rest/slack/tsedio/tsed">Slack</a>
-  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://twitter.com/TsED_io">Twitter</a>
-</div>
-
-<hr/>
-
-A [React](http://facebook.github.io/react/) library for rendering out forms based on the [Form.io](https://www.form.io)
-platform.
-
-This module is based on the original [react-formio](https://github.com/formio/react-formio) and add extra features
-listed above.
 
-See our [storybook](https://formio.tsed.io/) to see all available components.
+<StoryBanner />
+
+> This module is based on the original [react-formio](https://github.com/formio/react-formio) and add extra features
+listed above.
 
 ## Features
 
 Many components are provided to build your own backoffice based on Formio.js API:
 
-- [ActionsTable](/story/organisms-table-actions-actionstable--sandbox),
-- [FormAccess](/story/organisms-form-access-formaccess--sandbox),
-- [FormAction](/story/organisms-form-action-formaction--sandbox),
-- [Form](/docs/documentation-form--docs),
-- [FormBuilder](/docs/documentation-formbuilder--docs),
-- [FormEdit](/docs/documentation-formedit--docs),
-- [FormsTable](/docs/documentation-formstable--docs),
-- [InputTags](/story/reactformio-inputtags--sandbox),
-- [InputText](/story/reactformio-inputtext--sandbox),
-- [Pagination](/story/reactformio-pagination--sandbox),
-- [Select](/story/reactformio-select--sandbox),
-- [SubmissionsTable](/docs/documentation-submissionstable--docs).
-- [Table](/story/reactformio-table--sandbox),
+- [ActionsTable](?path=/docs/organisms-table-actions-actionstable--docs),
+- [FormAccess](?path=/docs/organisms-form-access-formaccess--docs),
+- [FormAction](?path=/docs/organisms-form-action-formaction--docs),
+- [Form](?path=/docs/organisms-form-form--docs),
+- [FormBuilder](?path=/docs/organisms-form-builder-formbuilder--docs),
+- [FormEdit](?path=/docs/organisms-form-builder-formedit--docs),
+- [FormsTable](?path=/docs/organisms-table-forms-formstable--docs),
+- [InputTags](?path=/docs/molecules-forms-inputtags--docs),
+- [InputText](?path=/docs/molecules-forms-inputtext--docs),
+- [Pagination](?path=/docs/molecules-pagination--docs),
+- Select: [Choicejs](?path=/docs/molecules-forms-select-choicejs--docs), [HTML5](?path=/docs/molecules-forms-select-html5--docs) or [ReactSelect](?path=/docs/molecules-forms-select-react--docs),
+- [SubmissionsTable](?path=/docs/organisms-table-submissions-submissionstable--docs).
+- [Table](?path=/docs/molecules-table--docs),
 - Predefined Reducers for Actions, Action, Form, Forms, Submission, Submissions, etc...,
 - TypeScript support.
 - Tailwind support.
 
+## Install
+
+`@tsed/react-formio` can be used on the server, or bundled for the client using an
+npm-compatible packaging system such as [Vite](https://vite.dev/), [webpack](http://webpack.github.io/) or [Rollup](https://rollupjs.org/).
+
+
+```sh
+npm install @tsed/react-formio react-table --save
+npm install formiojs choices.js --save // Install formiojs since it is a peerDependency
+```
+
+
 ## Migrate to v2
 
-If you use redux actions with v2, you have to install `@tsed/redux-formio-stores` and remplace your imports:
+If you use redux actions with v2, you have to install `@tsed/redux-formio-stores` and replace your imports:
 
 ```diff
 - import { defaultFormioReducer, formsReducer } from "@tsed/react-formio";
@@ -87,22 +66,11 @@ Example:
 + import { Form } from "@tsed/react-formio/organisms/form/Form";
 ```
 
-## Install
-
-`@tsed/react-formio` can be used on the server, or bundled for the client using an
-npm-compatible packaging system such as [Browserify](http://browserify.org/) or
-[webpack](http://webpack.github.io/).
-
-```
-npm install @tsed/react-formio react-table --save
-npm install formiojs choices.js --save // Install formiojs since it is a peerDependency
-```
-
 ## Usage
 
 ```tsx
 import React from "react";
-import { FormBuilder } from "@tsed/react-formio";
+import { FormBuilder } from "@tsed/react-formio/organisms/form/builder/FormBuilder";
 
 function App() {
   return (
@@ -115,7 +83,41 @@ function App() {
 export default App;
 ```
 
-<Canvas of={FormBuilderStories.WebForm} />
+<Canvas of={FormBuilderStories.WebForm}/>
+
+## Registering react components
+
+You can register your own components to be used within the `@tsed/react-formio` library. This is useful if you want to
+customize `FormEdit` or `Table` components.
+
+For example FormEdit component use the followings components:
+
+```ts
+import "@tsed/react-formio/atoms/icon/Icon";
+import "@tsed/react-formio/molecules/button/Button";
+import "@tsed/react-formio/molecules/forms/input-text/InputText";
+import "@tsed/react-formio/molecules/forms/select/Select";
+import "@tsed/react-formio/molecules/forms/select/components/HtmlSelect";
+import "@tsed/react-formio/molecules/forms/input-tags/InputTags";
+import "@tsed/react-formio/organisms/form/builder/FormParameters";
+import "@tsed/react-formio/organisms/form/builder/FormBuilder";
+import "@tsed/react-formio/organisms/form/builder/FormEditCtas";
+```
+
+You can replace for example replace the default React Button component provided by the library by your own Button:
+
+```tsx
+import {registerComponent} from "@tsed/react-formio/registries/components";
+import type {ButtonProps} from "@tsed/react-formio/molecules/button/Button";
+
+registerComponent("button", (props: ButtonProps) => {
+  return <button {...props}>{props.label}</button>;
+});
+```
+A large part of the provided component from the library can be replaced by your own component.
+
+> Note: Override Button react component doesn't affect the button design and implementation used by formio.js.
+> To styling the original button component formio, you have to redefine the `.btn` class in your CSS.
 
 ## Contributors
 
@@ -140,7 +142,7 @@ website. [[Become a sponsor](https://opencollective.com/tsed#sponsor)]
 
 The MIT License (MIT)
 
-Copyright (c) 2016 - 2021 Romain Lenzotti
+Copyright (c) 2016 - Today Romain Lenzotti
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
diff --git a/stories/home/StoryBanner.jsx b/stories/home/StoryBanner.jsx
new file mode 100644
index 00000000..3dfd8ffe
--- /dev/null
+++ b/stories/home/StoryBanner.jsx
@@ -0,0 +1,53 @@
+export function StoryBanner() {
+  return (
+    <div>
+      <div className='flex items-center justify-center gap-3'>
+        <a href='https://tsed.io' target='_blank' rel='noreferrer'>
+          <img className='overflow-hidden block' src='https://tsed.io/tsed-og.png' width='200' alt='Ts.ED logo' />
+        </a>
+        <a href='https://form.io' target='_blank' rel='noreferrer'>
+          <img src='https://portal.form.io/template/images/formio-logo-with-slogan.png' width='200' alt='Form.io logo' />
+        </a>
+      </div>
+
+      <div className={"text-center pb-5 text-primary font-bold"}>@tsed/react-formio</div>
+
+      <div className='flex items-center justify-center pb-5 mb-5'>
+        <div style={{ maxWidth: "400px" }} className='text-center font-bold text-gray-900 dark:text-white'>
+          <div style={{ fontSize: "20px" }}>A React library for rendering out forms based on the Form.io platform.</div>
+        </div>
+      </div>
+
+      <hr />
+
+      <div className='text-center pb-5'>
+        <a href='https://tsed.io/'>Ts.ED</a>
+        <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+        <a href='https://tsed.io/tutorials/prisma.html'>Tutorial</a>
+        <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+        <a href='https://api.tsed.io/rest/slack/tsedio/tsed'>Slack</a>
+        <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+        <a href='https://twitter.com/TsED_io'>Twitter</a>
+      </div>
+
+      <hr />
+
+      <div className='text-center pb-5'>
+        <div className='flex items-center justify-center gap-3'>
+          <a href='https://github.com/tsedio/tsed-formio/actions/workflows/build.yml'>
+            <img src='https://github.com/tsedio/tsed-formio/actions/workflows/build.yml/badge.svg' alt='Build & Release' />
+          </a>
+          <a href='https://github.com/semantic-release/semantic-release'>
+            <img src='https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg' alt='semantic-release' />
+          </a>
+          <a href='https://github.com/prettier/prettier'>
+            <img src='https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square' alt='code style: prettier' />
+          </a>
+          <a href='https://opencollective.com/tsed'>
+            <img src='https://opencollective.com/tsed/tiers/badge.svg' alt='backers' />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/tools/typescript/package.json b/tools/typescript/package.json
index 4fc3396b..1fc61fbc 100644
--- a/tools/typescript/package.json
+++ b/tools/typescript/package.json
@@ -7,5 +7,8 @@
   "main": "index.js",
   "exports": {
     "./tsconfig.web.json": "./tsconfig.web.json"
-  }
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "peerDependencies": {}
 }
diff --git a/tools/vitest/package.json b/tools/vitest/package.json
index bd3cf39a..27af42f5 100644
--- a/tools/vitest/package.json
+++ b/tools/vitest/package.json
@@ -14,5 +14,7 @@
   },
   "scripts": {
     "generate": "node index.js"
-  }
+  },
+  "dependencies": {},
+  "peerDependencies": {}
 }