diff --git a/next.config.js b/next.config.js
index 61c1055c..1168a1db 100644
--- a/next.config.js
+++ b/next.config.js
@@ -10,7 +10,10 @@ module.exports = {
     JELLYFIN_TYPE: process.env.JELLYFIN_TYPE,
   },
   images: {
-    domains: ['image.tmdb.org'],
+    remotePatterns: [
+      { hostname: 'gravatar.com' },
+      { hostname: 'image.tmdb.org' },
+    ],
   },
   webpack(config) {
     config.module.rules.push({
diff --git a/src/components/Discover/DiscoverNetwork/index.tsx b/src/components/Discover/DiscoverNetwork/index.tsx
index f02ccedd..3c15e1a8 100644
--- a/src/components/Discover/DiscoverNetwork/index.tsx
+++ b/src/components/Discover/DiscoverNetwork/index.tsx
@@ -52,6 +52,7 @@ const DiscoverTvNetwork = () => {
                 src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
                 alt={firstResultData.network.name}
                 className="max-h-24 sm:max-h-32"
+                fill
               />
             </div>
           ) : (
diff --git a/src/components/Discover/DiscoverStudio/index.tsx b/src/components/Discover/DiscoverStudio/index.tsx
index f11765d6..a7f39db7 100644
--- a/src/components/Discover/DiscoverStudio/index.tsx
+++ b/src/components/Discover/DiscoverStudio/index.tsx
@@ -52,6 +52,7 @@ const DiscoverMovieStudio = () => {
                 src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
                 alt={firstResultData.studio.name}
                 className="max-h-24 sm:max-h-32"
+                fill
               />
             </div>
           ) : (
diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx
index dc1ba106..1546746e 100644
--- a/src/components/IssueDetails/IssueComment/index.tsx
+++ b/src/components/IssueDetails/IssueComment/index.tsx
@@ -89,6 +89,8 @@ const IssueComment = ({
           src={comment.user.avatar}
           alt=""
           className="h-10 w-10 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
+          width={40}
+          height={40}
         />
       </Link>
       <div className="relative flex-1">
diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx
index 9464c1a1..23af2d90 100644
--- a/src/components/IssueDetails/index.tsx
+++ b/src/components/IssueDetails/index.tsx
@@ -282,6 +282,8 @@ const IssueDetails = () => {
                     className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
                     src={issueData.createdBy.avatar}
                     alt=""
+                    width={20}
+                    height={20}
                   />
                   <span className="font-semibold text-gray-100 transition duration-300 group-hover:text-white group-hover:underline">
                     {issueData.createdBy.displayName}
diff --git a/src/components/IssueList/IssueItem/index.tsx b/src/components/IssueList/IssueItem/index.tsx
index 66b57d0a..381cd414 100644
--- a/src/components/IssueList/IssueItem/index.tsx
+++ b/src/components/IssueList/IssueItem/index.tsx
@@ -229,6 +229,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
                           src={issue.createdBy.avatar}
                           alt=""
                           className="avatar-sm ml-1.5 object-cover"
+                          fill
                         />
                         <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                           {issue.createdBy.displayName}
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index e2f60807..dddb2f5d 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -152,7 +152,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                     <div className="flex flex-shrink-0 items-center px-2">
                       <span className="px-4 text-xl text-gray-50">
                         <Link href="/">
-                          <Image src="/logo_full.svg" alt="Logo" />
+                          <Image src="/logo_full.svg" alt="Logo" fill />
                         </Link>
                       </span>
                     </div>
@@ -221,7 +221,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
               <div className="flex flex-shrink-0 items-center">
                 <span className="px-4 text-2xl text-gray-50">
                   <Link href="/">
-                    <Image src="/logo_full.svg" alt="Logo" />
+                    <Image src="/logo_full.svg" alt="Logo" fill />
                   </Link>
                 </span>
               </div>
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx
index 9e5c517a..7b4c57da 100644
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -56,6 +56,8 @@ const UserDropdown = () => {
             className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
             src={user?.avatar || ''}
             alt=""
+            width={40}
+            height={40}
           />
         </Menu.Button>
       </div>
@@ -77,6 +79,8 @@ const UserDropdown = () => {
                   className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
                   src={user?.avatar || ''}
                   alt=""
+                  width={40}
+                  height={40}
                 />
                 <div className="flex min-w-0 flex-col">
                   <span className="truncate text-xl font-semibold text-gray-200">
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index 744eb4df..01c09c36 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -91,6 +91,7 @@ const Login = () => {
           src="/logo_stacked.svg"
           className="mb-10 max-w-full"
           alt="Logo"
+          fill
         />
         <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.signinheader)}
diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx
index 5e8cc2ce..a7335ceb 100644
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -339,6 +339,8 @@ const ManageSlideOver = ({
                                       src={user.avatar}
                                       alt={user.displayName}
                                       className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
+                                      width={32}
+                                      height={32}
                                     />
                                   </Tooltip>
                                 </Link>
@@ -498,6 +500,8 @@ const ManageSlideOver = ({
                                       src={user.avatar}
                                       alt={user.displayName}
                                       className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
+                                      width={32}
+                                      height={32}
                                     />
                                   </Tooltip>
                                 </Link>
diff --git a/src/components/MediaSlider/ShowMoreCard/index.tsx b/src/components/MediaSlider/ShowMoreCard/index.tsx
index b552fbc2..794ef9e9 100644
--- a/src/components/MediaSlider/ShowMoreCard/index.tsx
+++ b/src/components/MediaSlider/ShowMoreCard/index.tsx
@@ -63,6 +63,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
                     src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[0]}`}
                     alt=""
                     className="w-full rounded-md"
+                    fill
                   />
                 </div>
               )}
@@ -72,6 +73,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
                     src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[1]}`}
                     alt=""
                     className="w-full rounded-md"
+                    fill
                   />
                 </div>
               )}
@@ -81,6 +83,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
                     src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[2]}`}
                     alt=""
                     className="w-full rounded-md"
+                    fill
                   />
                 </div>
               )}
@@ -90,6 +93,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
                     src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[3]}`}
                     alt=""
                     className="w-full rounded-md"
+                    fill
                   />
                 </div>
               )}
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 1d1133e4..46538a4f 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -533,6 +533,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                         height: '100%',
                         objectFit: 'cover',
                       }}
+                      fill
                     />
                     <div
                       className="absolute inset-0"
diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx
index 125a0039..5263a372 100644
--- a/src/components/PersonCard/index.tsx
+++ b/src/components/PersonCard/index.tsx
@@ -58,6 +58,7 @@ const PersonCard = ({
                       height: '100%',
                       objectFit: 'cover',
                     }}
+                    fill
                   />
                 </div>
               ) : (
diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx
index 395e3201..63ea6f9d 100644
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -115,6 +115,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                         src={requestData.requestedBy.avatar}
                         alt=""
                         className="avatar-sm"
+                        fill
                       />
                       <span className="truncate group-hover:underline">
                         {requestData.requestedBy.displayName}
@@ -371,6 +372,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                   src={requestData.requestedBy.avatar}
                   alt=""
                   className="avatar-sm object-cover"
+                  fill
                 />
                 <span className="truncate font-semibold group-hover:text-white group-hover:underline">
                   {requestData.requestedBy.displayName}
diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index a80bb273..41507356 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -188,6 +188,7 @@ const RequestItemError = ({
                               src={requestData.requestedBy.avatar}
                               alt=""
                               className="avatar-sm ml-1.5"
+                              fill
                             />
                             <span className="truncate text-sm group-hover:underline">
                               {requestData.requestedBy.displayName}
@@ -243,6 +244,7 @@ const RequestItemError = ({
                             src={requestData.modifiedBy.avatar}
                             alt=""
                             className="avatar-sm ml-1.5"
+                            fill
                           />
                           <span className="truncate text-sm group-hover:underline">
                             {requestData.modifiedBy.displayName}
@@ -536,6 +538,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                             src={requestData.requestedBy.avatar}
                             alt=""
                             className="avatar-sm ml-1.5 object-cover"
+                            fill
                           />
                           <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                             {requestData.requestedBy.displayName}
@@ -591,6 +594,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                           src={requestData.modifiedBy.avatar}
                           alt=""
                           className="avatar-sm ml-1.5 object-cover"
+                          fill
                         />
                         <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                           {requestData.modifiedBy.displayName}
diff --git a/src/components/RequestModal/AdvancedRequester/index.tsx b/src/components/RequestModal/AdvancedRequester/index.tsx
index bc4556d0..48838d0b 100644
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -564,6 +564,8 @@ const AdvancedRequester = ({
                             src={selectedUser.avatar}
                             alt=""
                             className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
+                            width={24}
+                            height={24}
                           />
                           <span className="ml-3 block">
                             {selectedUser.displayName}
@@ -614,6 +616,8 @@ const AdvancedRequester = ({
                                     src={user.avatar}
                                     alt=""
                                     className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
+                                    width={24}
+                                    height={24}
                                   />
                                   <span className="ml-3 block flex-shrink-0">
                                     {user.displayName}
diff --git a/src/components/RequestModal/SearchByNameModal/index.tsx b/src/components/RequestModal/SearchByNameModal/index.tsx
index 2b4e36e3..846434d5 100644
--- a/src/components/RequestModal/SearchByNameModal/index.tsx
+++ b/src/components/RequestModal/SearchByNameModal/index.tsx
@@ -95,6 +95,7 @@ const SearchByNameModal = ({
                   }
                   alt={item.title}
                   className="h-100 w-auto rounded-md"
+                  fill
                 />
               </div>
               <div className="flex-grow self-start p-3 text-left">
diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx
index 34f102b4..7de58407 100644
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -54,6 +54,7 @@ const ResetPassword = () => {
           src="/logo_stacked.svg"
           className="mb-10 max-w-full"
           alt="Logo"
+          fill
         />
         <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx
index c5b42d24..1ff16005 100644
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -69,6 +69,7 @@ const ResetPassword = () => {
           src="/logo_stacked.svg"
           className="mb-10 max-w-full"
           alt="Logo"
+          fill
         />
         <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
diff --git a/src/components/Selector/index.tsx b/src/components/Selector/index.tsx
index ce4ab8ab..951fddcb 100644
--- a/src/components/Selector/index.tsx
+++ b/src/components/Selector/index.tsx
@@ -381,6 +381,7 @@ export const WatchProviderSelector = ({
                         height: '100%',
                         objectFit: 'contain',
                       }}
+                      fill
                       className="rounded-lg"
                     />
                     {isActive && (
@@ -425,6 +426,7 @@ export const WatchProviderSelector = ({
                           height: '100%',
                           objectFit: 'cover',
                         }}
+                        fill
                         className="rounded-lg"
                       />
                       {isActive && (
diff --git a/src/components/Setup/index.tsx b/src/components/Setup/index.tsx
index cb2bce84..22b98adb 100644
--- a/src/components/Setup/index.tsx
+++ b/src/components/Setup/index.tsx
@@ -82,6 +82,7 @@ const Setup = () => {
           src="/logo_stacked.svg"
           className="mb-10 max-w-full sm:mx-auto sm:max-w-md"
           alt="Logo"
+          fill
         />
         <AppDataWarning />
         <nav className="relative z-50">
diff --git a/src/components/TvDetails/Season/index.tsx b/src/components/TvDetails/Season/index.tsx
index cf7ba6f0..05c5be3a 100644
--- a/src/components/TvDetails/Season/index.tsx
+++ b/src/components/TvDetails/Season/index.tsx
@@ -59,6 +59,7 @@ const Season = ({ seasonNumber, tvId }: SeasonProps) => {
                     className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
                     src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
                     alt=""
+                    fill
                   />
                 )}
               </div>
diff --git a/src/components/UserList/JellyfinImportModal.tsx b/src/components/UserList/JellyfinImportModal.tsx
index 7c62158e..ea975eba 100644
--- a/src/components/UserList/JellyfinImportModal.tsx
+++ b/src/components/UserList/JellyfinImportModal.tsx
@@ -241,6 +241,8 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                                 className="h-10 w-10 flex-shrink-0 rounded-full"
                                 src={user.thumb}
                                 alt=""
+                                width={40}
+                                height={40}
                               />
                               <div className="ml-4">
                                 <div className="text-base font-bold leading-5">
diff --git a/src/components/UserList/PlexImportModal.tsx b/src/components/UserList/PlexImportModal.tsx
index 05be6e86..ae3293b9 100644
--- a/src/components/UserList/PlexImportModal.tsx
+++ b/src/components/UserList/PlexImportModal.tsx
@@ -205,6 +205,8 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
                                 className="h-10 w-10 flex-shrink-0 rounded-full"
                                 src={user.thumb}
                                 alt=""
+                                width={40}
+                                height={40}
                               />
                               <div className="ml-4">
                                 <div className="text-base font-bold leading-5">
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index 1ccb51d5..60ae5a0c 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -618,6 +618,8 @@ const UserList = () => {
                       className="h-10 w-10 rounded-full object-cover"
                       src={user.avatar}
                       alt=""
+                      width={40}
+                      height={40}
                     />
                   </Link>
                   <div className="ml-4">
diff --git a/src/components/UserProfile/ProfileHeader/index.tsx b/src/components/UserProfile/ProfileHeader/index.tsx
index 1d935ec5..540a7961 100644
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -45,6 +45,8 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
               className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
               src={user.avatar}
               alt=""
+              width={96}
+              height={96}
             />
             <span
               className="absolute inset-0 rounded-full shadow-inner"