diff --git a/.eslintrc.js b/.eslintrc.js
index 5af484c53..d7e60f069 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,9 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
     'plugin:jsx-a11y/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/jsx-runtime',
+    'plugin:@next/next/recommended',
     'prettier',
   ],
   parserOptions: {
diff --git a/src/components/Common/Accordion/index.tsx b/src/components/Common/Accordion/index.tsx
index 49187bd03..0b434209a 100644
--- a/src/components/Common/Accordion/index.tsx
+++ b/src/components/Common/Accordion/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import { useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 
diff --git a/src/components/Discover/DiscoverNetwork/index.tsx b/src/components/Discover/DiscoverNetwork/index.tsx
index f09fef378..f02ccedd9 100644
--- a/src/components/Discover/DiscoverNetwork/index.tsx
+++ b/src/components/Discover/DiscoverNetwork/index.tsx
@@ -6,6 +6,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import type { TvNetwork } from '@server/models/common';
 import type { TvResult } from '@server/models/Search';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -47,7 +48,7 @@ const DiscoverTvNetwork = () => {
         <Header>
           {firstResultData?.network.logoPath ? (
             <div className="mb-6 flex justify-center">
-              <img
+              <Image
                 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"
diff --git a/src/components/Discover/DiscoverStudio/index.tsx b/src/components/Discover/DiscoverStudio/index.tsx
index 1d78748ba..f11765d61 100644
--- a/src/components/Discover/DiscoverStudio/index.tsx
+++ b/src/components/Discover/DiscoverStudio/index.tsx
@@ -6,6 +6,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import type { ProductionCompany } from '@server/models/common';
 import type { MovieResult } from '@server/models/Search';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -47,7 +48,7 @@ const DiscoverMovieStudio = () => {
         <Header>
           {firstResultData?.studio.logoPath ? (
             <div className="mb-6 flex justify-center">
-              <img
+              <Image
                 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"
diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx
index 7ef788ec9..dc1ba1069 100644
--- a/src/components/IssueDetails/IssueComment/index.tsx
+++ b/src/components/IssueDetails/IssueComment/index.tsx
@@ -6,6 +6,7 @@ import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
 import type { default as IssueCommentType } from '@server/entity/IssueComment';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
+import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
@@ -84,7 +85,7 @@ const IssueComment = ({
         </Modal>
       </Transition>
       <Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
-        <img
+        <Image
           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"
diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx
index ad1d137f6..9464c1a15 100644
--- a/src/components/IssueDetails/index.tsx
+++ b/src/components/IssueDetails/index.tsx
@@ -29,6 +29,7 @@ import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -277,7 +278,7 @@ const IssueDetails = () => {
                   }
                   className="group ml-1 inline-flex h-full items-center xl:ml-1.5"
                 >
-                  <img
+                  <Image
                     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=""
diff --git a/src/components/IssueList/IssueItem/index.tsx b/src/components/IssueList/IssueItem/index.tsx
index 238005862..66b57d0a9 100644
--- a/src/components/IssueList/IssueItem/index.tsx
+++ b/src/components/IssueList/IssueItem/index.tsx
@@ -10,6 +10,7 @@ import { MediaType } from '@server/constants/media';
 import type Issue from '@server/entity/Issue';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useInView } from 'react-intersection-observer';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
@@ -224,7 +225,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
                         href={`/users/${issue.createdBy.id}`}
                         className="group flex items-center truncate"
                       >
-                        <img
+                        <Image
                           src={issue.createdBy.avatar}
                           alt=""
                           className="avatar-sm ml-1.5 object-cover"
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index cfafca389..e2f608071 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -13,6 +13,7 @@ import {
   UsersIcon,
   XMarkIcon,
 } from '@heroicons/react/24/outline';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useRef } from 'react';
@@ -150,9 +151,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                   >
                     <div className="flex flex-shrink-0 items-center px-2">
                       <span className="px-4 text-xl text-gray-50">
-                        <a href="/">
-                          <img src="/logo_full.svg" alt="Logo" />
-                        </a>
+                        <Link href="/">
+                          <Image src="/logo_full.svg" alt="Logo" />
+                        </Link>
                       </span>
                     </div>
                     <nav className="mt-16 flex-1 space-y-4 px-4">
@@ -219,9 +220,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
             <div className="flex flex-1 flex-col overflow-y-auto pt-8 pb-4">
               <div className="flex flex-shrink-0 items-center">
                 <span className="px-4 text-2xl text-gray-50">
-                  <a href="/">
-                    <img src="/logo_full.svg" alt="Logo" />
-                  </a>
+                  <Link href="/">
+                    <Image src="/logo_full.svg" alt="Logo" />
+                  </Link>
                 </span>
               </div>
               <nav className="mt-16 flex-1 space-y-4 px-4">
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx
index a8608aa98..9e5c517a0 100644
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -7,6 +7,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
+import Image from 'next/image';
 import type { LinkProps } from 'next/link';
 import Link from 'next/link';
 import { forwardRef, Fragment } from 'react';
@@ -51,9 +52,9 @@ const UserDropdown = () => {
           className="flex max-w-xs items-center rounded-full text-sm ring-1 ring-gray-700 hover:ring-gray-500 focus:outline-none focus:ring-gray-500"
           data-testid="user-menu"
         >
-          <img
+          <Image
             className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-            src={user?.avatar}
+            src={user?.avatar || ''}
             alt=""
           />
         </Menu.Button>
@@ -72,9 +73,9 @@ const UserDropdown = () => {
           <div className="divide-y divide-gray-700 rounded-md bg-gray-800 bg-opacity-80 ring-1 ring-gray-700 backdrop-blur">
             <div className="flex flex-col space-y-4 px-4 py-4">
               <div className="flex items-center space-x-2">
-                <img
+                <Image
                   className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-                  src={user?.avatar}
+                  src={user?.avatar || ''}
                   alt=""
                 />
                 <div className="flex min-w-0 flex-col">
diff --git a/src/components/Layout/UserWarnings/index.tsx b/src/components/Layout/UserWarnings/index.tsx
index f21f01aff..051809915 100644
--- a/src/components/Layout/UserWarnings/index.tsx
+++ b/src/components/Layout/UserWarnings/index.tsx
@@ -1,7 +1,6 @@
 import { useUser } from '@app/hooks/useUser';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
-import type React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
diff --git a/src/components/Login/AddEmailModal.tsx b/src/components/Login/AddEmailModal.tsx
index 01bc81234..2ad55a72d 100644
--- a/src/components/Login/AddEmailModal.tsx
+++ b/src/components/Login/AddEmailModal.tsx
@@ -3,7 +3,6 @@ import useSettings from '@app/hooks/useSettings';
 import { Transition } from '@headlessui/react';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
-import type React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 
diff --git a/src/components/Login/JellyfinLogin.tsx b/src/components/Login/JellyfinLogin.tsx
index d3945be54..a2f85f81a 100644
--- a/src/components/Login/JellyfinLogin.tsx
+++ b/src/components/Login/JellyfinLogin.tsx
@@ -6,7 +6,6 @@ import { ApiErrorCode } from '@server/constants/error';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
-import type React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import * as Yup from 'yup';
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index da4344efe..744eb4df2 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -12,6 +12,7 @@ import { MediaServerType } from '@server/constants/server';
 import axios from 'axios';
 import getConfig from 'next/config';
 import { useRouter } from 'next/dist/client/router';
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
@@ -86,7 +87,11 @@ const Login = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo_stacked.svg" className="mb-10 max-w-full" alt="Logo" />
+        <Image
+          src="/logo_stacked.svg"
+          className="mb-10 max-w-full"
+          alt="Logo"
+        />
         <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.signinheader)}
         </h2>
diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx
index eacfdfd4f..5e8cc2ce6 100644
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -27,6 +27,7 @@ import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
 import getConfig from 'next/config';
+import Image from 'next/image';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
@@ -334,7 +335,7 @@ const ManageSlideOver = ({
                                     key={`watch-user-${user.id}`}
                                     content={user.displayName}
                                   >
-                                    <img
+                                    <Image
                                       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"
@@ -493,7 +494,7 @@ const ManageSlideOver = ({
                                     key={`watch-user-${user.id}`}
                                     content={user.displayName}
                                   >
-                                    <img
+                                    <Image
                                       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"
diff --git a/src/components/MediaSlider/ShowMoreCard/index.tsx b/src/components/MediaSlider/ShowMoreCard/index.tsx
index 7691653a7..b552fbc28 100644
--- a/src/components/MediaSlider/ShowMoreCard/index.tsx
+++ b/src/components/MediaSlider/ShowMoreCard/index.tsx
@@ -1,5 +1,6 @@
 import TitleCard from '@app/components/TitleCard';
 import { ArrowRightCircleIcon } from '@heroicons/react/24/solid';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -58,7 +59,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
             <div className="relative z-10 flex h-full flex-wrap items-center justify-center opacity-30">
               {posters[0] && (
                 <div className="w-1/2 p-1">
-                  <img
+                  <Image
                     src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[0]}`}
                     alt=""
                     className="w-full rounded-md"
@@ -67,7 +68,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
               )}
               {posters[1] && (
                 <div className="w-1/2 p-1">
-                  <img
+                  <Image
                     src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[1]}`}
                     alt=""
                     className="w-full rounded-md"
@@ -76,7 +77,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
               )}
               {posters[2] && (
                 <div className="w-1/2 p-1">
-                  <img
+                  <Image
                     src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[2]}`}
                     alt=""
                     className="w-full rounded-md"
@@ -85,7 +86,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
               )}
               {posters[3] && (
                 <div className="w-1/2 p-1">
-                  <img
+                  <Image
                     src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[3]}`}
                     alt=""
                     className="w-full rounded-md"
diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx
index f485359d1..395e32010 100644
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -21,6 +21,7 @@ import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -110,7 +111,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                       href={`/users/${requestData.requestedBy.id}`}
                       className="group flex items-center"
                     >
-                      <img
+                      <Image
                         src={requestData.requestedBy.avatar}
                         alt=""
                         className="avatar-sm"
@@ -366,7 +367,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                 href={`/users/${requestData.requestedBy.id}`}
                 className="group flex items-center"
               >
-                <img
+                <Image
                   src={requestData.requestedBy.avatar}
                   alt=""
                   className="avatar-sm object-cover"
diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index 037e8965a..a80bb2735 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -20,6 +20,7 @@ import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -183,7 +184,7 @@ const RequestItemError = ({
                             href={`/users/${requestData.requestedBy.id}`}
                             className="group flex items-center truncate"
                           >
-                            <img
+                            <Image
                               src={requestData.requestedBy.avatar}
                               alt=""
                               className="avatar-sm ml-1.5"
@@ -238,7 +239,7 @@ const RequestItemError = ({
                           href={`/users/${requestData.modifiedBy.id}`}
                           className="group flex items-center truncate"
                         >
-                          <img
+                          <Image
                             src={requestData.modifiedBy.avatar}
                             alt=""
                             className="avatar-sm ml-1.5"
@@ -531,7 +532,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                           href={`/users/${requestData.requestedBy.id}`}
                           className="group flex items-center truncate"
                         >
-                          <img
+                          <Image
                             src={requestData.requestedBy.avatar}
                             alt=""
                             className="avatar-sm ml-1.5 object-cover"
@@ -586,7 +587,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                         href={`/users/${requestData.modifiedBy.id}`}
                         className="group flex items-center truncate"
                       >
-                        <img
+                        <Image
                           src={requestData.modifiedBy.avatar}
                           alt=""
                           className="avatar-sm ml-1.5 object-cover"
diff --git a/src/components/RequestModal/AdvancedRequester/index.tsx b/src/components/RequestModal/AdvancedRequester/index.tsx
index 4f5bb9ac6..bc4556d0f 100644
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -13,6 +13,7 @@ import type {
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
 import { isEqual } from 'lodash';
+import Image from 'next/image';
 import { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import Select from 'react-select';
@@ -559,7 +560,7 @@ const AdvancedRequester = ({
                     <span className="inline-block w-full rounded-md shadow-sm">
                       <Listbox.Button className="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-700 bg-gray-800 py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
                         <span className="flex items-center">
-                          <img
+                          <Image
                             src={selectedUser.avatar}
                             alt=""
                             className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
@@ -609,7 +610,7 @@ const AdvancedRequester = ({
                                     selected ? 'font-semibold' : 'font-normal'
                                   } flex items-center`}
                                 >
-                                  <img
+                                  <Image
                                     src={user.avatar}
                                     alt=""
                                     className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
diff --git a/src/components/RequestModal/SearchByNameModal/index.tsx b/src/components/RequestModal/SearchByNameModal/index.tsx
index 0c42017e2..2b4e36e33 100644
--- a/src/components/RequestModal/SearchByNameModal/index.tsx
+++ b/src/components/RequestModal/SearchByNameModal/index.tsx
@@ -2,6 +2,7 @@ import Alert from '@app/components/Common/Alert';
 import Modal from '@app/components/Common/Modal';
 import globalMessages from '@app/i18n/globalMessages';
 import type { SonarrSeries } from '@server/api/servarr/sonarr';
+import Image from 'next/image';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 
@@ -87,7 +88,7 @@ const SearchByNameModal = ({
               } `}
             >
               <div className="flex w-24 flex-none items-center space-x-4">
-                <img
+                <Image
                   src={
                     item.remotePoster ??
                     '/images/overseerr_poster_not_found.png'
diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx
index 35eb8bf96..34f102b41 100644
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -5,6 +5,7 @@ import LanguagePicker from '@app/components/Layout/LanguagePicker';
 import { ArrowLeftIcon, EnvelopeIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -49,7 +50,11 @@ const ResetPassword = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo_stacked.svg" className="mb-10 max-w-full" alt="Logo" />
+        <Image
+          src="/logo_stacked.svg"
+          className="mb-10 max-w-full"
+          alt="Logo"
+        />
         <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
         </h2>
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx
index eaed8156c..c5b42d24a 100644
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -6,6 +6,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import { LifebuoyIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -64,7 +65,11 @@ const ResetPassword = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo_stacked.svg" className="mb-10 max-w-full" alt="Logo" />
+        <Image
+          src="/logo_stacked.svg"
+          className="mb-10 max-w-full"
+          alt="Logo"
+        />
         <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
         </h2>
diff --git a/src/components/Settings/SettingsJellyfin.tsx b/src/components/Settings/SettingsJellyfin.tsx
index 6480a0fae..f02652b98 100644
--- a/src/components/Settings/SettingsJellyfin.tsx
+++ b/src/components/Settings/SettingsJellyfin.tsx
@@ -9,7 +9,6 @@ import type { JellyfinSettings } from '@server/lib/settings';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
 import getConfig from 'next/config';
-import type React from 'react';
 import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
diff --git a/src/components/Settings/SettingsLayout.tsx b/src/components/Settings/SettingsLayout.tsx
index cddc35ef6..88368e3ee 100644
--- a/src/components/Settings/SettingsLayout.tsx
+++ b/src/components/Settings/SettingsLayout.tsx
@@ -5,7 +5,6 @@ import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import { MediaServerType } from '@server/constants/server';
 import getConfig from 'next/config';
-import type React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
diff --git a/src/components/Setup/SetupLogin.tsx b/src/components/Setup/SetupLogin.tsx
index 46bf72463..e8716ea53 100644
--- a/src/components/Setup/SetupLogin.tsx
+++ b/src/components/Setup/SetupLogin.tsx
@@ -5,7 +5,6 @@ import { useUser } from '@app/hooks/useUser';
 import { MediaServerType } from '@server/constants/server';
 import axios from 'axios';
 import getConfig from 'next/config';
-import type React from 'react';
 import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
diff --git a/src/components/Setup/index.tsx b/src/components/Setup/index.tsx
index f5d824b21..cb2bce84b 100644
--- a/src/components/Setup/index.tsx
+++ b/src/components/Setup/index.tsx
@@ -11,6 +11,7 @@ import SetupSteps from '@app/components/Setup/SetupSteps';
 import useLocale from '@app/hooks/useLocale';
 import { MediaServerType } from '@server/constants/server';
 import axios from 'axios';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -77,7 +78,7 @@ const Setup = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-4xl">
-        <img
+        <Image
           src="/logo_stacked.svg"
           className="mb-10 max-w-full sm:mx-auto sm:max-w-md"
           alt="Logo"
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 5a5875312..e48284597 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -20,7 +20,6 @@ import type { Watchlist } from '@server/entity/Watchlist';
 import type { MediaType } from '@server/models/Search';
 import axios from 'axios';
 import Link from 'next/link';
-import type React from 'react';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
diff --git a/src/components/TvDetails/Season/index.tsx b/src/components/TvDetails/Season/index.tsx
index 37b18bc06..cf7ba6f0c 100644
--- a/src/components/TvDetails/Season/index.tsx
+++ b/src/components/TvDetails/Season/index.tsx
@@ -1,6 +1,7 @@
 import AirDateBadge from '@app/components/AirDateBadge';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import type { SeasonWithEpisodes } from '@server/models/Tv';
+import Image from 'next/image';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 
@@ -54,7 +55,7 @@ const Season = ({ seasonNumber, tvId }: SeasonProps) => {
                   {episode.overview && <p>{episode.overview}</p>}
                 </div>
                 {episode.stillPath && (
-                  <img
+                  <Image
                     className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
                     src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
                     alt=""
diff --git a/src/components/UserList/JellyfinImportModal.tsx b/src/components/UserList/JellyfinImportModal.tsx
index 5d293e602..7c62158e6 100644
--- a/src/components/UserList/JellyfinImportModal.tsx
+++ b/src/components/UserList/JellyfinImportModal.tsx
@@ -5,7 +5,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import axios from 'axios';
 import getConfig from 'next/config';
-import type React from 'react';
+import Image from 'next/image';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -237,7 +237,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                           </td>
                           <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
                             <div className="flex items-center">
-                              <img
+                              <Image
                                 className="h-10 w-10 flex-shrink-0 rounded-full"
                                 src={user.thumb}
                                 alt=""
diff --git a/src/components/UserList/PlexImportModal.tsx b/src/components/UserList/PlexImportModal.tsx
index 11f643986..05be6e862 100644
--- a/src/components/UserList/PlexImportModal.tsx
+++ b/src/components/UserList/PlexImportModal.tsx
@@ -3,6 +3,7 @@ import Modal from '@app/components/Common/Modal';
 import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import axios from 'axios';
+import Image from 'next/image';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -200,7 +201,7 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
                           </td>
                           <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
                             <div className="flex items-center">
-                              <img
+                              <Image
                                 className="h-10 w-10 flex-shrink-0 rounded-full"
                                 src={user.thumb}
                                 alt=""
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index fef9da638..1ccb51d56 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -29,6 +29,7 @@ import { hasPermission } from '@server/lib/permissions';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -613,7 +614,7 @@ const UserList = () => {
                     href={`/users/${user.id}`}
                     className="h-10 w-10 flex-shrink-0"
                   >
-                    <img
+                    <Image
                       className="h-10 w-10 rounded-full object-cover"
                       src={user.avatar}
                       alt=""
diff --git a/src/components/UserProfile/ProfileHeader/index.tsx b/src/components/UserProfile/ProfileHeader/index.tsx
index 1c9bdba2d..1d935ec5b 100644
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -2,6 +2,7 @@ import Button from '@app/components/Common/Button';
 import type { User } from '@app/hooks/useUser';
 import { Permission, useUser } from '@app/hooks/useUser';
 import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
+import Image from 'next/image';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -40,7 +41,7 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
       <div className="flex items-end justify-items-end space-x-5">
         <div className="flex-shrink-0">
           <div className="relative">
-            <img
+            <Image
               className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
               src={user.avatar}
               alt=""