diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 98c618e..474d8e3 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -38,9 +38,6 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
   children,
   ...props
 }) => {
-  console.log(
-    React.isValidElement(children) && React.Children.only(children).type
-  );
   const isOnlyIcon =
     children &&
     React.isValidElement(children) &&
@@ -51,11 +48,11 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
   return (
     <button
       //TODO change on click event
-      onClick={!disabled ? () => alert("Click") : undefined}
+      onClick={!disabled ? () => {} : undefined}
       className={classNames([
         "flex content-center justify-between",
         "text-center",
-        { padding: defaultStyle },
+        padding,
         "rounded",
         {
           "!cursor-default": disabled,
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/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/Page.tsx b/src/components/Page.tsx
index 09517d1..9b07b39 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -26,7 +26,7 @@ const Page = ({ title, withOutlet, children, activePath }: Props) => {
   return (
     <div className="grid grid-flow-col grid-rows-page grid-cols-layout max-h-screen overflow-hidden transition-all">
       <header className="col-span-2">
-        <Header title={title} />
+        <Header />
       </header>
       <aside
         className={classNames(
diff --git a/src/components/containers/modal/BottomSheetModal.tsx b/src/components/containers/modal/BottomSheetModal.tsx
index 6ac7ef5..90606f7 100644
--- a/src/components/containers/modal/BottomSheetModal.tsx
+++ b/src/components/containers/modal/BottomSheetModal.tsx
@@ -25,7 +25,7 @@ export function BottomSheetModal({
       leaveFrom="translate-y-0 opacity-100"
       leaveTo="translate-y-full opacity-0"
     >
-      <Dialog className="fixed bottom-0" as="div" onClose={() => {}}>
+      <Dialog className="fixed bottom-0 w-full" as="div" onClose={() => {}}>
         {children}
       </Dialog>
     </Transition>
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;