diff --git a/.eslintrc.js b/.eslintrc.js
index ec557070..053f6252 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -45,8 +45,10 @@ module.exports = {
   overrides: [
     {
       files: ['**/*.tsx'],
+      plugins: ['react'],
       rules: {
         'react/prop-types': 'off',
+        'react/self-closing-comp': 'error',
       },
     },
   ],
diff --git a/src/components/Common/SlideCheckbox/index.tsx b/src/components/Common/SlideCheckbox/index.tsx
index 320dd667..49ce4391 100644
--- a/src/components/Common/SlideCheckbox/index.tsx
+++ b/src/components/Common/SlideCheckbox/index.tsx
@@ -24,13 +24,13 @@ const SlideCheckbox = ({ onClick, checked = false }: SlideCheckboxProps) => {
         className={`${
           checked ? 'bg-indigo-500' : 'bg-gray-700'
         } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-      ></span>
+      />
       <span
         aria-hidden="true"
         className={`${
           checked ? 'translate-x-5' : 'translate-x-0'
         } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-      ></span>
+      />
     </span>
   );
 };
diff --git a/src/components/Discover/CreateSlider/index.tsx b/src/components/Discover/CreateSlider/index.tsx
index 9c7493d2..e7162de2 100644
--- a/src/components/Discover/CreateSlider/index.tsx
+++ b/src/components/Discover/CreateSlider/index.tsx
@@ -508,7 +508,7 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
                 typeof errors.data === 'string' && (
                   <div className="error">{errors.data}</div>
                 )}
-              <div className="flex-1"></div>
+              <div className="flex-1" />
               {resultCount === 0 ? (
                 <Tooltip content={intl.formatMessage(messages.needresults)}>
                   <div>
diff --git a/src/components/GenreCard/index.tsx b/src/components/GenreCard/index.tsx
index eb821eeb..e5844806 100644
--- a/src/components/GenreCard/index.tsx
+++ b/src/components/GenreCard/index.tsx
@@ -58,7 +58,7 @@ const GenreCardPlaceholder = () => {
   return (
     <div
       className={`relative h-32 w-56 animate-pulse rounded-xl bg-gray-700 sm:h-40 sm:w-72`}
-    ></div>
+    />
   );
 };
 
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index 7bf9c4fb..1df32ac9 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -163,7 +163,7 @@ const Sidebar = ({
               leaveTo="opacity-0"
             >
               <div className="fixed inset-0">
-                <div className="absolute inset-0 bg-gray-900 opacity-90"></div>
+                <div className="absolute inset-0 bg-gray-900 opacity-90" />
               </div>
             </Transition.Child>
             <Transition.Child
diff --git a/src/components/Login/JellyfinLogin.tsx b/src/components/Login/JellyfinLogin.tsx
index 7ff7b1f2..41fc9b6e 100644
--- a/src/components/Login/JellyfinLogin.tsx
+++ b/src/components/Login/JellyfinLogin.tsx
@@ -154,7 +154,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                       {errors.password && touched.password && (
                         <div className="error">{errors.password}</div>
                       )}
-                      <div className="flex-grow"></div>
+                      <div className="flex-grow" />
                       {baseUrl && (
                         <a
                           href={
diff --git a/src/components/Login/LocalLogin.tsx b/src/components/Login/LocalLogin.tsx
index a2810691..e24418cd 100644
--- a/src/components/Login/LocalLogin.tsx
+++ b/src/components/Login/LocalLogin.tsx
@@ -120,7 +120,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                       typeof errors.password === 'string' && (
                         <div className="error">{errors.password}</div>
                       )}
-                    <div className="flex-grow"></div>
+                    <div className="flex-grow" />
                     {passwordResetEnabled && (
                       <Link
                         href="/resetpassword"
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index 68637f47..479becdc 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -241,11 +241,11 @@ const Login = () => {
               {additionalLoginOptions.length > 0 &&
                 (loginFormVisible ? (
                   <div className="flex items-center py-5">
-                    <div className="flex-grow border-t border-gray-600"></div>
+                    <div className="flex-grow border-t border-gray-600" />
                     <span className="mx-2 flex-shrink text-sm text-gray-400">
                       {intl.formatMessage(messages.orsigninwith)}
                     </span>
-                    <div className="flex-grow border-t border-gray-600"></div>
+                    <div className="flex-grow border-t border-gray-600" />
                   </div>
                 ) : (
                   <h2 className="mb-6 text-center text-lg font-bold text-neutral-200">
diff --git a/src/components/RequestModal/CollectionRequestModal.tsx b/src/components/RequestModal/CollectionRequestModal.tsx
index 0af8f7ca..33829cdc 100644
--- a/src/components/RequestModal/CollectionRequestModal.tsx
+++ b/src/components/RequestModal/CollectionRequestModal.tsx
@@ -340,13 +340,13 @@ const CollectionRequestModal = ({
                           className={`${
                             isAllParts() ? 'bg-indigo-500' : 'bg-gray-800'
                           } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                        ></span>
+                        />
                         <span
                           aria-hidden="true"
                           className={`${
                             isAllParts() ? 'translate-x-5' : 'translate-x-0'
                           } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                        ></span>
+                        />
                       </span>
                     </th>
                     <th className="bg-gray-700 bg-opacity-80 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
@@ -423,7 +423,7 @@ const CollectionRequestModal = ({
                                     ? 'bg-indigo-500'
                                     : 'bg-gray-700'
                                 } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                              ></span>
+                              />
                               <span
                                 aria-hidden="true"
                                 className={`${
@@ -435,7 +435,7 @@ const CollectionRequestModal = ({
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
                                 } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                              ></span>
+                              />
                             </span>
                           </td>
                           <td
diff --git a/src/components/RequestModal/TvRequestModal.tsx b/src/components/RequestModal/TvRequestModal.tsx
index 0a649585..0352da18 100644
--- a/src/components/RequestModal/TvRequestModal.tsx
+++ b/src/components/RequestModal/TvRequestModal.tsx
@@ -557,13 +557,13 @@ const TvRequestModal = ({
                           className={`${
                             isAllSeasons() ? 'bg-indigo-500' : 'bg-gray-800'
                           } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                        ></span>
+                        />
                         <span
                           aria-hidden="true"
                           className={`${
                             isAllSeasons() ? 'translate-x-5' : 'translate-x-0'
                           } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                        ></span>
+                        />
                       </span>
                     </th>
                     <th className="bg-gray-700 bg-opacity-80 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
@@ -649,7 +649,7 @@ const TvRequestModal = ({
                                     ? 'bg-indigo-500'
                                     : 'bg-gray-700'
                                 } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                              ></span>
+                              />
                               <span
                                 aria-hidden="true"
                                 className={`${
@@ -662,7 +662,7 @@ const TvRequestModal = ({
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
                                 } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                              ></span>
+                              />
                             </span>
                           </td>
                           <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
diff --git a/src/components/Settings/SettingsJobsCache/index.tsx b/src/components/Settings/SettingsJobsCache/index.tsx
index 2688a959..977fdade 100644
--- a/src/components/Settings/SettingsJobsCache/index.tsx
+++ b/src/components/Settings/SettingsJobsCache/index.tsx
@@ -495,7 +495,7 @@ const SettingsJobs = () => {
               <Table.TH>{intl.formatMessage(messages.jobname)}</Table.TH>
               <Table.TH>{intl.formatMessage(messages.jobtype)}</Table.TH>
               <Table.TH>{intl.formatMessage(messages.nextexecution)}</Table.TH>
-              <Table.TH></Table.TH>
+              <Table.TH />
             </tr>
           </thead>
           <Table.TBody>
@@ -578,7 +578,7 @@ const SettingsJobs = () => {
               <Table.TH>{intl.formatMessage(messages.cachekeys)}</Table.TH>
               <Table.TH>{intl.formatMessage(messages.cacheksize)}</Table.TH>
               <Table.TH>{intl.formatMessage(messages.cachevsize)}</Table.TH>
-              <Table.TH></Table.TH>
+              <Table.TH />
             </tr>
           </thead>
           <Table.TBody>
@@ -639,7 +639,7 @@ const SettingsJobs = () => {
                   <Table.TH>
                     {intl.formatMessage(messages.dnscacheage)}
                   </Table.TH>
-                  <Table.TH></Table.TH>
+                  <Table.TH />
                 </tr>
               </thead>
               <Table.TBody>
diff --git a/src/components/Settings/SettingsLogs/index.tsx b/src/components/Settings/SettingsLogs/index.tsx
index dbda869b..a1033e39 100644
--- a/src/components/Settings/SettingsLogs/index.tsx
+++ b/src/components/Settings/SettingsLogs/index.tsx
@@ -314,7 +314,7 @@ const SettingsLogs = () => {
               <Table.TH>{intl.formatMessage(messages.level)}</Table.TH>
               <Table.TH>{intl.formatMessage(messages.label)}</Table.TH>
               <Table.TH>{intl.formatMessage(messages.message)}</Table.TH>
-              <Table.TH></Table.TH>
+              <Table.TH />
             </tr>
           </thead>
           <Table.TBody>
diff --git a/src/components/UserList/JellyfinImportModal.tsx b/src/components/UserList/JellyfinImportModal.tsx
index 738d17e5..1b2b87e0 100644
--- a/src/components/UserList/JellyfinImportModal.tsx
+++ b/src/components/UserList/JellyfinImportModal.tsx
@@ -186,13 +186,13 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                               className={`${
                                 isAllUsers() ? 'bg-indigo-500' : 'bg-gray-800'
                               } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                            ></span>
+                            />
                             <span
                               aria-hidden="true"
                               className={`${
                                 isAllUsers() ? 'translate-x-5' : 'translate-x-0'
                               } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                            ></span>
+                            />
                           </span>
                         </th>
                         <th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
@@ -230,7 +230,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                                       ? 'bg-indigo-500'
                                       : 'bg-gray-800'
                                   } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                                ></span>
+                                />
                                 <span
                                   aria-hidden="true"
                                   className={`${
@@ -238,7 +238,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                                       ? 'translate-x-5'
                                       : 'translate-x-0'
                                   } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                                ></span>
+                                />
                               </span>
                             </td>
                             <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
diff --git a/src/components/UserList/PlexImportModal.tsx b/src/components/UserList/PlexImportModal.tsx
index fcf5441b..933caf29 100644
--- a/src/components/UserList/PlexImportModal.tsx
+++ b/src/components/UserList/PlexImportModal.tsx
@@ -152,13 +152,13 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
                               className={`${
                                 isAllUsers() ? 'bg-indigo-500' : 'bg-gray-800'
                               } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                            ></span>
+                            />
                             <span
                               aria-hidden="true"
                               className={`${
                                 isAllUsers() ? 'translate-x-5' : 'translate-x-0'
                               } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                            ></span>
+                            />
                           </span>
                         </th>
                         <th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
@@ -189,7 +189,7 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
                                     ? 'bg-indigo-500'
                                     : 'bg-gray-800'
                                 } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                              ></span>
+                              />
                               <span
                                 aria-hidden="true"
                                 className={`${
@@ -197,7 +197,7 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
                                 } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                              ></span>
+                              />
                             </span>
                           </td>
                           <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
diff --git a/src/components/UserProfile/ProfileHeader/index.tsx b/src/components/UserProfile/ProfileHeader/index.tsx
index faebc0ad..9ec1fdf7 100644
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -53,7 +53,7 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
             <span
               className="absolute inset-0 rounded-full shadow-inner"
               aria-hidden="true"
-            ></span>
+            />
           </div>
         </div>
         <div className="pt-1.5">
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 9fe3661e..78641050 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -206,7 +206,7 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
                   <meta
                     name="viewport"
                     content="initial-scale=1, viewport-fit=cover, width=device-width"
-                  ></meta>
+                  />
                   <PWAHeader
                     applicationTitle={currentSettings.applicationTitle}
                   />