diff --git a/src/routes/chat/SessionList/Session.tsx b/src/routes/chat/SessionList/Session.tsx
index 1d425f57..e44b293f 100644
--- a/src/routes/chat/SessionList/Session.tsx
+++ b/src/routes/chat/SessionList/Session.tsx
@@ -144,7 +144,7 @@ const Session: FC<IProps> = ({
             <div className="flex items-center justify-between">
               <span className={clsx("text-xs text-gray-500 dark:text-gray-400  truncate", unreads > 0 ? `w-36` : ``)}>{renderPreviewMessage(previewMsg)}</span>
               {unreads > 0 && !isCurrentPath && (
-                <strong className={clsx(`text-white h-5 min-w-[20px] bg-primary-400 font-bold text-[10px] rounded-[10px] flex-center`, unreads > 99 && 'w-1.5 !h-1.5 p-0 min-w-[unset]', muted && "bg-gray-500")}>
+                <strong className={clsx(`text-white px-1.5 py-[3px] bg-primary-400 font-bold text-[10px] leading-[10px] rounded-[10px]`, unreads > 99 && 'w-1.5 !h-1.5 p-0 min-w-[unset]', muted && "bg-gray-500")}>
                   {unreads > 99 ? null : unreads}
                 </strong>
               )}
diff --git a/tailwind.config.js b/tailwind.config.js
index f379de9f..dbab1e2b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,9 @@ module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/*.html"],
   theme: {
     extend: {
+      fontSize: {
+        xs: ["0.75rem", "1.125rem"]
+      },
       colors: {
         primary: {
           25: "#F5FEFF",