diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index 9ab2994d119c..ef8b42849e70 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -21,6 +21,7 @@ import type {SelectionListHandle} from '@components/SelectionList/types';
 import HelpButton from '@components/SidePane/HelpComponents/HelpButton';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {navigateToAndOpenReport} from '@libs/actions/Report';
 import {clearAllFilters} from '@libs/actions/Search';
@@ -55,6 +56,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
     const {translate} = useLocalize();
     const [showPopupButton, setShowPopupButton] = useState(true);
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {shouldUseNarrowLayout: displayNarrowHeader} = useResponsiveLayout();
     const personalDetails = usePersonalDetails();
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
@@ -303,7 +305,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
               styles.pAbsolute,
               styles.pt2,
               {top: 8 - BORDER_WIDTH, left: leftPopoverHorizontalPosition, right: rightPopoverHorizontalPosition},
-              {boxShadow: variables.popoverMenuShadow},
+              {boxShadow: theme.shadow},
           ]
         : [styles.pt4];
     const inputWrapperActiveStyle = isAutocompleteListVisible ? styles.ph2 : null;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index e22a17965229..8f0f4342138c 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -273,7 +273,7 @@ const styles = (theme: ThemeColors) =>
             borderColor: theme.border,
             justifyContent: 'center',
             overflow: 'hidden',
-            boxShadow: variables.popoverMenuShadow,
+            boxShadow: theme.shadow,
             paddingVertical: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING,
         },
 
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 725966d487a8..54355ccdc925 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -43,7 +43,7 @@ const darkTheme = {
     // Additional keys
     overlay: colors.productDark400,
     inverse: colors.productDark900,
-    shadow: colors.black,
+    shadow: '0px 4px 12px 0px rgba(2,18,4,0.24)',
     componentBG: colors.productDark100,
     hoverComponentBG: colors.productDark300,
     messageHighlightBG: colors.messageHighlightDark,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index add3bf183a42..2b0ac4847a4a 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -43,7 +43,7 @@ const lightTheme = {
     // Additional keys
     overlay: colors.productLight400,
     inverse: colors.productLight900,
-    shadow: colors.black,
+    shadow: '0px 4px 12px 0px rgba(2,18,4,0.06)',
     componentBG: colors.productLight100,
     messageHighlightBG: colors.yellow100,
     hoverComponentBG: colors.productLight300,
diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
index 4b5ce5b28988..fb1ba8779e63 100644
--- a/src/styles/utils/generators/ModalStyleUtils.ts
+++ b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -74,7 +74,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     },
                 };
                 modalContainerStyle = {
-                    boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
+                    boxShadow: theme.shadow,
                     borderRadius: variables.componentBorderRadiusLarge,
                     overflow: 'hidden',
                     width: variables.sideBarWidth,
@@ -98,7 +98,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     },
                 };
                 modalContainerStyle = {
-                    boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
+                    boxShadow: theme.shadow,
                     flex: 1,
                     marginTop: isSmallScreenWidth ? 0 : 20,
                     marginBottom: isSmallScreenWidth ? 0 : 20,
@@ -128,7 +128,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     },
                 };
                 modalContainerStyle = {
-                    boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
+                    boxShadow: theme.shadow,
                     flex: 1,
                     marginTop: isSmallScreenWidth ? 0 : 20,
                     marginBottom: isSmallScreenWidth ? 0 : 20,
@@ -155,7 +155,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     },
                 };
                 modalContainerStyle = {
-                    boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
+                    boxShadow: theme.shadow,
                     flex: 1,
                     marginTop: isSmallScreenWidth ? 0 : 20,
                     marginBottom: isSmallScreenWidth ? 0 : 20,
@@ -180,7 +180,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     },
                 };
                 modalContainerStyle = {
-                    boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
+                    boxShadow: theme.shadow,
                     borderRadius: variables.componentBorderRadiusLarge,
                     borderWidth: 0,
                 };
@@ -209,6 +209,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     paddingTop: variables.componentBorderRadiusLarge,
                     justifyContent: 'center',
                     overflow: 'hidden',
+                    boxShadow: theme.shadow,
                 };
 
                 shouldAddBottomSafeAreaPadding = true;
@@ -232,7 +233,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     borderColor: theme.border,
                     justifyContent: 'center',
                     overflow: 'hidden',
-                    boxShadow: variables.popoverMenuShadow,
+                    boxShadow: theme.shadow,
                 };
 
                 hideBackdrop = true;
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 6c4eb2265d5f..34263610ebf0 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -100,7 +100,6 @@ export default {
     pdfPageMaxWidth: 992,
     tooltipzIndex: 10050,
     gutterWidth: 12,
-    popoverMenuShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.06)',
     optionRowHeight: 64,
     optionRowHeightCompact: 52,
     optionsListSectionHeaderHeight: getValueUsingPixelRatio(32, 38),