diff --git a/client/src/App.js b/client/src/App.js
index e8d567a3..8ffca6a1 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,42 +1,44 @@
 import './App.css';
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
 import Header from './componets/Header';
 import React, { useEffect } from 'react';
 import Login from './componets/Login';
 import Blogs from './componets/Blogs';
-import UserBlogs from './componets/UserBlogs'
-import AddBlogs from './componets/AddBlogs'
-import BlogDetail from './componets/BlogDetail'
+import UserBlogs from './componets/UserBlogs';
+import AddBlogs from './componets/AddBlogs';
+import BlogDetail from './componets/BlogDetail';
 import { useDispatch } from 'react-redux';
 import { authActions } from './store';
 
-
-
 function App() {
   const dispatch = useDispatch();
+  const location = useLocation();
 
-  useEffect(()=>{
+  useEffect(() => {
     const userId = localStorage.getItem("userId");
-    if(userId){
+    if (userId) {
       dispatch(authActions.login());
     }
-  },[dispatch]);
-  
-  return <React.Fragment>
-    <header>
-      <Header/>
-    </header>
-    <main>
-    <Routes>
-      <Route path="/login" element={<Login/>}></Route>
-      <Route path="/blogs" element={<Blogs/>}></Route>
-      <Route path="/myBlogs" element={<UserBlogs/>}></Route>
-      <Route path="/myBlogs/:id" element={<BlogDetail/>}></Route>
-      <Route path="/blogs/add" element={<AddBlogs />} />
-    </Routes>
-    </main>
+  }, [dispatch]);
+
+  // Don't show header on login page
+  const hideHeaderRoutes = ['/login'];
+  const shouldHideHeader = hideHeaderRoutes.includes(location.pathname);
 
-  </React.Fragment>;
+  return (
+    <React.Fragment>
+      {!shouldHideHeader && <Header />}
+      <main>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/blogs" element={<Blogs />} />
+          <Route path="/myBlogs" element={<UserBlogs />} />
+          <Route path="/myBlogs/:id" element={<BlogDetail />} />
+          <Route path="/blogs/add" element={<AddBlogs />} />
+        </Routes>
+      </main>
+    </React.Fragment>
+  );
 }
 
 export default App;