diff --git a/packages/docs/docs/components/core/consent-manager-form.md b/packages/docs/docs/components/core/consent-manager-form.md
new file mode 100644
index 00000000..61619b96
--- /dev/null
+++ b/packages/docs/docs/components/core/consent-manager-form.md
@@ -0,0 +1,23 @@
+# ConsentManagerForm
+
+`ConsentManagerForm` is a React component designed to provide a basic, unstyled form enabling users to control their consent choices for different integrations. This component is particularly useful as a reference or starting point for integrating a custom consent form. It facilitates the enabling or disabling of integrations based on user preferences. For a pre-styled version, consider exploring our default interface.
+
+## Props
+| Prop           | Type                        | Description                                                  |
+|----------------|-----------------------------|--------------------------------------------------------------|
+| `formComponent`| `React.ComponentType<DecisionsFormProps>` | Optional. A custom form component to override the default.   |
+| `...props`     | `unknown`                   | Any additional props are passed down to the form component.  |
+
+## Example Usage
+```jsx
+import { ConsentManagerForm } from '@consent-manager/core';
+
+const MyConsentForm = () => {
+  // Custom form component (optional)
+  const CustomFormComponent = ...; 
+
+  return (
+    <ConsentManagerForm formComponent={CustomFormComponent} />
+  );
+};
+```
diff --git a/packages/docs/docs/components/core/consent-manager.md b/packages/docs/docs/components/core/consent-manager.md
new file mode 100644
index 00000000..c0699220
--- /dev/null
+++ b/packages/docs/docs/components/core/consent-manager.md
@@ -0,0 +1,22 @@
+# ConsentManager
+
+`ConsentManager` is the core component that provides context and state management for all consent-related functionality. It should wrap the root of your application.
+
+## Props
+| Prop                | Type                                  | Description                                                  |
+|---------------------|---------------------------------------|--------------------------------------------------------------|
+| `config`            | `ConsentManagerConfig`                | Configuration object for Consent Manager.                    |
+| `fallbackComponent` | `React.ComponentType<FallbackComponentProps>` | Optional. Custom fallback component for unconsented integrations. |
+| `store`             | `ConsentManagerStore`                 | Storage mechanism for consent decisions.                     |
+| `children`          | `React.ReactNode`                     | The application's components.                                |
+
+## Example Usage
+```jsx
+import { ConsentManager } from '@consent-manager/core';
+
+const App = () => (
+  <ConsentManager config={myConfig} store={myStore}>
+    {/* Rest of your application */}
+  </ConsentManager>
+);
+```
\ No newline at end of file
diff --git a/packages/docs/docs/components/core/privacy-shield.md b/packages/docs/docs/components/core/privacy-shield.md
new file mode 100644
index 00000000..0dc1390f
--- /dev/null
+++ b/packages/docs/docs/components/core/privacy-shield.md
@@ -0,0 +1,21 @@
+# PrivacyShield
+
+`PrivacyShield` is a component that conditionally renders children based on the consent decision for a specific integration. It's typically used to wrap content that should only be displayed if the user has consented to the associated integration.
+
+## Props
+| Prop         | Type                        | Description                                                  |
+|--------------|-----------------------------|--------------------------------------------------------------|
+| `id`         | `string`                    | The identifier for the integration to check consent for.     |
+| `children`   | `React.ReactNode`           | The content to render if consent is given.                   |
+| `...props`   | `unknown`                   | Additional props passed to the fallback component.           |
+
+## Example Usage
+```jsx
+import { PrivacyShield } from '@consent-manager/core';
+
+const YouTubeEmbed = ({ videoId }) => (
+  <PrivacyShield id="youtube">
+    {/* Your YouTube embed component */}
+  </PrivacyShield>
+);
+```
\ No newline at end of file
diff --git a/packages/docs/docs/new-structure.md b/packages/docs/docs/new-structure.md
index c1b9e2d3..b49a30d1 100644
--- a/packages/docs/docs/new-structure.md
+++ b/packages/docs/docs/new-structure.md
@@ -21,7 +21,7 @@
 * @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????)
-
+* @todo document helper functions (getForegroundColor, createIconComponentFromSimpleIconsSvgPath)
     
 * 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/docs/provider.md b/packages/docs/docs/provider.md
deleted file mode 100644
index d7e25d1d..00000000
--- a/packages/docs/docs/provider.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-id: provider
-title: ConsentManager (Provider)
----
-
-You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
-
-export const Highlight = ({children, color}) => ( <span style={{
-      backgroundColor: color,
-      borderRadius: '2px',
-      color: '#fff',
-      padding: '0.2rem',
-    }}>{children}</span> );
-
-<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
-
-I can write **Markdown** alongside my _JSX_!
diff --git a/packages/docs/docs/todo.md b/packages/docs/docs/todo.md
new file mode 100644
index 00000000..8956c0be
--- /dev/null
+++ b/packages/docs/docs/todo.md
@@ -0,0 +1,6 @@
+---
+id: todo
+title: This Page is Under Construction
+---
+
+Apologies for the inconvenience. This page is currently in progress. We're actively working on adding more content here, so stay tuned!
\ No newline at end of file
diff --git a/packages/docs/docs/use-something.md b/packages/docs/docs/use-something.md
deleted file mode 100644
index eac34960..00000000
--- a/packages/docs/docs/use-something.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-id: use-something
-title: useSomething hook
----
-
-This is a link to [another document.](about.md) This is a link to an [external page.](http://www.example.com/)
diff --git a/packages/docs/sidebars.js b/packages/docs/sidebars.js
index 40263ae2..c85994c4 100644
--- a/packages/docs/sidebars.js
+++ b/packages/docs/sidebars.js
@@ -2,8 +2,13 @@ module.exports = {
   someSidebar: {
     'Consent Manager': ['about', 'quick-start-guide'],
     Guides: ['guides/client-side-routing'],
-    Components: ['provider'],
-    Hooks: ['use-something'],
+    'Core Components': [
+      'components/core/consent-manager',
+      'components/core/consent-manager-form',
+      'components/core/privacy-shield',
+    ],
+    'Core Hooks': ['todo'],
+    'Default Interface': ['todo'],
     Integrations: [
       'integrations/algolia',
       'integrations/google-analytics',