diff --git a/frontend/react-app/src/components/UserInfo.jsx b/frontend/react-app/src/components/UserInfo.jsx
index 7a473f0..7f81798 100644
--- a/frontend/react-app/src/components/UserInfo.jsx
+++ b/frontend/react-app/src/components/UserInfo.jsx
@@ -1,5 +1,6 @@
 import "../css/Profile.css"
 import logo from '../logo.svg';
+import {  User, UserCircle } from "lucide-react";
 
 //user information used in the profile page
 function UserInfo({userInfo}){
@@ -15,7 +16,7 @@ function UserInfo({userInfo}){
     return (
         <div className="user-info">
             <div className="profile-picture">
-                    <img src={user.profilePictureUrl} alt="Profile Picture" />
+                    <UserCircle size={100}/>
                 </div>
                 <div className="profile-info">
                     <h1 className="profile-name">{userInfo.accountId}</h1>
diff --git a/frontend/react-app/src/css/Profile.css b/frontend/react-app/src/css/Profile.css
index 5624159..290c840 100644
--- a/frontend/react-app/src/css/Profile.css
+++ b/frontend/react-app/src/css/Profile.css
@@ -61,5 +61,4 @@
   }
   .logout-btn:hover {
     background-color: #6e6658; 
-}
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/react-app/src/pages/Profile.jsx b/frontend/react-app/src/pages/Profile.jsx
index 188f4ff..18205ff 100644
--- a/frontend/react-app/src/pages/Profile.jsx
+++ b/frontend/react-app/src/pages/Profile.jsx
@@ -37,10 +37,10 @@ function Profile(){
     return (
     <div className='pageContainer'>
         <Header/>
-        <div className='pageBody'>
+        <div className='profile-page'>
             <UserInfo 
             userInfo = {userData}/>
-            <h1>My teams</h1>
+            <h1>My Teams</h1>
             <div className="teams-grid">
                 {teams.map((team) => (
                     <Teams team={team} key={team.teamId}/>