diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index f957537f2..c9f08a292 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -1,10 +1,48 @@
-import React from 'react'
-import './index.css'
+import { useState } from 'react';
+import './index.css';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 
 const NavBar = () => {
-    return (
-        <div>NavBar Component</div>
-    )
-}
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
 
-export default NavBar
\ No newline at end of file
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <div>
+            <Button
+                id="basic-button"
+                aria-controls={open ? 'basic-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                onClick={handleClick}
+            >
+                Jackie Dawn
+            </Button>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{
+                    'aria-labelledby': 'basic-button',
+                }}
+            >
+                <MenuItem onClick={handleClose}>Profile</MenuItem>
+                <MenuItem onClick={handleClose}>Team</MenuItem>
+                <MenuItem onClick={handleClose}>Invite Colleagues</MenuItem>
+                <MenuItem onClick={handleClose}>Log Out</MenuItem>
+            </Menu>
+        </div>
+    );
+};
+
+export default NavBar;