diff --git a/FU.SPA/src/components/Navbar.css b/FU.SPA/src/components/Navbar.css
index 342bf7b0..0d90a620 100644
--- a/FU.SPA/src/components/Navbar.css
+++ b/FU.SPA/src/components/Navbar.css
@@ -24,7 +24,7 @@ body {
 
 .left-content,
 .right-content {
-  display:flex;
+  display: flex;
 }
 
 .site-title {
@@ -42,17 +42,17 @@ body {
 }
 
 .nav button {
-color: white;
-background: none;
-border: none; 
-outline: none;
-font-family: inherit;
-font-size: inherit; 
-cursor: pointer; 
-display: flex; 
-align-items: center; 
-padding: 0.2rem; 
-height: 100%; 
+  color: white;
+  background: none;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0.2rem;
+  height: 100%;
 }
 
 .nav a {
@@ -60,9 +60,8 @@ height: 100%;
   text-decoration: none;
   height: 100%;
   display: flex;
-  align-items:center;
+  align-items: center;
   padding: 0.2rem;
-  
 }
 
 .nav li.active {
diff --git a/FU.SPA/src/components/Navbar.jsx b/FU.SPA/src/components/Navbar.jsx
index 827391d4..1ca084cb 100644
--- a/FU.SPA/src/components/Navbar.jsx
+++ b/FU.SPA/src/components/Navbar.jsx
@@ -11,18 +11,25 @@ export default function Navbar() {
   const renderTabContent = () => {
     if (user) {
       // if user has a custom pfp then use that, if not then use MUI instead of default pfp
-      const defaultPFP = user.pfpUrl.includes('https://tr.rbxcdn.com/38c6edcb50633730ff4cf39ac8859840/420/420/Hat/Png');
-      const pfpComponent = !defaultPFP
-      ? <Avatar src={user.pfpUrl} sx={{ width: 33, height: 33 }} />
-      : <Avatar {...stringAvatar(user.username)} sx={{ width: 33, height: 33, bgcolor: stringToColor(user.username) }} />;
+      const defaultPFP = user.pfpUrl.includes(
+        'https://tr.rbxcdn.com/38c6edcb50633730ff4cf39ac8859840/420/420/Hat/Png',
+      );
+      const pfpComponent = !defaultPFP ? (
+        <Avatar src={user.pfpUrl} sx={{ width: 33, height: 33 }} />
+      ) : (
+        <Avatar
+          {...stringAvatar(user.username)}
+          sx={{ width: 33, height: 33, bgcolor: stringToColor(user.username) }}
+        />
+      );
       return (
         <>
-        <li style={{ display: 'flex', alignItems: 'center' }}>
-        {pfpComponent}
-        </li>
-        <li style={{ display: 'flex', alignItems: 'center' }}>
-          <button onClick={logout}>Logout</button>
-        </li>
+          <li style={{ display: 'flex', alignItems: 'center' }}>
+            {pfpComponent}
+          </li>
+          <li style={{ display: 'flex', alignItems: 'center' }}>
+            <button onClick={logout}>Logout</button>
+          </li>
         </>
       );
     } else {
@@ -98,4 +105,4 @@ function stringAvatar(name) {
     },
     children: initials,
   };
-}
\ No newline at end of file
+}
diff --git a/FU.SPA/src/components/pages/UserProfile.css b/FU.SPA/src/components/pages/UserProfile.css
index 8e5f50a9..34035d4e 100644
--- a/FU.SPA/src/components/pages/UserProfile.css
+++ b/FU.SPA/src/components/pages/UserProfile.css
@@ -44,7 +44,7 @@
 
     button {
       width: 233px;
-      background-color: #E340DCDC;
+      background-color: #e340dcdc;
       color: #fff;
       padding: 15px;
       border: none;
@@ -53,7 +53,7 @@
     }
 
     button:hover {
-      background-color: #E340DC;
+      background-color: #e340dc;
     }
   }
 }
diff --git a/FU.SPA/src/components/pages/UserProfile.jsx b/FU.SPA/src/components/pages/UserProfile.jsx
index 5f1cbedd..83e5205f 100644
--- a/FU.SPA/src/components/pages/UserProfile.jsx
+++ b/FU.SPA/src/components/pages/UserProfile.jsx
@@ -18,7 +18,11 @@ export default function UserProfile() {
     try {
       const profile = await UserService.getUserprofile(username);
       setUserProfile(profile);
-      setDefaultPFP(profile.pfpUrl.includes('https://tr.rbxcdn.com/38c6edcb50633730ff4cf39ac8859840/420/420/Hat/Png'));
+      setDefaultPFP(
+        profile.pfpUrl.includes(
+          'https://tr.rbxcdn.com/38c6edcb50633730ff4cf39ac8859840/420/420/Hat/Png',
+        ),
+      );
     } catch (error) {
       console.error('Error fetching profile:', error);
     }
@@ -32,7 +36,7 @@ export default function UserProfile() {
   const dob = new Date(userProfile?.dob);
   const today = new Date();
   const age = Math.floor(
-    (today.getTime() - dob.getTime()) / (1000 * 3600 * 24 * 365)
+    (today.getTime() - dob.getTime()) / (1000 * 3600 * 24 * 365),
   );
 
   const stringToColor = (string) => {
@@ -47,7 +51,7 @@ export default function UserProfile() {
       color += `00${value.toString(16)}`.slice(-2);
     }
     return color;
-  }
+  };
 
   const initials = (name) => {
     // split  name by spaces and filter empty entries
@@ -58,16 +62,13 @@ export default function UserProfile() {
     if (nameParts.length > 1) {
       initials += nameParts[1][0];
     }
-    
+
     return initials;
-  }
+  };
 
   const renderPfp = () => {
     return !defaultPFP ? (
-      <img
-        src={userProfile.pfpUrl}
-        className="userImage"
-      />
+      <img src={userProfile.pfpUrl} className="userImage" />
     ) : (
       <div
         className="userImage"
@@ -84,7 +85,7 @@ export default function UserProfile() {
         {initials(userProfile.username)}
       </div>
     );
-  }
+  };
 
   const renderBio = () => {
     if (!userProfile.bio) {
@@ -103,10 +104,12 @@ export default function UserProfile() {
     if (!user || user.username === userProfile.username) {
       return;
     }
-    
+
     return (
       <div className="buttons">
-        <button className="messageButton" onClick={clickSendMessage}>Send Message</button>
+        <button className="messageButton" onClick={clickSendMessage}>
+          Send Message
+        </button>
         <button className="friendButton">Send Friend Request</button>
       </div>
     );
@@ -115,29 +118,25 @@ export default function UserProfile() {
   const clickSendMessage = async () => {
     const chat = await getDirectChat(userProfile.id);
     navigate(`/chat/${chat.id}`);
-  }
+  };
 
   if (userProfile) {
     return (
       <>
         <div className="header">
-          <div className='left-content'>
+          <div className="left-content">
             {renderPfp()}
             <div className="userInfo">
               <p className="userName">{userProfile.username}</p>
               {userProfile.dob && <p>Age: {age} years old</p>}
             </div>
           </div>
-          <div className='right-content'>
-            {renderHeaderButtons()}
-          </div>
-        </div>
-        <div className="body">
-          {renderBio()}
+          <div className="right-content">{renderHeaderButtons()}</div>
         </div>
+        <div className="body">{renderBio()}</div>
       </>
     );
   } else {
     return <NoPage />;
   }
-}
\ No newline at end of file
+}
diff --git a/FU.SPA/src/main.jsx b/FU.SPA/src/main.jsx
index be74370c..5574a6d7 100644
--- a/FU.SPA/src/main.jsx
+++ b/FU.SPA/src/main.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
-import './index.css'
+import './index.css';
 // add comment
 import './components/Navbar.css';
 import { BrowserRouter } from 'react-router-dom';