fix: update ui

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -1,6 +1,7 @@
 import { membershipLevels } from "@/constants/membershipLevels"
 
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getMembership } from "@/utils/user"
@@ -35,12 +36,10 @@ export default async function Friend({ user }: UserProps) {
           {user.name}
         </Title>
         <div className={styles.membershipContainer}>
-          <p className={styles.membershipId}>
-            {formatMessage({ id: "Membership ID" })}:
-          </p>
-          <p className={styles.membershipId}>
+          <Caption color="pale">
+            {formatMessage({ id: "Membership ID" })}:{" "}
             {membership ? membership.membershipNumber : "N/A"}
-          </p>
+          </Caption>
         </div>
       </div>
     </section>