diff --git a/package-lock.json b/package-lock.json
index 737b998..de55cbb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "react-lazy-load-image-component": "^1.6.0",
         "react-loading-skeleton": "^3.3.1",
         "react-redux": "^8.1.1",
-        "react-router-dom": "^6.26.0",
+        "react-router-dom": "^6.26.1",
         "react-scripts": "5.0.1",
         "react-show-more-text": "^1.6.2",
         "redux": "^4.2.1",
@@ -4002,9 +4002,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
-      "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -16631,11 +16631,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
-      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
       "dependencies": {
-        "@remix-run/router": "1.19.0"
+        "@remix-run/router": "1.19.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -16645,12 +16645,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
-      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
       "dependencies": {
-        "@remix-run/router": "1.19.0",
-        "react-router": "6.26.0"
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
       },
       "engines": {
         "node": ">=14.0.0"
diff --git a/package.json b/package.json
index 6ff2b95..8e42ca9 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "react-lazy-load-image-component": "^1.6.0",
     "react-loading-skeleton": "^3.3.1",
     "react-redux": "^8.1.1",
-    "react-router-dom": "^6.26.0",
+    "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
     "react-show-more-text": "^1.6.2",
     "redux": "^4.2.1",
diff --git a/src/App.js b/src/App.js
index 9c64934..9881d7e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,7 @@ import Header from "./components/header/Header";
 import HomeScreen from "./screens/homeScreen/HomeScreen";
 import LoginScreen from './screens/loginScreen/LoginScreen';
 // import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import {/*BrowserRouter,*/Route,Routes, useNavigate} from "react-router-dom"
+import {/*BrowserRouter,*/Route,Routes, useNavigate,Navigate} from "react-router-dom"
 
 import "./_app.scss"
 // import Video from './components/video/Video';
@@ -77,6 +77,7 @@ const App = () => {
         <Route path='/feed/subscriptions' element={<SubscriptionsScreen/>} />
         <Route path='/feed/shorts' element={<ShortsScreen/>} />
         <Route path='/login' element={<LoginScreen />} />
+        <Route path='*' element={<Navigate to='/' />} />
       </Routes>
     {/* </BrowserRouter> */}
     </>
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index abcd725..2c83b2b 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import "./_header.scss";
 import logo from "../../assets/yt-logo-white.png";
 // import logos from "../../assets/YouTube_full-color_icon_(2017).svg.png";
@@ -14,7 +14,8 @@ import { BiVideoPlus } from "react-icons/bi";
 import { FaRegBell } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { login } from "../../redux/actions/auth.action";
+import { log_out, login } from "../../redux/actions/auth.action";
+import { IoLogOutSharp } from "react-icons/io5";
 // import LoginScreen from "../../screens/loginScreen/LoginScreen";
 
 const Header = ({ handleToggleSidebar }) => {
@@ -49,10 +50,32 @@ const Header = ({ handleToggleSidebar }) => {
     } 
   }
 
-  const {photoURL} = useSelector(state => state.auth?.user) || {}
+  const {name,photoURL} = useSelector(state => state.auth?.user) || {}
   const userPhoto = photoURL || "https://cdn-icons-png.flaticon.com/256/1144/1144760.png"
+
+  const header = useRef(null)
+  const acc = useRef(null);
+  const logOutHandler = () => {
+    dispatch(log_out())
+    if(acc.current){
+      acc.current.classList.add("none");
+    }
+  }
+  const accInfo = () => {
+    if(acc.current){
+      acc.current.classList.toggle("none");
+    }
+  }
+  useEffect(()=>{
+    document.body.addEventListener("click", (event) => {
+      if(header.current && !event.composedPath().includes(header.current)){
+        acc.current.classList.add("none");
+      }
+    })
+  })
+
   return (
-    <div class="header">
+    <div ref={header} class="header">
       <div className="header__menu">
       <FaBars  size={26}
       onClick={() => handleToggleSidebar()}
@@ -83,8 +106,22 @@ const Header = ({ handleToggleSidebar }) => {
         <img
           src={userPhoto}
           alt="aobotar"
+          onClick={accInfo}
         />
       </div>
+        <div id="acc" ref={acc} className=" bg-yt-light-black rounded-lg fixed flex flex-col right-0 top-20 p-2 -z-50">
+          <div className="flex flex-row py-2">
+            {/* <img
+             src={userPhoto}
+             alt="aobotar"
+             className="w-4"
+            /> */}
+            <p>{name}</p>
+          </div>
+          <div className="flex flex-row border-yt-gray border-t-2 py-2" onClick={logOutHandler}>
+            Log Out <IoLogOutSharp size={24}/>
+          </div>
+        </div>
     </div>
   );
 };