diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx
index e7609f1de0..46b8a843b6 100644
--- a/web/app/(shareLayout)/webapp-signin/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/page.tsx
@@ -68,15 +68,15 @@ const WebSSOForm: FC = () => {
   }
 
   if (message) {
-    return <div className='flex h-full items-center justify-center'>
-      <AppUnavailable code={'App Unavailable'} unknownReason={message} />
-      <Link href={getSigninUrl()}>{t('share.login.backToHome')}</Link>
+    return <div className='flex h-full flex-col items-center justify-center gap-y-4'>
+      <AppUnavailable className='h-auto w-auto' code={t('share.common.appUnavailable')} unknownReason={message} />
+      <Link className='system-body-regular text-text-tertiary' href={getSigninUrl()}>{t('share.login.backToHome')}</Link>
     </div>
   }
   if (!redirectUrl) {
     showErrorToast('redirect url is invalid.')
     return <div className='flex h-full items-center justify-center'>
-      <AppUnavailable code={'App Unavailable'} unknownReason='redirect url is invalid.' />
+      <AppUnavailable code={t('share.common.appUnavailable')} unknownReason='redirect url is invalid.' />
     </div>
   }
   if (webAppAccessMode && webAppAccessMode === AccessMode.PUBLIC) {
@@ -98,9 +98,9 @@ const WebSSOForm: FC = () => {
   if (webAppAccessMode && webAppAccessMode === AccessMode.EXTERNAL_MEMBERS)
     return <ExternalMemberSsoAuth />
 
-  return <div className='flex h-full items-center justify-center'>
-    <AppUnavailable code={'App Unavailable'} isUnknownReason={true} />
-    <Link href={getSigninUrl()}>{t('share.login.backToHome')}</Link>
+  return <div className='flex h-full flex-col items-center justify-center gap-y-4'>
+    <AppUnavailable className='h-auto w-auto' code={t('share.common.appUnavailable')} isUnknownReason={true} />
+    <Link className='system-body-regular text-text-tertiary' href={getSigninUrl()}>{t('share.login.backToHome')}</Link>
   </div>
 }
 
diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx
index 4e835cbfcf..928c850262 100644
--- a/web/app/components/base/app-unavailable.tsx
+++ b/web/app/components/base/app-unavailable.tsx
@@ -1,4 +1,5 @@
 'use client'
+import classNames from '@/utils/classnames'
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -7,17 +8,19 @@ type IAppUnavailableProps = {
   code?: number | string
   isUnknownReason?: boolean
   unknownReason?: string
+  className?: string
 }
 
 const AppUnavailable: FC<IAppUnavailableProps> = ({
   code = 404,
   isUnknownReason,
   unknownReason,
+  className,
 }) => {
   const { t } = useTranslation()
 
   return (
-    <div className='flex h-screen w-screen items-center justify-center'>
+    <div className={classNames('flex h-screen w-screen items-center justify-center', className)}>
       <h1 className='mr-5 h-[50px] pr-5 text-[24px] font-medium leading-[50px]'
         style={{
           borderRight: '1px solid rgba(0,0,0,.3)',