diff --git a/packages/ui/src/interface/widget/index.tsx b/packages/ui/src/interface/widget/index.tsx
index e49d84d..bb9e6fd 100644
--- a/packages/ui/src/interface/widget/index.tsx
+++ b/packages/ui/src/interface/widget/index.tsx
@@ -5,6 +5,8 @@ import {
   WidgetView,
   useWidget,
 } from '@refocus/sdk';
+import { MdKeyboardArrowUp } from 'react-icons/md';
+import { motion } from 'framer-motion';
 import { VscTrash } from 'react-icons/vsc';
 import { CgMoreO } from 'react-icons/cg';
 import { Dialog, View } from '../../base';
@@ -29,6 +31,10 @@ const WidgetWrapper = styled(View)`
   flex: 1;
 `;
 
+const Spacer = styled(View)`
+  flex: 1;
+`;
+
 const Widget: React.FC<WidgetProps> = ({
   id,
   data,
@@ -37,6 +43,7 @@ const Widget: React.FC<WidgetProps> = ({
   onRemove,
 }) => {
   const theme = useTheme();
+  const [open, setOpen] = useState(true);
   const [showEdit, setShowEdit] = useState(false);
   const widget = useWidget(id);
   const hasMenu = useMemo(
@@ -52,40 +59,54 @@ const Widget: React.FC<WidgetProps> = ({
   );
   return (
     <WidgetProvider id={id} data={data} setData={setData}>
-      <Wrapper className={className} $fr>
-        <WidgetWrapper $f={1}>
-          <WidgetView />
-        </WidgetWrapper>
-        <View $fc>
-          {hasMenu && (
-            <DropdownMenu>
-              <DropdownMenu.Trigger>
-                <View $p="sm">
-                  <CgMoreO />
-                </View>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Portal>
-                <DropdownMenu.Content alignOffset={50}>
-                  {!!onRemove && (
-                    <DropdownMenu.Item onClick={onRemove}>
-                      <DropdownMenu.Icon>
-                        <VscTrash color={theme?.colors.simple.red} />
-                      </DropdownMenu.Icon>
-                      Remove
-                    </DropdownMenu.Item>
-                  )}
-                  {!!widget?.edit && !!setData && (
-                    <DropdownMenu.Item onClick={() => setShowEdit(true)}>
-                      Edit
-                    </DropdownMenu.Item>
-                  )}
-                  <DropdownMenu.Arrow />
-                </DropdownMenu.Content>
-              </DropdownMenu.Portal>
-            </DropdownMenu>
-          )}
-        </View>
-      </Wrapper>
+      <View $fr>
+        <motion.div animate={{ rotate: open ? 180 : 0 }}>
+          <View
+            $items="center"
+            $justify="center"
+            $fc
+            $p="sm"
+            onClick={() => setOpen(!open)}
+          >
+            <MdKeyboardArrowUp size={22} />
+          </View>
+        </motion.div>
+        <Spacer />
+        {hasMenu && (
+          <DropdownMenu>
+            <DropdownMenu.Trigger>
+              <View $p="sm">
+                <CgMoreO />
+              </View>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.Content alignOffset={50}>
+                {!!onRemove && (
+                  <DropdownMenu.Item onClick={onRemove}>
+                    <DropdownMenu.Icon>
+                      <VscTrash color={theme?.colors.simple.red} />
+                    </DropdownMenu.Icon>
+                    Remove
+                  </DropdownMenu.Item>
+                )}
+                {!!widget?.edit && !!setData && (
+                  <DropdownMenu.Item onClick={() => setShowEdit(true)}>
+                    Edit
+                  </DropdownMenu.Item>
+                )}
+                <DropdownMenu.Arrow />
+              </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+          </DropdownMenu>
+        )}
+      </View>
+      <motion.div animate={{ height: open ? 'auto' : 0 }}>
+        <Wrapper className={className} $fr>
+          <WidgetWrapper $f={1}>
+            <WidgetView />
+          </WidgetWrapper>
+        </Wrapper>
+      </motion.div>
       <Dialog open={showEdit} onOpenChange={setShowEdit}>
         <Dialog.Overlay />
         <Dialog.Content>