diff --git a/docs/getting-started/sso.md b/docs/getting-started/sso.md
index 39857be..59f6911 100644
--- a/docs/getting-started/sso.md
+++ b/docs/getting-started/sso.md
@@ -15,3 +15,23 @@ As an Admin user, you can create a new SSO provider in Setting > Workspace setti
 For example, to integrate with GitHub, you might need to fill in the following fields:
 
 ![github-sso](../assets/getting-started/github-sso.png)
+
+### Identity provider information
+
+The information is the base concept of OAuth 2.0 and comes from your provider.
+
+- **Client ID** is a public identifier of the custom provider;
+- **Client Secret** is the OAuth2 client secret from identity provider;
+- **Authorization endpoint** is the custom provider's OAuth2 login page address;
+- **Token endpoint** is the API address for obtaining access token;
+- **User endpoint** URL is the API address for obtaining user information by access token;
+- **Scopes** is the scope parameter carried when accessing the OAuth2 URL, which is filled in according to the custom provider;
+
+### User information mapping
+
+For different providers, the structures returned by their user information API are usually not the same. In order to know how to map the user information from an provider into user fields, you need to fill the user information mapping form.
+
+Slash will use the mapping to import the user profile fields when creating new accounts. The most important user field mapping is the identifier which is used to identify the Slash account associated with the OAuth 2.0 login.
+
+- **Identifier** is the field name of primary email in 3rd-party user info;
+- **Display name** is the field name of display name in 3rd-party user info (optional);
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index e7192a8..56e79ca 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -52,7 +52,7 @@
   },
   "filter": {
     "all": "All",
-    "mine": "Mine",
+    "personal": "Personal",
     "compact-mode": "Compact mode",
     "order-by": "Order by",
     "direction": "Direction"
diff --git a/frontend/locales/zh.json b/frontend/locales/zh.json
index ea9cf18..fc2b560 100644
--- a/frontend/locales/zh.json
+++ b/frontend/locales/zh.json
@@ -49,7 +49,7 @@
   },
   "filter": {
     "all": "所有",
-    "mine": "我的",
+    "personal": "我的",
     "compact-mode": "紧凑模式",
     "order-by": "排序方式",
     "direction": "方向"
diff --git a/frontend/web/src/components/CreateIdentityProviderDrawer.tsx b/frontend/web/src/components/CreateIdentityProviderDrawer.tsx
index 4adf570..e24cb2f 100644
--- a/frontend/web/src/components/CreateIdentityProviderDrawer.tsx
+++ b/frontend/web/src/components/CreateIdentityProviderDrawer.tsx
@@ -152,6 +152,7 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
             </div>
           </div>
           <Divider className="!mb-3" />
+          <p className="font-medium mb-2">Identity provider information</p>
           {isCreating && (
             <p className="shadow-sm rounded-md py-1 px-2 bg-zinc-100 dark:bg-zinc-900 text-sm w-full mb-2 break-all">
               <span className="opacity-60">Redirect URL</span>
@@ -244,6 +245,7 @@ const CreateIdentityProviderDrawer: React.FC<Props> = (props: Props) => {
             </div>
           </div>
           <Divider className="!mb-3" />
+          <p className="font-medium mb-2">Field mapping</p>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Identifier <span className="text-red-600">*</span>
diff --git a/frontend/web/src/components/Header.tsx b/frontend/web/src/components/Header.tsx
index 7970db6..2f163f5 100644
--- a/frontend/web/src/components/Header.tsx
+++ b/frontend/web/src/components/Header.tsx
@@ -1,4 +1,3 @@
-import { Avatar } from "@mui/joy";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router-dom";
@@ -38,7 +37,8 @@ const Header: React.FC = () => {
             </Link>
             {[PlanType.PRO, PlanType.ENTERPRISE].includes(profile.plan) && (
               <span className="ml-1 text-xs px-1.5 leading-5 border rounded-full bg-blue-600 border-blue-700 text-white shadow dark:opacity-70">
-                {profile.plan}
+                {/* PRO or ENT */}
+                {profile.plan.substring(0, 3)}
               </span>
             )}
             {shouldShowRouterSwitch && (
@@ -74,13 +74,12 @@ const Header: React.FC = () => {
               </>
             )}
           </div>
-          <div className="relative flex-shrink-0">
+          <div className="relative shrink-0">
             <Dropdown
               trigger={
                 <button className="flex flex-row justify-end items-center cursor-pointer">
-                  <Avatar size="sm" variant="plain" />
-                  <span className="dark:text-gray-400">{currentUser.nickname}</span>
-                  <Icon.ChevronDown className="ml-2 w-5 h-auto text-gray-600 dark:text-gray-400" />
+                  <span className="dark:text-gray-400 max-w-20 truncate">{currentUser.nickname}</span>
+                  <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600 dark:text-gray-400" />
                 </button>
               }
               actionsClassName="!w-32"
diff --git a/frontend/web/src/components/ShortcutsNavigator.tsx b/frontend/web/src/components/ShortcutsNavigator.tsx
index 06f7772..10f62a9 100644
--- a/frontend/web/src/components/ShortcutsNavigator.tsx
+++ b/frontend/web/src/components/ShortcutsNavigator.tsx
@@ -35,7 +35,7 @@ const ShortcutsNavigator = () => {
         onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
       >
         <Icon.User className="w-4 h-auto mr-1" />
-        <span className="font-normal">{t("filter.mine")}</span>
+        <span className="font-normal">{t("filter.personal")}</span>
       </button>
       {Array.from(sortedTagMap.keys()).map((tag) => (
         <button
diff --git a/frontend/web/src/components/setting/SSOSection.tsx b/frontend/web/src/components/setting/SSOSection.tsx
index cafcabc..96bb11b 100644
--- a/frontend/web/src/components/setting/SSOSection.tsx
+++ b/frontend/web/src/components/setting/SSOSection.tsx
@@ -54,9 +54,17 @@ const SSOSection = () => {
     <>
       <div className="w-full flex flex-col gap-2 pt-2 pb-4">
         <div className="w-full flex flex-row justify-between items-center gap-1">
-          <div className="flex flex-row items-center gap-1">
+          <div className="flex flex-row justify-start items-center">
             <span className="font-medium dark:text-gray-400">SSO</span>
             <FeatureBadge className="w-5 h-auto ml-1 text-blue-600" feature={FeatureType.SSO} />
+            <a
+              className="text-blue-600 text-sm hover:underline flex flex-row justify-center items-center ml-2"
+              href="https://github.com/yourselfhosted/slash/blob/main/docs/getting-started/sso.md"
+              target="_blank"
+            >
+              <span>Learn more</span>
+              <Icon.ExternalLink className="ml-1 w-4 h-auto inline" />
+            </a>
           </div>
           <Button
             variant="outlined"
diff --git a/frontend/web/src/pages/SubscriptionSetting.tsx b/frontend/web/src/pages/SubscriptionSetting.tsx
index 2cfe17a..c0a6a38 100644
--- a/frontend/web/src/pages/SubscriptionSetting.tsx
+++ b/frontend/web/src/pages/SubscriptionSetting.tsx
@@ -27,7 +27,7 @@ const SubscriptionSetting: React.FC = () => {
         licenseKey,
       });
       if (subscription) {
-        toast.success(`Welcome to Slash-${stringifyPlanType(subscription.plan)}🎉`);
+        toast.success(`Welcome to Slash ${stringifyPlanType(subscription.plan)}🎉`);
       }
     } catch (error: any) {
       toast.error(error.details);