diff --git a/frontend/react-app/src/css/Profile.css b/frontend/react-app/src/css/Profile.css
index 290c840..845103e 100644
--- a/frontend/react-app/src/css/Profile.css
+++ b/frontend/react-app/src/css/Profile.css
@@ -4,10 +4,31 @@
     width: 100%;
     box-sizing: border-box;
   }
-  
+
+  .profile-info-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .button-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+.sign-out-btn button {
+    background-color: #3B3355;
+    color: white;
+    font-size: 15px;
+    height: 35px;
+    padding: 10px;
+}
+    
   .user-info {
     display: flex; 
-    align-items: left;
+    align-items: flex-start;
     gap: 2rem;
     margin-bottom: 2rem; 
   }
@@ -36,13 +57,14 @@
     margin: 0;
     font-size: 20px;
     font-weight: 600;
-  }
+  } 
 
   .teams-grid {
     display: flex;
     flex-direction: column;
     gap: 0px;
     align-items: center;
+    width: 110%;
   }
   
   .logout-btn{
diff --git a/frontend/react-app/src/pages/Profile.jsx b/frontend/react-app/src/pages/Profile.jsx
index 18205ff..47f8639 100644
--- a/frontend/react-app/src/pages/Profile.jsx
+++ b/frontend/react-app/src/pages/Profile.jsx
@@ -38,18 +38,26 @@ function Profile(){
     <div className='pageContainer'>
         <Header/>
         <div className='profile-page'>
-            <UserInfo 
-            userInfo = {userData}/>
-            <h1>My Teams</h1>
-            <div className="teams-grid">
-                {teams.map((team) => (
-                    <Teams team={team} key={team.teamId}/> 
-                ))}
-            </div> 
-            <div>
-            <a href="/change-password"><button className="importButton">Change Password</button></a>    
-            </div> 
-            <SignOut/>
+            <div className="profile-info-container">
+                <UserInfo 
+                    userInfo = {userData}/>
+                <div className='button-group'>
+                    <a href="/change-password"><button className="importButton" style={{margin: '0px', backgroundColor: '#3B3355', color: 'white', fontSize:'15px', padding: '10px', height: '35px'}}>Change Password</button></a>    
+                    <div className='sign-out-btn'>
+                        <SignOut style={{backgroundColor:'#3B3355'}}/>
+                    </div>
+                </div> 
+            </div>    
+            <div className="column-box" style={{width: '95%'}} >
+                <h1>My Teams</h1>
+                <div className="section-divider">
+                    <div className="teams-grid">
+                        {teams.map((team) => (
+                            <Teams team={team} key={team.teamId}/> 
+                        ))}
+                    </div> 
+                </div>
+                </div>
         </div>
     </div>