diff --git a/client/web/src/components/IconBtn.tsx b/client/web/src/components/IconBtn.tsx
index 828d7355..ea3640b3 100644
--- a/client/web/src/components/IconBtn.tsx
+++ b/client/web/src/components/IconBtn.tsx
@@ -21,6 +21,7 @@ interface IconBtnProps extends Omit<ButtonProps, 'shape'> {
   iconClassName?: string;
   shape?: IconBtnShapeType;
   title?: string;
+  active?: boolean;
 }
 export const IconBtn: React.FC<IconBtnProps> = React.memo(
   ({ icon, iconClassName, title, className, ...props }) => {
@@ -32,13 +33,18 @@ export const IconBtn: React.FC<IconBtnProps> = React.memo(
       </span>
     );
 
+    // 默认情况下的背景颜色
+    const normalBg = props.active
+      ? 'bg-black bg-opacity-60'
+      : 'bg-black bg-opacity-20 hover:bg-opacity-60';
+
     const btnEl = (
       <Button
         className={clsx(
           'border-0 text-white text-opacity-80 hover:text-opacity-100',
           props.danger
             ? 'bg-red-600 bg-opacity-80 hover:bg-opacity-100'
-            : 'bg-black bg-opacity-20 hover:bg-opacity-60',
+            : normalBg,
           className
         )}
         {...props}
diff --git a/client/web/tailchat.d.ts b/client/web/tailchat.d.ts
index b93bbba9..29b85e70 100644
--- a/client/web/tailchat.d.ts
+++ b/client/web/tailchat.d.ts
@@ -390,6 +390,8 @@ declare module '@capital/component' {
     shape?: 'circle' | 'square';
     title?: string;
     danger?: boolean;
+    active?: boolean;
+    disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLElement>;
   }>;
 
diff --git a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx
index 56136f7f..72897f91 100644
--- a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx
+++ b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/Controls.tsx
@@ -52,6 +52,7 @@ export const Controls: React.FC<{
       <IconBtn
         icon={mediaPerm.video ? 'mdi:video' : 'mdi:video-off'}
         title={mediaPerm.video ? '关闭摄像头' : '开启摄像头'}
+        active={mediaPerm.video}
         disabled={!ready}
         size="large"
         onClick={() => mute('video')}
@@ -60,6 +61,7 @@ export const Controls: React.FC<{
       <IconBtn
         icon={mediaPerm.audio ? 'mdi:microphone' : 'mdi:microphone-off'}
         title={mediaPerm.audio ? '关闭麦克风' : '开启麦克风'}
+        active={mediaPerm.audio}
         disabled={!ready}
         size="large"
         onClick={() => mute('audio')}
diff --git a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/types/tailchat.d.ts b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/types/tailchat.d.ts
index b93bbba9..29b85e70 100644
--- a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/types/tailchat.d.ts
+++ b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/types/tailchat.d.ts
@@ -390,6 +390,8 @@ declare module '@capital/component' {
     shape?: 'circle' | 'square';
     title?: string;
     danger?: boolean;
+    active?: boolean;
+    disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLElement>;
   }>;