diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 37043ea0..3db573d5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-oidc-context": "^3.1.0",
+        "react-router-dom": "^6.23.1",
         "reactjs-popup": "^2.0.6"
       },
       "devDependencies": {
@@ -690,6 +691,15 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.17.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
@@ -3037,6 +3047,38 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.16.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/reactjs-popup": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 077b8d9b..e1580ba2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-oidc-context": "^3.1.0",
+    "react-router-dom": "^6.23.1",
     "reactjs-popup": "^2.0.6"
   },
   "devDependencies": {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d855b45e..13b9bdbd 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -29,9 +29,11 @@ function App() {
 
   if (auth.isAuthenticated) {
     return (
+      
       <div style={{ backgroundColor: '#F5F5DC'}}>
         <div>
         <div><Navbar /> </div>
+{/*         
         <h1 >WELCOME TO TEAMAGOCHI GANG</h1>
           <h1 className='font-extrabold text-9xl' >
              <a href="https://www.youtube.com/watch?v=sf0PJsknZiM">CARTI </a>
@@ -41,28 +43,10 @@ function App() {
           <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
           <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
           <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
-          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
-          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
-          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
-          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
-          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
-          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   
-          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />  
-          
-
-          
-
-        </div>
-        <div className="card">
-          <button onClick={() => setCount((count) => count + 1)}>
-            count is {count}[]
-          </button>
-          <button onClick={() => void auth.removeUser()}>Log out</button>
+          <img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />   */}
         </div>
-        <p className="read-the-docs">
-          Hello
-        </p>
-        <div>Hello {auth.user?.profile.sub}</div>
+        
+        <div>Hello {auth.user?.profile?.preferred_username || 'User'}</div>
       </div>
     );
   }
diff --git a/frontend/src/Components/Friends.tsx b/frontend/src/Components/Friends.tsx
new file mode 100644
index 00000000..3921a4bb
--- /dev/null
+++ b/frontend/src/Components/Friends.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Friends = () => (
+  <div>
+    <h1>Friends Page</h1>
+    <p>Welcome to the Friends Page!</p>
+  </div>
+);
+
+export default Friends;
diff --git a/frontend/src/Components/Inventory.tsx b/frontend/src/Components/Inventory.tsx
new file mode 100644
index 00000000..2f2d6c80
--- /dev/null
+++ b/frontend/src/Components/Inventory.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Inventory = () => (
+  <div>
+    <h1>Inventory Page</h1>
+    <p>Welcome to the Inventory Page!</p>
+  </div>
+);
+
+export default Inventory;
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index bcd5e408..db50da75 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -1,20 +1,24 @@
 import React, { useState } from "react";
+import {BrowserRouter as Router, Link, Route, Routes} from "react-router-dom";
+import Inventory from '../Inventory.tsx';
+import Settings from '../Settings.tsx';
+import Friends from '../Friends.tsx';
+import PetPage from '../PetPage.tsx';
 import { useAuth } from "react-oidc-context";
 import './navbar.css';
 
-const Navbar = () =>{
+const Navbar = () => {
     const auth = useAuth();
     const [activePage, setActivePage] = useState("Pet Page");
 
     const loginButtonStyles = {
-        color: '#fff',             // White text color
-        backgroundColor: '#006400', 
-        fontWeight: 'bold',        // Bold font weight
-        // Add any other custom styles as needed
+        color: '#fff',
+        backgroundColor: '#006400',
+        fontWeight: 'bold',
     };
 
     const navbarItemStyles = {
-        marginRight: '20px', // Adjust the margin between navbar items
+        marginRight: '20px',
     };
 
     const handlePageClick = (page) => {
@@ -22,54 +26,56 @@ const Navbar = () =>{
     };
 
     return (
-        <div>    
-            <nav className="navbar navbar-expand-lg navbar-dark bg-success">
-            <img src={"./android-chrome-192x192.png"} alt="Logo" style={{ width: '30px', height: '30px', marginLeft: '5px' }} />        
-            <a className="navbar-brand" href="#"> TEAMAGOCHI</a>
-            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span className="navbar-toggler-icon"></span>
-            </button>
+        <div>
+            <Router>
+                <nav className="navbar navbar-expand-lg navbar-dark bg-success">
+                    <img src={"./android-chrome-192x192.png"} alt="Logo" style={{ width: '30px', height: '30px', marginLeft: '5px' }} />
+                    <a className="navbar-brand" href="#">TEAMAGOCHI</a>
+                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                        <span className="navbar-toggler-icon"></span>
+                    </button>
 
-            <div className="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent" style={navbarItemStyles}>
-                <ul className="navbar-nav ">
-                <li className={`nav-item ${activePage === 'Pet Page' ? 'active' : ''}`}>
-                    <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Pet Page')}>Pet Page</a>
-                </li>
-                <li className={`nav-item ${activePage === 'Inventory' ? 'active' : ''}`}>
-                    <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Inventory')}>Inventory</a>
-                </li>
-                <li className={`nav-item ${activePage === 'Friends' ? 'active' : ''}`}>
-                    <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Friends')}>Friends</a>
-                </li>
-                <li className={`nav-item ${activePage === 'Settings' ? 'active' : ''}`}>
-                    <a className="nav-link" href="#" style={navbarItemStyles} onClick={() => handlePageClick('Settings')}>Settings</a>
-                </li>
-                {/* <li className="nav-item dropdown" style={navbarItemStyles}>
-                    <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style={navbarItemStyles}>
-                    Settings
-                    </a>
-                    <div className="dropdown-menu" aria-labelledby="navbarDropdown">
-                    <a className="dropdown-item" href="#">Action</a>
-                    <a className="dropdown-item" href="#">Another action</a>
-                    <div className="dropdown-divider"></div>
-                    <a className="dropdown-item" href="#">Something else here</a>
+                    <div className="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent" style={navbarItemStyles}>
+                        <ul className="navbar-nav">
+                            {auth.isAuthenticated ? (
+                                <>
+                                    <li className={`nav-item ${activePage === 'Pet Page' ? 'active' : ''}`}>
+                                        <Link className="nav-link" to="/PetPage" style={navbarItemStyles} onClick={() => handlePageClick('Pet Page')}>Pet Page</Link>
+                                    </li>
+                                    <li className={`nav-item ${activePage === 'Inventory' ? 'active' : ''}`}>
+                                        <Link className="nav-link" to="/inventory" style={navbarItemStyles} onClick={() => handlePageClick('Inventory')}>Inventory</Link>
+                                    </li>
+                                    <li className={`nav-item ${activePage === 'Friends' ? 'active' : ''}`}>
+                                        <Link className="nav-link" to="/Friends" style={navbarItemStyles} onClick={() => handlePageClick('Friends')}>Friends</Link>
+                                    </li>
+                                    <li className={`nav-item ${activePage === 'Settings' ? 'active' : ''}`}>
+                                        <Link className="nav-link" to="/Settings" style={navbarItemStyles} onClick={() => handlePageClick('Settings')}>Settings</Link>
+                                    </li>
+                                    <li className="navbar-item">
+                                        <button className="nav-link" onClick={() => auth.removeUser()} style={loginButtonStyles}>Log out</button>
+                                    </li>
+                                </>
+                            ) : (
+                                <li className="navbar-item">
+                                    <a className="nav-link" href="#" onClick={() => auth.signinRedirect()} style={loginButtonStyles}>Log in</a>
+                                </li>
+                            )}
+                        </ul>
                     </div>
-                </li> */}
-                {auth.isAuthenticated ? (
-                <li className="navbar-item">
-                    <button className="nav-link" onClick={() => auth.removeUser()} style={loginButtonStyles}>Log out</button>
-                </li>
-                ) : (
-                <li className="navbar-item">
-                    <a className="nav-link" href="#" onClick={() => auth.signinRedirect()} style={loginButtonStyles}>Log in</a>
-                </li>
-                )}
-                
-                </ul>
-            </div>
-            </nav>
+                </nav>
+                <Routes>
+                    <Route path="/inventory" element={<Inventory />} />
+                    <Route path="/Settings" element={<Settings />} />
+                    <Route path="/Friends" element={<Friends />} />
+                    <Route path="/PetPage" element={<PetPage />} />
+                </Routes>
+            </Router>
         </div>
     )
 }
 
+<<<<<<< HEAD
+export default Navbar;
+=======
 export default Navbar
+>>>>>>> d84ce58873962e255ae93e1ec5fcd937a2e765f9
diff --git a/frontend/src/Components/PetPage.tsx b/frontend/src/Components/PetPage.tsx
new file mode 100644
index 00000000..df5f7899
--- /dev/null
+++ b/frontend/src/Components/PetPage.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const PetPage = () => (
+  <div>
+    <h1>Pet Page</h1>
+    <p>Welcome to the Pet Page!</p>
+  </div>
+);
+
+export default PetPage;
diff --git a/node/code/modules/display_handler/forg (1).c b/node/code/modules/display_handler/forg (1).c
new file mode 100644
index 00000000..e69de29b