diff --git a/workspaces/website/src/pages/(components)/Navbar.tsx b/workspaces/website/src/pages/(components)/Navbar.tsx
index c149d1344b..44a51c60b0 100644
--- a/workspaces/website/src/pages/(components)/Navbar.tsx
+++ b/workspaces/website/src/pages/(components)/Navbar.tsx
@@ -8,13 +8,13 @@ import { NavbarHeading } from "@ui/Layout/Navbar/NavbarHeading";
 import { Flex } from "@chakra-ui/react";
 import { getComputedLinkData } from "src/utils/utils";
 import { MainSearch } from "./MainSearch";
-import React, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import { Box, ButtonGroup } from "@chakra-ui/react";
 import { IconButton } from "@ui/IconButton";
 import { SiDiscord, SiGithub, SiTwitter, SiYoutube } from "react-icons/si";
 import { SEOTexts } from "@starknet-io/cms-data/src/seo";
 import { usePageContext } from "src/renderer/PageContextProvider";
-import Tabs from "@chakra-ui/pro-theme/src/components/tabs";
+import NavbarBanner from "./NavbarBanner/NavbarBanner";
 
 export interface Props {
   readonly mainMenu: MainMenu;
@@ -34,161 +34,165 @@ export default function Navbar({
   languageCenterSeo,
 }: Props) {
   const { locale, urlPathname: pathname } = usePageContext();
+  const [isOpen, setIsOpen] = useState<boolean>(true);
 
   return (
-    <NavbarContainer>
-      <NavBar
-        search={
-          <div>
-            <MainSearch env={env} seo={searchSEO} />
-          </div>
-        }
-        seo={languageCenterSeo}
-        desktopNavItems={mainMenu?.items?.map(
-          (mainMenuItem, mainMenuItemIndex) => (
-            <MenuItemWithDropdown
-              key={`${mainMenuItemIndex}-${pathname}`}
-              label={mainMenuItem.title}
-            >
-              <Flex
-                // bg="red"
-                maxW="900px"
-                mx="auto"
-                gap="48px"
-                // display="block"
-                // sx={{ columnCount: [1, 2, 3, 4] }}
+    <>
+      <NavbarContainer>
+        <NavBar
+          search={
+            <div>
+              <MainSearch env={env} seo={searchSEO} />
+            </div>
+          }
+          seo={languageCenterSeo}
+          desktopNavItems={mainMenu?.items?.map(
+            (mainMenuItem, mainMenuItemIndex) => (
+              <MenuItemWithDropdown
+                key={`${mainMenuItemIndex}-${pathname}`}
+                label={mainMenuItem.title}
               >
-                {mainMenuItem.columns?.length &&
-                  mainMenuItem.columns?.map((column, columnIndex) => (
-                    <Box key={columnIndex}>
-                      {column.blocks?.map((block, blockIndex) => {
-                        const blocks = block.items?.map((item, itemIndex) => {
-                          const { href, label } = getComputedLinkData(
-                            locale,
-                            item
-                          );
+                <Flex
+                  // bg="red"
+                  maxW="900px"
+                  mx="auto"
+                  gap="48px"
+                  // display="block"
+                  // sx={{ columnCount: [1, 2, 3, 4] }}
+                >
+                  {mainMenuItem.columns?.length &&
+                    mainMenuItem.columns?.map((column, columnIndex) => (
+                      <Box key={columnIndex}>
+                        {column.blocks?.map((block, blockIndex) => {
+                          const blocks = block.items?.map((item, itemIndex) => {
+                            const { href, label } = getComputedLinkData(
+                              locale,
+                              item
+                            );
+
+                            if (!href) {
+                              return <span key={itemIndex}>{label}</span>;
+                            }
 
-                          if (!href) {
-                            return <span key={itemIndex}>{label}</span>;
-                          }
+                            if (item.custom_icon) {
+                              return (
+                                <IconButton
+                                  // isExternal={item.custom_external_link != null}
+                                  href={href}
+                                  key={itemIndex}
+                                  as="a"
+                                  aria-label={label!}
+                                  icon={
+                                    item.custom_icon === "SiDiscord" ? (
+                                      <SiDiscord fontSize="1.25rem" />
+                                    ) : item.custom_icon === "SiGithub" ? (
+                                      <SiGithub fontSize="1.25rem" />
+                                    ) : item.custom_icon === "SiTwitter" ? (
+                                      <SiTwitter fontSize="1.25rem" />
+                                    ) : item.custom_icon === "SiYoutube" ? (
+                                      <Box ml="-16px">
+                                        <SiYoutube fontSize="1.25rem" />
+                                      </Box>
+                                    ) : (
+                                      <React.Fragment />
+                                    )
+                                  }
+                                />
+                              );
+                            }
 
-                          if (item.custom_icon) {
                             return (
-                              <IconButton
-                                // isExternal={item.custom_external_link != null}
-                                href={href}
+                              <NavBarLink
+                                isExternal={item.custom_external_link != null}
                                 key={itemIndex}
-                                as="a"
-                                aria-label={label!}
-                                icon={
-                                  item.custom_icon === "SiDiscord" ? (
-                                    <SiDiscord fontSize="1.25rem" />
-                                  ) : item.custom_icon === "SiGithub" ? (
-                                    <SiGithub fontSize="1.25rem" />
-                                  ) : item.custom_icon === "SiTwitter" ? (
-                                    <SiTwitter fontSize="1.25rem" />
-                                  ) : item.custom_icon === "SiYoutube" ? (
-                                    <Box ml="-16px">
-                                      <SiYoutube fontSize="1.25rem" />
-                                    </Box>
-                                  ) : (
-                                    <React.Fragment />
-                                  )
-                                }
-                              />
+                                href={href}
+                              >
+                                {label}
+                              </NavBarLink>
                             );
-                          }
+                          });
 
-                          return (
-                            <NavBarLink
-                              isExternal={item.custom_external_link != null}
-                              key={itemIndex}
-                              href={href}
-                            >
-                              {label}
-                            </NavBarLink>
+                          const iconsOnly = block.items?.every(
+                            (b) => b.custom_icon
                           );
-                        });
 
-                        const iconsOnly = block.items?.every(
-                          (b) => b.custom_icon
-                        );
-
-                        return (
-                          <Box mb="24px" key={blockIndex}>
-                            {block.title && (
-                              <NavbarHeading>{block.title}</NavbarHeading>
-                            )}
-                            {iconsOnly ? (
-                              <ButtonGroup variant="ghost" mx="16px">
-                                {blocks}
-                              </ButtonGroup>
-                            ) : (
-                              blocks
-                            )}
-                          </Box>
-                        );
-                      })}
-                    </Box>
-                  ))}
-              </Flex>
-            </MenuItemWithDropdown>
-          )
-        )}
-        mobileNavItems={
-          <NavAccordian.Root>
-            {mainMenu?.items?.map((mainMenuItem, mainMenuItemIndex) => {
-              return (
-                <NavAccordian.Item key={mainMenuItemIndex}>
-                  <NavAccordian.Button title={mainMenuItem.title} />
-                  <NavAccordian.Panel>
-                    {mainMenuItem.columns?.length &&
-                      mainMenuItem.columns?.map((column, columnIndex) => (
-                        <Box key={columnIndex}>
-                          {column.blocks?.map((block, blockIndex) => (
-                            <Fragment key={blockIndex}>
+                          return (
+                            <Box mb="24px" key={blockIndex}>
                               {block.title && (
-                                <NavbarHeading pt="24px">
-                                  {block.title}
-                                </NavbarHeading>
+                                <NavbarHeading>{block.title}</NavbarHeading>
                               )}
+                              {iconsOnly ? (
+                                <ButtonGroup variant="ghost" mx="16px">
+                                  {blocks}
+                                </ButtonGroup>
+                              ) : (
+                                blocks
+                              )}
+                            </Box>
+                          );
+                        })}
+                      </Box>
+                    ))}
+                </Flex>
+              </MenuItemWithDropdown>
+            )
+          )}
+          mobileNavItems={
+            <NavAccordian.Root>
+              {mainMenu?.items?.map((mainMenuItem, mainMenuItemIndex) => {
+                return (
+                  <NavAccordian.Item key={mainMenuItemIndex}>
+                    <NavAccordian.Button title={mainMenuItem.title} />
+                    <NavAccordian.Panel>
+                      {mainMenuItem.columns?.length &&
+                        mainMenuItem.columns?.map((column, columnIndex) => (
+                          <Box key={columnIndex}>
+                            {column.blocks?.map((block, blockIndex) => (
+                              <Fragment key={blockIndex}>
+                                {block.title && (
+                                  <NavbarHeading pt="24px">
+                                    {block.title}
+                                  </NavbarHeading>
+                                )}
 
-                              {block.items?.map((item, itemIndex) => {
-                                const { href, label } = getComputedLinkData(
-                                  locale,
-                                  item
-                                );
+                                {block.items?.map((item, itemIndex) => {
+                                  const { href, label } = getComputedLinkData(
+                                    locale,
+                                    item
+                                  );
 
-                                if (!href) {
-                                  return <span key={itemIndex}>{label}</span>;
-                                }
+                                  if (!href) {
+                                    return <span key={itemIndex}>{label}</span>;
+                                  }
 
-                                return (
-                                  <NavBarLink
-                                    isExternal={
-                                      item.custom_external_link != null
-                                    }
-                                    key={itemIndex}
-                                    href={href}
-                                  >
-                                    {label}
-                                    {/* {item.custom_icon && (
+                                  return (
+                                    <NavBarLink
+                                      isExternal={
+                                        item.custom_external_link != null
+                                      }
+                                      key={itemIndex}
+                                      href={href}
+                                    >
+                                      {label}
+                                      {/* {item.custom_icon && (
                                       <Icon as={item.custom_icon } />
                                     )} */}
-                                  </NavBarLink>
-                                );
-                              })}
-                            </Fragment>
-                          ))}
-                        </Box>
-                      ))}
-                  </NavAccordian.Panel>
-                </NavAccordian.Item>
-              );
-            })}
-          </NavAccordian.Root>
-        }
-      />
-    </NavbarContainer>
+                                    </NavBarLink>
+                                  );
+                                })}
+                              </Fragment>
+                            ))}
+                          </Box>
+                        ))}
+                    </NavAccordian.Panel>
+                  </NavAccordian.Item>
+                );
+              })}
+            </NavAccordian.Root>
+          }
+        />
+        {isOpen && <NavbarBanner setIsOpen={setIsOpen} />}
+      </NavbarContainer>
+    </>
   );
 }
diff --git a/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx b/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx
new file mode 100644
index 0000000000..f0baeb69ac
--- /dev/null
+++ b/workspaces/website/src/pages/(components)/NavbarBanner/NavbarBanner.tsx
@@ -0,0 +1,55 @@
+import { Center, Text, Button, IconButton } from "@chakra-ui/react";
+import CloseIcon from "@ui/ProvisionsPopup/CloseIcon/CloseIcon";
+import { useState } from "react";
+const text =
+  "Starknet is the secure scaling technology bringing Ethereum’s benefits to the world.";
+
+interface NavbarBannerProps {
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+const NavbarBanner = ({ setIsOpen }: NavbarBannerProps) => {
+  return (
+    <Center
+      height={12}
+      bgColor={"snNavy"}
+      display="flex"
+      gap={6}
+      zIndex={10}
+      _dark={{ bgColor: "#A4A4EA" }}
+    >
+      <Center margin="auto" gap={6}>
+        <Text color="white" _dark={{ color: "snNavy" }}>
+          {text}
+        </Text>
+        <Button
+          px={4}
+          py={1}
+          borderRadius={8}
+          bgColor="white"
+          color="snNavy"
+          _dark={{
+            color: "white",
+            bgColor: "darkMode.card",
+            borderColor: "darkMode.card",
+          }}
+        >
+          See more
+        </Button>
+      </Center>
+      <IconButton
+        aria-label="Close"
+        _dark={{
+          color: "snNavy",
+          bgColor: "transparent",
+          borderColor: "transparent",
+          _hover: { bgColor: "transparent" },
+        }}
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <CloseIcon />
+      </IconButton>
+    </Center>
+  );
+};
+
+export default NavbarBanner;
diff --git a/workspaces/website/src/style/theme.ts b/workspaces/website/src/style/theme.ts
index 542d0d4a07..b405083f55 100644
--- a/workspaces/website/src/style/theme.ts
+++ b/workspaces/website/src/style/theme.ts
@@ -31,16 +31,16 @@ const theme = extendTheme(proTheme, {
       100: "#80DCDA",
       200: "#6DDAF5",
       300: "#4B9EDA",
-      400: "#261F63"
+      400: "#261F63",
     },
     orange: {
       sunfade: "#FF7E6D",
-      fanta: "#FF6450"
+      fanta: "#FF6450",
     },
     yellowSunfade: "#FFCD9A",
     bg: {
       main: "#F6F6F6",
-      200: "#FBFBFB"
+      200: "#FBFBFB",
     },
     grey: {
       morning: "#CCCCCC",
@@ -49,41 +49,42 @@ const theme = extendTheme(proTheme, {
       coolerText: "#6B7280",
       coolText: "#6B7280",
       darkText: "#363636",
-      lineOnDark: "#313131"
+      lineOnDark: "#313131",
     },
     darkMode: {
       card: "#1B1B1B",
       bg2: "#0B0B0B",
-      navGrey: "#121212"
+      navGrey: "#121212",
     },
     snNavy: "#0C0C4F",
     selected: {
       main: "#5C94FF",
       100: "#AFCAFF",
       200: "#9EBFFF",
-      300: "#B2CDFF"
+      300: "#B2CDFF",
     },
     notify: {
       dark: "#172726",
       green1: "#EFFBFA",
-      green2: "#C4E2E0"
+      green2: "#C4E2E0",
     },
     note: {
       dark: "#171C27",
       main: "#4B9EDA",
       100: "#EBF2FF",
-      200: "#DEE3ED"
+      200: "#DEE3ED",
     },
     important: {
       dark: "#231F1A",
       100: "#FFF5EB",
-      200: "#E9E1DA"
+      200: "#E9E1DA",
     },
     warning: {
       dark: "#231B1A",
       100: "#FFEDEB",
-      200: "#E7D5D4"
-    }
+      200: "#E7D5D4",
+    },
+    accent: "#A4A4EA",
   },
   components: {
     Accordion: accordionTheme,
@@ -110,34 +111,35 @@ const theme = extendTheme(proTheme, {
     Link: linkTheme,
     Heading: {
       baseStyle: {
-        fontWeight: "300"
+        fontWeight: "300",
       },
       variants: {
-        ...headingTheme
+        ...headingTheme,
       },
-      sizes: null},
+      sizes: null,
+    },
     Text: textTheme,
-    Alert: alertTheme
+    Alert: alertTheme,
   },
   fonts: {
     heading: "Inter, sans-serif",
   },
   fontSizes: {
-    "h1": "5rem",
-    "h2": "3rem",
-    "h3": "1.5rem",
-    "h4": "1.125rem",
-    "h5": "1rem",
-    "h6": "0.875rem",
+    h1: "5rem",
+    h2: "3rem",
+    h3: "1.5rem",
+    h4: "1.125rem",
+    h5: "1rem",
+    h6: "0.875rem",
   },
   lineHeights: {
-    "h1": "100%",
-    "h2": "3.625rem",
-    "h3": "100%",
-    "h4": "1.375rem",
-    "h5": "1.188rem",
-    "h6": "1.063rem",
-    "heading6": "1.063rem",
+    h1: "100%",
+    h2: "3.625rem",
+    h3: "100%",
+    h4: "1.375rem",
+    h5: "1.188rem",
+    h6: "1.063rem",
+    heading6: "1.063rem",
   },
   breakpoints: {
     xs: "24em",
@@ -145,8 +147,7 @@ const theme = extendTheme(proTheme, {
     md: "48em",
     lg: "62em",
     xl: "80em",
-    "2xl": "96em"
+    "2xl": "96em",
   },
-
 });
 export default theme;