diff --git a/components/src/components/molecules/Checkbox/Checkbox.tsx b/components/src/components/molecules/Checkbox/Checkbox.tsx
index 7186f4ce..46ccddbf 100644
--- a/components/src/components/molecules/Checkbox/Checkbox.tsx
+++ b/components/src/components/molecules/Checkbox/Checkbox.tsx
@@ -73,8 +73,8 @@ const InputBox = React.forwardRef<HTMLElement, BoxProps & { $colorStyle: ColorSt
       <Box
         as="input"
         backgroundColor={{
-          base: '$border',
-          disabled: '$border',
+          base: 'border',
+          disabled: 'border',
           checked: getValueForColorStyle($colorStyle, 'background'),
         }}
         borderRadius="small"
diff --git a/components/src/components/molecules/Input/Input.tsx b/components/src/components/molecules/Input/Input.tsx
index b1e90c2f..f1a02f03 100644
--- a/components/src/components/molecules/Input/Input.tsx
+++ b/components/src/components/molecules/Input/Input.tsx
@@ -146,7 +146,7 @@ const Label = ({
     {...props}
     alignItems="center"
     as="label"
-    backgroundColor={$disabled ? '$border' : 'greySurface'}
+    backgroundColor={$disabled ? 'border' : 'greySurface'}
     color="greyPrimary"
     cursor={$disabled ? 'not-allowed' : 'pointer'}
     display="flex"
diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx
index 4181cfd7..f70aabf5 100644
--- a/components/src/components/molecules/Profile/Profile.tsx
+++ b/components/src/components/molecules/Profile/Profile.tsx
@@ -54,7 +54,7 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
   ({ $size, $hasDropdown, $open, ...props }, ref) => (
     <Box
       alignItems="center"
-      backgroundColor={$open ? '$border' : 'backgroundPrimary'}
+      backgroundColor={$open ? 'border' : 'backgroundPrimary'}
       borderRadius="full"
       cursor={$hasDropdown ? 'pointer' : 'unset'}
       display="flex"
diff --git a/components/src/components/molecules/Toggle/Toggle.tsx b/components/src/components/molecules/Toggle/Toggle.tsx
index 296c8a61..d95a204d 100644
--- a/components/src/components/molecules/Toggle/Toggle.tsx
+++ b/components/src/components/molecules/Toggle/Toggle.tsx
@@ -23,9 +23,9 @@ const CheckBox = React.forwardRef<
     alignItems="center"
     as="input"
     backgroundColor={{
-      base: '$border',
+      base: 'border',
       checked: getValidatedColor($color),
-      disabled: '$border',
+      disabled: 'border',
     }}
     borderRadius="full"
     cursor={{ base: 'pointer', disabled: 'not-allowed' }}