diff --git a/web/apps/photos/src/components/GalleryEmptyState.tsx b/web/apps/photos/src/components/GalleryEmptyState.tsx
deleted file mode 100644
index f4c7bad76b..0000000000
--- a/web/apps/photos/src/components/GalleryEmptyState.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
-import FolderIcon from "@mui/icons-material/FolderOutlined";
-import { Button, Stack, Typography, styled } from "@mui/material";
-import { EnteLogo } from "ente-base/components/EnteLogo";
-import {
-    FlexWrapper,
-    VerticallyCentered,
-} from "ente-shared/components/Container";
-import { t } from "i18next";
-import { Trans } from "react-i18next";
-import { uploadManager } from "services/upload-manager";
-
-export default function GalleryEmptyState({ openUploader }) {
-    return (
-        <Wrapper>
-            <Stack sx={{ flex: "none", paddingBlock: "12px 32px" }}>
-                <VerticallyCentered sx={{ flex: "none" }}>
-                    <Typography
-                        variant="h3"
-                        sx={{
-                            color: "text.muted",
-                            userSelect: "none",
-                            marginBlockEnd: 1,
-                            svg: {
-                                color: "text.base",
-                                verticalAlign: "middle",
-                                marginBlockEnd: "2px",
-                            },
-                        }}
-                    >
-                        <Trans
-                            i18nKey="welcome_to_ente_title"
-                            components={{ a: <EnteLogo /> }}
-                        />
-                    </Typography>
-                    <Typography variant="h2">
-                        {t("welcome_to_ente_subtitle")}
-                    </Typography>
-                </VerticallyCentered>
-            </Stack>
-            <NonDraggableImage
-                height={287.57}
-                alt=""
-                src="/images/empty-state/ente_duck.png"
-                srcSet="/images/empty-state/ente_duck@2x.png, /images/empty-state/ente_duck@3x.png"
-            />
-            <VerticallyCentered paddingTop={1.5} paddingBottom={1.5}>
-                <Button
-                    style={{
-                        cursor:
-                            !uploadManager.shouldAllowNewUpload() &&
-                            "not-allowed",
-                    }}
-                    color="accent"
-                    onClick={() => openUploader("upload")}
-                    disabled={!uploadManager.shouldAllowNewUpload()}
-                    sx={{ mt: 1.5, p: 1, width: 320, borderRadius: 0.5 }}
-                >
-                    <FlexWrapper sx={{ gap: 1 }} justifyContent="center">
-                        <AddPhotoAlternateIcon />
-                        {t("upload_first_photo")}
-                    </FlexWrapper>
-                </Button>
-                <Button
-                    style={{
-                        cursor:
-                            !uploadManager.shouldAllowNewUpload() &&
-                            "not-allowed",
-                    }}
-                    onClick={() => openUploader("import")}
-                    disabled={!uploadManager.shouldAllowNewUpload()}
-                    sx={{ mt: 1.5, p: 1, width: 320, borderRadius: 0.5 }}
-                >
-                    <FlexWrapper sx={{ gap: 1 }} justifyContent="center">
-                        <FolderIcon />
-                        {t("import_your_folders")}
-                    </FlexWrapper>
-                </Button>
-            </VerticallyCentered>
-        </Wrapper>
-    );
-}
-
-const Wrapper = styled("div")`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-`;
-
-/**
- * Prevent the image from being selected _and_ dragged, since dragging it
- * triggers the our dropdown selector overlay.
- */
-const NonDraggableImage = styled("img")`
-    pointer-events: none;
-    user-select: none;
-`;
diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index 3577abb390..e08b346569 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -14,7 +14,6 @@ import {
     FilesDownloadProgressAttributes,
 } from "components/FilesDownloadProgress";
 import { FixCreationTime } from "components/FixCreationTime";
-import GalleryEmptyState from "components/GalleryEmptyState";
 import { Sidebar } from "components/Sidebar";
 import { Upload, type UploadTypeSelectorIntent } from "components/Upload";
 import SelectedFileOptions from "components/pages/gallery/SelectedFileOptions";
@@ -56,6 +55,7 @@ import {
 } from "ente-new/photos/components/SearchBar";
 import { WhatsNew } from "ente-new/photos/components/WhatsNew";
 import {
+    GalleryEmptyState,
     PeopleEmptyState,
     SearchResultsHeader,
 } from "ente-new/photos/components/gallery";
@@ -1094,7 +1094,10 @@ const Page: React.FC = () => {
                 !normalFiles?.length &&
                 !hiddenFiles?.length &&
                 activeCollectionID === ALL_SECTION ? (
-                    <GalleryEmptyState openUploader={openUploader} />
+                    <GalleryEmptyState
+                        openUploader={openUploader}
+                        shouldAllowNewUpload={uploadManager.shouldAllowNewUpload()}
+                    />
                 ) : !isInSearchMode &&
                   !isFirstLoad &&
                   state.view.type == "people" &&
diff --git a/web/packages/new/photos/components/gallery/index.tsx b/web/packages/new/photos/components/gallery/index.tsx
index 8cd9b0cb68..ee8aad7040 100644
--- a/web/packages/new/photos/components/gallery/index.tsx
+++ b/web/packages/new/photos/components/gallery/index.tsx
@@ -51,6 +51,103 @@ export const SearchResultsHeader: React.FC<SearchResultsHeaderProps> = ({
     </GalleryItemsHeaderAdapter>
 );
 
+import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
+import FolderIcon from "@mui/icons-material/FolderOutlined";
+import { Button, styled } from "@mui/material";
+import { EnteLogo } from "ente-base/components/EnteLogo";
+import {
+    FlexWrapper,
+    VerticallyCentered,
+} from "ente-shared/components/Container";
+import { Trans } from "react-i18next";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export function GalleryEmptyState({ openUploader, shouldAllowNewUpload }) {
+    return (
+        <Wrapper>
+            <Stack sx={{ flex: "none", paddingBlock: "12px 32px" }}>
+                <VerticallyCentered sx={{ flex: "none" }}>
+                    <Typography
+                        variant="h3"
+                        sx={{
+                            color: "text.muted",
+                            userSelect: "none",
+                            marginBlockEnd: 1,
+                            svg: {
+                                color: "text.base",
+                                verticalAlign: "middle",
+                                marginBlockEnd: "2px",
+                            },
+                        }}
+                    >
+                        <Trans
+                            i18nKey="welcome_to_ente_title"
+                            components={{ a: <EnteLogo /> }}
+                        />
+                    </Typography>
+                    <Typography variant="h2">
+                        {t("welcome_to_ente_subtitle")}
+                    </Typography>
+                </VerticallyCentered>
+            </Stack>
+            <NonDraggableImage
+                height={287.57}
+                alt=""
+                src="/images/empty-state/ente_duck.png"
+                srcSet="/images/empty-state/ente_duck@2x.png, /images/empty-state/ente_duck@3x.png"
+            />
+            <VerticallyCentered paddingTop={1.5} paddingBottom={1.5}>
+                <Button
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    style={{ cursor: !shouldAllowNewUpload && "not-allowed" }}
+                    color="accent"
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
+                    onClick={() => openUploader("upload")}
+                    disabled={!shouldAllowNewUpload}
+                    sx={{ mt: 1.5, p: 1, width: 320, borderRadius: 0.5 }}
+                >
+                    <FlexWrapper sx={{ gap: 1 }} justifyContent="center">
+                        <AddPhotoAlternateIcon />
+                        {t("upload_first_photo")}
+                    </FlexWrapper>
+                </Button>
+                <Button
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    style={{ cursor: !shouldAllowNewUpload && "not-allowed" }}
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
+                    onClick={() => openUploader("import")}
+                    disabled={!shouldAllowNewUpload}
+                    sx={{ mt: 1.5, p: 1, width: 320, borderRadius: 0.5 }}
+                >
+                    <FlexWrapper sx={{ gap: 1 }} justifyContent="center">
+                        <FolderIcon />
+                        {t("import_your_folders")}
+                    </FlexWrapper>
+                </Button>
+            </VerticallyCentered>
+        </Wrapper>
+    );
+}
+
+const Wrapper = styled("div")`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+`;
+
+/**
+ * Prevent the image from being selected _and_ dragged, since dragging it
+ * triggers the our dropdown selector overlay.
+ */
+const NonDraggableImage = styled("img")`
+    pointer-events: none;
+    user-select: none;
+`;
+
 export const PeopleEmptyState: React.FC = () => {
     const mlStatus = useMLStatusSnapshot();