diff --git a/backend/modelscope_studio/components/antd/avatar/__init__.py b/backend/modelscope_studio/components/antd/avatar/__init__.py
index 6eb6f8bf..a6d60579 100644
--- a/backend/modelscope_studio/components/antd/avatar/__init__.py
+++ b/backend/modelscope_studio/components/antd/avatar/__init__.py
@@ -36,11 +36,11 @@ def __init__(
             props: dict | None = None,
             *,
             alt: str | None = None,
-            gap: int = 4,
+            gap: int | None = None,
             icon: str | None = None,
-            shape: Literal['circle', 'square'] = 'circle',
+            shape: Literal['circle', 'square'] | None = None,
             size: int | Literal['large', 'small', 'default'] | dict
-        | None = 'default',
+        | None = None,
             src_set: str | None = None,
             draggable: bool | Literal['true', 'false'] | None = None,
             cross_origin: Literal['anonymous', 'use-credentials', '']
diff --git a/backend/modelscope_studio/components/antd/avatar/group/__init__.py b/backend/modelscope_studio/components/antd/avatar/group/__init__.py
index 5bca907c..87ebe0bc 100644
--- a/backend/modelscope_studio/components/antd/avatar/group/__init__.py
+++ b/backend/modelscope_studio/components/antd/avatar/group/__init__.py
@@ -19,8 +19,8 @@ def __init__(
             *,
             max: dict | None = None,
             size: int | Literal['large', 'small', 'default']
-        | dict = 'default',
-            shape: Literal['circle', 'square'] = 'circle',
+        | dict | None = None,
+            shape: Literal['circle', 'square'] | None = None,
             root_class_name: str | None = None,
             as_item: str | None = None,
             _internal: None = None,
diff --git a/backend/modelscope_studio/components/antd/calendar/__init__.py b/backend/modelscope_studio/components/antd/calendar/__init__.py
index 2aef5a80..7cf81907 100644
--- a/backend/modelscope_studio/components/antd/calendar/__init__.py
+++ b/backend/modelscope_studio/components/antd/calendar/__init__.py
@@ -40,7 +40,7 @@ def __init__(
             fullscreen: bool = True,
             header_render: str | None = None,
             locale: dict | None = None,
-            mode: Literal['month', 'year'] = 'month',
+            mode: Literal['month', 'year'] | None = None,
             valid_range: tuple[int | str | float, int | str | float]
         | None = None,
             root_class_name: str | None = None,
diff --git a/backend/modelscope_studio/components/antd/card/__init__.py b/backend/modelscope_studio/components/antd/card/__init__.py
index 309f4620..d302f3d4 100644
--- a/backend/modelscope_studio/components/antd/card/__init__.py
+++ b/backend/modelscope_studio/components/antd/card/__init__.py
@@ -36,6 +36,7 @@ class AntdCard(ModelScopeLayoutComponent):
         'extra',
         'tabBarExtraContent',
         'title',
+        'tabList',
     ]
 
     def __exit__(self, *args, **kwargs):
@@ -49,7 +50,7 @@ def __init__(
             *,
             actions: str | None = None,
             active_tab_key: str | None = None,
-            bordered: bool = True,
+            bordered: bool | None = None,
             cover: str | None = None,
             default_active_tab_key: str | None = None,
             extra: str | None = None,
@@ -58,7 +59,7 @@ def __init__(
             size: Literal["default", "small"] | None = None,
             tab_bar_extra_content: str | None = None,
             tab_list: list[str] | str | None = None,
-            tab_props: str | None = None,
+            tab_props: dict | None = None,
             title: str | None = None,
             type: str | None = None,
             class_names: dict | None = None,
diff --git a/backend/modelscope_studio/components/antd/card/grid/__init__.py b/backend/modelscope_studio/components/antd/card/grid/__init__.py
index bb966aca..035406af 100644
--- a/backend/modelscope_studio/components/antd/card/grid/__init__.py
+++ b/backend/modelscope_studio/components/antd/card/grid/__init__.py
@@ -26,7 +26,7 @@ def __init__(
             self,
             props: dict | None = None,
             *,
-            hoverable: bool = True,
+            hoverable: bool | None = None,
             as_item: str | None = None,
             _internal: None = None,
             # gradio properties
diff --git a/backend/modelscope_studio/components/antd/cascader/__init__.py b/backend/modelscope_studio/components/antd/cascader/__init__.py
index 7f799532..51d4cef4 100644
--- a/backend/modelscope_studio/components/antd/cascader/__init__.py
+++ b/backend/modelscope_studio/components/antd/cascader/__init__.py
@@ -40,6 +40,7 @@ class AntdCascader(ModelScopeDataLayoutComponent):
         'notFoundContent',
         'expandIcon',
         'removeIcon',
+        'prefix',
         'displayRender',
         'tagRender',
         'dropdownRender',
@@ -62,6 +63,7 @@ def __init__(
             popup_class_name: str | None = None,
             dropdown_render: str | None = None,
             expand_icon: str | None = None,
+            prefix: str | None = None,
             expand_trigger: Literal['click', 'hover'] = 'click',
             filed_names: dict | None = None,
             get_popup_container: str | None = None,
@@ -114,6 +116,7 @@ def __init__(
         self.disabled = disabled
         self.display_render = display_render
         self.tag_render = tag_render
+        self.prefix = prefix
         self.popup_class_name = popup_class_name
         self.dropdown_render = dropdown_render
         self.expand_icon = expand_icon
diff --git a/backend/modelscope_studio/components/antd/color_picker/__init__.py b/backend/modelscope_studio/components/antd/color_picker/__init__.py
index 2f486217..153f2c98 100644
--- a/backend/modelscope_studio/components/antd/color_picker/__init__.py
+++ b/backend/modelscope_studio/components/antd/color_picker/__init__.py
@@ -47,6 +47,7 @@ def __init__(
             presets: list[dict] | None = None,
             disabled: bool | None = None,
             disabled_alpha: bool | None = None,
+            disabled_format: bool | None = None,
             destroy_tooltip_on_hide: bool | None = None,
             format: Literal['hex', 'rgb', 'hsb'] | None = 'hex',
             mode: Literal['single', 'gradient']
@@ -85,6 +86,7 @@ def __init__(
         self.presets = presets
         self.disabled = disabled
         self.disabled_alpha = disabled_alpha
+        self.disabled_format = disabled_format
         self.destroy_tooltip_on_hide = destroy_tooltip_on_hide
         self.format = format
         self.mode = mode
diff --git a/backend/modelscope_studio/components/antd/date_picker/__init__.py b/backend/modelscope_studio/components/antd/date_picker/__init__.py
index 5161e5d6..c030a168 100644
--- a/backend/modelscope_studio/components/antd/date_picker/__init__.py
+++ b/backend/modelscope_studio/components/antd/date_picker/__init__.py
@@ -35,6 +35,7 @@ class AntdDatePicker(ModelScopeDataLayoutComponent):
     # supported slots
     SLOTS = [
         'allowClear.clearIcon',
+        'prefix',
         'prevIcon',
         'nextIcon',
         'suffixIcon',
@@ -77,6 +78,7 @@ def __init__(
             get_popup_container: str | None = None,
             min_date: str | int | float | None = None,
             max_date: str | int | float | None = None,
+            prefix: str | None = None,
             prev_icon: str | None = None,
             size: Literal['large', 'middle', 'small'] | None = None,
             presets: list[dict] | None = None,
@@ -137,6 +139,7 @@ def __init__(
         self.get_popup_container = get_popup_container
         self.min_date = min_date
         self.max_date = max_date
+        self.prefix = prefix
         self.prev_icon = prev_icon
         self.size = size
         self.presets = presets
diff --git a/backend/modelscope_studio/components/antd/descriptions/item/__init__.py b/backend/modelscope_studio/components/antd/descriptions/item/__init__.py
index a4b3643f..0cd8ff32 100644
--- a/backend/modelscope_studio/components/antd/descriptions/item/__init__.py
+++ b/backend/modelscope_studio/components/antd/descriptions/item/__init__.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import Any
+from typing import Any, Literal
 
 from .....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
 
@@ -17,12 +17,12 @@ class AntdDescriptionsItem(ModelScopeLayoutComponent):
 
     def __init__(
             self,
-            label: str | None = "",
+            label: str | None = None,
             props: dict | None = None,
             *,
             content_style: dict | None = None,
             label_style: dict | None = None,
-            span: int | dict | None = 1,
+            span: int | dict | Literal['filled'] | None = 1,
             as_item: str | None = None,
             _internal: None = None,
             # gradio properties
diff --git a/backend/modelscope_studio/components/antd/form/__init__.py b/backend/modelscope_studio/components/antd/form/__init__.py
index 4f297378..985e5606 100644
--- a/backend/modelscope_studio/components/antd/form/__init__.py
+++ b/backend/modelscope_studio/components/antd/form/__init__.py
@@ -20,7 +20,6 @@ class AntdForm(ModelScopeDataLayoutComponent):
     """
     Item = AntdFormItem
     Provider = AntdFormProvider
-
     EVENTS = [
         EventListener("fields_change",
                       callback=lambda block: block._internal.update(
diff --git a/backend/modelscope_studio/components/antd/input/otp/__init__.py b/backend/modelscope_studio/components/antd/input/otp/__init__.py
index 5b5294e8..645bfe8e 100644
--- a/backend/modelscope_studio/components/antd/input/otp/__init__.py
+++ b/backend/modelscope_studio/components/antd/input/otp/__init__.py
@@ -16,6 +16,9 @@ class AntdInputOTP(ModelScopeDataLayoutComponent):
         EventListener("change",
                       callback=lambda block: block._internal.update(
                           bind_change_event=True)),
+        EventListener("input",
+                      callback=lambda block: block._internal.update(
+                          bind_input_event=True)),
     ]
 
     # supported slots
diff --git a/backend/modelscope_studio/components/antd/select/__init__.py b/backend/modelscope_studio/components/antd/select/__init__.py
index a9f53cbf..ae6428b4 100644
--- a/backend/modelscope_studio/components/antd/select/__init__.py
+++ b/backend/modelscope_studio/components/antd/select/__init__.py
@@ -46,7 +46,7 @@ class AntdSelect(ModelScopeDataLayoutComponent):
     SLOTS = [
         'allowClear.clearIcon', 'maxTagPlaceholder', 'menuItemSelectedIcon',
         'dropdownRender', 'optionRender', 'tagRender', 'labelRender',
-        'notFoundContent', 'removeIcon', 'suffixIcon', 'options'
+        'notFoundContent', 'removeIcon', 'suffixIcon', 'prefix', 'options'
     ]
 
     def __init__(
@@ -94,6 +94,7 @@ def __init__(
             size: Literal['large', 'middle', 'small'] | None = None,
             status: Literal['error', 'warning'] | None = None,
             suffix_icon: str | None = None,
+            prefix: str | None = None,
             tag_render: str | None = None,
             label_render: str | None = None,
             token_separators: list[str] | None = None,
@@ -128,6 +129,7 @@ def __init__(
         self.default_open = default_open
         self.default_value = default_value
         self.disabled = disabled
+        self.prefix = prefix
         self.popup_class_name = popup_class_name
         self.popup_match_select_width = popup_match_select_width
         self.get_popup_container = get_popup_container
diff --git a/backend/modelscope_studio/components/antd/table/column/__init__.py b/backend/modelscope_studio/components/antd/table/column/__init__.py
index 10bd8913..db21c38b 100644
--- a/backend/modelscope_studio/components/antd/table/column/__init__.py
+++ b/backend/modelscope_studio/components/antd/table/column/__init__.py
@@ -19,8 +19,11 @@ class AntdTableColumn(ModelScopeLayoutComponent):
 
     # supported slots
     SLOTS = [
-        'filterDropdown', 'filterIcon', 'render', 'title', 'sortIcon',
-        'showSorterTooltip.title'
+        'filterDropdown', "filterDropdownProps.dropdownRender",
+        "filterDropdownProps.menu.expandIcon",
+        'filterDropdownProps.menu.overflowedIndicator',
+        "filterDropdownProps.menu.items", 'filterIcon', 'render', 'title',
+        'sortIcon', 'showSorterTooltip.title'
     ]
 
     def __init__(
@@ -46,6 +49,7 @@ def __init__(
             filter_mode: Literal['menu', 'tree'] | None = None,
             filter_search: bool | str | None = None,
             filters: list[dict] | None = None,
+            filter_dropdown_props: dict | None = None,
             fixed: str | bool | None = None,
             key: str | None = None,
             column_render: str | None = None,
@@ -96,6 +100,7 @@ def __init__(
         self.filter_mode = filter_mode
         self.filter_search = filter_search
         self.filters = filters
+        self.filter_dropdown_props = filter_dropdown_props
         self.fixed = fixed
         self.key = key
         self.column_render = column_render
diff --git a/backend/modelscope_studio/components/antd/tree_select/__init__.py b/backend/modelscope_studio/components/antd/tree_select/__init__.py
index aff2e334..d8a458bf 100644
--- a/backend/modelscope_studio/components/antd/tree_select/__init__.py
+++ b/backend/modelscope_studio/components/antd/tree_select/__init__.py
@@ -42,7 +42,7 @@ class AntdTreeSelect(ModelScopeDataLayoutComponent):
     # supported slots
     SLOTS = [
         'allowClear.clearIcon', 'maxTagPlaceholder', 'notFoundContent',
-        'suffixIcon', 'switcherIcon', 'dropdownRender', 'tagRender',
+        'prefix', 'suffixIcon', 'switcherIcon', 'dropdownRender', 'tagRender',
         'treeTitleRender', 'treeData'
     ]
 
@@ -71,6 +71,7 @@ def __init__(
             max_tag_text_length: int | None = None,
             multiple: bool | None = None,
             not_found_content: str | None = None,
+            prefix: str | None = None,
             placeholder: str | None = None,
             placement: Literal['bottomLeft', 'bottomRight', 'topLeft',
                                'topRight'] | None = None,
@@ -128,6 +129,7 @@ def __init__(
         self.popup_match_select_width = popup_match_select_width
         self.dropdown_render = dropdown_render
         self.dropdown_style = dropdown_style
+        self.prefix = prefix
         self.field_names = field_names
         self.filter_tree_node = filter_tree_node
         self.get_popup_container = get_popup_container
diff --git a/backend/modelscope_studio/components/antd/upload/dragger/__init__.py b/backend/modelscope_studio/components/antd/upload/dragger/__init__.py
index cd240aa2..a905e081 100644
--- a/backend/modelscope_studio/components/antd/upload/dragger/__init__.py
+++ b/backend/modelscope_studio/components/antd/upload/dragger/__init__.py
@@ -2,7 +2,7 @@
 
 import tempfile
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable
+from typing import TYPE_CHECKING, Any, Callable, Literal
 
 import gradio_client.utils as client_utils
 from gradio import processing_utils
@@ -57,6 +57,31 @@ def __init__(
             value: list[str] | Callable | None = None,
             props: dict | None = None,
             *,
+            accept: str | None = None,
+            action: str | None = None,
+            before_upload: str | None = None,
+            custom_request: str | None = None,
+            data: dict | str | None = None,
+            default_file_list: list[dict] | None = None,
+            directory: bool | None = None,
+            disabled: bool | None = None,
+            file_list: list[dict] | None = None,
+            headers: dict | None = None,
+            icon_render: str | None = None,
+            is_image_url: str | None = None,
+            item_render: str | None = None,
+            list_type: Literal['text', 'picture', 'picture-card',
+                               'picture-circle'] | None = None,
+            max_count: int | None = None,
+            method: str | None = None,
+            multiple: bool | None = None,
+            form_name: str | None = None,
+            open_file_dialog_on_click: bool | None = True,
+            preview_file: str | None = None,
+            progress: dict | None = None,
+            show_upload_list: bool | dict | None = True,
+            with_credentials: bool | None = None,
+            root_class_name: str | None = None,
             as_item: str | None = None,
             _internal: None = None,
             # gradio properties
@@ -83,6 +108,30 @@ def __init__(
                          **kwargs)
 
         self.props = props
+        self.accept = accept
+        self.action = action
+        self.before_upload = before_upload
+        self.custom_request = custom_request
+        self.data = data
+        self.default_file_list = default_file_list
+        self.directory = directory
+        self.disabled = disabled
+        self.file_list = file_list
+        self.headers = headers
+        self.icon_render = icon_render
+        self.is_image_url = is_image_url
+        self.item_render = item_render
+        self.list_type = list_type
+        self.max_count = max_count
+        self.method = method
+        self.multiple = multiple
+        self.form_name = form_name
+        self.open_file_dialog_on_click = open_file_dialog_on_click
+        self.preview_file = preview_file
+        self.progress = progress
+        self.show_upload_list = show_upload_list
+        self.with_credentials = with_credentials
+        self.root_class_name = root_class_name
 
     FRONTEND_DIR = resolve_frontend_dir("upload", "dragger")
 
diff --git a/docs/app.py b/docs/app.py
index aa667e28..a83c4e9b 100644
--- a/docs/app.py
+++ b/docs/app.py
@@ -232,9 +232,33 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     "type":
     "group",
     "children": [{
+        "label": get_text("Avatar", "Avatar 头像"),
+        "key": "avatar"
+    }, {
+        "label": get_text("Badge", "Badge 徽标数"),
+        "key": "badge"
+    }, {
+        "label": get_text("Calendar", "Calendar 日历"),
+        "key": "calendar"
+    }, {
+        "label": get_text("Card", "Card 卡片"),
+        "key": "card"
+    }, {
+        "label": get_text("Carousel", "Carousel 走马灯"),
+        "key": "carousel"
+    }, {
         "label": get_text("Tour", "Tour 漫游式引导"),
         "key": "tour"
     }]
+}, {
+    "label":
+    get_text("Feedback", "反馈"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("Alert", "Alert 警告提示"),
+        "key": "alert"
+    }]
 }, {
     "label":
     get_text("Other", "其他"),
diff --git a/docs/components/antd/avatar/README-zh_CN.md b/docs/components/antd/avatar/README-zh_CN.md
new file mode 100644
index 00000000..880d78e9
--- /dev/null
+++ b/docs/components/antd/avatar/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Avatar
+
+Used to represent users or things, supporting the display of images, icons, or characters. See [Ant Design](https://ant.design/components/avatar/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="group" title="Avatar.Group"></demo>
diff --git a/docs/components/antd/avatar/README.md b/docs/components/antd/avatar/README.md
new file mode 100644
index 00000000..880d78e9
--- /dev/null
+++ b/docs/components/antd/avatar/README.md
@@ -0,0 +1,8 @@
+# Avatar
+
+Used to represent users or things, supporting the display of images, icons, or characters. See [Ant Design](https://ant.design/components/avatar/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="group" title="Avatar.Group"></demo>
diff --git a/docs/components/antd/avatar/app.py b/docs/components/antd/avatar/app.py
new file mode 100644
index 00000000..0018b7c1
--- /dev/null
+++ b/docs/components/antd/avatar/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/avatar/demos/basic.py b/docs/components/antd/avatar/demos/basic.py
new file mode 100644
index 00000000..8fd8b7bd
--- /dev/null
+++ b/docs/components/antd/avatar/demos/basic.py
@@ -0,0 +1,43 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Space(size=16, wrap=True):
+                with antd.Avatar():
+                    with ms.Slot("icon"):
+                        antd.Icon("UserOutlined")
+                with antd.Avatar():
+                    ms.Text('U')
+                with antd.Avatar(shape="square"):
+                    ms.Text("USER")
+                antd.Avatar(
+                    "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+                )
+                with antd.Avatar():
+                    with ms.Slot("src"):
+                        antd.Image(
+                            "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
+                            alt="avatar")
+                with antd.Avatar(elem_style=dict(backgroundColor='#fde3cf',
+                                                 color='#f56a00')):
+                    ms.Text("U")
+                with antd.Avatar(elem_style=dict(backgroundColor='#87d068')):
+                    with ms.Slot("icon"):
+                        antd.Icon("UserOutlined")
+
+            antd.Divider("With Badge")
+            with antd.Space(size=24):
+                with antd.Badge(count=1):
+                    with antd.Avatar(shape="square"):
+                        with ms.Slot("icon"):
+                            antd.Icon("UserOutlined")
+                with antd.Badge(dot=True):
+                    with antd.Avatar(shape="square"):
+                        with ms.Slot("icon"):
+                            antd.Icon("UserOutlined")
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/avatar/demos/group.py b/docs/components/antd/avatar/demos/group.py
new file mode 100644
index 00000000..b1912d3c
--- /dev/null
+++ b/docs/components/antd/avatar/demos/group.py
@@ -0,0 +1,99 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Avatar.Group():
+                antd.Avatar(
+                    value="https://api.dicebear.com/7.x/miniavs/svg?seed=1")
+                with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+                    ms.Text("K")
+                with antd.Tooltip(title="Ant User", placement="top"):
+                    with antd.Avatar(elem_style=dict(
+                            backgroundColor="#87d068")):
+                        with ms.Slot("icon"):
+                            antd.Icon("UserOutlined")
+                with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+                    with ms.Slot("icon"):
+                        antd.Icon("AntDesignOutlined")
+
+            antd.Divider()
+
+            with antd.Avatar.Group(max=dict(
+                    count=2,
+                    style=dict(color="#f56a00", backgroundColor="#fde3cf"))):
+                antd.Avatar(
+                    value="https://api.dicebear.com/7.x/miniavs/svg?seed=2")
+                with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+                    ms.Text("K")
+                with antd.Tooltip(title="Ant User", placement="top"):
+                    with antd.Avatar(elem_style=dict(
+                            backgroundColor="#87d068")):
+                        with ms.Slot("icon"):
+                            antd.Icon("UserOutlined")
+                with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+                    with ms.Slot("icon"):
+                        antd.Icon("AntDesignOutlined")
+
+            antd.Divider()
+
+            with antd.Avatar.Group(size="large",
+                                   max=dict(count=2,
+                                            style=dict(
+                                                color="#f56a00",
+                                                backgroundColor="#fde3cf"))):
+                antd.Avatar(
+                    value="https://api.dicebear.com/7.x/miniavs/svg?seed=3")
+                with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+                    ms.Text("K")
+                with antd.Tooltip(title="Ant User", placement="top"):
+                    with antd.Avatar(elem_style=dict(
+                            backgroundColor="#87d068")):
+                        with ms.Slot("icon"):
+                            antd.Icon("UserOutlined")
+                with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+                    with ms.Slot("icon"):
+                        antd.Icon("AntDesignOutlined")
+
+            antd.Divider()
+
+            with antd.Avatar.Group(size="large",
+                                   max=dict(count=2,
+                                            style=dict(
+                                                color="#f56a00",
+                                                backgroundColor="#fde3cf",
+                                                cursor="pointer"),
+                                            popover=dict(trigger="click"))):
+                antd.Avatar(
+                    value=
+                    "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                )
+                with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+                    ms.Text("K")
+                with antd.Tooltip(title="Ant User", placement="top"):
+                    with antd.Avatar(elem_style=dict(
+                            backgroundColor="#87d068")):
+                        with ms.Slot("icon"):
+                            antd.Icon("UserOutlined")
+                with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+                    with ms.Slot("icon"):
+                        antd.Icon("AntDesignOutlined")
+
+            antd.Divider()
+
+            with antd.Avatar.Group(shape="square"):
+                with antd.Avatar(elem_style=dict(backgroundColor="#fde3cf")):
+                    ms.Text("A")
+                with antd.Avatar(elem_style=dict(backgroundColor="#f56a00")):
+                    ms.Text("K")
+                with antd.Avatar(elem_style=dict(backgroundColor="#87d068")):
+                    with ms.Slot("icon"):
+                        antd.Icon("UserOutlined")
+                with antd.Avatar(elem_style=dict(backgroundColor="#1677ff")):
+                    with ms.Slot("icon"):
+                        antd.Icon("AntDesignOutlined")
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/badge/README-zh_CN.md b/docs/components/antd/badge/README-zh_CN.md
new file mode 100644
index 00000000..df072fbf
--- /dev/null
+++ b/docs/components/antd/badge/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Badge
+
+Small numerical value or status descriptor for UI elements. See [Ant Design](https://ant.design/components/badge/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="ribbon" title="Ribbon"></demo>
diff --git a/docs/components/antd/badge/README.md b/docs/components/antd/badge/README.md
new file mode 100644
index 00000000..df072fbf
--- /dev/null
+++ b/docs/components/antd/badge/README.md
@@ -0,0 +1,8 @@
+# Badge
+
+Small numerical value or status descriptor for UI elements. See [Ant Design](https://ant.design/components/badge/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="ribbon" title="Ribbon"></demo>
diff --git a/docs/components/antd/badge/app.py b/docs/components/antd/badge/app.py
new file mode 100644
index 00000000..0018b7c1
--- /dev/null
+++ b/docs/components/antd/badge/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/badge/demos/basic.py b/docs/components/antd/badge/demos/basic.py
new file mode 100644
index 00000000..91f615c0
--- /dev/null
+++ b/docs/components/antd/badge/demos/basic.py
@@ -0,0 +1,36 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Space(size="middle"):
+                with antd.Badge(count=5):
+                    antd.Avatar(shape="square", size="large")
+
+                with antd.Badge(count=0, show_zero=True):
+                    antd.Avatar(shape="square", size="large")
+
+                with antd.Badge(elem_style=dict(color="#f5222d")):
+                    with ms.Slot("count"):
+                        antd.Icon("ClockCircleOutlined")
+                    antd.Avatar(shape="square", size="large")
+                with antd.Badge(count=99, overflow_count=10):
+                    antd.Avatar(shape="square", size="large")
+                with antd.Badge(count=1000, overflow_count=999):
+                    antd.Avatar(shape="square", size="large")
+
+                with antd.Badge(dot=True):
+                    antd.Icon("NotificationOutlined",
+                              elem_style=dict(fontSize="16"))
+            antd.Divider("Status")
+            with antd.Space(direction="vertical"):
+                antd.Badge(status="success", text="Success")
+                antd.Badge(status="error", text="Error")
+                antd.Badge(status="default", text="Default")
+                antd.Badge(status="processing", text="Processing")
+                antd.Badge(status="warning", text="Warning")
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/badge/demos/ribbon.py b/docs/components/antd/badge/demos/ribbon.py
new file mode 100644
index 00000000..1aac3c99
--- /dev/null
+++ b/docs/components/antd/badge/demos/ribbon.py
@@ -0,0 +1,52 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Space(direction="vertical",
+                            size="middle",
+                            elem_style=dict(width="100%")):
+                with antd.Badge.Ribbon(text="Hippies"):
+                    with antd.Card(title="Pushes open the window",
+                                   size="small"):
+                        ms.Text("and raises the spyglass.")
+
+                with antd.Badge.Ribbon(text="Hippies", color="pink"):
+                    with antd.Card(title="Pushes open the window",
+                                   size="small"):
+                        ms.Text("and raises the spyglass.")
+
+                with antd.Badge.Ribbon(text="Hippies", color="red"):
+                    with antd.Card(title="Pushes open the window",
+                                   size="small"):
+                        ms.Text("and raises the spyglass.")
+
+                with antd.Badge.Ribbon(text="Hippies", color="cyan"):
+                    with antd.Card(title="Pushes open the window",
+                                   size="small"):
+                        ms.Text("and raises the spyglass.")
+
+                with antd.Badge.Ribbon(text="Hippies", color="green"):
+                    with antd.Card(title="Pushes open the window",
+                                   size="small"):
+                        ms.Text("and raises the spyglass.")
+
+                with antd.Badge.Ribbon(text="Hippies", color="purple"):
+                    with antd.Card(title="Pushes open the window",
+                                   size="small"):
+                        ms.Text("and raises the spyglass.")
+
+                with antd.Badge.Ribbon(text="Hippies", color="volcano"):
+                    with antd.Card(title="Pushes open the window",
+                                   size="small"):
+                        ms.Text("and raises the spyglass.")
+
+                with antd.Badge.Ribbon(text="Hippies", color="magenta"):
+                    with antd.Card(title="Pushes open the window",
+                                   size="small"):
+                        ms.Text("and raises the spyglass.")
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/calendar/README-zh_CN.md b/docs/components/antd/calendar/README-zh_CN.md
new file mode 100644
index 00000000..f0d43399
--- /dev/null
+++ b/docs/components/antd/calendar/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Calendar
+
+A container that displays data in calendar form. See [Ant Design](https://ant.design/components/calendar/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="notice_calendar" title="Notice Calendar"></demo>
diff --git a/docs/components/antd/calendar/README.md b/docs/components/antd/calendar/README.md
new file mode 100644
index 00000000..f0d43399
--- /dev/null
+++ b/docs/components/antd/calendar/README.md
@@ -0,0 +1,8 @@
+# Calendar
+
+A container that displays data in calendar form. See [Ant Design](https://ant.design/components/calendar/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="notice_calendar" title="Notice Calendar"></demo>
diff --git a/docs/components/antd/calendar/app.py b/docs/components/antd/calendar/app.py
new file mode 100644
index 00000000..0018b7c1
--- /dev/null
+++ b/docs/components/antd/calendar/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/calendar/demos/basic.py b/docs/components/antd/calendar/demos/basic.py
new file mode 100644
index 00000000..7dfaafed
--- /dev/null
+++ b/docs/components/antd/calendar/demos/basic.py
@@ -0,0 +1,15 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            antd.Calendar()
+            antd.Divider("Card")
+            with antd.Card():
+                antd.Calendar(fullscreen=False)
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/calendar/demos/notice_calendar.py b/docs/components/antd/calendar/demos/notice_calendar.py
new file mode 100644
index 00000000..baf2165c
--- /dev/null
+++ b/docs/components/antd/calendar/demos/notice_calendar.py
@@ -0,0 +1,56 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            antd.Calendar(cell_render="""(current, info) => {
+  if (info.type === 'date') {
+    if (current.date() === 8) {
+      const React = window.ms_globals.React;
+      const antd = window.ms_globals.antd;
+      const events = [
+        {
+          type: 'warning',
+          content: 'This is warning event.',
+        },
+        {
+          type: 'success',
+          content: 'This is usual event.',
+        },
+      ];
+      return React.createElement(
+        'ul',
+        {
+          style: {
+            margin: 0,
+            padding: 0,
+            listStyle: 'none'
+          }
+        },
+        events.map((event) => {
+          return React.createElement(
+            'li',
+            {
+              style: {
+                marginBottom: 8,
+              },
+            },
+            [
+              React.createElement(antd.Badge, {
+                status: event.type,
+                text: event.content,
+              }),
+            ]
+          );
+        })
+      );
+    }
+  }
+  return info.originNode;
+}""")
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/card/README-zh_CN.md b/docs/components/antd/card/README-zh_CN.md
new file mode 100644
index 00000000..7ec12ede
--- /dev/null
+++ b/docs/components/antd/card/README-zh_CN.md
@@ -0,0 +1,9 @@
+# Card
+
+A container for displaying information. See [Ant Design](https://ant.design/components/card/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="customized_content" title="Customized Content"></demo>
+<demo name="grid_card" title="Grid Card"></demo>
diff --git a/docs/components/antd/card/README.md b/docs/components/antd/card/README.md
new file mode 100644
index 00000000..7ec12ede
--- /dev/null
+++ b/docs/components/antd/card/README.md
@@ -0,0 +1,9 @@
+# Card
+
+A container for displaying information. See [Ant Design](https://ant.design/components/card/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="customized_content" title="Customized Content"></demo>
+<demo name="grid_card" title="Grid Card"></demo>
diff --git a/docs/components/antd/card/app.py b/docs/components/antd/card/app.py
new file mode 100644
index 00000000..0018b7c1
--- /dev/null
+++ b/docs/components/antd/card/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/card/demos/basic.py b/docs/components/antd/card/demos/basic.py
new file mode 100644
index 00000000..1e407e9f
--- /dev/null
+++ b/docs/components/antd/card/demos/basic.py
@@ -0,0 +1,28 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Space(direction="vertical", size=16):
+                with antd.Card(title="Default size card",
+                               elem_style=dict(width=300)):
+                    with ms.Slot("extra"):
+                        antd.Button("More", type="link", href="#")
+                    ms.Div("Card content")
+                    ms.Div("Card content")
+                    ms.Div("Card content")
+                with antd.Card(title="Small size card",
+                               elem_style=dict(width=300),
+                               size="small",
+                               bordered=False):
+                    with ms.Slot("extra"):
+                        antd.Button("More", type="link", href="#")
+                    ms.Div("Card content")
+                    ms.Div("Card content")
+                    ms.Div("Card content")
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/card/demos/customized_content.py b/docs/components/antd/card/demos/customized_content.py
new file mode 100644
index 00000000..a72fefe9
--- /dev/null
+++ b/docs/components/antd/card/demos/customized_content.py
@@ -0,0 +1,40 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Space(direction="vertical", size=16):
+                with antd.Card(hoverable=True, elem_style=dict(width=240)):
+                    with ms.Slot("cover"):
+                        antd.Image(
+                            value=
+                            "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
+                            width="100%",
+                            preview=False,
+                            alt="example")
+                    antd.Card.Meta(title="Europe Street beat",
+                                   description="www.instagram.com")
+                with antd.Card(elem_style=dict(width=300)):
+                    with ms.Slot("cover"):
+                        antd.Image(
+                            value=
+                            "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
+                            preview=False,
+                            width="100%",
+                            alt="example")
+                    with ms.Slot("actions"):
+                        antd.Icon("SettingOutlined")
+                        antd.Icon("EditOutlined")
+                        antd.Icon("EllipsisOutlined")
+                    with antd.Card.Meta(title="Card title",
+                                        description="This is the description"):
+                        with ms.Slot("avatar"):
+                            antd.Avatar(
+                                "https://api.dicebear.com/7.x/miniavs/svg?seed=8"
+                            )
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/card/demos/grid_card.py b/docs/components/antd/card/demos/grid_card.py
new file mode 100644
index 00000000..357eb155
--- /dev/null
+++ b/docs/components/antd/card/demos/grid_card.py
@@ -0,0 +1,31 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+gridStyle = {
+    "width": '25%',
+    "textAlign": 'center',
+}
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Card(title="Card Title"):
+                with antd.Card.Grid(elem_style=gridStyle):
+                    ms.Text("Content")
+                with antd.Card.Grid(hoverable=False, elem_style=gridStyle):
+                    ms.Text("Content")
+                with antd.Card.Grid(elem_style=gridStyle):
+                    ms.Text("Content")
+                with antd.Card.Grid(elem_style=gridStyle):
+                    ms.Text("Content")
+                with antd.Card.Grid(elem_style=gridStyle):
+                    ms.Text("Content")
+                with antd.Card.Grid(elem_style=gridStyle):
+                    ms.Text("Content")
+                with antd.Card.Grid(elem_style=gridStyle):
+                    ms.Text("Content")
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/form/demos/basic.py b/docs/components/antd/form/demos/basic.py
index a9481ba5..23dc7a80 100644
--- a/docs/components/antd/form/demos/basic.py
+++ b/docs/components/antd/form/demos/basic.py
@@ -67,12 +67,14 @@ def on_change(_form):
                     antd.Input.Password()
                 with antd.Form.Item(form_name="files", label="Upload"):
                     with antd.Upload.Dragger():
-                        with ms.Div(elem_classes="ant-upload-drag-icon"):
+                        with ms.Div(
+                                elem_style=dict(fontSize=40, color="#1677ff")):
                             antd.Icon("InboxOutlined")
-                        ms.Div("Click or drag file to this area to upload",
-                               elem_classes="ant-upload-text")
-                        ms.Div("Support for a single or bulk upload.",
-                               elem_classes="ant-upload-hint")
+                        antd.Typography.Paragraph(
+                            "Click or drag file to this area to upload")
+                        antd.Typography.Paragraph(
+                            "Support for a single or bulk upload.",
+                            type="secondary")
 
                 with antd.Form.Item(
                         wrapper_col=dict(offset=8, span=16),
diff --git a/docs/components/antd/upload/demos/avatar.py b/docs/components/antd/upload/demos/avatar.py
index 25eacd66..4d4afcf1 100644
--- a/docs/components/antd/upload/demos/avatar.py
+++ b/docs/components/antd/upload/demos/avatar.py
@@ -7,6 +7,8 @@
     with ms.Application():
         with antd.ConfigProvider():
             with antd.Upload(list_type="picture-card",
+                             max_count=1,
+                             show_upload_list=False,
                              accept="image/*") as upload:
                 image = antd.Image(elem_style=dict(width="100%"),
                                    preview=False,
diff --git a/docs/components/antd/upload/demos/basic.py b/docs/components/antd/upload/demos/basic.py
index a87334c6..6fc65497 100644
--- a/docs/components/antd/upload/demos/basic.py
+++ b/docs/components/antd/upload/demos/basic.py
@@ -21,6 +21,15 @@
                     ms.Text("Upload (Max: 3)")
                     with ms.Slot("icon"):
                         antd.Icon("UploadOutlined")
+            antd.Divider("Drag and Drop")
+            with antd.Upload.Dragger(multiple=True):
+                with ms.Div(elem_style=dict(fontSize=40, color="#1677ff")):
+                    antd.Icon("InboxOutlined")
+                antd.Typography.Paragraph(
+                    "Click or drag file to this area to upload")
+                antd.Typography.Paragraph(
+                    "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.",
+                    type="secondary")
 
 if __name__ == "__main__":
     demo.queue().launch()
diff --git a/frontend/antd/avatar/avatar.tsx b/frontend/antd/avatar/avatar.tsx
index e4171fce..04466282 100644
--- a/frontend/antd/avatar/avatar.tsx
+++ b/frontend/antd/avatar/avatar.tsx
@@ -7,13 +7,17 @@ export const Avatar = sveltify<GetProps<typeof AAvatar>, ['icon', 'src']>(
   ({ slots, children, ...props }) => {
     return (
       <>
-        {slots.icon ? children : null}
+        <div style={{ display: 'none' }}>
+          {slots.icon || slots.src ? children : null}
+        </div>
         <AAvatar
           {...props}
           icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
-          src={slots.src ? <ReactSlot slot={slots.src} /> : props.src}
+          src={
+            slots.src ? <ReactSlot slot={slots.src} /> : props.src || undefined
+          }
         >
-          {slots.icon ? null : children}
+          {slots.icon || slots.src ? null : children}
         </AAvatar>
       </>
     );
diff --git a/frontend/antd/avatar/group/avatar.group.less b/frontend/antd/avatar/group/avatar.group.less
new file mode 100644
index 00000000..46b57881
--- /dev/null
+++ b/frontend/antd/avatar/group/avatar.group.less
@@ -0,0 +1,11 @@
+.ms-gr-container {
+  .ms-gr-antd-avatar-group {
+    > *:not(:first-child) {
+      react-portal-target {
+        .ms-gr-ant-avatar {
+          margin-inline-start: var(--ms-gr-ant-avatar-group-overlapping);
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/antd/avatar/group/avatar.group.tsx b/frontend/antd/avatar/group/avatar.group.tsx
index ecc93959..8cd24a22 100644
--- a/frontend/antd/avatar/group/avatar.group.tsx
+++ b/frontend/antd/avatar/group/avatar.group.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 import { useTargets } from '@utils/hooks/useTargets';
 import { Avatar as AAvatar, type GetProps } from 'antd';
 
+import './avatar.group.less';
+
 export const AvatarGroup = sveltify<
   GetProps<typeof AAvatar.Group>,
   ['max.popover.title', 'max.popover.content']
@@ -11,11 +13,15 @@ export const AvatarGroup = sveltify<
   const targets = useTargets(children);
   return (
     <>
-      <div style={{ display: 'none' }}>{children}</div>
       <AAvatar.Group
         {...props}
         max={{
           ...props.max,
+          count:
+            typeof props.max?.count === 'number'
+              ? // children render
+                props.max.count + 1
+              : props.max?.count,
           popover: !(slots['max.popover.title'] || slots['max.popover.content'])
             ? props.max?.popover
             : {
@@ -33,6 +39,7 @@ export const AvatarGroup = sveltify<
               },
         }}
       >
+        <div style={{ display: 'none' }}>{children}</div>
         {targets.map((target, index) => {
           return <ReactSlot slot={target} key={index} />;
         })}
diff --git a/frontend/antd/card/Index.svelte b/frontend/antd/card/Index.svelte
index ee0d524d..a45a4ec9 100644
--- a/frontend/antd/card/Index.svelte
+++ b/frontend/antd/card/Index.svelte
@@ -5,12 +5,18 @@
     bindEvents,
     importComponent,
   } from '@svelte-preprocess-react/component';
-  import { getSlotContext, getSlots } from '@svelte-preprocess-react/slot';
+  import {
+    getSetSlotParamsFn,
+    getSlotContext,
+    getSlots,
+  } from '@svelte-preprocess-react/slot';
   import type React from 'react';
   import type { Gradio } from '@gradio/utils';
   import cls from 'classnames';
   import { type Writable, writable } from 'svelte/store';
 
+  import { getItems } from '../tabs/context';
+
   const AwaitedCard = importComponent(() => import('./card'));
   export let gradio: Gradio;
   export let _internal: Record<string, any> = {};
@@ -22,6 +28,8 @@
   export let elem_classes: string[] = [];
   export let elem_style: React.CSSProperties = {};
   export let visible = true;
+  const setSlotParams = getSetSlotParamsFn();
+
   const slots = getSlots();
   const [mergedProps, update] = getSlotContext({
     gradio,
@@ -45,6 +53,8 @@
     elem_style,
     restProps: $$restProps,
   });
+
+  const { tabList } = getItems(['tabList']);
 </script>
 
 {#if $mergedProps.visible}
@@ -58,6 +68,8 @@
       {...bindEvents($mergedProps)}
       containsGrid={$mergedProps._internal.contains_grid}
       slots={$slots}
+      tabListItems={$tabList}
+      {setSlotParams}
     >
       <slot></slot>
     </Card>
diff --git a/frontend/antd/card/card.tsx b/frontend/antd/card/card.tsx
index af34731b..91ca3a86 100644
--- a/frontend/antd/card/card.tsx
+++ b/frontend/antd/card/card.tsx
@@ -1,41 +1,80 @@
 import { sveltify } from '@svelte-preprocess-react';
 import { ReactSlot } from '@svelte-preprocess-react/react-slot';
-import React from 'react';
+import type { SetSlotParams } from '@svelte-preprocess-react/slot';
+import React, { useMemo } from 'react';
 import { useTargets } from '@utils/hooks/useTargets';
+import { renderItems } from '@utils/renderItems';
 import { Card as ACard, type GetProps } from 'antd';
 
+import { type Item } from '../tabs/context';
+
 export const Card = sveltify<
   GetProps<typeof ACard> & {
     containsGrid?: boolean;
+    tabListItems: Item[];
+    setSlotParams: SetSlotParams;
   },
-  ['actions', 'cover', 'extra', 'tabBarExtraContent', 'title']
->(({ children, containsGrid, slots, ...props }) => {
-  const targets = useTargets(children, 'actions');
-  return (
-    <ACard
-      {...props}
-      title={slots.title ? <ReactSlot slot={slots.title} /> : props.title}
-      extra={slots.extra ? <ReactSlot slot={slots.extra} /> : props.extra}
-      cover={slots.cover ? <ReactSlot slot={slots.cover} /> : props.cover}
-      tabBarExtraContent={
-        slots.tabBarExtraContent ? (
-          <ReactSlot slot={slots.tabBarExtraContent} />
-        ) : (
-          props.tabBarExtraContent
-        )
-      }
-      actions={
-        targets.length > 0
-          ? targets.map((target, index) => {
-              return <ReactSlot key={index} slot={target} />;
-            })
-          : props.actions
-      }
-    >
-      {containsGrid ? <ACard.Grid style={{ display: 'none' }} /> : null}
-      {children}
-    </ACard>
-  );
-});
+  [
+    'actions',
+    'cover',
+    'extra',
+    'tabBarExtraContent',
+    'title',
+    'tabProps.addIcon',
+    'tabProps.removeIcon',
+    'tabProps.renderTabBar',
+    'tabProps.tabBarExtraContent',
+    'tabProps.tabBarExtraContent.left',
+    'tabProps.tabBarExtraContent.right',
+    'tabProps.more.icon',
+  ]
+>(
+  ({
+    children,
+    containsGrid,
+    slots,
+    tabListItems,
+    tabList,
+    tabProps,
+    ...props
+  }) => {
+    const targets = useTargets(children, 'actions');
+
+    return (
+      <ACard
+        {...props}
+        tabProps={tabProps}
+        tabList={useMemo(() => {
+          return (
+            tabList ||
+            renderItems<NonNullable<GetProps<typeof ACard>['tabList']>[number]>(
+              tabListItems
+            )
+          );
+        }, [tabList, tabListItems])}
+        title={slots.title ? <ReactSlot slot={slots.title} /> : props.title}
+        extra={slots.extra ? <ReactSlot slot={slots.extra} /> : props.extra}
+        cover={slots.cover ? <ReactSlot slot={slots.cover} /> : props.cover}
+        tabBarExtraContent={
+          slots.tabBarExtraContent ? (
+            <ReactSlot slot={slots.tabBarExtraContent} />
+          ) : (
+            props.tabBarExtraContent
+          )
+        }
+        actions={
+          targets.length > 0
+            ? targets.map((target, index) => {
+                return <ReactSlot key={index} slot={target} />;
+              })
+            : props.actions
+        }
+      >
+        {containsGrid ? <ACard.Grid style={{ display: 'none' }} /> : null}
+        {children}
+      </ACard>
+    );
+  }
+);
 
 export default Card;
diff --git a/frontend/antd/cascader/cascader.tsx b/frontend/antd/cascader/cascader.tsx
index 017163d8..49168b02 100644
--- a/frontend/antd/cascader/cascader.tsx
+++ b/frontend/antd/cascader/cascader.tsx
@@ -30,6 +30,7 @@ export const Cascader = sveltify<
     'maxTagPlaceholder',
     'notFoundContent',
     'expandIcon',
+    'prefix',
     'removeIcon',
     'displayRender',
     'tagRender',
@@ -107,6 +108,9 @@ export const Cascader = sveltify<
           loadData={onLoadData}
           optionRender={optionRenderFunction}
           getPopupContainer={getPopupContainerFunction}
+          prefix={
+            slots.prefix ? <ReactSlot slot={slots.prefix} /> : props.prefix
+          }
           dropdownRender={
             slots.dropdownRender
               ? renderParamsSlot({
diff --git a/frontend/antd/date-picker/date-picker.tsx b/frontend/antd/date-picker/date-picker.tsx
index 7d4bbc3d..75a2e496 100644
--- a/frontend/antd/date-picker/date-picker.tsx
+++ b/frontend/antd/date-picker/date-picker.tsx
@@ -49,6 +49,7 @@ export const DatePicker = sveltify<
   },
   [
     'allowClear.clearIcon',
+    'prefix',
     'prevIcon',
     'nextIcon',
     'suffixIcon',
@@ -149,7 +150,7 @@ export const DatePicker = sveltify<
               renderItems<NonNullable<DatePickerProps['presets']>[number]>(
                 presetItems
               )
-            ).map((preset) => {
+            )?.map((preset) => {
               return {
                 ...preset,
                 value: formatDayjs(preset.value),
@@ -181,6 +182,9 @@ export const DatePicker = sveltify<
               props.prevIcon
             )
           }
+          prefix={
+            slots.prefix ? <ReactSlot slot={slots.prefix} /> : props.prefix
+          }
           nextIcon={
             slots.nextIcon ? (
               <ReactSlot slot={slots.nextIcon} />
diff --git a/frontend/antd/date-picker/range-picker/date-picker.range-picker.tsx b/frontend/antd/date-picker/range-picker/date-picker.range-picker.tsx
index 3847f372..91d665d7 100644
--- a/frontend/antd/date-picker/range-picker/date-picker.range-picker.tsx
+++ b/frontend/antd/date-picker/range-picker/date-picker.range-picker.tsx
@@ -44,6 +44,7 @@ export const DateRangePicker = sveltify<
   },
   [
     'allowClear.clearIcon',
+    'prefix',
     'prevIcon',
     'nextIcon',
     'suffixIcon',
@@ -154,7 +155,7 @@ export const DateRangePicker = sveltify<
               renderItems<NonNullable<RangePickerProps['presets']>[number]>(
                 presetItems
               )
-            ).map((preset) => {
+            )?.map((preset) => {
               return {
                 ...preset,
                 value: formatDates(preset.value as any),
@@ -183,6 +184,9 @@ export const DateRangePicker = sveltify<
                 })
               : props.renderExtraFooter
           }
+          prefix={
+            slots.prefix ? <ReactSlot slot={slots.prefix} /> : props.prefix
+          }
           prevIcon={
             slots.prevIcon ? (
               <ReactSlot slot={slots.prevIcon} />
diff --git a/frontend/antd/select/select.tsx b/frontend/antd/select/select.tsx
index 48c4d0f4..d1f98d43 100644
--- a/frontend/antd/select/select.tsx
+++ b/frontend/antd/select/select.tsx
@@ -26,6 +26,7 @@ export const Select = sveltify<
     'optionRender',
     'tagRender',
     'labelRender',
+    'prefix',
   ]
 >(
   ({
@@ -83,6 +84,9 @@ export const Select = sveltify<
                 }
               : props.allowClear
           }
+          prefix={
+            slots.prefix ? <ReactSlot slot={slots.prefix} /> : props.prefix
+          }
           removeIcon={
             slots.removeIcon ? (
               <ReactSlot slot={slots.removeIcon} />
diff --git a/frontend/antd/table/column/Index.svelte b/frontend/antd/table/column/Index.svelte
index 9e848fbc..148a773f 100644
--- a/frontend/antd/table/column/Index.svelte
+++ b/frontend/antd/table/column/Index.svelte
@@ -11,9 +11,13 @@
   import type React from 'react';
   import type { Gradio } from '@gradio/utils';
   import { createFunction } from '@utils/createFunction';
+  import { renderItems } from '@utils/renderItems';
+  import { renderParamsSlot } from '@utils/renderParamsSlot';
+  import { renderSlot } from '@utils/renderSlot';
   import cls from 'classnames';
   import { writable } from 'svelte/store';
 
+  import { getItems as getMenuItems } from '../../menu/context';
   import { getSetColumnItemFn, type Item } from '../context';
 
   export let gradio: Gradio;
@@ -59,7 +63,9 @@
     as_item,
     restProps: $$restProps,
   });
-
+  const { 'filterDropdownProps.menu.items': dropdownMenuItems } = getMenuItems([
+    'filterDropdownProps.menu.items',
+  ]);
   const setColumnItem = getSetColumnItemFn();
   const setSlotParams = getSetSlotParamsFn();
   $: {
@@ -67,6 +73,59 @@
       $mergedProps.props.showSorterTooltip ||
       $mergedProps.restProps.showSorterTooltip;
     const sorter = $mergedProps.props.sorter || $mergedProps.restProps.sorter;
+
+    const filterDropdownMenu = {
+      ...($mergedProps.restProps.filterDropdownProps?.menu || {}),
+      ...($mergedProps.props.filterDropdownProps?.menu || {}),
+      items:
+        $mergedProps.props.filterDropdownProps?.menu?.items ||
+        $mergedProps.restProps.filterDropdownProps?.menu?.items ||
+        $dropdownMenuItems.length > 0
+          ? renderItems($dropdownMenuItems, { clone: true })
+          : undefined,
+      expandIcon:
+        renderParamsSlot(
+          {
+            setSlotParams,
+            slots: $slots,
+            key: 'filterDropdownProps.menu.expandIcon',
+          },
+          {
+            clone: true,
+          }
+        ) ||
+        $mergedProps.props.filterDropdownProps?.menu?.expandIcon ||
+        $mergedProps.restProps.filterDropdownProps?.menu?.expandIcon,
+      overflowedIndicator:
+        renderSlot($slots['filterDropdownProps.menu.overflowedIndicator']) ||
+        $mergedProps.props.filterDropdownProps?.menu?.overflowedIndicator ||
+        $mergedProps.restProps.filterDropdownProps?.menu?.overflowedIndicator,
+    };
+
+    const filterDropdownProps = {
+      ...($mergedProps.restProps.filterDropdownProps || {}),
+      ...($mergedProps.props.filterDropdownProps || {}),
+      dropdownRender: $slots['filterDropdownProps.dropdownRender']
+        ? renderParamsSlot(
+            {
+              setSlotParams,
+              slots: $slots,
+              key: 'filterDropdownProps.dropdownRender',
+            },
+            {
+              clone: true,
+            }
+          )
+        : createFunction(
+            $mergedProps.props.filterDropdownProps?.dropdownRender ||
+              $mergedProps.restProps.filterDropdownProps?.dropdownRender
+          ),
+      menu:
+        Object.values(filterDropdownMenu).filter(Boolean).length > 0
+          ? filterDropdownMenu
+          : undefined,
+    };
+
     setColumnItem<Item | string>(
       $slotKey,
       $mergedProps._internal.index || 0,
@@ -86,6 +145,10 @@
               render: createFunction(
                 $mergedProps.props.render || $mergedProps.restProps.render
               ),
+              filterDropdownProps:
+                Object.values(filterDropdownProps).filter(Boolean).length > 0
+                  ? filterDropdownProps
+                  : undefined,
               filterIcon: createFunction(
                 $mergedProps.props.filterIcon ||
                   $mergedProps.restProps.filterIcon
diff --git a/frontend/antd/table/expandable/Expandable.svelte b/frontend/antd/table/expandable/Expandable.svelte
index 07a8dcb6..ea88bbec 100644
--- a/frontend/antd/table/expandable/Expandable.svelte
+++ b/frontend/antd/table/expandable/Expandable.svelte
@@ -75,7 +75,8 @@
         ...events,
         expandedRowClassName: createFunction(
           $mergedProps.props.expandedRowClassName ||
-            $mergedProps.restProps.expandedRowClassName
+            $mergedProps.restProps.expandedRowClassName,
+          true
         ),
         expandedRowRender: createFunction(
           $mergedProps.props.expandedRowRender ||
diff --git a/frontend/antd/table/table.tsx b/frontend/antd/table/table.tsx
index f60a2948..efef003b 100644
--- a/frontend/antd/table/table.tsx
+++ b/frontend/antd/table/table.tsx
@@ -127,13 +127,13 @@ export const Table = sveltify<
           rowSelection={useMemo(() => {
             return (
               rowSelection ||
-              renderItems<TableProps['rowSelection']>(rowSelectionItems)[0]
+              renderItems<TableProps['rowSelection']>(rowSelectionItems)?.[0]
             );
           }, [rowSelection, rowSelectionItems])}
           expandable={useMemo(() => {
             return (
               expandable ||
-              renderItems<TableProps['expandable']>(expandableItems)[0]
+              renderItems<TableProps['expandable']>(expandableItems)?.[0]
             );
           }, [expandable, expandableItems])}
           rowClassName={rowClassNameFunction}
diff --git a/frontend/antd/tree-select/tree-select.tsx b/frontend/antd/tree-select/tree-select.tsx
index d76e9208..55dcac28 100644
--- a/frontend/antd/tree-select/tree-select.tsx
+++ b/frontend/antd/tree-select/tree-select.tsx
@@ -24,6 +24,7 @@ export const TreeSelect = sveltify<
     'maxTagPlaceholder',
     'notFoundContent',
     'suffixIcon',
+    'prefix',
     'switcherIcon',
     'dropdownRender',
     'tagRender',
@@ -77,6 +78,7 @@ export const TreeSelect = sveltify<
         ) : (
           props.suffixIcon
         ),
+        prefix: slots.prefix ? <ReactSlot slot={slots.prefix} /> : props.prefix,
         switcherIcon: slots.switcherIcon
           ? renderParamsSlot({ slots, setSlotParams, key: 'switcherIcon' })
           : props.switcherIcon,
diff --git a/frontend/legacy/Chatbot/shared/Pending.svelte b/frontend/legacy/Chatbot/shared/Pending.svelte
index 658150ed..4da0f1b4 100644
--- a/frontend/legacy/Chatbot/shared/Pending.svelte
+++ b/frontend/legacy/Chatbot/shared/Pending.svelte
@@ -10,11 +10,11 @@
   style:border-radius={layout === 'bubble' ? 'var(--radius-xxl)' : 'none'}
 >
   <span class="sr-only">Loading content</span>
-  <div class="dot-flashing" />
+  <div class="dot-flashing"></div>
   &nbsp;
-  <div class="dot-flashing" />
+  <div class="dot-flashing"></div>
   &nbsp;
-  <div class="dot-flashing" />
+  <div class="dot-flashing"></div>
 </div>
 
 <style>
diff --git a/frontend/legacy/MultimodalInput/shared/AudioRecorder.svelte b/frontend/legacy/MultimodalInput/shared/AudioRecorder.svelte
index c817320e..e5bfee74 100644
--- a/frontend/legacy/MultimodalInput/shared/AudioRecorder.svelte
+++ b/frontend/legacy/MultimodalInput/shared/AudioRecorder.svelte
@@ -135,7 +135,7 @@
   }
 </script>
 
-<div style="display: none;" bind:this={microphoneContainer} />
+<div style="display: none;" bind:this={microphoneContainer}></div>
 <button
   style={open ? 'display: none;' : ''}
   class="icon-button"
diff --git a/frontend/legacy/MultimodalInput/shared/Input.svelte b/frontend/legacy/MultimodalInput/shared/Input.svelte
index 31a22a81..ff071135 100644
--- a/frontend/legacy/MultimodalInput/shared/Input.svelte
+++ b/frontend/legacy/MultimodalInput/shared/Input.svelte
@@ -264,7 +264,7 @@
       on:focus={handle_focus}
       on:scroll={handle_scroll}
       style={text_align ? 'text-align: ' + text_align : ''}
-    />
+    ></textarea>
   {/if}
 </label>
 
diff --git a/frontend/svelte-preprocess-react/internal/ReactWrapper.svelte b/frontend/svelte-preprocess-react/internal/ReactWrapper.svelte
index a0a31b7d..12b9dde8 100644
--- a/frontend/svelte-preprocess-react/internal/ReactWrapper.svelte
+++ b/frontend/svelte-preprocess-react/internal/ReactWrapper.svelte
@@ -43,7 +43,7 @@
   }
 </script>
 
-<react-portal-target bind:this={$target} />
+<react-portal-target bind:this={$target}></react-portal-target>
 
 {#if $$slots.default}
   <svelte-slot bind:this={$slot}><slot /></svelte-slot>
diff --git a/frontend/utils/hooks/useMemoizedFn.ts b/frontend/utils/hooks/useMemoizedFn.ts
index 7d3545d7..4c325c6e 100644
--- a/frontend/utils/hooks/useMemoizedFn.ts
+++ b/frontend/utils/hooks/useMemoizedFn.ts
@@ -3,6 +3,6 @@ import { useCallback, useRef } from 'react';
 export function useMemoizedFn<T extends (...args: any) => any>(fn?: T): T {
   const fnRef = useRef(fn);
   fnRef.current = fn;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+
   return useCallback(((...args: any[]) => fnRef.current?.(...args)) as T, []);
 }
diff --git a/frontend/utils/renderItems.tsx b/frontend/utils/renderItems.tsx
index 59580d66..9ad54512 100644
--- a/frontend/utils/renderItems.tsx
+++ b/frontend/utils/renderItems.tsx
@@ -11,8 +11,12 @@ export function renderItems<R>(
     clone?: boolean;
   },
   key?: React.Key
-): R[] {
-  return items.filter(Boolean).map((item, i) => {
+): undefined | R[] {
+  const filterItems = items.filter(Boolean);
+  if (filterItems.length === 0) {
+    return undefined;
+  }
+  return filterItems.map((item, i) => {
     if (typeof item !== 'object') {
       if (options?.fallback) {
         return options.fallback(item);