diff --git a/frontend-next/src/app/user/page.js b/frontend-next/src/app/user/page.js
index df8364d..52a7a25 100644
--- a/frontend-next/src/app/user/page.js
+++ b/frontend-next/src/app/user/page.js
@@ -125,7 +125,7 @@ function UserProfile() {
                   <div>
                     <img
                       src={profileData.pfp}
-                      width="300px"
+                      style={{maxWidth: "350px", maxHeight: "450px"}} 
                       className="relative mx-auto rounded-2xl overflow-hidden"
                     />
                     <div className="font-bold text-[30px]">
diff --git a/frontend-next/src/components/app/friends/dm.js b/frontend-next/src/components/app/friends/dm.js
index 01ff581..6e2e92d 100644
--- a/frontend-next/src/components/app/friends/dm.js
+++ b/frontend-next/src/components/app/friends/dm.js
@@ -44,7 +44,7 @@ export function DM({user,friendObj}) {
                     </div>
                     <div className='col-span-3 cursor-pointer'>
                         <div onClick={() => {openDM(user,friendObj.uid)}}>
-                            <div className='inline-block mr-5'><img src={friendObj.pfp} className='w-[50px]'/></div>
+                            <div className='inline-block mr-8'><img src={friendObj.pfp} className='w-[38px] h-[50px]'/></div>
                             <div className='inline-block relative top-[-6px]'>
                                 <div className="font-bold">{friendObj.firstName} {friendObj.lastName}</div>
                                 <div className="">@{friendObj.username}</div>
diff --git a/frontend-next/src/components/app/friends/friends.js b/frontend-next/src/components/app/friends/friends.js
index 85facd2..467a2ff 100644
--- a/frontend-next/src/components/app/friends/friends.js
+++ b/frontend-next/src/components/app/friends/friends.js
@@ -39,7 +39,7 @@ export function Friend({user,friendObj}) {
                     </div>
                     <div className='col-span-3 cursor-pointer'>
                         <Link href={`/user?uid=${friendObj.uid}`}>
-                            <div className='inline-block mr-5'><img src={friendObj.pfp} className='w-[50px]'/></div>
+                            <div className='inline-block mr-8'><img src={friendObj.pfp} className= 'w-[38px] h-[50px]'/></div>
                             <div className='inline-block relative top-[-6px]'>
                                 <div className="font-bold">{friendObj.firstName} {friendObj.lastName}</div>
                                 <div className="">@{friendObj.username}</div>
diff --git a/frontend-next/src/components/app/profile/ProfileEdit.js b/frontend-next/src/components/app/profile/ProfileEdit.js
index 6a3895c..5cf74a8 100644
--- a/frontend-next/src/components/app/profile/ProfileEdit.js
+++ b/frontend-next/src/components/app/profile/ProfileEdit.js
@@ -62,7 +62,7 @@ export function ProfileEdit({ profileData, user, onSave }) {
           <div>
             <img
               src={profileData.pfp}
-              width="150px"
+              style={{width: "150px", maxHeight: "400px"}}
               className="relative mx-auto rounded-2xl overflow-hidden"
             />
             Current Profile Picture
diff --git a/frontend-next/src/components/app/profile/ProfilePanel.js b/frontend-next/src/components/app/profile/ProfilePanel.js
index 6acd844..0b3dcb3 100644
--- a/frontend-next/src/components/app/profile/ProfilePanel.js
+++ b/frontend-next/src/components/app/profile/ProfilePanel.js
@@ -25,10 +25,10 @@ export function ProfilePanel({user}) {
         <Popover.Button as="div">
           <div className="h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
             <div className="flex items-center pl-1">{user.firstName}</div>
-            <div className="ml-3 rounded-lg">
+            <div className="ml-3 rounded-lg flex items-center">
               <img
                 src={user.pfp}
-                width="40px"
+                style={{maxWidth: "40px", maxHeight: "40px"}}
                 className="relative mx-auto rounded-xl overflow-hidden"
               />
             </div>
diff --git a/frontend-next/src/components/app/sidebar/dm.js b/frontend-next/src/components/app/sidebar/dm.js
index fcdf631..33deaec 100644
--- a/frontend-next/src/components/app/sidebar/dm.js
+++ b/frontend-next/src/components/app/sidebar/dm.js
@@ -42,7 +42,7 @@ export function Sidebar({user, chatRoomObj}) {
             <div className="m-2 h-[98%] grid grid-cols-1">
                 <div className="flex place-content-center">
                     <div className="bg-white rounded-lg m-2 shadow-2xl pt-10">
-                        <img src={profileData.pfp} className="w-[80%] relative mx-auto"/>
+                        <img src={profileData.pfp} style={{maxHeight: "800px"}} className="w-[80%] relative mx-auto"/> 
                         <div className="font-bold text-[24px]">{profileData.firstName} {profileData.lastName}</div>
                         @{profileData.username}
                     </div>