diff --git a/package.json b/package.json
index a671299..13c8122 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-core",
-  "version": "0.4.45",
+  "version": "0.4.46",
   "files": [
     "build"
   ],
@@ -22,9 +22,9 @@
     "@kne/create-deferred": "^0.1.0",
     "@kne/ensure-slash": "^0.1.0",
     "@kne/flex-box": "^0.1.1",
-    "@kne/form-info": "^0.1.1",
+    "@kne/form-info": "^0.1.2",
     "@kne/global-context": "^1.3.2",
-    "@kne/info-page": "^0.2.0",
+    "@kne/info-page": "^0.2.3",
     "@kne/is-empty": "^1.0.1",
     "@kne/phone-number-input": "^0.1.3",
     "@kne/react-enum": "^0.1.12",
diff --git a/src/common/components/Scroller/index.js b/src/common/components/Scroller/index.js
index 498f70d..7030c49 100644
--- a/src/common/components/Scroller/index.js
+++ b/src/common/components/Scroller/index.js
@@ -103,7 +103,7 @@ const Scroller = ({
             scrollEl.addEventListener("scroll", computed);
         });
 
-        refResizeObserver.observe(ref.current);
+        ref.current && refResizeObserver.observe(ref.current);
 
         window.addEventListener("scroll", computed);
         container.addEventListener("scroll", computed);
diff --git a/src/common/components/SearchInput/style.module.scss b/src/common/components/SearchInput/style.module.scss
index 7ead722..14588d9 100644
--- a/src/common/components/SearchInput/style.module.scss
+++ b/src/common/components/SearchInput/style.module.scss
@@ -1,11 +1,11 @@
 .search-input {
-  :global(.ant-input-group-addon) {
-    display: none;
-    background: transparent;
-  }
+  :global(.ant-input-group-addon),:global(.ant-input-search-btn) {
+  display: none;
+  background: transparent;
+}
 
-  :global(.ant-input-affix-wrapper){
-    border-radius: var(--radius-default);
+  :global(.ant-input-affix-wrapper) {
+    border-radius: var(--radius-default)!important;
   }
 
   //&:not(.is-popup) {
diff --git a/src/components/Filter/FilterLines.js b/src/components/Filter/FilterLines.js
index 9abeef5..2357c75 100644
--- a/src/components/Filter/FilterLines.js
+++ b/src/components/Filter/FilterLines.js
@@ -45,7 +45,7 @@ const FilterLines = ({
     const [isExpand, setIsExpand] = useState(false);
     return (<IntlProvider importMessages={importMessages} moduleName="Filter">
         <Space
-            className={classnames(style["filter-title"], className)}
+            className={classnames(style["filter-title"], "filter-title", className)}
             align="top"
             size={16}
         >
diff --git a/src/components/Filter/FilterOuter.js b/src/components/Filter/FilterOuter.js
index e5d9bba..b2197ab 100644
--- a/src/components/Filter/FilterOuter.js
+++ b/src/components/Filter/FilterOuter.js
@@ -4,7 +4,7 @@ import FilterProvider from './FilterProvider';
 
 const FilterOuter = ({children, className, ...props}) => {
     return <FilterProvider {...props}>
-        {(context) => <div className={classnames(style["filter"], className)}>
+        {(context) => <div className={classnames(style["filter"], "filter", className)}>
             {children(context)}
         </div>}
     </FilterProvider>
diff --git a/src/components/FormInfo/Form.js b/src/components/FormInfo/Form.js
index ca8d946..93ccc9c 100644
--- a/src/components/FormInfo/Form.js
+++ b/src/components/FormInfo/Form.js
@@ -1,5 +1,5 @@
-import {forwardRef, useEffect, useState} from "react";
-import {usePreset, useGlobalContext} from "@components/Global";
+import {forwardRef, useEffect, useState, Fragment} from "react";
+import {usePreset, useGlobalValue} from "@components/Global";
 import get from "lodash/get";
 import formPreset from "@components/FormInfo/preset";
 import FormLangProvider from "@components/FormInfo/FormLangProvider";
@@ -11,7 +11,7 @@ import withLocale from "./withLocale";
 const SetPreset = ({children}) => {
     const [isPreset, setIsPreset] = useState(false);
     const preset = usePreset();
-    const {locale} = useGlobalContext();
+    const locale = useGlobalValue('locale');
     const formInfo = get(preset, "formInfo", {});
     useEffect(() => {
         Promise.resolve(formPreset(formInfo, {locale})).then(() => {
@@ -21,7 +21,7 @@ const SetPreset = ({children}) => {
     if (!isPreset) {
         return null;
     }
-    return children;
+    return <Fragment key={locale}>{children}</Fragment>;
 };
 
 const Form = withLocale(forwardRef(({helperGuideName, lang, ...props}, ref) => {
diff --git a/src/components/FormInfo/fields/index.js b/src/components/FormInfo/fields/index.js
index fe334e0..76a0e8b 100644
--- a/src/components/FormInfo/fields/index.js
+++ b/src/components/FormInfo/fields/index.js
@@ -41,6 +41,7 @@ import Tooltip from "@components/Tooltip";
 import Icon from "@components/Icon";
 import {Space} from "antd";
 import classnames from "classnames";
+import withLocale from '../withLocale';
 import style from "../style.module.scss";
 
 const createWithFieldDecorator = (decoratorList) => (WrappedComponent) => {
@@ -79,25 +80,25 @@ const createWithFieldDecorator = (decoratorList) => (WrappedComponent) => {
 };
 
 const withInputDefaultPlaceholder = (WrappedComponent) => {
-    return ({placeholder, label, ...props}) => {
+    return withLocale(({placeholder, label, ...props}) => {
         const {formatMessage} = useIntl();
         return (<WrappedComponent
             {...props}
             label={label}
             placeholder={placeholder || formatMessage({id: 'defaultInputPlaceholder'}, {label})}
         />);
-    };
+    });
 };
 
 const withSelectDefaultPlaceholder = (WrappedComponent) => {
-    return ({placeholder, label, ...props}) => {
+    return withLocale(({placeholder, label, ...props}) => {
         const {formatMessage} = useIntl();
         return <WrappedComponent
             {...props}
             label={label}
             placeholder={placeholder || formatMessage({id: 'defaultSelectPlaceholder'}, {label})}
         />;
-    }
+    })
 };
 
 const withLang = (WrappedComponent) => {
diff --git a/src/components/FormInfo/formModule.js b/src/components/FormInfo/formModule.js
index ce806d0..b59306b 100644
--- a/src/components/FormInfo/formModule.js
+++ b/src/components/FormInfo/formModule.js
@@ -38,9 +38,10 @@ import InputUpperCaseField from "./fields/InputUpperCase";
 import TypeDateRangePicker from "./fields/TypeDateRangePicker";
 import Text from "./fields/Text";
 import ErrorTip from "./ErrorTip";
+import withLocale from './withLocale';
 
 const withInputDefaultPlaceholder = (WrappedComponent) => {
-    const TargetComponent = forwardRef(({placeholder, label, ...props}, ref) => {
+    const TargetComponent = withLocale(forwardRef(({placeholder, label, ...props}, ref) => {
         const {formatMessage} = useIntl();
 
         return <WrappedComponent
@@ -49,7 +50,7 @@ const withInputDefaultPlaceholder = (WrappedComponent) => {
             label={label}
             placeholder={placeholder || formatMessage({id: 'defaultInputPlaceholder'}, {label})}
         />;
-    });
+    }));
     Object.keys(WrappedComponent)
         .filter((key) => {
             return ["$$typeof", "render", "field"].indexOf(key) === -1;
@@ -61,7 +62,7 @@ const withInputDefaultPlaceholder = (WrappedComponent) => {
     return TargetComponent;
 };
 
-const withTextAreaDefaultPlaceholder = (WrappedComponent) => ({placeholder, label, className, ...props}) => {
+const withTextAreaDefaultPlaceholder = (WrappedComponent) => withLocale(({placeholder, label, className, ...props}) => {
     const {formatMessage} = useIntl();
     return <div className={style["textarea-wrapped-component"]}>
         <WrappedComponent
@@ -70,10 +71,10 @@ const withTextAreaDefaultPlaceholder = (WrappedComponent) => ({placeholder, labe
             placeholder={placeholder || formatMessage({id: 'defaultInputPlaceholder'}, {label})}
         />
     </div>;
-};
+});
 
 const withSelectDefaultPlaceholder = (WrappedComponent) => {
-    const TargetComponent = forwardRef(({placeholder, label, ...props}, ref) => {
+    const TargetComponent = withLocale(forwardRef(({placeholder, label, ...props}, ref) => {
         const {formatMessage} = useIntl();
         return <WrappedComponent
             {...props}
@@ -81,7 +82,7 @@ const withSelectDefaultPlaceholder = (WrappedComponent) => {
             label={label}
             placeholder={placeholder || formatMessage({id: 'defaultSelectPlaceholder'}, {label})}
         />;
-    });
+    }));
 
     Object.keys(WrappedComponent)
         .filter((key) => {
diff --git a/src/components/FormInfo/preset.js b/src/components/FormInfo/preset.js
index 3e826ae..e80c9d8 100644
--- a/src/components/FormInfo/preset.js
+++ b/src/components/FormInfo/preset.js
@@ -13,7 +13,6 @@ const _olderLEN = RULES.LEN;
 
 const formPreset = async (options, otherOptions) => {
     const {locale} = Object.assign({}, otherOptions);
-
     interceptors.input.use("photo-string", (value) => {
         if (value && typeof value === "string") {
             const [id, params] = value.split("?");
diff --git a/src/components/FormInfo/style.module.scss b/src/components/FormInfo/style.module.scss
index 58cac5e..e69de29 100644
--- a/src/components/FormInfo/style.module.scss
+++ b/src/components/FormInfo/style.module.scss
@@ -1,461 +0,0 @@
-.form-outer {
-  &:global {
-    &.react-form--inner .react-form__field,
-    &.react-form--inner--large .react-form__field,
-    &.react-form--inner--small .react-form__field {
-      margin-bottom: 16px;
-
-      .react-form__field-label {
-        line-height: 20px;
-        height: 20px;
-        margin-bottom: 8px;
-        margin-left: 0px;
-        &.is-req:before {
-          display: inline-block;
-          position: static;
-          transform: translateX(0px) scale(0.7);
-        }
-      }
-    }
-  }
-
-  :global {
-    .react-form__field {
-      color: var(--font-color);
-
-      input {
-        color: var(--font-color);
-      }
-
-      input::placeholder {
-        color: var(--font-color-grey-2);
-      }
-    }
-
-    .react-form__field-label {
-      &.is-req:before {
-        color: var(--color-warning);
-        font-family: "iconfont" !important;
-        content: "\e684";
-        position: absolute;
-        transform: translateX(-14px) scale(0.7);
-        margin-right: 0;
-      }
-
-      color: var(--font-color-grey);
-      font-size: 14px;
-      line-height: 32px;
-      height: 32px;
-      font-weight: normal !important;
-    }
-
-    .react-form__field-error {
-      line-height: 14px;
-    }
-
-    .ant-input-number,
-    .ant-input-number-group-wrapper, .ant-input-number-affix-wrapper {
-      width: 100%;
-    }
-
-    .ant-picker.react-form__field-component,
-    .data_range_picker {
-      flex: 1;
-      width: 100%;
-    }
-
-    .ant-input-number-group-addon,
-    .ant-input-group-addon {
-      background: #ffffff;
-      color: var(--font-color);
-    }
-  }
-}
-
-.form-drawer {
-  :global {
-    .react-form,
-    .react-form > span {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
-
-.table-list {
-  .list-item {
-    margin-bottom: 0 !important;
-  }
-
-  :global {
-    .react-form__field-label {
-      display: none;
-    }
-
-    .ant-row:not(:last-child) {
-      border-bottom: solid 1px var(--bg-color-grey-3);
-    }
-
-    .ant-row:hover {
-      background: var(--bg-color-grey-1) !important;
-    }
-
-    .ant-col {
-      padding: 16px;
-      width: var(--col-width);
-    }
-  }
-}
-
-.table-list-inner {
-  border: none;
-
-  :global(.ant-card-head) {
-    padding-bottom: 10px;
-  }
-
-  :global(.ant-card-body) {
-    border: solid 1px var(--bg-color-grey-3);
-    border-radius: 8px;
-    overflow: hidden;
-  }
-}
-
-.table-list-field {
-  &:global(.ant-col) {
-    padding-bottom: 0;
-  }
-}
-
-.table-list-header {
-  background: var(--bg-color-grey-1);
-
-  .is-req:before {
-    color: var(--color-warning);
-    font-family: "iconfont" !important;
-    content: "\e684";
-    position: static;
-    display: inline-block;
-    transform: translateX(0px) scale(0.7);
-    margin-right: 0;
-    font-weight: bold;
-  }
-
-  :global {
-    .ant-col {
-      padding: 8px 16px;
-    }
-  }
-}
-
-.table-list-extra {
-  flex-basis: 100px;
-  text-align: right;
-}
-
-.list-btn {
-  padding: 0;
-  cursor: pointer;
-
-  &:global(.ant-btn-text.ant-btn-dangerous) {
-    background: transparent;
-  }
-
-  :global(.iconfont) {
-    margin-right: 4px;
-  }
-}
-
-.form-info {
-  border: none;
-
-  > :global(.ant-card-head .part-title) {
-    font-size: var(--font-size-large);
-  }
-}
-
-.list-part {
-  border: none;
-
-  > :global(.ant-card-head .part-title) {
-    font-size: var(--font-size-large);
-  }
-
-  > :global(.ant-card-head) .list-btn {
-    border-radius: 2px;
-    padding: 6px 0;
-    color: var(--primary-color);
-  }
-
-  .list-part .list-btn {
-    padding: 0;
-    border: none;
-  }
-
-  &:global {
-    &.ant-card .ant-card-body {
-      padding: 16px 0 0;
-      border-radius: 0;
-    }
-  }
-}
-
-.list-item {
-  &.is-important {
-    > .list-item-part:global(.ant-card > .ant-card-head) {
-      background: var(--primary-color-06);
-    }
-
-    > .list-item-part:global(
-        .ant-card > .ant-card-head .ant-card-head-title .part-title
-      ) {
-      color: var(--primary-color);
-    }
-
-    .list-item-part:global(.ant-card .ant-card-head-title .part-title) {
-      font-weight: 500;
-    }
-
-    > .list-item-part:global(.ant-card)
-    .list-part:global(.ant-card > .ant-card-head) {
-      background: transparent;
-      padding: 0;
-      border: none;
-      line-height: 1;
-    }
-
-    > .list-item-part:global(.ant-card)
-    .list-part:global(.ant-card > .ant-card-body) {
-      padding: 16px 0;
-    }
-
-    > .list-item-part {
-      border-color: var(--primary-color-5);
-    }
-
-    .table-list-inner {
-      border: none;
-    }
-  }
-
-  .list-item-part {
-    &:global {
-      &.ant-card {
-        .ant-card-head {
-          background: #f8f8f8;
-          border-bottom: 1px solid var(--font-color-grey-4);
-          line-height: 36px;
-          height: 36px;
-          padding: 0 16px;
-        }
-
-        .ant-card-head-title .part-title {
-          background: transparent;
-          font-weight: normal;
-          font-size: 14px;
-          color: var(--font-color);
-        }
-
-        .ant-card-body {
-          padding: 16px;
-        }
-      }
-    }
-  }
-
-  :global(.ant-divider) {
-    border-top-color: var(--font-color-grey-2);
-  }
-
-  :global(.ant-divider) {
-    display: none;
-  }
-
-  &:not(:last-child) {
-    margin-bottom: 16px;
-  }
-}
-
-.list-item-part {
-  border: 1px solid var(--font-color-grey-4);
-}
-
-.money-input {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  border-color: #d9d9d9;
-
-  :global(.ant-input-number-group-wrapper),
-  :global(.ant-input-number-wrapper),
-  :global(.ant-input-number) {
-    border-color: inherit;
-  }
-
-  .money-description {
-    color: var(--font-color-grey-1);
-    font-size: var(--font-size-small);
-  }
-}
-
-.components-upload-wrapper {
-  width: 100%;
-
-  :global {
-    .ant-upload-list-text {
-      .ant-upload-list-item-name {
-        flex: none !important;
-      }
-    }
-
-    .ant-upload-list-item-container {
-      transition: none !important;
-    }
-
-    .ant-upload-list-picture {
-      display: inline-flex;
-      flex-wrap: wrap;
-      margin: 0 0 0 -16px;
-      width: calc(100% + 16px);
-      justify-content: flex-start;
-
-      :hover {
-        .ant-upload-list-item-remove {
-          display: flex;
-        }
-      }
-
-      .ant-upload-list-picture-container {
-        width: calc((100% - 48px) / 3);
-        min-width: calc((100% - 48px) / 3);
-        max-width: calc((100% - 48px) / 3);
-        height: 64px;
-        margin: 16px 0 0 16px;
-        border: 1px solid var(--font-color-grey-2);
-        border-radius: 2px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        transition: opacity 0.1s, height 0.1s;
-
-        &:nth-child(3n) {
-          margin-right: 0;
-        }
-
-        .ant-space {
-          flex: 1;
-        }
-      }
-
-      .ant-upload-list-item-thumbnail {
-        padding: 0 12px;
-
-        svg {
-          width: 24px;
-          height: 24px;
-        }
-      }
-
-      .ant-upload-list-item-file-name {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        padding-right: 8px;
-        word-break: break-all;
-      }
-
-      .ant-upload-list-item-remove {
-        width: 36px;
-        max-width: 36px;
-        height: 100%;
-        background: var(--font-color-grey-4);
-        border-radius: 0 2px 2px 0;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        display: none;
-      }
-    }
-  }
-}
-
-.textarea-wrapped-component {
-  textarea {
-    padding-right: 20px;
-  }
-}
-
-.helper-guide-field {
-  display: inline-block;
-  margin-left: 8px;
-  margin-bottom: 0;
-  transform: translateY(4px);
-}
-
-.field-tips {
-  //transform: translateY(26px);
-  //display: block;
-
-  &.label-hidden {
-    //transform: translateY(4px);
-  }
-}
-
-.error-tip-overlay {
-  :global(.ant-popover-inner) {
-    padding: 0;
-    border: 1px solid #ffffff;
-  }
-}
-
-.error-tip-overlay-content {
-  padding: 12px 16px;
-  box-sizing: border-box;
-}
-
-.column-not-layout {
-  display: none;
-}
-
-.mult-field {
-}
-
-.mult-field-item {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 8px;
-
-  &:not(:first-child) {
-    :global {
-      .react-form__field-label {
-        display: none;
-      }
-    }
-  }
-
-  .react-form__field-label {
-    color: var(--font-color-grey);
-    font-size: 14px;
-    line-height: 20px;
-    height: 20px;
-    margin-bottom: 8px;
-  }
-
-  :global {
-    .react-form__field {
-      flex: 1;
-    }
-  }
-}
-
-.mult-field-add-btn {
-  margin-bottom: 16px;
-}
-
-.form-step-section {
-  width: auto;
-  min-width: 50%;
-}
diff --git a/src/components/Global/index.js b/src/components/Global/index.js
index 7be264d..4cbd1fd 100644
--- a/src/components/Global/index.js
+++ b/src/components/Global/index.js
@@ -36,9 +36,8 @@ export const containerClassName = style["container"]
     .replace(/\+/g, "\\+")
     .replace(/\//g, "\\/");
 
-const ConfigProvider = withFetch(({data: message, children}) => {
+const ConfigProvider = withFetch(({data: message, themeToken, children}) => {
     const [isInit, setIsInit] = useState(false);
-    const themeToken = useGlobalValue('themeToken');
     const {colorPrimary, components, ...otherToken} = Object.assign({}, {colorPrimary: "#4096ff"}, themeToken);
     const colorPrimaryObject = useMemo(() => {
         return Color(colorPrimary)
@@ -128,6 +127,7 @@ export const GlobalProvider = ({
 
     const localMessageRef = useRef(null);
     const enumsRef = useRef(null);
+
     return (<GlobalContext preset={preset} initValue={Object.assign({}, props, {
         themeToken, localMessageRef, enumsRef, locale,
     }, get(preset, "global"))}>
@@ -135,6 +135,7 @@ export const GlobalProvider = ({
             return <ConfigProvider
                 loader={loadAntdLocale}
                 params={{locale}}
+                themeToken={themeToken}
             >
                 <App message={{top: 100}}>
                     <AppDrawer>
diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js
index ded919c..541f032 100644
--- a/src/components/Table/Table.js
+++ b/src/components/Table/Table.js
@@ -27,6 +27,7 @@ const Table = ({
                    name,
                    summary,
                    scroll,
+                   scroller,
                    onTablePropsReady,
                    ...props
                }) => {
@@ -111,7 +112,7 @@ const Table = ({
     >
         {!isLayout && (<Scroller
             className="table-page-scroller"
-            scroller={{getContainer: getScrollEl}}
+            scroller={scroller !== void 0 ? scroller : {getContainer: getScrollEl}}
             getScrollTarget={(el) => {
                 return (el.querySelector(".ant-table-body") || el.querySelector(".ant-table-content"));
             }}