diff --git a/src/components/Navbar/NavbarMenuItems.tsx b/src/components/Navbar/NavbarMenuItems.tsx
index bf032d3..308468f 100644
--- a/src/components/Navbar/NavbarMenuItems.tsx
+++ b/src/components/Navbar/NavbarMenuItems.tsx
@@ -1,34 +1,23 @@
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 
-import { TINY_API_LOGOUT } from '@/constants/url';
+const NavbarMenuItems = () => {
+    const router = useRouter();
 
-interface NavbarMenuItemsProps {
-    menuOpen: boolean;
-}
-
-const NavbarMenuItems = ({ menuOpen }: NavbarMenuItemsProps) => {
     return (
-        <ul
-            className={`${menuOpen ? 'block' : 'hidden'} absolute top-16 right-3 bg-gray-800 p-2 z-10  
-            rounded-[8px] shadow-lg
-            `}
-            data-testid="navbar-menu-items"
-        >
-            <li>
-                <Link href="/" className="text-white hover:bg-gray-700 block w-full px-4 py-2">
-                    Create New
-                </Link>
-            </li>
-            <li>
-                <Link href="/dashboard" className="text-white hover:bg-gray-700 block px-4 py-2">
-                    Dashboard
-                </Link>
-            </li>
-            <li>
-                <Link href={TINY_API_LOGOUT} className="text-white hover:bg-gray-700 block px-4 py-2">
-                    Sign Out
-                </Link>
-            </li>
+        <ul className="flex gap-14 items-center" data-testid="navbar-menu-items">
+            <>
+                <li className={`relative ${router.pathname === '/' ? 'border-b-2 border-white' : ''}`}>
+                    <Link href="/" className="text-white hover:text-gray-300">
+                        Home
+                    </Link>
+                </li>
+                <li className={`relative ${router.pathname === '/dashboard' ? 'border-b-2 border-white' : ''}`}>
+                    <Link href="/dashboard" className="text-white hover:text-gray-300">
+                        Dashboard
+                    </Link>
+                </li>
+            </>
         </ul>
     );
 };
diff --git a/src/components/Navbar/UserProfileButton.tsx b/src/components/Navbar/UserProfileButton.tsx
index c004476..5c69b03 100644
--- a/src/components/Navbar/UserProfileButton.tsx
+++ b/src/components/Navbar/UserProfileButton.tsx
@@ -1,47 +1,35 @@
-import { IoMdArrowDropdown } from 'react-icons/io';
+import { FaRegUser } from 'react-icons/fa';
 
 import Button from '../Button';
 import ProfileIcon from '../ProfileIcon/ProfileIcon';
 
-interface SignInButtonProps {
+interface UserProfileButtonProps {
     isLoggedIn: boolean;
     firstName: string;
     lastName: string;
-    handleMenuClick: () => void;
+    handleProfileClick: () => void;
     setShowLoginModal: (value: boolean) => void;
-    isMenuOpen: boolean;
 }
 
 const UserProfileButton = ({
     isLoggedIn,
     firstName,
     lastName,
-    handleMenuClick,
+    handleProfileClick,
     setShowLoginModal,
-    isMenuOpen,
-}: SignInButtonProps) => {
-    if (isLoggedIn) {
-        return (
-            <Button type="button" onClick={handleMenuClick} className="text-white focus:outline-none">
-                <div className="flex items-center space-x-1">
-                    <ProfileIcon firstName={firstName} lastName={lastName} />
-                    <span> {firstName}</span>
-                    <IoMdArrowDropdown
-                        className={`text-[2em]
-"
-                    ${isMenuOpen ? 'rotate-180' : ''}`}
-                        data-testid="user-profile-button-arrow"
-                    />
-                </div>
-            </Button>
-        );
-    }
-    return (
+}: UserProfileButtonProps) => {
+    return isLoggedIn ? (
+        <Button type="button" onClick={handleProfileClick} className="text-white focus:outline-none">
+            <div className="flex items-center space-x-1">
+                <ProfileIcon firstName={firstName} lastName={lastName} />
+            </div>
+        </Button>
+    ) : (
         <Button
-            className="flex items-center space-x-2  text-white px-4 py-2 rounded-md cursor-pointer hover:bg-gray-700"
-            data-testid="google-login"
+            className="flex items-center space-x-2 text-white px-4 py-2 rounded-md cursor-pointer"
             onClick={() => setShowLoginModal(true)}
         >
+            <FaRegUser className="mr-2" />
             Sign in
         </Button>
     );
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 23d7554..d37ed58 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,71 +1,62 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
+import { MdOutlineLogout } from 'react-icons/md';
 
 import LoginModal from '@/components/LoginModal';
-import NavbarMenuItems from '@/components/Navbar/NavbarMenuItems';
 import UserProfileButton from '@/components/Navbar/UserProfileButton';
 import UserLoginShimmer from '@/components/ShimmerEffect/UserLoginShimmer';
+import { TINY_API_LOGOUT } from '@/constants/url';
 import useAuthenticated from '@/hooks/useAuthenticated';
 
+import NavbarMenuItems from './NavbarMenuItems';
+
 const Navbar = () => {
-    const [menuOpen, setMenuOpen] = useState(false);
     const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
+    const [showSignOutButton, setShowSignOutButton] = useState<boolean>(false);
     const { isLoggedIn, isLoading, userData } = useAuthenticated();
 
     const userName = userData?.data?.userName || 'User';
     const [firstName, lastName] = userName.split(' ');
 
-    const handleMenuClick = () => {
-        setMenuOpen(!menuOpen);
-    };
-
-    const renderUserProfile = () => {
-        if (isLoading) {
-            return <UserLoginShimmer />;
-        }
-
-        return (
-            <UserProfileButton
-                isLoggedIn={isLoggedIn}
-                firstName={firstName}
-                lastName={lastName}
-                handleMenuClick={handleMenuClick}
-                setShowLoginModal={setShowLoginModal}
-                isMenuOpen={menuOpen}
-            />
-        );
-    };
-    const navbarRef = useRef<HTMLDivElement>(null);
-
-    const handleOutsideClick = (event: MouseEvent) => {
-        if (navbarRef.current && !navbarRef.current.contains(event.target as Node)) {
-            setMenuOpen(false);
-        }
+    const handleProfileClick = () => {
+        setShowSignOutButton(!showSignOutButton);
     };
 
-    useEffect(() => {
-        document.addEventListener('mousedown', handleOutsideClick);
-        return () => {
-            document.removeEventListener('mousedown', handleOutsideClick);
-        };
-    }, []);
-
     return (
         <>
-            <nav ref={navbarRef} className=" p-4 h-[8vh]">
+            <nav className="p-4 h-[8vh]">
                 <div className="flex items-center justify-between">
-                    <Link href="/" className="flex">
+                    <Link href="/" className="flex items-center">
                         <Image src="/rds.png" alt="logo" width={30} height={30} className="mr-2 w-30" />
                         <span className="text-white text-2xl font-bold">RDS</span>
                     </Link>
-
-                    <ul className="lg:flex space-x-4">
-                        <li className="relative group ">{renderUserProfile()}</li>
-                        <NavbarMenuItems menuOpen={menuOpen} />
+                    <ul className="flex gap-14 mr-14">
+                        <NavbarMenuItems />
+                        <li className="relative group">
+                            {isLoading ? (
+                                <UserLoginShimmer />
+                            ) : (
+                                <UserProfileButton
+                                    isLoggedIn={isLoggedIn}
+                                    firstName={firstName}
+                                    lastName={lastName}
+                                    handleProfileClick={handleProfileClick}
+                                    setShowLoginModal={setShowLoginModal}
+                                />
+                            )}
+                        </li>
                     </ul>
                 </div>
             </nav>
+            {showSignOutButton && (
+                <div className="absolute top-20 right-10 bg-white p-1 rounded-lg shadow-lg">
+                    <Link href={TINY_API_LOGOUT} className="text-black flex items-center h-8 w-24 text-sm gap-4">
+                        SignOut
+                        <MdOutlineLogout className="h-5 w-5" />
+                    </Link>
+                </div>
+            )}
             {showLoginModal && (
                 <LoginModal onClose={() => setShowLoginModal(false)}>
                     <p className="text-black text-center mb-4">Sign in to your account</p>
diff --git a/src/components/ProfileIcon/ProfileIcon.tsx b/src/components/ProfileIcon/ProfileIcon.tsx
index 7eafb35..65c35b3 100644
--- a/src/components/ProfileIcon/ProfileIcon.tsx
+++ b/src/components/ProfileIcon/ProfileIcon.tsx
@@ -5,9 +5,7 @@ const ProfileIcon: React.FC<ProfileIconProps> = ({ firstName, lastName }) => {
 
     return (
         <div
-            className={
-                'w-[46px] h-[46px] rounded-[50%] bg-[#384B6B] flex items-center justify-center text-white text-lg p-4'
-            }
+            className={'w-12 h-12 rounded-full bg-custom-blue flex items-center justify-center text-white text-lg'}
             data-testid="profile-icon"
         >
             {initials}