diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index e770014f7..8ebcd250c 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -24,6 +24,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         font-weight: ${buttonStyle.textWeight};
         font-family: ${buttonStyle.fontFamily};
         font-style: ${buttonStyle.fontStyle};
+        text-transform:${buttonStyle.textTransform};
+        text-decoration:${buttonStyle.textDecoration};
         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 0f83804f7..3a00a887d 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -25,8 +25,10 @@ import {
 
 const StyledDropdownButton = styled(DropdownButton)`
   width: 100%;
+  
   .ant-btn-group {
     width: 100%;
+   
   }
 `;
 
@@ -34,6 +36,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
   width: calc(100%);
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-right: 0;
+  .ant-btn span {
+    ${(props) => `text-decoration: ${props.$buttonStyle.textDecoration};`}
+    ${(props) => `font-family: ${props.$buttonStyle.fontFamily};`}
+  }
+  
   .ant-btn {
     ${(props) => getButtonStyle(props.$buttonStyle)}
     margin: 0 !important;
@@ -41,14 +48,18 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
     &.ant-btn-default {
       margin: 0 !important;
       ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
+      ${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
+      ${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}
     }
     ${(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%;
   }
+  
 `;
 
 const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index cbd5b26b2..274a29e13 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -34,6 +34,8 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
     font-weight:${props.$style.textWeight};
     border: ${props.$style.borderWidth} solid ${props.$style.border};
     border-radius:${props.$style.radius ? props.$style.radius:'0px'};
+    text-transform:${props.$style.textTransform ? props.$style.textTransform:''};
+    text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important;
     background-color: ${props.$style.background};
     &:hover {
       color: ${props.$style.hoverText} !important;
diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
index 032807de2..906db77c3 100644
--- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -30,6 +30,8 @@ const StyledDivider = styled(Divider) <IProps>`
     font-size: ${(props) => props.$style.textSize};
     font-weight: ${(props) => props.$style.textWeight};
     font-family: ${(props) => props.$style.fontFamily};
+    text-transform:${(props)=>props.$style.textTransform};
+    text-decoration:${(props)=>props.$style.textDecoration};
     font-style:${(props) => props.$style.fontStyle}
   }
   min-width: 0;	
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
index 44b782b47..25882da30 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -52,6 +52,8 @@ const Item = styled.div<{
   $textSize: string;
   $margin: string;
   $padding: string;
+  $textTransform:string;
+  $textDecoration:string;
 }>`
   height: 30px;
   line-height: 30px;
@@ -61,6 +63,8 @@ const Item = styled.div<{
   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')};
+  text-transform:${(props) => (props.$textTransform ? props.$textTransform : '')};
+  text-decoration:${(props) => (props.$textDecoration ? props.$textDecoration : '')};
   margin:${(props) => props.$margin ? props.$margin : '0px'};
   
   &:hover {
@@ -161,6 +165,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             $textWeight={props.style.textWeight}
             $textSize={props.style.textSize}
             $padding={props.style.padding}
+            $textTransform={props.style.textTransform}
+            $textDecoration={props.style.textDecoration}
             $margin={props.style.margin}
             onClick={() => onEvent("click")}
           >
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index c7198c17c..f8b154e42 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -51,13 +51,25 @@ export const getStyle = (style: CheckboxStyleType) => {
           border-radius: ${style.radius};
         }
       }
-
+      
       .ant-checkbox-inner {
         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 + ant-checkbox-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground :'#fff'};
+      }
+
+      &:hover .ant-checkbox-checked .ant-checkbox-inner, 
+      .ant-checkbox:hover .ant-checkbox-inner,
+      .ant-checkbox-input + ant-checkbox-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+      }
 
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
@@ -67,11 +79,15 @@ export const getStyle = (style: CheckboxStyleType) => {
       }
     }
 
+    
+
     .ant-checkbox-group-item {
       font-family:${style.fontFamily};
       font-size:${style.textSize};
       font-weight:${style.textWeight};
       font-style:${style.fontStyle};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
     }
     .ant-checkbox-wrapper {
       padding: ${style.padding};
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index a1ea41fe6..11bfceed0 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -25,6 +25,8 @@ const getStyle = (style: RadioStyleType) => {
         font-size:${style.textSize};
         font-weight:${style.textWeight};
         font-style:${style.fontStyle};
+        text-transform:${style.textTransform};
+        text-decoration:${style.textDecoration};
       }
 
       .ant-radio-checked {
@@ -47,6 +49,12 @@ const getStyle = (style: RadioStyleType) => {
         }
       }
 
+      &:hover .ant-radio-inner, 
+      .ant-radio:hover .ant-radio-inner,
+      .ant-radio-input + ant-radio-inner {
+        background-color:${style.hoverBackground ? style.hoverBackground:'#ffff'};
+      }
+
       &:hover .ant-radio-inner,
       .ant-radio:hover .ant-radio-inner,
       .ant-radio-input:focus + .ant-radio-inner {
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index 156c83799..73a7d4675 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -52,6 +52,14 @@ const getStyle = (style: SegmentStyleType) => {
     .ant-segmented-item-selected {
       border-radius: ${style.radius};
     }
+    &.ant-segmented, .ant-segmented-item-label {
+      font-family:${style.fontFamily};
+      font-style:${style.fontStyle};
+      font-size:${style.textSize};
+      font-weight:${style.textWeight};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
+    }
   `;
 };
 
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 51c525fd8..1eac631ac 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -76,6 +76,8 @@ export const getStyle = (
     }	
     .ant-select-selection-search-input {
       font-family:${(style as SelectStyleType).fontFamily} !important;
+      text-transform:${(style as SelectStyleType).textTransform} !important;
+      text-decoration:${(style as SelectStyleType).textDecoration} !important;
       font-size:${(style as SelectStyleType).textSize} !important;
       font-weight:${(style as SelectStyleType).textWeight};
       color:${(style as SelectStyleType).text} !important;
@@ -268,7 +270,6 @@ 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/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 06a5ad955..1bdc2ea4e 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -111,6 +111,14 @@ const getStyle = (
           }
         }
 
+        .ant-tabs-tab-btn {
+          font-family:${style.fontFamily};
+          font-weight:${style.textWeight};
+          text-transform:${style.textTransform};
+          text-decoration:${style.textDecoration};
+          font-style:${style.fontStyle};
+        }
+
         .ant-tabs-ink-bar {
           background-color: ${style.accent};
         }
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 4dc46d0f6..fd9ce1f18 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -30,6 +30,8 @@ const getStyle = (style: TextStyleType) => {
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
     font-style:${style.fontStyle} !important;
+    text-transform:${style.textTransform} !important;
+    text-decoration:${style.textDecoration} !important;
     background-color: ${style.background};
     .markdown-body a {
       color: ${style.links};
@@ -146,7 +148,6 @@ let TextTmpComp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
-
           <Section name={sectionNames.basic}>
             {children.type.propertyView({
               label: trans("value"),
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index c760e054b..51815260f 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -58,7 +58,14 @@ import { EditorContext } from "comps/editorState";
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
 }>`
-  height: 100%;
+  box-sizing:border-box;
+  .rc-textarea {
+    background-color:${(props) => props.$style.background};
+    padding:${(props) => props.$style.padding};
+    text-transform:${(props)=>props.$style.textTransform};
+    text-decoration:${(props)=>props.$style.textDecoration};
+    margin: 0px 3px 0px 3px !important;
+  }
 
   .ant-input-clear-icon {
     opacity: 0.45;
@@ -196,7 +203,7 @@ let MentionTmpComp = (function () {
                 height: "100%",
                 maxHeight: "100%",
                 resize: "none",
-                padding: props.style.padding,
+                // padding: props.style.padding,
                 fontStyle: props.style.fontStyle,
                 fontFamily: props.style.fontFamily,
                 borderWidth: props.style.borderWidth,
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
index 69d040151..1d01266af 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -248,6 +248,8 @@ export function getStyle(style: InputLikeStyleType) {
       font-weight: ${style.textWeight};
       font-family: ${style.fontFamily};
       font-style:${style.fontStyle};
+      text-transform:${style.textTransform};
+      text-decoration:${style.textDecoration};
       background-color: ${style.background};
       border-color: ${style.border};
 
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 7295a9783..109801a97 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -547,6 +547,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
       name === "cardRadius" ||
       name === "textSize" ||
       name === "textWeight" ||
+      name === "textTransform" ||
+      name === "textDecoration" ||
       name === "fontFamily" ||
       name === "fontStyle" ||
       name === "backgroundImage" ||
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 8b81237e4..51c88abd7 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -74,13 +74,21 @@ export type PaddingConfig = CommonColorConfig & {
   readonly padding: string;
 };
 
+export type TextTransformConfig = CommonColorConfig & {
+  readonly textTransform: string;
+}
+
+export type TextDecorationConfig = CommonColorConfig & {
+  readonly textDecoration: string;
+}
+
 export type DepColorConfig = CommonColorConfig & {
   readonly depName?: string;
   readonly depTheme?: keyof ThemeDetail;
   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 | FontStyleConfig | 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 | TextTransformConfig | TextDecorationConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig;
 
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
@@ -350,6 +358,12 @@ const TEXT_WEIGHT = {
   textWeight: "textWeight",
 } as const;
 
+const HOVER_BACKGROUND_COLOR = {
+  name: "hoverBackground",
+  label: trans("style.hoverBackground"),
+  hoverBackground: "hoverBackground"
+}
+
 const FONT_FAMILY = {
   name: "fontFamily",
   label: trans("style.fontFamily"),
@@ -381,6 +395,18 @@ const CONTAINERBODYPADDING = {
   containerbodypadding: "padding",
 } as const;
 
+const TEXT_TRANSFORM = {
+  name: "textTransform",
+  label: trans("style.textTransform"),
+  textTransform: "textTransform"
+}
+
+const TEXT_DECORATION = {
+  name: "textDecoration",
+  label: trans("style.textDecoration"),
+  textDecoration: "textDecoration"
+}
+
 const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) =>
 ({
   name: "border",
@@ -399,6 +425,8 @@ const HEADER_BACKGROUND = {
 const BG_STATIC_BORDER_RADIUS = [getBackground(), getStaticBorder(), RADIUS] as const;
 const STYLING_FIELDS_SEQUENCE = [
   TEXT,
+  TEXT_TRANSFORM,
+  TEXT_DECORATION,
   TEXT_SIZE,
   TEXT_WEIGHT,
   FONT_FAMILY,
@@ -476,7 +504,6 @@ function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: str
 }
 
 export const ButtonStyle = [
-  // ...getBgBorderRadiusByBg("primary"),
   getBackground('primary'),
   ...STYLING_FIELDS_SEQUENCE
 ] as const;
@@ -527,6 +554,7 @@ export const MarginStyle = [
 export const ContainerStyle = [
   // ...BG_STATIC_BORDER_RADIUS,
   getStaticBorder(),
+  // ...STYLING_FIELDS_SEQUENCE.filter((style) => style.name !== 'border'),
   getBackground(),
   RADIUS,
   BORDER_WIDTH,
@@ -729,23 +757,12 @@ export const SwitchStyle = [
 ] as const;
 
 export const SelectStyle = [
-  // LABEL,
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
-
-  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
-  // TEXT,
-  // MARGIN,
-  // PADDING,
   ...ACCENT_VALIDATE,
 ] as const;
 
 const multiSelectCommon = [
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]),
-  // LABEL,
-  // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
-  // TEXT,
-  // MARGIN,
-  // PADDING,
   {
     name: "tags",
     label: trans("style.tags"),
@@ -776,13 +793,14 @@ export const MultiSelectStyle = [
 ] as const;
 
 export const TabContainerStyle = [
-  {
+  // Keep background related properties of container as STYLING_FIELDS_SEQUENCE has rest of the properties
+  ...replaceAndMergeMultipleStyles([...ContainerStyle.filter((style)=> ['border','radius','borderWidth','margin','padding'].includes(style.name) === false),...STYLING_FIELDS_SEQUENCE], 'text', [{
     name: "tabText",
     label: trans("style.tabText"),
     depName: "headerBackground",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
-  },
+  },]),
   {
     name: "accent",
     label: trans("style.tabAccent"),
@@ -790,7 +808,6 @@ export const TabContainerStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  ...ContainerStyle,
 ] as const;
 
 export const ModalStyle = [
@@ -838,7 +855,6 @@ function checkAndUncheck() {
 }
 
 export const CheckboxStyle = [
-  // LABEL,
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'),
   ...checkAndUncheck(),
   {
@@ -848,15 +864,10 @@ export const CheckboxStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
-  // RADIUS,
-  // STATIC_TEXT,
-  // VALIDATE,
-  // MARGIN,
-  // PADDING,
+  HOVER_BACKGROUND_COLOR
 ] as const;
 
 export const RadioStyle = [
-  // LABEL,
   ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'),
   ...checkAndUncheck(),
   {
@@ -866,14 +877,12 @@ export const RadioStyle = [
     depType: DEP_TYPE.SELF,
     transformer: toSelf,
   },
-  // STATIC_TEXT,
-  // VALIDATE,
-  // MARGIN,
-  // PADDING,
+  HOVER_BACKGROUND_COLOR
 ] as const;
 
 export const SegmentStyle = [
   LABEL,
+  ...STYLING_FIELDS_SEQUENCE.filter((style)=> ['border','borderWidth'].includes(style.name) === false),
   {
     name: "indicatorBackground",
     label: trans("style.indicatorBackground"),
@@ -892,10 +901,7 @@ export const SegmentStyle = [
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
   },
-  RADIUS,
   VALIDATE,
-  MARGIN,
-  PADDING,
 ] as const;
 
 const LinkTextStyle = [
@@ -1089,7 +1095,7 @@ export const ProgressStyle = [
     depTheme: "canvas",
     depType: DEP_TYPE.CONTRAST_TEXT,
     transformer: contrastText,
-  }]).filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
+  }]).filter((style) => ['border', 'borderWidth', 'textTransform', 'textDecoration'].includes(style.name) === false),
   TRACK,
   FILL,
   SUCCESS,
diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts
index cc41a8d1e..a6bcf9f00 100644
--- a/client/packages/lowcoder/src/i18n/locales/de.ts
+++ b/client/packages/lowcoder/src/i18n/locales/de.ts
@@ -324,6 +324,9 @@ export const de = {
       "tableCellText": "Zelle Text",
       "selectedRowBackground": "Ausgewählter Zeilenhintergrund",
       "hoverRowBackground": "Hover Row Hintergrund",
+      "hoverBackground":"Hover-Hintergrund",
+      "textTransform":"Texttransformation",
+      "textDecoration":"Textdekoration",
       "alternateRowBackground": "Alternativer Reihenhintergrund",
       "tableHeaderBackground": "Kopfzeile Hintergrund",
       "tableHeaderText": "Überschrift Text",
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 9e71926f0..7e97eaad9 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -345,6 +345,9 @@ export const en = {
     "tableCellText": "Cell Text",
     "selectedRowBackground": "Selected Row Background",
     "hoverRowBackground": "Hover Row Background",
+    "hoverBackground":"Hover Background",
+    "textTransform":"Text Transform",
+    "textDecoration":"Text Decoration",
     "alternateRowBackground": "Alternate Row Background",
     "tableHeaderBackground": "Header Background",
     "tableHeaderText": "Header Text",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
index 12821ebf6..e50500fb4 100644
--- a/client/packages/lowcoder/src/i18n/locales/zh.ts
+++ b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -334,6 +334,9 @@ style: {
     tableCellText: "单元格文本",
     selectedRowBackground: "选中行背景",
     hoverRowBackground: "悬停行背景",
+    hoverBackground:"悬停背景",
+    textTransform:"文本变换",
+    textDecoration:"文字装饰",
     alternateRowBackground: "交替行背景",
     tableHeaderBackground: "表头背景",
     tableHeaderText: "表头文本",