diff --git a/apps/desktop/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx b/apps/desktop/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
index 6d751dcea..e74951c95 100644
--- a/apps/desktop/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
+++ b/apps/desktop/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
@@ -99,7 +99,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
                     onWheel={stopPropagation}
                     className={cn(
                       "pointer-events-auto max-h-48 grow",
-                      "shadow-perfect border-border bg-popover text-popover-foreground overflow-auto rounded-md border",
+                      "shadow-perfect border-border bg-material-medium text-text backdrop-blur-background overflow-auto rounded-md border",
                       "w-[var(--input-width)] empty:invisible",
                     )}
                   >
diff --git a/apps/desktop/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx b/apps/desktop/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
index 609f4eb4f..295535b00 100644
--- a/apps/desktop/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
+++ b/apps/desktop/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
@@ -62,7 +62,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
+      "bg-material-medium backdrop-blur-background text-text data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
       className,
     )}
     {...props}
@@ -80,7 +80,7 @@ const DropdownMenuContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-          "shadow-context-menu bg-theme-background text-theme-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1",
+          "shadow-context-menu bg-material-medium backdrop-blur-background text-text z-50 min-w-32 overflow-hidden rounded-md border p-1",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className,
         )}
@@ -164,7 +164,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
+    className={cn("bg-material-ultra-thin -mx-1 my-1 h-px", className)}
     {...props}
   />
 ))
diff --git a/apps/desktop/src/renderer/src/components/ui/modal/stacked/modal.tsx b/apps/desktop/src/renderer/src/components/ui/modal/stacked/modal.tsx
index 14a003360..704b11aba 100644
--- a/apps/desktop/src/renderer/src/components/ui/modal/stacked/modal.tsx
+++ b/apps/desktop/src/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -1,4 +1,3 @@
-import { Divider } from "@follow/components/ui/divider/index.js"
 import { RootPortalProvider } from "@follow/components/ui/portal/provider.js"
 import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js"
 import { ZIndexProvider } from "@follow/components/ui/z-index/index.js"
@@ -213,7 +212,7 @@ export const ModalInternal = memo(
       [autoFocus],
     )
 
-    const measureDragConstraints = useCallback((constraints: BoundingBox) => {
+    const measureDragConstraints = useRef((constraints: BoundingBox) => {
       if (getOS() === "Windows") {
         return {
           ...constraints,
@@ -221,7 +220,7 @@ export const ModalInternal = memo(
         }
       }
       return constraints
-    }, [])
+    }).current
 
     useImperativeHandle(ref, () => modalElementRef.current!)
     const currentModalZIndex = MODAL_STACK_Z_INDEX + index * 2
@@ -382,7 +381,7 @@ export const ModalInternal = memo(
                         </Dialog.DialogClose>
                       )}
                     </div>
-                    <Divider className="my-2 shrink-0 border-slate-200 opacity-80 dark:border-neutral-800" />
+                    <div className="my-2 h-px w-full shrink-0 bg-slate-200 dark:bg-neutral-800" />
 
                     <div className="-mx-2 min-h-0 shrink grow overflow-auto px-6 py-2">
                       <ModalContext modalContextProps={ModalContextProps} isTop={!!isTop}>
diff --git a/apps/desktop/src/renderer/src/modules/achievement/AchievementModalContent.tsx b/apps/desktop/src/renderer/src/modules/achievement/AchievementModalContent.tsx
index 1b2d80653..214b9f98e 100644
--- a/apps/desktop/src/renderer/src/modules/achievement/AchievementModalContent.tsx
+++ b/apps/desktop/src/renderer/src/modules/achievement/AchievementModalContent.tsx
@@ -242,7 +242,7 @@ export const AchievementModalContent: FC = () => {
                         </MotionButtonBase>
                       )}
                     </div>
-                    <div className="text-muted-foreground flex items-center text-sm">
+                    <div className="text-text-secondary flex items-center text-sm">
                       {t(copy.description)}
                     </div>
                   </div>
@@ -261,16 +261,30 @@ export const AchievementModalContent: FC = () => {
                     <IncompleteButton achievement={achievement} refetch={refetch} />
                   )}
                   {achievement.type === "received" && (
-                    <div
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (copy.video) {
+                          presentBadgeVideo(achievement.actionId)
+                        }
+                      }}
                       className={styledButtonVariant({
                         variant: "outline",
-                        className:
+                        className: [
                           "dark:text-foreground relative gap-1 border-green-200 !bg-green-100/50 text-green-800 dark:border-green-200/20 dark:!bg-green-100/5",
+                          copy.video ? "cursor-button" : "cursor-default",
+                        ],
                       })}
                     >
-                      <i className="i-mgc-check-filled" />
-                      {t("achievement.all_done")}
-                    </div>
+                      {copy.video && achievement.type === "received" ? (
+                        <>View Badge</>
+                      ) : (
+                        <>
+                          <i className="i-mgc-check-filled" />
+                          {t("achievement.all_done")}
+                        </>
+                      )}
+                    </button>
                   )}
 
                   {achievement.type === "audit" && (
@@ -300,9 +314,7 @@ export const AchievementModalContent: FC = () => {
         </ul>
       </ScrollArea>
 
-      <p className="text-muted-foreground mt-4 pb-2 text-xs">
-        * {t("achievement.nft_coming_soon")}
-      </p>
+      <p className="text-text-tertiary mt-4 pb-4 text-xs">* {t("achievement.nft_coming_soon")}</p>
     </div>
   )
 }
@@ -428,7 +440,7 @@ const IncompleteButton: FC<{
           </div>
           <div className="duration-200 group-hover:opacity-30">
             <span className="center relative ml-2 inline-flex w-24 -translate-y-1 flex-col *:!m-0">
-              <small className="text-muted-foreground shrink-0 text-xs leading-tight">
+              <small className="text-text shrink-0 text-xs leading-tight">
                 {achievement.progress} / {achievement.progressMax}
               </small>
               <span className="bg-accent/10 relative h-1 w-full overflow-hidden rounded-full">
diff --git a/apps/desktop/src/renderer/src/modules/app-layout/feed-column/components/PodcastButton.tsx b/apps/desktop/src/renderer/src/modules/app-layout/feed-column/components/PodcastButton.tsx
index d7dcf44ea..95a132c84 100644
--- a/apps/desktop/src/renderer/src/modules/app-layout/feed-column/components/PodcastButton.tsx
+++ b/apps/desktop/src/renderer/src/modules/app-layout/feed-column/components/PodcastButton.tsx
@@ -39,7 +39,7 @@ export const PodcastButton = ({ feed }: { feed: FeedModel }) => {
               >
                 {entry.entries.title}
               </Marquee>
-              <div className="text-muted-foreground mt-0.5 overflow-hidden truncate text-xs">
+              <div className="text-text mt-0.5 overflow-hidden truncate text-xs">
                 <span>{feed.title}</span>
                 <span> · </span>
                 <span>
@@ -92,11 +92,7 @@ export const PodcastButton = ({ feed }: { feed: FeedModel }) => {
 }
 
 const ActionIcon = ({ className, onClick }: { className?: string; onClick?: () => void }) => (
-  <button
-    type="button"
-    className="center text-muted-foreground size-10 rounded-full"
-    onClick={onClick}
-  >
+  <button type="button" className="center text-text size-10 rounded-full" onClick={onClick}>
     <i className={className} />
   </button>
 )
@@ -113,10 +109,8 @@ const PlaybackRateButton = () => {
   }
 
   return (
-    <button onClick={handleClick}>
-      <span className="text-muted-foreground block font-mono text-xs">
-        {rates[currentIndex]!.toFixed(2)}x
-      </span>
+    <button onClick={handleClick} type="button">
+      <span className="text-text block font-mono text-xs">{rates[currentIndex]!.toFixed(2)}x</span>
     </button>
   )
 }
diff --git a/apps/desktop/src/renderer/src/modules/auth/LoginModalContent.tsx b/apps/desktop/src/renderer/src/modules/auth/LoginModalContent.tsx
index 058eaaddf..dffbc2ff1 100644
--- a/apps/desktop/src/renderer/src/modules/auth/LoginModalContent.tsx
+++ b/apps/desktop/src/renderer/src/modules/auth/LoginModalContent.tsx
@@ -57,7 +57,7 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
         <div className="my-3 w-full space-y-2">
           <div className="flex items-center justify-center">
             <Divider className="flex-1" />
-            <p className="text-muted-foreground px-4 text-center text-sm">{t("login.or")}</p>
+            <p className="text-text-tertiary px-4 text-center text-sm">{t("login.or")}</p>
             <Divider className="flex-1" />
           </div>
         </div>
@@ -73,7 +73,7 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
               >
                 <div
                   className={clsx(
-                    "center hover:bg-muted inline-flex rounded-full border p-2.5 duration-200 [&_svg]:size-6",
+                    "center hover:bg-material-medium inline-flex rounded-full border p-2.5 duration-200 [&_svg]:size-6",
                     overrideAuthProvidersClassName[key],
                   )}
                   dangerouslySetInnerHTML={{
diff --git a/apps/desktop/src/renderer/src/modules/discover/recommendations-card.tsx b/apps/desktop/src/renderer/src/modules/discover/recommendations-card.tsx
index 3a3fa4f60..b86256224 100644
--- a/apps/desktop/src/renderer/src/modules/discover/recommendations-card.tsx
+++ b/apps/desktop/src/renderer/src/modules/discover/recommendations-card.tsx
@@ -87,7 +87,7 @@ export const RecommendationCard: FC<RecommendationCardProps> = memo(
                 >
                   <button
                     type="button"
-                    className="before:bg-accent group-hover:bg-muted relative rounded p-0.5 px-1 text-left duration-200 before:absolute before:inset-y-0 before:-left-2 before:mb-auto before:mt-2 before:size-1.5 before:rounded-full before:content-['']"
+                    className="before:bg-accent group-hover:bg-material-medium relative rounded p-0.5 px-1 text-left duration-200 before:absolute before:inset-y-0 before:-left-2 before:mb-auto before:mt-2 before:size-1.5 before:rounded-full before:content-['']"
                     onClick={() => {
                       present({
                         id: `recommendation-content-${route}`,
@@ -111,7 +111,7 @@ export const RecommendationCard: FC<RecommendationCardProps> = memo(
             })}
           </ul>
 
-          <div className="text-muted-foreground mt-4 flex flex-col gap-2">
+          <div className="text-text-secondary mt-4 flex flex-col gap-2">
             <div className="flex flex-1 items-center text-sm">
               <i className="i-mingcute-hammer-line mr-1 shrink-0 translate-y-0.5 self-start" />
 
@@ -141,7 +141,7 @@ export const RecommendationCard: FC<RecommendationCardProps> = memo(
                     key={c}
                     type="button"
                     className={clsx(
-                      "bg-muted/50 hover:bg-muted cursor-pointer rounded px-1.5 duration-200",
+                      "bg-material-medium hover:bg-material-medium cursor-pointer rounded px-1.5 duration-200",
                       !RSSHubCategories.includes(c) && "pointer-events-none opacity-50",
                     )}
                   >
diff --git a/apps/desktop/src/renderer/src/modules/entry-column/Items/picture-item.tsx b/apps/desktop/src/renderer/src/modules/entry-column/Items/picture-item.tsx
index f09cd1a67..d237b6cfc 100644
--- a/apps/desktop/src/renderer/src/modules/entry-column/Items/picture-item.tsx
+++ b/apps/desktop/src/renderer/src/modules/entry-column/Items/picture-item.tsx
@@ -48,7 +48,7 @@ export function PictureItem({ entryId, entryPreview, translation }: UniversalIte
             }}
           />
         ) : (
-          <div className="center bg-muted text-muted-foreground aspect-square w-full flex-col gap-1 rounded-md text-xs">
+          <div className="center bg-material-medium text-text-secondary aspect-square w-full flex-col gap-1 rounded-md text-xs">
             <i className="i-mgc-sad-cute-re size-6" />
             {t("entry_content.no_content")}
           </div>
@@ -127,7 +127,7 @@ export const PictureWaterFallItem = memo(function PictureWaterFallItem({
             </div>
           </MasonryItemFixedDimensionWrapper>
         ) : (
-          <div className="center bg-muted text-muted-foreground aspect-video flex-col gap-1 rounded-md text-xs">
+          <div className="center bg-material-medium text-text-secondary aspect-video flex-col gap-1 rounded-md text-xs">
             <i className="i-mgc-sad-cute-re size-6" />
             No media available
           </div>
diff --git a/apps/desktop/src/renderer/src/modules/entry-column/Items/video-item.tsx b/apps/desktop/src/renderer/src/modules/entry-column/Items/video-item.tsx
index 92dfb4c07..22698ca57 100644
--- a/apps/desktop/src/renderer/src/modules/entry-column/Items/video-item.tsx
+++ b/apps/desktop/src/renderer/src/modules/entry-column/Items/video-item.tsx
@@ -133,7 +133,7 @@ export function VideoItem({ entryId, entryPreview, translation }: UniversalItemP
               showFallback={true}
             />
           ) : (
-            <div className="center bg-muted text-muted-foreground aspect-video w-full flex-col gap-1 rounded-md text-xs">
+            <div className="center bg-material-medium text-text-secondary aspect-video w-full flex-col gap-1 rounded-md text-xs">
               <i className="i-mgc-sad-cute-re size-6" />
               No media available
             </div>
diff --git a/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.electron.tsx b/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.electron.tsx
index 628609329..8c9be2159 100644
--- a/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.electron.tsx
+++ b/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.electron.tsx
@@ -54,9 +54,9 @@ export const EntryReadHistory: Component<{ entryId: string }> = ({ entryId }) =>
                 marginLeft: `-${LIMIT * 8}px`,
                 zIndex: LIMIT + 1,
               }}
-              className="no-drag-region border-border bg-muted ring-background relative flex size-7 items-center justify-center rounded-full border ring-2"
+              className="no-drag-region border-border bg-material-medium ring-background relative flex size-7 items-center justify-center rounded-full border ring-2"
             >
-              <span className="text-muted-foreground text-[10px] font-medium tabular-nums">
+              <span className="text-text-secondary text-[10px] font-medium tabular-nums">
                 +{Math.min(totalCount - LIMIT, 99)}
               </span>
             </button>
diff --git a/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.mobile.tsx b/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.mobile.tsx
index ca8d5b5eb..4f9c48433 100644
--- a/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.mobile.tsx
+++ b/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.mobile.tsx
@@ -56,9 +56,9 @@ export const EntryReadHistory: Component<{ entryId: string }> = ({ entryId }) =>
               marginLeft: `-${LIMIT * 8}px`,
               zIndex: LIMIT + 1,
             }}
-            className="no-drag-region border-border bg-muted ring-background relative flex size-7 items-center justify-center rounded-full border ring-2"
+            className="no-drag-region border-border bg-material-medium ring-background relative flex size-7 items-center justify-center rounded-full border ring-2"
           >
-            <span className="text-muted-foreground text-[10px] font-medium tabular-nums">
+            <span className="text-text-secondary text-[10px] font-medium tabular-nums">
               +{Math.min(totalCount - LIMIT, 99)}
             </span>
           </button>
diff --git a/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.shared.tsx b/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.shared.tsx
index 96115acb1..a9efb259b 100644
--- a/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.shared.tsx
+++ b/apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.shared.tsx
@@ -48,7 +48,7 @@ export const EntryUserRow: Component<{ userId: string }> = memo(({ userId }) =>
       }}
       role="button"
       tabIndex={0}
-      className="cursor-button hover:bg-muted relative flex min-w-0 max-w-[50ch] shrink-0 items-center gap-2 truncate rounded-md p-1 px-2"
+      className="cursor-button hover:bg-material-medium relative flex min-w-0 max-w-[50ch] shrink-0 items-center gap-2 truncate rounded-md p-1 px-2"
     >
       <Avatar className="border-border ring-background block aspect-square size-7 overflow-hidden rounded-full border ring-1">
         <AvatarImage src={replaceImgUrlIfNeed(user?.image || undefined)} />
diff --git a/apps/desktop/src/renderer/src/modules/player/corner-player.tsx b/apps/desktop/src/renderer/src/modules/player/corner-player.tsx
index c2addc84a..f4c76aa06 100644
--- a/apps/desktop/src/renderer/src/modules/player/corner-player.tsx
+++ b/apps/desktop/src/renderer/src/modules/player/corner-player.tsx
@@ -220,7 +220,7 @@ const CornerPlayerImpl = ({ hideControls, rounded }: ControlButtonProps) => {
           </Marquee>
           <div
             className={cn(
-              "text-muted-foreground mt-0.5 overflow-hidden truncate text-xs",
+              "text-text-secondary mt-0.5 overflow-hidden truncate text-xs",
               !isMobile && "group-hover:opacity-0",
             )}
           >
diff --git a/apps/desktop/src/renderer/src/modules/profile/email-management.tsx b/apps/desktop/src/renderer/src/modules/profile/email-management.tsx
index 3658010df..4456411b8 100644
--- a/apps/desktop/src/renderer/src/modules/profile/email-management.tsx
+++ b/apps/desktop/src/renderer/src/modules/profile/email-management.tsx
@@ -59,7 +59,7 @@ export function EmailManagement() {
           {user?.emailVerified ? t("profile.email.verified") : t("profile.email.unverified")}
         </span>
       </div>
-      <p className="text-muted-foreground group flex gap-2 text-sm">
+      <p className="text-text-secondary group flex gap-2 text-sm">
         {user?.email}
 
         <AnimatedCommandButton
diff --git a/apps/desktop/src/renderer/src/modules/profile/update-password-form.tsx b/apps/desktop/src/renderer/src/modules/profile/update-password-form.tsx
index c61c9ba47..8cbdeabc0 100644
--- a/apps/desktop/src/renderer/src/modules/profile/update-password-form.tsx
+++ b/apps/desktop/src/renderer/src/modules/profile/update-password-form.tsx
@@ -159,7 +159,7 @@ export const UpdatePasswordForm = () => {
 
 export const NoPasswordHint = ({ i18nKey }: { i18nKey: string }) => {
   return (
-    <p className="text-muted-foreground text-sm">
+    <p className="text-text-secondary text-sm">
       <Trans
         ns="settings"
         i18nKey={i18nKey as any}
diff --git a/apps/desktop/src/renderer/src/modules/rsshub/set-modal-content.tsx b/apps/desktop/src/renderer/src/modules/rsshub/set-modal-content.tsx
index 6659acedf..f8d126d0d 100644
--- a/apps/desktop/src/renderer/src/modules/rsshub/set-modal-content.tsx
+++ b/apps/desktop/src/renderer/src/modules/rsshub/set-modal-content.tsx
@@ -72,7 +72,7 @@ export function SetModalContent({
           <table className="w-full">
             <tbody className="divide-y-8 divide-transparent">
               <tr>
-                <td className="text-muted-foreground w-24 text-sm">{t("rsshub.table.owner")}</td>
+                <td className="text-text-secondary w-24 text-sm">{t("rsshub.table.owner")}</td>
                 <td>
                   <UserAvatar
                     userId={instance.ownerUserId}
@@ -82,21 +82,21 @@ export function SetModalContent({
                 </td>
               </tr>
               <tr>
-                <td className="text-muted-foreground text-sm">{t("rsshub.table.description")}</td>
+                <td className="text-text-secondary text-sm">{t("rsshub.table.description")}</td>
                 <td className="line-clamp-2">{instance.description}</td>
               </tr>
               <tr>
-                <td className="text-muted-foreground text-sm">{t("rsshub.table.price")}</td>
+                <td className="text-text-secondary text-sm">{t("rsshub.table.price")}</td>
                 <td className="flex items-center gap-1">
                   {instance.price} <i className="i-mgc-power text-accent" />
                 </td>
               </tr>
               <tr>
-                <td className="text-muted-foreground text-sm">{t("rsshub.table.userCount")}</td>
+                <td className="text-text-secondary text-sm">{t("rsshub.table.userCount")}</td>
                 <td>{instance.userCount}</td>
               </tr>
               <tr>
-                <td className="text-muted-foreground text-sm">{t("rsshub.table.userLimit")}</td>
+                <td className="text-text-secondary text-sm">{t("rsshub.table.userLimit")}</td>
                 <td>{instance.userLimit || t("rsshub.table.unlimited")}</td>
               </tr>
             </tbody>
@@ -105,7 +105,7 @@ export function SetModalContent({
       </Card>
       {details.data?.purchase && (
         <div>
-          <div className="text-muted-foreground text-sm">
+          <div className="text-text-secondary text-sm">
             {t("rsshub.useModal.purchase_expires_at")}
           </div>
           <div className="line-clamp-2">
@@ -134,7 +134,7 @@ export function SetModalContent({
                           min={hasPurchase ? 0 : 1}
                           {...field}
                         />
-                        <span className="text-muted-foreground text-sm">
+                        <span className="text-text-secondary text-sm">
                           {t("rsshub.useModal.month")}
                         </span>
                       </div>
diff --git a/apps/desktop/src/renderer/src/modules/settings/tabs/about.tsx b/apps/desktop/src/renderer/src/modules/settings/tabs/about.tsx
index 4063708b8..6e95088a7 100644
--- a/apps/desktop/src/renderer/src/modules/settings/tabs/about.tsx
+++ b/apps/desktop/src/renderer/src/modules/settings/tabs/about.tsx
@@ -35,10 +35,12 @@ export const SettingAbout = () => {
             </div>
             <div className="flex flex-wrap items-center gap-2">
               {appVersion && (
-                <span className="bg-muted rounded px-2 py-1 text-xs">app: {appVersion}</span>
+                <span className="bg-material-medium rounded px-2 py-1 text-xs">
+                  app: {appVersion}
+                </span>
               )}
               {rendererVersion && (
-                <span className="bg-muted rounded px-2 py-1 text-xs">
+                <span className="bg-material-medium rounded px-2 py-1 text-xs">
                   renderer: {rendererVersion}
                 </span>
               )}
diff --git a/apps/desktop/src/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx b/apps/desktop/src/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx
index 40f036eca..85f6b9dff 100644
--- a/apps/desktop/src/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx
+++ b/apps/desktop/src/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx
@@ -54,7 +54,7 @@ export function Component() {
           <span>{t("rsshub.add_new_instance")}</span>
         </div>
       </Button>
-      <div className="text-muted-foreground text-sm">{t("rsshub.public_instances")}</div>
+      <div className="text-text-secondary text-sm">{t("rsshub.public_instances")}</div>
       <List data={list?.data} />
     </div>
   )
diff --git a/apps/desktop/src/renderer/src/styles/scrollbar.css b/apps/desktop/src/renderer/src/styles/scrollbar.css
index 640269e84..96f67f7a3 100644
--- a/apps/desktop/src/renderer/src/styles/scrollbar.css
+++ b/apps/desktop/src/renderer/src/styles/scrollbar.css
@@ -4,7 +4,7 @@ body::-webkit-scrollbar {
 
 html:not([data-viewport="mobile"]) {
   /*  for firefox */
-  scrollbar-color: theme(colors.gray.300);
+  scrollbar-color: theme(colors.fill);
   scrollbar-width: thin;
 }
 
@@ -24,7 +24,7 @@ html:not([data-viewport="mobile"])[data-theme="dark"] {
 
 html:not([data-viewport="mobile"]) *::-webkit-scrollbar-thumb {
   background-color: transparent;
-  border: 6px solid theme(colors.gray.300);
+  border: 6px solid theme(colors.fill);
   @apply rounded-xl;
 }
 
@@ -39,11 +39,11 @@ html:not([data-viewport="mobile"]) *::-webkit-scrollbar {
 }
 
 html:not([data-viewport="mobile"]) *::-webkit-scrollbar-thumb {
-  background: theme(colors.muted.DEFAULT);
+  background: theme(colors.material-medium);
 }
 
 html:not([data-viewport="mobile"]) *::-webkit-scrollbar-thumb:hover {
-  background: theme(colors.muted.DEFAULT/80);
+  background: theme(colors.material-thin);
 }
 
 html:not([data-viewport="mobile"]) *::-webkit-scrollbar-corner {
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 97692b2d4..be64aa6c5 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -117,7 +117,7 @@
     "react-native-sheet-transitions": "0.1.2",
     "react-native-svg": "15.11.2",
     "react-native-track-player": "4.1.1",
-    "react-native-uikit-colors": "0.3.10",
+    "react-native-uikit-colors": "0.5.0",
     "react-native-video": "6.13.0",
     "react-native-volume-manager": "2.0.8",
     "react-native-web": "0.20.0",
diff --git a/apps/ssr/client/components/items/grid.tsx b/apps/ssr/client/components/items/grid.tsx
index 6f1ae95b8..6327b9b39 100644
--- a/apps/ssr/client/components/items/grid.tsx
+++ b/apps/ssr/client/components/items/grid.tsx
@@ -43,7 +43,7 @@ const Wrapper: FC<{
       rel="noopener noreferrer"
       target="_blank"
       className={cn(
-        "hover:bg-muted overflow-hidden rounded-md p-1.5 duration-200",
+        "hover:bg-material-medium overflow-hidden rounded-md p-1.5 duration-200",
         wrapperClassName,
       )}
     >
diff --git a/apps/ssr/client/modules/login/index.tsx b/apps/ssr/client/modules/login/index.tsx
index 04c9e7577..8e8ca2f18 100644
--- a/apps/ssr/client/modules/login/index.tsx
+++ b/apps/ssr/client/modules/login/index.tsx
@@ -169,7 +169,7 @@ export function Login() {
               <div className="mt-2 w-full space-y-2">
                 <div className="flex items-center justify-center">
                   <Divider className="flex-1" />
-                  <p className="text-muted-foreground px-4 text-center text-sm">{t("login.or")}</p>
+                  <p className="text-text-secondary px-4 text-center text-sm">{t("login.or")}</p>
                   <Divider className="flex-1" />
                 </div>
               </div>
@@ -184,7 +184,7 @@ export function Login() {
                       }}
                     >
                       <div
-                        className="center hover:bg-muted inline-flex rounded-full border p-2.5 duration-200 [&_svg]:size-6"
+                        className="center hover:bg-material-medium inline-flex rounded-full border p-2.5 duration-200 [&_svg]:size-6"
                         dangerouslySetInnerHTML={{
                           __html: provider.icon,
                         }}
diff --git a/apps/ssr/client/pages/(login)/register.tsx b/apps/ssr/client/pages/(login)/register.tsx
index d8d7a4b7d..f51bde9f6 100644
--- a/apps/ssr/client/pages/(login)/register.tsx
+++ b/apps/ssr/client/pages/(login)/register.tsx
@@ -129,7 +129,7 @@ function RegisterForm() {
       <h1 className="center flex text-2xl font-bold">
         {t("register.label", { app_name: APP_NAME })}
       </h1>
-      <div className="text-muted-foreground mt-2 text-center">
+      <div className="text-text-secondary mt-2 text-center">
         <Trans
           i18nKey="register.note"
           components={{
diff --git a/configs/tailwind.base.config.ts b/configs/tailwind.base.config.ts
index 29da6e8d5..34f108d17 100644
--- a/configs/tailwind.base.config.ts
+++ b/configs/tailwind.base.config.ts
@@ -1,3 +1,4 @@
+/* @moduleResolution bundler */
 import "./tw-css-plugin"
 
 import path, { resolve } from "node:path"
@@ -6,8 +7,9 @@ import { getIconCollections, iconsPlugin } from "@egoist/tailwindcss-icons"
 import { cleanupSVG, importDirectorySync, isEmptyColor, parseColors, runSVGO } from "@iconify/tools"
 import { compareColors, stringToColor } from "@iconify/utils/lib/colors"
 import type { Config } from "tailwindcss"
+import { withUIKit } from "tailwindcss-uikit-colors/src/macos/tailwind"
 
-export const baseTwConfig = {
+export const baseTwConfig = withUIKit({
   darkMode: ["class", '[data-theme="dark"]'],
   content: [],
   prefix: "",
@@ -31,24 +33,8 @@ export const baseTwConfig = {
         background: "hsl(var(--background) / <alpha-value>)",
         foreground: "hsl(var(--foreground) / <alpha-value>)",
 
-        destructive: {
-          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
-        },
         accent: "hsl(var(--fo-a) / <alpha-value>)",
 
-        popover: {
-          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card) / <alpha-value>)",
-          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
-        },
         native: {
           DEFAULT: "hsl(var(--fo-native) / <alpha-value>)",
           active: "hsl(var(--fo-native-active) / <alpha-value>)",
@@ -106,6 +92,9 @@ export const baseTwConfig = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      backdropBlur: {
+        background: "80px",
+      },
 
       typography: (theme: any) => ({
         zinc: {
@@ -133,7 +122,7 @@ export const baseTwConfig = {
 
     require(resolve(__dirname, "./tailwind-extend.css")),
   ],
-} satisfies Config
+} satisfies Config)
 
 function getCollections(dir: string) {
   // Import icons
diff --git a/locales/app/en.json b/locales/app/en.json
index 53bb9f788..f97e5b569 100644
--- a/locales/app/en.json
+++ b/locales/app/en.json
@@ -215,7 +215,7 @@
   "login.continueWith": "Continue with {{provider}}",
   "login.email": "Email",
   "login.forget_password.note": "Forgot your password?",
-  "login.or": "Or",
+  "login.or": "OR",
   "login.password": "Password",
   "login.signUp": "Sign up with email",
   "login.submit": "Submit",
diff --git a/package.json b/package.json
index 3e221eded..bff1a4137 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-motion": "1.1.0",
     "tailwindcss-safe-area": "0.6.0",
+    "tailwindcss-uikit-colors": "0.5.0",
     "tar": "7.4.3",
     "tsx": "4.19.3",
     "turbo": "2.5.0",
diff --git a/packages/components/assets/colors-media.css b/packages/components/assets/colors-media.css
index b96becfa5..9788bca54 100644
--- a/packages/components/assets/colors-media.css
+++ b/packages/components/assets/colors-media.css
@@ -26,16 +26,7 @@
 
   --background: 0 0% 100%;
   --foreground: 20 14.3% 4.1%;
-  --card: 0 0% 100%;
-  --card-foreground: 20 14.3% 4.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 20 14.3% 4.1%;
 
-  --muted: 60 4.8% 95.9%;
-  --muted-foreground: 25 5.3% 44.7%;
-
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 60 9.1% 97.8%;
   --border: 20 5.9% 90%;
   --radius: 0.5rem;
 }
@@ -68,16 +59,7 @@
 
     --background: 0 0% 7.1%;
     --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
 
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
     --border: 0 0% 22.1%;
   }
 }
diff --git a/packages/components/assets/index.css b/packages/components/assets/index.css
index 849b5eb84..5b50001fe 100644
--- a/packages/components/assets/index.css
+++ b/packages/components/assets/index.css
@@ -1,3 +1,4 @@
 @import "./colors.css";
 @import "./tailwind.css";
 @import "./font.css";
+@import "tailwindcss-uikit-colors/macos/selector.css";
diff --git a/packages/components/assets/tailwind.css b/packages/components/assets/tailwind.css
index 2fc3fd0ad..d45d52fcc 100644
--- a/packages/components/assets/tailwind.css
+++ b/packages/components/assets/tailwind.css
@@ -13,16 +13,7 @@
   [data-theme="light"] {
     --background: 0 0% 100%;
     --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
 
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
     --border: 20 5.9% 90%;
     --radius: 0.5rem;
   }
@@ -30,16 +21,7 @@
   [data-theme="dark"] {
     --background: 0 0% 7.1%;
     --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
 
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
     --border: 0 0% 22.1%;
   }
 }
diff --git a/packages/components/package.json b/packages/components/package.json
index 712723b2a..de0520670 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -72,6 +72,7 @@
     "remark-gh-alerts": "0.0.3",
     "remark-rehype": "11.1.2",
     "sonner": "2.0.3",
+    "tailwindcss-uikit-colors": "0.5.0",
     "unified": "11.0.5",
     "unist-util-visit": "5.0.0",
     "unist-util-visit-parents": "5.1.3",
diff --git a/packages/components/src/ui/avatar/index.tsx b/packages/components/src/ui/avatar/index.tsx
index 5305f2e40..5fc947a3d 100644
--- a/packages/components/src/ui/avatar/index.tsx
+++ b/packages/components/src/ui/avatar/index.tsx
@@ -35,7 +35,7 @@ export const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "bg-muted flex size-full items-center justify-center rounded-full text-xs",
+      "bg-material-medium flex size-full items-center justify-center rounded-full text-xs",
       className,
     )}
     {...props}
diff --git a/packages/components/src/ui/card/index.tsx b/packages/components/src/ui/card/index.tsx
index 233e85710..8f12f1492 100644
--- a/packages/components/src/ui/card/index.tsx
+++ b/packages/components/src/ui/card/index.tsx
@@ -5,7 +5,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("bg-card text-card-foreground rounded-lg border", className)}
+      className={cn("text-text rounded-lg border bg-white dark:bg-zinc-950/80", className)}
       {...props}
     />
   ),
@@ -34,7 +34,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  <p ref={ref} className={cn("text-text-secondary text-sm", className)} {...props} />
 ))
 CardDescription.displayName = "CardDescription"
 
diff --git a/packages/components/src/ui/divider/Divider.tsx b/packages/components/src/ui/divider/Divider.tsx
index f28bdbfe8..6625a1628 100644
--- a/packages/components/src/ui/divider/Divider.tsx
+++ b/packages/components/src/ui/divider/Divider.tsx
@@ -7,7 +7,11 @@ export const Divider: FC<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHR
   const { className, ...rest } = props
   return (
     <hr
-      className={cn("my-4 h-[0.5px] border-0 bg-black/30 dark:bg-white/30", className)}
+      className={cn(
+        "my-4 h-[0.5px] border-0",
+        "bg-[#282828] !opacity-[0.36] dark:bg-[#F6F6F6]",
+        className,
+      )}
       {...rest}
     />
   )
@@ -20,7 +24,8 @@ export const DividerVertical: FC<
   return (
     <span
       className={cn(
-        "mx-3 inline-block h-full w-[0.5px] select-none bg-black text-transparent !opacity-20 dark:bg-white",
+        "mx-3 inline-block h-full w-[0.5px] select-none text-transparent",
+        "bg-[#282828] opacity-[0.36] dark:bg-[#F6F6F6]",
         className,
       )}
       {...rest}
diff --git a/packages/components/src/ui/form/index.tsx b/packages/components/src/ui/form/index.tsx
index e6e4931d9..74efe8aba 100644
--- a/packages/components/src/ui/form/index.tsx
+++ b/packages/components/src/ui/form/index.tsx
@@ -80,7 +80,7 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-destructive", "font-semibold", className)}
+      className={cn(error && "text-red", "font-semibold", className)}
       htmlFor={formItemId}
       {...props}
     />
@@ -116,7 +116,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-muted-foreground text-xs", className)}
+      className={cn("text-text-secondary text-xs", className)}
       {...props}
     />
   )
@@ -138,7 +138,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-destructive text-sm font-medium", className)}
+      className={cn("text-red text-sm font-medium", className)}
       {...props}
     >
       {body}
diff --git a/packages/components/src/ui/navigation-menu/index.tsx b/packages/components/src/ui/navigation-menu/index.tsx
index f9f607f34..4e24f71de 100644
--- a/packages/components/src/ui/navigation-menu/index.tsx
+++ b/packages/components/src/ui/navigation-menu/index.tsx
@@ -72,7 +72,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "bg-material-medium backdrop-blur-background text-text data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
         className,
       )}
       ref={ref}
diff --git a/packages/components/src/ui/segment/index.tsx b/packages/components/src/ui/segment/index.tsx
index 6e4eee232..26315041e 100644
--- a/packages/components/src/ui/segment/index.tsx
+++ b/packages/components/src/ui/segment/index.tsx
@@ -33,7 +33,7 @@ export const SegmentGroup = (props: ComponentType<SegmentGroupProps>) => {
       <div
         role="tablist"
         className={cn(
-          "bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
+          "bg-material-medium text-text-secondary inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
           className,
         )}
         tabIndex={0}
diff --git a/packages/components/src/ui/select/index.tsx b/packages/components/src/ui/select/index.tsx
index 829d7b02b..1697a331f 100644
--- a/packages/components/src/ui/select/index.tsx
+++ b/packages/components/src/ui/select/index.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "placeholder:text-muted-foreground flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "placeholder:text-text-secondary flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       "ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
       "border-border border",
       size === "sm" ? "h-7 p-2 text-sm" : "h-9 px-3 py-2 text-sm",
@@ -72,11 +72,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "shadow-perfect bg-popover text-popover-foreground relative max-h-96 min-w-32 overflow-hidden rounded-md border",
-        position === "popper" && [
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        ],
+        "shadow-perfect bg-material-medium backdrop-blur-background relative max-h-96 min-w-32 overflow-hidden rounded-md border",
         className,
       )}
       position={position}
@@ -138,7 +134,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
+    className={cn("bg-material-medium -mx-1 my-1 h-px", className)}
     {...props}
   />
 ))
diff --git a/packages/components/src/ui/select/responsive.tsx b/packages/components/src/ui/select/responsive.tsx
index 22c2d3059..9752ec967 100644
--- a/packages/components/src/ui/select/responsive.tsx
+++ b/packages/components/src/ui/select/responsive.tsx
@@ -59,7 +59,7 @@ export const ResponsiveSelect = ({
         type="button"
         onClick={() => realSelectRef?.click()}
         className={cn(
-          "placeholder:text-muted-foreground flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+          "placeholder:text-text-secondary flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
           "ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
           "border-border border",
           size === "sm" ? "h-7 p-2 text-sm" : "h-9 px-3 py-2 text-sm",
diff --git a/packages/components/src/ui/table/index.tsx b/packages/components/src/ui/table/index.tsx
index aa99ecb67..3f6c9933b 100644
--- a/packages/components/src/ui/table/index.tsx
+++ b/packages/components/src/ui/table/index.tsx
@@ -34,7 +34,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+    className={cn("bg-material-thin border-t font-medium [&>tr]:last:border-b-0", className)}
     {...props}
   />
 ))
@@ -44,7 +44,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
-      className={cn("data-[state=selected]:bg-muted transition-colors", className)}
+      className={cn("data-[state=selected]:bg-material-medium transition-colors", className)}
       {...props}
     />
   ),
@@ -60,7 +60,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
     <th
       ref={ref}
       className={cn(
-        "text-muted-foreground text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+        "text-text-secondary text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
         tableHeadVariants({ size, className }),
       )}
       {...props}
@@ -91,7 +91,7 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
+  <caption ref={ref} className={cn("text-text-secondary mt-4 text-sm", className)} {...props} />
 ))
 TableCaption.displayName = "TableCaption"
 
diff --git a/packages/components/src/ui/tabs/index.tsx b/packages/components/src/ui/tabs/index.tsx
index afb5750b7..acd3637f4 100644
--- a/packages/components/src/ui/tabs/index.tsx
+++ b/packages/components/src/ui/tabs/index.tsx
@@ -57,7 +57,7 @@ const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, T
       <TabsPrimitive.List
         ref={ref}
         className={cn(
-          "text-muted-foreground relative inline-flex items-center justify-center",
+          "text-text-secondary relative inline-flex items-center justify-center",
           className,
         )}
       >
@@ -67,7 +67,7 @@ const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, T
           className={cn(
             "absolute left-0 duration-200 will-change-[transform,width]",
             variant === "rounded"
-              ? "bg-muted group-hover:bg-theme-item-hover inset-0 z-0 h-full rounded-lg"
+              ? "bg-material-medium group-hover:bg-theme-item-hover inset-0 z-0 h-full rounded-lg"
               : "bg-accent bottom-0 h-0.5 rounded",
           )}
           style={{
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c03196a5a..eb7ff9630 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -181,6 +181,9 @@ importers:
       tailwindcss-safe-area:
         specifier: 0.6.0
         version: 0.6.0(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3)))
+      tailwindcss-uikit-colors:
+        specifier: 0.5.0
+        version: 0.5.0
       tar:
         specifier: 7.4.3
         version: 7.4.3
@@ -1061,8 +1064,8 @@ importers:
         specifier: 4.1.1
         version: 4.1.1(patch_hash=24a9527477cf307020abf337d3f5db78cdc015636e7ab47d085a1eb5792a5ff0)(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1)
       react-native-uikit-colors:
-        specifier: 0.3.10
-        version: 0.3.10(27f1c20b5429d566f2f56a15bc4a2371)
+        specifier: 0.5.0
+        version: 0.5.0(27f1c20b5429d566f2f56a15bc4a2371)
       react-native-video:
         specifier: 6.13.0
         version: 6.13.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1)
@@ -1472,6 +1475,9 @@ importers:
       sonner:
         specifier: 2.0.3
         version: 2.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tailwindcss-uikit-colors:
+        specifier: 0.5.0
+        version: 0.5.0
       unified:
         specifier: 11.0.5
         version: 11.0.5
@@ -6532,8 +6538,8 @@ packages:
     os: [darwin]
     hasBin: true
 
-  apple-uikit-colors@0.3.10:
-    resolution: {integrity: sha512-X0JDuFSHCdTxmrspiIq2jb1u5xgh4w2Bi4C9hlBPFrlJMU2qcEdNjXDzBVg9gJAdc+UwRoOwuIikR3l0kkNJTQ==}
+  apple-uikit-colors@0.5.0:
+    resolution: {integrity: sha512-4xucVg1ulEh3F48PzbZ9wa7qJ0CwUaOgxuF+rtqTJYSYuus26HaH9xc5QnKpgd2scs9qg4AOP7oo2ACrk+pRZw==}
 
   archiver-utils@2.1.0:
     resolution: {integrity: sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==}
@@ -12881,8 +12887,8 @@ packages:
       shaka-player:
         optional: true
 
-  react-native-uikit-colors@0.3.10:
-    resolution: {integrity: sha512-7YgdTZw7vJWg2l7lEAkn0Prs9hLBYPRbDOxzpqLqZLKo2KSbpvf8OCPxlzFoXhZ2fLCbRWHxZZ7YjmHAZhhvgQ==}
+  react-native-uikit-colors@0.5.0:
+    resolution: {integrity: sha512-CVZXlKXhTLJDL+M5mWzPfnM7RwIjGze0J85fMHOFm9nWxt4tEd/iFtgWOACQ3xplZJ3UBz2ZFry8iZcUu/jeGA==}
     peerDependencies:
       nativewind: '>=4.1.0'
       react: 18.3.1
@@ -14007,8 +14013,8 @@ packages:
     peerDependencies:
       tailwindcss: ^2.0.0 || >=3.0.0
 
-  tailwindcss-uikit-colors@0.3.10:
-    resolution: {integrity: sha512-++vPFEcbIM+13XSl/mFcF43PY4y7qMatnN0SuxvuaMRLPVQB9PHJ/QX1ZmaeiGK9idym8RQP4tIQv4NjkkrSVw==}
+  tailwindcss-uikit-colors@0.5.0:
+    resolution: {integrity: sha512-Puvb9js7VJ9fTcAuf9xKcHnRSzGoQTEnxAOlwPP8d55fvldECqW1tXevze6OGM7gT8Fl7B3wp2FgJPCDC7DrCg==}
 
   tailwindcss@3.4.17:
     resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
@@ -21678,7 +21684,7 @@ snapshots:
       repeat-string: 1.6.1
     optional: true
 
-  apple-uikit-colors@0.3.10: {}
+  apple-uikit-colors@0.5.0: {}
 
   archiver-utils@2.1.0:
     dependencies:
@@ -29359,14 +29365,14 @@ snapshots:
       react: 18.3.1
       react-native: 0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)
 
-  react-native-uikit-colors@0.3.10(27f1c20b5429d566f2f56a15bc4a2371):
+  react-native-uikit-colors@0.5.0(27f1c20b5429d566f2f56a15bc4a2371):
     dependencies:
-      apple-uikit-colors: 0.3.10
+      apple-uikit-colors: 0.5.0
       nativewind: 4.1.23(react-native-reanimated@3.17.4(@babel/core@7.26.10)(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1))(react-native-safe-area-context@5.4.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1))(react-native-svg@15.11.2(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1))(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3)))
       react: 18.3.1
       react-native: 0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)
       tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3))
-      tailwindcss-uikit-colors: 0.3.10
+      tailwindcss-uikit-colors: 0.5.0
 
   react-native-video@6.13.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1):
     dependencies:
@@ -30801,9 +30807,9 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3))
 
-  tailwindcss-uikit-colors@0.3.10:
+  tailwindcss-uikit-colors@0.5.0:
     dependencies:
-      apple-uikit-colors: 0.3.10
+      apple-uikit-colors: 0.5.0
 
   tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3)):
     dependencies: