diff --git a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx b/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx
index 9ffcbe8c..dd05495f 100644
--- a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx
+++ b/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import React from 'react';
 import { Box } from '../../base/Box';
 import { Card } from '../../base/Card';
@@ -30,6 +31,7 @@ export function CustomColumnVisibilityControl({
 }: CustomColumnVisibilityControlProps): JSX.Element {
   const [open, setOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const theme = useTheme();
 
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -54,7 +56,7 @@ export function CustomColumnVisibilityControl({
         <TooltipIcon
           title="View Columns"
           onClick={handleOpen}
-          icon={<ColumnIcon fill="#3c494f" />}
+          icon={<ColumnIcon fill={theme.palette.icon.default} />}
           arrow
         />
         <PopperListener
@@ -87,7 +89,7 @@ export function CustomColumnVisibilityControl({
                     flexDirection: 'column',
                     padding: '1rem',
                     boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
-                    background: '#f4f5f7'
+                    background: theme.palette.background.blur?.heavy
                   }}
                 >
                   {columns.map((col) => (
diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx
index b77b317d..9da4e95f 100644
--- a/src/custom/SearchBar.tsx
+++ b/src/custom/SearchBar.tsx
@@ -61,7 +61,6 @@ export interface SearchBarProps {
   onClear?: () => void;
   expanded: boolean;
   setExpanded: (expanded: boolean) => void;
-  iconFill?: string;
 }
 
 function SearchBar({
@@ -69,13 +68,11 @@ function SearchBar({
   placeholder,
   onClear,
   expanded,
-  setExpanded,
-  iconFill
+  setExpanded
 }: SearchBarProps): JSX.Element {
   const [searchText, setSearchText] = React.useState('');
   const searchRef = React.useRef<HTMLInputElement | null>(null);
-
-  const outerTheme = useTheme();
+  const theme = useTheme();
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchText(event.target.value);
@@ -123,7 +120,7 @@ function SearchBar({
       }}
     >
       <div>
-        <ThemeProvider theme={customTheme(outerTheme)}>
+        <ThemeProvider theme={customTheme(theme)}>
           <TextField
             variant="standard"
             value={searchText}
@@ -144,14 +141,14 @@ function SearchBar({
           <TooltipIcon
             title="Close"
             onClick={handleClearIconClick}
-            icon={<CloseIcon fill={iconFill} />}
+            icon={<CloseIcon fill={theme.palette.icon.default} />}
             arrow
           />
         ) : (
           <TooltipIcon
             title="Search"
             onClick={handleSearchIconClick}
-            icon={<SearchIcon fill={iconFill} />}
+            icon={<SearchIcon fill={theme.palette.icon.default} />}
             arrow
           />
         )}
diff --git a/src/custom/UniversalFilter.tsx b/src/custom/UniversalFilter.tsx
index dd4fe57e..8f878703 100644
--- a/src/custom/UniversalFilter.tsx
+++ b/src/custom/UniversalFilter.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import { SelectChangeEvent } from '@mui/material/Select';
 import React from 'react';
 import { Button } from '../base/Button';
@@ -36,6 +37,7 @@ function UniversalFilter({
 }: UniversalFilterProps): JSX.Element {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [open, setOpen] = React.useState(false);
+  const theme = useTheme();
 
   const handleFilterChange = (event: React.ChangeEvent<{ value: string }>, columnName: string) => {
     const value = event.target.value;
@@ -70,7 +72,7 @@ function UniversalFilter({
         <TooltipIcon
           title="Filter"
           onClick={handleClick}
-          icon={<FilterIcon fill="#3c494f" />}
+          icon={<FilterIcon fill={theme.palette.icon.default} />}
           arrow
         />
         <PopperListener
@@ -92,7 +94,7 @@ function UniversalFilter({
                     padding: '1rem',
                     paddingTop: '1.8rem',
                     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-                    backgroundColor: '#f4f5f7'
+                    backgroundColor: theme.palette.background.blur?.heavy
                   }}
                 >
                   {Object.keys(filters).map((filterColumn) => {