diff --git a/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx b/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx
index 3a00f005..26938c5a 100644
--- a/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx
+++ b/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx
@@ -5,12 +5,14 @@ import {
 } from '@/plugin/common';
 import { Icon } from 'tailchat-design';
 import { Dropdown, Menu } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 import { t } from 'tailchat-shared';
 import { useChatInputActionContext } from './context';
 import { uploadMessageImage } from './utils';
+import clsx from 'clsx';
 
 export const ChatInputAddon: React.FC = React.memo(() => {
+  const [open, setOpen] = useState(false);
   const actionContext = useChatInputActionContext();
   if (actionContext === null) {
     return null;
@@ -50,11 +52,21 @@ export const ChatInputAddon: React.FC = React.memo(() => {
   );
 
   return (
-    <Dropdown overlay={menu} placement="topRight" trigger={['click']}>
-      <Icon
-        className="text-2xl cursor-pointer"
-        icon="mdi:plus-circle-outline"
-      />
+    <Dropdown
+      overlay={menu}
+      open={open}
+      onOpenChange={setOpen}
+      placement="topRight"
+      trigger={['click']}
+    >
+      <div>
+        <Icon
+          className={clsx('text-2xl cursor-pointer transition transform', {
+            'rotate-45': open,
+          })}
+          icon="mdi:plus-circle-outline"
+        />
+      </div>
     </Dropdown>
   );
 });
diff --git a/client/web/src/components/ChatBox/ChatInputBox/Emotion.less b/client/web/src/components/ChatBox/ChatInputBox/Emotion.less
new file mode 100644
index 00000000..31af5563
--- /dev/null
+++ b/client/web/src/components/ChatBox/ChatInputBox/Emotion.less
@@ -0,0 +1,9 @@
+.chat-message-input_action-popover {
+  .ant-popover-inner {
+    background-color: transparent;
+
+    .ant-popover-inner-content {
+      padding: 0;
+    }
+  }
+}
diff --git a/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx b/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
index 7e80f65d..9d504a0a 100644
--- a/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
+++ b/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
@@ -1,8 +1,9 @@
 import { Icon } from 'tailchat-design';
-import { Dropdown, Popover } from 'antd';
+import { Popover } from 'antd';
 import React, { useCallback, useState } from 'react';
 import { useChatInputActionContext } from './context';
 import { EmojiPanel } from '@/components/Emoji';
+import './Emotion.less';
 
 export const ChatInputEmotion: React.FC = React.memo(() => {
   const actionContext = useChatInputActionContext();
@@ -18,13 +19,15 @@ export const ChatInputEmotion: React.FC = React.memo(() => {
     [appendMsg]
   );
 
-  const menu = <EmojiPanel onSelect={handleSelect} />;
+  const content = <EmojiPanel onSelect={handleSelect} />;
 
   return (
     <Popover
       open={visible}
       onOpenChange={setVisible}
-      content={menu}
+      content={content}
+      overlayClassName="chat-message-input_action-popover"
+      showArrow={false}
       placement="topRight"
       trigger={['click']}
     >