diff --git a/src/App.js b/src/App.js
index f0ff7ee..d336dbb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -98,7 +98,7 @@ const signIn = (email, password) => {
 }
     return (
       <div className="App">
-        <Header items={nav} />
+        <Header items={nav} user={auth} />
         <AuthContext.Provider value={auth}>
         <Routes>
           <Route path="/" element={<Home greeting="Hey you're at home!" />} />
diff --git a/src/components/Header.js b/src/components/Header.js
index 73fa5b0..d7b62ff 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,24 +3,38 @@ import Navbar from "react-bootstrap/Navbar"
 import Nav from "react-bootstrap/Nav"
 import NavDropdown from "react-bootstrap/NavDropdown"
 
-export function Header ( props ) {
-    // props.items is the value of nav state in App.js
-    // create a collection of navigation items
-    const Links = props.items.map( (item, itemkey) => {
-return (
-        <Nav.Link href={item.link} key={itemkey}> {item.label}  </Nav.Link>
-)
-    } )
+export function Header(props) {
+  // props.items is the value of nav state in App.js
+  // create a collection of navigation items
+  const Links = props.items.map((item, itemkey) => {
     return (
-            <Navbar>
-        <Container>
-          <Navbar.Brand>App</Navbar.Brand>
-          <Nav>
-            {Links}
-            <NavDropdown title="Account">
-            <NavDropdown.Item>Log out</NavDropdown.Item>
-            </NavDropdown>
-            </Nav>
-        </Container>
-      </Navbar>)
+      <Nav.Link href={item.link} key={itemkey}> {item.label}  </Nav.Link>
+    )
+  })
+  // component for Account
+  const Account = (props) => {
+    if (props.user) {
+      return (
+        <NavDropdown title="Account">
+          <NavDropdown.Item href="/signout">Log out</NavDropdown.Item>
+        </NavDropdown>
+      )
+    }
+    else {
+      return null
+    }
+
+  }
+  return (
+    <Navbar>
+      <Container>
+        <Navbar.Brand>App</Navbar.Brand>
+        <Nav>
+          {Links}
+          <NavDropdown title={props.user.email}>
+          <NavDropdown.Item href="/signout">Log out</NavDropdown.Item>
+        </NavDropdown>
+        </Nav>
+      </Container>
+    </Navbar>)
 }
\ No newline at end of file