diff --git a/apps/storefront/src/components/layout/B3Nav.tsx b/apps/storefront/src/components/layout/B3Nav.tsx
index 62e4c35a..292a872f 100644
--- a/apps/storefront/src/components/layout/B3Nav.tsx
+++ b/apps/storefront/src/components/layout/B3Nav.tsx
@@ -3,6 +3,7 @@ import {
   ListItem,
   ListItemButton,
   ListItemText,
+  useTheme,
 } from '@mui/material'
 
 import {
@@ -43,10 +44,6 @@ import {
   b3HexToRgb,
 } from '../outSideComponents/utils/b3CustomStyles'
 
-import {
-  CustomStyleContext,
-} from '../../shared/customStyleButtton/context'
-
 interface B3NavProps {
   closeSidebar?: (x: boolean) => void;
 }
@@ -66,13 +63,9 @@ export const B3Nav = ({
     state: globalState,
   } = useContext(GlobaledContext)
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
+  const theme = useTheme()
+
+  const primaryColor = theme.palette.primary.main
 
   const jumpRegister = () => {
     navigate('/registered')
diff --git a/apps/storefront/src/components/spin/B3Sping.tsx b/apps/storefront/src/components/spin/B3Sping.tsx
index 1241c16f..7853fc75 100644
--- a/apps/storefront/src/components/spin/B3Sping.tsx
+++ b/apps/storefront/src/components/spin/B3Sping.tsx
@@ -1,9 +1,10 @@
 import {
   ReactNode,
-  useContext,
 } from 'react'
+
 import {
   CircularProgress,
+  useTheme,
 } from '@mui/material'
 
 import {
@@ -16,10 +17,6 @@ import {
   SpinContext,
 } from './styled'
 
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
-
 interface B3SpingProps {
   isSpinning: Boolean | undefined,
   children: ReactNode,
@@ -45,13 +42,9 @@ export const B3Sping = (props: B3SpingProps) => {
     isFlex,
   } = props
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
+  const theme = useTheme()
+
+  const primaryColor = theme.palette.primary.main
 
   const [isMobile] = useMobile()
 
diff --git a/apps/storefront/src/components/upload/B3Upload.tsx b/apps/storefront/src/components/upload/B3Upload.tsx
index 46e3d2ac..3d811b9c 100644
--- a/apps/storefront/src/components/upload/B3Upload.tsx
+++ b/apps/storefront/src/components/upload/B3Upload.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Link,
   Alert,
+  useTheme,
 } from '@mui/material'
 
 import Grid from '@mui/material/Unstable_Grid2'
@@ -59,10 +60,6 @@ import {
   ParseEmptyDataProps,
 } from './utils'
 
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
-
 interface B3UploadProps {
   isOpen: boolean,
   setIsOpen: Dispatch<SetStateAction<boolean>>,
@@ -115,13 +112,9 @@ export const B3Upload = (props: B3UploadProps) => {
     },
   } = useContext(GlobaledContext)
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
+  const theme = useTheme()
+
+  const primaryColor = theme.palette.primary.main
 
   const [step, setStep] = useState<string>('init')
   const [fileDatas, setFileDatas] = useState<CustomFieldItems>({})
diff --git a/apps/storefront/src/pages/quote/components/FileUpload.tsx b/apps/storefront/src/pages/quote/components/FileUpload.tsx
index 3ff592b9..5b7df4ea 100644
--- a/apps/storefront/src/pages/quote/components/FileUpload.tsx
+++ b/apps/storefront/src/pages/quote/components/FileUpload.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Tooltip,
   Typography,
+  useTheme,
 } from '@mui/material'
 
 import AttachFileIcon from '@mui/icons-material/AttachFile'
@@ -15,7 +16,6 @@ import {
   Ref,
   forwardRef,
   useImperativeHandle,
-  useContext,
 } from 'react'
 
 import {
@@ -46,10 +46,6 @@ import {
   snackbar,
 } from '@/utils'
 
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
-
 const FileUploadContainer = styled(Box)(({
   style,
 }) => ({
@@ -150,13 +146,9 @@ const FileUpload = (props: FileUploadProps, ref: Ref<unknown>) => {
     isEndLoadding = false,
   } = props
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
+  const theme = useTheme()
+
+  const primaryColor = theme.palette.primary.main
 
   const [loading, setLoading] = useState<boolean>(false)
 
diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx
index 0e6e8013..5b58b30f 100644
--- a/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx
+++ b/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx
@@ -10,16 +10,13 @@ import {
   Grid,
   styled,
   Typography,
+  useTheme,
 } from '@mui/material'
 
 import {
   ArrowBackIosNew,
 } from '@mui/icons-material'
 
-import {
-  useContext,
-} from 'react'
-
 import {
   QuoteStatus,
 } from './QuoteStatus'
@@ -28,10 +25,6 @@ import {
   useMobile,
 } from '@/hooks'
 
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
-
 import {
   CustomButton,
 } from '@/components'
@@ -69,13 +62,9 @@ const QuoteDetailHeader = (props: QuoteDetailHeaderProps) => {
     salesRepInfo,
   } = props
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
+  const theme = useTheme()
+
+  const primaryColor = theme.palette.primary.main
 
   const navigate = useNavigate()
   const gridOptions = (xs: number) => (isMobile ? {} : {
diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
index f127d4fb..5e0e6f83 100644
--- a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -15,6 +15,7 @@ import {
 import {
   Box,
   Grid,
+  useTheme,
 } from '@mui/material'
 
 import {
@@ -73,10 +74,6 @@ import ShoppingDetailFooter from './components/ShoppingDetailFooter'
 import ShoppingDetailTable from './components/ShoppingDetailTable'
 import ShoppingDetailDeleteItems from './components/ShoppingDetailDeleteItems'
 
-import {
-  CustomStyleContext,
-} from '@/shared/customStyleButtton'
-
 interface TableRefProps extends HTMLInputElement {
   initSearch: () => void,
 }
@@ -128,13 +125,9 @@ const ShoppingListDetails = ({
     dispatch,
   } = useContext(ShoppingListDetailsContext)
 
-  const {
-    state: {
-      portalStyle: {
-        primaryColor = '',
-      },
-    },
-  } = useContext(CustomStyleContext)
+  const theme = useTheme()
+
+  const primaryColor = theme.palette.primary.main
 
   const tableRef = useRef<TableRefProps | null>(null)