diff --git a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
index e03f681bd..ab2532df7 100644
--- a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
+++ b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx
@@ -1,13 +1,11 @@
 import { css } from '@emotion/css';
+import { useMutationObserver } from 'ahooks';
 import { Layout, Spin } from 'antd';
 import React, { createContext, useContext, useMemo, useRef, useState } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import {
-  ACLRolesCheckProvider,
-  CurrentUser,
-  CurrentUserProvider,
-  CurrentAppInfoProvider,
-  findByUid,
+  ACLRolesCheckProvider, CurrentAppInfoProvider, CurrentUser,
+  CurrentUserProvider, findByUid,
   findMenuItem,
   RemoteCollectionManagerProvider,
   RemotePluginManagerToolbar,
@@ -17,11 +15,9 @@ import {
   useDocumentTitle,
   useRequest,
   useRoute,
-  useSystemSettings,
+  useSystemSettings
 } from '../../../';
 import { useCollectionManager } from '../../../collection-manager';
-import { PoweredBy } from '../../../powered-by';
-import { useMutationObserver } from 'ahooks';
 
 const filterByACL = (schema, options) => {
   const { allowAll, allowMenuItemIds = [] } = options;
@@ -209,8 +205,8 @@ export const InternalAdminLayout = (props: any) => {
           max-width: var(--side-menu-width);
           min-width: var(--side-menu-width);
           pointer-events: none;
-          transition: background-color 0.3s ease 0s, min-width 0.3s ease 0s,
-            max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
+          /* transition: background-color 0.3s ease 0s, min-width 0.3s ease 0s,
+            max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; */
         `}
       ></div>
       <Layout.Sider
diff --git a/packages/core/client/src/schema-component/antd/page/Page.tsx b/packages/core/client/src/schema-component/antd/page/Page.tsx
index e17825ee5..086ff04db 100644
--- a/packages/core/client/src/schema-component/antd/page/Page.tsx
+++ b/packages/core/client/src/schema-component/antd/page/Page.tsx
@@ -1,6 +1,7 @@
+import { PlusOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { FormDialog, FormLayout } from '@formily/antd';
-import { RecursionField, Schema, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
+import { Schema, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
 import { Button, PageHeader as AntdPageHeader, Spin, Tabs } from 'antd';
 import classNames from 'classnames';
 import React, { useContext, useEffect, useState } from 'react';
@@ -8,6 +9,8 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useDocumentTitle } from '../../../document-title';
 import { Icon } from '../../../icon';
+import { DndContext } from '../../common';
+import { SortableItem } from '../../common/sortable-item';
 import { SchemaComponent, SchemaComponentOptions } from '../../core';
 import { useCompile, useDesignable } from '../../hooks';
 import FixedBlock from './FixedBlock';
@@ -160,84 +163,91 @@ export const Page = (props) => {
             {...others}
             footer={
               enablePageTabs && (
-                <Tabs
-                  size={'small'}
-                  activeKey={activeKey}
-                  onTabClick={(activeKey) => {
-                    setLoading(true);
-                    setActiveKey(activeKey);
-                    window.history.pushState({}, '', location.pathname + `?tab=` + activeKey);
-                    setTimeout(() => {
-                      setLoading(false);
-                    }, 50);
-                  }}
-                  tabBarExtraContent={
-                    dn.designable && (
-                      <Button
-                        className={css`
-                          border-color: rgb(241, 139, 98) !important;
-                          color: rgb(241, 139, 98) !important;
-                        `}
-                        type={'dashed'}
-                        onClick={async () => {
-                          const values = await FormDialog(t('Add tab'), () => {
-                            return (
-                              <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
-                                <FormLayout layout={'vertical'}>
-                                  <SchemaComponent
-                                    schema={{
-                                      properties: {
-                                        title: {
-                                          title: t('Tab name'),
-                                          'x-component': 'Input',
-                                          'x-decorator': 'FormItem',
-                                          required: true,
+                <DndContext>
+                  <Tabs
+                    size={'small'}
+                    activeKey={activeKey}
+                    onTabClick={(activeKey) => {
+                      setLoading(true);
+                      setActiveKey(activeKey);
+                      window.history.pushState({}, '', location.pathname + `?tab=` + activeKey);
+                      setTimeout(() => {
+                        setLoading(false);
+                      }, 50);
+                    }}
+                    tabBarExtraContent={
+                      dn.designable && (
+                        <Button
+                          icon={<PlusOutlined />}
+                          className={css`
+                            border-color: rgb(241, 139, 98) !important;
+                            color: rgb(241, 139, 98) !important;
+                          `}
+                          type={'dashed'}
+                          onClick={async () => {
+                            const values = await FormDialog(t('Add tab'), () => {
+                              return (
+                                <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+                                  <FormLayout layout={'vertical'}>
+                                    <SchemaComponent
+                                      schema={{
+                                        properties: {
+                                          title: {
+                                            title: t('Tab name'),
+                                            'x-component': 'Input',
+                                            'x-decorator': 'FormItem',
+                                            required: true,
+                                          },
+                                          icon: {
+                                            title: t('Icon'),
+                                            'x-component': 'IconPicker',
+                                            'x-decorator': 'FormItem',
+                                          },
                                         },
-                                        icon: {
-                                          title: t('Icon'),
-                                          'x-component': 'IconPicker',
-                                          'x-decorator': 'FormItem',
-                                        },
-                                      },
-                                    }}
-                                  />
-                                </FormLayout>
-                              </SchemaComponentOptions>
-                            );
-                          }).open({
-                            initialValues: {},
-                          });
-                          const { title, icon } = values;
-                          dn.insertBeforeEnd({
-                            type: 'void',
-                            title,
-                            'x-icon': icon,
-                            'x-component': 'Grid',
-                            'x-initializer': 'BlockInitializers',
-                            properties: {},
-                          });
-                        }}
-                      >
-                        Add tab
-                      </Button>
-                    )
-                  }
-                >
-                  {fieldSchema.mapProperties((schema) => {
-                    return (
-                      <Tabs.TabPane
-                        tab={
-                          <span className={classNames('nb-action-link', designerCss, props.className)}>
-                            {schema['x-icon'] && <Icon style={{ marginRight: 8 }} type={schema['x-icon']} />}
-                            <span>{schema.title || t('Unnamed')}</span>
-                            <PageTabDesigner schema={schema} />
-                          </span>
-                        }
-                        key={schema.name}
-                      />
-                    );
-                  })}
-                </Tabs>
+                                      }}
+                                    />
+                                  </FormLayout>
+                                </SchemaComponentOptions>
+                              );
+                            }).open({
+                              initialValues: {},
+                            });
+                            const { title, icon } = values;
+                            dn.insertBeforeEnd({
+                              type: 'void',
+                              title,
+                              'x-icon': icon,
+                              'x-component': 'Grid',
+                              'x-initializer': 'BlockInitializers',
+                              properties: {},
+                            });
+                          }}
+                        >
+                          Add tab
+                        </Button>
+                      )
+                    }
+                  >
+                    {fieldSchema.mapProperties((schema) => {
+                      return (
+                        <Tabs.TabPane
+                          tab={
+                            <SortableItem
+                              id={schema.name}
+                              schema={schema}
+                              className={classNames('nb-action-link', designerCss, props.className)}
+                            >
+                              {schema['x-icon'] && <Icon style={{ marginRight: 8 }} type={schema['x-icon']} />}
+                              <span>{schema.title || t('Unnamed')}</span>
+                              <PageTabDesigner schema={schema} />
+                            </SortableItem>
+                          }
+                          key={schema.name}
+                        />
+                      );
+                    })}
+                  </Tabs>
+                </DndContext>
               )
             }
           />
diff --git a/packages/core/client/src/schema-component/antd/page/PageTabDesigner.tsx b/packages/core/client/src/schema-component/antd/page/PageTabDesigner.tsx
index 4f49d8fa3..621d02268 100644
--- a/packages/core/client/src/schema-component/antd/page/PageTabDesigner.tsx
+++ b/packages/core/client/src/schema-component/antd/page/PageTabDesigner.tsx
@@ -1,9 +1,9 @@
-import { MenuOutlined } from '@ant-design/icons';
+import { DragOutlined, MenuOutlined } from '@ant-design/icons';
 import { ISchema, useField, useFieldSchema } from '@formily/react';
 import { Modal, Space } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDesignable } from '../..';
+import { DragHandler, useDesignable } from '../..';
 import { SchemaSettings } from '../../../schema-settings';
 
 export const PageDesigner = ({ title }) => {
@@ -120,6 +120,9 @@ export const PageTabDesigner = ({ schema }) => {
     <div className={'general-schema-designer'}>
       <div className={'general-schema-designer-icons'}>
         <Space size={2} align={'center'}>
+          <DragHandler>
+            <DragOutlined />
+          </DragHandler>
           <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}>
             <SchemaSettings.ModalItem
               title={t('Edit')}
diff --git a/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx b/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
index ddbbc5d8f..1e8b3dec5 100644
--- a/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
+++ b/packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx
@@ -38,12 +38,28 @@ export const Sortable = (props: any) => {
   );
 };
 
-export const SortableItem: React.FC<any> = observer((props) => {
+const useSortableItemProps = (props) => {
+  const id = useSortableItemId(props);
+  if (props.schema) {
+    return { ...props, id };
+  }
+  const schema = useFieldSchema();
+  return { ...props, id, schema };
+};
+
+const useSortableItemId = (props) => {
+  if (props.id) {
+    return props.id;
+  }
   const field = useField();
-  const fieldSchema = useFieldSchema();
+  return field.address.toString();
+};
+
+export const SortableItem: React.FC<any> = observer((props) => {
+  const { schema, id, ...others } = useSortableItemProps(props);
   return (
-    <SortableProvider id={field.address.toString()} data={{ insertAdjacent: 'afterEnd', schema: fieldSchema }}>
-      <Sortable {...props}>{props.children}</Sortable>
+    <SortableProvider id={id} data={{ insertAdjacent: 'afterEnd', schema: schema }}>
+      <Sortable {...others}>{props.children}</Sortable>
     </SortableProvider>
   );
 });