diff --git a/.changeset-staged/violet-cups-relate.md b/.changeset-staged/violet-cups-relate.md
new file mode 100644
index 000000000..8256e3a99
--- /dev/null
+++ b/.changeset-staged/violet-cups-relate.md
@@ -0,0 +1,5 @@
+---
+"@logto/ui": patch
+---
+
+- Add Power By Logto Signature to the main-flow pages
diff --git a/packages/ui/src/assets/icons/empty_state_dark.svg b/packages/ui/src/assets/icons/empty-state-dark.svg
similarity index 100%
rename from packages/ui/src/assets/icons/empty_state_dark.svg
rename to packages/ui/src/assets/icons/empty-state-dark.svg
diff --git a/packages/ui/src/assets/icons/empty_state.svg b/packages/ui/src/assets/icons/empty-state.svg
similarity index 100%
rename from packages/ui/src/assets/icons/empty_state.svg
rename to packages/ui/src/assets/icons/empty-state.svg
diff --git a/packages/ui/src/assets/icons/logto-logo-dark.svg b/packages/ui/src/assets/icons/logto-logo-dark.svg
new file mode 100644
index 000000000..350781a66
--- /dev/null
+++ b/packages/ui/src/assets/icons/logto-logo-dark.svg
@@ -0,0 +1,20 @@
+
diff --git a/packages/ui/src/assets/icons/logto-logo-light.svg b/packages/ui/src/assets/icons/logto-logo-light.svg
new file mode 100644
index 000000000..8c9d08b84
--- /dev/null
+++ b/packages/ui/src/assets/icons/logto-logo-light.svg
@@ -0,0 +1,20 @@
+
diff --git a/packages/ui/src/assets/icons/logto-logo-shadow.svg b/packages/ui/src/assets/icons/logto-logo-shadow.svg
new file mode 100644
index 000000000..cfb35338f
--- /dev/null
+++ b/packages/ui/src/assets/icons/logto-logo-shadow.svg
@@ -0,0 +1,15 @@
+
diff --git a/packages/ui/src/components/LogtoSignature/index.module.scss b/packages/ui/src/components/LogtoSignature/index.module.scss
new file mode 100644
index 000000000..2577ab5e6
--- /dev/null
+++ b/packages/ui/src/components/LogtoSignature/index.module.scss
@@ -0,0 +1,48 @@
+@use '@/scss/underscore' as _;
+
+
+.signature {
+ @include _.flex-row;
+ font: var(--font-label-2);
+ color: var(--color-neutral-variant-60);
+ padding: _.unit(1) _.unit(2);
+ text-decoration: none;
+
+ .staticIcon {
+ display: block;
+ }
+
+ .highlightIcon {
+ display: none;
+ }
+
+ &:hover,
+ &:active {
+ .staticIcon {
+ display: none;
+ }
+
+ .highlightIcon {
+ display: block;
+ }
+ }
+
+ .text {
+ margin-right: _.unit(1);
+ }
+}
+
+
+:global(body.mobile) {
+ .signature {
+ margin: _.unit(10) 0 _.unit(2);
+ color: var(--color-neutral-variant-80);
+ }
+}
+
+
+:global(body.desktop) {
+ .signature {
+ margin: _.unit(7) 0;
+ }
+}
diff --git a/packages/ui/src/components/LogtoSignature/index.tsx b/packages/ui/src/components/LogtoSignature/index.tsx
new file mode 100644
index 000000000..b4a024d63
--- /dev/null
+++ b/packages/ui/src/components/LogtoSignature/index.tsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { useContext } from 'react';
+
+import LogtoLogtoDark from '@/assets/icons/logto-logo-dark.svg';
+import LogtoLogoLight from '@/assets/icons/logto-logo-light.svg';
+import LogtoLogoShadow from '@/assets/icons/logto-logo-shadow.svg';
+import { PageContext } from '@/hooks/use-page-context';
+
+import * as styles from './index.module.scss';
+
+const logtoUrl = new URL(
+ `https://logto.io?${new URLSearchParams({
+ src: window.location.href,
+ }).toString()}`
+);
+
+type Props = {
+ className?: string;
+};
+
+const LogtoSignature = ({ className }: Props) => {
+ const { theme } = useContext(PageContext);
+
+ return (
+
+ Powered by
+
+ {theme === 'light' ? (
+
+ ) : (
+
+ )}
+
+ );
+};
+
+export default LogtoSignature;
diff --git a/packages/ui/src/components/Notification/AppNotification/index.module.scss b/packages/ui/src/components/Notification/AppNotification/index.module.scss
index 330d81b0b..f520735e5 100644
--- a/packages/ui/src/components/Notification/AppNotification/index.module.scss
+++ b/packages/ui/src/components/Notification/AppNotification/index.module.scss
@@ -9,6 +9,7 @@
box-shadow: var(--color-shadow-1);
border-radius: var(--radius);
@include _.flex_row;
+ z-index: 100;
.icon {
width: 20px;
diff --git a/packages/ui/src/containers/AppContent/index.module.scss b/packages/ui/src/containers/AppContent/index.module.scss
index d11fb8cf2..b93a108c6 100644
--- a/packages/ui/src/containers/AppContent/index.module.scss
+++ b/packages/ui/src/containers/AppContent/index.module.scss
@@ -5,6 +5,10 @@
pointer-events: none;
user-select: none;
+ .viewBox::-webkit-scrollbar {
+ display: none;
+ }
+
main {
pointer-events: none;
user-select: none;
diff --git a/packages/ui/src/containers/AppContent/index.tsx b/packages/ui/src/containers/AppContent/index.tsx
index ac6f53d2e..b4f191005 100644
--- a/packages/ui/src/containers/AppContent/index.tsx
+++ b/packages/ui/src/containers/AppContent/index.tsx
@@ -1,15 +1,22 @@
import { Outlet } from 'react-router-dom';
+import LogtoSignature from '@/components/LogtoSignature';
+import usePlatform from '@/hooks/use-platform';
+
import * as styles from './index.module.scss';
const AppContent = () => {
+ const { isMobile } = usePlatform();
+
return (
+ {isMobile && }
+ {!isMobile &&
}
diff --git a/packages/ui/src/pages/ErrorPage/index.tsx b/packages/ui/src/pages/ErrorPage/index.tsx
index 1387bad57..961b6eaca 100644
--- a/packages/ui/src/pages/ErrorPage/index.tsx
+++ b/packages/ui/src/pages/ErrorPage/index.tsx
@@ -3,8 +3,8 @@ import type { TFuncKey } from 'react-i18next';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
-import EmptyState from '@/assets/icons/empty_state.svg';
-import EmptyStateDark from '@/assets/icons/empty_state_dark.svg';
+import EmptyStateDark from '@/assets/icons/empty-state-dark.svg';
+import EmptyState from '@/assets/icons/empty-state.svg';
import Button from '@/components/Button';
import NavBar from '@/components/NavBar';
import { PageContext } from '@/hooks/use-page-context';