diff --git a/web/apps/photos/src/pages/_app.tsx b/web/apps/photos/src/pages/_app.tsx
index f3435a690c..003165816c 100644
--- a/web/apps/photos/src/pages/_app.tsx
+++ b/web/apps/photos/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+import { WhatsNew } from "@/new/photos/components/WhatsNew";
 import { CustomHead } from "@/next/components/Head";
 import { setupI18n } from "@/next/i18n";
 import log from "@/next/log";
@@ -128,6 +129,8 @@ export default function App({ Component, pageProps }: AppProps) {
     >();
     useState<DialogBoxAttributes>(null);
     const [messageDialogView, setMessageDialogView] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [shouldShowWhatsNew, setShouldShowWhatsNew] = useState(true);
     const [dialogBoxV2View, setDialogBoxV2View] = useState(false);
     const [watchFolderView, setWatchFolderView] = useState(false);
     const [watchFolderFiles, setWatchFolderFiles] = useState<FileList>(null);
@@ -385,6 +388,7 @@ export default function App({ Component, pageProps }: AppProps) {
                     onClose={closeDialogBoxV2}
                     attributes={dialogBoxAttributeV2}
                 />
+                {shouldShowWhatsNew && <WhatsNew />}
                 <Notification
                     open={notificationView}
                     onClose={closeNotification}
diff --git a/web/packages/new/photos/components/WhatsNew.tsx b/web/packages/new/photos/components/WhatsNew.tsx
new file mode 100644
index 0000000000..5432af37ac
--- /dev/null
+++ b/web/packages/new/photos/components/WhatsNew.tsx
@@ -0,0 +1,17 @@
+import { Dialog, styled, useMediaQuery } from "@mui/material";
+import React from "react";
+
+export const WhatsNew: React.FC = () => {
+    const fullScreen = useMediaQuery("(max-width:428px)");
+
+    return (
+        <Dialog open={true} fullScreen={fullScreen}>
+            <Contents>Hello</Contents>
+        </Dialog>
+    );
+};
+
+const Contents = styled("div")`
+    width: 300px;
+    height: 300px;
+`;
diff --git a/web/packages/next/components/Card.tsx b/web/packages/next/components/Card.tsx
index ee19e9f52f..c6602404c0 100644
--- a/web/packages/next/components/Card.tsx
+++ b/web/packages/next/components/Card.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 export const Card: React.FC = () => {
     return <div>Hello</div>;