2 files changed, 41 insertions, 0 deletions
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 934eecd..fb97ed6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,7 @@ import Score from "./pages/Score";
 import Chart from "./pages/Chart";
 import Admin from "./pages/Admin";
 import AllScores from "./pages/AllScores";
+import Profile from "./pages/Profile";
 
 function App() {
   return (
@@ -23,6 +24,7 @@ function App() {
         <Route path="/chart" element={<Chart />} />
         <Route path="/admin" element={<Admin />} />
         <Route path="/allScores" element={<AllScores />} />
+        <Route path="/profile" element={<Profile />} />
       </Routes>
     </AuthProvider>
   );
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
new file mode 100644
index 0000000..03fef48
--- /dev/null
+++ b/frontend/src/pages/Profile.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router';
+import LoadingDisplay  from "../components/displays/LoadingDisplay";
+import SessionExpiredPopup from "../components/SessionExpiredPopup";
+import { NavBar } from '../components/NavBar';
+import { useAuth } from "../contexts/AuthContext";
+
+
+
+const Profile = () => {
+  const { user, isLoading, logout } = useAuth();
+  const navigate = useNavigate();
+
+  if (isLoading) {
+    return <LoadingDisplay message="Loading Profile Page..." />;
+  }
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      navigate("/");
+    } catch (error) {
+      console.error("Logout failed:", error);
+      alert("Network error during logout. Please try again.");
+    }
+  };
+
+  if (!user) {
+    return <SessionExpiredPopup />;
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-950">
+      <NavBar user={user} handleLogout={handleLogout} currentPage="import"/>
+      <h1>Profile</h1>
+    </div>
+  );
+};
+
+export default Profile;