diff --git a/client/package.json b/client/package.json
index f9a524be5..25b47c3d7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,6 +11,7 @@
   },
   "scripts": {
     "start": "yarn workspace lowcoder start",
+    "start-win":"LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start",
     "start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
     "start:ee-global": "REACT_APP_EDITION=enterprise-global yarn workspace lowcoder start",
     "build": "yarn node ./scripts/build.js",
diff --git a/client/packages/lowcoder/index.html b/client/packages/lowcoder/index.html
index c83e225aa..038b31c38 100644
--- a/client/packages/lowcoder/index.html
+++ b/client/packages/lowcoder/index.html
@@ -7,6 +7,10 @@
     <meta name="theme-color" content="#000000" />
     <meta property="iframely:title" content="Lowcoder" />
     <meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
+    <!-- Added Montserrat google font link to test font family style property for components -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <style>
       html,
       body {
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index 7114a019b..e770014f7 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -13,6 +13,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
   return css`
     &&& {
       border-radius: ${buttonStyle.radius};
+      border-width:${buttonStyle.borderWidth};
       margin: ${buttonStyle.margin};	
       padding: ${buttonStyle.padding};
       &:not(:disabled) {
@@ -22,6 +23,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         font-size: ${buttonStyle.textSize};
         font-weight: ${buttonStyle.textWeight};
         font-family: ${buttonStyle.fontFamily};
+        font-style: ${buttonStyle.fontStyle};
         background-color: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
         margin: ${buttonStyle.margin};	
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index 5b15445df..0f83804f7 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -42,6 +42,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
       margin: 0 !important;
       ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
     }
+    ${(props) => `background-color: ${props.$buttonStyle.background};`}
+    ${(props) => `color: ${props.$buttonStyle.text};`}
+    ${(props) => `padding: ${props.$buttonStyle.padding};`}
+    ${(props) => `font-size: ${props.$buttonStyle.textSize};`}
+    ${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
     width: 100%;
   }
 `;
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index 275b125b3..cbd5b26b2 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -23,12 +23,18 @@ import { RefControl } from "comps/controls/refControl";
 import { EditorContext } from "comps/editorState";
 import React, { useContext } from "react";
 
-const Link = styled(Button)<{ $style: LinkStyleType }>`
+const Link = styled(Button) <{ $style: LinkStyleType }>`
   ${(props) => `
     color: ${props.$style.text};
     margin: ${props.$style.margin};
     padding: ${props.$style.padding};
     font-size: ${props.$style.textSize};
+    font-style:${props.$style.fontStyle};
+    font-family:${props.$style.fontFamily};
+    font-weight:${props.$style.textWeight};
+    border: ${props.$style.borderWidth} solid ${props.$style.border};
+    border-radius:${props.$style.radius ? props.$style.radius:'0px'};
+    background-color: ${props.$style.background};
     &:hover {
       color: ${props.$style.hoverText} !important;
     }
@@ -36,7 +42,8 @@ const Link = styled(Button)<{ $style: LinkStyleType }>`
       color: ${props.$style.activeText} !important;
     }
   `}
-  &.ant-btn {
+
+  &.ant-btn { 
     display: inline-flex;
     align-items: center;
     > span {
@@ -114,15 +121,15 @@ const LinkTmpComp = (function () {
               {hiddenPropertyView(children)}
               {loadingPropertyView(children)}
             </Section>
-            <Section name={sectionNames.advanced}>
-              {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
-              {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-            </Section></>
+              <Section name={sectionNames.advanced}>
+                {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+                {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+              </Section></>
           )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-          <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
-        )}
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+            <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+          )}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
index e830a6f41..032807de2 100644
--- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -21,7 +21,7 @@ type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean };
 // TODO: find out how to set border style when text is active
 // TODO: enable type "vertical" https://ant.design/components/divider
 
-const StyledDivider = styled(Divider)<IProps>`
+const StyledDivider = styled(Divider) <IProps>`
   margin-top: 3.5px;
   .ant-divider-inner-text {
     height: 32px;
@@ -30,16 +30,17 @@ const StyledDivider = styled(Divider)<IProps>`
     font-size: ${(props) => props.$style.textSize};
     font-weight: ${(props) => props.$style.textWeight};
     font-family: ${(props) => props.$style.fontFamily};
+    font-style:${(props) => props.$style.fontStyle}
   }
   min-width: 0;	
-  width: ${(props) => {	
-    return widthCalculator(props.$style.margin);	
+  width: ${(props) => {
+    return widthCalculator(props.$style.margin);
   }};	
-  min-height: ${(props) => {	
-    return heightCalculator(props.$style.margin);	
+  min-height: ${(props) => {
+    return heightCalculator(props.$style.margin);
   }};	
-  margin: ${(props) => {	
-    return props.$style.margin;	
+  margin: ${(props) => {
+    return props.$style.margin;
   }};	
   padding: ${(props) => props.$style.padding};
   
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index 52dbe74d0..018855b9c 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -141,6 +141,11 @@ const getStyle = (style: FileStyleType) => {
       padding: ${style.padding};	
       width: ${widthCalculator(style.margin)};	
       height: ${heightCalculator(style.margin)};
+      font-family:${style.fontFamily};
+      font-size:${style.textSize};
+      font-weight:${style.textWeight};
+      font-style:${style.fontStyle};
+      border-width:${style.borderWidth};
     }
 
     .ant-btn:not(:disabled) {
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
index fb6d4609b..44b782b47 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -23,18 +23,20 @@ type IProps = {
   $justify: boolean;
   $bgColor: string;
   $borderColor: string;
+  $borderWidth: string;
+  $borderRadius: string;
 };
 
-const Wrapper = styled("div")<Pick<IProps, "$bgColor" | "$borderColor">>`
+const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius">>`
   height: 100%;
-  border-radius: 2px;
+  border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'};
   box-sizing: border-box;
-  border: 1px solid ${(props) => props.$borderColor};
+  border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor};
   background-color: ${(props) => props.$bgColor};
 `;
 
-const NavInner = styled("div")<Pick<IProps, "$justify">>`
-  margin: 0 -16px;
+const NavInner = styled("div") <Pick<IProps, "$justify">>`
+  // margin: 0 -16px;
   height: 100%;
   display: flex;
   justify-content: ${(props) => (props.$justify ? "space-between" : "left")};
@@ -44,13 +46,23 @@ const Item = styled.div<{
   $active: boolean;
   $activeColor: string;
   $color: string;
+  $fontFamily: string;
+  $fontStyle: string;
+  $textWeight: string;
+  $textSize: string;
+  $margin: string;
+  $padding: string;
 }>`
   height: 30px;
   line-height: 30px;
-  padding: 0 16px;
+  padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
   color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
-  font-weight: 500;
-
+  font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)};
+  font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
+  font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
+  font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
+  margin:${(props) => props.$margin ? props.$margin : '0px'};
+  
   &:hover {
     color: ${(props) => props.$activeColor};
     cursor: pointer;
@@ -79,7 +91,7 @@ const ItemList = styled.div<{ $align: string }>`
   justify-content: ${(props) => props.$align};
 `;
 
-const StyledMenu = styled(Menu)<MenuProps>`
+const StyledMenu = styled(Menu) <MenuProps>`
   &.ant-dropdown-menu {
     min-width: 160px;
   }
@@ -144,6 +156,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             $active={active || subMenuSelectedKeys.length > 0}
             $color={props.style.text}
             $activeColor={props.style.accent}
+            $fontFamily={props.style.fontFamily}
+            $fontStyle={props.style.fontStyle}
+            $textWeight={props.style.textWeight}
+            $textSize={props.style.textSize}
+            $padding={props.style.padding}
+            $margin={props.style.margin}
             onClick={() => onEvent("click")}
           >
             {label}
@@ -178,7 +196,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
   const justify = props.horizontalAlignment === "justify";
 
   return (
-    <Wrapper $borderColor={props.style.border} $bgColor={props.style.background}>
+    <Wrapper
+      $borderColor={props.style.border}
+      $bgColor={props.style.background}
+      $borderWidth={props.style.borderWidth}
+      $borderRadius={props.style.borderRadius}
+    >
       <NavInner $justify={justify}>
         {props.logoUrl && (
           <LogoWrapper onClick={() => props.logoEvent("click")}>
@@ -220,7 +243,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
           </Section>
         )}
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (  
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 4baacf4d1..cb5a7836e 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -56,6 +56,7 @@ import { EditorContext } from "comps/editorState";
 const getStyle = (style: InputLikeStyleType) => {
   return css`
     border-radius: ${style.radius};
+    border-width:${style.borderWidth} !important;
     // still use antd style when disabled
     &:not(.ant-input-number-disabled) {
       color: ${style.text};
@@ -78,11 +79,17 @@ const getStyle = (style: InputLikeStyleType) => {
       }
       .ant-input-number {	
         margin: 0;	
+        
       }	
-      .ant-input-number input {	
+      .ant-input-number-input {	
         margin: 0;	
         padding: ${style.padding};	
         height: ${heightCalculator(style.margin)};	
+        color:${style.text};
+        font-family:${style.fontFamily} !important;
+        font-weight:${style.textWeight} !important;
+        font-size:${style.textSize} !important;
+        font-style:${style.fontStyle} !important;
       }
 
       .ant-input-number-handler-wrap {
@@ -110,7 +117,7 @@ const getStyle = (style: InputLikeStyleType) => {
   `;
 };
 
-const InputNumber = styled(AntdInputNumber)<{
+const InputNumber = styled(AntdInputNumber) <{
   $style: InputLikeStyleType;
 }>`
   width: 100%;
@@ -391,15 +398,15 @@ const NumberInputTmpComp = (function () {
             {children.max.propertyView({ label: trans("prop.maximum") })}
             {children.customRule.propertyView({})}
           </Section>
-          <Section name={sectionNames.interaction}>
-            {children.onEvent.getPropertyView()}
-            {disabledPropertyView(children)}
-            {hiddenPropertyView(children)}
-          </Section>
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+            </Section>
           </>
         )}
- 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( 
+
+        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
           children.label.getPropertyView()
         )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
index d7b29f633..c39b39100 100644
--- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -1,6 +1,6 @@
 import { default as Progress } from "antd/es/progress";
 import { styleControl } from "comps/controls/styleControl";
-import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { CircleProgressStyle, CircleProgressType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { numberExposingStateControl } from "../controls/codeStateControl";
@@ -14,33 +14,38 @@ import { EditorContext } from "comps/editorState";
 
 // TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
 
-const getStyle = (style: ProgressStyleType) => {
+const getStyle = (style: CircleProgressType) => {
   return css`
     width: ${widthCalculator(style.margin)};	
     height: ${heightCalculator(style.margin)};	
     margin: ${style.margin};	
     padding: ${style.padding};
+    border-radius:${style.radius};
     .ant-progress-text {
-      color: ${style.text};
+      color: ${style.text} !important;
+      font-family:${style.fontFamily};
+      font-style:${style.fontStyle};
+      font-size:${style.textSize} !important;
+      font-weight:${style.textWeight};
     }
     .ant-progress-circle-trail {
       stroke: ${style.track};
     }
     .ant-progress-inner .ant-progress-circle-path {
-      stroke: ${style.fill};
+      stroke: ${style.fill} !important;
     }
     &.ant-progress-status-success {
       .ant-progress-inner .ant-progress-circle-path {
-        stroke: ${style.success};
+        stroke: ${style.success} !important;
       }
       .ant-progress-text {
-        color: ${style.success};
+        color: ${style.success} !important;
       }
     }
   `;
 };
 
-export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType }>`
+export const StyledProgressCircle = styled(Progress) <{ $style: CircleProgressType }>`
   width: 100%;
   height: 100%;
   padding: 2px;
@@ -59,7 +64,8 @@ export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType
 let ProgressCircleTmpComp = (function () {
   const childrenMap = {
     value: numberExposingStateControl("value", 60),
-    style: styleControl(ProgressStyle),
+    // borderRadius property hidden as it's not valid for progress circle
+    style: styleControl(CircleProgressStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     return (
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index 1acf7f2d6..9090fa249 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -18,6 +18,10 @@ const getStyle = (style: ProgressStyleType) => {
     line-height: 2;
     .ant-progress-text {
       color: ${style.text};
+      font-style:${style.fontStyle};
+        font-family:${style.fontFamily};
+        font-weight:${style.textWeight};
+        font-size:${style.textSize};
     }
     width: ${widthCalculator(style.margin)};	
     height: ${heightCalculator(style.margin)};	
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index 4c992874a..e89c0e49f 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -11,6 +11,7 @@ import { refMethods } from "comps/generators/withMethodExposing";
 
 const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>`
   width: 100%;
+  font-family:"Montserrat";
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index f30b92c45..c7198c17c 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -38,6 +38,7 @@ export const getStyle = (style: CheckboxStyleType) => {
         .ant-checkbox-inner {
           background-color: ${style.checkedBackground};
           border-color: ${style.checkedBackground};
+          border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
 
           &::after {
             border-color: ${style.checked};
@@ -46,6 +47,7 @@ export const getStyle = (style: CheckboxStyleType) => {
 
         &::after {
           border-color: ${style.checkedBackground};
+          border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
           border-radius: ${style.radius};
         }
       }
@@ -54,15 +56,23 @@ export const getStyle = (style: CheckboxStyleType) => {
         border-radius: ${style.radius};
         background-color: ${style.uncheckedBackground};
         border-color: ${style.uncheckedBorder};
+        border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
       }
 
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input:focus + .ant-checkbox-inner {
         border-color: ${style.checkedBackground};
+        border-width:${!!style.borderWidth ? style.borderWidth : '2px'};
       }
     }
 
+    .ant-checkbox-group-item {
+      font-family:${style.fontFamily};
+      font-size:${style.textSize};
+      font-weight:${style.textWeight};
+      font-style:${style.fontStyle};
+    }
     .ant-checkbox-wrapper {
       padding: ${style.padding};
       .ant-checkbox-inner,
@@ -73,7 +83,7 @@ export const getStyle = (style: CheckboxStyleType) => {
   `;
 };
 
-const CheckboxGroup = styled(AntdCheckboxGroup)<{
+const CheckboxGroup = styled(AntdCheckboxGroup) <{
   $style: CheckboxStyleType;
   $layout: ValueFromOption<typeof RadioLayoutOptions>;
 }>`
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index 494a3b24f..a1ea41fe6 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -21,6 +21,10 @@ const getStyle = (style: RadioStyleType) => {
       padding: ${style.padding};
       span:not(.ant-radio) {
         ${EllipsisTextCss};
+        font-family:${style.fontFamily};
+        font-size:${style.textSize};
+        font-weight:${style.textWeight};
+        font-style:${style.fontStyle};
       }
 
       .ant-radio-checked {
@@ -37,7 +41,7 @@ const getStyle = (style: RadioStyleType) => {
       .ant-radio-inner {
         background-color: ${style.uncheckedBackground};
         border-color: ${style.uncheckedBorder};
-
+        border-width:${style.borderWidth};
         &::after {
           background-color: ${style.checked};
         }
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index ca5a6648b..51c525fd8 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -68,15 +68,22 @@ export const getStyle = (
     &.ant-select .ant-select-selector,
     &.ant-select-multiple .ant-select-selection-item {
       border-radius: ${style.radius};
+      padding: ${style.padding};	
+      height: auto;	
+    }	
+    .ant-select-selection-search {	
       padding: ${style.padding};
-      height: auto;
+    }	
+    .ant-select-selection-search-input {
+      font-family:${(style as SelectStyleType).fontFamily} !important;
+      font-size:${(style as SelectStyleType).textSize} !important;
+      font-weight:${(style as SelectStyleType).textWeight};
+      color:${(style as SelectStyleType).text} !important;
+      font-style:${(style as SelectStyleType).fontStyle};
     }
-    .ant-select-selection-search {
-      padding: ${style.padding};
-    }
-    .ant-select-selector::after,
-    .ant-select-selection-placeholder,
-    .ant-select-selection-item {
+    .ant-select-selector::after,	
+    .ant-select-selection-placeholder,	
+    .ant-select-selection-item {	
       line-height: 1.5715 !important;
     }
 
@@ -96,6 +103,7 @@ export const getStyle = (
       .ant-select-selector {
         background-color: ${style.background};
         border-color: ${style.border};
+        border-width:${(style as SelectStyleType).borderWidth};
       }
 
       &.ant-select-focused,
@@ -109,18 +117,18 @@ export const getStyle = (
       .ant-select-clear {
         background-color: ${style.background};
         color: ${style.text === "#222222"
-          ? "#8B8FA3"
-          : isDarkColor(style.text)
-            ? lightenColor(style.text, 0.2)
-            : style.text};
+      ? "#8B8FA3"
+      : isDarkColor(style.text)
+        ? lightenColor(style.text, 0.2)
+        : style.text};
       }
 
       .ant-select-clear:hover {
         color: ${style.text === "#222222"
-          ? "#8B8FA3"
-          : isDarkColor(style.text)
-            ? lightenColor(style.text, 0.1)
-            : style.text};
+      ? "#8B8FA3"
+      : isDarkColor(style.text)
+        ? lightenColor(style.text, 0.1)
+        : style.text};
       }
 
       &.ant-select-multiple .ant-select-selection-item {
@@ -168,9 +176,7 @@ const getDropdownStyle = (style: MultiSelectStyleType) => {
   `;
 };
 
-const Select = styled(AntdSelect)<{
-  $style: SelectStyleType & MultiSelectStyleType;
-}>`
+const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleType }>`
   width: 100%;
 
   ${(props) => props.$style && getStyle(props.$style)}
@@ -249,8 +255,8 @@ export const SelectUIView = (
     onSearch={
       props.showSearch
         ? (value) => {
-            props.dispatch(changeChildAction("inputValue", value, false));
-          }
+          props.dispatch(changeChildAction("inputValue", value, false));
+        }
         : undefined
     }
   >
@@ -262,6 +268,7 @@ export const SelectUIView = (
           label={option.label}
           disabled={option.disabled}
           key={option.value}
+          style={{fontFamily:"Montserrat"}}
         >
           <Wrapper className="option-label">
             {props.options.findIndex((option) => hasIcon(option.prefixIcon)) >
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx
index e9c5ebaa1..0ca7df941 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx
@@ -23,20 +23,20 @@ type SelectEditProps = {
   options: any[];
 };
 
-const SelectEdit = (
-  props: SelectEditProps,
-) => {
+const defaultProps: any = {}
+const SelectEdit = (props: SelectEditProps) => {
   const [currentValue, setCurrentValue] = useState(props.initialValue);
   return (
-    <SelectUIView 
+    <SelectUIView
+      {...defaultProps}
       value={currentValue}
       options={props.options}
       onChange={(val) => {
         props.onChange(val);
         setCurrentValue(val)
       }}
-      onEvent={async (eventName)=>{
-        if(eventName==="blur"){
+      onEvent={async (eventName) => {
+        if (eventName === "blur") {
           props.onChangeEnd()
         }
         return []
@@ -67,7 +67,8 @@ export const ColumnSelectComp = (function () {
           onChange={props.onChange}
           onChangeEnd={props.onChangeEnd}
         />
-    )})
+      )
+    })
     .setPropertyViewFn((children) => {
       return (
         <>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
index cb19414b9..6a80483c0 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -108,6 +108,7 @@ export const columnChildrenMap = {
   textSize: withDefault(RadiusControl, ""),
   textWeight: withDefault(StringControl, "normal"),
   fontFamily: withDefault(StringControl, "sans-serif"),
+  fontStyle: withDefault(StringControl, 'normal'),
   cellColor: CellColorComp,
   textOverflow: withDefault(TextOverflowControl, "ellipsis"),
   linkColor: withDefault(ColorControl, "#3377ff"),
@@ -155,10 +156,10 @@ export class ColumnComp extends ColumnInitComp {
         )
       );
     }
-    if(action.type === CompActionTypes.CHANGE_VALUE) {
+    if (action.type === CompActionTypes.CHANGE_VALUE) {
       const title = comp.children.title.unevaledValue;
       const dataIndex = comp.children.dataIndex.getView();
-      if(!Boolean(title)) {
+      if (!Boolean(title)) {
         comp.children.title.dispatchChangeValueAction(dataIndex);
       }
     }
@@ -250,10 +251,10 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.autoWidth.getView() === "fixed" &&
           this.children.width.propertyView({ label: trans("prop.width") })}
-        
+
         {(columnType === 'link' || columnType === 'links') && (
           <>
-            <Divider style={{margin: '12px 0'}} />
+            <Divider style={{ margin: '12px 0' }} />
             {controlItem({}, (
               <div>
                 <b>{"Link Style"}</b>
@@ -270,10 +271,10 @@ export class ColumnComp extends ColumnInitComp {
             })}
           </>
         )}
-        <Divider style={{margin: '12px 0'}} />
+        <Divider style={{ margin: '12px 0' }} />
         {controlItem({}, (
           <div>
-             <b>{"Column Style"}</b>
+            <b>{"Column Style"}</b>
           </div>
         ))}
         {this.children.background.propertyView({
@@ -287,29 +288,34 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.borderWidth.propertyView({
           label: trans('style.borderWidth'),
-          preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,	
+          preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
           placeholder: '1px',
         })}
         {this.children.radius.propertyView({
           label: trans('style.borderRadius'),
-          preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,	
+          preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
           placeholder: '3px',
         })}
         {this.children.textSize.propertyView({
           label: trans('style.textSize'),
-          preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,	
+          preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
           placeholder: '14px',
         })}
         {this.children.textWeight.propertyView({
           label: trans('style.textWeight'),
-          preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,	
+          preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,
           placeholder: 'normal',
         })}
         {this.children.fontFamily.propertyView({
           label: trans('style.fontFamily'),
-          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,	
+          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
           placeholder: 'sans-serif',
         })}
+        {this.children.fontStyle.propertyView({
+          label: trans('style.fontStyle'),
+          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
+          placeholder: 'normal'
+        })}
         {this.children.textOverflow.getPropertyView()}
         {this.children.cellColor.getPropertyView()}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index d19586c6b..ed03209ac 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -51,7 +51,7 @@ const getStyle = (
   style: TableStyleType,
   rowStyle: TableRowStyleType,
   headerStyle: TableHeaderStyleType,
-  toolbarStyle: TableToolbarStyleType
+  toolbarStyle: TableToolbarStyleType,
 ) => {
   const background = genLinerGradient(style.background);
   const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
@@ -140,7 +140,8 @@ const BackgroundWrapper = styled.div<{
   background: ${(props) => props.$style.background} !important;
   border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
   border-radius: ${(props) => props.$style.radius} !important;
-  padding: unset !important;
+  // padding: unset !important;
+  padding: ${(props) => props.$style.padding} !important
   margin: ${(props) => props.$style.margin} !important;
   overflow: scroll !important;
   ${(props) => props.$style}
@@ -209,18 +210,19 @@ const TableWrapper = styled.div<{
         > .ant-table-thead {
           > tr > th {
             background-color: ${(props) => props.$headerStyle.headerBackground};
+           
             border-color: ${(props) => props.$headerStyle.border};
             border-width: ${(props) => props.$headerStyle.borderWidth};
             color: ${(props) => props.$headerStyle.headerText};
             border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
-            ${(props) => 
-              props.$fixedHeader && `
+            ${(props) =>
+    props.$fixedHeader && `
                 position: sticky;
                 position: -webkit-sticky;
                 top: ${props.$fixedToolbar ? '47px' : '0'};
                 z-index: 99;
               `
-            }
+  }
 
             > div {
               margin: ${(props) => props.$headerStyle.margin};
@@ -229,6 +231,8 @@ const TableWrapper = styled.div<{
                 font-size: ${(props) => props.$headerStyle.textSize};
                 font-weight: ${(props) => props.$headerStyle.textWeight};
                 font-family: ${(props) => props.$headerStyle.fontFamily};
+                font-style: ${(props) => props.$headerStyle.fontStyle};
+                color:${(props) => props.$headerStyle.text}
               }
             }
 
@@ -286,8 +290,8 @@ const TableWrapper = styled.div<{
 
         // hide the bottom border of the last row
         ${(props) =>
-          props.$toolbarPosition !== "below" &&
-          `
+    props.$toolbarPosition !== "below" &&
+    `
             tbody > tr:last-child > td {
               border-bottom: unset;
             }
@@ -300,10 +304,10 @@ const TableWrapper = styled.div<{
     }
   }
   
-  ${(props) => 
+  ${(props) =>
     props.$style && getStyle(props.$style, props.$rowStyle, props.$headerStyle, props.$toolbarStyle)}
 `;
-  
+
 const TableTh = styled.th<{ width?: number }>`
   overflow: hidden;
 
@@ -318,7 +322,7 @@ const TableTh = styled.th<{ width?: number }>`
 
 const TableTd = styled.td<{
   $background: string;
-  $style: TableColumnStyleType & {rowHeight?: string};
+  $style: TableColumnStyleType & { rowHeight?: string };
   $defaultThemeDetail: ThemeDetail;
   $linkStyle?: TableColumnLinkStyleType;
   $isEditing: boolean;
@@ -348,7 +352,8 @@ const TableTd = styled.td<{
     
     ${(props) => props.$tableSize === 'small' && `
       padding: 1px 8px;
-      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important' };
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important'};
+    font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '14px'};
       line-height: 20px;
       ${!props.$autoHeight && `
@@ -358,7 +363,8 @@ const TableTd = styled.td<{
     `};
     ${(props) => props.$tableSize === 'middle' && `
       padding: 8px 8px;
-      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important' };
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important'};
+      font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '24px'};
       line-height: 24px;
       ${!props.$autoHeight && `
@@ -368,7 +374,8 @@ const TableTd = styled.td<{
     `};
     ${(props) => props.$tableSize === 'large' && `
       padding: 16px 16px;
-      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important' };
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important'};
+      font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '48px'};
       ${!props.$autoHeight && `
         overflow-y: auto;
@@ -444,7 +451,7 @@ const ResizeableTitle = (props: any) => {
       draggableOpts={{ enableUserSelectHack: false }}
       handle={(axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => (
         <TitleResizeHandle
-          ref={ref} 
+          ref={ref}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -519,7 +526,7 @@ function TableCellView(props: {
     const cellColor = cellColorFn({
       currentCell: record[title],
     });
-    
+
     const style = {
       background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
       margin: columnStyle.margin || columnsStyle.margin,
@@ -528,8 +535,9 @@ function TableCellView(props: {
       radius: columnStyle.radius || columnsStyle.radius,
       borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
       textSize: columnStyle.textSize || columnsStyle.textSize,
-      textWeight: columnStyle.textWeight || columnsStyle.textWeight,
-      fontFamily: columnStyle.fontFamily || columnsStyle.fontFamily,
+      textWeight: columnsStyle.textWeight || columnStyle.textWeight,
+      fontFamily: columnsStyle.fontFamily || columnStyle.fontFamily,
+      fontStyle: columnsStyle.fontStyle || columnStyle.fontStyle,
       rowHeight: rowHeight,
     }
     let { background } = style;
@@ -554,7 +562,7 @@ function TableCellView(props: {
       </TableTd>
     );
   }
-
+ 
   return (
     <TableCellContext.Provider value={{ isEditing: editing, setIsEditing: setEditing }}>
       {tdView}
@@ -804,7 +812,7 @@ export function TableCompView(props: {
 
   return (
     <BackgroundColorContext.Provider value={style.background} >
-      
+
       <BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
         {toolbar.position === "above" && toolbarView}
         <TableWrapper
@@ -826,11 +834,11 @@ export function TableCompView(props: {
                 : "OB_CHILDREN_KEY_PLACEHOLDER",
               fixed: "left",
               onExpand: (expanded) => {
-              if(expanded) {
-                handleChangeEvent('rowExpand')
-              } else {
-                handleChangeEvent('rowShrink')
-              }
+                if (expanded) {
+                  handleChangeEvent('rowExpand')
+                } else {
+                  handleChangeEvent('rowShrink')
+                }
               }
             }}
             rowColorFn={compChildren.rowColor.getView() as any}
@@ -857,14 +865,14 @@ export function TableCompView(props: {
               compChildren.loading.getView()
             }
           />
-          
+
           <SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
             {expansion.expandModalView}
           </SlotConfigContext.Provider>
         </TableWrapper>
         {toolbar.position === "below" && toolbarView}
       </BackgroundWrapper>
-      
+
     </BackgroundColorContext.Provider>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index 90f5f0a6c..41a846c19 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -210,7 +210,7 @@ const tableChildrenMap = {
   toolbarStyle: styleControl(TableToolbarStyle),
   headerStyle: styleControl(TableHeaderStyle),
   searchText: StringControl,
-  columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px'}),
+  columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px',fontStyle:'italic'}),
   viewModeResizable: BoolControl,
   visibleResizables: BoolControl,
   // sample data for regenerating columns
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
index f3a74123f..e0306b8f9 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
@@ -332,6 +332,7 @@ export function columnsToAntdFormat(
       status: StatusType;
     }[];
     const title = renderTitle({ title: column.title, editable: column.editable });
+   
     return {
       title: column.showTitle ? title : '',
       titleText: column.title,
@@ -347,6 +348,7 @@ export function columnsToAntdFormat(
         radius: column.radius,
         textSize: column.textSize,
         textWeight: column.textWeight,
+        fontStyle:column.fontStyle,
         fontFamily: column.fontFamily,
         borderWidth: column.borderWidth,
       },
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index aec1f8af1..4dc46d0f6 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -29,6 +29,7 @@ const getStyle = (style: TextStyleType) => {
     font-size: ${style.textSize} !important;
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
+    font-style:${style.fontStyle} !important;
     background-color: ${style.background};
     .markdown-body a {
       color: ${style.links};
@@ -111,7 +112,7 @@ const VerticalAlignmentOptions = [
 ] as const;
 
 
-let TextTmpComp = (function () {  
+let TextTmpComp = (function () {
 
   const childrenMap = {
     text: stringExposingStateControl(
@@ -123,7 +124,7 @@ let TextTmpComp = (function () {
     horizontalAlignment: alignWithJustifyControl(),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
     style: styleControl(TextStyle),
-    margin: MarginControl,	
+    margin: MarginControl,
     padding: PaddingControl,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -145,7 +146,7 @@ let TextTmpComp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
-        
+
           <Section name={sectionNames.basic}>
             {children.type.propertyView({
               label: trans("value"),
@@ -160,7 +161,7 @@ let TextTmpComp = (function () {
               {hiddenPropertyView(children)}
             </Section>
           )}
-        
+
           {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
             <>
               <Section name={sectionNames.layout}>
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index 630f7e376..c760e054b 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -101,7 +101,7 @@ let MentionTmpComp = (function () {
     const [activationFlag, setActivationFlag] = useState(false);
     const [prefix, setPrefix] = useState<PrefixType>("@");
     type PrefixType = "@" | keyof typeof mentionList;
-    
+
     const onSearch = (_: string, newPrefix: PrefixType) => {
       setPrefix(newPrefix);
     };
@@ -192,7 +192,17 @@ let MentionTmpComp = (function () {
                 label: value,
               }))}
               autoSize={props.autoHeight}
-              style={{ height: "100%", maxHeight: "100%", resize: "none", padding: props.style.padding }}
+              style={{
+                height: "100%",
+                maxHeight: "100%",
+                resize: "none",
+                padding: props.style.padding,
+                fontStyle: props.style.fontStyle,
+                fontFamily: props.style.fontFamily,
+                borderWidth: props.style.borderWidth,
+                fontWeight: props.style.textWeight,
+                fontSize: props.style.textSize
+              }}
               readOnly={props.readOnly}
             />
           </ConfigProvider>
@@ -222,12 +232,12 @@ let MentionTmpComp = (function () {
         )}
 
         {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-        <><Section name={sectionNames.interaction}>
+          <><Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {disabledPropertyView(children)}
           </Section>
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-          <Section name={sectionNames.advanced}>
+            <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+            <Section name={sectionNames.advanced}>
               {readOnlyPropertyView(children)}
             </Section><Section name={sectionNames.validation}>
               {requiredPropertyView(children)}
@@ -241,9 +251,9 @@ let MentionTmpComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-        <><Section name={sectionNames.style}>
-              {children.style.getPropertyView()}
-            </Section></>
+          <><Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section></>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
index 66b7e4cdb..69d040151 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -247,6 +247,7 @@ export function getStyle(style: InputLikeStyleType) {
       font-size: ${style.textSize};
       font-weight: ${style.textWeight};
       font-family: ${style.fontFamily};
+      font-style:${style.fontStyle};
       background-color: ${style.background};
       border-color: ${style.border};
 
@@ -293,10 +294,10 @@ export const inputRefMethods = [
 ];
 
 export function checkMentionListData(data: any) {
-  if(data === "") return {}
-  for(const key in data) {
-    check(data[key], ["array"], key,(node)=>{
-      check(node, ["string"], );
+  if (data === "") return {}
+  for (const key in data) {
+    check(data[key], ["array"], key, (node) => {
+      check(node, ["string"],);
       return node
     })
   }
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 669c450e3..7295a9783 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -36,6 +36,7 @@ import {
   TextSizeConfig,
   TextWeightConfig,
   FontFamilyConfig,
+  FontStyleConfig,
   BorderWidthConfig,
   BackgroundImageConfig,
   BackgroundImageRepeatConfig,
@@ -136,13 +137,16 @@ function isTextWeightConfig(config: SingleColorConfig): config is TextWeightConf
 function isFontFamilyConfig(config: SingleColorConfig): config is FontFamilyConfig {
   return config.hasOwnProperty("fontFamily");
 }
+function isFontStyleConfig(config: SingleColorConfig): config is FontStyleConfig {
+  return config.hasOwnProperty("fontStyle");
+}
 
-function isMarginConfig(config: SingleColorConfig): config is MarginConfig {	
-  return config.hasOwnProperty("margin");	
-}	
+function isMarginConfig(config: SingleColorConfig): config is MarginConfig {
+  return config.hasOwnProperty("margin");
+}
 
-function isPaddingConfig(config: SingleColorConfig): config is PaddingConfig {	
-  return config.hasOwnProperty("padding");	
+function isPaddingConfig(config: SingleColorConfig): config is PaddingConfig {
+  return config.hasOwnProperty("padding");
 }
 
 // function styleControl(colorConfig: Array<SingleColorConfig>) {
@@ -215,12 +219,15 @@ function isEmptyTextWeight(textWeight: string) {
 function isEmptyFontFamily(fontFamily: string) {
   return _.isEmpty(fontFamily);
 }
+function isEmptyFontStyle(fontStyle: string) {
+  return _.isEmpty(fontStyle);
+}
 
-function isEmptyMargin(margin: string) {	
-  return _.isEmpty(margin);	
-}	
-function isEmptyPadding(padding: string) {	
-  return _.isEmpty(padding);	
+function isEmptyMargin(margin: string) {
+  return _.isEmpty(margin);
+}
+function isEmptyPadding(padding: string) {
+  return _.isEmpty(padding);
 }
 
 /**
@@ -237,93 +244,97 @@ function calcColors<ColorMap extends Record<string, string>>(
   let res: Record<string, string> = {};
   colorConfigs.forEach((config) => {
     const name = config.name;
-    if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyBorderWidth(props[name]) && isBorderWidthConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyBackgroundImageConfig(props[name]) && isBackgroundImageConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyBackgroundImageRepeatConfig(props[name]) && isBackgroundImageRepeatConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyBackgroundImageSizeConfig(props[name]) && isBackgroundImageSizeConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyBackgroundImagePositionConfig(props[name]) && isBackgroundImagePositionConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyBackgroundImageOriginConfig(props[name]) && isBackgroundImageOriginConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyHeaderBackgroundImageConfig(props[name]) && isHeaderBackgroundImageConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyHeaderBackgroundImageRepeatConfig(props[name]) && isHeaderBackgroundImageRepeatConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyHeaderBackgroundImageSizeConfig(props[name]) && isHeaderBackgroundImageSizeConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyHeaderBackgroundImagePositionConfig(props[name]) && isHeaderBackgroundImagePositionConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyHeaderBackgroundImageOriginConfig(props[name]) && isHeaderBackgroundImageOriginConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyFooterBackgroundImageConfig(props[name]) && isFooterBackgroundImageConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyFooterBackgroundImageRepeatConfig(props[name]) && isFooterBackgroundImageRepeatConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyFooterBackgroundImageSizeConfig(props[name]) && isFooterBackgroundImageSizeConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyFooterBackgroundImagePositionConfig(props[name]) && isFooterBackgroundImagePositionConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyFooterBackgroundImageOriginConfig(props[name]) && isFooterBackgroundImageOriginConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }	
-    if (!isEmptyTextWeight(props[name]) && isTextWeightConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }	
-    if (!isEmptyFontFamily(props[name]) && isFontFamilyConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }
-    if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {	
-      res[name] = props[name];	
-      return;	
-    }	
-    if (!isEmptyPadding(props[name]) && isPaddingConfig(config)) {	
-      res[name] = props[name];	
-      return;	
+    if (!isEmptyRadius(props[name]) && isRadiusConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyBorderWidth(props[name]) && isBorderWidthConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyBackgroundImageConfig(props[name]) && isBackgroundImageConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyBackgroundImageRepeatConfig(props[name]) && isBackgroundImageRepeatConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyBackgroundImageSizeConfig(props[name]) && isBackgroundImageSizeConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyBackgroundImagePositionConfig(props[name]) && isBackgroundImagePositionConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyBackgroundImageOriginConfig(props[name]) && isBackgroundImageOriginConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyHeaderBackgroundImageConfig(props[name]) && isHeaderBackgroundImageConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyHeaderBackgroundImageRepeatConfig(props[name]) && isHeaderBackgroundImageRepeatConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyHeaderBackgroundImageSizeConfig(props[name]) && isHeaderBackgroundImageSizeConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyHeaderBackgroundImagePositionConfig(props[name]) && isHeaderBackgroundImagePositionConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyHeaderBackgroundImageOriginConfig(props[name]) && isHeaderBackgroundImageOriginConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyFooterBackgroundImageConfig(props[name]) && isFooterBackgroundImageConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyFooterBackgroundImageRepeatConfig(props[name]) && isFooterBackgroundImageRepeatConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyFooterBackgroundImageSizeConfig(props[name]) && isFooterBackgroundImageSizeConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyFooterBackgroundImagePositionConfig(props[name]) && isFooterBackgroundImagePositionConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyFooterBackgroundImageOriginConfig(props[name]) && isFooterBackgroundImageOriginConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyTextWeight(props[name]) && isTextWeightConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyFontFamily(props[name]) && isFontFamilyConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyFontStyle(props[name]) && isFontStyleConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyMargin(props[name]) && isMarginConfig(config)) {
+      res[name] = props[name];
+      return;
+    }
+    if (!isEmptyPadding(props[name]) && isPaddingConfig(config)) {
+      res[name] = props[name];
+      return;
     }
     if (!isEmptyColor(props[name])) {
       if (isThemeColorKey(props[name])) {
@@ -398,11 +409,14 @@ function calcColors<ColorMap extends Record<string, string>>(
     if (isFontFamilyConfig(config)) {
       res[name] = themeWithDefault[config.fontFamily] || 'sans-serif';
     }
-    if (isMarginConfig(config)) {	
-      res[name] = themeWithDefault[config.margin];	
-    }	
-    if (isPaddingConfig(config)) {	
-      res[name] = themeWithDefault[config.padding];	
+    if (isFontStyleConfig(config)) {
+      res[name] = themeWithDefault[config.fontStyle] || 'normal'
+    }
+    if (isMarginConfig(config)) {
+      res[name] = themeWithDefault[config.margin];
+    }
+    if (isPaddingConfig(config)) {
+      res[name] = themeWithDefault[config.padding];
     }
   });
   // The second pass calculates dep
@@ -509,7 +523,7 @@ const StyleContent = styled.div`
 
 const RadiusIcon = styled(IconRadius)` margin: 0 8px 0 -2px;`;
 const BorderIcon = styled(BorderWidthIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
-const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px;`;	
+const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px;`;
 const PaddingIcon = styled(CompressIcon)`	margin: 0 8px 0 2px;`;
 const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
 const StyledFontFamilyIcon = styled(FontFamilyIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
@@ -527,13 +541,14 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
   const childrenMap: any = {};
   colorConfigs.map((config) => {
     const name: Names<T> = config.name;
-    if (	
+    if (
       name === "radius" ||
       name === "borderWidth" ||
       name === "cardRadius" ||
-      name === "textSize" || 
+      name === "textSize" ||
       name === "textWeight" ||
       name === "fontFamily" ||
+      name === "fontStyle" ||
       name === "backgroundImage" ||
       name === "backgroundImageRepeat" ||
       name === "backgroundImageSize" ||
@@ -549,15 +564,15 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
       name === "footerBackgroundImageSize" ||
       name === "footerBackgroundImagePosition" ||
       name === "footerBackgroundImageOrigin" ||
-      name === "margin" || 
-      name === "padding" || 
-      name === "containerheaderpadding" || 
-      name === "containerfooterpadding" || 
+      name === "margin" ||
+      name === "padding" ||
+      name === "containerheaderpadding" ||
+      name === "containerfooterpadding" ||
       name === "containerbodypadding"
-    ) {	
-      childrenMap[name] = StringControl;	
-    }  else {	
-      childrenMap[name] = ColorControl;	
+    ) {
+      childrenMap[name] = StringControl;
+    } else {
+      childrenMap[name] = ColorControl;
     }
   });
   // [K in Names<T>]: new (params: CompParams<any>) => ColorControl;
@@ -593,12 +608,12 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                 onClick={() => {
                   colorConfigs.map((item) => {
                     const name: Names<T> = item.name;
-                    if (	
-                      name === "radius" ||	
-                      name === "margin" ||	
+                    if (
+                      name === "radius" ||
+                      name === "margin" ||
                       name === "padding" ||
-                      name === "containerheaderpadding"	||
-                      name === "containerfooterpadding"	||
+                      name === "containerheaderpadding" ||
+                      name === "containerfooterpadding" ||
                       name === "containerbodypadding" ||
                       name === "borderWidth" ||
                       name === "backgroundImage" ||
@@ -653,115 +668,123 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                 }
                 return controlItem(
                   { filterText: config.label },
-                  <div key={index}>	
+                  <div key={index}>
                     {(name === "radius" ||
-                    name === "gap" ||	
-                    name === "cardRadius")
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <RadiusIcon title="Radius" />,	
-                          placeholder: props[name],	
-                        })
-                        : name === "borderWidth"
-                        ? (	
-                            children[name] as InstanceType<typeof StringControl>	
-                          ).propertyView({	
-                            label: config.label,	
-                            preInputNode: <BorderIcon title="Border-Width" />,	
-                            placeholder: props[name],	
-                          })
-                      : name === "margin"	
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <MarginIcon title="Margin" />,	
-                          placeholder: props[name],	
-                        })	
-                      : (name === "padding" ||
-                      name === "containerheaderpadding"	||
-                      name === "containerfooterpadding"	||
-                      name === "containerbodypadding")
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <PaddingIcon title="Padding" />,	
-                          placeholder: props[name],	
-                        })	
-                      : name === "textSize"
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <StyledTextSizeIcon title="Font Size" />,	
-                          placeholder: props[name],	
-                        })
-                      : name === "textWeight"
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <StyledTextWeightIcon title="Font Weight" />,	
-                          placeholder: props[name],	
-                        })
-                      : name === "fontFamily"
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
+                      name === "gap" ||
+                      name === "cardRadius")
+                      ? (
+                        children[name] as InstanceType<typeof StringControl>
+                      ).propertyView({
+                        label: config.label,
+                        preInputNode: <RadiusIcon title="Radius" />,
+                        placeholder: props[name],
+                      })
+                      : name === "borderWidth"
+                        ? (
+                          children[name] as InstanceType<typeof StringControl>
+                        ).propertyView({
                           label: config.label,
-                          preInputNode: <StyledFontFamilyIcon title="Font Family" />,	
-                          placeholder: props[name],	
-                        })
-                      : name === "backgroundImage" || name === "headerBackgroundImage" || name === "footerBackgroundImage"
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <StyledBackgroundImageIcon title="Background Image" />,	
-                          placeholder: props[name],	
-                        })
-                      : name === "backgroundImageRepeat" || name === "headerBackgroundImageRepeat" || name === "footerBackgroundImageRepeat"
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <StyledBackgroundImageIcon title="Background Image Repeat" />,	
-                          placeholder: props[name],	
-                        })
-                      : name === "backgroundImageSize" || name === "headerBackgroundImageSize" || name === "footerBackgroundImageSize"
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <StyledBackgroundImageIcon title="Background Image Size" />,	
-                          placeholder: props[name],	
+                          preInputNode: <BorderIcon title="Border-Width" />,
+                          placeholder: props[name],
                         })
-                      : name === "backgroundImagePosition" || name === "headerBackgroundImagePosition" || name === "footerBackgroundImagePosition"
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <StyledBackgroundImageIcon title="Background Image Position" />,	
-                          placeholder: props[name],	
-                        })
-                      : name === "backgroundImageOrigin" || name === "headerBackgroundImageOrigin" || name === "footerBackgroundImageOrigin"
-                      ? (	
-                          children[name] as InstanceType<typeof StringControl>	
-                        ).propertyView({	
-                          label: config.label,	
-                          preInputNode: <StyledBackgroundImageIcon title="Background Image Origin" />,	
-                          placeholder: props[name],	
-                        })
-                      : children[name].propertyView({	
-                          label: config.label,	
-                          panelDefaultColor: props[name],	
-                          // isDep: isDepColorConfig(config),	
-                          isDep: true,	
-                          depMsg: depMsg,	
-                        })}	
+                        : name === "margin"
+                          ? (
+                            children[name] as InstanceType<typeof StringControl>
+                          ).propertyView({
+                            label: config.label,
+                            preInputNode: <MarginIcon title="Margin" />,
+                            placeholder: props[name],
+                          })
+                          : (name === "padding" ||
+                            name === "containerheaderpadding" ||
+                            name === "containerfooterpadding" ||
+                            name === "containerbodypadding")
+                            ? (
+                              children[name] as InstanceType<typeof StringControl>
+                            ).propertyView({
+                              label: config.label,
+                              preInputNode: <PaddingIcon title="Padding" />,
+                              placeholder: props[name],
+                            })
+                            : name === "textSize"
+                              ? (
+                                children[name] as InstanceType<typeof StringControl>
+                              ).propertyView({
+                                label: config.label,
+                                preInputNode: <StyledTextSizeIcon title="Font Size" />,
+                                placeholder: props[name],
+                              })
+                              : name === "textWeight"
+                                ? (
+                                  children[name] as InstanceType<typeof StringControl>
+                                ).propertyView({
+                                  label: config.label,
+                                  preInputNode: <StyledTextWeightIcon title="Font Weight" />,
+                                  placeholder: props[name],
+                                })
+                                : name === "fontFamily"
+                                  ? (
+                                    children[name] as InstanceType<typeof StringControl>
+                                  ).propertyView({
+                                    label: config.label,
+                                    preInputNode: <StyledFontFamilyIcon title="Font Family" />,
+                                    placeholder: props[name],
+                                  })
+                                  : name === "fontStyle"
+                                    ? (
+                                      children[name] as InstanceType<typeof StringControl>
+                                    ).propertyView({
+                                      label: config.label,
+                                      preInputNode: <StyledFontFamilyIcon title="Font Style" />,
+                                      placeholder: props[name],
+                                    })
+                                    : name === "backgroundImage" || name === "headerBackgroundImage" || name === "footerBackgroundImage"
+                                      ? (
+                                        children[name] as InstanceType<typeof StringControl>
+                                      ).propertyView({
+                                        label: config.label,
+                                        preInputNode: <StyledBackgroundImageIcon title="Background Image" />,
+                                        placeholder: props[name],
+                                      })
+                                      : name === "backgroundImageRepeat" || name === "headerBackgroundImageRepeat" || name === "footerBackgroundImageRepeat"
+                                        ? (
+                                          children[name] as InstanceType<typeof StringControl>
+                                        ).propertyView({
+                                          label: config.label,
+                                          preInputNode: <StyledBackgroundImageIcon title="Background Image Repeat" />,
+                                          placeholder: props[name],
+                                        })
+                                        : name === "backgroundImageSize" || name === "headerBackgroundImageSize" || name === "footerBackgroundImageSize"
+                                          ? (
+                                            children[name] as InstanceType<typeof StringControl>
+                                          ).propertyView({
+                                            label: config.label,
+                                            preInputNode: <StyledBackgroundImageIcon title="Background Image Size" />,
+                                            placeholder: props[name],
+                                          })
+                                          : name === "backgroundImagePosition" || name === "headerBackgroundImagePosition" || name === "footerBackgroundImagePosition"
+                                            ? (
+                                              children[name] as InstanceType<typeof StringControl>
+                                            ).propertyView({
+                                              label: config.label,
+                                              preInputNode: <StyledBackgroundImageIcon title="Background Image Position" />,
+                                              placeholder: props[name],
+                                            })
+                                            : name === "backgroundImageOrigin" || name === "headerBackgroundImageOrigin" || name === "footerBackgroundImageOrigin"
+                                              ? (
+                                                children[name] as InstanceType<typeof StringControl>
+                                              ).propertyView({
+                                                label: config.label,
+                                                preInputNode: <StyledBackgroundImageIcon title="Background Image Origin" />,
+                                                placeholder: props[name],
+                                              })
+                                              : children[name].propertyView({
+                                                label: config.label,
+                                                panelDefaultColor: props[name],
+                                                // isDep: isDepColorConfig(config),	
+                                                isDep: true,
+                                                depMsg: depMsg,
+                                              })}
                   </div>
                 );
               })}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 11f4e012d..8b81237e4 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1,7 +1,7 @@
 import { ThemeDetail } from "api/commonSettingApi";
 import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design";
 import { trans } from "i18n";
-import { StyleConfigType } from "./styleControl"; 
+import { StyleConfigType } from "./styleControl";
 
 type SupportPlatform = "pc" | "mobile";
 
@@ -23,21 +23,21 @@ export type BorderWidthConfig = CommonColorConfig & {
 
 export type BackgroundImageConfig = CommonColorConfig & { readonly backgroundImage: string; };
 export type BackgroundImageRepeatConfig = CommonColorConfig & { readonly backgroundImageRepeat: string; };
-export type BackgroundImageSizeConfig = CommonColorConfig & { readonly backgroundImageSize: string;};
+export type BackgroundImageSizeConfig = CommonColorConfig & { readonly backgroundImageSize: string; };
 export type BackgroundImagePositionConfig = CommonColorConfig & { readonly backgroundImagePosition: string; };
-export type BackgroundImageOriginConfig = CommonColorConfig & { readonly backgroundImageOrigin: string;};
+export type BackgroundImageOriginConfig = CommonColorConfig & { readonly backgroundImageOrigin: string; };
 
 export type HeaderBackgroundImageConfig = CommonColorConfig & { readonly headerBackgroundImage: string; };
 export type HeaderBackgroundImageRepeatConfig = CommonColorConfig & { readonly headerBackgroundImageRepeat: string; };
-export type HeaderBackgroundImageSizeConfig = CommonColorConfig & { readonly headerBackgroundImageSize: string;};
+export type HeaderBackgroundImageSizeConfig = CommonColorConfig & { readonly headerBackgroundImageSize: string; };
 export type HeaderBackgroundImagePositionConfig = CommonColorConfig & { readonly headerBackgroundImagePosition: string; };
-export type HeaderBackgroundImageOriginConfig = CommonColorConfig & { readonly headerBackgroundImageOrigin: string;};
+export type HeaderBackgroundImageOriginConfig = CommonColorConfig & { readonly headerBackgroundImageOrigin: string; };
 
 export type FooterBackgroundImageConfig = CommonColorConfig & { readonly footerBackgroundImage: string; };
 export type FooterBackgroundImageRepeatConfig = CommonColorConfig & { readonly footerBackgroundImageRepeat: string; };
-export type FooterBackgroundImageSizeConfig = CommonColorConfig & { readonly footerBackgroundImageSize: string;};
+export type FooterBackgroundImageSizeConfig = CommonColorConfig & { readonly footerBackgroundImageSize: string; };
 export type FooterBackgroundImagePositionConfig = CommonColorConfig & { readonly footerBackgroundImagePosition: string; };
-export type FooterBackgroundImageOriginConfig = CommonColorConfig & { readonly footerBackgroundImageOrigin: string;};
+export type FooterBackgroundImageOriginConfig = CommonColorConfig & { readonly footerBackgroundImageOrigin: string; };
 
 export type TextSizeConfig = CommonColorConfig & {
   readonly textSize: string;
@@ -51,6 +51,10 @@ export type FontFamilyConfig = CommonColorConfig & {
   readonly fontFamily: string;
 };
 
+export type FontStyleConfig = CommonColorConfig & {
+  readonly fontStyle: string;
+}
+
 export type ContainerHeaderPaddigConfig = CommonColorConfig & {
   readonly containerheaderpadding: string;
 };
@@ -63,11 +67,11 @@ export type ContainerFooterPaddigConfig = CommonColorConfig & {
   readonly containerfooterpadding: string;
 };
 
-export type MarginConfig = CommonColorConfig & {	
-  readonly margin: string;	
-};	
-export type PaddingConfig = CommonColorConfig & {	
-  readonly padding: string;	
+export type MarginConfig = CommonColorConfig & {
+  readonly margin: string;
+};
+export type PaddingConfig = CommonColorConfig & {
+  readonly padding: string;
 };
 
 export type DepColorConfig = CommonColorConfig & {
@@ -76,7 +80,7 @@ export type DepColorConfig = CommonColorConfig & {
   readonly depType?: DEP_TYPE;
   transformer: (color: string, ...rest: string[]) => string;
 };
-export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | FontFamilyConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig;
+export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig;
 
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
@@ -85,7 +89,7 @@ export const defaultTheme: ThemeDetail = {
   canvas: "#F5F5F6",
   primarySurface: "#FFFFFF",
   borderRadius: "4px",
-  margin: "3px",	
+  margin: "3px",
   padding: "3px",
   gridColumns: "24",
   textSize: "14px",
@@ -322,61 +326,67 @@ const BACKGROUND_IMAGE_ORIGIN = {
   backgroundImageOrigin: "backgroundImageOrigin",
 } as const;
 
-const MARGIN = {	
-  name: "margin",	
-  label: trans("style.margin"),	
-  margin: "margin",	
-} as const;	
+const MARGIN = {
+  name: "margin",
+  label: trans("style.margin"),
+  margin: "margin",
+} as const;
 
-const PADDING = {	
-  name: "padding",	
-  label: trans("style.padding"),	
-  padding: "padding",	
+const PADDING = {
+  name: "padding",
+  label: trans("style.padding"),
+  padding: "padding",
 } as const;
 
-const TEXT_SIZE = {	
+const TEXT_SIZE = {
   name: "textSize",
-  label: trans("style.textSize"),	
-  textSize: "textSize",	
+  label: trans("style.textSize"),
+  textSize: "textSize",
 } as const;
 
-const TEXT_WEIGHT = {	
+const TEXT_WEIGHT = {
   name: "textWeight",
-  label: trans("style.textWeight"),	
-  textWeight: "textWeight",	
+  label: trans("style.textWeight"),
+  textWeight: "textWeight",
 } as const;
 
-const FONT_FAMILY = {	
+const FONT_FAMILY = {
   name: "fontFamily",
-  label: trans("style.fontFamily"),	
-  fontFamily: "fontFamily",	
+  label: trans("style.fontFamily"),
+  fontFamily: "fontFamily",
 } as const;
 
-const CONTAINERHEADERPADDING = {	
-  name: "containerheaderpadding",	
-  label: trans("style.containerheaderpadding"),	
-  containerheaderpadding: "padding",	
+const FONT_STYLE = {
+  name: "fontStyle",
+  label: trans("style.fontStyle"),
+  fontStyle: "fontStyle",
+} as const
+
+const CONTAINERHEADERPADDING = {
+  name: "containerheaderpadding",
+  label: trans("style.containerheaderpadding"),
+  containerheaderpadding: "padding",
 } as const;
 
-const CONTAINERFOOTERPADDING = {	
-  name: "containerfooterpadding",	
-  label: trans("style.containerfooterpadding"),	
-  containerfooterpadding: "padding",	
+const CONTAINERFOOTERPADDING = {
+  name: "containerfooterpadding",
+  label: trans("style.containerfooterpadding"),
+  containerfooterpadding: "padding",
 } as const;
 
 
-const CONTAINERBODYPADDING = {	
-  name: "containerbodypadding",	
-  label: trans("style.containerbodypadding"),	
-  containerbodypadding: "padding",	
+const CONTAINERBODYPADDING = {
+  name: "containerbodypadding",
+  label: trans("style.containerbodypadding"),
+  containerbodypadding: "padding",
 } as const;
 
 const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) =>
-  ({
-    name: "border",
-    label: trans("style.border"),
-    color,
-  } as const);
+({
+  name: "border",
+  label: trans("style.border"),
+  color,
+} as const);
 
 const HEADER_BACKGROUND = {
   name: "headerBackground",
@@ -387,6 +397,18 @@ const HEADER_BACKGROUND = {
 } as const;
 
 const BG_STATIC_BORDER_RADIUS = [getBackground(), getStaticBorder(), RADIUS] as const;
+const STYLING_FIELDS_SEQUENCE = [
+  TEXT,
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  FONT_FAMILY,
+  FONT_STYLE,
+  BORDER,
+  MARGIN,
+  PADDING,
+  RADIUS,
+  BORDER_WIDTH,
+]
 
 const FILL = {
   name: "fill",
@@ -438,34 +460,41 @@ function getStaticBackground(color: string) {
   } as const;
 }
 
+
+function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: string, replacingStyles: any[]): any[] {
+  let temp = []
+  let foundIndex = originalArray.findIndex((element) => element.name === styleToReplace)
+
+  if (foundIndex !== -1) {
+    let elementsBeforeFoundIndex = originalArray.filter((item, index) => index < foundIndex)
+    let elementsAfterFoundIndex = originalArray.filter((item, index) => index > foundIndex)
+    temp = [...elementsBeforeFoundIndex, ...replacingStyles, ...elementsAfterFoundIndex]
+  } else
+    temp = [...originalArray]
+
+  return temp
+}
+
 export const ButtonStyle = [
-  ...getBgBorderRadiusByBg("primary"), 
-  BORDER_WIDTH,
-  TEXT, 
-  TEXT_SIZE,
-  TEXT_WEIGHT,
-  FONT_FAMILY,
-  MARGIN, 
-  PADDING
+  // ...getBgBorderRadiusByBg("primary"),
+  getBackground('primary'),
+  ...STYLING_FIELDS_SEQUENCE
 ] as const;
 
 export const ToggleButtonStyle = [
   getBackground("canvas"),
-  {
-    name: "border",
-    label: trans("style.border"),
-    depName: "text",
-    depType: DEP_TYPE.SELF,
-    transformer: toSelf,
-  },
-  RADIUS,
-  BORDER_WIDTH,
-  TEXT,
-  TEXT_SIZE,
-  TEXT_WEIGHT,
-  FONT_FAMILY,
-  MARGIN,	
-  PADDING,
+  ...STYLING_FIELDS_SEQUENCE.map((style) => {
+    if (style.name === 'border') {
+      return {
+        ...style,
+        depType: DEP_TYPE.SELF,
+        transformer: toSelf
+      }
+    }
+    return {
+      ...style
+    }
+  })
 ] as const;
 
 export const TextStyle = [
@@ -476,13 +505,7 @@ export const TextStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  TEXT,
-  TEXT_SIZE,
-  TEXT_WEIGHT,
-  FONT_FAMILY,
-  BORDER,
-  MARGIN,	
-  PADDING,
+  ...STYLING_FIELDS_SEQUENCE,
   {
     name: "links",
     label: trans("style.links"),
@@ -490,17 +513,15 @@ export const TextStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  RADIUS,
-  BORDER_WIDTH
 ] as const;
 
-export const MarginStyle = [	
-  {	
-    name: "margin",	
-    label: trans("style.margin"),	
-    margin: "margin",	
-  },	
-];	
+export const MarginStyle = [
+  {
+    name: "margin",
+    label: trans("style.margin"),
+    margin: "margin",
+  },
+];
 
 
 export const ContainerStyle = [
@@ -509,7 +530,7 @@ export const ContainerStyle = [
   getBackground(),
   RADIUS,
   BORDER_WIDTH,
-  MARGIN,	
+  MARGIN,
   PADDING,
   {
     name: "backgroundImage",
@@ -561,7 +582,7 @@ export const ContainerHeaderStyle = [
     label: trans("style.backgroundImagePosition"),
     headerBackgroundImagePosition: "headerBackgroundImagePosition",
   }
-  ,{
+  , {
     name: "headerBackgroundImageOrigin",
     label: trans("style.backgroundImageOrigin"),
     headerBackgroundImageOrigin: "headerBackgroundImageOrigin",
@@ -633,7 +654,7 @@ export const ContainerFooterStyle = [
     label: trans("style.backgroundImagePosition"),
     footerBackgroundImagePosition: "footerBackgroundImagePosition",
   }
-  ,{
+  , {
     name: "footerBackgroundImageOrigin",
     label: trans("style.backgroundImageOrigin"),
     footerBackgroundImageOrigin: "footerBackgroundImageOrigin",
@@ -656,20 +677,14 @@ export const SliderStyle = [
     color: SURFACE_COLOR,
   },
   TRACK,
-  MARGIN,	
+  MARGIN,
   PADDING,
 ] as const;
 
 export const InputLikeStyle = [
   LABEL,
-  ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
-  BORDER_WIDTH,
-  TEXT,
-  TEXT_SIZE,
-  TEXT_WEIGHT,
-  FONT_FAMILY,
-  MARGIN,	
-  PADDING,
+  getStaticBackground(SURFACE_COLOR),
+  ...STYLING_FIELDS_SEQUENCE,
   ...ACCENT_VALIDATE,
 ] as const;
 
@@ -685,7 +700,7 @@ export const RatingStyle = [
     label: trans("style.unchecked"),
     color: SECOND_SURFACE_COLOR,
   },
-  MARGIN,	
+  MARGIN,
   PADDING,
 ] as const;
 
@@ -709,25 +724,28 @@ export const SwitchStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  MARGIN,	
+  MARGIN,
   PADDING,
 ] as const;
 
 export const SelectStyle = [
-  LABEL,
-  ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
-  TEXT,
-  MARGIN,	
-  PADDING,
+  // LABEL,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
+
+  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
+  // TEXT,
+  // MARGIN,
+  // PADDING,
   ...ACCENT_VALIDATE,
 ] as const;
 
 const multiSelectCommon = [
-  LABEL,
-  ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
-  TEXT,
-  MARGIN,	
-  PADDING,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
+  // LABEL,
+  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
+  // TEXT,
+  // MARGIN,
+  // PADDING,
   {
     name: "tags",
     label: trans("style.tags"),
@@ -778,7 +796,7 @@ export const TabContainerStyle = [
 export const ModalStyle = [
   ...getBgBorderRadiusByBg(),
   BORDER_WIDTH,
-  MARGIN,	
+  MARGIN,
   PADDING,
   BACKGROUND_IMAGE,
   BACKGROUND_IMAGE_REPEAT,
@@ -792,7 +810,7 @@ export const CascaderStyle = [
   ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
   TEXT,
   ACCENT,
-  MARGIN,	
+  MARGIN,
   PADDING,
 ] as const;
 
@@ -820,7 +838,8 @@ function checkAndUncheck() {
 }
 
 export const CheckboxStyle = [
-  LABEL,
+  // LABEL,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'),
   ...checkAndUncheck(),
   {
     name: "checked",
@@ -829,15 +848,16 @@ export const CheckboxStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
-  RADIUS,
-  STATIC_TEXT,
-  VALIDATE,
-  MARGIN,	
-  PADDING,
+  // RADIUS,
+  // STATIC_TEXT,
+  // VALIDATE,
+  // MARGIN,
+  // PADDING,
 ] as const;
 
 export const RadioStyle = [
-  LABEL,
+  // LABEL,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'),
   ...checkAndUncheck(),
   {
     name: "checked",
@@ -846,10 +866,10 @@ export const RadioStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  STATIC_TEXT,
-  VALIDATE,
-  MARGIN,	
-  PADDING,
+  // STATIC_TEXT,
+  // VALIDATE,
+  // MARGIN,
+  // PADDING,
 ] as const;
 
 export const SegmentStyle = [
@@ -874,7 +894,7 @@ export const SegmentStyle = [
   },
   RADIUS,
   VALIDATE,
-  MARGIN,	
+  MARGIN,
   PADDING,
 ] as const;
 
@@ -902,6 +922,7 @@ const LinkTextStyle = [
 
 export const TableStyle = [
   MARGIN,
+  PADDING,
   ...BG_STATIC_BORDER_RADIUS,
   {
     name: "borderWidth",
@@ -925,6 +946,10 @@ export const TableToolbarStyle = [
 
 export const TableHeaderStyle = [
   MARGIN,
+  PADDING,
+  FONT_FAMILY,
+  FONT_STYLE,
+  TEXT,
   {
     name: "headerBackground",
     label: trans("style.tableHeaderBackground"),
@@ -982,20 +1007,26 @@ export const TableColumnStyle = [
   TEXT,
   TEXT_SIZE,
   TEXT_WEIGHT,
-  FONT_FAMILY
+  FONT_FAMILY,
+  FONT_STYLE,
 ] as const;
 
 export const TableColumnLinkStyle = [
   ...LinkTextStyle,
 ] as const;
 
-export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;
+export const FileStyle = [
+  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), 
+  getStaticBackground(SURFACE_COLOR),
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [getStaticBorder('#00000000')]),
+  // TEXT, ACCENT, MARGIN, PADDING
+] as const;
 
 export const FileViewerStyle = [
   getStaticBackground("#FFFFFF"),
   getStaticBorder("#00000000"),
   RADIUS,
-  MARGIN,	
+  MARGIN,
   PADDING,
   BORDER_WIDTH
 ] as const;
@@ -1006,7 +1037,7 @@ export const DateTimeStyle = [
   LABEL,
   ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
   TEXT,
-  MARGIN,	
+  MARGIN,
   PADDING,
   ...ACCENT_VALIDATE,
 ] as const;
@@ -1020,10 +1051,15 @@ function handleToHoverLink(color: string) {
 }
 
 export const LinkStyle = [
-  ...LinkTextStyle,
-  MARGIN,	
-  PADDING,
-  TEXT_SIZE
+
+  {
+    name: "background",
+    label: trans("style.background"),
+    depTheme: "canvas",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [...LinkTextStyle])
 ] as const;
 
 export const DividerStyle = [
@@ -1032,48 +1068,64 @@ export const DividerStyle = [
     label: trans("color"),
     color: lightenColor(SECOND_SURFACE_COLOR, 0.05),
   },
-  BORDER_WIDTH,
-  MARGIN,	
-  PADDING,
-  {
-    name: "text",
-    label: trans("text"),
-    depName: "color",
-    transformer: handleToDividerText,
-  },
-  TEXT_SIZE,
-  TEXT_WEIGHT,
-  FONT_FAMILY
+  ...STYLING_FIELDS_SEQUENCE.map((style) => {
+    if (style.name === 'text') {
+      return {
+        name: "text",
+        label: trans("text"),
+        depName: "color",
+        transformer: handleToDividerText,
+      }
+    }
+    return style
+  })
 ] as const;
 
+// Hidden border and borderWidth properties as AntD doesnt allow these properties for progress bar
 export const ProgressStyle = [
-  {
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [{
     name: "text",
     label: trans("text"),
     depTheme: "canvas",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
-  },
+  }]).filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
   TRACK,
   FILL,
   SUCCESS,
-  MARGIN,	
-  PADDING,
 ] as const;
 
+export const CircleProgressStyle = [...ProgressStyle.filter((style) => style.name !== 'radius')]
+
 export const NavigationStyle = [
-  {
-    name: "text",
-    label: trans("text"),
-    depName: "background",
-    depType: DEP_TYPE.CONTRAST_TEXT,
-    transformer: contrastText,
-  },
-  ACCENT,
-  getStaticBackground("#FFFFFF00"),
-  getStaticBorder("#FFFFFF00"),
-  MARGIN,	
-  PADDING,
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [
+    {
+      name: "text",
+      label: trans("text"),
+      depName: "background",
+      depType: DEP_TYPE.CONTRAST_TEXT,
+      transformer: contrastText,
+    },
+    ACCENT,
+    getStaticBackground("#FFFFFF00")
+  ])
+  // {
+  //   name: "text",
+  //   label: trans("text"),
+  //   depName: "background",
+  //   depType: DEP_TYPE.CONTRAST_TEXT,
+  //   transformer: contrastText,
+  // },
+  // ACCENT,
+  // getStaticBackground("#FFFFFF00"),
+  // getStaticBorder("#FFFFFF00"),
+  // MARGIN,
+  // PADDING,
+  // FONT_FAMILY,
+  // FONT_STYLE,
+  // TEXT_WEIGHT,
+  // TEXT_SIZE,
+  // BORDER_WIDTH
 ] as const;
 
 export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;
@@ -1099,7 +1151,7 @@ export const QRCodeStyle = [
     label: trans("color"),
     color: "#000000",
   },
-  MARGIN,	
+  MARGIN,
   PADDING,
   BORDER,
   RADIUS,
@@ -1123,7 +1175,7 @@ export const TimeLineStyle = [
     label: trans("timeLine.subTitleColor"),
     color: "#848484",
   },
-  MARGIN,	
+  MARGIN,
   PADDING,
   RADIUS
 ] as const;
@@ -1203,7 +1255,7 @@ export const SignatureStyle = [
     label: trans("style.footerIcon"),
     color: "#222222",
   },
-  MARGIN,	
+  MARGIN,
   PADDING,
   BORDER_WIDTH
 ] as const;
@@ -1217,7 +1269,7 @@ export const LottieStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  MARGIN,	
+  MARGIN,
   PADDING,
 ] as const;
 /////////////////////
@@ -1229,19 +1281,19 @@ export const CommentStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  MARGIN,	
+  MARGIN,
   PADDING,
   RADIUS,
 ] as const
 export const ResponsiveLayoutRowStyle = [
   ...BG_STATIC_BORDER_RADIUS,
-  MARGIN,	
+  MARGIN,
   PADDING,
 ] as const;
 
 export const ResponsiveLayoutColStyle = [
   ...BG_STATIC_BORDER_RADIUS,
-  MARGIN,	
+  MARGIN,
   PADDING,
 ] as const;
 
@@ -1301,9 +1353,9 @@ export const NavLayoutItemActiveStyle = [
 export const CarouselStyle = [getBackground("canvas")] as const;
 
 export const RichTextEditorStyle = [
-  getStaticBorder(), 
-  getBackground("primarySurface"), 
-  RADIUS, 
+  getStaticBorder(),
+  getBackground("primarySurface"),
+  RADIUS,
   BORDER_WIDTH
 ] as const;
 
@@ -1339,6 +1391,7 @@ export type DateTimeStyleType = StyleConfigType<typeof DateTimeStyle>;
 export type LinkStyleType = StyleConfigType<typeof LinkStyle>;
 export type DividerStyleType = StyleConfigType<typeof DividerStyle>;
 export type ProgressStyleType = StyleConfigType<typeof ProgressStyle>;
+export type CircleProgressType = StyleConfigType<typeof CircleProgressStyle>;
 export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
 export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
 export type IconStyleType = StyleConfigType<typeof IconStyle>;
@@ -1359,43 +1412,36 @@ export type NavLayoutItemHoverStyleType = StyleConfigType<typeof NavLayoutItemHo
 export type NavLayoutItemActiveStyleType = StyleConfigType<typeof NavLayoutItemActiveStyle>;
 
 export function widthCalculator(margin: string) {
-  const marginArr = margin?.trim().replace(/\s+/g,' ').split(" ") || "";
+  const marginArr = margin?.trim().replace(/\s+/g, ' ').split(" ") || "";
   if (marginArr.length === 1) {
-    return `calc(100% - ${
-      parseInt(margin.replace(/[^\d.]/g, "")) * 2 + 
+    return `calc(100% - ${parseInt(margin.replace(/[^\d.]/g, "")) * 2 +
       (margin.replace(/[0-9]/g, "") || "px")
-    })`;
+      })`;
   } else if (marginArr.length === 2 || marginArr.length === 3) {
-    return `calc(100% - ${
-      parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 +
+    return `calc(100% - ${parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 +
       (marginArr[1].replace(/[0-9]/g, "") || 'px')
-    })`;
+      })`;
   } else {
-    return `calc(100% - ${
-      parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") +
+    return `calc(100% - ${parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") +
       (marginArr[1]?.replace(/[0-9]/g, "") || "px")
-    } - ${
-      parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") +
+      } - ${parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") +
       (marginArr[3]?.replace(/[0-9]/g, "") || "px")
-    })`;
+      })`;
   }
 }
 
 export function heightCalculator(margin: string) {
   const marginArr = margin?.trim().split(" ") || "";
   if (marginArr.length === 1 || marginArr.length === 2) {
-    return `calc(100% - ${
-      parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 + 
+    return `calc(100% - ${parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 +
       (marginArr[0].replace(/[0-9]/g, "") || 'px')
-    })`;
-  }else if(marginArr.length >2){
-    return `calc(100% - ${
-      parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") +
+      })`;
+  } else if (marginArr.length > 2) {
+    return `calc(100% - ${parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") +
       (marginArr[0]?.replace(/[0-9]/g, "") || "px")
-    } - ${
-      parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") +
+      } - ${parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") +
       (marginArr[2]?.replace(/[0-9]/g, "") || "px")
-    })`;
+      })`;
   }
 }
 
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index bbe46953f..22cdf522b 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -367,6 +367,7 @@ export const en = {
     "textSize": "Text Size",
     "textWeight": "Text Weight",
     "fontFamily": "Font Family",
+    "fontStyle":"Font Style",
     "backgroundImage": "BG Image",
     "backgroundImageRepeat": "BG Repeat",
     "backgroundImageSize": "BG Size",