diff --git a/app/(tabs)/owner.tsx b/app/(tabs)/owner.tsx
index 7258872..b3f3b76 100644
--- a/app/(tabs)/owner.tsx
+++ b/app/(tabs)/owner.tsx
@@ -129,8 +129,8 @@ export default function OwnerPage() {
 
                         {/* 作品数据 */}
                         <View className='flex flex-row justify-between gap-[1rem]'>
-                            <CreateCountComponent title={t("generalSetting.storiesCreated", { ns: "personal" })} icon={<StoriesSvg width={30} height={30} />} number={userInfoDetails.stories_count} />
-                            <CreateCountComponent title={t("generalSetting.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg width={30} height={30} />} number={userInfoDetails.conversations_count} />
+                            <CreateCountComponent title={t("generalSetting.storiesCreated", { ns: "personal" })} icon={<StoriesSvg width={16} height={16} />} number={userInfoDetails.stories_count} />
+                            <CreateCountComponent title={t("generalSetting.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg width={16} height={16} />} number={userInfoDetails.conversations_count} />
                         </View>
 
                         {/* 排行榜 */}
diff --git a/app/(tabs)/setting.tsx b/app/(tabs)/setting.tsx
index 0888a81..22e9bfa 100644
--- a/app/(tabs)/setting.tsx
+++ b/app/(tabs)/setting.tsx
@@ -221,7 +221,7 @@ const Setting = () => {
                         <TouchableOpacity onPress={() => { router.push('/owner') }}>
                             <ReturnArrowSvg />
                         </TouchableOpacity>
-                        <Text style={styles.modalTitle}>{t('generalSetting.allTitle', { ns: 'personal' })}</Text>
+                        <ThemedText style={styles.modalTitle} >{t('generalSetting.allTitle', { ns: 'personal' })}</ThemedText>
                         <Text style={{ opacity: 0 }}>×</Text>
                     </View>
                     <ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>
@@ -269,11 +269,11 @@ const Setting = () => {
                         </View> */}
                         {/* 权限信息 */}
                         <View style={{ marginTop: 16 }}>
-                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('permission.permissionManagement', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('permission.permissionManagement', { ns: 'personal' })}</ThemedText>
                             <View style={styles.content}>
                                 {/* 相册权限 */}
                                 <View style={styles.item}>
-                                    <ThemedText style={styles.itemText}>{t('permission.galleryAccess', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText} type="sfPro">{t('permission.galleryAccess', { ns: 'personal' })}</ThemedText>
                                     <CustomSwitch
                                         isEnabled={albumEnabled}
                                         toggleSwitch={toggleAlbum}
@@ -284,7 +284,7 @@ const Setting = () => {
                                 {/* 位置权限 */}
                                 <View style={styles.item}>
                                     <View>
-                                        <ThemedText style={styles.itemText}>{t('permission.locationPermission', { ns: 'personal' })}</ThemedText>
+                                        <ThemedText style={styles.itemText} type="sfPro">{t('permission.locationPermission', { ns: 'personal' })}</ThemedText>
                                     </View>
                                     <CustomSwitch
                                         isEnabled={locationEnabled}
@@ -294,7 +294,7 @@ const Setting = () => {
                                 <Divider />
                                 <View style={styles.item}>
                                     <View>
-                                        <ThemedText style={styles.itemText}>{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
+                                        <ThemedText style={styles.itemText} type="sfPro">{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
                                     </View>
                                     <CustomSwitch
                                         isEnabled={notificationsEnabled}
@@ -335,62 +335,62 @@ const Setting = () => {
                         </View> */}
                         {/* 协议 */}
                         <View style={{ marginTop: 16 }}>
-                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('lcenses.title', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('lcenses.title', { ns: 'personal' })}</ThemedText>
                             <View style={styles.content}>
                                 <TouchableOpacity style={styles.item} onPress={() => { setModalType('privacy'); setPrivacyModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText}>{t('lcenses.privacyPolicy', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.privacyPolicy', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={styles.item} onPress={() => { setModalType('terms'); setPrivacyModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText}>{t('lcenses.applyPermission', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.applyPermission', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={styles.item} onPress={() => { setModalType('user'); setPrivacyModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText}>{t('lcenses.userAgreement', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.userAgreement', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={styles.item} onPress={() => { setModalType('ai'); setPrivacyModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText}>{t('lcenses.aiPolicy', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.aiPolicy', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={styles.item} onPress={() => { setLcensesModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText}>{t('lcenses.qualification', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.qualification', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={[styles.item, { display: language == "en" ? 'none' : 'flex' }]} onPress={() => Linking.openURL("https://beian.miit.gov.cn/")} >
-                                    <ThemedText style={styles.itemText}>{t('lcenses.ICP', { ns: 'personal' })}沪ICP备2025133004号-2A</ThemedText>
+                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.ICP', { ns: 'personal' })}沪ICP备2025133004号-2A</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                             </View>
                         </View>
                         {/* 其他信息 */}
                         <View style={{ marginTop: 16 }}>
-                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.otherInformation', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('generalSetting.otherInformation', { ns: 'personal' })}</ThemedText>
                             <View style={styles.content}>
                                 <TouchableOpacity style={styles.item} onPress={() => Linking.openURL("https://work.weixin.qq.com/kfid/kfca0ac87f4e05e8bfd")} >
-                                    <ThemedText style={styles.itemText}>{t('generalSetting.contactUs', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText} type="sfPro">{t('generalSetting.contactUs', { ns: 'personal' })}</ThemedText>
                                     {/* <RightArrowSvg /> */}
                                 </TouchableOpacity>
                                 <Divider />
                                 <View style={styles.item}>
-                                    <ThemedText style={styles.itemText}>{t('generalSetting.version', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText} type="sfPro">{t('generalSetting.version', { ns: 'personal' })}</ThemedText>
                                     <ThemedText style={styles.itemText}>{"0.5.0"}</ThemedText>
                                 </View>
                             </View>
                         </View>
                         {/* 退出 */}
                         <TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={handleLogout}>
-                            <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.logout', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('generalSetting.logout', { ns: 'personal' })}</ThemedText>
                             <LogoutSvg />
                         </TouchableOpacity>
                         {/* 注销账号 */}
                         <TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={() => setDeleteModalVisible(true)}>
-                            <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.deleteAccount', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('generalSetting.deleteAccount', { ns: 'personal' })}</ThemedText>
                             <DeleteSvg />
                         </TouchableOpacity>
                     </ScrollView>
diff --git a/app/(tabs)/top.tsx b/app/(tabs)/top.tsx
index 8916bde..08b4d30 100644
--- a/app/(tabs)/top.tsx
+++ b/app/(tabs)/top.tsx
@@ -172,7 +172,7 @@ export default function OwnerPage() {
                 <TouchableOpacity onPress={() => { router.push('/owner') }} style={{ padding: 16 }}>
                     <ReturnArrowSvg />
                 </TouchableOpacity>
-                <ThemedText style={styles.headerTitle}>
+                <ThemedText style={styles.headerTitle} >
                     Top Memory Makers
                 </ThemedText>
                 <ThemedText className='opacity-0'>123</ThemedText>
diff --git a/components/cascader.tsx b/components/cascader.tsx
index 9e0d8b1..f9e5057 100644
--- a/components/cascader.tsx
+++ b/components/cascader.tsx
@@ -95,6 +95,7 @@ const CascaderComponent: React.FC<CascaderProps> = ({
                                             textStyle,
                                             isActive && [styles.activeText, activeTextStyle]
                                         ]}
+                                        type='sfPro'
                                     >
                                         {item.name}
                                     </ThemedText>
diff --git a/components/owner/classify.tsx b/components/owner/classify.tsx
index d2214db..028d2e1 100644
--- a/components/owner/classify.tsx
+++ b/components/owner/classify.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Modal from 'react-native-modal';
 import Cascader, { CascaderItem } from '../cascader';
+import { ThemedText } from '../ThemedText';
 
 interface ClassifyModalProps {
     modalVisible: boolean;
@@ -39,9 +40,9 @@ const ClassifyModal = (props: ClassifyModalProps) => {
             <View style={styles.modalView}>
                 <View style={styles.modalHeader}>
                     <Text style={{ opacity: 0 }}>Settings</Text>
-                    <Text style={styles.modalTitle}>{t('generalSetting.classify', { ns: 'personal' })}</Text>
+                    <ThemedText style={styles.modalTitle}>{t('generalSetting.classify', { ns: 'personal' })}</ThemedText>
                     <TouchableOpacity onPress={() => setModalVisible(false)}>
-                        <Text style={styles.closeButton}>×</Text>
+                        <ThemedText style={styles.closeButton}>×</ThemedText>
                     </TouchableOpacity>
                 </View>
                 <ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>
diff --git a/components/owner/createCount.tsx b/components/owner/createCount.tsx
index 64cdfee..342ce45 100644
--- a/components/owner/createCount.tsx
+++ b/components/owner/createCount.tsx
@@ -20,12 +20,10 @@ const CreateCountComponent = React.memo((props: CreateCountProps) => {
     return (
         <View style={containerStyle}>
             <View style={styles.header}>
-                <View className="mt-1">
-                    {props.icon}
-                </View>
-                <ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
+                <ThemedText type="sfPro" weight="bold" color="textSecondary" size="xxs" style={{ lineHeight: 16 }}>{props.title}</ThemedText>
+                {props.icon}
             </View>
-            <ThemedText style={styles.number} className="!text-textSecondary">{props.number}</ThemedText>
+            <ThemedText weight="bold" color="textSecondary" size="title" style={{ lineHeight: 36, textAlign: "right" }}>{props.number}</ThemedText>
         </View>
     );
 });
@@ -35,11 +33,12 @@ const styles = StyleSheet.create({
         flex: 1,
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
+        // alignItems: "center",
         justifyContent: "center",
         gap: 8,
         backgroundColor: "#FAF9F6",
-        padding: 16,
+        paddingVertical: 16,
+        paddingRight: 16,
         borderRadius: 12,
         shadowColor: "#000",
         shadowOffset: {
@@ -51,13 +50,12 @@ const styles = StyleSheet.create({
         // elevation: 1,
     },
     header: {
-        width: "100%",
+        width: "90%",
         display: "flex",
         flexDirection: "row",
-        alignItems: "center",
         paddingHorizontal: 16,
-        justifyContent: "center",
-        gap: 8,
+        alignItems: "flex-start",
+        gap: 4,
     },
     title: {
         fontSize: 20,
diff --git a/components/owner/podium.tsx b/components/owner/podium.tsx
index 228968b..5630021 100644
--- a/components/owner/podium.tsx
+++ b/components/owner/podium.tsx
@@ -36,6 +36,7 @@ const PodiumComponent = ({ data }: IPodium) => {
                         numberOfLines={1}
                         ellipsizeMode="tail"
                         style={styles.title}
+                        type="inter"
                     >
                         {data[1]?.user_nick_name}
                     </ThemedText>
@@ -65,6 +66,7 @@ const PodiumComponent = ({ data }: IPodium) => {
                         numberOfLines={2}
                         ellipsizeMode="tail"
                         style={styles.title}
+                        type="inter"
                     >
                         {data[0]?.user_nick_name}
                     </ThemedText>
@@ -94,6 +96,7 @@ const PodiumComponent = ({ data }: IPodium) => {
                         numberOfLines={1}
                         ellipsizeMode="tail"
                         style={styles.title}
+                        type="inter"
                     >
                         {data[2]?.user_nick_name}
                     </ThemedText>
diff --git a/components/owner/rankList.tsx b/components/owner/rankList.tsx
index 102f47c..63780b7 100644
--- a/components/owner/rankList.tsx
+++ b/components/owner/rankList.tsx
@@ -15,9 +15,9 @@ const RankList = (props: IRankList) => {
             contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, marginTop: 16 }}
         >
             <View style={styles.item}>
-                <ThemedText style={styles.headerText}>Rank</ThemedText>
-                <ThemedText style={styles.headerText}>Username</ThemedText>
-                <ThemedText style={styles.headerText}>Profile</ThemedText>
+                <ThemedText style={styles.headerText} type="sfPro">Rank</ThemedText>
+                <ThemedText style={styles.headerText} type="sfPro">Username</ThemedText>
+                <ThemedText style={styles.headerText} type="sfPro">Profile</ThemedText>
             </View>
             {props.data?.filter((item, index) => index > 2).map((item, index) => (
                 <View
@@ -35,8 +35,8 @@ const RankList = (props: IRankList) => {
                             <OwnerSvg width="100%" height="100%" />
                         </View>
                     )}
-                    <ThemedText style={styles.itemRank}>{index + 1}</ThemedText>
-                    <ThemedText style={styles.itemName}>{item.user_nick_name}</ThemedText>
+                    <ThemedText style={styles.itemRank} type="sfPro">{index + 1}</ThemedText>
+                    <ThemedText style={styles.itemName} type="inter">{item.user_nick_name}</ThemedText>
                     <View style={{ opacity: index == 1 ? 0 : 1 }}>
                         {(() => {
                             const [imageError, setImageError] = useState(false);
@@ -66,9 +66,9 @@ const styles = StyleSheet.create({
         backgroundColor: 'white',
     },
     headerText: {
-        fontSize: 14,
+        fontSize: 12,
         color: "#4C320C",
-        fontWeight: "600"
+        fontWeight: "500"
     },
     item: {
         flexDirection: 'row',
@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
         fontWeight: "700"
     },
     itemName: {
-        fontSize: 14,
+        fontSize: 12,
         color: "#AC7E35",
     },
     self: {
diff --git a/components/owner/userInfo.tsx b/components/owner/userInfo.tsx
index 985c6dc..c9190d3 100644
--- a/components/owner/userInfo.tsx
+++ b/components/owner/userInfo.tsx
@@ -79,11 +79,11 @@ const UserInfo = (props: UserInfoProps) => {
     return (
         <View style={styles.container}>
             <View style={styles.info}>
-                <ThemedText style={styles.nickname}>{userInfo?.nickname}</ThemedText>
-                <ThemedText style={styles.userId}>{t('generalSetting.userId', { ns: 'personal' })}{userInfo?.user_id}</ThemedText>
+                <ThemedText style={styles.nickname} type="sfPro">{userInfo?.nickname}</ThemedText>
+                <ThemedText style={styles.userId} type="inter">{t('generalSetting.userId', { ns: 'personal' })}{userInfo?.user_id}</ThemedText>
                 <View style={styles.location}>
                     <LocationSvg />
-                    <ThemedText style={styles.userId}>
+                    <ThemedText style={styles.userId} type="inter">
                         {currentLocation?.country}-{currentLocation?.city}-{currentLocation?.district}
                     </ThemedText>
                     <TouchableOpacity
diff --git a/components/owner/userName.tsx b/components/owner/userName.tsx
index 5335b00..e3f0380 100644
--- a/components/owner/userName.tsx
+++ b/components/owner/userName.tsx
@@ -35,9 +35,13 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
                     <View className='flex flex-row items-center gap-2 w-full justify-between'>
                         <View style={{ width: "100%", flexDirection: "row", alignItems: "center", gap: 2 }}>
                             <ThemedText
-                                style={{ maxWidth: "90%", color: '#4C320C', fontSize: 32, lineHeight: 36, fontWeight: '700' }}
+                                style={{ maxWidth: "90%", lineHeight: 30 }}
+                                weight='bold'
+                                color='textSecondary'
+                                size='3xl'
                                 numberOfLines={1}
                                 ellipsizeMode="tail"
+
                             >
                                 {userInfo?.user_info?.nickname}
                             </ThemedText>
@@ -62,6 +66,7 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
                                 flexShrink: 1,
                                 flexGrow: 0,
                             }}
+                            type="inter"
                             numberOfLines={1}
                             ellipsizeMode="tail"
                         >
@@ -91,6 +96,7 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
                             maxWidth: 40,
                             lineHeight: 20
                         }}
+                        type="inter"
                         numberOfLines={1}
                         ellipsizeMode="tail"
                     >
diff --git a/constants/Fonts.ts b/constants/Fonts.ts
index 59f0d2c..ba5036e 100644
--- a/constants/Fonts.ts
+++ b/constants/Fonts.ts
@@ -38,6 +38,6 @@ export const Fonts = {
 } as const;
 
 export type FontWeight = keyof Omit<typeof Fonts, 'quicksand' | 'sfPro' | 'inter' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'>;
-export type FontSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'title';
+export type FontSize = "xxs" | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "title";
 export type FontColor = 'bgPrimary' | 'bgSecondary' | 'textPrimary' | 'textSecondary' | 'textThird' | 'textWhite';
 
diff --git a/i18n/locales/en/personal.json b/i18n/locales/en/personal.json
index 06fce5e..82c42fb 100644
--- a/i18n/locales/en/personal.json
+++ b/i18n/locales/en/personal.json
@@ -74,7 +74,7 @@
         "confirm": "Confirm",
         "location": "Location",
         "rank": "Top Memory Makers",
-        "userId": "User ID",
+        "userId": "User ID : ",
         "usedStorage": "Storage Used",
         "remainingPoints": "Points Remaining",
         "totalVideo": "Total Videos",