diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 12ef62a..dc29d69 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -11,11 +11,13 @@ import Footer from "./Components/footer";
import ScrollRevealWrapper from "./Components/ui/ScrollRevealWrapper";
import Loader from "./Components/ui/Loader"; // ✅ Import the Loader
+
import Login from "./Components/auth/Login";
import Register from "./Components/auth/Register";
import Profile from "./Components/profile/Profile";
import ProtectedRoute from "./Components/auth/ProtectedRoute";
import Dashboard from "./Components/Dashboard";
+import PageWithBackButton from "./Components/layout/PageWithBackButton";
// Home component that contains the main landing page content
@@ -114,18 +116,19 @@ function App() {
return (
} />
- } />
- } />
-
+ } />
+ } />
-
-
+
+
+
+
+
}
/>
- } />
+ } />
);
}
diff --git a/frontend/src/Components/layout/PageWithBackButton.jsx b/frontend/src/Components/layout/PageWithBackButton.jsx
new file mode 100644
index 0000000..6e3a48b
--- /dev/null
+++ b/frontend/src/Components/layout/PageWithBackButton.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+import BackButton from "../ui/BackButton";
+
+/**
+ * Layout wrapper that adds a back button to all pages except home ("/").
+ * Usage:
+ */
+export default function PageWithBackButton({ children }) {
+ const location = useLocation();
+ // Hide back button on home page
+ const hideBack = location.pathname === "/";
+
+ return (
+ <>
+ {!hideBack && }
+ {children}
+ >
+ );
+}
diff --git a/frontend/src/Components/profile/Profile.jsx b/frontend/src/Components/profile/Profile.jsx
index a8af372..9c6222c 100644
--- a/frontend/src/Components/profile/Profile.jsx
+++ b/frontend/src/Components/profile/Profile.jsx
@@ -294,6 +294,7 @@ const Profile = () => {
return (
+ {/* Back Button handled globally by layout */}
{/* Navbar */}
diff --git a/frontend/src/Components/ui/BackButton.jsx b/frontend/src/Components/ui/BackButton.jsx
new file mode 100644
index 0000000..7e2dd6e
--- /dev/null
+++ b/frontend/src/Components/ui/BackButton.jsx
@@ -0,0 +1,33 @@
+import { useNavigate } from 'react-router-dom';
+import { Button } from '../ui/button';
+import { ArrowLeft } from 'lucide-react';
+
+/**
+ * Reusable BackButton component for navigation.
+ * Navigates to previous page or dashboard if no history.
+ *
+ * Usage:
+ */
+export default function BackButton({ to = '/dashboard', className = '' }) {
+ const navigate = useNavigate();
+
+ function handleBack() {
+ if (window.history.length > 2) {
+ navigate(-1);
+ } else {
+ navigate(to);
+ }
+ }
+
+ return (
+
+ );
+}