diff --git a/public/assets/illustrations/working-responsive.png b/public/assets/illustrations/working-responsive.png
new file mode 100644
index 000000000..c1f072414
Binary files /dev/null and b/public/assets/illustrations/working-responsive.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 33ba24cd8..c521bbb22 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,6 +39,7 @@ import MotionLazy from '@src/components/animate/motion-lazy';
 import SnackbarProvider from '@src/components/snackbar/snackbar-provider';
 import { SettingsProvider, SettingsDrawer } from '@src/components/settings';
 import { AuthProvider } from '@src/auth/context/lens';
+import {ResponsiveOverlay} from "@src/components/responsive-overlay";
 
 // ----------------------------------------------------------------------
 
@@ -76,6 +77,7 @@ export default function App() {
                 <SettingsDrawer />
                 <ProgressBar />
                 <Router />
+                <ResponsiveOverlay />
               </SnackbarProvider>
             </MotionLazy>
           </ThemeProvider>
diff --git a/src/components/responsive-overlay/ResponsiveOverlay.tsx b/src/components/responsive-overlay/ResponsiveOverlay.tsx
new file mode 100644
index 000000000..43dc9cc7a
--- /dev/null
+++ b/src/components/responsive-overlay/ResponsiveOverlay.tsx
@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import { Box, Typography } from '@mui/material';
+import Image from "@src/components/image";
+import responsiveImage from '@public/assets/illustrations/working-responsive.png';
+
+const ResponsiveOverlay = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth < 1200);
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  if (!isSmallScreen) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        color: '#fff',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 2000,
+      }}
+    >
+
+      <Image src={responsiveImage} alt="Watchit App" sx={{ width: 350}} />
+      <Box sx={{ m: 4 }} />
+      <Typography variant="h6">Watchit App</Typography>
+      <Typography variant="h6">
+        We are working on making this page responsive.
+      </Typography>
+    </Box>
+  );
+};
+
+export default ResponsiveOverlay;
diff --git a/src/components/responsive-overlay/index.ts b/src/components/responsive-overlay/index.ts
new file mode 100644
index 000000000..fafd0f080
--- /dev/null
+++ b/src/components/responsive-overlay/index.ts
@@ -0,0 +1 @@
+export { default as ResponsiveOverlay } from './ResponsiveOverlay.tsx';
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 8c66e40d2..a3f7efc4c 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -25,6 +25,7 @@
     /* Aliases */
     "paths": {
       "@src/*": ["./src/*"],
+      "@public/*": ["./public/*"],
     }
   },
   "include": ["src"]
diff --git a/vite.config.ts b/vite.config.ts
index 8938ba581..ca0556e5b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,6 +11,7 @@ export default defineConfig(({ mode }) => {
     resolve: {
       alias: {
         '@src': path.resolve(__dirname, 'src'),
+        '@public': path.resolve(__dirname, 'public'),
       },
     },
     define: {