diff --git a/packages/ui/src/ui-component/extended/FileUpload.jsx b/packages/ui/src/ui-component/extended/FileUpload.jsx
index 2555ee147..bc1fd9962 100644
--- a/packages/ui/src/ui-component/extended/FileUpload.jsx
+++ b/packages/ui/src/ui-component/extended/FileUpload.jsx
@@ -1,4 +1,4 @@
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from '@/store/actions'
@@ -41,6 +41,7 @@ const availableFileTypes = [
 
 const FileUpload = ({ dialogProps }) => {
     const dispatch = useDispatch()
+    const customization = useSelector((state) => state.customization)
 
     useNotifier()
 
@@ -234,14 +235,18 @@ const FileUpload = ({ dialogProps }) => {
                 <Box
                     sx={{
                         borderRadius: 2,
-                        border: '1px solid #e0e0e0',
-                        backgroundColor: '#fafafa',
+                        border: customization.isDarkMode ? '1px solid #424242' : '1px solid #e0e0e0',
+                        backgroundColor: customization.isDarkMode ? '#2d2d2d' : '#fafafa',
                         padding: 3,
                         marginBottom: 3,
                         marginTop: 2
                     }}
                 >
-                    <Typography sx={{ fontSize: 16, fontWeight: 600, marginBottom: 2, color: '#424242' }}>PDF Configuration</Typography>
+                    <Typography
+                        sx={{ fontSize: 16, fontWeight: 600, marginBottom: 2, color: customization.isDarkMode ? '#ffffff' : '#424242' }}
+                    >
+                        PDF Configuration
+                    </Typography>
 
                     <Box>
                         <Typography sx={{ fontSize: 14, fontWeight: 500, marginBottom: 1 }}>PDF Usage</Typography>