diff --git a/packages/docs/docs/about.md b/packages/docs/docs/about.md
index 6f1fd50c..d830bfac 100644
--- a/packages/docs/docs/about.md
+++ b/packages/docs/docs/about.md
@@ -44,4 +44,4 @@ We specialize in React because it's our strength and passion. But we're excited
Ready to make your website GDPR-compliant? Our Quick Start guide is your first step towards a safer, privacy-focused online presence. In just a few minutes, you can set the foundation for a more secure and respectful user experience. Let's get started!
-[Start your journey with Consent Manager](getting-started.md)
\ No newline at end of file
+[Start your journey with Consent Manager](./quick-start.md)
\ No newline at end of file
diff --git a/packages/docs/docs/getting-started.md b/packages/docs/docs/getting-started.md
deleted file mode 100644
index ea7543f6..00000000
--- a/packages/docs/docs/getting-started.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-id: getting-started
-title: Getting Started
----
-
-## Installation
-
-```sh
-npm install @consent-manager/core use-persisted-state
-```
-
-```sh
-yarn add @consent-manager/core use-persisted-state
-```
-
-## Embedding into your application
-
-Lets start off with a very basic implementation of a React app.
-
-```js
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
-
-ReactDOM.render(, document.getElementById('root'))
-```
-
-### Preparing the context
-
-Wrap your application with the [<ConsentManager/> provider](provider.md).
-
-```diff
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-+ import { ConsentManager } from '@consent-manager/core'
-+ import createPersistedState from 'use-persisted-state'
-
-
-+ const useConsentStateStore = createPersistedState('consent-manager-docs')
-
-+ const Wrapper = () => {
-+ const storage = useConsentStateStore()
-+ const config = {
-+ integrations: [
-+ {
-+ id: 'youtube',
-+ title: 'YouTube',
-+ description:
-+ 'Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.',
-+ },
-+ ],
-+ }
-+
-+
-+ ,
-+ }
-
-ReactDOM.render(
--
-+
- document.getElementById('root')
-);
-```
-
-## Wrapping components that need users concent for proper functionallity
-
-Lets take this very simple component as example, it renders a YouTube video.
-
-```js
-import React from 'react'
-import ReactYouTube from 'react-youtube'
-
-const YouTube = ({ id, ...props }) => {
- return
-}
-
-export default YouTube
-```
-
-As YouTube loves tracking, injects cookies and does more, we need our users consent to render the video.
-
-### Shielding the component
-
-To ensure no data can be sent anywhere, we wrap our component with the PrivacyShield component.
-
-```diff
-import React from 'react'
-import ReactYouTube from 'react-youtube'
-+ import { PrivacyShield } from '@consent-manager/core'
-
-
-const YouTube = ({ id, ...props }) => {
- return (
-+
-
-+
- )
-}
-
-export default YouTube
-```
-
-## Displaying a consent form to the end user
-
-As last step we need to give the end user a way to give consent on data processing and sharing with external parties.
-
-So let us add a simple form unstyled form to enable that functionallity.
-
-```diff
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-- import { ConsentManager } from '@consent-manager/core'
-+ import { ConsentManager, ConsentManagerForm } from '@consent-manager/core'
-import createPersistedState from 'use-persisted-state'
-
-const Wrapper = () => {
- const storage = useConsentStateStore()
- const config = {
- integrations: [
- {
- id: 'youtube',
- title: 'YouTube',
- description:
- 'Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.',
- },
- ],
- }
-
-
-+
- ,
-}
-
-ReactDOM.render(
-
- document.getElementById('root')
-);
-```
-
-## Next steps
-
-As you've probably seen, the styling is very rudimentary. This is on purpose, our goal is to add as little extra weight to your bundle size as possible. We try to support all common ways of styling in React. No matter if you prever plain css, BEM, css-in-js or other ways.
-
-@todo implement and document custom styling. Sorry, we did not work in this, yet!
diff --git a/packages/docs/docs/known-issues.md b/packages/docs/docs/known-issues.md
deleted file mode 100644
index 141c1dc2..00000000
--- a/packages/docs/docs/known-issues.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-id: known-issues
-title: Known Issues
----
-
-* `ConsentManager` component does not verify required props
-* `` should use `integrationId` as prop name
-* `` should accept a fallback component as prop
diff --git a/packages/docs/docs/new-structure.md b/packages/docs/docs/new-structure.md
index 64da62d1..c1b9e2d3 100644
--- a/packages/docs/docs/new-structure.md
+++ b/packages/docs/docs/new-structure.md
@@ -17,6 +17,11 @@
* Parcel
* ~Create React App~
* GatsbyJS
+ * DocuSaurus
+* @todo sub-section that turns all of this into typescript? (or have separate typescript tutorial?)
+* @todo add another guide on how to handle tracking in single page applications (or ones that use routers)
+* @todo we actually need to list the config options (COMPONENETS dir????)
+
* integrations
* make more examples on how to track with certain integrations (for example matomo track events, page view and so on)
diff --git a/packages/docs/sidebars.js b/packages/docs/sidebars.js
index 17ab9220..7a91d5bc 100644
--- a/packages/docs/sidebars.js
+++ b/packages/docs/sidebars.js
@@ -1,6 +1,6 @@
module.exports = {
someSidebar: {
- 'Consent Manager': ['about', 'getting-started'],
+ 'Consent Manager': ['about', 'quick-start-guide'],
Components: ['provider'],
Hooks: ['use-something'],
Integrations: [