diff --git a/apps/storefront/src/components/B3ProductList.tsx b/apps/storefront/src/components/B3ProductList.tsx
index 3e66c54d..bc3a163e 100644
--- a/apps/storefront/src/components/B3ProductList.tsx
+++ b/apps/storefront/src/components/B3ProductList.tsx
@@ -141,6 +141,7 @@ interface ProductProps <T> {
   totalText?: string,
   canToProduct?: boolean,
   textAlign?: string,
+  customColor?: string,
 }
 
 export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props) => {
@@ -158,6 +159,7 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
     totalText = 'Total',
     canToProduct = false,
     textAlign = 'left',
+    customColor = '',
   } = props
 
   const [list, setList] = useState<ProductItem[]>([])
@@ -379,6 +381,9 @@ export const B3ProductList: <T>(props: ProductProps<T>) => ReactElement = (props
                           marginLeft: '0',
                           marginRight: '0',
                         },
+                        '& .MuiFilledInput-root:after': {
+                          borderBottom: `2px solid ${customColor || '#1976d2'}`,
+                        },
                       }}
                       error={!!product.helperText}
                       helperText={product.helperText}
diff --git a/apps/storefront/src/components/button/CustomButton.tsx b/apps/storefront/src/components/button/CustomButton.tsx
index 61213d26..49859f5e 100644
--- a/apps/storefront/src/components/button/CustomButton.tsx
+++ b/apps/storefront/src/components/button/CustomButton.tsx
@@ -33,7 +33,9 @@ const CustomButton = ({
   const {
     state: {
       globalButtonBackgroundColor,
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
@@ -41,10 +43,6 @@ const CustomButton = ({
     variant,
   } = rest
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   return (
     <>
       {
@@ -55,10 +53,6 @@ const CustomButton = ({
               ...sx || {},
               backgroundColor: primaryColor || globalButtonBackgroundColor,
               color: getContrastColor(primaryColor) || getContrastColor(globalButtonBackgroundColor),
-              '&:hover': {
-                backgroundColor: primaryColor || globalButtonBackgroundColor,
-                color: getContrastColor(primaryColor) || getContrastColor(globalButtonBackgroundColor),
-              },
             }}
             onClick={onClick}
           >
@@ -71,10 +65,6 @@ const CustomButton = ({
               ...sx || {},
               color: primaryColor || globalButtonBackgroundColor,
               borderColor: primaryColor,
-              '&:hover': {
-                color: primaryColor || globalButtonBackgroundColor,
-                borderColor: primaryColor,
-              },
             }}
             onClick={onClick}
           >
diff --git a/apps/storefront/src/components/form/B3ControlCheckbox.tsx b/apps/storefront/src/components/form/B3ControlCheckbox.tsx
index 51a92cb0..1cda12f4 100644
--- a/apps/storefront/src/components/form/B3ControlCheckbox.tsx
+++ b/apps/storefront/src/components/form/B3ControlCheckbox.tsx
@@ -12,8 +12,17 @@ import {
 import {
   useB3Lang,
 } from '@b3/lang'
+
+import {
+  useContext,
+} from 'react'
+
 import Form from './ui'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface CheckboxListProps {
   value: string,
   label: string,
@@ -36,6 +45,14 @@ export const B3ControlCheckbox = ({
     options,
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
 
   const fieldsProps = {
@@ -67,7 +84,13 @@ export const B3ControlCheckbox = ({
     <>
       {
         ['checkbox'].includes(fieldType) && (
-          <FormControl>
+          <FormControl
+            sx={{
+              '& .MuiFormLabel-root.Mui-focused': {
+                color: primaryColor,
+              },
+            }}
+          >
             {
               label && (
               <FormLabel
@@ -95,6 +118,11 @@ export const B3ControlCheckbox = ({
                     )}
                   key={list.value}
                   label={list.label}
+                  sx={{
+                    '& .MuiCheckbox-root.Mui-checked': {
+                      color: primaryColor,
+                    },
+                  }}
                 />
               ))}
             />
diff --git a/apps/storefront/src/components/form/B3ControlRadioGroup.tsx b/apps/storefront/src/components/form/B3ControlRadioGroup.tsx
index d3e7d420..7c562227 100644
--- a/apps/storefront/src/components/form/B3ControlRadioGroup.tsx
+++ b/apps/storefront/src/components/form/B3ControlRadioGroup.tsx
@@ -13,8 +13,16 @@ import {
   useB3Lang,
 } from '@b3/lang'
 
+import {
+  useContext,
+} from 'react'
+
 import Form from './ui'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 export const B3ControlRadioGroup = ({
   control,
   errors,
@@ -30,6 +38,14 @@ export const B3ControlRadioGroup = ({
     options,
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
 
   const fieldsProps = {
@@ -50,7 +66,13 @@ export const B3ControlRadioGroup = ({
     <>
       {
         ['radio'].includes(fieldType) && (
-          <FormControl>
+          <FormControl
+            sx={{
+              '& .MuiFormLabel-root.Mui-focused': {
+                color: primaryColor,
+              },
+            }}
+          >
             {
               label && (
               <FormLabel
@@ -79,6 +101,11 @@ export const B3ControlRadioGroup = ({
                           control={(
                             <Radio />
                           )}
+                          sx={{
+                            '& .MuiRadio-root.Mui-checked': {
+                              color: primaryColor,
+                            },
+                          }}
                         />
                       ))
                     )
diff --git a/apps/storefront/src/components/form/B3ControlRectangle.tsx b/apps/storefront/src/components/form/B3ControlRectangle.tsx
index 934c8110..f24c09f4 100644
--- a/apps/storefront/src/components/form/B3ControlRectangle.tsx
+++ b/apps/storefront/src/components/form/B3ControlRectangle.tsx
@@ -14,12 +14,20 @@ import {
   useB3Lang,
 } from '@b3/lang'
 
+import {
+  useContext,
+} from 'react'
+
 import Form from './ui'
 
 import {
   StyleRectangleFormControlLabel,
 } from './styled'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 export const B3ControlRectangle = ({
   control,
   errors,
@@ -36,6 +44,14 @@ export const B3ControlRectangle = ({
     labelStyle = {},
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor: customColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
   const theme = useTheme()
 
@@ -59,7 +75,13 @@ export const B3ControlRectangle = ({
     <>
       {
         ['rectangle'].includes(fieldType) && (
-          <FormControl>
+          <FormControl
+            sx={{
+              '& .MuiFormLabel-root.Mui-focused': {
+                color: customColor,
+              },
+            }}
+          >
             {
               label && (
               <FormLabel
@@ -93,9 +115,12 @@ export const B3ControlRectangle = ({
                             label={option.label}
                             key={option.value}
                             sx={{
-                              border: isActive ? `1px solid ${primaryColor}` : '1px solid #767676',
-                              boxShadow: isActive ? `0 0 0 1px ${primaryColor}` : 'none',
+                              border: isActive ? `1px solid ${customColor || primaryColor}` : '1px solid #767676',
+                              boxShadow: isActive ? `0 0 0 1px ${customColor || primaryColor}` : 'none',
                               ...labelStyle,
+                              '& .MuiRadio-root.Mui-checked': {
+                                color: customColor || primaryColor,
+                              },
                             }}
                             control={(
                               <Radio />
diff --git a/apps/storefront/src/components/form/B3ControlSelect.tsx b/apps/storefront/src/components/form/B3ControlSelect.tsx
index eab0e692..8582bec5 100644
--- a/apps/storefront/src/components/form/B3ControlSelect.tsx
+++ b/apps/storefront/src/components/form/B3ControlSelect.tsx
@@ -1,5 +1,5 @@
 import {
-  ChangeEvent,
+  ChangeEvent, useContext,
 } from 'react'
 
 import {
@@ -18,6 +18,10 @@ import {
 
 import Form from './ui'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 export const B3ControlSelect = ({
   control,
   errors,
@@ -38,6 +42,14 @@ export const B3ControlSelect = ({
     size = 'small',
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
 
   const muiAttributeProps = muiSelectProps || {}
@@ -75,6 +87,14 @@ export const B3ControlSelect = ({
             width: '100%',
             color: muiSelectProps?.disabled ? 'rgba(0, 0, 0, 0.38)' : 'rgba(0, 0, 0, 0.6)',
           }}
+          sx={{
+            '& .MuiInputLabel-root.Mui-focused': {
+              color: primaryColor,
+            },
+            '& .MuiFilledInput-root:after': {
+              borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+            },
+          }}
         >
           {
             label && (
diff --git a/apps/storefront/src/components/form/B3ControlTextField.tsx b/apps/storefront/src/components/form/B3ControlTextField.tsx
index 1bfec927..6b25e880 100644
--- a/apps/storefront/src/components/form/B3ControlTextField.tsx
+++ b/apps/storefront/src/components/form/B3ControlTextField.tsx
@@ -11,11 +11,15 @@ import {
 import {
   KeyboardEvent,
   WheelEvent,
+  useContext,
 } from 'react'
 import Form from './ui'
 import {
   StyleNumberTextField,
 } from './styled'
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
 
 export const B3ControlTextField = ({
   control,
@@ -44,6 +48,14 @@ export const B3ControlTextField = ({
     allowArrow = false,
   } = rest
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const b3Lang = useB3Lang()
 
   let requiredText = ''
@@ -142,6 +154,12 @@ export const B3ControlTextField = ({
                       {...rest}
                       sx={{
                         color: disabled ? 'rgba(0, 0, 0, 0.38)' : 'rgba(0, 0, 0, 0.6)',
+                        '& label.Mui-focused': {
+                          color: primaryColor,
+                        },
+                        '& .MuiFilledInput-root:after': {
+                          borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+                        },
                       }}
                       allowarrow={allowArrow ? 1 : 0}
                       inputProps={muiAttributeProps}
@@ -157,6 +175,12 @@ export const B3ControlTextField = ({
                       {...rest}
                       sx={{
                         color: disabled ? 'rgba(0, 0, 0, 0.38)' : 'rgba(0, 0, 0, 0.6)',
+                        '& label.Mui-focused': {
+                          color: primaryColor,
+                        },
+                        '& .MuiFilledInput-root:after': {
+                          borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+                        },
                       }}
                       inputProps={muiAttributeProps}
                       error={!!errors[name]}
diff --git a/apps/storefront/src/components/layout/B3Nav.tsx b/apps/storefront/src/components/layout/B3Nav.tsx
index 6da53e18..f390625b 100644
--- a/apps/storefront/src/components/layout/B3Nav.tsx
+++ b/apps/storefront/src/components/layout/B3Nav.tsx
@@ -67,14 +67,12 @@ export const B3Nav = ({
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const jumpRegister = () => {
     navigate('/registered')
     dispatch({
diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
index 76c42889..5c874ea8 100644
--- a/apps/storefront/src/components/table/B3Table.tsx
+++ b/apps/storefront/src/components/table/B3Table.tsx
@@ -16,12 +16,17 @@ import {
   ChangeEvent,
   MouseEvent,
   ReactElement,
+  useContext,
 } from 'react'
 
 import {
   B3NoData,
 } from './B3NoData'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 export interface Pagination {
   offset: number,
   first: number,
@@ -118,6 +123,14 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
   } = pagination
   const clickableRowStyles = typeof onClickRow === 'function' ? MOUSE_POINTER_STYLE : undefined
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const handlePaginationChange = (pagination: Pagination) => {
     if (!isLoading) {
       onPaginationChange(pagination)
@@ -152,6 +165,9 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                 sx={{
                   display: 'flex',
                   alignItems: 'center',
+                  '& .MuiCheckbox-root.Mui-checked': {
+                    color: primaryColor,
+                  },
                 }}
               >
                 <Checkbox
@@ -166,6 +182,11 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
             <Grid
               container
               spacing={itemIsMobileSpacing}
+              sx={{
+                '& .MuiCheckbox-root.Mui-checked': {
+                  color: primaryColor,
+                },
+              }}
             >
               {
                 listItems.map((row, index) => {
@@ -177,6 +198,11 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                         if (handleSelectOneItem) handleSelectOneItem(node[selectedSymbol])
                       }}
                       disabled={disableCheckbox}
+                      sx={{
+                        '& .MuiCheckbox-root.Mui-checked': {
+                          color: primaryColor,
+                        },
+                      }}
                     />
                   )
                   return (
@@ -273,6 +299,11 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                       showCheckbox && (
                         <TableCell
                           key="showCheckbox"
+                          sx={{
+                            '& .MuiCheckbox-root.Mui-checked': {
+                              color: primaryColor,
+                            },
+                          }}
                         >
                           <Checkbox
                             checked={selectCheckbox.length === listItems.length}
@@ -320,6 +351,9 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                             key={`showItemCheckbox-${node.id}`}
                             sx={{
                               borderBottom: showBorder ? '1px solid rgba(224, 224, 224, 1)' : lastItemBorderBottom,
+                              '& .MuiCheckbox-root.Mui-checked': {
+                                color: primaryColor,
+                              },
                             }}
                           >
                             <Checkbox
diff --git a/apps/storefront/src/components/upload/B3Upload.tsx b/apps/storefront/src/components/upload/B3Upload.tsx
index 886dcba4..9c5ccd93 100644
--- a/apps/storefront/src/components/upload/B3Upload.tsx
+++ b/apps/storefront/src/components/upload/B3Upload.tsx
@@ -117,14 +117,12 @@ export const B3Upload = (props: B3UploadProps) => {
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const [step, setStep] = useState<string>('init')
   const [fileDatas, setFileDatas] = useState<CustomFieldItems>({})
   const [fileName, setFileName] = useState('')
diff --git a/apps/storefront/src/pages/dashboard/Dashboard.tsx b/apps/storefront/src/pages/dashboard/Dashboard.tsx
index 19e70994..6c8d0395 100644
--- a/apps/storefront/src/pages/dashboard/Dashboard.tsx
+++ b/apps/storefront/src/pages/dashboard/Dashboard.tsx
@@ -80,14 +80,12 @@ const Dashboard = () => {
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
 
   const [currentSalesRepCompanyId, setCurrentSalesRepCompanyId] = useState<number>(+salesRepCompanyId)
diff --git a/apps/storefront/src/pages/orderDetail/OrderDetail.tsx b/apps/storefront/src/pages/orderDetail/OrderDetail.tsx
index dde6fe67..7a4e329a 100644
--- a/apps/storefront/src/pages/orderDetail/OrderDetail.tsx
+++ b/apps/storefront/src/pages/orderDetail/OrderDetail.tsx
@@ -101,14 +101,12 @@ const OrderDetail = () => {
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const localtion = useLocation()
 
   const [isMobile] = useMobile()
diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx
index 9efc842e..486ab48a 100644
--- a/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx
+++ b/apps/storefront/src/pages/quickorder/components/QuickOrderCard.tsx
@@ -1,5 +1,5 @@
 import {
-  ReactElement,
+  ReactElement, useContext,
 } from 'react'
 
 import {
@@ -18,6 +18,10 @@ import {
   PRODUCT_DEFAULT_IMAGE,
 } from '@/constants'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface QuickOrderCardProps {
   item: any,
   currencyToken: string,
@@ -39,6 +43,14 @@ const QuickOrderCard = (props: QuickOrderCardProps) => {
     currencyToken = '$',
   } = props
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const {
     quantity,
     imageUrl,
@@ -143,6 +155,9 @@ const QuickOrderCard = (props: QuickOrderCardProps) => {
                 margin: '1rem 0',
                 width: '60%',
                 maxWidth: '100px',
+                '& .MuiFilledInput-input:after': {
+                  borderBottom: `2px solid ${primaryColor || '#1976d2'} !important`,
+                },
               }}
               onChange={(e) => {
                 handleUpdateProductQty(shoppingDetail.id, e.target.value)
diff --git a/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx b/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx
index fd39a67e..b7d4005f 100644
--- a/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx
+++ b/apps/storefront/src/pages/quickorder/components/QuickOrderPad.tsx
@@ -62,14 +62,12 @@ const successTip = (options: successTipOptions) => () => (
 export const QuickOrderPad = () => {
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const [isMobile] = useMobile()
 
   const [isOpenBulkLoadCSV, setIsOpenBulkLoadCSV] = useState(false)
diff --git a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
index 9b5f384c..cbc49ba4 100644
--- a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
+++ b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
@@ -59,6 +59,10 @@ import {
   B3Sping,
 } from '@/components'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface ListItem {
   [key: string]: string
 }
@@ -134,6 +138,14 @@ const QuickorderTable = ({
     },
   } = useContext(GlobaledContext)
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const [search, setSearch] = useState<SearchProps>({
     q: '',
     beginDateAt: distanceDay(30),
@@ -346,6 +358,11 @@ const QuickorderTable = ({
           inputProps={{
             inputMode: 'numeric', pattern: '[0-9]*',
           }}
+          sx={{
+            '& .MuiFilledInput-root:after': {
+              borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+            },
+          }}
           onChange={(e) => {
             handleUpdateProductQty(row.id, e.target.value)
           }}
diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx
index 10806e04..6224e154 100644
--- a/apps/storefront/src/pages/quote/QuoteDraft.tsx
+++ b/apps/storefront/src/pages/quote/QuoteDraft.tsx
@@ -177,14 +177,12 @@ const QuoteDraft = ({
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const navigate = useNavigate()
 
   // const nextPath = B3SStorage.get('nextPath')
@@ -865,6 +863,7 @@ const QuoteDraft = ({
               currencyToken={currencyToken}
               getQuoteTableDetails={getQuoteTableDetails}
               isB2BUser={isB2BUser}
+              customColor={primaryColor}
             />
 
           </Container>
diff --git a/apps/storefront/src/pages/quote/components/FileUpload.tsx b/apps/storefront/src/pages/quote/components/FileUpload.tsx
index c9ebcdfa..b95fcf27 100644
--- a/apps/storefront/src/pages/quote/components/FileUpload.tsx
+++ b/apps/storefront/src/pages/quote/components/FileUpload.tsx
@@ -50,13 +50,15 @@ import {
   CustomStyleContext,
 } from '@/shared/customStyleButtton'
 
-const FileUploadContainer = styled(Box)(() => ({
+const FileUploadContainer = styled(Box)(({
+  style,
+}) => ({
   '& .file-upload-area': {
     cursor: 'pointer',
     '& .MuiDropzoneArea-textContainer': {
       display: 'flex',
       alignItems: 'center',
-      color: '#1976D2',
+      color: style?.color || '#1976D2',
     },
     '& .MuiDropzoneArea-text': {
       order: 1,
@@ -150,14 +152,12 @@ const FileUpload = (props: FileUploadProps, ref: Ref<unknown>) => {
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const [loading, setLoading] = useState<boolean>(false)
 
   useImperativeHandle(ref, () => ({
@@ -259,6 +259,10 @@ const FileUpload = (props: FileUploadProps, ref: Ref<unknown>) => {
     }
   }
 
+  const customStyles = {
+    color: primaryColor,
+  }
+
   return (
     <B3Sping
       isSpinning={loading}
@@ -274,15 +278,9 @@ const FileUpload = (props: FileUploadProps, ref: Ref<unknown>) => {
               <Box key={file.id || index}>
                 <FileListItem hasdelete={(file?.hasDelete || '').toString()}>
                   <Box className="fileList-name-area">
-                    <AttachFile sx={{
-                      color: primaryColor,
-                    }}
-                    />
+                    <AttachFile />
                     <Typography
                       className="fileList-name"
-                      sx={{
-                        color: primaryColor,
-                      }}
                       onClick={() => { downloadFile(file.fileUrl) }}
                     >
                       {file.fileName}
@@ -315,10 +313,7 @@ const FileUpload = (props: FileUploadProps, ref: Ref<unknown>) => {
               marginTop: '10px',
             }}
           >
-            <FileUploadContainer sx={{
-              color: primaryColor,
-            }}
-            >
+            <FileUploadContainer style={customStyles}>
               <DropzoneArea
                 dropzoneClass="file-upload-area"
                 Icon={AttachFile}
diff --git a/apps/storefront/src/pages/quote/components/QuoteAddress.tsx b/apps/storefront/src/pages/quote/components/QuoteAddress.tsx
index 16b150a1..bde99aa8 100644
--- a/apps/storefront/src/pages/quote/components/QuoteAddress.tsx
+++ b/apps/storefront/src/pages/quote/components/QuoteAddress.tsx
@@ -102,14 +102,12 @@ const QuoteAddress = ({
 }: AddressProps, ref: any) => {
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const {
     control,
     getValues,
diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx
index 8f9ec715..70d94f63 100644
--- a/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx
+++ b/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx
@@ -67,14 +67,12 @@ const QuoteDetailHeader = (props: QuoteDetailHeaderProps) => {
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const navigate = useNavigate()
   const gridOptions = (xs: number) => (isMobile ? {} : {
     xs,
diff --git a/apps/storefront/src/pages/quote/components/QuoteNote.tsx b/apps/storefront/src/pages/quote/components/QuoteNote.tsx
index 1fb0b1df..1b6177f3 100644
--- a/apps/storefront/src/pages/quote/components/QuoteNote.tsx
+++ b/apps/storefront/src/pages/quote/components/QuoteNote.tsx
@@ -9,6 +9,7 @@ import {
   useState,
   ChangeEvent,
   useEffect,
+  useContext,
 } from 'react'
 
 import {
@@ -19,7 +20,19 @@ import {
   B3LStorage,
 } from '@/utils'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 export const QuoteNote = () => {
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const [noteText, setNoteText] = useState('')
 
   const handleNoteTextChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -73,6 +86,9 @@ export const QuoteNote = () => {
                 '& .MuiFormLabel-root': {
                   color: 'rgba(0, 0, 0, 0.38)',
                 },
+                '& .MuiFilledInput-root:after': {
+                  borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+                },
               }}
             />
           </Box>
diff --git a/apps/storefront/src/pages/quote/components/QuoteTable.tsx b/apps/storefront/src/pages/quote/components/QuoteTable.tsx
index 4197e005..2656b51e 100644
--- a/apps/storefront/src/pages/quote/components/QuoteTable.tsx
+++ b/apps/storefront/src/pages/quote/components/QuoteTable.tsx
@@ -83,6 +83,7 @@ interface ShoppingDetailTableProps {
   idEdit?: boolean,
   isB2BUser: boolean,
   updateSummary: () => void,
+  customColor: string,
 }
 
 interface SearchProps {
@@ -139,6 +140,7 @@ const QuoteTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>) => {
     idEdit = true,
     isB2BUser,
     updateSummary,
+    customColor,
   } = props
 
   const paginationTableRef = useRef<PaginationTableRefProps | null>(null)
@@ -416,6 +418,11 @@ const QuoteTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>) => {
           inputProps={{
             inputMode: 'numeric', pattern: '[0-9]*',
           }}
+          sx={{
+            '& .MuiFilledInput-root:after': {
+              borderBottom: `2px solid ${customColor || '#1976d2'}`,
+            },
+          }}
           onChange={(e) => {
             handleUpdateProductQty(row.id, e.target.value)
           }}
diff --git a/apps/storefront/src/pages/registered/RegisteredAccount.tsx b/apps/storefront/src/pages/registered/RegisteredAccount.tsx
index f1f593b9..1380bfcd 100644
--- a/apps/storefront/src/pages/registered/RegisteredAccount.tsx
+++ b/apps/storefront/src/pages/registered/RegisteredAccount.tsx
@@ -79,6 +79,9 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
   const {
     state: {
       accountLoginRegistration,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
@@ -228,6 +231,11 @@ export default function RegisteredAccount(props: RegisteredAccountProps) {
                 value="1"
                 control={<Radio />}
                 label={b3Lang('intl.user.register.registeredAccount.businessAccount')}
+                sx={{
+                  '& .MuiRadio-root.Mui-checked': {
+                    color: primaryColor,
+                  },
+                }}
               />
             )
           }
diff --git a/apps/storefront/src/pages/registered/RegisteredStep.tsx b/apps/storefront/src/pages/registered/RegisteredStep.tsx
index bdd3f018..e70089d5 100644
--- a/apps/storefront/src/pages/registered/RegisteredStep.tsx
+++ b/apps/storefront/src/pages/registered/RegisteredStep.tsx
@@ -18,10 +18,15 @@ import {
 import {
   RegisteredContext,
 } from './context/RegisteredContext'
+
 import {
   steps,
 } from './config'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface RegisteredStepProps {
   children: ReactNode,
   isStepOptional: (index: number) => Boolean,
@@ -46,6 +51,14 @@ export default function RegisteredStep(props: RegisteredStepProps) {
   } = state
   const newPageTitle = accountType === '1' ? b3Lang('intl.user.register.title.registerComplete') : b3Lang('intl.user.register.title.accountCreated')
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   return (
     <Box component="div">
       <Box
@@ -76,6 +89,11 @@ export default function RegisteredStep(props: RegisteredStepProps) {
               <Step
                 key={label}
                 {...stepProps}
+                sx={{
+                  '& .MuiStepIcon-root.Mui-active': {
+                    color: primaryColor,
+                  },
+                }}
               >
                 <StepLabel {...labelProps}>{b3Lang(label)}</StepLabel>
               </Step>
diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
index 1bfce35d..89e6dd97 100644
--- a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -130,14 +130,12 @@ const ShoppingListDetails = ({
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        primaryColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    primaryColor = '',
-  } = portalStyle
-
   const tableRef = useRef<TableRefProps | null>(null)
 
   const [checkedArr, setCheckedArr] = useState<CustomFieldItems>([])
@@ -437,6 +435,7 @@ const ShoppingListDetails = ({
                   setDeleteOpen={setDeleteOpen}
                   setDeleteItemId={setDeleteItemId}
                   isB2BUser={isB2BUser}
+                  customColor={primaryColor}
                 />
               </Grid>
             </B3Sping>
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx
index db01d7e1..48e364dd 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx
@@ -7,6 +7,7 @@ import {
   useEffect,
   Dispatch,
   SetStateAction,
+  useContext,
 } from 'react'
 
 import {
@@ -51,6 +52,10 @@ import {
   snackbar,
 } from '@/utils'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 const Flex = styled('div')(() => ({
   display: 'flex',
   wordBreak: 'break-word',
@@ -116,6 +121,14 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
     isB2BUser,
   } = props
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const [quantity, setQuantity] = useState<number | string>(1)
   const [formFields, setFormFields] = useState<CustomFieldItems[]>([])
   const [variantInfo, setVariantInfo] = useState<ShoppingListProductItemVariants | null>(null)
@@ -385,6 +398,12 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
                 sx={{
                   width: '60%',
                   maxWidth: '100px',
+                  '& .MuiInputLabel-root.Mui-focused': {
+                    color: primaryColor,
+                  },
+                  '& .MuiFilledInput-root:after': {
+                    borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+                  },
                 }}
               />
             </FlexItem>
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx
index ea21d63c..d03fa30e 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx
@@ -36,6 +36,10 @@ import {
   ShoppingListProductItem,
 } from '../../../types'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface ProductTableActionProps {
   product: ShoppingListProductItem,
   onAddToListClick: (id: number) => void,
@@ -125,6 +129,14 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
     addButtonText = 'Add to list',
   } = props
 
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const [isMobile] = useMobile()
 
   const handleCancelClicked = () => {
@@ -207,6 +219,9 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
               '& input': {
                 padding: '12px 12px 12px 0',
               },
+              '& .MuiFilledInput-root:after': {
+                borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+              },
             }}
           />
 
@@ -226,6 +241,7 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
                   />
                 )}
                 actionWidth="180px"
+                customColor={primaryColor}
               />
             ) : (
               <Typography>
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx b/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx
index a446c248..483a6107 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx
@@ -1,6 +1,7 @@
 import {
   ChangeEvent,
   KeyboardEvent,
+  useContext,
   useState,
 } from 'react'
 
@@ -39,6 +40,10 @@ import {
   conversionProductsList,
 } from '../shared/config'
 
+import {
+  CustomStyleContext,
+} from '@/shared/customStyleButtton'
+
 interface SearchProductProps {
   updateList: () => void,
   addToList: (products: CustomFieldItems[]) => CustomFieldItems,
@@ -54,6 +59,14 @@ export const SearchProduct = ({
   addButtonText,
   isB2BUser,
 }: SearchProductProps) => {
+  const {
+    state: {
+      portalStyle: {
+        primaryColor = '',
+      },
+    },
+  } = useContext(CustomStyleContext)
+
   const [isLoading, setIsLoading] = useState(false)
 
   const [productListOpen, setProductListOpen] = useState(false)
@@ -189,6 +202,9 @@ export const SearchProduct = ({
           '& input': {
             padding: '12px 12px 12px 0',
           },
+          '& .MuiFilledInput-root:after': {
+            borderBottom: `2px solid ${primaryColor || '#1976d2'}`,
+          },
         }}
       />
       <CustomButton
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
index 7de89ae5..91038c26 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
@@ -107,6 +107,7 @@ interface ShoppingDetailTableProps {
   setDeleteItemId: (itemId: number | string) => void,
   setDeleteOpen: (open: boolean) => void,
   isB2BUser: boolean,
+  customColor: string,
 }
 
 interface SearchProps {
@@ -174,6 +175,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
     isJuniorApprove,
     isB2BUser,
     allowJuniorPlaceOrder,
+    customColor,
   } = props
 
   const paginationTableRef = useRef<PaginationTableRefProps | null>(null)
@@ -189,7 +191,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
   const [shoppingListTotalPrice, setShoppingListTotalPrice] = useState<number>(0.00)
 
   const handleUpdateProductQty = (id: number | string, value: number | string) => {
-    if (value !== '' && value <= 0) return
+    if (value !== '' && +value <= 0) return
     const currentItem = originProducts.find((item: ListItemProps) => {
       const {
         node,
@@ -482,6 +484,11 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
           inputProps={{
             inputMode: 'numeric', pattern: '[0-9]*',
           }}
+          sx={{
+            '& .MuiFilledInput-root:after': {
+              borderBottom: `2px solid ${customColor || '#1976d2'}`,
+            },
+          }}
           onChange={(e) => {
             handleUpdateProductQty(row.id, e.target.value)
           }}
diff --git a/apps/storefront/src/theme.tsx b/apps/storefront/src/theme.tsx
index 5b36b681..5203e0d7 100644
--- a/apps/storefront/src/theme.tsx
+++ b/apps/storefront/src/theme.tsx
@@ -48,14 +48,12 @@ function B3ThemeProvider({
 
   const {
     state: {
-      portalStyle,
+      portalStyle: {
+        backgroundColor = '',
+      },
     },
   } = useContext(CustomStyleContext)
 
-  const {
-    backgroundColor = '',
-  } = portalStyle
-
   const theme = (lang: string) => createTheme({
     palette: {
       background: {