diff --git a/frontend/libs/console/legacy-ce/src/index.ts b/frontend/libs/console/legacy-ce/src/index.ts
index 818681f1a72..3228e636127 100644
--- a/frontend/libs/console/legacy-ce/src/index.ts
+++ b/frontend/libs/console/legacy-ce/src/index.ts
@@ -21,7 +21,7 @@ export * from './lib/utils/console-dev-tools';
export { ControlPlane };
export { App as ConsoleCeApp } from './lib/client';
-
+export { DDNBanner } from './lib/components/Main/DDNBanner';
export type {
Metadata,
SetOpenTelemetryQuery,
diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Main/DDNBanner.tsx b/frontend/libs/console/legacy-ce/src/lib/components/Main/DDNBanner.tsx
new file mode 100644
index 00000000000..530e7b07365
--- /dev/null
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Main/DDNBanner.tsx
@@ -0,0 +1,78 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { CloseCircleFilled } from '@ant-design/icons';
+import { useLocalStorage } from '../../hooks';
+import ToolTip from '../Common/Tooltip/Tooltip';
+import {
+ sendTelemetryEvent,
+ telemetryUserEventsTracker,
+} from '../../telemetry';
+import { InitializeTelemetry } from '../../features/Analytics';
+import { FiExternalLink } from 'react-icons/fi';
+
+export const DDNBanner = () => {
+ const [isDismissed, setIsDimissed] = useLocalStorage(
+ 'console:dismiss-ddn-banner',
+ false
+ );
+
+ if (isDismissed) return null;
+
+ return (
+ <>
+
+
+
+
+ 🎉
+
+
+ Hasura DDN, our next-gen platform, is now live with new powerful
+ features such as federation, lambda connectors, and faster CI/CD!
+
+
+
+
+
+
+
+ {
+ setIsDimissed(true);
+ }}
+ />
+
+
+
+ >
+ );
+};
diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Main/Main.js b/frontend/libs/console/legacy-ce/src/lib/components/Main/Main.js
index 597fac1d9f2..d14a5b82c27 100644
--- a/frontend/libs/console/legacy-ce/src/lib/components/Main/Main.js
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Main/Main.js
@@ -61,6 +61,7 @@ import { Badge } from './../../new-components/Badge';
import { ConsoleDevTools } from '../../utils/console-dev-tools/ConsoleDevTools';
import { isFeatureFlagEnabled } from '../../features/FeatureFlags/hooks/useFeatureFlags';
import { availableFeatureFlagIds } from '../../features/FeatureFlags';
+import { DDNBanner } from './DDNBanner';
export const updateRequestHeaders = props => {
const { requestHeaders, dispatch } = props;
@@ -488,6 +489,7 @@ class Main extends React.Component {
+ {globals.consoleMode === 'pro-lite' && }