diff --git a/src/components/shared/burger/burger.jsx b/src/components/shared/burger/burger.jsx
index 808648f5..49eb1eba 100644
--- a/src/components/shared/burger/burger.jsx
+++ b/src/components/shared/burger/burger.jsx
@@ -34,11 +34,9 @@ const Burger = ({ className: additionalClassName, isToggled, onClick }) => (
         variants={{
           initial: {
             display: 'block',
-            transition: { delay: ANIMATION_DURATION },
           },
           toggled: {
             display: 'none',
-            transition: { delay: ANIMATION_DURATION },
           },
         }}
       />
diff --git a/src/components/shared/button-github-stars/button-github-stars.jsx b/src/components/shared/button-github-stars/button-github-stars.jsx
index b8a3f7b1..a9678e66 100644
--- a/src/components/shared/button-github-stars/button-github-stars.jsx
+++ b/src/components/shared/button-github-stars/button-github-stars.jsx
@@ -5,9 +5,10 @@ import React from 'react';
 
 import Button from 'components/shared/button';
 import GitHubIcon from 'icons/github.inline.svg';
+// eslint-disable-next-line import/no-named-as-default
 import buttonClick from 'utils/use-landing-simple-tracking';
 
-const ButtonGithubStars = ({ className }) => {
+const ButtonGithubStars = ({ className, size }) => {
   const {
     github: { url, count },
   } = useStaticQuery(graphql`
@@ -21,7 +22,7 @@ const ButtonGithubStars = ({ className }) => {
 
   return (
     <Button
-      className={clsx('group', className)}
+      className={clsx('group', size === 'small' && 'border-0 !px-0', className)}
       size="xs"
       theme="gray-outline"
       to={url}
@@ -30,9 +31,13 @@ const ButtonGithubStars = ({ className }) => {
       onClick={buttonClick('github_star', { type: 'menu' })}
     >
       <GitHubIcon className="mr-2 h-[26px] w-[26px]" />
-      <span className="lg:hidden">Star us</span>
+      {size === 'large' && <span className="lg:hidden">Star us</span>}
       <span
-        className="flex items-center before:mx-2.5 before:h-[18px] before:w-px before:bg-gray-4 before:transition-colors before:duration-200 group-hover:before:bg-gray-5"
+        className={clsx(
+          'flex items-center',
+          size === 'large' &&
+            'before:mx-2.5 before:h-[18px] before:w-px before:bg-gray-4 before:transition-colors before:duration-200 group-hover:before:bg-gray-5'
+        )}
         aria-label={`${count} stars on Github`}
       >
         {`${(count / 1000).toFixed(1)}k`}
@@ -43,10 +48,12 @@ const ButtonGithubStars = ({ className }) => {
 
 ButtonGithubStars.propTypes = {
   className: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'small']),
 };
 
 ButtonGithubStars.defaultProps = {
   className: null,
+  size: 'large',
 };
 
 export default ButtonGithubStars;
diff --git a/src/components/shared/header/dropdown/developers/developers.jsx b/src/components/shared/header/dropdown/developers/developers.jsx
deleted file mode 100644
index 13c32529..00000000
--- a/src/components/shared/header/dropdown/developers/developers.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import clsx from 'clsx';
-import { StaticImage } from 'gatsby-plugin-image';
-import React from 'react';
-
-import Link from 'components/shared/link';
-
-const Developers = ({ items }) => (
-  <div className="w-full overflow-hidden">
-    <ul className="top-0 left-0 p-2 grid grid-cols-[156px_158px] grid-rows-2 gap-y-6 gap-x-8">
-      {items.map(
-        ({ title, icon, items: subItems, mobileOnly }, index) =>
-          !mobileOnly && (
-            <li
-              className={clsx('text-[15px] leading-none', {
-                'col-start-1 row-start-1 col-span-1 row-span-1': index === 1,
-                'col-start-1 row-start-2 col-span-1 row-span-1': index === 2,
-                'col-start-2 row-start-1 col-span-1 row-span-2': index === 3,
-              })}
-              key={index}
-            >
-              {title && (
-                <span className="mb-3.5 flex gap-x-3 items-center">
-                  {icon && <img src={icon} alt="" width={28} height={28} />}
-                  {title}
-                </span>
-              )}
-              <ul
-                className={clsx('flex flex-col gap-y-2.5', {
-                  'pl-6 border-l border-l-[#1F1F1F] h-full': index === 3,
-                })}
-              >
-                {subItems.map(({ title, to, withImage }, index) => (
-                  <li
-                    className={clsx({ 'mb-3': withImage, 'text-sm leading-snug': !withImage })}
-                    key={index}
-                  >
-                    {withImage ? (
-                      <Link className="relative" to={to}>
-                        <StaticImage
-                          className="shadow-[0px_3px_8px_0px_rgba(0,0,0,0.3)]"
-                          src="./images/docomentation.png"
-                          alt=""
-                          width={133}
-                          height={108}
-                          quality={100}
-                        />
-                        <span className="absolute text-sm leading-none top-3.5 inset-x-0 text-center">
-                          {title}
-                        </span>
-                      </Link>
-                    ) : (
-                      <Link className="text-gray-10 font-light hover:text-primary-1" to={to}>
-                        {title}
-                      </Link>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </li>
-          )
-      )}
-    </ul>
-  </div>
-);
-
-export default Developers;
diff --git a/src/components/shared/header/dropdown/developers/images/docomentation.png b/src/components/shared/header/dropdown/developers/images/docomentation.png
deleted file mode 100644
index 6076138d..00000000
Binary files a/src/components/shared/header/dropdown/developers/images/docomentation.png and /dev/null differ
diff --git a/src/components/shared/header/dropdown/developers/index.js b/src/components/shared/header/dropdown/developers/index.js
deleted file mode 100644
index e2ce0d05..00000000
--- a/src/components/shared/header/dropdown/developers/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Developers from './developers';
-
-export default Developers;
diff --git a/src/components/shared/header/dropdown/dropdown.jsx b/src/components/shared/header/dropdown/dropdown.jsx
index b2977f12..8318d006 100644
--- a/src/components/shared/header/dropdown/dropdown.jsx
+++ b/src/components/shared/header/dropdown/dropdown.jsx
@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion';
 import React from 'react';
 
-import Developers from './developers';
-import Product from './product';
+import Link from 'components/shared/link';
+import LINKS from 'constants/links';
 
 const Dropdown = ({ isDropdownOpen, dropdownMenuContent, setDropdownOpen }) => (
   <LazyMotion features={domAnimation}>
@@ -11,10 +11,15 @@ const Dropdown = ({ isDropdownOpen, dropdownMenuContent, setDropdownOpen }) => (
       {isDropdownOpen && (
         <m.div
           className={clsx(
-            'absolute bottom-1.5 translate-y-full p-3.5 bg-[#0F0F0F] outline outline-gray-2 rounded-[20px] shadow-[0px_20px_50px_0px_rgba(0,0,0,0.8),0px_4px_12px_0px_rgba(0,0,0,0.3)] transition-[left,min-width] duration-[0.4s] ease-in-out overflow-hidden will-change-transform',
+            'absolute -bottom-2 w-[680px] translate-y-full rounded-2xl border border-gray-2 bg-[#0F0F0F] p-2 shadow-[0px_20px_50px_0px_rgba(0,0,0,0.8),0px_4px_12px_0px_rgba(0,0,0,0.3)] transition-[left,min-width] duration-[0.4s] ease-in-out will-change-transform lg:-left-3.5',
+            'before:absolute before:-top-1.5 before:left-1/2 before:z-10 before:h-3.5 before:w-3.5 before:rotate-45 before:rounded-[1px] before:border before:border-gray-2 before:bg-[#0F0F0F]',
             {
-              '-left-1 min-w-[262px]': dropdownMenuContent?.label === 'product',
-              'left-[100px] min-w-[394px]': dropdownMenuContent?.label === 'developers',
+              '-left-[272px] before:-translate-x-6 lg:before:-translate-x-72':
+                dropdownMenuContent?.label === 'product',
+              '-left-40 before:-translate-x-[7px] lg:before:-translate-x-44':
+                dropdownMenuContent?.label === 'developers',
+              '-left-8 before:-translate-x-[5px] lg:before:-translate-x-16':
+                dropdownMenuContent?.label === 'resources',
             }
           )}
           initial={{
@@ -32,56 +37,123 @@ const Dropdown = ({ isDropdownOpen, dropdownMenuContent, setDropdownOpen }) => (
           onMouseEnter={() => setDropdownOpen(true)}
           onMouseLeave={() => setDropdownOpen(false)}
         >
-          {dropdownMenuContent?.label === 'product' && (
-            <m.div
-              initial={{
-                opacity: 0,
-                minWidth: 0,
-              }}
-              animate={{
-                opacity: 1,
-                minWidth: '234px',
-              }}
-              exit={{
-                opacity: 0,
-                width: 0,
-              }}
-              transition={{
-                minWidth: { duration: 0.2 },
-                opacity: { duration: 0.2, delay: 0.2 },
-              }}
-              key="product"
-            >
-              <Product items={dropdownMenuContent?.items} />
-            </m.div>
-          )}
-          {dropdownMenuContent?.label === 'developers' && (
-            <m.div
-              initial={{
-                opacity: 0,
-                width: 0,
-              }}
-              animate={{
-                opacity: 1,
-                width: 'auto',
-              }}
-              exit={{
-                opacity: 0,
-                width: 0,
-                transition: {
-                  width: { duration: 0.2, delay: 0.2 },
-                  opacity: { duration: 0.2 },
-                },
-              }}
-              transition={{
-                width: { duration: 0.2 },
-                opacity: { duration: 0.2, delay: 0.2 },
-              }}
-              key="developers"
-            >
-              <Developers items={dropdownMenuContent?.items} />
-            </m.div>
+          <ul
+            className={clsx('relative z-20 gap-2', {
+              'grid grid-cols-2 grid-rows-[261px_186px_106px]':
+                dropdownMenuContent?.label === 'product',
+              'flex flex-col':
+                dropdownMenuContent?.label === 'developers' ||
+                dropdownMenuContent?.label === 'resources',
+            })}
+          >
+            {dropdownMenuContent?.items.map(
+              ({ title, description, icon, image, to, items }, index) => {
+                const itemTitle = (
+                  <>
+                    {image ? (
+                      <img
+                        className="rounded-md border border-[#333347]/20"
+                        src={image}
+                        alt=""
+                        width={294}
+                        height={164}
+                      />
+                    ) : (
+                      <img src={icon} alt="" width={44} height={44} />
+                    )}
+                    <span
+                      className={clsx(
+                        'flex flex-col items-start gap-y-2',
+                        image ? 'pr-9' : 'max-w-[calc(100%-48px)]'
+                      )}
+                    >
+                      <span
+                        className={clsx(
+                          'text-lg text-current',
+                          image ? 'leading-snug' : 'whitespace-nowrap leading-none'
+                        )}
+                      >
+                        {title}
+                      </span>
+                      <span
+                        className={clsx(
+                          'text-gray-8',
+                          image
+                            ? 'line-clamp-3 text-sm leading-normal'
+                            : 'max-w-full truncate whitespace-nowrap text-base leading-none'
+                        )}
+                      >
+                        {description}
+                      </span>
+                    </span>
+                  </>
+                );
+
+                return (
+                  <li
+                    className={clsx(
+                      'rounded-lg border border-[#333347]/30 bg-[#12121C]/50 p-6 pt-[22px]',
+                      {
+                        'col-span-full': index === 0,
+                        'row-span-2 row-start-2': index === 1,
+                        '!py-[30px]': index === 3,
+                      }
+                    )}
+                    key={index}
+                  >
+                    {to ? (
+                      <Link
+                        className={clsx('flex items-center', image ? 'gap-x-[19px]' : 'gap-x-3')}
+                        theme="white"
+                        to={to}
+                      >
+                        {itemTitle}
+                      </Link>
+                    ) : (
+                      <>
+                        <p className="flex items-center gap-x-3 text-white">{itemTitle}</p>
+                        <ul
+                          className={clsx('mt-8 grid gap-y-[18px]', {
+                            'grid-cols-2 gap-x-[50px]': index === 0,
+                          })}
+                        >
+                          {items.map(({ title, icon, ...linkProps }, index) => (
+                            <li key={index}>
+                              <Link
+                                className="flex items-center gap-x-3 whitespace-nowrap font-light leading-none outline-none"
+                                size="base"
+                                theme="gray-9"
+                                {...linkProps}
+                              >
+                                <img
+                                  className="shrink-0"
+                                  src={icon}
+                                  alt=""
+                                  width={20}
+                                  height={20}
+                                />
+                                {title}
+                              </Link>
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    )}
+                  </li>
+                );
+              }
+            )}
+          </ul>
+          {(dropdownMenuContent?.label === 'developers' ||
+            dropdownMenuContent?.label === 'resources') && (
+            <p className="flex items-center justify-between p-6 pb-3.5 pt-[22px] text-base font-light leading-none text-gray-9">
+              <span>Any questions? We&apos;re here to help</span>
+              <Link className="text-[15px]" theme="primary" withArrow {...LINKS.contactUsCTA}>
+                Contact us
+              </Link>
+            </p>
           )}
+          <div className="absolute left-1/2 top-0 z-10 h-4 w-11/12 -translate-x-1/2 bg-[#0F0F0F]" />
         </m.div>
       )}
     </AnimatePresence>
diff --git a/src/components/shared/header/dropdown/product/index.js b/src/components/shared/header/dropdown/product/index.js
deleted file mode 100644
index 344df2d1..00000000
--- a/src/components/shared/header/dropdown/product/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Product from './product';
-
-export default Product;
diff --git a/src/components/shared/header/dropdown/product/product.jsx b/src/components/shared/header/dropdown/product/product.jsx
deleted file mode 100644
index 182a5f9b..00000000
--- a/src/components/shared/header/dropdown/product/product.jsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import clsx from 'clsx';
-import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion';
-import React, { useState, useCallback } from 'react';
-
-import Link from 'components/shared/link';
-
-const Product = ({ items }) => {
-  const [isDropdownOpen, setDropdownOpen] = useState(false);
-  const [activeElement, setActiveElement] = useState(null);
-  const [dropdownMenuContent, setDropdownMenuContent] = useState(null);
-
-  const handleMouseEnter = useCallback(
-    (menuItems, index) => () => {
-      if (menuItems) {
-        setDropdownOpen(true);
-        setDropdownMenuContent(menuItems);
-        setActiveElement(index);
-      }
-    },
-    []
-  );
-
-  const handleMouseLeave = useCallback(
-    (menuItems) => () => {
-      if (menuItems) {
-        setDropdownOpen(false);
-      }
-    },
-    []
-  );
-
-  return (
-    <LazyMotion features={domAnimation}>
-      <AnimatePresence>
-        <div
-          className={clsx('overflow-hidden transition-all duration-300', {
-            'w-[502px]': isDropdownOpen,
-            'w-[234px]': !isDropdownOpen,
-          })}
-          onMouseLeave={() => setActiveElement(null)}
-        >
-          <div className="grid grid-rows-1 grid-cols-[240px_262px] gap-x-0">
-            <ul className="relative flex flex-col min-h-[280px] w-[240px]">
-              {items.map(({ title, description, icon, items }, index) => (
-                <li
-                  className="pr-2.5"
-                  key={index}
-                  onMouseEnter={handleMouseEnter(items, index)}
-                  onMouseLeave={handleMouseLeave(items)}
-                >
-                  <button
-                    className={clsx(
-                      'relative w-full flex items-center gap-x-3 p-2.5 rounded-lg transition-colors duration-300 after:absolute after:w-[7px] after:h-[7px] after:-right-1 after:top-0 after:bottom-0 after:my-auto after:bg-gray-2 after:rotate-45 after:opacity-0 after:transition-opacity after:duration-300 after:pointer-events-none',
-                      {
-                        'bg-gray-2 after:opacity-100': activeElement === index,
-                      }
-                    )}
-                    type="button"
-                  >
-                    <img src={icon} alt="" width={36} height={36} />
-                    <span className="flex flex-col items-start gap-y-1">
-                      <span className="text-[15px] leading-none text-gray-10 whitespace-nowrap">
-                        {title}
-                      </span>
-                      <span className="text-[13px] leading-none text-gray-8 whitespace-nowrap">
-                        {description}
-                      </span>
-                    </span>
-                  </button>
-                </li>
-              ))}
-            </ul>
-            {isDropdownOpen && (
-              <m.ul
-                className="w-[262px] flex flex-col items-start gap-y-3 p-4 pt-[13px] bg-gray-2 border border-gray-3 rounded-lg shadow-[0px_3px_8px_0px_rgba(0,0,0,0.1)] will-change-transform"
-                initial={{
-                  opacity: 0,
-                  minHeight: 0,
-                }}
-                animate={{
-                  opacity: 1,
-                  minHeight: 'auto',
-                }}
-                exit={{
-                  opacity: 0,
-                  minHeight: 0,
-                  transition: {
-                    minHeight: { duration: 0.2, delay: 0.2 },
-                    opacity: { duration: 0.2 },
-                  },
-                }}
-                transition={{
-                  minHeight: { duration: 0.2 },
-                  opacity: { duration: 0.2, delay: 0.2 },
-                }}
-                onMouseEnter={() => setDropdownOpen(true)}
-                onMouseLeave={() => {
-                  setDropdownOpen(false);
-                  setActiveElement(null);
-                }}
-              >
-                {dropdownMenuContent.map(({ title, to }, index) => (
-                  <li className="text-sm leading-snug" key={index}>
-                    <Link className="text-gray-10 font-light hover:text-primary-1" to={to}>
-                      {title}
-                    </Link>
-                  </li>
-                ))}
-              </m.ul>
-            )}
-          </div>
-        </div>
-      </AnimatePresence>
-    </LazyMotion>
-  );
-};
-
-export default Product;
diff --git a/src/components/shared/header/header.jsx b/src/components/shared/header/header.jsx
index 0fc6963b..bc69e145 100644
--- a/src/components/shared/header/header.jsx
+++ b/src/components/shared/header/header.jsx
@@ -40,14 +40,15 @@ const Header = ({ isMobileMenuOpen, onBurgerClick }) => {
         'safe-paddings absolute left-0 right-0 top-0 z-40 w-full transition-colors duration-200',
         { 'bg-black': isMobileMenuOpen }
       )}
+      data-disable-document-scroll={isMobileMenuOpen}
     >
-      <div className="container flex items-center justify-between py-3 lg:gap-x-4 md:py-4 md:px-7 sm:px-4 sm:py-3.5">
+      <div className="container flex items-center justify-between py-3 lg:gap-x-4 md:px-7 md:py-4 sm:px-5">
         <Link {...LINKS.home}>
-          <Logo className="h-8 sm:h-7" aria-hidden />
+          <Logo className="h-8" aria-hidden />
           <span className="sr-only">Novu</span>
         </Link>
 
-        <nav className="absolute left-1/2 -translate-x-1/2 h-full">
+        <nav className="absolute left-1/2 h-full -translate-x-[48.7%] lg:-translate-x-[69%]">
           <ul className="flex h-full md:hidden">
             {MENUS.header.map(({ to, text, target, menuItems }, index) => (
               <li
@@ -56,7 +57,11 @@ const Header = ({ isMobileMenuOpen, onBurgerClick }) => {
                 onMouseLeave={handleMouseLeave(menuItems)}
               >
                 <Link
-                  className="flex items-center gap-x-1.5 h-full px-[18px] text-[15px] leading-none lg:px-2.5"
+                  className={clsx(
+                    'relative flex h-full cursor-pointer items-center gap-x-1.5 px-[18px] pt-1.5 text-[15px] leading-none lg:px-3.5',
+                    menuItems &&
+                      'after:absolute after:-bottom-5 after:left-0 after:z-10 after:h-8 after:w-full'
+                  )}
                   tag={to ? null : 'button'}
                   to={to}
                   theme="white"
@@ -64,7 +69,14 @@ const Header = ({ isMobileMenuOpen, onBurgerClick }) => {
                 >
                   {text}
 
-                  {menuItems && <ChevronIcon className="w-2 h-2" />}
+                  {menuItems && (
+                    <ChevronIcon
+                      className={clsx('h-2 w-2 transition-transform duration-200', {
+                        'rotate-180':
+                          isDropdownOpen && dropdownMenuContent?.label === menuItems.label,
+                      })}
+                    />
+                  )}
                 </Link>
               </li>
             ))}
@@ -76,7 +88,10 @@ const Header = ({ isMobileMenuOpen, onBurgerClick }) => {
           />
         </nav>
         <div className="flex gap-x-5 lg:gap-x-3 md:hidden">
-          <ButtonGithubStars className="pl-3" />
+          <ButtonGithubStars className="pl-3" size="small" />
+          <Button size="xs" theme="white-outline" onClick={click}>
+            Login
+          </Button>
           <Button size="xs" theme="white-filled" {...LINKS.getStartedTopBar} onClick={click}>
             Get Started
           </Button>
diff --git a/src/components/shared/link/link.jsx b/src/components/shared/link/link.jsx
index 4f3d1244..1cb4bb2a 100644
--- a/src/components/shared/link/link.jsx
+++ b/src/components/shared/link/link.jsx
@@ -8,7 +8,7 @@ import DEFAULT_EASE from 'constants/default-ease';
 import ArrowIcon from 'icons/chevron-right.inline.svg';
 
 const styles = {
-  base: 'inline-block leading-none',
+  base: 'inline-block leading-none transition-colors duration-200',
   size: {
     xl: 'text-xl',
     base: 'text-base',
@@ -18,13 +18,13 @@ const styles = {
     xxs: 'text-[11px]',
   },
   theme: {
-    primary: 'text-primary-1 transition-colors duration-200 hover:text-primary-2',
+    primary: 'text-primary-1 hover:text-primary-2 focus-visible:text-primary-2',
     'primary-underline':
-      'text-primary-1 relative tracking-wide uppercase pb-1.5 transition-colors duration-200 hover:text-primary-1',
-    'white-underline':
-      'text-white relative tracking-wide uppercase pb-1.5 transition-colors duration-200',
-    white: 'text-white hover:text-primary-1 transition-colors duration-200',
-    gray: 'text-gray-8 hover:text-primary-1 transition-colors duration-200',
+      'text-primary-1 relative tracking-wide uppercase pb-1.5 hover:text-primary-1 focus-visible:text-primary-1',
+    'white-underline': 'text-white relative tracking-wide uppercase pb-1.5',
+    white: 'text-white hover:text-primary-1 focus-visible:text-primary-1',
+    gray: 'text-gray-8 hover:text-primary-1 focus-visible:text-primary-1',
+    'gray-9': 'text-gray-9 hover:text-primary-1 focus-visible:text-primary-1',
   },
   withArrow: 'group inline-flex items-center gap-1.5',
 };
@@ -113,6 +113,13 @@ const Link = ({
     </LazyMotion>
   );
 
+  const arrow = (
+    <span className="relative mt-0.5 w-1.5 overflow-hidden transition-[width] duration-200 group-hover:w-3">
+      <ArrowIcon className="ml-auto w-1.5" />
+      <span className="absolute right-px top-1/2 h-px w-full -translate-y-1/2 bg-primary-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+    </span>
+  );
+
   if (to?.startsWith('/') && !tag) {
     return (
       <GatsbyLink
@@ -123,12 +130,7 @@ const Link = ({
       >
         {children}
         {isUnderline && underline}
-        {withArrow && (
-          <span className="relative mt-0.5 w-1.5 overflow-hidden transition-[width] duration-200 group-hover:w-3">
-            <ArrowIcon className="ml-auto w-1.5" />
-            <span className="absolute right-px top-1/2 h-px w-full -translate-y-1/2 bg-primary-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
-          </span>
-        )}
+        {withArrow && arrow}
       </GatsbyLink>
     );
   }
@@ -142,12 +144,7 @@ const Link = ({
     >
       {children}
       {isUnderline && underline}
-      {withArrow && (
-        <span className="relative mt-0.5 w-1.5 overflow-hidden transition-[width] duration-200 group-hover:w-3">
-          <ArrowIcon className="ml-auto w-1.5" />
-          <span className="absolute right-px top-1/2 h-px w-full -translate-y-1/2 bg-primary-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
-        </span>
-      )}
+      {withArrow && arrow}
     </Tag>
   );
 };
diff --git a/src/components/shared/mobile-menu/index.js b/src/components/shared/mobile-menu/index.js
index 5c3dd60d..36e2673a 100644
--- a/src/components/shared/mobile-menu/index.js
+++ b/src/components/shared/mobile-menu/index.js
@@ -1 +1,3 @@
-export { default } from './mobile-menu';
+import MobileMenu from './mobile-menu';
+
+export default MobileMenu;
diff --git a/src/components/shared/mobile-menu/menu-item/index.js b/src/components/shared/mobile-menu/menu-item/index.js
deleted file mode 100644
index 02a0418c..00000000
--- a/src/components/shared/mobile-menu/menu-item/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import MenuItem from './menu-item';
-
-export default MenuItem;
diff --git a/src/components/shared/mobile-menu/menu-item/menu-item.jsx b/src/components/shared/mobile-menu/menu-item/menu-item.jsx
deleted file mode 100644
index c9667f64..00000000
--- a/src/components/shared/mobile-menu/menu-item/menu-item.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
-
-import Link from 'components/shared/link';
-import ChevronIcon from 'icons/chevron-small.inline.svg';
-
-import SubMenu from '../sub-menu';
-
-const MenuItem = ({ text, to, target, menuItems, className, icon }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleMenuClick = (event) => {
-    event.preventDefault();
-    setIsOpen(!isOpen);
-  };
-
-  return (
-    <li className="px-7 sm:px-4">
-      <Link
-        className={clsx(
-          'flex justify-between items-center w-full text-xl text-left leading-none sm:text-[15px]',
-          className
-        )}
-        tag={to ? null : 'button'}
-        to={to}
-        theme="white"
-        target={target}
-        onClick={to ? null : handleMenuClick}
-      >
-        <span className="flex items-center gap-x-2.5">
-          {icon && <img src={icon} width={24} height={24} alt="" loading="lazy" />}
-          {text}
-        </span>
-        {menuItems && <ChevronIcon className="w-3.5 h-3.5 -rotate-90" />}
-      </Link>
-      {menuItems && (
-        <SubMenu isOpen={isOpen} setIsOpen={setIsOpen}>
-          {menuItems.map(({ title, icon, to, items }, index) =>
-            title ? (
-              <MenuItem
-                className="h-[60px] border-b border-b-gray-2"
-                key={index}
-                text={title}
-                to={to}
-                icon={icon}
-                menuItems={items}
-              />
-            ) : (
-              items &&
-              items.map(
-                ({ title, icon, to, desktopOnly }, index) =>
-                  !desktopOnly && (
-                    <MenuItem
-                      className={clsx('py-3', { 'mt-3': index === 0 })}
-                      key={index}
-                      text={title}
-                      to={to}
-                      icon={icon}
-                    />
-                  )
-              )
-            )
-          )}
-        </SubMenu>
-      )}
-    </li>
-  );
-};
-
-export default MenuItem;
diff --git a/src/components/shared/mobile-menu/mobile-menu.jsx b/src/components/shared/mobile-menu/mobile-menu.jsx
index 1c41226d..4bf8948b 100644
--- a/src/components/shared/mobile-menu/mobile-menu.jsx
+++ b/src/components/shared/mobile-menu/mobile-menu.jsx
@@ -1,17 +1,17 @@
 import clsx from 'clsx';
-import { AnimatePresence, m, LazyMotion, domAnimation, useAnimation } from 'framer-motion';
+import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import Button from 'components/shared/button';
-import GITHUB from 'constants/github';
+import Link from 'components/shared/link';
 import LINKS from 'constants/links';
 import MENUS from 'constants/menus';
-import GitHubIcon from 'icons/github.inline.svg';
+import useScrollStatus from 'hooks/use-scroll-status';
+import ChevronIcon from 'icons/chevron-small.inline.svg';
 
-import MenuItem from './menu-item';
-
-const RIGHT_BUTTON_TEXT = 'Get Started';
+import SubMenu from './sub-menu';
+import TabletMenu from './tablet-menu';
 
 const ANIMATION_DURATION = 0.2;
 
@@ -34,23 +34,18 @@ const variants = {
 };
 
 const MobileMenu = ({ isOpen }) => {
-  const controls = useAnimation();
-  const [paddingTopClassName, setPaddingTopClassName] = useState('pt-16 sm:pt-14');
+  const [openMenu, setOpenMenu] = useState(null);
+  const [isBanner, setIsBanner] = useState(false);
+  const { isScrolledToBottom, hasScroll, handleScroll } = useScrollStatus();
 
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-      document.body.style.touchAction = 'none';
-    } else {
-      document.body.style.overflow = '';
-      document.body.style.touchAction = '';
-    }
-  }, [isOpen, controls]);
+  const handleOpenMenu = (items) => {
+    setOpenMenu((current) => (current?.label === items?.label ? null : items));
+  };
 
   useEffect(() => {
     const topBanner = document.querySelector('.top-banner');
     if (topBanner) {
-      setPaddingTopClassName('pt-[114px] sm:pt-[121px]');
+      setIsBanner(true);
     }
   }, []);
 
@@ -60,52 +55,61 @@ const MobileMenu = ({ isOpen }) => {
         {isOpen && (
           <m.div
             className={clsx(
-              'hidden safe-paddings fixed inset-0 justify-between w-full flex-col overflow-x-hidden overflow-y-scroll md:flex pointer-events-none',
-              paddingTopClassName
+              'safe-paddings pointer-events-none fixed inset-0 hidden w-full flex-col justify-between overflow-x-hidden overflow-y-scroll pt-16 md:flex',
+              isBanner ? 'pt-[108px]' : 'pt-16'
             )}
             initial="hidden"
             animate="visible"
             exit="hidden"
             variants={variants}
           >
-            <nav className="flex h-full w-full overflow-y-scroll overflow-x-hidden pointer-events-auto bg-black">
-              <ul className="flex h-full w-full flex-col relative bg-black border-t border-t-[#1F1F1F]">
-                {MENUS.header.map(({ to, text, target, menuItems }, index) => (
-                  <MenuItem
-                    className="h-[60px] border-b border-b-gray-2"
-                    key={index}
-                    text={text}
-                    to={to}
-                    target={target}
-                    menuItems={menuItems && menuItems.items}
-                  />
+            <nav
+              className={clsx(
+                'pointer-events-auto relative flex h-full w-full overflow-x-hidden overflow-y-scroll bg-black',
+                hasScroll &&
+                  !isScrolledToBottom &&
+                  'after:pointer-events-none after:fixed after:inset-x-4 after:bottom-24 after:top-16 after:z-50 after:bg-[linear-gradient(180deg,#05050B00_86.18%,#05050B_100%)] sm:after:bottom-[142px]'
+              )}
+              onScroll={handleScroll}
+            >
+              <ul className="relative flex h-full w-full flex-col border-t border-t-[#1F1F1F] px-8 sm:px-5">
+                {MENUS.header.map(({ text, to, target, menuItems }, index) => (
+                  <li className="border-b border-b-[#1F1F1F] last:border-b-0" key={index}>
+                    <Link
+                      className={clsx(
+                        'flex h-[53px] w-full items-center justify-between text-left text-lg leading-none sm:h-[45px] sm:text-base'
+                      )}
+                      tag={to ? null : 'button'}
+                      to={to}
+                      theme="white"
+                      target={target}
+                      onClick={to ? null : () => handleOpenMenu(menuItems)}
+                    >
+                      {text}
+                      {menuItems && (
+                        <ChevronIcon
+                          className={clsx(
+                            'size-3.5 -rotate-90 transition-transform duration-200',
+                            openMenu?.label === menuItems?.label ? 'rotate-0' : ''
+                          )}
+                        />
+                      )}
+                    </Link>
+                    <TabletMenu openMenu={openMenu} label={menuItems?.label} />
+                  </li>
                 ))}
               </ul>
+              <SubMenu currentMenu={openMenu} handleOpenMenu={handleOpenMenu} isBanner={isBanner} />
             </nav>
 
-            <div className="bg-black pointer-events-auto">
-              <div className="container">
-                <div className="flex w-full justify-between space-x-4 py-7 border-t border-t-gray-2">
-                  <Button
-                    className="w-full sm:text-xs"
-                    to={GITHUB.repoUrl}
-                    target="_blank"
-                    size="sm"
-                    theme="gray-outline"
-                  >
-                    <GitHubIcon className="mr-2 h-[26px] w-[26px]" />
-                    <span>Star us</span>
-                  </Button>
-
-                  <Button
-                    className="w-full sm:text-xs"
-                    size="sm"
-                    theme="white-filled"
-                    {...LINKS.getStarted}
-                  >
-                    {RIGHT_BUTTON_TEXT}
-                  </Button>
-                </div>
+            <div className="pointer-events-auto bg-black">
+              <div className="container flex justify-between gap-x-4 gap-y-3.5 py-7 sm:px-5 sm:py-6 xs:flex-col">
+                <Button className="w-full" size="xs" theme="white-outline">
+                  Login
+                </Button>
+                <Button className="w-full" size="xs" theme="white-filled" {...LINKS.getStarted}>
+                  Get Started
+                </Button>
               </div>
             </div>
           </m.div>
diff --git a/src/components/shared/mobile-menu/sub-menu/sub-menu.jsx b/src/components/shared/mobile-menu/sub-menu/sub-menu.jsx
index 0d3f50be..18161081 100644
--- a/src/components/shared/mobile-menu/sub-menu/sub-menu.jsx
+++ b/src/components/shared/mobile-menu/sub-menu/sub-menu.jsx
@@ -1,20 +1,52 @@
+import clsx from 'clsx';
 import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
 
 import Button from 'components/shared/button';
+import Link from 'components/shared/link';
+import LINKS from 'constants/links';
+import useScrollStatus from 'hooks/use-scroll-status';
 import ChevronIcon from 'icons/chevron-small.inline.svg';
 
-const SubMenu = ({ children, isOpen, setIsOpen }) => {
+const ANIMATION_DURATION = 0.2;
+
+const variants = {
+  hidden: {
+    height: 0,
+    opacity: 0,
+    transition: {
+      duration: ANIMATION_DURATION,
+    },
+  },
+  visible: {
+    height: 'auto',
+    opacity: 1,
+    transition: {
+      duration: ANIMATION_DURATION,
+    },
+  },
+};
+
+const SubMenu = ({ currentMenu, handleOpenMenu, isBanner }) => {
+  const [openSubMenu, setOpenSubMenu] = useState('');
+  const { isScrolledToBottom, hasScroll, handleScroll } = useScrollStatus();
+
   const handleCloseButton = () => {
-    setIsOpen(false);
+    setOpenSubMenu('');
+    handleOpenMenu(null);
+  };
+
+  const handleOpenSubMenu = (label) => {
+    setOpenSubMenu((current) => (current === label ? '' : label));
   };
 
   return (
     <LazyMotion features={domAnimation}>
       <AnimatePresence>
-        {isOpen && (
+        {currentMenu && (
           <m.div
-            className="absolute inset-0 z-50"
+            className="absolute inset-0 z-50 hidden sm:block"
             initial={{
               opacity: 0,
             }}
@@ -29,14 +61,114 @@ const SubMenu = ({ children, isOpen, setIsOpen }) => {
             }}
           >
             <Button
-              className="fixed top-0 left-7 h-16 w-28 flex items-center !justify-start gap-x-1 !normal-case text-xl font-normal bg-black sm:h-[56px] sm:left-4 sm:text-[15px]"
+              className={clsx(
+                'fixed inset-x-0 z-10 flex h-16 w-full items-center !justify-start gap-x-1 !rounded-none border-b border-b-gray-2 !bg-black px-5 text-sm font-normal !normal-case',
+                isBanner ? 'top-11' : 'top-0'
+              )}
               type="button"
               onClick={handleCloseButton}
             >
-              <ChevronIcon className="w-3.5 h-3.5 rotate-90" />
+              <ChevronIcon className="mr-1 h-3.5 w-3.5 rotate-90" />
               Back
             </Button>
-            <ul className="h-full bg-black overflow-x-hidden overflow-y-scroll">{children}</ul>
+            <ul
+              className={clsx(
+                'h-full overflow-x-hidden overflow-y-scroll bg-black px-5',
+                hasScroll &&
+                  !isScrolledToBottom &&
+                  'after:pointer-events-none after:fixed after:inset-x-4 after:bottom-[88px] after:top-16 after:z-50 after:bg-[linear-gradient(180deg,#05050B00_92.46%,#05050B_100%)] xs:after:bottom-[142px]'
+              )}
+              onScroll={handleScroll}
+            >
+              {currentMenu?.items?.map(
+                ({ title, icon, image, description, items, to, target }, index) => (
+                  <li className="border-b border-b-gray-2 last:border-b-0" key={index}>
+                    <Link
+                      className="flex w-full items-center justify-between py-5 text-left text-base leading-none"
+                      tag={to ? null : 'button'}
+                      to={to}
+                      theme="white"
+                      target={target}
+                      onClick={to ? null : () => handleOpenSubMenu(title)}
+                    >
+                      <span
+                        className={clsx(
+                          'flex items-center gap-x-2.5',
+                          image && 'w-full flex-col gap-y-3.5'
+                        )}
+                      >
+                        {image && (
+                          <img
+                            className="h-auto w-full rounded-md border border-[#333347]/20"
+                            src={image}
+                            alt=""
+                            width={294}
+                            height={164}
+                          />
+                        )}
+                        {icon && <img src={icon} width={36} height={36} alt="" loading="lazy" />}
+                        <span className="flex w-full flex-col items-start gap-y-2">
+                          <span className={clsx(image && 'leading-snug')}>{title}</span>
+                          {description && (
+                            <span
+                              className={clsx(
+                                'font-light text-gray-8',
+                                image ? 'mt-0.5 text-sm leading-normal' : 'text-[13px]'
+                              )}
+                            >
+                              {description}
+                            </span>
+                          )}
+                        </span>
+                      </span>
+                      {items && (
+                        <ChevronIcon
+                          className={clsx(
+                            'size-3.5 -rotate-90 transition-transform duration-200',
+                            openSubMenu === title && 'rotate-0'
+                          )}
+                        />
+                      )}
+                    </Link>
+                    <AnimatePresence>
+                      {openSubMenu === title && (
+                        <m.div
+                          className="pb-[18px] pl-[22px]"
+                          initial="hidden"
+                          animate="visible"
+                          exit="hidden"
+                          variants={variants}
+                        >
+                          <ul className="-mt-2 flex flex-col gap-y-3">
+                            {items.map(({ title, icon, to }, index) => (
+                              <li key={index}>
+                                <Link
+                                  className="flex items-center gap-x-2"
+                                  to={to}
+                                  target={target}
+                                  theme="gray-9"
+                                >
+                                  <img src={icon} alt="" width={16} height={16} />
+                                  {title}
+                                </Link>
+                              </li>
+                            ))}
+                          </ul>
+                        </m.div>
+                      )}
+                    </AnimatePresence>
+                  </li>
+                )
+              )}
+              {(currentMenu?.label === 'developers' || currentMenu?.label === 'resources') && (
+                <li className="flex flex-col items-center justify-between gap-y-3 rounded-lg border-t border-t-[#333347]/50 p-6 pt-[23px] text-base font-light leading-none text-gray-9">
+                  <span>Any questions? We&apos;re here to help</span>
+                  <Link className="text-[15px]" theme="primary" withArrow {...LINKS.contactUsCTA}>
+                    Contact us
+                  </Link>
+                </li>
+              )}
+            </ul>
           </m.div>
         )}
       </AnimatePresence>
@@ -44,4 +176,16 @@ const SubMenu = ({ children, isOpen, setIsOpen }) => {
   );
 };
 
+SubMenu.propTypes = {
+  currentMenu: PropTypes.shape({
+    items: PropTypes.array,
+    label: PropTypes.string,
+  }),
+  isBanner: PropTypes.bool.isRequired,
+};
+
+SubMenu.defaultProps = {
+  currentMenu: null,
+};
+
 export default SubMenu;
diff --git a/src/components/shared/mobile-menu/tablet-menu/index.js b/src/components/shared/mobile-menu/tablet-menu/index.js
new file mode 100644
index 00000000..18270ac8
--- /dev/null
+++ b/src/components/shared/mobile-menu/tablet-menu/index.js
@@ -0,0 +1,3 @@
+import TabletMenu from './tablet-menu';
+
+export default TabletMenu;
diff --git a/src/components/shared/mobile-menu/tablet-menu/tablet-menu.jsx b/src/components/shared/mobile-menu/tablet-menu/tablet-menu.jsx
new file mode 100644
index 00000000..6983bfab
--- /dev/null
+++ b/src/components/shared/mobile-menu/tablet-menu/tablet-menu.jsx
@@ -0,0 +1,165 @@
+import clsx from 'clsx';
+import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Link from 'components/shared/link';
+import LINKS from 'constants/links';
+
+const ANIMATION_DURATION = 0.2;
+
+const variants = {
+  hidden: {
+    height: 0,
+    opacity: 0,
+    transition: {
+      duration: ANIMATION_DURATION,
+    },
+  },
+  visible: {
+    height: 'auto',
+    opacity: 1,
+    transition: {
+      duration: ANIMATION_DURATION,
+    },
+  },
+};
+
+const TabletMenu = ({ openMenu, label }) => (
+  <LazyMotion features={domAnimation}>
+    <AnimatePresence>
+      {openMenu?.label === label && (
+        <m.div
+          className="sm:hidden"
+          initial="hidden"
+          animate="visible"
+          exit="hidden"
+          variants={variants}
+        >
+          <ul
+            className={clsx('relative z-20 mb-2.5 gap-2', {
+              'grid grid-cols-[328px_1fr] grid-rows-[261px_186px_106px]':
+                openMenu.label === 'product',
+              'flex flex-col': openMenu.label === 'developers' || openMenu.label === 'resources',
+            })}
+          >
+            {openMenu?.items.map(({ title, description, icon, image, to, items }, index) => {
+              const itemTitle = (
+                <>
+                  {image ? (
+                    <img
+                      className="rounded-md border border-[#333347]/20"
+                      src={image}
+                      alt=""
+                      width={294}
+                      height={164}
+                    />
+                  ) : (
+                    <img src={icon} alt="" width={44} height={44} />
+                  )}
+                  <span className={clsx('flex flex-col items-start gap-y-2', image && 'pr-9')}>
+                    <span
+                      className={clsx(
+                        'text-lg text-current',
+                        image ? 'leading-snug' : 'whitespace-nowrap leading-none'
+                      )}
+                    >
+                      {title}
+                    </span>
+                    <span
+                      className={clsx(
+                        'text-gray-8',
+                        image
+                          ? 'line-clamp-3 text-sm leading-normal'
+                          : 'whitespace-nowrap text-base leading-none'
+                      )}
+                    >
+                      {description}
+                    </span>
+                  </span>
+                </>
+              );
+
+              return (
+                <li
+                  className={clsx(
+                    'rounded-lg border border-[#333347]/50 bg-[#12121C]/50 p-6 pt-[22px]',
+                    {
+                      'col-span-full': index === 0,
+                      'row-span-2 row-start-2': index === 1,
+                      '!py-[30px]': index === 3,
+                    }
+                  )}
+                  key={index}
+                >
+                  {to ? (
+                    <Link
+                      className={clsx('flex items-center', image ? 'gap-x-[19px]' : 'gap-x-3')}
+                      theme="white"
+                      to={to}
+                    >
+                      {itemTitle}
+                    </Link>
+                  ) : (
+                    <>
+                      <p className="flex items-center gap-x-3 text-white">{itemTitle}</p>
+                      <ul
+                        className={clsx('mt-8 grid gap-y-[18px]', {
+                          'grid-cols-2 gap-x-2': index === 0,
+                        })}
+                      >
+                        {items.map(({ title, icon, ...linkProps }, index) => (
+                          <li key={index}>
+                            <Link
+                              className="flex items-center gap-x-3 whitespace-nowrap font-light leading-none outline-none"
+                              size="base"
+                              theme="gray-9"
+                              {...linkProps}
+                            >
+                              <img className="shrink-0" src={icon} alt="" width={20} height={20} />
+                              {title}
+                            </Link>
+                          </li>
+                        ))}
+                      </ul>
+                    </>
+                  )}
+                </li>
+              );
+            })}
+            {(openMenu.label === 'developers' || openMenu.label === 'resources') && (
+              <li className="flex items-center justify-between rounded-lg border border-[#333347]/50 bg-[#12121C]/50 p-6 pt-[23px] text-base font-light leading-none text-gray-9">
+                <span>Any questions? We&apos;re here to help</span>
+                <Link className="text-[15px]" theme="primary" withArrow {...LINKS.contactUsCTA}>
+                  Contact us
+                </Link>
+              </li>
+            )}
+          </ul>
+        </m.div>
+      )}
+    </AnimatePresence>
+  </LazyMotion>
+);
+
+TabletMenu.propTypes = {
+  openMenu: PropTypes.shape({
+    items: PropTypes.shape({
+      title: PropTypes.string,
+      description: PropTypes.string,
+      icon: PropTypes.string,
+      image: PropTypes.string,
+      to: PropTypes.string,
+      items: PropTypes.array,
+    }),
+    label: PropTypes.string,
+  }),
+  label: PropTypes.string,
+};
+
+TabletMenu.defaultProps = {
+  openMenu: '',
+  label: '',
+};
+
+export default TabletMenu;
diff --git a/src/constants/links.js b/src/constants/links.js
index a09c7923..e2089259 100644
--- a/src/constants/links.js
+++ b/src/constants/links.js
@@ -61,6 +61,8 @@ export default {
   embedComponent: { to: '/inbox' },
   endUserPreferences: { to: 'https://docs.novu.co/concepts/preferences' },
   // observability: { to: '/' }, -> We need to add this page
+  userPreferences: { to: '/inbox/react/components/preferences?' },
+  framework: { to: 'https://docs.novu.co/framework/overview' },
 
   // Providers
   sendgrid: { to: 'https://docs.novu.co/integrations/providers/email/sendgrid' },
@@ -71,7 +73,7 @@ export default {
   slack: { to: 'https://docs.novu.co/integrations/providers/chat/slack' },
   mailgun: { to: 'https://docs.novu.co/integrations/providers/email/mailgun' },
   postmark: { to: 'https://docs.novu.co/integrations/providers/email/postmark' },
-  discord: { to: 'https://docs.novu.co/integrations/providers/chat/discord' },
+  // discord: { to: 'https://docs.novu.co/integrations/providers/chat/discord' }, // same name as social link
   sendinblue: { to: 'https://docs.novu.co/integrations/providers/email/sendinblue' },
 
   // Channels
@@ -259,4 +261,12 @@ export default {
   notificationDirectory: {
     to: 'https://notifications.directory?utm_campaign=website',
   },
+
+  // Blog posts
+  howToNotificationsReact: {
+    to: '/blog/how-to-add-real-time-notifications-to-a-react-app',
+  },
+  futureOfNovu: {
+    to: '/blog/the-future-of-novu/',
+  },
 };
diff --git a/src/constants/menus.js b/src/constants/menus.js
index 8fcb5a7a..2ed39fb1 100644
--- a/src/constants/menus.js
+++ b/src/constants/menus.js
@@ -1,12 +1,35 @@
 import LINKS from 'constants/links.js';
+import ApiIcon from 'images/header/api-icon.svg';
+import BlogIcon from 'images/header/blog-icon.svg';
 import ChannelsIcon from 'images/header/channels-icon.svg';
-import DocumentationIcon from 'images/header/documentation-icon.svg';
+import ChatIcon from 'images/header/chat-icon.svg';
+import ComponentIcon from 'images/header/component-icon.svg';
+import ContentIcon from 'images/header/content-icon.svg';
+import DeveloperIcon from 'images/header/developer-icon.svg';
+import DiscordIcon from 'images/header/discord-icon.svg';
+import DocsIcon from 'images/header/docs-icon.svg';
+import EmailIcon from 'images/header/email-icon.svg';
 import FeaturesIcon from 'images/header/features-icon.svg';
-import FrameworksIcon from 'images/header/frameworks-icon.svg';
+import FrameworkIcon from 'images/header/framework-icon.svg';
 import GettingStartedIcon from 'images/header/getting-started-icon.svg';
-import GuidesIcon from 'images/header/guides-icon.svg';
+import GuideIcon from 'images/header/guide-icon.svg';
+import InAppIcon from 'images/header/in-app-icon.svg';
+import JoinUsIcon from 'images/header/join-us-icon.svg';
+import LibraryIcon from 'images/header/library-icon.svg';
+import NewsIcon from 'images/header/news-icon.svg';
+import OpenSourceIcon from 'images/header/open-source-icon.svg';
 import ProvidersIcon from 'images/header/providers-icon.svg';
+import PushIcon from 'images/header/push-icon.svg';
+import SecurityIcon from 'images/header/security-icon.svg';
+import SmsIcon from 'images/header/sms-icon.svg';
+import SubscriberIcon from 'images/header/subscriber-icon.svg';
+import TeamCommunityIcon from 'images/header/team-community-icon.svg';
 import UseCasesIcon from 'images/header/use-cases-icon.svg';
+import UserIcon from 'images/header/user-icon.svg';
+import WorkflowDigestIcon from 'images/header/workflow-digest-icon.svg';
+
+import futureOfNovuImage from '../images/header/future-of-novu.jpg';
+import notificationHowToImage from '../images/header/notification-how-to.jpg';
 
 const MENUS = {
   header: [
@@ -16,99 +39,99 @@ const MENUS = {
         label: 'product',
         items: [
           {
-            title: 'Use Cases',
-            description: "How you'll use Novu",
-            icon: UseCasesIcon,
-            items: [
-              { title: 'Multichannel Notifications', ...LINKS.multichannelNotifications },
-              { title: 'Add notifications to your app', ...LINKS.notifications },
-              { title: 'Improve user communication experience', ...LINKS.communication },
-              { title: 'Unified notification platform', ...LINKS.notificationPlatform },
-              { title: 'Notification content management', ...LINKS.notificationContentManagement },
-            ],
-          },
-          {
-            title: '<Inbox /> Components',
-            description: 'What Novu can do',
+            title: 'Features',
+            description: 'Comprehensive solutions',
             icon: FeaturesIcon,
             items: [
-              { title: '<Inbox /> overview', to: '/inbox?utm_campaign=ws_top_nav' },
               {
-                title: 'React components',
-                to: 'https://docs.novu.co/inbox/react/components/overview?utm_campaign=ws_top_nav',
+                title: 'Inbox and In-App Components',
+                icon: ComponentIcon,
+                to: '/inbox/?utm_campaign=ws_nav',
               },
               {
-                title: '<Bell /> component',
-                to: 'https://docs.novu.co/inbox/react/components/bell?utm_campaign=ws_top_nav',
+                title: 'Subscriber management',
+                icon: SubscriberIcon,
+                to: 'https://docs.novu.co/concepts/subscribers?utm_campaign=ws_nav',
               },
               {
-                title: 'In-app <Notifications />',
-                to: 'https://docs.novu.co/inbox/react/components/notifications?utm_campaign=ws_top_nav',
+                title: 'User preferences',
+                icon: UserIcon,
+                to: '/inbox/react/components/preferences?utm_campaign=ws_nav',
               },
+              { title: 'Digest', icon: WorkflowDigestIcon, to: '/digest/?utm_campaign=ws_nav' },
               {
-                title: 'User <Preferences />',
-                to: 'https://docs.novu.co/inbox/react/components/preferences?utm_campaign=ws_top_nav',
+                title: 'Workflows',
+                icon: WorkflowDigestIcon,
+                to: 'https://docs.novu.co/workflows/notification-workflows?utm_campaign=ws_nav',
               },
+              { title: 'Framework', icon: FrameworkIcon, to: '/framework?utm_campaign=ws_nav' },
               {
-                title: 'React Native',
-                to: 'https://docs.novu.co/inbox/react/hooks/overview?utm_campaign=ws_top_nav',
+                title: 'Notification content management',
+                icon: ContentIcon,
+                to: 'https://docs.novu.co/workflow/template-editor?utm_campaign=ws_nav',
               },
               {
-                title: 'Native JavaScript',
-                to: 'https://docs.novu.co/inbox/headless/get-started?utm_campaign=ws_top_bav',
+                title: 'Compliance and Security',
+                icon: SecurityIcon,
+                to: 'https://trust.novu.co/',
               },
-              {
-                title: '<Inbox /> playground',
-                to: 'https://inbox.novu.co?utm_campaign=top_nav',
-                target: '_blank',
-              },
-            ],
-          },
-          {
-            title: 'Providers',
-            description: 'Who Novu connects with',
-            icon: ProvidersIcon,
-            items: [
-              { title: 'Sendgrid', ...LINKS.sendgrid },
-              { title: 'FCM', ...LINKS.fcm },
-              { title: 'SES', ...LINKS.ses },
-              { title: 'Twilio', ...LINKS.twilio },
-              { title: 'Nodemailer', ...LINKS.nodemailer },
-              { title: 'Slack', ...LINKS.slack },
-              { title: 'Mailgun', ...LINKS.mailgun },
-              { title: 'Postmark', ...LINKS.postmark },
-              { title: 'Discord', ...LINKS.discord },
-              { title: 'Brevo', ...LINKS.sendinblue },
             ],
           },
           {
             title: 'Channels',
-            description: 'Where Novu integrates',
+            description: 'Ways to send notifications',
             icon: ChannelsIcon,
             items: [
-              { title: 'In-app', ...LINKS.inAppChannel },
-              { title: 'Push', ...LINKS.pushChannel },
-              { title: 'Email', ...LINKS.emailChannel },
-              { title: 'SMS', ...LINKS.smsChannel },
-              { title: 'Chat', ...LINKS.chatChannel },
-              // { title: 'Mobile*', ...LINKS.mobileChannel }, -> We don't have that page yet
+              {
+                title: 'In-app',
+                icon: InAppIcon,
+                to: 'https://docs.novu.co/integrations/providers/in-app/overview?utm_campaign=ws_nav',
+              },
+              {
+                title: 'Push',
+                icon: PushIcon,
+                to: 'https://docs.novu.co/integrations/providers/push/overview?utm_campaign=ws_nav',
+              },
+              {
+                title: 'E-mail',
+                icon: EmailIcon,
+                to: 'https://docs.novu.co/integrations/providers/email/overview?utm_campaign=ws_nav',
+              },
+              {
+                title: 'SMS',
+                icon: SmsIcon,
+                to: 'https://docs.novu.co/integrations/providers/sms/overview?utm_campaign=ws_nav',
+              },
+              {
+                title: 'Chat',
+                icon: ChatIcon,
+                to: 'https://docs.novu.co/integrations/providers/chat/overview?utm_campaign=ws_nav',
+              },
             ],
           },
           {
-            title: 'Frameworks',
-            description: 'What Novu builds on',
-            icon: FrameworksIcon,
+            title: 'Novu for',
+            description: 'Loved by Developers and Product Teams',
+            icon: ProvidersIcon,
             items: [
-              { title: 'Remix', ...LINKS.remix },
-              { title: 'NextJS', ...LINKS.nextjs },
-              { title: 'Nuxt', ...LINKS.nuxt },
-              { title: 'Svelte', ...LINKS.svelte },
-              { title: 'Express', ...LINKS.express },
-              { title: 'H3', ...LINKS.h3 },
-              // { title: 'Hono', ...LINKS.hono }, -> We don't have that page yet
-              // { title: 'Nest.js', ...LINKS.nestjs }, -> We don't have that page yet
+              {
+                title: 'Developers',
+                icon: DeveloperIcon,
+                to: 'https://docs.novu.co/getting-started/novu-for/developers?utm_campaign=ws_nav',
+              },
+              {
+                title: 'Product teams',
+                icon: TeamCommunityIcon,
+                to: 'https://docs.novu.co/getting-started/novu-for/product?utm_campaign=ws_nav',
+              },
             ],
           },
+          {
+            title: 'Use Cases',
+            description: "How you'll use Novu",
+            icon: UseCasesIcon,
+            to: 'usecases/?utm_campaign=ws_nav',
+          },
         ],
       },
     },
@@ -118,70 +141,94 @@ const MENUS = {
         label: 'developers',
         items: [
           {
-            title: 'Documentation',
-            icon: DocumentationIcon,
-            mobileOnly: true,
-            ...LINKS.documentation,
-          },
-          {
-            title: 'Getting started',
+            title: 'Get started',
+            description: 'Developer essentials',
             icon: GettingStartedIcon,
             items: [
-              { title: 'How-to guides', ...LINKS.howToGuides }, // We might consider changing it
-              { title: 'Libraries and SDKs', ...LINKS.librariesAndSdks },
-              { title: 'Integrations', ...LINKS.integrations },
+              { title: 'Docs', icon: DocsIcon, to: 'https://docs.novu.co?utm_campaign=ws_nav' },
+              {
+                title: 'API',
+                icon: ApiIcon,
+                to: 'https://docs.novu.co/api-reference/overview?utm_campaign=ws_nav',
+              },
+              {
+                title: 'Frameworks',
+                icon: FrameworkIcon,
+                to: 'https://docs.novu.co/sdks/overview?utm_campaign=ws_nav',
+              },
+              { title: "What's new", icon: NewsIcon, to: 'https://roadmap.novu.co/changelog' },
+              {
+                title: 'How to guides',
+                icon: GuideIcon,
+                to: 'hhttps://docs.novu.co/recipes/workflows/introduction?utm_campaign=ws_nav',
+              },
+              {
+                title: 'Components',
+                icon: ComponentIcon,
+                to: 'https://docs.novu.co/inbox/react/components/overview?utm_campaign=ws_nav',
+              },
+              {
+                title: 'Libraries and integrations',
+                icon: LibraryIcon,
+                to: 'https://docs.novu.co/sdks/overview?utm_campaign=ws_nav',
+              },
             ],
           },
           {
-            title: 'Code-first examples',
-            icon: GuidesIcon,
-            items: [{ title: 'Workflow examples', ...LINKS.preBuiltWorkflows }],
+            title: 'How to Add Real-Time Notifications to a React App',
+            description:
+              'A comprehensive guide for\ndevelopers on selecting notification\nplatforms',
+            image: notificationHowToImage,
+            to: '/blog/how-to-add-real-time-notifications-to-a-react-app?utm_campaign=ws_nav',
           },
+        ],
+      },
+    },
+    {
+      text: 'Resources',
+      menuItems: {
+        label: 'resources',
+        items: [
           {
+            title: 'Join us',
+            description: 'Explore opportunities',
+            icon: JoinUsIcon,
             items: [
-              {
-                title: 'Documentation',
-                withImage: true,
-                desktopOnly: true,
-                ...LINKS.documentation,
-              },
-              { title: 'Community', ...LINKS.community },
-              { title: 'API Reference', ...LINKS.apiReference },
-              { title: 'Changelog', ...LINKS.changeLog },
-              { title: 'System Status', ...LINKS.systemStatus },
-              { title: 'Discord', ...LINKS.discord },
+              { title: 'Blog', icon: BlogIcon, to: '/blog/?utm_campaign=ws_nav' },
+              { title: 'Discord', icon: DiscordIcon, ...LINKS.discord },
+              { title: 'Community', icon: TeamCommunityIcon, to: '/community?utm_campaign=ws_nav' },
+              { title: 'Open source', icon: OpenSourceIcon, to: 'https://github.com/novuhq' },
             ],
           },
+          {
+            title: 'The future of Novu',
+            description:
+              "Explore what's next for Novu, the open-\nsource notification infrastructure,\nincluding its innovative UI, code-first workflows, and seamless integration for delivering top-notch notification experiences.",
+            image: futureOfNovuImage,
+            to: 'https://roadmap.novu.co/roadmap',
+          },
         ],
       },
     },
-    {
-      text: 'Pricing',
-      ...LINKS.pricing,
-    },
-    {
-      text: 'Docs',
-      ...LINKS.documentation,
-    },
-    { text: 'Blog', ...LINKS.blog },
+    { text: 'Pricing', to: '/pricing?utm_campaign=ws_nav' },
+    { text: 'Docs', to: 'https://docs.novu.co/?utm_campaign=ws_nav' },
   ],
   footer: [
     [
-      { text: 'Blog', ...LINKS.blog },
-      { text: 'Community', ...LINKS.community },
-      { text: 'Contributors', ...LINKS.contributors },
-      { text: 'Pricing', ...LINKS.pricing },
+      { text: 'Blog', to: '/blog/?utm_campaign=ws_nav_bottom' },
+      { text: 'Community', to: '/community/?utm_campaign=ws_nav_bottom' },
+      { text: 'Contributors', to: '/contributors/?utm_campaign=ws_nav_bottom' },
+      { text: 'Pricing', to: '/pricing/?utm_campaign=ws_nav_bottom' },
       { text: 'Careers', ...LINKS.careers },
-      { text: 'OSS Friends', ...LINKS.ossFriends },
+      { text: 'OSS Friends', to: '/oss-friends/?utm_campaign=ws_nav_bottom' },
     ],
     [
-      { text: 'Documentation', ...LINKS.documentation },
-      { text: 'Roadmap', ...LINKS.roadmapPage },
-      { text: 'Changelog', ...LINKS.changeLog },
-      { text: 'Providers', ...LINKS.providers },
+      { text: 'Documentation', to: 'https://docs.novu.co/?utm_campaign=ws_nav_bottom' },
+      { text: 'Roadmap', to: 'https://roadmap.novu.co/roadmap' },
+      { text: 'Changelog', to: 'https://roadmap.novu.co/' },
+      { text: 'Providers', to: '' },
       { text: 'Handbook', ...LINKS.handbook },
-      { text: 'Contact Us', ...LINKS.discord },
-      { text: 'Press Kit', ...LINKS.pressKit },
+      { text: 'Contact Us', to: 'https://novu.co/contact-us/?utm_campaign=ws_nav_bottom' },
     ],
     [
       { text: 'Discord', ...LINKS.discord },
diff --git a/src/hooks/use-scroll-status.js b/src/hooks/use-scroll-status.js
new file mode 100644
index 00000000..d003f054
--- /dev/null
+++ b/src/hooks/use-scroll-status.js
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+const useScrollStatus = () => {
+  const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
+  const [hasScroll, setHasScroll] = useState(false);
+
+  const handleScroll = (e) => {
+    const isScrollable = e.target.scrollHeight > e.target.clientHeight;
+    setHasScroll(isScrollable);
+
+    const bottom = Math.abs(e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight) < 1;
+    setIsScrolledToBottom(bottom);
+  };
+
+  return {
+    isScrolledToBottom,
+    hasScroll,
+    handleScroll,
+  };
+};
+
+export default useScrollStatus;
diff --git a/src/images/header/api-icon.svg b/src/images/header/api-icon.svg
new file mode 100644
index 00000000..a91ca1e5
--- /dev/null
+++ b/src/images/header/api-icon.svg
@@ -0,0 +1,19 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6328 11.3179C16.1263 11.0282 15.5412 10.9062 14.9611 10.9694C14.3811 11.0326 13.8359 11.2777 13.4037 11.6697C12.9715 12.0616 12.6744 12.5803 12.555 13.1514C12.4356 13.7225 12.5 14.3168 12.739 14.8491C11.8047 15.5448 10.6712 15.9212 9.5063 15.9226C9.09182 15.9193 8.67904 15.8693 8.2758 15.7734C7.94104 16.5057 7.4311 17.1444 6.79102 17.6329C8.06209 18.1167 9.43928 18.2524 10.7803 18.026C12.1214 17.7995 13.3777 17.2192 14.4195 16.3449C15.0676 16.5455 15.7669 16.5007 16.3842 16.219C17.0014 15.9374 17.4935 15.4385 17.7667 14.8174C18.0398 14.1963 18.075 13.4965 17.8655 12.8512C17.656 12.2058 17.2165 11.6601 16.6306 11.3179H16.6328Z" fill="url(#paint0_linear_24490_61460)"/>
+<path d="M12.1971 3.14155C12.0547 2.52557 11.7055 1.97701 11.2076 1.58736C10.7098 1.1977 10.0934 0.990513 9.46123 1.00033C8.82909 1.01015 8.21942 1.23639 7.7339 1.64132C7.24838 2.04625 6.91635 2.6054 6.79319 3.2255C6.67003 3.84561 6.76318 4.4892 7.05711 5.04893C7.35104 5.60867 7.82798 6.05072 8.4084 6.30137C8.98881 6.55201 9.6376 6.5961 10.2466 6.42628C10.8556 6.25646 11.3879 5.88299 11.7549 5.36817C12.4681 5.69132 13.1049 6.16152 13.6237 6.74796C14.1425 7.3344 14.5316 8.02384 14.7654 8.77112C14.929 8.75167 15.0936 8.74059 15.2584 8.73795C15.9029 8.73814 16.5412 8.86355 17.1379 9.10721C16.9086 7.76735 16.3316 6.51116 15.4646 5.46425C14.5975 4.41734 13.4708 3.61641 12.1971 3.14155Z" fill="url(#paint1_linear_24490_61460)"/>
+<path d="M6.15563 12.3305C5.93493 11.9487 5.6257 11.6254 5.25399 11.388C4.88227 11.1506 4.45895 11.0059 4.01966 10.9663C3.99539 10.777 3.98174 10.5866 3.97876 10.3958C3.98219 9.00237 4.5149 7.66229 5.46907 6.6468C4.9999 5.98675 4.70067 5.22122 4.59788 4.41797C3.71309 5.14279 3.00025 6.05499 2.51081 7.08875C2.02137 8.1225 1.76753 9.25203 1.76762 10.3958C1.77148 10.8282 1.81217 11.2594 1.88923 11.6849C1.50659 12.0381 1.23151 12.4922 1.09568 12.9949C0.959852 13.4976 0.968803 14.0285 1.1215 14.5263C1.2742 15.0242 1.56443 15.4688 1.95876 15.8089C2.3531 16.149 2.83548 16.3707 3.35036 16.4487C3.86523 16.5266 4.39165 16.4575 4.86895 16.2493C5.34626 16.0411 5.75505 15.7023 6.04822 15.2719C6.34139 14.8415 6.50701 14.3371 6.52602 13.8167C6.54502 13.2963 6.41663 12.7812 6.15563 12.3305Z" fill="url(#paint2_linear_24490_61460)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_61460" x1="12.3958" y1="10.9531" x2="12.3958" y2="18.1326" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_24490_61460" x1="11.9391" y1="1" x2="11.9391" y2="9.10721" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint2_linear_24490_61460" x1="3.76393" y1="4.41797" x2="3.76393" y2="16.4798" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/blog-icon.svg b/src/images/header/blog-icon.svg
new file mode 100644
index 00000000..853aa7ff
--- /dev/null
+++ b/src/images/header/blog-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6667 2H3.66667C3.29867 2 3 2.29867 3 2.66667V17.3333C3 17.7013 3.29867 18 3.66667 18H15.6667C16.0347 18 16.3333 17.7013 16.3333 17.3333V2.66667C16.3333 2.29867 16.0347 2 15.6667 2ZM13.6667 15C13.6667 15.184 13.5173 15.3333 13.3333 15.3333H6C5.816 15.3333 5.66667 15.184 5.66667 15V14.3333C5.66667 14.1493 5.816 14 6 14H13.3333C13.5173 14 13.6667 14.1493 13.6667 14.3333V15ZM13.6667 11.6667C13.6667 11.8507 13.5173 12 13.3333 12H6C5.816 12 5.66667 11.8507 5.66667 11.6667V11C5.66667 10.816 5.816 10.6667 6 10.6667H13.3333C13.5173 10.6667 13.6667 10.816 13.6667 11V11.6667ZM13.6667 8.33333C13.6667 8.51733 13.5173 8.66667 13.3333 8.66667H6C5.816 8.66667 5.66667 8.51733 5.66667 8.33333V5C5.66667 4.816 5.816 4.66667 6 4.66667H13.3333C13.5173 4.66667 13.6667 4.816 13.6667 5V8.33333Z" fill="url(#paint0_linear_24490_65963)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_65963" x1="9.66667" y1="2" x2="9.66667" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/channels-icon.svg b/src/images/header/channels-icon.svg
index 25e87344..84dc5d7d 100644
--- a/src/images/header/channels-icon.svg
+++ b/src/images/header/channels-icon.svg
@@ -1,45 +1,46 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_19547_30251)">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" fill="#1A1A1A" stroke="#262626"/>
-<mask id="mask0_19547_30251" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" stroke="#262626"/>
-</mask>
-<g mask="url(#mask0_19547_30251)">
-<g opacity="0.25" filter="url(#filter0_f_19547_30251)">
-<circle cx="18" cy="18" r="15" fill="#F0B84C"/>
-</g>
-</g>
-<g opacity="0.1" filter="url(#filter1_f_19547_30251)">
-<circle cx="18" cy="18" r="15" fill="#F0B84C"/>
-</g>
-<g opacity="0.4" filter="url(#filter2_f_19547_30251)">
-<circle cx="18" cy="18" r="6" fill="#F0B84C"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3846 12.3919C19.5536 12.1406 22.2574 11.3614 24.6578 10.4162V21.2656C22.2574 20.3203 19.5536 19.5411 15.3846 19.2899V12.3919ZM26.6129 22.084C26.3207 21.957 26.0287 21.8309 25.7348 21.7066V9.97515C26.0287 9.85085 26.3207 9.7248 26.6129 9.5977C26.7496 9.53822 26.9001 9.51198 27.0504 9.52141C27.2008 9.53083 27.3462 9.57562 27.4733 9.65164C27.6003 9.72765 27.7048 9.83245 27.7773 9.95635C27.8497 10.0802 27.8877 10.2193 27.8877 10.3605V21.3212C27.8877 21.4625 27.8497 21.6015 27.7773 21.7254C27.7048 21.8493 27.6003 21.9541 27.4733 22.0301C27.3462 22.1061 27.2008 22.1509 27.0504 22.1603C26.9001 22.1698 26.7496 22.1435 26.6129 22.084ZM14.3077 12.4436C13.7741 12.4629 13.2179 12.4742 12.6369 12.4766H10.8036C10.0898 12.4766 9.4053 12.7425 8.90058 13.2157C8.39585 13.6888 8.1123 14.3306 8.1123 14.9998V16.6819C8.1123 17.3511 8.39585 17.9929 8.90058 18.4661C9.4053 18.9393 10.0898 19.2051 10.8036 19.2051H12.6369C13.2179 19.2076 13.7741 19.2188 14.3077 19.2382V12.4436ZM14.3496 20.2801V24.7151C14.3496 25.5772 13.6508 26.276 12.7887 26.276C11.9266 26.276 11.2277 25.5772 11.2277 24.7151V20.2801H14.3496Z" fill="#F0B84C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3846 12.3919C19.5536 12.1406 22.2574 11.3614 24.6578 10.4162V21.2656C22.2574 20.3203 19.5536 19.5411 15.3846 19.2899V12.3919ZM26.6129 22.084C26.3207 21.957 26.0287 21.8309 25.7348 21.7066V9.97515C26.0287 9.85085 26.3207 9.7248 26.6129 9.5977C26.7496 9.53822 26.9001 9.51198 27.0504 9.52141C27.2008 9.53083 27.3462 9.57562 27.4733 9.65164C27.6003 9.72765 27.7048 9.83245 27.7773 9.95635C27.8497 10.0802 27.8877 10.2193 27.8877 10.3605V21.3212C27.8877 21.4625 27.8497 21.6015 27.7773 21.7254C27.7048 21.8493 27.6003 21.9541 27.4733 22.0301C27.3462 22.1061 27.2008 22.1509 27.0504 22.1603C26.9001 22.1698 26.7496 22.1435 26.6129 22.084ZM14.3077 12.4436C13.7741 12.4629 13.2179 12.4742 12.6369 12.4766H10.8036C10.0898 12.4766 9.4053 12.7425 8.90058 13.2157C8.39585 13.6888 8.1123 14.3306 8.1123 14.9998V16.6819C8.1123 17.3511 8.39585 17.9929 8.90058 18.4661C9.4053 18.9393 10.0898 19.2051 10.8036 19.2051H12.6369C13.2179 19.2076 13.7741 19.2188 14.3077 19.2382V12.4436ZM14.3496 20.2801V24.7151C14.3496 25.5772 13.6508 26.276 12.7887 26.276C11.9266 26.276 11.2277 25.5772 11.2277 24.7151V20.2801H14.3496Z" fill="url(#paint0_linear_19547_30251)" fill-opacity="0.1" style="mix-blend-mode:plus-lighter"/>
-</g>
-<defs>
-<filter id="filter0_f_19547_30251" x="-13" y="-13" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30251"/>
-</filter>
-<filter id="filter1_f_19547_30251" x="-27" y="-27" width="90" height="90" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_19547_30251"/>
-</filter>
-<filter id="filter2_f_19547_30251" x="-4" y="-4" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30251"/>
-</filter>
-<linearGradient id="paint0_linear_19547_30251" x1="22.9438" y1="26.7415" x2="14.4938" y2="8.79106" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-<clipPath id="clip0_19547_30251">
-<rect width="36" height="36" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
+  <g clip-path="url(#clip0_24490_56906)">
+    <rect width="44" height="44" rx="4" fill="#0B0B0F"/>
+    <rect x="0.5" y="0.5" width="43" height="43" rx="3.5" stroke="#333347" stroke-opacity="0.3"/>
+    <mask id="mask0_24490_56906" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="44" height="44">
+      <rect x="0.5" y="0.5" width="43" height="43" rx="3.5" stroke="#333347" stroke-opacity="0.3"/>
+    </mask>
+    <g mask="url(#mask0_24490_56906)">
+      <g opacity="0.25" filter="url(#filter0_f_24490_56906)">
+        <circle cx="22" cy="22" r="15" fill="#F0B84C"/>
+      </g>
+    </g>
+    <g opacity="0.1" filter="url(#filter1_f_24490_56906)">
+      <circle cx="22" cy="22" r="19" fill="#F0B84C"/>
+    </g>
+    <g opacity="0.4" filter="url(#filter2_f_24490_56906)">
+      <circle cx="21.9996" cy="21.9996" r="7.7027" fill="#F0B84C"/>
+    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.683 15.1505C23.9152 14.8472 27.2683 13.8673 30.2545 12.682V26.0358C27.2683 24.8505 23.9152 23.8706 18.683 23.5673V15.1505ZM32.5259 26.9894C32.1286 26.8167 31.7317 26.6454 31.3315 26.477V12.2408C31.7317 12.0724 32.1286 11.9011 32.5259 11.7284C32.693 11.6557 32.8769 11.6236 33.0607 11.6351C33.2445 11.6466 33.4222 11.7014 33.5774 11.7943C33.7327 11.8872 33.8605 12.0153 33.949 12.1667C34.0376 12.3181 34.084 12.488 34.084 12.6607V26.0571C34.084 26.2298 34.0376 26.3997 33.949 26.5511C33.8605 26.7025 33.7327 26.8306 33.5774 26.9235C33.4222 27.0164 33.2445 27.0712 33.0607 27.0827C32.8769 27.0942 32.693 27.0621 32.5259 26.9894ZM17.606 15.2022C16.9175 15.2286 16.1979 15.2439 15.4441 15.2471H13.2035C12.3311 15.2471 11.4944 15.572 10.8775 16.1503C10.2606 16.7286 9.91406 17.513 9.91406 18.3309V20.3869C9.91406 21.2048 10.2606 21.9892 10.8775 22.5675C11.4944 23.1458 12.3311 23.4707 13.2035 23.4707H15.4441C16.1979 23.4739 16.9175 23.4892 17.606 23.5156V15.2022ZM17.5383 24.7852V30.2056C17.5383 31.2593 16.6841 32.1135 15.6305 32.1135C14.5768 32.1135 13.7227 31.2593 13.7227 30.2056V24.7852H17.5383Z" fill="#F0B84C"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.683 15.1505C23.9152 14.8472 27.2683 13.8673 30.2545 12.682V26.0358C27.2683 24.8505 23.9152 23.8706 18.683 23.5673V15.1505ZM32.5259 26.9894C32.1286 26.8167 31.7317 26.6454 31.3315 26.477V12.2408C31.7317 12.0724 32.1286 11.9011 32.5259 11.7284C32.693 11.6557 32.8769 11.6236 33.0607 11.6351C33.2445 11.6466 33.4222 11.7014 33.5774 11.7943C33.7327 11.8872 33.8605 12.0153 33.949 12.1667C34.0376 12.3181 34.084 12.488 34.084 12.6607V26.0571C34.084 26.2298 34.0376 26.3997 33.949 26.5511C33.8605 26.7025 33.7327 26.8306 33.5774 26.9235C33.4222 27.0164 33.2445 27.0712 33.0607 27.0827C32.8769 27.0942 32.693 27.0621 32.5259 26.9894ZM17.606 15.2022C16.9175 15.2286 16.1979 15.2439 15.4441 15.2471H13.2035C12.3311 15.2471 11.4944 15.572 10.8775 16.1503C10.2606 16.7286 9.91406 17.513 9.91406 18.3309V20.3869C9.91406 21.2048 10.2606 21.9892 10.8775 22.5675C11.4944 23.1458 12.3311 23.4707 13.2035 23.4707H15.4441C16.1979 23.4739 16.9175 23.4892 17.606 23.5156V15.2022ZM17.5383 24.7852V30.2056C17.5383 31.2593 16.6841 32.1135 15.6305 32.1135C14.5768 32.1135 13.7227 31.2593 13.7227 30.2056V24.7852H17.5383Z" fill="url(#paint0_linear_24490_56906)" fill-opacity="0.1" style="mix-blend-mode:plus-lighter"/>
+  </g>
+  <defs>
+    <filter id="filter0_f_24490_56906" x="-9" y="-9" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_24490_56906"/>
+    </filter>
+    <filter id="filter1_f_24490_56906" x="-27" y="-27" width="98" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_24490_56906"/>
+    </filter>
+    <filter id="filter2_f_24490_56906" x="-1.70312" y="-1.70312" width="47.4053" height="47.4062" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_24490_56906"/>
+    </filter>
+    <linearGradient id="paint0_linear_24490_56906" x1="28.0415" y1="32.6824" x2="17.7132" y2="10.7426" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="white"/>
+    </linearGradient>
+    <clipPath id="clip0_24490_56906">
+      <rect width="44" height="44" fill="white"/>
+    </clipPath>
+  </defs>
 </svg>
diff --git a/src/images/header/chat-icon.svg b/src/images/header/chat-icon.svg
new file mode 100644
index 00000000..fe33e2b7
--- /dev/null
+++ b/src/images/header/chat-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.67791 1.77344H13.837C14.0385 1.77344 14.2318 1.8535 14.3743 1.99602C14.5169 2.13854 14.5969 2.33183 14.5969 2.53338V10.8927C14.5969 11.0943 14.5169 11.2876 14.3743 11.4301C14.2318 11.5726 14.0385 11.6527 13.837 11.6527H9.57796C9.22707 11.6527 8.88728 11.7757 8.61771 12.0003L4.58089 15.3642C4.51283 15.4215 4.42665 15.4527 4.33771 15.4524C4.28205 15.4523 4.22709 15.4401 4.1766 15.4167C4.11116 15.386 4.05582 15.3374 4.01705 15.2764C3.97829 15.2154 3.95771 15.1447 3.95774 15.0724V11.6527H1.67791C1.47636 11.6527 1.28307 11.5726 1.14055 11.4301C0.998034 11.2876 0.917969 11.0943 0.917969 10.8927V2.53338C0.917969 2.33183 0.998034 2.13854 1.14055 1.99602C1.28307 1.8535 1.47636 1.77344 1.67791 1.77344ZM16.0437 5.30469H18.3236C18.5251 5.30469 18.7184 5.38475 18.8609 5.52727C19.0034 5.66979 19.0835 5.86308 19.0835 6.06463V14.424C19.0835 14.6255 19.0034 14.8188 18.8609 14.9613C18.7184 15.1039 18.5251 15.1839 18.3236 15.1839H16.0437V17.8437C16.0438 17.916 16.0232 17.9867 15.9844 18.0477C15.9457 18.1087 15.8903 18.1573 15.8249 18.188C15.7744 18.2114 15.7194 18.2236 15.6638 18.2237C15.5735 18.225 15.4858 18.1937 15.4168 18.1355L11.8747 15.1839H6.77246L9.36918 13.02C9.45904 12.9451 9.57231 12.9041 9.68927 12.9041H13.7639C14.3686 12.9041 14.9485 12.6639 15.376 12.2364C15.8036 11.8088 16.0437 11.2289 16.0437 10.6243V5.30469Z" fill="url(#paint0_linear_24490_56899)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56899" x1="10.8605" y1="2.04625" x2="10.8605" y2="18.7639" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/component-icon.svg b/src/images/header/component-icon.svg
new file mode 100644
index 00000000..aae2b762
--- /dev/null
+++ b/src/images/header/component-icon.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.2728 8.14315L14.839 4.49527C14.9076 4.45717 14.9076 4.35854 14.839 4.32044L8.58993 0.848746C8.47808 0.786548 8.35222 0.753906 8.22424 0.753906C8.09626 0.753906 7.97039 0.786548 7.85854 0.848746L1.6095 4.32044C1.54092 4.35854 1.54092 4.45717 1.6095 4.49527L8.17567 8.14315C8.20587 8.15992 8.2426 8.15992 8.2728 8.14315ZM7.47228 9.53205C7.47228 9.49573 7.45259 9.46227 7.42085 9.44463L0.84876 5.79347C0.782106 5.75644 0.700195 5.80464 0.700195 5.88089V13.5455C0.70019 13.6796 0.736044 13.8113 0.804045 13.927C0.872047 14.0426 0.969722 14.1379 1.08696 14.2031L7.32372 17.6677C7.39038 17.7047 7.47228 17.6565 7.47228 17.5803V9.53205ZM8.97656 9.5313C8.97656 9.49498 8.99625 9.46152 9.02801 9.44388L15.6001 5.79345C15.6667 5.75643 15.7487 5.80463 15.7487 5.88087V13.5447C15.7487 13.6789 15.7128 13.8106 15.6448 13.9262C15.5768 14.0418 15.4791 14.1372 15.3619 14.2024L9.12512 17.6669C9.05847 17.704 8.97656 17.6558 8.97656 17.5795V9.5313Z" fill="url(#paint0_linear_24490_56792)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56792" x1="8.22442" y1="0.753906" x2="8.22442" y2="17.6804" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/content-icon.svg b/src/images/header/content-icon.svg
new file mode 100644
index 00000000..b4a266ce
--- /dev/null
+++ b/src/images/header/content-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.71 13.1793V2.58152C16.71 2.39414 16.6356 2.21443 16.5031 2.08194C16.3706 1.94944 16.1909 1.875 16.0035 1.875H3.99265C3.80527 1.875 3.62557 1.94944 3.49307 2.08194C3.36057 2.21443 3.28613 2.39414 3.28613 2.58152V17.4185C3.28613 17.6059 3.36057 17.7856 3.49307 17.9181C3.62557 18.0506 3.80527 18.125 3.99265 18.125H11.7644V13.5326C11.7644 13.4389 11.8016 13.3491 11.8679 13.2828C11.9341 13.2166 12.024 13.1793 12.1177 13.1793H16.71ZM16.7097 14.4258H13.0127V18.1228L16.7097 14.4258ZM5 3.65625C4.72386 3.65625 4.5 3.88011 4.5 4.15625C4.5 4.43239 4.72386 4.65625 5 4.65625H11C11.2761 4.65625 11.5 4.43239 11.5 4.15625C11.5 3.88011 11.2761 3.65625 11 3.65625H5ZM5 6.65625C4.72386 6.65625 4.5 6.88011 4.5 7.15625C4.5 7.43239 4.72386 7.65625 5 7.65625H11C11.2761 7.65625 11.5 7.43239 11.5 7.15625C11.5 6.88011 11.2761 6.65625 11 6.65625H5ZM4.5 10.1562C4.5 9.88011 4.72386 9.65625 5 9.65625H7.5C7.77614 9.65625 8 9.88011 8 10.1562C8 10.4324 7.77614 10.6562 7.5 10.6562H5C4.72386 10.6562 4.5 10.4324 4.5 10.1562Z" fill="url(#paint0_linear_24490_56808)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56808" x1="9.99809" y1="1.875" x2="9.99809" y2="18.125" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/developer-icon.svg b/src/images/header/developer-icon.svg
new file mode 100644
index 00000000..8f01fd3b
--- /dev/null
+++ b/src/images/header/developer-icon.svg
@@ -0,0 +1,19 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_24490_56928)">
+<path d="M6.25031 16.2503C5.93031 16.2503 5.61031 16.1278 5.36656 15.8841L0.366562 10.8841C-0.122188 10.3953 -0.122188 9.60531 0.366562 9.11656L5.36656 4.11656C5.85531 3.62781 6.64531 3.62781 7.13406 4.11656C7.62281 4.60531 7.62281 5.39531 7.13406 5.88406L3.01781 10.0003L7.13406 14.1166C7.62281 14.6053 7.62281 15.3953 7.13406 15.8841C6.89031 16.1278 6.57031 16.2503 6.25031 16.2503Z" fill="url(#paint0_linear_24490_56928)"/>
+<path d="M13.7503 16.2503C13.4303 16.2503 13.1103 16.1278 12.8666 15.8841C12.3778 15.3953 12.3778 14.6053 12.8666 14.1166L16.9828 10.0003L12.8666 5.88406C12.3778 5.39531 12.3778 4.60531 12.8666 4.11656C13.3553 3.62781 14.1453 3.62781 14.6341 4.11656L19.6341 9.11656C20.1228 9.60531 20.1228 10.3953 19.6341 10.8841L14.6341 15.8841C14.3903 16.1278 14.0703 16.2503 13.7503 16.2503Z" fill="url(#paint1_linear_24490_56928)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_24490_56928" x1="3.75031" y1="3.75" x2="3.75031" y2="16.2503" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_24490_56928" x1="16.2503" y1="3.75" x2="16.2503" y2="16.2503" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<clipPath id="clip0_24490_56928">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/header/discord-icon.svg b/src/images/header/discord-icon.svg
new file mode 100644
index 00000000..e9bb45fd
--- /dev/null
+++ b/src/images/header/discord-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3214 4.08875C15.1506 3.58012 13.8987 3.21048 12.5899 3C12.4292 3.26983 12.2414 3.63275 12.1119 3.92145C10.7206 3.72718 9.34211 3.72718 7.97641 3.92145C7.84696 3.63275 7.65491 3.26983 7.49274 3C6.18252 3.21048 4.92921 3.58148 3.75841 4.09144C1.39689 7.40485 0.756722 10.636 1.07681 13.8212C2.64309 14.9072 4.161 15.567 5.6533 15.9987C6.02176 15.5278 6.35037 15.0273 6.63347 14.4998C6.09431 14.3096 5.57791 14.0748 5.08997 13.8023C5.21942 13.7133 5.34604 13.6202 5.46837 13.5244C8.44444 14.8168 11.678 14.8168 14.6185 13.5244C14.7423 13.6202 14.8689 13.7133 14.9969 13.8023C14.5076 14.0762 13.9897 14.3109 13.4506 14.5012C13.7337 15.0273 14.0609 15.5292 14.4307 16C15.9245 15.5683 17.4438 14.9086 19.0101 13.8212C19.3857 10.1287 18.3685 6.92726 16.3214 4.08875ZM7.03892 11.8623C6.14553 11.8623 5.41288 11.0879 5.41288 10.1449C5.41288 9.20186 6.12989 8.42612 7.03892 8.42612C7.94797 8.42612 8.6806 9.2005 8.66495 10.1449C8.66636 11.0879 7.94797 11.8623 7.03892 11.8623ZM13.048 11.8623C12.1546 11.8623 11.4219 11.0879 11.4219 10.1449C11.4219 9.20186 12.1389 8.42612 13.048 8.42612C13.957 8.42612 14.6897 9.2005 14.674 10.1449C14.674 11.0879 13.957 11.8623 13.048 11.8623Z" fill="url(#paint0_linear_24490_65977)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_65977" x1="10.0435" y1="3" x2="10.0435" y2="16" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/docs-icon.svg b/src/images/header/docs-icon.svg
new file mode 100644
index 00000000..ab6bc768
--- /dev/null
+++ b/src/images/header/docs-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 6H9.768L7.916 3.223C7.87038 3.15445 7.80854 3.09823 7.73597 3.05932C7.6634 3.02042 7.58234 3.00004 7.5 3H2.5C2.36739 3 2.24021 3.05268 2.14645 3.14645C2.05268 3.24021 2 3.36739 2 3.5V15C2 15.5304 2.21071 16.0391 2.58579 16.4142C2.96086 16.7893 3.46957 17 4 17H16C16.5304 17 17.0391 16.7893 17.4142 16.4142C17.7893 16.0391 18 15.5304 18 15V6.5C18 6.36739 17.9473 6.24021 17.8536 6.14645C17.7598 6.05268 17.6326 6 17.5 6Z" fill="url(#paint0_linear_24490_61435)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_61435" x1="10" y1="3" x2="10" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/documentation-icon.svg b/src/images/header/documentation-icon.svg
deleted file mode 100644
index 7bad168b..00000000
--- a/src/images/header/documentation-icon.svg
+++ /dev/null
@@ -1,41 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_19796_16215)">
-<rect x="0.5" y="0.5" width="23" height="23" rx="2.16667" fill="#1A1A1A" stroke="#262626"/>
-<mask id="mask0_19796_16215" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-<rect x="0.5" y="0.5" width="23" height="23" rx="2.16667" stroke="#262626"/>
-</mask>
-<g mask="url(#mask0_19796_16215)">
-<g opacity="0.25" filter="url(#filter0_f_19796_16215)">
-<circle cx="12" cy="12" r="10" fill="#3366FF"/>
-</g>
-</g>
-<g opacity="0.1" filter="url(#filter1_f_19796_16215)">
-<circle cx="12" cy="12" r="10" fill="#3366FF"/>
-</g>
-<g opacity="0.4" filter="url(#filter2_f_19796_16215)">
-<circle cx="12" cy="12" r="4" fill="#3366FF"/>
-</g>
-<path d="M10.7464 8.2419C10.8572 8.24424 10.9661 8.27136 11.0652 8.32128C11.1643 8.37121 11.2512 8.4427 11.3196 8.53059L11.9695 9.4034C12.1015 9.5808 12.3097 9.68534 12.5309 9.68534H16.6576V6.38589C16.6605 6.33774 16.6532 6.28953 16.6362 6.24444C16.6192 6.19935 16.5929 6.1584 16.5591 6.12429C16.5252 6.09019 16.4846 6.06371 16.4398 6.0466C16.395 6.02949 16.3472 6.02213 16.2994 6.02503H7.70115C7.65336 6.02213 7.60549 6.02949 7.56073 6.0466C7.51596 6.06371 7.4753 6.09019 7.44145 6.12429C7.40759 6.1584 7.3813 6.19935 7.36431 6.24444C7.34732 6.28953 7.34002 6.33774 7.3429 6.38589V8.2419H10.7464Z" fill="#3366FF"/>
-<path d="M18.1417 10.5825H12.4737C12.0629 10.5825 11.6763 10.3884 11.431 10.0589L10.8536 9.28344C10.8222 9.23653 10.7793 9.19859 10.7291 9.1733C10.6789 9.14801 10.623 9.13623 10.567 9.13909H5.85826C5.76324 9.13909 5.67212 9.17711 5.60493 9.24479C5.53775 9.31246 5.5 9.40425 5.5 9.49995V16.3563C5.5 16.7391 5.65098 17.1063 5.91973 17.377C6.18847 17.6476 6.55297 17.7997 6.93303 17.7997H17.067C17.447 17.7997 17.8115 17.6476 18.0803 17.377C18.349 17.1063 18.5 16.7391 18.5 16.3563V10.9434C18.5 10.8477 18.4623 10.7559 18.3951 10.6882C18.3279 10.6206 18.2368 10.5825 18.1417 10.5825Z" fill="#3366FF"/>
-</g>
-<defs>
-<filter id="filter0_f_19796_16215" x="-8.66667" y="-8.66667" width="41.3333" height="41.3333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="5.33333" result="effect1_foregroundBlur_19796_16215"/>
-</filter>
-<filter id="filter1_f_19796_16215" x="-18" y="-18" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_19796_16215"/>
-</filter>
-<filter id="filter2_f_19796_16215" x="-2.66667" y="-2.66667" width="29.3333" height="29.3333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="5.33333" result="effect1_foregroundBlur_19796_16215"/>
-</filter>
-<clipPath id="clip0_19796_16215">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/images/header/email-icon.svg b/src/images/header/email-icon.svg
new file mode 100644
index 00000000..58ecb910
--- /dev/null
+++ b/src/images/header/email-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.90625 3.33594H16.0938C16.6325 3.33594 17.1491 3.54994 17.5301 3.93088C17.911 4.31181 18.125 4.82847 18.125 5.36719V5.875L10 10.3438L1.875 5.77344V5.36719C1.875 4.82847 2.08901 4.31181 2.46994 3.93088C2.85087 3.54994 3.36753 3.33594 3.90625 3.33594ZM1.875 7.21875L9.49219 11.4844C9.65225 11.5547 9.82517 11.591 10 11.591C10.1748 11.591 10.3478 11.5547 10.5078 11.4844L18.125 7.21875V14.6328C18.125 15.1715 17.911 15.6882 17.5301 16.0691C17.1491 16.4501 16.6325 16.6641 16.0938 16.6641H3.90625C3.36753 16.6641 2.85087 16.4501 2.46994 16.0691C2.08901 15.6882 1.875 15.1715 1.875 14.6328V7.21875Z" fill="url(#paint0_linear_24490_56884)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56884" x1="10" y1="3.23462" x2="10" y2="17.4531" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/features-icon.svg b/src/images/header/features-icon.svg
index 3c3cc85c..2458fd17 100644
--- a/src/images/header/features-icon.svg
+++ b/src/images/header/features-icon.svg
@@ -1,45 +1,46 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_19547_30223)">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" fill="#1A1A1A" stroke="#262626"/>
-<mask id="mask0_19547_30223" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" stroke="#262626"/>
-</mask>
-<g mask="url(#mask0_19547_30223)">
-<g opacity="0.5" filter="url(#filter0_f_19547_30223)">
-<circle cx="18" cy="18" r="15" fill="#DA74FB"/>
-</g>
-</g>
-<g opacity="0.2" filter="url(#filter1_f_19547_30223)">
-<circle cx="18" cy="18" r="15" fill="#DA74FB"/>
-</g>
-<g opacity="0.6" filter="url(#filter2_f_19547_30223)">
-<circle cx="18" cy="18" r="6" fill="#DA74FB"/>
-</g>
-<path d="M26.0356 14.4583L21.18 13.7184L19.0126 9.11017C18.9096 8.92455 18.7619 8.77051 18.5843 8.66343C18.4067 8.55635 18.2053 8.5 18.0004 8.5C17.7954 8.5 17.594 8.55635 17.4164 8.66343C17.2388 8.77051 17.0911 8.92455 16.9881 9.11017L14.8207 13.7195L9.96508 14.4583C9.75715 14.4895 9.56173 14.5812 9.40095 14.7228C9.24017 14.8644 9.12045 15.0503 9.05536 15.2595C8.99027 15.4687 8.98241 15.6929 9.03267 15.9065C9.08292 16.1202 9.18929 16.3148 9.33971 16.4684L12.8523 20.0562L12.0234 25.1228C11.9879 25.3394 12.0111 25.5622 12.0902 25.7658C12.1693 25.9694 12.3012 26.1458 12.471 26.275C12.6408 26.4042 12.8417 26.4811 13.051 26.4969C13.2603 26.5128 13.4697 26.4669 13.6554 26.3646L18.0004 23.9716L22.3431 26.3623C22.5288 26.4646 22.7382 26.5104 22.9475 26.4946C23.1568 26.4787 23.3577 26.4019 23.5275 26.2727C23.6973 26.1435 23.8292 25.9671 23.9083 25.7635C23.9874 25.5598 24.0105 25.3371 23.9751 25.1204L23.1461 20.0539L26.661 16.4684C26.8111 16.3149 26.9172 16.1206 26.9673 15.9073C27.0175 15.6939 27.0098 15.4702 26.9449 15.2612C26.8801 15.0523 26.7609 14.8665 26.6006 14.7248C26.4403 14.5832 26.2454 14.4912 26.0379 14.4595L26.0356 14.4583Z" fill="#DA74FB"/>
-<path d="M26.0356 14.4583L21.18 13.7184L19.0126 9.11017C18.9096 8.92455 18.7619 8.77051 18.5843 8.66343C18.4067 8.55635 18.2053 8.5 18.0004 8.5C17.7954 8.5 17.594 8.55635 17.4164 8.66343C17.2388 8.77051 17.0911 8.92455 16.9881 9.11017L14.8207 13.7195L9.96508 14.4583C9.75715 14.4895 9.56173 14.5812 9.40095 14.7228C9.24017 14.8644 9.12045 15.0503 9.05536 15.2595C8.99027 15.4687 8.98241 15.6929 9.03267 15.9065C9.08292 16.1202 9.18929 16.3148 9.33971 16.4684L12.8523 20.0562L12.0234 25.1228C11.9879 25.3394 12.0111 25.5622 12.0902 25.7658C12.1693 25.9694 12.3012 26.1458 12.471 26.275C12.6408 26.4042 12.8417 26.4811 13.051 26.4969C13.2603 26.5128 13.4697 26.4669 13.6554 26.3646L18.0004 23.9716L22.3431 26.3623C22.5288 26.4646 22.7382 26.5104 22.9475 26.4946C23.1568 26.4787 23.3577 26.4019 23.5275 26.2727C23.6973 26.1435 23.8292 25.9671 23.9083 25.7635C23.9874 25.5598 24.0105 25.3371 23.9751 25.1204L23.1461 20.0539L26.661 16.4684C26.8111 16.3149 26.9172 16.1206 26.9673 15.9073C27.0175 15.6939 27.0098 15.4702 26.9449 15.2612C26.8801 15.0523 26.7609 14.8665 26.6006 14.7248C26.4403 14.5832 26.2454 14.4912 26.0379 14.4595L26.0356 14.4583Z" fill="url(#paint0_linear_19547_30223)" fill-opacity="0.3" style="mix-blend-mode:plus-lighter"/>
-</g>
-<defs>
-<filter id="filter0_f_19547_30223" x="-13" y="-13" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30223"/>
-</filter>
-<filter id="filter1_f_19547_30223" x="-27" y="-27" width="90" height="90" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_19547_30223"/>
-</filter>
-<filter id="filter2_f_19547_30223" x="-4" y="-4" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30223"/>
-</filter>
-<linearGradient id="paint0_linear_19547_30223" x1="22.5" y1="27" x2="12.5" y2="9" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-<clipPath id="clip0_19547_30223">
-<rect width="36" height="36" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
+  <g clip-path="url(#clip0_24490_56777)">
+    <rect width="44" height="44" rx="4" fill="#0B0B0F"/>
+    <rect x="0.5" y="0.5" width="43" height="43" rx="3.5" stroke="#333347" stroke-opacity="0.3"/>
+    <mask id="mask0_24490_56777" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="44" height="44">
+      <rect x="0.5" y="0.5" width="43" height="43" rx="3.5" stroke="#262626"/>
+    </mask>
+    <g mask="url(#mask0_24490_56777)">
+      <g opacity="0.25" filter="url(#filter0_f_24490_56777)">
+        <circle cx="22" cy="22" r="15" fill="#DA74FB"/>
+      </g>
+    </g>
+    <g opacity="0.1" filter="url(#filter1_f_24490_56777)">
+      <circle cx="22" cy="22" r="19" fill="#DA74FB"/>
+    </g>
+    <g opacity="0.4" filter="url(#filter2_f_24490_56777)">
+      <circle cx="21.9996" cy="21.9996" r="7.7027" fill="#DA74FB"/>
+    </g>
+    <path d="M31.8213 17.673L25.8867 16.7686L23.2377 11.1364C23.1118 10.9095 22.9313 10.7212 22.7141 10.5904C22.497 10.4595 22.2509 10.3906 22.0004 10.3906C21.7499 10.3906 21.5038 10.4595 21.2867 10.5904C21.0696 10.7212 20.8891 10.9095 20.7632 11.1364L18.1141 16.7701L12.1795 17.673C11.9254 17.7112 11.6866 17.8231 11.49 17.9962C11.2935 18.1693 11.1472 18.3966 11.0677 18.6523C10.9881 18.908 10.9785 19.1819 11.0399 19.443C11.1013 19.7042 11.2313 19.9421 11.4152 20.1298L15.7084 24.5149L14.6953 30.7073C14.6519 30.9722 14.6802 31.2444 14.7769 31.4933C14.8736 31.7422 15.0348 31.9578 15.2423 32.1157C15.4498 32.2736 15.6954 32.3675 15.9512 32.3869C16.207 32.4062 16.4629 32.3502 16.6899 32.2252L22.0004 29.3003L27.3082 32.2223C27.5352 32.3473 27.7911 32.4034 28.0469 32.384C28.3028 32.3647 28.5483 32.2707 28.7558 32.1128C28.9634 31.9549 29.1246 31.7393 29.2212 31.4904C29.3179 31.2415 29.3462 30.9693 29.3029 30.7044L28.2897 24.512L32.5857 20.1298C32.7691 19.9422 32.8988 19.7047 32.9601 19.4439C33.0214 19.1832 33.0119 18.9097 32.9327 18.6544C32.8535 18.399 32.7077 18.1719 32.5118 17.9988C32.3159 17.8256 32.0777 17.7133 31.8241 17.6744L31.8213 17.673Z" fill="#DA74FB"/>
+    <path d="M31.8213 17.673L25.8867 16.7686L23.2377 11.1364C23.1118 10.9095 22.9313 10.7212 22.7141 10.5904C22.497 10.4595 22.2509 10.3906 22.0004 10.3906C21.7499 10.3906 21.5038 10.4595 21.2867 10.5904C21.0696 10.7212 20.8891 10.9095 20.7632 11.1364L18.1141 16.7701L12.1795 17.673C11.9254 17.7112 11.6866 17.8231 11.49 17.9962C11.2935 18.1693 11.1472 18.3966 11.0677 18.6523C10.9881 18.908 10.9785 19.1819 11.0399 19.443C11.1013 19.7042 11.2313 19.9421 11.4152 20.1298L15.7084 24.5149L14.6953 30.7073C14.6519 30.9722 14.6802 31.2444 14.7769 31.4933C14.8736 31.7422 15.0348 31.9578 15.2423 32.1157C15.4498 32.2736 15.6954 32.3675 15.9512 32.3869C16.207 32.4062 16.4629 32.3502 16.6899 32.2252L22.0004 29.3003L27.3082 32.2223C27.5352 32.3473 27.7911 32.4034 28.0469 32.384C28.3028 32.3647 28.5483 32.2707 28.7558 32.1128C28.9634 31.9549 29.1246 31.7393 29.2212 31.4904C29.3179 31.2415 29.3462 30.9693 29.3029 30.7044L28.2897 24.512L32.5857 20.1298C32.7691 19.9422 32.8988 19.7047 32.9601 19.4439C33.0214 19.1832 33.0119 18.9097 32.9327 18.6544C32.8535 18.399 32.7077 18.1719 32.5118 17.9988C32.3159 17.8256 32.0777 17.7133 31.8241 17.6744L31.8213 17.673Z" fill="url(#paint0_linear_24490_56777)" fill-opacity="0.1" style="mix-blend-mode:plus-lighter"/>
+  </g>
+  <defs>
+    <filter id="filter0_f_24490_56777" x="-9" y="-9" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_24490_56777"/>
+    </filter>
+    <filter id="filter1_f_24490_56777" x="-27" y="-27" width="98" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_24490_56777"/>
+    </filter>
+    <filter id="filter2_f_24490_56777" x="-1.70312" y="-1.70312" width="47.4053" height="47.4062" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_24490_56777"/>
+    </filter>
+    <linearGradient id="paint0_linear_24490_56777" x1="27.5" y1="33.0017" x2="15.2778" y2="11.0017" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="white"/>
+    </linearGradient>
+    <clipPath id="clip0_24490_56777">
+      <rect width="44" height="44" fill="white"/>
+    </clipPath>
+  </defs>
 </svg>
diff --git a/src/images/header/framework-icon.svg b/src/images/header/framework-icon.svg
new file mode 100644
index 00000000..c7cd780d
--- /dev/null
+++ b/src/images/header/framework-icon.svg
@@ -0,0 +1,24 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.92401 2.67969H3.64134C2.73485 2.67969 2 3.41454 2 4.32104V7.60373C2 8.51022 2.73485 9.24508 3.64134 9.24508H6.92401C7.83049 9.24508 8.56534 8.51022 8.56534 7.60373V4.32104C8.56534 3.41454 7.83049 2.67969 6.92401 2.67969Z" fill="url(#paint0_linear_24490_56839)"/>
+<path d="M15.1982 2.48111C15.0458 2.32859 14.8648 2.20759 14.6656 2.12504C14.4664 2.04249 14.2529 2 14.0373 2C13.8216 2 13.6081 2.04249 13.4089 2.12504C13.2097 2.20759 13.0287 2.32859 12.8763 2.48111L10.5544 4.80198C10.4018 4.9544 10.2808 5.13539 10.1983 5.3346C10.1157 5.5338 10.0732 5.74732 10.0732 5.96296C10.0732 6.17859 10.1157 6.39211 10.1983 6.59132C10.2808 6.79052 10.4018 6.97151 10.5544 7.12394L12.8752 9.4448C13.0276 9.59733 13.2086 9.71832 13.4078 9.80088C13.607 9.88343 13.8205 9.92592 14.0362 9.92592C14.2518 9.92592 14.4653 9.88343 14.6645 9.80088C14.8637 9.71832 15.0447 9.59733 15.1971 9.4448L17.5191 7.12394C17.6716 6.97151 17.7926 6.79052 17.8752 6.59132C17.9577 6.39211 18.0002 6.17859 18.0002 5.96296C18.0002 5.74732 17.9577 5.5338 17.8752 5.3346C17.7926 5.13539 17.6716 4.9544 17.5191 4.80198L15.1982 2.48111Z" fill="url(#paint1_linear_24490_56839)"/>
+<path d="M6.92401 11.4336H3.64134C2.73485 11.4336 2 12.1685 2 13.0749V16.3576C2 17.2641 2.73485 17.999 3.64134 17.999H6.92401C7.83049 17.999 8.56534 17.2641 8.56534 16.3576V13.0749C8.56534 12.1685 7.83049 11.4336 6.92401 11.4336Z" fill="url(#paint2_linear_24490_56839)"/>
+<path d="M15.6779 11.4336H12.3952C11.4888 11.4336 10.7539 12.1685 10.7539 13.0749V16.3576C10.7539 17.2641 11.4888 17.999 12.3952 17.999H15.6779C16.5844 17.999 17.3192 17.2641 17.3192 16.3576V13.0749C17.3192 12.1685 16.5844 11.4336 15.6779 11.4336Z" fill="url(#paint3_linear_24490_56839)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56839" x1="5.28267" y1="2.67969" x2="5.1431" y2="12.0291" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_24490_56839" x1="14.0367" y1="2" x2="13.8682" y2="13.2868" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint2_linear_24490_56839" x1="5.28267" y1="11.4336" x2="5.1431" y2="20.783" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint3_linear_24490_56839" x1="14.0366" y1="11.4336" x2="13.897" y2="20.783" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/frameworks-icon.svg b/src/images/header/frameworks-icon.svg
deleted file mode 100644
index 9f3a967a..00000000
--- a/src/images/header/frameworks-icon.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_19547_30270)">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" fill="#1A1A1A" stroke="#262626"/>
-<mask id="mask0_19547_30270" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" stroke="#262626"/>
-</mask>
-<g mask="url(#mask0_19547_30270)">
-<g opacity="0.25" filter="url(#filter0_f_19547_30270)">
-<circle cx="18" cy="18" r="15" fill="#3366FF"/>
-</g>
-</g>
-<g opacity="0.1" filter="url(#filter1_f_19547_30270)">
-<circle cx="18" cy="18" r="15" fill="#3366FF"/>
-</g>
-<g opacity="0.4" filter="url(#filter2_f_19547_30270)">
-<circle cx="18" cy="18" r="6" fill="#3366FF"/>
-</g>
-<path d="M26.9014 20.894L24.8145 19.2983C24.8944 18.8702 24.9349 18.4356 24.9354 18C24.9341 17.5643 24.8928 17.1297 24.812 16.7017L26.9002 15.1066C26.9614 15.06 27.0035 14.9924 27.0187 14.9165C27.0338 14.8407 27.0209 14.7619 26.9824 14.6949L25.3275 11.8041C25.2892 11.7373 25.228 11.6868 25.1555 11.6623C25.0829 11.6377 25.004 11.6407 24.9335 11.6708L22.5163 12.7012C21.8613 12.1318 21.1072 11.69 20.2922 11.3984L19.9673 8.7774C19.9578 8.70083 19.9209 8.63038 19.8636 8.5793C19.8063 8.52822 19.7324 8.50002 19.6559 8.5H16.3453C16.2688 8.50002 16.195 8.52822 16.1376 8.5793C16.0803 8.63038 16.0434 8.70083 16.0339 8.7774L15.709 11.3984C14.894 11.6897 14.1397 12.1312 13.4846 12.7006L11.0674 11.6701C10.9969 11.6401 10.918 11.6371 10.8454 11.6616C10.7729 11.6862 10.7117 11.7366 10.6735 11.8035L9.01754 14.6959C8.97903 14.7628 8.96613 14.8416 8.98129 14.9175C8.99644 14.9933 9.03859 15.0609 9.09979 15.1076L11.1886 16.7017C11.0273 17.5596 11.0273 18.4404 11.1886 19.2983L9.09979 20.8934C9.03859 20.94 8.99644 21.0076 8.98129 21.0835C8.96613 21.1593 8.97903 21.2381 9.01754 21.305L10.6725 24.1968C10.7108 24.2637 10.772 24.3141 10.8445 24.3387C10.917 24.3632 10.996 24.3602 11.0665 24.3302L13.4836 23.2997C14.139 23.8691 14.8936 24.3106 15.709 24.6015L16.0336 27.2226C16.0431 27.2992 16.08 27.3696 16.1373 27.4207C16.1947 27.4718 16.2685 27.5 16.345 27.5H19.6559C19.7324 27.5 19.8063 27.4718 19.8636 27.4207C19.9209 27.3696 19.9578 27.2992 19.9673 27.2226L20.2922 24.6015C21.1073 24.3103 21.8616 23.8688 22.5166 23.2994L24.9338 24.3298C25.0043 24.3599 25.0832 24.3629 25.1558 24.3384C25.2283 24.3138 25.2895 24.2634 25.3278 24.1965L26.9827 21.3047C27.0211 21.238 27.034 21.1595 27.019 21.0839C27.004 21.0083 26.9622 20.9408 26.9014 20.894ZM18.0006 21.4833C17.3177 21.4833 16.65 21.279 16.0822 20.8963C15.5143 20.5135 15.0717 19.9695 14.8104 19.333C14.549 18.6965 14.4806 17.9961 14.6139 17.3204C14.7471 16.6447 15.076 16.0241 15.5589 15.5369C16.0418 15.0498 16.6571 14.718 17.3269 14.5836C17.9968 14.4492 18.6911 14.5182 19.3221 14.7818C19.953 15.0455 20.4923 15.4919 20.8718 16.0648C21.2512 16.6376 21.4537 17.3111 21.4537 18C21.4537 18.9238 21.0899 19.8098 20.4423 20.4631C19.7947 21.1163 18.9164 21.4833 18.0006 21.4833Z" fill="#3366FF"/>
-<path d="M26.9014 20.894L24.8145 19.2983C24.8944 18.8702 24.9349 18.4356 24.9354 18C24.9341 17.5643 24.8928 17.1297 24.812 16.7017L26.9002 15.1066C26.9614 15.06 27.0035 14.9924 27.0187 14.9165C27.0338 14.8407 27.0209 14.7619 26.9824 14.6949L25.3275 11.8041C25.2892 11.7373 25.228 11.6868 25.1555 11.6623C25.0829 11.6377 25.004 11.6407 24.9335 11.6708L22.5163 12.7012C21.8613 12.1318 21.1072 11.69 20.2922 11.3984L19.9673 8.7774C19.9578 8.70083 19.9209 8.63038 19.8636 8.5793C19.8063 8.52822 19.7324 8.50002 19.6559 8.5H16.3453C16.2688 8.50002 16.195 8.52822 16.1376 8.5793C16.0803 8.63038 16.0434 8.70083 16.0339 8.7774L15.709 11.3984C14.894 11.6897 14.1397 12.1312 13.4846 12.7006L11.0674 11.6701C10.9969 11.6401 10.918 11.6371 10.8454 11.6616C10.7729 11.6862 10.7117 11.7366 10.6735 11.8035L9.01754 14.6959C8.97903 14.7628 8.96613 14.8416 8.98129 14.9175C8.99644 14.9933 9.03859 15.0609 9.09979 15.1076L11.1886 16.7017C11.0273 17.5596 11.0273 18.4404 11.1886 19.2983L9.09979 20.8934C9.03859 20.94 8.99644 21.0076 8.98129 21.0835C8.96613 21.1593 8.97903 21.2381 9.01754 21.305L10.6725 24.1968C10.7108 24.2637 10.772 24.3141 10.8445 24.3387C10.917 24.3632 10.996 24.3602 11.0665 24.3302L13.4836 23.2997C14.139 23.8691 14.8936 24.3106 15.709 24.6015L16.0336 27.2226C16.0431 27.2992 16.08 27.3696 16.1373 27.4207C16.1947 27.4718 16.2685 27.5 16.345 27.5H19.6559C19.7324 27.5 19.8063 27.4718 19.8636 27.4207C19.9209 27.3696 19.9578 27.2992 19.9673 27.2226L20.2922 24.6015C21.1073 24.3103 21.8616 23.8688 22.5166 23.2994L24.9338 24.3298C25.0043 24.3599 25.0832 24.3629 25.1558 24.3384C25.2283 24.3138 25.2895 24.2634 25.3278 24.1965L26.9827 21.3047C27.0211 21.238 27.034 21.1595 27.019 21.0839C27.004 21.0083 26.9622 20.9408 26.9014 20.894ZM18.0006 21.4833C17.3177 21.4833 16.65 21.279 16.0822 20.8963C15.5143 20.5135 15.0717 19.9695 14.8104 19.333C14.549 18.6965 14.4806 17.9961 14.6139 17.3204C14.7471 16.6447 15.076 16.0241 15.5589 15.5369C16.0418 15.0498 16.6571 14.718 17.3269 14.5836C17.9968 14.4492 18.6911 14.5182 19.3221 14.7818C19.953 15.0455 20.4923 15.4919 20.8718 16.0648C21.2512 16.6376 21.4537 17.3111 21.4537 18C21.4537 18.9238 21.0899 19.8098 20.4423 20.4631C19.7947 21.1163 18.9164 21.4833 18.0006 21.4833Z" fill="url(#paint0_linear_19547_30270)" fill-opacity="0.1" style="mix-blend-mode:plus-lighter"/>
-</g>
-<defs>
-<filter id="filter0_f_19547_30270" x="-13" y="-13" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30270"/>
-</filter>
-<filter id="filter1_f_19547_30270" x="-27" y="-27" width="90" height="90" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_19547_30270"/>
-</filter>
-<filter id="filter2_f_19547_30270" x="-4" y="-4" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30270"/>
-</filter>
-<linearGradient id="paint0_linear_19547_30270" x1="22.5126" y1="28.0278" x2="11.6776" y2="9.49986" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-<clipPath id="clip0_19547_30270">
-<rect width="36" height="36" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/images/header/future-of-novu.jpg b/src/images/header/future-of-novu.jpg
new file mode 100644
index 00000000..3b8e2a59
Binary files /dev/null and b/src/images/header/future-of-novu.jpg differ
diff --git a/src/images/header/getting-started-icon.svg b/src/images/header/getting-started-icon.svg
index 2ca79139..15b35a3c 100644
--- a/src/images/header/getting-started-icon.svg
+++ b/src/images/header/getting-started-icon.svg
@@ -1,45 +1,46 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_19630_40540)">
-<rect x="0.388889" y="0.388889" width="27.2222" height="27.2222" rx="2.72222" fill="#1A1A1A" stroke="#262626" stroke-width="0.777778"/>
-<mask id="mask0_19630_40540" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
-<rect x="0.388889" y="0.388889" width="27.2222" height="27.2222" rx="2.72222" stroke="#262626" stroke-width="0.777778"/>
-</mask>
-<g mask="url(#mask0_19630_40540)">
-<g opacity="0.25" filter="url(#filter0_f_19630_40540)">
-<circle cx="14.0002" cy="13.9997" r="11.6667" fill="#F0B84C"/>
-</g>
-</g>
-<g opacity="0.1" filter="url(#filter1_f_19630_40540)">
-<circle cx="14.0002" cy="13.9997" r="11.6667" fill="#F0B84C"/>
-</g>
-<g opacity="0.4" filter="url(#filter2_f_19630_40540)">
-<circle cx="14.0002" cy="13.9997" r="4.66667" fill="#F0B84C"/>
-</g>
-<path d="M14 6C12.4178 6 10.871 6.46919 9.55544 7.34824C8.23985 8.22729 7.21447 9.47672 6.60897 10.9385C6.00347 12.4003 5.84504 14.0089 6.15372 15.5607C6.4624 17.1126 7.22433 18.538 8.34315 19.6569C9.46197 20.7757 10.8874 21.5376 12.4393 21.8463C13.9911 22.155 15.5997 21.9965 17.0615 21.391C18.5233 20.7855 19.7727 19.7602 20.6518 18.4446C21.5308 17.129 22 15.5822 22 14C21.9976 11.879 21.154 9.84555 19.6542 8.34578C18.1544 6.846 16.121 6.00238 14 6ZM13.5 8.5C13.5 8.22386 13.7239 8 14 8C14.2761 8 14.5 8.22386 14.5 8.5V12.5C14.5 12.7761 14.2761 13 14 13C13.7239 13 13.5 12.7761 13.5 12.5V8.5ZM14 19C12.9661 19 11.9576 18.6794 11.1134 18.0825C10.2693 17.4856 9.63089 16.6416 9.28621 15.6669C8.94153 14.6921 8.9075 13.6345 9.18881 12.6396C9.47012 11.6447 10.0529 10.7614 10.857 10.1115C11.0716 9.93796 11.3868 9.9709 11.5605 10.1854C11.7341 10.4 11.7011 10.7148 11.4865 10.8885C10.8428 11.4082 10.3761 12.1148 10.1506 12.9108C9.92518 13.7068 9.95211 14.5531 10.2277 15.3332C10.5033 16.1133 11.014 16.7887 11.6895 17.2665C12.3649 17.7442 13.1719 18.0007 13.9993 18.0007C14.8266 18.0007 15.6336 17.7442 16.309 17.2665C16.9845 16.7887 17.4952 16.1133 17.7708 15.3332C18.0464 14.5531 18.0733 13.7068 17.8479 12.9108C17.6224 12.1148 17.1557 11.4082 16.512 10.8885C16.2974 10.7152 16.2633 10.3999 16.4362 10.1849C16.6091 9.96976 16.9243 9.93545 17.139 10.109C17.9438 10.7585 18.5274 11.6415 18.8094 12.6365C19.0914 13.6315 19.058 14.6894 18.7137 15.6646C18.3694 16.6397 17.7312 17.4842 16.887 18.0815C16.0428 18.6789 15.0342 18.9998 14 19Z" fill="#F0B84C"/>
-<path d="M14 6C12.4178 6 10.871 6.46919 9.55544 7.34824C8.23985 8.22729 7.21447 9.47672 6.60897 10.9385C6.00347 12.4003 5.84504 14.0089 6.15372 15.5607C6.4624 17.1126 7.22433 18.538 8.34315 19.6569C9.46197 20.7757 10.8874 21.5376 12.4393 21.8463C13.9911 22.155 15.5997 21.9965 17.0615 21.391C18.5233 20.7855 19.7727 19.7602 20.6518 18.4446C21.5308 17.129 22 15.5822 22 14C21.9976 11.879 21.154 9.84555 19.6542 8.34578C18.1544 6.846 16.121 6.00238 14 6ZM13.5 8.5C13.5 8.22386 13.7239 8 14 8C14.2761 8 14.5 8.22386 14.5 8.5V12.5C14.5 12.7761 14.2761 13 14 13C13.7239 13 13.5 12.7761 13.5 12.5V8.5ZM14 19C12.9661 19 11.9576 18.6794 11.1134 18.0825C10.2693 17.4856 9.63089 16.6416 9.28621 15.6669C8.94153 14.6921 8.9075 13.6345 9.18881 12.6396C9.47012 11.6447 10.0529 10.7614 10.857 10.1115C11.0716 9.93796 11.3868 9.9709 11.5605 10.1854C11.7341 10.4 11.7011 10.7148 11.4865 10.8885C10.8428 11.4082 10.3761 12.1148 10.1506 12.9108C9.92518 13.7068 9.95211 14.5531 10.2277 15.3332C10.5033 16.1133 11.014 16.7887 11.6895 17.2665C12.3649 17.7442 13.1719 18.0007 13.9993 18.0007C14.8266 18.0007 15.6336 17.7442 16.309 17.2665C16.9845 16.7887 17.4952 16.1133 17.7708 15.3332C18.0464 14.5531 18.0733 13.7068 17.8479 12.9108C17.6224 12.1148 17.1557 11.4082 16.512 10.8885C16.2974 10.7152 16.2633 10.3999 16.4362 10.1849C16.6091 9.96976 16.9243 9.93545 17.139 10.109C17.9438 10.7585 18.5274 11.6415 18.8094 12.6365C19.0914 13.6315 19.058 14.6894 18.7137 15.6646C18.3694 16.6397 17.7312 17.4842 16.887 18.0815C16.0428 18.6789 15.0342 18.9998 14 19Z" fill="url(#paint0_linear_19630_40540)" fill-opacity="0.1" style="mix-blend-mode:plus-lighter"/>
-</g>
-<defs>
-<filter id="filter0_f_19630_40540" x="-10.1109" y="-10.1114" width="48.2224" height="48.2219" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="6.22222" result="effect1_foregroundBlur_19630_40540"/>
-</filter>
-<filter id="filter1_f_19630_40540" x="-20.9998" y="-21.0003" width="70.0002" height="69.9997" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="11.6667" result="effect1_foregroundBlur_19630_40540"/>
-</filter>
-<filter id="filter2_f_19630_40540" x="-3.11095" y="-3.11144" width="34.2224" height="34.2219" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="6.22222" result="effect1_foregroundBlur_19630_40540"/>
-</filter>
-<linearGradient id="paint0_linear_19630_40540" x1="18" y1="22.4444" x2="9.11111" y2="6.44444" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-<clipPath id="clip0_19630_40540">
-<rect width="28" height="28" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
+  <g clip-path="url(#clip0_24490_61421)">
+    <rect width="44" height="44" rx="3.11111" fill="#0B0B0F"/>
+    <rect x="0.5" y="0.5" width="43" height="43" rx="2.61111" stroke="#333347" stroke-opacity="0.3"/>
+    <mask id="mask0_24490_61421" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="44" height="44">
+      <rect x="0.388889" y="0.388889" width="43.2222" height="43.2222" rx="2.72222" stroke="#262626" stroke-width="0.777778"/>
+    </mask>
+    <g mask="url(#mask0_24490_61421)">
+      <g opacity="0.25" filter="url(#filter0_f_24490_61421)">
+        <circle cx="21.9987" cy="21.9987" r="11.6667" fill="#F0B84C"/>
+      </g>
+    </g>
+    <g opacity="0.1" filter="url(#filter1_f_24490_61421)">
+      <circle cx="22" cy="22" r="19" fill="#0055FF"/>
+    </g>
+    <g opacity="0.4" filter="url(#filter2_f_24490_61421)">
+      <circle cx="22.0004" cy="21.9984" r="7.6" fill="#0055FF"/>
+    </g>
+    <path d="M22.5 9C20.0277 9 17.611 9.73311 15.5554 11.1066C13.4998 12.4801 11.8976 14.4324 10.9515 16.7165C10.0054 19.0005 9.75787 21.5139 10.2402 23.9386C10.7225 26.3634 11.913 28.5907 13.6612 30.3388C15.4093 32.087 17.6366 33.2775 20.0614 33.7598C22.4861 34.2421 24.9995 33.9946 27.2835 33.0485C29.5676 32.1024 31.5199 30.5002 32.8934 28.4446C34.2669 26.389 35 23.9723 35 21.5C34.9963 18.1859 33.6781 15.0087 31.3347 12.6653C28.9913 10.3219 25.8141 9.00372 22.5 9ZM21.7188 12.9062C21.7188 12.4748 22.0685 12.125 22.5 12.125C22.9315 12.125 23.2813 12.4748 23.2813 12.9062V19.1562C23.2813 19.5877 22.9315 19.9375 22.5 19.9375C22.0685 19.9375 21.7188 19.5877 21.7188 19.1562V12.9062ZM22.5 29.3125C20.8845 29.3124 19.3088 28.8116 17.9898 27.8789C16.6707 26.9462 15.6733 25.6276 15.1347 24.1045C14.5961 22.5814 14.543 20.9289 14.9825 19.3743C15.4221 17.8198 16.3327 16.4398 17.5891 15.4242C17.9244 15.1531 18.4168 15.2045 18.6882 15.5397C18.9596 15.875 18.9079 16.3669 18.5727 16.6383C17.5669 17.4503 16.8376 18.5543 16.4853 19.7981C16.1331 21.0419 16.1752 22.3643 16.6058 23.5832C17.0364 24.802 17.8344 25.8574 18.8898 26.6039C19.9452 27.3503 21.2061 27.7512 22.4988 27.7512C23.7915 27.7512 25.0524 27.3503 26.1078 26.6039C27.1633 25.8574 27.9612 24.802 28.3919 23.5832C28.8225 22.3643 28.8646 21.0419 28.5123 19.7981C28.1601 18.5543 27.4308 17.4503 26.425 16.6383C26.0896 16.3676 26.0365 15.8749 26.3065 15.5389C26.5767 15.2028 27.0693 15.1491 27.4047 15.4203C28.6622 16.4351 29.574 17.8149 30.0147 19.3695C30.4554 20.9241 30.4031 22.5772 29.8652 24.1009C29.3272 25.6246 28.33 26.944 27.011 27.8774C25.6919 28.8108 24.1159 29.3121 22.5 29.3125Z" fill="#4B73EC"/>
+    <path d="M22.5 9C20.0277 9 17.611 9.73311 15.5554 11.1066C13.4998 12.4801 11.8976 14.4324 10.9515 16.7165C10.0054 19.0005 9.75787 21.5139 10.2402 23.9386C10.7225 26.3634 11.913 28.5907 13.6612 30.3388C15.4093 32.087 17.6366 33.2775 20.0614 33.7598C22.4861 34.2421 24.9995 33.9946 27.2835 33.0485C29.5676 32.1024 31.5199 30.5002 32.8934 28.4446C34.2669 26.389 35 23.9723 35 21.5C34.9963 18.1859 33.6781 15.0087 31.3347 12.6653C28.9913 10.3219 25.8141 9.00372 22.5 9ZM21.7188 12.9062C21.7188 12.4748 22.0685 12.125 22.5 12.125C22.9315 12.125 23.2813 12.4748 23.2813 12.9062V19.1562C23.2813 19.5877 22.9315 19.9375 22.5 19.9375C22.0685 19.9375 21.7188 19.5877 21.7188 19.1562V12.9062ZM22.5 29.3125C20.8845 29.3124 19.3088 28.8116 17.9898 27.8789C16.6707 26.9462 15.6733 25.6276 15.1347 24.1045C14.5961 22.5814 14.543 20.9289 14.9825 19.3743C15.4221 17.8198 16.3327 16.4398 17.5891 15.4242C17.9244 15.1531 18.4168 15.2045 18.6882 15.5397C18.9596 15.875 18.9079 16.3669 18.5727 16.6383C17.5669 17.4503 16.8376 18.5543 16.4853 19.7981C16.1331 21.0419 16.1752 22.3643 16.6058 23.5832C17.0364 24.802 17.8344 25.8574 18.8898 26.6039C19.9452 27.3503 21.2061 27.7512 22.4988 27.7512C23.7915 27.7512 25.0524 27.3503 26.1078 26.6039C27.1633 25.8574 27.9612 24.802 28.3919 23.5832C28.8225 22.3643 28.8646 21.0419 28.5123 19.7981C28.1601 18.5543 27.4308 17.4503 26.425 16.6383C26.0896 16.3676 26.0365 15.8749 26.3065 15.5389C26.5767 15.2028 27.0693 15.1491 27.4047 15.4203C28.6622 16.4351 29.574 17.8149 30.0147 19.3695C30.4554 20.9241 30.4031 22.5772 29.8652 24.1009C29.3272 25.6246 28.33 26.944 27.011 27.8774C25.6919 28.8108 24.1159 29.3121 22.5 29.3125Z" fill="url(#paint0_linear_24490_61421)" fill-opacity="0.1"/>
+  </g>
+  <defs>
+    <filter id="filter0_f_24490_61421" x="-2.11241" y="-2.11241" width="48.2219" height="48.2209" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="6.22222" result="effect1_foregroundBlur_24490_61421"/>
+    </filter>
+    <filter id="filter1_f_24490_61421" x="-20.3333" y="-20.3333" width="84.6667" height="84.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="11.6667" result="effect1_foregroundBlur_24490_61421"/>
+    </filter>
+    <filter id="filter2_f_24490_61421" x="1.95595" y="1.95399" width="40.0891" height="40.0881" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="6.22222" result="effect1_foregroundBlur_24490_61421"/>
+    </filter>
+    <linearGradient id="paint0_linear_24490_61421" x1="26.5875" y1="34" x2="19.0875" y2="9" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="white"/>
+    </linearGradient>
+    <clipPath id="clip0_24490_61421">
+      <rect width="44" height="44" fill="white"/>
+    </clipPath>
+  </defs>
 </svg>
diff --git a/src/images/header/guide-icon.svg b/src/images/header/guide-icon.svg
new file mode 100644
index 00000000..4eb82d00
--- /dev/null
+++ b/src/images/header/guide-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.75 2H5.25C4.0095 2 3 3.0095 3 4.25V14.75C3 15.9905 4.0095 17 5.25 17H15.75C16.9905 17 18 15.9905 18 14.75V4.25C18 3.0095 16.9905 2 15.75 2ZM13.5 11L10.5 8.50025L7.5 11V3.5H13.5V11Z" fill="url(#paint0_linear_24490_61448)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_61448" x1="10.5" y1="2" x2="10.5" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/guides-icon.svg b/src/images/header/guides-icon.svg
deleted file mode 100644
index 5ba9225e..00000000
--- a/src/images/header/guides-icon.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_19630_40557)">
-<rect x="0.388889" y="0.388889" width="27.2222" height="27.2222" rx="2.72222" fill="#1A1A1A" stroke="#262626" stroke-width="0.777778"/>
-<mask id="mask0_19630_40557" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
-<rect x="0.388889" y="0.388889" width="27.2222" height="27.2222" rx="2.72222" stroke="#262626" stroke-width="0.777778"/>
-</mask>
-<g mask="url(#mask0_19630_40557)">
-<g opacity="0.25" filter="url(#filter0_f_19630_40557)">
-<circle cx="14.0002" cy="13.9997" r="11.6667" fill="#FF70A9"/>
-</g>
-</g>
-<g opacity="0.1" filter="url(#filter1_f_19630_40557)">
-<circle cx="14.0002" cy="13.9997" r="11.6667" fill="#FF70A9"/>
-</g>
-<g opacity="0.4" filter="url(#filter2_f_19630_40557)">
-<circle cx="14.0002" cy="13.9997" r="4.66667" fill="#FF70A9"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3896 8.06003V18.5315H8.90486C8.40561 18.5316 7.92416 18.7169 7.55371 19.0516V8.06003C7.55425 7.61226 7.73236 7.18299 8.04898 6.86636C8.3656 6.54974 8.79488 6.37163 9.24265 6.37109H10.5938V11.4379L12.6205 10.0868L14.6473 11.4379V6.37109H18.7007C19.1485 6.37163 19.5778 6.54974 19.8944 6.86636C20.211 7.18299 20.3891 7.61226 20.3896 8.06003ZM7.94945 22.0157C8.20284 22.2691 8.54651 22.4115 8.90486 22.4115H20.3896C20.1679 21.9956 20.0519 21.5316 20.0519 21.0603C20.0519 20.589 20.1679 20.125 20.3896 19.7092H8.90486C8.54651 19.7092 8.20284 19.8515 7.94945 20.1049C7.69606 20.3583 7.55371 20.702 7.55371 21.0603C7.55371 21.4187 7.69606 21.7623 7.94945 22.0157Z" fill="#FF70A9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3896 8.06003V18.5315H8.90486C8.40561 18.5316 7.92416 18.7169 7.55371 19.0516V8.06003C7.55425 7.61226 7.73236 7.18299 8.04898 6.86636C8.3656 6.54974 8.79488 6.37163 9.24265 6.37109H10.5938V11.4379L12.6205 10.0868L14.6473 11.4379V6.37109H18.7007C19.1485 6.37163 19.5778 6.54974 19.8944 6.86636C20.211 7.18299 20.3891 7.61226 20.3896 8.06003ZM7.94945 22.0157C8.20284 22.2691 8.54651 22.4115 8.90486 22.4115H20.3896C20.1679 21.9956 20.0519 21.5316 20.0519 21.0603C20.0519 20.589 20.1679 20.125 20.3896 19.7092H8.90486C8.54651 19.7092 8.20284 19.8515 7.94945 20.1049C7.69606 20.3583 7.55371 20.702 7.55371 21.0603C7.55371 21.4187 7.69606 21.7623 7.94945 22.0157Z" fill="url(#paint0_linear_19630_40557)" fill-opacity="0.1" style="mix-blend-mode:plus-lighter"/>
-</g>
-<defs>
-<filter id="filter0_f_19630_40557" x="-10.1109" y="-10.1114" width="48.2224" height="48.2219" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="6.22222" result="effect1_foregroundBlur_19630_40557"/>
-</filter>
-<filter id="filter1_f_19630_40557" x="-20.9998" y="-21.0003" width="70.0002" height="69.9997" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="11.6667" result="effect1_foregroundBlur_19630_40557"/>
-</filter>
-<filter id="filter2_f_19630_40557" x="-3.11095" y="-3.11144" width="34.2224" height="34.2219" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="6.22222" result="effect1_foregroundBlur_19630_40557"/>
-</filter>
-<linearGradient id="paint0_linear_19630_40557" x1="17.1807" y1="22.857" x2="7.34717" y2="8.6928" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-<clipPath id="clip0_19630_40557">
-<rect width="28" height="28" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/images/header/in-app-icon.svg b/src/images/header/in-app-icon.svg
new file mode 100644
index 00000000..b3409579
--- /dev/null
+++ b/src/images/header/in-app-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4991 10.2778C15.4991 12.5625 17.3984 14.8472 17.3984 14.8472C17.4544 14.9148 17.4888 14.9967 17.4977 15.083C17.5066 15.1693 17.4895 15.2563 17.4484 15.3333C17.4122 15.4202 17.3499 15.4945 17.2697 15.5465C17.1895 15.5986 17.095 15.6259 16.9986 15.625H3.00324C2.91311 15.6254 2.82437 15.6033 2.74558 15.5608C2.66679 15.5182 2.6006 15.4566 2.55339 15.3819C2.51109 15.2968 2.4934 15.202 2.5022 15.1078C2.51101 15.0136 2.54598 14.9235 2.60337 14.8472C2.65336 14.7986 4.50274 12.5625 4.50274 10.2778V7.84721C4.50274 6.42904 5.08201 5.06896 6.11312 4.06616C7.14422 3.06337 8.54271 2.5 10.0009 2.5C11.4591 2.5 12.8576 3.06337 13.8887 4.06616C14.9198 5.06896 15.4991 6.42904 15.4991 7.84721V10.2778ZM8.41828 18.2678C7.96513 17.9192 7.64183 17.4288 7.5 16.875H12.5C12.3494 17.424 12.0238 17.9088 11.5726 18.2559C11.1214 18.603 10.5692 18.7934 10 18.7981C9.42831 18.8031 8.87144 18.6163 8.41828 18.2678Z" fill="url(#paint0_linear_24490_56871)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56871" x1="10.0003" y1="2.79541" x2="10.0003" y2="18.7504" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/join-us-icon.svg b/src/images/header/join-us-icon.svg
new file mode 100644
index 00000000..3f8f2f32
--- /dev/null
+++ b/src/images/header/join-us-icon.svg
@@ -0,0 +1,46 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_24490_65947)">
+<rect width="44" height="44" rx="3.11111" fill="#0B0B0F"/>
+<rect x="0.5" y="0.5" width="43" height="43" rx="2.61111" stroke="#333347" stroke-opacity="0.3"/>
+<mask id="mask0_24490_65947" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="44" height="44">
+<rect x="0.388889" y="0.388889" width="43.2222" height="43.2222" rx="2.72222" stroke="#262626" stroke-width="0.777778"/>
+</mask>
+<g mask="url(#mask0_24490_65947)">
+<g opacity="0.25" filter="url(#filter0_f_24490_65947)">
+<circle cx="21.9987" cy="21.9987" r="11.6667" fill="#F0B84C"/>
+</g>
+</g>
+<g opacity="0.1" filter="url(#filter1_f_24490_65947)">
+<circle cx="22" cy="22" r="19" fill="#E300BD"/>
+</g>
+<g opacity="0.4" filter="url(#filter2_f_24490_65947)">
+<circle cx="22.5" cy="22.5" r="7.5" fill="#E300BD"/>
+</g>
+<path d="M29 18C31.2 18 33 16.2 33 14C33 11.8 31.2 10 29 10C26.8 10 25 11.8 25 14C25 14.4 25.1 14.7 25.2 15L17.9 19.2C17.1 18.5 16.1 18 15 18C12.8 18 11 19.8 11 22C11 24.2 12.8 26 15 26C16.1 26 17.1 25.5 17.9 24.8L25.2 29C25.1 29.3 25 29.7 25 30C25 32.2 26.8 34 29 34C31.2 34 33 32.2 33 30C33 27.8 31.2 26 29 26C27.9 26 26.9 26.5 26.1 27.2L18.8 23C18.9 22.7 19 22.4 19 22C19 21.6 18.9 21.3 18.8 21L26.1 16.8C26.9 17.5 27.9 18 29 18Z" fill="#C25CD6"/>
+<path d="M29 18C31.2 18 33 16.2 33 14C33 11.8 31.2 10 29 10C26.8 10 25 11.8 25 14C25 14.4 25.1 14.7 25.2 15L17.9 19.2C17.1 18.5 16.1 18 15 18C12.8 18 11 19.8 11 22C11 24.2 12.8 26 15 26C16.1 26 17.1 25.5 17.9 24.8L25.2 29C25.1 29.3 25 29.7 25 30C25 32.2 26.8 34 29 34C31.2 34 33 32.2 33 30C33 27.8 31.2 26 29 26C27.9 26 26.9 26.5 26.1 27.2L18.8 23C18.9 22.7 19 22.4 19 22C19 21.6 18.9 21.3 18.8 21L26.1 16.8C26.9 17.5 27.9 18 29 18Z" fill="url(#paint0_linear_24490_65947)" fill-opacity="0.1"/>
+</g>
+<defs>
+<filter id="filter0_f_24490_65947" x="-2.11241" y="-2.11241" width="48.2219" height="48.2209" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6.22222" result="effect1_foregroundBlur_24490_65947"/>
+</filter>
+<filter id="filter1_f_24490_65947" x="-20.3333" y="-20.3333" width="84.6667" height="84.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="11.6667" result="effect1_foregroundBlur_24490_65947"/>
+</filter>
+<filter id="filter2_f_24490_65947" x="2.55556" y="2.55556" width="39.8889" height="39.8889" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6.22222" result="effect1_foregroundBlur_24490_65947"/>
+</filter>
+<linearGradient id="paint0_linear_24490_65947" x1="22" y1="34" x2="30" y2="11" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_24490_65947">
+<rect width="44" height="44" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/header/library-icon.svg b/src/images/header/library-icon.svg
new file mode 100644
index 00000000..90ce5789
--- /dev/null
+++ b/src/images/header/library-icon.svg
@@ -0,0 +1,14 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.68406 4.39577L3.33681 2.1041C3.05035 1.91312 2.66841 2.00861 2.38195 2.19958C2.19097 2.39056 2 2.67702 2 2.96348V13.467C2 13.8489 2.19097 14.2309 2.57292 14.3264L8.68406 17V4.39577Z" fill="url(#paint0_linear_24490_61453)"/>
+<path d="M16.8949 2.20118C16.6084 2.0102 16.322 2.0102 16.0355 2.10569L10.5928 4.39737V17.0016L16.7039 14.4235C17.0859 14.2325 17.2768 13.946 17.2768 13.5641V2.96507C17.2768 2.67861 17.0859 2.39215 16.8949 2.20118Z" fill="url(#paint1_linear_24490_61453)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_61453" x1="5.34203" y1="2" x2="5.34203" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_24490_61453" x1="13.9348" y1="2.04297" x2="13.9348" y2="17.0016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/news-icon.svg b/src/images/header/news-icon.svg
new file mode 100644
index 00000000..206ce4b2
--- /dev/null
+++ b/src/images/header/news-icon.svg
@@ -0,0 +1,24 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6809 3.86592L16.9571 3.01365L16.1048 1.28985C15.9144 0.903383 15.2786 0.903383 15.0894 1.28985L14.2371 3.01365L12.5133 3.86592C12.3195 3.96112 12.1982 4.15832 12.1982 4.37365C12.1982 4.58898 12.3195 4.78618 12.5133 4.88138L14.2371 5.73365L15.0894 7.45745C15.1846 7.65012 15.3818 7.77252 15.5971 7.77252C15.8124 7.77252 16.0096 7.65012 16.1048 7.45745L16.9571 5.73365L18.6809 4.88138C18.8747 4.78618 18.996 4.58898 18.996 4.37365C18.996 4.15832 18.8747 3.96112 18.6809 3.86592Z" fill="url(#paint0_linear_24490_61467)"/>
+<path d="M9.08268 3.83333C9.86509 3.83333 10.4993 3.19907 10.4993 2.41667C10.4993 1.63426 9.86509 1 9.08268 1C8.30028 1 7.66602 1.63426 7.66602 2.41667C7.66602 3.19907 8.30028 3.83333 9.08268 3.83333Z" fill="url(#paint1_linear_24490_61467)"/>
+<path d="M17.5837 12.3333C18.3661 12.3333 19.0003 11.6991 19.0003 10.9167C19.0003 10.1343 18.3661 9.5 17.5837 9.5C16.8013 9.5 16.167 10.1343 16.167 10.9167C16.167 11.6991 16.8013 12.3333 17.5837 12.3333Z" fill="url(#paint2_linear_24490_61467)"/>
+<path d="M2.04918 16.5502L5.16018 6.33098C5.40725 5.52065 6.42725 5.26565 7.02678 5.86405L14.1373 12.9746C14.7368 13.5741 14.4807 14.5941 13.6704 14.8412L3.44998 17.9522C2.59205 18.214 1.78851 17.4116 2.05031 16.5525L2.04918 16.5502Z" fill="url(#paint3_linear_24490_61467)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_61467" x1="15.5971" y1="1" x2="15.5971" y2="7.77252" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_24490_61467" x1="9.08268" y1="1" x2="9.08268" y2="3.83333" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint2_linear_24490_61467" x1="17.5837" y1="9.5" x2="17.5837" y2="12.3333" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint3_linear_24490_61467" x1="8.23335" y1="5.53516" x2="8.23335" y2="18.0025" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/notification-how-to.jpg b/src/images/header/notification-how-to.jpg
new file mode 100644
index 00000000..17b9218b
Binary files /dev/null and b/src/images/header/notification-how-to.jpg differ
diff --git a/src/images/header/open-source-icon.svg b/src/images/header/open-source-icon.svg
new file mode 100644
index 00000000..24726c1a
--- /dev/null
+++ b/src/images/header/open-source-icon.svg
@@ -0,0 +1,14 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_24490_65981)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.25 3.125C16.25 4.85089 14.8509 6.25 13.125 6.25C12.9144 6.25 12.7087 6.22917 12.5098 6.18947L11.3696 9.23009C12.6422 9.8831 13.553 11.1415 13.7217 12.625H16.3174C16.5362 11.8322 17.2626 11.25 18.125 11.25C19.1605 11.25 20 12.0895 20 13.125C20 14.1605 19.1605 15 18.125 15C17.2626 15 16.5362 14.4178 16.3174 13.625H13.7217C13.4736 15.8058 11.6222 17.5 9.375 17.5C8.03652 17.5 6.83842 16.8989 6.0359 15.952L3.65639 17.5383C3.71714 17.7229 3.75 17.9201 3.75 18.125C3.75 19.1605 2.91053 20 1.875 20C0.839466 20 0 19.1605 0 18.125C0 17.0895 0.839466 16.25 1.875 16.25C2.34386 16.25 2.77253 16.4221 3.10128 16.7066L5.48051 15.1204C5.17334 14.5221 5 13.8438 5 13.125C5 12.097 5.35454 11.1519 5.948 10.4051L4.0495 8.50661C3.77667 8.66153 3.46117 8.75 3.125 8.75C2.08947 8.75 1.25 7.91053 1.25 6.875C1.25 5.83947 2.08947 5 3.125 5C4.16053 5 5 5.83947 5 6.875C5 7.21117 4.91153 7.52667 4.75661 7.7995L6.65511 9.698C7.40186 9.10454 8.34703 8.75 9.375 8.75C9.73993 8.75 10.0944 8.79468 10.4333 8.87887L11.5735 5.83828C10.6334 5.29954 10 4.28623 10 3.125C10 1.39911 11.3991 0 13.125 0C14.8509 0 16.25 1.39911 16.25 3.125Z" fill="url(#paint0_linear_24490_65981)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_24490_65981" x1="9.65063" y1="0" x2="9.65063" y2="18.9515" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<clipPath id="clip0_24490_65981">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/images/header/providers-icon.svg b/src/images/header/providers-icon.svg
index 130c4ed7..3e9ef0c7 100644
--- a/src/images/header/providers-icon.svg
+++ b/src/images/header/providers-icon.svg
@@ -1,45 +1,33 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_19547_30237)">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" fill="#1A1A1A" stroke="#262626"/>
-<mask id="mask0_19547_30237" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" stroke="#262626"/>
-</mask>
-<g mask="url(#mask0_19547_30237)">
-<g opacity="0.25" filter="url(#filter0_f_19547_30237)">
-<circle cx="18" cy="18" r="15" fill="#FF70A9"/>
-</g>
-</g>
-<g opacity="0.1" filter="url(#filter1_f_19547_30237)">
-<circle cx="18" cy="18" r="15" fill="#FF70A9"/>
-</g>
-<g opacity="0.4" filter="url(#filter2_f_19547_30237)">
-<circle cx="18" cy="18" r="6" fill="#FF70A9"/>
-</g>
-<path d="M26.4965 9.80736C26.4947 9.79475 26.4921 9.78227 26.4887 9.77C26.4772 9.72446 26.4576 9.6813 26.431 9.64247L26.429 9.63841C26.4261 9.63394 26.4208 9.63191 26.4175 9.62785C26.4008 9.60521 26.3819 9.58427 26.3611 9.5653C26.35 9.55637 26.3369 9.55109 26.3254 9.54296C26.314 9.53484 26.3042 9.52875 26.2923 9.52225C26.2529 9.4998 26.21 9.48402 26.1654 9.47554C26.1597 9.47554 26.154 9.47554 26.1487 9.47554C26.1078 9.47072 26.0664 9.47195 26.0259 9.4792C26.0121 9.4817 25.9984 9.48496 25.985 9.48895C25.9735 9.49219 25.9616 9.4926 25.9502 9.49666L8.76285 15.995C8.69344 16.0212 8.63252 16.0656 8.58661 16.1235C8.5407 16.1814 8.51153 16.2507 8.50224 16.3238C8.49295 16.3969 8.50388 16.4712 8.53385 16.5386C8.56383 16.606 8.61173 16.6641 8.67241 16.7065L10.9029 18.2386L20.0084 14.1317L12.5924 19.8626V25.7152C12.5926 25.7918 12.6147 25.8668 12.656 25.9315C12.6974 25.9962 12.7563 26.0479 12.826 26.0808C12.8807 26.1073 12.9407 26.1212 13.0016 26.1214C13.096 26.1214 13.1875 26.0889 13.2606 26.0296L17.2984 22.7504L22.5852 26.454C22.6548 26.5025 22.7379 26.5281 22.8229 26.5275C22.9173 26.5276 23.0087 26.4952 23.0818 26.436C23.1549 26.3768 23.2051 26.2944 23.224 26.2026L26.4977 9.95682C26.498 9.95412 26.498 9.9514 26.4977 9.9487C26.4977 9.94017 26.4977 9.93164 26.4977 9.92311C26.503 9.88468 26.5026 9.84568 26.4965 9.80736Z" fill="#FF70A9"/>
-<path d="M26.4965 9.80736C26.4947 9.79475 26.4921 9.78227 26.4887 9.77C26.4772 9.72446 26.4576 9.6813 26.431 9.64247L26.429 9.63841C26.4261 9.63394 26.4208 9.63191 26.4175 9.62785C26.4008 9.60521 26.3819 9.58427 26.3611 9.5653C26.35 9.55637 26.3369 9.55109 26.3254 9.54296C26.314 9.53484 26.3042 9.52875 26.2923 9.52225C26.2529 9.4998 26.21 9.48402 26.1654 9.47554C26.1597 9.47554 26.154 9.47554 26.1487 9.47554C26.1078 9.47072 26.0664 9.47195 26.0259 9.4792C26.0121 9.4817 25.9984 9.48496 25.985 9.48895C25.9735 9.49219 25.9616 9.4926 25.9502 9.49666L8.76285 15.995C8.69344 16.0212 8.63252 16.0656 8.58661 16.1235C8.5407 16.1814 8.51153 16.2507 8.50224 16.3238C8.49295 16.3969 8.50388 16.4712 8.53385 16.5386C8.56383 16.606 8.61173 16.6641 8.67241 16.7065L10.9029 18.2386L20.0084 14.1317L12.5924 19.8626V25.7152C12.5926 25.7918 12.6147 25.8668 12.656 25.9315C12.6974 25.9962 12.7563 26.0479 12.826 26.0808C12.8807 26.1073 12.9407 26.1212 13.0016 26.1214C13.096 26.1214 13.1875 26.0889 13.2606 26.0296L17.2984 22.7504L22.5852 26.454C22.6548 26.5025 22.7379 26.5281 22.8229 26.5275C22.9173 26.5276 23.0087 26.4952 23.0818 26.436C23.1549 26.3768 23.2051 26.2944 23.224 26.2026L26.4977 9.95682C26.498 9.95412 26.498 9.9514 26.4977 9.9487C26.4977 9.94017 26.4977 9.93164 26.4977 9.92311C26.503 9.88468 26.5026 9.84568 26.4965 9.80736Z" fill="url(#paint0_linear_19547_30237)" fill-opacity="0.1" style="mix-blend-mode:plus-lighter"/>
-</g>
-<defs>
-<filter id="filter0_f_19547_30237" x="-13" y="-13" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30237"/>
-</filter>
-<filter id="filter1_f_19547_30237" x="-27" y="-27" width="90" height="90" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_19547_30237"/>
-</filter>
-<filter id="filter2_f_19547_30237" x="-4" y="-4" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30237"/>
-</filter>
-<linearGradient id="paint0_linear_19547_30237" x1="22.0008" y1="27.0013" x2="12.8022" y2="9.52392" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-<clipPath id="clip0_19547_30237">
-<rect width="36" height="36" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
+  <g clip-path="url(#clip0_24490_56944)">
+    <rect width="44" height="44" rx="4" fill="#0B0B0F"/>
+    <rect x="0.5" y="0.5" width="43" height="43" rx="3.5" stroke="#333347" stroke-opacity="0.3"/>
+    <g opacity="0.1" filter="url(#filter0_f_24490_56944)">
+      <circle cx="22" cy="22" r="19" fill="#FF70A9"/>
+    </g>
+    <g opacity="0.4" filter="url(#filter1_f_24490_56944)">
+      <circle cx="22.0004" cy="21.9984" r="7.6" fill="#FF70A9"/>
+    </g>
+    <path d="M32.3836 13.8074C32.3815 13.7948 32.3783 13.7823 32.3741 13.77C32.36 13.7245 32.3361 13.6813 32.3036 13.6425L32.3011 13.6384C32.2976 13.6339 32.2911 13.6319 32.2871 13.6278C32.2667 13.6052 32.2436 13.5843 32.2181 13.5653C32.2046 13.5564 32.1886 13.5511 32.1746 13.543C32.1606 13.5348 32.1486 13.5287 32.1341 13.5222C32.0859 13.4998 32.0335 13.484 31.979 13.4755C31.972 13.4755 31.965 13.4755 31.9585 13.4755C31.9085 13.4707 31.858 13.4719 31.8085 13.4792C31.7916 13.4817 31.7749 13.485 31.7584 13.4889C31.7444 13.4922 31.7299 13.4926 31.7159 13.4967L10.7092 19.995C10.6243 20.0212 10.5499 20.0656 10.4938 20.1235C10.4377 20.1814 10.402 20.2507 10.3907 20.3238C10.3793 20.3969 10.3926 20.4712 10.4293 20.5386C10.4659 20.606 10.5245 20.6641 10.5986 20.7065L13.3248 22.2386L24.4537 18.1317L15.3897 23.8626V29.7152C15.39 29.7918 15.417 29.8668 15.4675 29.9315C15.518 29.9962 15.5901 30.0479 15.6753 30.0808C15.7421 30.1073 15.8155 30.1212 15.8898 30.1214C16.0053 30.1214 16.1171 30.0889 16.2064 30.0296L21.1415 26.7504L27.6031 30.454C27.6882 30.5025 27.7898 30.5281 27.8937 30.5275C28.009 30.5276 28.1208 30.4952 28.2101 30.436C28.2994 30.3768 28.3608 30.2944 28.3839 30.2026L32.3851 13.9568C32.3854 13.9541 32.3854 13.9514 32.3851 13.9487C32.3851 13.9402 32.3851 13.9316 32.3851 13.9231C32.3916 13.8847 32.3911 13.8457 32.3836 13.8074Z" fill="#FF70A9"/>
+    <path d="M32.3836 13.8074C32.3815 13.7948 32.3783 13.7823 32.3741 13.77C32.36 13.7245 32.3361 13.6813 32.3036 13.6425L32.3011 13.6384C32.2976 13.6339 32.2911 13.6319 32.2871 13.6278C32.2667 13.6052 32.2436 13.5843 32.2181 13.5653C32.2046 13.5564 32.1886 13.5511 32.1746 13.543C32.1606 13.5348 32.1486 13.5287 32.1341 13.5222C32.0859 13.4998 32.0335 13.484 31.979 13.4755C31.972 13.4755 31.965 13.4755 31.9585 13.4755C31.9085 13.4707 31.858 13.4719 31.8085 13.4792C31.7916 13.4817 31.7749 13.485 31.7584 13.4889C31.7444 13.4922 31.7299 13.4926 31.7159 13.4967L10.7092 19.995C10.6243 20.0212 10.5499 20.0656 10.4938 20.1235C10.4377 20.1814 10.402 20.2507 10.3907 20.3238C10.3793 20.3969 10.3926 20.4712 10.4293 20.5386C10.4659 20.606 10.5245 20.6641 10.5986 20.7065L13.3248 22.2386L24.4537 18.1317L15.3897 23.8626V29.7152C15.39 29.7918 15.417 29.8668 15.4675 29.9315C15.518 29.9962 15.5901 30.0479 15.6753 30.0808C15.7421 30.1073 15.8155 30.1212 15.8898 30.1214C16.0053 30.1214 16.1171 30.0889 16.2064 30.0296L21.1415 26.7504L27.6031 30.454C27.6882 30.5025 27.7898 30.5281 27.8937 30.5275C28.009 30.5276 28.1208 30.4952 28.2101 30.436C28.2994 30.3768 28.3608 30.2944 28.3839 30.2026L32.3851 13.9568C32.3854 13.9541 32.3854 13.9514 32.3851 13.9487C32.3851 13.9402 32.3851 13.9316 32.3851 13.9231C32.3916 13.8847 32.3911 13.8457 32.3836 13.8074Z" fill="url(#paint0_linear_24490_56944)" fill-opacity="0.1" style="mix-blend-mode:plus-lighter"/>
+  </g>
+  <defs>
+    <filter id="filter0_f_24490_56944" x="-27" y="-27" width="98" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_24490_56944"/>
+    </filter>
+    <filter id="filter1_f_24490_56944" x="-1.59961" y="-1.60156" width="47.2002" height="47.1992" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_24490_56944"/>
+    </filter>
+    <linearGradient id="paint0_linear_24490_56944" x1="26.8889" y1="31.0013" x2="18.7814" y2="12.1738" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="white"/>
+    </linearGradient>
+    <clipPath id="clip0_24490_56944">
+      <rect width="44" height="44" fill="white"/>
+    </clipPath>
+  </defs>
 </svg>
diff --git a/src/images/header/push-icon.svg b/src/images/header/push-icon.svg
new file mode 100644
index 00000000..d93e4b47
--- /dev/null
+++ b/src/images/header/push-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.5C5 2.67157 5.67157 2 6.5 2H12.9961C13.8245 2 14.4961 2.67157 14.4961 3.5V16C14.4961 16.8284 13.8245 17.5 12.9961 17.5H6.5C5.67157 17.5 5 16.8284 5 16V3.5ZM6.25 5.15C6.25 4.92909 6.42909 4.75 6.65 4.75H12.85C13.0709 4.75 13.25 4.92909 13.25 5.15V6.35C13.25 6.57091 13.0709 6.75 12.85 6.75H6.65C6.42909 6.75 6.25 6.57091 6.25 6.35V5.15ZM9.75 16.0039C10.3023 16.0039 10.75 15.5562 10.75 15.0039C10.75 14.4516 10.3023 14.0039 9.75 14.0039C9.19772 14.0039 8.75 14.4516 8.75 15.0039C8.75 15.5562 9.19772 16.0039 9.75 16.0039Z" fill="url(#paint0_linear_24490_56877)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56877" x1="9.74805" y1="1.62838" x2="9.74805" y2="18.6972" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/security-icon.svg b/src/images/header/security-icon.svg
new file mode 100644
index 00000000..c1a50370
--- /dev/null
+++ b/src/images/header/security-icon.svg
@@ -0,0 +1,14 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.375 7.75H12.125V5.5C12.125 4.90326 11.8879 4.33097 11.466 3.90901C11.044 3.48705 10.4717 3.25 9.875 3.25C9.27826 3.25 8.70597 3.48705 8.28401 3.90901C7.86205 4.33097 7.625 4.90326 7.625 5.5V7.75H5.375V5.5C5.375 4.30653 5.84911 3.16193 6.69302 2.31802C7.53693 1.47411 8.68153 1 9.875 1C11.0685 1 12.2131 1.47411 13.057 2.31802C13.9009 3.16193 14.375 4.30653 14.375 5.5V7.75Z" fill="url(#paint0_linear_24490_56847)"/>
+<path d="M16.625 8.875H3.125C2.82663 8.875 2.54048 8.99353 2.3295 9.20451C2.11853 9.41548 2 9.70163 2 10V17.875C2 18.1734 2.11853 18.4595 2.3295 18.6705C2.54048 18.8815 2.82663 19 3.125 19H16.625C16.9234 19 17.2095 18.8815 17.4205 18.6705C17.6315 18.4595 17.75 18.1734 17.75 17.875V10C17.75 9.70163 17.6315 9.41548 17.4205 9.20451C17.2095 8.99353 16.9234 8.875 16.625 8.875ZM9.875 15.625C9.54124 15.625 9.21498 15.526 8.93748 15.3406C8.65997 15.1552 8.44368 14.8916 8.31595 14.5833C8.18823 14.2749 8.15481 13.9356 8.21992 13.6083C8.28504 13.2809 8.44576 12.9803 8.68176 12.7443C8.91776 12.5083 9.21844 12.3475 9.54578 12.2824C9.87313 12.2173 10.2124 12.2507 10.5208 12.3785C10.8291 12.5062 11.0927 12.7225 11.2781 13C11.4635 13.2775 11.5625 13.6037 11.5625 13.9375C11.5625 14.3851 11.3847 14.8143 11.0682 15.1307C10.7518 15.4472 10.3226 15.625 9.875 15.625Z" fill="url(#paint1_linear_24490_56847)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56847" x1="9.875" y1="1" x2="9.875" y2="7.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_24490_56847" x1="9.875" y1="8.875" x2="9.875" y2="19" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/sms-icon.svg b/src/images/header/sms-icon.svg
new file mode 100644
index 00000000..d358f836
--- /dev/null
+++ b/src/images/header/sms-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.6 2H16.4C17.28 2 18 2.72 18 3.6V13.2C18 14.08 17.28 14.8 16.4 14.8H5.2L2 18L2.008 3.6C2.008 2.72 2.72 2 3.6 2ZM6.30935 9.47807C6.90411 9.47807 7.38627 8.99591 7.38627 8.40114C7.38627 7.80637 6.90411 7.32422 6.30935 7.32422C5.71458 7.32422 5.23242 7.80637 5.23242 8.40114C5.23242 8.99591 5.71458 9.47807 6.30935 9.47807ZM10.0027 9.47807C10.5975 9.47807 11.0796 8.99591 11.0796 8.40114C11.0796 7.80637 10.5975 7.32422 10.0027 7.32422C9.40794 7.32422 8.92578 7.80637 8.92578 8.40114C8.92578 8.99591 9.40794 9.47807 10.0027 9.47807ZM14.771 8.40114C14.771 8.99591 14.2889 9.47807 13.6941 9.47807C13.0993 9.47807 12.6172 8.99591 12.6172 8.40114C12.6172 7.80637 13.0993 7.32422 13.6941 7.32422C14.2889 7.32422 14.771 7.80637 14.771 8.40114Z" fill="url(#paint0_linear_24490_56890)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56890" x1="10" y1="2" x2="10" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/subscriber-icon.svg b/src/images/header/subscriber-icon.svg
new file mode 100644
index 00000000..45e40f0b
--- /dev/null
+++ b/src/images/header/subscriber-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.07143 1C2.4797 1 2 1.4797 2 2.07143V15.5171C2 16.1089 2.4797 16.5886 3.07143 16.5886H7.47059C7.41058 16.3805 7.39257 16.1612 7.41923 15.9435C7.46209 15.5937 7.61806 15.2674 7.86339 15.0143L7.86469 15.013L8.40799 14.4513L7.86469 13.8896L7.86324 13.8881C7.618 13.635 7.46208 13.3088 7.41923 12.959C7.37637 12.6091 7.44895 12.2549 7.62592 11.9501L8.05311 11.2127L8.05403 11.2111C8.22984 10.9074 8.49966 10.6691 8.8228 10.5321C9.14643 10.395 9.50592 10.3669 9.84688 10.4523L10.6075 10.6427L10.8233 9.88784C10.9199 9.55004 11.1239 9.25271 11.4044 9.04112C11.6849 8.82953 12.0266 8.715 12.3779 8.71484H13.2333C13.5842 8.71483 13.9257 8.82889 14.206 9.03983C14.4865 9.25079 14.6907 9.54722 14.7879 9.88441L14.7887 9.88744L15.0043 10.642L15.1903 10.5954V2.07143C15.1903 1.4797 14.7106 1 14.1189 1H3.07143ZM4.99707 3.46038C4.7012 3.46038 4.46135 3.70023 4.46135 3.99609C4.46135 4.29196 4.7012 4.53181 4.99707 4.53181H12.1918C12.4877 4.53181 12.7275 4.29196 12.7275 3.99609C12.7275 3.70023 12.4877 3.46038 12.1918 3.46038H4.99707ZM4.99707 6.46038C4.7012 6.46038 4.46135 6.70023 4.46135 6.99609C4.46135 7.29196 4.7012 7.53181 4.99707 7.53181H12.1918C12.4877 7.53181 12.7275 7.29196 12.7275 6.99609C12.7275 6.70023 12.4877 6.46038 12.1918 6.46038H4.99707ZM4.46135 9.99219C4.46135 9.69632 4.7012 9.45647 4.99707 9.45647H7.39531C7.69118 9.45647 7.93103 9.69632 7.93103 9.99219C7.93103 10.2881 7.69118 10.5279 7.39531 10.5279H4.99707C4.7012 10.5279 4.46135 10.2881 4.46135 9.99219ZM16.1483 11.7611L14.7917 12.1008C14.5579 11.9155 14.2983 11.7652 14.0212 11.6548L13.6372 10.3106C13.6166 10.239 13.5733 10.1762 13.5138 10.1314C13.4544 10.0867 13.382 10.0625 13.3075 10.0625H12.4526C12.378 10.0625 12.3056 10.0868 12.2461 10.1317C12.1866 10.1766 12.1433 10.2396 12.1228 10.3112L11.7386 11.6555C11.4616 11.766 11.2021 11.9163 10.9684 12.1015L9.61145 11.7618C9.53912 11.7437 9.46286 11.7496 9.39421 11.7787C9.32555 11.8078 9.26825 11.8585 9.23096 11.9231L8.80245 12.6628C8.76477 12.7275 8.7493 12.8028 8.75841 12.8771C8.76751 12.9514 8.80069 13.0207 8.85288 13.0745L9.82622 14.0807C9.7791 14.3746 9.7791 14.6741 9.82622 14.968L8.85288 15.9742C8.80069 16.028 8.76751 16.0973 8.75841 16.1716C8.7493 16.2459 8.76477 16.3212 8.80245 16.3859L9.22959 17.1263C9.26688 17.1909 9.32418 17.2416 9.39283 17.2707C9.46149 17.2998 9.53775 17.3057 9.61008 17.2876L10.967 16.9479C11.2008 17.1331 11.4602 17.2834 11.7372 17.3939L12.1215 18.7381C12.142 18.8098 12.1852 18.8728 12.2447 18.9177C12.3042 18.9626 12.3767 18.9869 12.4512 18.9869H13.3062C13.3807 18.9869 13.4531 18.9626 13.5126 18.9177C13.5721 18.8728 13.6154 18.8098 13.6359 18.7381L14.0198 17.3939C14.2969 17.2835 14.5565 17.1332 14.7904 16.9479L16.1469 17.2876C16.2192 17.3057 16.2955 17.2998 16.3642 17.2707C16.4328 17.2416 16.4901 17.1909 16.5274 17.1263L16.9549 16.3859C16.9926 16.3212 17.008 16.2459 16.9989 16.1716C16.9898 16.0973 16.9566 16.028 16.9045 15.9742L15.9308 14.968C15.9783 14.6741 15.9783 14.3746 15.9308 14.0807L16.9045 13.0745C16.9566 13.0207 16.9898 12.9514 16.9989 12.8771C17.008 12.8028 16.9926 12.7275 16.9549 12.6628L16.5288 11.9224C16.4915 11.8578 16.4342 11.8071 16.3655 11.778C16.2969 11.7489 16.2206 11.743 16.1483 11.7611ZM14.075 14.5233C14.075 15.1856 13.5381 15.7225 12.8759 15.7225C12.2136 15.7225 11.6768 15.1856 11.6768 14.5233C11.6768 13.8611 12.2136 13.3242 12.8759 13.3242C13.5381 13.3242 14.075 13.8611 14.075 14.5233Z" fill="url(#paint0_linear_24490_56820)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56820" x1="9.72131" y1="1" x2="9.72131" y2="18.0443" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/team-community-icon.svg b/src/images/header/team-community-icon.svg
new file mode 100644
index 00000000..c528c464
--- /dev/null
+++ b/src/images/header/team-community-icon.svg
@@ -0,0 +1,24 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9404 7C14.5973 7 15.9404 5.65685 15.9404 4C15.9404 2.34315 14.5973 1 12.9404 1C11.2836 1 9.94043 2.34315 9.94043 4C9.94043 5.65685 11.2836 7 12.9404 7Z" fill="url(#paint0_linear_24490_56934)"/>
+<path d="M6.93945 11.5C8.59631 11.5 9.93945 10.1569 9.93945 8.5C9.93945 6.84315 8.59631 5.5 6.93945 5.5C5.2826 5.5 3.93945 6.84315 3.93945 8.5C3.93945 10.1569 5.2826 11.5 6.93945 11.5Z" fill="url(#paint1_linear_24490_56934)"/>
+<path d="M12.9405 8.5C12.4208 8.5 11.9153 8.572 11.4308 8.6995C11.3708 10.0555 10.7115 11.2555 9.70801 12.0415C10.9823 12.5545 12.0915 13.4103 12.9165 14.5H18.132C18.3495 14.5 18.5558 14.4055 18.699 14.2413C18.8408 14.077 18.9053 13.8587 18.8745 13.6435C18.453 10.711 15.9015 8.5 12.9405 8.5Z" fill="url(#paint2_linear_24490_56934)"/>
+<path d="M6.94077 13C3.97977 13 1.42902 15.211 1.00752 18.1435C0.976773 18.3587 1.04127 18.577 1.18302 18.7413C1.32552 18.9055 1.53252 19 1.75002 19H12.1315C12.349 19 12.5553 18.9055 12.6985 18.7413C12.8403 18.577 12.9048 18.3587 12.874 18.1435C12.4525 15.211 9.90177 13 6.94077 13Z" fill="url(#paint3_linear_24490_56934)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56934" x1="12.9404" y1="1" x2="12.9404" y2="7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_24490_56934" x1="6.93945" y1="5.5" x2="6.93945" y2="11.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint2_linear_24490_56934" x1="14.295" y1="8.5" x2="14.295" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint3_linear_24490_56934" x1="6.94077" y1="13" x2="6.94077" y2="19" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/use-cases-icon.svg b/src/images/header/use-cases-icon.svg
index b0842e64..dab07b86 100644
--- a/src/images/header/use-cases-icon.svg
+++ b/src/images/header/use-cases-icon.svg
@@ -1,45 +1,33 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_19547_30208)">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" fill="#1A1A1A" stroke="#262626"/>
-<mask id="mask0_19547_30208" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
-<rect x="0.5" y="0.5" width="35" height="35" rx="3.5" stroke="#262626"/>
-</mask>
-<g mask="url(#mask0_19547_30208)">
-<g opacity="0.25" filter="url(#filter0_f_19547_30208)">
-<circle cx="18" cy="18" r="15" fill="#3366FF"/>
-</g>
-</g>
-<g opacity="0.1" filter="url(#filter1_f_19547_30208)">
-<circle cx="18" cy="18" r="15" fill="#3366FF"/>
-</g>
-<g opacity="0.4" filter="url(#filter2_f_19547_30208)">
-<circle cx="18" cy="18" r="6" fill="#3366FF"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.733 18.3714C23.733 20.5117 25.5546 23.0923 25.5729 23.1179C25.6137 23.1751 25.638 23.2424 25.643 23.3124C25.6481 23.3824 25.6338 23.4525 25.6016 23.515C25.5695 23.5774 25.5208 23.6298 25.4608 23.6663C25.4009 23.7029 25.332 23.7222 25.2618 23.7222H10.7382C10.668 23.7222 10.5991 23.7029 10.5392 23.6663C10.4792 23.6298 10.4305 23.5774 10.3984 23.515C10.3662 23.4525 10.3519 23.3824 10.357 23.3124C10.362 23.2424 10.3863 23.1751 10.4271 23.1179C10.4454 23.0923 12.267 20.5117 12.267 18.3714V14.5494C12.267 13.0289 12.871 11.5707 13.9461 10.4956C15.0213 9.42042 16.4795 8.81641 18 8.81641C19.5205 8.81641 20.9787 9.42042 22.0538 10.4956C23.129 11.5707 23.733 13.0289 23.733 14.5494V18.3714ZM19.8194 26.4715C19.3107 26.9301 18.6662 27.1823 17.9999 27.1836C17.3335 27.1823 16.6891 26.9301 16.1804 26.4715C15.6717 26.0129 15.3314 25.3776 15.2198 24.6776H20.78C20.6683 25.3776 20.3281 26.0129 19.8194 26.4715Z" fill="#3366FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.733 18.3714C23.733 20.5117 25.5546 23.0923 25.5729 23.1179C25.6137 23.1751 25.638 23.2424 25.643 23.3124C25.6481 23.3824 25.6338 23.4525 25.6016 23.515C25.5695 23.5774 25.5208 23.6298 25.4608 23.6663C25.4009 23.7029 25.332 23.7222 25.2618 23.7222H10.7382C10.668 23.7222 10.5991 23.7029 10.5392 23.6663C10.4792 23.6298 10.4305 23.5774 10.3984 23.515C10.3662 23.4525 10.3519 23.3824 10.357 23.3124C10.362 23.2424 10.3863 23.1751 10.4271 23.1179C10.4454 23.0923 12.267 20.5117 12.267 18.3714V14.5494C12.267 13.0289 12.871 11.5707 13.9461 10.4956C15.0213 9.42042 16.4795 8.81641 18 8.81641C19.5205 8.81641 20.9787 9.42042 22.0538 10.4956C23.129 11.5707 23.733 13.0289 23.733 14.5494V18.3714ZM19.8194 26.4715C19.3107 26.9301 18.6662 27.1823 17.9999 27.1836C17.3335 27.1823 16.6891 26.9301 16.1804 26.4715C15.6717 26.0129 15.3314 25.3776 15.2198 24.6776H20.78C20.6683 25.3776 20.3281 26.0129 19.8194 26.4715Z" fill="url(#paint0_linear_19547_30208)" fill-opacity="0.1" style="mix-blend-mode:plus-lighter"/>
-</g>
-<defs>
-<filter id="filter0_f_19547_30208" x="-13" y="-13" width="62" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30208"/>
-</filter>
-<filter id="filter1_f_19547_30208" x="-27" y="-27" width="90" height="90" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_19547_30208"/>
-</filter>
-<filter id="filter2_f_19547_30208" x="-4" y="-4" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_19547_30208"/>
-</filter>
-<linearGradient id="paint0_linear_19547_30208" x1="21.822" y1="27.6938" x2="10.7234" y2="11.0654" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="white"/>
-</linearGradient>
-<clipPath id="clip0_19547_30208">
-<rect width="36" height="36" fill="white"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
+  <g clip-path="url(#clip0_24574_39617)">
+    <rect width="44" height="44" rx="4" fill="#0B0B0F"/>
+    <rect x="0.5" y="0.5" width="43" height="43" rx="3.5" stroke="#333347" stroke-opacity="0.3"/>
+    <g opacity="0.2" filter="url(#filter0_f_24574_39617)">
+      <circle cx="22" cy="22" r="19" fill="#3366FF"/>
+    </g>
+    <g opacity="0.6" filter="url(#filter1_f_24574_39617)">
+      <circle cx="22" cy="22" r="8" fill="#3366FF"/>
+    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.006 22.4518C29.006 25.0677 31.2323 28.2218 31.2547 28.2531C31.3046 28.3229 31.3343 28.4052 31.3404 28.4908C31.3466 28.5764 31.3291 28.662 31.2899 28.7383C31.2506 28.8146 31.191 28.8786 31.1177 28.9233C31.0445 28.968 30.9603 28.9916 30.8745 28.9916H13.1234C13.0376 28.9916 12.9534 28.968 12.8802 28.9233C12.8069 28.8786 12.7474 28.8146 12.7081 28.7383C12.6688 28.662 12.6513 28.5764 12.6575 28.4908C12.6637 28.4052 12.6933 28.3229 12.7432 28.2531C12.7656 28.2218 14.992 25.0677 14.992 22.4518V17.7804C14.992 15.9221 15.7302 14.1398 17.0443 12.8257C18.3583 11.5117 20.1406 10.7734 21.999 10.7734C23.8573 10.7734 25.6396 11.5117 26.9537 12.8257C28.2677 14.1398 29.006 15.9221 29.006 17.7804V22.4518ZM24.2233 32.3527C23.6015 32.9131 22.8138 33.2214 21.9994 33.223C21.185 33.2214 20.3973 32.9131 19.7756 32.3527C19.1538 31.7922 18.738 31.0156 18.6016 30.1602H25.3973C25.2608 31.0156 24.845 31.7922 24.2233 32.3527Z" fill="#3366FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M29.006 22.4518C29.006 25.0677 31.2323 28.2218 31.2547 28.2531C31.3046 28.3229 31.3343 28.4052 31.3404 28.4908C31.3466 28.5764 31.3291 28.662 31.2899 28.7383C31.2506 28.8146 31.191 28.8786 31.1177 28.9233C31.0445 28.968 30.9603 28.9916 30.8745 28.9916H13.1234C13.0376 28.9916 12.9534 28.968 12.8802 28.9233C12.8069 28.8786 12.7474 28.8146 12.7081 28.7383C12.6688 28.662 12.6513 28.5764 12.6575 28.4908C12.6637 28.4052 12.6933 28.3229 12.7432 28.2531C12.7656 28.2218 14.992 25.0677 14.992 22.4518V17.7804C14.992 15.9221 15.7302 14.1398 17.0443 12.8257C18.3583 11.5117 20.1406 10.7734 21.999 10.7734C23.8573 10.7734 25.6396 11.5117 26.9537 12.8257C28.2677 14.1398 29.006 15.9221 29.006 17.7804V22.4518ZM24.2233 32.3527C23.6015 32.9131 22.8138 33.2214 21.9994 33.223C21.185 33.2214 20.3973 32.9131 19.7756 32.3527C19.1538 31.7922 18.738 31.0156 18.6016 30.1602H25.3973C25.2608 31.0156 24.845 31.7922 24.2233 32.3527Z" fill="url(#paint0_linear_24574_39617)" fill-opacity="0.1"/>
+  </g>
+  <defs>
+    <filter id="filter0_f_24574_39617" x="-27" y="-27" width="98" height="98" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur_24574_39617"/>
+    </filter>
+    <filter id="filter1_f_24574_39617" x="-2" y="-2" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_24574_39617"/>
+    </filter>
+    <linearGradient id="paint0_linear_24574_39617" x1="25.9975" y1="32.9965" x2="17.9988" y2="11" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="white"/>
+    </linearGradient>
+    <clipPath id="clip0_24574_39617">
+      <rect width="44" height="44" fill="white"/>
+    </clipPath>
+  </defs>
 </svg>
diff --git a/src/images/header/user-icon.svg b/src/images/header/user-icon.svg
new file mode 100644
index 00000000..20880907
--- /dev/null
+++ b/src/images/header/user-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5443 6.25947C13.5443 8.19677 11.996 10.4486 9.99971 10.4486C8.00344 10.4486 6.45508 8.19677 6.45508 6.25947C6.45508 4.30509 8.04533 2.71484 9.99971 2.71484C11.9541 2.71484 13.5443 4.30509 13.5443 6.25947ZM7.76139 11.9375H12.2349C14.9072 11.9375 17.0813 14.1116 17.0813 16.7839V17.5294C17.0813 17.6916 16.9765 17.8351 16.8222 17.8847C16.7245 17.9157 14.3864 18.6478 9.99817 18.6478C5.60998 18.6478 3.27181 17.9157 3.17413 17.8847C3.01979 17.8351 2.91504 17.6916 2.91504 17.5294V16.7839C2.91504 14.1116 5.08919 11.9375 7.76139 11.9375Z" fill="url(#paint0_linear_24490_56798)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56798" x1="9.99817" y1="1.50157" x2="9.99817" y2="18.6483" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/images/header/workflow-digest-icon.svg b/src/images/header/workflow-digest-icon.svg
new file mode 100644
index 00000000..99e296d0
--- /dev/null
+++ b/src/images/header/workflow-digest-icon.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7817 1.4043C10.8253 1.04576 10.3725 0.853806 10.1451 1.13443L2.0809 11.088C1.89036 11.3231 2.05774 11.6742 2.36042 11.6742H9.59389C9.80978 11.6742 9.97705 11.863 9.95101 12.0773L9.21826 18.1068C9.17469 18.4653 9.62754 18.6573 9.8549 18.3766L17.9191 8.4231C18.1096 8.18792 17.9423 7.83689 17.6396 7.83689H10.4061C10.1902 7.83689 10.0229 7.64807 10.049 7.43375L10.7817 1.4043Z" fill="url(#paint0_linear_24490_56804)"/>
+<defs>
+<linearGradient id="paint0_linear_24490_56804" x1="9.99998" y1="0.162705" x2="9.99998" y2="19.3491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#F5F5F5" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/styles/global.css b/src/styles/global.css
index 3e04cf69..0a300f58 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -52,29 +52,32 @@
     visibility: visible;
     opacity: 1;
   }
+  body:has([data-disable-document-scroll='true']) {
+    @apply md:overflow-hidden;
 
-  .code-block-bg {
-    background: linear-gradient(135deg, #16222e, #080c1a 54%, #05050b),
-      radial-gradient(
-        circle at 41.5% 0%,
-        rgba(135, 188, 195, 0.15),
-        #1e2438 49%,
-        rgba(30, 36, 56, 0.5) 100%
-      ),
-      radial-gradient(
-        circle at 22.5% 5.4%,
-        #ffffff,
-        #bee0ff 33.2%,
-        rgba(134, 204, 255, 0.5) 50.5%,
-        rgba(67, 64, 74, 0) 100%
-      );
-  }
+    .code-block-bg {
+      background: linear-gradient(135deg, #16222e, #080c1a 54%, #05050b),
+        radial-gradient(
+          circle at 41.5% 0%,
+          rgba(135, 188, 195, 0.15),
+          #1e2438 49%,
+          rgba(30, 36, 56, 0.5) 100%
+        ),
+        radial-gradient(
+          circle at 22.5% 5.4%,
+          #ffffff,
+          #bee0ff 33.2%,
+          rgba(134, 204, 255, 0.5) 50.5%,
+          rgba(67, 64, 74, 0) 100%
+        );
+    }
 
-  .border-linear {
-    @apply border border-transparent;
-    mask:
-      linear-gradient(#fff 0 0) padding-box,
-      linear-gradient(#fff 0 0);
-    mask-composite: exclude;
+    .border-linear {
+      @apply border border-transparent;
+      mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0);
+      mask-composite: exclude;
+    }
   }
 }