diff --git a/README.md b/README.md
index 7c98c1a08626..74c4a678d5d2 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,5 @@
-
+# UI5 Web Components
-# UI5 Web Components
[](https://github.com/SAP/ui5-webcomponents/actions/workflows/test.yaml)
[](https://www.npmjs.com/package/@ui5/webcomponents)
[](https://api.reuse.software/info/github.com/SAP/ui5-webcomponents)
diff --git a/docs/Release Management.md b/docs/08-Releases.md
similarity index 98%
rename from docs/Release Management.md
rename to docs/08-Releases.md
index f420c248ce04..37016593ac3c 100644
--- a/docs/Release Management.md
+++ b/docs/08-Releases.md
@@ -1,4 +1,4 @@
-# Release Management
+# Releases
The article describes the release process management of UI5 Web Components.
diff --git a/docs/FAQ.md b/docs/09-FAQ.md
similarity index 98%
rename from docs/FAQ.md
rename to docs/09-FAQ.md
index 5dc07d590181..d13fb005f5f4 100644
--- a/docs/FAQ.md
+++ b/docs/09-FAQ.md
@@ -1,3 +1,7 @@
+---
+sidebar_label: FAQ
+---
+
# Frequently Asked Questions
**Q: How can I play with UI5 Web Components easily?**
diff --git a/docs/4-frameworks/01-React.md b/docs/4-frameworks/01-React.md
index a9a6472e878d..a19c3edcd595 100644
--- a/docs/4-frameworks/01-React.md
+++ b/docs/4-frameworks/01-React.md
@@ -1,4 +1,4 @@
-# Get Started with UI5 Web Components & React
+# UI5 Web Components & React
In this tutorial, you will learn how to add UI5 Web Components to your application. You can add UI5 Web Components both to new React applications and to already existing ones.
diff --git a/docs/4-frameworks/02-Angular.md b/docs/4-frameworks/02-Angular.md
index 62d5697d9177..e3974ff7e8a7 100644
--- a/docs/4-frameworks/02-Angular.md
+++ b/docs/4-frameworks/02-Angular.md
@@ -1,4 +1,4 @@
-# Get Started with UI5 Web Components & Angular
+# UI5 Web Components & Angular
In this tutorial, you will learn how to use `UI5 Web Components` in an Angular application. In the second part, we will introduce `UI5 Web Components for Angular` - wrapper library for UI5 Web Components, improving their integration with Angular.
diff --git a/docs/4-frameworks/03-Vue.md b/docs/4-frameworks/03-Vue.md
index d64c384b51d2..0287c4cf5b4e 100644
--- a/docs/4-frameworks/03-Vue.md
+++ b/docs/4-frameworks/03-Vue.md
@@ -1,4 +1,4 @@
-# Get Started with UI5 Web Components & Vue.js
+# UI5 Web Components & Vue.js
In this tutorial you will learn how to add UI5 Web Components to your application. You can add UI5 Web Components both to new Vue.js applications and to already existing ones.
diff --git a/docs/5-development/README.md b/docs/5-development/README.md
index 843900f06449..faa555c163f2 100644
--- a/docs/5-development/README.md
+++ b/docs/5-development/README.md
@@ -1,3 +1,3 @@
-# UI5 Web Components Custom Development
+# UI5 Web Components Development
This section explains how to create your own custom UI5 Web Components packages and develop your own UI5 Web Components.
diff --git a/docs/6-contributing/01-development-workflow.md b/docs/6-contributing/01-development-workflow.md
index 5f3d0fe8245b..88be2e9d55c3 100644
--- a/docs/6-contributing/01-development-workflow.md
+++ b/docs/6-contributing/01-development-workflow.md
@@ -1,6 +1,6 @@
-# General Development Workflow
-This document aims to explain the steps component developers would have to perform
-on daily basis from forking the project to merging a change, emphasising on the Github workflow.
+# Development Workflow
+
+This article explains the daily development workflow for component developers: from forking to merging changes.
## 1. Fork the UI5 Web Components repository.
diff --git a/docs/6-contributing/02-conventions-and-guidelines.md b/docs/6-contributing/02-conventions-and-guidelines.md
index 73aea73a00d7..d2fe50dd7cd3 100644
--- a/docs/6-contributing/02-conventions-and-guidelines.md
+++ b/docs/6-contributing/02-conventions-and-guidelines.md
@@ -1,4 +1,5 @@
-# Development Conventions and Guidelines
+# Conventions and Guidelines
+
## JavaScript Coding Guidelines
We enforce code style rules using [ESLint](https://eslint.org). Execute `npm run lint` to check your code for style issues.
You may also find an ESLint integration for your favorite IDE [here](https://eslint.org/docs/user-guide/integrations).
diff --git a/docs/DoD.md b/docs/6-contributing/03-DoD.md
similarity index 100%
rename from docs/DoD.md
rename to docs/6-contributing/03-DoD.md
diff --git a/docs/6-contributing/03-website.md b/docs/6-contributing/03-website.md
deleted file mode 100644
index 7567cbe0036f..000000000000
--- a/docs/6-contributing/03-website.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Running Website Locally
-
-The UI5 Web Components Website app is the entry point of the UI5 Web Components project.
-The app includes documentation, API reference and samples for all the available web components.
-
-The website can be run locally to test your changes and samples.
-In order to do so, you have to follow the steps below:
-
-In your terminal, run the following commands:
-
-```bash
-yarn
-yarn start:website
-```
-
-This will build all the necessary assets and will start local server on your machine
-and finally open the website in your browser.
diff --git a/docs/6-contributing/04-website-samples.md b/docs/6-contributing/04-website.md
similarity index 88%
rename from docs/6-contributing/04-website-samples.md
rename to docs/6-contributing/04-website.md
index a51925ec240d..6ca45ba21fd7 100644
--- a/docs/6-contributing/04-website-samples.md
+++ b/docs/6-contributing/04-website.md
@@ -1,3 +1,22 @@
+# Running the Website
+
+The UI5 Web Components Website app is the entry point of the UI5 Web Components project.
+The app includes documentation, API reference and samples for all the available web components.
+
+The website can be run locally to test your changes and samples.
+In order to do so, you have to follow the steps below:
+
+In your terminal, run the following commands:
+
+```bash
+yarn
+yarn start:website
+```
+
+This will build all the necessary assets and will start local server on your machine
+and finally open the website in your browser.
+
+
# Creating Website Samples
The website app is developed in its own package `packages/website`. Components features or states are demonstrated via samples meant for consumers.
diff --git a/docs/6-contributing/05-storybook.md b/docs/6-contributing/05-storybook.md
deleted file mode 100644
index 35505774567f..000000000000
--- a/docs/6-contributing/05-storybook.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Running Storybook Locally
-The project has storybook in additon to the website, suitable for internal testing, rather than end-users.
-
-The [deployed](https://sap.github.io/ui5-webcomponents/storybook) storybook can be run locally to test your changes and samples.
-In order to do so, you have to follow the steps below:
-
-## 1. Install dependencies.
-In the root directory run:
-```bash
-yarn
-```
-
-## 2. Start the storybook locally
-In your terminal, run the following commands:
-
-```bash
-yarn start:storybook
-```
-
-This will build all the necessary assets and will start local server on your machine. To access the storybook, visit: http://localhost:6006/
diff --git a/docs/6-contributing/06-storybook-samples.md b/docs/6-contributing/06-storybook-samples.md
deleted file mode 100644
index faf5175748a2..000000000000
--- a/docs/6-contributing/06-storybook-samples.md
+++ /dev/null
@@ -1,144 +0,0 @@
-# Creating Storybook Samples
-
-The UI5 Web Components Storybook app is a playground for testing and documenting the UI5 Web Components library.
-It allows developers to create stories for each UI component, capturing its rendered state in various scenarios,
-and to document all the potential states that a component can display.
-
-## Running the Storybook App Locally
-
-To run the [UI5 Web Components Storybook app](https://sap.github.io/ui5-webcomponents/) locally and test your changes and samples, follow the steps below:
-
-### 1. In the root folder of the project, run the following command:
-
-```bash
-yarn
-yarn start:storybook
-```
-
-Note: This are required only for running the Storybook app locally and not for general development.
-
-## What's a Story
-A story is a documentation of a UI component that captures its rendered state in various scenarios. Stories are useful for documenting all potential states that a component can display, and they allow developers to test UI components in isolation.
-
-UI components can be rendered in various scenarios, for example with different props or state, or in different layouts or contexts. Stories capture these scenarios and provide documentation of the component's behavior in each scenario.
-
-## Where to Write Stories
-Stories are written in the `_stories` folder of the playground package. For example, the stories for the `ui5-button` component are located in the `packages/playground/_stories/Button.stories.ts` file.
-
-## How to Write Stories
-The storybook app uses the [Storybook framework](https://storybook.js.org/docs/basics/introduction/) to render the stories. The stories are written in the [Component Story Format (CSF)](https://storybook.js.org/docs/web-components/api/csf) format.
-
-The args object is used to define the properties of the component, users can edit in the playground. Decorators and parameters can enhance the documentation of stories.
-
-Here is an example of a story for the ui5-button component:
-
-```ts
-import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-
-export default {
- title: "main/Button",
- component: "ui5-button",
-};
-
-export const Default = (args) => html`
- ${unsafeHTML(args.default)}
-`;
-
-export const Disabled = Template.bind({});
-Disabled.args = {
- disabled: true,
- default: "Disabled",
-};
-
-Disabled.decorators = [ ... ];
-Disabled.parameters = { ... };
-Disabled.storyName = 'So simple!'; // e.g. to rename the story in the sidebar, if not set the name of the const export is used
-```
-
-Every property defined in the `args` object of the named export will end up as input control in the playground that users can edit.
-
-### Story Decorators
-[Decorators](https://storybook.js.org/docs/web-components/writing-stories/decorators) are used to wrap stories with extra markup or context. This is useful if you want to include additional script.
-
-```ts
-export const Template = (args) => html`
-
- ${unsafeHTML(args.default)}
-
-`;
-
-BasicDialog.decorators = [
- (story) => html`
- Open Dialog
- ${story()}
-
- `,
-];
-```
-
-### Story Parameters
-[Parameters](https://storybook.js.org/docs/web-components/writing-stories/parameters) are static, metadata about a story, used to control the behavior of Storybook features and addons.
-
-They can be used both on the default export (Component Parameters) applicable to all stories of the component
-
-```ts
-export default {
- title: "main/CheckBox",
- component: "ui5-checkbox",
- parameters: {
- controls: { include: ["indeterminate", "checked"] }
- }
-};
-```
-
-or per every named export (Story Parameters) applicable to a specific story:
-
-```ts
-BasicCheckBox.parameters = {
- controls: {
- include: ["indeterminate", "checked"],
- },
-};
-```
-
-Or globally in the `.storybook/preview.ts` file.
-
-The above example includes only the `indeterminate`, `checked` properties in the playground for users to edit.
-
-
-## Documentation
-The documentation for each component is automatically produced using the `custom-elements.json` file. Additionally, there is an `argTypes.ts` file located beside each `.stories.ts` file. It is generated during build time and contains extra properties that enhance the documentation beyond what is available in the `custom-elements.json` file. This file should not be edited directly, as it can only be modified by the `packages/playground/build-scripts-storybook/samples-prepare.ts` script.
-
-### Docs Page
-Every story has a `docs` page in the storybook's sidebar. Usually, this page is generated automatically by storybook but it can be customized by adding a `docs` property to the story parameters.
-
-```ts
-export default {
- title: "Main/Button",
- component,
- argTypes,
-} as Meta