diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
index 0568d9ac..22e9a843 100644
--- a/src/custom/CustomTooltip/customTooltip.tsx
+++ b/src/custom/CustomTooltip/customTooltip.tsx
@@ -1,5 +1,5 @@
-import { Tooltip, type TooltipProps } from '@mui/material';
 import React from 'react';
+import { Tooltip, TooltipProps } from '../../base';
 import { WHITE } from '../../theme';
 import { RenderMarkdownTooltip } from '../Markdown';
 
diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx
index 489abb38..9e17c945 100644
--- a/src/custom/ResponsiveDataTable.tsx
+++ b/src/custom/ResponsiveDataTable.tsx
@@ -57,6 +57,7 @@ export const DataTableEllipsisMenu: React.FC<{
         open={Boolean(anchorEl)}
         onClose={handleClose}
         sx={{
+          fontFamily: theme?.typography.fontFamily,
           '& .MuiPaper-root': {
             backgroundColor: theme?.palette.background.default ?? 'white'
           }
@@ -122,6 +123,9 @@ export const DataTableEllipsisMenu: React.FC<{
 
 const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
   createTheme({
+    typography: {
+      fontFamily: theme.typography.fontFamily
+    },
     components: {
       MuiPaper: {
         styleOverrides: {
@@ -134,7 +138,6 @@ const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
       MuiTable: {
         styleOverrides: {
           root: {
-            // border: `2px solid ${theme.palette.border.normal}`,
             width: '-webkit-fill-available',
             '@media (max-width: 500px)': {
               wordWrap: 'break-word'
diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx
index 23411c2d..91ffd945 100644
--- a/src/custom/SearchBar.tsx
+++ b/src/custom/SearchBar.tsx
@@ -11,6 +11,9 @@ import { TooltipIcon } from './TooltipIconButton';
 
 const customTheme = (theme: Theme) =>
   createTheme({
+    typography: {
+      fontFamily: theme.typography.fontFamily
+    },
     components: {
       MuiTextField: {
         styleOverrides: {
diff --git a/src/custom/StyledSearchBar/style.tsx b/src/custom/StyledSearchBar/style.tsx
index 9f702672..f519cc83 100644
--- a/src/custom/StyledSearchBar/style.tsx
+++ b/src/custom/StyledSearchBar/style.tsx
@@ -2,6 +2,7 @@ import { styled } from '@mui/material';
 import { InputAdornment, OutlinedInput } from '../../base';
 
 export const StyledSearchInput = styled(OutlinedInput)(({ style, theme }) => ({
+  fontFamily: theme.typography.fontFamily,
   width: '100%',
   '@media (max-width: 590px)': {
     marginLeft: '0.25rem',