diff --git a/src/components/icons/platform/Twitter.tsx b/src/components/icons/platform/Twitter.tsx
index 2b96e49eb0..0bd0516dc4 100644
--- a/src/components/icons/platform/Twitter.tsx
+++ b/src/components/icons/platform/Twitter.tsx
@@ -4,7 +4,7 @@ export function TwitterIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
       <path
-        fill="currentColor"
+        fill="#1DA1F2"
         d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"
       />
     </svg>
diff --git a/src/components/ui/rich-link/Favicon.tsx b/src/components/ui/rich-link/Favicon.tsx
index f4ebc4d2da..1ffcd0802d 100644
--- a/src/components/ui/rich-link/Favicon.tsx
+++ b/src/components/ui/rich-link/Favicon.tsx
@@ -16,7 +16,7 @@ import {
 
 const prefixToIconMap = {
   GH: <GitHubBrandIcon className="text-[#1D2127] dark:text-[#FFFFFF]" />,
-  TW: <TwitterIcon className="text-[#1DA1F2]" />,
+  TW: <TwitterIcon />,
   TG: <IcBaselineTelegram className="text-[#2AABEE]" />,
   BL: <BilibiliIcon className="text-[#469ECF]" />,
   ZH: <SimpleIconsZhihu className="text-[#0084FF]" />,
diff --git a/src/components/widgets/comment/Comment.tsx b/src/components/widgets/comment/Comment.tsx
index b5d9bba941..00bb7cd1d3 100644
--- a/src/components/widgets/comment/Comment.tsx
+++ b/src/components/widgets/comment/Comment.tsx
@@ -17,7 +17,10 @@ import type { PropsWithChildren } from 'react'
 
 import { Avatar } from '~/components/ui/avatar'
 import { RelativeTime } from '~/components/ui/relative-time'
-import { UserAuthStrategyIcon } from '~/components/ui/user/UserAuthStrategyIcon'
+import {
+  getStrategyIconComponent,
+  UserAuthStrategyIcon,
+} from '~/components/ui/user/UserAuthStrategyIcon'
 import { softSpringPreset } from '~/constants/spring'
 import { jotaiStore } from '~/lib/store'
 
@@ -85,7 +88,7 @@ export const Comment: Component<{
           data-parent-id={parentId}
           className={clsx('relative my-2', className)}
         >
-          <div className="group flex w-full items-stretch gap-2">
+          <div className="group flex w-full items-stretch gap-4">
             <div className="relative flex w-9 shrink-0 self-end">
               <Avatar
                 shadow={false}
@@ -95,11 +98,10 @@ export const Comment: Component<{
                 width={24}
                 height={24}
               />
-              {source && (
-                <UserAuthStrategyIcon
-                  className="absolute bottom-0.5 right-0.5 h-3.5 w-3.5"
-                  strategy={source}
-                />
+              {source && !!getStrategyIconComponent(source) && (
+                <div className="absolute -right-1.5 bottom-1 flex h-3.5 w-3.5 rounded-full bg-white ring-[1.5px] ring-zinc-200 center dark:bg-zinc-800 dark:ring-black">
+                  <UserAuthStrategyIcon strategy={source} className="h-3 w-3" />
+                </div>
               )}
             </div>
 
diff --git a/src/components/widgets/shared/ShareModal.tsx b/src/components/widgets/shared/ShareModal.tsx
index 46d27b2619..cca9374620 100644
--- a/src/components/widgets/shared/ShareModal.tsx
+++ b/src/components/widgets/shared/ShareModal.tsx
@@ -14,7 +14,7 @@ const QRCodeSVG = dynamic(
 const shareList = [
   {
     name: 'Twitter',
-    icon: <TwitterIcon className="text-[#1DA1F2]" />,
+    icon: <TwitterIcon />,
     onClick: (data: ShareData) => {
       window.open(
         `https://twitter.com/intent/tweet?url=${data.url}&text=${