styling

src/routes/AllRoutes.jsx

@@ -14,21 +14,21 @@ const AllRoutes = () => {
     <Routes>
       {/* Routes that require user to be logged in */}
       <Route element={<AuthOnlyRoutes />}>
-        <Route path="/logout" element={<Logout />} />
-        <Route path="/graph" element={<Graph />} />
-        {/* <Route path="/playlists" element={<Playlists />} /> */}
+        <Route exact path="/logout" element={<Logout />} />
+        <Route exact path="/graph" element={<Graph />} />
+        {/* <Route exact path="/playlists" element={<Playlists />} /> */}
       </Route>
 
       {/* Routes that require user to be logged *out* */}
       <Route element={<UnAuthOnlyRoutes />}>
-        <Route path="/login" element={<Login />} />
+        <Route exact path="/login" element={<Login />} />
       </Route>
 
       {/* Common routes */}
-      <Route path="/" element={<Landing />} />
+      <Route exact path="/" element={<Landing />} />
 
       {/* 404 */}
-      <Route path="/page-not-found" element={<PageNotFound />} />
+      <Route exact path="/page-not-found" element={<PageNotFound />} />
       <Route path="*" element={<PageNotFound />} />
     </Routes>
   );

src/routes/UnAuthOnlyRoutes.jsx

@@ -13,7 +13,7 @@ function UnAuthOnlyRoutes() {
       return <Outlet />;
     } else {
       showWarnToastNotification(<p>Already logged in!</p>);
-      return <Navigate to={"/graph"} state={{ from: location }} />;
+      return <Navigate to={"/"} state={{ from: location }} />;
     }
   };