diff --git a/front-end/package.json b/front-end/package.json
index 8aed160..467cf33 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -8,8 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.17.0",
-    "react-scripts": "^5.0.1",
+    "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/front-end/src/App.js b/front-end/src/App.js
index 6f7dc3a..3784575 100644
--- a/front-end/src/App.js
+++ b/front-end/src/App.js
@@ -1,27 +1,24 @@
-import React from 'react';
+import logo from './logo.svg';
 import './App.css';
-import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
-import FriendsPage from './components/FriendsPage';
-
 
 function App() {
   return (
-    <Router>
-      <div>
-        <nav>
-          <ul>
-            <li>
-              <Link to="/friends">Friends</Link>
-            </li>
-          </ul>
-        </nav>
-
-        <Routes>
-          {" "}
-          <Route path="/friends" element={<FriendsPage />} />
-        </Routes>
-      </div>
-    </Router>
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
   );
 }
 
diff --git a/front-end/src/components/FriendsPage.css b/front-end/src/components/FriendsPage.css
deleted file mode 100644
index 3e5d12b..0000000
--- a/front-end/src/components/FriendsPage.css
+++ /dev/null
@@ -1,111 +0,0 @@
-.page-title {
-    font-size: 2em;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.balance-section {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #E5E5E5;
-    padding: 15px;
-    border-radius: 10px;
-    margin-bottom: 20px;
-}
-
-.avatar {
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    margin-right: 20px;
-}
-
-.balance-title {
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.balance-details {
-    display: flex;
-    flex-direction: column;
-}
-
-.friends-list h3 {
-    margin-top: 20px;
-    margin-bottom: 10px;
-}
-
-.friend-item {
-    display: flex;
-    align-items: center;
-    gap: 10px; 
-}
-
-.friend-avatar {
-    border-radius: 50%; 
-    margin-right: 10px; 
-    width: 50px;
-    height: 50px;
-}
-
-.positive-balance {
-    color: green;
-}
-
-.negative-balance {
-    color: red;
-}
-
-
-.navbar {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    background-color: #E5E5E5;
-    padding: 5px 10px;
-    border-radius: 5px;
-}
-
-.add-friends-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 5px 10px;
-    background-color: #007BFF;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.modal-content {
-    background-color: white;
-    padding: 20px;
-    border-radius: 10px;
-    width: 300px;
-    position: relative;
-}
-
-.close {
-    position: absolute;
-    right: 10px;
-    top: 5px;
-    cursor: pointer;
-}
-
-.modal-content h2 {
-    margin-top: 0;
-}
\ No newline at end of file
diff --git a/front-end/src/components/FriendsPage.jsx b/front-end/src/components/FriendsPage.jsx
deleted file mode 100644
index 3f24263..0000000
--- a/front-end/src/components/FriendsPage.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import './FriendsPage.css';
-
-function FriendsPage() {
-    const [userData, setUserData] = useState(null);
-    const [showModal, setShowModal] = useState(false); 
-
-    const backupData = {"id":1,"name":"Carmon Stickel","email":"cstickel0@shutterfly.com","phone":"574-505-0071","avatar":"https://robohash.org/expeditaautemlaudantium.png?size=50x50\u0026set=set1","friends":[{"id":4,"name":"Leeanne Dunrige","email":"ldunrige0@comcast.net","phone":"594-821-5418","balance":"$62.71"},{"id":2,"name":"Doti Sorrel","email":"dsorrel1@google.com.hk","phone":"852-501-6560","balance":"$55.97"},{"id":5,"name":"Hobart Sallan","email":"hsallan2@cnet.com","phone":"476-640-9589","balance":"$-36.35"},{"id":3,"name":"Anetta Heningam","email":"aheningam3@networksolutions.com","phone":"180-587-2730","balance":"$-54.82"}]}; 
-
-    useEffect(() => {
-        async function fetchData() {
-            try {
-                const response = await fetch("https://my.api.mockaroo.com/users.json?key=04d5ee10");
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-                const data = await response.json();
-                setUserData(data);
-            } catch (error) {
-                console.error("Error fetching user data:", error);
-                console.log(backupData); 
-                // Setting backup data when API call fails
-                setUserData(backupData);
-            }
-        }
-        fetchData();
-    }, []);
-
-    if (!userData) return <div>Loading...</div>;
-
-    const totalBalance = userData.friends && userData.friends.length ? userData.friends.reduce((acc, friend) => acc + parseFloat(friend.balance.replace('$', '')), 0) : 0;
-
-    return (
-        <div className="friends-page">
-            <h1 className="page-title">Friends</h1>
-            <div className="navbar">
-                Navigation Bar
-            </div>
-            <button className="add-friends-btn" onClick={() => setShowModal(true)}>
-                Add Friends
-            </button>
-            <div className="balance-section">
-                <img src={userData.avatar} alt="User Avatar" className="avatar"/>
-                <div>
-                    <div className="balance-title">Total balance</div>
-                    <div className="balance-details">
-                        {totalBalance > 0 ? (
-                            <div>You are owed ${totalBalance.toFixed(2)}</div>
-                        ) : (
-                            <div>You owe ${Math.abs(totalBalance).toFixed(2)}</div>
-                        )}
-                    </div>
-                </div>
-            </div>
-
-            <div className="friends-list">
-                <ul>
-                    {userData.friends.map((friend) => (
-                        <li key={friend.id} className="friend-item">
-                            <img src={`https://robohash.org/${friend.name}.png?size=50x50&set=set1`} alt={`${friend.name}'s avatar`} className="friend-avatar"/>
-                            <span>{friend.name}</span>
-                            <span className={parseFloat(friend.balance.replace('$', '')) < 0 ? "negative-balance" : "positive-balance"}>
-                                 {friend.balance}
-                            </span>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-
-
-            {showModal && (
-                <div className="modal">
-                    <div className="modal-content">
-                        <span className="close" onClick={() => setShowModal(false)}>&times;</span>
-                        <h2>Add Friends</h2>
-                        <input type="text" placeholder="Email or Phone" />
-                        <button>Search</button>
-                    </div>
-                </div>
-            )}
-
-        </div>
-    );
-}
-
-export default FriendsPage;
\ No newline at end of file