diff --git a/src/App.jsx b/src/App.jsx
index dd6f91030..c64bd7300 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,28 +1,18 @@
 import React, { useState, useEffect } from "react";
 import Post from "./components/Post";
-import {
-  db,
-  auth,
-} from "./lib/firebase";
-import {
-  Button,
-  Dialog,
-  Modal,
-  DialogContent,
-} from "@mui/material";
+import { db, auth } from "./lib/firebase";
+import { Button, Dialog, Modal, DialogContent } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import ImgUpload from "./components/ImgUpload";
 import Loader from "./components/Loader";
 import { FaArrowCircleUp } from "react-icons/fa";
 import { useSnackbar } from "notistack";
 import logo from "./assets/logo.png";
-import {Switch, Route, useHistory} from "react-router-dom";
-import LoginScreen from './pages/Login';
-import SignupScreen from './pages/Signup';
+import { Switch, Route, useHistory } from "react-router-dom";
+import LoginScreen from "./pages/Login";
+import SignupScreen from "./pages/Signup";
 import AnimatedButton from "./components/AnimatedButton";
 
-
-
 export function getModalStyle() {
   const top = 50;
   const left = 50;
@@ -64,7 +54,7 @@ function App() {
   const [loadMorePosts, setLoadMorePosts] = useState(false);
   const [openNewUpload, setOpenNewUpload] = useState(false);
   const [logout, setLogout] = useState(false);
-  
+
   const buttonStyle = {
     background: "linear-gradient(40deg, #e107c1, #59afc7)",
     borderRadius: "20px",
@@ -92,14 +82,13 @@ function App() {
 
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((authUser) => {
-      if (authUser) {        
+      if (authUser) {
         setUser(authUser);
-        history.push('/dummygram/');
+        history.push("/dummygram/");
       } else {
         setUser(null);
-        history.push('/dummygram/login');
+        history.push("/dummygram/login");
       }
-
     });
 
     return () => {
@@ -107,7 +96,7 @@ function App() {
     };
   }, [user]);
 
-  useEffect(() => {   
+  useEffect(() => {
     if (document.body.classList.contains("darkmode--activated")) {
       window.document.body.style.setProperty("--bg-color", "black");
       window.document.body.style.setProperty("--color", "white");
@@ -167,7 +156,6 @@ function App() {
     setLoadMorePosts(false);
   }, [loadMorePosts]);
 
- 
   const signOut = () => {
     auth.signOut().finally();
     enqueueSnackbar("Logged out Successfully !", {
@@ -177,7 +165,6 @@ function App() {
 
   return (
     <div className="app">
-      
       <div className="app__header">
         <img
           src={logo}
@@ -215,7 +202,9 @@ function App() {
         ) : (
           <div className="login__container">
             <Button
-              onClick={() => { history.push('/dummygram/login') }}
+              onClick={() => {
+                history.push("/dummygram/login");
+              }}
               color="primary"
               variant="contained"
               style={{ margin: 5 }}
@@ -225,7 +214,9 @@ function App() {
             </Button>
 
             <Button
-              onClick={() => { history.push('/dummygram/signup') }}
+              onClick={() => {
+                history.push("/dummygram/signup");
+              }}
               color="primary"
               variant="contained"
               style={{ margin: 5 }}
@@ -237,145 +228,146 @@ function App() {
         )}
       </div>
 
-              <Dialog
-                sx={{ borderRadius: "100px" }}
-                open={openNewUpload}
-                onClose={() => setOpenNewUpload(false)}
-              >
-                <div
-                  style={{
-                    backgroundColor: "var(--bg-color)",
-                    padding: "20px",
-                    textAlign: "center",
-                    color: "var(--color)",
-                    border: "2px solid var(--color)",
-                  }}
-                >
-                  <img
-                    src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
-                    alt="instagram"
-                    className="modal__signup__img"
-                    style={{ width: "50%", filter: "invert(var(--val))" }}
-                  />
-                  <p
-                    style={{
-                      fontSize: "25px",
-                      fontFamily: "monospace",
-                      color: "var(--color)",
-                    }}
-                  >
-                    New Post
-                  </p>
+      <Dialog
+        sx={{ borderRadius: "100px" }}
+        open={openNewUpload}
+        onClose={() => setOpenNewUpload(false)}
+      >
+        <div
+          style={{
+            backgroundColor: "var(--bg-color)",
+            padding: "20px",
+            textAlign: "center",
+            color: "var(--color)",
+            border: "2px solid var(--color)",
+          }}
+        >
+          <img
+            src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
+            alt="instagram"
+            className="modal__signup__img"
+            style={{ width: "50%", filter: "invert(var(--val))" }}
+          />
+          <p
+            style={{
+              fontSize: "25px",
+              fontFamily: "monospace",
+              color: "var(--color)",
+            }}
+          >
+            New Post
+          </p>
+
+          <DialogContent
+            sx={
+              {
+                // backgroundColor: "var(--bg-color)",
+              }
+            }
+          >
+            {!loadingPosts &&
+              (user ? (
+                <ImgUpload
+                  user={user}
+                  onUploadComplete={() => setOpenNewUpload(false)}
+                />
+              ) : (
+                <h3>Sorry you need to login to upload posts</h3>
+              ))}
+          </DialogContent>
+        </div>
+      </Dialog>
+      <Modal open={logout} onClose={() => setLogout(false)}>
+        <div style={getModalStyle()} className={classes.paper}>
+          <form className="modal__signup">
+            <img
+              src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
+              alt="dummygram"
+              className="modal__signup__img"
+              style={{
+                width: "80%",
+                marginLeft: "10%",
+                filter: "invert(var(--val))",
+              }}
+            />
+
+            <p
+              style={{
+                fontSize: "15px",
+                fontFamily: "monospace",
+                padding: "10%",
+                color: "var(--color)",
+              }}
+            >
+              Are you sure you want to Logout?
+            </p>
 
-                  <DialogContent
-                    sx={
-                      {
-                        // backgroundColor: "var(--bg-color)",
+            <AnimatedButton
+              type="submit"
+              onClick={signOut}
+              variant="contained"
+              color="primary"
+              sx={buttonStyle}
+            >
+              Logout
+            </AnimatedButton>
+          </form>
+        </div>
+      </Modal>
+
+      <Switch>
+        <Route exact path="/dummygram/">
+          {user ? (
+            <div
+              style={{
+                display: "flex",
+                alignContent: "center",
+                justifyContent: "center",
+              }}
+            >
+              <div
+                style={
+                  !loadingPosts
+                    ? {}
+                    : {
+                        width: "100%",
+                        minHeight: "100vh",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
                       }
-                    }
-                  >
-                    {!loadingPosts &&
-                      (user ? (
-                        <ImgUpload
-                          user={user}
-                          onUploadComplete={() => setOpenNewUpload(false)}
-                        />
-                      ) : (
-                        <h3>Sorry you need to login to upload posts</h3>
-                      ))}
-                  </DialogContent>
-                </div>
-              </Dialog>
-              <Modal open={logout} onClose={() => setLogout(false)}>
-                <div style={getModalStyle()} className={classes.paper}>
-                  <form className="modal__signup">
-                    <img
-                      src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
-                      alt="dummygram"
-                      className="modal__signup__img"
-                      style={{
-                        width: "80%",
-                        marginLeft: "10%",
-                        filter: "invert(var(--val))",
-                      }}
-                    />
-
-                    <p
-                      style={{
-                        fontSize: "15px",
-                        fontFamily: "monospace",
-                        padding: "10%",
-                        color: "var(--color)",
-                      }}
-                    >
-                      Are you sure you want to Logout?
-                    </p>
-
-                    <AnimatedButton
-                      type="submit"
-                      onClick={signOut}
-                      variant="contained"
-                      color="primary"
-                      sx={buttonStyle}
-                    >
-                      Logout
-                    </AnimatedButton>
-                  </form>
-                </div>
-              </Modal>
-
-          <Switch>
-
-            <Route exact path="/dummygram/">
-              {user ? <div
-                style={{
-                  display: "flex",
-                  alignContent: "center",
-                  justifyContent: "center",
-                }}
+                }
               >
-                <div
-                  style={
-                    !loadingPosts
-                      ? {}
-                      : {
-                          width: "100%",
-                          minHeight: "100vh",
-                          display: "flex",
-                          justifyContent: "center",
-                          alignItems: "center",
-                        }
-                  }
-                >
-                  {loadingPosts ? (
-                    <Loader />
-                  ) : (
-                    <div className="app__posts">
-                      {posts.map(({ id, post }) => (
-                        <Post key={id} postId={id} user={user} post={post} />
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </div> : 
-              <></>
-              }
-            </Route>
-            
-            <Route path="/dummygram/login">
-              <LoginScreen/>
-            </Route>
-            
-            <Route path="/dummygram/signup">
-              <SignupScreen/>
-            </Route>
-
-            <Route path="*">
-              <h1 style={{ textAlign: "center", marginTop: "2rem" }}>Page not found: 404</h1>
-            </Route>
-
-          </Switch>
-
+                {loadingPosts ? (
+                  <Loader />
+                ) : (
+                  <div className="app__posts">
+                    {posts.map(({ id, post }) => (
+                      <Post key={id} postId={id} user={user} post={post} />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <></>
+          )}
+        </Route>
+
+        <Route path="/dummygram/login">
+          <LoginScreen />
+        </Route>
+
+        <Route path="/dummygram/signup">
+          <SignupScreen />
+        </Route>
+
+        <Route path="*">
+          <h1 style={{ textAlign: "center", marginTop: "2rem" }}>
+            Page not found: 404
+          </h1>
+        </Route>
+      </Switch>
 
       <FaArrowCircleUp
         fill="#777"
@@ -387,7 +379,6 @@ function App() {
           display: showScroll ? "flex" : "none",
         }}
       />
-
     </div>
   );
 }
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index b80fd4056..5cecacb18 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,12 +1,10 @@
-import React, {useState, useEffect} from 'react';
-import { getModalStyle, useStyles } from '../App';
+import React, { useState, useEffect } from "react";
+import { getModalStyle, useStyles } from "../App";
 import { Input } from "@mui/material";
 import AnimatedButton from "../components/AnimatedButton";
 import { auth, googleProvider, facebookProvider } from "../lib/firebase";
 import { useSnackbar } from "notistack";
-import { useHistory } from 'react-router-dom';
-
-
+import { useHistory } from "react-router-dom";
 
 const LoginScreen = () => {
   const classes = useStyles();
@@ -15,7 +13,7 @@ const LoginScreen = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [user, setUser] = useState(null);
-  
+
   const buttonStyle = {
     background: "linear-gradient(40deg, #e107c1, #59afc7)",
     borderRadius: "20px",
@@ -42,11 +40,9 @@ const LoginScreen = () => {
           variant: "error",
         })
       )
-      .finally(() => {
-      });
+      .finally(() => {});
   };
 
-
   const signInWithGoogle = (e) => {
     e.preventDefault();
     auth
@@ -61,8 +57,7 @@ const LoginScreen = () => {
           variant: "error",
         })
       )
-      .finally(() => {
-      });
+      .finally(() => {});
   };
 
   const signInWithFacebook = (e) => {
@@ -79,75 +74,74 @@ const LoginScreen = () => {
           variant: "error",
         })
       )
-      .finally(() => {
-      });
+      .finally(() => {});
   };
 
-    return (
-        <div 
-          style={{
-                  display: "flex",
-                  alignContent: "center",
-                  justifyContent: "center",
-                }}
-        >
-                <div style={getModalStyle()} className={classes.paper}>
-                  <form className="modal__signup">
-                    <img
-                      src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
-                      alt="dummygram"
-                      className="modal__signup__img"
-                      style={{
-                        width: "80%",
-                        marginLeft: "10%",
-                        filter: "invert(var(--val))",
-                      }}
-                    />
-                    <Input
-                      type="text"
-                      placeholder="EMAIL"
-                      value={email}
-                      style={{ margin: "5%", color: "var(--color)" }}
-                      onChange={(e) => setEmail(e.target.value)}
-                    />
-                    <Input
-                      type="password"
-                      placeholder="PASSWORD"
-                      value={password}
-                      style={{ margin: "5%", color: "var(--color)" }}
-                      onChange={(e) => setPassword(e.target.value)}
-                    />
-                    <AnimatedButton
-                      type="submit"
-                      onClick={signIn}
-                      variant="contained"
-                      color="primary"
-                      sx={buttonStyle}
-                    >
-                      Sign In
-                    </AnimatedButton>
-                    <AnimatedButton
-                      type="submit"
-                      onClick={signInWithGoogle}
-                      variant="contained"
-                      color="primary"
-                      sx={buttonStyle}
-                    >
-                      Sign In With Google
-                    </AnimatedButton>
-                    <AnimatedButton
-                      type="submit"
-                      onClick={signInWithFacebook}
-                      variant="contained"
-                      color="primary"
-                      sx={buttonStyle}
-                    >
-                      Sign In With Facebook
-                    </AnimatedButton>
-                  </form>
-                </div>
-        </div>
-    );
-}
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignContent: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div style={getModalStyle()} className={classes.paper}>
+        <form className="modal__signup">
+          <img
+            src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
+            alt="dummygram"
+            className="modal__signup__img"
+            style={{
+              width: "80%",
+              marginLeft: "10%",
+              filter: "invert(var(--val))",
+            }}
+          />
+          <Input
+            type="text"
+            placeholder="EMAIL"
+            value={email}
+            style={{ margin: "5%", color: "var(--color)" }}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <Input
+            type="password"
+            placeholder="PASSWORD"
+            value={password}
+            style={{ margin: "5%", color: "var(--color)" }}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <AnimatedButton
+            type="submit"
+            onClick={signIn}
+            variant="contained"
+            color="primary"
+            sx={buttonStyle}
+          >
+            Sign In
+          </AnimatedButton>
+          <AnimatedButton
+            type="submit"
+            onClick={signInWithGoogle}
+            variant="contained"
+            color="primary"
+            sx={buttonStyle}
+          >
+            Sign In With Google
+          </AnimatedButton>
+          <AnimatedButton
+            type="submit"
+            onClick={signInWithFacebook}
+            variant="contained"
+            color="primary"
+            sx={buttonStyle}
+          >
+            Sign In With Facebook
+          </AnimatedButton>
+        </form>
+      </div>
+    </div>
+  );
+};
 
-export default LoginScreen;
\ No newline at end of file
+export default LoginScreen;
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
index 91924fdcc..b897d4322 100644
--- a/src/pages/Signup.jsx
+++ b/src/pages/Signup.jsx
@@ -1,12 +1,15 @@
-import React, {useState, useEffect} from 'react';
-import { getModalStyle, useStyles } from '../App';
+import React, { useState, useEffect } from "react";
+import { getModalStyle, useStyles } from "../App";
 import { Input } from "@mui/material";
 import AnimatedButton from "../components/AnimatedButton";
-import {auth, storage, googleProvider, facebookProvider } from "../lib/firebase";
+import {
+  auth,
+  storage,
+  googleProvider,
+  facebookProvider,
+} from "../lib/firebase";
 import { useSnackbar } from "notistack";
 
-
-
 const SignupScreen = () => {
   const classes = useStyles();
 
@@ -16,27 +19,25 @@ const SignupScreen = () => {
   const [password, setPassword] = useState("");
   const [signingUp, setSigningUp] = useState(false);
 
-  
   const [image, setImage] = useState(null);
   const [address, setAddress] = useState(null);
-  
-  const buttonStyle = {
-        background: "linear-gradient(40deg, #e107c1, #59afc7)",
-        borderRadius: "20px",
-        ":hover": {
-        background: "linear-gradient(-40deg, #59afc7, #e107c1)",
-        },
-    };
 
-    const { enqueueSnackbar } = useSnackbar();
+  const buttonStyle = {
+    background: "linear-gradient(40deg, #e107c1, #59afc7)",
+    borderRadius: "20px",
+    ":hover": {
+      background: "linear-gradient(-40deg, #59afc7, #e107c1)",
+    },
+  };
 
+  const { enqueueSnackbar } = useSnackbar();
 
-    const handleChange = (e) => {
-      if (e.target.files[0]) {
-        setImage(e.target.files[0]);
-        setAddress(e.target.value);
-      }
-    };
+  const handleChange = (e) => {
+    if (e.target.files[0]) {
+      setImage(e.target.files[0]);
+      setAddress(e.target.value);
+    }
+  };
 
   const signUp = (e) => {
     e.preventDefault();
@@ -75,7 +76,7 @@ const SignupScreen = () => {
               });
           }
         );
-        window.location.href = '/dummygram/';
+        window.location.href = "/dummygram/";
       })
       // .then(() => {
 
@@ -90,96 +91,97 @@ const SignupScreen = () => {
       });
   };
 
-    return (
-        <div style={{
-                  display: "flex",
-                  alignContent: "center",
-                  justifyContent: "center",
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignContent: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div style={modalStyle} className={classes.paper}>
+        <form className="modal__signup" onSubmit={signUp}>
+          <img
+            src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
+            alt="instagram"
+            className="modal__signup__img"
+            style={{
+              width: "80%",
+              marginLeft: "10%",
+              filter: "invert(var(--val))",
+            }}
+          />
+          <div
+            style={{
+              height: "100px",
+              width: "100px",
+              borderRadius: "100%",
+              border: "2px",
+              borderColor: "black",
+              borderStyle: "solid",
+              marginLeft: "22%",
+              boxShadow: "0px 0px 5px 1px white",
+              zIndex: 1,
+            }}
+          >
+            {address ? (
+              <img
+                src={URL.createObjectURL(image)}
+                alt="profile pic"
+                style={{
+                  width: "100px",
+                  height: "100px",
+                  borderRadius: "100%",
                 }}
-        >
-                <div style={modalStyle} className={classes.paper}>
-                  <form className="modal__signup" onSubmit={signUp}>
-                    <img
-                      src="https://user-images.githubusercontent.com/27727921/185767526-a002a17d-c12e-4a6a-82a4-dd1a13a5ecda.png"
-                      alt="instagram"
-                      className="modal__signup__img"
-                      style={{
-                        width: "80%",
-                        marginLeft: "10%",
-                        filter: "invert(var(--val))",
-                      }}
-                    />
-                    <div
-                      style={{
-                        height: "100px",
-                        width: "100px",
-                        borderRadius: "100%",
-                        border: "2px",
-                        borderColor: "black",
-                        borderStyle: "solid",
-                        marginLeft: "22%",
-                        boxShadow: "0px 0px 5px 1px white",
-                        zIndex: 1,
-                      }}
-                    >
-                      {address ? (
-                        <img
-                          src={URL.createObjectURL(image)}
-                          alt="profile pic"
-                          style={{
-                            width: "100px",
-                            height: "100px",
-                            borderRadius: "100%",
-                          }}
-                        />
-                      ) : (
-                        <div style={{ marginTop: "30px" }}>PROFILE PICTURE</div>
-                      )}
-                    </div>
-                    <Input
-                      type="text"
-                      placeholder="USERNAME"
-                      required
-                      value={username}
-                      style={{ margin: "5%", color: "var(--color)" }}
-                      onChange={(e) => setUsername(e.target.value)}
-                    />
-                    <Input
-                      type="text"
-                      placeholder="EMAIL"
-                      value={email}
-                      style={{ margin: "5%", color: "var(--color)" }}
-                      onChange={(e) => setEmail(e.target.value)}
-                    />
-                    <Input
-                      type="password"
-                      placeholder="PASSWORD"
-                      value={password}
-                      style={{ margin: "5%", color: "var(--color)" }}
-                      onChange={(e) => setPassword(e.target.value)}
-                    />
-                    <div className="file-input">
-                      <input
-                        type="file"
-                        id="file"
-                        className="file"
-                        onChange={handleChange}
-                        accept="image/*"
-                      />
-                      <label htmlFor="file">Select Profile Picture</label>
-                    </div>
-                    <AnimatedButton
-                      type="submit"
-                      variant="contained"
-                      color="primary"
-                      sx={buttonStyle}
-                    >
-                      Sign Up
-                    </AnimatedButton>
-                  </form>
-                </div>
-        </div>
-    );
-}
+              />
+            ) : (
+              <div style={{ marginTop: "30px" }}>PROFILE PICTURE</div>
+            )}
+          </div>
+          <Input
+            type="text"
+            placeholder="USERNAME"
+            required
+            value={username}
+            style={{ margin: "5%", color: "var(--color)" }}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+          <Input
+            type="text"
+            placeholder="EMAIL"
+            value={email}
+            style={{ margin: "5%", color: "var(--color)" }}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <Input
+            type="password"
+            placeholder="PASSWORD"
+            value={password}
+            style={{ margin: "5%", color: "var(--color)" }}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <div className="file-input">
+            <input
+              type="file"
+              id="file"
+              className="file"
+              onChange={handleChange}
+              accept="image/*"
+            />
+            <label htmlFor="file">Select Profile Picture</label>
+          </div>
+          <AnimatedButton
+            type="submit"
+            variant="contained"
+            color="primary"
+            sx={buttonStyle}
+          >
+            Sign Up
+          </AnimatedButton>
+        </form>
+      </div>
+    </div>
+  );
+};
 
-export default SignupScreen;
\ No newline at end of file
+export default SignupScreen;