diff --git a/packages/console/src/components/TabNav/TabNavLink.module.scss b/packages/console/src/components/TabNav/TabNavItem.module.scss
similarity index 94%
rename from packages/console/src/components/TabNav/TabNavLink.module.scss
rename to packages/console/src/components/TabNav/TabNavItem.module.scss
index daf9022e1..199dbf45c 100644
--- a/packages/console/src/components/TabNav/TabNavLink.module.scss
+++ b/packages/console/src/components/TabNav/TabNavItem.module.scss
@@ -8,6 +8,7 @@
   a {
     color: var(--color-caption);
     text-decoration: none;
+    cursor: pointer;
   }
 }
 
diff --git a/packages/console/src/components/TabNav/TabNavItem.tsx b/packages/console/src/components/TabNav/TabNavItem.tsx
new file mode 100644
index 000000000..12df27ab0
--- /dev/null
+++ b/packages/console/src/components/TabNav/TabNavItem.tsx
@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+import * as styles from './TabNavItem.module.scss';
+
+type Props = {
+  href?: string;
+  isActive?: boolean;
+  onClick?: () => void;
+  children: React.ReactNode;
+};
+
+const TabNavItem = ({ children, href, isActive, onClick }: Props) => {
+  const location = useLocation();
+  const selected = href ? location.pathname === href : isActive;
+
+  return (
+    <div className={classNames(styles.link, selected && styles.selected)}>
+      {href ? <Link to={href}>{children}</Link> : <a onClick={onClick}>{children}</a>}
+    </div>
+  );
+};
+
+export default TabNavItem;
diff --git a/packages/console/src/components/TabNav/TabNavLink.tsx b/packages/console/src/components/TabNav/TabNavLink.tsx
deleted file mode 100644
index 8aa92a403..000000000
--- a/packages/console/src/components/TabNav/TabNavLink.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
-
-import * as styles from './TabNavLink.module.scss';
-
-type Props = {
-  href: string;
-  children: React.ReactNode;
-};
-
-const TabNavLink = ({ children, href }: Props) => {
-  const location = useLocation();
-  const selected = location.pathname === href;
-
-  return (
-    <div className={classNames(styles.link, selected && styles.selected)}>
-      <Link to={href}>{children}</Link>
-    </div>
-  );
-};
-
-export default TabNavLink;
diff --git a/packages/console/src/components/TabNav/index.tsx b/packages/console/src/components/TabNav/index.tsx
index 673805253..ecc8c46c1 100644
--- a/packages/console/src/components/TabNav/index.tsx
+++ b/packages/console/src/components/TabNav/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import * as styles from './index.module.scss';
 
-export { default as TabNavLink } from './TabNavLink';
+export { default as TabNavItem } from './TabNavItem';
 
 type Props = {
   className?: string;
diff --git a/packages/console/src/pages/ApiResourceDetails/index.tsx b/packages/console/src/pages/ApiResourceDetails/index.tsx
index b25951b69..fdfc6aedc 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/index.tsx
@@ -16,7 +16,7 @@ import Drawer from '@/components/Drawer';
 import FormField from '@/components/FormField';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import LinkButton from '@/components/LinkButton';
-import TabNav, { TabNavLink } from '@/components/TabNav';
+import TabNav, { TabNavItem } from '@/components/TabNav';
 import TextInput from '@/components/TextInput';
 import useApi, { RequestError } from '@/hooks/use-api';
 import Back from '@/icons/Back';
@@ -144,7 +144,7 @@ const ApiResourceDetails = () => {
           </Card>
           <Card className={classNames(styles.body, detailsStyles.body)}>
             <TabNav>
-              <TabNavLink href={location.pathname}>{t('api_resource_details.settings')}</TabNavLink>
+              <TabNavItem href={location.pathname}>{t('api_resource_details.settings')}</TabNavItem>
             </TabNav>
             <form className={classNames(styles.form, detailsStyles.body)} onSubmit={onSubmit}>
               <div className={styles.fields}>
diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx
index e8581e904..339630abb 100644
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@@ -15,7 +15,7 @@ import CopyToClipboard from '@/components/CopyToClipboard';
 import Drawer from '@/components/Drawer';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import LinkButton from '@/components/LinkButton';
-import TabNav, { TabNavLink } from '@/components/TabNav';
+import TabNav, { TabNavItem } from '@/components/TabNav';
 import useApi, { RequestError } from '@/hooks/use-api';
 import Back from '@/icons/Back';
 import Delete from '@/icons/Delete';
@@ -166,12 +166,12 @@ const ApplicationDetails = () => {
           </Card>
           <Card className={classNames(styles.body, detailsStyles.body)}>
             <TabNav>
-              <TabNavLink href={`/applications/${data.id}/settings`}>
+              <TabNavItem href={`/applications/${data.id}/settings`}>
                 {t('application_details.settings')}
-              </TabNavLink>
-              <TabNavLink href={`/applications/${data.id}/advanced-settings`}>
+              </TabNavItem>
+              <TabNavItem href={`/applications/${data.id}/advanced-settings`}>
                 {t('application_details.advanced_settings')}
-              </TabNavLink>
+              </TabNavItem>
             </TabNav>
             <FormProvider {...formMethods}>
               <form className={classNames(styles.form, detailsStyles.body)} onSubmit={onSubmit}>
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index 3c79ef5e6..c70a5fd21 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -15,7 +15,7 @@ import ImagePlaceholder from '@/components/ImagePlaceholder';
 import LinkButton from '@/components/LinkButton';
 import Markdown from '@/components/Markdown';
 import Status from '@/components/Status';
-import TabNav, { TabNavLink } from '@/components/TabNav';
+import TabNav, { TabNavItem } from '@/components/TabNav';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import useApi, { RequestError } from '@/hooks/use-api';
 import Back from '@/icons/Back';
@@ -182,9 +182,9 @@ const ConnectorDetails = () => {
       {data && (
         <Card className={classNames(styles.body, detailsStyles.body)}>
           <TabNav>
-            <TabNavLink href={`/connectors/${connectorId ?? ''}`}>
+            <TabNavItem href={`/connectors/${connectorId ?? ''}`}>
               {t('connector_details.tab_settings')}
-            </TabNavLink>
+            </TabNavItem>
           </TabNav>
           <div className={styles.main}>
             <CodeEditor
diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx
index 7219c7578..54db0ebfd 100644
--- a/packages/console/src/pages/Connectors/index.tsx
+++ b/packages/console/src/pages/Connectors/index.tsx
@@ -8,7 +8,7 @@ import useSWR from 'swr';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
-import TabNav, { TabNavLink } from '@/components/TabNav';
+import TabNav, { TabNavItem } from '@/components/TabNav';
 import TableEmpty from '@/components/Table/TableEmpty';
 import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
@@ -67,8 +67,8 @@ const Connectors = () => {
           )}
         </div>
         <TabNav className={styles.tabs}>
-          <TabNavLink href="/connectors">{t('connectors.tab_email_sms')}</TabNavLink>
-          <TabNavLink href="/connectors/social">{t('connectors.tab_social')}</TabNavLink>
+          <TabNavItem href="/connectors">{t('connectors.tab_email_sms')}</TabNavItem>
+          <TabNavItem href="/connectors/social">{t('connectors.tab_social')}</TabNavItem>
         </TabNav>
         <div className={classNames(styles.table, tableStyles.scrollable)}>
           <table>
diff --git a/packages/console/src/pages/Settings/index.tsx b/packages/console/src/pages/Settings/index.tsx
index 977a2724e..117f7b368 100644
--- a/packages/console/src/pages/Settings/index.tsx
+++ b/packages/console/src/pages/Settings/index.tsx
@@ -12,7 +12,7 @@ import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
 import FormField from '@/components/FormField';
 import Select from '@/components/Select';
-import TabNav, { TabNavLink } from '@/components/TabNav';
+import TabNav, { TabNavItem } from '@/components/TabNav';
 import { themeStorageKey } from '@/consts';
 import useApi, { RequestError } from '@/hooks/use-api';
 import * as detailsStyles from '@/scss/details.module.scss';
@@ -57,7 +57,7 @@ const Settings = () => {
     <Card className={classNames(detailsStyles.container, styles.container)}>
       <CardTitle title="settings.title" subtitle="settings.description" />
       <TabNav>
-        <TabNavLink href="/settings">{t('settings.tabs.general')}</TabNavLink>
+        <TabNavItem href="/settings">{t('settings.tabs.general')}</TabNavItem>
       </TabNav>
       {!data && !error && <div>loading</div>}
       {error && <div>{`error occurred: ${error.body.message}`}</div>}
diff --git a/packages/console/src/pages/SignInExperience/components/Preview.module.scss b/packages/console/src/pages/SignInExperience/components/Preview.module.scss
new file mode 100644
index 000000000..a7230f807
--- /dev/null
+++ b/packages/console/src/pages/SignInExperience/components/Preview.module.scss
@@ -0,0 +1,46 @@
+@use '@/scss/underscore' as _;
+
+.preview {
+  width: 578px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+
+  .header {
+    display: flex;
+    margin: _.unit(6) _.unit(6) 0;
+
+    .title {
+      font: var(--font-subhead-1);
+      flex: 1;
+    }
+
+    .selects {
+      display: flex;
+      align-items: center;
+
+      > * {
+        width: 104px;
+
+        &:first-child {
+          margin-right: _.unit(2);
+        }
+      }
+    }
+  }
+
+  .nav {
+    padding: 0 _.unit(6);
+  }
+
+  .body {
+    flex: 1;
+
+    iframe {
+      border: none;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
diff --git a/packages/console/src/pages/SignInExperience/components/Preview.tsx b/packages/console/src/pages/SignInExperience/components/Preview.tsx
new file mode 100644
index 000000000..30c0e881d
--- /dev/null
+++ b/packages/console/src/pages/SignInExperience/components/Preview.tsx
@@ -0,0 +1,84 @@
+import { Language } from '@logto/phrases';
+import { AppearanceMode, SignInExperience } from '@logto/schemas';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Card from '@/components/Card';
+import Select from '@/components/Select';
+import TabNav, { TabNavItem } from '@/components/TabNav';
+
+import * as styles from './Preview.module.scss';
+
+type Props = {
+  signInExperience: SignInExperience;
+};
+
+const Preview = ({ signInExperience }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const [language, setLanguage] = useState<Language>(Language.English);
+  const [mode, setMode] = useState<AppearanceMode>(AppearanceMode.LightMode);
+  const [platform, setPlatform] = useState<'web' | 'mobile'>('web');
+
+  // TODO: is a placeholder
+  const config = encodeURIComponent(
+    JSON.stringify({
+      ...signInExperience,
+      language,
+      mode,
+      platform,
+    })
+  );
+
+  return (
+    <Card className={styles.preview}>
+      <div className={styles.header}>
+        <div className={styles.title}>{t('sign_in_exp.preview.title')}</div>
+        <div className={styles.selects}>
+          <Select
+            value={language}
+            options={[
+              { value: Language.English, title: t('sign_in_exp.preview.languages.english') },
+              { value: Language.Chinese, title: t('sign_in_exp.preview.languages.chinese') },
+            ]}
+            onChange={(value) => {
+              setLanguage(value as Language);
+            }}
+          />
+          <Select
+            value={mode}
+            options={[
+              { value: AppearanceMode.LightMode, title: t('sign_in_exp.preview.light') },
+              { value: AppearanceMode.DarkMode, title: t('sign_in_exp.preview.dark') },
+            ]}
+            onChange={(value) => {
+              setMode(value as AppearanceMode);
+            }}
+          />
+        </div>
+      </div>
+      <TabNav className={styles.nav}>
+        <TabNavItem
+          isActive={platform === 'web'}
+          onClick={() => {
+            setPlatform('web');
+          }}
+        >
+          {t('sign_in_exp.preview.web')}
+        </TabNavItem>
+        <TabNavItem
+          isActive={platform === 'mobile'}
+          onClick={() => {
+            setPlatform('mobile');
+          }}
+        >
+          {t('sign_in_exp.preview.mobile')}
+        </TabNavItem>
+      </TabNav>
+      <div className={styles.body}>
+        <iframe src={`/sign-in?config=${config}`} />
+      </div>
+    </Card>
+  );
+};
+
+export default Preview;
diff --git a/packages/console/src/pages/SignInExperience/index.module.scss b/packages/console/src/pages/SignInExperience/index.module.scss
index f7229f443..a09d69676 100644
--- a/packages/console/src/pages/SignInExperience/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/index.module.scss
@@ -22,8 +22,4 @@
       padding-bottom: _.unit(8);
     }
   }
-
-  .preview {
-    width: 500px;
-  }
 }
diff --git a/packages/console/src/pages/SignInExperience/index.tsx b/packages/console/src/pages/SignInExperience/index.tsx
index 4d5fe440c..0d3ed8ac8 100644
--- a/packages/console/src/pages/SignInExperience/index.tsx
+++ b/packages/console/src/pages/SignInExperience/index.tsx
@@ -11,7 +11,7 @@ import useSWR from 'swr';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
-import TabNav, { TabNavLink } from '@/components/TabNav';
+import TabNav, { TabNavItem } from '@/components/TabNav';
 import useApi, { RequestError } from '@/hooks/use-api';
 import useAdminConsoleConfigs from '@/hooks/use-configs';
 import * as detailsStyles from '@/scss/details.module.scss';
@@ -19,6 +19,7 @@ import * as modalStyles from '@/scss/modal.module.scss';
 
 import BrandingForm from './components/BrandingForm';
 import LanguagesForm from './components/LanguagesForm';
+import Preview from './components/Preview';
 import SaveAlert from './components/SaveAlert';
 import SignInMethodsForm from './components/SignInMethodsForm';
 import TermsForm from './components/TermsForm';
@@ -39,9 +40,11 @@ const SignInExperience = () => {
     reset,
     handleSubmit,
     getValues,
+    watch,
     formState: { isSubmitting },
   } = methods;
   const api = useApi();
+  const formData = watch();
 
   useEffect(() => {
     if (data) {
@@ -95,15 +98,15 @@ const SignInExperience = () => {
         <Card className={styles.card}>
           <CardTitle title="sign_in_exp.title" subtitle="sign_in_exp.description" />
           <TabNav className={styles.tabs}>
-            <TabNavLink href="/sign-in-experience/experience">
+            <TabNavItem href="/sign-in-experience/experience">
               {t('sign_in_exp.tabs.experience')}
-            </TabNavLink>
-            <TabNavLink href="/sign-in-experience/methods">
+            </TabNavItem>
+            <TabNavItem href="/sign-in-experience/methods">
               {t('sign_in_exp.tabs.methods')}
-            </TabNavLink>
-            <TabNavLink href="/sign-in-experience/others">
+            </TabNavItem>
+            <TabNavItem href="/sign-in-experience/others">
               {t('sign_in_exp.tabs.others')}
-            </TabNavLink>
+            </TabNavItem>
           </TabNav>
           {!data && !error && <div>loading</div>}
           {error && <div>{`error occurred: ${error.body.message}`}</div>}
@@ -135,7 +138,7 @@ const SignInExperience = () => {
           )}
         </Card>
       </div>
-      <Card className={styles.preview}>TODO</Card>
+      {formData.id && <Preview signInExperience={signInExperienceParser.toRemoteModel(formData)} />}
       {data && (
         <ReactModal
           isOpen={Boolean(dataToCompare)}
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index 331b4348d..b2c12b349 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -17,7 +17,7 @@ import CopyToClipboard from '@/components/CopyToClipboard';
 import FormField from '@/components/FormField';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import LinkButton from '@/components/LinkButton';
-import TabNav, { TabNavLink } from '@/components/TabNav';
+import TabNav, { TabNavItem } from '@/components/TabNav';
 import TextInput from '@/components/TextInput';
 import useApi, { RequestError } from '@/hooks/use-api';
 import Back from '@/icons/Back';
@@ -179,8 +179,8 @@ const UserDetails = () => {
           </Card>
           <Card className={classNames(styles.body, detailsStyles.body)}>
             <TabNav>
-              <TabNavLink href={`/users/${id}`}>{t('user_details.tab_settings')}</TabNavLink>
-              <TabNavLink href={`/users/${id}/logs`}>{t('user_details.tab_logs')}</TabNavLink>
+              <TabNavItem href={`/users/${id}`}>{t('user_details.tab_settings')}</TabNavItem>
+              <TabNavItem href={`/users/${id}/logs`}>{t('user_details.tab_logs')}</TabNavItem>
             </TabNav>
             <form className={styles.form} onSubmit={onSubmit}>
               <div className={styles.fields}>
diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts
index 0f5141142..b9ccf913a 100644
--- a/packages/phrases/src/locales/en.ts
+++ b/packages/phrases/src/locales/en.ts
@@ -470,6 +470,17 @@ const translation = {
         before: 'Before',
         after: 'After',
       },
+      preview: {
+        title: 'Sign in preview',
+        languages: {
+          english: 'English',
+          chinese: 'Chinese',
+        },
+        dark: 'Dark',
+        light: 'Light',
+        mobile: 'Mobile',
+        web: 'Web',
+      },
     },
     settings: {
       title: 'Settings',
diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts
index f58acb784..8cf23ca03 100644
--- a/packages/phrases/src/locales/zh-cn.ts
+++ b/packages/phrases/src/locales/zh-cn.ts
@@ -465,6 +465,17 @@ const translation = {
         before: '修改前',
         after: '修改后',
       },
+      preview: {
+        title: 'Sign in preview',
+        languages: {
+          english: 'English',
+          chinese: 'Chinese',
+        },
+        dark: 'Dark',
+        light: 'Light',
+        mobile: 'Mobile',
+        web: 'Web',
+      },
     },
     settings: {
       title: '设置',