diff --git a/frontend-next/src/app/app/page.js b/frontend-next/src/app/app/page.js
index 24ec274..3bd19ae 100644
--- a/frontend-next/src/app/app/page.js
+++ b/frontend-next/src/app/app/page.js
@@ -1,12 +1,12 @@
 "use client";
 // System Imports
 import { useState, useEffect } from "react";
-import { auth, database } from "../api/firebase-config";
+import { auth, database } from "../../firebase-config";
 import { ref, onValue, set, remove, get } from "firebase/database";
 import { useBeforeunload } from "react-beforeunload";
-import {useRouter} from "next/navigation";
 import {Marker} from "pigeon-maps";
-import {onAuthStateChanged, signOut} from "firebase/auth"
+import {onAuthStateChanged} from "firebase/auth"
+import { useSearchParams } from 'next/navigation'
 
 // Refactored Component Imports
 // Data Structure Imports
@@ -45,6 +45,17 @@ function Home() {
   const [markers, setMarkers] = useState([]);
   const [isAuthenticated, setAuth] = useState(false)
   const [user, setUser] = useState(null)
+  const [usingSearchParams, setUsingSearchParams] = useState(true)
+
+  const searchParams = useSearchParams()
+  var roomSwitch = null
+  if (searchParams.has("room") && usingSearchParams && user) {
+      roomSwitch = searchParams.get("room")
+      setUsingSearchParams(false)
+      get(ref(database, `rooms/${searchParams.get("room")}`)).then((snapshot) => {
+        selectChatRoom(snapshot.val())
+      });
+  }
 
   // Authentication
   useEffect(() => {
@@ -53,7 +64,6 @@ function Home() {
         get(ref(database, `users/${user.uid}`))
         .then((userData) => {
           userData = userData.val()
-          console.log(userData)
           if (userData) {
             setUser(userData)
             setAuth(true)
@@ -140,7 +150,6 @@ function Home() {
     }
   },[user]);
 
-
   // Dont Double Send Leaving Message
   useEffect(() => {
     if (myRoomsObj && chatRoomObj) {
@@ -196,10 +205,6 @@ function Home() {
           }
 
           // Users who added to "my rooms"
-          console.log(
-            snapshot.val().hasOwnProperty("users") &&
-              snapshot.val().users.hasOwnProperty("all")
-          );
           if (
             snapshot.val().hasOwnProperty("users") &&
             snapshot.val().users.hasOwnProperty("all")
diff --git a/frontend-next/src/app/login/page.js b/frontend-next/src/app/login/page.js
index a544c89..a455b92 100644
--- a/frontend-next/src/app/login/page.js
+++ b/frontend-next/src/app/login/page.js
@@ -4,8 +4,8 @@ import { useRouter } from "next/navigation";
 import "../globals.css"
 
 // Firebase imports
-import {auth} from "../api/firebase-config";
-import { setPersistence, signInWithEmailAndPassword, browserSessionPersistence } from "firebase/auth";
+import {auth} from "../../firebase-config";
+import { setPersistence, signInWithEmailAndPassword, indexedDBLocalPersistence  } from "firebase/auth";
 
 function Login() {
     var router = useRouter();
@@ -13,7 +13,7 @@ function Login() {
     var { register, control, setError, handleSubmit, formState: { errors, isSubmitting, isSubmitted } } = useForm()
 
     function authenticate(data) {
-        setPersistence(auth, browserSessionPersistence)
+        setPersistence(auth, indexedDBLocalPersistence)
         .then(() => {
             signInWithEmailAndPassword(auth,data.email,data.password)
             .then((userCredential) => {
@@ -45,7 +45,7 @@ function Login() {
                         >
                             <input type="email" id="email" className={(errors.email && errors.password) && "err"} {...register("email", { required: true })} placeholder="Enter Email Address"/><br/>
                             <input type="password" id="password" name="password" className={(errors.email && errors.password) && "err"} {...register("password", { required: true })} placeholder="Enter Password"/><br/>
-                            <button className="inline-flex items-center px-4 py-2 transition ease-in-out duration-150 bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
+                            <button type="submit" className="inline-flex items-center px-4 py-2 transition ease-in-out duration-150 bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
                                 {(isSubmitting || isSubmitted) && <span className="inline-block">
                                     <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <circle class="opacity-25" cx="12" cy="12" r="10" strokeWidth="4"></circle>
diff --git a/frontend-next/src/app/onboarding/page.js b/frontend-next/src/app/onboarding/page.js
index 92fabbc..fd00d72 100644
--- a/frontend-next/src/app/onboarding/page.js
+++ b/frontend-next/src/app/onboarding/page.js
@@ -3,13 +3,12 @@ import "../globals.css"
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import { ref, set } from "firebase/database";
-import {auth, database} from "../api/firebase-config"
+import {auth, database} from "../../firebase-config"
 import {onAuthStateChanged} from "firebase/auth"
 
 function createUser(data) {
     onAuthStateChanged(auth, (user) => {
         if (user.uid) {
-            console.log(user)
             data.uid = user.uid
             data.defined = true
             data.email = user.email
diff --git a/frontend-next/src/app/page.js b/frontend-next/src/app/page.js
index 10a8bf5..85b77e7 100644
--- a/frontend-next/src/app/page.js
+++ b/frontend-next/src/app/page.js
@@ -1,7 +1,7 @@
 "use client"
 import { useState, useEffect } from 'react'
 
-import { auth, database } from "./api/firebase-config";
+import { auth, database } from "../firebase-config";
 import { ref, get} from "firebase/database";
 import {onAuthStateChanged} from "firebase/auth"
 
@@ -37,7 +37,6 @@ function Home() {
                     }
                     setRoomCount(count)
                 } else {
-                    console.log("No rooms nearby")
                     setRoomCount(0)
                 }
                 setLoadingLoc(false)
diff --git a/frontend-next/src/app/register/page.js b/frontend-next/src/app/register/page.js
index a969cd7..875b8d2 100644
--- a/frontend-next/src/app/register/page.js
+++ b/frontend-next/src/app/register/page.js
@@ -4,17 +4,16 @@ import { useForm, Form } from "react-hook-form";
 import "../globals.css"
 import { useState } from "react";
 
-import { createUserWithEmailAndPassword, signInWithEmailAndPassword, setPersistence, browserSessionPersistence } from "firebase/auth";
-import {auth} from "../api/firebase-config";
+import { createUserWithEmailAndPassword, signInWithEmailAndPassword, setPersistence, indexedDBLocalPersistence  } from "firebase/auth";
+import {auth} from "../../firebase-config";
 
 async function Signup(data) {
     var userCredential = await createUserWithEmailAndPassword(auth,data.email,data.password);
     if (userCredential.user) {
-        setPersistence(auth, browserSessionPersistence)
+        setPersistence(auth, indexedDBLocalPersistence )
         .then(() => {
             signInWithEmailAndPassword(auth,data.email,data.password)
             .then((res) => {
-                console.log(res)
                 return true
             })
         })
@@ -56,16 +55,12 @@ function Register() {
                     </span>
                     <div>
                         <h3 className="text-[24px] mt-[15px]">Register</h3>
-                        <Form onSubmit={onSubmit}
-                        encType={'application/json'}
-                        control={control}
-                        >
+                        <Form onSubmit={onSubmit} encType={'application/json'} control={control}>
                             <input type="email" {...register("email", {required: true, pattern: emailRegex})} className={errors.email && "err"} placeholder="Enter Email Address"/><br/>
                             <input type="password" {...register("password", {required: true})} className={errors.password && errors.password.type == 'required' && "err"} placeholder="Enter Password"/><br/>
                             <input type ="password" {...register("passwordCheck", {required: false})} className ={errors.passwordCheck && errors.passwordCheck.type == 'required' && "err"} placeholder="Re-enter Password"/><br/>
                                 {passwordMismatch && <p className="text-red-500">Passwords do not match</p>}
-                            <button type="submit" className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full">
-                                Register</button><br/>
+                            <button type="submit" className="bg-[#dee0e0] m-5 bg-cyan-500 text-white font-bold py-2 px-4 rounded-full"> Register</button><br/>
                             Have an account? <a href="/login">Log In</a>
                         </Form>
                     </div>
diff --git a/frontend-next/src/app/user/[stub]/layout.js b/frontend-next/src/app/user/[stub]/layout.js
index ba13310..94d85e5 100644
--- a/frontend-next/src/app/user/[stub]/layout.js
+++ b/frontend-next/src/app/user/[stub]/layout.js
@@ -4,7 +4,7 @@ import "../../globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "ChatMaps: Home",
+  title: "ChatMaps: User Profile",
   description: "ChatMaps: Social Media for College Students",
 };
 
diff --git a/frontend-next/src/app/user/[stub]/page.js b/frontend-next/src/app/user/[stub]/page.js
index 29c9b21..0528bb3 100644
--- a/frontend-next/src/app/user/[stub]/page.js
+++ b/frontend-next/src/app/user/[stub]/page.js
@@ -1,14 +1,15 @@
 "use client";
 // System Imports
 import { useState, useEffect } from "react";
-import { auth, database } from "../../api/firebase-config";
-import { ref, onValue, get } from "firebase/database";
+import { auth, database } from "../../../firebase-config";
+import { ref, onValue, get, set, update  } from "firebase/database";
 import {Marker} from "pigeon-maps";
 import {onAuthStateChanged} from "firebase/auth"
+import { useForm, Form } from "react-hook-form";
 
 // Refactored Component Imports
 // Data Structure Imports
- import { Interest } from "../../../components/app/datatypes";
+ import { Interest, ProfileRoom } from "../../../components/app/datatypes";
 
 // Header Import
 import { Header } from "../../../components/app/header";
@@ -17,13 +18,15 @@ import { Header } from "../../../components/app/header";
 function Home({ params }) {
   // It's time to document and change these awful variable names
   // State variables for app page
-  const [myRoomsObj, setMyRoomsObj] = useState(null); // My Rooms Object
   const [profileData, setProfileData] = useState(null)
   const [isAuthenticated, setAuth] = useState(false)
   const [user, setUser] = useState(null)
   const [userInterestArray, setUserInterestArray] = useState(null)
-
+  const [userRoomsArray, setUserRoomsArray] = useState(null)
   const [isOwner, setOwn] = useState(false)
+  const [isEditing, setEdit] = useState(false)
+
+  var { register, control, setError, handleSubmit, formState: { errors, isSubmitting, isSubmitted } } = useForm()
 
   // Authentication
   useEffect(() => {
@@ -65,10 +68,25 @@ function Home({ params }) {
             }
             setUserInterestArray(interestArray)
             var rooms = snapshot.val().rooms;
-            setMyRoomsObj(rooms);
+            var roomArray = []
+            for (var room in rooms) {
+              roomArray.push(<ProfileRoom room={rooms[room]}/>)
+            }
+            setUserRoomsArray(roomArray);
           });
   },[]);
 
+  function save({data}) {
+    for (var key in data) {
+      if (data[key] == "") {
+        data[key] = profileData[key]
+      }
+    }
+    console.log(data)
+    setEdit(false)
+    update(ref(database, `users/${user.uid}`), data)
+  }
+
   return (
     <div>
       {isAuthenticated && (
@@ -80,23 +98,67 @@ function Home({ params }) {
             {/* Main Page Section */}
             <div className="grid grid-cols-3 mr-2 h-[calc(100%-110px)] pl-5 pr-5 pt-2">
 
-              <div className="bg-white shadow-2xl rounded-xl pt-5">
-                <img src={profileData.pfp} width="300px" className="relative mx-auto rounded-2xl overflow-hidden"/>
-                <div className="font-bold text-[30px]">
-                    {profileData.firstName} {profileData.lastName}
-                </div>
-                <div className="text-[20px]">@{profileData.username}</div>
-                <div className="pt-5">{profileData.bio}</div>
-                <div className="grid grid-cols-3 p-3">
-                {userInterestArray}
-                </div>
-                <div className="grid grid-cols-1 auto-cols-min justify-items-center">
-                {isOwner && ( <a className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Edit Profile </a> )}
-                {!isOwner && ( <a className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Add Friend </a> )}
-                </div>
+              <div className="cols-span-1 bg-white shadow-2xl rounded-xl pt-5">
+                {!isEditing && (
+                  <div>
+                    <img src={profileData.pfp} width="300px" className="relative mx-auto rounded-2xl overflow-hidden"/>
+                    <div className="font-bold text-[30px]">
+                        {profileData.firstName} {profileData.lastName}
+                    </div>
+                    <div className="text-[20px]">@{profileData.username}</div>
+                    <div className="pt-5">{profileData.bio}</div>
+                    <div className="grid grid-cols-3 p-3">
+                    {userInterestArray}
+                    </div>
+                    <div className="grid grid-cols-1 auto-cols-min justify-items-center">
+                    {isOwner && ( <a onClick={() => {setEdit(true)}} className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Edit Profile </a> )}
+                    {!isOwner && ( <a className="w-[120px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Add Friend </a> )}
+                    </div>
+                  </div>
+                )}
+                {isEditing && (
+                  <div>
+                      <Form onSubmit={save} encType={'application/json'} control={control}>
+                        <div className="grid grid-cols-2">
+                          <div className="col-span-1">
+                            <img src={profileData.pfp} width="150px" className="relative mx-auto rounded-2xl overflow-hidden"/>
+                            Current Profile Picture
+                          </div>
+                          <div className="col-span-1">
+                            <input type="file" {...register("pfp")} className="w-[300px] relative left-[-30px] top-[50px]"/>
+                          </div>
+                          <div className="col-span-1 pt-5">
+                            <div className="font-bold">First Name</div>
+                            <input className="border-2 border-gray-300 p-2 rounded-lg" type="text" {...register("firstName")} placeholder={profileData.firstName}/>
+                          </div>
+                          <div className="col-span-1 pt-5">
+                            <div className="font-bold">Last Name</div>
+                            <input className="border-2 border-gray-300 p-2 rounded-lg" type="text" {...register("lastName")} placeholder={profileData.lastName}/>
+                          </div>
+                          <div className="col-span-1 pt-5">
+                            <div className="font-bold">Username</div>
+                            <input className="border-2 border-gray-300 p-2 rounded-lg" type="text" {...register("username")} placeholder={profileData.username}/>
+                          </div>
+                          <div className="col-span-1 pt-5">
+                            <div className="font-bold">Interests (Comma Seperated)</div>
+                            <input className="border-2 border-gray-300 p-2 rounded-lg" type="text" {...register("interests")} placeholder={profileData.interests}/>
+                          </div>
+                          <div className="col-span-2 pt-5">
+                            <div className="font-bold">Bio</div>
+                            <textarea className="w-[92%] border-2 border-gray-300 p-2 rounded-lg"  {...register("bio")} type="text" placeholder={profileData.bio}/>
+                          </div>
+                          <div className="col-span-2 justify-items-center pt-5">
+                            <button type="submit" className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full text-center"> Save Changes </button>
+                          </div>
+                        </div>
+                      </Form>
+                  </div>
+                )}
               </div>
-              <div className="cols-span-2">
-                Feed
+              <div className="col-span-2 ">
+                <div className="grid grid-cols-3 p-2  ">
+                  {userRoomsArray}
+                </div>
               </div>
             </div>
           </div>
diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js
index 4ddd206..0aa682a 100644
--- a/frontend-next/src/components/app/datatypes.js
+++ b/frontend-next/src/components/app/datatypes.js
@@ -17,6 +17,15 @@ const userColors = [
     "#c3cb71",
   ];
 
+  let dateOptions = {
+    weekday: "long",
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  };
+
   const generateColor = (user_str) => {
     // hashes username for consistent colors, maybe all functionality to pick color later
     let hash = 0;
@@ -29,15 +38,6 @@ const userColors = [
 
 // Chat Message
 export function Chat({ chatObj }) {
-    let dateOptions = {
-      weekday: "long",
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    };
-  
     return (
       <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
         <div>
@@ -55,14 +55,6 @@ export function Chat({ chatObj }) {
   
 // System Chat Message
 export function SystemMessage({ chatObj }) {
-let dateOptions = {
-    weekday: "long",
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-};
 
 const generateColor = (user_str) => {
     // hashes username for consistent colors, maybe all functionality to pick color later
@@ -92,9 +84,11 @@ return (
 // Member for Active/Room members in sidebar
 export function Member({ memberObj }) {
     return (
-      <div className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2">
+    <a href={"/user/"+memberObj.uid} target="_blank">
+      <div className="cursor-pointer g-[aliceblue] rounded-lg m-3 shadow-xl p-2" >
         {memberObj.username}
       </div>
+    </a>
     );
   }
 
@@ -151,4 +145,22 @@ export function Interest({interest}) {
       </div>
     </div>
   )
+}
+
+export function ProfileRoom({room}) {
+  return (
+    <div>
+      <div className="rounded-lg p-2 shadow-xl bg-white h-[250px] w-[350px] m-2 grow-0">
+        <div className="relative z-1 h-[235px] opacity-50">
+          <Geo loc={{"latitude": room.latitude, "longitude": room.longitude}} zoom={12} locMarker={false}/>
+        </div>
+        <div className="relative z-2 top-[-235px] text-left p-2">
+          <div className="text-2xl font-bold">{room.name}</div>
+          <div>{room.description}</div>
+          <div>Created on {new Date(room.timestamp).toLocaleString(dateOptions)}</div>
+          <a href={"/app?room="+room.path+"/"+room.name+"-"+room.timestamp} className="absolute z-2 top-[190px] w-[108px] p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5 flex items-center">Open Room</a>
+        </div>
+      </div>
+    </div>
+  )
 }
\ No newline at end of file
diff --git a/frontend-next/src/components/app/header.js b/frontend-next/src/components/app/header.js
index 85a69b5..ac8c1a5 100644
--- a/frontend-next/src/components/app/header.js
+++ b/frontend-next/src/components/app/header.js
@@ -1,11 +1,10 @@
-import { auth, database } from "../../app/api/firebase-config";
+import { auth, database } from "../../firebase-config";
 import { ref, set, remove } from "firebase/database";
 import {signOut} from "firebase/auth";
 import { Popover } from '@headlessui/react'
 
   
   function logout() {
-    console.log("Fire")
     signOut(auth)
   }
 
diff --git a/frontend-next/src/components/app/main_tab/chat.js b/frontend-next/src/components/app/main_tab/chat.js
index 62cc531..f43d9b8 100644
--- a/frontend-next/src/components/app/main_tab/chat.js
+++ b/frontend-next/src/components/app/main_tab/chat.js
@@ -2,7 +2,7 @@ import { Chat, SystemMessage} from "../datatypes"
 import { useState, useEffect } from "react";
 import { Form, useForm } from "react-hook-form";
 import { ref, onValue, set} from "firebase/database";
-import { database } from "../../../app/api/firebase-config";
+import { database } from "../../../firebase-config";
 
 
   // Chatroom Module for Primary Tab
diff --git a/frontend-next/src/components/app/sidebar/home.js b/frontend-next/src/components/app/sidebar/home.js
index 6b46f67..18c7030 100644
--- a/frontend-next/src/components/app/sidebar/home.js
+++ b/frontend-next/src/components/app/sidebar/home.js
@@ -1,5 +1,5 @@
 import { Form, useForm } from "react-hook-form";
-import { database } from "../../../app/api/firebase-config";
+import { database } from "../../../firebase-config";
 import { ref, set } from "firebase/database";
 
 // CreateRoom Module for Sidebar Create Tab
diff --git a/frontend-next/src/app/api/firebase-config.js b/frontend-next/src/firebase-config.js
similarity index 100%
rename from frontend-next/src/app/api/firebase-config.js
rename to frontend-next/src/firebase-config.js
diff --git a/package-lock.json b/package-lock.json
index 8c17260..e48b872 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,5 +2,101 @@
   "name": "ChatMaps",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "react-router-dom": "^6.22.3"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    }
+  }
 }
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..6d86765
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-router-dom": "^6.22.3"
+  }
+}