diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
index 0d6b45a7a..524083c76 100644
--- a/packages/widget/src/App.tsx
+++ b/packages/widget/src/App.tsx
@@ -4,6 +4,7 @@ import { AppProps, AppProvider } from './AppProvider';
import { AppContainer } from './components/AppContainer';
import { Header } from './components/Header';
import { Initializer } from './components/Initializer';
+import { NotFound } from './components/NotFound';
import { MainPage } from './pages/MainPage';
import { SelectTokenPage } from './pages/SelectTokenPage';
import { SelectWalletPage } from './pages/SelectWalletPage';
@@ -48,6 +49,7 @@ export const AppDefault = () => {
element={}
/>
} />
+ } />
diff --git a/packages/widget/src/components/NotFound.tsx b/packages/widget/src/components/NotFound.tsx
new file mode 100644
index 000000000..016bdcb6c
--- /dev/null
+++ b/packages/widget/src/components/NotFound.tsx
@@ -0,0 +1,21 @@
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+export const NotFound: React.FC = () => {
+ const { t } = useTranslation();
+ return (
+
+ {t('tooltip.notFound.title')}
+ {t('tooltip.notFound.text')}
+
+ );
+};
diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
index 3724f837a..e5dcce9ac 100644
--- a/packages/widget/src/i18n/en/translation.json
+++ b/packages/widget/src/i18n/en/translation.json
@@ -145,6 +145,10 @@
"extensionNotFound": "Please make sure that only the {{name}} browser extension is active before choosing this wallet."
},
"tooltip": {
+ "notFound": {
+ "title": "Sorry 🥲",
+ "text": "We couldn't find this page."
+ },
"progressToNextUpdate": "Displayed data will auto-refresh after {{value}} seconds. Click this circle to update manually."
}
}