diff --git a/src/pages/homepage/components/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton.tsx
index 01ce200..9f46c9f 100644
--- a/src/pages/homepage/components/SettingsButton.tsx
+++ b/src/pages/homepage/components/SettingsButton.tsx
@@ -4,6 +4,7 @@ import {
 	Group,
 	Menu,
 	MultiSelect,
+	Overlay,
 	Select,
 	Stack,
 	Text,
@@ -43,7 +44,7 @@ function SettingsButton() {
 	} = useCommonHooks();
 
 	const [selectedClient, setSelectedClient] = useState<any>(wolClients?.[0]);
-
+	const [overlayOpened, setOverlayOpened] = useState(false);
 	const handleWakeRequest = () => {
 		wakeRequest({
 			method: 'POST',
@@ -63,179 +64,186 @@ function SettingsButton() {
 	}, [data, isFetched]);
 
 	return (
-		<Menu
-			classNames={menuClasses}
-			withinPortal={false}
-			withArrow
-			shadow='md'
-			position='top'
-		>
-			<Menu.Target>
-				<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
-					<FiMenu />
-				</Button>
-			</Menu.Target>
-			<Menu.Dropdown>
-				<Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'>
-					<Tooltip label='Settings' color={theme.primaryColor} withArrow>
-						<FiSettings
-							size={20}
-							onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
-							style={{
-								cursor: 'pointer',
-								position: 'absolute',
-								top: '.5rem',
-								right: isMobile ? undefined : '.5rem',
-								left: isMobile ? '.5rem' : undefined,
-							}}
-						/>
-					</Tooltip>
-					<Group w={'100%'} justify='center'>
-						<Stack
-							gap={0}
-							align='center'
-							className={stackClasses.menuStack}
-							classNames={stackClasses}
-						>
-							<Menu.Label>Wake on LAN</Menu.Label>
-							<Button
-								classNames={buttonClasses}
-								className={buttonClasses.wakeButton}
-								disabled={!wolClients?.length || selectedClient === null}
-								onClick={() => {
-									handleWakeRequest();
-									notify('Wake command sent');
+		<>
+			{overlayOpened && <Overlay />}
+			<Menu
+				classNames={menuClasses}
+				withinPortal={false}
+				withArrow
+				shadow='md'
+				position='top'
+				onOpen={() => setOverlayOpened(true)}
+				onClose={() => setOverlayOpened(false)}
+			>
+				<Menu.Target>
+					<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
+						<FiMenu />
+					</Button>
+				</Menu.Target>
+				<Menu.Dropdown>
+					<Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'>
+						<Tooltip label='Settings' color={theme.primaryColor} withArrow>
+							<FiSettings
+								size={20}
+								onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
+								style={{
+									cursor: 'pointer',
+									position: 'absolute',
+									top: '.5rem',
+									right: isMobile ? undefined : '.5rem',
+									left: isMobile ? '.5rem' : undefined,
 								}}
+							/>
+						</Tooltip>
+						<Group w={'100%'} justify='center'>
+							<Stack
+								gap={0}
+								align='center'
+								className={stackClasses.menuStack}
+								classNames={stackClasses}
 							>
-								<Stack gap={0} align='center'>
-									<FiMonitor size={40} />
-								</Stack>
-							</Button>
-							<Select
-								labelProps={{ display: 'none' }}
-								placeholder='Pick a host...'
-								defaultValue={wolClients?.[0]?.hostname}
-								data={
-									wolClients?.map((wolClient: any) => {
-										return {
-											value: wolClient.hostname,
-											label: `${wolClient.hostname} (${wolClient.macAddress})`,
-											hostname: wolClient.hostname,
-											macAddress: wolClient.macAddress,
-										};
-									}) || []
-								}
-								classNames={selectClasses}
-								comboboxProps={{ withinPortal: false }}
-								onChange={(_value, option: any) => setSelectedClient(option)}
-								onLoad={(option: any) => setSelectedClient(option)}
-							/>
-						</Stack>
+								<Menu.Label>Wake on LAN</Menu.Label>
+								<Button
+									classNames={buttonClasses}
+									className={buttonClasses.wakeButton}
+									disabled={!wolClients?.length || selectedClient === null}
+									onClick={() => {
+										handleWakeRequest();
+										notify('Wake command sent');
+									}}
+								>
+									<Stack gap={0} align='center'>
+										<FiMonitor size={40} />
+									</Stack>
+								</Button>
+								<Select
+									labelProps={{ display: 'none' }}
+									placeholder='Pick a host...'
+									defaultValue={wolClients?.[0]?.hostname}
+									data={
+										wolClients?.map((wolClient: any) => {
+											return {
+												value: wolClient.hostname,
+												label: `${wolClient.hostname} (${wolClient.macAddress})`,
+												hostname: wolClient.hostname,
+												macAddress: wolClient.macAddress,
+											};
+										}) || []
+									}
+									classNames={selectClasses}
+									comboboxProps={{ withinPortal: false }}
+									onChange={(_value, option: any) => setSelectedClient(option)}
+									onLoad={(option: any) => setSelectedClient(option)}
+								/>
+							</Stack>
+							<Stack
+								gap={0}
+								align='center'
+								className={stackClasses.menuStack}
+								classNames={stackClasses}
+							>
+								<Menu.Label pb={'1rem'}>Themes</Menu.Label>
+								<Group pb={'1rem'}>
+									<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
+										<ActionIcon
+											className={actionIconClasses.menuActions}
+											classNames={actionIconClasses}
+											style={{
+												backgroundColor:
+													currentTheme === 'random'
+														? `${theme.primaryColor}88`
+														: 'transparent',
+												color:
+													currentTheme === 'random'
+														? theme.accentColor
+														: theme.primaryColor,
+											}}
+											onClick={() => {
+												setCurrentTheme(
+													currentTheme === 'random' ? theme.name : 'random',
+												);
+											}}
+										>
+											<FiShuffle />
+										</ActionIcon>
+									</Tooltip>
+									<Tooltip label='Random Theme' color={theme.primaryColor} withArrow>
+										<ActionIcon
+											className={actionIconClasses.menuActions}
+											classNames={actionIconClasses}
+											style={{
+												backgroundColor: 'transparent',
+												color: theme.primaryColor,
+											}}
+											onClick={() => {
+												handleThemeChange(allThemes, true);
+											}}
+										>
+											<FaDice />
+										</ActionIcon>
+									</Tooltip>
+								</Group>
+								<Text fw={'bold'} fz={20}>
+									Currently:{' '}
+								</Text>
+								{theme.name}
+							</Stack>
+						</Group>
+						<Menu.Divider
+							w={'85%'}
+							m={'.75rem'}
+							style={{ borderColor: theme.accentColor }}
+						/>
 						<Stack
 							gap={0}
 							align='center'
+							w={'85%'}
+							h={'100px'}
 							className={stackClasses.menuStack}
 							classNames={stackClasses}
 						>
-							<Menu.Label pb={'1rem'}>Themes</Menu.Label>
-							<Group pb={'1rem'}>
-								<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
-									<ActionIcon
-										className={actionIconClasses.menuActions}
-										classNames={actionIconClasses}
-										style={{
-											backgroundColor:
-												currentTheme === 'random'
-													? `${theme.primaryColor}88`
-													: 'transparent',
-											color:
-												currentTheme === 'random'
-													? theme.accentColor
-													: theme.primaryColor,
-										}}
-										onClick={() => {
-											setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
-										}}
-									>
-										<FiShuffle />
-									</ActionIcon>
-								</Tooltip>
-								<Tooltip label='Random Theme' color={theme.primaryColor} withArrow>
-									<ActionIcon
-										className={actionIconClasses.menuActions}
-										classNames={actionIconClasses}
-										style={{
-											backgroundColor: 'transparent',
-											color: theme.primaryColor,
-										}}
-										onClick={() => {
-											handleThemeChange(allThemes, true);
-										}}
-									>
-										<FaDice />
-									</ActionIcon>
-								</Tooltip>
+							<Menu.Label>Filters</Menu.Label>
+							<Group>
+								<MultiSelect
+									label='Apps'
+									data={categories ?? []}
+									placeholder={
+										appFilter.length > 0
+											? appFilter.length === 1
+												? appFilter[0]
+												: `${appFilter.length} apps selected`
+											: 'No apps selected'
+									}
+									defaultValue={appFilter}
+									onChange={(data: any) => {
+										setAppFilter(data);
+									}}
+									classNames={selectClasses}
+									comboboxProps={{ withinPortal: false }}
+								/>
+								<MultiSelect
+									label='Bookmarks'
+									data={categories ?? []}
+									placeholder={
+										bookmarkFilter.length > 0
+											? bookmarkFilter.length === 1
+												? bookmarkFilter[0]
+												: `${bookmarkFilter.length} bookmarks selected`
+											: 'No bookmarks selected'
+									}
+									defaultValue={bookmarkFilter}
+									onChange={(data: any) => {
+										setBookmarkFilter(data);
+									}}
+									classNames={selectClasses}
+									comboboxProps={{ withinPortal: false }}
+								/>
 							</Group>
-							<Text fw={'bold'} fz={20}>
-								Currently:{' '}
-							</Text>
-							{theme.name}
 						</Stack>
-					</Group>
-					<Menu.Divider
-						w={'85%'}
-						m={'.75rem'}
-						style={{ borderColor: theme.accentColor }}
-					/>
-					<Stack
-						gap={0}
-						align='center'
-						w={'85%'}
-						h={'100px'}
-						className={stackClasses.menuStack}
-						classNames={stackClasses}
-					>
-						<Menu.Label>Filters</Menu.Label>
-						<Group>
-							<MultiSelect
-								label='Apps'
-								data={categories ?? []}
-								placeholder={
-									appFilter.length > 0
-										? appFilter.length === 1
-											? appFilter[0]
-											: `${appFilter.length} apps selected`
-										: 'No apps selected'
-								}
-								defaultValue={appFilter}
-								onChange={(data: any) => {
-									setAppFilter(data);
-								}}
-								classNames={selectClasses}
-								comboboxProps={{ withinPortal: false }}
-							/>
-							<MultiSelect
-								label='Bookmarks'
-								data={categories ?? []}
-								placeholder={
-									bookmarkFilter.length > 0
-										? bookmarkFilter.length === 1
-											? bookmarkFilter[0]
-											: `${bookmarkFilter.length} bookmarks selected`
-										: 'No bookmarks selected'
-								}
-								defaultValue={bookmarkFilter}
-								onChange={(data: any) => {
-									setBookmarkFilter(data);
-								}}
-								classNames={selectClasses}
-								comboboxProps={{ withinPortal: false }}
-							/>
-						</Group>
 					</Stack>
-				</Stack>
-			</Menu.Dropdown>
-		</Menu>
+				</Menu.Dropdown>
+			</Menu>
+		</>
 	);
 }