diff --git a/src/App.jsx b/src/App.jsx
index 5effdbaec..8ccfd1076 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,21 +1,14 @@
-import {
-  Box,
-  Button,
-  ClickAwayListener,
-  Divider,
-  Modal,
-  Typography,
-} from "@mui/material";
-import { FaArrowCircleUp, FaUserCircle } from "react-icons/fa";
 import React, { useEffect, useState } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 import { auth, db } from "./lib/firebase";
 
-import { AiOutlineInsertRowAbove } from "react-icons/ai";
 import AnimatedButton from "./components/AnimatedButton";
+import { FaArrowCircleUp } from "react-icons/fa";
 import Favorite from "./components/Favorite";
 import Loader from "./components/Loader";
 import LoginScreen from "./pages/Login";
+import Modal from "@mui/material/Modal";
+import Navbar from "./components/Navbar";
 import NotFoundPage from "./components/NotFound";
 import Post from "./components/Post";
 import PostView from "./pages/PostView";
@@ -23,7 +16,6 @@ import Profile from "./pages/Profile";
 import ShareModal from "./components/ShareModal";
 import SideBar from "./components/SideBar";
 import SignupScreen from "./pages/Signup";
-import logo from "./assets/logo.png";
 import { makeStyles } from "@mui/styles";
 import { useSnackbar } from "notistack";
 
@@ -194,142 +186,15 @@ function App() {
 
   return (
     <div className="app">
-      <div className="app__header">
-        <img
-          src={logo}
-          alt="dummygram"
-          className="app__header__img"
-          onClick={() => {
-            if (
-              location.pathname !== "/dummygram/login" &&
-              location.pathname !== "/dummygram/signup"
-            ) {
-              navigate("/dummygram/");
-            }
-            window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
-          }}
-          style={{
-            cursor: "pointer",
-          }}
-        />
-
-        {user ? (
-          <>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "center",
-              }}
-            >
-              <div
-                className="rowConvert"
-                onClick={() => {
-                  setRowMode(!rowMode);
-                }}
-              >
-                <AiOutlineInsertRowAbove style={{ margin: "auto" }} size={30} />
-              </div>
-              <ClickAwayListener onClickAway={() => setOpen(false)}>
-                <Button
-                  onClick={() => setOpen((cur) => !cur)}
-                  color="secondary"
-                  variant="contained"
-                  sx={{ ...buttonStyle, marginRight: "10px" }}
-                >
-                  <FaUserCircle fontSize="large" />
-                  {open && (
-                    <Box
-                      backgroundColor="#fff"
-                      color="black"
-                      padding="2px"
-                      width="80px"
-                      position="absolute"
-                      borderRadius="4px"
-                      marginTop={16}
-                      marginRight={3}
-                      sx={{
-                        width: "fit-content",
-                        mt: "10rem",
-                        mr: "4rem",
-                        vertical: "top",
-                        border: "1px solid black",
-                      }}
-                    >
-                      <Box
-                        display="flex"
-                        padding="0.5rem"
-                        sx={{ cursor: "pointer" }}
-                        onClick={() =>
-                          navigate("/dummygram/profile", {
-                            state: {
-                              name: user.toJSON().displayName,
-                              email: user.toJSON().email,
-                              avatar: user.toJSON().photoURL,
-                            },
-                          })
-                        }
-                      >
-                        <Typography fontFamily="Poppins" fontSize="1rem">
-                          Profile
-                        </Typography>
-                      </Box>
-                      <Divider />
-                      <Box
-                        display="flex"
-                        padding="0.5rem"
-                        sx={{ cursor: "pointer" }}
-                        onClick={() => navigate("/dummygram/favourites")}
-                      >
-                        <Typography fontFamily="serif" fontSize="1rem">
-                          Favourites
-                        </Typography>
-                      </Box>
-                      <Divider />
-                      <Box
-                        display="flex"
-                        padding="0.5rem"
-                        sx={{ cursor: "pointer" }}
-                        onClick={() => setLogout(true)}
-                      >
-                        <Typography fontFamily="Poppins" fontSize="0.9rem">
-                          Log Out
-                        </Typography>
-                      </Box>
-                    </Box>
-                  )}
-                </Button>
-              </ClickAwayListener>
-            </div>
-          </>
-        ) : (
-          <div className="login__container">
-            <Button
-              onClick={() => {
-                navigate("/dummygram/login");
-              }}
-              color="primary"
-              variant="contained"
-              style={{ margin: 5 }}
-              sx={buttonStyle}
-            >
-              Log In
-            </Button>
-
-            <Button
-              onClick={() => {
-                navigate("/dummygram/signup");
-              }}
-              color="primary"
-              variant="contained"
-              style={{ margin: 5 }}
-              sx={buttonStyle}
-            >
-              Sign Up
-            </Button>
-          </div>
-        )}
-      </div>
+      <Navbar
+        row={rowMode}
+        setRow={setRowMode}
+        user={user}
+        setUser={setUser}
+        open={open}
+        setOpen={setOpen}
+        setLogout={setLogout}
+      />
 
       <ShareModal
         openShareModal={openShareModal}
diff --git a/src/components/Navbar/index.css b/src/components/Navbar/index.css
new file mode 100644
index 000000000..318ed2d41
--- /dev/null
+++ b/src/components/Navbar/index.css
@@ -0,0 +1,20 @@
+.app__header__img {
+  object-fit: contain;
+  width: 150px;
+}
+
+.app__header {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 1;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  object-fit: contain;
+  border-bottom: 1px solid rgb(219, 219, 219);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  background-color: var(--bg-color);
+}
diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
new file mode 100644
index 000000000..dd078f6d2
--- /dev/null
+++ b/src/components/Navbar/index.jsx
@@ -0,0 +1,160 @@
+import "./index.css";
+
+import {
+  Box,
+  Button,
+  ClickAwayListener,
+  Divider,
+  Typography,
+} from "@mui/material";
+import React, { useEffect } from "react";
+
+import { AiOutlineInsertRowAbove } from "react-icons/ai";
+import { FaUserCircle } from "react-icons/fa";
+import { auth } from "../../lib/firebase";
+import logo from "../../assets/logo.png";
+import { useNavigate } from "react-router-dom";
+
+function Navbar({ setRow, row, open, setOpen, user, setUser, setLogout }) {
+  const navigate = useNavigate();
+
+  const buttonStyle = {
+    background: "linear-gradient(40deg, #e107c1, #59afc7)",
+    borderRadius: "20px",
+    margin: "10px",
+    ":hover": {
+      background: "linear-gradient(-40deg, #59afc7, #e107c1)",
+    },
+  };
+
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((authUser) => {
+      if (authUser) {
+        setUser(authUser);
+        navigate("/dummygram/");
+      } else {
+        setUser(null);
+        navigate("/dummygram/login");
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [user]);
+
+  return (
+    <div className="app__header">
+      <img
+        src={logo}
+        alt="dummygram"
+        className="app__header__img"
+        onClick={() => {
+          if (
+            location.pathname !== "/dummygram/login" &&
+            location.pathname !== "/dummygram/signup"
+          ) {
+            navigate("/dummygram/");
+          }
+          window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+        }}
+        style={{
+          cursor: "pointer",
+        }}
+      />
+
+      {user && (
+        <>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "center",
+            }}
+          >
+            <div
+              className="rowConvert"
+              onClick={() => {
+                setRow(!row);
+              }}
+            >
+              <AiOutlineInsertRowAbove style={{ margin: "auto" }} size={30} />
+            </div>
+            <ClickAwayListener onClickAway={() => setOpen(false)}>
+              <Button
+                onClick={() => setOpen((cur) => !cur)}
+                color="secondary"
+                variant="contained"
+                sx={{ ...buttonStyle, marginRight: "10px" }}
+              >
+                <FaUserCircle fontSize="large" />
+                {open && (
+                  <Box
+                    backgroundColor="#fff"
+                    color="black"
+                    padding="2px"
+                    width="80px"
+                    position="absolute"
+                    borderRadius="4px"
+                    marginTop={16}
+                    marginRight={3}
+                    sx={{
+                      width: "fit-content",
+                      mt: "10rem",
+                      mr: "4rem",
+                      vertical: "top",
+                      border: "1px solid black",
+                    }}
+                  >
+                    <Box
+                      display="flex"
+                      padding="0.5rem"
+                      sx={{ cursor: "pointer" }}
+                      onClick={() =>
+                        navigate("/dummygram/profile", {
+                          state: {
+                            name: user.toJSON().displayName,
+                            email: user.toJSON().email,
+                            avatar: user.toJSON().photoURL,
+                          },
+                        })
+                      }
+                    >
+                      <Typography fontFamily="Poppins" fontSize="1rem">
+                        Profile
+                      </Typography>
+                    </Box>
+                    <Divider />
+                    <Box
+                      display="flex"
+                      padding="0.5rem"
+                      sx={{ cursor: "pointer" }}
+                      onClick={() => navigate("/dummygram/favourites")}
+                    >
+                      <Typography fontFamily="serif" fontSize="1rem">
+                        Favourites
+                      </Typography>
+                    </Box>
+                    <Divider />
+                    <Box
+                      display="flex"
+                      padding="0.5rem"
+                      sx={{ cursor: "pointer" }}
+                      onClick={() => setLogout(true)}
+                    >
+                      <Typography fontFamily="Poppins" fontSize="0.9rem">
+                        Log Out
+                      </Typography>
+                    </Box>
+                  </Box>
+                )}
+              </Button>
+            </ClickAwayListener>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Navbar;
diff --git a/src/components/ShareModal.jsx b/src/components/ShareModal.jsx
index 42157d139..c0e5b6ae1 100644
--- a/src/components/ShareModal.jsx
+++ b/src/components/ShareModal.jsx
@@ -1,6 +1,6 @@
 import { Dialog, IconButton, Input } from "@mui/material";
-import React, { useState } from "react";
 
+import React from "react";
 import logo from "../assets/logo.png";
 import { useSnackbar } from "notistack";
 
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
index fdbd72ab9..9e7749f77 100644
--- a/src/pages/Login/index.jsx
+++ b/src/pages/Login/index.jsx
@@ -55,7 +55,7 @@ const LoginScreen = () => {
             variant: "error",
           });
         } else {
-          enqueueSnackbar("Error Occured!", {
+          enqueueSnackbar(error.message, {
             variant: "error",
           });
         }
@@ -81,7 +81,7 @@ const LoginScreen = () => {
               variant: "error",
             });
           } else {
-            enqueueSnackbar("An error occcured!", {
+            enqueueSnackbar(error.message, {
               variant: "error",
             });
           }
@@ -104,7 +104,7 @@ const LoginScreen = () => {
             variant: "error",
           });
         } else {
-          enqueueSnackbar("An error occcured!", {
+          enqueueSnackbar(error.message, {
             variant: "error",
           });
         }
@@ -153,7 +153,6 @@ const LoginScreen = () => {
               backgroundColor: "white",
               boxShadow: "0 0 20px rgba(104, 85, 224, 0.2)",
               borderRadius: "4px",
-              // padding: "10px",
             }}
           >
             <input
diff --git a/src/pages/PostView.jsx b/src/pages/PostView/index.jsx
similarity index 89%
rename from src/pages/PostView.jsx
rename to src/pages/PostView/index.jsx
index aecc607e4..13392af22 100644
--- a/src/pages/PostView.jsx
+++ b/src/pages/PostView/index.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { doc, getDoc } from "firebase/firestore";
 
-import Loader from "../components/Loader";
-import Post from "../components/Post";
-import { db } from "../lib/firebase";
+import Loader from "../../components/Loader";
+import Post from "../../components/Post";
+import { db } from "../../lib/firebase";
 import { useParams } from "react-router-dom";
 
 const PostView = (props) => {