diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..69002fa
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,16 @@
+/* -------------------------------------------------------------------------- */
+/*                                  Libraries                                 */
+/* -------------------------------------------------------------------------- */
+import React from "react";
+/* -------------------------------------------------------------------------- */
+/*                         Application root component                         */
+/* -------------------------------------------------------------------------- */
+/**
+ * Application root component
+ * @return {JSX.Element}
+ */
+function App() {
+  return <div>Hello world!</div>;
+}
+
+export default App;
diff --git a/src/assets/svg/fundomental.svg b/src/assets/svg/fundamental.svg
similarity index 100%
rename from src/assets/svg/fundomental.svg
rename to src/assets/svg/fundamental.svg
diff --git a/src/components/BaseLayout.tsx b/src/components/BaseLayout.tsx
index d9fa40f..2c143c9 100644
--- a/src/components/BaseLayout.tsx
+++ b/src/components/BaseLayout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-// import { Footer } from "./parts/Footer";
+import { Footer } from "./parts/Footer";
 import Header from "./parts/Header";
 type Props = {
   header?: React.ReactElement;
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
deleted file mode 100644
index 0073083..0000000
--- a/src/components/ContextMenu.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                                   Imports                                  */
-/* -------------------------------------------------------------------------- */
-import React, { Fragment } from "react";
-import { Menu, Transition } from "@headlessui/react";
-import { PropsPartion } from "./ContextMenuItem";
-import classNames from "classnames";
-import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg";
-type ChildType = React.ReactElement<any & PropsPartion[]>;
-type ChildrenType = ChildType[] | ChildType;
-
-/* -------------------------------------------------------------------------- */
-/*                               Component props                              */
-/* -------------------------------------------------------------------------- */
-
-type MenuProps = {
-  emphasis?: "high" | "low";
-  disabled?: boolean;
-  className?: string | undefined;
-  button: React.ReactNode;
-  children: ChildrenType;
-};
-/* -------------------------------------------------------------------------- */
-/*                                Styles                                      */
-/* -------------------------------------------------------------------------- */
-
-const MenuButtonStyle = `
-inline-flex 
-justify-center w-full
-cursor-default    
-rounded
-border border-gray-100
-outline-8
-py-2
-px-2 
-text-base`;
-
-const MenuItemStyle = `
-absolute
-left-0 
-mt-2 w-60 
-origin-top-left 
-rounded 
-shadow-lg 
-focus:outline-none 
-py-2 px-4 sm:text-sm`;
-
-/* -------------------------------------------------------------------------- */
-/*                          Component implementation                          */
-/* -------------------------------------------------------------------------- */
-/**
- *   Use width ContextMenuAction.tsx , for example:
- *   <ContextMenu button="MyButton" emphasis="low/high">
- *   <ContextMenuAction
- *   caption="First Menu"
- *   icon={icon}
- *   action={() => alert('click')}
- *   ></ContextMenuAction>
- *   ...
- *  </ContextMenu>
- */
-export default function ContextMenu({
-  button,
-  children,
-  className,
-  emphasis = "low",
-}: MenuProps) {
-  return (
-    <Menu as="div" className="relative inline-block text-right">
-      {({ open }) => (
-        <>
-          <Menu.Button
-            className={classNames([
-              `${MenuButtonStyle}`,
-              {
-                "hover:bg-gray-100 font-bold uppercase": emphasis === "high",
-              },
-              className,
-            ])}
-          >
-            {button}
-            <SelectIcon
-              className={`${
-                open ? "rotate-180 transform" : "font-normal"
-              } my-2 mx-3 h-2 w-3 flex-center`}
-              aria-hidden="true"
-            />
-          </Menu.Button>
-
-          <Transition
-            as={Fragment}
-            show={open}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items
-              static
-              className={classNames([
-                className,
-                `${MenuItemStyle}`,
-                { "ml-2": emphasis === "high" },
-              ])}
-            >
-              {children}
-            </Menu.Items>
-          </Transition>
-        </>
-      )}
-    </Menu>
-  );
-}
diff --git a/src/components/ContextMenuAction.tsx b/src/components/ContextMenuAction.tsx
deleted file mode 100644
index 8d1e653..0000000
--- a/src/components/ContextMenuAction.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-type Props = {
-  action: Function;
-  caption: string;
-  disabled?: boolean;
-  icon?: React.ReactNode;
-  className?: string | undefined;
-};
-
-export default function ContextMenuAction({
-  action,
-  caption,
-  disabled,
-  icon,
-  className,
-}: Props) {
-  return (
-    <a
-      href="#"
-      onClick={(e) => action(e)}
-      className={classNames([
-        "group flex px-2 rounded items-center text-base hover:bg-gray-100",
-        className,
-      ])}
-    >
-      {icon && <div className="mr-2 h-5 w-5">{icon}</div>}
-      <span className="px-2 py-2">{caption}</span>
-    </a>
-  );
-}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index d9934f5..0000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import classNames from "classnames";
-import { useState } from "react";
-/* -------------------------------------------------------------------------- */
-/*                                 Components                                 */
-/* -------------------------------------------------------------------------- */
-import ContextMenuAction from "./ContextMenuAction";
-import ContextMenu from "./ContextMenu";
-import Logofreeland from "./Logofreeland";
-import { Button } from "./Button/Button";
-import Avatar from "./Avatar";
-import Navbar from "./Navbar";
-import Bell from "./Bell";
-import Logo from "./Logo";
-import Link from "./Link";
-
-/* -------------------------------------------------------------------------- */
-/*                                    Icons                                   */
-/* -------------------------------------------------------------------------- */
-import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg";
-import { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
-import { ReactComponent as SVGFile } from "assets/svg/file.svg";
-import { ReactComponent as SVGEye } from "assets/svg/eye.svg";
-
-const Header = () => {
-  const [authenticated, setAuthenticated] = useState(false);
-  const onClick = () => setAuthenticated(true);
-
-  /* -------------------------------------------------------------------------- */
-  /*                         Implement Header Component                         */
-  /* -------------------------------------------------------------------------- */
-  return (
-    <header
-      className="header flex justify-between items-center  box-border w-full 
-                border border-gray-75  
-                h-16 
-                px-4
-                gap-5
-                md:gap-20
-                lg:gap-40 lg:px-8
-                xl:gap-60 xl:px-16"
-    >
-      {/* Logo and Menu */}
-      <div className="flex gap-8 xl:gap-x-16">
-        {/* Logo  - start - className="w-7 sm:w-10  " /> */}
-        <a className="Logo flex items-center gap-1  sm:gap-2 " href="/">
-          <Logo
-            className={classNames(authenticated ? "w-10" : "w-7 sm:w-10")}
-          />
-          <Logofreeland
-            className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")}
-          />
-        </a>
-        {/* Logo  - end - */}
-
-        {/* Menu( Create new - My library - About ) Start */}
-        <div
-          className="hidden lg:flex items-center
-             gap-2"
-        >
-          {/* Link Create now - start -  */}
-          <Link className="text-blue-500 px-4 font-bold uppercase" href="#">
-            Create new
-          </Link>
-          {/* Link Create now - end -  */}
-
-          {/* Dropdown Menu My library - start - */}
-          <ContextMenu
-            emphasis="high"
-            button="My library"
-            className="border-none uppercase"
-          >
-            <ContextMenuAction
-              caption="My Publications"
-              action={() => console.log("My publications")}
-              icon={<SVGFile className="stroke-black " />}
-            ></ContextMenuAction>
-
-            <ContextMenuAction
-              caption="My Favorites"
-              action={() => console.log("My Favorites")}
-              icon={<SVGFavoriteOutlined className="stroke-black" />}
-            ></ContextMenuAction>
-
-            <ContextMenuAction
-              caption="My Collections"
-              action={() => console.log("My Collections")}
-              icon={<SVGFolder className="stroke-black fill-black" />}
-            ></ContextMenuAction>
-
-            <ContextMenuAction
-              caption="Recent Viewed"
-              action={() => console.log("Recent Viewed")}
-              icon={<SVGEye className="stroke-black " />}
-            ></ContextMenuAction>
-          </ContextMenu>
-          {/* Dropdown Menu My library - End -  */}
-
-          {/* Dropdown Menu About - start - */}
-          <ContextMenu
-            emphasis="high"
-            button="About"
-            className="border-none uppercase"
-          >
-            <ContextMenuAction
-              caption="About Freeland"
-              action={() => console.log("About Freeland")}
-            ></ContextMenuAction>
-
-            <ContextMenuAction
-              caption="Contact Us"
-              action={() => console.log("Contact Us")}
-            ></ContextMenuAction>
-
-            <ContextMenuAction
-              caption="Help"
-              action={() => console.log("Help")}
-            ></ContextMenuAction>
-          </ContextMenu>
-          {/* Dropdown Menu About - End - */}
-        </div>
-        {/* Menu( Create new - My library - About ) End */}
-      </div>
-
-      {/* Sign in - Sign up - Notification - Avatar - Burger  */}
-      <div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
-        {!authenticated
-          ? [
-              <Button
-                emphasis="low"
-                onClick={onClick}
-                className="text-xs sm:px-4 sm:text-sm  "
-              >
-                Sign in
-              </Button>,
-              <Button
-                emphasis="medium"
-                className="hidden md:flex"
-                onClick={onClick}
-              >
-                Sign up
-              </Button>,
-            ]
-          : [
-              <Button emphasis="low">
-                <Button.Icon>
-                  <Bell className="h-6 w-6" />
-                </Button.Icon>
-              </Button>,
-
-              <Button emphasis="low" className="hidden lg:flex">
-                <Button.Icon>
-                  <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
-                </Button.Icon>
-              </Button>,
-            ]}
-        {/* Burger component will be shown for the small screens */}
-        <Navbar className="block lg:hidden" />
-      </div>
-    </header>
-  );
-};
-
-export default Header;
diff --git a/src/components/Logotype.tsx b/src/components/Logotype.tsx
deleted file mode 100644
index a699268..0000000
--- a/src/components/Logotype.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import {ReactComponent as SVGLogotype} from 'assets/svg/logotype.svg';
-import { Link } from 'react-router-dom';
-
-type Props = {
-  name?: string;
-}
-
-/**
- * Horizontal variant of logotype component
- * @param {string} name Name of service to attach to logotype
- * @return {React.ReactNode}
- */
-export default function Logotype({name}: Props): JSX.Element {
-  return (
-    <div className="inline-flex flex-row flex-nowrap items-center">
-      <div className="flex-none">
-        <Link to="/">
-          <SVGLogotype className="w-8 h-8 mr-2" />
-        </Link>
-      </div>
-      <div className="flex-initial text-2xl font-bold">
-        {name ?? ''} {process.env.REACT_APP_CMS_APP_NAME?.toLowerCase()}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 81fc892..12da354 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -5,8 +5,8 @@ import classNames from "classnames";
 /* -------------------------------------------------------------------------- */
 /*                                 Components                                 */
 /* -------------------------------------------------------------------------- */
-import ContextMenuAction from "./ContextMenuAction";
-import ContextMenu from "./ContextMenu";
+import ContextMenuAction from "./drop-down-menu/ContextMenuAction";
+import ContextMenu from "./drop-down-menu/ContextMenu";
 import { Button } from "./Button/Button";
 
 /* -------------------------------------------------------------------------- */
diff --git a/src/components/drop-down-menu/ContextMenu.tsx b/src/components/drop-down-menu/ContextMenu.tsx
index 16b7c0c..e3c7866 100644
--- a/src/components/drop-down-menu/ContextMenu.tsx
+++ b/src/components/drop-down-menu/ContextMenu.tsx
@@ -5,7 +5,7 @@ import React, { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { PropsPartion } from "./ContextMenuItem";
 import classNames from "classnames";
-import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg";
+import { SVGCaretDown } from "components/icons";
 type ChildType = React.ReactElement<any & PropsPartion[]>;
 type ChildrenType = ChildType[] | ChildType;
 
@@ -25,13 +25,13 @@ type MenuProps = {
 /* -------------------------------------------------------------------------- */
 
 const MenuButtonStyle = `
+items-center
 inline-flex 
 justify-center w-full
 cursor-default    
 rounded
 border border-gray-100
 outline-8
-bg-white
 py-2
 pl-4 
 pr-1 
@@ -43,7 +43,7 @@ left-0
 mt-2 w-60 
 origin-top-left 
 rounded 
-bg-white 
+bg-white
 shadow-lg 
 focus:outline-none 
 py-2 px-4 sm:text-sm`;
@@ -51,17 +51,17 @@ py-2 px-4 sm:text-sm`;
 /* -------------------------------------------------------------------------- */
 /*                          Component implementation                          */
 /* -------------------------------------------------------------------------- */
-/** 
-*   Use width ContextMenuAction.tsx , for example: 
-*   <ContextMenu button="MyButton" emphasis="low/high">
-*   <ContextMenuAction
-*   caption="First Menu"
-*   icon={icon}
-*   action={() => alert('click')}
-*   ></ContextMenuAction>
-*   ...
-*  </ContextMenu>
-*/
+/**
+ *   Use width ContextMenuAction.tsx , for example:
+ *   <ContextMenu button="MyButton" emphasis="low/high">
+ *   <ContextMenuAction
+ *   caption="First Menu"
+ *   icon={icon}
+ *   action={() => alert('click')}
+ *   ></ContextMenuAction>
+ *   ...
+ *  </ContextMenu>
+ */
 export default function ContextMenu({
   button,
   children,
@@ -69,48 +69,50 @@ export default function ContextMenu({
   emphasis = "low",
 }: MenuProps) {
   return (
-      <Menu as="div" className="relative inline-block text-right">
-        {({ open }) => (
-          <>
-            <Menu.Button
+    <Menu as="div" className="relative inline-block text-right">
+      {({ open }) => (
+        <>
+          <Menu.Button
+            className={classNames([
+              `${MenuButtonStyle}`,
+              {
+                "hover:bg-gray-100 font-bold uppercase": emphasis === "high",
+              },
+              className,
+            ])}
+          >
+            {button}
+            <SVGCaretDown
+              className={`${
+                open ? "rotate-180 transform" : "font-normal"
+              } my-2 mx-3 w-4 flex-center fill-gray-900 stroke-gray-900`}
+              aria-hidden="true"
+            />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            show={open}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items
+              static
               className={classNames([
-                `${MenuButtonStyle}`,
-                { "bg-gray-100 font-bold uppercase": emphasis === "high" },
                 className,
+                `${MenuItemStyle}`,
+                { "ml-2": emphasis === "high" },
               ])}
             >
-              {button}
-              <SelectIcon
-                className={`${
-                  open ? "rotate-180 transform" : "font-normal"
-                } my-2 mx-3 h-2 w-3 flex-center`}
-                aria-hidden="true"
-              />
-            </Menu.Button>
-
-            <Transition
-              as={Fragment}
-              show={open}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Menu.Items
-                static
-                className={classNames([
-                  className,
-                  `${MenuItemStyle}`,
-                  { "ml-2": emphasis === "high" },
-                ])}
-              >
-                {children}
-              </Menu.Items>
-            </Transition>
-          </>
-        )}
-      </Menu>
+              {children}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
   );
 }
diff --git a/src/components/drop-down-menu/ContextMenuAction.tsx b/src/components/drop-down-menu/ContextMenuAction.tsx
index 2023fb1..8d1e653 100644
--- a/src/components/drop-down-menu/ContextMenuAction.tsx
+++ b/src/components/drop-down-menu/ContextMenuAction.tsx
@@ -1,7 +1,6 @@
 import classNames from "classnames";
 import React from "react";
 
-
 type Props = {
   action: Function;
   caption: string;
@@ -18,19 +17,16 @@ export default function ContextMenuAction({
   className,
 }: Props) {
   return (
-    <button
+    <a
+      href="#"
       onClick={(e) => action(e)}
-      disabled={disabled}
       className={classNames([
-        "group flex items-center text-base",
-        { "opacity-50": disabled, "cursor-default": !disabled },
+        "group flex px-2 rounded items-center text-base hover:bg-gray-100",
         className,
       ])}
     >
       {icon && <div className="mr-2 h-5 w-5">{icon}</div>}
       <span className="px-2 py-2">{caption}</span>
-    </button>
-    
+    </a>
   );
 }
-
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 9cf238a..7dd54ab 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -34,7 +34,7 @@ export { ReactComponent as SVGFilter } from "assets/svg/filter.svg";
 export { ReactComponent as SVGFlag } from "assets/svg/flag.svg";
 export { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
 export { ReactComponent as SVGFormula } from "assets/svg/formula.svg";
-export { ReactComponent as SVGFundomental } from "assets/svg/fundomental.svg";
+export { ReactComponent as SVGFundamental } from "assets/svg/fundamental.svg";
 export { ReactComponent as SVGGrid } from "assets/svg/grid.svg";
 export { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg";
 export { ReactComponent as SVGHelp } from "assets/svg/help.svg";
diff --git a/src/components/parts/Header.tsx b/src/components/parts/Header.tsx
index 99650bb..12e8a4e 100644
--- a/src/components/parts/Header.tsx
+++ b/src/components/parts/Header.tsx
@@ -1,113 +1,174 @@
-/* -------------------------------------------------------------------------- */
-/*                                    Libs                                    */
-/* -------------------------------------------------------------------------- */
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import classNames from "classnames";
+import { useState } from "react";
 /* -------------------------------------------------------------------------- */
 /*                                 Components                                 */
 /* -------------------------------------------------------------------------- */
-import ContextMenu from "components/containers/contextmenu/ContextMenu";
-import Logotype from "components/Logotype";
-import Avatar from "components/containers/Avatar";
-import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
-/* -------------------------------------------------------------------------- */
-/*                                     SVG                                    */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/*                                    Hooks                                   */
-/* -------------------------------------------------------------------------- */
-import { useUserStore } from "user/data/userSlice";
-import { useUserViewModel } from "user/controller/userViewModel";
-import { useUIStore } from "ui/data/uiSlice";
-import { useUIViewModel } from "ui/controller/uiViewModel";
-import { useTranslation } from "react-i18next";
-import ServicesNavigationContext from "services/views/ServicesNavigationContext";
-import { useAuthStore } from "auth/data/authSlice";
-import { useAuthViewModel } from "auth/controller/useAuthViewModel";
+import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
+import ContextMenu from "../drop-down-menu/ContextMenu";
+import Logofreeland from "../Logofreeland";
+import { Button } from "../Button/Button";
+import Avatar from "../Avatar";
+import Navbar from "../Navbar";
+import Logo from "../Logo";
+import { RouterLink } from "components/typography/RouterLink";
 
 /* -------------------------------------------------------------------------- */
-/*                           Main application header                          */
+/*                                    Icons                                   */
 /* -------------------------------------------------------------------------- */
-type Props = {
-  title?: string;
-}
-/**
- * Main application header
- * @return {JSX.Element}
- */
-export default function Header({title}: Props) {
+import {
+  SVGBellNotification,
+  SVGBell,
+  SVGFavoriteOutlined,
+  SVGFolder,
+  SVGFile,
+  SVGEye,
+} from "components/icons";
 
-  const {t} = useTranslation();
-  const userStore = useUserStore();
-  const uiStore = useUIStore();
-  const authStore = useAuthStore();
-  const {signOut} = useAuthViewModel(authStore);
-  const { user, isLoading, getUser } = useUserViewModel(userStore);
-  const { showSearchbar } = useUIViewModel(uiStore);
+const Header = () => {
+  const [authenticated, setAuthenticated] = useState(false);
+  const onClick = () => setAuthenticated(true);
+  const [notification, setNotification] = useState(false);
 
-  useEffect(() => {
-    getUser();
-  }, [getUser]);
-
-  const navigate = useNavigate();
+  /* -------------------------------------------------------------------------- */
+  /*                         Implement Header Component                         */
+  /* -------------------------------------------------------------------------- */
   return (
-    <div
-      className="flex items-center flex-row
-    justify-between py-2.5 px-8 bg-gray-300/5 h-14"
+    <header
+      className="header flex justify-between items-center  box-border w-full 
+                border border-gray-75  
+                h-16 
+                px-4
+                gap-5
+                md:gap-20
+                lg:gap-40 lg:px-8
+                xl:gap-60 xl:px-16"
     >
-      <div className="flex-none flex items-center space-x-3">
-        <ServicesNavigationContext />
-        <Logotype name={title} />
-      </div>
-      <div className="flex-none flex items-center space-x-3">
-       
-        <ContextMenu
-          button={<Avatar className="p-2" />}
-          className="absolute w-full min-h-14 sm:w-80  -bottom-3
-          sm:top-auto sm:bottom-auto right-0
-          mt-5 z-10 sm:transform -translate-1/2 
-          origin-top-center flex flex-col items-center justify-center !pt-8"
+      {/* Logo and Menu */}
+      <div className="flex gap-8 xl:gap-x-16">
+        {/* Logo  - start - className="w-7 sm:w-10  " /> */}
+        <a className="Logo flex items-center gap-1  sm:gap-2 " href="/">
+          <Logo
+            className={classNames(authenticated ? "w-10" : "w-7 sm:w-10")}
+          />
+          <Logofreeland
+            className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")}
+          />
+        </a>
+        {/* Logo  - end - */}
+
+        {/* Menu( Create new - My library - About ) Start */}
+        <div
+          className="hidden lg:flex items-center
+             gap-2"
         >
-          <Logotype name="techpal" />
-          <div className="w-full my-4 flex justify-center">
-            <Avatar width="27%" className="p-3.5" />
-          </div>
-          <div className="text-xl text-center font-bold leading-relaxed">
-            {isLoading
-              ? " "
-              : t("hellousr", {
-                  username: [user?.lastname, user?.firstname].join(" "),
-                })}
-          </div>
-          <div className="text-sm text-center text-gray-300 leading-relaxed mb-5">
-            {isLoading ? " " : user?.email}
-          </div>
-          <ContextMenuAction
-            action={() => {
-              navigate('/personal-information');
-            }}
-            disabled={isLoading}
-            className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
-            caption="Account settings"
-     
-          />
-          <ContextMenuAction
-            action={() => {
-              navigate("");
-            }}
-            disabled={isLoading}
-            className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
-            caption={t("account.connect")}
-         
-          />
-          <ContextMenuAction
-            action={signOut}
-            className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md transition-colors"
-            caption={t('logOut')}
-        
-          />
-        </ContextMenu>
+          {/* Link Create now - start -  */}
+          <RouterLink
+            className="text-blue-500 px-4 font-bold uppercase"
+            to="/create-new"
+          >
+            Create new
+          </RouterLink>
+          {/* Link Create now - end -  */}
+
+          {/* Dropdown Menu My library - start - */}
+          <ContextMenu
+            emphasis="high"
+            button="My library"
+            className="border-none uppercase"
+          >
+            <ContextMenuAction
+              caption="My Publications"
+              action={() => console.log("My publications")}
+              icon={<SVGFile className="stroke-black " />}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="My Favorites"
+              action={() => console.log("My Favorites")}
+              icon={<SVGFavoriteOutlined className="stroke-black" />}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="My Collections"
+              action={() => console.log("My Collections")}
+              icon={<SVGFolder className="stroke-black fill-black" />}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="Recent Viewed"
+              action={() => console.log("Recent Viewed")}
+              icon={<SVGEye className="stroke-black " />}
+            ></ContextMenuAction>
+          </ContextMenu>
+          {/* Dropdown Menu My library - End -  */}
+
+          {/* Dropdown Menu About - start - */}
+          <ContextMenu
+            emphasis="high"
+            button="About"
+            className="border-none uppercase"
+          >
+            <ContextMenuAction
+              caption="About Freeland"
+              action={() => console.log("About Freeland")}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="Contact Us"
+              action={() => console.log("Contact Us")}
+            ></ContextMenuAction>
+
+            <ContextMenuAction
+              caption="Help"
+              action={() => console.log("Help")}
+            ></ContextMenuAction>
+          </ContextMenu>
+          {/* Dropdown Menu About - End - */}
+        </div>
+        {/* Menu( Create new - My library - About ) End */}
       </div>
-    </div>
+
+      {/* Sign in - Sign up - Notification - Avatar - Burger  */}
+      <div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
+        {!authenticated
+          ? [
+              <Button
+                emphasis="low"
+                onClick={onClick}
+                className="text-xs sm:px-4 sm:text-sm  "
+              >
+                Sign in
+              </Button>,
+              <Button
+                emphasis="medium"
+                className="hidden md:flex"
+                onClick={onClick}
+              >
+                Sign up
+              </Button>,
+            ]
+          : [
+              <Button emphasis="low">
+                <Button.Icon>
+                  {!notification ? (
+                    <SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
+                  ) : (
+                    <SVGBellNotification className="h-6 w-6 fill-gray-900 stroke-gray-900" />
+                  )}
+                </Button.Icon>
+              </Button>,
+
+              <Button emphasis="low" className="hidden lg:flex">
+                <Button.Icon>
+                  <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
+                </Button.Icon>
+              </Button>,
+            ]}
+        {/* Burger component will be shown for the small screens */}
+        <Navbar className="block lg:hidden" />
+      </div>
+    </header>
   );
-}
+};
+
+export default Header;