diff --git a/docs/src/components/BannerDismissable/DDNBanner.css b/docs/src/components/BannerDismissable/DDNBanner.css
new file mode 100644
index 00000000000..5d6a6a3206f
--- /dev/null
+++ b/docs/src/components/BannerDismissable/DDNBanner.css
@@ -0,0 +1,30 @@
+.banner {
+    background-color: #1699e2;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    padding: 15px;
+    font-size: 16px;
+}
+
+.close-btn {
+    background: none;
+    color: white;
+    border: none;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.close-btn:focus {
+    outline: none;
+}
+
+.banner a {
+    color: white;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/docs/src/components/BannerDismissable/DDNBanner.tsx b/docs/src/components/BannerDismissable/DDNBanner.tsx
new file mode 100644
index 00000000000..83eda711a06
--- /dev/null
+++ b/docs/src/components/BannerDismissable/DDNBanner.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import './DDNBanner.css';
+
+export const DDNBanner = () => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="banner">
+      <div>
+      Hasura DDN is the future of data delivery.&nbsp;<a href="https://hasura.io/docs/3.0/index">Click here for the Hasura DDN docs</a>.
+      </div>
+      <button className="close-btn" onClick={() => setIsVisible(false)}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+          <path d="M6 18L18 6M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
new file mode 100644
index 00000000000..53e58f83bdb
--- /dev/null
+++ b/docs/src/theme/Navbar/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import Navbar from '@theme-original/Navbar';
+import {DDNBanner} from "@site/src/components/BannerDismissable/DDNBanner";
+export default function NavbarWrapper(props) {
+  return (
+    <>
+      <DDNBanner/>
+      <Navbar {...props} />
+    </>
+  );
+}