diff --git a/docusaurus.config.js b/docusaurus.config.js
index f10ed9d..f7ce94e 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -90,6 +90,14 @@ const config = {
               },
             ],
           },
+          {
+            title: "Legal",
+            items: [
+              {
+                html: '<button type="button" data-cc="show-preferencesModal">Cookie Preferences</button>',
+              }
+            ],
+          },
           {
             title: 'More',
             items: [
@@ -137,7 +145,10 @@ const config = {
       }),
     ],
   ],
-  clientModules: [require.resolve('./src/scripts/mermaid_icons.js')],
+  clientModules: [
+    require.resolve('./src/scripts/client_module.js'),
+    require.resolve('./src/scripts/mermaid_icons.js')
+  ],
   headTags: [
     {
       tagName: "link",
diff --git a/package-lock.json b/package-lock.json
index c2ae9b1..b12a3e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,11 +4,11 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "integration-docs",
       "dependencies": {
         "@docusaurus/core": "^3.10.1",
         "@docusaurus/faster": "^3.10.1",
         "@docusaurus/preset-classic": "^3.10.1",
+        "@docusaurus/theme-common": "^3.10.1",
         "@docusaurus/theme-mermaid": "^3.10.1",
         "@easyops-cn/docusaurus-search-local": "^0.52.2",
         "@mdx-js/react": "^3.0.0",
@@ -17,7 +17,8 @@
         "prism-react-renderer": "^2.3.0",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
-        "react-player": "^3.3.3"
+        "react-player": "^3.3.3",
+        "vanilla-cookieconsent": "^3.1.0"
       },
       "devDependencies": {
         "@docusaurus/module-type-aliases": "^3.10.1",
@@ -20335,6 +20336,12 @@
       "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==",
       "license": "MIT"
     },
+    "node_modules/vanilla-cookieconsent": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vanilla-cookieconsent/-/vanilla-cookieconsent-3.1.0.tgz",
+      "integrity": "sha512-/McNRtm/3IXzb9dhqMIcbquoU45SzbN2VB+To4jxEPqMmp7uVniP6BhGLjU8MC7ZCDsNQVOp27fhQTM/ruIXAA==",
+      "license": "MIT"
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index b1da717..0d84d51 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@docusaurus/core": "^3.10.1",
     "@docusaurus/faster": "^3.10.1",
     "@docusaurus/preset-classic": "^3.10.1",
+    "@docusaurus/theme-common": "^3.10.1",
     "@docusaurus/theme-mermaid": "^3.10.1",
     "@easyops-cn/docusaurus-search-local": "^0.52.2",
     "@mdx-js/react": "^3.0.0",
@@ -23,7 +24,8 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-player": "^3.3.3"
+    "react-player": "^3.3.3",
+    "vanilla-cookieconsent": "^3.1.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.10.1",
diff --git a/src/css/custom.css b/src/css/custom.css
index 6f6c3a1..118eff0 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -46,3 +46,7 @@
   width: 1px;
   white-space: nowrap;
 }
+
+#cc-main .cm__desc {
+  white-space: pre-line;
+}
diff --git a/src/scripts/client_module.js b/src/scripts/client_module.js
new file mode 100644
index 0000000..4d1afd9
--- /dev/null
+++ b/src/scripts/client_module.js
@@ -0,0 +1,5 @@
+import CookieConsentBanner from "./cookie_consent";
+
+export function onRouteDidUpdate() {
+  return CookieConsentBanner
+}
\ No newline at end of file
diff --git a/src/scripts/cookie_consent.js b/src/scripts/cookie_consent.js
new file mode 100644
index 0000000..dd3ecac
--- /dev/null
+++ b/src/scripts/cookie_consent.js
@@ -0,0 +1,75 @@
+import { useEffect } from "react";
+
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import * as CookieConsent from "vanilla-cookieconsent";
+import { useColorMode } from '@docusaurus/theme-common';
+
+export default function CookieConsentBanner() {
+  const { colorMode } = useColorMode();
+
+  useEffect(() => {
+    if (colorMode === "dark")
+      document.documentElement.classList.add('cc--darkmode');
+
+    CookieConsent.run({
+      guiOptions: {
+        consentModal: {
+          layout: "bar inline",
+          position: "bottom",
+          equalWeightButtons: true,
+          flipButtons: false
+        },
+        preferencesModal: {
+          layout: "box",
+          position: "right",
+          equalWeightButtons: false,
+          flipButtons: false
+        }
+      },
+      categories: {
+        necessary: {
+          readOnly: true
+        },
+        analytics: {}
+      },
+      language: {
+        default: "en",
+        translations: {
+          en: {
+            consentModal: {
+              description: "This website stores cookies on your computer. These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.\n\n" +
+                "If you decline, your information won’t be tracked when you visit this website. A single cookie will be used in your browser to remember your preference not to be tracked.",
+              acceptAllBtn: "Accept",
+              acceptNecessaryBtn: "Decline",
+              showPreferencesBtn: "Cookie settings",
+              footer: "<a href=\"#link\">Privacy Policy</a>"
+            },
+            preferencesModal: {
+              title: "About Cookies",
+              acceptAllBtn: "Accept All",
+              savePreferencesBtn: "Save settings",
+              closeIconLabel: "Close modal",
+              serviceCounterLabel: "Service|Services",
+              sections: [
+                {
+                  description: "This site uses cookies. We use cookies mainly to improve and analyze your experience on our websites. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change your default settings."
+                },
+                {
+                  title: "Necessary <span class=\"pm__badge\">Always active</span>",
+                  description: "These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences or filling in forms",
+                  linkedCategory: "necessary"
+                },
+                {
+                  title: "Analytics",
+                  description: "These cookies help us to understand how visitors engage with the website. We may use a set of cookies to collect information and report site usage statistics.",
+                  linkedCategory: "analytics"
+                }
+              ]
+            }
+          }
+        }
+      },
+      disablePageInteraction: true
+    });
+  }, []);
+}
diff --git a/src/theme/Layout/index.js b/src/theme/Layout/index.js
new file mode 100644
index 0000000..dbf9c7b
--- /dev/null
+++ b/src/theme/Layout/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Layout from '@theme-original/Layout';
+import CookieConsentBanner from "../../scripts/cookie_consent";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function LayoutWrapper({children, ...props}) {
+  return (
+    <Layout {...props}>
+      <BrowserOnly>
+        {() => <CookieConsentBanner />}
+      </BrowserOnly>
+      {children}
+    </Layout>
+  );
+}