diff --git a/package.json b/package.json
index 07e0e57..d9cedd1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "0.10.31",
+    "version": "1.1.24-7",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
diff --git a/src/ConfigProviderDesign.tsx b/src/ConfigProviderDesign.tsx
deleted file mode 100644
index 448bad7..0000000
--- a/src/ConfigProviderDesign.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { ConfigProvider, ThemeConfig } from 'antd';
-import { PropsWithChildren, useContext } from 'react';
-import { config } from '.';
-
-interface IConfigProviderDesignProps extends PropsWithChildren {
-    /**
-     * The theme components configuration.
-     * This will override the default `config.componentToken` if provided.
-     */
-    componentToken?: ThemeConfig['components'];
-
-    /**
-     * The theme design token configuration.
-     * This will override the default `config.designToken` if provided.
-     */
-    designToken?: ThemeConfig['token'];
-}
-
-export const ConfigProviderDesign = ({
-    children,
-    componentToken,
-    designToken,
-}: IConfigProviderDesignProps) => {
-    const componentTokenCombined = {
-        ...config.componentToken,
-        ...componentToken,
-    };
-
-    const designTokenCombined = {
-        ...config.designToken,
-        ...designToken,
-    };
-
-    return (
-        <ConfigProvider
-            theme={{
-                token: designTokenCombined,
-                components: componentTokenCombined,
-            }}
-        >
-            {children}
-        </ConfigProvider>
-    );
-};
diff --git a/src/atomics/Flex/Flex.tsx b/src/atomics/Flex/Flex.tsx
index eef662d..1b4e6ae 100644
--- a/src/atomics/Flex/Flex.tsx
+++ b/src/atomics/Flex/Flex.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { FlexStyles } from './styles';
 import { RdFlexProps } from './types';
 
 export const Flex = ({ ...antdProps }: RdFlexProps) => {
-    return (
-        <ConfigProviderDesign>
-            <FlexStyles {...antdProps} />
-        </ConfigProviderDesign>
-    );
+    return <FlexStyles {...antdProps} />;
 };
diff --git a/src/index.tsx b/src/index.tsx
index 1366ed7..85f4a0f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,9 +1,9 @@
 import { theme } from 'antd';
-import { IRdThemeConfig } from './utils/types';
+import { RdThemeConfig } from './organisms';
 
 export interface IConfig {
-    designToken: NonNullable<IRdThemeConfig['token']>;
-    componentToken: IRdThemeConfig['components'];
+    designToken: NonNullable<RdThemeConfig['token']>;
+    componentToken: RdThemeConfig['components'];
 }
 
 export const config: IConfig = {
@@ -14,4 +14,5 @@ export const config: IConfig = {
 export * from './atomics';
 export * from './molecules';
 export * from './organisms';
+export * from './templates';
 export * from './utils';
\ No newline at end of file
diff --git a/src/molecules/Button/Button.tsx b/src/molecules/Button/Button.tsx
index b9d16a9..ae1e322 100644
--- a/src/molecules/Button/Button.tsx
+++ b/src/molecules/Button/Button.tsx
@@ -1,14 +1,74 @@
-import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { forwardRef, useMemo, useState } from 'react';
+import { RdTooltipProps, Tooltip } from '../Tooltip';
 import { ButtonGroup } from './ButtonGroup';
 import { ButtonStyles } from './styles';
-import { RdButtonComponent, RdButtonCompoundedComponent } from './types';
-import clsx from 'clsx';
+import { RdButtonComponent, RdButtonCompoundedComponent, RdButtonProps } from './types';
 
 export const ButtonInternal: RdButtonComponent = forwardRef((props, ref) => {
-    const { rootClassName } = props;
+    const {
+        rootClassName,
+        tooltip,
+        hideTooltipWhenClick = true,
+        onClick,
+        onMouseLeave,
+        ...defaultProps
+    } = props;
+    const [isOpenTooltip, setIsOpenTooltip] = useState(false);
+
+    const handleClickButton: RdButtonProps['onClick'] = event => {
+        if (hideTooltipWhenClick) {
+            setIsOpenTooltip(false);
+        }
+
+        if (onClick) {
+            onClick(event);
+        }
+    };
+
+    const handleMouseLeave: RdButtonProps['onMouseLeave'] = event => {
+        if (onMouseLeave) {
+            onMouseLeave(event);
+        }
+    };
+
+    const RdButtonStyles = useMemo(() => {
+        return (
+            <ButtonStyles
+                rootClassName={clsx('rd-button', rootClassName)}
+                ref={ref}
+                onMouseLeave={handleMouseLeave}
+                onClick={handleClickButton}
+                {...defaultProps}
+            />
+        );
+    }, [defaultProps, rootClassName, handleClickButton, handleMouseLeave]);
+
+    if (tooltip) {
+        const tooltipProps: RdTooltipProps = hideTooltipWhenClick
+            ? {
+                  open: isOpenTooltip,
+                  onOpenChange: visible => setIsOpenTooltip(visible),
+              }
+            : {};
+
+        if (typeof tooltip === 'string') {
+            return (
+                <Tooltip {...tooltipProps} title={tooltip}>
+                    {RdButtonStyles}
+                </Tooltip>
+            );
+        }
+
+        return (
+            <Tooltip {...tooltipProps} {...tooltip}>
+                {RdButtonStyles}
+            </Tooltip>
+        );
+    }
 
-    return <ButtonStyles rootClassName={clsx('rd-button', rootClassName)} ref={ref} {...props} />;
+    return RdButtonStyles;
 });
 
 export const Button = ButtonInternal as RdButtonCompoundedComponent;
-Button.Group = ButtonGroup;
\ No newline at end of file
+Button.Group = ButtonGroup;
diff --git a/src/molecules/Button/styles.tsx b/src/molecules/Button/styles.tsx
index 4e98c91..df71d6c 100644
--- a/src/molecules/Button/styles.tsx
+++ b/src/molecules/Button/styles.tsx
@@ -9,7 +9,6 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
         getExcludeForwardProps<RdButtonProps>(['fullWidth'] as (keyof RdButtonProps)[], prop),
 })<RdButtonProps>`
     ${({ fullWidth }) => fullWidth && fullWidthCSS}
-
     ${({ color }) => {
         switch (color) {
             case 'second':
@@ -28,8 +27,7 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
                 return color;
         }
     }}
-
-     ${({ align }) => {
+        ${({ align }) => {
         switch (align) {
             case 'left':
                 return css`
@@ -46,7 +44,7 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
             default:
                 return null;
         }
-    }}
+    }};
 `;
 export const ButtonGroupStyles = styled(Button.Group)<RdButtonGroupProps>``;
 
diff --git a/src/molecules/Button/types.ts b/src/molecules/Button/types.ts
index c1a9569..675bbff 100644
--- a/src/molecules/Button/types.ts
+++ b/src/molecules/Button/types.ts
@@ -2,6 +2,7 @@ import { Button, ButtonProps, GetProps } from 'antd';
 import { ComponentToken as ButtonComponentTokenAntd } from 'antd/es/button/style';
 import { ButtonInternal } from './Button';
 import { ButtonGroup } from './ButtonGroup';
+import { RdTooltipProps } from '../Tooltip';
 
 //#region Define Ant Design types
 type ButtonPropsAntd = GetProps<typeof Button>;
@@ -37,6 +38,18 @@ type ButtonPropsExtend = {
      * Align content in the button.
      */
     align?: 'left' | 'center' | 'right';
+
+    /**
+     * Configuration for the tooltip displayed when hovering over the button.
+     * @see string | RdTooltipProps for more details on available options.
+     */
+    tooltip?: string | RdTooltipProps;
+
+    /**
+     * 	If `true`, the button  will auto hide when the button is clicked.
+     * @default true
+     */
+    hideTooltipWhenClick?: boolean;
 };
 
 type ButtonGroupPropsExtend = {};
diff --git a/src/molecules/Button/useExtendColor.ts b/src/molecules/Button/useExtendColor.ts
deleted file mode 100644
index f600024..0000000
--- a/src/molecules/Button/useExtendColor.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { config } from '../..';
-import { RdComponentsConfig } from '../../utils/types';
-import { ColorButtonExtendProp } from './types';
-
-export const useExtendColor = (color: ColorButtonExtendProp) => {
-    const newComponentsButton: RdComponentsConfig['Button'] = {};
-
-    switch (color) {
-        case 'second':
-            if (newComponentsButton) {
-                newComponentsButton.colorPrimary = config.designToken.colorSecondary;
-                newComponentsButton.algorithm = true;
-            }
-    }
-
-    return newComponentsButton;
-};
diff --git a/src/molecules/Carousel/Carousel.tsx b/src/molecules/Carousel/Carousel.tsx
new file mode 100644
index 0000000..bbe132a
--- /dev/null
+++ b/src/molecules/Carousel/Carousel.tsx
@@ -0,0 +1,7 @@
+import { forwardRef } from 'react';
+import { CarouselStyles } from './styles';
+import { RdCarouselComponent } from './types';
+
+export const Carousel: RdCarouselComponent = forwardRef((props, ref) => {
+    return <CarouselStyles ref={ref} {...props} />;
+});
diff --git a/src/molecules/Carousel/index.tsx b/src/molecules/Carousel/index.tsx
new file mode 100644
index 0000000..22e4408
--- /dev/null
+++ b/src/molecules/Carousel/index.tsx
@@ -0,0 +1,2 @@
+export * from './Carousel';
+export * from './types';
\ No newline at end of file
diff --git a/src/molecules/Carousel/styles.tsx b/src/molecules/Carousel/styles.tsx
new file mode 100644
index 0000000..ca9ebc7
--- /dev/null
+++ b/src/molecules/Carousel/styles.tsx
@@ -0,0 +1,4 @@
+import styled from '@emotion/styled';
+import { Carousel } from 'antd';
+
+export const CarouselStyles = styled(Carousel)``;
diff --git a/src/molecules/Carousel/types.ts b/src/molecules/Carousel/types.ts
new file mode 100644
index 0000000..fa38e99
--- /dev/null
+++ b/src/molecules/Carousel/types.ts
@@ -0,0 +1,31 @@
+import { Carousel, GetProps } from 'antd';
+import { CarouselRef } from 'antd/es/carousel';
+import { ComponentToken as CarouselComponentTokenAntd } from 'antd/es/collapse/style';
+
+//#region Define Ant Design types
+type CarouselPropsAntd = GetProps<typeof Carousel>;
+
+type CarouselRefAntd = CarouselRef;
+//#endregion
+
+//#region Define extended component tokens
+type CarouselComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type CarouselPropsExtend = {};
+type CarouselRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdCarouselProps = CarouselPropsAntd & CarouselPropsExtend;
+export type RdCarouselRef = CarouselRefAntd & CarouselRefExtend;
+
+export type RdCarouselComponentToken = CarouselComponentTokenAntd & CarouselComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdCarouselComponent = React.ForwardRefExoticComponent<
+    RdCarouselProps & React.RefAttributes<RdCarouselRef>
+>;
+//#endregion
diff --git a/src/molecules/DatePicker/TimePicker.tsx b/src/molecules/DatePicker/TimePicker.tsx
index 3e68610..e3728b5 100644
--- a/src/molecules/DatePicker/TimePicker.tsx
+++ b/src/molecules/DatePicker/TimePicker.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { TimePickerStyles } from './styles';
 import { RdTimePickerProps } from './types';
 
 export const TimePicker = (props: RdTimePickerProps) => {
-    return (
-        <ConfigProviderDesign>
-            <TimePickerStyles {...props} />
-        </ConfigProviderDesign>
-    );
+    return <TimePickerStyles {...props} />;
 };
diff --git a/src/molecules/DatePicker/WeekPicker.tsx b/src/molecules/DatePicker/WeekPicker.tsx
index be93f16..9c499e6 100644
--- a/src/molecules/DatePicker/WeekPicker.tsx
+++ b/src/molecules/DatePicker/WeekPicker.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { WeekPickerStyles } from './styles';
 import { RdWeekPickerProps } from './types';
 
 export const WeekPicker = (props: RdWeekPickerProps) => {
-    return (
-        <ConfigProviderDesign>
-            <WeekPickerStyles {...props} />
-        </ConfigProviderDesign>
-    );
+    return <WeekPickerStyles {...props} />;
 };
diff --git a/src/molecules/DatePicker/YearPicker.tsx b/src/molecules/DatePicker/YearPicker.tsx
index 498debf..3c8f968 100644
--- a/src/molecules/DatePicker/YearPicker.tsx
+++ b/src/molecules/DatePicker/YearPicker.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { YearPickerStyles } from './styles';
 import { RdYearPickerProps } from './types';
 
 export const YearPicker = (props: RdYearPickerProps) => {
-    return (
-        <ConfigProviderDesign>
-            <YearPickerStyles {...props} />
-        </ConfigProviderDesign>
-    );
+    return <YearPickerStyles {...props} />;
 };
diff --git a/src/molecules/Dropdown/DropdownButton.tsx b/src/molecules/Dropdown/DropdownButton.tsx
index a40c6c1..1e26872 100644
--- a/src/molecules/Dropdown/DropdownButton.tsx
+++ b/src/molecules/Dropdown/DropdownButton.tsx
@@ -1,11 +1,6 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { DropdownButtonStyles } from './styles';
 import { RdDropdownButtonProps } from './types';
 
 export const DropdownButton = ({ ...antdProps }: RdDropdownButtonProps) => {
-    return (
-        <ConfigProviderDesign>
-            <DropdownButtonStyles {...antdProps} />
-        </ConfigProviderDesign>
-    );
+    return <DropdownButtonStyles {...antdProps} />;
 };
diff --git a/src/molecules/Form/Form.tsx b/src/molecules/Form/Form.tsx
index 729a5c0..634661d 100644
--- a/src/molecules/Form/Form.tsx
+++ b/src/molecules/Form/Form.tsx
@@ -5,9 +5,9 @@ import { FormItemControl } from './FormItemControl';
 import { FormList } from './FormList';
 import { FormProvider } from './FormProvider';
 import { FormStyles } from './styles';
-import { RdFormCompoundedComponent, RdFormProps } from './types';
+import { RdFormComponent, RdFormCompoundedComponent, RdFormProps } from './types';
 
-export const FormInternal = (props: RdFormProps) => {
+export const FormInternal: RdFormComponent = (props: RdFormProps) => {
     return <FormStyles {...props} />;
 };
 
diff --git a/src/molecules/Form/FormItem.tsx b/src/molecules/Form/FormItem.tsx
index 53b54a8..0c9e889 100644
--- a/src/molecules/Form/FormItem.tsx
+++ b/src/molecules/Form/FormItem.tsx
@@ -1,20 +1,11 @@
 import { FormItemStyles } from './styles';
 import { RdFormItemProps } from './types';
 
-export const FormItem = ({ errorMessage, description, ...antdProps }: RdFormItemProps) => {
+export const FormItem = ({ errorMessage, ...antdProps }: RdFormItemProps) => {
     if (errorMessage) {
         antdProps.validateStatus = 'error';
         antdProps.help = errorMessage;
     }
 
-    if (description) {
-        antdProps.label = (
-            <>
-                {antdProps.label}
-                <div>{description}</div>
-            </>
-        );
-    }
-
     return <FormItemStyles {...antdProps} />;
 };
diff --git a/src/molecules/Form/FormItemControl.tsx b/src/molecules/Form/FormItemControl.tsx
index 4aac72b..8fae0fe 100644
--- a/src/molecules/Form/FormItemControl.tsx
+++ b/src/molecules/Form/FormItemControl.tsx
@@ -5,14 +5,5 @@ import { RdFormItemControlProps } from './types';
 export const FormItemControl = <TFieldValues extends FieldValues = FieldValues>(
     props: RdFormItemControlProps<TFieldValues>
 ) => {
-    // if (description) {
-    //     antdProps.label = (
-    //         <>
-    //             <div>{antdProps.label}</div>
-    //             <div>{description}</div>
-    //         </>
-    //     );
-    // }
-
     return <FormItemReactHookForm<TFieldValues> {...props} />;
 };
diff --git a/src/molecules/Form/FormItemReactHookForm.tsx b/src/molecules/Form/FormItemReactHookForm.tsx
index c3918ee..12b2b70 100644
--- a/src/molecules/Form/FormItemReactHookForm.tsx
+++ b/src/molecules/Form/FormItemReactHookForm.tsx
@@ -1,7 +1,7 @@
 import { Form as AntdForm } from 'antd';
-import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useMemo } from 'react';
+import { Children, cloneElement, isValidElement, useEffect } from 'react';
 import { FieldValues, useController } from 'react-hook-form';
-import { FormItemStyles } from './styles';
+import { FormItem } from './FormItem';
 import { FormItemReactHookFormProps } from './types';
 
 export const FormItemReactHookForm = <TFieldValues extends FieldValues = FieldValues>({
@@ -9,7 +9,6 @@ export const FormItemReactHookForm = <TFieldValues extends FieldValues = FieldVa
     control,
     name,
     disabled,
-    help,
     valuePropName,
     shouldUnregister,
     defaultValue,
@@ -30,12 +29,12 @@ export const FormItemReactHookForm = <TFieldValues extends FieldValues = FieldVa
     }, [field.value, form, name]);
 
     return (
-        <FormItemStyles
+        <FormItem
             {...props}
             name={name}
             initialValue={field.value}
             validateStatus={fieldState.invalid ? 'error' : undefined}
-            help={fieldState.error?.message ?? help}
+            help={fieldState.error?.message}
         >
             {Children.map(
                 children,
@@ -61,6 +60,6 @@ export const FormItemReactHookForm = <TFieldValues extends FieldValues = FieldVa
                         }),
                     })
             )}
-        </FormItemStyles>
+        </FormItem>
     );
 };
diff --git a/src/molecules/Form/styles.tsx b/src/molecules/Form/styles.tsx
index 04af563..52b8cd8 100644
--- a/src/molecules/Form/styles.tsx
+++ b/src/molecules/Form/styles.tsx
@@ -9,8 +9,14 @@ export const FormListStyles = styled(Form.List)``;
 export const FormProviderStyles = styled(Form.Provider)``;
 export const FormErrorListStyles = styled(Form.ErrorList)``;
 export const FormItemStyles = styled(Form.Item, {
-    shouldForwardProp: prop => getExcludeForwardProps<RdFormItemProps>(['block'], prop),
+    shouldForwardProp: prop => getExcludeForwardProps<RdFormItemProps>(['block', 'disableMargin'], prop),
 })<RdFormItemProps>`
+    ${({ disableMargin }) =>
+        disableMargin &&
+        css`
+            margin-bottom: 0px;
+        `}
+
     ${({ block }) =>
         block &&
         css`
diff --git a/src/molecules/Form/types.ts b/src/molecules/Form/types.ts
index 8bc531f..1093e4e 100644
--- a/src/molecules/Form/types.ts
+++ b/src/molecules/Form/types.ts
@@ -39,14 +39,15 @@ type FormItemPropsExtend = {
     errorMessage?: string;
 
     /**
-     * @description Extra description for label
+     * @description Option to fit Space width to its parent width, default is false
      */
-    description?: string;
+    block?: boolean;
 
     /**
-     * @description Option to fit Space width to its parent width, default is false
+     * If set to `true`, disables the default margin applied to the Typography.Title component.
+     * @default false
      */
-    block?: boolean;
+    disableMargin?: boolean;
 };
 
 type FormListPropsExtend = {};
@@ -86,7 +87,7 @@ export type FormItemReactHookFormProps<
     disabled?: boolean;
     defaultValue?: any;
     overrideFieldOnChange?: (...values: any[]) => void;
-} & Omit<FormItemPropsAntd, 'name' | 'rules' | 'validateStatus'>;
+} & Omit<RdFormItemProps, 'name' | 'rules' | 'validateStatus' | 'help'>;
 //#endregion
 
 //#region Define component types
diff --git a/src/molecules/Input/InputUpload.tsx b/src/molecules/Input/InputUpload.tsx
new file mode 100644
index 0000000..fd03a8e
--- /dev/null
+++ b/src/molecules/Input/InputUpload.tsx
@@ -0,0 +1,26 @@
+import { CloudUploadOutlined, LoadingOutlined } from '@ant-design/icons';
+import { forwardRef } from 'react';
+import { Tooltip } from '../Tooltip';
+import { Upload } from '../Upload';
+import { InputUploadStyled } from './styles';
+import { RdInputUploadComponent } from './types';
+
+export const InputUpload: RdInputUploadComponent = forwardRef((props, ref) => {
+    const { loading, upload } = props;
+    return (
+        <InputUploadStyled
+            ref={ref}
+            prefix={loading && <LoadingOutlined />}
+            // addonAfter={
+            //     <Tooltip title={''}>
+            //         <Upload showUploadList={false} {...upload}>
+            //             <CloudUploadOutlined onClick={() => {}} />
+            //         </Upload>
+            //     </Tooltip>
+            // }
+            {...props}
+        />
+    );
+});
+
+<InputUpload loading />;
diff --git a/src/molecules/Input/styles.tsx b/src/molecules/Input/styles.tsx
index 7273a88..dd01098 100644
--- a/src/molecules/Input/styles.tsx
+++ b/src/molecules/Input/styles.tsx
@@ -12,3 +12,5 @@ export const InputSearchStyled = styled(Input.Search)``;
 export const InputGroupStyled = styled(Input.Group)``;
 
 export const OTPStyled = styled(Input.OTP)``;
+
+export const InputUploadStyled = styled(Input)``;
diff --git a/src/molecules/Input/types.ts b/src/molecules/Input/types.ts
index 0ff1931..b4126a9 100644
--- a/src/molecules/Input/types.ts
+++ b/src/molecules/Input/types.ts
@@ -9,6 +9,8 @@ import { TextArea } from './TextArea';
 import { TextAreaRef } from 'antd/es/input/TextArea';
 import { OTPRef } from 'antd/es/input/OTP';
 import React from 'react';
+import { InputUpload } from './InputUpload';
+import { RdUploadProps } from '../Upload';
 
 //#region Define Ant Design types
 type InputPropsAntd = GetProps<typeof Input>;
@@ -34,6 +36,15 @@ type InputGroupPropsExtend = {};
 type OTPPropsExtend = {};
 type PasswordPropsExtend = {};
 type TextAreaPropsExtend = {};
+type InputUploadPropsExtend = {
+    loading?: boolean;
+
+    upload?: Omit<RdUploadProps, 'showUploadList'>
+};
+
+type InputRefExtend = {};
+type TextareaRefExtend = {};
+type OTPRefExtend = {};
 //#endregion
 
 //#region Export types
@@ -43,27 +54,36 @@ export type RdInputGroupProps = InputGroupPropsAntd & InputGroupPropsExtend;
 export type RdOTPProps = OTPPropsAntd & OTPPropsExtend;
 export type RdPasswordProps = PasswordPropsAntd & PasswordPropsExtend;
 export type RdTextAreaProps = TextAreaPropsAntd & TextAreaPropsExtend;
+export type RdInputUploadProps = InputPropsAntd & InputUploadPropsExtend;
+
+export type RdInputRef = InputRefAntd & InputRefExtend;
+export type RdTextareaRef = TextareaRefAntd & TextareaRefExtend;
+export type RdOTPRefExtend = OTPRefAntd & OTPRefExtend;
 //#endregion
 
 //#region Define component types
 export type RdInputInternalComponent = React.ForwardRefExoticComponent<
-    RdInputProps & React.RefAttributes<InputRefAntd>
+    RdInputProps & React.RefAttributes<RdInputRef>
 >;
 
 export type RdPasswordComponent = React.ForwardRefExoticComponent<
-    RdPasswordProps & React.RefAttributes<InputRefAntd>
+    RdPasswordProps & React.RefAttributes<RdInputRef>
 >;
 
 export type RdOTPComponent = React.ForwardRefExoticComponent<
-    RdOTPProps & React.RefAttributes<OTPRefAntd>
+    RdOTPProps & React.RefAttributes<RdOTPRefExtend>
 >;
 
 export type RdTextareaComponent = React.ForwardRefExoticComponent<
-    RdTextAreaProps & React.RefAttributes<TextareaRefAntd>
+    RdTextAreaProps & React.RefAttributes<RdTextareaRef>
 >;
 
 export type RdSearchComponent = React.ForwardRefExoticComponent<
-    RdSearchProps & React.RefAttributes<InputRef>
+    RdSearchProps & React.RefAttributes<RdInputRef>
+>;
+
+export type RdInputUploadComponent = React.ForwardRefExoticComponent<
+    RdInputUploadProps & React.RefAttributes<RdInputRef>
 >;
 
 export type RdInputGroupComponent = React.FC<RdInputGroupProps>;
@@ -74,6 +94,7 @@ export type RdInputCompoundedComponent = typeof InputInternal & {
     OTP: typeof OTP;
     Password: typeof Password;
     TextArea: typeof TextArea;
+    Upload: typeof InputUpload;
 };
 
 export type RdInputComponentToken = InputComponentTokenAntd & InputComponentTokenExtend;
diff --git a/src/molecules/Layout/Header.tsx b/src/molecules/Layout/Header.tsx
index 7dc8787..9169814 100644
--- a/src/molecules/Layout/Header.tsx
+++ b/src/molecules/Layout/Header.tsx
@@ -2,6 +2,6 @@ import { forwardRef } from 'react';
 import { HeaderStyles } from './styles';
 import { RdLayoutHeaderComponent } from './types';
 
-export const LayoutHeader: RdLayoutHeaderComponent = forwardRef(props => {
-    return <HeaderStyles {...props} />;
+export const LayoutHeader: RdLayoutHeaderComponent = forwardRef((props, ref) => {
+    return <HeaderStyles ref={ref} {...props} />;
 });
diff --git a/src/molecules/Layout/types.ts b/src/molecules/Layout/types.ts
index 5cf73fc..84bc40a 100644
--- a/src/molecules/Layout/types.ts
+++ b/src/molecules/Layout/types.ts
@@ -1,12 +1,16 @@
-import { GetProps, Layout } from 'antd';
+import { SiderProps as SiderPropsAntd } from 'antd';
+import { BasicProps as BasicPropsAntd } from 'antd/es/layout/layout';
 import { ComponentToken as LayoutComponentTokenAntd } from 'antd/es/layout/style';
 
 //#region Define Ant Design types
-type LayoutProps = GetProps<typeof Layout>;
-type ContentProps = GetProps<typeof Layout.Content>;
-type FooterProps = GetProps<typeof Layout.Footer>;
-type HeaderProps = GetProps<typeof Layout.Header>;
-type SiderProps = GetProps<typeof Layout.Sider>;
+type LayoutProps = BasicPropsAntd;
+type ContentProps = BasicPropsAntd;
+type FooterProps = BasicPropsAntd;
+type HeaderProps = BasicPropsAntd;
+type SiderProps = SiderPropsAntd;
+
+type LayoutBaseRefAntd = React.RefAttributes<HTMLElement>;
+type LayoutSiderRefAntd = React.RefAttributes<HTMLDivElement>;
 //#endregion
 
 //#region Define extended component tokens
@@ -19,6 +23,13 @@ type ContentPropsExtend = {};
 type FooterPropsExtend = {};
 type HeaderPropsExtend = {};
 type SiderPropsExtend = {};
+
+type LayoutRefExtend = {};
+type LayoutHeaderRefExtend = {};
+type LayoutFooterRefExtend = {};
+type LayoutContentRefExtend = {};
+type LayoutSiderRefExtend = {};
+
 //#endregion
 
 //#region Export types
@@ -28,25 +39,29 @@ export type RdFooterProps = FooterProps & FooterPropsExtend;
 export type RdHeaderProps = HeaderProps & HeaderPropsExtend;
 export type RdSiderProps = SiderProps & SiderPropsExtend;
 
+export type RdLayoutRef = LayoutBaseRefAntd & LayoutRefExtend;
+export type RdLayoutHeaderRef = LayoutBaseRefAntd & LayoutHeaderRefExtend;
+export type RdLayoutFooterRef = LayoutBaseRefAntd & LayoutFooterRefExtend;
+export type RdLayoutContentRef = LayoutBaseRefAntd & LayoutContentRefExtend;
+export type RdLayoutSiderRef = LayoutSiderRefAntd & LayoutSiderRefExtend;
+
 export type RdLayoutComponentToken = LayoutComponentTokenAntd & LayoutComponentTokenExtend;
 //#endregion
 
 //#region Define component types
-export type RdLayoutComponent = React.ForwardRefExoticComponent<
-    RdLayoutProps & React.RefAttributes<HTMLElement>
->;
+export type RdLayoutComponent = React.ForwardRefExoticComponent<RdLayoutProps & RdLayoutRef>;
 
 export type RdLayoutHeaderComponent = React.ForwardRefExoticComponent<
-    RdHeaderProps & React.RefAttributes<HTMLElement>
+    RdHeaderProps & RdLayoutHeaderRef
 >;
 export type RdLayoutFooterComponent = React.ForwardRefExoticComponent<
-    RdFooterProps & React.RefAttributes<HTMLElement>
+    RdFooterProps & RdLayoutFooterRef
 >;
 export type RdLayoutContentComponent = React.ForwardRefExoticComponent<
-    RdContentProps & React.RefAttributes<HTMLElement>
+    RdContentProps & RdLayoutContentRef
 >;
 export type RdLayoutSiderComponent = React.ForwardRefExoticComponent<
-    RdSiderProps & React.RefAttributes<HTMLDivElement>
+    RdSiderProps & RdLayoutSiderRef
 >;
 
 export type RdLayoutCompoundedComponent = RdLayoutComponent & {
diff --git a/src/molecules/List/List.tsx b/src/molecules/List/List.tsx
index f605d19..7b0fca8 100644
--- a/src/molecules/List/List.tsx
+++ b/src/molecules/List/List.tsx
@@ -1,9 +1,11 @@
 import { ListItem } from './ListItem';
-import { ListStyles } from './styles';
-import { RdListComponent, RdListCompoundedComponent } from './types';
+import { ListStyledFunc } from './styles';
+import { RdListComponent, RdListCompoundedComponent, RdListProps } from './types';
 
-export const ListInternal: RdListComponent = props => {
-    return <ListStyles {...props} />;
+export const ListInternal: RdListComponent = <T extends any>(props: RdListProps<T>) => {
+    const ListStyled = ListStyledFunc<T>();
+
+    return <ListStyled {...props} />;
 };
 
 export const List = ListInternal as RdListCompoundedComponent;
diff --git a/src/molecules/List/styles.tsx b/src/molecules/List/styles.tsx
index 0c73627..93836e3 100644
--- a/src/molecules/List/styles.tsx
+++ b/src/molecules/List/styles.tsx
@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 import { List } from 'antd';
 
-export const ListStyles = styled(List)``;
+// export const ListStyles = styled(List)``;
+
+export const ListStyledFunc = <T extends any>() => styled(List<T>)``;
 
 export const ListItemStyles = styled(List.Item)``;
 
diff --git a/src/molecules/List/types.ts b/src/molecules/List/types.ts
index c4ffe6a..8f3c3eb 100644
--- a/src/molecules/List/types.ts
+++ b/src/molecules/List/types.ts
@@ -1,8 +1,9 @@
-import { List, GetProps } from 'antd';
+import { GetProps, List } from 'antd';
 import { ComponentToken as ListComponentTokenAntd } from 'antd/es/list/style';
+import { ReactElement } from 'react';
 
 //#region Define Ant Design types
-type ListProps = GetProps<typeof List>;
+type ListProps<T> = GetProps<typeof List<T>>;
 type ListItemProps = GetProps<typeof List.Item>;
 type ListItemMetaProps = GetProps<typeof List.Item.Meta>;
 //#endregion
@@ -18,7 +19,7 @@ type ListItemMetaPropsExtend = {};
 //#endregion
 
 //#region Export types
-export type RdListProps = ListProps & ListPropsExtend;
+export type RdListProps<T> = ListProps<T> & ListPropsExtend;
 export type RdListItemProps = ListItemProps & ListItemPropsExtend;
 export type RdListItemMetaProps = ListItemMetaProps & ListItemMetaPropsExtend;
 
@@ -26,11 +27,16 @@ export type RdListComponentToken = ListComponentTokenAntd & ListComponentTokenEx
 //#endregion
 
 //#region Define component types
-export type RdListComponent = React.FC<RdListProps & React.RefAttributes<HTMLDivElement>>;
+// export type RdListComponent = React.FC<RdListProps & React.RefAttributes<HTMLDivElement>>;
+export type RdListComponent = (<T>(
+    props: React.PropsWithChildren<RdListProps<T>> & React.RefAttributes<HTMLDivElement>
+) => ReactElement) &
+    Pick<React.FC, 'displayName'>;
+
 export type RdListItemComponent = React.ForwardRefExoticComponent<
     RdListItemProps & React.RefAttributes<HTMLDivElement>
 >;
-export type RdListItemMetaComponent = React.FC<RdListItemProps>;
+export type RdListItemMetaComponent = React.FC<RdListItemMetaProps>;
 
 export type RdListItemCompoundedComponent = RdListItemComponent & {
     Meta: RdListItemMetaComponent;
diff --git a/src/molecules/Popover/Popover.tsx b/src/molecules/Popover/Popover.tsx
index 6966066..2e84e44 100644
--- a/src/molecules/Popover/Popover.tsx
+++ b/src/molecules/Popover/Popover.tsx
@@ -2,6 +2,6 @@ import { forwardRef } from 'react';
 import { PopoverStyles } from './styles';
 import { RdPopoverComponent } from './types';
 
-export const Popover: RdPopoverComponent = forwardRef(props => {
-    return <PopoverStyles {...props} />;
+export const Popover: RdPopoverComponent = forwardRef((props, ref) => {
+    return <PopoverStyles ref={ref} {...props} />;
 });
diff --git a/src/molecules/Select/useExtendVariant.tsx b/src/molecules/Select/useExtendVariant.tsx
deleted file mode 100644
index 9e18c3e..0000000
--- a/src/molecules/Select/useExtendVariant.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { RdComponentsConfig } from '../../utils/types';
-import { variantSelectExtend } from './types';
-
-const useExtendVariant = (variant: variantSelectExtend) => {
-    const newSelectComponentToken: RdComponentsConfig['Select'] = {};
-
-    switch (variant) {
-        case 'outlined-transparent': {
-            if (newSelectComponentToken) {
-                newSelectComponentToken.selectorBg = 'transparent';
-            }
-        }
-    }
-
-    return newSelectComponentToken;
-};
-
-export default useExtendVariant;
diff --git a/src/molecules/Skeleton/SkeletonAvatar.tsx b/src/molecules/Skeleton/SkeletonAvatar.tsx
index 0c5d0e4..e1b7323 100644
--- a/src/molecules/Skeleton/SkeletonAvatar.tsx
+++ b/src/molecules/Skeleton/SkeletonAvatar.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonAvatarStyled } from './styles';
 import { RdSkeletonAvatarComponent } from './types';
 
-export const SkeletonAvatar: RdSkeletonAvatarComponent = props => {
-    return <SkeletonAvatarStyled {...props} />;
+export const SkeletonAvatar: RdSkeletonAvatarComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonAvatarStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/SkeletonButton.tsx b/src/molecules/Skeleton/SkeletonButton.tsx
index f2a4f5c..ea7ccd7 100644
--- a/src/molecules/Skeleton/SkeletonButton.tsx
+++ b/src/molecules/Skeleton/SkeletonButton.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonButtonStyled } from './styles';
 import { RdSkeletonButtonComponent } from './types';
 
-export const SkeletonButton: RdSkeletonButtonComponent = props => {
-    return <SkeletonButtonStyled {...props} />;
+export const SkeletonButton: RdSkeletonButtonComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonButtonStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/SkeletonImage.tsx b/src/molecules/Skeleton/SkeletonImage.tsx
index 0d3c484..e5f6fab 100644
--- a/src/molecules/Skeleton/SkeletonImage.tsx
+++ b/src/molecules/Skeleton/SkeletonImage.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonImageStyled } from './styles';
 import { RdSkeletonImageComponent } from './types';
 
-export const SkeletonImage: RdSkeletonImageComponent = props => {
-    return <SkeletonImageStyled {...props} />;
+export const SkeletonImage: RdSkeletonImageComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonImageStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/SkeletonInput.tsx b/src/molecules/Skeleton/SkeletonInput.tsx
index 06e4a1c..185d208 100644
--- a/src/molecules/Skeleton/SkeletonInput.tsx
+++ b/src/molecules/Skeleton/SkeletonInput.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonInputStyled } from './styles';
 import { RdSkeletonInputComponent } from './types';
 
-export const SkeletonInput: RdSkeletonInputComponent = props => {
-    return <SkeletonInputStyled {...props} />;
+export const SkeletonInput: RdSkeletonInputComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonInputStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/SkeletonNode.tsx b/src/molecules/Skeleton/SkeletonNode.tsx
index 386a7f5..296824f 100644
--- a/src/molecules/Skeleton/SkeletonNode.tsx
+++ b/src/molecules/Skeleton/SkeletonNode.tsx
@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import { SkeletonNodeStyled } from './styles';
 import { RdSkeletonNodeComponent } from './types';
 
-export const SkeletonNode: RdSkeletonNodeComponent = props => {
-    return <SkeletonNodeStyled {...props} />;
+export const SkeletonNode: RdSkeletonNodeComponent = ({ rootClassName, ...props }) => {
+    return <SkeletonNodeStyled rootClassName={clsx('rd-skeleton', rootClassName)} {...props} />;
 };
diff --git a/src/molecules/Skeleton/styles.tsx b/src/molecules/Skeleton/styles.tsx
index e69a772..0589503 100644
--- a/src/molecules/Skeleton/styles.tsx
+++ b/src/molecules/Skeleton/styles.tsx
@@ -1,9 +1,80 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Skeleton } from 'antd';
+import { getExcludeForwardProps } from '../../utils';
+import {
+    RdSkeletonAvatarComponent,
+    RdSkeletonAvatarProps,
+    RdSkeletonButtonComponent,
+    RdSkeletonButtonProps,
+    RdSkeletonComponent,
+    RdSkeletonImageComponent,
+    RdSkeletonImageProps,
+    RdSkeletonInputComponent,
+    RdSkeletonInputProps,
+    RdSkeletonNodeComponent,
+    RdSkeletonNodeProps,
+} from './types';
 
-export const SkeletonStyled = styled(Skeleton)``;
-export const SkeletonButtonStyled = styled(Skeleton.Button)``;
-export const SkeletonAvatarStyled = styled(Skeleton.Avatar)``;
-export const SkeletonImageStyled = styled(Skeleton.Image)``;
-export const SkeletonInputStyled = styled(Skeleton.Input)``;
-export const SkeletonNodeStyled = styled(Skeleton.Node)``;
+export const SkeletonStyled = styled(Skeleton as RdSkeletonComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonImageProps>(
+            ['fullWidth'] as (keyof RdSkeletonImageProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonButtonStyled = styled(Skeleton.Button as RdSkeletonButtonComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonButtonProps>(
+            ['fullWidth'] as (keyof RdSkeletonButtonProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonAvatarStyled = styled(Skeleton.Avatar as RdSkeletonAvatarComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonAvatarProps>(
+            ['fullWidth'] as (keyof RdSkeletonAvatarProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonImageStyled = styled(Skeleton.Image as RdSkeletonImageComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonImageProps>(
+            ['fullWidth'] as (keyof RdSkeletonImageProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonInputStyled = styled(Skeleton.Input as RdSkeletonInputComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonInputProps>(
+            ['fullWidth'] as (keyof RdSkeletonInputProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+export const SkeletonNodeStyled = styled(Skeleton.Node as RdSkeletonNodeComponent, {
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdSkeletonNodeProps>(
+            ['fullWidth'] as (keyof RdSkeletonNodeProps)[],
+            prop
+        ),
+})`
+    ${({ fullWidth }) => fullWidth && fullWidthCSS}
+`;
+
+const fullWidthCSS = css`
+    width: 100% !important;
+
+    &.rd-skeleton {
+        width: 100% !important;
+    }
+`;
diff --git a/src/molecules/Skeleton/types.ts b/src/molecules/Skeleton/types.ts
index f5d97d9..ec2dfe9 100644
--- a/src/molecules/Skeleton/types.ts
+++ b/src/molecules/Skeleton/types.ts
@@ -15,6 +15,14 @@ type SkeletonComponentTokenExtend = {};
 //#endregion
 
 //#region Define extended types
+type SkeletonBaseProps = {
+    /**
+     * 	If `true`, the skeleton image  will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+};
+
 type SkeletonPropsExtend = {};
 type SkeletonButtonPropsExtend = {};
 type SkeletonAvatarPropsExtend = {};
@@ -24,12 +32,22 @@ type SkeletonNodePropsExtend = {};
 //#endregion
 
 //#region Export types
-export type RdSkeletonProps = SkeletonPropsAntd & SkeletonPropsExtend;
-export type RdSkeletonButtonProps = SkeletonButtonPropsAntd & SkeletonButtonPropsExtend;
-export type RdSkeletonAvatarProps = SkeletonAvatarPropsAntd & SkeletonAvatarPropsExtend;
-export type RdSkeletonInputProps = SkeletonInputPropsAntd & SkeletonInputPropsExtend;
-export type RdSkeletonImageProps = SkeletonImagePropsAntd & SkeletonImagePropsExtend;
-export type RdSkeletonNodeProps = SkeletonNodePropsAntd & SkeletonNodePropsExtend;
+export type RdSkeletonProps = SkeletonPropsAntd & SkeletonBaseProps & SkeletonPropsExtend;
+export type RdSkeletonButtonProps = SkeletonButtonPropsAntd &
+    SkeletonBaseProps &
+    SkeletonButtonPropsExtend;
+export type RdSkeletonAvatarProps = SkeletonAvatarPropsAntd &
+    SkeletonBaseProps &
+    SkeletonAvatarPropsExtend;
+export type RdSkeletonInputProps = SkeletonInputPropsAntd &
+    SkeletonBaseProps &
+    SkeletonInputPropsExtend;
+export type RdSkeletonImageProps = SkeletonImagePropsAntd &
+    SkeletonBaseProps &
+    SkeletonImagePropsExtend;
+export type RdSkeletonNodeProps = SkeletonNodePropsAntd &
+    SkeletonBaseProps &
+    SkeletonNodePropsExtend;
 
 export type RdSkeletonComponentToken = SkeletonComponentTokenAntd & SkeletonComponentTokenExtend;
 //#endregion
diff --git a/src/molecules/Tag/Tag.tsx b/src/molecules/Tag/Tag.tsx
index 4f87c4f..5d9c00e 100644
--- a/src/molecules/Tag/Tag.tsx
+++ b/src/molecules/Tag/Tag.tsx
@@ -3,9 +3,9 @@ import { TagStyled } from './styles';
 import { RdTagComponent, RdTagCompoundedComponent } from './types';
 import { TagCheckable } from './TagCheckable';
 
-export const TagInternal: RdTagComponent = forwardRef(props => {
-    return <TagStyled {...props} />;
+export const TagInternal: RdTagComponent = forwardRef((props, ref) => {
+    return <TagStyled ref={ref} {...props} />;
 });
 
 export const Tag = TagInternal as RdTagCompoundedComponent;
-Tag.CheckableTag = TagCheckable;
\ No newline at end of file
+Tag.CheckableTag = TagCheckable;
diff --git a/src/molecules/Upload/UploadDragger.tsx b/src/molecules/Upload/UploadDragger.tsx
index 982100d..06e3d2f 100644
--- a/src/molecules/Upload/UploadDragger.tsx
+++ b/src/molecules/Upload/UploadDragger.tsx
@@ -1,5 +1,4 @@
 import { forwardRef } from 'react';
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { UploadDraggerStyled } from './styles';
 import { RdUploadDraggerProps } from './types';
 
@@ -7,10 +6,6 @@ export const UploadDragger = forwardRef(
     (props: RdUploadDraggerProps, ref: RdUploadDraggerProps['ref']) => {
         const { ...antdProps } = props;
 
-        return (
-            <ConfigProviderDesign>
-                <UploadDraggerStyled ref={ref} {...antdProps} />
-            </ConfigProviderDesign>
-        );
+        return <UploadDraggerStyled ref={ref} {...antdProps} />;
     }
 );
diff --git a/src/molecules/index.ts b/src/molecules/index.ts
index 1d9de7e..28b5560 100644
--- a/src/molecules/index.ts
+++ b/src/molecules/index.ts
@@ -6,6 +6,7 @@ export * from './Blur';
 export * from './Breadcrumb';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Checkbox';
 export * from './Collapse';
 export * from './DatePicker';
diff --git a/src/molecules/types.ts b/src/molecules/types.ts
index b77bf96..8d1070a 100644
--- a/src/molecules/types.ts
+++ b/src/molecules/types.ts
@@ -41,7 +41,7 @@ import { RdTagComponentToken } from './Tag';
 import { RdTooltipComponentToken } from './Tooltip';
 import { RdUploadComponentToken } from './Upload';
 
-export interface RdComponentTokenMap {
+export interface RdMoleculesTokenMap {
     Affix?: RdAffixComponentToken;
     // Alert?: AlertComponentToken;
     Anchor?: RdAnchorComponentToken;
diff --git a/src/organisms/App/App.tsx b/src/organisms/App/App.tsx
index 185aa64..ebc1320 100644
--- a/src/organisms/App/App.tsx
+++ b/src/organisms/App/App.tsx
@@ -1,14 +1,9 @@
-import { ConfigProviderDesign } from '../../ConfigProviderDesign';
+import { App as AppAntd } from 'antd';
 import { AppStyles } from './styles';
 import { RdAppCompoundedComponent, RdAppProps } from './types';
-import { App as AppAntd } from 'antd';
 
 export const AppInternal = ({ ...antdProps }: RdAppProps) => {
-    return (
-        <ConfigProviderDesign>
-            <AppStyles {...antdProps} />
-        </ConfigProviderDesign>
-    );
+    return <AppStyles {...antdProps} />;
 };
 
 export const App = AppInternal as RdAppCompoundedComponent;
diff --git a/src/organisms/ConfigProvider/types.colors.ts b/src/organisms/ConfigProvider/types.colors.ts
new file mode 100644
index 0000000..4b36783
--- /dev/null
+++ b/src/organisms/ConfigProvider/types.colors.ts
@@ -0,0 +1,40 @@
+export interface ISecondaryColor {
+    colorSecondary: string;
+    colorSecondaryActive: string;
+    colorSecondaryBg: string;
+    colorSecondaryBgHover: string;
+    colorSecondaryBorder: string;
+    colorSecondaryBorderHover: string;
+    colorSecondaryHover: string;
+    colorSecondaryText: string;
+    colorSecondaryTextActive: string;
+    colorSecondaryTextHover: string;
+}
+
+export interface ITertiaryColor {
+    colorTertiary: string;
+    colorTertiaryActive: string;
+    colorTertiaryBg: string;
+    colorTertiaryBgHover: string;
+    colorTertiaryBorder: string;
+    colorTertiaryBorderHover: string;
+    colorTertiaryHover: string;
+    colorTertiaryText: string;
+    colorTertiaryTextActive: string;
+    colorTertiaryTextHover: string;
+}
+
+export interface IQuaternaryColor {
+    colorQuaternary: string;
+    colorQuaternaryActive: string;
+    colorQuaternaryBg: string;
+    colorQuaternaryBgHover: string;
+    colorQuaternaryBorder: string;
+    colorQuaternaryBorderHover: string;
+    colorQuaternaryHover: string;
+    colorQuaternaryText: string;
+    colorQuaternaryTextActive: string;
+    colorQuaternaryTextHover: string;
+}
+
+export interface IAdditionalColor extends ISecondaryColor, ITertiaryColor, IQuaternaryColor {}
diff --git a/src/organisms/ConfigProvider/types.ts b/src/organisms/ConfigProvider/types.ts
index 0e6c244..7506d30 100644
--- a/src/organisms/ConfigProvider/types.ts
+++ b/src/organisms/ConfigProvider/types.ts
@@ -1,27 +1,68 @@
-import { ConfigProvider as ConfigProviderAntd, GetProps, ThemeConfig } from 'antd';
+import { OverrideTokenMap } from '@ant-design/cssinjs-utils';
+import {
+    ConfigProvider as ConfigProviderAntd,
+    GetProps,
+    MappingAlgorithm,
+    ThemeConfig,
+} from 'antd';
 import { AliasToken } from 'antd/es/theme/internal';
+import { RdMoleculesTokenMap } from '../../molecules/types';
 import { ConfigProviderInternal } from './ConfigProvider';
+import { RdTemplatesTokenMap } from '../../templates/types';
 
 //#region Define Ant Design types
 type ConfigProviderProps = GetProps<typeof ConfigProviderAntd>;
-type ComponentsConfig = NonNullable<ThemeConfig['components']>;
 type Algorithm = ThemeConfig['algorithm'];
 //#endregion
 
 //#region Define extended types
 type ConfigProviderPropsExtend = {};
-type AliasTokenExtend = {};
+type AliasTokenExtend = {
+    /**
+     * Brand secondary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
+     */
+    colorSecondary: string;
+
+    /**
+     * Brand tertiary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
+     */
+    colorTertiary: string;
+
+    /**
+     * Brand quaternary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
+     */
+    colorQuaternary: string;
+};
 type ComponentsConfigExtend = {};
 type AlgorithmExtend = {};
-type ThemeConfigExtend = {};
+type ThemeConfigExtend = {
+    /**
+     * @desc Modify Design Token.
+     * @override Partial<AliasToken> (antd)
+     */
+    token?: Partial<RdAliasToken>;
+
+    /**
+     * @desc Modify Component Token and Alias Token applied to components.
+     * @override ComponentsConfig (antd)
+     */
+    components?: RdComponentsConfig;
+};
 //#endregion
 
 //#region Export types
+export type RdComponentTokenMap = RdMoleculesTokenMap & RdTemplatesTokenMap;
 export type RdConfigProviderProps = ConfigProviderProps & ConfigProviderPropsExtend;
 export type RdAliasToken = AliasToken & AliasTokenExtend;
-export type RdComponentsConfigExtend = ComponentsConfig & ComponentsConfigExtend;
+export type RdComponentsConfigExtend = RdComponentsConfig & ComponentsConfigExtend;
 export type RdAlgorithm = Algorithm & AlgorithmExtend;
 export type RdThemeConfig = ThemeConfig & ThemeConfigExtend;
+export type RdOverrideToken = OverrideTokenMap<RdComponentTokenMap, RdAliasToken>;
+export type RdComponentsConfig = {
+    [key in keyof RdOverrideToken]?: RdOverrideToken[key] & {
+        algorithm?: boolean | MappingAlgorithm | MappingAlgorithm[];
+    };
+};
 
 export type RdConfigProviderCompoundedComponent = typeof ConfigProviderInternal & {
     ConfigContext: (typeof ConfigProviderAntd)['ConfigContext'];
diff --git a/src/templates/CenteredTemplate/CenteredTemplate.tsx b/src/templates/CenteredTemplate/CenteredTemplate.tsx
new file mode 100644
index 0000000..fab7144
--- /dev/null
+++ b/src/templates/CenteredTemplate/CenteredTemplate.tsx
@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+import { CenteredTemplateContent, CenteredTemplateStyles } from './styles';
+import { RdCenteredTemplateComponent } from './types';
+
+export const CenteredTemplate: RdCenteredTemplateComponent = forwardRef((props, ref) => {
+    const { children, maxWidth = 450, ...antdProps } = props;
+
+    return (
+        <CenteredTemplateStyles ref={ref} {...antdProps}>
+            <CenteredTemplateContent maxWidth={maxWidth}>{children}</CenteredTemplateContent>
+        </CenteredTemplateStyles>
+    );
+});
diff --git a/src/templates/CenteredTemplate/index.tsx b/src/templates/CenteredTemplate/index.tsx
new file mode 100644
index 0000000..632f813
--- /dev/null
+++ b/src/templates/CenteredTemplate/index.tsx
@@ -0,0 +1,3 @@
+export * from './CenteredTemplate';
+export * from './types';
+export * from './types.componentToken'
\ No newline at end of file
diff --git a/src/templates/CenteredTemplate/styles.tsx b/src/templates/CenteredTemplate/styles.tsx
new file mode 100644
index 0000000..7a0d08d
--- /dev/null
+++ b/src/templates/CenteredTemplate/styles.tsx
@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import { Layout } from '../../molecules';
+import { getComponentOrGlobalToken, getExcludeForwardProps, unit } from '../../utils';
+import { css } from '@emotion/react';
+import { RdCenteredTemplateProps } from './types';
+
+export const CenteredTemplateStyles = styled(Layout, {
+    label: 'rd-centered-template',
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdCenteredTemplateProps>(
+            ['maxWidth'] as (keyof RdCenteredTemplateProps)[],
+            prop
+        ),
+})`
+    ${() => {
+        return css`
+            background-color: ${getComponentOrGlobalToken('CenteredTemplate', 'colorPrimary')};
+        `;
+    }}
+
+    width: 100%;
+    height: 100vh;
+`;
+
+export const CenteredTemplateContent = styled('div', {
+    label: 'rd-centered-template-content',
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<RdCenteredTemplateProps>(
+            ['maxWidth'] as (keyof RdCenteredTemplateProps)[],
+            prop
+        ),
+})<{ maxWidth: number }>`
+    width: 100%;
+    margin: auto;
+
+    ${({ maxWidth }) => {
+        return css`
+            max-width: ${maxWidth}px;
+            background-color: ${getComponentOrGlobalToken('CenteredTemplate', 'colorBgElevated')};
+            padding: ${getComponentOrGlobalToken('CenteredTemplate', 'paddingContentVerticalLG')}px
+                ${getComponentOrGlobalToken('CenteredTemplate', 'paddingContentHorizontalLG')}px;
+            border-radius: ${getComponentOrGlobalToken('CenteredTemplate', 'borderRadius')}px;
+        `;
+    }}
+`;
diff --git a/src/templates/CenteredTemplate/types.componentToken.ts b/src/templates/CenteredTemplate/types.componentToken.ts
new file mode 100644
index 0000000..6c77ef9
--- /dev/null
+++ b/src/templates/CenteredTemplate/types.componentToken.ts
@@ -0,0 +1,3 @@
+export type RdCenteredTemplateComponentToken = {
+    contentPadding: number | string;
+};
diff --git a/src/templates/CenteredTemplate/types.ts b/src/templates/CenteredTemplate/types.ts
new file mode 100644
index 0000000..d067cad
--- /dev/null
+++ b/src/templates/CenteredTemplate/types.ts
@@ -0,0 +1,22 @@
+import { RdLayoutProps, RdLayoutRef } from '../../molecules';
+
+
+//#region Define extended types
+type CenteredTemplatePropsExtend = {
+    maxWidth?: number;
+};
+
+type CenteredTemplateRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdCenteredTemplateProps = RdLayoutProps & CenteredTemplatePropsExtend;
+
+export type RdCenteredTemplateRef = RdLayoutRef & CenteredTemplateRefExtend;
+//#endregion
+
+//#region Define component types
+export type RdCenteredTemplateComponent = React.ForwardRefExoticComponent<
+    RdCenteredTemplateProps & RdCenteredTemplateRef
+>;
+//#endregion
diff --git a/src/templates/DashboardTemplate/DashboardTemplate.tsx b/src/templates/DashboardTemplate/DashboardTemplate.tsx
new file mode 100644
index 0000000..b79a3db
--- /dev/null
+++ b/src/templates/DashboardTemplate/DashboardTemplate.tsx
@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import DashboardTemplateHeader from './Header';
+import DashboardTemplateSider from './Sider';
+import { DashboardTemplateContent, DashboardTemplateStyles } from './styles';
+import { RdDashboardTemplateComponent, RdDashboardTemplateCompoundedComponent } from './types';
+import { Layout } from '../../molecules';
+
+const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((props, ref) => {
+    const { headerProps: headerProps, siderProps: siderProps, ...restProps } = props;
+
+    return (
+        <DashboardTemplateStyles ref={ref} {...restProps}>
+            <DashboardTemplateHeader {...headerProps} />
+
+            <Layout hasSider>
+                <DashboardTemplateSider {...siderProps} />
+
+                <DashboardTemplateContent>{props.children}</DashboardTemplateContent>
+            </Layout>
+        </DashboardTemplateStyles>
+    );
+});
+
+export const DashboardTemplate =
+    DashboardTemplateInternal as RdDashboardTemplateCompoundedComponent;
+DashboardTemplate.Header = DashboardTemplateHeader;
+DashboardTemplate.Sider = DashboardTemplateSider;
diff --git a/src/templates/DashboardTemplate/Header/index.tsx b/src/templates/DashboardTemplate/Header/index.tsx
new file mode 100644
index 0000000..7d23b5a
--- /dev/null
+++ b/src/templates/DashboardTemplate/Header/index.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { DashboardTemplateHeaderStyles } from './styles';
+import { RdDashboardTemplateHeaderComponent } from './types';
+
+export const DashboardTemplateHeader: RdDashboardTemplateHeaderComponent = forwardRef(
+    (props, ref) => {
+        const { children, render, ...restProps } = props;
+
+        if (render) {
+            return render({ children, ...restProps });
+        }
+
+        return (
+            <DashboardTemplateHeaderStyles ref={ref} {...restProps}>
+                {children}
+            </DashboardTemplateHeaderStyles>
+        );
+    }
+);
+export default DashboardTemplateHeader;
diff --git a/src/templates/DashboardTemplate/Header/styles.tsx b/src/templates/DashboardTemplate/Header/styles.tsx
new file mode 100644
index 0000000..d09daf9
--- /dev/null
+++ b/src/templates/DashboardTemplate/Header/styles.tsx
@@ -0,0 +1,22 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Layout } from 'antd';
+import { getComponentOrGlobalToken, getExcludeForwardProps } from '../../../utils';
+import { RdDashboardTemplateHeaderProps } from './types';
+
+export const DashboardTemplateHeaderStyles = styled(Layout.Header, {
+    label: 'rd-dashboard-template-header',
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<Omit<RdDashboardTemplateHeaderProps, 'render'>>(
+            ['fixedOnScroll'] as (keyof Omit<RdDashboardTemplateHeaderProps, 'render'>)[],
+            prop
+        ),
+})<Omit<RdDashboardTemplateHeaderProps, 'render'>>`
+    ${({ fixedOnScroll }) =>
+        fixedOnScroll &&
+        css`
+            position: sticky;
+            top: 0;
+            z-index: 1;
+        `}
+`;
diff --git a/src/templates/DashboardTemplate/Header/types.ts b/src/templates/DashboardTemplate/Header/types.ts
new file mode 100644
index 0000000..1739488
--- /dev/null
+++ b/src/templates/DashboardTemplate/Header/types.ts
@@ -0,0 +1,16 @@
+import { RdHeaderProps, RdLayoutHeaderRef } from '../../../molecules';
+
+//#region Define extended types
+export type DashboardTemplateHeaderPropsExtend = {
+    fixedOnScroll?: boolean;
+
+    render?: (props: Omit<RdDashboardTemplateHeaderProps, 'render'>) => React.ReactNode;
+};
+//#endregion
+
+export type RdDashboardTemplateHeaderProps = RdHeaderProps & DashboardTemplateHeaderPropsExtend;
+export type RdDashboardTemplateHeaderRef = RdLayoutHeaderRef & {};
+
+export type RdDashboardTemplateHeaderComponent = React.ForwardRefExoticComponent<
+    RdDashboardTemplateHeaderProps & RdDashboardTemplateHeaderRef
+>;
diff --git a/src/templates/DashboardTemplate/Sider/index.tsx b/src/templates/DashboardTemplate/Sider/index.tsx
new file mode 100644
index 0000000..a81cdff
--- /dev/null
+++ b/src/templates/DashboardTemplate/Sider/index.tsx
@@ -0,0 +1,29 @@
+import { forwardRef, useState } from 'react';
+import { DashboardTemplateSiderStyles } from './styles';
+import { RdDashboardTemplateSiderComponent } from './types';
+
+export const DashboardTemplateSider: RdDashboardTemplateSiderComponent = forwardRef(
+    (props, ref) => {
+        const { children, render, ...restProps } = props;
+        const [collapsed, setCollapsed] = useState(false);
+
+        if (render) {
+            return render({ children, ...restProps });
+        }
+
+        return (
+            <DashboardTemplateSiderStyles
+                ref={ref}
+                width={264}
+                collapsedWidth={68}
+                collapsible
+                collapsed={collapsed}
+                onCollapse={value => setCollapsed(value)}
+                {...restProps}
+            >
+                {children}
+            </DashboardTemplateSiderStyles>
+        );
+    }
+);
+export default DashboardTemplateSider;
diff --git a/src/templates/DashboardTemplate/Sider/styles.tsx b/src/templates/DashboardTemplate/Sider/styles.tsx
new file mode 100644
index 0000000..3686374
--- /dev/null
+++ b/src/templates/DashboardTemplate/Sider/styles.tsx
@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Layout } from 'antd';
+import { getComponentToken, getExcludeForwardProps } from '../../../utils';
+import { RdDashboardTemplateSiderProps } from './types';
+
+export const DashboardTemplateSiderStyles = styled(Layout.Sider, {
+    label: 'rd-dashboard-template-header',
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<Omit<RdDashboardTemplateSiderProps, 'render'>>(
+            ['fixedOnScroll'] as (keyof Omit<RdDashboardTemplateSiderProps, 'render'>)[],
+            prop
+        ),
+})<Omit<RdDashboardTemplateSiderProps, 'render'>>`
+    ${() => css`
+        overflow: auto;
+        inset-inline-start: 0;
+        height: 100%;
+    `}
+
+    ${({ fixedOnScroll }) =>
+        fixedOnScroll &&
+        css`
+            height: calc(100vh - ${getComponentToken('Layout', 'headerHeight')}px);
+            position: sticky;
+            top: ${getComponentToken('Layout', 'headerHeight')}px;
+            bottom: 0;
+        `}
+`;
diff --git a/src/templates/DashboardTemplate/Sider/types.ts b/src/templates/DashboardTemplate/Sider/types.ts
new file mode 100644
index 0000000..ef5a0f5
--- /dev/null
+++ b/src/templates/DashboardTemplate/Sider/types.ts
@@ -0,0 +1,16 @@
+import { RdLayoutSiderRef, RdSiderProps } from "../../../molecules";
+
+//#region Define extended types
+export type DashboardTemplateSiderPropsExtend = {
+    fixedOnScroll?: boolean;
+
+    render?: (props: Omit<RdDashboardTemplateSiderProps, 'render'>) => React.ReactNode;
+};
+//#endregion
+
+export type RdDashboardTemplateSiderProps = RdSiderProps & DashboardTemplateSiderPropsExtend;
+export type RdDashboardTemplateSiderRef = RdLayoutSiderRef & {};
+
+export type RdDashboardTemplateSiderComponent = React.ForwardRefExoticComponent<
+    RdDashboardTemplateSiderProps & RdDashboardTemplateSiderRef
+>;
diff --git a/src/templates/DashboardTemplate/index.tsx b/src/templates/DashboardTemplate/index.tsx
new file mode 100644
index 0000000..60dde6f
--- /dev/null
+++ b/src/templates/DashboardTemplate/index.tsx
@@ -0,0 +1,2 @@
+export * from './DashboardTemplate';
+export * from './types';
diff --git a/src/templates/DashboardTemplate/styles.tsx b/src/templates/DashboardTemplate/styles.tsx
new file mode 100644
index 0000000..cfb6bd0
--- /dev/null
+++ b/src/templates/DashboardTemplate/styles.tsx
@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { getComponentOrGlobalToken, getComponentToken } from '../..';
+import { Layout } from '../../molecules';
+
+export const DashboardTemplateStyles = styled(Layout, {
+    label: 'rd-dashboard-template',
+})`
+    ${() => css`
+        background: ${getComponentOrGlobalToken('DashboardTemplate', 'colorBgLayout')};
+    `}
+`;
+
+export const DashboardTemplateContent = styled(Layout, {
+    label: 'rd-dashboard-template-content',
+})`
+    ${() => css`
+        padding: ${getComponentToken('CenteredTemplate', 'contentPadding') || '32px 32px'};
+    `}
+`;
diff --git a/src/templates/DashboardTemplate/types.ts b/src/templates/DashboardTemplate/types.ts
new file mode 100644
index 0000000..2c2e08d
--- /dev/null
+++ b/src/templates/DashboardTemplate/types.ts
@@ -0,0 +1,42 @@
+import { RdLayoutProps, RdLayoutRef } from '../../molecules';
+import { RdDashboardTemplateHeaderComponent, RdDashboardTemplateHeaderProps } from './Header/types';
+import { RdDashboardTemplateSiderComponent, RdDashboardTemplateSiderProps } from './Sider/types';
+
+//#region Define extended component tokens
+type DashboardTemplateComponentTokenExtend = {
+    contentPadding?: string;
+};
+
+//#endregion
+
+//#region Define extended types
+type DashboardTemplatePropsExtend = {
+    headerProps?: RdDashboardTemplateHeaderProps;
+    siderProps?: RdDashboardTemplateSiderProps;
+    test?: boolean;
+};
+
+type DashboardTemplateRefExtend = {};
+
+//#endregion
+
+//#region Export types
+export type RdDashboardTemplateProps = RdLayoutProps & DashboardTemplatePropsExtend;
+export type RdDashboardTemplateRef = RdLayoutRef & DashboardTemplateRefExtend;
+
+export type RdDashboardTemplateComponentToken = DashboardTemplateComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdDashboardTemplateComponent = React.ForwardRefExoticComponent<
+    RdDashboardTemplateProps & RdDashboardTemplateRef
+>;
+
+export type RdDashboardTemplateCompoundedComponent = RdDashboardTemplateComponent & {
+    Header: RdDashboardTemplateHeaderComponent;
+    Sider: RdDashboardTemplateSiderComponent;
+    // Content: RdLayoutContentComponent;
+    // Sider: RdLayoutSiderComponent;
+};
+
+//#endregion
diff --git a/src/templates/index.ts b/src/templates/index.ts
new file mode 100644
index 0000000..3cf3a53
--- /dev/null
+++ b/src/templates/index.ts
@@ -0,0 +1,2 @@
+export * from './CenteredTemplate';
+export * from './DashboardTemplate';
diff --git a/src/templates/types.ts b/src/templates/types.ts
new file mode 100644
index 0000000..5907b8f
--- /dev/null
+++ b/src/templates/types.ts
@@ -0,0 +1,7 @@
+import { RdCenteredTemplateComponentToken } from './CenteredTemplate';
+import { RdDashboardTemplateComponentToken } from './DashboardTemplate';
+
+export interface RdTemplatesTokenMap {
+    CenteredTemplate?: RdCenteredTemplateComponentToken;
+    DashboardTemplate?: RdDashboardTemplateComponentToken
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index a3b9ad8..7caae4f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,4 @@
-export * from './token';
 export * from './styles';
-export * from './types';
 export * from './theme';
+export * from './token';
+export * from './unit';
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 7147975..4f374c1 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,12 +1,11 @@
 import { theme } from 'antd';
+import { darken, lighten } from 'polished';
+import { RdAliasToken, RdThemeConfig } from '../organisms';
 import {
     IQuaternaryColor,
-    IRdAliasToken,
-    IRdThemeConfig,
     ISecondaryColor,
     ITertiaryColor,
-} from './types';
-import { darken, lighten } from 'polished';
+} from '../organisms/ConfigProvider/types.colors';
 
 /**
  * @description Generate color based on base color
@@ -28,7 +27,7 @@ const generateColor = (baseColor: string) => {
 
 export const rdTheme = {
     ...theme,
-    getDesignToken: (config: IRdThemeConfig): IRdAliasToken => {
+    getDesignToken: (config: RdThemeConfig): RdAliasToken => {
         // getDesignToken in antd
         const design = theme.getDesignToken(config);
 
@@ -75,7 +74,7 @@ export const rdTheme = {
             colorQuaternaryTextHover: quaternaryColorGenerated.colorTextHover,
         };
 
-        const result: IRdAliasToken = {
+        const result: RdAliasToken = {
             ...design,
             ...secondaryColorAdditional,
             ...tertiaryColorAdditional,
@@ -86,4 +85,4 @@ export const rdTheme = {
     },
 };
 
-export const rdTheme2 = theme;
\ No newline at end of file
+export const rdTheme2 = theme;
diff --git a/src/utils/token.ts b/src/utils/token.ts
index 2d58adb..c2e17f4 100644
--- a/src/utils/token.ts
+++ b/src/utils/token.ts
@@ -1,6 +1,4 @@
-import { config } from '..';
-import { RdComponentTokenMap } from '../molecules/types';
-import { IRdAliasToken, RdComponentsConfig } from './types';
+import { config, RdAliasToken, RdComponentsConfig, RdComponentTokenMap } from '..';
 
 /**
  * Get the token value for a given component and alias name.
@@ -12,7 +10,7 @@ import { IRdAliasToken, RdComponentsConfig } from './types';
  */
 export const getComponentOrGlobalToken = (
     componentName: keyof RdComponentsConfig,
-    aliasName: keyof IRdAliasToken
+    aliasName: keyof RdAliasToken
 ) => {
     const componentTokenValue = config.componentToken?.[componentName]?.[aliasName];
     const designTokenValue = config.designToken?.[aliasName];
diff --git a/src/utils/types.ts b/src/utils/types.ts
deleted file mode 100644
index 68e6310..0000000
--- a/src/utils/types.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { OverrideTokenMap } from '@ant-design/cssinjs-utils';
-import { AliasToken } from 'antd/es/theme/internal';
-import { RdComponentTokenMap } from '../molecules/types';
-import { MappingAlgorithm, ThemeConfig } from 'antd';
-
-export interface ISecondaryColor {
-    colorSecondary: string;
-    colorSecondaryActive: string;
-    colorSecondaryBg: string;
-    colorSecondaryBgHover: string;
-    colorSecondaryBorder: string;
-    colorSecondaryBorderHover: string;
-    colorSecondaryHover: string;
-    colorSecondaryText: string;
-    colorSecondaryTextActive: string;
-    colorSecondaryTextHover: string;
-}
-
-export interface ITertiaryColor {
-    colorTertiary: string;
-    colorTertiaryActive: string;
-    colorTertiaryBg: string;
-    colorTertiaryBgHover: string;
-    colorTertiaryBorder: string;
-    colorTertiaryBorderHover: string;
-    colorTertiaryHover: string;
-    colorTertiaryText: string;
-    colorTertiaryTextActive: string;
-    colorTertiaryTextHover: string;
-}
-
-export interface IQuaternaryColor {
-    colorQuaternary: string;
-    colorQuaternaryActive: string;
-    colorQuaternaryBg: string;
-    colorQuaternaryBgHover: string;
-    colorQuaternaryBorder: string;
-    colorQuaternaryBorderHover: string;
-    colorQuaternaryHover: string;
-    colorQuaternaryText: string;
-    colorQuaternaryTextActive: string;
-    colorQuaternaryTextHover: string;
-}
-
-interface IAdditionalColor extends ISecondaryColor, ITertiaryColor, IQuaternaryColor {}
-
-/**
- * @description Custom Design Token.
- * @overload AliasToken (antd)
- */
-export interface IRdAliasToken extends AliasToken, IAdditionalColor {
-    /**
-     * @desc Brand secondary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
-     */
-    colorSecondary: string;
-
-    /**
-     * @desc Brand tertiary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
-     */
-    colorTertiary: string;
-
-    /**
-     * @desc Brand quaternary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
-     */
-    colorQuaternary: string;
-}
-
-/**
- * @description Custom OverrideToken for RdAliasToken
- */
-export type OverrideToken = OverrideTokenMap<RdComponentTokenMap, IRdAliasToken>;
-
-/**
- * @description ComponentsConfig in antd
- */
-export type ComponentsConfig = {
-    [key in keyof OverrideToken]?: OverrideToken[key] & {
-        algorithm?: boolean | MappingAlgorithm | MappingAlgorithm[];
-    };
-};
-
-export type RdComponentsConfig = ComponentsConfig & {};
-
-export interface IRdThemeConfig extends ThemeConfig {
-    /**
-     * @desc Modify Design Token.
-     * @override Partial<AliasToken> (antd)
-     */
-    token?: Partial<IRdAliasToken>;
-
-    /**
-     * @desc Modify Component Token and Alias Token applied to components.
-     * @override ComponentsConfig (antd)
-     */
-    components?: RdComponentsConfig;
-}
diff --git a/src/utils/unit.ts b/src/utils/unit.ts
new file mode 100644
index 0000000..f3dd1fa
--- /dev/null
+++ b/src/utils/unit.ts
@@ -0,0 +1,7 @@
+import { unit as unitAntd } from '@ant-design/cssinjs';
+
+export const unit = (num: string | number): string => {
+    const result = unitAntd(num);
+
+    return result;
+};
diff --git a/tsconfig.json b/tsconfig.json
index b0d9eee..8e2d810 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,11 @@
         "forceConsistentCasingInFileNames": true,
         "declaration": true,
         "outDir": "./dist",
+
+        // "baseUrl": ".",
+        // "paths": {
+        //     "@/*": ["src/*"]
+        // }
     },
     "include": ["src"]
 }