diff --git a/src/renderer/src/components/Layout/index.ts b/src/renderer/src/components/Layout/index.ts
index 78534814..644704c9 100644
--- a/src/renderer/src/components/Layout/index.ts
+++ b/src/renderer/src/components/Layout/index.ts
@@ -22,7 +22,7 @@ export interface BoxProps {
   opacity?: string | number
   borderRadius?: PxValue
   border?: string
-  gap?: PxValue
+  $gap?: PxValue
   mt?: PxValue
   marginTop?: PxValue
   mb?: PxValue
@@ -46,9 +46,9 @@ export interface BoxProps {
 }
 
 export interface StackProps extends BoxProps {
-  justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between'
-  alignItems?: 'center' | 'flex-start' | 'flex-end' | 'space-between'
-  flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
+  $justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between'
+  $alignItems?: 'center' | 'flex-start' | 'flex-end' | 'space-between'
+  $flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
 }
 
 export interface ButtonProps extends StackProps {
@@ -90,12 +90,11 @@ export const Box = styled.div<BoxProps>`
   right: ${(props) => getElementValue(props.right) || 'auto'};
   bottom: ${(props) => getElementValue(props.bottom) || 'auto'};
   top: ${(props) => getElementValue(props.top) || 'auto'};
-  gap: ${(p) => (p.gap ? getElementValue(p.gap) : 0)};
+  gap: ${(p) => (p.$gap ? getElementValue(p.$gap) : 0)};
   opacity: ${(props) => props.opacity ?? 1};
   border-radius: ${(props) => getElementValue(props.borderRadius) || 0};
   box-sizing: border-box;
   border: ${(props) => props?.border || 'none'};
-  gap: ${(p) => (p.gap ? getElementValue(p.gap) : 0)};
   margin: ${(props) => (props.m || props.margin ? (props.m ?? props.margin) : 'none')};
   margin-top: ${(props) =>
     props.mt || props.marginTop ? getElementValue(props.mt || props.marginTop) : 'default'};
@@ -118,9 +117,9 @@ export const Box = styled.div<BoxProps>`
 
 export const Stack = styled(Box)<StackProps>`
   display: flex;
-  justify-content: ${(props) => props.justifyContent ?? 'flex-start'};
-  align-items: ${(props) => props.alignItems ?? 'flex-start'};
-  flex-direction: ${(props) => props.flexDirection ?? 'row'};
+  justify-content: ${(props) => props.$justifyContent ?? 'flex-start'};
+  align-items: ${(props) => props.$alignItems ?? 'flex-start'};
+  flex-direction: ${(props) => props.$flexDirection ?? 'row'};
 `
 
 export const Center = styled(Stack)<StackProps>`
diff --git a/src/renderer/src/pages/settings/AboutSettings.tsx b/src/renderer/src/pages/settings/AboutSettings.tsx
index 17646cb0..1c3140fa 100644
--- a/src/renderer/src/pages/settings/AboutSettings.tsx
+++ b/src/renderer/src/pages/settings/AboutSettings.tsx
@@ -193,7 +193,7 @@ const AboutSettings: FC = () => {
       <SettingGroup theme={theme}>
         <SettingTitle>
           {t('settings.about.title')}
-          <HStack alignItems="center">
+          <HStack $alignItems="center">
             <Link to={APP_REPOSITORY}>
               <GithubOutlined
                 style={{ marginRight: 4, color: 'var(--color-text)', fontSize: 20 }}
diff --git a/src/renderer/src/pages/settings/AppearanceSettings.tsx b/src/renderer/src/pages/settings/AppearanceSettings.tsx
index 30ce5386..0563612b 100644
--- a/src/renderer/src/pages/settings/AppearanceSettings.tsx
+++ b/src/renderer/src/pages/settings/AppearanceSettings.tsx
@@ -27,7 +27,7 @@ const ColorCircleWrapper = styled.div`
   justify-content: center;
 `
 
-const ColorCircle = styled.div<{ color: string; isActive?: boolean }>`
+const ColorCircle = styled.div<{ color: string; $isActive?: boolean }>`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -37,7 +37,7 @@ const ColorCircle = styled.div<{ color: string; isActive?: boolean }>`
   background-color: ${(props) => props.color};
   cursor: pointer;
   transform: translate(-50%, -50%);
-  border: 2px solid ${(props) => (props.isActive ? 'var(--color-border)' : 'transparent')};
+  border: 2px solid ${(props) => (props.$isActive ? 'var(--color-border)' : 'transparent')};
   transition: opacity 0.2s;
 
   &:hover {
@@ -169,13 +169,13 @@ export function AppearanceSettings(): React.JSX.Element {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.theme.color_primary')}</SettingRowTitle>
-          <HStack gap="12px" alignItems="center">
-            <HStack gap="12px">
+          <HStack $gap="12px" $alignItems="center">
+            <HStack $gap="12px">
               {THEME_COLOR_PRESETS.map((color) => (
                 <ColorCircleWrapper key={color}>
                   <ColorCircle
                     color={color}
-                    isActive={colorPrimary === color}
+                    $isActive={colorPrimary === color}
                     onClick={() => handleColorPrimaryChange(color)}
                   />
                 </ColorCircleWrapper>
diff --git a/src/renderer/src/pages/settings/ShortcutSettings.tsx b/src/renderer/src/pages/settings/ShortcutSettings.tsx
index 3d368306..d2e5f7f9 100644
--- a/src/renderer/src/pages/settings/ShortcutSettings.tsx
+++ b/src/renderer/src/pages/settings/ShortcutSettings.tsx
@@ -330,7 +330,7 @@ const ShortcutSettings: FC = () => {
               alignItems: 'center'
             }}
           >
-            <HStack alignItems="center" style={{ position: 'relative' }}>
+            <HStack $alignItems="center" style={{ position: 'relative' }}>
               {isEditing ? (
                 <ShortcutInput
                   ref={(el) => {
@@ -417,7 +417,7 @@ const ShortcutSettings: FC = () => {
           showHeader={false}
         />
         <SettingDivider style={{ marginBottom: 0 }} />
-        <HStack justifyContent="flex-end" padding="16px 0">
+        <HStack $justifyContent="flex-end" padding="16px 0">
           <Button onClick={handleResetAllShortcuts}>
             {t('settings.shortcuts.reset_defaults')}
           </Button>