diff --git a/src/pages/settings/components/Applications/Applications.tsx b/src/pages/settings/components/Applications/Applications.tsx
index ec39b6e..ae7b289 100644
--- a/src/pages/settings/components/Applications/Applications.tsx
+++ b/src/pages/settings/components/Applications/Applications.tsx
@@ -193,66 +193,70 @@ const ApplicationSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
-				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-					Applications
-				</Text>
-				<Popover withArrow withOverlay withinPortal={false}>
-					<Popover.Target>
-						<ActionIcon
-							className={actionIconClasses.settingsTooltip}
-							classNames={actionIconClasses}
-						>
-							<FiHelpCircle />
-						</ActionIcon>
-					</Popover.Target>
-					<Popover.Dropdown
-						style={{
-							color: theme.primaryColor,
-							backgroundColor: theme.backgroundColor,
-							width: '500px',
-						}}
-					>
-						<Stack>
-							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-								{'Applications are the apps that will be displayed on the homepage.'}
-							</Text>
-							<Highlight
-								highlight={[
-									'Applications',
-									'apps',
-									'application',
-									'name',
-									'base url',
-									'url',
-									'icon',
-									'filter',
-								]}
-								className={textClasses.settingsTooltip}
-								classNames={textClasses}
-								highlightStyles={{
-									backgroundImage:
-										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-									fontWeight: 700,
-									WebkitBackgroundClip: 'text',
-									WebkitTextFillColor: 'transparent',
-								}}
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
+					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+						Applications
+					</Text>
+					<Popover withArrow withOverlay withinPortal={false}>
+						<Popover.Target>
+							<ActionIcon
+								className={actionIconClasses.settingsTooltip}
+								classNames={actionIconClasses}
 							>
-								{
-									'Applications contain a name, base url, url, icon and filter. Currently the icon must be the mdi icon name. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.'
-								}
-							</Highlight>
-						</Stack>
-					</Popover.Dropdown>
-				</Popover>
-				<Button
-					className={buttonClasses.tableButton}
-					classNames={buttonClasses}
-					onClick={openModal}
-				>
-					<FiPlus />
-				</Button>
+								<FiHelpCircle />
+							</ActionIcon>
+						</Popover.Target>
+						<Popover.Dropdown
+							style={{
+								color: theme.primaryColor,
+								backgroundColor: theme.backgroundColor,
+								width: '500px',
+							}}
+						>
+							<Stack>
+								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+									{'Applications are the apps that will be displayed on the homepage.'}
+								</Text>
+								<Highlight
+									highlight={[
+										'Applications',
+										'apps',
+										'application',
+										'name',
+										'base url',
+										'url',
+										'icon',
+										'filter',
+									]}
+									className={textClasses.settingsTooltip}
+									classNames={textClasses}
+									highlightStyles={{
+										backgroundImage:
+											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+										fontWeight: 700,
+										WebkitBackgroundClip: 'text',
+										WebkitTextFillColor: 'transparent',
+									}}
+								>
+									{
+										'Applications contain a name, base url, url, icon and filter. Currently the icon must be the mdi icon name. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.'
+									}
+								</Highlight>
+							</Stack>
+						</Popover.Dropdown>
+					</Popover>
+					<Button
+						className={buttonClasses.tableButton}
+						classNames={buttonClasses}
+						onClick={openModal}
+					>
+						<FiPlus />
+					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus
diff --git a/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx b/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
index 08e6ca0..2252698 100644
--- a/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
+++ b/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
@@ -1,7 +1,6 @@
 import { ActionIcon, Box, Group, Text } from '@mantine/core';
 import { useState } from 'react';
 import { FiEdit } from 'react-icons/fi';
-import { actionIconClasses } from 'styles';
 
 function BookmarkSettingsItem({ bookmark }: any) {
 	const [hover, setHover] = useState(false);
@@ -10,8 +9,8 @@ function BookmarkSettingsItem({ bookmark }: any) {
 			style={{
 				cursor: 'pointer',
 				borderRadius: '4px',
-				color: 'var(--color-text-pri)',
-				backgroundColor: 'var(--color-text-acc)',
+				color: 'var(--color-text-acc)',
+				backgroundColor: 'var(--color-search-background)',
 				padding: '8px',
 			}}
 			onMouseEnter={() => setHover(true)}
@@ -21,11 +20,11 @@ function BookmarkSettingsItem({ bookmark }: any) {
 				<Text>{bookmark.name}</Text>
 				{hover && (
 					<ActionIcon
-						className={actionIconClasses.editButton}
-						classNames={actionIconClasses}
+						variant='subtle'
 						style={{
 							position: 'absolute',
 							right: 24,
+							color: 'var(--color-text-acc)',
 						}}
 					>
 						<FiEdit />
diff --git a/src/pages/settings/components/Bookmarks/Bookmarks.tsx b/src/pages/settings/components/Bookmarks/Bookmarks.tsx
index 2e93c68..8517d1d 100644
--- a/src/pages/settings/components/Bookmarks/Bookmarks.tsx
+++ b/src/pages/settings/components/Bookmarks/Bookmarks.tsx
@@ -145,66 +145,70 @@ const BookmarkSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
-				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-					Bookmarks
-				</Text>
-				<Popover withArrow withOverlay withinPortal={false}>
-					<Popover.Target>
-						<ActionIcon
-							className={actionIconClasses.settingsTooltip}
-							classNames={actionIconClasses}
-						>
-							<FiHelpCircle />
-						</ActionIcon>
-					</Popover.Target>
-					<Popover.Dropdown
-						style={{
-							color: theme.primaryColor,
-							backgroundColor: theme.backgroundColor,
-							width: '500px',
-						}}
-					>
-						<Stack>
-							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-								{'Bookmarks are the links that will be displayed on the homepage.'}
-							</Text>
-							<Highlight
-								highlight={[
-									'Bookmark',
-									'Bookmarks',
-									'Group',
-									'Groups',
-									'Link',
-									'Links',
-									'Category',
-									'Categories',
-								]}
-								className={textClasses.settingsTooltip}
-								classNames={textClasses}
-								highlightStyles={{
-									backgroundImage:
-										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-									fontWeight: 700,
-									WebkitBackgroundClip: 'text',
-									WebkitTextFillColor: 'transparent',
-								}}
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
+					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+						Bookmarks
+					</Text>
+					<Popover withArrow withOverlay withinPortal={false}>
+						<Popover.Target>
+							<ActionIcon
+								className={actionIconClasses.settingsTooltip}
+								classNames={actionIconClasses}
 							>
-								{
-									'Bookmarks can only belong to a single category, and will be displayed under that category on the homepage.'
-								}
-							</Highlight>
-						</Stack>
-					</Popover.Dropdown>
-				</Popover>
-				<Button
-					className={buttonClasses.tableButton}
-					classNames={buttonClasses}
-					onClick={openModal}
-				>
-					<FiPlus />
-				</Button>
+								<FiHelpCircle />
+							</ActionIcon>
+						</Popover.Target>
+						<Popover.Dropdown
+							style={{
+								color: theme.primaryColor,
+								backgroundColor: theme.backgroundColor,
+								width: '500px',
+							}}
+						>
+							<Stack>
+								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+									{'Bookmarks are the links that will be displayed on the homepage.'}
+								</Text>
+								<Highlight
+									highlight={[
+										'Bookmark',
+										'Bookmarks',
+										'Group',
+										'Groups',
+										'Link',
+										'Links',
+										'Category',
+										'Categories',
+									]}
+									className={textClasses.settingsTooltip}
+									classNames={textClasses}
+									highlightStyles={{
+										backgroundImage:
+											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+										fontWeight: 700,
+										WebkitBackgroundClip: 'text',
+										WebkitTextFillColor: 'transparent',
+									}}
+								>
+									{
+										'Bookmarks can only belong to a single category, and will be displayed under that category on the homepage.'
+									}
+								</Highlight>
+							</Stack>
+						</Popover.Dropdown>
+					</Popover>
+					<Button
+						className={buttonClasses.tableButton}
+						classNames={buttonClasses}
+						onClick={openModal}
+					>
+						<FiPlus />
+					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus
diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
index 36c7f1f..85cffcc 100644
--- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
+++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
@@ -15,6 +15,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { IconTrash } from '@tabler/icons-react';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
+import { FiPlus } from 'react-icons/fi';
 import { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles';
 import BookmarkSettingsItem from './BookmarkSettingsItem';
 import DebouncedBookmarkItem from './DebouncedBookmarkItem';
@@ -242,7 +243,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 									});
 								}}
 							>
-								Add bookmark
+								<FiPlus /> Bookmark
 							</Button>
 						</Popover.Target>
 						<Popover.Dropdown
diff --git a/src/pages/settings/components/Messages/Messages.tsx b/src/pages/settings/components/Messages/Messages.tsx
index 53a7e83..4ef5144 100644
--- a/src/pages/settings/components/Messages/Messages.tsx
+++ b/src/pages/settings/components/Messages/Messages.tsx
@@ -134,57 +134,63 @@ const MessageSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
-				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-					Messages
-				</Text>
-				<Popover withArrow withOverlay withinPortal={false}>
-					<Popover.Target>
-						<ActionIcon
-							className={actionIconClasses.settingsTooltip}
-							classNames={actionIconClasses}
-						>
-							<FiHelpCircle />
-						</ActionIcon>
-					</Popover.Target>
-					<Popover.Dropdown
-						style={{
-							color: theme.primaryColor,
-							backgroundColor: theme.backgroundColor,
-							width: '500px',
-						}}
-					>
-						<Stack>
-							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-								{'These custom messages will be displayed in the header on the homepage.'}
-							</Text>
-							<Highlight
-								highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
-								className={textClasses.settingsTooltip}
-								classNames={textClasses}
-								highlightStyles={{
-									backgroundImage:
-										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-									fontWeight: 700,
-									WebkitBackgroundClip: 'text',
-									WebkitTextFillColor: 'transparent',
-								}}
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
+					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+						Messages
+					</Text>
+					<Popover withArrow withOverlay withinPortal={false}>
+						<Popover.Target>
+							<ActionIcon
+								className={actionIconClasses.settingsTooltip}
+								classNames={actionIconClasses}
 							>
-								{
-									'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName. Messages may contain any unicode text.'
-								}
-							</Highlight>
-						</Stack>
-					</Popover.Dropdown>
-				</Popover>
-				<Button
-					className={buttonClasses.tableButton}
-					classNames={buttonClasses}
-					onClick={openModal}
-				>
-					<FiPlus />
-				</Button>
+								<FiHelpCircle />
+							</ActionIcon>
+						</Popover.Target>
+						<Popover.Dropdown
+							style={{
+								color: theme.primaryColor,
+								backgroundColor: theme.backgroundColor,
+								width: '500px',
+							}}
+						>
+							<Stack>
+								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+									{
+										'These custom messages will be displayed in the header on the homepage.'
+									}
+								</Text>
+								<Highlight
+									highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
+									className={textClasses.settingsTooltip}
+									classNames={textClasses}
+									highlightStyles={{
+										backgroundImage:
+											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+										fontWeight: 700,
+										WebkitBackgroundClip: 'text',
+										WebkitTextFillColor: 'transparent',
+									}}
+								>
+									{
+										'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName. Messages may contain any unicode text.'
+									}
+								</Highlight>
+							</Stack>
+						</Popover.Dropdown>
+					</Popover>
+					<Button
+						className={buttonClasses.tableButton}
+						classNames={buttonClasses}
+						onClick={openModal}
+					>
+						<FiPlus />
+					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus
diff --git a/src/pages/settings/components/Search/SearchProviders.tsx b/src/pages/settings/components/Search/SearchProviders.tsx
index fa6b934..76ddbac 100644
--- a/src/pages/settings/components/Search/SearchProviders.tsx
+++ b/src/pages/settings/components/Search/SearchProviders.tsx
@@ -157,57 +157,61 @@ const SearchProviderSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
-				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-					Search Providers
-				</Text>
-				<Popover withArrow withOverlay withinPortal={false}>
-					<Popover.Target>
-						<ActionIcon
-							className={actionIconClasses.settingsTooltip}
-							classNames={actionIconClasses}
-						>
-							<FiHelpCircle />
-						</ActionIcon>
-					</Popover.Target>
-					<Popover.Dropdown
-						style={{
-							color: theme.primaryColor,
-							backgroundColor: theme.backgroundColor,
-							width: '500px',
-						}}
-					>
-						<Stack>
-							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-								{'Search providers and shortcuts can be configured here.'}
-							</Text>
-							<Highlight
-								highlight={['Providers', 'search']}
-								className={textClasses.settingsTooltip}
-								classNames={textClasses}
-								highlightStyles={{
-									backgroundImage:
-										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-									fontWeight: 700,
-									WebkitBackgroundClip: 'text',
-									WebkitTextFillColor: 'transparent',
-								}}
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
+					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+						Search Providers
+					</Text>
+					<Popover withArrow withOverlay withinPortal={false}>
+						<Popover.Target>
+							<ActionIcon
+								className={actionIconClasses.settingsTooltip}
+								classNames={actionIconClasses}
 							>
-								{
-									'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.'
-								}
-							</Highlight>
-						</Stack>
-					</Popover.Dropdown>
-				</Popover>
-				<Button
-					className={buttonClasses.tableButton}
-					classNames={buttonClasses}
-					onClick={openModal}
-				>
-					<FiPlus />
-				</Button>
+								<FiHelpCircle />
+							</ActionIcon>
+						</Popover.Target>
+						<Popover.Dropdown
+							style={{
+								color: theme.primaryColor,
+								backgroundColor: theme.backgroundColor,
+								width: '500px',
+							}}
+						>
+							<Stack>
+								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+									{'Search providers and shortcuts can be configured here.'}
+								</Text>
+								<Highlight
+									highlight={['Providers', 'search']}
+									className={textClasses.settingsTooltip}
+									classNames={textClasses}
+									highlightStyles={{
+										backgroundImage:
+											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+										fontWeight: 700,
+										WebkitBackgroundClip: 'text',
+										WebkitTextFillColor: 'transparent',
+									}}
+								>
+									{
+										'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.'
+									}
+								</Highlight>
+							</Stack>
+						</Popover.Dropdown>
+					</Popover>
+					<Button
+						className={buttonClasses.tableButton}
+						classNames={buttonClasses}
+						onClick={openModal}
+					>
+						<FiPlus />
+					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus
diff --git a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
index c34a292..bda76f9 100644
--- a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
@@ -115,7 +115,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 					color:
 						theme.borderColor === theme.primaryColor
 							? theme.accentColor
-							: theme.primaryColor,
+							: theme.backgroundColor,
 					zIndex: 3,
 				}}
 			>
@@ -134,7 +134,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 						color:
 							theme.borderColor === theme.primaryColor
 								? theme.accentColor
-								: theme.primaryColor,
+								: theme.backgroundColor,
 						zIndex: 3,
 					}}
 					onClick={(event) => {
@@ -202,7 +202,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 							color:
 								theme.borderColor === theme.primaryColor
 									? theme.accentColor
-									: theme.primaryColor,
+									: theme.backgroundColor,
 							zIndex: 3,
 						}}
 						onClick={() => {
@@ -224,7 +224,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 								color:
 									theme.borderColor === theme.primaryColor
 										? theme.accentColor
-										: theme.primaryColor,
+										: theme.backgroundColor,
 								zIndex: 3,
 							}}
 							onClick={() => {
diff --git a/src/pages/settings/components/Theming/ThemePlaylists.tsx b/src/pages/settings/components/Theming/ThemePlaylists.tsx
index acbf9ce..1277535 100644
--- a/src/pages/settings/components/Theming/ThemePlaylists.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists.tsx
@@ -7,12 +7,13 @@ import {
 	Popover,
 	Stack,
 	Text,
+	TextInput,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
 import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
-import { actionIconClasses, buttonClasses, textClasses } from 'styles';
+import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
 import ThemePlaylistCard from './ThemePlaylistCard';
 import ThemePlaylistModal from './ThemePlaylistModal';
 
@@ -26,7 +27,10 @@ function ThemePlaylists() {
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
-	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
+	const { currentThemePlaylist, setCurrentThemePlaylist, theme, isMobile } =
+		useCommonHooks();
+	const [searchValue, setSearchValue] = useState('');
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 
 	const handleOpen = (playlist: any) => {
 		setSelectedPlaylist(playlist);
@@ -58,8 +62,8 @@ function ThemePlaylists() {
 				createPlaylist={mutateAsync}
 			/>
 			<Stack h={'100%'} w={'100%'}>
-				<Group w={'100%'} justify='space-between'>
-					<Group>
+				<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
+					<Group w={isMobile ? undefined : '100%'}>
 						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 							Theme Playlists
 						</Text>
@@ -116,6 +120,18 @@ function ThemePlaylists() {
 							<FiPlus />
 						</Button>
 					</Group>
+					<TextInput
+						w={isMobile ? undefined : '35%'}
+						pos={isMobile ? undefined : 'absolute'}
+						className={textInputClasses.settingsItem}
+						classNames={textInputClasses}
+						autoFocus
+						placeholder='Search...'
+						value={searchValue}
+						onInput={(event: any) => {
+							setSearchValue(event.target.value);
+						}}
+					/>
 				</Group>
 				<Group justify='center' align='center' pos={'relative'}>
 					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -125,6 +141,9 @@ function ThemePlaylists() {
 				<Group justify='center' align='center' pos={'relative'}>
 					{themePlaylists
 						?.filter((playlist: any) => playlist.default === 1)
+						?.filter((a: any) =>
+							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+						)
 						.map((cardPlaylist: any) => {
 							return (
 								<Group key={cardPlaylist.name} pos={'relative'}>
@@ -141,7 +160,7 @@ function ThemePlaylists() {
 												color:
 													theme.borderColor === theme.primaryColor
 														? theme.accentColor
-														: theme.primaryColor,
+														: theme.backgroundColor,
 											}}
 										/>
 									)}
@@ -166,6 +185,9 @@ function ThemePlaylists() {
 				<Group justify='center' align='center' pos={'relative'}>
 					{themePlaylists
 						?.filter((playlist: any) => playlist.default === 0)
+						?.filter((a: any) =>
+							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+						)
 						.map((cardPlaylist: any) => {
 							return (
 								<Group key={cardPlaylist.name} pos={'relative'}>
diff --git a/src/pages/settings/components/Theming/Themes.tsx b/src/pages/settings/components/Theming/Themes.tsx
index 9b6fff7..2e75a19 100644
--- a/src/pages/settings/components/Theming/Themes.tsx
+++ b/src/pages/settings/components/Theming/Themes.tsx
@@ -9,14 +9,16 @@ import {
 	Stack,
 	Switch,
 	Text,
+	TextInput,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
 import '@mantine/core/styles/Modal.css';
-import { actionIconClasses, buttonClasses, textClasses } from 'styles';
+import { FaDice } from 'react-icons/fa';
+import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
 function ThemesSettings() {
@@ -33,7 +35,9 @@ function ThemesSettings() {
 	const [backgroundList, setBackgroundList] = useState<any>(['None']);
 	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
-	const { currentTheme, setCurrentTheme, theme, setCurrentThemePlaylist } =
+	const [searchValue, setSearchValue] = useState('');
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const { currentTheme, setCurrentTheme, theme, isMobile, setCurrentThemePlaylist } =
 		useCommonHooks();
 
 	const handleOpen = (theme: any) => {
@@ -79,8 +83,8 @@ function ThemesSettings() {
 				handleSaveTheme={handleSaveTheme}
 			/>
 			<Stack h={'100%'} w={'100%'}>
-				<Group w={'100%'} justify='space-between'>
-					<Group>
+				<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
+					<Group w={isMobile ? undefined : '100%'}>
 						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 							Themes
 						</Text>
@@ -143,9 +147,30 @@ function ThemesSettings() {
 							<FiPlus />
 						</Button>
 					</Group>
+					<TextInput
+						w={isMobile ? undefined : '35%'}
+						pos={isMobile ? undefined : 'absolute'}
+						className={textInputClasses.settingsItem}
+						classNames={textInputClasses}
+						autoFocus
+						placeholder='Search...'
+						value={searchValue}
+						onInput={(event: any) => {
+							setSearchValue(event.target.value);
+						}}
+					/>
 					<Switch
-						label={<Text c={theme.primaryColor}>Random Theme</Text>}
+						label={
+							isMobile ? (
+								<FaDice size={20} color={theme.primaryColor} />
+							) : (
+								<Text c={theme.primaryColor}>Random Theme</Text>
+							)
+						}
 						labelPosition='left'
+						pos={'absolute'}
+						right={isMobile ? '2rem' : '1rem'}
+						top={isMobile ? '9.5rem' : undefined}
 						checked={currentTheme === 'random'}
 						onChange={(e) => {
 							setCurrentTheme(e.target.checked ? 'random' : theme.name);
@@ -166,39 +191,45 @@ function ThemesSettings() {
 						}}
 						pos={'absolute'}
 					/>
-					{allThemes?.map((cardTheme: any) => (
-						<Group key={cardTheme.name} pos={'relative'}>
-							{cardTheme.name === currentTheme && (
-								<FiChevronRight
+					{allThemes
+						?.filter((a: any) =>
+							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+						)
+						.map((cardTheme: any) => (
+							<Group key={cardTheme.name} pos={'relative'}>
+								{cardTheme.name === currentTheme && (
+									<FiChevronRight
+										style={{
+											position: 'absolute',
+											left: -14,
+											zIndex: 1,
+											fontSize: '2em',
+											fontWeight: 'bold',
+											borderRadius: '50%',
+											backgroundColor: cardTheme.borderColor,
+											color:
+												cardTheme.borderColor === cardTheme.primaryColor
+													? cardTheme.accentColor
+													: cardTheme.primaryColor,
+										}}
+									/>
+								)}
+								<Box
 									style={{
-										position: 'absolute',
-										left: -14,
-										zIndex: 1,
-										fontSize: '2em',
-										fontWeight: 'bold',
-										borderRadius: '50%',
-										backgroundColor: cardTheme.borderColor,
-										color:
-											cardTheme.borderColor === cardTheme.primaryColor
-												? cardTheme.accentColor
-												: cardTheme.primaryColor,
+										zIndex:
+											currentTheme === 'random' && cardTheme.name === theme.name
+												? 200
+												: 0,
 									}}
-								/>
-							)}
-							<Box
-								style={{
-									zIndex:
-										currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
-								}}
-							>
-								<ThemeCard
-									allThemes={allThemes}
-									cardTheme={cardTheme}
-									handleOpen={handleOpen}
-								/>
-							</Box>
-						</Group>
-					))}
+								>
+									<ThemeCard
+										allThemes={allThemes}
+										cardTheme={cardTheme}
+										handleOpen={handleOpen}
+									/>
+								</Box>
+							</Group>
+						))}
 				</Group>
 			</Stack>
 		</>
diff --git a/src/pages/settings/components/WoL/WolClients.tsx b/src/pages/settings/components/WoL/WolClients.tsx
index 5e6080b..2dc9ae8 100644
--- a/src/pages/settings/components/WoL/WolClients.tsx
+++ b/src/pages/settings/components/WoL/WolClients.tsx
@@ -145,55 +145,59 @@ const WolClientSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
-				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-					WoL Clients
-				</Text>
-				<Popover withArrow withOverlay withinPortal={false}>
-					<Popover.Target>
-						<ActionIcon
-							className={actionIconClasses.settingsTooltip}
-							classNames={actionIconClasses}
-						>
-							<FiHelpCircle />
-						</ActionIcon>
-					</Popover.Target>
-					<Popover.Dropdown
-						style={{
-							color: theme.primaryColor,
-							backgroundColor: theme.backgroundColor,
-						}}
-					>
-						<Stack>
-							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-								{'Wake on Lan clients can be configured here.'}
-							</Text>
-							<Highlight
-								ta={'center'}
-								highlight={['Clients', 'homepage']}
-								className={textClasses.settingsTooltip}
-								classNames={textClasses}
-								highlightStyles={{
-									backgroundImage:
-										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-									fontWeight: 700,
-									WebkitBackgroundClip: 'text',
-									WebkitTextFillColor: 'transparent',
-								}}
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
+					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+						WoL Clients
+					</Text>
+					<Popover withArrow withOverlay withinPortal={false}>
+						<Popover.Target>
+							<ActionIcon
+								className={actionIconClasses.settingsTooltip}
+								classNames={actionIconClasses}
 							>
-								{'Clients can be powered on from the settings button the homepage.'}
-							</Highlight>
-						</Stack>
-					</Popover.Dropdown>
-				</Popover>
-				<Button
-					className={buttonClasses.tableButton}
-					classNames={buttonClasses}
-					onClick={openModal}
-				>
-					<FiPlus />
-				</Button>
+								<FiHelpCircle />
+							</ActionIcon>
+						</Popover.Target>
+						<Popover.Dropdown
+							style={{
+								color: theme.primaryColor,
+								backgroundColor: theme.backgroundColor,
+							}}
+						>
+							<Stack>
+								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+									{'Wake on Lan clients can be configured here.'}
+								</Text>
+								<Highlight
+									ta={'center'}
+									highlight={['Clients', 'homepage']}
+									className={textClasses.settingsTooltip}
+									classNames={textClasses}
+									highlightStyles={{
+										backgroundImage:
+											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+										fontWeight: 700,
+										WebkitBackgroundClip: 'text',
+										WebkitTextFillColor: 'transparent',
+									}}
+								>
+									{'Clients can be powered on from the settings button the homepage.'}
+								</Highlight>
+							</Stack>
+						</Popover.Dropdown>
+					</Popover>
+					<Button
+						className={buttonClasses.tableButton}
+						classNames={buttonClasses}
+						onClick={openModal}
+					>
+						<FiPlus />
+					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus
diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css
index 7951b07..9b23b2a 100644
--- a/src/styles/Button.module.css
+++ b/src/styles/Button.module.css
@@ -63,13 +63,13 @@
 		}
 		width: 2rem;
 		height: 2rem;
-		padding: 0px;
+		padding: 8px;
 		margin: 0px;
-		background-color: var(--color-text-pri);
+		background-color: var(--color-search-background);
 		color: var(--color-text-acc);
 	}
 	&:hover {
-		background-color: var(--color-text-acc) !important;
-		color: var(--color-text-pri) !important;
+		background-color: var(--color-text-pri) !important;
+		color: var(--color-background) !important;
 	}
 }