diff --git a/src/components/MangaGrid.tsx b/src/components/MangaGrid.tsx
index 80755082..43cde7af 100644
--- a/src/components/MangaGrid.tsx
+++ b/src/components/MangaGrid.tsx
@@ -11,7 +11,7 @@ import Grid, { GridTypeMap } from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import { GridItemProps, GridStateSnapshot, VirtuosoGrid } from 'react-virtuoso';
 import { useLocation } from 'react-router-dom';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { MangaCard } from '@/components/MangaCard';
 import { GridLayout } from '@/components/context/LibraryOptionsContext';
@@ -213,7 +213,7 @@ const VerticalGrid = forwardRef(
 
 export interface IMangaGridProps
     extends Omit<DefaultGridProps, 'GridItemContainer'>,
-        Partial<React.ComponentProps<typeof EmptyView>> {
+        Partial<React.ComponentProps<typeof EmptyViewAbsoluteCentered>> {
     hasNextPage: boolean;
     loadMore: () => void;
     horizontal?: boolean | undefined;
@@ -314,7 +314,9 @@ export const MangaGrid: React.FC<IMangaGridProps> = (props) => {
 
     const hasNoItems = !isLoading && mangas.length === 0;
     if (hasNoItems) {
-        return <EmptyView noFaces={noFaces} message={message!} messageExtra={messageExtra} retry={retry} />;
+        return (
+            <EmptyViewAbsoluteCentered noFaces={noFaces} message={message!} messageExtra={messageExtra} retry={retry} />
+        );
     }
 
     return (
diff --git a/src/components/chapter/ChapterList.tsx b/src/components/chapter/ChapterList.tsx
index 021e44ae..31d4c033 100644
--- a/src/components/chapter/ChapterList.tsx
+++ b/src/components/chapter/ChapterList.tsx
@@ -24,7 +24,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ChapterCard } from '@/components/chapter/ChapterCard.tsx';
 import { ResumeFab } from '@/components/manga/ResumeFAB.tsx';
 import { filterAndSortChapters, useChapterOptions } from '@/components/chapter/util.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { ChaptersToolbarMenu } from '@/components/chapter/ChaptersToolbarMenu.tsx';
 import { SelectionFAB } from '@/components/collection/SelectionFAB.tsx';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab.tsx';
@@ -149,7 +149,7 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
     if (error) {
         return (
             <Stack sx={{ justifyContent: 'center', position: 'relative', flexGrow: 1 }}>
-                <EmptyView
+                <EmptyViewAbsoluteCentered
                     message={t('global.error.label.failed_to_load_data')}
                     messageExtra={error.message}
                     retry={() => refetch().catch(defaultPromiseErrorHandler('ChapterList::refetch'))}
@@ -214,8 +214,10 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
                     </Stack>
                 </ChapterListHeader>
 
-                {noChaptersFound && <EmptyView message={t('chapter.error.label.no_chapter_found')} />}
-                {noChaptersMatchingFilter && <EmptyView message={t('chapter.error.label.no_matches')} />}
+                {noChaptersFound && <EmptyViewAbsoluteCentered message={t('chapter.error.label.no_chapter_found')} />}
+                {noChaptersMatchingFilter && (
+                    <EmptyViewAbsoluteCentered message={t('chapter.error.label.no_matches')} />
+                )}
 
                 <StyledVirtuoso
                     style={{
diff --git a/src/components/settings/DeviceSetting.tsx b/src/components/settings/DeviceSetting.tsx
index d30720d7..95efe7ae 100644
--- a/src/components/settings/DeviceSetting.tsx
+++ b/src/components/settings/DeviceSetting.tsx
@@ -20,7 +20,7 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
 import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts';
 import { Select } from '@/components/atoms/Select.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 export const DeviceSetting = () => {
@@ -72,7 +72,7 @@ export const DeviceSetting = () => {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('DeviceSetting::refetch'))}
diff --git a/src/components/tracker/TrackManga.tsx b/src/components/tracker/TrackManga.tsx
index f4437808..adb18fb5 100644
--- a/src/components/tracker/TrackManga.tsx
+++ b/src/components/tracker/TrackManga.tsx
@@ -12,7 +12,7 @@ import { useEffect, useMemo, useState } from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 import { Trackers } from '@/lib/data/Trackers.ts';
 import { TrackerCard, TrackerMode } from '@/components/tracker/TrackerCard.tsx';
@@ -81,7 +81,7 @@ export const TrackManga = ({ manga }: { manga: Pick<TManga, 'id' | 'trackRecords
 
     if (trackerList.error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={trackerList.error.message}
                 retry={() => trackerList.refetch().catch(defaultPromiseErrorHandler('TrackManga::refetch'))}
diff --git a/src/components/tracker/TrackerSearch.tsx b/src/components/tracker/TrackerSearch.tsx
index 4aade758..704c584a 100644
--- a/src/components/tracker/TrackerSearch.tsx
+++ b/src/components/tracker/TrackerSearch.tsx
@@ -17,7 +17,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 import { TBaseTracker } from '@/lib/data/Trackers.ts';
 import { SearchTextField } from '@/components/atoms/SearchTextField.tsx';
@@ -108,11 +108,11 @@ export const TrackerSearch = ({
             </DialogTitle>
             <DialogContent dividers sx={{ padding: DIALOG_PADDING, height: '100vh' }}>
                 {!trackerSearch.loading && !trackerSearch.error && !hasResults && (
-                    <EmptyView message={t('manga.error.label.no_mangas_found')} />
+                    <EmptyViewAbsoluteCentered message={t('manga.error.label.no_mangas_found')} />
                 )}
                 {trackerSearch.loading && <LoadingPlaceholder />}
                 {trackerSearch.error && !trackerSearch.loading && (
-                    <EmptyView
+                    <EmptyViewAbsoluteCentered
                         message={t('global.error.label.failed_to_load_data')}
                         messageExtra={trackerSearch.error.message}
                         retry={() =>
diff --git a/src/components/util/EmptyView.tsx b/src/components/util/EmptyViewAbsoluteCentered.tsx
similarity index 93%
rename from src/components/util/EmptyView.tsx
rename to src/components/util/EmptyViewAbsoluteCentered.tsx
index 58d51013..696e662f 100644
--- a/src/components/util/EmptyView.tsx
+++ b/src/components/util/EmptyViewAbsoluteCentered.tsx
@@ -30,7 +30,7 @@ interface IProps {
     noFaces?: boolean;
 }
 
-export function EmptyView({ message, messageExtra, retry, noFaces }: IProps) {
+export function EmptyViewAbsoluteCentered({ message, messageExtra, retry, noFaces }: IProps) {
     const { t } = useTranslation();
     const theme = useTheme();
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
@@ -60,6 +60,6 @@ export function EmptyView({ message, messageExtra, retry, noFaces }: IProps) {
     );
 }
 
-EmptyView.defaultProps = {
+EmptyViewAbsoluteCentered.defaultProps = {
     messageExtra: undefined,
 };
diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx
index 7aa657bd..d05bb6b2 100644
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -27,7 +27,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { StrictModeDroppable } from '@/lib/StrictModeDroppable';
 import { makeToast } from '@/components/util/Toast';
 import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
 import { TChapter } from '@/typings.ts';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
@@ -225,7 +225,7 @@ export const DownloadQueue: React.FC = () => {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadQueue::refetch'))}
@@ -234,7 +234,7 @@ export const DownloadQueue: React.FC = () => {
     }
 
     if (isQueueEmpty) {
-        return <EmptyView message={t('download.queue.label.no_downloads')} />;
+        return <EmptyViewAbsoluteCentered message={t('download.queue.label.no_downloads')} />;
     }
 
     return (
diff --git a/src/screens/Extensions.tsx b/src/screens/Extensions.tsx
index 4da401de..c7c48188 100644
--- a/src/screens/Extensions.tsx
+++ b/src/screens/Extensions.tsx
@@ -39,7 +39,7 @@ import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 import { StyledGroupedVirtuoso } from '@/components/virtuoso/StyledGroupedVirtuoso.tsx';
 import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx';
 import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 const LANGUAGE = 0;
@@ -237,7 +237,7 @@ export function Extensions() {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => fetchExtensions().catch(defaultPromiseErrorHandler('Extensions::refetch'))}
diff --git a/src/screens/Library.tsx b/src/screens/Library.tsx
index 617818ab..2d9516c4 100644
--- a/src/screens/Library.tsx
+++ b/src/screens/Library.tsx
@@ -13,7 +13,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 import { useQueryParam, NumberParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { TabPanel } from '@/components/tabs/TabPanel.tsx';
 import { LibraryToolbarMenu } from '@/components/library/LibraryToolbarMenu';
@@ -195,7 +195,7 @@ export function Library() {
 
     if (tabsError != null) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('category.error.label.request_failure')}
                 messageExtra={tabsError.message}
                 retry={() => refetchCategories().catch(defaultPromiseErrorHandler('Library::refetchCategories'))}
@@ -208,7 +208,7 @@ export function Library() {
     }
 
     if (tabs.length === 0) {
-        return <EmptyView message={t('library.error.label.empty')} />;
+        return <EmptyViewAbsoluteCentered message={t('library.error.label.empty')} />;
     }
 
     if (tabs.length === 1) {
diff --git a/src/screens/Manga.tsx b/src/screens/Manga.tsx
index 60cfc8e6..8ced60c3 100644
--- a/src/screens/Manga.tsx
+++ b/src/screens/Manga.tsx
@@ -22,7 +22,7 @@ import { ChapterList } from '@/components/chapter/ChapterList.tsx';
 import { useRefreshManga } from '@/components/manga/useRefreshManga.ts';
 import { MangaDetails } from '@/components/manga/MangaDetails';
 import { MangaToolbarMenu } from '@/components/manga/MangaToolbarMenu';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 
 export const Manga: React.FC = () => {
@@ -92,7 +92,9 @@ export const Manga: React.FC = () => {
     }, [t, error, isValidating, refreshing, manga, refresh]);
 
     if (error && !manga) {
-        return <EmptyView message={t('manga.error.label.request_failure')} messageExtra={error.message} />;
+        return (
+            <EmptyViewAbsoluteCentered message={t('manga.error.label.request_failure')} messageExtra={error.message} />
+        );
     }
     return (
         <Box sx={{ display: { md: 'flex' }, overflow: 'hidden' }}>
diff --git a/src/screens/Migrate.tsx b/src/screens/Migrate.tsx
index 9ae10e01..0528f1ce 100644
--- a/src/screens/Migrate.tsx
+++ b/src/screens/Migrate.tsx
@@ -14,7 +14,7 @@ import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { TMigratableSource } from '@/components/MigrationCard.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { MangaGrid } from '@/components/MangaGrid.tsx';
 import { TPartialManga } from '@/typings.ts';
 import { GridLayouts } from '@/components/source/GridLayouts.tsx';
@@ -99,7 +99,7 @@ export const Migrate = () => {
     if (hasError) {
         const error = (hasErrorSource ? sourceError : mangasError)!;
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => {
diff --git a/src/screens/Migration.tsx b/src/screens/Migration.tsx
index b34fb822..d67c549b 100644
--- a/src/screens/Migration.tsx
+++ b/src/screens/Migration.tsx
@@ -11,7 +11,7 @@ import { useMemo } from 'react';
 import List from '@mui/material/List';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
 import { MigrationCard, TMigratableSource } from '@/components/MigrationCard.tsx';
 import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
@@ -55,7 +55,7 @@ export const Migration = () => {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('Migration::refetch'))}
diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx
index 8140357b..9894ea69 100644
--- a/src/screens/Reader.tsx
+++ b/src/screens/Reader.tsx
@@ -32,7 +32,7 @@ import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
 import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { Chapters } from '@/lib/data/Chapters.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 
 const getReaderComponent = (readerType: ReaderType) => {
     switch (readerType) {
@@ -434,7 +434,7 @@ export function Reader() {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => {
diff --git a/src/screens/SourceConfigure.tsx b/src/screens/SourceConfigure.tsx
index d3a8f0fe..0accaee5 100644
--- a/src/screens/SourceConfigure.tsx
+++ b/src/screens/SourceConfigure.tsx
@@ -19,7 +19,7 @@ import { MultiSelectListPreference } from '@/components/sourceConfiguration/Mult
 import { PreferenceProps } from '@/typings.ts';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 function getPrefComponent(type: string) {
@@ -71,7 +71,7 @@ export function SourceConfigure() {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('SourceConfigure::refetch'))}
diff --git a/src/screens/Sources.tsx b/src/screens/Sources.tsx
index 4f61eed9..c2334bc6 100644
--- a/src/screens/Sources.tsx
+++ b/src/screens/Sources.tsx
@@ -22,7 +22,7 @@ import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { SourceCard } from '@/components/SourceCard';
 import { LangSelect } from '@/components/navbar/action/LangSelect';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 function sourceToLangList(sources: ISource[]) {
@@ -118,7 +118,7 @@ export function Sources() {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('Sources::refetch'))}
@@ -127,7 +127,7 @@ export function Sources() {
     }
 
     if (sources?.length === 0) {
-        return <EmptyView message={t('source.error.label.no_sources_found')} />;
+        return <EmptyViewAbsoluteCentered message={t('source.error.label.no_sources_found')} />;
     }
 
     return (
diff --git a/src/screens/Updates.tsx b/src/screens/Updates.tsx
index d9a1f533..c34c5dda 100644
--- a/src/screens/Updates.tsx
+++ b/src/screens/Updates.tsx
@@ -21,7 +21,7 @@ import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
 import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
 import { TChapter } from '@/typings.ts';
@@ -137,7 +137,7 @@ export const Updates: React.FC = () => {
     }, [hasNextPage, endCursor]);
 
     if (!isLoading && updateEntries.length === 0) {
-        return <EmptyView message={t('updates.error.label.no_updates_available')} />;
+        return <EmptyViewAbsoluteCentered message={t('updates.error.label.no_updates_available')} />;
     }
 
     return (
diff --git a/src/screens/settings/About.tsx b/src/screens/settings/About.tsx
index bf67c653..37dac4a5 100644
--- a/src/screens/settings/About.tsx
+++ b/src/screens/settings/About.tsx
@@ -28,7 +28,7 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
 import { GetAboutQuery, UpdateState } from '@/lib/graphql/generated/graphql.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 
 type AboutServer = GetAboutQuery['aboutServer'];
 
@@ -242,7 +242,7 @@ export function About() {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('About::refetch'))}
diff --git a/src/screens/settings/Backup.tsx b/src/screens/settings/Backup.tsx
index d07e2423..95d13658 100644
--- a/src/screens/settings/Backup.tsx
+++ b/src/screens/settings/Backup.tsx
@@ -32,7 +32,7 @@ import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { TimeSetting } from '@/components/settings/TimeSetting.tsx';
 import { ServerSettings } from '@/typings.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type BackupSettingsType = Pick<ServerSettings, 'backupPath' | 'backupTime' | 'backupInterval' | 'backupTTL'>;
@@ -231,7 +231,7 @@ export function Backup() {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('Backup::refetch'))}
diff --git a/src/screens/settings/BrowseSettings.tsx b/src/screens/settings/BrowseSettings.tsx
index 9106f05f..6cb3d1db 100644
--- a/src/screens/settings/BrowseSettings.tsx
+++ b/src/screens/settings/BrowseSettings.tsx
@@ -24,7 +24,7 @@ import {
     useMetadataServerSettings,
 } from '@/lib/metadata/metadataServerSettings.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type ExtensionsSettings = Pick<GqlServerSettings, 'maxSourcesInParallel' | 'localSourcePath' | 'extensionRepos'>;
@@ -71,7 +71,7 @@ export const BrowseSettings = () => {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('BrowseSettings::refetch'))}
diff --git a/src/screens/settings/Categories.tsx b/src/screens/settings/Categories.tsx
index e54365b8..9f328000 100644
--- a/src/screens/settings/Categories.tsx
+++ b/src/screens/settings/Categories.tsx
@@ -35,7 +35,7 @@ import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { TCategory } from '@/typings.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 const getItemStyle = (
@@ -144,7 +144,7 @@ export function Categories() {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('category.error.label.request_failure')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('Categories::refetch'))}
diff --git a/src/screens/settings/DefaultReaderSettings.tsx b/src/screens/settings/DefaultReaderSettings.tsx
index d5234f56..f5018581 100644
--- a/src/screens/settings/DefaultReaderSettings.tsx
+++ b/src/screens/settings/DefaultReaderSettings.tsx
@@ -19,7 +19,7 @@ import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions
 import { makeToast } from '@/components/util/Toast';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 export function DefaultReaderSettings() {
@@ -58,7 +58,7 @@ export function DefaultReaderSettings() {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('DefaultReaderSettings::refetch'))}
diff --git a/src/screens/settings/DownloadSettings.tsx b/src/screens/settings/DownloadSettings.tsx
index e5c28b54..2f936c00 100644
--- a/src/screens/settings/DownloadSettings.tsx
+++ b/src/screens/settings/DownloadSettings.tsx
@@ -27,7 +27,7 @@ import { DeleteChaptersWhileReadingSetting } from '@/components/settings/downloa
 import { CategoriesInclusionSetting } from '@/components/settings/CategoriesInclusionSetting.tsx';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type DownloadSettingsType = Pick<
@@ -82,7 +82,7 @@ export const DownloadSettings = () => {
     const error = serverSettings.error ?? metadataServerSettingsError ?? categories.error;
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => {
diff --git a/src/screens/settings/LibrarySettings.tsx b/src/screens/settings/LibrarySettings.tsx
index 9befbc7c..3571af9b 100644
--- a/src/screens/settings/LibrarySettings.tsx
+++ b/src/screens/settings/LibrarySettings.tsx
@@ -25,7 +25,7 @@ import {
 } from '@/lib/metadata/metadataServerSettings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Mangas } from '@/lib/data/Mangas.ts';
-import { EmptyView } from '@/components/util/EmptyView';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
@@ -84,7 +84,7 @@ export function LibrarySettings() {
     const error = serverSettings.error ?? metadataServerSettingsError ?? categories.error;
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => {
diff --git a/src/screens/settings/ServerSettings.tsx b/src/screens/settings/ServerSettings.tsx
index 2167658c..6799609c 100644
--- a/src/screens/settings/ServerSettings.tsx
+++ b/src/screens/settings/ServerSettings.tsx
@@ -22,7 +22,7 @@ import { ServerSettings as GqlServerSettings } from '@/typings.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { SelectSetting } from '@/components/settings/SelectSetting.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type ServerSettingsType = Pick<
@@ -112,7 +112,7 @@ export const ServerSettings = () => {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('ServerSettings::refetch'))}
diff --git a/src/screens/settings/TrackingSettings.tsx b/src/screens/settings/TrackingSettings.tsx
index 5630e594..fba43d6d 100644
--- a/src/screens/settings/TrackingSettings.tsx
+++ b/src/screens/settings/TrackingSettings.tsx
@@ -16,7 +16,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 import { SettingsTrackerCard } from '@/components/tracker/SettingsTrackerCard.tsx';
 import {
@@ -45,7 +45,7 @@ export const TrackingSettings = () => {
     const trackers = data?.trackers.nodes ?? [];
 
     if (error) {
-        return <EmptyView message={error.message} />;
+        return <EmptyViewAbsoluteCentered message={error.message} />;
     }
 
     if (loading) {
diff --git a/src/screens/settings/WebUISettings.tsx b/src/screens/settings/WebUISettings.tsx
index 0c5a61cf..6f1c34f3 100644
--- a/src/screens/settings/WebUISettings.tsx
+++ b/src/screens/settings/WebUISettings.tsx
@@ -24,7 +24,7 @@ import {
 } from '@/components/settings/SelectSetting.tsx';
 import { WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
-import { EmptyView } from '@/components/util/EmptyView.tsx';
+import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 
 type WebUISettingsType = Pick<
@@ -149,7 +149,7 @@ export const WebUISettings = () => {
 
     if (error) {
         return (
-            <EmptyView
+            <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={error.message}
                 retry={() => refetch().catch(defaultPromiseErrorHandler('WebUISettings::refetch'))}