diff --git a/packages/docusaurus-playground/docs/Advanced/pages/pages.md b/packages/docusaurus-playground/docs/Advanced/pages/pages.md
new file mode 100644
index 0000000..300a090
--- /dev/null
+++ b/packages/docusaurus-playground/docs/Advanced/pages/pages.md
@@ -0,0 +1,10 @@
+---
+title: Subtitle
+sidebar_position: 4
+---
+
+## Hello World
+
+```python
+print("hello world!")
+```
diff --git a/packages/docusaurus-playground/docs/configuration.md b/packages/docusaurus-playground/docs/configuration.md
new file mode 100644
index 0000000..d4ccc38
--- /dev/null
+++ b/packages/docusaurus-playground/docs/configuration.md
@@ -0,0 +1,264 @@
+---
+title: Configuration
+sidebar_position: 2
+---
+
+# Configuration
+
+import TOCInline from '@theme/TOCInline';
+
+:::info
+
+Check the [**`docusaurus.config.js` API reference**](api/docusaurus.config.js.mdx) for an exhaustive list of options.
+
+:::
+
+Docusaurus has a unique take on configurations. We encourage you to congregate information about your site into one place. We guard the fields of this file and facilitate making this data object accessible across your site.
+
+Keeping a well-maintained `docusaurus.config.js` helps you, your collaborators, and your open source contributors to be able to focus on documentation while still being able to customize the site.
+
+## Syntax to declare `docusaurus.config.js` {#syntax-to-declare-docusaurus-config}
+
+The `docusaurus.config.js` file is run in Node.js and should export either:
+
+- a **config object**
+- a **function** that creates the config object
+
+:::info
+
+The `docusaurus.config.js` file only supports the [**CommonJS**](https://flaviocopes.com/commonjs/) module system:
+
+- **Required:** use `module.exports = /* your config*/` to export your Docusaurus config
+- **Optional:** use `require("lib")` to import Node.js packages
+- **Optional:** use `await import("lib")` (dynamic import) in an async function to import ESM-Only Node.js packages
+
+:::
+
+Node.js gives us the ability to declare our Docusaurus configuration in various **equivalent ways**, and all the following config examples lead to the exact same result:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  title: 'Docusaurus',
+  url: 'https://docusaurus.io',
+  // your site config ...
+}
+```
+
+```js title="docusaurus.config.js"
+const config = {
+  title: 'Docusaurus',
+  url: 'https://docusaurus.io',
+  // your site config ...
+}
+
+module.exports = config
+```
+
+```js title="docusaurus.config.js"
+module.exports = function configCreator() {
+  return {
+    title: 'Docusaurus',
+    url: 'https://docusaurus.io',
+    // your site config ...
+  }
+}
+```
+
+```js title="docusaurus.config.js"
+module.exports = async function createConfigAsync() {
+  return {
+    title: 'Docusaurus',
+    url: 'https://docusaurus.io',
+    // your site config ...
+  }
+}
+```
+
+:::tip Using ESM-only packages
+
+Using an async config creator can be useful to import ESM-only modules (notably most Remark plugins). It is possible to import such modules thanks to dynamic imports:
+
+```js title="docusaurus.config.js"
+module.exports = async function createConfigAsync() {
+  // Use a dynamic import instead of require('esm-lib')
+  // highlight-next-line
+  const lib = await import('lib')
+
+  return {
+    title: 'Docusaurus',
+    url: 'https://docusaurus.io',
+    // rest of your site config...
+  }
+}
+```
+
+:::
+
+## What goes into a `docusaurus.config.js`? {#what-goes-into-a-docusaurusconfigjs}
+
+You should not have to write your `docusaurus.config.js` from scratch even if you are developing your site. All templates come with a `docusaurus.config.js` that includes defaults for the common options.
+
+However, it can be helpful if you have a high-level understanding of how the configurations are designed and implemented.
+
+The high-level overview of Docusaurus configuration can be categorized into:
+
+<TOCInline toc={toc} minHeadingLevel={3} maxHeadingLevel={3} />
+
+### Site metadata {#site-metadata}
+
+Site metadata contains the essential global metadata such as `title`, `url`, `baseUrl`, and `favicon`.
+
+They are used in several places such as your site's title and headings, browser tab icon, social sharing (Facebook, Twitter) information or even to generate the correct path to serve your static files.
+
+### Deployment configurations {#deployment-configurations}
+
+Deployment configurations such as `projectName`, `organizationName`, and optionally `deploymentBranch` are used when you deploy your site with the `deploy` command.
+
+It is recommended to check the [deployment docs](deployment.mdx) for more information.
+
+### Theme, plugin, and preset configurations {#theme-plugin-and-preset-configurations}
+
+List the [themes](./using-plugins.mdx#using-themes), [plugins](./using-plugins.mdx), and [presets](./using-plugins.mdx#using-presets) for your site in the `themes`, `plugins`, and `presets` fields, respectively. These are typically npm packages:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  plugins: [
+    '@docusaurus/plugin-content-blog',
+    '@docusaurus/plugin-content-pages',
+  ],
+  themes: ['@docusaurus/theme-classic'],
+}
+```
+
+:::tip
+
+Docusaurus supports [**module shorthands**](./using-plugins.mdx#module-shorthands), allowing you to simplify the above configuration as:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  plugins: ['content-blog', 'content-pages'],
+  themes: ['classic'],
+}
+```
+
+:::
+
+They can also be loaded from local directories:
+
+```js title="docusaurus.config.js"
+const path = require('path')
+
+module.exports = {
+  // ...
+  themes: [path.resolve(__dirname, '/path/to/docusaurus-local-theme')],
+}
+```
+
+To specify options for a plugin or theme, replace the name of the plugin or theme in the config file with an array containing the name and an options object:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  plugins: [
+    [
+      'content-blog',
+      {
+        path: 'blog',
+        routeBasePath: 'blog',
+        include: ['*.md', '*.mdx'],
+        // ...
+      },
+    ],
+    'content-pages',
+  ],
+}
+```
+
+To specify options for a plugin or theme that is bundled in a preset, pass the options through the `presets` field. In this example, `docs` refers to `@docusaurus/plugin-content-docs` and `theme` refers to `@docusaurus/theme-classic`.
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+        },
+        theme: {
+          customCss: [require.resolve('./src/css/custom.css')],
+        },
+      },
+    ],
+  ],
+}
+```
+
+:::tip
+
+The `presets: [['classic', {...}]]` shorthand works as well.
+
+:::
+
+For further help configuring themes, plugins, and presets, see [Using Plugins](./using-plugins.mdx).
+
+### Custom configurations {#custom-configurations}
+
+Docusaurus guards `docusaurus.config.js` from unknown fields. To add custom fields, define them in `customFields`.
+
+Example:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  // highlight-start
+  customFields: {
+    image: '',
+    keywords: [],
+  },
+  // highlight-end
+  // ...
+}
+```
+
+## Accessing configuration from components {#accessing-configuration-from-components}
+
+Your configuration object will be made available to all the components of your site. And you may access them via React context as `siteConfig`.
+
+Basic example:
+
+```jsx
+import React from 'react'
+// highlight-next-line
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+
+const Hello = () => {
+  // highlight-start
+  const { siteConfig } = useDocusaurusContext()
+  // highlight-end
+  const { title, tagline } = siteConfig
+
+  return <div>{`${title} · ${tagline}`}</div>
+}
+```
+
+:::tip
+
+If you just want to use those fields on the client side, you could create your own JS files and import them as ES6 modules, there is no need to put them in `docusaurus.config.js`.
+
+:::
+
+## Customizing Babel Configuration {#customizing-babel-configuration}
+
+For new Docusaurus projects, we automatically generated a `babel.config.js` in the project root.
+
+```js title="babel.config.js"
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+}
+```
+
+Most of the time, this configuration will work just fine. If you want to customize your Babel configuration (e.g. to add support for Flow), you can directly edit this file. For your changes to take effect, you need to restart the Docusaurus dev server.
diff --git a/packages/docusaurus-playground/docs/getting-started.md b/packages/docusaurus-playground/docs/getting-started.md
new file mode 100644
index 0000000..72f67bf
--- /dev/null
+++ b/packages/docusaurus-playground/docs/getting-started.md
@@ -0,0 +1,27 @@
+---
+title: Getting Started
+sidebar_position: 3
+---
+
+# Tutorial Intro
+
+Let's discover **Docusaurus in less than 5 minutes**.
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+## Getting Started
+
+Get started by **creating a new site**.
+
+Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
diff --git a/packages/docusaurus-playground/docs/index.md b/packages/docusaurus-playground/docs/index.md
index 6e90035..1944abb 100644
--- a/packages/docusaurus-playground/docs/index.md
+++ b/packages/docusaurus-playground/docs/index.md
@@ -1,31 +1,8 @@
 ---
-title: Intro
+title: Introduction
 sidebar_position: 1
 ---
 
-# Tutorial Intro
-
-Let's discover **Docusaurus in less than 5 minutes**.
-
-```mermaid
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
-
-## Getting Started
-
-Get started by **creating a new site**.
-
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
-
-### What you'll need
-
-- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
 ## Generate a new site
 
 Generate a new Docusaurus site using the **classic template**.
diff --git a/packages/docusaurus-playground/docs/test/1.md b/packages/docusaurus-playground/docs/test/1.md
deleted file mode 100644
index 0107a0a..0000000
--- a/packages/docusaurus-playground/docs/test/1.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: 1
-sidebar_position: 1
----
-
-# 111
-
-```python
-print("hello world!")
-```
diff --git a/packages/docusaurus-playground/docs/test/2.md b/packages/docusaurus-playground/docs/test/2.md
deleted file mode 100644
index 9e9ec0c..0000000
--- a/packages/docusaurus-playground/docs/test/2.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: 2
-sidebar_position: 1
----
-
-# 222
-
-```python
-print("hello world!")
-```
diff --git a/packages/docusaurus-playground/docs/test/3/33.md b/packages/docusaurus-playground/docs/test/3/33.md
deleted file mode 100644
index 9fc7246..0000000
--- a/packages/docusaurus-playground/docs/test/3/33.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 333
-sidebar_position: 1
----
-
-# 333
diff --git a/packages/docusaurus-playground/src/theme/DocPage/Layout/index.js b/packages/docusaurus-playground/src/theme/DocPage/Layout/index.js
deleted file mode 100644
index cebbcda..0000000
--- a/packages/docusaurus-playground/src/theme/DocPage/Layout/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { useState } from 'react'
-import { useDocsSidebar } from '@docusaurus/theme-common/internal'
-import Layout from '@theme/Layout'
-import BackToTopButton from '@theme/BackToTopButton'
-import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar'
-import DocPageLayoutMain from '@theme/DocPage/Layout/Main'
-import styles from './styles.module.css'
-export default function DocPageLayout({ children }) {
-  const sidebar = useDocsSidebar()
-  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false)
-  return (
-    <Layout wrapperClassName={styles.docsWrapper}>
-      <BackToTopButton />
-      <div className={styles.docPage}>
-        {sidebar && (
-          <DocPageLayoutSidebar
-            sidebar={sidebar.items}
-            hiddenSidebarContainer={hiddenSidebarContainer}
-            setHiddenSidebarContainer={setHiddenSidebarContainer}
-          />
-        )}
-        <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
-          {children}
-        </DocPageLayoutMain>
-      </div>
-    </Layout>
-  )
-}
diff --git a/packages/docusaurus-playground/src/theme/DocPage/Layout/styles.module.css b/packages/docusaurus-playground/src/theme/DocPage/Layout/styles.module.css
deleted file mode 100644
index a0ec379..0000000
--- a/packages/docusaurus-playground/src/theme/DocPage/Layout/styles.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.docPage {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(24, 1fr);
-}
-
-.docsWrapper {
-  display: flex;
-  flex: 1 0 auto;
-}
diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/Advanced/pages/pages.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/Advanced/pages/pages.md
new file mode 100644
index 0000000..ac58641
--- /dev/null
+++ b/packages/docusaurus-playground/versioned_docs/version-1.1.0/Advanced/pages/pages.md
@@ -0,0 +1,10 @@
+---
+title: Pages
+sidebar_position: 4
+---
+
+## Hello World
+
+```python
+print("hello world!")
+```
diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/configuration.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/configuration.md
new file mode 100644
index 0000000..d4ccc38
--- /dev/null
+++ b/packages/docusaurus-playground/versioned_docs/version-1.1.0/configuration.md
@@ -0,0 +1,264 @@
+---
+title: Configuration
+sidebar_position: 2
+---
+
+# Configuration
+
+import TOCInline from '@theme/TOCInline';
+
+:::info
+
+Check the [**`docusaurus.config.js` API reference**](api/docusaurus.config.js.mdx) for an exhaustive list of options.
+
+:::
+
+Docusaurus has a unique take on configurations. We encourage you to congregate information about your site into one place. We guard the fields of this file and facilitate making this data object accessible across your site.
+
+Keeping a well-maintained `docusaurus.config.js` helps you, your collaborators, and your open source contributors to be able to focus on documentation while still being able to customize the site.
+
+## Syntax to declare `docusaurus.config.js` {#syntax-to-declare-docusaurus-config}
+
+The `docusaurus.config.js` file is run in Node.js and should export either:
+
+- a **config object**
+- a **function** that creates the config object
+
+:::info
+
+The `docusaurus.config.js` file only supports the [**CommonJS**](https://flaviocopes.com/commonjs/) module system:
+
+- **Required:** use `module.exports = /* your config*/` to export your Docusaurus config
+- **Optional:** use `require("lib")` to import Node.js packages
+- **Optional:** use `await import("lib")` (dynamic import) in an async function to import ESM-Only Node.js packages
+
+:::
+
+Node.js gives us the ability to declare our Docusaurus configuration in various **equivalent ways**, and all the following config examples lead to the exact same result:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  title: 'Docusaurus',
+  url: 'https://docusaurus.io',
+  // your site config ...
+}
+```
+
+```js title="docusaurus.config.js"
+const config = {
+  title: 'Docusaurus',
+  url: 'https://docusaurus.io',
+  // your site config ...
+}
+
+module.exports = config
+```
+
+```js title="docusaurus.config.js"
+module.exports = function configCreator() {
+  return {
+    title: 'Docusaurus',
+    url: 'https://docusaurus.io',
+    // your site config ...
+  }
+}
+```
+
+```js title="docusaurus.config.js"
+module.exports = async function createConfigAsync() {
+  return {
+    title: 'Docusaurus',
+    url: 'https://docusaurus.io',
+    // your site config ...
+  }
+}
+```
+
+:::tip Using ESM-only packages
+
+Using an async config creator can be useful to import ESM-only modules (notably most Remark plugins). It is possible to import such modules thanks to dynamic imports:
+
+```js title="docusaurus.config.js"
+module.exports = async function createConfigAsync() {
+  // Use a dynamic import instead of require('esm-lib')
+  // highlight-next-line
+  const lib = await import('lib')
+
+  return {
+    title: 'Docusaurus',
+    url: 'https://docusaurus.io',
+    // rest of your site config...
+  }
+}
+```
+
+:::
+
+## What goes into a `docusaurus.config.js`? {#what-goes-into-a-docusaurusconfigjs}
+
+You should not have to write your `docusaurus.config.js` from scratch even if you are developing your site. All templates come with a `docusaurus.config.js` that includes defaults for the common options.
+
+However, it can be helpful if you have a high-level understanding of how the configurations are designed and implemented.
+
+The high-level overview of Docusaurus configuration can be categorized into:
+
+<TOCInline toc={toc} minHeadingLevel={3} maxHeadingLevel={3} />
+
+### Site metadata {#site-metadata}
+
+Site metadata contains the essential global metadata such as `title`, `url`, `baseUrl`, and `favicon`.
+
+They are used in several places such as your site's title and headings, browser tab icon, social sharing (Facebook, Twitter) information or even to generate the correct path to serve your static files.
+
+### Deployment configurations {#deployment-configurations}
+
+Deployment configurations such as `projectName`, `organizationName`, and optionally `deploymentBranch` are used when you deploy your site with the `deploy` command.
+
+It is recommended to check the [deployment docs](deployment.mdx) for more information.
+
+### Theme, plugin, and preset configurations {#theme-plugin-and-preset-configurations}
+
+List the [themes](./using-plugins.mdx#using-themes), [plugins](./using-plugins.mdx), and [presets](./using-plugins.mdx#using-presets) for your site in the `themes`, `plugins`, and `presets` fields, respectively. These are typically npm packages:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  plugins: [
+    '@docusaurus/plugin-content-blog',
+    '@docusaurus/plugin-content-pages',
+  ],
+  themes: ['@docusaurus/theme-classic'],
+}
+```
+
+:::tip
+
+Docusaurus supports [**module shorthands**](./using-plugins.mdx#module-shorthands), allowing you to simplify the above configuration as:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  plugins: ['content-blog', 'content-pages'],
+  themes: ['classic'],
+}
+```
+
+:::
+
+They can also be loaded from local directories:
+
+```js title="docusaurus.config.js"
+const path = require('path')
+
+module.exports = {
+  // ...
+  themes: [path.resolve(__dirname, '/path/to/docusaurus-local-theme')],
+}
+```
+
+To specify options for a plugin or theme, replace the name of the plugin or theme in the config file with an array containing the name and an options object:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  plugins: [
+    [
+      'content-blog',
+      {
+        path: 'blog',
+        routeBasePath: 'blog',
+        include: ['*.md', '*.mdx'],
+        // ...
+      },
+    ],
+    'content-pages',
+  ],
+}
+```
+
+To specify options for a plugin or theme that is bundled in a preset, pass the options through the `presets` field. In this example, `docs` refers to `@docusaurus/plugin-content-docs` and `theme` refers to `@docusaurus/theme-classic`.
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+        },
+        theme: {
+          customCss: [require.resolve('./src/css/custom.css')],
+        },
+      },
+    ],
+  ],
+}
+```
+
+:::tip
+
+The `presets: [['classic', {...}]]` shorthand works as well.
+
+:::
+
+For further help configuring themes, plugins, and presets, see [Using Plugins](./using-plugins.mdx).
+
+### Custom configurations {#custom-configurations}
+
+Docusaurus guards `docusaurus.config.js` from unknown fields. To add custom fields, define them in `customFields`.
+
+Example:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  // ...
+  // highlight-start
+  customFields: {
+    image: '',
+    keywords: [],
+  },
+  // highlight-end
+  // ...
+}
+```
+
+## Accessing configuration from components {#accessing-configuration-from-components}
+
+Your configuration object will be made available to all the components of your site. And you may access them via React context as `siteConfig`.
+
+Basic example:
+
+```jsx
+import React from 'react'
+// highlight-next-line
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+
+const Hello = () => {
+  // highlight-start
+  const { siteConfig } = useDocusaurusContext()
+  // highlight-end
+  const { title, tagline } = siteConfig
+
+  return <div>{`${title} · ${tagline}`}</div>
+}
+```
+
+:::tip
+
+If you just want to use those fields on the client side, you could create your own JS files and import them as ES6 modules, there is no need to put them in `docusaurus.config.js`.
+
+:::
+
+## Customizing Babel Configuration {#customizing-babel-configuration}
+
+For new Docusaurus projects, we automatically generated a `babel.config.js` in the project root.
+
+```js title="babel.config.js"
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+}
+```
+
+Most of the time, this configuration will work just fine. If you want to customize your Babel configuration (e.g. to add support for Flow), you can directly edit this file. For your changes to take effect, you need to restart the Docusaurus dev server.
diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/getting-started.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/getting-started.md
new file mode 100644
index 0000000..72f67bf
--- /dev/null
+++ b/packages/docusaurus-playground/versioned_docs/version-1.1.0/getting-started.md
@@ -0,0 +1,27 @@
+---
+title: Getting Started
+sidebar_position: 3
+---
+
+# Tutorial Intro
+
+Let's discover **Docusaurus in less than 5 minutes**.
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+## Getting Started
+
+Get started by **creating a new site**.
+
+Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/index.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/index.md
index e08e8fb..5a6d368 100644
--- a/packages/docusaurus-playground/versioned_docs/version-1.1.0/index.md
+++ b/packages/docusaurus-playground/versioned_docs/version-1.1.0/index.md
@@ -1,32 +1,9 @@
 ---
-id: version-1.1.0-intro
-title: Intro
+id: version-1.1.0-Introduction
+title: Introduction
 sidebar_position: 1
 ---
 
-# Tutorial Intro
-
-Let's discover **Docusaurus in less than 5 minutes**.
-
-```mermaid
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
-
-## Getting Started
-
-Get started by **creating a new site**.
-
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
-
-### What you'll need
-
-- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
 ## Generate a new site
 
 Generate a new Docusaurus site using the **classic template**.
diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/1.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/1.md
deleted file mode 100644
index 0107a0a..0000000
--- a/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/1.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: 1
-sidebar_position: 1
----
-
-# 111
-
-```python
-print("hello world!")
-```
diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/2.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/2.md
deleted file mode 100644
index 9e9ec0c..0000000
--- a/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/2.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: 2
-sidebar_position: 1
----
-
-# 222
-
-```python
-print("hello world!")
-```
diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/3/33.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/3/33.md
deleted file mode 100644
index 4b98357..0000000
--- a/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/3/33.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: 333
-sidebar_position: 1
----
-
-# 333
-
-```python
-print("hello world!")
-```
diff --git a/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx
index 2233815..1cdf591 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx
@@ -37,6 +37,10 @@ export const GridItem = styled.div`
     grid-column: span 8;
   }
 
+  &.w-10 {
+    grid-column: span 10;
+  }
+
   &.w-12 {
     grid-column: span 12;
   }
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index 05a165d..d0424fd 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -43,7 +43,7 @@
   --ifm-font-color-base-inverse: var(--ifm-color-black);
 
   /*Code block*/
-  --docusaurus-highlighted-code-line-bg: var(--ifm-color-gray-100);
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.15);
 
   /*components*/
   --ifm-hero-background-color: var(--ifm-color-black);
@@ -163,7 +163,7 @@
 
   --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
   --ifm-menu-link-sublist-icon-filter: none;
-  --ifm-navbar-height: 3.75rem;
+  --ifm-navbar-height: 80px;
   --ifm-navbar-item-padding-horizontal: 0.75rem;
   --ifm-navbar-item-padding-vertical: 0.25rem;
   --ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal);
@@ -334,11 +334,31 @@ small {
   color: rgb(var(--lsd-text-secondary));
 }
 
-// temporary style fix for the logo
+.navbar {
+  padding-block: 24px;
+  padding-inline: 0;
+  height: 80px;
+}
+
+.row {
+  position: relative;
+}
+
+// TODO temporary style fix for the logo
 .navbar__logo img {
   filter: invert(1);
 }
 
+.theme-doc-version-banner * {
+  color: #fff;
+  text-decoration-color: #fff !important;
+}
+
+.theme-doc-version-banner:hover * {
+  color: #fff;
+  text-decoration-color: #fff !important;
+}
+
 @media (max-width: 576px) {
   :root {
     --ifm-global-spacing: 0.5rem;
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx
index e5fb9b2..bd9e9cf 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx
@@ -11,10 +11,11 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop'
 import DocItemContent from '@theme/DocItem/Content'
 import DocBreadcrumbs from '@theme/DocBreadcrumbs'
 import styles from './styles.module.css'
+
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
  */
-function useDocTOC() {
+export function useDocTOC() {
   const { frontMatter, toc } = useDoc()
   const windowSize = useWindowSize()
   const hidden = frontMatter.hide_table_of_contents
@@ -24,6 +25,7 @@ function useDocTOC() {
     canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
       <DocItemTOCDesktop />
     ) : undefined
+
   return {
     hidden,
     mobile,
@@ -33,9 +35,10 @@ function useDocTOC() {
 
 export default function DocItemLayout({ children }) {
   const docTOC = useDocTOC()
+
   return (
-    <div className="row">
-      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+    <div className={clsx('row', styles.docItemGrid)}>
+      <div className={clsx(!docTOC.hidden && styles.docItemCol)}>
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
           <article>
@@ -48,7 +51,10 @@ export default function DocItemLayout({ children }) {
           <DocItemPaginator />
         </div>
       </div>
-      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+      <div className={styles.gap1} />
+      {docTOC.desktop && (
+        <div className={clsx(styles.toc)}>{docTOC.desktop}</div>
+      )}
     </div>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css
index d5aaec1..0430342 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css
@@ -3,8 +3,26 @@
   margin-top: 0;
 }
 
+.docItemCol {
+  grid-column: span 10;
+}
+
 @media (min-width: 997px) {
-  .docItemCol {
+  /* .docItemCol {
     max-width: 75% !important;
-  }
+  } */
+}
+
+.docItemGrid {
+  display: grid;
+  grid-template-columns: repeat(14, 1fr);
+  gap: 16px;
+}
+
+.toc {
+  grid-column: span 3;
+}
+
+.gap1 {
+  grid-column: span 1;
 }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/index.js b/packages/logos-docusaurus-theme/src/client/theme/DocItem/index.tsx
similarity index 99%
rename from packages/logos-docusaurus-theme/src/client/theme/DocItem/index.js
rename to packages/logos-docusaurus-theme/src/client/theme/DocItem/index.tsx
index e92734f..4966ac4 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/index.js
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/index.tsx
@@ -3,9 +3,11 @@ import { HtmlClassNameProvider } from '@docusaurus/theme-common'
 import { DocProvider } from '@docusaurus/theme-common/internal'
 import DocItemMetadata from '@theme/DocItem/Metadata'
 import DocItemLayout from '@theme/DocItem/Layout'
+
 export default function DocItem(props) {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`
   const MDXComponent = props.content
+
   return (
     <DocProvider content={props.content}>
       <HtmlClassNameProvider className={docHtmlClassName}>
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css
index db64aad..7b579cc 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css
@@ -1,16 +1,17 @@
 .docMainContainer {
   display: flex;
   width: 100%;
-  grid-column: span 17 !important;
-  margin-left: 70px; /* temporary solution */
+  grid-column: span 14;
 }
 
 .docItemWrapper {
   width: 100%;
+  padding-top: 16px !important;
+  padding-bottom: 80px !important;
 }
 
 @media (min-width: 997px) {
-  .docMainContainer {
+  /* .docMainContainer {
     max-width: calc(100% - var(--doc-sidebar-width));
   }
 
@@ -22,5 +23,5 @@
     max-width: calc(
       var(--ifm-container-width) + var(--doc-sidebar-width)
     ) !important;
-  }
+  } */
 }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css
index 32c97fd..557c9b5 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/styles.module.css
@@ -8,13 +8,13 @@
 }
 
 .sidebarGrid {
-  grid-column: span 6;
+  grid-column: span 3;
 }
 
 @media (min-width: 997px) {
   .docSidebarContainer {
     display: block;
-    width: var(--doc-sidebar-width);
+    width: 100%;
     margin-top: calc(-1 * var(--ifm-navbar-height));
     will-change: width;
     transition: width var(--ifm-transition-fast) ease;
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx
index b04f996..ede7f32 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx
@@ -14,6 +14,7 @@ export default function DocPageLayout({ children }) {
     <Layout wrapperClassName={styles.docsWrapper}>
       <BackToTopButton />
       <Grid>
+        <GridItem className="w-3" />
         {sidebar && (
           <DocPageLayoutSidebar
             sidebar={sidebar.items}
@@ -21,9 +22,11 @@ export default function DocPageLayout({ children }) {
             setHiddenSidebarContainer={setHiddenSidebarContainer}
           />
         )}
+        <GridItem className="w-1" />
         <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
           {children}
         </DocPageLayoutMain>
+        <GridItem className="w-3" />
       </Grid>
     </Layout>
   )
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/Content/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/Content/styles.module.css
index 0c43a4e..2219db9 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/Content/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/Content/styles.module.css
@@ -1,11 +1,12 @@
 @media (min-width: 997px) {
   .menu {
     flex-grow: 1;
-    padding: 0.5rem;
+    /* padding: 0.5rem; */
+    padding-top: 16px;
   }
   @supports (scrollbar-gutter: stable) {
     .menu {
-      padding: 0.5rem 0 0.5rem 0.5rem;
+      /* padding: 0.5rem 0 0.5rem 0.5rem; */
       scrollbar-gutter: stable;
     }
   }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css
index c5d5e50..a8fc5ff 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css
@@ -4,7 +4,7 @@
     flex-direction: column;
     height: 100%;
     padding-top: var(--ifm-navbar-height);
-    width: var(--doc-sidebar-width);
+    /* width: var(--doc-sidebar-width); */
   }
 
   .sidebarWithHideableNavbar {
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
index 9c23d30..ccab8bb 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
@@ -42,17 +42,6 @@ ${JSON.stringify(item, null, 2)}`,
   )
 }
 
-function NavbarContentLayout({ left, right }) {
-  return (
-    <Grid className="navbar__inner">
-      <GridItem className={clsx('navbar__items', 'w-7')}>{left}</GridItem>
-      <GridItem className={clsx('navbar__items navbar__items--right', 'w-17')}>
-        {right}
-      </GridItem>
-    </Grid>
-  )
-}
-
 export default function NavbarContent() {
   const mobileSidebar = useNavbarMobileSidebar()
   const items = useNavbarItems()
@@ -60,28 +49,25 @@ export default function NavbarContent() {
   const searchBarItem = items.find((item) => item.type === 'search')
 
   return (
-    <NavbarContentLayout
-      left={
-        // TODO stop hardcoding items?
-        <>
-          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
-          <NavbarLogo />
-          <NavbarItems items={leftItems} />
-        </>
-      }
-      right={
-        // TODO stop hardcoding items?
-        // Ask the user to add the respective navbar items => more flexible
-        <>
-          <NavbarItems items={rightItems} />
-          <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {!searchBarItem && (
-            <NavbarSearch>
-              <SearchBar />
-            </NavbarSearch>
-          )}
-        </>
-      }
-    />
+    <Grid className="navbar__inner">
+      {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+      <GridItem className="w-1">
+        <NavbarLogo />
+      </GridItem>
+      <GridItem className="w-6" />
+      <GridItem className="w-10">
+        <NavbarItems items={leftItems} />
+      </GridItem>
+      <GridItem className="w-1" />
+      <GridItem className={clsx('w-6', styles.rightSection)}>
+        <NavbarItems items={rightItems} />
+        <NavbarColorModeToggle className={styles.colorModeToggle} />
+        {!searchBarItem && (
+          <NavbarSearch>
+            <SearchBar />
+          </NavbarSearch>
+        )}
+      </GridItem>
+    </Grid>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/styles.module.css
index 4c9471e..1b5cd10 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/styles.module.css
@@ -6,3 +6,10 @@ Hide color mode toggle in small viewports
     display: none;
   }
 }
+
+.rightSection {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Root.tsx b/packages/logos-docusaurus-theme/src/client/theme/Root.tsx
index cd9445c..c0ec8fe 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/Root.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/Root.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import { ThemeProvider, defaultThemes } from '@acid-info/lsd-react'
+import styles from './style.module.css'
 
 export default function Root({ children }) {
-  return <ThemeProvider theme={defaultThemes.dark}>{children}</ThemeProvider>
+  return (
+    <ThemeProvider theme={defaultThemes.dark}>
+      <div className={styles.root}>{children}</div>
+    </ThemeProvider>
+  )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/style.module.css b/packages/logos-docusaurus-theme/src/client/theme/style.module.css
new file mode 100644
index 0000000..2470ba0
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/style.module.css
@@ -0,0 +1,3 @@
+.root {
+  padding-inline: 32px;
+}