From f664dc04021b1ec49802e0a52117b90074998496 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Thu, 4 Jun 2026 18:04:02 +0800
Subject: [PATCH 1/6] refactor(spx-gui): remove jwt-decode and reduce cached
 username dependencies (#3224)

* remove jwt-based username parsing from sign-in flow

* reduce cached username dependencies

* harden signed-in user sync and cache scoping

* decouple user-scoped storage from cached usernames

* remove local cached username

* restore cached username for user-scoped state

* refine signed-in user fetching and clarify auth session versioning

* revert signed-in user query key with unresolved username

* remove wrong comments
---
 spx-gui/package-lock.json              |  1 -
 spx-gui/package.json                   |  1 -
 spx-gui/src/apis/common/client.test.ts | 14 ++++++
 spx-gui/src/apis/common/client.ts      |  4 +-
 spx-gui/src/apis/user.ts               |  4 +-
 spx-gui/src/pages/sign-in/token.vue    | 25 +---------
 spx-gui/src/router.ts                  | 10 ++++
 spx-gui/src/stores/following.ts        | 13 +++--
 spx-gui/src/stores/liking.ts           | 11 +++--
 spx-gui/src/stores/user/signed-in.ts   | 67 +++++++++++++-------------
 10 files changed, 79 insertions(+), 71 deletions(-)

diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 8af7064aa0..98f3e09be4 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -44,7 +44,6 @@
         "hast": "^1.0.0",
         "hast-util-raw": "^9.1.0",
         "hast-util-sanitize": "^5.0.2",
-        "jwt-decode": "^4.0.0",
         "konva": "^9.3.1",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index 898991f330..3c1f080953 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -51,7 +51,6 @@
     "hast": "^1.0.0",
     "hast-util-raw": "^9.1.0",
     "hast-util-sanitize": "^5.0.2",
-    "jwt-decode": "^4.0.0",
     "konva": "^9.3.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
diff --git a/spx-gui/src/apis/common/client.test.ts b/spx-gui/src/apis/common/client.test.ts
index 447cba80ac..474e7f7874 100644
--- a/spx-gui/src/apis/common/client.test.ts
+++ b/spx-gui/src/apis/common/client.test.ts
@@ -112,4 +112,18 @@ describe('Client', () => {
       expect(globalFetchMock).toHaveBeenCalledTimes(1)
     })
   })
+
+  describe('explicit authorization headers', () => {
+    it('should preserve an explicit Authorization header instead of overwriting it with the token provider', async () => {
+      fetchMock.mockResolvedValueOnce(new Response(JSON.stringify({ username: 'alice' }), { status: 200 }))
+      client.setTokenProvider(async () => 'shared-token')
+
+      await client.get('/user', undefined, {
+        headers: new Headers({ Authorization: 'Bearer direct-token' })
+      })
+
+      const req = fetchMock.mock.calls[0]?.[0] as Request
+      expect(req.headers.get('Authorization')).toBe('Bearer direct-token')
+    })
+  })
 })
diff --git a/spx-gui/src/apis/common/client.ts b/spx-gui/src/apis/common/client.ts
index 27f2ad19e0..14c0b0e9f6 100644
--- a/spx-gui/src/apis/common/client.ts
+++ b/spx-gui/src/apis/common/client.ts
@@ -97,7 +97,7 @@ export class Client {
     options?.signal?.throwIfAborted()
     const headers = options?.headers ?? new Headers()
     if (body != null) headers.set('Content-Type', 'application/json')
-    if (token != null) headers.set('Authorization', `Bearer ${token}`)
+    if (token != null && !headers.has('Authorization')) headers.set('Authorization', `Bearer ${token}`)
     if (sentryTraceHeader != null) headers.set('Sentry-Trace', sentryTraceHeader)
     if (sentryBaggageHeader != null) headers.set('Baggage', sentryBaggageHeader)
     return new Request(url, { method, headers, body })
@@ -143,7 +143,7 @@ export class Client {
     const token = await this.tokenProvider()
     options?.signal?.throwIfAborted()
     const headers = options?.headers ?? new Headers()
-    if (token != null) headers.set('Authorization', `Bearer ${token}`)
+    if (token != null && !headers.has('Authorization')) headers.set('Authorization', `Bearer ${token}`)
     if (sentryTraceHeader != null) headers.set('Sentry-Trace', sentryTraceHeader)
     if (sentryBaggageHeader != null) headers.set('Baggage', sentryBaggageHeader)
     const req = new Request(url, { method, headers, body: payload })
diff --git a/spx-gui/src/apis/user.ts b/spx-gui/src/apis/user.ts
index a7cda5fa20..f0d21074f8 100644
--- a/spx-gui/src/apis/user.ts
+++ b/spx-gui/src/apis/user.ts
@@ -48,8 +48,8 @@ export async function isUsernameTaken(username: string) {
   }
 }
 
-export function getSignedInUser(): Promise<SignedInUser> {
-  return client.get(`/user`) as Promise<SignedInUser>
+export function getSignedInUser(options?: { headers?: Headers }): Promise<SignedInUser> {
+  return client.get(`/user`, undefined, options) as Promise<SignedInUser>
 }
 
 export type UpdateSignedInUserParams = Partial<Pick<User, 'username' | 'displayName' | 'avatar' | 'description'>>
diff --git a/spx-gui/src/pages/sign-in/token.vue b/spx-gui/src/pages/sign-in/token.vue
index 357879f0f4..58c06f13b5 100644
--- a/spx-gui/src/pages/sign-in/token.vue
+++ b/spx-gui/src/pages/sign-in/token.vue
@@ -25,16 +25,14 @@
           html-type="submit"
           :loading="handleSubmit.isLoading.value"
         >
-          {{ buttonText }}
+          {{ $t({ en: 'Sign in', zh: '登录' }) }}
         </UIButton>
       </footer>
     </UIForm>
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { jwtDecode } from 'jwt-decode'
 import { useI18n } from '@/utils/i18n'
 import { usePageTitle } from '@/utils/utils'
 import { useMessageHandle } from '@/utils/exception'
@@ -51,36 +49,17 @@ usePageTitle(title)
 const router = useRouter()
 const i18n = useI18n()
 
-const username = ref<string | null>(null)
-const buttonText = computed(() => {
-  if (username.value == null) return i18n.t({ en: 'Sign in', zh: '登录' })
-  return i18n.t({
-    en: `Sign in as ${username.value}`,
-    zh: `以 ${username.value} 登录`
-  })
-})
-
 const form = useForm({
   token: ['', validateToken]
 })
 
 function validateToken(token: string) {
-  username.value = null
   token = token.trim()
   if (token === '')
     return i18n.t({
       en: 'Token is required',
       zh: '请提供 Token'
     })
-  try {
-    const decoded = jwtDecode<{ name: string }>(token)
-    username.value = decoded.name
-  } catch (e) {
-    return i18n.t({
-      en: 'Invalid token: ' + e,
-      zh: '无效的 Token：' + e
-    })
-  }
 }
 
 function handleCancel() {
@@ -90,7 +69,7 @@ function handleCancel() {
 const handleSubmit = useMessageHandle(
   async () => {
     const token = form.value.token.trim()
-    signInWithAccessToken(token)
+    await signInWithAccessToken(token)
     router.push('/')
   },
   {
diff --git a/spx-gui/src/router.ts b/spx-gui/src/router.ts
index d27f5e7893..a15d8af600 100644
--- a/spx-gui/src/router.ts
+++ b/spx-gui/src/router.ts
@@ -11,6 +11,11 @@ export function getProjectEditorRoute(ownerName: string, projectName: string, pu
 }
 
 export function getOwnProjectEditorRoute(projectName: string, publish = false) {
+  // TODO: Remove this helper after splitting "open my project editor" into two layers:
+  // - a pure self-entry route builder like `/editor/:projectName`
+  // - async resolution of the canonical signed-in user at that route boundary
+  // Then navigate to `/editor/:owner/:project` with backend-confirmed signed-in user data,
+  // instead of deriving owner name from unresolved local auth state synchronously.
   const username = getUnresolvedSignedInUsername()
   if (username == null) throw new Error('User not signed in')
   return getProjectEditorRoute(username, projectName, publish)
@@ -136,6 +141,11 @@ const routes: Array<RouteRecordRaw> = [
     path: '/editor/:projectNameInput',
     redirect(to) {
       const { projectNameInput } = to.params
+      // TODO: Replace this synchronous redirect with an async entry boundary (for example `beforeEnter`) that:
+      // - checks/initiates sign-in
+      // - awaits canonical signed-in user data
+      // - redirects to `/editor/:owner/:project`
+      // That would let router stop depending on unresolved local username hints here.
       const username = getUnresolvedSignedInUsername()
       // Route with `redirect` will not trigger the global `beforeEach` guard,
       // so we need to check sign-in status here.
diff --git a/spx-gui/src/stores/following.ts b/spx-gui/src/stores/following.ts
index 04e9e27265..69598bbf32 100644
--- a/spx-gui/src/stores/following.ts
+++ b/spx-gui/src/stores/following.ts
@@ -2,7 +2,7 @@ import { computed, toRef, type WatchSource } from 'vue'
 import { useQueryWithCache, useQueryCache } from '@/utils/query'
 import { useAction } from '@/utils/exception'
 import * as apis from '@/apis/user'
-import { getUnresolvedSignedInUsername } from './user'
+import { useSignedInUser } from './user'
 
 function getFollowingQueryKey(signedInUsernameInput: string | null, username: string) {
   return ['following', signedInUsernameInput, username]
@@ -12,11 +12,12 @@ const staleTime = 5 * 60 * 1000 // 5min
 
 export function useIsFollowing(username: WatchSource<string>) {
   const usernameRef = toRef(username)
-  const queryKey = computed(() => getFollowingQueryKey(getUnresolvedSignedInUsername(), usernameRef.value))
+  const signedInUser = useSignedInUser()
+  const queryKey = computed(() => getFollowingQueryKey(signedInUser.value?.username ?? null, usernameRef.value))
   return useQueryWithCache({
     queryKey,
     async queryFn() {
-      const signedInUsernameInput = getUnresolvedSignedInUsername()
+      const signedInUsernameInput = signedInUser.value?.username ?? null
       if (signedInUsernameInput == null || signedInUsernameInput === usernameRef.value) return false
       return apis.isFollowing(usernameRef.value)
     },
@@ -27,10 +28,11 @@ export function useIsFollowing(username: WatchSource<string>) {
 
 export function useFollow() {
   const queryCache = useQueryCache()
+  const signedInUser = useSignedInUser()
   return useAction(
     async function follow(username: string) {
       await apis.follow(username)
-      const queryKey = getFollowingQueryKey(getUnresolvedSignedInUsername(), username)
+      const queryKey = getFollowingQueryKey(signedInUser.value?.username ?? null, username)
       queryCache.invalidateWithOptimisticValue(queryKey, true)
     },
     { en: 'Failed to follow', zh: '关注用户失败' }
@@ -39,10 +41,11 @@ export function useFollow() {
 
 export function useUnfollow() {
   const queryCache = useQueryCache()
+  const signedInUser = useSignedInUser()
   return useAction(
     async function unfollow(username: string) {
       await apis.unfollow(username)
-      const queryKey = getFollowingQueryKey(getUnresolvedSignedInUsername(), username)
+      const queryKey = getFollowingQueryKey(signedInUser.value?.username ?? null, username)
       queryCache.invalidateWithOptimisticValue(queryKey, false)
     },
     { en: 'Failed to unfollow', zh: '取消关注失败' }
diff --git a/spx-gui/src/stores/liking.ts b/spx-gui/src/stores/liking.ts
index 022d49d1bd..dfe47fb166 100644
--- a/spx-gui/src/stores/liking.ts
+++ b/spx-gui/src/stores/liking.ts
@@ -2,7 +2,7 @@ import { computed, toRef, type WatchSource } from 'vue'
 import { useQueryWithCache, useQueryCache } from '@/utils/query'
 import { useAction } from '@/utils/exception'
 import * as apis from '@/apis/project'
-import { getUnresolvedSignedInUsername, isSignedIn } from './user'
+import { isSignedIn, useSignedInUser } from './user'
 
 function getLikingQueryKey(signedInUsernameInput: string | null, owner: string, name: string) {
   return ['liking', signedInUsernameInput, owner, name]
@@ -12,9 +12,10 @@ const staleTime = 5 * 60 * 1000 // 5min
 
 export function useIsLikingProject(project: WatchSource<{ owner: string; name: string }>) {
   const projectRef = toRef(project)
+  const signedInUser = useSignedInUser()
   const queryKey = computed(() => {
     const { owner, name } = projectRef.value
-    return getLikingQueryKey(getUnresolvedSignedInUsername(), owner, name)
+    return getLikingQueryKey(signedInUser.value?.username ?? null, owner, name)
   })
   return useQueryWithCache({
     queryKey,
@@ -29,10 +30,11 @@ export function useIsLikingProject(project: WatchSource<{ owner: string; name: s
 
 export function useLikeProject() {
   const queryCache = useQueryCache()
+  const signedInUser = useSignedInUser()
   return useAction(
     async function likeProject(owner: string, name: string) {
       await apis.likeProject(owner, name)
-      const queryKey = getLikingQueryKey(getUnresolvedSignedInUsername(), owner, name)
+      const queryKey = getLikingQueryKey(signedInUser.value?.username ?? null, owner, name)
       queryCache.invalidateWithOptimisticValue(queryKey, true)
     },
     { en: 'Failed to like', zh: '标记喜欢失败' }
@@ -41,10 +43,11 @@ export function useLikeProject() {
 
 export function useUnlikeProject() {
   const queryCache = useQueryCache()
+  const signedInUser = useSignedInUser()
   return useAction(
     async function unlikeProject(owner: string, name: string) {
       await apis.unlikeProject(owner, name)
-      const queryKey = getLikingQueryKey(getUnresolvedSignedInUsername(), owner, name)
+      const queryKey = getLikingQueryKey(signedInUser.value?.username ?? null, owner, name)
       queryCache.invalidateWithOptimisticValue(queryKey, false)
     },
     { en: 'Failed to unlike', zh: '取消喜欢失败' }
diff --git a/spx-gui/src/stores/user/signed-in.ts b/spx-gui/src/stores/user/signed-in.ts
index 19d3573a8d..9d33edd4d9 100644
--- a/spx-gui/src/stores/user/signed-in.ts
+++ b/spx-gui/src/stores/user/signed-in.ts
@@ -1,7 +1,6 @@
 import { reactive, watchEffect, computed } from 'vue'
 import Sdk from 'casdoor-js-sdk'
 import { casdoorConfig } from '@/utils/env'
-import { jwtDecode } from 'jwt-decode'
 import { useQueryWithCache, useQueryCache, useQuery, composeQuery } from '@/utils/query'
 import { useAction } from '@/utils/exception'
 import * as apis from '@/apis/user'
@@ -20,10 +19,6 @@ const userState = reactive({
   accessToken: null as string | null,
   accessTokenExpiresAt: null as number | null,
   refreshToken: null as string | null,
-  /**
-   * User name parsed from access token, or null if not available.
-   * This is only a hint and should not be treated as canonical backend-confirmed identity.
-   */
   username: null as string | null
 })
 
@@ -41,21 +36,21 @@ interface TokenResponse {
   refresh_token: string
 }
 
-function decodeUsernameFromAccessToken(accessToken: string): string | null {
-  try {
-    const decoded = jwtDecode<{ name?: unknown }>(accessToken)
-    if (typeof decoded.name !== 'string' || decoded.name === '') return null
-    return decoded.name
-  } catch {
-    return null
-  }
+async function fetchSignedInUsernameByAccessToken(accessToken: string) {
+  const user = await apis.getSignedInUser({
+    headers: new Headers({
+      Authorization: `Bearer ${accessToken}`
+    })
+  })
+  return user.username
 }
 
-function handleTokenResponse(resp: TokenResponse) {
+async function handleTokenResponse(resp: TokenResponse) {
+  const username = await fetchSignedInUsernameByAccessToken(resp.access_token)
   userState.accessToken = resp.access_token
   userState.accessTokenExpiresAt = resp.expires_in ? Date.now() + resp.expires_in * 1000 : null
   userState.refreshToken = resp.refresh_token
-  userState.username = decodeUsernameFromAccessToken(resp.access_token)
+  userState.username = username
 }
 
 export function initiateSignIn(
@@ -71,14 +66,15 @@ export function initiateSignIn(
 
 export async function completeSignIn() {
   const resp = await casdoorSdk.exchangeForAccessToken()
-  handleTokenResponse(resp)
+  await handleTokenResponse(resp)
 }
 
-export function signInWithAccessToken(accessToken: string) {
+export async function signInWithAccessToken(accessToken: string) {
+  const username = await fetchSignedInUsernameByAccessToken(accessToken)
   userState.accessToken = accessToken
   userState.accessTokenExpiresAt = null
   userState.refreshToken = null
-  userState.username = decodeUsernameFromAccessToken(accessToken)
+  userState.username = username
 }
 
 export function signOut() {
@@ -103,7 +99,7 @@ export async function ensureAccessToken(): Promise<string | null> {
   tokenRefreshPromise = (async () => {
     try {
       const resp = await casdoorSdk.refreshAccessToken(userState.refreshToken!)
-      handleTokenResponse(resp)
+      await handleTokenResponse(resp)
     } catch (e) {
       console.error('failed to refresh access token', e)
       throw e
@@ -136,25 +132,30 @@ export function isSignedIn(): boolean {
 /**
  * Returns the current signed-in username from locally available auth state only.
  *
- * The returned value is unresolved: it comes from the access token,
- * and should not be treated as canonical backend-confirmed identity.
+ * The returned value is unresolved: it comes from local cached state and may lag behind the
+ * canonical signed-in user returned by the backend.
  *
- * Use this only at boundaries that need a synchronous identity hint, such as cache keys, route
- * derivation, or other session-scoping data. Do not use it for behavior-sensitive checks like
- * ownership, permissions, or other logic that should depend on canonical backend data.
+ * Use this only at boundaries that need a synchronous session-scoped identity hint, such as
+ * temporary route derivation or user-scoped storage. Do not use it for behavior-sensitive checks
+ * like ownership, permissions, or other logic that should depend on canonical backend data.
  */
 export function getUnresolvedSignedInUsername(): string | null {
   if (!isSignedIn()) return null
-  if (userState.username != null) return userState.username
-  if (userState.accessToken == null) return null
-  const username = decodeUsernameFromAccessToken(userState.accessToken)
-  if (username == null) return null
-  userState.username = username
-  return username
+  return userState.username
 }
 
 const signedInUserStaleTime = 60 * 1000 // 1min
 
+/**
+ * TODO: This query key still depends on `getUnresolvedSignedInUsername()`, which is only a local
+ * username hint rather than a canonical auth-session identifier.
+ *
+ * Current limitations:
+ * - auth-session changes do not change the key if the unresolved username stays the same
+ * - different sessions for the same username may therefore reuse the same cache entry
+ *
+ * A later cleanup should replace this with a dedicated auth-session-scoping key.
+ */
 function getSignedInUserQueryKey() {
   return [...getUserQueryKey(getUnresolvedSignedInUsername() ?? ''), 'signed-in']
 }
@@ -162,7 +163,7 @@ function getSignedInUserQueryKey() {
 function useSignedInUserQuery() {
   const queryKey = computed(() => getSignedInUserQueryKey())
   return useQueryWithCache({
-    queryKey: queryKey,
+    queryKey,
     async queryFn() {
       if (!isSignedIn()) throw new Error('User not signed in')
       return apis.getSignedInUser()
@@ -188,8 +189,8 @@ export type SignedInState =
 /**
  * Get the signed-in state, including whether the user is signed in and the signed-in user information if available.
  * Suitable for scenarios like:
- * - callers need to known whether the user is signed in or not
- * - callers need to acccess the loading or error state of the signed-in user query
+ * - callers need to know whether the user is signed in or not
+ * - callers need to access the loading or error state of the signed-in user query
  */
 export function useSignedInStateQuery() {
   const signedInUserQuery = useSignedInUserQuery()

From 5fe85f308b8ee4a59850a6491832fcb1dbe2e386 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Thu, 4 Jun 2026 15:19:13 +0800
Subject: [PATCH 2/6] account system migration

---
 docs/develop/account-web-sign-in-migration.md | 428 ++++++++++++++++++
 spx-gui/.env                                  |  17 +-
 spx-gui/.env.production                       |   6 +-
 spx-gui/.env.staging                          |  13 +-
 spx-gui/package-lock.json                     |  33 --
 spx-gui/package.json                          |   3 +-
 spx-gui/sign-in/index.html                    |  24 +
 spx-gui/src/account-web/App.vue               |  17 +
 spx-gui/src/account-web/apis/account.ts       |  86 ++++
 spx-gui/src/account-web/assets/bg-mobile.svg  |   8 +
 spx-gui/src/account-web/assets/bg.svg         | 121 +++++
 .../src/account-web/assets/icons/eye-off.svg  |   3 +
 spx-gui/src/account-web/assets/icons/eye.svg  |   3 +
 spx-gui/src/account-web/assets/icons/lock.svg |   3 +
 spx-gui/src/account-web/assets/icons/user.svg |   3 +
 .../assets/illustration-mobile.svg            |  83 ++++
 .../src/account-web/assets/illustration.svg   |  76 ++++
 spx-gui/src/account-web/assets/logo.svg       |   8 +
 .../assets/providers/github-colorful.svg      |   3 +
 .../assets/providers/github-monochrome.svg    |   3 +
 .../assets/providers/google-colorful.svg      |   6 +
 .../assets/providers/google-monochrome.svg    |   6 +
 .../assets/providers/qq-colorful.svg          |   8 +
 .../assets/providers/qq-monochrome.svg        |   3 +
 .../assets/providers/wechat-colorful.svg      |   4 +
 .../assets/providers/wechat-monochrome.svg    |   4 +
 .../assets/providers/x-colorful.svg           |   3 +
 .../assets/providers/x-monochrome.svg         |   3 +
 .../login/AccountSessionSection.vue           |  48 ++
 .../components/login/InputWithIcon.vue        | 101 +++++
 .../components/login/LoginButton.vue          |  66 +++
 .../components/login/LoginForm.vue            | 173 +++++++
 .../components/login/LoginOptionsSection.vue  |  35 ++
 .../components/login/PasswordLoginSection.vue | 146 ++++++
 .../components/login/ProviderLoginButton.vue  |  87 ++++
 .../components/login/UsernamePasswordLink.vue |  24 +
 .../login/XBuilderLoginPageMobile.vue         |  46 ++
 .../components/login/XBuilderLoginPagePc.vue  |  52 +++
 spx-gui/src/account-web/main.ts               |  20 +
 spx-gui/src/account-web/pages/sign-in.vue     |  30 ++
 spx-gui/src/account-web/router.ts             |  27 ++
 spx-gui/src/account-web/utils/oauth.test.ts   |  44 ++
 spx-gui/src/account-web/utils/oauth.ts        |  60 +++
 spx-gui/src/apis/account-oauth.test.ts        | 105 +++++
 spx-gui/src/apis/account-oauth.ts             |  66 +++
 spx-gui/src/apis/common/client.test.ts        |  28 ++
 spx-gui/src/apis/common/client.ts             |  36 ++
 .../src/components/navbar/NavbarProfile.vue   |   6 +-
 spx-gui/src/pages/sign-in/callback.vue        |  10 +-
 spx-gui/src/router.ts                         |   5 +-
 spx-gui/src/stores/user/signed-in.test.ts     | 230 ++++++++++
 spx-gui/src/stores/user/signed-in.ts          | 167 +++++--
 spx-gui/src/utils/env.ts                      |  11 +-
 spx-gui/vite.config.account-web.ts            | 118 +++++
 54 files changed, 2609 insertions(+), 110 deletions(-)
 create mode 100644 docs/develop/account-web-sign-in-migration.md
 create mode 100644 spx-gui/sign-in/index.html
 create mode 100644 spx-gui/src/account-web/App.vue
 create mode 100644 spx-gui/src/account-web/apis/account.ts
 create mode 100644 spx-gui/src/account-web/assets/bg-mobile.svg
 create mode 100644 spx-gui/src/account-web/assets/bg.svg
 create mode 100644 spx-gui/src/account-web/assets/icons/eye-off.svg
 create mode 100644 spx-gui/src/account-web/assets/icons/eye.svg
 create mode 100644 spx-gui/src/account-web/assets/icons/lock.svg
 create mode 100644 spx-gui/src/account-web/assets/icons/user.svg
 create mode 100644 spx-gui/src/account-web/assets/illustration-mobile.svg
 create mode 100644 spx-gui/src/account-web/assets/illustration.svg
 create mode 100644 spx-gui/src/account-web/assets/logo.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/github-colorful.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/github-monochrome.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/google-colorful.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/google-monochrome.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/qq-colorful.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/qq-monochrome.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/wechat-colorful.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/wechat-monochrome.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/x-colorful.svg
 create mode 100644 spx-gui/src/account-web/assets/providers/x-monochrome.svg
 create mode 100644 spx-gui/src/account-web/components/login/AccountSessionSection.vue
 create mode 100644 spx-gui/src/account-web/components/login/InputWithIcon.vue
 create mode 100644 spx-gui/src/account-web/components/login/LoginButton.vue
 create mode 100644 spx-gui/src/account-web/components/login/LoginForm.vue
 create mode 100644 spx-gui/src/account-web/components/login/LoginOptionsSection.vue
 create mode 100644 spx-gui/src/account-web/components/login/PasswordLoginSection.vue
 create mode 100644 spx-gui/src/account-web/components/login/ProviderLoginButton.vue
 create mode 100644 spx-gui/src/account-web/components/login/UsernamePasswordLink.vue
 create mode 100644 spx-gui/src/account-web/components/login/XBuilderLoginPageMobile.vue
 create mode 100644 spx-gui/src/account-web/components/login/XBuilderLoginPagePc.vue
 create mode 100644 spx-gui/src/account-web/main.ts
 create mode 100644 spx-gui/src/account-web/pages/sign-in.vue
 create mode 100644 spx-gui/src/account-web/router.ts
 create mode 100644 spx-gui/src/account-web/utils/oauth.test.ts
 create mode 100644 spx-gui/src/account-web/utils/oauth.ts
 create mode 100644 spx-gui/src/apis/account-oauth.test.ts
 create mode 100644 spx-gui/src/apis/account-oauth.ts
 create mode 100644 spx-gui/src/stores/user/signed-in.test.ts
 create mode 100644 spx-gui/vite.config.account-web.ts

diff --git a/docs/develop/account-web-sign-in-migration.md b/docs/develop/account-web-sign-in-migration.md
new file mode 100644
index 0000000000..a853bf7dec
--- /dev/null
+++ b/docs/develop/account-web-sign-in-migration.md
@@ -0,0 +1,428 @@
+# 第一阶段前端迁移方案
+
+本文档覆盖第一阶段的两条并行工作流：
+
+1. `Account Web`：把 Casdoor 中的 `XBuilderLoginPage` 迁移到 Builder 仓库，并接入新的 XBuilder Account API。
+2. `spx-gui`：把主站从当前 Casdoor 接入切到新的 Account OAuth 流程。
+
+## 总体范围
+
+### 包含
+
+- `account.xbuilder.com/sign-in` 登录页迁移
+- 第三方身份登录入口
+- 用户名密码登录（仅管理员托管密码）
+- 基于已有 account session 的“继续使用当前账号”
+- “切换其它账号登录”
+- 主站 OAuth `PAR / authorize / token / revoke` 对接
+- 承接 Bearer token 的产品 API / backend 侧继续通过 introspection 校验 access token
+
+### 不包含
+
+- prompt page
+- hosted interaction（绑定确认、身份冲突、补充信息）
+- provider link / unlink
+- 公开注册
+- 全局切账号
+
+## 1. `Account Web` sign-in 登录页迁移
+
+### 1.1 目标
+
+- 承载 `account.xbuilder.com/sign-in`
+- 替代 Casdoor 中的 `XBuilderLoginPage`
+- 支持：
+  - 第三方身份登录
+  - 用户名密码登录
+  - 已有 account session 的继续登录
+  - 切换其它账号登录
+- 登录完成后继续 `GET /account/oauth/authorize`
+
+### 1.2 页面状态机
+
+```mermaid
+stateDiagram-v2
+    [*] --> Bootstrapping
+
+    Bootstrapping --> ExistingSession: GET /account/session = 200
+    Bootstrapping --> SignedOut: GET /account/session = 401
+    Bootstrapping --> Error: init failed
+
+    ExistingSession --> Authorizing: continue with current account
+    ExistingSession --> SwitchingAccount: switch account
+    SwitchingAccount --> SignedOut: DELETE /account/session = 204
+    SwitchingAccount --> Error: delete failed
+
+    SignedOut --> ProviderRedirecting: click provider
+    SignedOut --> PasswordSubmitting: submit username/password
+
+    PasswordSubmitting --> Authorizing: POST /account/session = 201
+    PasswordSubmitting --> Error: sign-in failed
+
+    ProviderRedirecting --> CallbackHandling: provider callback
+    CallbackHandling --> ExistingSession: callback created/reused account session
+    CallbackHandling --> Error: provider callback failed
+
+    Authorizing --> AppCallbackRedirect: GET /account/oauth/authorize = 302
+    Authorizing --> Error: authorize failed
+
+    Error --> SignedOut: retry
+```
+
+### 1.3 接口调用时序图
+
+#### 1.3.1 已有 session，继续当前账号
+
+```mermaid
+sequenceDiagram
+    participant Browser as Browser
+    participant AccountWeb as Account Web
+    participant AccountAPI as Account API
+    participant App as App callback
+
+    Browser->>AccountWeb: Open /sign-in?clientID&requestURI
+    AccountWeb->>AccountAPI: GET /account/session
+    AccountAPI-->>AccountWeb: 200 CurrentAccountSession
+    AccountWeb-->>Browser: Render current user card
+    Browser->>AccountWeb: Click continue
+    AccountWeb->>AccountAPI: GET /account/oauth/authorize?client_id&request_uri
+    AccountAPI-->>Browser: 302 redirect to app callback with code,state
+    Browser->>App: Deliver code,state
+```
+
+#### 1.3.2 切换其它账号后重新登录
+
+```mermaid
+sequenceDiagram
+    participant Browser as Browser
+    participant AccountWeb as Account Web
+    participant AccountAPI as Account API
+    participant Provider as Identity Provider
+    participant App as App callback
+
+    Browser->>AccountWeb: Open /sign-in?clientID&requestURI
+    AccountWeb->>AccountAPI: GET /account/session
+    AccountAPI-->>AccountWeb: 200 CurrentAccountSession
+    Browser->>AccountWeb: Click switch account
+    AccountWeb->>AccountAPI: DELETE /account/session
+    AccountAPI-->>AccountWeb: 204
+    AccountWeb->>AccountAPI: GET /account/identity-providers
+    AccountAPI-->>AccountWeb: providers
+    Browser->>AccountWeb: Click provider
+    AccountWeb->>AccountAPI: GET /account/identity-providers/{provider}/authorize
+    AccountAPI-->>Browser: 302 redirect to provider
+    Provider-->>AccountAPI: callback
+    AccountAPI-->>Browser: 302 back to hosted sign-in / continue flow
+    AccountWeb->>AccountAPI: GET /account/oauth/authorize?client_id&request_uri
+    AccountAPI-->>Browser: 302 redirect to app callback with code,state
+    Browser->>App: Deliver code,state
+```
+
+#### 1.3.3 用户名密码登录
+
+```mermaid
+sequenceDiagram
+    participant Browser as Browser
+    participant AccountWeb as Account Web
+    participant AccountAPI as Account API
+    participant App as App callback
+
+    Browser->>AccountWeb: Open /sign-in?clientID&requestURI
+    AccountWeb->>AccountAPI: GET /account/session
+    AccountAPI-->>AccountWeb: 401
+    AccountWeb->>AccountAPI: GET /account/identity-providers
+    AccountAPI-->>AccountWeb: providers
+    Browser->>AccountWeb: Submit username/password
+    AccountWeb->>AccountAPI: POST /account/session
+    AccountAPI-->>AccountWeb: 201 CurrentAccountSession + Set-Cookie
+    AccountWeb->>AccountAPI: GET /account/oauth/authorize?client_id&request_uri
+    AccountAPI-->>Browser: 302 redirect to app callback with code,state
+    Browser->>App: Deliver code,state
+```
+
+### 1.4 当前页面结构
+
+当前实现已经把 `Account Web` 作为 `spx-gui` 内的独立入口落地，而不是继续依赖 Casdoor 项目。
+
+```text
+spx-gui/src/account-web/
+├── main.ts
+├── App.vue
+├── pages/
+│   └── sign-in.vue
+├── apis/
+│   └── account.ts
+├── utils/
+│   └── oauth.ts
+└── components/
+    └── login/
+        ├── AccountSessionSection.vue
+        ├── InputWithIcon.vue
+        ├── LoginButton.vue
+        ├── LoginForm.vue
+        ├── LoginOptionsSection.vue
+        ├── PasswordLoginSection.vue
+        ├── ProviderLoginButton.vue
+        ├── UsernamePasswordLink.vue
+        ├── XBuilderLoginPageMobile.vue
+        └── XBuilderLoginPagePc.vue
+```
+
+### 1.5 当前实现涉及的文件
+
+#### 已新增
+
+- `spx-gui/sign-in/index.html`
+  - `Account Web` 独立 HTML 入口
+- `spx-gui/src/account-web/main.ts`
+  - `Account Web` 独立入口
+- `spx-gui/src/account-web/App.vue`
+  - `Account Web` 根组件
+- `spx-gui/src/account-web/pages/sign-in.vue`
+  - 登录页，承载状态机
+- `spx-gui/src/account-web/apis/account.ts`
+  - 封装 `GET/DELETE /account/session`、`GET /account/identity-providers`、`POST /account/session`
+- `spx-gui/src/account-web/utils/oauth.ts`
+  - 解析 `client_id`、`request_uri`，拼接同源 `/api/oauth/authorize` 和 provider authorize URL，并维护 pending authorization 标记
+- `spx-gui/src/account-web/components/login/AccountSessionSection.vue`
+  - 展示当前账号、继续登录、切换账号
+- `spx-gui/src/account-web/components/login/LoginOptionsSection.vue`
+  - provider 按钮列表和用户名密码入口
+- `spx-gui/src/account-web/components/login/PasswordLoginSection.vue`
+  - 用户名密码登录表单
+- `spx-gui/src/account-web/components/login/LoginForm.vue`
+  - 登录页状态机与 API 调用编排
+- `spx-gui/vite.config.account-web.ts`
+  - `Account Web` 独立构建配置、同源 `/api` 代理和 Vercel rewrite
+
+#### 已改造
+
+- `spx-gui/src/utils/env.ts`
+  - 增加主站 OAuth 和 `Account Web` 需要的环境变量
+- `spx-gui/src/apis/account-oauth.ts`
+  - 封装 `POST /account/oauth/par`、`POST /account/oauth/token`、`POST /account/oauth/revoke`
+- `spx-gui/src/stores/user/signed-in.ts`
+  - 主站切到新的 Account OAuth 流程
+- `spx-gui/src/pages/sign-in/callback.vue`
+  - callback 页改为处理 authorization code exchange
+- `spx-gui/src/router.ts`
+  - `requiresSignIn` 场景改为走新的 `initiateSignIn()`
+
+### 1.6 接口清单
+
+#### `Account Web` 直接调用
+
+- `GET /account/session`
+- `DELETE /account/session`
+- `GET /account/identity-providers`
+- `POST /account/session`
+- `GET /account/oauth/authorize`
+
+#### 浏览器跳转链路使用
+
+- `GET /account/identity-providers/{provider}/authorize`
+- `GET /account/identity-providers/{provider}/callback`
+- `POST /account/identity-providers/{provider}/callback`
+
+### 1.7 页面交互约定
+
+#### 已有有效 session
+
+登录页优先展示当前账号卡片：
+
+- 主按钮：继续使用当前账号
+- 次按钮：切换其它账号登录
+
+#### 切换其它账号登录
+
+第一阶段只清除 `Account Web` 的当前 `account session`：
+
+- 调 `DELETE /account/session`
+- 不要求同步退出其它应用
+- 不做全局切账号
+
+### 1.8 实现注意点
+
+- 不读取浏览器 cookie；统一通过 `GET /account/session` 判断当前登录态
+- `continue` 直接进入 `GET /account/oauth/authorize`
+- `switch account` 必须先 `DELETE /account/session`，避免仍复用旧 session
+- 第一阶段不复刻 Casdoor 的 `prompt page` / `forget` / `signup` 分支
+
+## 2. `spx-gui` 主站 OAuth 接入
+
+### 2.1 目标
+
+这一部分覆盖 `xbuilder.com` 主站如何从当前 Casdoor 接入切到新的 Account OAuth 流程。默认按 `Account-issued token model` 落地。
+
+### 2.2 主链路
+
+```mermaid
+sequenceDiagram
+    participant UI as spx-gui frontend
+    participant Account as Account API
+    participant SignIn as Account Web
+    participant ProductBackend as Product API
+
+    UI->>Account: POST /account/oauth/par
+    Account-->>UI: request_uri
+    UI->>Account: GET /account/oauth/authorize?client_id&request_uri
+    Account-->>SignIn: 302 /sign-in?clientID&requestURI (if sign-in required)
+    SignIn->>Account: Complete sign-in / authorize
+    Account-->>UI: Redirect to /sign-in/callback?code&state
+    UI->>Account: POST /account/oauth/token
+    Account-->>UI: access_token + refresh_token
+    UI->>Product: Bearer access token
+    ProductBackend->>Account: POST /account/oauth/introspect
+    Account-->>Product: active, sub, client_id, scope
+```
+
+### 2.3 前端状态调整
+
+- 不再使用 `casdoor-js-sdk`
+- 不再从 access token decode 用户名
+- OAuth 一次性中间态短期保存在 `sessionStorage`：
+  - `state`
+  - `codeVerifier`
+  - `returnTo`
+- 当前用户身份以 `/user` 或后端返回的 canonical user 为准，不以 token payload 为准
+
+### 2.4 当前落地的文件改造
+
+#### 重点改造
+
+- `spx-gui/src/stores/user/signed-in.ts`
+  - 移除 `casdoor-js-sdk`
+  - 增加 `createAuthorizationRequest()`：生成 PKCE、state，调用 `POST /account/oauth/par`，并生成 `GET /account/oauth/authorize` 跳转地址
+  - 增加 `completeAuthorizationCodeSignIn()`：在 callback 页用 `code + code_verifier` 调 `POST /account/oauth/token`
+  - 增加 `refreshAccessToken()`：用 `refresh_token` 调 `POST /account/oauth/token`
+  - 增加 `revokeTokens()`：调用 `POST /account/oauth/revoke`
+
+- `spx-gui/src/pages/sign-in/callback.vue`
+  - 从只做 Casdoor `exchangeForAccessToken()`
+  - 改为：读取 `code/state` → 校验 state → 读取 PKCE verifier → 调 token exchange → 恢复 `returnTo`
+
+- `spx-gui/src/utils/env.ts`
+  - 增加主站在新账号系统里的应用标识 `VITE_ACCOUNT_OAUTH_CLIENT_ID`
+  - 主站在 `PAR` 之后直接跳转 `GET /account/oauth/authorize`，不自行拼接 `Account Web` 地址
+  - `Account Web` 自身走同源 `/api/*` facade，不额外暴露独立的 Account API base URL
+  - `Account Web` 本地环境联调暂时通过 `VITE_ACCOUNT_WEB_TEST_ORIGIN` 复用测试环境地址，用于代理请求的 `Origin` header 和 Vite `allowedHosts` 等绕过配置
+
+#### 小范围联动
+
+- `spx-gui/src/router.ts`
+  - 保留 `/sign-in/callback`
+  - `requiresSignIn` 场景改为走新的 `initiateSignIn()`
+
+- `spx-gui/src/pages/sign-in/token.vue`
+  - 当前是 JWT token 手动粘贴登录页
+  - 若不再需要调试入口，可标记废弃或后续删除
+
+- `spx-gui/package.json`
+  - 已移除 `casdoor-js-sdk`
+  - 已移除 `jwt-decode`
+
+### 2.5 推荐实现拆分
+
+#### 2.5.1 发起登录
+
+在 `signed-in.ts` 提供统一入口：
+
+- 生成 `state`
+- 生成 PKCE `code_verifier` / `code_challenge`
+- 调 `POST /account/oauth/par`
+- 将 `state`、`code_verifier`、`returnTo` 保存到 `sessionStorage`
+- 浏览器跳转到 `GET /account/oauth/authorize?client_id=...&request_uri=...`
+- 若需要 hosted sign-in，则由 `/account/oauth/authorize` 再 `302` 到 `account.xbuilder.com/sign-in`
+
+#### 2.5.2 callback 页收尾
+
+`/sign-in/callback` 页面负责：
+
+- 读取 `code`、`state`
+- 校验本地保存的 `state`
+- 读取 `code_verifier`
+- 调 `POST /account/oauth/token`
+- 保存 `access_token` / `refresh_token`
+- 清理一次性 OAuth 中间状态
+- `window.location.replace(returnTo ?? '/')`
+
+#### 2.5.3 token 刷新
+
+- access token 接近过期时主动刷新
+- 同一运行环境合并并发刷新
+- 刷新失败时清空本地 token；后续再次访问受保护页面时重新进入 hosted sign-in
+
+#### 2.5.4 退出登录
+
+主站退出第一阶段建议至少做两步：
+
+- 清理本地 `access_token` / `refresh_token`
+- 如需撤销当前 grant 下 token，再调 `POST /account/oauth/revoke`
+
+是否同时退出 `account session`，由产品交互决定；第一阶段不强制联动 `Account Web`。
+
+### 2.6 与当前实现的对应关系
+
+| 当前文件 / 逻辑 | 第一阶段替换为 |
+| - | - |
+| `casdoorSdk.signin_redirect()` | `POST /account/oauth/par` + 跳转 `GET /account/oauth/authorize` |
+| `casdoorSdk.exchangeForAccessToken()` | `POST /account/oauth/token` |
+| `casdoorSdk.refreshAccessToken()` | `POST /account/oauth/token` with `grant_type=refresh_token` |
+| JWT decode username | 删除；改为依赖 `/user` |
+| Casdoor env | Account OAuth env |
+
+### 2.7 验收清单
+
+- 未登录访问受保护页面会先进入 `GET /account/oauth/authorize`，并在需要时跳到新的 hosted sign-in
+- callback 能成功换取 token 并恢复原页面
+- access token 可自动刷新
+- 刷新失败时会清理本地登录态，后续受保护页面访问会重新进入 hosted sign-in
+- 承接前端 Bearer token 的产品 API / backend 可以接受新 token，并通过 introspection 校验
+- 前端不再依赖 Casdoor SDK / Casdoor JWT 用户名解析
+
+## 3. 任务拆分 checklist
+
+### 3.1 `Account Web`
+
+- [x] 在 `spx-gui` 中增加 `Account Web` 独立构建入口
+- [x] 新增登录页，适配 PC / mobile
+- [x] 登录页支持“继续使用当前账号”/“切换其它账号登录”
+- [x] 登录页支持第三方身份登录
+- [x] 登录页支持用户名密码登录
+- [x] 对接 `GET /account/session`
+- [x] 对接 `DELETE /account/session`
+- [x] 对接 `GET /account/identity-providers`
+- [x] 对接 `POST /account/session`
+- [x] 对接 `GET /account/oauth/authorize`
+- [x] 对接 `GET /account/identity-providers/{provider}/authorize`
+
+### 3.2 `spx-gui`
+
+- [x] 在 `spx-gui/src/stores/user/signed-in.ts` 移除 `casdoor-js-sdk`
+- [x] 在 `spx-gui/src/stores/user/signed-in.ts` 移除 JWT decode 用户名逻辑
+- [x] 实现 `createAuthorizationRequest()`
+- [x] 实现 `completeAuthorizationCodeSignIn()`
+- [x] 实现 `refreshAccessToken()`
+- [x] 实现 `revokeTokens()`
+- [x] 用 `POST /account/oauth/par` + `GET /account/oauth/authorize` 发起登录
+- [x] 用 `POST /account/oauth/token` 完成 code exchange
+- [x] 用 `POST /account/oauth/token` 完成 refresh token exchange
+- [x] 在 `/sign-in/callback` 页面接入新 callback 收尾逻辑
+- [x] 在 `router.ts` 中让 `requiresSignIn` 走新的 `initiateSignIn()`
+- [x] 更新 `env.ts`，移除 `VITE_CASDOOR_*`
+- [ ] 评估并处理 `src/pages/sign-in/token.vue`
+- [x] 移除 `package.json` 中的 `casdoor-js-sdk`
+- [x] 移除 `package.json` 中的 `jwt-decode`
+
+### 3.3 联调与验收
+
+- [ ] 验证未登录进入受保护页面会先进入 `/account/oauth/authorize`，并在需要时跳到 Account Web
+- [ ] 验证已有 account session 时可直接 continue
+- [ ] 验证 switch account 只影响 `Account Web` 当前 session
+- [ ] 验证用户名密码登录可完成 OAuth authorize
+- [ ] 验证第三方身份登录可完成 OAuth authorize
+- [ ] 验证 `/sign-in/callback` 可恢复 `returnTo`
+- [ ] 验证 access token 自动刷新
+- [ ] 验证刷新失败会重新进入 hosted sign-in
+- [ ] 验证承接前端 Bearer token 的产品 API / backend 已接入 `/account/oauth/introspect`
+- [ ] 验证前端运行时不再依赖 Casdoor SDK / Casdoor JWT
diff --git a/spx-gui/.env b/spx-gui/.env
index 4393234404..06185c6b6e 100644
--- a/spx-gui/.env
+++ b/spx-gui/.env
@@ -36,13 +36,18 @@ VITE_USERCONTENT_BUCKET=""
 # NOTE: Must be synchronized with `KODO_BUCKET_REGION` in spx-backend `.env` file.
 VITE_USERCONTENT_UPLOAD_BASE_URL=""
 
-# Casdoor configuration.
+# Account OAuth configuration for the main-site hosted sign-in flow.
 #
-# Required.
-VITE_CASDOOR_ENDPOINT=""
-VITE_CASDOOR_CLIENT_ID=""
-VITE_CASDOOR_APP_NAME=""
-VITE_CASDOOR_ORGANIZATION_NAME=""
+# Required when enabling the new Account OAuth flow.
+VITE_ACCOUNT_OAUTH_CLIENT_ID=""
+
+
+# Account-web test environment origin.
+#
+# Local account-web development may temporarily reuse this value for the proxied
+# `/api/*` request `Origin` header and Vite `allowedHosts`, until local debugging
+# no longer needs these workarounds.
+VITE_ACCOUNT_WEB_TEST_ORIGIN=""
 
 # Feature flags, all boolean (true/false), with default values set here.
 #
diff --git a/spx-gui/.env.production b/spx-gui/.env.production
index 2f9e0647a9..b49914146b 100644
--- a/spx-gui/.env.production
+++ b/spx-gui/.env.production
@@ -13,9 +13,7 @@ VITE_USERCONTENT_BASE_URL="https://builder-usercontent.gopluscdn.com"
 VITE_USERCONTENT_BUCKET="goplus-builder-usercontent"
 VITE_USERCONTENT_UPLOAD_BASE_URL="https://upload-na0.qiniup.com"
 
-VITE_CASDOOR_ENDPOINT="https://acc.xbuilder.com"
-VITE_CASDOOR_CLIENT_ID="4ff910257e9cdd89b6b8"
-VITE_CASDOOR_APP_NAME="goplus-builder"
-VITE_CASDOOR_ORGANIZATION_NAME="GoPlus"
+# TODO: Update to the correct production clientID when it's ready.
+VITE_ACCOUNT_OAUTH_CLIENT_ID="2"
 
 VITE_SENTRY_DSN="https://0d463740215eb87f7e06f6572d64c93e@o4509472134987776.ingest.us.sentry.io/4509472136167424"
diff --git a/spx-gui/.env.staging b/spx-gui/.env.staging
index 623d6bf5f2..d20d96a1a7 100644
--- a/spx-gui/.env.staging
+++ b/spx-gui/.env.staging
@@ -1,16 +1,17 @@
 # Config for env staging
 
-VITE_API_BASE_URL="https://goplus-builder-api.qiniu.io"
-VITE_VERCEL_PROXIED_API_BASE_URL="https://goplus-builder-api.qiniu.io"
+# VITE_API_BASE_URL="https://goplus-builder-api.qiniu.io"
+# VITE_VERCEL_PROXIED_API_BASE_URL="https://goplus-builder-api.qiniu.io"
+VITE_API_BASE_URL="https://goplus-builder-api-test-acc.qiniu.io"
+VITE_VERCEL_PROXIED_API_BASE_URL="https://goplus-builder-api-test-acc.qiniu.io"
 
 VITE_USERCONTENT_BASE_URL="https://xbuilder-usercontent-test.gopluscdn.com"
 VITE_USERCONTENT_BUCKET="xbuilder-usercontent-test"
 VITE_USERCONTENT_UPLOAD_BASE_URL="https://upload.qiniup.com"
 
-VITE_CASDOOR_ENDPOINT="https://goplus-casdoor.qiniu.io"
-VITE_CASDOOR_CLIENT_ID="389313df51ffd2093b2f"
-VITE_CASDOOR_APP_NAME="goplus-builder"
-VITE_CASDOOR_ORGANIZATION_NAME="GoPlus"
+VITE_ACCOUNT_OAUTH_CLIENT_ID="2"
+
+# VITE_ACCOUNT_WEB_TEST_ORIGIN="https://goplus-builder-account.qiniu.io"
 
 VITE_SENTRY_DSN="https://0d463740215eb87f7e06f6572d64c93e@o4509472134987776.ingest.us.sentry.io/4509472136167424"
 
diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 98f3e09be4..dedc6280ac 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -32,7 +32,6 @@
         "bowser": "^2.14.1",
         "browserslist": "^4.28.0",
         "browserslist-to-esbuild": "^2.1.1",
-        "casdoor-js-sdk": "^0.16.0",
         "cropperjs": "^2.1.0",
         "csv-stringify": "^6.5.2",
         "dayjs": "^1.11.10",
@@ -3894,15 +3893,6 @@
       ],
       "license": "CC-BY-4.0"
     },
-    "node_modules/casdoor-js-sdk": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/casdoor-js-sdk/-/casdoor-js-sdk-0.16.0.tgz",
-      "integrity": "sha512-K5ZKaSGxzAgLzYGlp444OnhZ0nAZqnvlq5/wPhpQ0HCU0uwk0NIt+KC4LC+qUdnRxaQN6f1LP8wR/xsTZQBWVQ==",
-      "dependencies": {
-        "js-pkce": "^1.3.0",
-        "jwt-decode": "^4.0.0"
-      }
-    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -4074,11 +4064,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/crypto-js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
-      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5516,14 +5501,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/js-pkce": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/js-pkce/-/js-pkce-1.4.0.tgz",
-      "integrity": "sha512-ztPzIgjQ+hY2uvwsTi625Yt/123NODAInGg2Y7aQLlKpNpD16A3WePjKyY2+B8WCoZy1cGG4xC9C68Dt2ZB8iQ==",
-      "dependencies": {
-        "crypto-js": "^4.0.0"
-      }
-    },
     "node_modules/js-yaml": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
@@ -5567,16 +5544,6 @@
       "integrity": "sha512-1IynUYEc/HAwxhi3WDpIpxJbZpMCvvrrmZVqvj9EhpvbH8lls7HhdhiByjL7DkAaWlLIzpC0Xc/VPvy/UxLNjA==",
       "license": "MIT"
     },
-    "node_modules/jwt-decode": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
-      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index 3c1f080953..fe99be8625 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -9,6 +9,8 @@
     "dev": "vite",
     "build": "./build-tutorial-books.sh && vue-tsc --build --force && NODE_ENV=production vite build --mode ${NODE_ENV:-production}",
     "preview": "vite preview",
+    "dev:account-web": "vite --config vite.config.account-web.ts --port 5174",
+    "build:account-web": "vue-tsc --build --force && NODE_ENV=production vite build --config vite.config.account-web.ts --mode ${NODE_ENV:-production}",
     "type-check": "vue-tsc --build --force",
     "format-check": "prettier --check ./src",
     "format": "prettier --write ./src",
@@ -39,7 +41,6 @@
     "bowser": "^2.14.1",
     "browserslist": "^4.28.0",
     "browserslist-to-esbuild": "^2.1.1",
-    "casdoor-js-sdk": "^0.16.0",
     "cropperjs": "^2.1.0",
     "csv-stringify": "^6.5.2",
     "dayjs": "^1.11.10",
diff --git a/spx-gui/sign-in/index.html b/spx-gui/sign-in/index.html
new file mode 100644
index 0000000000..33db88a7ca
--- /dev/null
+++ b/spx-gui/sign-in/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>XBuilder Account</title>
+    <link rel="icon" href="/src/assets/logo.svg" />
+    <style>
+      @layer theme, base, components, utilities;
+
+      html,
+      body,
+      #app {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="../src/account-web/main.ts"></script>
+  </body>
+</html>
+
diff --git a/spx-gui/src/account-web/App.vue b/spx-gui/src/account-web/App.vue
new file mode 100644
index 0000000000..60eab2f436
--- /dev/null
+++ b/spx-gui/src/account-web/App.vue
@@ -0,0 +1,17 @@
+<template>
+  <UIConfigProvider :config="config">
+    <RouterView />
+  </UIConfigProvider>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterView } from 'vue-router'
+
+import { getUIConfig } from '@/setup'
+import { useI18n } from '@/utils/i18n'
+import { type Config, UIConfigProvider } from '@/components/ui'
+
+const i18n = useI18n()
+const config = computed<Config>(() => getUIConfig(i18n))
+</script>
diff --git a/spx-gui/src/account-web/apis/account.ts b/spx-gui/src/account-web/apis/account.ts
new file mode 100644
index 0000000000..e3a71acea6
--- /dev/null
+++ b/spx-gui/src/account-web/apis/account.ts
@@ -0,0 +1,86 @@
+import { Client } from '@/apis/common/client'
+import { ApiException, ApiExceptionCode } from '@/apis/common/exception'
+import type { OAuthContext } from '../utils/oauth'
+
+export interface AccountUser {
+  id: string
+  createdAt: string
+  updatedAt: string
+  username: string
+  displayName: string
+  avatar: string
+}
+
+export interface CurrentAccountSession {
+  id: string
+  createdAt: string
+  updatedAt: string
+  lastUsedAt: string
+  expiresAt: string
+  current: boolean
+  user: AccountUser
+  userAgent?: string | null
+  ipAddress?: string | null
+}
+
+export interface IdentityProvider {
+  name: string
+  displayName: string
+  enabled: boolean
+}
+
+interface IdentityProviderListResponse {
+  data: IdentityProvider[]
+}
+
+function filterEnabledIdentityProviders(providers: IdentityProvider[]): IdentityProvider[] {
+  return providers.filter((provider) => provider.enabled)
+}
+
+const client = new Client({ baseUrl: '/api' })
+
+function isUnauthorizedError(error: unknown) {
+  return (
+    (error instanceof ApiException && error.code === ApiExceptionCode.errorUnauthorized) ||
+    (error instanceof Error && error.message.includes('status 401 for api call:'))
+  )
+}
+
+export async function getCurrentAccountSession(): Promise<CurrentAccountSession | null> {
+  try {
+    return (await client.get('/session')) as CurrentAccountSession
+  } catch (error) {
+    if (isUnauthorizedError(error)) return null
+    throw error
+  }
+}
+
+export async function deleteCurrentAccountSession(): Promise<void> {
+  await client.delete('/session')
+}
+
+export async function getIdentityProviders(context?: OAuthContext): Promise<IdentityProvider[]> {
+  const response = (await client.get(
+    '/identity-providers',
+    context == null
+      ? undefined
+      : {
+          clientID: context.clientId,
+          requestURI: context.requestUri
+        }
+  )) as IdentityProviderListResponse
+  return filterEnabledIdentityProviders(response.data)
+}
+
+export interface PasswordSignInPayload {
+  username: string
+  password: string
+}
+
+export async function createPasswordSession(payload: PasswordSignInPayload): Promise<CurrentAccountSession> {
+  return (await client.post('/session', {
+    method: 'password',
+    username: payload.username,
+    password: payload.password
+  })) as CurrentAccountSession
+}
diff --git a/spx-gui/src/account-web/assets/bg-mobile.svg b/spx-gui/src/account-web/assets/bg-mobile.svg
new file mode 100644
index 0000000000..4f6c0f55c4
--- /dev/null
+++ b/spx-gui/src/account-web/assets/bg-mobile.svg
@@ -0,0 +1,8 @@
+<svg width="390" height="844" viewBox="0 0 390 844" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="162" cy="748" r="295" fill="#D2EEF9" opacity=".56" filter="url(#f)"/>
+  <defs>
+    <filter id="f" x="-433" y="153" width="1190" height="1190" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="150"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/spx-gui/src/account-web/assets/bg.svg b/spx-gui/src/account-web/assets/bg.svg
new file mode 100644
index 0000000000..674cf7aec2
--- /dev/null
+++ b/spx-gui/src/account-web/assets/bg.svg
@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1016" viewBox="0 0 1440 1016" fill="none">
+  <g opacity=".7">
+    <mask id="m" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-16" y="-65" width="1456" height="1081">
+      <rect x="-16" y="-65" width="1456" height="1081" fill="#fff"/>
+    </mask>
+    <g mask="url(#m)">
+      <g filter="url(#f0)">
+        <path d="M-50.3 365.04L204.06 365.04C204.06 365.04 712.78 961.64 -50.3 1096.64L-50.3 365.04Z" fill="#EEF3FF"/>
+      </g>
+      <g filter="url(#f1)">
+        <path d="M1461.27 1041.13L-15.53 1041.13C-15.53 1041.13 1067.73 192.24 1311.07 553.35C1541.3 895.02 1461.27 1041.13 1461.27 1041.13Z" fill="#5280FF" fill-opacity=".06"/>
+      </g>
+      <g filter="url(#f2)">
+        <path d="M660.51 671.11L1172.88 1181.55C1172.88 1181.55 799.42 870.67 464.72 1161.2L660.51 671.11Z" fill="#0FF" fill-opacity=".04"/>
+      </g>
+      <g filter="url(#f3)">
+        <path d="M219.09 477.35L-410.43 114.46C-410.43 114.46 32.28 319.87 278.97 -45.78L219.09 477.35Z" fill="#0FF" fill-opacity=".04"/>
+      </g>
+      <g filter="url(#f4)">
+        <path d="M-26.17 337.65L-26.17 -67.41C-26.17 -67.41 232.72 229.71 122.59 296.45C18.39 359.6 -26.17 337.65 -26.17 337.65Z" fill="#5280FF" fill-opacity=".08"/>
+      </g>
+    </g>
+    <g opacity=".6" stroke="#fff" stroke-width=".99">
+      <path d="M-224.41 1089.67C-182.58 1044.19 -13.08 804.26 291.49 804.26C672.2 804.26 884.98 1363.31 1459.08 901.49"/>
+      <path d="M-224.41 588.17C-182.58 542.7 -13.08 302.77 291.49 302.77C672.2 302.77 884.98 861.82 1459.08 400"/>
+      <path d="M-224.41 1073.49C-182.58 1028.01 -13.08 788.09 291.49 788.09C672.2 788.09 884.98 1347.13 1459.08 885.31"/>
+      <path d="M-224.41 1057.31C-182.58 1011.84 -13.08 771.91 291.49 771.91C672.2 771.91 884.98 1330.95 1459.08 869.13"/>
+      <path d="M-224.41 1041.13C-182.58 995.66 -13.08 755.73 291.49 755.73C672.2 755.73 884.98 1314.77 1459.08 852.96"/>
+      <path d="M-224.41 1024.96C-182.58 979.48 -13.08 739.55 291.49 739.55C672.2 739.55 884.98 1298.6 1459.08 836.78"/>
+      <path d="M-224.41 1008.78C-182.58 963.3 -13.08 723.38 291.49 723.38C672.2 723.38 884.98 1282.42 1459.08 820.6"/>
+      <path d="M-224.41 992.6C-182.58 947.13 -13.08 707.2 291.49 707.2C672.2 707.2 884.98 1266.24 1459.08 804.43"/>
+      <path d="M-224.41 976.43C-182.58 930.95 -13.08 691.02 291.49 691.02C672.2 691.02 884.98 1250.07 1459.08 788.25"/>
+      <path d="M-224.41 960.25C-182.58 914.77 -13.08 674.85 291.49 674.85C672.2 674.85 884.98 1233.89 1459.08 772.07"/>
+      <path d="M-224.41 944.07C-182.58 898.6 -13.08 658.67 291.49 658.67C672.2 658.67 884.98 1217.71 1459.08 755.89"/>
+      <path d="M-224.41 927.89C-182.58 882.42 -13.08 642.49 291.49 642.49C672.2 642.49 884.98 1201.53 1459.08 739.72"/>
+      <path d="M-224.41 911.72C-182.58 866.24 -13.08 626.32 291.49 626.32C672.2 626.32 884.98 1185.36 1459.08 723.54"/>
+      <path d="M-224.41 895.54C-182.58 850.06 -13.08 610.14 291.49 610.14C672.2 610.14 884.98 1169.18 1459.08 707.36"/>
+      <path d="M-224.41 879.36C-182.58 833.89 -13.08 593.96 291.49 593.96C672.2 593.96 884.98 1153 1459.08 691.19"/>
+      <path d="M-224.41 863.19C-182.58 817.71 -13.08 577.78 291.49 577.78C672.2 577.78 884.98 1136.83 1459.08 675.01"/>
+      <path d="M-224.41 847.01C-182.58 801.53 -13.08 561.61 291.49 561.61C672.2 561.61 884.98 1120.65 1459.08 658.83"/>
+      <path d="M-224.41 830.83C-182.58 785.36 -13.08 545.43 291.49 545.43C672.2 545.43 884.98 1104.47 1459.08 642.65"/>
+      <path d="M-224.41 814.65C-182.58 769.18 -13.08 529.25 291.49 529.25C672.2 529.25 884.98 1088.29 1459.08 626.48"/>
+      <path d="M-224.41 798.48C-182.58 753 -13.08 513.08 291.49 513.08C672.2 513.08 884.98 1072.12 1459.08 610.3"/>
+      <path d="M-224.41 782.3C-182.58 736.82 -13.08 496.9 291.49 496.9C672.2 496.9 884.98 1055.94 1459.08 594.12"/>
+      <path d="M-224.41 766.12C-182.58 720.65 -13.08 480.72 291.49 480.72C672.2 480.72 884.98 1039.76 1459.08 577.95"/>
+      <path d="M-224.41 749.95C-182.58 704.47 -13.08 464.54 291.49 464.54C672.2 464.54 884.98 1023.59 1459.08 561.77"/>
+      <path d="M-224.41 733.77C-182.58 688.29 -13.08 448.37 291.49 448.37C672.2 448.37 884.98 1007.41 1459.08 545.59"/>
+      <path d="M-224.41 717.59C-182.58 672.12 -13.08 432.19 291.49 432.19C672.2 432.19 884.98 991.23 1459.08 529.41"/>
+      <path d="M-224.41 701.41C-182.58 655.94 -13.08 416.01 291.49 416.01C672.2 416.01 884.98 975.05 1459.08 513.24"/>
+      <path d="M-224.41 685.24C-182.58 639.76 -13.08 399.84 291.49 399.84C672.2 399.84 884.98 958.88 1459.08 497.06"/>
+      <path d="M-224.41 669.06C-182.58 623.59 -13.08 383.66 291.49 383.66C672.2 383.66 884.98 942.7 1459.08 480.88"/>
+      <path d="M-224.41 652.88C-182.58 607.41 -13.08 367.48 291.49 367.48C672.2 367.48 884.98 926.52 1459.08 464.71"/>
+      <path d="M-224.41 636.71C-182.58 591.23 -13.08 351.31 291.49 351.31C672.2 351.31 884.98 910.35 1459.08 448.53"/>
+      <path d="M-224.41 620.53C-182.58 575.05 -13.08 335.13 291.49 335.13C672.2 335.13 884.98 894.17 1459.08 432.35"/>
+      <path d="M-224.41 604.35C-182.58 558.88 -13.08 318.95 291.49 318.95C672.2 318.95 884.98 877.99 1459.08 416.18"/>
+    </g>
+    <g opacity=".8" stroke="#fff" stroke-width=".99">
+      <path d="M-137.9 399.07C-96.07 372.17 73.43 230.22 378 230.22C758.71 230.22 971.49 560.97 1545.59 287.74"/>
+      <path d="M-137.9 102.37C-96.07 75.47 73.43 -66.48 378 -66.48C758.71 -66.48 971.49 264.27 1545.59 -8.96"/>
+      <path d="M-137.9 389.5C-96.07 362.6 73.43 220.65 378 220.65C758.71 220.65 971.49 551.4 1545.59 278.17"/>
+      <path d="M-137.9 379.93C-96.07 353.02 73.43 211.08 378 211.08C758.71 211.08 971.49 541.83 1545.59 268.6"/>
+      <path d="M-137.9 370.36C-96.07 343.45 73.43 201.5 378 201.5C758.71 201.5 971.49 532.25 1545.59 259.03"/>
+      <path d="M-137.9 360.79C-96.07 333.88 73.43 191.93 378 191.93C758.71 191.93 971.49 522.68 1545.59 249.46"/>
+      <path d="M-137.9 351.22C-96.07 324.31 73.43 182.36 378 182.36C758.71 182.36 971.49 513.11 1545.59 239.88"/>
+      <path d="M-137.9 341.65C-96.07 314.74 73.43 172.79 378 172.79C758.71 172.79 971.49 503.54 1545.59 230.31"/>
+      <path d="M-137.9 332.07C-96.07 305.17 73.43 163.22 378 163.22C758.71 163.22 971.49 493.97 1545.59 220.74"/>
+      <path d="M-137.9 322.5C-96.07 295.6 73.43 153.65 378 153.65C758.71 153.65 971.49 484.4 1545.59 211.17"/>
+      <path d="M-137.9 312.93C-96.07 286.03 73.43 144.08 378 144.08C758.71 144.08 971.49 474.83 1545.59 201.6"/>
+      <path d="M-137.9 303.36C-96.07 276.46 73.43 134.51 378 134.51C758.71 134.51 971.49 465.26 1545.59 192.03"/>
+      <path d="M-137.9 293.79C-96.07 266.89 73.43 124.94 378 124.94C758.71 124.94 971.49 455.69 1545.59 182.46"/>
+      <path d="M-137.9 284.22C-96.07 257.31 73.43 115.37 378 115.37C758.71 115.37 971.49 446.12 1545.59 172.89"/>
+      <path d="M-137.9 274.65C-96.07 247.74 73.43 105.8 378 105.8C758.71 105.8 971.49 436.55 1545.59 163.32"/>
+      <path d="M-137.9 265.08C-96.07 238.17 73.43 96.22 378 96.22C758.71 96.22 971.49 426.97 1545.59 153.75"/>
+      <path d="M-137.9 255.51C-96.07 228.6 73.43 86.65 378 86.65C758.71 86.65 971.49 417.4 1545.59 144.18"/>
+      <path d="M-137.9 245.94C-96.07 219.03 73.43 77.08 378 77.08C758.71 77.08 971.49 407.83 1545.59 134.6"/>
+      <path d="M-137.9 236.37C-96.07 209.46 73.43 67.51 378 67.51C758.71 67.51 971.49 398.26 1545.59 125.03"/>
+      <path d="M-137.9 226.79C-96.07 199.89 73.43 57.94 378 57.94C758.71 57.94 971.49 388.69 1545.59 115.46"/>
+      <path d="M-137.9 217.22C-96.07 190.32 73.43 48.37 378 48.37C758.71 48.37 971.49 379.12 1545.59 105.89"/>
+      <path d="M-137.9 207.65C-96.07 180.75 73.43 38.8 378 38.8C758.71 38.8 971.49 369.55 1545.59 96.32"/>
+      <path d="M-137.9 198.08C-96.07 171.18 73.43 29.23 378 29.23C758.71 29.23 971.49 359.98 1545.59 86.75"/>
+      <path d="M-137.9 188.51C-96.07 161.6 73.43 19.66 378 19.66C758.71 19.66 971.49 350.41 1545.59 77.18"/>
+      <path d="M-137.9 178.94C-96.07 152.03 73.43 10.09 378 10.09C758.71 10.09 971.49 340.83 1545.59 67.61"/>
+      <path d="M-137.9 169.37C-96.07 142.46 73.43 .51 378 .51C758.71 .51 971.49 331.26 1545.59 58.04"/>
+      <path d="M-137.9 159.8C-96.07 132.89 73.43 -9.06 378 -9.06C758.71 -9.06 971.49 321.69 1545.59 48.46"/>
+      <path d="M-137.9 150.23C-96.07 123.32 73.43 -18.63 378 -18.63C758.71 -18.63 971.49 312.12 1545.59 38.89"/>
+      <path d="M-137.9 140.66C-96.07 113.75 73.43 -28.2 378 -28.2C758.71 -28.2 971.49 302.55 1545.59 29.32"/>
+      <path d="M-137.9 131.08C-96.07 104.18 73.43 -37.77 378 -37.77C758.71 -37.77 971.49 292.98 1545.59 19.75"/>
+      <path d="M-137.9 121.51C-96.07 94.61 73.43 -47.34 378 -47.34C758.71 -47.34 971.49 283.41 1545.59 10.18"/>
+      <path d="M-137.9 111.94C-96.07 85.04 73.43 -56.91 378 -56.91C758.71 -56.91 971.49 273.84 1545.59 .61"/>
+    </g>
+    <g opacity=".6" filter="url(#f5)">
+      <circle cx="1208.5" cy="193.5" r="376.5" fill="#DDF8F4"/>
+    </g>
+    <g opacity=".6" filter="url(#f6)">
+      <circle cx="618.5" cy="952.5" r="407.5" fill="#D2EEF9"/>
+    </g>
+  </g>
+  <defs>
+    <filter id="f0" x="-218.15" y="197.19" width="756.16" height="1067.29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="83.92"/>
+    </filter>
+    <filter id="f1" x="-183.37" y="296.06" width="1825.95" height="912.92" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="83.92"/>
+    </filter>
+    <filter id="f2" x="296.87" y="503.26" width="1043.85" height="846.13" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="83.92"/>
+    </filter>
+    <filter id="f3" x="-578.27" y="-213.62" width="1025.09" height="858.82" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="83.92"/>
+    </filter>
+    <filter id="f4" x="-194.01" y="-235.25" width="511.72" height="744.44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="83.92"/>
+    </filter>
+    <filter id="f5" x="532" y="-483" width="1353" height="1353" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="150"/>
+    </filter>
+    <filter id="f6" x="-89" y="245" width="1415" height="1415" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="150"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/spx-gui/src/account-web/assets/icons/eye-off.svg b/spx-gui/src/account-web/assets/icons/eye-off.svg
new file mode 100644
index 0000000000..82732daee4
--- /dev/null
+++ b/spx-gui/src/account-web/assets/icons/eye-off.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.4115 15.4727C13.0924 16.3094 11.562 16.7525 9.99999 16.75C5.95599 16.75 2.59149 13.84 1.88574 10C2.20826 8.25301 3.08696 6.65715 4.39074 5.45047L2.04399 3.10597L3.10524 2.04472L17.9545 16.8947L16.8932 17.9552L14.4107 15.4727H14.4115ZM5.45124 6.51247C4.432 7.43917 3.72198 8.65656 3.41724 9.99997C3.65146 11.0248 4.12169 11.9808 4.79049 12.7919C5.4593 13.603 6.30821 14.2468 7.26966 14.672C8.2311 15.0971 9.27853 15.292 10.3286 15.2411C11.3786 15.1901 12.4022 14.8947 13.318 14.3785L11.797 12.8575C11.1495 13.2653 10.3826 13.4411 9.62217 13.3558C8.8617 13.2706 8.15277 12.9294 7.61167 12.3883C7.07057 11.8472 6.72941 11.1383 6.64416 10.3778C6.55891 9.61732 6.73463 8.85046 7.14249 8.20297L5.45124 6.51247ZM10.6855 11.746L8.25399 9.31447C8.12054 9.65417 8.08913 10.0254 8.16362 10.3827C8.23811 10.74 8.41526 11.0678 8.67333 11.3259C8.93141 11.584 9.25919 11.7611 9.61648 11.8356C9.97378 11.9101 10.345 11.8787 10.6847 11.7452L10.6855 11.746ZM16.6052 13.444L15.532 12.3715C16.0333 11.6569 16.3903 10.8514 16.5827 9.99997C16.3789 9.10727 15.9957 8.26533 15.4564 7.52534C14.917 6.78536 14.2328 6.16277 13.4454 5.69543C12.658 5.22808 11.7837 4.92575 10.8758 4.8068C9.96787 4.68784 9.04525 4.75476 8.16399 5.00347L6.98049 3.81997C7.91574 3.45247 8.93499 3.24997 9.99999 3.24997C14.044 3.24997 17.4085 6.15997 18.1142 9.99997C17.8844 11.2492 17.3679 12.4282 16.6052 13.444ZM9.79224 6.63097C10.2696 6.60147 10.7478 6.67377 11.1951 6.84309C11.6425 7.0124 12.0487 7.27486 12.3869 7.61306C12.7251 7.95127 12.9876 8.35749 13.1569 8.80482C13.3262 9.25214 13.3985 9.73034 13.369 10.2077L9.79149 6.63097H9.79224Z" fill="#57606A" />
+</svg>
diff --git a/spx-gui/src/account-web/assets/icons/eye.svg b/spx-gui/src/account-web/assets/icons/eye.svg
new file mode 100644
index 0000000000..4e494cce6d
--- /dev/null
+++ b/spx-gui/src/account-web/assets/icons/eye.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.99999 3.25002C14.044 3.25002 17.4085 6.16002 18.1142 10C17.4092 13.84 14.044 16.75 9.99999 16.75C5.95599 16.75 2.59149 13.84 1.88574 10C2.59074 6.16002 5.95599 3.25002 9.99999 3.25002ZM9.99999 15.25C11.5296 15.2497 13.0138 14.7301 14.2096 13.7764C15.4055 12.8227 16.2422 11.4912 16.5827 10C16.2409 8.50999 15.4037 7.18002 14.208 6.22753C13.0122 5.27505 11.5287 4.75641 9.99999 4.75641C8.47126 4.75641 6.98776 5.27505 5.79202 6.22753C4.59629 7.18002 3.75907 8.50999 3.41724 10C3.75781 11.4912 4.5945 12.8227 5.79035 13.7764C6.9862 14.7301 8.47039 15.2497 9.99999 15.25ZM9.99999 13.375C9.10489 13.375 8.24644 13.0194 7.61351 12.3865C6.98057 11.7536 6.62499 10.8951 6.62499 10C6.62499 9.10491 6.98057 8.24647 7.61351 7.61353C8.24644 6.98059 9.10489 6.62502 9.99999 6.62502C10.8951 6.62502 11.7535 6.98059 12.3865 7.61353C13.0194 8.24647 13.375 9.10491 13.375 10C13.375 10.8951 13.0194 11.7536 12.3865 12.3865C11.7535 13.0194 10.8951 13.375 9.99999 13.375ZM9.99999 11.875C10.4973 11.875 10.9742 11.6775 11.3258 11.3258C11.6774 10.9742 11.875 10.4973 11.875 10C11.875 9.50273 11.6774 9.02582 11.3258 8.67419C10.9742 8.32256 10.4973 8.12502 9.99999 8.12502C9.50271 8.12502 9.0258 8.32256 8.67417 8.67419C8.32254 9.02582 8.12499 9.50273 8.12499 10C8.12499 10.4973 8.32254 10.9742 8.67417 11.3258C9.0258 11.6775 9.50271 11.875 9.99999 11.875Z" fill="#57606A" />
+</svg>
diff --git a/spx-gui/src/account-web/assets/icons/lock.svg b/spx-gui/src/account-web/assets/icons/lock.svg
new file mode 100644
index 0000000000..55883e527b
--- /dev/null
+++ b/spx-gui/src/account-web/assets/icons/lock.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.9584 6.91996V5.83333C13.9584 3.65083 12.1826 1.875 10.0001 1.875C7.81758 1.875 6.04175 3.65083 6.04175 5.83333V6.91996C4.42675 7.13413 3.54175 8.205 3.54175 10V15C3.54175 17.015 4.65175 18.125 6.66675 18.125H13.3334C15.3484 18.125 16.4584 17.015 16.4584 15V10C16.4584 8.20583 15.5734 7.13496 13.9584 6.91996ZM10.0001 3.125C11.4934 3.125 12.7084 4.34 12.7084 5.83333V6.875H7.29175V5.83333C7.29175 4.34 8.50675 3.125 10.0001 3.125ZM15.2084 15C15.2084 16.3142 14.6476 16.875 13.3334 16.875H6.66675C5.35258 16.875 4.79175 16.3142 4.79175 15V10C4.79175 8.68583 5.35258 8.125 6.66675 8.125H13.3334C14.6476 8.125 15.2084 8.68583 15.2084 10V15ZM11.0584 11.6667C11.0584 12.01 10.8817 12.3 10.6251 12.4892V14.1667C10.6251 14.5117 10.3451 14.7917 10.0001 14.7917C9.65508 14.7917 9.37508 14.5117 9.37508 14.1667V12.4683C9.13508 12.2774 8.97083 11.9958 8.97083 11.6667C8.97083 11.0917 9.43342 10.625 10.0084 10.625H10.0168C10.5918 10.625 11.0584 11.0917 11.0584 11.6667Z" fill="#57606A" />
+</svg>
diff --git a/spx-gui/src/account-web/assets/icons/user.svg b/spx-gui/src/account-web/assets/icons/user.svg
new file mode 100644
index 0000000000..80ccda9991
--- /dev/null
+++ b/spx-gui/src/account-web/assets/icons/user.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.0076 8.95833C8.05428 8.95833 6.46594 7.36917 6.46594 5.41667C6.46594 3.46417 8.05428 1.875 10.0076 1.875C11.9609 1.875 13.5493 3.46417 13.5493 5.41667C13.5493 7.36917 11.9609 8.95833 10.0076 8.95833ZM10.0076 3.125C8.74344 3.125 7.71594 4.1525 7.71594 5.41667C7.71594 6.68083 8.74344 7.70833 10.0076 7.70833C11.2718 7.70833 12.2993 6.68083 12.2993 5.41667C12.2993 4.1525 11.2709 3.125 10.0076 3.125ZM13.3309 18.125H6.66929C4.65262 18.125 3.54175 17.0209 3.54175 15.0159C3.54175 12.7984 4.79675 10.2083 8.33342 10.2083H11.6667C15.2034 10.2083 16.4584 12.7975 16.4584 15.0159C16.4584 17.0209 15.3475 18.125 13.3309 18.125ZM8.33342 11.4583C5.04758 11.4583 4.79175 14.1809 4.79175 15.0159C4.79175 16.3192 5.35346 16.875 6.66929 16.875H13.3309C14.6467 16.875 15.2084 16.3192 15.2084 15.0159C15.2084 14.1817 14.9526 11.4583 11.6667 11.4583H8.33342Z" fill="#57606A" />
+</svg>
diff --git a/spx-gui/src/account-web/assets/illustration-mobile.svg b/spx-gui/src/account-web/assets/illustration-mobile.svg
new file mode 100644
index 0000000000..c83fde422e
--- /dev/null
+++ b/spx-gui/src/account-web/assets/illustration-mobile.svg
@@ -0,0 +1,83 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="390" height="288" viewBox="0 0 390 288" fill="none">
+  <g opacity=".1">
+    <path d="M260.91 153.83C256.29 151.62 250 152.2 244.97 152.27C244.22 153.22 243.47 154.09 242.59 154.92C248.03 153.73 255.14 153.56 260.54 154.93C261.29 155.23 262.42 155.6 263.05 156.06C264.07 156.79 264.66 158.66 264.22 160.23C263.98 161.08 263.31 161.68 262.54 162.06C258.72 163.94 251.98 161.33 247.63 163.26C244.05 164.85 239.26 174.25 237.12 177.6C234.93 181.05 232.58 184.84 229.66 187.73C229.62 192.23 229.17 196.69 229.3 201.21C229.37 203.39 229.53 205.74 229.8 207.91C229.93 208.99 230.27 210.03 230.34 211.12C230.37 211.62 230.33 212.04 230.18 212.53L229.86 212.79C229.4 212.69 229.21 212.58 228.92 212.19C226.68 209.17 227.36 192.6 227.92 188.55C227.96 188.31 227.99 188.42 227.78 188.22C226.24 188.32 224.71 188.41 223.16 188.44C223.26 190.9 223.05 193.35 223.02 195.81C222.96 199.86 223.13 204.09 223.71 208.11C223.87 209.27 223.98 210.51 224.3 211.64C224.41 212.04 224.34 212.43 224.12 212.78C223.9 213.13 223.78 213.16 223.41 213.3C222.84 213.04 222.64 212.81 222.42 212.2C220.75 207.62 220.95 193.06 221.41 188.07C218.6 185.41 216.84 178.97 216.07 175.17C211.53 176.23 208.39 176.58 203.69 176.14L203.43 175.95C203.38 175.94 203.34 175.94 203.29 175.93C202.11 175.77 201.02 175.29 199.86 175.06C198.44 176.29 198.28 180.06 198.14 181.89C197.95 184.51 197.85 187.54 198.5 190.09C195.19 193.53 191.75 196.81 188.59 200.39C185.93 203.4 183.53 206.67 181.01 209.8C180.19 210.82 178.83 211.82 178.29 212.99C178.31 214.01 178.55 215.03 178.88 216C180.06 221.91 181.02 227.94 182.37 233.81C186.64 230.09 189.62 228.14 195.37 227.48C195.25 222.86 195.74 218.26 196.03 213.65C196.18 211.16 196.07 208.4 196.56 205.97C196.93 205.6 196.98 205.57 197.48 205.46C197.89 205.71 198.11 205.84 198.2 206.34C198.44 207.67 198.14 209.46 198.06 210.83C197.77 216.25 196.96 221.79 197.1 227.21C204.21 227.4 211.18 227.02 218.1 229.01C219.2 227.65 220.65 226.77 222.13 225.87C227.11 222.83 232.44 220.89 238.25 220.24C243.71 219.63 248.47 220.8 253.8 221.72C257.08 222.28 260.39 222.7 263.69 223.17C263.46 221.62 263.25 220.05 262.87 218.53C262.43 216.74 261 214.51 261.39 212.68L261.67 212.46C262.51 212.75 262.96 213.52 263.33 214.27C264.19 216 264.56 218.01 264.85 219.9C266.74 216.3 268.03 212.88 269 208.93C269.38 207.38 269.69 205.81 269.92 204.23C270.24 202 271.32 190.25 273.06 189.54C273.47 189.8 273.53 189.97 273.61 190.45C273.7 190.96 273.66 191.52 273.59 192.02C273.29 194.43 272.61 196.8 272.26 199.2C271.82 202.16 271.68 205.19 271.06 208.13C270.62 210.26 269.99 212.44 269.28 214.5C268.22 217.59 266.37 220.36 265.3 223.45C267.57 223.87 279.37 227.94 280.51 229.42C280.63 229.57 280.68 229.72 280.74 229.9C280.61 230.35 280.57 230.41 280.22 230.72C279.23 230.71 271.02 226.94 269.1 226.31C264.74 224.89 260.01 224.38 255.48 223.68C251.64 223.09 247.74 222.08 243.86 221.87C237.04 221.51 225.61 224.31 220.6 229.13C220.48 229.26 220.36 229.38 220.24 229.51C224.14 230.77 228.1 232.33 230.08 236.18C231.95 239.79 231.3 243.65 231.38 247.52C233.96 247.37 237.09 246.8 239.18 248.71C240.26 249.7 240.68 251.09 240.69 252.51C240.71 254.4 239.96 256.58 238.6 257.93C238.23 258.31 237.82 258.65 237.43 258.99C236.78 259.13 236.13 259.26 235.49 259.46L153.93 259.55C134.53 259.63 115.09 259.86 95.7 259.61C92.42 259.57 89.22 259.15 85.96 259.04C81.41 258.89 76.84 259.1 72.28 258.96C71.1 258.93 93.45 248.1 92.89 248.1C92.07 248.1 91.38 248.1 90.5 248.1C89.03 248.1 86.62 248.22 85.18 248.22C82.37 248.23 80.12 247.95 77.31 247.84C76.75 247.82 76.2 247.65 75.68 247.4C75.39 247 75.34 246.85 75.34 246.36C75.99 245.73 77.27 245.82 78.11 245.83C81.12 245.85 87.96 246.46 90.5 246.05C89.02 245.6 82.67 256.94 81.85 255.48C80.42 252.94 79.63 250.22 78.97 247.4C77.58 241.43 80.05 243.53 78.97 237.5C77.79 230.94 95.98 260.62 94.69 254.08C139.25 228.96 143.96 221.87 177.59 211.03C180.31 208.02 182.68 204.7 185.29 201.6C188.78 197.45 192.63 193.37 196.58 189.66C196.27 184.38 195.86 178.97 198.38 174.11C192.44 171.45 187.82 166.52 185.54 160.43C184.72 158.29 184.14 156.07 183.81 153.81C183.31 150.25 183.47 146.68 183.43 143.1C183.36 137.65 182.81 132.35 183.98 126.95C180.96 128.38 177.25 130.06 173.87 128.82C172.8 128.42 171.95 127.71 171.47 126.68C170.7 125 171.16 122.9 171.82 121.27C172.93 118.54 175.1 116.12 177.26 114.16C175.6 114.03 174.21 113.6 173.09 112.26C172.48 111.52 172.01 110.63 171.59 109.77C171.96 106.76 172.83 104.94 175.29 103.05C177.12 101.64 179.29 100.63 181.52 100.03C188.56 98.12 194.41 101.27 201.06 100.19C199.24 99.42 195.68 99.47 194.8 97.4C194.5 96.68 194.59 95.92 194.91 95.22C195.56 93.76 197.27 92.66 198.75 92.14C200.04 91.68 201.44 91.49 202.78 91.29C207.6 90.57 211.92 90.67 216.36 92.88C219.89 94.64 222.5 97.72 225.57 100.11C229.88 97.32 234.85 95.59 240.01 96.67C241.8 97.04 244.02 98.07 245.03 99.68C245.36 100.2 245.56 100.82 245.8 101.39C245.26 104.04 244.74 104.4 242.71 106.02C246.46 106.8 250.09 108.97 252.23 112.21C253.46 114.07 254.21 116.52 253.71 118.74C253.25 120.76 251.73 122.02 250.04 123.06C249.51 123.39 248.97 123.64 248.39 123.87C249.35 127.68 248.95 130.75 246.93 134.11C245.94 135.75 244.89 137.34 243.91 138.99C245.94 142.41 246.34 146.81 245.54 150.67C253.09 150.11 261.43 150.63 267.43 155.75C270.41 158.29 272.55 161.57 272.8 165.54C272.9 167.15 272.62 168.79 272.19 170.34C273.13 171.06 278.14 171.31 279.63 171.57C285.78 172.63 293.14 174.97 297.73 179.31C299.73 181.22 301.37 183.65 302.79 186C304.72 189.17 306.27 193.07 306.78 196.75C307.13 199.33 307.57 201.63 307.74 204.23C307.94 207.25 307.86 210.57 307.74 213.6C307.32 224.12 303.58 243.41 297.24 251.77C295.62 253.9 292.71 256.85 290.08 257.73C294.75 258.01 299.44 258.03 304.12 258.12C308.24 258.2 312.35 258.36 316.47 258.32C316.42 258.25 314.86 257.45 314.81 257.39C312.74 255.73 312.71 255.66 311.12 253.39C307.37 248.05 308.31 234.47 308.31 227.58C308.36 227.02 308.4 226.46 308.7 225.98C310.82 225.18 336.48 225.37 339.98 225.61C340.95 225.68 342.01 225.8 342.91 226.22C344.07 226.76 345.16 228.01 345.59 229.24C345.61 229.3 345.63 229.37 345.65 229.43C348.67 229.44 352.01 229.69 354.29 231.92C355.69 233.29 356.58 235.17 356.56 237.14C356.54 239.12 355.63 240.89 354.22 242.24C352.27 244.09 348.87 245.62 346.14 245.44C345.93 245.43 345.78 245.37 345.57 245.31C345.45 245.27 345.31 245.24 345.18 245.21C344.28 246.22 343.92 247.64 343.45 248.89C341.93 252.93 339.36 256.49 335.27 258.26L342.4 258.33C343.68 258.33 345.04 258.19 346.31 258.33C346.82 258.39 347.06 258.47 347.45 258.8C347.35 259.22 347.33 259.28 346.96 259.51C346.5 259.81 345.86 259.93 345.32 259.96C344.06 260.02 342.76 259.86 341.5 259.85C338.53 259.82 335.54 259.89 332.57 259.91C317.29 260.02 302.04 259.63 286.76 259.46C286.33 259.19 286.27 259.23 286.12 258.72C286.44 257.95 287.53 257.36 288.17 256.82C289.45 256.31 290.97 255.27 292.07 254.43C301.61 247.2 304.22 227.77 305.73 216.68C306.21 213.1 306.27 209.44 306.08 205.86C305.9 202.49 305.54 199.23 304.93 195.9C304.12 191.5 301.6 186.78 298.89 183.25C292.96 175.56 283.79 173.73 274.75 172.51C273.12 172.03 271.42 172.16 269.76 171.97C268.98 171.88 267.75 171.66 267.25 171.02C267.31 170.7 267.24 170.69 267.53 170.48C268.32 169.91 269.38 170.27 270.26 170.44C270.92 168.4 271.27 166.43 270.89 164.3C270.29 160.87 268.12 158.14 265.31 156.19C263.9 155.12 262.54 154.49 260.91 153.83ZM186.23 100.64C182.4 101.08 177.03 102.86 174.58 105.94C173.85 106.85 173.39 107.96 173.51 109.14C173.62 110.18 174.23 111.07 175.05 111.69C175.91 112.34 177.06 112.7 178.14 112.53C179.13 112.38 180.34 111.76 180.97 110.96C179.42 111.09 178.19 111.47 176.63 111.01C176.07 110.1 175.59 109.42 175.85 108.31C176.31 106.32 178.29 104.88 179.97 103.93C181.81 102.87 183.95 102 185.99 101.39C186.93 101.11 188.76 101.19 189.52 100.72C188.46 100.53 187.29 100.42 186.23 100.64ZM240.21 107.43L239.48 108.25L239.61 108.45L239.85 108.48C242.95 108.82 246.43 109.94 248.42 112.48C249.61 113.98 250.52 116.17 250.31 118.12C250.19 119.21 249.21 120.33 249.4 121.36C249.54 121.36 249.74 121.41 249.87 121.35C251.12 120.22 251.93 118.98 252 117.25C252.1 115.14 251.03 113.24 249.62 111.75C247.49 109.48 243.79 107.5 240.62 107.46C240.47 107.46 240.36 107.47 240.21 107.43ZM183.77 111.14C183.73 111.18 183.69 111.22 183.65 111.26C182.65 112.3 181.41 113.14 180.27 114.03C176.28 117.18 173.65 120.2 172.78 125.31C173.52 126.42 174.16 127.19 175.57 127.45C177.35 127.78 179.37 127 181.06 126.46C181.56 126.15 182.07 125.85 182.56 125.53C180.74 126.16 177.88 127.11 176.03 126.2C175.52 125.95 175.19 125.55 175.04 124.99C174.63 123.4 175.38 121.41 176.23 120.07C177.17 118.61 178.39 117.15 179.58 115.88C180.52 114.87 183.79 112.38 184.19 111.33C184.04 111.25 183.94 111.17 183.77 111.14ZM211.79 118.2C209.27 119.55 207.54 121.59 205.36 123.37C202.08 126.06 195.89 129.58 191.68 129.82C190.64 129.38 189.78 128.95 189.35 127.82C188.97 126.84 189.28 125.76 189.73 124.86C190.79 122.75 192.72 121.25 193.97 119.27C192 120.78 187.25 123.44 186.23 125.29C185.63 126.38 185.43 127.74 185.27 128.96C184.73 133.13 184.99 137.32 185.08 141.51C185.27 150.69 184.71 158.22 190.76 166C194.55 170.78 200.09 173.88 206.16 174.61C210.48 175.11 215.69 173.94 219.4 171.59C220.46 170.93 221.43 169.84 222.6 169.42C223.03 169.27 223.47 169.48 223.8 169.74C223.89 170.11 223.94 170.21 223.72 170.55C222.98 171.7 219.05 173.87 217.76 174.55C218.38 176.76 219.02 178.97 219.75 181.15C220.37 182.89 221.14 185.53 222.94 186.41C224.72 187.27 226.81 186.31 228.63 186.01C233.17 181.59 238.25 172.95 241.26 167.26C238.46 165.99 236.65 164.48 235.56 161.54C235.15 160.45 234.83 159.33 234.52 158.21C233.71 158.02 232.94 157.87 232.26 157.38L232.02 156.98L232.17 156.54C233.14 156.06 234.75 156.26 235.85 156.16C239.42 155.85 242.54 153.62 243.66 150.19C244.67 147.07 244.27 143.08 242.72 140.2C242.07 138.99 241.09 137.94 240.2 136.9C237.46 135.89 234.04 135.5 231.31 136.8C230.63 137.12 230.07 137.6 229.56 138.14C228.62 137.95 227.65 137.81 226.76 137.47C224.51 133.85 224.92 127.17 223.14 123.01C223.1 122.91 223.06 122.81 223.02 122.71L222.95 122.54C219.76 124.96 215.6 128.54 211.28 127.92C210.01 127.74 208.73 127.1 207.97 126.05C207.82 125.85 207.68 125.64 207.55 125.43C207.75 122.48 209.27 121.14 211.42 119.28C211.73 119.02 212.04 118.75 212.37 118.5L212.35 118.23L211.79 118.2ZM245.35 122.33C245.81 126.96 246.19 130.6 243.04 134.44C242.62 134.95 242.21 135.39 241.96 136.01L242.12 136.27C242.42 136.22 242.69 136.19 242.98 136.08C245.16 134.58 246.43 131.68 246.88 129.13C247.25 127 247.22 124.63 246.13 122.7C245.86 122.49 245.7 122.38 245.35 122.33ZM83.15 247.07C82.75 245.5 83.5 248.65 83.15 247.07C83.63 248.96 84.49 250.96 85.96 252.3C87.07 253.31 67.19 253.44 68.66 253.63C72.45 254.13 68.49 253.58 72.31 253.63C79.81 254.08 91.54 254.16 101.17 254.1C111.65 254.33 122.14 254.22 132.63 254.43C134.82 254.47 137.06 254.44 139.25 254.61C140.82 254.74 142.38 255.03 143.96 255.04C148.81 255.07 153.69 254.8 158.54 254.78L168.85 254.8C170.91 254.81 173.23 255.01 175.26 254.64C176.04 254.5 176.66 253.99 177.22 253.45C178.46 252.25 179.08 250.71 179.09 248.98C179.09 246.11 181.04 227.41 180.5 224.6C179.18 217.59 175.8 231.14 174.39 224.15C101.17 239.88 130.53 237.51 83.15 247.07ZM321.17 227.24C317.46 227.3 313.81 227.2 310.11 227.45C310.15 227.53 310.11 227.62 310.11 227.7C310.11 228.97 310.11 231.48 310.12 232.74C310.11 241.27 308.96 253.07 318.33 256.89C321.5 258.18 329.18 259.26 332.33 257.57C332.38 257.54 332.44 257.5 332.49 257.46C335.83 256.56 338.79 254.04 340.51 251.08C341.55 249.25 342.35 247.29 342.91 245.26C343.86 241.79 344.93 233.56 343.95 230.16C343.7 229.28 343.26 228.32 342.44 227.84C340.58 226.76 324.31 227.23 321.17 227.24ZM200.94 228.96C194.66 229.1 189.38 229.41 184.72 234.26C184.1 234.9 183.56 235.61 182.95 236.26L183.28 239.04C187.76 235.4 194.39 230.04 200.53 230.6C201.11 230.65 201.28 230.76 201.7 231.14L201.86 231.62C201.55 232.02 201.31 232.12 200.8 232.19C199.86 232.34 198.84 232.25 197.92 232.48C192.93 233.74 187.32 237.78 183.85 241.47C183.87 242.26 183.94 242.86 184.29 243.58C186.14 242.84 187.44 238.3 192.7 237.19C194.88 236.73 196.98 237.41 199.14 237.13C200.76 236.92 203.72 236.09 205.23 236.82C205.99 237.18 207.74 238.2 207.4 239.5C207.37 239.61 207.5 239.45 207.3 239.79C207.12 240.08 206.88 240.29 206.54 240.38C206.28 240.45 205.91 240.38 205.82 240.3C205.31 239.91 205.3 239.36 204.92 238.92C204.56 238.51 204.19 238.28 203.63 238.28C202.86 238.27 202.03 238.63 201.3 238.88C197.58 240.19 194.73 242.21 192.04 245.09C191.55 245.61 191.09 246.1 191.12 246.86C191.36 247.09 191.4 247.16 191.76 247.14C193.57 247.02 195.63 244.52 197.09 243.53C198.78 242.36 201.78 241.18 203.85 241.13C206.36 241.08 209.05 242.98 211.43 243.79C211.99 243.97 212.54 243.99 213.11 244.12C214.25 244.38 215.36 244.8 216.53 245.05C217.15 245.18 217.77 245.15 218.38 245.26C220.06 245.57 221.5 246.11 223.24 246.16C225.36 246.21 227.36 245.89 229.46 245.75C229.56 241.85 229.72 238.12 226.87 235.08C221.87 229.75 209.36 229.15 202.51 229C201.99 228.99 201.46 229.02 200.94 228.96ZM345.7 231.23L345.89 232.3C346.45 232.54 347.13 232.54 347.72 232.69C349.3 233.1 350.63 234.22 351.24 235.75C351.68 236.84 351.48 238.31 350.99 239.32C350.86 239.57 350.74 239.78 350.54 239.99C350.23 240.67 349.32 241.2 348.64 241.45C347.48 241.89 345.89 241.8 345.19 242.93C345.44 243.35 345.62 243.44 346.1 243.56C346.6 243.68 347.66 243.49 348.15 243.32C350.29 242.93 352.56 241.93 353.84 240.09C354.65 238.93 354.98 237.52 354.7 236.12C354.38 234.54 353.4 233.21 352.05 232.34C350.07 231.07 347.97 230.99 345.7 231.23ZM345.86 234.47C345.87 234.51 345.88 234.55 345.9 234.59C345.9 236.12 345.87 238.23 346.09 240.5C346.42 240.66 346.51 240.72 346.88 240.58C347.21 240.46 347.63 240.29 347.86 240.03C348.59 239.74 349.32 239.09 349.66 238.36C349.97 237.7 349.95 236.99 349.66 236.33C349.27 235.48 348.55 234.83 347.66 234.54C347.05 234.35 346.48 234.39 345.86 234.47ZM193.94 238.78C190.74 239.78 186.87 242.65 185.31 245.71C185.1 246.11 185.11 246.25 185.15 246.7C185.67 247.02 185.95 247 186.54 246.87C186.81 246.81 187.09 246.74 187.37 246.67C187.53 246.64 187.7 246.67 187.85 246.6C188.46 246.29 189.51 244.82 190.06 244.29C191.9 242.5 193.96 240.47 196.13 239.13C196.33 239.01 196.53 238.89 196.73 238.77L193.94 238.78ZM203.52 243.37C200.24 243.81 198.15 245.51 195.49 247.33C200.79 247.31 206.13 247.47 211.43 247.53L219.17 247.64C216.57 247.03 213.92 246.47 211.39 245.62C209.32 244.93 207.23 243.94 205.12 243.42C204.62 243.3 204.02 243.25 203.52 243.37ZM235.42 249.3C230.65 249.57 225.79 249.37 221.01 249.39L190.78 249.35C191.97 250.61 192.97 251.78 192.88 253.65C192.81 255.17 192.05 256.41 191.31 257.7C192.06 257.68 192.82 257.63 193.57 257.69C203.15 257.27 212.86 257.56 222.46 257.55C226.71 257.54 231.12 257.8 235.34 257.28C236.22 257.17 236.85 256.93 237.63 256.53C238.6 255.27 239.09 253.9 238.89 252.3C238.78 251.41 238.39 250.54 237.68 249.97C237 249.44 236.25 249.35 235.42 249.3ZM184.97 249.44C184.74 253.4 183.55 255.12 180.65 257.75L187.25 257.76C187.76 257.68 188.28 257.63 188.78 257.53C190.34 255.64 191.94 253.68 190.17 251.22C189.56 250.37 188.36 249.65 187.32 249.48C186.59 249.35 185.71 249.43 184.97 249.44Z" fill="#2D2D2D"/>
+    <path d="M180.89 111.11C180.26 111.91 179.05 112.53 178.06 112.68C176.99 112.85 175.84 112.49 174.97 111.84C174.15 111.22 173.54 110.33 173.43 109.29C173.31 108.11 173.78 107 174.5 106.09C176.96 103.02 182.32 101.23 186.15 100.8C187.21 100.57 188.38 100.68 189.44 100.87C188.68 101.34 186.86 101.26 185.91 101.54C183.87 102.15 181.74 103.02 179.89 104.08C178.22 105.03 176.23 106.47 175.77 108.46C175.52 109.58 175.99 110.25 176.56 111.16C178.11 111.62 179.34 111.24 180.89 111.11Z" fill="#fff"/>
+    <path d="M249.79 121.5C249.66 121.56 249.46 121.52 249.32 121.51C249.13 120.49 250.11 119.36 250.23 118.27C250.44 116.32 249.53 114.13 248.34 112.63C246.35 110.09 242.88 108.97 239.78 108.63L239.53 108.6L239.4 108.4L240.13 107.58C240.28 107.62 240.39 107.61 240.54 107.61C243.71 107.66 247.41 109.63 249.55 111.9C250.95 113.39 252.02 115.3 251.93 117.4C251.85 119.13 251.05 120.37 249.79 121.5Z" fill="#fff"/>
+    <path d="M172.7 125.46C173.57 120.36 176.2 117.33 180.2 114.18C181.33 113.29 182.57 112.45 183.58 111.41C183.61 111.37 183.65 111.33 183.69 111.29C183.86 111.32 183.97 111.4 184.11 111.48C183.71 112.53 180.44 115.02 179.5 116.03C178.31 117.31 177.09 118.76 176.15 120.22C175.3 121.56 174.55 123.55 174.97 125.15C175.11 125.7 175.44 126.1 175.95 126.35C177.8 127.26 180.66 126.31 182.48 125.68C181.99 126 181.48 126.3 180.98 126.61C179.29 127.15 177.28 127.93 175.49 127.6C174.09 127.34 173.44 126.57 172.7 125.46Z" fill="#fff"/>
+    <path d="M191.6 129.98C195.81 129.73 202 126.2 205.28 123.52C207.46 121.74 209.19 119.7 211.71 118.35L212.28 118.38L212.29 118.65C211.97 118.91 211.65 119.17 211.34 119.43C209.19 121.29 207.68 122.64 207.47 125.58C207.6 125.79 207.75 126 207.89 126.2C208.65 127.25 209.93 127.89 211.2 128.07C215.53 128.69 219.69 125.11 222.87 122.69L222.95 122.86C222.99 122.96 223.02 123.06 223.06 123.16C224.84 127.32 224.43 134 226.68 137.63C227.58 137.96 228.55 138.1 229.48 138.29C229.99 137.75 230.56 137.27 231.23 136.95C233.96 135.65 237.38 136.04 240.13 137.06C241.01 138.09 241.99 139.14 242.64 140.35C244.19 143.23 244.59 147.22 243.58 150.34C242.46 153.78 239.34 156 235.77 156.31C234.67 156.41 233.06 156.21 232.09 156.7L231.94 157.13L232.18 157.53C232.87 158.02 233.63 158.17 234.44 158.36C234.75 159.48 235.07 160.6 235.48 161.69C236.57 164.63 238.38 166.14 241.19 167.41C238.17 173.1 233.09 181.74 228.55 186.16C226.74 186.46 224.64 187.42 222.86 186.56C221.06 185.68 220.29 183.04 219.67 181.3C218.94 179.12 218.31 176.92 217.68 174.7C218.97 174.02 222.91 171.85 223.64 170.71C223.86 170.36 223.81 170.26 223.72 169.89C223.4 169.63 222.95 169.42 222.53 169.57C221.35 170 220.38 171.08 219.32 171.75C215.61 174.09 210.41 175.26 206.08 174.76C200.01 174.03 194.47 170.94 190.69 166.15C184.63 158.37 185.19 150.84 185 141.66C184.91 137.48 184.66 133.28 185.19 129.12C185.35 127.89 185.55 126.53 186.15 125.44C187.18 123.59 191.93 120.93 193.89 119.42C192.65 121.39 190.72 122.9 189.65 125.01C189.2 125.91 188.89 126.99 189.27 127.97C189.71 129.1 190.56 129.53 191.6 129.98ZM236.95 146.3C236.88 145.52 236.76 144.95 236.25 144.32C235.82 143.8 235.15 143.34 234.44 143.35C233.81 143.36 233.41 143.71 233 144.16C232.67 144.53 232.56 144.71 232.61 145.19C233.41 145.74 234.35 145.25 235.14 145.74C234.88 146.95 233.54 147.05 233.55 148.34C233.91 148.73 234.32 149 234.89 148.99C235.42 148.98 236.02 148.43 236.32 148.03C236.68 147.54 236.84 146.89 236.95 146.3ZM211.35 131.02C210.13 131.19 208.79 131.28 207.8 132.08C207.65 132.59 207.7 132.64 207.87 133.11L208.21 133.38C211.28 132.92 213.63 132.42 216.6 133.57C217.28 133.98 217.89 134.46 218.71 134.4L219.16 134.15C219.25 133.69 219.24 133.49 218.97 133.08C218.15 131.8 216.37 131.38 214.96 131.18C213.77 131.01 212.47 131.2 211.35 131.02ZM191.04 132.3C189.62 132.66 187.52 132.94 186.7 134.31C186.67 134.35 186.65 134.41 186.62 134.46C186.73 134.6 186.75 134.72 186.94 134.75C188.73 135 190.32 133.71 192 133.85L192.23 133.88C193.41 134.06 194.89 134.95 196 134.42C196.22 134 196.22 133.96 196.17 133.49C195.27 132.51 193.26 132.31 191.98 132.27C191.66 132.26 191.36 132.27 191.04 132.3ZM211.01 140.52C210.28 140.59 209.54 140.56 209.05 141.19C208.59 141.78 208.4 142.56 208.51 143.3C208.65 144.24 209.22 145.34 210 145.9C210.57 146.31 211.3 146.37 211.98 146.45C212.82 146.02 213.27 145.6 213.56 144.69C213.84 143.78 213.82 142.62 213.35 141.78C212.99 141.13 212.37 140.73 211.66 140.57C211.44 140.53 211.23 140.49 211.01 140.52ZM191.3 140.82C190.65 141.27 190.28 141.54 190.11 142.35C189.93 143.24 190.19 144.36 190.47 145.2C191.29 145.99 192.1 146.7 193.31 146.72C193.62 146.72 193.94 146.68 194.25 146.64C195.01 146.06 195.58 145.56 195.73 144.56C195.87 143.7 195.58 142.88 195.03 142.21C194.33 141.37 193.31 140.81 192.2 140.76C191.9 140.75 191.61 140.78 191.3 140.82ZM199.79 141.86C198.7 143.83 199.85 148.07 199.73 150.38C199.65 151.88 197.42 153.61 197.99 155.09C198.17 155.56 198.56 155.78 199.01 155.95C200.06 156.34 201.23 156.41 202.33 156.53C202.56 156.02 202.67 155.9 202.58 155.34C201.95 154.59 200.83 154.4 199.93 154.1C200.36 153.45 200.75 152.84 200.96 152.09C201.6 149.88 201.72 145.22 201.22 142.99C201.11 142.47 201.02 142.31 200.64 141.95C200.36 141.92 200.07 141.87 199.79 141.86ZM214.7 147.51C213.94 147.85 212.95 148.21 212.6 149.03C212.45 149.4 212.46 149.81 212.62 150.18C212.95 150.93 213.8 151.43 214.56 151.67C215.41 151.93 216.24 151.94 217.1 151.74C217.97 151.4 219.13 151.06 219.6 150.17C219.76 149.85 219.79 149.48 219.66 149.14C219.37 148.39 218.5 147.96 217.8 147.68C216.87 147.31 215.68 147.44 214.7 147.51ZM189.92 148.25C188.99 148.58 187.54 148.96 187.14 149.98C186.96 150.42 186.97 150.87 187.22 151.29C187.63 152 188.63 152.38 189.4 152.52C190.07 152.64 190.89 152.57 191.57 152.49C192.45 152.21 193.54 151.88 194.02 151.01C194.2 150.68 194.22 150.28 194.1 149.92C193.88 149.28 193.31 148.84 192.7 148.56C191.78 148.15 190.9 148.17 189.92 148.25ZM210.6 160.41C208.53 161.69 206.57 162.79 204.09 163.02C202.79 163.14 200.42 162.49 199.47 163.29C199.47 163.8 199.57 163.91 199.82 164.33C200.1 164.48 200.36 164.62 200.67 164.72C203.94 165.1 207.92 164.78 210.58 162.61C211.03 162.23 211.27 161.93 211.44 161.37C211.23 160.82 211.19 160.74 210.66 160.43C210.64 160.42 210.62 160.41 210.6 160.41Z" fill="#fff"/>
+    <path d="M242.9 136.24C242.61 136.34 242.34 136.38 242.04 136.42L241.88 136.16C242.13 135.54 242.55 135.1 242.96 134.59C246.12 130.75 245.73 127.11 245.27 122.48C245.62 122.53 245.78 122.64 246.06 122.86C247.14 124.78 247.18 127.16 246.8 129.28C246.35 131.83 245.09 134.73 242.9 136.24Z" fill="#fff"/>
+    <path d="M216.6 133.57C213.63 132.42 211.28 132.92 208.21 133.38L207.87 133.11C207.7 132.64 207.65 132.59 207.8 132.08C208.79 131.28 210.13 131.19 211.35 131.02C212.47 131.2 213.77 131.01 214.96 131.18C216.37 131.38 218.15 131.8 218.97 133.08C219.24 133.49 219.25 133.69 219.16 134.15L218.71 134.4C217.89 134.46 217.28 133.98 216.6 133.57Z" fill="#2D2D2D"/>
+    <path d="M192 133.85C190.32 133.71 188.73 135 186.94 134.75C186.75 134.72 186.73 134.61 186.62 134.46C186.65 134.41 186.67 134.35 186.7 134.31C187.52 132.94 189.62 132.66 191.04 132.3C191.36 132.27 191.66 132.26 191.98 132.27C193.26 132.31 195.27 132.51 196.17 133.49C196.22 133.96 196.22 134 196 134.42C194.89 134.95 193.41 134.06 192.23 133.88L192 133.85Z" fill="#2D2D2D"/>
+    <path d="M211.98 146.45C211.3 146.37 210.57 146.31 210 145.9C209.22 145.34 208.65 144.24 208.51 143.3C208.4 142.56 208.59 141.78 209.05 141.19C209.54 140.56 210.28 140.59 211.01 140.52C211.23 140.49 211.44 140.53 211.66 140.57C212.37 140.73 212.99 141.13 213.35 141.78C213.82 142.62 213.84 143.78 213.56 144.69C213.27 145.6 212.82 146.02 211.98 146.45Z" fill="#2D2D2D"/>
+    <path d="M190.47 145.2C190.04 144.19 189.93 143.24 190.11 142.35C190.28 141.54 190.65 141.27 191.3 140.82C191.61 140.78 191.9 140.75 192.2 140.76C193.31 140.81 194.33 141.37 195.03 142.22C195.58 142.88 195.87 143.7 195.73 144.56C195.58 145.57 195.01 146.06 194.25 146.64C193.94 146.68 193.62 146.73 193.31 146.72C192.1 146.7 191.28 146.25 190.47 145.2Z" fill="#2D2D2D"/>
+    <path d="M202.33 156.53C201.23 156.41 200.06 156.34 199.01 155.95C198.56 155.78 198.17 155.56 197.99 155.09C197.42 153.61 199.65 151.88 199.73 150.38C199.86 148.07 198.7 143.83 199.79 141.86C200.07 141.87 200.36 141.92 200.64 141.95C201.02 142.31 201.11 142.47 201.22 142.99C201.72 145.22 201.6 149.88 200.96 152.09C200.75 152.84 200.36 153.46 199.93 154.1C200.83 154.4 201.95 154.59 202.58 155.34C202.67 155.9 202.56 156.02 202.33 156.53Z" fill="#2D2D2D"/>
+    <path d="M235.14 145.74C234.35 145.25 233.41 145.74 232.61 145.19C232.56 144.71 232.67 144.55 233.01 144.19C233.42 143.74 233.81 143.36 234.44 143.35C235.15 143.34 235.82 143.8 236.25 144.32C236.76 144.95 236.88 145.52 236.95 146.3C236.7 146.29 236.46 146.28 236.21 146.25C235.59 146.19 235.54 146.24 235.14 145.74Z" fill="#2D2D2D"/>
+    <path d="M235.14 145.74C235.54 146.24 235.59 146.19 236.21 146.25C236.46 146.28 236.7 146.29 236.95 146.3C236.84 146.9 236.68 147.54 236.32 148.03C236.02 148.43 235.42 148.99 234.89 148.99C234.32 149 233.91 148.73 233.55 148.34C233.54 147.05 234.88 146.95 235.14 145.74Z" fill="#2D2D2D"/>
+    <path d="M217.1 151.74C216.24 151.94 215.41 151.93 214.56 151.67C213.81 151.43 212.95 150.94 212.62 150.18C212.46 149.81 212.45 149.4 212.6 149.03C212.95 148.21 213.94 147.85 214.7 147.51C215.68 147.44 216.87 147.31 217.8 147.68C218.5 147.96 219.37 148.39 219.66 149.14C219.79 149.48 219.76 149.85 219.6 150.17C219.13 151.06 217.97 151.41 217.1 151.74Z" fill="#fff"/>
+    <path d="M191.57 152.49C190.89 152.57 190.08 152.64 189.4 152.52C188.63 152.38 187.63 152 187.22 151.29C186.97 150.87 186.96 150.42 187.14 149.98C187.54 148.96 188.99 148.58 189.92 148.25C190.9 148.17 191.78 148.15 192.7 148.56C193.31 148.84 193.88 149.28 194.1 149.92C194.22 150.28 194.2 150.68 194.02 151.01C193.54 151.88 192.45 152.21 191.57 152.49Z" fill="#fff"/>
+    <path d="M260.83 153.98L260.46 155.08C255.06 153.71 247.95 153.88 242.51 155.07C243.39 154.24 244.14 153.37 244.89 152.42C249.92 152.35 256.21 151.78 260.83 153.98Z" fill="#A5A5A5"/>
+    <path d="M260.46 155.08L260.83 153.98C262.46 154.64 263.82 155.27 265.23 156.34C264.45 156.39 263.71 155.99 262.98 156.21C262.34 155.75 261.1 155.34 260.46 155.08Z" fill="#A5A5A5"/>
+    <path d="M265.23 156.34C268.04 158.29 270.21 161.02 270.82 164.45C271.19 166.58 270.85 168.55 270.18 170.59C269.3 170.42 268.25 170.06 267.45 170.63C267.16 170.84 267.23 170.85 267.17 171.17C267.67 171.81 268.9 172.03 269.68 172.12C271.35 172.31 273.05 172.18 274.67 172.66L274.24 172.83C276.6 174.02 279.49 174.64 281.96 175.65C281.96 175.65 295.39 178.48 302.5 195.93C303.83 199.98 304.35 204.58 304.23 208.84C303.92 219.83 298.83 238.37 293.89 248.04C292.96 249.83 291.92 251.57 290.78 253.25C290.26 254.02 288.29 256.36 288.09 256.98C287.45 257.51 286.36 258.1 286.05 258.87C286.19 259.38 286.25 259.34 286.69 259.61C285.86 260.17 239.41 260.16 235.42 259.61C236.05 259.41 236.7 259.28 237.35 259.14C237.75 258.8 238.15 258.45 238.52 258.08C239.88 256.73 240.63 254.55 240.61 252.66C240.6 251.25 240.18 249.85 239.1 248.86C237.01 246.95 233.88 247.52 231.3 247.67C231.22 243.8 231.87 239.94 230 236.33C228.02 232.48 224.06 230.92 220.16 229.66C220.28 229.53 220.4 229.41 220.53 229.29C225.53 224.46 236.97 221.66 243.78 222.03C247.67 222.23 251.56 223.25 255.4 223.84C259.94 224.53 264.66 225.04 269.03 226.46C270.94 227.09 279.15 230.86 280.14 230.88C280.5 230.56 280.53 230.51 280.66 230.05C280.6 229.87 280.55 229.72 280.44 229.57C279.29 228.09 267.5 224.02 265.22 223.6C266.3 220.51 268.14 217.74 269.2 214.66C269.91 212.59 270.54 210.41 270.99 208.28C271.6 205.34 271.74 202.32 272.18 199.35C272.54 196.95 273.22 194.58 273.52 192.17C273.58 191.67 273.62 191.11 273.53 190.6C273.45 190.12 273.39 189.95 272.98 189.69C271.24 190.4 270.16 202.15 269.84 204.38C269.61 205.96 269.3 207.53 268.92 209.08C267.95 213.03 266.66 216.45 264.77 220.05C264.49 218.16 264.11 216.15 263.25 214.43C262.88 213.67 262.43 212.9 261.59 212.61L261.31 212.83C260.92 214.66 262.35 216.89 262.8 218.68C263.17 220.2 263.38 221.77 263.61 223.32C260.32 222.85 257 222.43 253.72 221.87C248.39 220.95 243.63 219.78 238.17 220.4C232.36 221.04 227.03 222.98 222.05 226.02C220.57 226.92 219.12 227.8 218.03 229.16C211.1 227.17 204.13 227.55 197.03 227.36C196.88 221.94 197.69 216.4 197.99 210.98C198.06 209.62 198.36 207.82 198.12 206.49C198.03 205.99 197.81 205.86 197.41 205.61C196.9 205.72 196.85 205.75 196.48 206.12C195.99 208.55 196.1 211.31 195.95 213.8C195.66 218.41 195.17 223.01 195.29 227.63C189.54 228.29 186.56 230.24 182.29 233.97C180.95 228.09 179.99 222.06 178.8 216.15C180.38 214.3 181.75 212.15 183.28 210.24C188.18 204.16 193.19 198.41 198.9 193.06C199.34 189.28 198.75 185.32 199.57 181.59C200.1 179.2 201.3 177.41 203.36 176.1L203.61 176.29C208.31 176.73 211.45 176.38 216 175.32C216.76 179.12 218.53 185.56 221.34 188.23C220.87 193.21 220.67 207.77 222.34 212.35C222.56 212.96 222.77 213.19 223.34 213.45C223.7 213.31 223.82 213.28 224.04 212.93C224.26 212.58 224.33 212.19 224.22 211.79C223.9 210.67 223.79 209.42 223.63 208.26C223.06 204.25 222.88 200.01 222.94 195.96C222.98 193.5 223.18 191.05 223.08 188.59C224.63 188.56 226.16 188.48 227.7 188.38C227.91 188.57 227.88 188.46 227.84 188.7C227.28 192.75 226.6 209.32 228.84 212.34C229.13 212.73 229.32 212.84 229.78 212.94L230.1 212.68C230.25 212.19 230.29 211.77 230.26 211.27C230.19 210.18 229.85 209.14 229.72 208.06C229.45 205.89 229.29 203.54 229.22 201.36C229.09 196.84 229.54 192.38 229.59 187.88C232.5 185 234.85 181.2 237.04 177.75C239.18 174.4 243.97 165 247.55 163.41C251.9 161.49 258.64 164.09 262.46 162.21C263.23 161.83 263.9 161.23 264.14 160.38C264.58 158.81 263.99 156.99 262.98 156.21C263.71 155.99 264.45 156.39 265.23 156.34Z" fill="#A5A5A5"/>
+    <path d="M200.67 164.72C200.36 164.62 200.1 164.48 199.82 164.33C199.57 163.91 199.47 163.8 199.47 163.29C200.42 162.49 202.79 163.14 204.09 163.02C206.57 162.79 208.53 161.69 210.6 160.41C210.62 160.41 210.64 160.42 210.66 160.43C211.19 160.74 211.23 160.82 211.44 161.37C211.27 161.93 211.03 162.23 210.58 162.61C207.92 164.78 203.94 165.1 200.67 164.72Z" fill="#2D2D2D"/>
+    <path d="M288.09 256.98C288.29 256.36 290.26 254.02 290.78 253.25C291.92 251.57 292.96 249.83 293.89 248.04C298.83 238.37 303.92 219.83 304.23 208.84C304.35 204.58 303.83 199.98 302.5 195.93C299.15 185.71 291.64 179.61 281.96 175.65C279.49 174.64 276.6 174.02 274.24 172.83L274.67 172.66C283.71 173.88 292.88 175.71 298.81 183.4C301.53 186.93 304.04 191.66 304.85 196.06C305.47 199.38 305.46 203 305.63 206.38C305.83 209.95 306.13 213.25 305.65 216.83C304.14 227.92 301.53 247.36 292 254.58C290.89 255.42 289.38 256.46 288.09 256.98Z" fill="#fff"/>
+    <path d="M198.42 190.24C197.77 187.69 197.87 184.66 198.06 182.04C198.2 180.21 198.36 176.44 199.78 175.22C200.94 175.44 202.03 175.92 203.21 176.08C203.26 176.09 203.31 176.09 203.36 176.1C201.3 177.41 200.1 179.2 199.57 181.59C198.75 185.32 199.34 189.28 198.9 193.06C193.19 198.41 188.18 204.16 183.28 210.24C181.75 212.15 180.38 214.3 178.8 216.15C178.47 215.18 178.24 214.16 178.21 213.14C178.76 211.97 180.11 210.97 180.93 209.95C183.45 206.82 185.85 203.55 188.51 200.54C191.67 196.96 195.11 193.68 198.42 190.24Z" fill="#fff"/>
+    <path d="M319.17 211.58C320.2 209.65 322.87 208.8 323.5 206.71C323.8 205.72 323.89 204.35 323.34 203.44C322.23 201.57 319.87 201.82 318.06 201.43C317.77 200.94 317.99 200.56 318.12 200.03C319.02 199.93 319.99 199.84 320.89 200C322.33 200.27 323.88 201.26 324.65 202.51C327.7 207.53 321.58 209.45 320.3 213.45C319.01 217.45 325.08 217.55 325.97 219.2C325.81 219.7 325.71 219.7 325.29 219.98C325.17 220.01 325.02 220 324.9 220C322.14 219.2 318.72 216.69 318.72 215.99C318.12 214.01 318.83 212.23 319.17 211.58Z" fill="#2D2D2D"/>
+    <path d="M332.15 219.66C331.44 219.5 330.77 218.58 330.42 217.99C329.48 216.39 329.3 214.28 329.81 212.51C330.54 209.95 333.4 208.64 334.23 208.22C335.05 207.81 335.8 207.39 336.39 207.74C336.5 207.92 336.67 208.06 336.58 208.27C336.2 209.14 334.44 209.75 333.65 210.21C332.49 210.88 331.61 211.93 331.31 213.25C330.87 215.14 332.06 216.68 333.01 218.16C333.32 218.63 333.4 218.97 333.25 219.41C332.99 219.79 332.59 219.76 332.15 219.66Z" fill="#2D2D2D"/>
+    <path d="M310.03 227.6C313.73 227.34 317.38 227.45 321.09 227.4C324.23 227.38 340.5 226.91 342.36 228C343.18 228.47 343.62 229.43 343.88 230.31C344.85 233.72 343.79 241.94 342.83 245.41C342.28 247.44 341.47 249.4 340.43 251.23C338.71 254.19 335.75 256.71 332.41 257.61C332.36 257.65 332.31 257.69 332.25 257.72C329.1 259.41 321.42 258.33 318.25 257.04C308.88 253.22 310.03 241.5 310.04 232.9C310.12 231.6 310.03 229.17 310.03 227.85C310.03 227.77 310.03 227.71 310.03 227.6ZM338.83 231.01C338.61 233.14 337.85 238.36 338.52 240.17L338.82 240.34L339.12 240.13C339.61 239.73 339.68 239.53 339.76 238.9C339.98 237.08 340.55 232.89 339.73 231.27C339.4 231.1 339.2 231.03 338.83 231.01Z" fill="#fff"/>
+    <path d="M182.87 236.41C183.48 235.76 184.02 235.06 184.64 234.41C189.3 229.56 194.58 229.25 200.86 229.11C201.38 229.17 201.91 229.14 202.43 229.15C209.28 229.3 221.79 229.9 226.79 235.23C229.65 238.27 229.48 242 229.38 245.9C227.28 246.04 225.28 246.36 223.16 246.31C221.43 246.26 219.98 245.72 218.31 245.42C217.69 245.31 217.07 245.33 216.45 245.2C215.28 244.96 214.18 244.53 213.03 244.27C212.47 244.14 211.91 244.13 211.35 243.94C208.97 243.13 206.28 241.23 203.77 241.28C201.7 241.33 198.7 242.51 197.01 243.68C195.56 244.68 193.49 247.17 191.68 247.29C191.32 247.31 191.28 247.24 191.04 247.01C191.01 246.25 191.47 245.76 191.96 245.24C194.66 242.36 197.5 240.34 201.23 239.03C201.95 238.78 202.78 238.42 203.56 238.43C204.11 238.44 204.48 238.66 204.84 239.07C205.2 239.49 205.33 239.62 205.74 240.03C206.16 240.45 206.16 240.45 206.57 240.45C206.92 240.36 207.37 239.82 207.32 239.65C207.09 238.85 205.91 237.33 205.16 236.97C203.64 236.25 200.68 237.07 199.06 237.28C196.9 237.56 194.8 236.88 192.62 237.34C187.37 238.45 186.06 242.99 184.21 243.73C183.86 243.01 183.79 242.41 183.77 241.62C187.25 237.93 192.85 233.89 197.84 232.63C198.76 232.4 199.78 232.49 200.72 232.35C201.23 232.27 201.47 232.17 201.78 231.77L201.62 231.29C201.21 230.91 201.03 230.8 200.46 230.75C194.31 230.19 187.68 235.55 183.2 239.19L182.87 236.41Z" fill="#fff"/>
+    <path d="M339.12 240.13L338.82 240.34L338.52 240.17C337.85 238.36 338.61 233.14 338.83 231.01C339.2 231.03 339.4 231.1 339.73 231.27C340.55 232.89 339.98 237.08 339.76 238.9C339.68 239.53 339.61 239.73 339.12 240.13Z" fill="#fff"/>
+    <path d="M350.46 240.14C350.66 239.94 350.78 239.72 350.91 239.47C351.4 238.46 351.6 237 351.17 235.9C350.55 234.37 349.22 233.25 347.64 232.84C347.05 232.69 346.38 232.69 345.82 232.45L345.62 231.38C347.89 231.14 350 231.22 351.97 232.5C353.32 233.37 354.3 234.69 354.62 236.27C354.9 237.67 354.57 239.08 353.76 240.24C352.48 242.08 350.21 243.08 348.07 243.47C347.58 243.64 346.52 243.83 346.02 243.71C345.54 243.59 345.36 243.5 345.11 243.09C345.81 241.95 347.4 242.04 348.56 241.6C349.25 241.35 350.15 240.82 350.46 240.14Z" fill="#fff"/>
+    <path d="M347.89 240.03C347.66 240.28 347.13 240.61 346.8 240.73C346.44 240.88 346.34 240.81 346.02 240.65C345.8 238.79 345.78 236.73 345.82 234.74C345.81 234.7 345.79 234.66 345.78 234.62C346.4 234.54 346.97 234.5 347.58 234.7C348.47 234.98 349.19 235.63 349.58 236.48C349.87 237.14 349.89 237.85 349.58 238.51C349.24 239.24 348.62 239.74 347.89 240.03Z" fill="#fff"/>
+    <path d="M187.29 246.82C187.01 246.89 186.74 246.96 186.46 247.02C185.88 247.15 185.59 247.17 185.08 246.85C185.03 246.4 185.03 246.26 185.23 245.86C186.79 242.8 190.66 239.93 193.86 238.93L196.65 238.92C196.45 239.04 196.25 239.16 196.06 239.28C193.88 240.62 191.82 242.65 189.98 244.44C189.43 244.97 188.38 246.44 187.77 246.75C187.62 246.82 187.45 246.79 187.29 246.82Z" fill="#fff"/>
+    <path d="M195.41 247.48C198.07 245.66 200.16 243.96 203.44 243.52C203.94 243.4 204.55 243.45 205.04 243.57C207.15 244.09 209.24 245.08 211.31 245.77C213.85 246.62 216.49 247.18 219.09 247.79L211.35 247.69C206.05 247.62 200.71 247.46 195.41 247.48Z" fill="#A5A5A5"/>
+    <path d="M190.7 249.5L220.93 249.54C225.71 249.52 230.58 249.72 235.34 249.45C236.17 249.5 236.92 249.59 237.6 250.12C238.31 250.69 238.7 251.56 238.81 252.45C239.01 254.05 238.52 255.42 237.55 256.68C236.77 257.08 236.15 257.32 235.26 257.43C231.04 257.95 226.63 257.69 222.38 257.7C212.78 257.71 203.07 257.42 193.49 257.84C192.74 257.79 191.98 257.84 191.23 257.85C191.97 256.56 192.73 255.32 192.8 253.8C192.9 251.93 191.89 250.76 190.7 249.5Z" fill="#BEE8F7"/>
+    <path d="M180.57 257.9C183.47 255.27 184.66 253.55 184.89 249.59C185.63 249.58 186.51 249.5 187.24 249.63C188.28 249.8 189.49 250.52 190.09 251.37C191.86 253.83 190.26 255.79 188.71 257.68C188.24 257.91 187.68 257.83 187.17 257.91L180.57 257.9Z" fill="#BEE8F7"/>
+    <rect x="86.76" y="248.71" width="152.03" height="9.09" rx="4.13" fill="#BEE8F7" stroke="#2D2D2D" stroke-width="1.65"/>
+    <circle cx="274.55" cy="70.65" r="14.46" stroke="#2D2D2D" stroke-width="1.65"/>
+    <circle cx="273.5" cy="71.89" r="12.39" fill="#BFBFBF"/>
+    <path d="M269.28 84.49L274.25 85.08C274.4 85.1 274.56 85.1 274.71 85.09L274.87 85.07L278.99 84.52C279.48 84.46 279.92 84.84 279.92 85.34V90.07C279.92 90.52 279.55 90.89 279.1 90.89H269.18C268.72 90.89 268.35 90.52 268.35 90.07V85.31C268.35 84.82 268.79 84.44 269.28 84.49Z" stroke="#2D2D2D" stroke-width="1.65"/>
+    <rect x="258.36" y="48.1" width=".83" height="7.69" rx=".41" transform="rotate(-28.4096 258.357 48.1036)" fill="#fff" stroke="#2D2D2D" stroke-width=".83"/>
+    <rect x="273.72" y="42.56" width=".83" height="7.69" rx=".41" fill="#fff" stroke="#2D2D2D" stroke-width=".83"/>
+    <rect x="270.52" y="70.99" width=".83" height="14.05" rx=".41" transform="rotate(-17.0043 270.522 70.9932)" fill="#fff" stroke="#2D2D2D" stroke-width=".83"/>
+    <rect x="289.06" y="47.68" width=".83" height="7.69" rx=".41" transform="rotate(35.1911 289.062 47.6758)" fill="#fff" stroke="#2D2D2D" stroke-width=".83"/>
+    <rect x="278.32" y="72.46" width=".83" height="7.69" rx=".41" transform="rotate(35.1911 278.321 72.4639)" fill="#fff" stroke="#2D2D2D" stroke-width=".83"/>
+    <rect x="66.1" y="247.88" width="174.34" height="10.74" rx="5.37" fill="#E2E2E2" stroke="#2D2D2D" stroke-width="1.65"/>
+    <rect x="64.45" y="180.96" width="117.33" height="75.19" rx="4.96" fill="#E2E2E2" stroke="#2D2D2D" stroke-width="1.65"/>
+    <path d="M128.01 214.04L130.39 218.17L129.56 222.86L125.91 225.93H121.14L117.49 222.86L116.66 218.17L119.05 214.04L123.53 212.41L128.01 214.04Z" fill="#fff" stroke="#2D2D2D" stroke-width="1.65"/>
+    <path d="M121.66 213.8L125.65 215.25L128.07 218.96L127.25 223.92L125.65 225.2H121.41L118.16 222.48L117.42 218.3L119.54 214.63L121.66 213.8Z" fill="#E2E2E2"/>
+    <path d="M68.63 181.78H177.24L178.89 182.19L179.71 183.02L180.54 184.26L180.95 185.09H123.11H65.37L65.69 184.26L66.1 183.44L67.34 182.19L68.63 181.78Z" fill="#fff"/>
+    <path d="M180.95 252.47L180.95 184.92L180.64 183.89L180.02 183.38L179.09 182.87L178.47 182.61L178.47 218.58L178.47 254.91L179.3 254.49L179.71 254.08L180.64 253.27L180.95 252.47Z" fill="#fff"/>
+    <path d="M338.83 231.01C338.61 233.14 337.85 238.36 338.52 240.17L338.82 240.34L339.12 240.13C339.61 239.73 339.68 239.53 339.76 238.9C339.98 237.08 340.55 232.89 339.73 231.27C339.4 231.1 339.2 231.03 338.83 231.01Z" fill="#2D2D2D"/>
+    <rect x="86.06" y="105.24" width="44.63" height="44.63" rx="4.96" transform="rotate(-14.1579 86.0589 105.239)" fill="#fff" stroke="#2D2B38" stroke-width="1.65"/>
+    <rect x="118.24" y="34.09" width="35.22" height="35.22" rx="4.96" transform="rotate(17.5328 118.237 34.0872)" fill="#fff" stroke="#2D2B38" stroke-width="1.65"/>
+    <path d="M138.91 49.83C139.59 50.06 140.79 50.45 141.36 51.95L141.4 52.1C141.43 52.25 141.43 52.4 141.38 52.55L137.54 64.32L137.48 64.48C136.89 66.02 135.13 66.81 133.5 66.28L121.71 62.4C121.41 62.3 121.19 62.05 121.12 61.75L121.12 61.74C121.05 61.44 121.14 61.12 121.37 60.9L121.75 60.53L122.43 59.87C122.65 59.65 122.86 59.44 123.05 59.23C123.23 59.03 123.39 58.84 123.52 58.67C123.64 58.5 123.73 58.36 123.77 58.24C123.78 58.19 123.8 58.15 123.8 58.13C123.8 58.11 123.8 58.11 123.8 58.1C123.8 58.1 123.8 58.09 123.8 58.09C123.8 58.09 123.8 58.09 123.8 58.09C123.79 58.08 123.78 58.08 123.77 58.07C123.74 58.05 123.69 58.02 123.61 58C123.46 57.95 123.31 57.93 123.18 57.93C123.04 57.93 122.94 57.94 122.91 57.95L122.91 57.95C122.39 58.11 121.74 58.08 121.13 57.88C120.58 57.69 120.12 57.4 119.81 57.03L119.68 56.86C119.14 56.05 119.19 54.78 119.76 53.03C120.11 51.97 120.66 51.33 121.27 51.01C121.89 50.69 122.55 50.69 123.13 50.88C123.54 51.02 123.94 51.26 124.29 51.57L124.56 51.81C125 52.17 125.28 52.31 125.42 52.36C125.65 51.66 125.9 50.51 126.1 49.51C126.21 49 126.3 48.52 126.36 48.18C126.39 48 126.42 47.86 126.43 47.76C126.44 47.71 126.45 47.67 126.45 47.65C126.46 47.63 126.46 47.62 126.46 47.61C126.46 47.61 126.46 47.61 126.46 47.61L126.46 47.6L126.46 47.6C126.51 47.31 126.7 47.07 126.96 46.94L127.1 46.89C127.52 46.73 128.7 46.47 130.81 47.17C131.97 47.55 132.41 48.22 132.56 48.73L132.62 48.95C132.71 49.48 132.58 50.03 132.25 50.46L132.25 50.46C131.83 51 131.54 51.5 131.37 51.93C131.2 52.36 131.17 52.71 131.25 52.97L131.31 53.12C131.49 53.45 131.92 53.75 132.64 53.99C132.73 54.02 132.92 54.03 133.15 53.98C133.38 53.94 133.65 53.83 133.91 53.66L134.09 53.52C134.49 53.19 134.92 52.59 135.04 51.56L135.06 51.31C135.09 50.77 135.37 50.29 135.83 49.98L135.97 49.89C136.72 49.47 137.78 49.46 138.91 49.83ZM138.35 51.54C137.84 51.38 137.46 51.35 137.2 51.38C137.07 51.39 136.97 51.41 136.91 51.44C136.88 51.45 136.87 51.46 136.85 51.46C136.75 52.96 136.14 54.21 135.13 54.99L134.92 55.15C134.03 55.75 132.92 55.98 132.08 55.7C130.8 55.28 129.96 54.61 129.6 53.69L129.53 53.5C129.17 52.32 129.62 50.92 130.82 49.36L130.84 49.33C130.85 49.32 130.85 49.31 130.85 49.29L130.85 49.26C130.84 49.25 130.78 49.05 130.25 48.88C129.22 48.54 128.53 48.5 128.12 48.52C127.95 49.46 127.6 51.29 127.25 52.51L127.1 53.01C126.94 53.49 126.64 53.85 126.24 54.03C125.85 54.22 125.38 54.24 124.88 54.08C124.34 53.9 123.75 53.51 123.08 52.91L123.08 52.91C122.96 52.79 122.82 52.7 122.69 52.64L122.57 52.59C122.34 52.52 122.15 52.56 121.97 52.71C121.79 52.87 121.62 53.16 121.47 53.6C121.03 54.95 121.08 55.55 121.14 55.76L121.18 55.86L121.18 55.86L121.24 55.93C121.26 55.95 121.3 55.98 121.34 56.01C121.43 56.06 121.55 56.12 121.69 56.17C122 56.27 122.27 56.27 122.38 56.23L122.58 56.18C123.06 56.08 123.67 56.13 124.17 56.29C124.74 56.48 125.17 56.82 125.4 57.26C125.63 57.7 125.66 58.24 125.47 58.8C125.34 59.2 125.08 59.6 124.75 60.02C124.45 60.38 124.09 60.76 123.69 61.15L134.06 64.57C134.8 64.81 135.61 64.43 135.83 63.76L139.56 52.33C139.28 51.86 138.87 51.72 138.35 51.54Z" fill="#2D2B38" stroke="#2D2B38" stroke-width=".25"/>
+    <g clip-path="url(#c1)">
+      <path d="M107.37 117.05L101.3 129.87L98.03 130.7L101.09 124.29L95.47 120.09L98.7 119.26L102.19 121.89L104.08 117.89L107.37 117.05ZM103.87 126.34L106.77 128.47L109.99 127.64L105.03 123.93L103.87 126.34Z" fill="#2D2B38"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M117.94 114.34L118.59 116.85L111.31 118.71C110.45 118.94 109.44 120.17 109.91 122.03C110.39 123.89 111.87 124.49 112.73 124.27L116.7 123.25L117.34 125.76L113.38 126.78C110.82 127.43 108.14 125.59 107.4 122.67C106.65 119.75 108.11 116.86 110.67 116.2L117.94 114.34ZM116.97 118.81L112.35 120L112.99 122.51L117.09 121.46L118.14 125.56L120.65 124.92L119.47 120.29C119.32 119.77 118.98 119.33 118.52 119.05C118.05 118.78 117.5 118.69 116.97 118.81Z" fill="#2D2B38"/>
+      <path d="M126.09 113.67L122.78 114.51C121.7 114.93 120.81 115.75 120.29 116.79C119.78 117.84 119.67 119.04 120 120.15C120.25 121.29 120.92 122.29 121.87 122.96C122.83 123.63 124 123.92 125.15 123.77L128.45 122.92C129.54 122.5 130.43 121.69 130.94 120.64C131.46 119.6 131.56 118.4 131.24 117.28C130.99 116.14 130.32 115.14 129.37 114.47C128.41 113.8 127.24 113.51 126.09 113.67ZM127.8 120.35L124.49 121.19C124.02 121.17 123.58 121 123.22 120.69C122.87 120.38 122.63 119.97 122.54 119.5C122.39 119.05 122.4 118.57 122.57 118.12C122.73 117.68 123.04 117.31 123.45 117.06L126.75 116.22C127.22 116.24 127.68 116.42 128.03 116.73C128.39 117.04 128.63 117.46 128.72 117.92C128.86 118.37 128.85 118.86 128.68 119.3C128.51 119.74 128.2 120.11 127.8 120.35Z" fill="#2D2B38"/>
+    </g>
+    <g clip-path="url(#c2)">
+      <rect x="52.06" y="58.04" width="33.88" height="33.88" rx="4.96" transform="rotate(-10.1824 52.0554 58.0435)" fill="#fff"/>
+      <g clip-path="url(#c3)">
+        <path d="M74.68 63.42C76.14 63.14 77.64 63.45 78.86 64.28C80.09 65.11 80.93 66.39 81.21 67.85L81.91 71.5C82.19 72.95 81.88 74.45 81.05 75.68C80.22 76.9 78.94 77.75 77.48 78.03L68.35 79.78C66.9 80.05 65.4 79.74 64.17 78.91C62.95 78.08 62.11 76.8 61.83 75.35L61.13 71.7C60.85 70.24 61.16 68.74 61.99 67.52C62.82 66.29 64.1 65.45 65.55 65.17L74.68 63.42ZM75.03 65.24L65.9 66.99C64.97 67.17 64.14 67.71 63.58 68.48C63.03 69.26 62.79 70.22 62.92 71.16L62.95 71.35L63.65 75C63.83 75.93 64.37 76.77 65.14 77.32C65.92 77.88 66.88 78.11 67.82 77.98L68 77.95L77.13 76.2C78.07 76.02 78.9 75.49 79.46 74.71C80.01 73.94 80.25 72.98 80.12 72.03L80.09 71.85L79.39 68.2C79.21 67.26 78.67 66.43 77.9 65.87C77.12 65.32 76.16 65.08 75.22 65.21L75.03 65.24ZM69.17 69.21L69.52 71.03L71.34 70.68L71.69 72.51L69.87 72.86L70.22 74.69L68.39 75.04L68.04 73.21L66.22 73.56L65.87 71.73L67.69 71.38L67.34 69.56L69.17 69.21ZM77.17 71.46L77.52 73.29L75.7 73.64L75.35 71.81L77.17 71.46ZM74.65 68.16L75 69.98L73.17 70.33L72.82 68.51L74.65 68.16Z" fill="#2D2B38" stroke="#2D2B38" stroke-width=".25"/>
+      </g>
+    </g>
+    <rect x="53.01" y="58.71" width="32.22" height="32.22" rx="4.13" transform="rotate(-10.1824 53.0147 58.7106)" stroke="#2D2B38" stroke-width="1.65"/>
+    <rect x="0" width="390" height="287.54" fill="url(#g0)"/>
+  </g>
+  <defs>
+    <linearGradient id="g0" x1="190.5" y1="25.1" x2="190.5" y2="287.54" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#EEF4FC" stop-opacity="0"/>
+      <stop offset="1" stop-color="#EEF4FC" stop-opacity=".9"/>
+    </linearGradient>
+    <clipPath id="c1">
+      <rect width="43.66" height="21.83" transform="translate(90.1516 115.817) rotate(-14.3482)"/>
+    </clipPath>
+    <clipPath id="c2">
+      <rect x="52.06" y="58.04" width="33.88" height="33.88" rx="4.96" transform="rotate(-10.1824 52.0554 58.0435)"/>
+    </clipPath>
+    <clipPath id="c3">
+      <rect width="24.79" height="24.79" transform="translate(57.0129 61.7579) rotate(-10.8528)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/spx-gui/src/account-web/assets/illustration.svg b/spx-gui/src/account-web/assets/illustration.svg
new file mode 100644
index 0000000000..ed071749cd
--- /dev/null
+++ b/spx-gui/src/account-web/assets/illustration.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="472" height="348" viewBox="0 0 472 348" fill="none">
+  <path d="M315.77 186.17C310.17 183.5 302.56 184.2 296.47 184.29C295.57 185.44 294.66 186.49 293.59 187.5C300.18 186.05 308.78 185.85 315.31 187.5C316.22 187.87 317.59 188.32 318.36 188.87C319.59 189.75 320.31 192.02 319.77 193.91C319.48 194.95 318.67 195.68 317.74 196.13C313.12 198.4 304.96 195.25 299.7 197.59C295.37 199.51 289.56 210.89 286.98 214.95C284.32 219.12 281.48 223.71 277.95 227.2C277.9 232.65 277.35 238.05 277.51 243.52C277.59 246.16 277.79 249 278.12 251.62C278.28 252.93 278.68 254.19 278.77 255.5C278.81 256.12 278.76 256.62 278.57 257.21L278.19 257.53C277.63 257.41 277.4 257.28 277.05 256.81C274.33 253.15 275.16 233.09 275.84 228.19C275.88 227.9 275.92 228.04 275.67 227.8C273.81 227.92 271.95 228.02 270.08 228.06C270.2 231.03 269.95 234 269.91 236.98C269.83 241.88 270.05 247.01 270.74 251.87C270.94 253.27 271.07 254.78 271.46 256.14C271.59 256.62 271.51 257.1 271.24 257.52C270.97 257.94 270.83 257.98 270.39 258.15C269.7 257.83 269.45 257.55 269.18 256.81C267.16 251.28 267.41 233.65 267.97 227.62C264.57 224.39 262.43 216.6 261.51 212C256 213.28 252.2 213.7 246.51 213.17L246.21 212.94C246.15 212.93 246.09 212.93 246.03 212.92C244.61 212.72 243.29 212.15 241.88 211.87C240.16 213.36 239.97 217.91 239.8 220.14C239.57 223.31 239.45 226.97 240.23 230.06C236.23 234.22 232.06 238.19 228.24 242.53C225.02 246.17 222.12 250.13 219.07 253.91C218.07 255.15 216.43 256.35 215.77 257.77C215.81 259 216.09 260.24 216.49 261.41C217.92 268.57 219.09 275.87 220.72 282.98C225.88 278.47 229.48 276.11 236.44 275.31C236.3 269.72 236.9 264.15 237.24 258.57C237.43 255.56 237.29 252.22 237.89 249.27C238.33 248.83 238.39 248.79 239.01 248.66C239.5 248.96 239.77 249.12 239.87 249.72C240.16 251.33 239.8 253.5 239.71 255.16C239.35 261.71 238.37 268.43 238.54 274.98C247.14 275.21 255.58 274.75 263.96 277.16C265.29 275.51 267.05 274.45 268.83 273.36C274.86 269.68 281.31 267.34 288.34 266.55C294.95 265.81 300.71 267.23 307.16 268.33C311.13 269.02 315.14 269.52 319.13 270.1C318.85 268.22 318.6 266.32 318.14 264.47C317.61 262.31 315.88 259.62 316.35 257.39L316.69 257.13C317.7 257.48 318.25 258.41 318.7 259.33C319.73 261.41 320.19 263.85 320.53 266.13C322.82 261.78 324.39 257.64 325.56 252.85C326.02 250.98 326.39 249.09 326.67 247.18C327.06 244.47 328.36 230.25 330.47 229.39C330.96 229.71 331.04 229.91 331.14 230.5C331.24 231.11 331.19 231.79 331.12 232.4C330.76 235.31 329.93 238.17 329.5 241.08C328.97 244.67 328.8 248.33 328.06 251.89C327.51 254.47 326.76 257.11 325.9 259.61C324.62 263.34 322.38 266.69 321.08 270.43C323.83 270.94 338.11 275.87 339.49 277.66C339.63 277.84 339.69 278.02 339.77 278.23C339.61 278.79 339.57 278.85 339.13 279.24C337.94 279.21 328 274.65 325.68 273.9C320.4 272.17 314.68 271.56 309.2 270.71C304.55 270 299.83 268.77 295.14 268.52C286.88 268.09 273.05 271.47 266.99 277.31C266.83 277.46 266.69 277.61 266.54 277.77C271.26 279.29 276.06 281.18 278.46 285.84C280.72 290.21 279.93 294.88 280.02 299.56C283.15 299.38 286.93 298.69 289.47 301.01C290.77 302.2 291.28 303.89 291.3 305.6C291.32 307.89 290.41 310.53 288.77 312.17C288.32 312.62 287.83 313.03 287.35 313.45C286.56 313.62 285.78 313.77 285.01 314.01L186.29 314.12C162.81 314.22 139.29 314.5 115.82 314.2C111.85 314.15 107.97 313.63 104.04 313.51C98.53 313.33 92.99 313.57 87.47 313.41C86.05 313.37 113.09 300.27 112.42 300.27C111.42 300.27 110.59 300.27 109.53 300.27C107.75 300.27 104.83 300.41 103.09 300.41C99.69 300.42 96.96 300.08 93.57 299.95C92.88 299.92 92.22 299.72 91.59 299.41C91.24 298.93 91.19 298.75 91.19 298.16C91.96 297.39 93.51 297.51 94.53 297.52C98.18 297.54 106.46 298.28 109.53 297.78C107.74 297.24 100.05 310.96 99.05 309.2C97.32 306.13 96.37 302.82 95.57 299.41C93.89 292.19 96.88 294.74 95.57 287.43C94.15 279.5 116.16 315.41 114.59 307.5C168.53 277.1 174.23 268.52 214.93 255.41C218.22 251.76 221.09 247.74 224.25 243.98C228.47 238.96 233.13 234.03 237.91 229.54C237.54 223.15 237.04 216.6 240.1 210.72C232.91 207.5 227.31 201.53 224.55 194.17C223.56 191.57 222.86 188.88 222.45 186.14C221.85 181.84 222.05 177.52 222 173.19C221.92 166.6 221.25 160.18 222.66 153.65C219 155.38 214.51 157.41 210.43 155.9C209.14 155.43 208.11 154.57 207.53 153.31C206.59 151.28 207.14 148.74 207.95 146.77C209.29 143.47 211.91 140.54 214.54 138.17C212.52 138 210.84 137.48 209.49 135.86C208.75 134.97 208.18 133.89 207.66 132.85C208.12 129.21 209.17 127 212.14 124.71C214.36 123.01 216.99 121.78 219.68 121.06C228.21 118.75 235.28 122.57 243.33 121.26C241.13 120.32 236.83 120.38 235.76 117.88C235.39 117.01 235.51 116.08 235.88 115.24C236.68 113.47 238.75 112.14 240.54 111.51C242.09 110.96 243.79 110.73 245.41 110.49C251.25 109.61 256.48 109.74 261.86 112.41C266.12 114.54 269.28 118.26 273 121.16C278.21 117.78 284.23 115.69 290.47 116.99C292.64 117.44 295.33 118.69 296.55 120.64C296.95 121.27 297.19 122.02 297.48 122.7C296.83 125.91 296.2 126.35 293.74 128.31C298.27 129.25 302.67 131.89 305.27 135.8C306.75 138.05 307.66 141.01 307.05 143.7C306.5 146.15 304.66 147.67 302.61 148.93C301.97 149.33 301.32 149.64 300.62 149.91C301.78 154.52 301.3 158.24 298.84 162.31C297.65 164.29 296.38 166.22 295.2 168.21C297.64 172.35 298.13 177.68 297.17 182.35C306.3 181.67 316.39 182.31 323.66 188.5C327.27 191.58 329.85 195.54 330.16 200.35C330.28 202.29 329.94 204.28 329.43 206.15C330.56 207.02 336.63 207.34 338.43 207.65C345.87 208.92 354.78 211.75 360.33 217.02C362.75 219.32 364.73 222.27 366.46 225.11C368.79 228.95 370.67 233.67 371.28 238.11C371.71 241.25 372.24 244.02 372.45 247.18C372.68 250.83 372.59 254.84 372.45 258.51C371.93 271.24 367.41 294.59 359.73 304.7C357.77 307.29 354.25 310.86 351.07 311.91C356.73 312.26 362.4 312.29 368.06 312.4C373.05 312.49 378.02 312.68 383.01 312.63C382.95 312.55 381.06 311.58 381 311.5C378.5 309.5 378.46 309.42 376.54 306.67C372 300.2 373.13 283.76 373.13 275.43C373.19 274.75 373.24 274.08 373.61 273.49C376.17 272.52 407.22 272.76 411.46 273.05C412.64 273.13 413.92 273.28 415.01 273.79C416.42 274.44 417.73 275.96 418.25 277.44C418.27 277.51 418.3 277.59 418.32 277.67C421.98 277.68 426.03 277.98 428.78 280.68C430.48 282.34 431.56 284.62 431.53 287C431.5 289.39 430.41 291.54 428.69 293.17C426.33 295.42 422.23 297.26 418.92 297.05C418.66 297.03 418.48 296.95 418.23 296.88C418.08 296.84 417.92 296.81 417.76 296.77C416.66 297.99 416.24 299.71 415.67 301.22C413.82 306.12 410.71 310.42 405.77 312.56L414.39 312.64C415.94 312.64 417.59 312.48 419.12 312.65C419.75 312.72 420.03 312.82 420.5 313.21C420.38 313.72 420.36 313.79 419.91 314.08C419.35 314.44 418.58 314.58 417.92 314.61C416.4 314.69 414.83 314.49 413.31 314.48C409.7 314.45 406.09 314.53 402.49 314.56C384 314.69 365.55 314.22 347.06 314.01C346.53 313.69 346.46 313.73 346.28 313.11C346.67 312.18 347.99 311.47 348.75 310.82C350.31 310.2 352.14 308.94 353.48 307.92C365.02 299.18 368.19 275.66 370.01 262.24C370.59 257.91 370.67 253.47 370.44 249.15C370.22 245.06 369.79 241.11 369.05 237.09C368.06 231.77 365.02 226.05 361.73 221.78C354.56 212.48 343.45 210.26 332.51 208.78C330.55 208.2 328.49 208.36 326.47 208.12C325.54 208.01 324.04 207.75 323.44 206.97C323.51 206.59 323.43 206.58 323.78 206.33C324.74 205.63 326.02 206.07 327.08 206.27C327.89 203.81 328.3 201.43 327.85 198.85C327.12 194.69 324.49 191.39 321.09 189.02C319.38 187.73 317.74 186.97 315.77 186.17ZM225.38 121.81C220.75 122.34 214.26 124.49 211.28 128.22C210.41 129.32 209.85 130.66 209.99 132.09C210.12 133.34 210.86 134.43 211.86 135.18C212.9 135.96 214.29 136.39 215.59 136.19C216.79 136.01 218.26 135.26 219.02 134.29C217.14 134.45 215.65 134.91 213.77 134.35C213.09 133.25 212.51 132.43 212.82 131.08C213.38 128.68 215.78 126.94 217.81 125.78C220.04 124.5 222.63 123.44 225.09 122.71C226.24 122.37 228.45 122.47 229.37 121.89C228.08 121.67 226.67 121.54 225.38 121.81ZM290.71 130.02L289.83 131.01L289.99 131.26L290.28 131.29C294.04 131.7 298.24 133.06 300.65 136.12C302.09 137.95 303.2 140.6 302.93 142.96C302.79 144.27 301.6 145.64 301.84 146.88C302.01 146.88 302.25 146.93 302.4 146.86C303.93 145.5 304.89 143.99 304.99 141.9C305.1 139.35 303.81 137.05 302.11 135.24C299.52 132.49 295.05 130.11 291.21 130.05C291.03 130.05 290.89 130.07 290.71 130.02ZM222.41 134.51C222.36 134.56 222.31 134.61 222.27 134.66C221.05 135.91 219.55 136.93 218.18 138.01C213.35 141.82 210.16 145.48 209.11 151.65C210.01 153 210.78 153.93 212.48 154.25C214.64 154.65 217.08 153.7 219.12 153.05C219.73 152.68 220.35 152.32 220.94 151.92C218.74 152.68 215.28 153.83 213.04 152.73C212.42 152.43 212.02 151.94 211.85 151.28C211.35 149.34 212.25 146.93 213.28 145.32C214.42 143.54 215.9 141.79 217.33 140.24C218.47 139.02 222.43 136 222.92 134.74C222.74 134.64 222.61 134.54 222.41 134.51ZM256.32 143.05C253.27 144.68 251.18 147.15 248.53 149.31C244.57 152.56 237.08 156.82 231.99 157.12C230.73 156.58 229.69 156.06 229.16 154.69C228.7 153.51 229.07 152.2 229.62 151.12C230.91 148.56 233.24 146.74 234.75 144.34C232.37 146.18 226.62 149.39 225.39 151.63C224.66 152.96 224.42 154.6 224.23 156.08C223.57 161.12 223.89 166.2 223.99 171.26C224.22 182.37 223.54 191.48 230.87 200.9C235.46 206.69 242.16 210.44 249.5 211.32C254.74 211.93 261.03 210.51 265.53 207.67C266.81 206.87 267.99 205.56 269.41 205.04C269.92 204.86 270.46 205.12 270.85 205.43C270.97 205.88 271.02 205.99 270.75 206.41C269.87 207.8 265.11 210.42 263.54 211.25C264.3 213.93 265.07 216.6 265.95 219.24C266.7 221.34 267.63 224.54 269.81 225.6C271.97 226.65 274.5 225.48 276.7 225.12C282.2 219.76 288.34 209.31 291.99 202.43C288.6 200.89 286.41 199.07 285.08 195.51C284.59 194.19 284.2 192.83 283.83 191.48C282.85 191.24 281.92 191.07 281.09 190.47L280.81 189.99L280.98 189.46C282.16 188.87 284.11 189.12 285.44 189C289.76 188.62 293.54 185.93 294.89 181.77C296.11 178 295.63 173.16 293.75 169.68C292.97 168.22 291.78 166.95 290.71 165.69C287.38 164.46 283.25 163.99 279.94 165.56C279.13 165.94 278.44 166.53 277.82 167.18C276.69 166.96 275.52 166.78 274.44 166.38C271.71 161.99 272.21 153.91 270.06 148.87C270.01 148.76 269.96 148.63 269.92 148.52L269.83 148.3C265.97 151.24 260.94 155.57 255.71 154.82C254.17 154.6 252.62 153.82 251.7 152.55C251.52 152.31 251.35 152.06 251.18 151.8C251.44 148.24 253.27 146.61 255.87 144.36C256.25 144.04 256.63 143.72 257.02 143.41L257 143.09L256.32 143.05ZM296.93 148.05C297.49 153.65 297.96 158.06 294.14 162.71C293.64 163.32 293.14 163.86 292.83 164.61L293.02 164.92C293.39 164.87 293.72 164.82 294.07 164.7C296.71 162.87 298.24 159.37 298.79 156.28C299.24 153.71 299.2 150.83 297.89 148.5C297.55 148.25 297.36 148.11 296.93 148.05ZM100.63 299.01C100.15 297.11 101.05 300.93 100.63 299.01C101.21 301.31 102.25 303.73 104.04 305.35C105.38 306.57 81.31 306.72 83.09 306.95C87.68 307.56 82.89 306.89 87.51 306.95C96.59 307.5 110.79 307.6 122.44 307.52C135.13 307.81 147.83 307.67 160.51 307.92C163.17 307.97 165.88 307.94 168.53 308.15C170.43 308.3 172.32 308.65 174.23 308.67C180.1 308.7 186 308.37 191.88 308.35L204.35 308.38C206.85 308.39 209.65 308.62 212.11 308.18C213.06 308.01 213.8 307.39 214.48 306.74C215.98 305.28 216.74 303.42 216.74 301.33C216.75 297.86 219.1 275.23 218.46 271.82C216.85 263.35 212.76 279.74 211.05 271.28C122.44 290.32 157.98 287.45 100.63 299.01ZM388.69 275.02C384.21 275.09 379.79 274.97 375.31 275.28C375.36 275.37 375.31 275.48 375.31 275.58C375.31 277.11 375.31 280.14 375.32 281.68C375.31 292 373.93 306.28 385.26 310.9C389.1 312.46 398.39 313.77 402.2 311.72C402.27 311.69 402.33 311.64 402.4 311.59C406.44 310.5 410.02 307.45 412.1 303.87C413.36 301.65 414.34 299.29 415.01 296.83C416.16 292.63 417.45 282.67 416.27 278.55C415.97 277.49 415.43 276.33 414.44 275.75C412.19 274.44 392.49 275.01 388.69 275.02ZM243.19 277.1C235.58 277.27 229.2 277.65 223.56 283.52C222.81 284.29 222.15 285.15 221.42 285.93L221.82 289.3C227.24 284.89 235.26 278.41 242.7 279.08C243.39 279.14 243.6 279.28 244.11 279.74L244.3 280.31C243.93 280.8 243.63 280.92 243.02 281.02C241.88 281.19 240.65 281.08 239.53 281.36C233.49 282.89 226.71 287.78 222.5 292.24C222.52 293.2 222.61 293.93 223.04 294.79C225.28 293.9 226.85 288.4 233.22 287.06C235.85 286.51 238.4 287.33 241.01 286.99C242.97 286.73 246.56 285.73 248.38 286.61C249.3 287.05 251.41 288.28 251 289.85C250.97 289.99 251.13 289.8 250.89 290.2C250.68 290.56 250.38 290.81 249.97 290.93C249.65 291.01 249.2 290.93 249.09 290.82C248.48 290.36 248.47 289.69 248 289.15C247.57 288.66 247.12 288.38 246.45 288.38C245.51 288.37 244.51 288.8 243.63 289.11C239.12 290.69 235.68 293.13 232.42 296.62C231.83 297.25 231.27 297.84 231.3 298.76C231.6 299.04 231.64 299.12 232.08 299.1C234.27 298.96 236.77 295.94 238.52 294.73C240.57 293.32 244.2 291.89 246.71 291.83C249.75 291.77 253 294.07 255.88 295.05C256.56 295.27 257.23 295.29 257.92 295.44C259.3 295.77 260.64 296.28 262.06 296.57C262.81 296.73 263.55 296.7 264.3 296.83C266.32 297.2 268.08 297.86 270.17 297.91C272.74 297.98 275.16 297.58 277.7 297.42C277.82 292.7 278.03 288.19 274.57 284.51C268.52 278.06 253.38 277.33 245.09 277.14C244.46 277.13 243.81 277.17 243.19 277.1ZM418.38 279.85L418.62 281.14C419.3 281.44 420.11 281.43 420.83 281.62C422.74 282.11 424.35 283.46 425.09 285.32C425.62 286.64 425.38 288.41 424.78 289.63C424.63 289.95 424.49 290.2 424.25 290.45C423.87 291.28 422.77 291.91 421.94 292.22C420.53 292.74 418.61 292.64 417.76 294.01C418.07 294.51 418.28 294.63 418.87 294.77C419.47 294.92 420.76 294.68 421.35 294.48C423.94 294 426.69 292.8 428.23 290.57C429.22 289.16 429.62 287.46 429.27 285.76C428.89 283.85 427.7 282.25 426.07 281.2C423.68 279.65 421.13 279.55 418.38 279.85ZM418.58 283.76C418.59 283.81 418.61 283.87 418.62 283.92C418.62 285.76 418.59 288.32 418.86 291.06C419.25 291.25 419.37 291.34 419.81 291.17C420.21 291.01 420.72 290.81 421 290.5C421.89 290.15 422.77 289.36 423.18 288.48C423.55 287.68 423.53 286.82 423.17 286.02C422.71 284.99 421.83 284.21 420.76 283.86C420.02 283.62 419.33 283.67 418.58 283.76ZM234.71 288.99C230.84 290.2 226.16 293.67 224.27 297.37C224.03 297.86 224.03 298.02 224.08 298.56C224.71 298.96 225.05 298.94 225.76 298.78C226.09 298.7 226.43 298.62 226.76 298.53C226.95 298.5 227.17 298.53 227.34 298.44C228.09 298.07 229.35 296.3 230.02 295.65C232.25 293.49 234.74 291.04 237.37 289.41C237.61 289.26 237.85 289.12 238.09 288.98L234.71 288.99ZM246.31 294.54C242.34 295.08 239.81 297.13 236.6 299.33C243.01 299.31 249.47 299.5 255.89 299.58L265.25 299.71C262.1 298.97 258.9 298.29 255.83 297.26C253.33 296.43 250.8 295.23 248.25 294.61C247.65 294.46 246.91 294.39 246.31 294.54ZM284.92 301.72C279.15 302.05 273.26 301.8 267.48 301.82L230.89 301.77C232.33 303.31 233.55 304.72 233.44 306.98C233.34 308.82 232.43 310.32 231.53 311.88C232.44 311.86 233.36 311.8 234.26 311.87C245.86 311.36 257.61 311.71 269.23 311.7C274.38 311.69 279.71 312 284.82 311.37C285.89 311.24 286.64 310.95 287.59 310.46C288.77 308.94 289.35 307.29 289.12 305.35C288.99 304.27 288.51 303.22 287.65 302.53C286.83 301.89 285.93 301.77 284.92 301.72ZM223.85 301.89C223.58 306.68 222.14 308.76 218.63 311.94L226.62 311.95C227.23 311.86 227.87 311.8 228.48 311.67C230.35 309.39 232.29 307.02 230.16 304.04C229.42 303.01 227.97 302.14 226.71 301.93C225.82 301.78 224.76 301.88 223.85 301.89Z" fill="#2D2B38"/>
+  <path d="M218.93 134.47C218.17 135.44 216.7 136.19 215.5 136.37C214.2 136.57 212.81 136.14 211.76 135.36C210.77 134.61 210.03 133.53 209.9 132.27C209.75 130.84 210.31 129.5 211.19 128.4C214.16 124.67 220.66 122.52 225.29 121.99C226.57 121.72 227.99 121.85 229.27 122.08C228.35 122.65 226.14 122.56 225 122.89C222.53 123.63 219.95 124.68 217.72 125.96C215.69 127.12 213.28 128.86 212.73 131.27C212.42 132.61 213 133.44 213.68 134.53C215.56 135.09 217.04 134.63 218.93 134.47Z" fill="#FEFEFE"/>
+  <path d="M302.31 147.04C302.15 147.11 301.92 147.07 301.75 147.06C301.51 145.82 302.7 144.46 302.84 143.14C303.1 140.78 302 138.13 300.56 136.31C298.15 133.24 293.94 131.89 290.19 131.47L289.89 131.44L289.74 131.19L290.62 130.21C290.8 130.25 290.93 130.23 291.12 130.24C294.95 130.29 299.43 132.68 302.02 135.43C303.72 137.23 305.01 139.54 304.89 142.09C304.8 144.17 303.83 145.68 302.31 147.04Z" fill="#FEFEFE"/>
+  <path d="M209.01 151.84C210.07 145.66 213.25 142 218.08 138.19C219.45 137.11 220.96 136.09 222.17 134.84C222.22 134.79 222.27 134.74 222.31 134.69C222.51 134.73 222.65 134.82 222.82 134.93C222.33 136.19 218.38 139.2 217.24 140.42C215.81 141.97 214.32 143.73 213.19 145.5C212.16 147.12 211.25 149.52 211.75 151.46C211.93 152.13 212.33 152.61 212.95 152.92C215.18 154.02 218.65 152.86 220.85 152.1C220.25 152.5 219.63 152.86 219.03 153.23C216.99 153.89 214.55 154.83 212.39 154.43C210.69 154.11 209.91 153.18 209.01 151.84Z" fill="#FEFEFE"/>
+  <path d="M231.89 157.3C236.98 157 244.47 152.74 248.44 149.5C251.08 147.33 253.17 144.87 256.23 143.24L256.91 143.27L256.92 143.6C256.54 143.91 256.15 144.22 255.78 144.55C253.18 146.79 251.34 148.42 251.09 151.99C251.25 152.24 251.43 152.49 251.6 152.74C252.52 154.01 254.07 154.78 255.61 155C260.84 155.75 265.88 151.42 269.74 148.49L269.82 148.7C269.87 148.82 269.91 148.94 269.96 149.06C272.11 154.09 271.62 162.17 274.35 166.56C275.43 166.96 276.6 167.14 277.73 167.37C278.35 166.71 279.03 166.13 279.85 165.74C283.16 164.18 287.29 164.64 290.61 165.87C291.69 167.13 292.87 168.4 293.66 169.86C295.54 173.34 296.01 178.18 294.79 181.95C293.44 186.11 289.67 188.8 285.35 189.18C284.01 189.3 282.06 189.05 280.89 189.64L280.71 190.17L281 190.66C281.83 191.25 282.76 191.42 283.74 191.66C284.11 193.02 284.5 194.37 284.99 195.69C286.31 199.25 288.5 201.07 291.9 202.61C288.25 209.5 282.1 219.95 276.6 225.3C274.41 225.66 271.88 226.83 269.72 225.78C267.54 224.72 266.61 221.53 265.85 219.42C264.98 216.78 264.21 214.11 263.45 211.44C265.01 210.61 269.77 207.99 270.66 206.6C270.93 206.18 270.87 206.06 270.76 205.61C270.37 205.3 269.83 205.04 269.31 205.22C267.89 205.74 266.71 207.05 265.44 207.86C260.94 210.69 254.64 212.11 249.41 211.5C242.06 210.62 235.36 206.88 230.78 201.08C223.45 191.66 224.13 182.55 223.9 171.44C223.79 166.38 223.48 161.3 224.13 156.26C224.32 154.78 224.56 153.14 225.29 151.81C226.53 149.57 232.28 146.36 234.66 144.52C233.15 146.92 230.81 148.74 229.53 151.3C228.98 152.38 228.61 153.69 229.06 154.87C229.59 156.24 230.63 156.77 231.89 157.3ZM286.77 177.06C286.69 176.12 286.54 175.42 285.92 174.67C285.4 174.03 284.58 173.48 283.73 173.49C282.97 173.5 282.49 173.93 281.99 174.47C281.59 174.92 281.45 175.14 281.52 175.72C282.49 176.38 283.62 175.79 284.58 176.38C284.27 177.85 282.64 177.97 282.66 179.53C283.09 180.01 283.59 180.33 284.27 180.32C284.92 180.31 285.64 179.63 286 179.15C286.45 178.56 286.63 177.78 286.77 177.06ZM255.79 158.56C254.31 158.78 252.69 158.88 251.49 159.85C251.31 160.47 251.37 160.52 251.58 161.1L251.99 161.43C255.7 160.86 258.55 160.26 262.14 161.65C262.96 162.15 263.7 162.73 264.69 162.65L265.24 162.35C265.35 161.79 265.33 161.56 265.01 161.06C264.01 159.51 261.87 159 260.16 158.76C258.71 158.55 257.15 158.78 255.79 158.56ZM231.21 160.12C229.49 160.56 226.94 160.89 225.95 162.54C225.92 162.6 225.89 162.67 225.86 162.73C226 162.91 226.02 163.04 226.25 163.08C228.41 163.39 230.33 161.82 232.36 161.99L232.65 162.03C234.08 162.24 235.87 163.32 237.21 162.69C237.48 162.18 237.48 162.13 237.42 161.55C236.32 160.37 233.89 160.13 232.34 160.08C231.95 160.06 231.59 160.08 231.21 160.12ZM255.37 170.06C254.49 170.14 253.6 170.12 253 170.87C252.44 171.58 252.22 172.54 252.35 173.43C252.52 174.56 253.21 175.9 254.16 176.58C254.85 177.07 255.73 177.14 256.55 177.24C257.56 176.72 258.11 176.22 258.46 175.11C258.81 174.01 258.78 172.61 258.21 171.59C257.77 170.81 257.02 170.32 256.16 170.13C255.9 170.08 255.64 170.03 255.37 170.06ZM231.52 170.43C230.73 170.97 230.28 171.31 230.08 172.28C229.86 173.36 230.17 174.71 230.51 175.73C231.51 176.68 232.49 177.54 233.95 177.57C234.33 177.57 234.71 177.52 235.09 177.47C236.01 176.77 236.7 176.17 236.89 174.96C237.05 173.91 236.7 172.92 236.03 172.12C235.19 171.09 233.95 170.41 232.62 170.36C232.24 170.34 231.89 170.38 231.52 170.43ZM241.8 171.68C240.48 174.07 241.88 179.2 241.73 181.99C241.63 183.82 238.93 185.91 239.62 187.69C239.84 188.27 240.31 188.53 240.86 188.74C242.12 189.22 243.54 189.3 244.87 189.44C245.15 188.82 245.28 188.68 245.17 188C244.41 187.09 243.06 186.86 241.96 186.5C242.49 185.72 242.95 184.98 243.22 184.07C243.99 181.4 244.13 175.76 243.53 173.06C243.39 172.43 243.28 172.23 242.82 171.8C242.48 171.76 242.14 171.7 241.8 171.68ZM259.84 178.52C258.92 178.94 257.73 179.37 257.3 180.37C257.12 180.81 257.13 181.31 257.32 181.75C257.72 182.67 258.76 183.27 259.68 183.56C260.7 183.88 261.7 183.89 262.75 183.65C263.8 183.24 265.2 182.82 265.77 181.75C265.97 181.36 266 180.9 265.84 180.5C265.49 179.59 264.44 179.07 263.59 178.73C262.47 178.29 261.03 178.43 259.84 178.52ZM229.85 179.41C228.72 179.81 226.98 180.28 226.49 181.51C226.27 182.04 226.28 182.59 226.58 183.09C227.08 183.96 228.29 184.42 229.22 184.59C230.04 184.74 231.02 184.65 231.85 184.55C232.91 184.21 234.23 183.82 234.81 182.76C235.03 182.36 235.06 181.87 234.91 181.44C234.64 180.66 233.95 180.14 233.21 179.8C232.1 179.29 231.03 179.32 229.85 179.41ZM254.88 194.13C252.37 195.69 250.01 197.02 247 197.3C245.43 197.44 242.56 196.65 241.41 197.63C241.41 198.24 241.53 198.37 241.83 198.88C242.17 199.06 242.49 199.24 242.86 199.35C246.82 199.81 251.64 199.43 254.85 196.8C255.4 196.34 255.69 195.98 255.89 195.3C255.65 194.63 255.59 194.53 254.95 194.16C254.93 194.15 254.9 194.14 254.88 194.13Z" fill="#FBEBDF"/>
+  <path d="M293.97 164.88C293.62 165.01 293.3 165.05 292.93 165.1L292.74 164.79C293.04 164.04 293.54 163.51 294.05 162.89C297.86 158.24 297.39 153.83 296.84 148.23C297.26 148.29 297.45 148.43 297.79 148.69C299.1 151.01 299.15 153.89 298.69 156.47C298.15 159.55 296.62 163.06 293.97 164.88Z" fill="#FEFEFE"/>
+  <path d="M262.14 161.66C258.55 160.26 255.7 160.86 251.99 161.43L251.58 161.1C251.37 160.53 251.31 160.47 251.49 159.85C252.69 158.88 254.31 158.78 255.79 158.56C257.15 158.78 258.71 158.55 260.16 158.76C261.87 159 264.01 159.51 265.01 161.06C265.33 161.56 265.35 161.79 265.24 162.35L264.69 162.65C263.7 162.73 262.96 162.15 262.14 161.66Z" fill="#2D2B38"/>
+  <path d="M232.36 161.99C230.33 161.82 228.41 163.39 226.25 163.08C226.02 163.04 226 162.91 225.86 162.73C225.89 162.67 225.92 162.6 225.95 162.54C226.94 160.89 229.49 160.56 231.21 160.12C231.59 160.08 231.95 160.07 232.34 160.08C233.89 160.13 236.32 160.37 237.42 161.55C237.48 162.13 237.48 162.18 237.21 162.69C235.87 163.32 234.08 162.24 232.65 162.03L232.36 161.99Z" fill="#2D2B38"/>
+  <path d="M256.55 177.24C255.73 177.14 254.85 177.07 254.16 176.58C253.21 175.9 252.52 174.56 252.35 173.43C252.22 172.54 252.44 171.58 253 170.87C253.6 170.12 254.49 170.14 255.37 170.06C255.64 170.03 255.9 170.08 256.16 170.13C257.02 170.32 257.77 170.81 258.21 171.59C258.78 172.61 258.81 174.01 258.46 175.11C258.11 176.22 257.56 176.72 256.55 177.24Z" fill="#2D2B38"/>
+  <path d="M230.51 175.73C230 174.5 229.86 173.36 230.08 172.28C230.28 171.31 230.73 170.97 231.52 170.43C231.89 170.38 232.24 170.34 232.62 170.36C233.95 170.42 235.19 171.09 236.03 172.12C236.7 172.92 237.05 173.91 236.89 174.96C236.7 176.17 236.01 176.77 235.09 177.47C234.71 177.52 234.33 177.58 233.95 177.57C232.49 177.55 231.5 177 230.51 175.73Z" fill="#2D2B38"/>
+  <path d="M244.87 189.44C243.54 189.3 242.12 189.22 240.86 188.74C240.31 188.53 239.84 188.27 239.62 187.69C238.93 185.91 241.63 183.82 241.73 181.99C241.88 179.2 240.48 174.07 241.8 171.68C242.14 171.7 242.48 171.76 242.82 171.8C243.28 172.23 243.39 172.43 243.53 173.06C244.13 175.76 243.99 181.4 243.22 184.07C242.95 184.98 242.49 185.72 241.96 186.5C243.06 186.86 244.41 187.09 245.17 188C245.28 188.68 245.15 188.82 244.87 189.44Z" fill="#2D2B38"/>
+  <path d="M284.58 176.38C283.62 175.79 282.49 176.38 281.52 175.72C281.45 175.14 281.59 174.95 282 174.5C282.5 173.96 282.97 173.5 283.73 173.49C284.58 173.48 285.4 174.03 285.92 174.67C286.54 175.42 286.69 176.12 286.77 177.06C286.47 177.05 286.18 177.03 285.88 177C285.13 176.93 285.07 176.98 284.58 176.38Z" fill="#2D2B38"/>
+  <path d="M284.58 176.38C285.07 176.98 285.13 176.93 285.88 177C286.18 177.03 286.47 177.05 286.77 177.06C286.63 177.78 286.45 178.56 286 179.16C285.64 179.63 284.92 180.31 284.27 180.32C283.59 180.33 283.09 180.01 282.66 179.53C282.64 177.97 284.27 177.85 284.58 176.38Z" fill="#2D2B38"/>
+  <path d="M262.75 183.65C261.7 183.89 260.7 183.88 259.68 183.56C258.76 183.28 257.72 182.67 257.32 181.75C257.13 181.31 257.12 180.81 257.3 180.37C257.73 179.37 258.92 178.94 259.84 178.52C261.03 178.44 262.47 178.29 263.59 178.73C264.44 179.07 265.49 179.59 265.84 180.5C266 180.91 265.97 181.36 265.77 181.75C265.2 182.82 263.8 183.24 262.75 183.65Z" fill="#FBEBDF"/>
+  <path d="M231.85 184.55C231.02 184.65 230.04 184.74 229.22 184.59C228.29 184.42 227.08 183.96 226.58 183.09C226.28 182.59 226.27 182.04 226.49 181.51C226.98 180.28 228.72 179.81 229.85 179.41C231.03 179.32 232.1 179.29 233.21 179.8C233.95 180.14 234.64 180.66 234.91 181.44C235.06 181.87 235.03 182.36 234.81 182.76C234.23 183.82 232.91 184.21 231.85 184.55Z" fill="#FBEBDF"/>
+  <path d="M315.67 186.35L315.22 187.68C308.69 186.03 300.08 186.24 293.5 187.68C294.56 186.67 295.48 185.62 296.38 184.47C302.47 184.38 310.08 183.69 315.67 186.35Z" fill="#FF8535"/>
+  <path d="M315.22 187.68L315.67 186.35C317.64 187.15 319.29 187.92 321 189.21C320.05 189.27 319.15 188.79 318.27 189.05C317.5 188.5 316 188 315.22 187.68Z" fill="#FF8535"/>
+  <path d="M321 189.21C324.39 191.57 327.03 194.87 327.76 199.03C328.21 201.61 327.79 203.99 326.99 206.45C325.92 206.25 324.65 205.82 323.69 206.51C323.33 206.76 323.41 206.77 323.35 207.16C323.95 207.93 325.44 208.2 326.38 208.31C328.4 208.54 330.46 208.38 332.42 208.96L331.9 209.16C334.76 210.61 338.25 211.36 341.25 212.58C341.25 212.58 357.5 216 366.11 237.12C367.72 242.03 368.33 247.59 368.19 252.75C367.82 266.05 361.66 288.48 355.68 300.19C354.55 302.36 353.29 304.47 351.92 306.5C351.29 307.43 348.91 310.26 348.66 311.01C347.89 311.65 346.57 312.36 346.19 313.3C346.37 313.91 346.44 313.87 346.96 314.19C345.97 314.87 289.75 314.86 284.91 314.19C285.68 313.96 286.46 313.8 287.25 313.63C287.74 313.21 288.22 312.8 288.67 312.35C290.32 310.71 291.23 308.07 291.2 305.78C291.19 304.07 290.68 302.38 289.38 301.19C286.84 298.87 283.06 299.56 279.93 299.75C279.83 295.06 280.62 290.39 278.37 286.02C275.96 281.36 271.17 279.47 266.45 277.95C266.59 277.8 266.74 277.64 266.89 277.5C272.95 271.65 286.79 268.27 295.04 268.71C299.74 268.96 304.46 270.18 309.11 270.9C314.59 271.74 320.31 272.35 325.59 274.08C327.9 274.83 337.85 279.4 339.04 279.42C339.47 279.03 339.51 278.97 339.68 278.42C339.6 278.2 339.54 278.02 339.4 277.84C338.01 276.05 323.74 271.12 320.99 270.61C322.29 266.87 324.52 263.52 325.81 259.79C326.66 257.29 327.42 254.66 327.96 252.07C328.7 248.51 328.87 244.85 329.4 241.27C329.84 238.36 330.66 235.49 331.02 232.58C331.1 231.97 331.15 231.29 331.05 230.68C330.95 230.09 330.87 229.89 330.38 229.58C328.27 230.44 326.96 244.65 326.58 247.36C326.3 249.27 325.92 251.16 325.46 253.04C324.29 257.82 322.72 261.96 320.44 266.31C320.1 264.03 319.64 261.6 318.61 259.51C318.15 258.59 317.61 257.66 316.59 257.32L316.25 257.58C315.78 259.8 317.51 262.49 318.05 264.65C318.51 266.5 318.76 268.4 319.04 270.28C315.05 269.71 311.04 269.2 307.06 268.52C300.62 267.41 294.86 266 288.25 266.73C281.22 267.52 274.76 269.86 268.74 273.54C266.95 274.63 265.19 275.69 263.87 277.34C255.48 274.94 247.05 275.39 238.45 275.16C238.27 268.61 239.25 261.9 239.61 255.34C239.7 253.69 240.07 251.51 239.78 249.91C239.67 249.3 239.41 249.14 238.91 248.85C238.3 248.98 238.24 249.01 237.79 249.45C237.2 252.4 237.33 255.74 237.15 258.76C236.8 264.33 236.2 269.9 236.35 275.49C229.39 276.29 225.79 278.65 220.62 283.16C218.99 276.05 217.83 268.75 216.4 261.59C218.3 259.36 219.96 256.76 221.82 254.45C227.74 247.09 233.81 240.13 240.72 233.66C241.26 229.08 240.54 224.29 241.53 219.78C242.17 216.88 243.63 214.72 246.11 213.12L246.42 213.35C252.11 213.89 255.91 213.46 261.41 212.18C262.34 216.78 264.47 224.58 267.87 227.8C267.31 233.83 267.06 251.46 269.09 257C269.36 257.73 269.6 258.01 270.29 258.33C270.73 258.16 270.88 258.12 271.14 257.7C271.41 257.28 271.5 256.8 271.36 256.32C270.98 254.96 270.85 253.46 270.65 252.05C269.95 247.19 269.74 242.07 269.81 237.16C269.86 234.19 270.11 231.22 269.99 228.24C271.86 228.21 273.71 228.1 275.58 227.98C275.83 228.22 275.79 228.08 275.75 228.37C275.07 233.28 274.24 253.34 276.96 256.99C277.31 257.46 277.54 257.6 278.09 257.72L278.48 257.39C278.67 256.81 278.71 256.3 278.67 255.69C278.59 254.38 278.18 253.11 278.02 251.81C277.7 249.18 277.5 246.34 277.42 243.7C277.26 238.23 277.81 232.83 277.86 227.38C281.39 223.89 284.23 219.3 286.88 215.13C289.47 211.07 295.27 199.7 299.6 197.77C304.87 195.44 313.02 198.59 317.64 196.32C318.58 195.86 319.39 195.13 319.68 194.1C320.21 192.2 319.5 190 318.27 189.05C319.16 188.79 320.05 189.27 321 189.21Z" fill="#FF8535"/>
+  <path d="M242.86 199.35C242.49 199.24 242.17 199.06 241.83 198.88C241.53 198.37 241.41 198.24 241.41 197.63C242.56 196.66 245.43 197.44 247 197.3C250.01 197.02 252.37 195.69 254.88 194.13C254.9 194.14 254.93 194.15 254.95 194.16C255.59 194.53 255.65 194.63 255.89 195.3C255.69 195.98 255.4 196.34 254.85 196.8C251.64 199.43 246.82 199.81 242.86 199.35Z" fill="#2D2B38"/>
+  <path d="M348.66 311.01C348.91 310.26 351.29 307.43 351.92 306.5C353.29 304.47 354.55 302.36 355.68 300.19C361.66 288.48 367.82 266.05 368.19 252.75C368.33 247.59 367.72 242.03 366.11 237.12C362.05 224.76 352.96 217.37 341.25 212.58C338.25 211.36 334.76 210.61 331.9 209.16L332.42 208.96C343.36 210.44 354.46 212.66 361.63 221.97C364.92 226.24 367.97 231.95 368.95 237.28C369.69 241.3 369.68 245.68 369.9 249.77C370.13 254.09 370.5 258.09 369.91 262.42C368.09 275.84 364.93 299.36 353.39 308.11C352.05 309.12 350.22 310.38 348.66 311.01Z" fill="#FEFEFE"/>
+  <path d="M240.13 230.24C239.35 227.15 239.48 223.49 239.71 220.32C239.87 218.1 240.07 213.54 241.79 212.06C243.19 212.33 244.51 212.91 245.94 213.1C246 213.11 246.05 213.12 246.11 213.12C243.63 214.72 242.17 216.88 241.53 219.78C240.54 224.29 241.26 229.08 240.72 233.66C233.81 240.13 227.74 247.09 221.82 254.45C219.96 256.76 218.3 259.36 216.4 261.59C216 260.43 215.71 259.19 215.68 257.95C216.34 256.53 217.98 255.33 218.97 254.09C222.03 250.31 224.93 246.35 228.14 242.71C231.97 238.38 236.13 234.4 240.13 230.24Z" fill="#FEFEFE"/>
+  <path d="M386.28 256.06C387.53 253.74 390.75 252.7 391.52 250.17C391.88 248.97 391.99 247.32 391.33 246.21C389.98 243.95 387.13 244.25 384.93 243.79C384.58 243.18 384.85 242.74 385.01 242.08C386.1 241.96 387.27 241.85 388.36 242.05C390.11 242.38 391.98 243.57 392.91 245.09C396.6 251.17 389.2 253.49 387.64 258.33C386.09 263.17 393.44 263.29 394.51 265.29C394.31 265.89 394.19 265.9 393.68 266.24C393.54 266.26 393.36 266.26 393.22 266.26C389.88 265.29 385.73 262.25 385.73 261.4C385 259 385.86 256.85 386.28 256.06Z" fill="#2D2B38"/>
+  <path d="M401.99 265.84C401.13 265.65 400.31 264.54 399.89 263.82C398.75 261.89 398.54 259.33 399.15 257.19C400.04 254.1 403.5 252.5 404.5 252C405.5 251.5 406.4 251 407.12 251.42C407.25 251.64 407.45 251.8 407.34 252.06C406.89 253.11 404.75 253.85 403.8 254.4C402.39 255.22 401.33 256.49 400.97 258.09C400.44 260.38 401.87 262.23 403.03 264.03C403.4 264.6 403.5 265 403.32 265.54C403 266 402.52 265.96 401.99 265.84Z" fill="#2D2B38"/>
+  <path d="M375.22 275.45C379.69 275.14 384.11 275.27 388.6 275.21C392.4 275.19 412.1 274.62 414.34 275.93C415.33 276.51 415.87 277.67 416.18 278.73C417.36 282.86 416.07 292.81 414.92 297.01C414.24 299.47 413.26 301.83 412 304.06C409.93 307.64 406.35 310.68 402.31 311.78C402.24 311.82 402.18 311.87 402.11 311.91C398.3 313.96 389 312.65 385.17 311.08C373.83 306.46 375.22 292.27 375.23 281.86C375.33 280.3 375.22 277.36 375.22 275.76C375.22 275.66 375.22 275.58 375.22 275.45ZM410.07 279.58C409.8 282.16 408.88 288.47 409.69 290.67L410.05 290.88L410.42 290.62C411.02 290.13 411.1 289.89 411.2 289.13C411.46 286.92 412.15 281.86 411.16 279.9C410.77 279.69 410.52 279.61 410.07 279.58Z" fill="#fff"/>
+  <path d="M221.32 286.11C222.06 285.33 222.72 284.48 223.46 283.7C229.1 277.83 235.49 277.45 243.09 277.28C243.72 277.35 244.36 277.31 245 277.33C253.28 277.51 268.42 278.24 274.48 284.69C277.93 288.37 277.73 292.89 277.61 297.6C275.07 297.77 272.65 298.16 270.08 298.1C267.98 298.04 266.23 297.38 264.2 297.02C263.46 296.88 262.71 296.92 261.96 296.76C260.55 296.46 259.21 295.95 257.82 295.63C257.14 295.47 256.47 295.45 255.79 295.23C252.91 294.26 249.65 291.95 246.62 292.01C244.11 292.07 240.48 293.5 238.43 294.91C236.67 296.12 234.18 299.14 231.98 299.28C231.55 299.31 231.5 299.23 231.21 298.95C231.17 298.02 231.73 297.43 232.33 296.8C235.58 293.31 239.03 290.88 243.53 289.29C244.41 288.98 245.42 288.55 246.36 288.56C247.02 288.57 247.48 288.85 247.91 289.34C248.35 289.84 248.5 290 249 290.5C249.5 291 249.5 291 250 291C250.42 290.89 250.97 290.24 250.91 290.04C250.64 289.07 249.2 287.23 248.29 286.8C246.46 285.92 242.88 286.91 240.91 287.17C238.3 287.51 235.75 286.69 233.12 287.25C226.76 288.59 225.18 294.08 222.95 294.98C222.52 294.11 222.43 293.38 222.41 292.42C226.61 287.96 233.4 283.07 239.44 281.54C240.55 281.26 241.78 281.37 242.92 281.2C243.54 281.11 243.83 280.98 244.21 280.5L244.02 279.92C243.51 279.46 243.3 279.33 242.6 279.26C235.16 278.6 227.14 285.07 221.72 289.48L221.32 286.11Z" fill="#FBEBDF"/>
+  <path d="M410.42 290.62L410.05 290.88L409.69 290.67C408.88 288.47 409.8 282.16 410.07 279.58C410.52 279.61 410.77 279.69 411.16 279.9C412.15 281.86 411.46 286.92 411.2 289.13C411.1 289.89 411.02 290.13 410.42 290.62Z" fill="#FEFEFE"/>
+  <path d="M424.15 290.63C424.39 290.38 424.54 290.13 424.69 289.82C425.29 288.59 425.53 286.83 425 285.5C424.26 283.65 422.64 282.29 420.74 281.8C420.02 281.61 419.2 281.62 418.53 281.32L418.29 280.04C421.03 279.74 423.59 279.84 425.98 281.38C427.61 282.43 428.79 284.03 429.18 285.94C429.52 287.64 429.12 289.35 428.14 290.75C426.59 292.98 423.84 294.19 421.25 294.66C420.67 294.86 419.38 295.1 418.77 294.95C418.19 294.81 417.97 294.7 417.67 294.19C418.52 292.82 420.44 292.93 421.85 292.4C422.68 292.09 423.77 291.46 424.15 290.63Z" fill="#fff"/>
+  <path d="M421.04 290.5C420.75 290.81 420.12 291.2 419.72 291.35C419.27 291.52 419.16 291.44 418.77 291.25C418.5 289 418.48 286.5 418.53 284.1C418.51 284.05 418.5 284 418.48 283.95C419.24 283.86 419.93 283.81 420.66 284.04C421.74 284.39 422.62 285.18 423.08 286.2C423.43 287 423.46 287.87 423.08 288.66C422.67 289.54 421.92 290.15 421.04 290.5Z" fill="#FEFEFE"/>
+  <path d="M226.67 298.71C226.33 298.8 226 298.88 225.66 298.96C224.96 299.12 224.61 299.14 223.99 298.75C223.94 298.2 223.93 298.04 224.18 297.55C226.07 293.85 230.75 290.38 234.62 289.17L238 289.16C237.76 289.3 237.52 289.45 237.28 289.6C234.64 291.22 232.16 293.67 229.93 295.83C229.26 296.48 227.99 298.26 227.25 298.63C227.07 298.71 226.86 298.69 226.67 298.71Z" fill="#FBEBDF"/>
+  <path d="M236.5 299.52C239.72 297.31 242.24 295.26 246.21 294.72C246.82 294.58 247.55 294.64 248.16 294.79C250.71 295.41 253.24 296.61 255.74 297.44C258.81 298.47 262.01 299.16 265.16 299.89L255.79 299.76C249.38 299.68 242.91 299.49 236.5 299.52Z" fill="#FF8535"/>
+  <path d="M230.79 301.96L267.38 302C273.17 301.98 279.06 302.23 284.83 301.9C285.83 301.95 286.74 302.07 287.55 302.71C288.42 303.4 288.89 304.45 289.02 305.53C289.26 307.47 288.67 309.13 287.5 310.65C286.55 311.14 285.8 311.42 284.73 311.56C279.61 312.18 274.28 311.88 269.14 311.88C257.52 311.9 245.77 311.55 234.17 312.06C233.27 311.99 232.34 312.05 231.44 312.07C232.34 310.51 233.25 309 233.34 307.16C233.45 304.9 232.24 303.49 230.79 301.96Z" fill="#BEE8F7"/>
+  <path d="M218.54 312.12C222.05 308.94 223.49 306.86 223.76 302.07C224.66 302.06 225.72 301.96 226.61 302.11C227.87 302.32 229.33 303.19 230.06 304.22C232.2 307.2 230.26 309.58 228.38 311.86C227.82 312.13 227.14 312.04 226.52 312.13L218.54 312.12Z" fill="#BEE8F7"/>
+  <rect x="105" y="301" width="184" height="11" rx="5" fill="#BEE8F7" stroke="#2D2B38" stroke-width="2"/>
+  <circle cx="332.28" cy="85.5" r="17.5" stroke="#2D2B38" stroke-width="2"/>
+  <circle cx="331" cy="87" r="15" fill="#FFB106"/>
+  <path d="M325.89 102.26L331.91 102.97C332.1 102.99 332.28 102.99 332.47 102.98L332.66 102.96L337.64 102.3C338.24 102.22 338.78 102.68 338.78 103.29V109C338.78 109.56 338.33 110 337.78 110H325.78C325.22 110 324.78 109.56 324.78 109V103.25C324.78 102.69 325.24 102.25 325.78 102.25L325.89 102.26Z" stroke="#2D2B38" stroke-width="2"/>
+  <rect x="312.68" y="58.22" width="1" height="9.31" rx=".5" transform="rotate(-28.4096 312.678 58.2178)" fill="#D9D9D9" stroke="#2D2B38"/>
+  <rect x="331.28" y="51.5" width="1" height="9.31" rx=".5" fill="#D9D9D9" stroke="#2D2B38"/>
+  <rect x="327.4" y="85.92" width="1" height="17" rx=".5" transform="rotate(-17.0043 327.401 85.9201)" fill="#D9D9D9" stroke="#2D2B38"/>
+  <rect x="349.84" y="57.7" width="1" height="9.31" rx=".5" transform="rotate(35.1911 349.839 57.6999)" fill="#D9D9D9" stroke="#2D2B38"/>
+  <rect x="336.84" y="87.7" width="1" height="9.31" rx=".5" transform="rotate(35.1911 336.839 87.6999)" fill="#D9D9D9" stroke="#2D2B38"/>
+  <rect x="80" y="300" width="211" height="13" rx="6.5" fill="#BDE9F8" stroke="#2D2B38" stroke-width="2"/>
+  <rect x="78" y="219" width="142" height="91" rx="6" fill="#BDE9F8" stroke="#2D2B38" stroke-width="2"/>
+  <path d="M154.92 259.04L157.81 264.04L156.81 269.72L152.39 273.43H146.61L142.19 269.72L141.19 264.04L144.08 259.04L149.5 257.07L154.92 259.04Z" fill="#fff" stroke="#2D2B38" stroke-width="2"/>
+  <path d="M147.24 258.75L152.06 260.5L155 265L154 271L152.06 272.55H146.94L143 269.25L142.11 264.2L144.68 259.76L147.24 258.75Z" fill="#BDE9F8"/>
+  <path d="M83.06 220H214.5L216.5 220.5L217.5 221.5L218.5 223L219 224H149H79.11L79.5 223L80 222L81.5 220.5L83.06 220Z" fill="#fff"/>
+  <path d="M219 305.55L219 223.8L218.62 222.56L217.88 221.94L216.75 221.31L216 221L216 264.54L216 308.5L217 308L217.5 307.5L218.62 306.52L219 305.55Z" fill="#fff"/>
+  <rect x="104.15" y="127.37" width="54.02" height="54.02" rx="6" transform="rotate(-14.1579 104.153 127.366)" fill="#fff" stroke="#2D2B38" stroke-width="2"/>
+  <rect x="143.1" y="41.25" width="42.63" height="42.63" rx="6" transform="rotate(17.5328 143.097 41.2543)" fill="#fff" stroke="#2D2B38" stroke-width="2"/>
+  <path d="M168.12 60.31C168.95 60.59 170.39 61.06 171.08 62.87L171.11 62.96C171.17 63.17 171.17 63.39 171.1 63.6L166.46 77.85L166.39 78.03C165.67 79.9 163.54 80.86 161.57 80.21L147.3 75.52C146.99 75.41 146.74 75.17 146.62 74.86L146.58 74.73C146.5 74.36 146.61 73.97 146.88 73.7L147.35 73.25L148.18 72.45C148.44 72.19 148.69 71.93 148.92 71.69C149.14 71.45 149.34 71.22 149.49 71.01C149.64 70.8 149.74 70.63 149.79 70.48C149.81 70.42 149.82 70.38 149.83 70.35C149.83 70.33 149.83 70.32 149.83 70.32C149.83 70.31 149.83 70.31 149.83 70.31C149.83 70.31 149.83 70.31 149.82 70.3C149.82 70.29 149.81 70.29 149.79 70.27C149.75 70.25 149.69 70.22 149.59 70.19C149.42 70.14 149.24 70.11 149.08 70.11C148.91 70.1 148.79 70.12 148.75 70.14L148.75 70.14C148.12 70.33 147.34 70.29 146.59 70.04C145.93 69.83 145.37 69.47 145 69.02L144.85 68.82C144.19 67.83 144.25 66.3 144.94 64.18C145.37 62.9 146.03 62.12 146.77 61.73C147.51 61.35 148.32 61.35 149.02 61.58C149.51 61.74 150 62.03 150.43 62.42L150.76 62.7C151.29 63.15 151.62 63.31 151.79 63.37C152.06 62.52 152.37 61.13 152.62 59.92C152.74 59.3 152.85 58.72 152.93 58.3C152.97 58.1 153 57.92 153.02 57.8C153.03 57.74 153.04 57.7 153.04 57.66C153.04 57.65 153.05 57.63 153.05 57.63C153.05 57.62 153.05 57.62 153.05 57.61C153.05 57.61 153.05 57.61 153.05 57.61L153.05 57.61C153.11 57.26 153.34 56.96 153.66 56.81L153.82 56.74C154.33 56.56 155.76 56.24 158.31 57.08C159.72 57.55 160.25 58.36 160.44 58.98L160.47 59.11C160.63 59.74 160.5 60.41 160.14 60.95L160.06 61.07C159.55 61.72 159.2 62.33 158.99 62.85C158.79 63.37 158.75 63.79 158.85 64.11L158.88 64.2C159.06 64.64 159.59 65.03 160.53 65.34C160.64 65.38 160.86 65.39 161.15 65.33C161.42 65.28 161.75 65.15 162.06 64.94L162.28 64.77C162.77 64.37 163.29 63.65 163.43 62.4L163.46 62.1C163.5 61.44 163.83 60.87 164.39 60.49L164.56 60.38C165.46 59.88 166.75 59.86 168.12 60.31ZM167.44 62.38C166.82 62.18 166.36 62.15 166.04 62.18C165.89 62.19 165.77 62.22 165.69 62.25C165.66 62.26 165.64 62.27 165.62 62.28C165.5 64.1 164.77 65.6 163.54 66.56L163.28 66.74C162.21 67.47 160.86 67.75 159.85 67.41C158.3 66.91 157.28 66.09 156.84 64.98L156.76 64.75C156.32 63.33 156.88 61.63 158.33 59.74C158.33 59.74 158.35 59.72 158.35 59.7C158.36 59.68 158.36 59.67 158.36 59.66L158.36 59.62C158.35 59.6 158.27 59.36 157.63 59.15C156.39 58.74 155.55 58.69 155.06 58.72C154.84 59.94 154.36 62.41 153.91 63.87L153.82 64.15C153.63 64.74 153.26 65.17 152.79 65.39C152.31 65.62 151.74 65.64 151.14 65.45C150.56 65.26 149.95 64.87 149.26 64.29L148.96 64.03C148.76 63.85 148.54 63.72 148.34 63.65L148.34 63.65C148.06 63.56 147.83 63.6 147.62 63.79C147.4 63.98 147.19 64.33 147.01 64.87C146.47 66.51 146.54 67.23 146.61 67.49L146.66 67.61L146.66 67.61L146.73 67.68C146.76 67.71 146.8 67.75 146.86 67.78C146.96 67.85 147.1 67.92 147.28 67.98C147.65 68.1 147.97 68.1 148.11 68.05L148.11 68.05L148.35 67.99C148.93 67.88 149.67 67.93 150.28 68.12C150.97 68.35 151.48 68.76 151.76 69.3C152.04 69.84 152.08 70.48 151.86 71.17C151.7 71.65 151.38 72.14 150.98 72.63C150.62 73.08 150.18 73.54 149.69 74.01L162.25 78.14C163.15 78.44 164.12 77.98 164.39 77.17L168.9 63.33C168.57 62.76 168.07 62.59 167.44 62.38Z" fill="#2D2B38" stroke="#000" stroke-width=".3"/>
+  <g clip-path="url(#c0)">
+    <path d="M129.94 141.66L122.59 157.17L118.64 158.19L122.35 150.42L115.54 145.34L119.45 144.34L123.68 147.52L125.96 142.68L129.94 141.66ZM125.71 152.9L129.22 155.48L133.12 154.48L127.11 149.99L125.71 152.9Z" fill="#2D2B38"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M142.74 138.38L143.52 141.42L134.72 143.67C133.67 143.94 132.44 145.44 133.02 147.69C133.59 149.94 135.39 150.66 136.44 150.39L141.24 149.17L142.01 152.21L137.22 153.43C134.12 154.22 130.88 152 129.98 148.47C129.07 144.93 130.85 141.43 133.94 140.63L142.74 138.38ZM141.57 143.8L135.97 145.23L136.75 148.27L141.71 147L142.97 151.96L146.01 151.18L144.58 145.58C144.41 144.95 144 144.42 143.43 144.09C142.87 143.75 142.21 143.65 141.57 143.8Z" fill="#2D2B38"/>
+    <path d="M152.6 137.57L148.6 138.59C147.28 139.1 146.21 140.08 145.59 141.35C144.96 142.61 144.84 144.06 145.23 145.42C145.53 146.79 146.34 148.01 147.5 148.81C148.65 149.62 150.06 149.97 151.46 149.79L155.46 148.77C156.78 148.26 157.85 147.27 158.48 146.01C159.1 144.74 159.23 143.29 158.83 141.94C158.53 140.56 157.72 139.34 156.57 138.53C155.41 137.72 154 137.38 152.6 137.57ZM154.67 145.65L150.67 146.68C150.1 146.65 149.56 146.44 149.13 146.06C148.7 145.69 148.41 145.19 148.3 144.63C148.13 144.09 148.14 143.5 148.34 142.96C148.54 142.42 148.91 141.97 149.4 141.67L153.4 140.65C153.97 140.68 154.52 140.9 154.95 141.27C155.38 141.65 155.68 142.16 155.78 142.72C155.95 143.26 155.94 143.85 155.73 144.38C155.53 144.91 155.16 145.36 154.67 145.65Z" fill="#2D2B38"/>
+  </g>
+  <g clip-path="url(#c1)">
+    <rect x="63" y="70.25" width="41" height="41" rx="6" transform="rotate(-10.1824 63 70.2476)" fill="#fff"/>
+    <g clip-path="url(#c2)">
+      <path d="M90.39 76.75C92.14 76.42 93.96 76.79 95.45 77.8C96.93 78.8 97.95 80.35 98.29 82.11L99.13 86.53C99.47 88.29 99.1 90.11 98.09 91.59C97.09 93.07 95.53 94.09 93.78 94.43L82.73 96.55C80.97 96.89 79.15 96.51 77.67 95.51C76.18 94.5 75.16 92.95 74.83 91.19L73.98 86.77C73.64 85.01 74.02 83.19 75.02 81.71C76.03 80.23 77.58 79.21 79.34 78.87L90.39 76.75ZM90.81 78.96L79.76 81.08C78.63 81.3 77.62 81.94 76.95 82.88C76.28 83.82 75.99 84.98 76.15 86.12L76.19 86.35L77.04 90.77C77.25 91.9 77.9 92.91 78.84 93.58C79.78 94.25 80.94 94.54 82.08 94.38L82.3 94.34L93.35 92.22C94.49 92 95.49 91.36 96.16 90.42C96.84 89.48 97.12 88.32 96.96 87.18L96.92 86.95L96.08 82.53C95.86 81.4 95.21 80.39 94.28 79.72C93.34 79.05 92.17 78.76 91.03 78.93L90.81 78.96ZM83.71 83.76L84.13 85.97L86.34 85.55L86.77 87.76L84.56 88.18L84.98 90.39L82.77 90.81L82.35 88.6L80.14 89.03L79.71 86.82L81.92 86.39L81.5 84.18L83.71 83.76ZM93.4 86.48L93.82 88.69L91.61 89.12L91.19 86.91L93.4 86.48ZM90.34 82.49L90.76 84.7L88.55 85.12L88.13 82.91L90.34 82.49Z" fill="#2D2B38" stroke="#2D2B38" stroke-width=".3"/>
+    </g>
+  </g>
+  <rect x="64.16" y="71.06" width="39" height="39" rx="5" transform="rotate(-10.1824 64.161 71.055)" stroke="#2D2B38" stroke-width="2"/>
+  <path d="M410.07 279.58C409.8 282.16 408.88 288.47 409.69 290.67L410.05 290.88L410.42 290.62C411.02 290.13 411.1 289.89 411.2 289.13C411.46 286.92 412.15 281.86 411.16 279.9C410.77 279.69 410.52 279.61 410.07 279.58Z" fill="#2D2B38"/>
+  <defs>
+    <clipPath id="c0">
+      <rect width="52.85" height="26.42" transform="translate(109.106 140.168) rotate(-14.3482)"/>
+    </clipPath>
+    <clipPath id="c1">
+      <rect x="63" y="70.25" width="41" height="41" rx="6" transform="rotate(-10.1824 63 70.2476)"/>
+    </clipPath>
+    <clipPath id="c2">
+      <rect width="30" height="30" transform="translate(69 74.7429) rotate(-10.8528)"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/spx-gui/src/account-web/assets/logo.svg b/spx-gui/src/account-web/assets/logo.svg
new file mode 100644
index 0000000000..de7a1b92ce
--- /dev/null
+++ b/spx-gui/src/account-web/assets/logo.svg
@@ -0,0 +1,8 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="72" height="72" rx="12" fill="#24292F"/>
+  <path d="M25.0397 50.3202L25.026 50.3348L26.0973 51.4061L26.111 51.3915L26.4762 51.7557L22.4225 54.1249L18.6325 55.8973C18.1453 56.1247 17.6401 55.6196 17.8678 55.1327L19.6413 51.3446L22.0006 47.2821L25.0397 50.3202ZM52.1969 26.7313L28.109 50.7987C28.1034 50.8043 28.0973 50.8093 28.0905 50.8134L27.8288 50.9657L27.1823 50.3202L51.4889 26.0233L52.1969 26.7313ZM50.4176 24.952L26.111 49.2489L22.7877 45.9276L22.942 45.6639C22.9461 45.657 22.951 45.6501 22.9567 45.6444L47.0426 21.579L50.4176 24.952Z" fill="#0BECF0"/>
+  <path d="M25.0397 50.3202L25.026 50.3348L26.0973 51.4061L26.111 51.3915L26.4762 51.7557L22.4225 54.1249L18.6325 55.8973C18.1453 56.1247 17.6401 55.6196 17.8678 55.1327L19.6413 51.3446L22.0006 47.2821L25.0397 50.3202ZM52.1969 26.7313L28.109 50.7987C28.1034 50.8043 28.0973 50.8093 28.0905 50.8134L27.8288 50.9657L27.1823 50.3202L51.4889 26.0233L52.1969 26.7313ZM50.4176 24.952L26.111 49.2489L22.7877 45.9276L22.942 45.6639C22.9461 45.657 22.951 45.6501 22.9567 45.6444L47.0426 21.579L50.4176 24.952Z" fill="#0BECF0"/>
+  <path d="M47.9658 20.6427L48.9804 19.5443C50.3596 18.0512 52.0737 17.838 53.9741 19.5449C56.1816 21.6511 55.3525 23.4594 53.9735 24.9524L53.1007 25.7575L47.9658 20.6427Z" fill="#0BECF0"/>
+  <path d="M47.9658 20.6427L48.9804 19.5443C50.3596 18.0512 52.0737 17.838 53.9741 19.5449C56.1816 21.6511 55.3525 23.4594 53.9735 24.9524L53.1007 25.7575L47.9658 20.6427Z" fill="#0BECF0"/>
+  <path d="M55.1179 49.7913C56.5367 51.2115 56.5366 53.5146 55.1179 54.9348C53.6991 56.355 51.398 56.355 49.9792 54.9348L26.574 31.5061L31.7156 26.3675L55.1179 49.7913ZM32.9079 17.0491C32.9851 16.9814 33.1019 16.9834 33.1745 17.0559L35.3445 19.2278C35.7178 19.6015 35.7178 20.2076 35.3445 20.5813L30.6394 25.2903L30.6443 25.2952L25.5027 30.4339L25.5017 30.4329L21.9587 33.9807C21.5855 34.3542 20.9805 34.3541 20.6072 33.9807L16.28 29.6497C15.9067 29.2759 15.9067 28.6699 16.28 28.2962L26.073 18.4934C26.1243 18.4421 26.2001 18.4247 26.2693 18.4466C26.9279 18.6562 27.6302 18.7688 28.3581 18.7688C30.1022 18.7687 31.695 18.1194 32.9079 17.0491Z" fill="white"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/github-colorful.svg b/spx-gui/src/account-web/assets/providers/github-colorful.svg
new file mode 100644
index 0000000000..76a843198b
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/github-colorful.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0074 0.899902C5.76021 0.899902 0.709961 5.98738 0.709961 12.2813C0.709961 17.3123 3.94583 21.571 8.43484 23.0783C8.99608 23.1916 9.20166 22.8334 9.20166 22.5321C9.20166 22.2682 9.18316 21.3638 9.18316 20.4215C6.04048 21.1 5.38605 19.0647 5.38605 19.0647C4.881 17.7457 4.13268 17.4067 4.13268 17.4067C3.10408 16.7095 4.2076 16.7095 4.2076 16.7095C5.34859 16.7849 5.94729 17.8777 5.94729 17.8777C6.95715 19.6112 8.58445 19.1214 9.23912 18.8199C9.33254 18.0849 9.63201 17.5762 9.94998 17.2936C7.44347 17.0298 4.80631 16.05 4.80631 11.6782C4.80631 10.4345 5.25493 9.41704 5.96579 8.6257C5.85363 8.34312 5.46074 7.17461 6.07818 5.61068C6.07818 5.61068 7.03208 5.30913 9.18293 6.77895C10.1038 6.52981 11.0534 6.40308 12.0074 6.40201C12.9613 6.40201 13.9337 6.53405 14.8316 6.77895C16.9827 5.30913 17.9366 5.61068 17.9366 5.61068C18.5541 7.17461 18.1609 8.34312 18.0488 8.6257C18.7784 9.41704 19.2085 10.4345 19.2085 11.6782C19.2085 16.05 16.5713 17.0108 14.0461 17.2936C14.4577 17.6516 14.8129 18.3298 14.8129 19.404C14.8129 20.9302 14.7944 22.1552 14.7944 22.5319C14.7944 22.8334 15.0002 23.1916 15.5612 23.0785C20.0502 21.5708 23.2861 17.3123 23.2861 12.2813C23.3046 5.98738 18.2359 0.899902 12.0074 0.899902Z" fill="black"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/github-monochrome.svg b/spx-gui/src/account-web/assets/providers/github-monochrome.svg
new file mode 100644
index 0000000000..67e4dc4ee1
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/github-monochrome.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0074 0.899902C5.76021 0.899902 0.709961 5.98738 0.709961 12.2813C0.709961 17.3123 3.94583 21.571 8.43484 23.0783C8.99608 23.1916 9.20166 22.8334 9.20166 22.5321C9.20166 22.2682 9.18316 21.3638 9.18316 20.4215C6.04048 21.1 5.38605 19.0647 5.38605 19.0647C4.881 17.7457 4.13268 17.4067 4.13268 17.4067C3.10408 16.7095 4.2076 16.7095 4.2076 16.7095C5.34859 16.7849 5.94729 17.8777 5.94729 17.8777C6.95715 19.6112 8.58445 19.1214 9.23912 18.8199C9.33254 18.0849 9.63201 17.5762 9.94998 17.2936C7.44347 17.0298 4.80631 16.05 4.80631 11.6782C4.80631 10.4345 5.25493 9.41704 5.96579 8.6257C5.85363 8.34312 5.46074 7.17461 6.07818 5.61068C6.07818 5.61068 7.03208 5.30913 9.18293 6.77895C10.1038 6.52981 11.0534 6.40308 12.0074 6.40201C12.9613 6.40201 13.9337 6.53405 14.8316 6.77895C16.9827 5.30913 17.9366 5.61068 17.9366 5.61068C18.5541 7.17461 18.1609 8.34312 18.0488 8.6257C18.7784 9.41704 19.2085 10.4345 19.2085 11.6782C19.2085 16.05 16.5713 17.0108 14.0461 17.2936C14.4577 17.6516 14.8129 18.3298 14.8129 19.404C14.8129 20.9302 14.7944 22.1552 14.7944 22.5319C14.7944 22.8334 15.0002 23.1916 15.5612 23.0785C20.0502 21.5708 23.2861 17.3123 23.2861 12.2813C23.3046 5.98738 18.2359 0.899902 12.0074 0.899902Z" fill="white"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/google-colorful.svg b/spx-gui/src/account-web/assets/providers/google-colorful.svg
new file mode 100644
index 0000000000..bad8a6ebea
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/google-colorful.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.81531 16.6524L6.34683 13.9519C6.1449 13.3385 6.03571 12.6824 6.03571 11.9999C6.03571 11.3174 6.1449 10.6613 6.34683 10.048L2.81531 7.34741C2.12654 8.74776 1.74023 10.3265 1.74023 11.9999C1.74023 13.6733 2.12654 15.2521 2.81531 16.6524Z" fill="#FBBC05"/>
+  <path d="M6.34694 10.0481C7.16174 7.5733 9.4865 5.79547 12.2404 5.79547C13.72 5.79547 15.0563 6.32048 16.1063 7.17957L19.1609 4.12501C17.2995 2.50228 14.9131 1.5 12.2404 1.5C8.09103 1.5 4.52334 3.87521 2.81543 7.34754L6.34694 10.0481Z" fill="#EA4335"/>
+  <path d="M12.2404 22.5002C8.08983 22.5002 4.52132 20.1237 2.81396 16.6497L6.34404 13.9434C7.15624 16.4227 9.48323 18.2047 12.2404 18.2047C13.5895 18.2047 14.7849 17.887 15.7316 17.2895L19.0842 19.8851C17.2489 21.5916 14.8014 22.5002 12.2404 22.5002Z" fill="#34A853"/>
+  <path d="M12.2402 10.0911H22.0244C22.1676 10.7115 22.263 11.3797 22.263 12.0002C22.263 15.4225 21.011 18.0935 19.0841 19.8852L15.7315 17.2896C16.8277 16.5978 17.5904 15.5309 17.8721 14.1479H12.2402V10.0911Z" fill="#4285F4"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/google-monochrome.svg b/spx-gui/src/account-web/assets/providers/google-monochrome.svg
new file mode 100644
index 0000000000..f8706cc74b
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/google-monochrome.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.81531 16.6525L6.34683 13.9519C6.1449 13.3386 6.03571 12.6825 6.03571 12C6.03571 11.3175 6.1449 10.6614 6.34683 10.0481L2.81531 7.3475C2.12654 8.74784 1.74023 10.3266 1.74023 12C1.74023 13.6734 2.12654 15.2522 2.81531 16.6525Z" fill="white"/>
+  <path d="M6.34683 10.0481C7.16163 7.57325 9.48658 5.79547 12.2405 5.79547C13.72 5.79547 15.0564 6.32048 16.1064 7.17957L19.161 4.12501C17.2996 2.50228 14.9132 1.5 12.2405 1.5C8.09111 1.5 4.52323 3.87516 2.81531 7.3475L6.34683 10.0481Z" fill="white"/>
+  <path d="M12.2403 22.5001C8.08976 22.5001 4.52125 20.1235 2.81389 16.6496L6.34397 13.9433C7.15617 16.4226 9.48316 18.2046 12.2403 18.2046C13.5894 18.2046 14.7848 17.8869 15.7315 17.2894L19.0841 19.885C17.2489 21.5915 14.8014 22.5001 12.2403 22.5001Z" fill="white"/>
+  <path d="M12.2403 10.0911H22.0245C22.1676 10.7116 22.2631 11.3798 22.2631 12.0002C22.2631 15.4225 21.011 18.0934 19.0841 19.885L15.7315 17.2894C16.8277 16.5976 17.5905 15.5309 17.8722 14.1479H12.2403V10.0911Z" fill="white"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/qq-colorful.svg b/spx-gui/src/account-web/assets/providers/qq-colorful.svg
new file mode 100644
index 0000000000..e12d16416b
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/qq-colorful.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="12.1087" cy="9.1202" rx="5.33328" ry="1.81332" fill="#F9AE0A"/>
+  <path d="M11.999 22.9428C10.0479 22.9428 8.25689 22.2898 7.10383 21.3145C6.51818 21.4894 5.76907 21.7709 5.29649 22.12C4.89169 22.4187 4.94231 22.7231 5.01516 22.846C5.33521 23.3862 10.5063 23.191 11.999 23.0228V22.9428ZM11.999 22.9428C13.9504 22.9428 15.7412 22.2898 16.8945 21.3145C17.4798 21.4894 18.2291 21.7709 18.7018 22.12C19.1063 22.4187 19.0558 22.7231 18.9828 22.846C18.6628 23.3862 13.4919 23.191 11.999 23.0228V22.9428Z" fill="#F9AE0A"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.6897 10.364C17.8146 10.6031 15.2323 11.2269 12.0102 11.2487H11.9864C8.68268 11.2262 6.05177 10.5714 5.24383 10.3466C5.07775 10.3002 4.98698 10.2045 4.98698 10.2045C4.98602 10.1752 4.97359 9.68014 4.97359 9.42451C4.97359 5.12295 7.00435 0.800203 11.9983 0.800049C16.9924 0.800203 19.023 5.12279 19.023 9.42468C19.023 9.67998 19.0105 10.1752 19.0097 10.2046C19.0097 10.2046 18.8983 10.3069 18.6897 10.364ZM20.0176 12.7202C20.2937 13.44 20.5663 14.1895 20.766 14.8323C21.7184 17.8974 21.4098 19.166 21.175 19.1945C20.6708 19.2553 19.2124 16.8871 19.2124 16.8871C19.2124 19.2936 17.0397 22.9887 12.0644 23.0226H11.9324C6.95688 22.9887 4.78416 19.2936 4.78416 16.8871C4.78416 16.8871 3.32593 19.2553 2.82171 19.1943C2.5868 19.166 2.2781 17.8976 3.23067 14.8323C3.43039 14.1897 3.70298 13.44 3.97914 12.7202C3.97914 12.7202 4.16533 12.7085 4.25966 12.7357C5.0329 12.9589 5.85652 13.1567 6.69304 13.3222C6.55059 14.2049 6.46915 15.2974 6.54611 16.5877C6.75096 20.0193 8.78892 22.1764 11.9346 22.2076H12.0623C15.2081 22.1764 17.2459 20.0193 17.451 16.5877C17.528 15.2972 17.4464 14.205 17.3039 13.3222C18.1551 13.1537 18.9931 12.9518 19.7783 12.7237C19.8588 12.7005 20.0176 12.7202 20.0176 12.7202ZM17.3039 13.3222C15.4693 13.6853 13.573 13.8934 12.0102 13.8745H11.9864C10.4236 13.8932 8.52737 13.6852 6.69304 13.3222C6.70046 13.2762 6.70803 13.2307 6.71582 13.1858C8.54311 13.546 10.4299 13.7521 11.986 13.7334H12.0098C13.5662 13.7524 15.4536 13.546 17.281 13.1856C17.2888 13.2306 17.2964 13.2761 17.3039 13.3222ZM8.92924 5.43297C8.96566 6.41419 9.54448 7.18587 10.222 7.1552C10.899 7.12501 11.4182 6.30443 11.3811 5.32279C11.3444 4.34125 10.7658 3.56988 10.089 3.60024C9.41152 3.63091 8.89249 4.45147 8.92924 5.43297ZM13.776 7.1552C14.4535 7.18587 15.0323 6.41403 15.0685 5.43297C15.1054 4.45147 14.5864 3.63091 13.9089 3.60024C13.2321 3.57004 12.6536 4.3414 12.6168 5.32295C12.5798 6.30443 13.0988 7.12485 13.776 7.1552ZM12.0104 7.69322C14.2675 7.69322 16.0909 8.13999 16.2718 8.54084C16.2803 8.5586 16.2848 8.57818 16.285 8.59786C16.2848 8.62564 16.2761 8.65268 16.2601 8.67535C16.1075 8.89785 14.083 9.99656 12.0104 9.99656H11.9861C9.91328 9.99656 7.88877 8.89753 7.73618 8.67535C7.72029 8.65273 7.71159 8.6258 7.71127 8.59817C7.71143 8.57839 7.71597 8.55887 7.7245 8.541C7.90557 8.13999 9.7288 7.69322 11.9861 7.69322H12.0104Z" fill="black"/>
+  <path d="M11.0539 5.44746C11.0849 5.83509 10.8723 6.17946 10.5797 6.21695C10.2866 6.25466 10.0243 5.97098 9.99318 5.58336C9.96251 5.19541 10.1748 4.85109 10.4669 4.81371C10.7605 4.77574 11.0232 5.05984 11.0539 5.44746ZM12.9152 5.57701C12.9751 5.4697 13.3828 4.90571 14.227 5.11104C14.4489 5.16507 14.5514 5.24448 14.5731 5.27562C14.605 5.3217 14.6139 5.38736 14.5813 5.47578C14.5172 5.65109 14.3847 5.64629 14.3114 5.612C14.2639 5.58992 13.6759 5.19792 13.1342 5.78277C13.0968 5.82282 13.0302 5.83663 12.9671 5.78901C12.9038 5.74106 12.8778 5.64426 12.9152 5.57701Z" fill="black"/>
+  <path d="M7.57812 13.4463V16.8233C7.57812 16.8233 9.12504 17.1353 10.6749 16.9192V13.8043C9.69309 13.7487 8.63422 13.625 7.57812 13.4463Z" fill="#EA1C27"/>
+  <path d="M19.0096 10.2051C19.0096 10.2051 16.0004 11.155 12.01 11.1819H11.9862C8.0024 11.1552 4.9971 10.2082 4.98686 10.2051L3.979 12.7204C6.4998 13.4804 9.62388 13.9702 11.9862 13.9417H12.01C14.3724 13.9702 17.4963 13.4804 20.0174 12.7204L19.0096 10.2051Z" fill="#E91D27"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/qq-monochrome.svg b/spx-gui/src/account-web/assets/providers/qq-monochrome.svg
new file mode 100644
index 0000000000..d463de44d3
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/qq-monochrome.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9982 0.800049C16.9922 0.800203 19.0235 5.12316 19.0235 9.42505C19.0235 9.67971 19.0107 10.1723 19.0099 10.2043L20.0177 12.72L20.421 13.8049C20.5486 14.1626 20.6659 14.5109 20.7657 14.8323C21.7182 17.8974 21.4097 19.1661 21.1749 19.1946C20.6705 19.2548 19.212 16.887 19.212 16.887C19.212 18.259 18.505 20.0486 16.9757 21.3411C17.5476 21.5173 18.2512 21.7872 18.7023 22.1204C19.1063 22.4189 19.0555 22.7232 18.9825 22.8459C18.6616 23.386 13.4919 23.1908 11.9991 23.0227C10.5066 23.1908 5.33691 23.3859 5.01574 22.8459C4.94288 22.7231 4.89219 22.419 5.29699 22.1204C5.74734 21.7877 6.44884 21.5173 7.02062 21.3411C5.4915 20.0486 4.78429 18.259 4.78429 16.887C4.78429 16.887 3.32562 19.2556 2.8214 19.1946C2.58654 19.1649 2.27854 17.8959 3.23058 14.8323C3.33046 14.5109 3.44862 14.1627 3.57628 13.8049L3.9796 12.72L4.98742 10.2053C4.98643 10.175 4.97374 9.67941 4.97374 9.42407C4.97388 5.12273 7.00455 0.800365 11.9982 0.800049Z" fill="white"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/wechat-colorful.svg b/spx-gui/src/account-web/assets/providers/wechat-colorful.svg
new file mode 100644
index 0000000000..27105300ec
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/wechat-colorful.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9805 8.2366C16.7124 8.20443 16.4444 8.18299 16.1763 8.18299C12.2091 8.18299 9.07819 11.1638 9.07819 14.82C9.07819 15.4312 9.1747 16.0209 9.33553 16.5785C9.07819 16.5999 8.81014 16.6107 8.55281 16.6107C7.6947 16.6107 6.97527 16.4647 6.15966 16.2992C5.98673 16.2641 5.80946 16.2281 5.62564 16.1925L2.7092 17.6614L3.54553 15.1417C1.4547 13.6728 0.200195 11.7857 0.200195 9.48037C0.200195 5.49171 3.96369 2.3501 8.55281 2.3501C12.6594 2.3501 16.2514 4.8591 16.9805 8.2366ZM12.7238 6.96065C12.7238 6.33876 12.2091 5.8241 11.5872 5.8241C10.9546 5.8241 10.4506 6.32804 10.4506 6.96065C10.4506 7.59326 10.9546 8.09721 11.5872 8.09721C12.2198 8.09721 12.7238 7.59326 12.7238 6.96065ZM4.61775 6.96065C4.61775 7.58254 5.13242 8.09721 5.75431 8.09721C6.37619 8.09721 6.88014 7.59326 6.89086 6.96065C6.89086 6.33876 6.37619 5.8241 5.75431 5.8241C5.1217 5.8241 4.61775 6.32804 4.61775 6.96065Z" fill="#06DD6D"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M23.7998 14.7235C23.7998 11.3675 20.4545 8.63332 16.7017 8.63332C12.7238 8.63332 9.60358 11.3675 9.60358 14.7235C9.60358 18.0796 12.7345 20.8138 16.7017 20.8138C17.538 20.8138 18.3744 20.5993 19.2107 20.3956L21.5052 21.6501L20.8726 19.5593C22.5453 18.294 23.7998 16.6214 23.7998 14.7235ZM13.5601 12.8364C13.5601 13.3618 13.9783 13.7907 14.5036 13.7907C15.029 13.7907 15.4579 13.3618 15.4472 12.8364C15.4472 12.311 15.029 11.8822 14.5036 11.8822C13.9783 11.8822 13.5601 12.311 13.5601 12.8364ZM18.1599 12.8364C18.1599 13.3618 18.5781 13.7907 19.1035 13.7907C19.6289 13.7907 20.047 13.3618 20.047 12.8364C20.047 12.311 19.6289 11.8822 19.1035 11.8822C18.5781 11.8822 18.1599 12.311 18.1599 12.8364Z" fill="#06DD6D"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/wechat-monochrome.svg b/spx-gui/src/account-web/assets/providers/wechat-monochrome.svg
new file mode 100644
index 0000000000..264315c00a
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/wechat-monochrome.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9805 8.2366C16.7124 8.20443 16.4444 8.18299 16.1763 8.18299C12.2091 8.18299 9.0782 11.1638 9.0782 14.82C9.0782 15.4312 9.17469 16.0209 9.33553 16.5785C9.07819 16.5999 8.81014 16.6107 8.55281 16.6107C7.6947 16.6107 6.97527 16.4647 6.15966 16.2992C5.98673 16.2641 5.80946 16.2281 5.62564 16.1925L2.7092 17.6614L3.54553 15.1417C1.4547 13.6728 0.200195 11.7857 0.200195 9.48037C0.200195 5.49171 3.96369 2.3501 8.55281 2.3501C12.6594 2.3501 16.2514 4.8591 16.9805 8.2366ZM12.7237 6.96065C12.7237 6.33876 12.2091 5.8241 11.5872 5.8241C10.9546 5.8241 10.4506 6.32804 10.4506 6.96065C10.4506 7.59326 10.9546 8.09721 11.5872 8.09721C12.2198 8.09721 12.7237 7.59326 12.7237 6.96065ZM4.61775 6.96065C4.61775 7.58254 5.13242 8.09721 5.75431 8.09721C6.37619 8.09721 6.88014 7.59326 6.89086 6.96065C6.89086 6.33876 6.37619 5.8241 5.75431 5.8241C5.1217 5.8241 4.61775 6.32804 4.61775 6.96065Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M23.7998 14.7235C23.7998 11.3675 20.4545 8.63332 16.7017 8.63332C12.7238 8.63332 9.60358 11.3675 9.60358 14.7235C9.60358 18.0796 12.7345 20.8138 16.7017 20.8138C17.538 20.8138 18.3744 20.5993 19.2107 20.3956L21.5052 21.6501L20.8726 19.5593C22.5453 18.294 23.7998 16.6214 23.7998 14.7235ZM13.5601 12.8364C13.5601 13.3618 13.9783 13.7907 14.5036 13.7907C15.029 13.7907 15.4579 13.3618 15.4472 12.8364C15.4472 12.311 15.029 11.8822 14.5036 11.8822C13.9783 11.8822 13.5601 12.311 13.5601 12.8364ZM18.1599 12.8364C18.1599 13.3618 18.5781 13.7907 19.1035 13.7907C19.6289 13.7907 20.047 13.3618 20.047 12.8364C20.047 12.311 19.6289 11.8822 19.1035 11.8822C18.5781 11.8822 18.1599 12.311 18.1599 12.8364Z" fill="white"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/x-colorful.svg b/spx-gui/src/account-web/assets/providers/x-colorful.svg
new file mode 100644
index 0000000000..fa4d8daba8
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/x-colorful.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18.4256 2H21.8185L14.4062 10.4718L23.1262 22H16.2985L10.9508 15.0082L4.83178 22H1.43692L9.36512 12.9385L1 2H8.00103L12.8349 8.39077L18.4256 2ZM17.2349 19.9692H19.1149L6.97947 3.92411H4.96202L17.2349 19.9692Z" fill="black"/>
+</svg>
diff --git a/spx-gui/src/account-web/assets/providers/x-monochrome.svg b/spx-gui/src/account-web/assets/providers/x-monochrome.svg
new file mode 100644
index 0000000000..59a1fa4979
--- /dev/null
+++ b/spx-gui/src/account-web/assets/providers/x-monochrome.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18.4256 2H21.8185L14.4062 10.4718L23.1262 22H16.2985L10.9508 15.0082L4.83178 22H1.43692L9.36512 12.9385L1 2H8.00103L12.8349 8.39077L18.4256 2ZM17.2349 19.9692H19.1149L6.97947 3.92411H4.96202L17.2349 19.9692Z" fill="white"/>
+</svg>
diff --git a/spx-gui/src/account-web/components/login/AccountSessionSection.vue b/spx-gui/src/account-web/components/login/AccountSessionSection.vue
new file mode 100644
index 0000000000..e3fd931e8b
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/AccountSessionSection.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="self-stretch flex flex-col items-center gap-5">
+    <div class="flex items-center gap-3">
+      <div
+        class="w-10 h-10 rounded-full bg-turquoise-200 overflow-hidden flex items-center justify-center text-2xl font-semibold text-turquoise-600"
+      >
+        <img
+          v-if="avatarUrl != null"
+          :src="avatarUrl"
+          :alt="session.user.displayName"
+          class="h-full w-full object-cover"
+        />
+        <span v-else>{{ initial }}</span>
+      </div>
+      <div class="text-text text-xl">{{ session.user.displayName }}</div>
+    </div>
+    <div class="self-stretch flex flex-col gap-3">
+      <LoginButton primary :disabled="continuing || switching" @click="$emit('continue')">
+        {{ $t({ en: 'Continue with this account', zh: '继续使用当前账号' }) }}
+      </LoginButton>
+      <LoginButton :disabled="continuing || switching" @click="$emit('switch-account')">
+        {{ $t({ en: 'Use another account', zh: '切换其它账号登录' }) }}
+      </LoginButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { CurrentAccountSession } from '@/account-web/apis/account'
+import LoginButton from '@/account-web/components/login/LoginButton.vue'
+import { useAvatarUrl } from '@/stores/user/avatar'
+
+const props = defineProps<{
+  session: CurrentAccountSession
+  continuing: boolean
+  switching: boolean
+}>()
+
+defineEmits<{
+  continue: []
+  'switch-account': []
+}>()
+
+const avatarUrl = useAvatarUrl(() => props.session.user.avatar)
+const initial = computed(() => props.session.user.displayName.trim().charAt(0).toUpperCase() || '?')
+</script>
diff --git a/spx-gui/src/account-web/components/login/InputWithIcon.vue b/spx-gui/src/account-web/components/login/InputWithIcon.vue
new file mode 100644
index 0000000000..cfc4627213
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/InputWithIcon.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="w-full">
+    <div class="field-wrap">
+      <img :src="iconUrl" alt="" aria-hidden="true" class="icon" />
+      <input
+        :type="type"
+        :placeholder="placeholder"
+        :value="modelValue"
+        :class="['input', { 'with-right-icon': rightIconUrl != null, error: error !== '' }]"
+        @input="handleInput"
+      />
+      <img
+        v-if="rightIconUrl"
+        :src="rightIconUrl"
+        alt=""
+        aria-hidden="true"
+        class="right-icon"
+        @click="$emit('right-icon-click')"
+      />
+    </div>
+    <div v-if="error" class="error-text">{{ error }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    modelValue: string
+    type?: string
+    placeholder: string
+    error?: string
+    iconUrl: string
+    rightIconUrl?: string | null
+  }>(),
+  {
+    type: 'text',
+    error: '',
+    rightIconUrl: null
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'right-icon-click': []
+}>()
+
+function handleInput(event: Event) {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<style scoped>
+.field-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+}
+
+.input {
+  width: 100%;
+  height: 50px;
+  padding: 0 12px 0 44px;
+  font-size: 16px;
+  border: 1px solid #cfd9de;
+  border-radius: 8px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.input.with-right-icon {
+  padding-right: 44px;
+}
+
+.input.error {
+  border-color: #ff4d4f;
+}
+
+.right-icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.error-text {
+  color: #ff4d4f;
+  font-size: 14px;
+  margin-top: 4px;
+}
+</style>
diff --git a/spx-gui/src/account-web/components/login/LoginButton.vue b/spx-gui/src/account-web/components/login/LoginButton.vue
new file mode 100644
index 0000000000..fe4fdab6d1
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/LoginButton.vue
@@ -0,0 +1,66 @@
+<template>
+  <button type="button" class="login-button" :class="{ primary }" :disabled="disabled" @click="$emit('click')">
+    <img v-if="imgSrc != null" class="w-6 h-6" :src="imgSrc" />
+    <span class="text-xl">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    primary?: boolean
+    disabled?: boolean
+    imgSrc?: string
+  }>(),
+  {
+    primary: false,
+    disabled: false,
+    imgSrc: undefined
+  }
+)
+
+defineEmits<{
+  click: []
+}>()
+</script>
+
+<style scoped>
+.login-button {
+  height: 50px;
+  width: 100%;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 50px;
+  gap: 12px;
+  color: var(--ui-color-grey-1000);
+  background-color: #fff;
+  border: 1px solid var(--ui-color-grey-500);
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.login-button:hover {
+  color: var(--ui-color-grey-1000);
+  background-color: var(--ui-color-grey-400);
+}
+
+.login-button.primary {
+  color: #fff;
+  background-color: #0bc0cf;
+  border-color: #0bc0cf;
+}
+
+.login-button.primary:hover {
+  background-color: #0aa5be;
+  border-color: #0aa5be;
+}
+
+.login-button:disabled {
+  opacity: 0.7;
+  cursor: wait;
+}
+</style>
diff --git a/spx-gui/src/account-web/components/login/LoginForm.vue b/spx-gui/src/account-web/components/login/LoginForm.vue
new file mode 100644
index 0000000000..689e7a8170
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/LoginForm.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="self-stretch">
+    <div v-if="isBootstrapping" class="min-h-45 self-stretch flex flex-col items-center justify-center gap-6">
+      <UILoading />
+      <p class="m-0 text-grey-800">
+        {{ $t({ en: 'Loading sign-in options…', zh: '正在加载登录选项…' }) }}
+      </p>
+    </div>
+
+    <template v-else>
+      <UIError
+        v-if="errorMessage"
+        class="mb-2 min-h-50 rounded-lg border border-red-100 bg-red-50/70 px-6"
+        :retry="handleRetry"
+      >
+        {{ $t({ en: 'Something went wrong', zh: '出现了一些问题' }) }}
+        <template #sub-message>
+          <div class="max-h-20 overflow-auto whitespace-pre-wrap wrap-anywhere">
+            {{ errorMessage }}
+          </div>
+        </template>
+      </UIError>
+
+      <AccountSessionSection
+        v-else-if="currentSession"
+        :session="currentSession"
+        :continuing="isCompletingSignIn"
+        :switching="isClearingCurrentSession"
+        @continue="handleCompleteSignIn"
+        @switch-account="handleSwitchAccount"
+      />
+
+      <LoginOptionsSection
+        v-else-if="!showPasswordForm"
+        :providers="providers"
+        :disabled="isClearingCurrentSession"
+        @select-provider="handleProviderSignIn"
+        @open-password="openPasswordLogin"
+      />
+
+      <PasswordLoginSection v-else :submit="handlePasswordSignIn" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { UIError, UILoading } from '@/components/ui'
+
+import {
+  createPasswordSession,
+  deleteCurrentAccountSession,
+  getCurrentAccountSession,
+  getIdentityProviders,
+  type PasswordSignInPayload
+} from '@/account-web/apis/account'
+import type { CurrentAccountSession, IdentityProvider } from '@/account-web/apis/account'
+import {
+  buildIdentityProviderAuthorizeUrl,
+  buildOAuthAuthorizeUrl,
+  clearPendingAuthorization,
+  getOAuthError,
+  hasPendingAuthorization,
+  markPendingAuthorization
+} from '@/account-web/utils/oauth'
+import type { OAuthContext } from '@/account-web/utils/oauth'
+
+import AccountSessionSection from './AccountSessionSection.vue'
+import LoginOptionsSection from './LoginOptionsSection.vue'
+import PasswordLoginSection from './PasswordLoginSection.vue'
+
+const props = defineProps<{
+  authContext: OAuthContext
+}>()
+
+const authContext = props.authContext
+
+const currentSession = ref<CurrentAccountSession | null>(null)
+const providers = ref<IdentityProvider[]>([])
+const isBootstrapping = ref(true)
+const isCompletingSignIn = ref(false)
+const isClearingCurrentSession = ref(false)
+const showPasswordForm = ref(false)
+const errorMessage = ref<string | null>(null)
+
+function setErrorMessage(message: string) {
+  errorMessage.value = message
+}
+
+function goTo(url: string) {
+  window.location.assign(url)
+}
+
+function openPasswordLogin() {
+  showPasswordForm.value = true
+}
+
+function completeSignInWithCurrentAccount() {
+  isCompletingSignIn.value = true
+  errorMessage.value = null
+  clearPendingAuthorization(authContext)
+  goTo(buildOAuthAuthorizeUrl(authContext))
+}
+
+async function bootstrap() {
+  isBootstrapping.value = true
+
+  const oauthError = getOAuthError()
+  if (oauthError != null) {
+    clearPendingAuthorization(authContext)
+    setErrorMessage(oauthError)
+  } else {
+    errorMessage.value = null
+  }
+
+  try {
+    const [session, providerList] = await Promise.all([getCurrentAccountSession(), getIdentityProviders(authContext)])
+    currentSession.value = session
+    providers.value = providerList
+    showPasswordForm.value = false
+
+    if (session != null && hasPendingAuthorization(authContext) && oauthError == null) {
+      completeSignInWithCurrentAccount()
+      return
+    }
+  } catch (error) {
+    setErrorMessage(error instanceof Error ? error.message : String(error))
+  } finally {
+    isBootstrapping.value = false
+  }
+}
+
+function handleCompleteSignIn() {
+  completeSignInWithCurrentAccount()
+}
+
+async function handleSwitchAccount() {
+  isClearingCurrentSession.value = true
+  errorMessage.value = null
+  try {
+    await deleteCurrentAccountSession()
+    currentSession.value = null
+    showPasswordForm.value = false
+  } catch (error) {
+    setErrorMessage(error instanceof Error ? error.message : String(error))
+  } finally {
+    isClearingCurrentSession.value = false
+  }
+}
+
+function handleProviderSignIn(provider: IdentityProvider) {
+  errorMessage.value = null
+  markPendingAuthorization(authContext)
+  goTo(buildIdentityProviderAuthorizeUrl(provider.name, authContext))
+}
+
+async function handlePasswordSignIn(payload: PasswordSignInPayload) {
+  errorMessage.value = null
+
+  await createPasswordSession(payload)
+  clearPendingAuthorization(authContext)
+  goTo(buildOAuthAuthorizeUrl(authContext))
+}
+
+function handleRetry() {
+  void bootstrap()
+}
+
+onMounted(() => {
+  void bootstrap()
+})
+</script>
diff --git a/spx-gui/src/account-web/components/login/LoginOptionsSection.vue b/spx-gui/src/account-web/components/login/LoginOptionsSection.vue
new file mode 100644
index 0000000000..7781e2060f
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/LoginOptionsSection.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="self-stretch flex flex-col items-center gap-5">
+    <ProviderLoginButton
+      v-for="(provider, index) in providers"
+      :key="provider.name"
+      :provider="provider"
+      :primary="index === 0"
+      :disabled="disabled"
+      @click="$emit('select-provider', provider)"
+    />
+    <UsernamePasswordLink @click="$emit('open-password')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IdentityProvider } from '@/account-web/apis/account'
+
+import ProviderLoginButton from './ProviderLoginButton.vue'
+import UsernamePasswordLink from './UsernamePasswordLink.vue'
+
+withDefaults(
+  defineProps<{
+    providers: IdentityProvider[]
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false
+  }
+)
+
+defineEmits<{
+  'select-provider': [provider: IdentityProvider]
+  'open-password': []
+}>()
+</script>
diff --git a/spx-gui/src/account-web/components/login/PasswordLoginSection.vue b/spx-gui/src/account-web/components/login/PasswordLoginSection.vue
new file mode 100644
index 0000000000..653fd1c356
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/PasswordLoginSection.vue
@@ -0,0 +1,146 @@
+<template>
+  <form class="password-login" @submit.prevent="handleSubmit">
+    <InputWithIcon
+      :model-value="username"
+      :placeholder="$t({ en: 'Username', zh: '用户名' })"
+      :error="usernameError"
+      :icon-url="userIconUrl"
+      @update:model-value="handleUsernameInput"
+    />
+
+    <InputWithIcon
+      :model-value="password"
+      :type="showPassword ? 'text' : 'password'"
+      :placeholder="$t({ en: 'Password', zh: '密码' })"
+      :error="passwordFieldError"
+      :icon-url="lockIconUrl"
+      :right-icon-url="showPassword ? eyeOffIconUrl : eyeIconUrl"
+      @update:model-value="handlePasswordInput"
+      @right-icon-click="toggleShowPassword"
+    />
+
+    <div v-if="submitError" class="submit-error">{{ submitError }}</div>
+
+    <button type="submit" class="submit-button" :disabled="isSubmitting">
+      {{ isSubmitting ? $t({ en: 'Signing in…', zh: '登录中…' }) : $t({ en: 'Sign In', zh: '立即登录' }) }}
+    </button>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import eyeIconUrl from '@/account-web/assets/icons/eye.svg'
+import eyeOffIconUrl from '@/account-web/assets/icons/eye-off.svg'
+import lockIconUrl from '@/account-web/assets/icons/lock.svg'
+import userIconUrl from '@/account-web/assets/icons/user.svg'
+import type { PasswordSignInPayload } from '@/account-web/apis/account'
+import { useI18n } from '@/utils/i18n'
+
+import InputWithIcon from './InputWithIcon.vue'
+
+const props = defineProps<{
+  submit: (payload: PasswordSignInPayload) => Promise<void>
+}>()
+
+const { t } = useI18n()
+const username = ref('')
+const password = ref('')
+const showPassword = ref(false)
+const usernameError = ref('')
+const passwordFieldError = ref('')
+const submitError = ref<string | null>(null)
+const isSubmitting = ref(false)
+
+function validateUsername(value: string) {
+  if (value === '')
+    return t({
+      en: 'Please enter username',
+      zh: '请输入用户名'
+    })
+  if (/\s/.test(value))
+    return t({
+      en: 'Username cannot contain spaces',
+      zh: '用户名不能包含空格'
+    })
+  return ''
+}
+
+function validatePassword(value: string) {
+  if (value === '')
+    return t({
+      en: 'Please enter password',
+      zh: '请输入密码'
+    })
+  return ''
+}
+
+function handleUsernameInput(value: string) {
+  username.value = value
+  usernameError.value = validateUsername(value)
+  submitError.value = null
+}
+
+function handlePasswordInput(value: string) {
+  password.value = value
+  passwordFieldError.value = validatePassword(value)
+  submitError.value = null
+}
+
+function toggleShowPassword() {
+  showPassword.value = !showPassword.value
+}
+
+async function handleSubmit() {
+  const trimmedUsername = username.value.trim()
+  const nextUsernameError = validateUsername(trimmedUsername)
+  const nextPasswordFieldError = validatePassword(password.value)
+  usernameError.value = nextUsernameError
+  passwordFieldError.value = nextPasswordFieldError
+  if (nextUsernameError !== '' || nextPasswordFieldError !== '') return
+
+  isSubmitting.value = true
+  submitError.value = null
+
+  try {
+    await props.submit({ username: trimmedUsername, password: password.value })
+  } catch (error) {
+    submitError.value = error instanceof Error ? error.message : String(error)
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.password-login {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.submit-error {
+  width: 100%;
+  color: #ff4d4f;
+  font-size: 14px;
+}
+
+.submit-button {
+  width: 100%;
+  height: 50px;
+  margin-top: 8px;
+  font-size: 16px;
+  color: #fff;
+  background-color: #0bc0cf;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.submit-button:disabled {
+  opacity: 0.7;
+  cursor: wait;
+}
+</style>
diff --git a/spx-gui/src/account-web/components/login/ProviderLoginButton.vue b/spx-gui/src/account-web/components/login/ProviderLoginButton.vue
new file mode 100644
index 0000000000..86bb7d0770
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/ProviderLoginButton.vue
@@ -0,0 +1,87 @@
+<template>
+  <LoginButton :primary="primary" :disabled="disabled" :img-src="logo" @click="$emit('click')">
+    {{ loginText }}
+  </LoginButton>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '@/utils/i18n'
+import type { IdentityProvider } from '@/account-web/apis/account'
+import googleProviderLogoColorful from '@/account-web/assets/providers/google-colorful.svg'
+import googleProviderMonochromeLogo from '@/account-web/assets/providers/google-monochrome.svg'
+import githubProviderLogoColorful from '@/account-web/assets/providers/github-colorful.svg'
+import githubProviderMonochromeLogo from '@/account-web/assets/providers/github-monochrome.svg'
+import xProviderLogoColorful from '@/account-web/assets/providers/x-colorful.svg'
+import xProviderMonochromeLogo from '@/account-web/assets/providers/x-monochrome.svg'
+import qqProviderLogoColorful from '@/account-web/assets/providers/qq-colorful.svg'
+import qqProviderMonochromeLogo from '@/account-web/assets/providers/qq-monochrome.svg'
+import wechatProviderLogoColorful from '@/account-web/assets/providers/wechat-colorful.svg'
+import wechatProviderMonochromeLogo from '@/account-web/assets/providers/wechat-monochrome.svg'
+import LoginButton from './LoginButton.vue'
+
+const props = withDefaults(
+  defineProps<{
+    provider: IdentityProvider
+    primary?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    primary: false,
+    disabled: false
+  }
+)
+
+defineEmits<{
+  click: []
+}>()
+
+type Logos = {
+  colorful: string
+  monochrome: string
+}
+
+const providerTypeLogosMap: Record<string, Logos> = {
+  google: {
+    colorful: googleProviderLogoColorful,
+    monochrome: googleProviderMonochromeLogo
+  },
+  github: {
+    colorful: githubProviderLogoColorful,
+    monochrome: githubProviderMonochromeLogo
+  },
+  twitter: {
+    colorful: xProviderLogoColorful,
+    monochrome: xProviderMonochromeLogo
+  },
+  x: {
+    colorful: xProviderLogoColorful,
+    monochrome: xProviderMonochromeLogo
+  },
+  qq: {
+    colorful: qqProviderLogoColorful,
+    monochrome: qqProviderMonochromeLogo
+  },
+  wechat: {
+    colorful: wechatProviderLogoColorful,
+    monochrome: wechatProviderMonochromeLogo
+  }
+}
+
+const logo = computed(() => {
+  const logos = providerTypeLogosMap[props.provider.name.toLowerCase()]
+  if (logos == null) return undefined
+  return props.primary ? logos.monochrome : logos.colorful
+})
+
+const i18n = useI18n()
+
+const loginText = computed(() => {
+  const { displayName } = props.provider
+  if (i18n.lang.value === 'zh') {
+    const zhSep = /^[a-zA-Z]+$/.test(displayName) ? ' ' : ''
+    return ['使用', displayName, '登录'].join(zhSep)
+  }
+  return `Sign in with ${displayName}`
+})
+</script>
diff --git a/spx-gui/src/account-web/components/login/UsernamePasswordLink.vue b/spx-gui/src/account-web/components/login/UsernamePasswordLink.vue
new file mode 100644
index 0000000000..009cd0bbbf
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/UsernamePasswordLink.vue
@@ -0,0 +1,24 @@
+<template>
+  <a
+    class="mt-2 inline-flex items-center gap-1 text-lg/6 text-grey-800 no-underline transition-colors duration-200 hover:text-[#0aa5be]"
+    href="#"
+    @click.prevent="$emit('click')"
+  >
+    {{ $t({ en: 'Sign in with username and password', zh: '用户名密码登录' }) }}
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.33325 4L10.3333 8L6.33325 12"
+        stroke="currentColor"
+        stroke-width="1.07"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </a>
+</template>
+
+<script setup lang="ts">
+defineEmits<{
+  click: []
+}>()
+</script>
diff --git a/spx-gui/src/account-web/components/login/XBuilderLoginPageMobile.vue b/spx-gui/src/account-web/components/login/XBuilderLoginPageMobile.vue
new file mode 100644
index 0000000000..ddbef5a0f6
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/XBuilderLoginPageMobile.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="page">
+    <div class="shell">
+      <div class="w-[295px] pb-15 flex flex-col items-center justify-center">
+        <img :src="logoUrl" alt="XBuilder" class="w-18 mb-3" />
+        <h2 class="mb-16 text-title text-[24px]/7 font-semibold">XBuilder</h2>
+        <LoginForm :auth-context="authContext" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { OAuthContext } from '@/account-web/utils/oauth'
+import logoUrl from '@/account-web/assets/logo.svg'
+import LoginForm from './LoginForm.vue'
+
+defineProps<{
+  authContext: OAuthContext
+}>()
+</script>
+
+<style scoped>
+.page {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #eff3fd;
+  background-image: url('../../assets/bg-mobile.svg');
+  background-position: center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
+.shell {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-image: url('../../assets/illustration-mobile.svg');
+  background-position: top;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+</style>
diff --git a/spx-gui/src/account-web/components/login/XBuilderLoginPagePc.vue b/spx-gui/src/account-web/components/login/XBuilderLoginPagePc.vue
new file mode 100644
index 0000000000..6a5fda6bc9
--- /dev/null
+++ b/spx-gui/src/account-web/components/login/XBuilderLoginPagePc.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="page">
+    <div class="panel relative h-150 w-250 rounded-[16px] py-18 flex items-stretch justify-center">
+      <h1 class="absolute left-15 top-8 m-0 text-[26px]/9 text-title">{{ $t({ en: 'Sign In', zh: '登录' }) }}</h1>
+      <div class="illustration flex-1"></div>
+      <div class="flex-1 flex flex-col items-center justify-center">
+        <img :src="logoUrl" alt="XBuilder" class="w-18 mb-3" />
+        <h2 class="mb-16 text-title text-[24px]/7 font-semibold">XBuilder</h2>
+        <LoginForm class="px-[85px]" :auth-context="authContext" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { OAuthContext } from '@/account-web/utils/oauth'
+import logoUrl from '@/account-web/assets/logo.svg'
+import LoginForm from './LoginForm.vue'
+
+defineProps<{
+  authContext: OAuthContext
+}>()
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #eff3fd;
+  background-image: url('../../assets/bg.svg');
+  background-position: center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
+.panel {
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 16px 32px -12px rgba(64, 186, 196, 0.18);
+}
+
+.illustration {
+  background-image: url('../../assets/illustration.svg');
+  background-position: center;
+  background-size: 472px;
+  background-repeat: no-repeat;
+  border-right: 1px solid #e0e7ef;
+}
+</style>
diff --git a/spx-gui/src/account-web/main.ts b/spx-gui/src/account-web/main.ts
new file mode 100644
index 0000000000..390846298e
--- /dev/null
+++ b/spx-gui/src/account-web/main.ts
@@ -0,0 +1,20 @@
+import '@/polyfills'
+import '@/app.css'
+
+import { createApp, watchEffect } from 'vue'
+
+import { createI18n, normalizeLang } from '@/utils/i18n'
+import { defaultLang } from '@/utils/env'
+
+import App from './App.vue'
+import router from './router'
+
+const langLocalStorageKey = 'spx-gui-language'
+const lang = normalizeLang(localStorage.getItem(langLocalStorageKey) ?? defaultLang)
+const i18n = createI18n({ lang })
+
+watchEffect(() => {
+  localStorage.setItem(langLocalStorageKey, i18n.lang.value)
+})
+
+createApp(App).use(i18n).use(router).mount('#app')
diff --git a/spx-gui/src/account-web/pages/sign-in.vue b/spx-gui/src/account-web/pages/sign-in.vue
new file mode 100644
index 0000000000..5bc320a3de
--- /dev/null
+++ b/spx-gui/src/account-web/pages/sign-in.vue
@@ -0,0 +1,30 @@
+<template>
+  <UIError v-if="authContext == null" class="min-h-screen bg-grey-100">
+    {{ $t({ en: 'Unable to start sign-in', zh: '无法登录' }) }}
+    <template #sub-message>
+      {{
+        $t({
+          en: 'Missing OAuth context. Please restart sign-in from the app.',
+          zh: '缺少 OAuth 上下文，请从应用内重新发起登录。'
+        })
+      }}
+    </template>
+  </UIError>
+  <XBuilderLoginPageMobile v-else-if="mobile" :auth-context="authContext" />
+  <XBuilderLoginPagePc v-else :auth-context="authContext" />
+</template>
+
+<script setup lang="ts">
+import { UIError } from '@/components/ui'
+import { usePageTitle } from '@/utils/utils'
+import { isMobile } from '@/utils/ua'
+import { parseOAuthContext } from '@/account-web/utils/oauth'
+
+import XBuilderLoginPageMobile from '@/account-web/components/login/XBuilderLoginPageMobile.vue'
+import XBuilderLoginPagePc from '@/account-web/components/login/XBuilderLoginPagePc.vue'
+
+const mobile = isMobile()
+const authContext = parseOAuthContext()
+
+usePageTitle({ en: 'Sign in', zh: '登录' })
+</script>
diff --git a/spx-gui/src/account-web/router.ts b/spx-gui/src/account-web/router.ts
new file mode 100644
index 0000000000..62cf4269e7
--- /dev/null
+++ b/spx-gui/src/account-web/router.ts
@@ -0,0 +1,27 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+
+export const accountWebRoutePaths = {
+  signIn: '/sign-in'
+} as const
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: accountWebRoutePaths.signIn
+  },
+  {
+    path: accountWebRoutePaths.signIn,
+    component: () => import('@/account-web/pages/sign-in.vue')
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: accountWebRoutePaths.signIn
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(''),
+  routes
+})
+
+export default router
diff --git a/spx-gui/src/account-web/utils/oauth.test.ts b/spx-gui/src/account-web/utils/oauth.test.ts
new file mode 100644
index 0000000000..e82f7f68eb
--- /dev/null
+++ b/spx-gui/src/account-web/utils/oauth.test.ts
@@ -0,0 +1,44 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import {
+  buildIdentityProviderAuthorizeUrl,
+  buildOAuthAuthorizeUrl,
+  clearPendingAuthorization,
+  hasPendingAuthorization,
+  markPendingAuthorization,
+  parseOAuthContext,
+  type OAuthContext
+} from './oauth'
+
+describe('account-web oauth utils', () => {
+  const context: OAuthContext = {
+    clientId: 'xbuilder',
+    requestUri: 'urn:example:request:123'
+  }
+
+  beforeEach(() => {
+    sessionStorage.clear()
+    window.history.replaceState({}, '', '/sign-in?clientID=xbuilder&requestURI=urn%3Aexample%3Arequest%3A123')
+  })
+
+  it('parses oauth context from the current location', () => {
+    expect(parseOAuthContext()).toEqual(context)
+  })
+
+  it('builds account authorize URLs against a relative facade base URL', () => {
+    expect(buildOAuthAuthorizeUrl(context)).toBe(
+      'http://localhost:3000/api/oauth/authorize?client_id=xbuilder&request_uri=urn%3Aexample%3Arequest%3A123'
+    )
+    expect(buildIdentityProviderAuthorizeUrl('github', context)).toBe(
+      'http://localhost:3000/api/identity-providers/github/authorize?clientID=xbuilder&requestURI=urn%3Aexample%3Arequest%3A123'
+    )
+  })
+
+  it('tracks pending authorization by oauth flow', () => {
+    expect(hasPendingAuthorization(context)).toBe(false)
+    markPendingAuthorization(context)
+    expect(hasPendingAuthorization(context)).toBe(true)
+    clearPendingAuthorization(context)
+    expect(hasPendingAuthorization(context)).toBe(false)
+  })
+})
diff --git a/spx-gui/src/account-web/utils/oauth.ts b/spx-gui/src/account-web/utils/oauth.ts
new file mode 100644
index 0000000000..dcb2d81836
--- /dev/null
+++ b/spx-gui/src/account-web/utils/oauth.ts
@@ -0,0 +1,60 @@
+export interface OAuthContext {
+  clientId: string
+  requestUri: string
+}
+
+export function parseOAuthContext(search: string = window.location.search): OAuthContext | null {
+  const params = new URLSearchParams(search)
+  const clientId = params.get('clientID')?.trim() ?? ''
+  const requestUri = params.get('requestURI')?.trim() ?? ''
+  if (clientId === '' || requestUri === '') return null
+  return { clientId, requestUri }
+}
+
+export function getOAuthError(search: string = window.location.search): string | null {
+  const params = new URLSearchParams(search)
+  const error = params.get('error')?.trim() ?? ''
+  if (error === '') return null
+  const description = params.get('error_description')?.trim() ?? ''
+  return description === '' ? error : `${error}: ${description}`
+}
+
+export function buildAccountApiUrl(path: string, query?: Record<string, string>) {
+  const url = new URL(path, window.location.origin)
+  if (query != null) {
+    Object.entries(query).forEach(([key, value]) => {
+      url.searchParams.set(key, value)
+    })
+  }
+  return url.toString()
+}
+
+export function buildOAuthAuthorizeUrl(context: OAuthContext) {
+  return buildAccountApiUrl('/api/oauth/authorize', {
+    client_id: context.clientId,
+    request_uri: context.requestUri
+  })
+}
+
+export function buildIdentityProviderAuthorizeUrl(provider: string, context: OAuthContext) {
+  return buildAccountApiUrl(`/api/identity-providers/${encodeURIComponent(provider)}/authorize`, {
+    clientID: context.clientId,
+    requestURI: context.requestUri
+  })
+}
+
+function getPendingAuthorizationKey(context: OAuthContext) {
+  return `account-web:pending-authorization:${context.clientId}:${context.requestUri}`
+}
+
+export function hasPendingAuthorization(context: OAuthContext) {
+  return sessionStorage.getItem(getPendingAuthorizationKey(context)) === '1'
+}
+
+export function markPendingAuthorization(context: OAuthContext) {
+  sessionStorage.setItem(getPendingAuthorizationKey(context), '1')
+}
+
+export function clearPendingAuthorization(context: OAuthContext) {
+  sessionStorage.removeItem(getPendingAuthorizationKey(context))
+}
diff --git a/spx-gui/src/apis/account-oauth.test.ts b/spx-gui/src/apis/account-oauth.test.ts
new file mode 100644
index 0000000000..5d0256afcd
--- /dev/null
+++ b/spx-gui/src/apis/account-oauth.test.ts
@@ -0,0 +1,105 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const postForm = vi.fn()
+const Client = vi.fn(function MockClient(this: { postForm: typeof postForm }) {
+  this.postForm = postForm
+})
+
+vi.mock('@/apis/common/client', () => ({
+  Client
+}))
+
+vi.mock('@/utils/env', () => ({
+  accountOAuthClientId: 'client-123',
+  apiBaseUrl: '/api'
+}))
+
+describe('account oauth apis', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    Client.mockClear()
+    postForm.mockReset()
+    window.history.replaceState({}, '', '/')
+  })
+
+  it('should create pushed authorization requests with form-encoded oauth params', async () => {
+    postForm.mockResolvedValueOnce({ request_uri: 'urn:request:1' })
+    const { createPushedAuthorizationRequest } = await import('./account-oauth')
+
+    await expect(createPushedAuthorizationRequest({ state: 'state-1', codeChallenge: 'challenge-1' })).resolves.toEqual(
+      {
+        request_uri: 'urn:request:1'
+      }
+    )
+    expect(postForm).toHaveBeenCalledWith('/account/oauth/par', {
+      client_id: 'client-123',
+      response_type: 'code',
+      redirect_uri: 'http://localhost:3000/sign-in/callback',
+      state: 'state-1',
+      code_challenge: 'challenge-1',
+      code_challenge_method: 'S256',
+      scope: 'account:user:read'
+    })
+  })
+
+  it('should exchange authorization codes with form-encoded oauth params', async () => {
+    postForm.mockResolvedValueOnce({ access_token: 'token-1', expires_in: 3600 })
+    const { exchangeAuthorizationCode } = await import('./account-oauth')
+
+    await exchangeAuthorizationCode('code-1', 'verifier-1')
+
+    expect(postForm).toHaveBeenCalledWith('/account/oauth/token', {
+      grant_type: 'authorization_code',
+      client_id: 'client-123',
+      code: 'code-1',
+      redirect_uri: 'http://localhost:3000/sign-in/callback',
+      code_verifier: 'verifier-1'
+    })
+  })
+
+  it('should exchange refresh tokens with form-encoded oauth params', async () => {
+    postForm.mockResolvedValueOnce({ access_token: 'token-1', expires_in: 3600 })
+    const { exchangeRefreshToken } = await import('./account-oauth')
+
+    await exchangeRefreshToken('refresh-1')
+
+    expect(postForm).toHaveBeenCalledWith('/account/oauth/token', {
+      grant_type: 'refresh_token',
+      client_id: 'client-123',
+      refresh_token: 'refresh-1'
+    })
+  })
+
+  it('should revoke oauth tokens with form-encoded oauth params', async () => {
+    postForm.mockResolvedValueOnce(null)
+    const { revokeOAuthToken } = await import('./account-oauth')
+
+    await revokeOAuthToken('token-1')
+
+    expect(postForm).toHaveBeenCalledWith('/account/oauth/revoke', {
+      client_id: 'client-123',
+      token: 'token-1'
+    })
+  })
+
+  it('should skip revoke when token is null', async () => {
+    const { revokeOAuthToken } = await import('./account-oauth')
+
+    await expect(revokeOAuthToken(null)).resolves.toBeUndefined()
+    expect(postForm).not.toHaveBeenCalled()
+  })
+
+  it('should use a dedicated client instance for oauth endpoints', async () => {
+    await import('./account-oauth')
+    expect(Client).toHaveBeenCalledTimes(1)
+    expect(Client).toHaveBeenCalledWith()
+  })
+
+  it('should build the authorize URL against the main-site api origin', async () => {
+    const { getAccountOAuthAuthorizeUrl } = await import('./account-oauth')
+
+    expect(getAccountOAuthAuthorizeUrl('urn:request:1')).toBe(
+      'http://localhost:3000/account/oauth/authorize?client_id=client-123&request_uri=urn%3Arequest%3A1'
+    )
+  })
+})
diff --git a/spx-gui/src/apis/account-oauth.ts b/spx-gui/src/apis/account-oauth.ts
new file mode 100644
index 0000000000..05322c686a
--- /dev/null
+++ b/spx-gui/src/apis/account-oauth.ts
@@ -0,0 +1,66 @@
+import { Client } from '@/apis/common/client'
+import { accountOAuthClientId, apiBaseUrl } from '@/utils/env'
+
+const client = new Client()
+
+export interface PushedAuthorizationRequestResponse {
+  request_uri: string
+  expires_in?: number | null
+}
+
+export interface AccountOAuthTokenResponse {
+  access_token: string
+  expires_in: number
+  refresh_token?: string | null
+  token_type?: string
+  scope?: string
+}
+
+function getAccountOAuthRedirectUri() {
+  return `${window.location.origin}/sign-in/callback`
+}
+
+export function getAccountOAuthAuthorizeUrl(requestUri: string) {
+  const url = new URL('/account/oauth/authorize', new URL(apiBaseUrl, window.location.origin))
+  url.searchParams.set('client_id', accountOAuthClientId)
+  url.searchParams.set('request_uri', requestUri)
+  return url.toString()
+}
+
+export function createPushedAuthorizationRequest(params: { state: string; codeChallenge: string }) {
+  return client.postForm('/account/oauth/par', {
+    client_id: accountOAuthClientId,
+    response_type: 'code',
+    redirect_uri: getAccountOAuthRedirectUri(),
+    state: params.state,
+    code_challenge: params.codeChallenge,
+    code_challenge_method: 'S256',
+    scope: 'account:user:read'
+  }) as Promise<PushedAuthorizationRequestResponse>
+}
+
+export function exchangeAuthorizationCode(code: string, codeVerifier: string) {
+  return client.postForm('/account/oauth/token', {
+    grant_type: 'authorization_code',
+    client_id: accountOAuthClientId,
+    code,
+    redirect_uri: getAccountOAuthRedirectUri(),
+    code_verifier: codeVerifier
+  }) as Promise<AccountOAuthTokenResponse>
+}
+
+export function exchangeRefreshToken(refreshToken: string) {
+  return client.postForm('/account/oauth/token', {
+    grant_type: 'refresh_token',
+    client_id: accountOAuthClientId,
+    refresh_token: refreshToken
+  }) as Promise<AccountOAuthTokenResponse>
+}
+
+export async function revokeOAuthToken(token: string | null) {
+  if (token == null) return
+  await client.postForm('/account/oauth/revoke', {
+    client_id: accountOAuthClientId,
+    token
+  })
+}
diff --git a/spx-gui/src/apis/common/client.test.ts b/spx-gui/src/apis/common/client.test.ts
index 474e7f7874..943271147f 100644
--- a/spx-gui/src/apis/common/client.test.ts
+++ b/spx-gui/src/apis/common/client.test.ts
@@ -95,6 +95,34 @@ describe('Client', () => {
     })
   })
 
+  describe('form requests', () => {
+    it('should submit application/x-www-form-urlencoded payloads', async () => {
+      fetchMock.mockResolvedValueOnce(new Response(JSON.stringify({ ok: true }), { status: 200 }))
+
+      await client.postForm('/account/oauth/token', {
+        grant_type: 'refresh_token',
+        client_id: 'client-1',
+        refresh_token: 'refresh-1'
+      })
+
+      expect(fetchMock).toHaveBeenCalledTimes(1)
+      const request = fetchMock.mock.calls[0]![0] as Request
+      expect(request.headers.get('Content-Type')).toBe('application/x-www-form-urlencoded')
+      expect(await request.text()).toBe('grant_type=refresh_token&client_id=client-1&refresh_token=refresh-1')
+    })
+
+    it('should allow empty successful responses for form-encoded endpoints', async () => {
+      fetchMock.mockResolvedValueOnce(new Response(null, { status: 200 }))
+
+      await expect(
+        client.postForm('/account/oauth/revoke', {
+          client_id: 'client-1',
+          token: 'token-1'
+        })
+      ).resolves.toBeNull()
+    })
+  })
+
   describe('default fetch binding', () => {
     it('should call the global fetch with the global receiver when fetchFn is not injected', async () => {
       const globalFetchMock = vi.fn(function (this: typeof globalThis, _req: RequestInfo | URL, _init?: RequestInit) {
diff --git a/spx-gui/src/apis/common/client.ts b/spx-gui/src/apis/common/client.ts
index 14c0b0e9f6..1880310d8a 100644
--- a/spx-gui/src/apis/common/client.ts
+++ b/spx-gui/src/apis/common/client.ts
@@ -103,6 +103,27 @@ export class Client {
     return new Request(url, { method, headers, body })
   }
 
+  /** Prepare request object, encoding payload as application/x-www-form-urlencoded */
+  private async prepareFormRequest(path: string, payload: QueryParams, options?: RequestOptions): Promise<Request> {
+    const traceData = Sentry.getTraceData()
+    const sentryTraceHeader = traceData['sentry-trace']
+    const sentryBaggageHeader = traceData['baggage']
+    const url = this.baseUrl + path
+    const method = options?.method ?? 'POST'
+    const body = new URLSearchParams()
+    Object.entries(payload).forEach(([key, value]) => {
+      if (value != null) body.append(key, `${value}`)
+    })
+    const token = await this.tokenProvider()
+    options?.signal?.throwIfAborted()
+    const headers = options?.headers ?? new Headers()
+    headers.set('Content-Type', 'application/x-www-form-urlencoded')
+    if (token != null) headers.set('Authorization', `Bearer ${token}`)
+    if (sentryTraceHeader != null) headers.set('Sentry-Trace', sentryTraceHeader)
+    if (sentryBaggageHeader != null) headers.set('Baggage', sentryBaggageHeader)
+    return new Request(url, { method, headers, body: body.toString() })
+  }
+
   /** Perform request object and handle errors */
   private async doRequest(req: Request, options?: RequestOptions): Promise<Response> {
     const timeout = options?.timeout ?? this.defaultTimeout
@@ -134,6 +155,17 @@ export class Client {
     return resp.json()
   }
 
+  /** Do a form request, parsing response body as JSON when present */
+  private async requestForm(path: string, payload: QueryParams, options?: RequestOptions): Promise<unknown> {
+    const req = await this.prepareFormRequest(path, payload, options)
+    const resp = await this.doRequest(req, options)
+    if (resp.status === 204) return null
+    const contentType = resp.headers.get('Content-Type') ?? ''
+    if (contentType.includes('application/json')) return resp.json()
+    const text = await resp.text()
+    return text === '' ? null : text
+  }
+
   private async requestBinary(path: string, payload: FormData, options?: RequestOptions) {
     const traceData = Sentry.getTraceData()
     const sentryTraceHeader = traceData['sentry-trace']
@@ -197,6 +229,10 @@ export class Client {
     return this.requestJSON(path, payload, { ...options, method: 'POST' })
   }
 
+  postForm(path: string, payload: QueryParams, options?: Omit<RequestOptions, 'method'>) {
+    return this.requestForm(path, payload, { ...options, method: 'POST' })
+  }
+
   postBinary(path: string, payload: FormData, options?: Omit<RequestOptions, 'method'>) {
     return this.requestBinary(path, payload, { ...options, method: 'POST' })
   }
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index b0233221e0..b3bd868de5 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -77,7 +77,7 @@ import { useNetwork } from '@/utils/network'
 import { useMessageHandle } from '@/utils/exception'
 import { getUserPageRoute } from '@/router'
 import { AssetType } from '@/apis/asset'
-import { initiateSignIn, signOut, useSignedInStateQuery } from '@/stores/user'
+import { initiateSignIn, revokeTokens, useSignedInStateQuery } from '@/stores/user'
 import { useAvatarUrl } from '@/stores/user/avatar'
 import { UIButton, UIDropdown, UIMenu, UIMenuGroup, UIMenuItem, UITooltip } from '@/components/ui'
 import { useAssetLibraryManagement } from '@/components/asset'
@@ -117,8 +117,8 @@ const manageCourses = useMessageHandle(manageCoursesFn).fn
 const manageCourseSeriesFn = useCourseSeriesManagement()
 const manageCourseSeries = useMessageHandle(manageCourseSeriesFn).fn
 
-function handleSignOut() {
-  signOut()
+async function handleSignOut() {
+  await revokeTokens()
   router.go(0) // Reload the page to trigger navigation guards.
 }
 </script>
diff --git a/spx-gui/src/pages/sign-in/callback.vue b/spx-gui/src/pages/sign-in/callback.vue
index 6b35c66c0a..a0524ddd7c 100644
--- a/spx-gui/src/pages/sign-in/callback.vue
+++ b/spx-gui/src/pages/sign-in/callback.vue
@@ -5,19 +5,15 @@
 </template>
 <script setup lang="ts">
 import { usePageTitle } from '@/utils/utils'
-import { completeSignIn } from '@/stores/user'
+import { completeAuthorizationCodeSignIn } from '@/stores/user'
 
 const title = { en: 'Signing in...', zh: '登录中...' }
 
 usePageTitle(title)
 
 try {
-  const params = new URLSearchParams(location.search)
-
-  await completeSignIn()
-
-  const returnTo = params.get('returnTo')
-  window.location.replace(returnTo != null ? returnTo : '/')
+  const { returnTo } = await completeAuthorizationCodeSignIn()
+  window.location.replace(returnTo !== '' ? returnTo : '/')
 } catch (e) {
   console.error('failed to complete sign-in', e)
   window.location.replace('/')
diff --git a/spx-gui/src/router.ts b/spx-gui/src/router.ts
index a15d8af600..e5e1f9247f 100644
--- a/spx-gui/src/router.ts
+++ b/spx-gui/src/router.ts
@@ -150,7 +150,7 @@ const routes: Array<RouteRecordRaw> = [
       // Route with `redirect` will not trigger the global `beforeEach` guard,
       // so we need to check sign-in status here.
       if (username == null) {
-        initiateSignIn()
+        void initiateSignIn()
         throw new Error('User not signed in') // prevent router from redirecting
       }
       return getProjectEditorRoute(username, projectNameInput as string)
@@ -195,7 +195,8 @@ const router = createRouter({
 export const initRouter = (app: App) => {
   router.beforeEach((to, _, next) => {
     if (to.meta.requiresSignIn && !isSignedIn()) {
-      initiateSignIn()
+      void initiateSignIn(to.fullPath)
+      next(false)
     } else {
       next()
     }
diff --git a/spx-gui/src/stores/user/signed-in.test.ts b/spx-gui/src/stores/user/signed-in.test.ts
new file mode 100644
index 0000000000..faf8a17e8d
--- /dev/null
+++ b/spx-gui/src/stores/user/signed-in.test.ts
@@ -0,0 +1,230 @@
+import { ref, shallowRef } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { withSetup } from '@/utils/test'
+
+const createPushedAuthorizationRequest = vi.fn()
+const exchangeAuthorizationCode = vi.fn()
+const exchangeRefreshToken = vi.fn()
+const revokeOAuthToken = vi.fn()
+const getSignedInUser = vi.fn()
+const useVueQueryMock = vi.fn()
+const pendingAuthorizationStorageKey = 'spx-account-oauth:pending-authorization'
+
+vi.mock('@/utils/env', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/utils/env')>()
+  return {
+    ...actual,
+    accountOAuthClientId: 'client-123',
+    apiBaseUrl: '/api'
+  }
+})
+
+vi.mock('@/apis/account-oauth', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/apis/account-oauth')>()
+  return {
+    ...actual,
+    createPushedAuthorizationRequest,
+    exchangeAuthorizationCode,
+    exchangeRefreshToken,
+    revokeOAuthToken
+  }
+})
+
+vi.mock('@/apis/user', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/apis/user')>()
+  return {
+    ...actual,
+    getSignedInUser
+  }
+})
+
+vi.mock('@/utils/query', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/utils/query')>()
+  return {
+    ...actual,
+    useQueryWithCache: useVueQueryMock
+  }
+})
+
+describe('signed-in user store', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    sessionStorage.clear()
+    createPushedAuthorizationRequest.mockReset()
+    exchangeAuthorizationCode.mockReset()
+    exchangeRefreshToken.mockReset()
+    revokeOAuthToken.mockReset()
+    getSignedInUser.mockReset()
+    useVueQueryMock.mockReset()
+    useVueQueryMock.mockReturnValue({
+      isLoading: ref(false),
+      data: shallowRef(null),
+      error: shallowRef(null),
+      progress: shallowRef({ percentage: 0, timeLeft: null, desc: null }),
+      refetch: vi.fn()
+    })
+    vi.resetModules()
+  })
+
+  afterEach(async () => {
+    const userStore = await import('./signed-in')
+    userStore.signOut()
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('should change the signed-in user query key across sign-in and sign-out transitions', async () => {
+    const userStore = await import('./signed-in')
+    getSignedInUser.mockResolvedValue({ username: 'alice' })
+
+    withSetup(() => userStore.useSignedInUser())
+    expect(useVueQueryMock).toHaveBeenLastCalledWith(expect.objectContaining({ queryKey: expect.any(Object) }))
+    let queryKey = useVueQueryMock.mock.lastCall?.[0]?.queryKey
+    expect(queryKey.value).toEqual(['user', '', 'signed-in'])
+
+    await userStore.signInWithAccessToken('token-a')
+    withSetup(() => userStore.useSignedInUser())
+    queryKey = useVueQueryMock.mock.lastCall?.[0]?.queryKey
+    expect(queryKey.value).toEqual(['user', 'alice', 'signed-in'])
+
+    userStore.signOut()
+    withSetup(() => userStore.useSignedInUser())
+    queryKey = useVueQueryMock.mock.lastCall?.[0]?.queryKey
+    expect(queryKey.value).toEqual(['user', '', 'signed-in'])
+  })
+
+  it('should resolve username from the access token when signing in with a token', async () => {
+    const userStore = await import('./signed-in')
+    getSignedInUser.mockResolvedValue({ username: 'alice' })
+
+    await expect(userStore.signInWithAccessToken('token-a')).resolves.toBeUndefined()
+    expect(userStore.isSignedIn()).toBe(true)
+    expect(userStore.getUnresolvedSignedInUsername()).toBe('alice')
+    expect(getSignedInUser).toHaveBeenCalledWith({
+      headers: new Headers({ Authorization: 'Bearer token-a' })
+    })
+  })
+
+  it('should keep the guest signed-in user query key when resolving access token for a guest session', async () => {
+    const userStore = await import('./signed-in')
+
+    withSetup(() => userStore.useSignedInUser())
+    let queryKey = useVueQueryMock.mock.lastCall?.[0]?.queryKey
+    expect(queryKey.value).toEqual(['user', '', 'signed-in'])
+
+    await expect(userStore.ensureAccessToken()).resolves.toBeNull()
+
+    withSetup(() => userStore.useSignedInUser())
+    queryKey = useVueQueryMock.mock.lastCall?.[0]?.queryKey
+    expect(queryKey.value).toEqual(['user', '', 'signed-in'])
+  })
+
+  it('should complete OAuth callback sign-in and return the stored returnTo', async () => {
+    const userStore = await import('./signed-in')
+    getSignedInUser.mockResolvedValue({ username: 'alice' })
+
+    sessionStorage.setItem(
+      pendingAuthorizationStorageKey,
+      JSON.stringify({ state: 'state-a', codeVerifier: 'verifier-a', returnTo: '/editor/demo' })
+    )
+    exchangeAuthorizationCode.mockResolvedValue({
+      access_token: 'token-a',
+      expires_in: 3600,
+      refresh_token: 'refresh-a'
+    })
+
+    await expect(userStore.completeAuthorizationCodeSignIn('?code=code-a&state=state-a')).resolves.toEqual({
+      returnTo: '/editor/demo'
+    })
+    expect(exchangeAuthorizationCode).toHaveBeenCalledWith('code-a', 'verifier-a')
+    expect(userStore.isSignedIn()).toBe(true)
+    expect(getSignedInUser).toHaveBeenCalledWith({
+      headers: new Headers({ Authorization: 'Bearer token-a' })
+    })
+    expect(sessionStorage.getItem(pendingAuthorizationStorageKey)).toBe(null)
+  })
+
+  it('should build sign-in URLs through the authorize endpoint on the main-site api origin', async () => {
+    const userStore = await import('./signed-in')
+
+    createPushedAuthorizationRequest.mockResolvedValueOnce({
+      request_uri: 'urn:request:1'
+    })
+
+    await expect(userStore.createAuthorizationRequest('/editor/demo')).resolves.toEqual({
+      requestUri: 'urn:request:1',
+      signInUrl: 'http://localhost:3000/account/oauth/authorize?client_id=client-123&request_uri=urn%3Arequest%3A1'
+    })
+    expect(sessionStorage.getItem(pendingAuthorizationStorageKey)).toMatch(/"returnTo":"\/editor\/demo"/)
+    expect(createPushedAuthorizationRequest).toHaveBeenCalledTimes(1)
+    expect(createPushedAuthorizationRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        state: expect.any(String),
+        codeChallenge: expect.any(String)
+      })
+    )
+  })
+
+  it('should redirect initiateSignIn through the authorize endpoint returned from the main-site api origin', async () => {
+    const userStore = await import('./signed-in')
+
+    createPushedAuthorizationRequest.mockResolvedValueOnce({
+      request_uri: 'urn:request:1'
+    })
+
+    const assign = vi.spyOn(window.location, 'assign').mockImplementation(() => undefined)
+
+    await userStore.initiateSignIn('/editor/demo')
+
+    expect(assign).toHaveBeenCalledWith(
+      'http://localhost:3000/account/oauth/authorize?client_id=client-123&request_uri=urn%3Arequest%3A1'
+    )
+  })
+
+  it('should clear pending OAuth authorization when callback token exchange fails', async () => {
+    const userStore = await import('./signed-in')
+    const exchangeError = new Error('token exchange failed')
+
+    sessionStorage.setItem(
+      pendingAuthorizationStorageKey,
+      JSON.stringify({ state: 'state-a', codeVerifier: 'verifier-a', returnTo: '/editor/demo' })
+    )
+    exchangeAuthorizationCode.mockRejectedValueOnce(exchangeError)
+
+    await expect(userStore.completeAuthorizationCodeSignIn('?code=code-a&state=state-a')).rejects.toBe(exchangeError)
+    expect(userStore.isSignedIn()).toBe(false)
+    expect(sessionStorage.getItem(pendingAuthorizationStorageKey)).toBe(null)
+  })
+
+  it('should use the rotated refresh token on the next refresh', async () => {
+    const userStore = await import('./signed-in')
+    getSignedInUser.mockResolvedValue({ username: 'alice' })
+
+    sessionStorage.setItem(
+      pendingAuthorizationStorageKey,
+      JSON.stringify({ state: 'state-a', codeVerifier: 'verifier-a', returnTo: '/editor/demo' })
+    )
+    exchangeAuthorizationCode.mockResolvedValueOnce({
+      access_token: 'token-a',
+      expires_in: 0,
+      refresh_token: 'refresh-a'
+    })
+
+    await userStore.completeAuthorizationCodeSignIn('?code=code-a&state=state-a')
+
+    exchangeRefreshToken.mockResolvedValueOnce({
+      access_token: 'token-b',
+      expires_in: 0,
+      refresh_token: 'refresh-b'
+    })
+    await expect(userStore.refreshAccessToken()).resolves.toBe('token-b')
+    expect(exchangeRefreshToken).toHaveBeenNthCalledWith(1, 'refresh-a')
+    exchangeRefreshToken.mockResolvedValueOnce({
+      access_token: 'token-c',
+      expires_in: 3600,
+      refresh_token: 'refresh-c'
+    })
+    await expect(userStore.refreshAccessToken()).resolves.toBe('token-c')
+    expect(exchangeRefreshToken).toHaveBeenNthCalledWith(2, 'refresh-b')
+  })
+})
diff --git a/spx-gui/src/stores/user/signed-in.ts b/spx-gui/src/stores/user/signed-in.ts
index 9d33edd4d9..0084cc772c 100644
--- a/spx-gui/src/stores/user/signed-in.ts
+++ b/spx-gui/src/stores/user/signed-in.ts
@@ -1,20 +1,28 @@
 import { reactive, watchEffect, computed } from 'vue'
-import Sdk from 'casdoor-js-sdk'
-import { casdoorConfig } from '@/utils/env'
-import { useQueryWithCache, useQueryCache, useQuery, composeQuery } from '@/utils/query'
-import { useAction } from '@/utils/exception'
+import {
+  getAccountOAuthAuthorizeUrl,
+  createPushedAuthorizationRequest,
+  exchangeAuthorizationCode,
+  exchangeRefreshToken,
+  revokeOAuthToken,
+  type AccountOAuthTokenResponse
+} from '@/apis/account-oauth'
 import * as apis from '@/apis/user'
+import { useAction } from '@/utils/exception'
+import { composeQuery, useQuery, useQueryCache, useQueryWithCache } from '@/utils/query'
 import { getUserQueryKey } from './query-keys'
 
 export type SignedInUser = apis.SignedInUser
 
-const casdoorAuthRedirectPath = '/sign-in/callback'
-const casdoorSdk = new Sdk({
-  ...casdoorConfig,
-  redirectPath: casdoorAuthRedirectPath
-})
-
 const userStateStorageKey = 'spx-user'
+const pendingAuthorizationStorageKey = 'spx-account-oauth:pending-authorization'
+
+interface PendingAuthorization {
+  state: string
+  codeVerifier: string
+  returnTo: string
+}
+
 const userState = reactive({
   accessToken: null as string | null,
   accessTokenExpiresAt: null as number | null,
@@ -30,10 +38,40 @@ export function initUserState() {
   watchEffect(() => localStorage.setItem(userStateStorageKey, JSON.stringify(userState)))
 }
 
-interface TokenResponse {
-  access_token: string
-  expires_in: number
-  refresh_token: string
+function encodeBase64Url(bytes: Uint8Array) {
+  let binary = ''
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte)
+  })
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '')
+}
+
+function createRandomString(byteLength: number = 32) {
+  return encodeBase64Url(crypto.getRandomValues(new Uint8Array(byteLength)))
+}
+
+async function createCodeChallenge(codeVerifier: string) {
+  const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(codeVerifier))
+  return encodeBase64Url(new Uint8Array(digest))
+}
+
+function readPendingAuthorization(): PendingAuthorization | null {
+  const stored = sessionStorage.getItem(pendingAuthorizationStorageKey)
+  if (stored == null) return null
+  try {
+    return JSON.parse(stored) as PendingAuthorization
+  } catch {
+    sessionStorage.removeItem(pendingAuthorizationStorageKey)
+    return null
+  }
+}
+
+function writePendingAuthorization(value: PendingAuthorization | null) {
+  if (value == null) {
+    sessionStorage.removeItem(pendingAuthorizationStorageKey)
+  } else {
+    sessionStorage.setItem(pendingAuthorizationStorageKey, JSON.stringify(value))
+  }
 }
 
 async function fetchSignedInUsernameByAccessToken(accessToken: string) {
@@ -45,28 +83,56 @@ async function fetchSignedInUsernameByAccessToken(accessToken: string) {
   return user.username
 }
 
-async function handleTokenResponse(resp: TokenResponse) {
+async function handleTokenResponse(resp: AccountOAuthTokenResponse) {
   const username = await fetchSignedInUsernameByAccessToken(resp.access_token)
   userState.accessToken = resp.access_token
   userState.accessTokenExpiresAt = resp.expires_in ? Date.now() + resp.expires_in * 1000 : null
-  userState.refreshToken = resp.refresh_token
+  if ('refresh_token' in resp) userState.refreshToken = resp.refresh_token ?? null
   userState.username = username
 }
 
-export function initiateSignIn(
+export async function createAuthorizationRequest(
   returnTo: string = window.location.pathname + window.location.search + window.location.hash
 ) {
-  // Workaround for casdoor-js-sdk not supporting override of `redirectPath` in `signin_redirect`.
-  const casdoorSdk = new Sdk({
-    ...casdoorConfig,
-    redirectPath: `${casdoorAuthRedirectPath}?returnTo=${encodeURIComponent(returnTo)}`
-  })
-  casdoorSdk.signin_redirect()
+  const state = createRandomString()
+  const codeVerifier = createRandomString(48)
+  const codeChallenge = await createCodeChallenge(codeVerifier)
+  const response = await createPushedAuthorizationRequest({ state, codeChallenge })
+
+  writePendingAuthorization({ state, codeVerifier, returnTo })
+  return {
+    requestUri: response.request_uri,
+    signInUrl: getAccountOAuthAuthorizeUrl(response.request_uri)
+  }
 }
 
-export async function completeSignIn() {
-  const resp = await casdoorSdk.exchangeForAccessToken()
-  await handleTokenResponse(resp)
+export async function initiateSignIn(
+  returnTo: string = window.location.pathname + window.location.search + window.location.hash
+) {
+  const { signInUrl } = await createAuthorizationRequest(returnTo)
+  window.location.assign(signInUrl)
+}
+
+export async function completeAuthorizationCodeSignIn(search: string = window.location.search) {
+  const params = new URLSearchParams(search)
+  const code = params.get('code')?.trim() ?? ''
+  const state = params.get('state')?.trim() ?? ''
+  if (code === '' || state === '') throw new Error('Missing OAuth callback parameters')
+
+  const pendingAuthorization = readPendingAuthorization()
+  if (pendingAuthorization == null) throw new Error('Missing pending OAuth authorization state')
+  if (pendingAuthorization.state !== state) throw new Error('OAuth state mismatch')
+
+  try {
+    const resp = await exchangeAuthorizationCode(code, pendingAuthorization.codeVerifier)
+    await handleTokenResponse(resp)
+  } finally {
+    writePendingAuthorization(null)
+  }
+
+  return {
+    returnTo: pendingAuthorization.returnTo
+  }
 }
 
 export async function signInWithAccessToken(accessToken: string) {
@@ -82,32 +148,43 @@ export function signOut() {
   userState.accessTokenExpiresAt = null
   userState.refreshToken = null
   userState.username = null
+  writePendingAuthorization(null)
+}
+
+export async function revokeTokens() {
+  const accessToken = userState.accessToken
+  const refreshToken = userState.refreshToken
+  signOut()
+  try {
+    await revokeOAuthToken(accessToken)
+  } catch (error) {
+    console.error('failed to revoke access token', error)
+  }
+  try {
+    await revokeOAuthToken(refreshToken)
+  } catch (error) {
+    console.error('failed to revoke refresh token', error)
+  }
 }
 
 const tokenExpiryDelta = 60 * 1000 // 1 minute in milliseconds
 let tokenRefreshPromise: Promise<string | null> | null = null
 
-export async function ensureAccessToken(): Promise<string | null> {
-  if (isAccessTokenValid()) return userState.accessToken
-
+export async function refreshAccessToken(): Promise<string | null> {
+  const refreshToken = userState.refreshToken
+  if (refreshToken == null) return null
   if (tokenRefreshPromise != null) return tokenRefreshPromise
-  if (userState.refreshToken == null) {
-    signOut()
-    return null
-  }
 
   tokenRefreshPromise = (async () => {
     try {
-      const resp = await casdoorSdk.refreshAccessToken(userState.refreshToken!)
+      const resp = await exchangeRefreshToken(refreshToken)
       await handleTokenResponse(resp)
-    } catch (e) {
-      console.error('failed to refresh access token', e)
-      throw e
+    } catch (error) {
+      console.error('failed to refresh access token', error)
+      signOut()
+      return null
     }
 
-    // Due to casdoor-js-sdk's lack of error handling, we must check if the access token is valid after calling
-    // `casdoorSdk.refreshAccessToken`. The token might still be invalid if, e.g., the server has already revoked
-    // the refresh token. We can't do anything but sign out the user in such cases.
     if (!isAccessTokenValid()) {
       signOut()
       return null
@@ -115,9 +192,19 @@ export async function ensureAccessToken(): Promise<string | null> {
 
     return userState.accessToken
   })()
+
   return tokenRefreshPromise.finally(() => (tokenRefreshPromise = null))
 }
 
+export async function ensureAccessToken(): Promise<string | null> {
+  if (isAccessTokenValid()) return userState.accessToken
+  if (userState.refreshToken == null) {
+    signOut()
+    return null
+  }
+  return refreshAccessToken()
+}
+
 function isAccessTokenValid(): boolean {
   return !!(
     userState.accessToken &&
diff --git a/spx-gui/src/utils/env.ts b/spx-gui/src/utils/env.ts
index 6496854d7c..1e88c56730 100644
--- a/spx-gui/src/utils/env.ts
+++ b/spx-gui/src/utils/env.ts
@@ -13,14 +13,6 @@ export const usercontentBaseUrl = import.meta.env.VITE_USERCONTENT_BASE_URL as s
 export const usercontentBucket = import.meta.env.VITE_USERCONTENT_BUCKET as string
 export const usercontentUploadBaseUrl = import.meta.env.VITE_USERCONTENT_UPLOAD_BASE_URL as string
 
-// Casdoor configurations
-export const casdoorConfig = {
-  serverUrl: import.meta.env.VITE_CASDOOR_ENDPOINT as string,
-  clientId: import.meta.env.VITE_CASDOOR_CLIENT_ID as string,
-  organizationName: import.meta.env.VITE_CASDOOR_ORGANIZATION_NAME as string,
-  appName: import.meta.env.VITE_CASDOOR_APP_NAME as string
-}
-
 /**
  * If we should disable features that rely on AIGC service.
  * For now AIGC service is not ready for production. We disable it until it's ready.
@@ -55,3 +47,6 @@ export const showTutorialsEntry = import.meta.env.VITE_SHOW_TUTORIALS_ENTRY ===
 
 /** Default language, e.g. `en`, `zh` */
 export const defaultLang = (import.meta.env.VITE_DEFAULT_LANG as string) || 'en'
+
+// OAuth client id issued for the main-site frontend.
+export const accountOAuthClientId = import.meta.env.VITE_ACCOUNT_OAUTH_CLIENT_ID as string
diff --git a/spx-gui/vite.config.account-web.ts b/spx-gui/vite.config.account-web.ts
new file mode 100644
index 0000000000..38b5012399
--- /dev/null
+++ b/spx-gui/vite.config.account-web.ts
@@ -0,0 +1,118 @@
+import path from 'node:path'
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+import browserslistToEsbuild from 'browserslist-to-esbuild'
+
+import { createVercelOutputPlugin } from './vercel-output-plugin.js'
+
+const resolve = (dir: string) => path.join(__dirname, dir)
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const vercelProxiedApiBaseURL =
+    env.VITE_VERCEL_PROXIED_API_BASE_URL == null ? null : env.VITE_VERCEL_PROXIED_API_BASE_URL
+  const accountWebTestOrigin = env.VITE_ACCOUNT_WEB_TEST_ORIGIN?.trim() || null
+  const accountWebTestHost = accountWebTestOrigin == null ? null : new URL(accountWebTestOrigin).host
+
+  return {
+    plugins: [
+      {
+        name: 'account-web-dev-sign-in-path',
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            if (req.url == null) return next()
+            const url = new URL(req.url, 'http://localhost')
+            if (url.pathname !== '/sign-in') return next()
+            res.statusCode = 302
+            res.setHeader('Location', `/sign-in/${url.search}`)
+            res.end()
+          })
+        }
+      },
+      vue(),
+      tailwindcss(),
+      createVercelOutputPlugin({
+        headers: [
+          {
+            source: '/(.*)',
+            headers: [
+              {
+                key: 'Cache-Control',
+                value: 'public, max-age=300'
+              },
+              {
+                key: 'Cross-Origin-Embedder-Policy',
+                value: 'require-corp'
+              },
+              {
+                key: 'Cross-Origin-Opener-Policy',
+                value: 'same-origin'
+              }
+            ]
+          },
+          {
+            source: '/assets/(.*)',
+            headers: [
+              {
+                key: 'Cache-Control',
+                value: 'public, max-age=31536000, immutable'
+              }
+            ]
+          }
+        ],
+        rewrites: [
+          {
+            source: '/api/(.*)',
+            destination: vercelProxiedApiBaseURL == null ? null : `${vercelProxiedApiBaseURL}/$1`
+          },
+          {
+            source: '/(.*)',
+            destination: '/sign-in/index.html'
+          }
+        ]
+      })
+    ],
+    resolve: {
+      alias: {
+        '@': resolve('src'),
+        '@docs': resolve('../docs')
+      }
+    },
+    build: {
+      target: browserslistToEsbuild(),
+      rolldownOptions: {
+        input: {
+          'sign-in': resolve('sign-in/index.html')
+        },
+        output: {
+          entryFileNames: 'assets/[name]-[hash].js'
+        }
+      }
+    },
+    server: {
+      headers: {
+        'Cross-Origin-Embedder-Policy': 'require-corp',
+        'Cross-Origin-Opener-Policy': 'same-origin'
+      },
+      allowedHosts: accountWebTestHost == null ? undefined : [accountWebTestHost],
+      proxy: (() => {
+        const target = env.VITE_API_BASE_URL
+        if (!target) return undefined
+        return {
+          '/api': {
+            target,
+            changeOrigin: true,
+            rewrite: (path: string) => path.replace(/^\/api/, '/account'),
+            configure(proxy) {
+              if (accountWebTestOrigin == null) return
+              proxy.on('proxyReq', (proxyReq) => {
+                proxyReq.setHeader('Origin', accountWebTestOrigin)
+              })
+            }
+          }
+        }
+      })()
+    }
+  }
+})

From db206aaeec929d4251d5232ccea4047ab64f782f Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 5 Jun 2026 15:10:15 +0800
Subject: [PATCH 3/6] restructure account-web into apps/account and shared
 directories

---
 docs/develop/account-web-sign-in-migration.md | 76 +++++++++++++------
 spx-gui/{sign-in/index.html => account.html}  |  2 +-
 spx-gui/package.json                          |  4 +-
 spx-gui/src/apis/account-oauth.ts             | 48 +++++++-----
 .../account.ts => apis/account-session.ts}    | 44 ++++++-----
 .../src/{account-web => apps/account}/App.vue |  0
 .../src/{account-web => apps/account}/main.ts | 13 ++++
 .../account}/pages/sign-in.vue                |  6 +-
 .../{account-web => apps/account}/router.ts   |  2 +-
 .../sign-in}/AccountSessionSection.vue        |  4 +-
 .../sign-in}/InputWithIcon.vue                |  0
 .../sign-in}/LoginButton.vue                  |  0
 .../sign-in}/LoginForm.vue                    | 10 +--
 .../sign-in}/LoginOptionsSection.vue          |  4 +-
 .../PasswordLoginSection.vue                  | 12 +--
 .../sign-in/PasswordLoginSection}/eye-off.svg |  0
 .../sign-in/PasswordLoginSection}/eye.svg     |  0
 .../sign-in/PasswordLoginSection}/lock.svg    |  0
 .../sign-in/PasswordLoginSection}/user.svg    |  0
 .../ProviderLoginButton.vue                   | 24 +++---
 .../ProviderLoginButton}/github-colorful.svg  |  0
 .../github-monochrome.svg                     |  0
 .../ProviderLoginButton}/google-colorful.svg  |  0
 .../google-monochrome.svg                     |  0
 .../ProviderLoginButton}/qq-colorful.svg      |  0
 .../ProviderLoginButton}/qq-monochrome.svg    |  0
 .../ProviderLoginButton}/wechat-colorful.svg  |  0
 .../wechat-monochrome.svg                     |  0
 .../ProviderLoginButton}/x-colorful.svg       |  0
 .../ProviderLoginButton}/x-monochrome.svg     |  0
 .../sign-in}/UsernamePasswordLink.vue         |  0
 .../XBuilderLoginPageMobile.vue               | 10 +--
 .../XBuilderLoginPageMobile}/bg-mobile.svg    |  0
 .../illustration-mobile.svg                   |  0
 .../XBuilderLoginPagePc.vue                   | 10 +--
 .../sign-in/XBuilderLoginPagePc}/bg.svg       |  0
 .../XBuilderLoginPagePc}/illustration.svg     |  0
 .../sign-in}/assets/logo.svg                  |  0
 .../account/sign-in.test.ts}                  |  4 +-
 .../oauth.ts => utils/account/sign-in.ts}     | 11 +++
 spx-gui/vite.config.account-web.ts            | 36 ++++++---
 41 files changed, 206 insertions(+), 114 deletions(-)
 rename spx-gui/{sign-in/index.html => account.html} (87%)
 rename spx-gui/src/{account-web/apis/account.ts => apis/account-session.ts} (77%)
 rename spx-gui/src/{account-web => apps/account}/App.vue (100%)
 rename spx-gui/src/{account-web => apps/account}/main.ts (60%)
 rename spx-gui/src/{account-web => apps/account}/pages/sign-in.vue (75%)
 rename spx-gui/src/{account-web => apps/account}/router.ts (88%)
 rename spx-gui/src/{account-web/components/login => components/sign-in}/AccountSessionSection.vue (91%)
 rename spx-gui/src/{account-web/components/login => components/sign-in}/InputWithIcon.vue (100%)
 rename spx-gui/src/{account-web/components/login => components/sign-in}/LoginButton.vue (100%)
 rename spx-gui/src/{account-web/components/login => components/sign-in}/LoginForm.vue (95%)
 rename spx-gui/src/{account-web/components/login => components/sign-in}/LoginOptionsSection.vue (83%)
 rename spx-gui/src/{account-web/components/login => components/sign-in/PasswordLoginSection}/PasswordLoginSection.vue (90%)
 rename spx-gui/src/{account-web/assets/icons => components/sign-in/PasswordLoginSection}/eye-off.svg (100%)
 rename spx-gui/src/{account-web/assets/icons => components/sign-in/PasswordLoginSection}/eye.svg (100%)
 rename spx-gui/src/{account-web/assets/icons => components/sign-in/PasswordLoginSection}/lock.svg (100%)
 rename spx-gui/src/{account-web/assets/icons => components/sign-in/PasswordLoginSection}/user.svg (100%)
 rename spx-gui/src/{account-web/components/login => components/sign-in/ProviderLoginButton}/ProviderLoginButton.vue (62%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/github-colorful.svg (100%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/github-monochrome.svg (100%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/google-colorful.svg (100%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/google-monochrome.svg (100%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/qq-colorful.svg (100%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/qq-monochrome.svg (100%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/wechat-colorful.svg (100%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/wechat-monochrome.svg (100%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/x-colorful.svg (100%)
 rename spx-gui/src/{account-web/assets/providers => components/sign-in/ProviderLoginButton}/x-monochrome.svg (100%)
 rename spx-gui/src/{account-web/components/login => components/sign-in}/UsernamePasswordLink.vue (100%)
 rename spx-gui/src/{account-web/components/login => components/sign-in/XBuilderLoginPageMobile}/XBuilderLoginPageMobile.vue (76%)
 rename spx-gui/src/{account-web/assets => components/sign-in/XBuilderLoginPageMobile}/bg-mobile.svg (100%)
 rename spx-gui/src/{account-web/assets => components/sign-in/XBuilderLoginPageMobile}/illustration-mobile.svg (100%)
 rename spx-gui/src/{account-web/components/login => components/sign-in/XBuilderLoginPagePc}/XBuilderLoginPagePc.vue (82%)
 rename spx-gui/src/{account-web/assets => components/sign-in/XBuilderLoginPagePc}/bg.svg (100%)
 rename spx-gui/src/{account-web/assets => components/sign-in/XBuilderLoginPagePc}/illustration.svg (100%)
 rename spx-gui/src/{account-web => components/sign-in}/assets/logo.svg (100%)
 rename spx-gui/src/{account-web/utils/oauth.test.ts => utils/account/sign-in.test.ts} (95%)
 rename spx-gui/src/{account-web/utils/oauth.ts => utils/account/sign-in.ts} (85%)

diff --git a/docs/develop/account-web-sign-in-migration.md b/docs/develop/account-web-sign-in-migration.md
index a853bf7dec..8cb63f4da6 100644
--- a/docs/develop/account-web-sign-in-migration.md
+++ b/docs/develop/account-web-sign-in-migration.md
@@ -145,52 +145,82 @@ sequenceDiagram
 当前实现已经把 `Account Web` 作为 `spx-gui` 内的独立入口落地，而不是继续依赖 Casdoor 项目。
 
 ```text
-spx-gui/src/account-web/
-├── main.ts
-├── App.vue
-├── pages/
-│   └── sign-in.vue
+spx-gui/src/
+├── apps/
+│   └── account/
+│       ├── main.ts
+│       ├── App.vue
+│       ├── router.ts
+│       └── pages/
+│           └── sign-in.vue
 ├── apis/
-│   └── account.ts
+│   └── account-session.ts
 ├── utils/
-│   └── oauth.ts
+│   └── account/
+│       └── sign-in.ts
 └── components/
-    └── login/
+    └── sign-in/
+        ├── assets/
+        │   └── logo.svg
         ├── AccountSessionSection.vue
         ├── InputWithIcon.vue
         ├── LoginButton.vue
         ├── LoginForm.vue
         ├── LoginOptionsSection.vue
-        ├── PasswordLoginSection.vue
-        ├── ProviderLoginButton.vue
         ├── UsernamePasswordLink.vue
-        ├── XBuilderLoginPageMobile.vue
-        └── XBuilderLoginPagePc.vue
+        ├── PasswordLoginSection/
+        │   ├── PasswordLoginSection.vue
+        │   ├── eye.svg
+        │   ├── eye-off.svg
+        │   ├── lock.svg
+        │   └── user.svg
+        ├── ProviderLoginButton/
+        │   ├── ProviderLoginButton.vue
+        │   ├── github-colorful.svg
+        │   ├── github-monochrome.svg
+        │   ├── google-colorful.svg
+        │   ├── google-monochrome.svg
+        │   ├── qq-colorful.svg
+        │   ├── qq-monochrome.svg
+        │   ├── wechat-colorful.svg
+        │   ├── wechat-monochrome.svg
+        │   ├── x-colorful.svg
+        │   └── x-monochrome.svg
+        ├── XBuilderLoginPagePc/
+        │   ├── XBuilderLoginPagePc.vue
+        │   ├── bg.svg
+        │   └── illustration.svg
+        └── XBuilderLoginPageMobile/
+            ├── XBuilderLoginPageMobile.vue
+            ├── bg-mobile.svg
+            └── illustration-mobile.svg
 ```
 
 ### 1.5 当前实现涉及的文件
 
 #### 已新增
 
-- `spx-gui/sign-in/index.html`
-  - `Account Web` 独立 HTML 入口
-- `spx-gui/src/account-web/main.ts`
+- `spx-gui/account.html`
+  - `Account Web` 独立 HTML 入口（与 `index.html` 平级）
+- `spx-gui/src/apps/account/main.ts`
   - `Account Web` 独立入口
-- `spx-gui/src/account-web/App.vue`
+- `spx-gui/src/apps/account/App.vue`
   - `Account Web` 根组件
-- `spx-gui/src/account-web/pages/sign-in.vue`
+- `spx-gui/src/apps/account/router.ts`
+  - `Account Web` 路由
+- `spx-gui/src/apps/account/pages/sign-in.vue`
   - 登录页，承载状态机
-- `spx-gui/src/account-web/apis/account.ts`
+- `spx-gui/src/apis/account-session.ts`
   - 封装 `GET/DELETE /account/session`、`GET /account/identity-providers`、`POST /account/session`
-- `spx-gui/src/account-web/utils/oauth.ts`
+- `spx-gui/src/utils/account/sign-in.ts`
   - 解析 `client_id`、`request_uri`，拼接同源 `/api/oauth/authorize` 和 provider authorize URL，并维护 pending authorization 标记
-- `spx-gui/src/account-web/components/login/AccountSessionSection.vue`
+- `spx-gui/src/components/sign-in/AccountSessionSection.vue`
   - 展示当前账号、继续登录、切换账号
-- `spx-gui/src/account-web/components/login/LoginOptionsSection.vue`
+- `spx-gui/src/components/sign-in/LoginOptionsSection.vue`
   - provider 按钮列表和用户名密码入口
-- `spx-gui/src/account-web/components/login/PasswordLoginSection.vue`
+- `spx-gui/src/components/sign-in/PasswordLoginSection/PasswordLoginSection.vue`
   - 用户名密码登录表单
-- `spx-gui/src/account-web/components/login/LoginForm.vue`
+- `spx-gui/src/components/sign-in/LoginForm.vue`
   - 登录页状态机与 API 调用编排
 - `spx-gui/vite.config.account-web.ts`
   - `Account Web` 独立构建配置、同源 `/api` 代理和 Vercel rewrite
diff --git a/spx-gui/sign-in/index.html b/spx-gui/account.html
similarity index 87%
rename from spx-gui/sign-in/index.html
rename to spx-gui/account.html
index 33db88a7ca..14a11f855e 100644
--- a/spx-gui/sign-in/index.html
+++ b/spx-gui/account.html
@@ -18,7 +18,7 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="../src/account-web/main.ts"></script>
+    <script type="module" src="./src/apps/account/main.ts"></script>
   </body>
 </html>
 
diff --git a/spx-gui/package.json b/spx-gui/package.json
index fe99be8625..324ec43528 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -9,8 +9,8 @@
     "dev": "vite",
     "build": "./build-tutorial-books.sh && vue-tsc --build --force && NODE_ENV=production vite build --mode ${NODE_ENV:-production}",
     "preview": "vite preview",
-    "dev:account-web": "vite --config vite.config.account-web.ts --port 5174",
-    "build:account-web": "vue-tsc --build --force && NODE_ENV=production vite build --config vite.config.account-web.ts --mode ${NODE_ENV:-production}",
+    "dev:account": "vite --config vite.config.account-web.ts --port 5174",
+    "build:account": "vue-tsc --build --force && NODE_ENV=production vite build --config vite.config.account-web.ts --mode ${NODE_ENV:-production}",
     "type-check": "vue-tsc --build --force",
     "format-check": "prettier --check ./src",
     "format": "prettier --write ./src",
diff --git a/spx-gui/src/apis/account-oauth.ts b/spx-gui/src/apis/account-oauth.ts
index 05322c686a..c7cfad6bc3 100644
--- a/spx-gui/src/apis/account-oauth.ts
+++ b/spx-gui/src/apis/account-oauth.ts
@@ -1,30 +1,27 @@
+/**
+ * API client for the main xbuilder.com OAuth flow.
+ *
+ * These are used by the main site's sign-in flow (stores/user/signed-in.ts
+ * and pages/sign-in/callback.vue) to interact with the Account OAuth
+ * endpoints — pushed authorization request (PAR), authorization code
+ * exchange, token refresh, and token revocation.
+ *
+ * This file is for the main site's OAuth client. For the Account Web
+ * sign-in page session API, see account-session.ts.
+ */
+
 import { Client } from '@/apis/common/client'
 import { accountOAuthClientId, apiBaseUrl } from '@/utils/env'
 
 const client = new Client()
 
-export interface PushedAuthorizationRequestResponse {
-  request_uri: string
-  expires_in?: number | null
-}
-
-export interface AccountOAuthTokenResponse {
-  access_token: string
-  expires_in: number
-  refresh_token?: string | null
-  token_type?: string
-  scope?: string
-}
-
 function getAccountOAuthRedirectUri() {
   return `${window.location.origin}/sign-in/callback`
 }
 
-export function getAccountOAuthAuthorizeUrl(requestUri: string) {
-  const url = new URL('/account/oauth/authorize', new URL(apiBaseUrl, window.location.origin))
-  url.searchParams.set('client_id', accountOAuthClientId)
-  url.searchParams.set('request_uri', requestUri)
-  return url.toString()
+export interface PushedAuthorizationRequestResponse {
+  request_uri: string
+  expires_in?: number | null
 }
 
 export function createPushedAuthorizationRequest(params: { state: string; codeChallenge: string }) {
@@ -39,6 +36,21 @@ export function createPushedAuthorizationRequest(params: { state: string; codeCh
   }) as Promise<PushedAuthorizationRequestResponse>
 }
 
+export function getAccountOAuthAuthorizeUrl(requestUri: string) {
+  const url = new URL('/account/oauth/authorize', new URL(apiBaseUrl, window.location.origin))
+  url.searchParams.set('client_id', accountOAuthClientId)
+  url.searchParams.set('request_uri', requestUri)
+  return url.toString()
+}
+
+export interface AccountOAuthTokenResponse {
+  access_token: string
+  expires_in: number
+  refresh_token?: string | null
+  token_type?: string
+  scope?: string
+}
+
 export function exchangeAuthorizationCode(code: string, codeVerifier: string) {
   return client.postForm('/account/oauth/token', {
     grant_type: 'authorization_code',
diff --git a/spx-gui/src/account-web/apis/account.ts b/spx-gui/src/apis/account-session.ts
similarity index 77%
rename from spx-gui/src/account-web/apis/account.ts
rename to spx-gui/src/apis/account-session.ts
index e3a71acea6..0a743d8242 100644
--- a/spx-gui/src/account-web/apis/account.ts
+++ b/spx-gui/src/apis/account-session.ts
@@ -1,6 +1,20 @@
+/**
+ * API client for Account Web sign-in page session management.
+ *
+ * These are used by the sign-in page (apps/account/) to interact with
+ * the Account API for session operations — checking current session,
+ * signing in with password, listing identity providers, and clearing
+ * the session on account switch.
+ *
+ * This file is specific to the Account Web sign-in flow and is not used by
+ * the main xbuilder.com OAuth client logic (see account-oauth.ts for that).
+ */
+
 import { Client } from '@/apis/common/client'
 import { ApiException, ApiExceptionCode } from '@/apis/common/exception'
-import type { OAuthContext } from '../utils/oauth'
+import type { OAuthContext } from '@/utils/account/sign-in'
+
+const client = new Client({ baseUrl: '/api' })
 
 export interface AccountUser {
   id: string
@@ -23,22 +37,6 @@ export interface CurrentAccountSession {
   ipAddress?: string | null
 }
 
-export interface IdentityProvider {
-  name: string
-  displayName: string
-  enabled: boolean
-}
-
-interface IdentityProviderListResponse {
-  data: IdentityProvider[]
-}
-
-function filterEnabledIdentityProviders(providers: IdentityProvider[]): IdentityProvider[] {
-  return providers.filter((provider) => provider.enabled)
-}
-
-const client = new Client({ baseUrl: '/api' })
-
 function isUnauthorizedError(error: unknown) {
   return (
     (error instanceof ApiException && error.code === ApiExceptionCode.errorUnauthorized) ||
@@ -59,6 +57,16 @@ export async function deleteCurrentAccountSession(): Promise<void> {
   await client.delete('/session')
 }
 
+export interface IdentityProvider {
+  name: string
+  displayName: string
+  enabled: boolean
+}
+
+interface IdentityProviderListResponse {
+  data: IdentityProvider[]
+}
+
 export async function getIdentityProviders(context?: OAuthContext): Promise<IdentityProvider[]> {
   const response = (await client.get(
     '/identity-providers',
@@ -69,7 +77,7 @@ export async function getIdentityProviders(context?: OAuthContext): Promise<Iden
           requestURI: context.requestUri
         }
   )) as IdentityProviderListResponse
-  return filterEnabledIdentityProviders(response.data)
+  return response.data.filter((provider) => provider.enabled)
 }
 
 export interface PasswordSignInPayload {
diff --git a/spx-gui/src/account-web/App.vue b/spx-gui/src/apps/account/App.vue
similarity index 100%
rename from spx-gui/src/account-web/App.vue
rename to spx-gui/src/apps/account/App.vue
diff --git a/spx-gui/src/account-web/main.ts b/spx-gui/src/apps/account/main.ts
similarity index 60%
rename from spx-gui/src/account-web/main.ts
rename to spx-gui/src/apps/account/main.ts
index 390846298e..51e90a8f16 100644
--- a/spx-gui/src/account-web/main.ts
+++ b/spx-gui/src/apps/account/main.ts
@@ -2,6 +2,11 @@ import '@/polyfills'
 import '@/app.css'
 
 import { createApp, watchEffect } from 'vue'
+import dayjs from 'dayjs'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
 
 import { createI18n, normalizeLang } from '@/utils/i18n'
 import { defaultLang } from '@/utils/env'
@@ -9,6 +14,14 @@ import { defaultLang } from '@/utils/env'
 import App from './App.vue'
 import router from './router'
 
+function initDayjs() {
+  dayjs.extend(localizedFormat)
+  dayjs.extend(relativeTime)
+  dayjs.extend(utc)
+  dayjs.extend(timezone)
+}
+initDayjs()
+
 const langLocalStorageKey = 'spx-gui-language'
 const lang = normalizeLang(localStorage.getItem(langLocalStorageKey) ?? defaultLang)
 const i18n = createI18n({ lang })
diff --git a/spx-gui/src/account-web/pages/sign-in.vue b/spx-gui/src/apps/account/pages/sign-in.vue
similarity index 75%
rename from spx-gui/src/account-web/pages/sign-in.vue
rename to spx-gui/src/apps/account/pages/sign-in.vue
index 5bc320a3de..645cd4cdeb 100644
--- a/spx-gui/src/account-web/pages/sign-in.vue
+++ b/spx-gui/src/apps/account/pages/sign-in.vue
@@ -18,10 +18,10 @@
 import { UIError } from '@/components/ui'
 import { usePageTitle } from '@/utils/utils'
 import { isMobile } from '@/utils/ua'
-import { parseOAuthContext } from '@/account-web/utils/oauth'
+import { parseOAuthContext } from '@/utils/account/sign-in'
 
-import XBuilderLoginPageMobile from '@/account-web/components/login/XBuilderLoginPageMobile.vue'
-import XBuilderLoginPagePc from '@/account-web/components/login/XBuilderLoginPagePc.vue'
+import XBuilderLoginPageMobile from '@/components/sign-in/XBuilderLoginPageMobile/XBuilderLoginPageMobile.vue'
+import XBuilderLoginPagePc from '@/components/sign-in/XBuilderLoginPagePc/XBuilderLoginPagePc.vue'
 
 const mobile = isMobile()
 const authContext = parseOAuthContext()
diff --git a/spx-gui/src/account-web/router.ts b/spx-gui/src/apps/account/router.ts
similarity index 88%
rename from spx-gui/src/account-web/router.ts
rename to spx-gui/src/apps/account/router.ts
index 62cf4269e7..422f51e54d 100644
--- a/spx-gui/src/account-web/router.ts
+++ b/spx-gui/src/apps/account/router.ts
@@ -11,7 +11,7 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: accountWebRoutePaths.signIn,
-    component: () => import('@/account-web/pages/sign-in.vue')
+    component: () => import('@/apps/account/pages/sign-in.vue')
   },
   {
     path: '/:pathMatch(.*)*',
diff --git a/spx-gui/src/account-web/components/login/AccountSessionSection.vue b/spx-gui/src/components/sign-in/AccountSessionSection.vue
similarity index 91%
rename from spx-gui/src/account-web/components/login/AccountSessionSection.vue
rename to spx-gui/src/components/sign-in/AccountSessionSection.vue
index e3fd931e8b..6345f13d0e 100644
--- a/spx-gui/src/account-web/components/login/AccountSessionSection.vue
+++ b/spx-gui/src/components/sign-in/AccountSessionSection.vue
@@ -28,8 +28,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type { CurrentAccountSession } from '@/account-web/apis/account'
-import LoginButton from '@/account-web/components/login/LoginButton.vue'
+import type { CurrentAccountSession } from '@/apis/account-session'
+import LoginButton from './LoginButton.vue'
 import { useAvatarUrl } from '@/stores/user/avatar'
 
 const props = defineProps<{
diff --git a/spx-gui/src/account-web/components/login/InputWithIcon.vue b/spx-gui/src/components/sign-in/InputWithIcon.vue
similarity index 100%
rename from spx-gui/src/account-web/components/login/InputWithIcon.vue
rename to spx-gui/src/components/sign-in/InputWithIcon.vue
diff --git a/spx-gui/src/account-web/components/login/LoginButton.vue b/spx-gui/src/components/sign-in/LoginButton.vue
similarity index 100%
rename from spx-gui/src/account-web/components/login/LoginButton.vue
rename to spx-gui/src/components/sign-in/LoginButton.vue
diff --git a/spx-gui/src/account-web/components/login/LoginForm.vue b/spx-gui/src/components/sign-in/LoginForm.vue
similarity index 95%
rename from spx-gui/src/account-web/components/login/LoginForm.vue
rename to spx-gui/src/components/sign-in/LoginForm.vue
index 689e7a8170..648bf4a74c 100644
--- a/spx-gui/src/account-web/components/login/LoginForm.vue
+++ b/spx-gui/src/components/sign-in/LoginForm.vue
@@ -54,8 +54,8 @@ import {
   getCurrentAccountSession,
   getIdentityProviders,
   type PasswordSignInPayload
-} from '@/account-web/apis/account'
-import type { CurrentAccountSession, IdentityProvider } from '@/account-web/apis/account'
+} from '@/apis/account-session'
+import type { CurrentAccountSession, IdentityProvider } from '@/apis/account-session'
 import {
   buildIdentityProviderAuthorizeUrl,
   buildOAuthAuthorizeUrl,
@@ -63,12 +63,12 @@ import {
   getOAuthError,
   hasPendingAuthorization,
   markPendingAuthorization
-} from '@/account-web/utils/oauth'
-import type { OAuthContext } from '@/account-web/utils/oauth'
+} from '@/utils/account/sign-in'
+import type { OAuthContext } from '@/utils/account/sign-in'
 
 import AccountSessionSection from './AccountSessionSection.vue'
 import LoginOptionsSection from './LoginOptionsSection.vue'
-import PasswordLoginSection from './PasswordLoginSection.vue'
+import PasswordLoginSection from './PasswordLoginSection/PasswordLoginSection.vue'
 
 const props = defineProps<{
   authContext: OAuthContext
diff --git a/spx-gui/src/account-web/components/login/LoginOptionsSection.vue b/spx-gui/src/components/sign-in/LoginOptionsSection.vue
similarity index 83%
rename from spx-gui/src/account-web/components/login/LoginOptionsSection.vue
rename to spx-gui/src/components/sign-in/LoginOptionsSection.vue
index 7781e2060f..f3cbe96b8b 100644
--- a/spx-gui/src/account-web/components/login/LoginOptionsSection.vue
+++ b/spx-gui/src/components/sign-in/LoginOptionsSection.vue
@@ -13,9 +13,9 @@
 </template>
 
 <script setup lang="ts">
-import type { IdentityProvider } from '@/account-web/apis/account'
+import type { IdentityProvider } from '@/apis/account-session'
 
-import ProviderLoginButton from './ProviderLoginButton.vue'
+import ProviderLoginButton from './ProviderLoginButton/ProviderLoginButton.vue'
 import UsernamePasswordLink from './UsernamePasswordLink.vue'
 
 withDefaults(
diff --git a/spx-gui/src/account-web/components/login/PasswordLoginSection.vue b/spx-gui/src/components/sign-in/PasswordLoginSection/PasswordLoginSection.vue
similarity index 90%
rename from spx-gui/src/account-web/components/login/PasswordLoginSection.vue
rename to spx-gui/src/components/sign-in/PasswordLoginSection/PasswordLoginSection.vue
index 653fd1c356..1502895ee0 100644
--- a/spx-gui/src/account-web/components/login/PasswordLoginSection.vue
+++ b/spx-gui/src/components/sign-in/PasswordLoginSection/PasswordLoginSection.vue
@@ -30,14 +30,14 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import eyeIconUrl from '@/account-web/assets/icons/eye.svg'
-import eyeOffIconUrl from '@/account-web/assets/icons/eye-off.svg'
-import lockIconUrl from '@/account-web/assets/icons/lock.svg'
-import userIconUrl from '@/account-web/assets/icons/user.svg'
-import type { PasswordSignInPayload } from '@/account-web/apis/account'
+import eyeIconUrl from './eye.svg'
+import eyeOffIconUrl from './eye-off.svg'
+import lockIconUrl from './lock.svg'
+import userIconUrl from './user.svg'
+import type { PasswordSignInPayload } from '@/apis/account-session'
 import { useI18n } from '@/utils/i18n'
 
-import InputWithIcon from './InputWithIcon.vue'
+import InputWithIcon from '../InputWithIcon.vue'
 
 const props = defineProps<{
   submit: (payload: PasswordSignInPayload) => Promise<void>
diff --git a/spx-gui/src/account-web/assets/icons/eye-off.svg b/spx-gui/src/components/sign-in/PasswordLoginSection/eye-off.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/icons/eye-off.svg
rename to spx-gui/src/components/sign-in/PasswordLoginSection/eye-off.svg
diff --git a/spx-gui/src/account-web/assets/icons/eye.svg b/spx-gui/src/components/sign-in/PasswordLoginSection/eye.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/icons/eye.svg
rename to spx-gui/src/components/sign-in/PasswordLoginSection/eye.svg
diff --git a/spx-gui/src/account-web/assets/icons/lock.svg b/spx-gui/src/components/sign-in/PasswordLoginSection/lock.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/icons/lock.svg
rename to spx-gui/src/components/sign-in/PasswordLoginSection/lock.svg
diff --git a/spx-gui/src/account-web/assets/icons/user.svg b/spx-gui/src/components/sign-in/PasswordLoginSection/user.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/icons/user.svg
rename to spx-gui/src/components/sign-in/PasswordLoginSection/user.svg
diff --git a/spx-gui/src/account-web/components/login/ProviderLoginButton.vue b/spx-gui/src/components/sign-in/ProviderLoginButton/ProviderLoginButton.vue
similarity index 62%
rename from spx-gui/src/account-web/components/login/ProviderLoginButton.vue
rename to spx-gui/src/components/sign-in/ProviderLoginButton/ProviderLoginButton.vue
index 86bb7d0770..2e374ecb8a 100644
--- a/spx-gui/src/account-web/components/login/ProviderLoginButton.vue
+++ b/spx-gui/src/components/sign-in/ProviderLoginButton/ProviderLoginButton.vue
@@ -7,18 +7,18 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from '@/utils/i18n'
-import type { IdentityProvider } from '@/account-web/apis/account'
-import googleProviderLogoColorful from '@/account-web/assets/providers/google-colorful.svg'
-import googleProviderMonochromeLogo from '@/account-web/assets/providers/google-monochrome.svg'
-import githubProviderLogoColorful from '@/account-web/assets/providers/github-colorful.svg'
-import githubProviderMonochromeLogo from '@/account-web/assets/providers/github-monochrome.svg'
-import xProviderLogoColorful from '@/account-web/assets/providers/x-colorful.svg'
-import xProviderMonochromeLogo from '@/account-web/assets/providers/x-monochrome.svg'
-import qqProviderLogoColorful from '@/account-web/assets/providers/qq-colorful.svg'
-import qqProviderMonochromeLogo from '@/account-web/assets/providers/qq-monochrome.svg'
-import wechatProviderLogoColorful from '@/account-web/assets/providers/wechat-colorful.svg'
-import wechatProviderMonochromeLogo from '@/account-web/assets/providers/wechat-monochrome.svg'
-import LoginButton from './LoginButton.vue'
+import type { IdentityProvider } from '@/apis/account-session'
+import googleProviderLogoColorful from './google-colorful.svg'
+import googleProviderMonochromeLogo from './google-monochrome.svg'
+import githubProviderLogoColorful from './github-colorful.svg'
+import githubProviderMonochromeLogo from './github-monochrome.svg'
+import xProviderLogoColorful from './x-colorful.svg'
+import xProviderMonochromeLogo from './x-monochrome.svg'
+import qqProviderLogoColorful from './qq-colorful.svg'
+import qqProviderMonochromeLogo from './qq-monochrome.svg'
+import wechatProviderLogoColorful from './wechat-colorful.svg'
+import wechatProviderMonochromeLogo from './wechat-monochrome.svg'
+import LoginButton from '../LoginButton.vue'
 
 const props = withDefaults(
   defineProps<{
diff --git a/spx-gui/src/account-web/assets/providers/github-colorful.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/github-colorful.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/github-colorful.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/github-colorful.svg
diff --git a/spx-gui/src/account-web/assets/providers/github-monochrome.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/github-monochrome.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/github-monochrome.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/github-monochrome.svg
diff --git a/spx-gui/src/account-web/assets/providers/google-colorful.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/google-colorful.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/google-colorful.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/google-colorful.svg
diff --git a/spx-gui/src/account-web/assets/providers/google-monochrome.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/google-monochrome.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/google-monochrome.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/google-monochrome.svg
diff --git a/spx-gui/src/account-web/assets/providers/qq-colorful.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/qq-colorful.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/qq-colorful.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/qq-colorful.svg
diff --git a/spx-gui/src/account-web/assets/providers/qq-monochrome.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/qq-monochrome.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/qq-monochrome.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/qq-monochrome.svg
diff --git a/spx-gui/src/account-web/assets/providers/wechat-colorful.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/wechat-colorful.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/wechat-colorful.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/wechat-colorful.svg
diff --git a/spx-gui/src/account-web/assets/providers/wechat-monochrome.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/wechat-monochrome.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/wechat-monochrome.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/wechat-monochrome.svg
diff --git a/spx-gui/src/account-web/assets/providers/x-colorful.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/x-colorful.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/x-colorful.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/x-colorful.svg
diff --git a/spx-gui/src/account-web/assets/providers/x-monochrome.svg b/spx-gui/src/components/sign-in/ProviderLoginButton/x-monochrome.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/providers/x-monochrome.svg
rename to spx-gui/src/components/sign-in/ProviderLoginButton/x-monochrome.svg
diff --git a/spx-gui/src/account-web/components/login/UsernamePasswordLink.vue b/spx-gui/src/components/sign-in/UsernamePasswordLink.vue
similarity index 100%
rename from spx-gui/src/account-web/components/login/UsernamePasswordLink.vue
rename to spx-gui/src/components/sign-in/UsernamePasswordLink.vue
diff --git a/spx-gui/src/account-web/components/login/XBuilderLoginPageMobile.vue b/spx-gui/src/components/sign-in/XBuilderLoginPageMobile/XBuilderLoginPageMobile.vue
similarity index 76%
rename from spx-gui/src/account-web/components/login/XBuilderLoginPageMobile.vue
rename to spx-gui/src/components/sign-in/XBuilderLoginPageMobile/XBuilderLoginPageMobile.vue
index ddbef5a0f6..a303c4ca09 100644
--- a/spx-gui/src/account-web/components/login/XBuilderLoginPageMobile.vue
+++ b/spx-gui/src/components/sign-in/XBuilderLoginPageMobile/XBuilderLoginPageMobile.vue
@@ -11,9 +11,9 @@
 </template>
 
 <script setup lang="ts">
-import type { OAuthContext } from '@/account-web/utils/oauth'
-import logoUrl from '@/account-web/assets/logo.svg'
-import LoginForm from './LoginForm.vue'
+import type { OAuthContext } from '@/utils/account/sign-in'
+import logoUrl from '@/components/sign-in/assets/logo.svg'
+import LoginForm from '../LoginForm.vue'
 
 defineProps<{
   authContext: OAuthContext
@@ -25,7 +25,7 @@ defineProps<{
   width: 100%;
   min-height: 100vh;
   background-color: #eff3fd;
-  background-image: url('../../assets/bg-mobile.svg');
+  background-image: url('./bg-mobile.svg');
   background-position: center;
   background-size: 100%;
   background-repeat: no-repeat;
@@ -38,7 +38,7 @@ defineProps<{
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-image: url('../../assets/illustration-mobile.svg');
+  background-image: url('./illustration-mobile.svg');
   background-position: top;
   background-size: 100%;
   background-repeat: no-repeat;
diff --git a/spx-gui/src/account-web/assets/bg-mobile.svg b/spx-gui/src/components/sign-in/XBuilderLoginPageMobile/bg-mobile.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/bg-mobile.svg
rename to spx-gui/src/components/sign-in/XBuilderLoginPageMobile/bg-mobile.svg
diff --git a/spx-gui/src/account-web/assets/illustration-mobile.svg b/spx-gui/src/components/sign-in/XBuilderLoginPageMobile/illustration-mobile.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/illustration-mobile.svg
rename to spx-gui/src/components/sign-in/XBuilderLoginPageMobile/illustration-mobile.svg
diff --git a/spx-gui/src/account-web/components/login/XBuilderLoginPagePc.vue b/spx-gui/src/components/sign-in/XBuilderLoginPagePc/XBuilderLoginPagePc.vue
similarity index 82%
rename from spx-gui/src/account-web/components/login/XBuilderLoginPagePc.vue
rename to spx-gui/src/components/sign-in/XBuilderLoginPagePc/XBuilderLoginPagePc.vue
index 6a5fda6bc9..7182666f17 100644
--- a/spx-gui/src/account-web/components/login/XBuilderLoginPagePc.vue
+++ b/spx-gui/src/components/sign-in/XBuilderLoginPagePc/XBuilderLoginPagePc.vue
@@ -13,9 +13,9 @@
 </template>
 
 <script setup lang="ts">
-import type { OAuthContext } from '@/account-web/utils/oauth'
-import logoUrl from '@/account-web/assets/logo.svg'
-import LoginForm from './LoginForm.vue'
+import type { OAuthContext } from '@/utils/account/sign-in'
+import logoUrl from '@/components/sign-in/assets/logo.svg'
+import LoginForm from '../LoginForm.vue'
 
 defineProps<{
   authContext: OAuthContext
@@ -31,7 +31,7 @@ defineProps<{
   align-items: center;
   justify-content: center;
   background-color: #eff3fd;
-  background-image: url('../../assets/bg.svg');
+  background-image: url('./bg.svg');
   background-position: center;
   background-size: 100%;
   background-repeat: no-repeat;
@@ -43,7 +43,7 @@ defineProps<{
 }
 
 .illustration {
-  background-image: url('../../assets/illustration.svg');
+  background-image: url('./illustration.svg');
   background-position: center;
   background-size: 472px;
   background-repeat: no-repeat;
diff --git a/spx-gui/src/account-web/assets/bg.svg b/spx-gui/src/components/sign-in/XBuilderLoginPagePc/bg.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/bg.svg
rename to spx-gui/src/components/sign-in/XBuilderLoginPagePc/bg.svg
diff --git a/spx-gui/src/account-web/assets/illustration.svg b/spx-gui/src/components/sign-in/XBuilderLoginPagePc/illustration.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/illustration.svg
rename to spx-gui/src/components/sign-in/XBuilderLoginPagePc/illustration.svg
diff --git a/spx-gui/src/account-web/assets/logo.svg b/spx-gui/src/components/sign-in/assets/logo.svg
similarity index 100%
rename from spx-gui/src/account-web/assets/logo.svg
rename to spx-gui/src/components/sign-in/assets/logo.svg
diff --git a/spx-gui/src/account-web/utils/oauth.test.ts b/spx-gui/src/utils/account/sign-in.test.ts
similarity index 95%
rename from spx-gui/src/account-web/utils/oauth.test.ts
rename to spx-gui/src/utils/account/sign-in.test.ts
index e82f7f68eb..540268a02a 100644
--- a/spx-gui/src/account-web/utils/oauth.test.ts
+++ b/spx-gui/src/utils/account/sign-in.test.ts
@@ -8,9 +8,9 @@ import {
   markPendingAuthorization,
   parseOAuthContext,
   type OAuthContext
-} from './oauth'
+} from './sign-in'
 
-describe('account-web oauth utils', () => {
+describe('account-web sign-in utils', () => {
   const context: OAuthContext = {
     clientId: 'xbuilder',
     requestUri: 'urn:example:request:123'
diff --git a/spx-gui/src/account-web/utils/oauth.ts b/spx-gui/src/utils/account/sign-in.ts
similarity index 85%
rename from spx-gui/src/account-web/utils/oauth.ts
rename to spx-gui/src/utils/account/sign-in.ts
index dcb2d81836..6eb432788a 100644
--- a/spx-gui/src/account-web/utils/oauth.ts
+++ b/spx-gui/src/utils/account/sign-in.ts
@@ -1,3 +1,14 @@
+/**
+ * Utilities for the Account Web sign-in page.
+ *
+ * These are used by the sign-in page (apps/account/) to parse OAuth context
+ * from query parameters, build authorize URLs, and track pending
+ * authorization state in sessionStorage.
+ *
+ * This file is specific to the Account Web sign-in flow and is not used by
+ * the main xbuilder.com OAuth client logic.
+ */
+
 export interface OAuthContext {
   clientId: string
   requestUri: string
diff --git a/spx-gui/vite.config.account-web.ts b/spx-gui/vite.config.account-web.ts
index 38b5012399..1dba8f5c62 100644
--- a/spx-gui/vite.config.account-web.ts
+++ b/spx-gui/vite.config.account-web.ts
@@ -1,4 +1,5 @@
 import path from 'node:path'
+import fs from 'node:fs'
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
@@ -18,15 +19,31 @@ export default defineConfig(({ mode }) => {
   return {
     plugins: [
       {
-        name: 'account-web-dev-sign-in-path',
+        name: 'account-web-rename-output-html',
+        apply: 'build',
+        closeBundle() {
+          const from = resolve('dist/account.html')
+          const to = resolve('dist/index.html')
+          if (fs.existsSync(from)) fs.renameSync(from, to)
+        }
+      },
+      {
+        name: 'account-web-dev-spa-fallback',
         configureServer(server) {
-          server.middlewares.use((req, res, next) => {
+          server.middlewares.use((req, _res, next) => {
             if (req.url == null) return next()
-            const url = new URL(req.url, 'http://localhost')
-            if (url.pathname !== '/sign-in') return next()
-            res.statusCode = 302
-            res.setHeader('Location', `/sign-in/${url.search}`)
-            res.end()
+            const pathname = new URL(req.url, 'http://localhost').pathname
+            // Skip Vite internal requests
+            if (pathname.startsWith('/@')) return next()
+            // Skip requests for static assets (have file extensions)
+            if (pathname.includes('.')) return next()
+            // Skip API proxy requests
+            if (pathname.startsWith('/api/')) return next()
+            // Skip the entry HTML itself
+            if (pathname === '/account.html') return next()
+            // SPA fallback: serve account.html for unmatched HTML routes (e.g. /sign-in)
+            req.url = '/account.html'
+            next()
           })
         }
       },
@@ -68,7 +85,7 @@ export default defineConfig(({ mode }) => {
           },
           {
             source: '/(.*)',
-            destination: '/sign-in/index.html'
+            destination: '/index.html'
           }
         ]
       })
@@ -79,11 +96,12 @@ export default defineConfig(({ mode }) => {
         '@docs': resolve('../docs')
       }
     },
+    publicDir: false,
     build: {
       target: browserslistToEsbuild(),
       rolldownOptions: {
         input: {
-          'sign-in': resolve('sign-in/index.html')
+          'sign-in': resolve('account.html')
         },
         output: {
           entryFileNames: 'assets/[name]-[hash].js'

From dbfa93bd433e1c424a031b6e9ea57b00d75d1799 Mon Sep 17 00:00:00 2001
From: chennan <chennan@qiniu.com>
Date: Fri, 5 Jun 2026 14:38:26 +0800
Subject: [PATCH 4/6] move xbuilder entry into apps/xbuilder

---
 docs/develop/account-web-sign-in-migration.md | 112 +++++++++---------
 spx-gui/eslint.config.js                      |   2 +-
 spx-gui/index.html                            |   2 +-
 spx-gui/src/apps/account/main.ts              |   5 +
 spx-gui/src/{ => apps/xbuilder}/App.vue       |   2 +-
 spx-gui/src/apps/xbuilder/main.ts             |  12 ++
 .../{ => apps/xbuilder}/pages/404/error.png   | Bin
 .../{ => apps/xbuilder}/pages/404/index.vue   |   0
 .../xbuilder}/pages/community/explore.vue     |   0
 .../xbuilder}/pages/community/home.vue        |   2 +-
 .../xbuilder}/pages/community/index.vue       |   0
 .../xbuilder}/pages/community/project.vue     |   2 +-
 .../xbuilder}/pages/community/search.vue      |   0
 .../pages/community/user/followers.vue        |   0
 .../pages/community/user/following.vue        |   0
 .../xbuilder}/pages/community/user/index.vue  |   0
 .../xbuilder}/pages/community/user/likes.vue  |   0
 .../pages/community/user/overview.vue         |   2 +-
 .../pages/community/user/projects.vue         |   2 +-
 .../{ => apps/xbuilder}/pages/docs/api.vue    |   0
 .../xbuilder}/pages/docs/ui-design/index.vue  |   0
 .../pages/docs/ui-design/sample-backdrop.svg  |   0
 .../pages/docs/ui-design/sample-sprite.svg    |   0
 .../xbuilder}/pages/editor/index.vue          |   2 +-
 .../xbuilder}/pages/sign-in/callback.vue      |   0
 .../xbuilder}/pages/sign-in/token.vue         |   0
 .../pages/tutorials/course-series.vue         |   0
 .../pages/tutorials/course-start.vue          |   0
 .../xbuilder}/pages/tutorials/index.vue       |   0
 spx-gui/src/{ => apps/xbuilder}/router.ts     |  46 +++----
 .../components/community/CommunityNavbar.vue  |   4 +-
 .../components/community/MyProjectsEmpty.vue  |   2 +-
 .../community/project/RemixedFrom.vue         |   2 +-
 .../components/community/user/UserItem.vue    |   2 +-
 .../components/community/user/UserLink.vue    |   2 +-
 .../community/user/sidebar/UserSidebar.vue    |   2 +-
 spx-gui/src/components/copilot/CopilotUI.vue  |   2 +-
 .../components/editor/navbar/EditorNavbar.vue |   2 +-
 .../navbar/NavbarNewProjectItem.vue           |   2 +-
 .../src/components/navbar/NavbarProfile.vue   |   2 +-
 .../src/components/project/ProjectItem.vue    |   2 +-
 .../project/ProjectPublishedModal.vue         |   2 +-
 .../project/ProjectSharingLinkModal.vue       |   2 +-
 spx-gui/src/main.ts                           |  10 --
 spx-gui/src/setup.ts                          |   4 +-
 spx-gui/src/widgets/spx-runner/index.ts       |   2 +-
 spx-gui/src/widgets/xgo-code-editor/index.ts  |   2 +-
 47 files changed, 119 insertions(+), 118 deletions(-)
 rename spx-gui/src/{ => apps/xbuilder}/App.vue (97%)
 create mode 100644 spx-gui/src/apps/xbuilder/main.ts
 rename spx-gui/src/{ => apps/xbuilder}/pages/404/error.png (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/404/index.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/explore.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/home.vue (98%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/index.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/project.vue (99%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/search.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/user/followers.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/user/following.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/user/index.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/user/likes.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/user/overview.vue (98%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/community/user/projects.vue (98%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/docs/api.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/docs/ui-design/index.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/docs/ui-design/sample-backdrop.svg (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/docs/ui-design/sample-sprite.svg (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/editor/index.vue (99%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/sign-in/callback.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/sign-in/token.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/tutorials/course-series.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/tutorials/course-start.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/pages/tutorials/index.vue (100%)
 rename spx-gui/src/{ => apps/xbuilder}/router.ts (74%)
 delete mode 100644 spx-gui/src/main.ts

diff --git a/docs/develop/account-web-sign-in-migration.md b/docs/develop/account-web-sign-in-migration.md
index 8cb63f4da6..9ebb1c35ad 100644
--- a/docs/develop/account-web-sign-in-migration.md
+++ b/docs/develop/account-web-sign-in-migration.md
@@ -140,60 +140,54 @@ sequenceDiagram
     Browser->>App: Deliver code,state
 ```
 
-### 1.4 当前页面结构
+### 1.4 当前目录结构
 
-当前实现已经把 `Account Web` 作为 `spx-gui` 内的独立入口落地，而不是继续依赖 Casdoor 项目。
+实现完成后对新增文件做了目录整理，`Account Web` 和主站入口各自独立在 `apps/` 下。
 
 ```text
-spx-gui/src/
-├── apps/
-│   └── account/
-│       ├── main.ts
-│       ├── App.vue
-│       ├── router.ts
-│       └── pages/
-│           └── sign-in.vue
-├── apis/
-│   └── account-session.ts
-├── utils/
-│   └── account/
-│       └── sign-in.ts
-└── components/
-    └── sign-in/
-        ├── assets/
-        │   └── logo.svg
-        ├── AccountSessionSection.vue
-        ├── InputWithIcon.vue
-        ├── LoginButton.vue
-        ├── LoginForm.vue
-        ├── LoginOptionsSection.vue
-        ├── UsernamePasswordLink.vue
-        ├── PasswordLoginSection/
-        │   ├── PasswordLoginSection.vue
-        │   ├── eye.svg
-        │   ├── eye-off.svg
-        │   ├── lock.svg
-        │   └── user.svg
-        ├── ProviderLoginButton/
-        │   ├── ProviderLoginButton.vue
-        │   ├── github-colorful.svg
-        │   ├── github-monochrome.svg
-        │   ├── google-colorful.svg
-        │   ├── google-monochrome.svg
-        │   ├── qq-colorful.svg
-        │   ├── qq-monochrome.svg
-        │   ├── wechat-colorful.svg
-        │   ├── wechat-monochrome.svg
-        │   ├── x-colorful.svg
-        │   └── x-monochrome.svg
-        ├── XBuilderLoginPagePc/
-        │   ├── XBuilderLoginPagePc.vue
-        │   ├── bg.svg
-        │   └── illustration.svg
-        └── XBuilderLoginPageMobile/
-            ├── XBuilderLoginPageMobile.vue
-            ├── bg-mobile.svg
-            └── illustration-mobile.svg
+spx-gui/
+├── index.html                       # 主站 HTML 入口
+├── account.html                     # Account Web 独立 HTML 入口
+├── vite.config.ts                   # 主站构建配置
+├── vite.config.account-web.ts       # Account Web 构建配置
+└── src/
+    ├── apps/
+    │   ├── account/                 # Account Web 入口
+    │   │   ├── main.ts
+    │   │   ├── App.vue
+    │   │   ├── router.ts
+    │   │   └── pages/
+    │   │       └── sign-in.vue
+    │   └── xbuilder/                # 主站入口
+    │       ├── main.ts
+    │       ├── App.vue
+    │       ├── router.ts
+    │       └── pages/
+    │           ├── community/       # 首页 / 探索 / 搜索 / 用户 / 项目
+    │           ├── editor/
+    │           ├── tutorials/
+    │           ├── docs/
+    │           ├── 404/
+    │           └── sign-in/         # callback.vue / token.vue
+    ├── apis/
+    │   ├── account-session.ts       # Account Web 登录页 session API
+    │   └── account-oauth.ts         # 主站 OAuth 客户端
+    ├── utils/
+    │   └── account/
+    │       └── sign-in.ts           # Account Web 登录页工具
+    ├── components/
+    │   └── sign-in/                 # Account Web 登录页 UI 组件
+    │       ├── assets/logo.svg
+    │       ├── AccountSessionSection.vue
+    │       ├── LoginForm.vue
+    │       ├── LoginOptionsSection.vue
+    │       ├── PasswordLoginSection/
+    │       ├── ProviderLoginButton/
+    │       ├── XBuilderLoginPagePc/
+    │       └── XBuilderLoginPageMobile/
+    ├── stores/user/
+    │   └── signed-in.ts             # 主站 OAuth 登录态
+    └── setup.ts                     # 共享初始化（app 无关）
 ```
 
 ### 1.5 当前实现涉及的文件
@@ -233,9 +227,9 @@ spx-gui/src/
   - 封装 `POST /account/oauth/par`、`POST /account/oauth/token`、`POST /account/oauth/revoke`
 - `spx-gui/src/stores/user/signed-in.ts`
   - 主站切到新的 Account OAuth 流程
-- `spx-gui/src/pages/sign-in/callback.vue`
+- `spx-gui/src/apps/xbuilder/pages/sign-in/callback.vue`
   - callback 页改为处理 authorization code exchange
-- `spx-gui/src/router.ts`
+- `spx-gui/src/apps/xbuilder/router.ts`
   - `requiresSignIn` 场景改为走新的 `initiateSignIn()`
 
 ### 1.6 接口清单
@@ -327,7 +321,7 @@ sequenceDiagram
   - 增加 `refreshAccessToken()`：用 `refresh_token` 调 `POST /account/oauth/token`
   - 增加 `revokeTokens()`：调用 `POST /account/oauth/revoke`
 
-- `spx-gui/src/pages/sign-in/callback.vue`
+- `spx-gui/src/apps/xbuilder/pages/sign-in/callback.vue`
   - 从只做 Casdoor `exchangeForAccessToken()`
   - 改为：读取 `code/state` → 校验 state → 读取 PKCE verifier → 调 token exchange → 恢复 `returnTo`
 
@@ -339,11 +333,11 @@ sequenceDiagram
 
 #### 小范围联动
 
-- `spx-gui/src/router.ts`
+- `spx-gui/src/apps/xbuilder/router.ts`
   - 保留 `/sign-in/callback`
   - `requiresSignIn` 场景改为走新的 `initiateSignIn()`
 
-- `spx-gui/src/pages/sign-in/token.vue`
+- `spx-gui/src/apps/xbuilder/pages/sign-in/token.vue`
   - 当前是 JWT token 手动粘贴登录页
   - 若不再需要调试入口，可标记废弃或后续删除
 
@@ -351,6 +345,8 @@ sequenceDiagram
   - 已移除 `casdoor-js-sdk`
   - 已移除 `jwt-decode`
 
+> **目录调整**：实现完成后将主站入口（`main.ts`、`App.vue`、`router.ts`、`pages/`）移入 `src/apps/xbuilder/`，与 Account Web 的 `src/apps/account/` 平级。`setup.ts` 同步解耦了对 router 的硬依赖，改为由各 app 入口自行提供。详见 [1.4 当前目录结构](#14-当前目录结构)。
+
 ### 2.5 推荐实现拆分
 
 #### 2.5.1 发起登录
@@ -438,9 +434,9 @@ sequenceDiagram
 - [x] 用 `POST /account/oauth/token` 完成 code exchange
 - [x] 用 `POST /account/oauth/token` 完成 refresh token exchange
 - [x] 在 `/sign-in/callback` 页面接入新 callback 收尾逻辑
-- [x] 在 `router.ts` 中让 `requiresSignIn` 走新的 `initiateSignIn()`
+- [x] 在 `spx-gui/src/apps/xbuilder/router.ts` 中让 `requiresSignIn` 走新的 `initiateSignIn()`
 - [x] 更新 `env.ts`，移除 `VITE_CASDOOR_*`
-- [ ] 评估并处理 `src/pages/sign-in/token.vue`
+- [ ] 评估并处理 `src/apps/xbuilder/pages/sign-in/token.vue`
 - [x] 移除 `package.json` 中的 `casdoor-js-sdk`
 - [x] 移除 `package.json` 中的 `jwt-decode`
 
diff --git a/spx-gui/eslint.config.js b/spx-gui/eslint.config.js
index 2c03bae738..d75375001c 100644
--- a/spx-gui/eslint.config.js
+++ b/spx-gui/eslint.config.js
@@ -93,7 +93,7 @@ export default defineConfigWithVueTs(
 
   {
     name: 'app/pages-rules',
-    files: ['src/pages/**/*.vue'],
+    files: ['src/apps/xbuilder/pages/**/*.vue'],
     rules: {
       // Page components will not be used by name in other components' template.
       // Disable this rule to simplify naming of page components.
diff --git a/spx-gui/index.html b/spx-gui/index.html
index d4891fce97..d504597a60 100644
--- a/spx-gui/index.html
+++ b/spx-gui/index.html
@@ -34,6 +34,6 @@
 
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/apps/xbuilder/main.ts"></script>
   </body>
 </html>
diff --git a/spx-gui/src/apps/account/main.ts b/spx-gui/src/apps/account/main.ts
index 51e90a8f16..0848b9aa51 100644
--- a/spx-gui/src/apps/account/main.ts
+++ b/spx-gui/src/apps/account/main.ts
@@ -14,6 +14,11 @@ import { defaultLang } from '@/utils/env'
 import App from './App.vue'
 import router from './router'
 
+// TODO: Consider using @/setup's setup() and configureApp() for initialization
+// once we determine which parts of the shared bootstrap are needed.
+// Currently dayjs, i18n, and router are set up locally because Account Web
+// does not need VueKonva, Sentry, VueQuery, VueRadar, or other xbuilder plugins.
+
 function initDayjs() {
   dayjs.extend(localizedFormat)
   dayjs.extend(relativeTime)
diff --git a/spx-gui/src/App.vue b/spx-gui/src/apps/xbuilder/App.vue
similarity index 97%
rename from spx-gui/src/App.vue
rename to spx-gui/src/apps/xbuilder/App.vue
index 7fb441d4b8..2b598411f1 100644
--- a/spx-gui/src/App.vue
+++ b/spx-gui/src/apps/xbuilder/App.vue
@@ -30,7 +30,7 @@ import { SpotlightUI } from '@/utils/spotlight'
 import { useI18n } from '@/utils/i18n'
 import { useInstallRouteLoading } from '@/utils/route-loading'
 import { isMobile } from '@/utils/ua'
-import { getUIConfig } from './setup'
+import { getUIConfig } from '@/setup'
 
 const MobileReminder = defineAsyncComponent(() => import('@/components/app/device-check/MobileReminder.vue'))
 
diff --git a/spx-gui/src/apps/xbuilder/main.ts b/spx-gui/src/apps/xbuilder/main.ts
new file mode 100644
index 0000000000..26e7cce983
--- /dev/null
+++ b/spx-gui/src/apps/xbuilder/main.ts
@@ -0,0 +1,12 @@
+import '@/polyfills'
+import '@/app.css'
+import { createApp } from 'vue'
+import { setup, configureApp } from '@/setup'
+import { initRouter } from './router'
+import App from './App.vue'
+
+setup()
+const app = createApp(App)
+const router = initRouter(app)
+configureApp(app, router)
+app.mount('#app')
diff --git a/spx-gui/src/pages/404/error.png b/spx-gui/src/apps/xbuilder/pages/404/error.png
similarity index 100%
rename from spx-gui/src/pages/404/error.png
rename to spx-gui/src/apps/xbuilder/pages/404/error.png
diff --git a/spx-gui/src/pages/404/index.vue b/spx-gui/src/apps/xbuilder/pages/404/index.vue
similarity index 100%
rename from spx-gui/src/pages/404/index.vue
rename to spx-gui/src/apps/xbuilder/pages/404/index.vue
diff --git a/spx-gui/src/pages/community/explore.vue b/spx-gui/src/apps/xbuilder/pages/community/explore.vue
similarity index 100%
rename from spx-gui/src/pages/community/explore.vue
rename to spx-gui/src/apps/xbuilder/pages/community/explore.vue
diff --git a/spx-gui/src/pages/community/home.vue b/spx-gui/src/apps/xbuilder/pages/community/home.vue
similarity index 98%
rename from spx-gui/src/pages/community/home.vue
rename to spx-gui/src/apps/xbuilder/pages/community/home.vue
index e1229aa813..f8168c1d8f 100644
--- a/spx-gui/src/pages/community/home.vue
+++ b/spx-gui/src/apps/xbuilder/pages/community/home.vue
@@ -120,7 +120,7 @@ import { computed } from 'vue'
 import { useQuery } from '@/utils/query'
 import { usePageTitle } from '@/utils/utils'
 import { ExploreOrder, ProjectType, exploreProjects, listSignedInUserProjects } from '@/apis/project'
-import { getExploreRoute, getUserPageRoute } from '@/router'
+import { getExploreRoute, getUserPageRoute } from '../../router'
 import { isSignedIn, useSignedInUser } from '@/stores/user'
 import { useResponsive } from '@/components/ui'
 import ProjectsSection from '@/components/community/ProjectsSection.vue'
diff --git a/spx-gui/src/pages/community/index.vue b/spx-gui/src/apps/xbuilder/pages/community/index.vue
similarity index 100%
rename from spx-gui/src/pages/community/index.vue
rename to spx-gui/src/apps/xbuilder/pages/community/index.vue
diff --git a/spx-gui/src/pages/community/project.vue b/spx-gui/src/apps/xbuilder/pages/community/project.vue
similarity index 99%
rename from spx-gui/src/pages/community/project.vue
rename to spx-gui/src/apps/xbuilder/pages/community/project.vue
index a8ee069f7a..7774c0d810 100644
--- a/spx-gui/src/pages/community/project.vue
+++ b/spx-gui/src/apps/xbuilder/pages/community/project.vue
@@ -13,7 +13,7 @@ import { ProjectType, listProjects, recordProjectView, stringifyRemixSource, Vis
 import { listProjectReleases } from '@/apis/project-release'
 import { SpxProject, type CloudProject } from '@/models/spx/project'
 import { useSignedInUser, useUser, isSignedIn, initiateSignIn } from '@/stores/user'
-import { getOwnProjectEditorRoute, getProjectEditorRoute, getProjectPageRoute, getUserPageRoute } from '@/router'
+import { getOwnProjectEditorRoute, getProjectEditorRoute, getProjectPageRoute, getUserPageRoute } from '../../router'
 import {
   UIIcon,
   UILoading,
diff --git a/spx-gui/src/pages/community/search.vue b/spx-gui/src/apps/xbuilder/pages/community/search.vue
similarity index 100%
rename from spx-gui/src/pages/community/search.vue
rename to spx-gui/src/apps/xbuilder/pages/community/search.vue
diff --git a/spx-gui/src/pages/community/user/followers.vue b/spx-gui/src/apps/xbuilder/pages/community/user/followers.vue
similarity index 100%
rename from spx-gui/src/pages/community/user/followers.vue
rename to spx-gui/src/apps/xbuilder/pages/community/user/followers.vue
diff --git a/spx-gui/src/pages/community/user/following.vue b/spx-gui/src/apps/xbuilder/pages/community/user/following.vue
similarity index 100%
rename from spx-gui/src/pages/community/user/following.vue
rename to spx-gui/src/apps/xbuilder/pages/community/user/following.vue
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/apps/xbuilder/pages/community/user/index.vue
similarity index 100%
rename from spx-gui/src/pages/community/user/index.vue
rename to spx-gui/src/apps/xbuilder/pages/community/user/index.vue
diff --git a/spx-gui/src/pages/community/user/likes.vue b/spx-gui/src/apps/xbuilder/pages/community/user/likes.vue
similarity index 100%
rename from spx-gui/src/pages/community/user/likes.vue
rename to spx-gui/src/apps/xbuilder/pages/community/user/likes.vue
diff --git a/spx-gui/src/pages/community/user/overview.vue b/spx-gui/src/apps/xbuilder/pages/community/user/overview.vue
similarity index 98%
rename from spx-gui/src/pages/community/user/overview.vue
rename to spx-gui/src/apps/xbuilder/pages/community/user/overview.vue
index 5ec6cfcbaf..006c9b7317 100644
--- a/spx-gui/src/pages/community/user/overview.vue
+++ b/spx-gui/src/apps/xbuilder/pages/community/user/overview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getUserPageRoute } from '@/router'
+import { getUserPageRoute } from '../../../router'
 import { useQuery } from '@/utils/query'
 import { usePageTitle } from '@/utils/utils'
 import {
diff --git a/spx-gui/src/pages/community/user/projects.vue b/spx-gui/src/apps/xbuilder/pages/community/user/projects.vue
similarity index 98%
rename from spx-gui/src/pages/community/user/projects.vue
rename to spx-gui/src/apps/xbuilder/pages/community/user/projects.vue
index 42617f846b..c5c3ce2b58 100644
--- a/spx-gui/src/pages/community/user/projects.vue
+++ b/spx-gui/src/apps/xbuilder/pages/community/user/projects.vue
@@ -12,7 +12,7 @@ import {
   listUserPublicProjects,
   type ListUserPublicProjectsParams
 } from '@/apis/project'
-import { getOwnProjectEditorRoute } from '@/router'
+import { getOwnProjectEditorRoute } from '../../../router'
 import { useSignedInUser, useUser } from '@/stores/user'
 import { UISelect, UISelectOption, UIPagination, UIButton, useResponsive } from '@/components/ui'
 import { useCreateProject } from '@/components/project'
diff --git a/spx-gui/src/pages/docs/api.vue b/spx-gui/src/apps/xbuilder/pages/docs/api.vue
similarity index 100%
rename from spx-gui/src/pages/docs/api.vue
rename to spx-gui/src/apps/xbuilder/pages/docs/api.vue
diff --git a/spx-gui/src/pages/docs/ui-design/index.vue b/spx-gui/src/apps/xbuilder/pages/docs/ui-design/index.vue
similarity index 100%
rename from spx-gui/src/pages/docs/ui-design/index.vue
rename to spx-gui/src/apps/xbuilder/pages/docs/ui-design/index.vue
diff --git a/spx-gui/src/pages/docs/ui-design/sample-backdrop.svg b/spx-gui/src/apps/xbuilder/pages/docs/ui-design/sample-backdrop.svg
similarity index 100%
rename from spx-gui/src/pages/docs/ui-design/sample-backdrop.svg
rename to spx-gui/src/apps/xbuilder/pages/docs/ui-design/sample-backdrop.svg
diff --git a/spx-gui/src/pages/docs/ui-design/sample-sprite.svg b/spx-gui/src/apps/xbuilder/pages/docs/ui-design/sample-sprite.svg
similarity index 100%
rename from spx-gui/src/pages/docs/ui-design/sample-sprite.svg
rename to spx-gui/src/apps/xbuilder/pages/docs/ui-design/sample-sprite.svg
diff --git a/spx-gui/src/pages/editor/index.vue b/spx-gui/src/apps/xbuilder/pages/editor/index.vue
similarity index 99%
rename from spx-gui/src/pages/editor/index.vue
rename to spx-gui/src/apps/xbuilder/pages/editor/index.vue
index a481bedef9..e683866cbd 100644
--- a/spx-gui/src/pages/editor/index.vue
+++ b/spx-gui/src/apps/xbuilder/pages/editor/index.vue
@@ -40,7 +40,7 @@ class LocalCache implements ILocalCache {
 import { computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import { useSignedInStateQuery } from '@/stores/user'
-import { getProjectEditorRoute } from '@/router'
+import { getProjectEditorRoute } from '../../router'
 import { useRegisterUpdateRouteLoaded } from '@/utils/route-loading'
 import {
   getProjectEditorRouteParams,
diff --git a/spx-gui/src/pages/sign-in/callback.vue b/spx-gui/src/apps/xbuilder/pages/sign-in/callback.vue
similarity index 100%
rename from spx-gui/src/pages/sign-in/callback.vue
rename to spx-gui/src/apps/xbuilder/pages/sign-in/callback.vue
diff --git a/spx-gui/src/pages/sign-in/token.vue b/spx-gui/src/apps/xbuilder/pages/sign-in/token.vue
similarity index 100%
rename from spx-gui/src/pages/sign-in/token.vue
rename to spx-gui/src/apps/xbuilder/pages/sign-in/token.vue
diff --git a/spx-gui/src/pages/tutorials/course-series.vue b/spx-gui/src/apps/xbuilder/pages/tutorials/course-series.vue
similarity index 100%
rename from spx-gui/src/pages/tutorials/course-series.vue
rename to spx-gui/src/apps/xbuilder/pages/tutorials/course-series.vue
diff --git a/spx-gui/src/pages/tutorials/course-start.vue b/spx-gui/src/apps/xbuilder/pages/tutorials/course-start.vue
similarity index 100%
rename from spx-gui/src/pages/tutorials/course-start.vue
rename to spx-gui/src/apps/xbuilder/pages/tutorials/course-start.vue
diff --git a/spx-gui/src/pages/tutorials/index.vue b/spx-gui/src/apps/xbuilder/pages/tutorials/index.vue
similarity index 100%
rename from spx-gui/src/pages/tutorials/index.vue
rename to spx-gui/src/apps/xbuilder/pages/tutorials/index.vue
diff --git a/spx-gui/src/router.ts b/spx-gui/src/apps/xbuilder/router.ts
similarity index 74%
rename from spx-gui/src/router.ts
rename to spx-gui/src/apps/xbuilder/router.ts
index e5e1f9247f..259b747f2d 100644
--- a/spx-gui/src/router.ts
+++ b/spx-gui/src/apps/xbuilder/router.ts
@@ -1,8 +1,8 @@
 import type { App } from 'vue'
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
-import { searchKeywordQueryParamName } from '@/pages/community/search.vue'
-import type { ExploreOrder } from './apis/project'
-import { initiateSignIn, isSignedIn, getUnresolvedSignedInUsername } from './stores/user'
+import { searchKeywordQueryParamName } from '@/apps/xbuilder/pages/community/search.vue'
+import type { ExploreOrder } from '@/apis/project'
+import { initiateSignIn, isSignedIn, getUnresolvedSignedInUsername } from '@/stores/user'
 
 export function getProjectEditorRoute(ownerName: string, projectName: string, publish = false) {
   ownerName = encodeURIComponent(ownerName)
@@ -59,57 +59,57 @@ declare module 'vue-router' {
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    component: () => import('@/pages/community/index.vue'),
+    component: () => import('@/apps/xbuilder/pages/community/index.vue'),
     children: [
       {
         path: '/',
         name: homePageName,
-        component: () => import('@/pages/community/home.vue')
+        component: () => import('@/apps/xbuilder/pages/community/home.vue')
       },
       {
         path: '/explore',
-        component: () => import('@/pages/community/explore.vue')
+        component: () => import('@/apps/xbuilder/pages/community/explore.vue')
       },
       {
         path: '/search',
-        component: () => import('@/pages/community/search.vue'),
+        component: () => import('@/apps/xbuilder/pages/community/search.vue'),
         meta: { isSearch: true }
       },
       {
         path: '/user/:nameInput',
-        component: () => import('@/pages/community/user/index.vue'),
+        component: () => import('@/apps/xbuilder/pages/community/user/index.vue'),
         props: true,
         children: [
           {
             path: '',
-            component: () => import('@/pages/community/user/overview.vue'),
+            component: () => import('@/apps/xbuilder/pages/community/user/overview.vue'),
             props: true
           },
           {
             path: 'projects',
-            component: () => import('@/pages/community/user/projects.vue'),
+            component: () => import('@/apps/xbuilder/pages/community/user/projects.vue'),
             props: true
           },
           {
             path: 'likes',
-            component: () => import('@/pages/community/user/likes.vue'),
+            component: () => import('@/apps/xbuilder/pages/community/user/likes.vue'),
             props: true
           },
           {
             path: 'followers',
-            component: () => import('@/pages/community/user/followers.vue'),
+            component: () => import('@/apps/xbuilder/pages/community/user/followers.vue'),
             props: true
           },
           {
             path: 'following',
-            component: () => import('@/pages/community/user/following.vue'),
+            component: () => import('@/apps/xbuilder/pages/community/user/following.vue'),
             props: true
           }
         ]
       },
       {
         path: '/project/:ownerInput/:nameInput',
-        component: () => import('@/pages/community/project.vue'),
+        component: () => import('@/apps/xbuilder/pages/community/project.vue'),
         props: true
       }
     ]
@@ -120,21 +120,21 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/editor/:ownerNameInput/:projectNameInput/:inEditorPath*',
-    component: () => import('@/pages/editor/index.vue'),
+    component: () => import('@/apps/xbuilder/pages/editor/index.vue'),
     props: true
   },
   {
     path: '/tutorials',
-    component: () => import('@/pages/tutorials/index.vue')
+    component: () => import('@/apps/xbuilder/pages/tutorials/index.vue')
   },
   {
     path: '/course/:courseSeriesIdInput/:courseIdInput/start',
-    component: () => import('@/pages/tutorials/course-start.vue'),
+    component: () => import('@/apps/xbuilder/pages/tutorials/course-start.vue'),
     props: true
   },
   {
     path: '/course-series/:courseSeriesIdInput',
-    component: () => import('@/pages/tutorials/course-series.vue'),
+    component: () => import('@/apps/xbuilder/pages/tutorials/course-series.vue'),
     props: true
   },
   {
@@ -158,11 +158,11 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/sign-in/callback',
-    component: () => import('@/pages/sign-in/callback.vue')
+    component: () => import('@/apps/xbuilder/pages/sign-in/callback.vue')
   },
   {
     path: '/sign-in/token',
-    component: () => import('@/pages/sign-in/token.vue')
+    component: () => import('@/apps/xbuilder/pages/sign-in/token.vue')
   },
   {
     path: '/share/:owner/:name',
@@ -173,17 +173,17 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: 'api/:pathMatch(.*)?',
-        component: () => import('@/pages/docs/api.vue')
+        component: () => import('@/apps/xbuilder/pages/docs/api.vue')
       },
       {
         path: 'ui-design',
-        component: () => import('@/pages/docs/ui-design/index.vue')
+        component: () => import('@/apps/xbuilder/pages/docs/ui-design/index.vue')
       }
     ]
   },
   {
     path: '/:pathMatch(.*)*',
-    component: () => import('@/pages/404/index.vue')
+    component: () => import('@/apps/xbuilder/pages/404/index.vue')
   }
 ]
 
diff --git a/spx-gui/src/components/community/CommunityNavbar.vue b/spx-gui/src/components/community/CommunityNavbar.vue
index 8e85d86c0c..4006cdea3a 100644
--- a/spx-gui/src/components/community/CommunityNavbar.vue
+++ b/spx-gui/src/components/community/CommunityNavbar.vue
@@ -41,8 +41,8 @@ import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
 import NavbarDropdown from '../navbar/NavbarDropdown.vue'
 import NavbarNewProjectItem from '@/components/navbar/NavbarNewProjectItem.vue'
 import NavbarOpenProjectItem from '@/components/navbar/NavbarOpenProjectItem.vue'
-import { searchKeywordQueryParamName } from '@/pages/community/search.vue'
-import { getSearchRoute } from '@/router'
+import { searchKeywordQueryParamName } from '@/apps/xbuilder/pages/community/search.vue'
+import { getSearchRoute } from '@/apps/xbuilder/router'
 import { showTutorialsEntry } from '@/utils/env'
 import NavbarLang from '../navbar/NavbarLang.vue'
 import NavbarTutorials from '../navbar/NavbarTutorials.vue'
diff --git a/spx-gui/src/components/community/MyProjectsEmpty.vue b/spx-gui/src/components/community/MyProjectsEmpty.vue
index 0e64643622..66f2f3a3f6 100644
--- a/spx-gui/src/components/community/MyProjectsEmpty.vue
+++ b/spx-gui/src/components/community/MyProjectsEmpty.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useMessageHandle } from '@/utils/exception'
-import { getOwnProjectEditorRoute } from '@/router'
+import { getOwnProjectEditorRoute } from '@/apps/xbuilder/router'
 import { UIEmpty, UIButton } from '@/components/ui'
 import { useCreateProject } from '@/components/project'
 
diff --git a/spx-gui/src/components/community/project/RemixedFrom.vue b/spx-gui/src/components/community/project/RemixedFrom.vue
index bf62759d8c..b81c91d607 100644
--- a/spx-gui/src/components/community/project/RemixedFrom.vue
+++ b/spx-gui/src/components/community/project/RemixedFrom.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { parseRemixSource } from '@/apis/project'
-import { getProjectPageRoute } from '@/router'
+import { getProjectPageRoute } from '@/apps/xbuilder/router'
 import { useUser } from '@/stores/user'
 import RouterUILink from '@/components/common/RouterUILink.vue'
 
diff --git a/spx-gui/src/components/community/user/UserItem.vue b/spx-gui/src/components/community/user/UserItem.vue
index feac95b774..e11ca85328 100644
--- a/spx-gui/src/components/community/user/UserItem.vue
+++ b/spx-gui/src/components/community/user/UserItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { User } from '@/apis/user'
-import { getUserPageRoute } from '@/router'
+import { getUserPageRoute } from '@/apps/xbuilder/router'
 import RouterUILink from '@/components/common/RouterUILink.vue'
 import TextView from '../TextView.vue'
 import UserAvatar from './UserAvatar.vue'
diff --git a/spx-gui/src/components/community/user/UserLink.vue b/spx-gui/src/components/community/user/UserLink.vue
index ab79064ff5..1e1e028745 100644
--- a/spx-gui/src/components/community/user/UserLink.vue
+++ b/spx-gui/src/components/community/user/UserLink.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getUserPageRoute } from '@/router'
+import { getUserPageRoute } from '@/apps/xbuilder/router'
 import { useUser } from '@/stores/user'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/community/user/sidebar/UserSidebar.vue b/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
index e151a49f95..08cd552d45 100644
--- a/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
+++ b/spx-gui/src/components/community/user/sidebar/UserSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getUserPageRoute } from '@/router'
+import { getUserPageRoute } from '@/apps/xbuilder/router'
 import { UICard } from '@/components/ui'
 import UserSidebarItem from './UserSidebarItem.vue'
 
diff --git a/spx-gui/src/components/copilot/CopilotUI.vue b/spx-gui/src/components/copilot/CopilotUI.vue
index bbfdebdff2..47af82e96f 100644
--- a/spx-gui/src/components/copilot/CopilotUI.vue
+++ b/spx-gui/src/components/copilot/CopilotUI.vue
@@ -40,7 +40,7 @@ import { useCopilot } from './context'
 import { type QuickInput, RoundState } from './copilot'
 import { useSpotlight } from '@/utils/spotlight'
 import type { LocaleMessage } from '@/utils/i18n'
-import { homePageName } from '@/router'
+import { homePageName } from '@/apps/xbuilder/router'
 
 const copilot = useCopilot()
 const spotlight = useSpotlight()
diff --git a/spx-gui/src/components/editor/navbar/EditorNavbar.vue b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
index 7a483ad517..a2b4691e0d 100644
--- a/spx-gui/src/components/editor/navbar/EditorNavbar.vue
+++ b/spx-gui/src/components/editor/navbar/EditorNavbar.vue
@@ -163,7 +163,7 @@ import { convertScratchProject } from '@/apis/project-conversion'
 import { type SpxProject } from '@/models/spx/project'
 import { useSignedInUser } from '@/stores/user'
 import { Visibility } from '@/apis/common'
-import { getProjectPageRoute } from '@/router'
+import { getProjectPageRoute } from '@/apps/xbuilder/router'
 import { showTutorialsEntry } from '@/utils/env'
 import { useModifyProjectName, usePublishProject, useRemoveProject, useUnpublishProject } from '@/components/project'
 import { useLoadFromScratchModal } from '@/components/asset'
diff --git a/spx-gui/src/components/navbar/NavbarNewProjectItem.vue b/spx-gui/src/components/navbar/NavbarNewProjectItem.vue
index 0b04c70f4a..3d31ed849e 100644
--- a/spx-gui/src/components/navbar/NavbarNewProjectItem.vue
+++ b/spx-gui/src/components/navbar/NavbarNewProjectItem.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { getOwnProjectEditorRoute } from '@/router'
+import { getOwnProjectEditorRoute } from '@/apps/xbuilder/router'
 import { UIMenuItem } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { useCreateProject } from '@/components/project'
diff --git a/spx-gui/src/components/navbar/NavbarProfile.vue b/spx-gui/src/components/navbar/NavbarProfile.vue
index b3bd868de5..c291a10fe4 100644
--- a/spx-gui/src/components/navbar/NavbarProfile.vue
+++ b/spx-gui/src/components/navbar/NavbarProfile.vue
@@ -75,7 +75,7 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useNetwork } from '@/utils/network'
 import { useMessageHandle } from '@/utils/exception'
-import { getUserPageRoute } from '@/router'
+import { getUserPageRoute } from '@/apps/xbuilder/router'
 import { AssetType } from '@/apis/asset'
 import { initiateSignIn, revokeTokens, useSignedInStateQuery } from '@/stores/user'
 import { useAvatarUrl } from '@/stores/user/avatar'
diff --git a/spx-gui/src/components/project/ProjectItem.vue b/spx-gui/src/components/project/ProjectItem.vue
index 72378913a9..62b9896339 100644
--- a/spx-gui/src/components/project/ProjectItem.vue
+++ b/spx-gui/src/components/project/ProjectItem.vue
@@ -127,7 +127,7 @@ import {
   humanizeExactTime,
   useAsyncComputedLegacy
 } from '@/utils/utils'
-import { getProjectEditorRoute, getProjectPageRoute } from '@/router'
+import { getProjectEditorRoute, getProjectPageRoute } from '@/apps/xbuilder/router'
 import { Visibility, type ProjectData } from '@/apis/project'
 import stageBgUrl from '@/assets/images/stage-bg.svg'
 import { createFileWithUniversalUrl, getPublishedContent } from '@/models/common/cloud'
diff --git a/spx-gui/src/components/project/ProjectPublishedModal.vue b/spx-gui/src/components/project/ProjectPublishedModal.vue
index d7deac7149..40a87aecfe 100644
--- a/spx-gui/src/components/project/ProjectPublishedModal.vue
+++ b/spx-gui/src/components/project/ProjectPublishedModal.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { UIButton, UIFormModal, UITextInput, UILink } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
-import { getProjectPageRoute } from '@/router'
+import { getProjectPageRoute } from '@/apps/xbuilder/router'
 import { SpxProject } from '@/models/spx/project'
 
 const props = defineProps<{
diff --git a/spx-gui/src/components/project/ProjectSharingLinkModal.vue b/spx-gui/src/components/project/ProjectSharingLinkModal.vue
index d7b6cd3788..27da583abd 100644
--- a/spx-gui/src/components/project/ProjectSharingLinkModal.vue
+++ b/spx-gui/src/components/project/ProjectSharingLinkModal.vue
@@ -37,7 +37,7 @@
 import { UIButton, UIFormModal, UITextInput } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
 import { computed } from 'vue'
-import { getProjectShareRoute } from '@/router'
+import { getProjectShareRoute } from '@/apps/xbuilder/router'
 
 const props = defineProps<{
   visible: boolean
diff --git a/spx-gui/src/main.ts b/spx-gui/src/main.ts
deleted file mode 100644
index 917aaebb1e..0000000000
--- a/spx-gui/src/main.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import './polyfills'
-import './app.css'
-import { createApp } from 'vue'
-import { setup, configureApp } from './setup'
-import App from './App.vue'
-
-setup()
-const app = createApp(App)
-configureApp(app)
-app.mount('#app')
diff --git a/spx-gui/src/setup.ts b/spx-gui/src/setup.ts
index e92c4a8b9e..08e51c9535 100644
--- a/spx-gui/src/setup.ts
+++ b/spx-gui/src/setup.ts
@@ -11,7 +11,6 @@ import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
 import 'dayjs/locale/zh'
 
-import { initRouter } from './router'
 import { initUserState, ensureAccessToken } from './stores/user'
 import { client } from './apis/common'
 import { CustomTransformer } from './components/editor/common/viewer/custom-transformer'
@@ -109,8 +108,7 @@ export function setup() {
 }
 
 /** Configure the Vue app by installing plugins, etc. */
-export function configureApp(app: VueApp, routerEnabled = true) {
-  const router = routerEnabled ? initRouter(app) : undefined
+export function configureApp(app: VueApp, router?: Router) {
   initSentry(app, router)
   initI18n(app)
   app.use(VueKonva as any, {
diff --git a/spx-gui/src/widgets/spx-runner/index.ts b/spx-gui/src/widgets/spx-runner/index.ts
index 9207e934ad..45aa698aca 100644
--- a/spx-gui/src/widgets/spx-runner/index.ts
+++ b/spx-gui/src/widgets/spx-runner/index.ts
@@ -9,7 +9,7 @@ customElements.define(
   'spx-runner',
   defineCustomElement(spxRunner, {
     configureApp(app) {
-      configureApp(app, false /* disable router in widget */)
+      configureApp(app)
     }
   })
 )
diff --git a/spx-gui/src/widgets/xgo-code-editor/index.ts b/spx-gui/src/widgets/xgo-code-editor/index.ts
index 4b31838af5..ffa4e5f760 100644
--- a/spx-gui/src/widgets/xgo-code-editor/index.ts
+++ b/spx-gui/src/widgets/xgo-code-editor/index.ts
@@ -17,7 +17,7 @@ customElements.define(
   'unstable-xgo-code-editor',
   defineCustomElement(xgoCodeEditor, {
     configureApp(app) {
-      configureApp(app, false /* disable router in widget */)
+      configureApp(app)
     }
   })
 )

From 9fea517f354c95c15bc0937701a2119a9d611e12 Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Mon, 8 Jun 2026 18:24:57 +0800
Subject: [PATCH 5/6] Add Account Web CDP callback redirect

---
 docs/develop/account-web-sign-in-migration.md |   2 +-
 spx-gui/vite.config.account-web.ts            | 318 +++++++++++++++++-
 2 files changed, 309 insertions(+), 11 deletions(-)

diff --git a/docs/develop/account-web-sign-in-migration.md b/docs/develop/account-web-sign-in-migration.md
index 9ebb1c35ad..3a418c4063 100644
--- a/docs/develop/account-web-sign-in-migration.md
+++ b/docs/develop/account-web-sign-in-migration.md
@@ -329,7 +329,7 @@ sequenceDiagram
   - 增加主站在新账号系统里的应用标识 `VITE_ACCOUNT_OAUTH_CLIENT_ID`
   - 主站在 `PAR` 之后直接跳转 `GET /account/oauth/authorize`，不自行拼接 `Account Web` 地址
   - `Account Web` 自身走同源 `/api/*` facade，不额外暴露独立的 Account API base URL
-  - `Account Web` 本地环境联调暂时通过 `VITE_ACCOUNT_WEB_TEST_ORIGIN` 复用测试环境地址，用于代理请求的 `Origin` header 和 Vite `allowedHosts` 等绕过配置
+  - `Account Web` 本地环境联调可通过 `VITE_ACCOUNT_WEB_CDP_CALLBACK_ORIGIN` 启用 Chrome DevTools Protocol callback redirect，免去本地 hosts 与 HTTPS 证书配置
 
 #### 小范围联动
 
diff --git a/spx-gui/vite.config.account-web.ts b/spx-gui/vite.config.account-web.ts
index 1dba8f5c62..0aafa27546 100644
--- a/spx-gui/vite.config.account-web.ts
+++ b/spx-gui/vite.config.account-web.ts
@@ -1,6 +1,13 @@
 import path from 'node:path'
+import { spawn, type ChildProcess } from 'node:child_process'
+import crypto from 'node:crypto'
+import http from 'node:http'
+import net from 'node:net'
+import os from 'node:os'
 import fs from 'node:fs'
+import { Buffer } from 'node:buffer'
 import { defineConfig, loadEnv } from 'vite'
+import type { Plugin, ViteDevServer } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
 import browserslistToEsbuild from 'browserslist-to-esbuild'
@@ -8,16 +15,314 @@ import browserslistToEsbuild from 'browserslist-to-esbuild'
 import { createVercelOutputPlugin } from './vercel-output-plugin.js'
 
 const resolve = (dir: string) => path.join(__dirname, dir)
+const cdpCallbackOriginEnv = 'VITE_ACCOUNT_WEB_CDP_CALLBACK_ORIGIN'
+
+interface CDPCommand {
+  id: number
+  method: string
+  params?: Record<string, unknown>
+}
+
+interface CDPEvent {
+  method: string
+  params?: Record<string, unknown>
+}
+
+interface CDPRequestPausedParams {
+  requestId: string
+  request: {
+    url: string
+    method: string
+    headers: Record<string, string>
+    postData?: string
+  }
+}
+
+class CDPWebSocket {
+  private socket: net.Socket
+  private buffer = Buffer.alloc(0)
+  private nextID = 1
+  private eventListeners = new Map<string, Array<(params: Record<string, unknown>) => void>>()
+
+  private constructor(socket: net.Socket) {
+    this.socket = socket
+    socket.on('data', (chunk) => this.handleData(chunk))
+  }
+
+  static async connect(rawURL: string) {
+    const url = new URL(rawURL)
+    const socket = await connectSocket(url.hostname, Number(url.port || 80))
+    const key = crypto.randomBytes(16).toString('base64')
+    socket.write(
+      [
+        `GET ${url.pathname}${url.search} HTTP/1.1`,
+        `Host: ${url.host}`,
+        'Upgrade: websocket',
+        'Connection: Upgrade',
+        `Sec-WebSocket-Key: ${key}`,
+        'Sec-WebSocket-Version: 13',
+        '',
+        ''
+      ].join('\r\n')
+    )
+
+    await readHandshake(socket)
+    return new CDPWebSocket(socket)
+  }
+
+  on(event: string, listener: (params: Record<string, unknown>) => void) {
+    const listeners = this.eventListeners.get(event) ?? []
+    listeners.push(listener)
+    this.eventListeners.set(event, listeners)
+  }
+
+  send(method: string, params?: Record<string, unknown>) {
+    const command: CDPCommand = { id: this.nextID++, method, params }
+    this.socket.write(encodeWebSocketFrame(JSON.stringify(command)))
+  }
+
+  close() {
+    this.socket.end()
+  }
+
+  private handleData(chunk: Buffer) {
+    this.buffer = Buffer.concat([this.buffer, chunk])
+    while (this.buffer.length > 0) {
+      const frame = decodeWebSocketFrame(this.buffer)
+      if (frame == null) return
+      this.buffer = this.buffer.subarray(frame.length)
+      const message = JSON.parse(frame.payload.toString()) as CDPEvent
+      if (message.method == null || message.params == null) continue
+      for (const listener of this.eventListeners.get(message.method) ?? []) listener(message.params)
+    }
+  }
+}
+
+function connectSocket(host: string, port: number) {
+  return new Promise<net.Socket>((resolveSocket, reject) => {
+    const socket = net.connect(port, host)
+    socket.once('connect', () => resolveSocket(socket))
+    socket.once('error', reject)
+  })
+}
+
+function readHandshake(socket: net.Socket) {
+  return new Promise<void>((resolveHandshake, reject) => {
+    let buffer = Buffer.alloc(0)
+    const onData = (chunk: Buffer) => {
+      buffer = Buffer.concat([buffer, chunk])
+      if (!buffer.includes('\r\n\r\n')) return
+      socket.off('data', onData)
+      resolveHandshake()
+    }
+    socket.on('data', onData)
+    socket.once('error', reject)
+  })
+}
+
+function encodeWebSocketFrame(payload: string) {
+  const payloadBuffer = Buffer.from(payload)
+  const mask = crypto.randomBytes(4)
+  const headerLength = payloadBuffer.length < 126 ? 6 : 8
+  const frame = Buffer.alloc(headerLength + payloadBuffer.length)
+  frame[0] = 0x81
+  if (payloadBuffer.length < 126) {
+    frame[1] = 0x80 | payloadBuffer.length
+    mask.copy(frame, 2)
+  } else {
+    frame[1] = 0x80 | 126
+    frame.writeUInt16BE(payloadBuffer.length, 2)
+    mask.copy(frame, 4)
+  }
+  const maskOffset = headerLength - 4
+  for (let i = 0; i < payloadBuffer.length; i++) {
+    frame[headerLength + i] = payloadBuffer[i] ^ frame[maskOffset + (i % 4)]
+  }
+  return frame
+}
+
+function decodeWebSocketFrame(buffer: Buffer): { length: number; payload: Buffer } | null {
+  if (buffer.length < 2) return null
+  const baseLength = buffer[1] & 0x7f
+  let offset = 2
+  let payloadLength = baseLength
+  if (baseLength === 126) {
+    if (buffer.length < 4) return null
+    payloadLength = buffer.readUInt16BE(2)
+    offset = 4
+  } else if (baseLength === 127) {
+    if (buffer.length < 10) return null
+    payloadLength = Number(buffer.readBigUInt64BE(2))
+    offset = 10
+  }
+  const masked = (buffer[1] & 0x80) !== 0
+  const maskOffset = offset
+  if (masked) offset += 4
+  const length = offset + payloadLength
+  if (buffer.length < length) return null
+  const payload = Buffer.from(buffer.subarray(offset, length))
+  if (masked) {
+    for (let i = 0; i < payload.length; i++) payload[i] ^= buffer[maskOffset + (i % 4)]
+  }
+  return { length, payload }
+}
+
+function accountWebCDPCallbackPlugin(callbackOrigin: string | null): Plugin | null {
+  if (callbackOrigin == null) return null
+
+  return {
+    name: 'account-web-cdp-callback-redirect',
+    apply: 'serve',
+    configureServer(server) {
+      let chrome: ChildProcess | null = null
+      let cdp: CDPWebSocket | null = null
+      server.httpServer?.once('listening', () => {
+        void startCDPCallbackRedirect(server, callbackOrigin)
+          .then((result) => {
+            chrome = result.chrome
+            cdp = result.cdp
+          })
+          .catch((error: unknown) => {
+            server.config.logger.error(
+              `Failed to start Account Web CDP callback redirect: ${error instanceof Error ? error.message : String(error)}`
+            )
+          })
+      })
+      server.httpServer?.once('close', () => {
+        cdp?.close()
+        chrome?.kill()
+      })
+    }
+  }
+}
+
+async function startCDPCallbackRedirect(server: ViteDevServer, callbackOrigin: string) {
+  const devOrigin = server.resolvedUrls?.local[0]?.replace(/\/$/, '') ?? `http://localhost:${server.config.server.port}`
+  const remoteDebuggingPort = await getFreePort()
+  const chrome = launchChrome(remoteDebuggingPort, devOrigin)
+  const target = await waitForCDPTarget(remoteDebuggingPort)
+  const cdp = await CDPWebSocket.connect(target.webSocketDebuggerUrl)
+  const callbackURLPattern = `${callbackOrigin.replace(/\/$/, '')}/api/identity-providers/*/callback*`
+
+  cdp.send('Fetch.enable', {
+    patterns: [{ urlPattern: callbackURLPattern, requestStage: 'Request' }]
+  })
+  cdp.on('Fetch.requestPaused', (params) => {
+    handlePausedCallbackRequest(cdp, params as unknown as CDPRequestPausedParams, devOrigin)
+  })
+  server.config.logger.info(`Account Web CDP callback redirect enabled for ${callbackURLPattern}`)
+  return { chrome, cdp }
+}
+
+function launchChrome(remoteDebuggingPort: number, devOrigin: string) {
+  const executable = findChromeExecutable()
+  const userDataDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xbuilder-account-web-chrome-'))
+  return spawn(
+    executable,
+    [
+      `--remote-debugging-port=${remoteDebuggingPort}`,
+      `--user-data-dir=${userDataDir}`,
+      '--no-first-run',
+      '--no-default-browser-check',
+      devOrigin
+    ],
+    { stdio: 'ignore' }
+  )
+}
+
+function findChromeExecutable() {
+  const candidates = [
+    process.env.CHROME_PATH ?? null,
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium',
+    'google-chrome',
+    'chromium',
+    'chromium-browser'
+  ]
+  const executable = candidates.find(
+    (candidate) => candidate != null && (candidate.includes('/') ? fs.existsSync(candidate) : true)
+  )
+  if (executable == null) throw new Error('Chrome executable not found')
+  return executable
+}
+
+function getFreePort() {
+  return new Promise<number>((resolvePort, reject) => {
+    const server = net.createServer()
+    server.once('error', reject)
+    server.listen(0, '127.0.0.1', () => {
+      const address = server.address()
+      server.close(() => {
+        if (address == null || typeof address === 'string') {
+          reject(new Error('Failed to allocate a remote debugging port'))
+          return
+        }
+        resolvePort(address.port)
+      })
+    })
+  })
+}
+
+async function waitForCDPTarget(port: number) {
+  for (let i = 0; i < 50; i++) {
+    const targets = await readJSON<Array<{ type: string; webSocketDebuggerUrl: string }>>(
+      `http://127.0.0.1:${port}/json/list`
+    ).catch(() => null)
+    const target = targets?.find((item) => item.type === 'page' && item.webSocketDebuggerUrl != null)
+    if (target != null) return target
+    await new Promise((resolveTimeout) => setTimeout(resolveTimeout, 100))
+  }
+  throw new Error('Timed out waiting for Chrome DevTools Protocol target')
+}
+
+function readJSON<T>(url: string) {
+  return new Promise<T>((resolveJSON, reject) => {
+    http
+      .get(url, (response) => {
+        const chunks: Buffer[] = []
+        response.on('data', (chunk) => chunks.push(chunk))
+        response.on('end', () => {
+          resolveJSON(JSON.parse(Buffer.concat(chunks).toString()) as T)
+        })
+      })
+      .on('error', reject)
+  })
+}
+
+function handlePausedCallbackRequest(cdp: CDPWebSocket, params: CDPRequestPausedParams, devOrigin: string) {
+  const requestURL = new URL(params.request.url)
+  const provider = requestURL.pathname.match(/\/api\/identity-providers\/([^/]+)\/callback$/)?.[1]
+  if (provider == null) {
+    cdp.send('Fetch.continueRequest', { requestId: params.requestId })
+    return
+  }
+
+  const target = new URL(`/api/identity-providers/${provider}/callback`, devOrigin)
+  for (const [key, value] of requestURL.searchParams) target.searchParams.append(key, value)
+  if (params.request.method === 'POST' && params.request.postData != null) {
+    for (const [key, value] of new URLSearchParams(params.request.postData)) target.searchParams.append(key, value)
+  }
+  cdp.send('Fetch.fulfillRequest', {
+    requestId: params.requestId,
+    responseCode: 302,
+    responseHeaders: [
+      { name: 'Location', value: target.toString() },
+      { name: 'Cache-Control', value: 'no-store' }
+    ]
+  })
+}
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   const vercelProxiedApiBaseURL =
     env.VITE_VERCEL_PROXIED_API_BASE_URL == null ? null : env.VITE_VERCEL_PROXIED_API_BASE_URL
-  const accountWebTestOrigin = env.VITE_ACCOUNT_WEB_TEST_ORIGIN?.trim() || null
-  const accountWebTestHost = accountWebTestOrigin == null ? null : new URL(accountWebTestOrigin).host
+  const cdpCallbackOrigin = env[cdpCallbackOriginEnv]?.trim() || null
+  const cdpCallbackPlugin = accountWebCDPCallbackPlugin(cdpCallbackOrigin)
 
   return {
     plugins: [
+      ...(cdpCallbackPlugin == null ? [] : [cdpCallbackPlugin]),
       {
         name: 'account-web-rename-output-html',
         apply: 'build',
@@ -113,7 +418,6 @@ export default defineConfig(({ mode }) => {
         'Cross-Origin-Embedder-Policy': 'require-corp',
         'Cross-Origin-Opener-Policy': 'same-origin'
       },
-      allowedHosts: accountWebTestHost == null ? undefined : [accountWebTestHost],
       proxy: (() => {
         const target = env.VITE_API_BASE_URL
         if (!target) return undefined
@@ -121,13 +425,7 @@ export default defineConfig(({ mode }) => {
           '/api': {
             target,
             changeOrigin: true,
-            rewrite: (path: string) => path.replace(/^\/api/, '/account'),
-            configure(proxy) {
-              if (accountWebTestOrigin == null) return
-              proxy.on('proxyReq', (proxyReq) => {
-                proxyReq.setHeader('Origin', accountWebTestOrigin)
-              })
-            }
+            rewrite: (path: string) => path.replace(/^\/api/, '/account')
           }
         }
       })()

From 270d4074300817eb319558f648378596283a99de Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Tue, 9 Jun 2026 11:42:52 +0800
Subject: [PATCH 6/6] Add Account facade deployment

---
 docs/develop/account-web-sign-in-migration.md |  4 +-
 spx-gui/.env                                  |  7 --
 spx-gui/.env.staging                          |  2 -
 spx-gui/Dockerfile.account                    | 30 +++++++++
 spx-gui/deployment.account.yaml               | 64 +++++++++++++++++++
 spx-gui/nginx.account.conf                    | 54 ++++++++++++++++
 spx-gui/package.json                          |  4 +-
 ....account-web.ts => vite.config.account.ts} |  8 +--
 8 files changed, 156 insertions(+), 17 deletions(-)
 create mode 100644 spx-gui/Dockerfile.account
 create mode 100644 spx-gui/deployment.account.yaml
 create mode 100644 spx-gui/nginx.account.conf
 rename spx-gui/{vite.config.account-web.ts => vite.config.account.ts} (98%)

diff --git a/docs/develop/account-web-sign-in-migration.md b/docs/develop/account-web-sign-in-migration.md
index 3a418c4063..7c0525c4b3 100644
--- a/docs/develop/account-web-sign-in-migration.md
+++ b/docs/develop/account-web-sign-in-migration.md
@@ -149,7 +149,7 @@ spx-gui/
 ├── index.html                       # 主站 HTML 入口
 ├── account.html                     # Account Web 独立 HTML 入口
 ├── vite.config.ts                   # 主站构建配置
-├── vite.config.account-web.ts       # Account Web 构建配置
+├── vite.config.account.ts           # Account Web 构建配置
 └── src/
     ├── apps/
     │   ├── account/                 # Account Web 入口
@@ -216,7 +216,7 @@ spx-gui/
   - 用户名密码登录表单
 - `spx-gui/src/components/sign-in/LoginForm.vue`
   - 登录页状态机与 API 调用编排
-- `spx-gui/vite.config.account-web.ts`
+- `spx-gui/vite.config.account.ts`
   - `Account Web` 独立构建配置、同源 `/api` 代理和 Vercel rewrite
 
 #### 已改造
diff --git a/spx-gui/.env b/spx-gui/.env
index 06185c6b6e..a26c1c62f7 100644
--- a/spx-gui/.env
+++ b/spx-gui/.env
@@ -42,13 +42,6 @@ VITE_USERCONTENT_UPLOAD_BASE_URL=""
 VITE_ACCOUNT_OAUTH_CLIENT_ID=""
 
 
-# Account-web test environment origin.
-#
-# Local account-web development may temporarily reuse this value for the proxied
-# `/api/*` request `Origin` header and Vite `allowedHosts`, until local debugging
-# no longer needs these workarounds.
-VITE_ACCOUNT_WEB_TEST_ORIGIN=""
-
 # Feature flags, all boolean (true/false), with default values set here.
 #
 # Optional as they have default values.
diff --git a/spx-gui/.env.staging b/spx-gui/.env.staging
index d20d96a1a7..869f76d5d9 100644
--- a/spx-gui/.env.staging
+++ b/spx-gui/.env.staging
@@ -11,8 +11,6 @@ VITE_USERCONTENT_UPLOAD_BASE_URL="https://upload.qiniup.com"
 
 VITE_ACCOUNT_OAUTH_CLIENT_ID="2"
 
-# VITE_ACCOUNT_WEB_TEST_ORIGIN="https://goplus-builder-account.qiniu.io"
-
 VITE_SENTRY_DSN="https://0d463740215eb87f7e06f6572d64c93e@o4509472134987776.ingest.us.sentry.io/4509472136167424"
 
 VITE_SHOW_TUTORIALS_ENTRY="true"
diff --git a/spx-gui/Dockerfile.account b/spx-gui/Dockerfile.account
new file mode 100644
index 0000000000..80e41860fc
--- /dev/null
+++ b/spx-gui/Dockerfile.account
@@ -0,0 +1,30 @@
+ARG NODE_BASE_IMAGE=node:24.11.1
+ARG NGINX_BASE_IMAGE=nginx:1.27
+
+FROM ${NODE_BASE_IMAGE} AS frontend-builder
+
+WORKDIR /app/spx-gui
+
+COPY spx-gui/package.json spx-gui/package-lock.json .
+
+ARG NPM_CONFIG_REGISTRY
+RUN npm install --ignore-scripts
+
+COPY spx-gui/account.html spx-gui/vite.config.account.ts spx-gui/vercel-output-plugin.ts .
+COPY spx-gui/tsconfig.json spx-gui/tsconfig.app.json spx-gui/tsconfig.node.json .
+COPY spx-gui/.env spx-gui/.env.production spx-gui/.env.staging .
+COPY spx-gui/public ./public
+COPY spx-gui/src ./src
+
+ARG NODE_ENV=production
+ENV NODE_OPTIONS=--max-old-space-size=4096
+RUN NODE_ENV=${NODE_ENV} npx vite build --config vite.config.account.ts --mode ${NODE_ENV}
+
+FROM ${NGINX_BASE_IMAGE}
+
+COPY --from=frontend-builder /app/spx-gui/dist /usr/share/nginx/html
+COPY spx-gui/nginx.account.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/spx-gui/deployment.account.yaml b/spx-gui/deployment.account.yaml
new file mode 100644
index 0000000000..24a1ac2c4c
--- /dev/null
+++ b/spx-gui/deployment.account.yaml
@@ -0,0 +1,64 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: builder-account
+  namespace: builder
+  labels:
+    app: builder-account
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: builder-account
+  template:
+    metadata:
+      labels:
+        app: builder-account
+    spec:
+      imagePullSecrets:
+        - name: ghcr-nighca
+      containers:
+        - name: builder-account
+          image: ghcr.io/nighca/builder-account:test
+          ports:
+            - name: http
+              containerPort: 80
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: builder-account
+  namespace: builder
+  labels:
+    app: builder-account
+spec:
+  type: ClusterIP
+  selector:
+    app: builder-account
+  ports:
+    - name: http
+      port: 80
+      targetPort: http
+---
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: builder-account
+  namespace: builder
+  annotations:
+    nginx.ingress.kubernetes.io/proxy-body-size: 300m
+    nginx.ingress.kubernetes.io/proxy-buffering: 'off'
+    nginx.ingress.kubernetes.io/proxy-http-version: '1.1'
+    nginx.ingress.kubernetes.io/proxy-request-buffering: 'off'
+spec:
+  rules:
+    - host: goplus-builder-account.qiniu.io
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: builder-account
+                port:
+                  number: 80
diff --git a/spx-gui/nginx.account.conf b/spx-gui/nginx.account.conf
new file mode 100644
index 0000000000..53912d4678
--- /dev/null
+++ b/spx-gui/nginx.account.conf
@@ -0,0 +1,54 @@
+server {
+    listen 80 default_server;
+    server_name _;
+
+    client_max_body_size 200M;
+
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_min_length 1024;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
+
+    add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always;
+    add_header 'Cross-Origin-Opener-Policy' 'same-origin' always;
+
+    location /assets/ {
+        add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always;
+        add_header 'Cross-Origin-Opener-Policy' 'same-origin' always;
+        add_header 'Cache-Control' 'public, max-age=31536000, immutable' always;
+
+        root /usr/share/nginx/html;
+        try_files $uri =404;
+    }
+
+    location = /api {
+        proxy_pass http://test-acc-spx-backend/account;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /api/ {
+        proxy_pass http://test-acc-spx-backend/account/;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+        index index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}
diff --git a/spx-gui/package.json b/spx-gui/package.json
index 324ec43528..91f72f805d 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -9,8 +9,8 @@
     "dev": "vite",
     "build": "./build-tutorial-books.sh && vue-tsc --build --force && NODE_ENV=production vite build --mode ${NODE_ENV:-production}",
     "preview": "vite preview",
-    "dev:account": "vite --config vite.config.account-web.ts --port 5174",
-    "build:account": "vue-tsc --build --force && NODE_ENV=production vite build --config vite.config.account-web.ts --mode ${NODE_ENV:-production}",
+    "dev:account": "vite --config vite.config.account.ts --port 5174",
+    "build:account": "vue-tsc --build --force && NODE_ENV=production vite build --config vite.config.account.ts --mode ${NODE_ENV:-production}",
     "type-check": "vue-tsc --build --force",
     "format-check": "prettier --check ./src",
     "format": "prettier --write ./src",
diff --git a/spx-gui/vite.config.account-web.ts b/spx-gui/vite.config.account.ts
similarity index 98%
rename from spx-gui/vite.config.account-web.ts
rename to spx-gui/vite.config.account.ts
index 0aafa27546..b0c59369cd 100644
--- a/spx-gui/vite.config.account-web.ts
+++ b/spx-gui/vite.config.account.ts
@@ -171,7 +171,7 @@ function accountWebCDPCallbackPlugin(callbackOrigin: string | null): Plugin | nu
   if (callbackOrigin == null) return null
 
   return {
-    name: 'account-web-cdp-callback-redirect',
+    name: 'account-cdp-callback-redirect',
     apply: 'serve',
     configureServer(server) {
       let chrome: ChildProcess | null = null
@@ -216,7 +216,7 @@ async function startCDPCallbackRedirect(server: ViteDevServer, callbackOrigin: s
 
 function launchChrome(remoteDebuggingPort: number, devOrigin: string) {
   const executable = findChromeExecutable()
-  const userDataDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xbuilder-account-web-chrome-'))
+  const userDataDir = fs.mkdtempSync(path.join(os.tmpdir(), 'xbuilder-account-chrome-'))
   return spawn(
     executable,
     [
@@ -324,7 +324,7 @@ export default defineConfig(({ mode }) => {
     plugins: [
       ...(cdpCallbackPlugin == null ? [] : [cdpCallbackPlugin]),
       {
-        name: 'account-web-rename-output-html',
+        name: 'account-rename-output-html',
         apply: 'build',
         closeBundle() {
           const from = resolve('dist/account.html')
@@ -333,7 +333,7 @@ export default defineConfig(({ mode }) => {
         }
       },
       {
-        name: 'account-web-dev-spa-fallback',
+        name: 'account-dev-spa-fallback',
         configureServer(server) {
           server.middlewares.use((req, _res, next) => {
             if (req.url == null) return next()