diff --git a/package-lock.json b/package-lock.json
index 8905ad6..cd6959a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@sentry/react-native": "5.19.1",
         "@shopify/flash-list": "1.6.3",
         "@total-typescript/ts-reset": "^0.5.1",
+        "clsx": "^2.1.0",
         "expo": "~50.0.8",
         "expo-application": "~5.8.3",
         "expo-asset": "~9.0.2",
@@ -45,6 +46,7 @@
         "react-native-webview": "13.6.4",
         "spark-md5": "^3.0.2",
         "swr": "^2.2.4",
+        "throttle-debounce": "^5.0.0",
         "zod": "^3.21.4"
       },
       "devDependencies": {
@@ -54,6 +56,7 @@
         "@types/he": "^1.2.3",
         "@types/react": "~18.2.14",
         "@types/spark-md5": "^3.0.4",
+        "@types/throttle-debounce": "^5.0.2",
         "@typescript-eslint/eslint-plugin": "^5.57.0",
         "@typescript-eslint/parser": "^5.57.0",
         "babel-plugin-transform-remove-console": "^6.9.4",
@@ -7415,6 +7418,12 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "node_modules/@types/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-pDzSNulqooSKvSNcksnV72nk8p7gRqN8As71Sp28nov1IgmPKWbOEIwAWvBME5pPTtaXJAvG3O4oc76HlQ4kqQ==",
+      "dev": true
+    },
     "node_modules/@types/which": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/which/-/which-3.0.3.tgz",
@@ -9030,6 +9039,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
@@ -18825,6 +18842,14 @@
       "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
       "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA=="
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index 66fae1c..651294c 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,10 @@
     "@sentry/react-native": "5.19.1",
     "@shopify/flash-list": "1.6.3",
     "@total-typescript/ts-reset": "^0.5.1",
+    "clsx": "^2.1.0",
     "expo": "~50.0.8",
     "expo-application": "~5.8.3",
+    "expo-asset": "~9.0.2",
     "expo-background-fetch": "~11.8.1",
     "expo-clipboard": "~5.0.1",
     "expo-constants": "~15.4.5",
@@ -67,8 +69,8 @@
     "react-native-webview": "13.6.4",
     "spark-md5": "^3.0.2",
     "swr": "^2.2.4",
-    "zod": "^3.21.4",
-    "expo-asset": "~9.0.2"
+    "throttle-debounce": "^5.0.0",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -77,6 +79,7 @@
     "@types/he": "^1.2.3",
     "@types/react": "~18.2.14",
     "@types/spark-md5": "^3.0.4",
+    "@types/throttle-debounce": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
diff --git a/src/components/Comment.tsx b/src/components/Comment.tsx
index 76f8199..2a2e4e8 100644
--- a/src/components/Comment.tsx
+++ b/src/components/Comment.tsx
@@ -1,6 +1,8 @@
 import { useNavigation, useRoute } from '@react-navigation/native'
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import { Button, Text } from '@rneui/themed'
+import clsx from 'clsx'
+import * as Clipboard from 'expo-clipboard'
 import React from 'react'
 import { Image, Linking, View } from 'react-native'
 
@@ -9,7 +11,7 @@ import { colors } from '@/constants/colors.tw'
 import type { CommentItemType, CommentMessageContent } from '../api/comments'
 import { useStore } from '../store'
 import type { NavigationProps, RootStackParamList } from '../types'
-import { parseImgUrl } from '../utils'
+import { parseImgUrl, showToast } from '../utils'
 
 function CommentText(props: {
   nodes: CommentMessageContent
@@ -39,7 +41,10 @@ function CommentText(props: {
           return (
             <Text
               key={key}
-              className={` ${fontSize} ${upName === name ? colors.secondary.text : colors.primary.text}`}
+              className={clsx([
+                fontSize,
+                upName === name ? colors.secondary.text : colors.primary.text,
+              ])}
               onPress={() => {
                 navigation.push('Dynamic', {
                   user: {
@@ -59,10 +64,15 @@ function CommentText(props: {
             <Text
               key={key}
               className={`${colors.primary.text} ${fontSize}`}
+              onLongPress={() => {
+                Clipboard.setStringAsync(node.url).then(() => {
+                  showToast('已复制链接')
+                })
+              }}
               onPress={() => {
                 Linking.openURL(node.url)
               }}>
-              {node.url}
+              {'🔗 链接 '}
             </Text>
           )
         }
@@ -108,7 +118,7 @@ function CommentText(props: {
           )
         }
         return (
-          <Text className={fontSize} selectable key={key}>
+          <Text className={fontSize} key={key}>
             {node.text}
           </Text>
         )
@@ -117,8 +127,9 @@ function CommentText(props: {
   )
 }
 
-function CommentItem(props: {
+export function CommentItem(props: {
   comment: CommentItemType | CommentItemType['replies'][0]
+  smallFont?: boolean
 }) {
   const { comment } = props
   const { setImagesList, setCurrentImageIndex } = useStore()
@@ -135,15 +146,15 @@ function CommentItem(props: {
       : route.params.name
     : ''
   const navigation = useNavigation<NavigationProps['navigation']>()
-  const fontSize = 'rcount' in comment ? 'text-base' : 'text-sm'
+  const fontSize = props.smallFont ? 'text-sm' : 'text-base'
   return (
     <Text className="py-[2px]">
       <Text
-        className={`${
-          upName === comment.name
-            ? colors.secondary.text + ' font-bold'
-            : colors.primary.text
-        } ${fontSize}`}
+        className={clsx(
+          colors.primary.text,
+          upName === comment.name && [colors.secondary.text, 'font-bold'],
+          fontSize,
+        )}
         onPress={() => {
           navigation.push('Dynamic', {
             user: {
@@ -160,7 +171,9 @@ function CommentItem(props: {
         {comment.sex === '男' ? '♂：' : comment.sex === '女' ? '♀：' : '：'}
       </Text>
       {'top' in comment && comment.top ? (
-        <Text className={fontSize}> 🔝 </Text>
+        <Text className={`text-sm font-bold ${colors.secondary.text}`}>
+          {' 置顶 '}
+        </Text>
       ) : null}
       {comment.message?.length ? (
         <CommentText
@@ -190,9 +203,9 @@ function CommentItem(props: {
   )
 }
 
-export default React.memo(Comment)
+export const Comment = React.memo(CommentBlock)
 
-function Comment(props: {
+function CommentBlock(props: {
   comment: CommentItemType
   className?: string
   style?: any
@@ -202,13 +215,16 @@ function Comment(props: {
 
   return (
     <View
-      className={`${comment.replies?.length ? 'mb-7' : 'mb-4'} ${props.className || ''}`}
+      className={clsx([
+        comment.replies?.length ? 'mb-7' : 'mb-4',
+        props.className,
+      ])}
       style={props.style}>
       <CommentItem comment={comment} />
       {comment.replies?.length ? (
         <View className="p-2 mt-1 rounded gap-1 opacity-90 flex-1 shrink-0 border-gray-500 bg-neutral-200 dark:bg-neutral-900">
           {comment.replies.map(reply => {
-            return <CommentItem key={reply.id} comment={reply} />
+            return <CommentItem key={reply.id} comment={reply} smallFont />
           })}
           {comment.moreText && comment.rcount > comment.replies.length ? (
             <Button
diff --git a/src/components/CommentList.tsx b/src/components/CommentList.tsx
index 23d27d2..c8a43d8 100644
--- a/src/components/CommentList.tsx
+++ b/src/components/CommentList.tsx
@@ -6,8 +6,7 @@ import { View } from 'react-native'
 import { colors } from '@/constants/colors.tw'
 
 import { type CommentItemType, useComments } from '../api/comments'
-import Comment from './Comment'
-// import MoreReplies from './MoreReplies'
+import { Comment } from './Comment'
 import ReplyList from './ReplyList'
 
 function Loading() {
diff --git a/src/components/ReplyList.tsx b/src/components/ReplyList.tsx
index ef0a59f..956ac2b 100644
--- a/src/components/ReplyList.tsx
+++ b/src/components/ReplyList.tsx
@@ -8,7 +8,7 @@ import { ReplyItemType, useReplies } from '@/api/replies'
 import { colors } from '@/constants/colors.tw'
 import { useStore } from '@/store'
 
-import Comment from './Comment'
+import { CommentItem } from './Comment'
 
 export default function ReplyList() {
   const {
@@ -54,13 +54,17 @@ export default function ReplyList() {
             data={replies}
             keyExtractor={v => v.id + '@' + v.root}
             renderItem={({ item }: { item: ReplyItemType }) => {
-              return <Comment comment={item} className="pl-7 pr-3 mb-2" />
+              return (
+                <View className="px-5 mb-2">
+                  <CommentItem comment={item} smallFont />
+                </View>
+              )
             }}
             estimatedItemSize={30}
             ListHeaderComponent={
               root ? (
-                <View className="border-b-[16px] px-4 border-b-neutral-300 dark:border-b-neutral-700 mb-4">
-                  <Comment comment={root} className="mb-3" />
+                <View className="border-b-[18px] p-4 border-b-neutral-300 dark:border-b-neutral-700 mb-5">
+                  <CommentItem comment={root} />
                 </View>
               ) : null
             }
@@ -86,7 +90,7 @@ export default function ReplyList() {
                 </Text>
               ) : null
             }
-            contentContainerStyle={tw('py-5')}
+            contentContainerStyle={tw('pb-5')}
             onEndReached={() => {
               update()
             }}
diff --git a/src/components/VideoItem.tsx b/src/components/VideoItem.tsx
index 31d3f51..ebc8793 100644
--- a/src/components/VideoItem.tsx
+++ b/src/components/VideoItem.tsx
@@ -122,7 +122,9 @@ function VideoListItem({
         </Text>
         <View className="gap-2">
           <Text
-            className={`${isFollowed ? colors.secondary.text : colors.primary.text}`}>
+            className={
+              isFollowed ? colors.secondary.text : colors.primary.text
+            }>
             <Text className={colors.gray7.text}>UP: </Text>
             {video.name}
           </Text>
diff --git a/src/routes/Dynamic/CommonItem.tsx b/src/routes/Dynamic/CommonItem.tsx
index eff32b1..01c7497 100644
--- a/src/routes/Dynamic/CommonItem.tsx
+++ b/src/routes/Dynamic/CommonItem.tsx
@@ -1,5 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import { Text } from '@rneui/themed'
+import clsx from 'clsx'
 import { Image } from 'expo-image'
 import React from 'react'
 import { Linking, Pressable, TouchableOpacity, View } from 'react-native'
@@ -90,12 +91,11 @@ export function CommonContent(props: {
       <Foo className="gap-2 flex-1" {...linkProp}>
         {title ? (
           <Text
-            className={[
-              props.type === HandledDynamicTypeEnum.DYNAMIC_TYPE_ARTICLE
-                ? 'font-bold'
-                : '',
+            className={clsx([
+              props.type === HandledDynamicTypeEnum.DYNAMIC_TYPE_ARTICLE &&
+                'font-bold',
               'text-[15px]',
-            ].join(' ')}
+            ])}
             numberOfLines={2}>
             {title}
           </Text>
diff --git a/src/routes/Dynamic/Header.tsx b/src/routes/Dynamic/Header.tsx
index b28a5ed..90449d3 100644
--- a/src/routes/Dynamic/Header.tsx
+++ b/src/routes/Dynamic/Header.tsx
@@ -1,10 +1,11 @@
 import { useNavigation, useRoute } from '@react-navigation/native'
 import type { NativeStackScreenProps } from '@react-navigation/native-stack'
-import { Avatar, Button, Icon, Text } from '@rneui/themed'
+import { Avatar, Icon, Text } from '@rneui/themed'
+import clsx from 'clsx'
 import * as Clipboard from 'expo-clipboard'
 import { Image } from 'expo-image'
 import React from 'react'
-import { Linking, View } from 'react-native'
+import { Linking, Pressable, View } from 'react-native'
 import { Menu, MenuItem } from 'react-native-material-menu'
 
 import { colors } from '@/constants/colors.tw'
@@ -48,7 +49,7 @@ export function HeaderLeft(props: { scrollTop: () => void }) {
       {dynamicUser?.face ? (
         <View className="relative">
           <Avatar
-            size={38}
+            size={40}
             rounded
             onPress={gotoWebPage}
             ImageComponent={Image}
@@ -61,22 +62,39 @@ export function HeaderLeft(props: { scrollTop: () => void }) {
               {sex}
             </Text>
           ) : null}
+          {dynamicUser.mid && livingUrl ? (
+            <Pressable
+              onPress={() => {
+                if (dynamicUser.mid) {
+                  setCheckLiveTimeStamp(Date.now())
+                  navigation.navigate('WebPage', {
+                    title: dynamicUser.name + '的直播间',
+                    url: livingUrl,
+                  })
+                }
+              }}
+              className="inset-0 absolute justify-center items-center w-10 h-10 rounded-full bg-neutral-950/60">
+              <Text className={'text-center text-xs text-teal-300 font-bold'}>
+                直播中
+              </Text>
+            </Pressable>
+          ) : null}
         </View>
       ) : null}
 
       <View className="flex-1 ml-3 items-center flex-wrap flex-row">
         <Text
-          className={`${followed ? colors.secondary.text : ''} text-lg pt-1`}
+          className={clsx(
+            followed && [colors.secondary.text, 'font-bold'],
+            'text-lg pt-1',
+          )}
           adjustsFontSizeToFit
           numberOfLines={1}
           onPress={() => {
             props.scrollTop()
           }}>
           {userName}
-          <Text className="text-sm">
-            {level}
-            {'    '}
-          </Text>
+          <Text className="text-sm">{level + '   '}</Text>
         </Text>
         {fans ? (
           <Text
@@ -88,24 +106,6 @@ export function HeaderLeft(props: { scrollTop: () => void }) {
           </Text>
         ) : null}
       </View>
-      {dynamicUser.mid && livingUrl ? (
-        <Button
-          size="sm"
-          type="clear"
-          buttonStyle={tw('ml-[10px] mr-[10px]')}
-          titleStyle={tw('text-sm')}
-          onPress={() => {
-            if (dynamicUser.mid) {
-              setCheckLiveTimeStamp(Date.now())
-              navigation.navigate('WebPage', {
-                title: dynamicUser.name + '的直播间',
-                url: livingUrl,
-              })
-            }
-          }}>
-          直播中
-        </Button>
-      ) : null}
     </View>
   )
 }
diff --git a/src/routes/Follow/FollowItem.tsx b/src/routes/Follow/FollowItem.tsx
index f5eb760..870e39a 100644
--- a/src/routes/Follow/FollowItem.tsx
+++ b/src/routes/Follow/FollowItem.tsx
@@ -192,30 +192,6 @@ function FollowItem(props: { item: UpInfo; index?: number }) {
           />
         ) : null}
       </View>
-      {/* {livingUps[mid] ? (
-        <Button
-          size="sm"
-          type="clear"
-          onPress={gotoLivePage}
-          buttonStyle={tw('mt-1 rounded')}
-          titleStyle={tw(`${colors.success.text} text-base`)}>
-          <Icon
-            name="live-tv"
-            size={16}
-            color={tw(colors.success.text).color}
-          />
-          直播中~
-        </Button>
-      ) : (
-        <Text
-          className={`text-sm py-2 flex-1 shrink-0 text-center ${
-            pin ? `font-bold ${colors.primary.text}` : ''
-          } ${hasUpdate ? colors.secondary.text : ''}`}
-          numberOfLines={2}
-          ellipsizeMode="tail">
-          {name}
-        </Text>
-      )} */}
       <Text
         className={`text-sm py-2 flex-1 shrink-0 text-center ${
           pin ? `font-bold ${colors.primary.text}` : ''
diff --git a/src/routes/History/index.tsx b/src/routes/History/index.tsx
index 19ddcfe..3e3ed0d 100644
--- a/src/routes/History/index.tsx
+++ b/src/routes/History/index.tsx
@@ -50,7 +50,7 @@ function HistoryList() {
       ListFooterComponent={
         list.length ? (
           <Text className={`${colors.gray6.text} text-xs text-center my-2`}>
-            暂无更多（只记录最近400条）
+            暂无更多（最近约400条）
           </Text>
         ) : null
       }
diff --git a/src/routes/Play/VideoHeader.tsx b/src/routes/Play/VideoHeader.tsx
index f690210..31101f2 100644
--- a/src/routes/Play/VideoHeader.tsx
+++ b/src/routes/Play/VideoHeader.tsx
@@ -4,6 +4,7 @@ import {
   useRoute,
 } from '@react-navigation/native'
 import { Avatar, Icon, Text } from '@rneui/themed'
+import clsx from 'clsx'
 import { Image } from 'expo-image'
 import React from 'react'
 import { Alert, Linking, Pressable, TouchableOpacity, View } from 'react-native'
@@ -161,7 +162,12 @@ function VideoHeader() {
             }
           />
           <Text
-            className={`text-sm ${isCollected ? colors.warning.text : colors.gray8.text} ${isCollected ? 'font-bold' : ''}`}>
+            className={clsx(
+              'text-sm',
+              isCollected
+                ? [colors.warning.text, 'font-bold']
+                : colors.gray8.text,
+            )}>
             {parseNumber(videoInfo?.collectNum)}
           </Text>
         </TouchableOpacity>
diff --git a/src/routes/Play/VideoInfo.tsx b/src/routes/Play/VideoInfo.tsx
index c68bb53..0f874c6 100644
--- a/src/routes/Play/VideoInfo.tsx
+++ b/src/routes/Play/VideoInfo.tsx
@@ -81,7 +81,7 @@ function VideoInfo(props: {
         </ListItem.Accordion>
       ) : null}
       {!isLoading && videoInfo?.interactive ? (
-        <Text className="mt-3 italic text-orange-600">
+        <Text className={`mt-3 italic ${colors.warning.text}`}>
           【该视频为交互视频，暂不支持】
         </Text>
       ) : null}
diff --git a/src/routes/Play/inject-play.js b/src/routes/Play/inject-play.js
index e9947e9..0ed3a70 100644
--- a/src/routes/Play/inject-play.js
+++ b/src/routes/Play/inject-play.js
@@ -96,7 +96,7 @@ function __$hack() {
     }
     const style = document.createElement('style')
     style.textContent = `
-    body, #bilibiliPlayer, .mplayer {
+    html, body, #bilibiliPlayer, .mplayer {
       background-color: black!important;
     }
     .b-danmaku {
@@ -128,32 +128,6 @@ function __$hack() {
     })
   })
   waitForDom('.mplayer-right', right => {
-    // if (!document.getElementById('download-button')) {
-    //   const downloadBtn = document.createElement('div')
-    //   downloadBtn.id = 'download-button'
-    //   // downloadBtn.innerHTML = '&#8659;'
-    //   downloadBtn.innerHTML = '⇩'
-    //   downloadBtn.style.cssText = `
-    //     width: 24px;
-    //     height: 24px;
-    //     color: white;
-    //     font-size: 20px;
-    //     line-height: 28px;
-    //     text-align: center;
-    //     background: rgba(0,0,0,.2);
-    //     border-radius: 50%;
-    //     font-weight: 500;
-    //   `
-    //   downloadBtn.addEventListener('click', () => {
-    //     window.ReactNativeWebView.postMessage(
-    //       JSON.stringify({
-    //         action: 'downloadVideo',
-    //         payload: null,
-    //       }),
-    //     )
-    //   })
-    //   right.appendChild(downloadBtn)
-    // }
     if (!document.getElementById('play-rate-button')) {
       const rateBtn = document.createElement('div')
       rateBtn.id = 'play-rate-button'
diff --git a/src/routes/Play/update-playurl.js b/src/routes/Play/update-playurl.js
index dee4c1a..6e13295 100644
--- a/src/routes/Play/update-playurl.js
+++ b/src/routes/Play/update-playurl.js
@@ -33,10 +33,10 @@ function __$hack() {
       //   }),
       // )
       video.load()
-      setTimeout(() => {
-        video.muted = false
-        video.play()
-      }, 10)
+      // setTimeout(() => {
+      video.muted = false
+      video.play()
+      // }, 10)
     }
   }
   window.setNewVideoUrl = function (url) {
@@ -48,6 +48,7 @@ function __$hack() {
     evt => {
       const video = evt.target
       if (video && video.tagName === 'VIDEO') {
+        video.pause()
         replacePlayUrl()
       }
     },
diff --git a/src/routes/VideoList/VideoItem.tsx b/src/routes/VideoList/VideoItem.tsx
index 3c5792f..b3de58b 100644
--- a/src/routes/VideoList/VideoItem.tsx
+++ b/src/routes/VideoList/VideoItem.tsx
@@ -1,4 +1,5 @@
 import { Icon, Text } from '@rneui/themed'
+import clsx from 'clsx'
 import { Image } from 'expo-image'
 import React from 'react'
 import { View } from 'react-native'
@@ -54,14 +55,20 @@ function VideoItem({ video }: { video: VideoItemType }) {
           <View
             className={`right-0 ${watchedInfo ? 'bottom-1' : 'bottom-0'} absolute px-1 items-center bg-gray-900/70 rounded-sm m-1`}>
             <Text
-              className={`text-white text-xs ${isBlackTag ? 'line-through opacity-60' : ''}`}>
+              className={clsx(
+                'text-white text-xs',
+                isBlackTag && 'line-through opacity-60',
+              )}>
               {video.tag}
             </Text>
           </View>
         ) : null}
       </View>
       <Text
-        className={`mt-3 min-h-8 ${isFollowed ? `font-bold ${colors.primary.text}` : ''}`}
+        className={clsx(
+          'mt-3',
+          isFollowed && ['font-bold', colors.primary.text],
+        )}
         numberOfLines={2}>
         {video.title}
       </Text>
@@ -83,11 +90,12 @@ function VideoItem({ video }: { video: VideoItemType }) {
           <Text
             numberOfLines={1}
             ellipsizeMode="tail"
-            className={`ml-1 text-xs grow shrink ${
+            className={clsx(
+              'ml-1 text-xs grow shrink',
               isFollowed
-                ? `font-bold ${colors.secondary.text}`
-                : colors.primary.text
-            }`}>
+                ? ['font-bold', colors.secondary.text]
+                : colors.primary.text,
+            )}>
             {video.name}
           </Text>
         </View>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index c1ae818..405b832 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,7 @@
 import * as Updates from 'expo-updates'
 import { Alert, Linking, Platform, Share, ToastAndroid } from 'react-native'
 import Toast from 'react-native-root-toast'
+import { throttle } from 'throttle-debounce'
 
 import { checkUpdate } from '@/api/check-update'
 
@@ -120,22 +121,27 @@ export function delay(ms: number) {
   })
 }
 
-const showedMessage: Record<string, () => void> = {}
-
+const toastFuncMap: Record<string, () => void> = {}
 export function showToast(message: string, long = false) {
-  if (!(message in showedMessage)) {
-    showedMessage[message] = () => {
-      Platform.OS === 'android'
-        ? ToastAndroid.show(
-            message,
-            long ? ToastAndroid.LONG : ToastAndroid.SHORT,
-          )
-        : Toast.show(message, {
-            duration: long ? Toast.durations.LONG : Toast.durations.SHORT,
-          })
-    }
+  if (!(message in toastFuncMap)) {
+    toastFuncMap[message] = throttle(
+      5000,
+      () => {
+        Platform.OS === 'android'
+          ? ToastAndroid.show(
+              message,
+              long ? ToastAndroid.LONG : ToastAndroid.SHORT,
+            )
+          : Toast.show(message, {
+              duration: long ? Toast.durations.LONG : Toast.durations.SHORT,
+            })
+      },
+      {
+        noLeading: false,
+      },
+    )
   }
-  showedMessage[message]()
+  toastFuncMap[message]()
 }
 
 let showedFatalError = false