diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index ea0efe9..0028098 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import { Layer } from "m3-svelte";
 
-let { icon, children, big, ...rest }: {
+let { icon, children, big, secondary, ...rest }: {
   icon?: string
   children?: any
   big?: boolean
+  secondary?: boolean
   [key: string]: any
 } = $props();
 
@@ -12,9 +13,13 @@ let cls = $derived(big
   ? "h-56px px-24px py-16px m3-font-title-medium w-full justify-center"
   : "h-40px px-16px py-10px m3-font-label-large"
 )
+let cls2 = $derived(secondary
+  ? "mbg-secondary-container mfg-on-secondary-container"
+  : "mbg-inverse-primary mfg-on-primary-container"
+)
 </script>
 
-<button class="hbox gap-8px rounded-12px mfg-on-primary-container mbg-inverse-primary relative {cls}" {...rest}>
+<button {...rest} class="hbox gap-8px rounded-12px relative flex-shrink-1 {cls} {cls2} {rest.class}">
   <Layer/>
   {#if icon}
     <span class="size-20px {icon}"></span>
diff --git a/src/components/status/Dialog.svelte b/src/components/status/Dialog.svelte
index 6653f99..5e81c6b 100644
--- a/src/components/status/Dialog.svelte
+++ b/src/components/status/Dialog.svelte
@@ -13,12 +13,12 @@
   } = $props()
 
   let buttons = $derived(p.buttons ?? [{
-    text: '取消', onclick: () => open = false
+    text: '关闭', onclick: () => open = false
   }])
 </script>
 
 {#if open}
-<div class="cbox absolute inset-0 drop-shadow-xl" transition:fade>
+<div class="cbox absolute inset-0 drop-shadow-xl" transition:fade={{ duration: 200 }}>
   <div class="vbox rounded-28px mbg-surface-container-high w-312px">
     <div class="vbox gap-16px p-26px pb-0">
       <div class="m3-font-headline-small mfg-on-surface">{p.title}</div>
diff --git a/src/routes/user/+page.svelte b/src/routes/user/+page.svelte
new file mode 100644
index 0000000..93a3f1d
--- /dev/null
+++ b/src/routes/user/+page.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { TextFieldOutlined } from "m3-svelte";
+  import AppBar from "../../components/appbar/AppBar.svelte";
+  import Button from "../../components/Button.svelte";
+  import Dialog from "../../components/status/Dialog.svelte";
+
+  let open = $state(false)
+  let loginMode = $state(false)
+  let loginCode = $state('')
+</script>
+
+<Dialog title="生成引继码" bind:open>引继码生成成功！生成的引继码是：01234-56789-ABCDE-F0123
+  <br><br>
+这个引继码将会在使用之后、或者未使用的 7 天后会失效</Dialog>
+
+<AppBar title="账号管理"/>
+
+<div class="m3-font-body-medium mfg-on-surface-variant py-12px p-content">
+  这个 App 像日本的手机游戏一样采用引继码系统管理账号，并不需要用邮箱密码注册帐号。
+  <br><br>
+  如果想要在另一个设备上登录账号，请点击「生成引继码」然后在想要登录的设备上点击「登录」
+  {#if loginMode}
+    <br><br>您当前在「引继登录」页面，请在另一个设备上获取引继码之后输入到下面的输入框内点击「登录」
+  {/if}
+</div>
+
+{#if loginMode}
+  <div class="vbox px-16px py-10px">
+    <TextFieldOutlined label="输入引继码" bind:value={loginCode}/>
+  </div>
+{/if}
+
+<div class="vbox gap-16px flex-1 min-h-0">
+    
+</div>
+
+<div class="hbox p-16px gap-16px">
+  {#if !loginMode}
+    <Button big secondary icon="i-material-symbols:add" disabled={open} onclick={() => open = true}>生成引继码</Button>
+    <Button big secondary icon="i-material-symbols:login" disabled={open} onclick={() => loginMode = true}>用引继码登录</Button>
+  {:else}
+    <Button big secondary icon="i-material-symbols:login" disabled={open} onclick={() => alert("TODO")}>登录</Button>
+  {/if}
+</div>