Package updates

Sort fixes
Added persistent sort to more locations
2026-10-23 11:27:04 -05:00 · 2026-10-20 19:19:27 -05:00 · 2026-10-20 18:58:52 -05:00 · 2026-10-20 16:13:51 -05:00 · 2026-10-20 14:16:20 -05:00 · 2026-10-15 17:05:26 -05:00
55 changed files with 2004 additions and 1344 deletions
--- a/README.md
+++ b/README.md
@@ -116,11 +116,8 @@ sudo pm2 start server.cjs
 ### TODO

 - Mobile improvements
- New Carosel on weather description
- Updates to weather modal
+- New Carousel on weather description
 - Add mantine-led for monitoring status (https://gfazioli.github.io/mantine-led)
- Update Theme playlists
-  - Include mantine-reflection (https://gfazioli.github.io/mantine-reflection#example-complex-components)
 - Explore https://gfazioli.github.io/mantine-scene/
 - Explore https://gfazioli.github.io/mantine-window/
 - Upgrade spinners/loaders (https://gfazioli.github.io/mantine-spinner#example-random)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -10,43 +10,43 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@gfazioli/mantine-border-animate": "^3.0.5",
-		"@gfazioli/mantine-depth-select": "^2.0.15",
-		"@gfazioli/mantine-parallax": "^4.0.13",
-		"@gfazioli/mantine-reflection": "^3.0.13",
-		"@gfazioli/mantine-text-animate": "^4.0.15",
+		"@gfazioli/mantine-border-animate": "^3.0.7",
+		"@gfazioli/mantine-depth-select": "^2.0.17",
+		"@gfazioli/mantine-parallax": "^4.0.15",
+		"@gfazioli/mantine-reflection": "^3.0.15",
+		"@gfazioli/mantine-text-animate": "^4.0.17",
 		"@hello-pangea/dnd": "^18.0.1",
-		"@mantine/core": "^9.7.1",
-		"@mantine/dates": "^9.7.1",
-		"@mantine/form": "^9.7.1",
-		"@mantine/hooks": "^9.7.1",
-		"@mantine/notifications": "^9.7.1",
-		"@tanstack/react-query": "^5.104.1",
-		"@tanstack/react-query-devtools": "^5.104.1",
-		"@tanstack/react-query-persist-client": "^5.104.1",
-		"@tanstack/react-table": "^9.2.8",
-		"@tanstack/react-virtual": "^3.14.14",
+		"@mantine/core": "^9.7.3",
+		"@mantine/dates": "^9.7.3",
+		"@mantine/form": "^9.7.3",
+		"@mantine/hooks": "^9.7.3",
+		"@mantine/notifications": "^9.7.3",
+		"@tanstack/react-query": "^5.104.5",
+		"@tanstack/react-query-devtools": "^5.104.5",
+		"@tanstack/react-query-persist-client": "^5.104.5",
+		"@tanstack/react-table": "^9.3.1",
+		"@tanstack/react-virtual": "^3.14.22",
 		"idb-keyval": "^6.3.0",
 		"jotai": "^3.0.1",
 		"openmeteo": "^1.2.3",
-		"react": "^19.3.0",
-		"react-dom": "^19.3.0",
+		"react": "^19.3.1",
+		"react-dom": "^19.3.1",
 		"react-fontpicker-ts": "^1.3.0",
 		"react-icons": "^5.7.0",
 		"react-router-dom": "^7.18.4",
 		"recharts": "^3.10.1"
 	},
 	"devDependencies": {
-		"@types/node": "^26.6.4",
+		"@types/node": "^26.6.5",
 		"@types/react": "^19.3.0",
 		"@types/react-dom": "^19.3.0",
 		"@vitejs/plugin-react": "^6.1.2",
-		"@vitest/coverage-v8": "^5.0.3",
-		"@vitest/ui": "^5.0.3",
+		"@vitest/coverage-v8": "^5.0.5",
+		"@vitest/ui": "^5.0.5",
 		"typescript": "^7.0.2",
-		"vite": "^8.3.4",
+		"vite": "^8.3.5",
 		"vite-plugin-dts": "~5.1.2",
 		"vite-tsconfig-paths": "^6.1.1",
-		"vitest": "^5.0.3"
+		"vitest": "^5.0.5"
 	}
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,17 +37,11 @@ function App() {
 	const { data: themePlaylists, isFetched: isThemePlaylistsFetched } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
-	const { data: personalData, isFetched: isPersonalDataFetched } = useQueryAPI({
+	const { data: personalData } = useQueryAPI({
 		endpoint: 'api/personalData',
 	});
-	const {
-		theme,
-		setTheme,
-		themeName,
-		setThemeName,
-		handleThemeChange,
-		currentThemePlaylist,
-	} = useCommonHooks();
+	const { settings, updateSetting, theme, setTheme, handleThemeChange } =
+		useCommonHooks();
 	const [loaded, setLoaded] = useState<boolean>(false);
 	const overrides = createTheme({
 		primaryColor: 'primary',
@@ -68,22 +62,23 @@ function App() {
 			'shift + t',
 			() => {
 				const themeList = JSON.parse(
-					themePlaylists?.find((t: ThemePlaylist) => t?.name === currentThemePlaylist)
-						?.themeList ?? '[]',
+					themePlaylists?.find(
+						(t: ThemePlaylist) => t?.name === settings.currentThemePlaylist,
+					)?.themeList ?? '[]',
 				);
-				if (themeList.length > 0 && currentThemePlaylist !== 'Time of Day') {
+				if (themeList.length > 0 && settings.currentThemePlaylist !== 'Time of Day') {
 					const filteredThemes = allThemes.filter((t: Theme) => themeList.includes(t.id));
 					handleThemeChange(filteredThemes, false);
-				} else if (currentThemePlaylist === 'All') {
+				} else if (settings.currentThemePlaylist === 'All') {
 					handleThemeChange(allThemes, true);
-				} else if (currentThemePlaylist === 'Backgrounds') {
+				} else if (settings.currentThemePlaylist === 'Backgrounds') {
 					handleThemeChange(
 						allThemes.filter(
 							(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
 						),
 						false,
 					);
-				} else if (currentThemePlaylist === 'No Backgrounds') {
+				} else if (settings.currentThemePlaylist === 'No Backgrounds') {
 					handleThemeChange(
 						allThemes.filter((a: any) =>
 							a.backgroundImage.toLowerCase().includes('none'),
@@ -119,22 +114,26 @@ function App() {
 	useEffect(() => {
 		if (
 			allThemes &&
-			themeName &&
+			settings.theme &&
 			personalData &&
 			Object.keys(personalData).length > 0 &&
 			isThemePlaylistsFetched
 		) {
-			if (currentThemePlaylist === 'All') {
-				if (themeName === 'random') {
+			Object.keys(personalData[0]).forEach((key: any) => {
+				updateSetting(key, personalData[0][key]);
+			});
+			if (settings.currentThemePlaylist === 'All') {
+				if (settings.theme === 'random') {
 					handleThemeChange(allThemes, false);
 				} else {
-					const temp = allThemes.find((t: Theme) => t.name === themeName);
+					const temp = allThemes.find((t: Theme) => t.name === settings.theme);
 					setTheme(temp);
 				}
-			} else if (currentThemePlaylist === 'Time of Day') {
+			} else if (settings.currentThemePlaylist === 'Time of Day') {
 				const themeList = JSON.parse(
-					themePlaylists?.find((t: ThemePlaylist) => t.name === currentThemePlaylist)
-						.themeList,
+					themePlaylists?.find(
+						(t: ThemePlaylist) => t.name === settings.currentThemePlaylist,
+					).themeList,
 				);
 				setTheme(
 					allThemes.find(
@@ -142,34 +141,35 @@ function App() {
 							t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
 					),
 				);
-			} else if (currentThemePlaylist === 'Backgrounds') {
+			} else if (settings.currentThemePlaylist === 'Backgrounds') {
 				handleThemeChange(
 					allThemes.filter((a: any) => !a.backgroundImage.toLowerCase().includes('none')),
 					false,
 				);
-			} else if (currentThemePlaylist === 'No Backgrounds') {
+			} else if (settings.currentThemePlaylist === 'No Backgrounds') {
 				handleThemeChange(
 					allThemes.filter((a: any) => a.backgroundImage.toLowerCase().includes('none')),
 					false,
 				);
 			} else {
 				const themeList = JSON.parse(
-					themePlaylists?.find((t: ThemePlaylist) => t.name === currentThemePlaylist)
-						.themeList,
+					themePlaylists?.find(
+						(t: ThemePlaylist) => t.name === settings.currentThemePlaylist,
+					).themeList,
 				);
 				const filteredThemes = allThemes.filter((t: Theme) => themeList.includes(t.id));
-				setThemeName('random');
+				updateSetting('theme', 'random');
 				handleThemeChange(filteredThemes, false);
 			}
 			setLoaded(true);
 		}
 	}, [
 		isAllThemesFetched,
-		themeName,
+		settings.theme,
 		allThemes,
-		currentThemePlaylist,
+		settings.currentThemePlaylist,
 		isThemePlaylistsFetched,
-		isPersonalDataFetched,
+		personalData,
 	]);
 	return (
 		<>
--- a/src/components/Applications/AppItem.tsx
+++ b/src/components/Applications/AppItem.tsx
@@ -57,7 +57,7 @@ export function AppItem({
 				h={height}
 				w={width}
 				duration={3}
-				beamMode={'conic'}
+				beamMode={'wedge'}
 				borderWidth={scale * 3}
 				borderOpacity={0.75}
 				size={(scale * 48) / (width / height < 2 ? 2 : 1)}
--- a/src/components/SettingsHeader.tsx
+++ b/src/components/SettingsHeader.tsx
@@ -3,6 +3,7 @@ import {
 	Button,
 	Group,
 	Highlight,
+	Menu,
 	Popover,
 	Stack,
 	Switch,
@@ -10,7 +11,8 @@ import {
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
-import { FiHelpCircle, FiLoader, FiPlus, FiX } from 'react-icons/fi';
+import { FaSort } from 'react-icons/fa';
+import { FiHelpCircle, FiPlus, FiX } from 'react-icons/fi';
 import {
 	actionIconClasses,
 	buttonClasses,
@@ -31,6 +33,9 @@ export function SettingsHeader({
 	searchPlaceholder,
 	isLoading,
 	setIsLoading,
+	sortBy,
+	setSortBy,
+	customSearchEnabled,
 }: {
 	setDragging: undefined | ((dragging: boolean) => void);
 	openModal: undefined | (() => void);
@@ -45,6 +50,9 @@ export function SettingsHeader({
 	searchPlaceholder: string | undefined;
 	isLoading: boolean;
 	setIsLoading: (isLoading: boolean) => void;
+	sortBy: string;
+	setSortBy: undefined | ((sortBy: string) => void);
+	customSearchEnabled: boolean;
 }) {
 	const { isMobile, theme } = useCommonHooks();
 	const [disabled, setDisabled] = useState(false);
@@ -123,10 +131,15 @@ export function SettingsHeader({
 				)}
 			</Group>
 			{searchValue !== undefined && (
-				<DebouncedInput
-					disabled={disabled}
+				<Group
+					gap={4}
 					w={isMobile ? undefined : '35%'}
 					pos={isMobile ? undefined : 'absolute'}
+				>
+					<DebouncedInput
+						disabled={disabled}
+						w={'90%'}
+						// pos={isMobile ? undefined : 'absolute'}
 						className={textInputClasses.default}
 						classNames={textInputClasses}
 						autoFocus={!isMobile}
@@ -151,9 +164,7 @@ export function SettingsHeader({
 								<ActionIcon
 									className={actionIconClasses.loadingSpinner}
 									classNames={actionIconClasses}
-							>
-								<FiLoader />
-							</ActionIcon>
+								/>
 							) : (
 								searchValue && (
 									<ActionIcon
@@ -167,8 +178,100 @@ export function SettingsHeader({
 							)
 						}
 					/>
+					{setSortBy !== undefined && !disabled && (
+						<Menu>
+							<Menu.Target>
+								<ActionIcon>
+									<FaSort />
+								</ActionIcon>
+							</Menu.Target>
+							<Menu.Dropdown>
+								<Menu.Label>Sort By</Menu.Label>
+								<Menu.Item
+									onClick={() => {
+										setSortBy('A>Z');
+									}}
+									style={{
+										color:
+											sortBy === 'A>Z'
+												? 'var(--mantine-color-background-0)'
+												: 'var(--mantine-color-primary-0)',
+										backgroundColor:
+											sortBy === 'A>Z' ? 'var(--mantine-color-primary-0)' : undefined,
+									}}
+								>
+									{'A>Z'}
+								</Menu.Item>
+								<Menu.Item
+									onClick={() => {
+										setSortBy('Z>A');
+									}}
+									style={{
+										color:
+											sortBy === 'Z>A'
+												? 'var(--mantine-color-background-0)'
+												: 'var(--mantine-color-primary-0)',
+										backgroundColor:
+											sortBy === 'Z>A' ? 'var(--mantine-color-primary-0)' : undefined,
+									}}
+								>
+									{'Z>A'}
+								</Menu.Item>
+								<Menu.Item
+									onClick={() => {
+										setSortBy('Newest');
+									}}
+									style={{
+										color:
+											sortBy === 'Newest'
+												? 'var(--mantine-color-background-0)'
+												: 'var(--mantine-color-primary-0)',
+										backgroundColor:
+											sortBy === 'Newest' ? 'var(--mantine-color-primary-0)' : undefined,
+									}}
+								>
+									{'Newest'}
+								</Menu.Item>
+								<Menu.Item
+									onClick={() => {
+										setSortBy('Oldest');
+									}}
+									style={{
+										color:
+											sortBy === 'Oldest'
+												? 'var(--mantine-color-background-0)'
+												: 'var(--mantine-color-primary-0)',
+										backgroundColor:
+											sortBy === 'Oldest' ? 'var(--mantine-color-primary-0)' : undefined,
+									}}
+								>
+									{'Oldest'}
+								</Menu.Item>
+								{customSearchEnabled && (
+									<Menu.Item
+										onClick={() => {
+											setSortBy('Custom');
+										}}
+										style={{
+											color:
+												sortBy === 'Custom'
+													? 'var(--mantine-color-background-0)'
+													: 'var(--mantine-color-primary-0)',
+											backgroundColor:
+												sortBy === 'Custom'
+													? 'var(--mantine-color-primary-0)'
+													: undefined,
+										}}
+									>
+										{'Custom'}
+									</Menu.Item>
 								)}
-			{setDragging && (
+							</Menu.Dropdown>
+						</Menu>
+					)}
+				</Group>
+			)}
+			{setDragging && sortBy === 'Custom' && (
 				<Switch
 					className={switchClasses.default}
 					classNames={switchClasses}
--- a/src/components/WeatherModal/CurrentWeather.tsx
+++ b/src/components/WeatherModal/CurrentWeather.tsx
@@ -19,6 +19,7 @@ export default function CurrentWeather({
 		<>
 			{current && (
 				<Card
+					w={'100%'}
 					style={{
 						color: 'var(--mantine-color-primary-0)',
 						backgroundColor: 'var(--mantine-color-search-0)',
--- a/src/components/WeatherModal/ExtendedForecastDetails.tsx
+++ b/src/components/WeatherModal/ExtendedForecastDetails.tsx
@@ -1,7 +1,7 @@
 import { ActionIcon, Box, Card, Group, Stack, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
-import { FaLocationArrow, FaSun, FaWind } from 'react-icons/fa';
-import { FaDroplet, FaX } from 'react-icons/fa6';
+import { FaArrowLeft, FaLocationArrow, FaSun, FaWind } from 'react-icons/fa';
+import { FaDroplet } from 'react-icons/fa6';
 import { WiRain, WiSunrise, WiSunset } from 'react-icons/wi';
 import { textClasses } from 'styles';
 import { WeatherCodes } from 'types';
@@ -32,29 +32,12 @@ export default function ExtendedForecastDetails({
 				borderRadius: '8px',
 				overflow: 'visible',
 				cursor: 'default',
-				boxShadow:
-					'15px 15px 2px color-mix(in srgb, var(--mantine-color-border-0), transparent 50%)',
 			}}
 			onClick={(e) => {
 				e.stopPropagation();
 			}}
 			p={0}
 		>
-			<ActionIcon
-				pos={'absolute'}
-				top={-12}
-				right={-12}
-				style={{
-					borderRadius: '100%',
-					boxShadow: '2px 2px var(--mantine-color-search-0)',
-				}}
-				onClick={() => {
-					setSelectedDay(undefined);
-					setSelectedHourly(undefined);
-				}}
-			>
-				<FaX />
-			</ActionIcon>
 			<Group
 				w={'100%'}
 				justify='center'
@@ -66,11 +49,25 @@ export default function ExtendedForecastDetails({
 					borderTopRightRadius: '8px',
 				}}
 			>
+				<ActionIcon
+					pos={'absolute'}
+					left={16}
+					style={{
+						borderRadius: '100%',
+						boxShadow: '2px 2px var(--mantine-color-search-0)',
+					}}
+					onClick={() => {
+						setSelectedDay(undefined);
+						setSelectedHourly(undefined);
+					}}
+				>
+					<FaArrowLeft />
+				</ActionIcon>
 				<Text fw={600} fz={'1.5rem'}>
-					{selectedDay.time.toLocaleDateString('en-US', { weekday: 'long' })}
+					{selectedDay?.time.toLocaleDateString('en-US', { weekday: 'long' })}
 				</Text>
 				<Text fw={600} fz={'1.5rem'}>
-					{selectedDay.time.toLocaleDateString()}
+					{selectedDay?.time.toLocaleDateString()}
 				</Text>
 			</Group>
 			<Stack align='center' p={16}>
@@ -95,8 +92,8 @@ export default function ExtendedForecastDetails({
 								leftSide={<Text>Feels like</Text>}
 								rightSide={
 									<Text>
-										{selectedDay.apparentTemperatureMax?.toFixed(0) ??
-											selectedDay.temperatureMax?.toFixed(0)}
+										{selectedDay?.apparentTemperatureMax?.toFixed(0) ??
+											selectedDay?.temperatureMax?.toFixed(0)}
 										°<sup>F</sup>
 									</Text>
 								}
@@ -105,12 +102,12 @@ export default function ExtendedForecastDetails({
 						</Box>
 						<Group pos={'relative'}>
 							<Text fz={isMobile ? '5rem' : '7rem'} fw={400} style={{ lineHeight: 1 }}>
-								{selectedDay.temperatureMax?.toFixed(0)}
+								{selectedDay?.temperatureMax?.toFixed(0)}
 								<sup style={{ fontSize: '3rem' }}>°F</sup>
 							</Text>

 							<Text style={{ lineHeight: 1 }} pos={'absolute'} bottom={20} right={0}>
-								/ {selectedDay.temperatureMin?.toFixed(0)}°<sup>F</sup>
+								/ {selectedDay?.temperatureMin?.toFixed(0)}°<sup>F</sup>
 							</Text>
 							<Box
 								style={{
@@ -131,7 +128,7 @@ export default function ExtendedForecastDetails({
 						</Group>
 						<Group
 							justify={
-								WeatherCodes[Number(selectedDay.weatherCode)].length > 25
+								WeatherCodes[Number(selectedDay?.weatherCode)]?.length > 25
 									? 'flex-start'
 									: 'center'
 							}
@@ -146,21 +143,21 @@ export default function ExtendedForecastDetails({
 						>
 							<Text
 								className={
-									WeatherCodes[Number(selectedDay.weatherCode)].length > 25
+									WeatherCodes[Number(selectedDay?.weatherCode)]?.length > 25
 										? textClasses.autoScrollText
 										: undefined
 								}
 								classNames={textClasses}
 								style={{ lineHeight: 1 }}
 							>
-								{selectedDay.temperature_2m?.toFixed(0) === '69'
+								{selectedDay?.temperature_2m?.toFixed(0) === '69'
 									? 'Nice'
-									: WeatherCodes[Number(selectedDay.weatherCode)]}
+									: WeatherCodes[Number(selectedDay?.weatherCode)]}
 							</Text>
 						</Group>
 					</Stack>
 					<Stack>
-						<WeatherIcon size={'xl'} code={selectedDay.weatherCode} />
+						<WeatherIcon size={'xl'} code={selectedDay?.weatherCode} />
 					</Stack>
 				</Group>

@@ -174,7 +171,7 @@ export default function ExtendedForecastDetails({
 										<Text>Wind</Text>
 									</Group>
 								}
-								rightSide={<Text>{selectedDay.windSpeed?.toFixed(0)}mph</Text>}
+								rightSide={<Text>{selectedDay?.windSpeed?.toFixed(0)}mph</Text>}
 								highlight='right'
 							/>
 							<WeatherFeaturePill
@@ -184,7 +181,7 @@ export default function ExtendedForecastDetails({
 										<Text>Gusts</Text>
 									</Group>
 								}
-								rightSide={<Text>{selectedDay.windGusts?.toFixed(0)}mph</Text>}
+								rightSide={<Text>{selectedDay?.windGusts?.toFixed(0)}mph</Text>}
 								highlight='right'
 							/>
 						</Stack>
@@ -203,11 +200,11 @@ export default function ExtendedForecastDetails({
 								<FaLocationArrow
 									style={{
 										color: 'var(--mantine-color-accent-0)',
-										transform: `rotate(${-48 + (selectedDay.windDirection || 0)}deg)`,
+										transform: `rotate(${-48 + (selectedDay?.windDirection || 0)}deg)`,
 									}}
 								/>
 							</Box>
-							<Text fz={12}>{selectedDay.windDirection?.toFixed(0)}°</Text>
+							<Text fz={12}>{selectedDay?.windDirection?.toFixed(0)}°</Text>
 						</Stack>
 					</Group>
 					<Group justify='space-between'>
@@ -229,7 +226,7 @@ export default function ExtendedForecastDetails({
 									}}
 								/>
 							</Box>
-							<Text fz={12}>UV {selectedDay.uvIndexMax?.toFixed(0)}</Text>
+							<Text fz={12}>UV {selectedDay?.uvIndexMax?.toFixed(0)}</Text>
 						</Stack>
 						<Stack gap={4}>
 							<WeatherFeaturePill
@@ -246,7 +243,7 @@ export default function ExtendedForecastDetails({
 										/>
 									</Group>
 								}
-								rightSide={<Text>{selectedDay.sunrise}</Text>}
+								rightSide={<Text>{selectedDay?.sunrise}</Text>}
 								highlight='left'
 							/>
 							<WeatherFeaturePill
@@ -263,7 +260,7 @@ export default function ExtendedForecastDetails({
 										/>
 									</Group>
 								}
-								rightSide={<Text>{selectedDay.sunset}</Text>}
+								rightSide={<Text>{selectedDay?.sunset}</Text>}
 								highlight='left'
 							/>
 						</Stack>
@@ -297,7 +294,7 @@ export default function ExtendedForecastDetails({
 									<Text>Precipitation %</Text>
 								</Group>
 							}
-							rightSide={<Text>{selectedDay.precipitationProbability}%</Text>}
+							rightSide={<Text>{selectedDay?.precipitationProbability}%</Text>}
 							highlight='right'
 						/>
 						<WeatherFeaturePill
@@ -307,7 +304,7 @@ export default function ExtendedForecastDetails({
 									<Text>Precipitation In.</Text>
 								</Group>
 							}
-							rightSide={<Text>{selectedDay.precipitationSum.toFixed(2)} in.</Text>}
+							rightSide={<Text>{selectedDay?.precipitationSum.toFixed(2)} in.</Text>}
 							highlight='right'
 						/>
 					</Stack>
--- a/src/components/WeatherModal/WeatherGraphs.tsx
+++ b/src/components/WeatherModal/WeatherGraphs.tsx
@@ -82,7 +82,7 @@ export default function WeatherGraphs({
 				</Group>
 			)}
 			<ResponsiveContainer width={'100%'} height={150}>
-				<ComposedChart data={hourlyForecast}>
+				<ComposedChart data={hourlyForecast} responsive>
 					<XAxis
 						type='category'
 						stroke={'var(--mantine-color-primary-0)'}
@@ -129,7 +129,7 @@ export default function WeatherGraphs({
 				</ComposedChart>
 			</ResponsiveContainer>
 			<ResponsiveContainer width={'100%'} height={150}>
-				<AreaChart data={hourlyForecast}>
+				<AreaChart data={hourlyForecast} responsive>
 					<defs>
 						<linearGradient id={colorPrecipitation} x1='0' y1='0' x2='0' y2='1'>
 							<stop
@@ -160,7 +160,7 @@ export default function WeatherGraphs({
 						type='category'
 						stroke={'var(--mantine-color-primary-0)'}
 						dataKey={(data) => {
-							return new Date(data.startTime).toLocaleTimeString('en-US');
+							return new Date(data.startTime).toLocaleString('en-US');
 						}}
 					/>
 					<YAxis stroke={'var(--mantine-color-primary-0)'} unit={'%'} domain={[0, 100]} />
--- a/src/components/WeatherModal/WeatherModal.tsx
+++ b/src/components/WeatherModal/WeatherModal.tsx
@@ -1,4 +1,4 @@
-import { Group, Modal, Overlay, Stack, Text } from '@mantine/core';
+import { Box, Group, Modal, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses } from 'styles';
@@ -19,7 +19,7 @@ export function WeatherModal({
 	handleResetSearch: () => void;
 	closeWeatherModal: () => void;
 }) {
-	const { isMobile, currentUser } = useCommonHooks();
+	const { isMobile, settings } = useCommonHooks();
 	const [selectedDay, setSelectedDay] = useState<any>(undefined);
 	const [selectedHourly, setSelectedHourly] = useState<any>(undefined);

@@ -79,32 +79,34 @@ export function WeatherModal({
 								Weather Forecast for{' '}
 							</Text>
 							<Text fz={'1.125rem'} fw={600}>
-								{currentUser.physicalAddress}
+								{settings.physicalAddress}
 							</Text>
 						</Group>
 					</Modal.Title>
 					<Modal.CloseButton />
 				</Modal.Header>
-				<Modal.Body m={0}>
-					<Stack w={'100%'} h={'100%'} pos={'relative'}>
-						{selectedDay && (
-							<Overlay
-								h={'100%'}
-								opacity={1}
-								blur={10}
-								onClick={() => setSelectedDay(undefined)}
+				<Modal.Body style={{ overflowX: 'hidden', whiteSpace: 'nowrap' }}>
+					<Group w={'200%'} gap={0}>
+						<Box
+							w={'50%'}
 							style={{
-									display: 'flex',
-									justifyContent: 'center',
-									alignItems: 'center',
-									backgroundColor: 'color-mix(in srgb, black, transparent 50%)',
+								transition: 'all 0.3s ease-in-out',
+								transform: selectedDay ? 'translateX(-110%)' : 'translateX(0%)',
 							}}
 						>
-								<Stack
-									w={'65%'}
-									align={'center'}
-									justify={'center'}
-									style={{ cursor: 'pointer' }}
+							<CurrentWeather current={current} />
+							<WeatherGraphs hourly={current?.hourly} />
+							<ExtendedForecastCard
+								daily={current?.daily}
+								setSelectedDay={setSelectedDay}
+							/>
+						</Box>
+						<Box
+							w={'50%'}
+							style={{
+								transition: 'all 0.3s ease-in-out',
+								transform: selectedDay ? 'translateX(-100%)' : 'translateX(10%)',
+							}}
 						>
 							<ExtendedForecastDetails
 								selectedDay={selectedDay}
@@ -112,16 +114,8 @@ export function WeatherModal({
 								selectedHourly={selectedHourly}
 								setSelectedHourly={setSelectedHourly}
 							/>
-								</Stack>
-							</Overlay>
-						)}
-						<CurrentWeather current={current} />
-						<WeatherGraphs hourly={current?.hourly} />
-						<ExtendedForecastCard
-							daily={current?.daily}
-							setSelectedDay={setSelectedDay}
-						/>
-					</Stack>
+						</Box>
+					</Group>
 				</Modal.Body>
 			</Modal.Content>
 		</Modal.Root>
--- a/src/hooks/useAPI.tsx
+++ b/src/hooks/useAPI.tsx
@@ -306,23 +306,53 @@ export function useMutationAPI() {
 			body: object | undefined | null;
 		}) => callEndpoint(method, endpoint, body),
 		onSuccess: (_, { endpoint }) => {
-			queryClient.refetchQueries({
+			queryClient
+				.refetchQueries({
 					queryKey: ['GET', endpoint],
+				})
+				.catch((error) => {
+					console.error(error);
 				});
 			endpoint === 'api/bookmarkOrder' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarks'] });
+				queryClient
+					.refetchQueries({ queryKey: ['GET', 'api/bookmarks'] })
+					.catch((error) => {
+						console.error(error);
+					});
 			endpoint === 'api/bookmarkCategoryOrder' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] });
+				queryClient
+					.refetchQueries({ queryKey: ['GET', 'api/bookmarkCategories'] })
+					.catch((error) => {
+						console.error(error);
+					});
 			endpoint === 'api/applicationOrder' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/applications'] });
+				queryClient
+					.refetchQueries({ queryKey: ['GET', 'api/applications'] })
+					.catch((error) => {
+						console.error(error);
+					});
 			endpoint === 'api/applications' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/enabledApplications'] });
+				queryClient
+					.refetchQueries({ queryKey: ['GET', 'api/enabledApplications'] })
+					.catch((error) => {
+						console.error(error);
+					});
 			endpoint === 'api/bookmarks' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/themes'] });
+				queryClient.refetchQueries({ queryKey: ['GET', 'api/themes'] }).catch((error) => {
+					console.error(error);
+				});
 			endpoint === 'api/providers' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/providers/default'] });
+				queryClient
+					.refetchQueries({ queryKey: ['GET', 'api/providers/default'] })
+					.catch((error) => {
+						console.error(error);
+					});
 			endpoint === 'api/personalData' &&
-				queryClient.refetchQueries({ queryKey: ['GET', 'api/personalData'] });
+				queryClient
+					.refetchQueries({ queryKey: ['GET', 'api/personalData'] })
+					.catch((error) => {
+						console.error(error);
+					});
 		},
 	});
 }
@@ -426,9 +456,21 @@ export function useFileUploadAPI() {
 		}) => callEndpoint(method, endpoint, body),
 		onMutate: () => {},
 		onSuccess: (_variables) => {
-			queryClient.invalidateQueries({ queryKey: ['GET', 'api/backgrounds'] });
-			queryClient.invalidateQueries({ queryKey: ['GET', 'api/themes'] });
-			queryClient.invalidateQueries({ queryKey: ['GET', 'api/themePlaylists'] });
+			queryClient
+				.invalidateQueries({ queryKey: ['GET', 'api/backgrounds'] })
+				.catch((error) => {
+					console.error(error);
+				});
+			queryClient
+				.invalidateQueries({ queryKey: ['GET', 'api/themes'] })
+				.catch((error) => {
+					console.error(error);
+				});
+			queryClient
+				.invalidateQueries({ queryKey: ['GET', 'api/themePlaylists'] })
+				.catch((error) => {
+					console.error(error);
+				});
 		},
 	});
 }
--- a/src/hooks/useCommonHooks.ts
+++ b/src/hooks/useCommonHooks.ts
@@ -2,98 +2,25 @@ import { useLocalStorage } from '@mantine/hooks';
 import { appTheme } from 'contexts';
 import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
-import type { Location, Theme, User } from 'types';
+import type { Settings, Theme } from 'types';
 import { useMutationAPI } from './useAPI';

-export function useCommonHooks() {
-	const { mutateAsync } = useMutationAPI();
-	const isMobile = globalThis.matchMedia('(max-width: 600px)').matches;
-	const [theme, setTheme] = useAtom<Theme>(appTheme);
-	const [themeName, setThemeName] = useLocalStorage<string>({
-		key: 'theme',
-		defaultValue: 'random',
-	});
-	const [appFilter, setAppFilter] = useLocalStorage<string[]>({
-		key: 'appFilter',
-		defaultValue: ['All'],
-	});
-	const [appSort, setAppSort] = useLocalStorage<string>({
-		key: 'appSort',
-		defaultValue: 'A>Z',
-	});
-	const [appDensity, setAppDensity] = useLocalStorage<number>({
-		key: 'appDensity',
-		defaultValue: 6,
-	});
-	const [appScale, setAppScale] = useLocalStorage<number>({
-		key: 'appScale',
-		defaultValue: 1,
-	});
-	const [bookmarkSort, setBookmarkSort] = useLocalStorage<string>({
-		key: 'bookmarkSort',
-		defaultValue: 'A>Z',
-	});
-	const [bookmarkFilter, setBookmarkFilter] = useLocalStorage<string[]>({
-		key: 'bookmarkFilter',
-		defaultValue: ['All'],
-	});
-	const [bookmarkDensity, setBookmarkDensity] = useLocalStorage<number>({
-		key: 'bookmarkDensity',
-		defaultValue: 6,
-	});
-	const [bookmarkScale, setBookmarkScale] = useLocalStorage<number>({
-		key: 'bookmarkScale',
-		defaultValue: 1,
-	});
-	const [currentTheme, setCurrentTheme] = useLocalStorage<string>({
-		key: 'theme',
-		defaultValue: 'random',
-	});
-	const [currentThemePlaylist, setCurrentThemePlaylist] = useLocalStorage<string>({
-		key: 'themePlaylist',
-		defaultValue: 'All',
-	});
-	const [defaultProviderLabel, setDefaultProviderLabel] = useLocalStorage<string>({
-		key: 'providerLabel',
-		defaultValue: 'Google Search',
-	});
-	const [defaultProviderURL, setDefaultProviderURL] = useLocalStorage<string>({
-		key: 'providerURL',
-		defaultValue: 'https://www.google.com/search?q=',
-	});
-	const [defaultProviderPrefix, setDefaultProviderPrefix] = useLocalStorage<string>({
-		key: 'providerPrefix',
-		defaultValue: '/g',
-	});
-	const [defaultProviderIcon, setDefaultProviderIcon] = useLocalStorage<string>({
-		key: 'providerIcon',
-		defaultValue: 'FaGoogle',
-	});
-	const [timeFormat, setTimeFormat] = useLocalStorage<string>({
-		key: 'timeFormat',
-		defaultValue: '12h',
-	});
-	const [searchValue, setSearchValue] = useState<string>('');
-	const [providerLabel, setProviderLabel] = useState(defaultProviderLabel);
-	const [providerURL, setProviderURL] = useState(defaultProviderURL);
-	const [providerPrefix, setProviderPrefix] = useState(defaultProviderPrefix);
-	const [providerIcon, setProviderIcon] = useState(defaultProviderIcon);
-
-	useEffect(() => {
-		setProviderLabel(defaultProviderLabel);
-		setProviderURL(defaultProviderURL);
-		setProviderPrefix(defaultProviderPrefix);
-		setProviderIcon(defaultProviderIcon);
-	}, [
-		defaultProviderLabel,
-		defaultProviderURL,
-		defaultProviderPrefix,
-		defaultProviderIcon,
-	]);
-
-	const [currentUser, setCurrentUser] = useLocalStorage<User>({
-		key: 'user',
-		defaultValue: {
+const initialSettings: Settings = {
+	theme: 'random',
+	appFilter: ['All'],
+	appSort: 'A>Z',
+	appDensity: 6,
+	appScale: 1,
+	bookmarkSort: 'A>Z',
+	bookmarkFilter: ['All'],
+	bookmarkDensity: 6,
+	bookmarkScale: 1,
+	currentThemePlaylist: 'All',
+	defaultProviderLabel: 'Google Search',
+	defaultProviderURL: 'https://www.google.com/search?q=',
+	defaultProviderPrefix: '/g',
+	defaultProviderIcon: 'FaGoogle',
+	timeFormat: '12h',
 	firstName: 'First',
 	lastName: 'Last',
 	nickname: 'Boss',
@@ -103,25 +30,52 @@ export function useCommonHooks() {
 	enableWol: 0,
 	enableGuacamole: 0,
 	guacamoleHost: 'https://domain.example.com/guacamole',
-		},
-	});
-	const [currentLocation, setCurrentLocation] = useLocalStorage<Location>({
-		key: 'location',
-		defaultValue: {
 	lat: 29.750950134386066,
 	lon: -95.36220654860034,
-		},
+	messageSettingsSort: 'Oldest',
+	appSettingsSort: 'Custom',
+	bookmarkSettingsSort: 'Custom',
+	themesSettingsSort: 'Oldest',
+	providerSettingsSort: 'Oldest',
+	wolClientsSettingsSort: 'A>Z',
+	guacamoleClientsSettingsSort: 'A>Z',
+};
+
+export function useCommonHooks() {
+	const { mutateAsync } = useMutationAPI();
+	const isMobile = globalThis.matchMedia('(max-width: 600px)').matches;
+	const [theme, setTheme] = useAtom<Theme>(appTheme);
+
+	const [settings, setSettings] = useLocalStorage<Settings>({
+		key: 'trigger_settings',
+		defaultValue: initialSettings,
 	});

-	const urlPattern = new RegExp(
-		String.raw`^(https?:\/\/)?` +
-			String.raw`((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|` +
-			String.raw`((\d{1,3}\.){3}\d{1,3}))` +
-			String.raw`(\:\d+)?(\/[-a-z\d%_.~+]*)*` +
-			String.raw`(\?[;&a-z\d%_.~+=-]*)?` +
-			String.raw`(\#[-a-z\d_]*)?$`,
-		'i',
-	);
+	// Helper to update specific keys without wiping the rest of the object
+	const updateSetting = <K extends keyof Settings>(key: K, value: Settings[K]) => {
+		setSettings((prev) => ({ ...prev, [key]: value }));
+	};
+
+	const [searchValue, setSearchValue] = useState<string>('');
+	const [providerLabel, setProviderLabel] = useState(settings.defaultProviderLabel);
+	const [providerURL, setProviderURL] = useState(settings.defaultProviderURL);
+	const [providerPrefix, setProviderPrefix] = useState(settings.defaultProviderPrefix);
+	const [providerIcon, setProviderIcon] = useState(settings.defaultProviderIcon);
+
+	useEffect(() => {
+		setProviderLabel(settings.defaultProviderLabel);
+		setProviderURL(settings.defaultProviderURL);
+		setProviderPrefix(settings.defaultProviderPrefix);
+		setProviderIcon(settings.defaultProviderIcon);
+	}, [
+		settings.defaultProviderLabel,
+		settings.defaultProviderURL,
+		settings.defaultProviderPrefix,
+		settings.defaultProviderIcon,
+	]);
+
+	const urlPattern =
+		/^(https?:\/\/)?([\w.-]+)\.([a-z]{2,})(:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(#[-a-z\d_]*)?$/i;

 	const textShadowStyle =
 		'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)';
@@ -139,22 +93,24 @@ export function useCommonHooks() {
 		const enabled = themes
 			.filter((t: Theme) => t.randomEnabled === 1)
 			.filter((t: Theme) => t.name !== theme.name);
-		if (enabled.length === 0 && currentThemePlaylist === 'All') {
+		if (enabled.length === 0 && settings.currentThemePlaylist === 'All') {
 			setTheme(themes[0]);
-			save && setThemeName(themes[0].name);
-		} else if (currentThemePlaylist === 'All') {
+			if (save) updateSetting('theme', themes[0].name);
+		} else if (settings.currentThemePlaylist === 'All') {
 			const index = Math.floor(Math.random() * enabled.length);
 			setTheme(enabled[index]);
-			save && setThemeName(enabled[index].name);
+			if (save) updateSetting('theme', enabled[index].name);
 		} else {
 			const index = Math.floor(Math.random() * themes.length);
 			setTheme(themes[index]);
-			save && setThemeName(themes[index].name);
+			if (save) updateSetting('theme', themes[index].name);
 		}
 	};

 	const handleDelete = (item: any, endpoint: string) => {
-		mutateAsync({ method: 'DELETE', endpoint: endpoint, body: item });
+		mutateAsync({ method: 'DELETE', endpoint: endpoint, body: item }).catch((error) => {
+			console.error(error);
+		});
 	};

 	const iconFilter = (selectedTheme?: Theme) => {
@@ -178,7 +134,6 @@ export function useCommonHooks() {
 	const getObjectDiff = (original: any, current: any) => {
 		const changes: any = {};

-		// Check current object's properties
 		for (const [key, value] of Object.entries(current)) {
 			if (!(key in original)) {
 				changes[key] = {
@@ -191,7 +146,6 @@ export function useCommonHooks() {
 			const originalValue = original[key];
 			const currentValue = value;

-			// Handle different types of comparisons
 			if (
 				originalValue !== currentValue &&
 				String(originalValue) !== String(currentValue) &&
@@ -204,7 +158,6 @@ export function useCommonHooks() {
 			}
 		}

-		// Check for removed properties
 		for (const key of Object.keys(original)) {
 			if (!(key in current)) {
 				changes[key] = {
@@ -218,6 +171,8 @@ export function useCommonHooks() {
 	};

 	return {
+		settings,
+		updateSetting,
 		isMobile,
 		theme,
 		setTheme,
@@ -228,28 +183,6 @@ export function useCommonHooks() {
 		getObjectDiff,
 		handleThemeChange,
 		handleDelete,
-		themeName,
-		setThemeName,
-		appFilter,
-		setAppFilter,
-		appSort,
-		setAppSort,
-		appDensity,
-		setAppDensity,
-		appScale,
-		setAppScale,
-		bookmarkSort,
-		setBookmarkSort,
-		bookmarkFilter,
-		setBookmarkFilter,
-		bookmarkDensity,
-		setBookmarkDensity,
-		bookmarkScale,
-		setBookmarkScale,
-		currentTheme,
-		setCurrentTheme,
-		currentThemePlaylist,
-		setCurrentThemePlaylist,
 		searchValue,
 		setSearchValue,
 		providerLabel,
@@ -260,20 +193,6 @@ export function useCommonHooks() {
 		setProviderPrefix,
 		providerIcon,
 		setProviderIcon,
-		defaultProviderLabel,
-		setDefaultProviderLabel,
-		defaultProviderURL,
-		setDefaultProviderURL,
-		defaultProviderPrefix,
-		setDefaultProviderPrefix,
-		defaultProviderIcon,
-		setDefaultProviderIcon,
-		timeFormat,
-		setTimeFormat,
-		currentUser,
-		setCurrentUser,
-		currentLocation,
-		setCurrentLocation,
 		textShadowStyle,
 		largeTextShadowStyle,
 	};
--- a/src/pages/homepage/Homepage.tsx
+++ b/src/pages/homepage/Homepage.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Stack } from '@mantine/core';
+import { Box, Stack } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useOpenMeteoAPI, useOSMAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
@@ -15,14 +15,7 @@ import {
 } from './components';

 export function Homepage() {
-	const {
-		appFilter,
-		bookmarkFilter,
-		isMobile,
-		setCurrentUser,
-		currentLocation,
-		setCurrentLocation,
-	} = useCommonHooks();
+	const { isMobile, settings, updateSetting } = useCommonHooks();
 	const dateOptions: Intl.DateTimeFormatOptions = isMobile
 		? {}
 		: {
@@ -34,7 +27,7 @@ export function Homepage() {

 	const date = new Date().toLocaleDateString('en-US', dateOptions);

-	const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({
+	const { data: personalData } = useQueryAPI({
 		endpoint: 'api/personalData',
 	});
 	const { data: messageData } = useQueryAPI({
@@ -44,8 +37,8 @@ export function Homepage() {
 		address: personalData?.[0]?.physicalAddress,
 	});
 	const { data: meteoWeather } = useOpenMeteoAPI({
-		lat: weatherMetadata?.[0].lat ?? currentLocation.lat,
-		lon: weatherMetadata?.[0].lon ?? currentLocation.lon,
+		lat: weatherMetadata?.[0].lat ?? settings.lat,
+		lon: weatherMetadata?.[0].lon ?? settings.lon,
 	});

 	const personal: PersonalData = personalData?.[0];
@@ -59,11 +52,6 @@ export function Homepage() {
 	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
 		useDisclosure(false);

-	useEffect(() => {
-		if (personalData && personalIsFetched) {
-			setCurrentUser(personalData[0]);
-		}
-	}, [personalData, personalIsFetched]);
 	useEffect(() => {
 		if (personal) {
 			setDisplayedGreeting(() => {
@@ -87,21 +75,23 @@ export function Homepage() {
 	useEffect(() => {
 		if (meteoWeather) {
 			setMeteoCurrent(meteoWeather);
-			setCurrentLocation({
-				lat: weatherMetadata?.[0].lat,
-				lon: weatherMetadata?.[0].lon,
-			});
+			updateSetting('lat', weatherMetadata?.[0].lat);
+			updateSetting('lon', weatherMetadata?.[0].lon);
 		}
 	}, [meteoWeather]);

 	return (
 		<Stack
 			gap={0}
-			h={appFilter.length > 0 || bookmarkFilter.length > 0 ? undefined : '100%'}
+			h={
+				settings.appFilter.length > 0 || settings.bookmarkFilter.length > 0
+					? undefined
+					: '100%'
+			}
 			className={stackClasses.containerStack}
 			justify='center'
 		>
-			{appFilter.length > 0 || bookmarkFilter.length > 0 ? (
+			{settings.appFilter.length > 0 || settings.bookmarkFilter.length > 0 ? (
 				<>
 					<Search
 						current={meteoCurrent}
@@ -120,16 +110,16 @@ export function Homepage() {
 						current={meteoCurrent}
 						openWeatherModal={openWeatherModal}
 					/>
-					<Applications contentType={appFilter} />
-					<Bookmarks contentType={bookmarkFilter} />
+					<Applications contentType={settings.appFilter} />
+					<Bookmarks contentType={settings.bookmarkFilter} />
 				</>
 			) : (
 				<Box h={'100%'} w={'100%'}>
 					<Stack align='center'>
 						<LargeHeader greet={displayedGreeting} date={date} />
-						<Grid grow columns={24} pos={'absolute'} bottom={'1rem'}>
+						<Box w={'860px'} pos={'absolute'} bottom={'1rem'}>
 							{meteoCurrent && <CurrentWeather current={meteoCurrent} />}
-						</Grid>
+						</Box>
 					</Stack>
 					<Search
 						current={meteoCurrent}
--- a/src/pages/homepage/components/Applications/Applications.tsx
+++ b/src/pages/homepage/components/Applications/Applications.tsx
@@ -8,10 +8,10 @@ export function Applications({ contentType }: { contentType: string[] }) {
 	const { data: applicationData } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
-	const { appSort, appDensity, appScale, theme, textShadowStyle } = useCommonHooks();
+	const { settings, theme, textShadowStyle } = useCommonHooks();
 	const applications: Application[] = applicationData
 		?.sort((a: Application, b: Application) => {
-			switch (appSort) {
+			switch (settings.appSort) {
 				case 'A>Z':
 					return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
 				case 'Z>A':
@@ -54,7 +54,7 @@ export function Applications({ contentType }: { contentType: string[] }) {
 						style={{
 							gap: '.25rem',
 							display: 'grid',
-							gridTemplateColumns: `repeat(${appDensity}, 1fr)`,
+							gridTemplateColumns: `repeat(${settings.appDensity}, 1fr)`,
 						}}
 					>
 						{applications?.map((application: Application) => {
@@ -65,7 +65,7 @@ export function Applications({ contentType }: { contentType: string[] }) {
 									url={application.url}
 									icon={application.icon}
 									enabled={application.enabled}
-									scale={appScale}
+									scale={settings.appScale}
 									linksActive
 								/>
 							);
--- a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx
+++ b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx
@@ -11,15 +11,14 @@ export function Bookmarks({ contentType }: { contentType: string[] }) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/bookmarkCategories',
 	});
-	const { bookmarkSort, bookmarkDensity, bookmarkScale, theme, textShadowStyle } =
-		useCommonHooks();
+	const { settings, theme, textShadowStyle } = useCommonHooks();
 	const groupList: BookmarkGroup[] = groupData?.map((category: BookmarkGroup) => {
 		return category;
 	});
 	const bookmarks: Bookmark[] = bookmarkData || [];
 	const groups: BookmarkGroup[] = groupList
 		?.toSorted((a: BookmarkGroup, b: BookmarkGroup) => {
-			switch (bookmarkSort) {
+			switch (settings.bookmarkSort) {
 				case 'A>Z':
 					return a.categoryName.toLocaleLowerCase() > b.categoryName.toLocaleLowerCase()
 						? 1
@@ -71,7 +70,7 @@ export function Bookmarks({ contentType }: { contentType: string[] }) {
 							style={{
 								display: 'grid',
 								gridRowGap: '0px',
-								gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
+								gridTemplateColumns: `repeat(${settings.bookmarkDensity}, 1fr)`,
 							}}
 						>
 							{groups
@@ -88,7 +87,7 @@ export function Bookmarks({ contentType }: { contentType: string[] }) {
 												(bookmark: Bookmark) =>
 													bookmark.category === category.categoryName,
 											)}
-											bookmarkScale={bookmarkScale}
+											bookmarkScale={settings.bookmarkScale}
 										/>
 									);
 								})}
--- a/src/pages/homepage/components/Header/Header.tsx
+++ b/src/pages/homepage/components/Header/Header.tsx
@@ -18,13 +18,12 @@ export function Header({
 	const [time, setTime] = useState(new Date());
 	const {
 		isMobile,
-		currentUser,
 		fixDigits,
 		theme,
 		textShadowStyle,
 		largeTextShadowStyle,
-		timeFormat,
-		setTimeFormat,
+		settings,
+		updateSetting,
 	} = useCommonHooks();

 	useEffect(() => {
@@ -51,12 +50,12 @@ export function Header({
 					}}
 				>
 					{greet
-						?.replace('$firstName', currentUser.firstName)
-						.replace('$lastName', currentUser.lastName)
-						.replace('$nickname', currentUser.nickname)
-						.replace('$^firstName', currentUser.firstName.toUpperCase())
-						.replace('$^lastName', currentUser.lastName.toUpperCase())
-						.replace('$^nickname', currentUser.nickname?.toUpperCase())}
+						?.replace('$firstName', settings.firstName)
+						.replace('$lastName', settings.lastName)
+						.replace('$nickname', settings.nickname)
+						.replace('$^firstName', settings.firstName.toUpperCase())
+						.replace('$^lastName', settings.lastName.toUpperCase())
+						.replace('$^nickname', settings.nickname?.toUpperCase())}
 				</Text>
 			</Stack>
 			<Stack
@@ -123,10 +122,12 @@ export function Header({
 							textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 						}}
 						onClick={() =>
-							timeFormat === '12h' ? setTimeFormat('24h') : setTimeFormat('12h')
+							settings.timeFormat === '12h'
+								? updateSetting('timeFormat', '24h')
+								: updateSetting('timeFormat', '12h')
 						}
 					>
-						{timeFormat === '12h'
+						{settings.timeFormat === '12h'
 							? `${
 									time.getHours() === 0
 										? 12
--- a/src/pages/homepage/components/Header/LargeHeader.tsx
+++ b/src/pages/homepage/components/Header/LargeHeader.tsx
@@ -13,13 +13,12 @@ export function LargeHeader({
 	const [time, setTime] = useState(new Date());
 	const {
 		isMobile,
-		currentUser,
 		fixDigits,
 		theme,
 		textShadowStyle,
 		largeTextShadowStyle,
-		timeFormat,
-		setTimeFormat,
+		settings,
+		updateSetting,
 	} = useCommonHooks();

 	useEffect(() => {
@@ -40,12 +39,12 @@ export function LargeHeader({
 				}}
 			>
 				{greet
-					?.replace('$firstName', currentUser.firstName)
-					.replace('$lastName', currentUser.lastName)
-					.replace('$nickname', currentUser.nickname)
-					.replace('$^firstName', currentUser.firstName.toUpperCase())
-					.replace('$^lastName', currentUser.lastName.toUpperCase())
-					.replace('$^nickname', currentUser.nickname?.toUpperCase())}
+					?.replace('$firstName', settings.firstName)
+					.replace('$lastName', settings.lastName)
+					.replace('$nickname', settings.nickname)
+					.replace('$^firstName', settings.firstName.toUpperCase())
+					.replace('$^lastName', settings.lastName.toUpperCase())
+					.replace('$^nickname', settings.nickname?.toUpperCase())}
 			</Text>
 			<Text
 				fz={'2.25rem'}
@@ -69,10 +68,12 @@ export function LargeHeader({
 					zIndex: 1,
 				}}
 				onClick={() =>
-					timeFormat === '12h' ? setTimeFormat('24h') : setTimeFormat('12h')
+					settings.timeFormat === '12h'
+						? updateSetting('timeFormat', '24h')
+						: updateSetting('timeFormat', '12h')
 				}
 			>
-				{timeFormat === '12h'
+				{settings.timeFormat === '12h'
 					? `${
 							time.getHours() === 0
 								? 12
--- a/src/pages/homepage/components/Search/Search.tsx
+++ b/src/pages/homepage/components/Search/Search.tsx
@@ -63,14 +63,8 @@ export function Search({
 		setProviderIcon,
 		searchValue,
 		setSearchValue,
-		defaultProviderURL,
-		setDefaultProviderURL,
-		defaultProviderLabel,
-		setDefaultProviderLabel,
-		defaultProviderPrefix,
-		setDefaultProviderPrefix,
-		defaultProviderIcon,
-		setDefaultProviderIcon,
+		settings,
+		updateSetting,
 	} = useCommonHooks();
 	const { ref, height } = useElementSize();
 	const { mutateAsync } = useMutationAPI();
@@ -146,8 +140,8 @@ export function Search({
 		setSearchValue('');
 		setListIndex(-1);
 		setHistoryMultiplier(1);
-		setProviderLabel(defaultProviderLabel);
-		setProviderURL(defaultProviderURL);
+		setProviderLabel(settings.defaultProviderLabel);
+		setProviderURL(settings.defaultProviderURL);
 	};

 	const handleGuacamoleClientLaunchItem = ({ option }: { option: any }) => {
@@ -176,8 +170,12 @@ export function Search({
 					method: 'POST',
 					endpoint: searchEndpoint,
 					body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
-				}).then(() => {
+				})
+					.then(() => {
 						open(`${providerURL}${subtext}`, '_self');
+					})
+					.catch((error) => {
+						console.error(error);
 					});
 			} else if (providerLabel === 'Show weather') {
 				setSearchValue('');
@@ -211,8 +209,12 @@ export function Search({
 					method: 'POST',
 					endpoint: searchEndpoint,
 					body: { prefix: providerPrefix, provider: providerLabel, searchTerm: subtext },
-				}).then(() => {
+				})
+					.then(() => {
 						open(`${providerURL}${subtext}`, '_self');
+					})
+					.catch((error) => {
+						console.error(error);
 					});
 			} else {
 				open(`${providerURL}${subtext}`, '_self');
@@ -372,10 +374,10 @@ export function Search({
 				setProviderIcon('');
 			}
 		} else {
-			setProviderLabel(defaultProviderLabel);
-			setProviderURL(defaultProviderURL);
-			setProviderPrefix(defaultProviderPrefix);
-			setProviderIcon(defaultProviderIcon);
+			setProviderLabel(settings.defaultProviderLabel);
+			setProviderURL(settings.defaultProviderURL);
+			setProviderPrefix(settings.defaultProviderPrefix);
+			setProviderIcon(settings.defaultProviderIcon);
 		}
 	};

@@ -460,12 +462,16 @@ export function Search({

 	useEffect(() => {
 		if (defaultProviderData && defaultProviderDataIsFetched) {
-			setDefaultProviderURL(
+			updateSetting(
+				'defaultProviderURL',
 				defaultProviderData[0]?.url ?? 'https://www.google.com/search?q=',
 			);
-			setDefaultProviderPrefix(defaultProviderData[0]?.prefix ?? '/g');
-			setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
-			setDefaultProviderIcon(defaultProviderData[0]?.icon ?? 'FaGoogle');
+			updateSetting('defaultProviderPrefix', defaultProviderData[0]?.prefix ?? '/g');
+			updateSetting('defaultProviderIcon', defaultProviderData[0]?.icon ?? 'FaGoogle');
+			updateSetting(
+				'defaultProviderLabel',
+				defaultProviderData[0]?.name ?? 'Google Search',
+			);
 		}
 	}, [defaultProviderData, defaultProviderDataIsFetched]);

--- a/src/pages/homepage/components/Search/components/RenderItem.tsx
+++ b/src/pages/homepage/components/Search/components/RenderItem.tsx
@@ -24,11 +24,11 @@ export default function RenderItem({
 	setHistoryMultiplier: React.Dispatch<React.SetStateAction<number>>;
 	searchEndpoint: string;
 }) {
-	const { defaultProviderURL } = useCommonHooks();
+	const { settings } = useCommonHooks();
 	const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
 		const url =
 			providers.find((provider: Provider) => provider.prefix === option.prefix)?.url ??
-			defaultProviderURL;
+			settings.defaultProviderURL;
 		open(`${url}${option.searchTerm}`, '_self');
 	};

--- a/src/pages/homepage/components/Search/components/SearchSelectItem.tsx
+++ b/src/pages/homepage/components/Search/components/SearchSelectItem.tsx
@@ -130,6 +130,8 @@ function SearchSelectItem({
 								method: 'DELETE',
 								endpoint: searchEndpoint,
 								body: { id: item.option.id },
+							}).catch((error) => {
+								console.error(error);
 							});
 						}}
 					>
--- a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx
+++ b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx
@@ -33,26 +33,7 @@ export function SettingsButton({ openProviderModal }: { openProviderModal: () =>
 	const [selectedClient, setSelectedClient] = useState<WolClient>(wolClientData?.[0]);
 	const navigate = useNavigate();
 	const [isOpen, setIsOpen] = useState(false);
-	const {
-		theme,
-		isMobile,
-		appFilter,
-		setAppFilter,
-		appSort,
-		setAppSort,
-		appDensity,
-		setAppDensity,
-		appScale,
-		setAppScale,
-		bookmarkSort,
-		setBookmarkSort,
-		bookmarkFilter,
-		setBookmarkFilter,
-		bookmarkDensity,
-		setBookmarkDensity,
-		bookmarkScale,
-		setBookmarkScale,
-	} = useCommonHooks();
+	const { theme, isMobile, settings } = useCommonHooks();

 	const handleWakeRequest = () => {
 		mutateAsync({
@@ -123,26 +104,18 @@ export function SettingsButton({ openProviderModal }: { openProviderModal: () =>
 						<SettingsCard
 							categories={categories}
 							sectionTitle={'Applications'}
-							filter={appFilter}
-							setFilter={setAppFilter}
-							sort={appSort}
-							setSort={setAppSort}
-							density={appDensity}
-							setDensity={setAppDensity}
-							scale={appScale}
-							setScale={setAppScale}
+							filter={settings.appFilter}
+							sort={settings.appSort}
+							density={settings.appDensity}
+							scale={settings.appScale}
 						/>
 						<SettingsCard
 							categories={categories}
 							sectionTitle={'Bookmarks'}
-							filter={bookmarkFilter}
-							setFilter={setBookmarkFilter}
-							sort={bookmarkSort}
-							setSort={setBookmarkSort}
-							density={bookmarkDensity}
-							setDensity={setBookmarkDensity}
-							scale={bookmarkScale}
-							setScale={setBookmarkScale}
+							filter={settings.bookmarkFilter}
+							sort={settings.bookmarkSort}
+							density={settings.bookmarkDensity}
+							scale={settings.bookmarkScale}
 						/>
 					</Stack>
 				</Group>
--- a/src/pages/homepage/components/SettingsButton/SettingsCard.tsx
+++ b/src/pages/homepage/components/SettingsButton/SettingsCard.tsx
@@ -14,26 +14,18 @@ function SettingsCard({
 	categories,
 	sectionTitle,
 	filter,
-	setFilter,
 	sort,
-	setSort,
 	density,
-	setDensity,
 	scale,
-	setScale,
 }: {
 	categories: ComboboxItem[];
 	sectionTitle: string;
 	filter: any;
-	setFilter: any;
 	sort: any;
-	setSort: any;
 	density: any;
-	setDensity: any;
 	scale: any;
-	setScale: any;
 }) {
-	const { theme } = useCommonHooks();
+	const { theme, updateSetting } = useCommonHooks();
 	return (
 		<Stack
 			gap={0}
@@ -70,11 +62,23 @@ function SettingsCard({
 						className={sliderClasses.default}
 						classNames={sliderClasses}
 						value={density}
-						onChange={(value) => setDensity(value)}
+						onChange={(value) => {
+							if (sectionTitle === 'Applications') {
+								updateSetting('appDensity', value);
+							} else if (sectionTitle === 'Bookmarks') {
+								updateSetting('bookmarkDensity', value);
+							}
+						}}
 						min={1}
 						max={16}
 						marks={[{ value: 6, label: 'Default' }]}
-						onDoubleClick={() => setDensity(6)}
+						onDoubleClick={() => {
+							if (sectionTitle === 'Applications') {
+								updateSetting('appDensity', 6);
+							} else if (sectionTitle === 'Bookmarks') {
+								updateSetting('bookmarkDensity', 6);
+							}
+						}}
 					/>
 				</Stack>
 				{scale !== undefined && (
@@ -86,12 +90,24 @@ function SettingsCard({
 							className={sliderClasses.default}
 							classNames={sliderClasses}
 							value={scale}
-							onChange={(value) => setScale(value)}
+							onChange={(value) => {
+								if (sectionTitle === 'Applications') {
+									updateSetting('appScale', value);
+								} else if (sectionTitle === 'Bookmarks') {
+									updateSetting('bookmarkScale', value);
+								}
+							}}
 							step={0.1}
 							min={0.2}
 							max={3}
 							marks={[{ value: 1, label: 'Default' }]}
-							onDoubleClick={() => setScale(1)}
+							onDoubleClick={() => {
+								if (sectionTitle === 'Applications') {
+									updateSetting('appScale', 1);
+								} else if (sectionTitle === 'Bookmarks') {
+									updateSetting('bookmarkScale', 1);
+								}
+							}}
 						/>
 					</Stack>
 				)}
@@ -113,7 +129,11 @@ function SettingsCard({
 					}
 					defaultValue={filter}
 					onChange={(data: string[]) => {
-						setFilter(data);
+						if (sectionTitle === 'Applications') {
+							updateSetting('appFilter', data);
+						} else if (sectionTitle === 'Bookmarks') {
+							updateSetting('bookmarkFilter', data);
+						}
 					}}
 					classNames={multiSelectClasses}
 					comboboxProps={{
@@ -147,7 +167,11 @@ function SettingsCard({
 						position: 'top',
 					}}
 					onChange={(_value, option: ComboboxItem) => {
-						setSort(option.value);
+						if (sectionTitle === 'Applications') {
+							updateSetting('appSort', option.value);
+						} else if (sectionTitle === 'Bookmarks') {
+							updateSetting('bookmarkSort', option.value);
+						}
 					}}
 					labelProps={{ top: 8 }}
 					styles={
--- a/src/pages/homepage/components/SettingsButton/ThemingCard.tsx
+++ b/src/pages/homepage/components/SettingsButton/ThemingCard.tsx
@@ -31,16 +31,8 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 	});
 	const allThemes: Theme[] = allThemeData || [];

-	const {
-		isMobile,
-		currentTheme,
-		setCurrentTheme,
-		setThemeName,
-		handleThemeChange,
-		theme,
-		currentThemePlaylist,
-		setCurrentThemePlaylist,
-	} = useCommonHooks();
+	const { isMobile, handleThemeChange, theme, settings, updateSetting } =
+		useCommonHooks();

 	const [current, setCurrent] = useState<string>(theme.name);

@@ -128,11 +120,11 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 								borderRadius: '50%',
 							},
 						}}
-						disabled={currentThemePlaylist === 'Time of Day' || isAnimating}
+						disabled={settings.currentThemePlaylist === 'Time of Day' || isAnimating}
 						onClick={() => {
 							const themeList = JSON.parse(
 								themePlaylistData?.find(
-									(t: ThemePlaylist) => t?.name === currentThemePlaylist,
+									(t: ThemePlaylist) => t?.name === settings.currentThemePlaylist,
 								)?.themeList ?? '[]',
 							);
 							if (themeList.length > 0) {
@@ -140,16 +132,16 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 									themeList.includes(t.id),
 								);
 								handleThemeChange(filteredThemes, false);
-							} else if (currentThemePlaylist === 'All') {
+							} else if (settings.currentThemePlaylist === 'All') {
 								handleThemeChange(allThemes, true);
-							} else if (currentThemePlaylist === 'Backgrounds') {
+							} else if (settings.currentThemePlaylist === 'Backgrounds') {
 								handleThemeChange(
 									allThemes.filter(
 										(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
 									),
 									false,
 								);
-							} else if (currentThemePlaylist === 'No Backgrounds') {
+							} else if (settings.currentThemePlaylist === 'No Backgrounds') {
 								handleThemeChange(
 									allThemes.filter((a: any) =>
 										a.backgroundImage.toLowerCase().includes('none'),
@@ -169,7 +161,7 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 					placeholder='Pick a playlist...'
 					mb={'.25rem'}
 					ml={'.25rem'}
-					value={currentThemePlaylist}
+					value={settings.currentThemePlaylist}
 					data={[
 						{ value: 'All', label: 'All' },
 						{
@@ -226,20 +218,21 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 							: undefined
 					}
 					onChange={(_value, option: ComboboxItem) => {
-						setCurrentThemePlaylist(option.value);
+						updateSetting('currentThemePlaylist', option.value);
 						if (option.value === 'Time of Day') {
 							const themeList = JSON.parse(
 								themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day')
 									.themeList,
 							);
-							setThemeName(
+							updateSetting(
+								'theme',
 								allThemeData.find(
 									(t: Theme) =>
 										t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
 								).name,
 							);
 						} else {
-							setThemeName('random');
+							updateSetting('theme', 'random');
 						}
 					}}
 				/>
@@ -252,12 +245,12 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 					<ActionIcon
 						className={actionIconClasses.menuActions}
 						classNames={actionIconClasses}
-						disabled={currentThemePlaylist === 'Time of Day' || isAnimating}
+						disabled={settings.currentThemePlaylist === 'Time of Day' || isAnimating}
 						h={40}
 						style={{
 							backgroundColor: 'transparent',
 							color:
-								currentTheme === 'random'
+								settings.theme === 'random'
 									? 'var(--mantine-color-accent-0)'
 									: 'var(--mantine-color-primary-0)',
 							borderTopRightRadius: 0,
@@ -271,7 +264,7 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 						styles={{
 							icon: {
 								backgroundColor:
-									currentTheme === 'random'
+									settings.theme === 'random'
 										? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
 										: 'transparent',
 								width: 'fit-content',
@@ -284,8 +277,8 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 							},
 						}}
 						onClick={() => {
-							setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
-							setCurrentThemePlaylist('All');
+							updateSetting('theme', 'random');
+							updateSetting('currentThemePlaylist', 'All');
 						}}
 					>
 						<FiShuffle size={20} />
--- a/src/pages/settings/components/Applications/Applications.tsx
+++ b/src/pages/settings/components/Applications/Applications.tsx
@@ -28,6 +28,7 @@ import DebouncedApplication from './DebouncedApplication';

 export function Applications() {
 	const allIcons: any = { ...fa6, ...vsc, ...si };
+	const { isMobile, reorder, theme, settings, updateSetting } = useCommonHooks();
 	const defaultApplication: Application = {
 		id: null,
 		name: '',
@@ -38,6 +39,7 @@ export function Applications() {
 		index: 0,
 		enabled: 1,
 	};
+	const [dragging, setDragging] = useState(false);
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const form = useForm({
@@ -54,19 +56,40 @@ export function Applications() {
 	const { data: applicationData, isFetching: applicationDataIsFetching } = useQueryAPI({
 		endpoint: appsEndpoint,
 	});
-	const applications: Application[] =
-		applicationData
+	const applications: Application[] = applicationData
 		?.filter(
 			(a: Application) =>
 				a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
 				a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
 				a.baseUrl.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
 		)
-			.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)) || [];
+		.sort((a: Application, b: Application) => {
+			if (!dragging) {
+				switch (settings.appSettingsSort) {
+					case 'A>Z':
+						return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
+					case 'Z>A':
+						return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? 1 : -1;
+					case 'Newest':
+						if (a.id && b.id) {
+							return a.id < b.id ? 1 : -1;
+						}
+						return -1;
+					case 'Oldest':
+						if (a.id && b.id) {
+							return a.id > b.id ? 1 : -1;
+						}
+						return -1;
+					case 'Custom':
+						return a.index > b.index ? 1 : -1;
+					default:
+						return 0;
+				}
+			}
+			return a.index > b.index ? 1 : -1;
+		});
 	const [applicationList, setApplicationList] = useState<Application[]>([]);
-	const { isMobile, reorder, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
-	const [dragging, setDragging] = useState(false);
 	const [isOpen, setIsOpen] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);

@@ -108,13 +131,15 @@ export function Applications() {
 				method: 'PATCH',
 				endpoint: appsOrderEndpoint,
 				body: applicationList,
+			}).catch((error) => {
+				console.error(error);
 			});
 		}
 	}, [applicationList]);
 	return (
 		<Stack>
 			<SettingsHeader
-				setDragging={applications.length > 0 ? setDragging : undefined}
+				setDragging={applications?.length > 0 ? setDragging : undefined}
 				openModal={openModal}
 				title={'Applications'}
 				tooltip={{
@@ -140,6 +165,11 @@ export function Applications() {
 				searchPlaceholder={'Search Applications...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={settings.appSettingsSort}
+				setSortBy={(value) => {
+					updateSetting('appSettingsSort', value);
+				}}
+				customSearchEnabled
 			/>
 			{modalOpened && (
 				<AddItemModal
@@ -149,12 +179,12 @@ export function Applications() {
 					body={
 						<form
 							onSubmit={form.onSubmit((values) => {
-								mutateAsync({
+								void mutateAsync({
 									method: 'POST',
 									endpoint: appsEndpoint,
 									body: {
 										...values,
-										index: applications.length,
+										index: applications?.length,
 									},
 								});
 								handleClose();
@@ -318,7 +348,7 @@ export function Applications() {
 							size: 'xl',
 						}}
 					/>
-					{applications.length > 0 ? (
+					{applications?.length > 0 ? (
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
 								<Grid
--- a/src/pages/settings/components/Applications/DebouncedApplication.tsx
+++ b/src/pages/settings/components/Applications/DebouncedApplication.tsx
@@ -38,7 +38,13 @@ function DebouncedApplication({
 	};
 	useEffect(() => {
 		if (debounced && Object.keys(debounced).length > 0) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/applications', body: debounced });
+			mutateAsync({
+				method: 'PATCH',
+				endpoint: 'api/applications',
+				body: debounced,
+			}).catch((error) => {
+				console.error(error);
+			});
 		}
 	}, [debounced]);

--- a/src/pages/settings/components/Bookmarks/Bookmarks.tsx
+++ b/src/pages/settings/components/Bookmarks/Bookmarks.tsx
@@ -19,6 +19,7 @@ import type { Bookmark, BookmarkGroup } from 'types';
 import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';

 export function Bookmarks() {
+	const { isMobile, reorder, theme, settings, updateSetting } = useCommonHooks();
 	const defaultGroup = {
 		id: null,
 		categoryName: '',
@@ -32,6 +33,7 @@ export function Bookmarks() {
 			filterName: isNotEmpty('Filter name is required'),
 		},
 	});
+	const [dragging, setDragging] = useState(false);
 	const bookmarksEndpoint = 'api/bookmarks';
 	const { data: bookmarkData, isFetching: bookmarkDataIsFetching } = useQueryAPI({
 		endpoint: bookmarksEndpoint,
@@ -41,10 +43,8 @@ export function Bookmarks() {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: categoriesEndpoint,
 	});
-	const [dragging, setDragging] = useState(false);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 	const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
-	const { isMobile, reorder, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -71,6 +71,7 @@ export function Bookmarks() {
 	const foundGroups: BookmarkGroup[] = groupData?.filter((a: BookmarkGroup) =>
 		a.categoryName.toLowerCase().includes((debouncedGroupSearch as string).toLowerCase()),
 	);
+
 	const handleClose = () => {
 		closeModal();
 		form.reset();
@@ -99,15 +100,50 @@ export function Bookmarks() {
 	useEffect(() => {
 		if (groupData && groupsIsFetched) {
 			const groupList = [...new Set([...foundBookmarkGroups, ...foundGroups])].sort(
-				(a: BookmarkGroup, b: BookmarkGroup) =>
-					a.categoryIndex > b.categoryIndex ? 1 : -1,
+				(a: BookmarkGroup, b: BookmarkGroup) => {
+					if (!dragging) {
+						switch (settings.bookmarkSettingsSort) {
+							case 'A>Z':
+								return a.categoryName.toLocaleLowerCase() >
+									b.categoryName.toLocaleLowerCase()
+									? 1
+									: -1;
+							case 'Z>A':
+								return a.categoryName.toLocaleLowerCase() <
+									b.categoryName.toLocaleLowerCase()
+									? 1
+									: -1;
+							case 'Newest':
+								if (a.id && b.id) {
+									return a.id < b.id ? 1 : -1;
+								}
+								return -1;
+							case 'Oldest':
+								if (a.id && b.id) {
+									return a.id > b.id ? 1 : -1;
+								}
+								return -1;
+							case 'Custom':
+								return a.categoryIndex > b.categoryIndex ? 1 : -1;
+							default:
+								return 0;
+						}
+					}
+					return a.categoryIndex > b.categoryIndex ? 1 : -1;
+				},
 			);
 			setGroups(groupList);
 		}
 		if (debouncedGroupSearch === searchValue) {
 			setIsLoading(false);
 		}
-	}, [groupData, groupsIsFetched, debouncedGroupSearch]);
+	}, [
+		groupData,
+		groupsIsFetched,
+		debouncedGroupSearch,
+		settings.bookmarkSettingsSort,
+		dragging,
+	]);

 	useEffect(() => {
 		if (groupList.length > 0 && groupList !== groups) {
@@ -115,6 +151,8 @@ export function Bookmarks() {
 				method: 'PATCH',
 				endpoint: 'api/bookmarkCategoryOrder',
 				body: groupList,
+			}).catch((error) => {
+				console.error(error);
 			});
 		}
 	}, [groupList]);
@@ -136,6 +174,8 @@ export function Bookmarks() {
 										...values,
 										categoryIndex: groups.length,
 									},
+								}).catch((error) => {
+									console.error(error);
 								});
 								handleClose();
 							})}
@@ -221,6 +261,11 @@ export function Bookmarks() {
 				searchPlaceholder={'Search Bookmarks...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={settings.bookmarkSettingsSort}
+				setSortBy={(value) => {
+					updateSetting('bookmarkSettingsSort', value);
+				}}
+				customSearchEnabled
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
--- a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
+++ b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
@@ -33,7 +33,11 @@ function DebouncedBookmarkItem({
 	};
 	useEffect(() => {
 		if (debounced && Object.keys(debounced).length) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced });
+			mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced }).catch(
+				(error) => {
+					console.error(error);
+				},
+			);
 		}
 	}, [debounced]);

--- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
+++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
@@ -94,6 +94,8 @@ function DebouncedGroupSettingsItem({
 				method: 'PATCH',
 				endpoint: 'api/bookmarkCategories',
 				body: debounced,
+			}).catch((error) => {
+				console.error(error);
 			});
 			setUpdate(undefined);
 		}
@@ -107,7 +109,13 @@ function DebouncedGroupSettingsItem({

 	useEffect(() => {
 		if (bookmarkList && bookmarkList !== bookmarks) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarkOrder', body: bookmarkList });
+			mutateAsync({
+				method: 'PATCH',
+				endpoint: 'api/bookmarkOrder',
+				body: bookmarkList,
+			}).catch((error) => {
+				console.error(error);
+			});
 		}
 	}, [bookmarkList]);

@@ -351,6 +359,8 @@ function DebouncedGroupSettingsItem({
 											method: 'POST',
 											endpoint: 'api/bookmarks',
 											body: { ...values, index: bookmarks.length },
+										}).catch((error) => {
+											console.error(error);
 										});
 										setPopoverOpened(false);
 										form.reset();
--- a/src/pages/settings/components/GuacamoleClients/DebouncedGuacamoleClient.tsx
+++ b/src/pages/settings/components/GuacamoleClients/DebouncedGuacamoleClient.tsx
@@ -47,7 +47,13 @@ function DebouncedGuacamoleClient({

 	useEffect(() => {
 		if (debounced && Object.keys(debounced).length) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/guacamoleClients', body: debounced });
+			mutateAsync({
+				method: 'PATCH',
+				endpoint: 'api/guacamoleClients',
+				body: debounced,
+			}).catch((error) => {
+				console.error(error);
+			});
 		}
 	}, [debounced]);

@@ -92,6 +98,7 @@ function DebouncedGuacamoleClient({
 					onClick={() => {
 						openModal();
 					}}
+					style={{ zIndex: 250 }}
 				>
 					<FiTrash color='black' />
 				</ActionIcon>
--- a/src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx
+++ b/src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx
@@ -23,6 +23,7 @@ import DebouncedGuacamoleClient from './DebouncedGuacamoleClient';
 import GuacamoleClientSettingsItem from './GuacamoleClientSettingsItem';

 export function GuacamoleClients() {
+	const { isMobile, theme, settings, updateSetting } = useCommonHooks();
 	const defaultGuacamoleClient: GuacamoleClient = {
 		id: undefined,
 		clientName: '',
@@ -46,15 +47,41 @@ export function GuacamoleClients() {
 			endpoint: endpoint,
 		});
 	const guacamoleClients: GuacamoleClient[] =
-		guacamoleClientsData.filter(
+		guacamoleClientsData
+			?.filter(
 				(a: GuacamoleClient) =>
-				a.clientName.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
+					a.clientName
+						.toLowerCase()
+						.includes((debouncedSearch as string).toLowerCase()) ||
 					a.clientIdentifier
 						.toLowerCase()
 						.includes((debouncedSearch as string).toLowerCase()),
-		) || [];
+			)
+			?.sort((a: GuacamoleClient, b: GuacamoleClient) => {
+				switch (settings.guacamoleClientsSettingsSort) {
+					case 'A>Z':
+						return a.clientName.toLocaleLowerCase() > b.clientName.toLocaleLowerCase()
+							? 1
+							: -1;
+					case 'Z>A':
+						return a.clientName.toLocaleLowerCase() < b.clientName.toLocaleLowerCase()
+							? 1
+							: -1;
+					case 'Newest':
+						if (a.id && b.id) {
+							return a.id < b.id ? 1 : -1;
+						}
+						return -1;
+					case 'Oldest':
+						if (a.id && b.id) {
+							return a.id > b.id ? 1 : -1;
+						}
+						return -1;
+					default:
+						return 0;
+				}
+			}) || [];
 	const { mutateAsync } = useMutationAPI();
-	const { isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [isOpen, setIsOpen] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
@@ -84,6 +111,8 @@ export function GuacamoleClients() {
 									method: 'POST',
 									endpoint: endpoint,
 									body: { ...values, enabled: 1 },
+								}).catch((error) => {
+									console.error(error);
 								});
 								handleClose();
 							})}
@@ -210,6 +239,11 @@ export function GuacamoleClients() {
 				searchPlaceholder={'Search Clients...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={settings.guacamoleClientsSettingsSort}
+				setSortBy={(value) => {
+					updateSetting('guacamoleClientsSettingsSort', value);
+				}}
+				customSearchEnabled={false}
 			/>
 			<Stack
 				mt={isMobile ? '10rem' : '6rem'}
--- a/src/pages/settings/components/Messages/Messages.tsx
+++ b/src/pages/settings/components/Messages/Messages.tsx
@@ -17,6 +17,7 @@ import type { Message } from 'types';
 import DebouncedMessage from './DebouncedMessage';

 export function Messages() {
+	const { isMobile, theme, settings, updateSetting } = useCommonHooks();
 	const endpoint = 'api/messages';
 	const { data: messageData, isFetching: messageDataIsFetching } = useQueryAPI({
 		endpoint: endpoint,
@@ -31,12 +32,32 @@ export function Messages() {
 	});
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
-	const { isMobile, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const messages: Message[] =
-		messageData?.filter((m: Message) =>
+		messageData
+			?.filter((m: Message) =>
 				m.message.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
-		) || [];
+			)
+			.sort((a: Message, b: Message) => {
+				switch (settings.messageSettingsSort) {
+					case 'A>Z':
+						return a.message.toLocaleLowerCase() > b.message.toLocaleLowerCase() ? 1 : -1;
+					case 'Z>A':
+						return a.message.toLocaleLowerCase() < b.message.toLocaleLowerCase() ? 1 : -1;
+					case 'Newest':
+						if (a.id && b.id) {
+							return a.id < b.id ? 1 : -1;
+						}
+						return -1;
+					case 'Oldest':
+						if (a.id && b.id) {
+							return a.id > b.id ? 1 : -1;
+						}
+						return -1;
+					default:
+						return 0;
+				}
+			}) || [];
 	const [message, setMessage] = useState({});
 	const [debounced] = useDebouncedValue(message, 1000);
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -49,7 +70,11 @@ export function Messages() {

 	useEffect(() => {
 		if (Object.keys(debounced).length) {
-			mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
+			mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced }).catch(
+				(error) => {
+					console.error(error);
+				},
+			);
 		}
 	}, [debounced]);

@@ -82,6 +107,11 @@ export function Messages() {
 				searchPlaceholder={'Search Messages...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={settings.messageSettingsSort}
+				setSortBy={(value) => {
+					updateSetting('messageSettingsSort', value);
+				}}
+				customSearchEnabled={false}
 			/>
 			{modalOpened && (
 				<AddItemModal
@@ -95,6 +125,8 @@ export function Messages() {
 									method: 'POST',
 									endpoint: endpoint,
 									body: { message: values.message },
+								}).catch((error) => {
+									console.error(error);
 								});
 								handleClose();
 							})}
--- a/src/pages/settings/components/Personalization/Personalization.tsx
+++ b/src/pages/settings/components/Personalization/Personalization.tsx
@@ -37,7 +37,11 @@ export function Personalization() {
 	const { isMobile, theme } = useCommonHooks();
 	useEffect(() => {
 		if (debounced && Object.keys(debounced).length) {
-			mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
+			mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced }).catch(
+				(error) => {
+					console.error(error);
+				},
+			);
 			setUpdate(undefined);
 		}
 	}, [debounced]);
@@ -87,6 +91,9 @@ export function Personalization() {
 				searchPlaceholder={undefined}
 				isLoading={false}
 				setIsLoading={() => {}}
+				sortBy={''}
+				setSortBy={undefined}
+				customSearchEnabled={false}
 			/>
 			<Stack align='center' mt={'6rem'} pos={'relative'}>
 				<LoadingOverlay
--- a/src/pages/settings/components/Search/DebouncedSearchProvider.tsx
+++ b/src/pages/settings/components/Search/DebouncedSearchProvider.tsx
@@ -40,7 +40,11 @@ function DebouncedSearchProvider({

 	useEffect(() => {
 		if (debounced && Object.keys(debounced).length) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/providers', body: debounced });
+			mutateAsync({ method: 'PATCH', endpoint: 'api/providers', body: debounced }).catch(
+				(error) => {
+					console.error(error);
+				},
+			);
 		}
 	}, [debounced]);

--- a/src/pages/settings/components/Search/SearchHistory.tsx
+++ b/src/pages/settings/components/Search/SearchHistory.tsx
@@ -86,6 +86,9 @@ export function SearchHistory() {
 				searchPlaceholder={'Search your Search History...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={''}
+				setSortBy={undefined}
+				customSearchEnabled={false}
 			/>
 			<Stack
 				mt={isMobile ? '10rem' : '6rem'}
--- a/src/pages/settings/components/Search/SearchProviders.tsx
+++ b/src/pages/settings/components/Search/SearchProviders.tsx
@@ -36,6 +36,7 @@ import DebouncedSearchProvider from './DebouncedSearchProvider';
 import SearchProviderSettingsItem from './SearchProviderSettingsItem';

 export function SearchProviders() {
+	const { isMobile, theme, iconFilter, settings, updateSetting } = useCommonHooks();
 	const allIcons: any = { ...fa6, ...vsc, ...si };
 	const defaultProvider: Provider = {
 		id: undefined,
@@ -62,14 +63,32 @@ export function SearchProviders() {
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const providers: Provider[] =
 		providerData
-			.filter(
+			?.filter(
 				(a: Provider) =>
 					a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
 					a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
 					a.prefix.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
 			)
-			.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)) ?? [];
-	const { isMobile, theme, iconFilter } = useCommonHooks();
+			?.sort((a: Provider, b: Provider) => {
+				switch (settings.providerSettingsSort) {
+					case 'A>Z':
+						return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
+					case 'Z>A':
+						return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? 1 : -1;
+					case 'Newest':
+						if (a.id && b.id) {
+							return a.id < b.id ? 1 : -1;
+						}
+						return -1;
+					case 'Oldest':
+						if (a.id && b.id) {
+							return a.id > b.id ? 1 : -1;
+						}
+						return -1;
+					default:
+						return 0;
+				}
+			}) ?? [];
 	const { mutateAsync } = useMutationAPI();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [isOpen, setIsOpen] = useState(false);
@@ -100,6 +119,8 @@ export function SearchProviders() {
 									method: 'POST',
 									endpoint: endpoint,
 									body: values,
+								}).catch((error) => {
+									console.error(error);
 								});
 								handleClose();
 							})}
@@ -281,6 +302,11 @@ export function SearchProviders() {
 				searchPlaceholder={'Search Providers...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={settings.providerSettingsSort}
+				setSortBy={(value) => {
+					updateSetting('providerSettingsSort', value);
+				}}
+				customSearchEnabled={false}
 			/>
 			<Stack
 				mt={isMobile ? '10rem' : '6rem'}
--- a/src/pages/settings/components/Theming/Backgrounds/components/DeleteBackground.tsx
+++ b/src/pages/settings/components/Theming/Backgrounds/components/DeleteBackground.tsx
@@ -59,6 +59,8 @@ export function DeleteBackground({
 							method: 'DELETE',
 							endpoint: 'api/backgrounds',
 							body: { fileName },
+						}).catch((error) => {
+							console.error(error);
 						});
 					}}
 				>
--- a/src/pages/settings/components/Theming/Backgrounds/components/EditBackground.tsx
+++ b/src/pages/settings/components/Theming/Backgrounds/components/EditBackground.tsx
@@ -72,6 +72,8 @@ export function EditBackground({
 										fileName.length,
 									)}`,
 								},
+							}).catch((error) => {
+								console.error(error);
 							});
 						} else {
 							mutateAsync({
@@ -81,6 +83,8 @@ export function EditBackground({
 									fileName,
 									newFileName: rename,
 								},
+							}).catch((error) => {
+								console.error(error);
 							});
 						}
 						handleEditBackgroundModalClose();
--- a/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx
@@ -2,7 +2,7 @@ import { Box, Group, LoadingOverlay, SimpleGrid, Stack, Text } from '@mantine/co
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FiChevronRight } from 'react-icons/fi';
 import { textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
@@ -21,13 +21,17 @@ export function ThemePlaylists() {
 		});
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
-	const themePlaylists: ThemePlaylist[] =
+
+	const themePlaylists: ThemePlaylist[] = useMemo(() => {
+		return (
 			themePlaylistData?.filter(
 				(a: ThemePlaylist) =>
 					a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
 					a.name.includes('Time of Day'),
-		) || [];
-	const defaultPlaylist = {
+			) || []
+		);
+	}, [themePlaylistData, debouncedSearch]);
+	const defaultPlaylist: ThemePlaylist = {
 		id: undefined,
 		default: 0,
 		name: 'New Playlist',
@@ -37,33 +41,99 @@ export function ThemePlaylists() {
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedPlaylist, setSelectedPlaylist] =
 		useState<ThemePlaylist>(defaultPlaylist);
-	const { currentThemePlaylist, theme, isMobile } = useCommonHooks();
+	const { settings, theme, isMobile } = useCommonHooks();
 	const [isLoading, setIsLoading] = useState(false);

-	const handleOpen = (playlist: ThemePlaylist) => {
+	const handleOpen = useCallback(
+		(playlist: ThemePlaylist) => {
 			setSelectedPlaylist(playlist);
 			open();
-	};
+		},
+		[open],
+	);

-	const handleClose = () => {
+	const handleClose = useCallback(() => {
 		setSelectedPlaylist(defaultPlaylist);
 		close();
-	};
+	}, [close]);

-	const handleSavePlaylist = () => {
+	const handleSavePlaylist = useCallback(() => {
 		mutateAsync({
 			method: selectedPlaylist?.id === undefined ? 'POST' : 'PATCH',
 			endpoint: themePlaylistsEndpoint,
 			body: selectedPlaylist ?? {},
+		}).catch((error) => {
+			console.error(error);
 		});
 		close();
-	};
+	}, [selectedPlaylist, mutateAsync, themePlaylistsEndpoint, close]);

 	useEffect(() => {
 		if (debouncedSearch === searchValue) {
 			setIsLoading(false);
 		}
-	}, [debouncedSearch]);
+	}, [debouncedSearch, searchValue]);
+
+	const allThemesIds = useMemo(
+		() => allThemeData?.map((a: Theme) => a.id) ?? [],
+		[allThemeData],
+	);
+
+	const backgroundsThemes = useMemo(
+		() =>
+			allThemeData?.filter(
+				(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
+			) ?? [],
+		[allThemeData],
+	);
+
+	const noBackgroundsThemes = useMemo(
+		() =>
+			allThemeData?.filter((a: any) =>
+				a.backgroundImage.toLowerCase().includes('none'),
+			) ?? [],
+		[allThemeData],
+	);
+
+	const timeOfDayPlaylist = useMemo(() => {
+		const found = themePlaylists?.find((a: ThemePlaylist) => a.name === 'Time of Day');
+		return {
+			id: found?.id,
+			name: 'Time of Day',
+			default: 1,
+			themeList: found?.themeList ?? '[]',
+		};
+	}, [themePlaylists]);
+
+	const allStack = useMemo(
+		() => ({
+			id: undefined,
+			name: 'All',
+			default: 1,
+			themeList: `[${allThemesIds.join(',')}]`,
+		}),
+		[allThemesIds],
+	);
+
+	const backgroundsStack = useMemo(
+		() => ({
+			id: undefined,
+			name: 'Backgrounds',
+			default: 1,
+			themeList: `[${backgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
+		}),
+		[backgroundsThemes],
+	);
+
+	const noBackgroundsStack = useMemo(
+		() => ({
+			id: undefined,
+			name: 'No Backgrounds',
+			default: 1,
+			themeList: `[${noBackgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
+		}),
+		[noBackgroundsThemes],
+	);

 	return (
 		<Stack>
@@ -94,8 +164,11 @@ export function ThemePlaylists() {
 				searchPlaceholder={'Search Theme Playlists...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={''}
+				setSortBy={undefined}
+				customSearchEnabled={false}
 			/>
-			<Stack mt={isMobile ? '10rem' : '6rem'}>
+			<Stack mt={isMobile ? '10rem' : '6rem'} gap={'2rem'}>
 				<LoadingOverlay
 					visible={themePlaylistDataIsFetching}
 					zIndex={180}
@@ -108,7 +181,7 @@ export function ThemePlaylists() {
 				/>
 				{allThemeData && (
 					<>
-						<Group justify='center' align='center' pos={'relative'}>
+						<Stack w={'100%'} justify='center' align='center' pos={'relative'}>
 							<Text
 								p={0}
 								className={textClasses.settingsSubTitle}
@@ -116,10 +189,9 @@ export function ThemePlaylists() {
 							>
 								Defaults
 							</Text>
-						</Group>
-						<Group justify='center' align='center' pos={'relative'}>
+							<Group>
 								<Group pos={'relative'}>
-								{'All' === currentThemePlaylist && (
+									{'All' === settings.currentThemePlaylist && (
 										<FiChevronRight
 											style={{
 												position: 'absolute',
@@ -133,21 +205,62 @@ export function ThemePlaylists() {
 											}}
 										/>
 									)}
-								<Box>
 									<ThemePlaylistStack
-										cardPlaylist={{
-											id: undefined,
-											name: 'All',
-											default: 1,
-											themeList: `[${allThemeData?.map((a: Theme) => a.id) ?? ''}]`,
-										}}
+										cardPlaylist={allStack}
 										handleOpen={handleOpen}
 										allThemes={allThemeData}
 									/>
-								</Box>
 								</Group>
 								<Group pos={'relative'}>
-								{'Backgrounds' === currentThemePlaylist && (
+									{'Backgrounds' === settings.currentThemePlaylist && (
+										<FiChevronRight
+											style={{
+												position: 'absolute',
+												left: -14,
+												zIndex: 10,
+												fontSize: '2rem',
+												fontWeight: 'bold',
+												borderRadius: '50%',
+												backgroundColor: 'var(--mantine-color-border-0)',
+												color:
+													theme.borderColor === theme.primaryColor
+														? 'var(--mantine-color-accent-0)'
+														: 'var(--mantine-color-background-0)',
+											}}
+										/>
+									)}
+									<ThemePlaylistStack
+										cardPlaylist={backgroundsStack}
+										handleOpen={handleOpen}
+										allThemes={allThemeData}
+									/>
+								</Group>
+								<Group pos={'relative'}>
+									{'No Backgrounds' === settings.currentThemePlaylist && (
+										<FiChevronRight
+											style={{
+												position: 'absolute',
+												left: -14,
+												zIndex: 10,
+												fontSize: '2rem',
+												fontWeight: 'bold',
+												borderRadius: '50%',
+												backgroundColor: 'var(--mantine-color-border-0)',
+												color:
+													theme.borderColor === theme.primaryColor
+														? 'var(--mantine-color-accent-0)'
+														: 'var(--mantine-color-background-0)',
+											}}
+										/>
+									)}
+									<ThemePlaylistStack
+										cardPlaylist={noBackgroundsStack}
+										handleOpen={handleOpen}
+										allThemes={allThemeData}
+									/>
+								</Group>
+								<Group pos={'relative'}>
+									{'Time of Day' === settings.currentThemePlaylist && (
 										<FiChevronRight
 											style={{
 												position: 'absolute',
@@ -166,86 +279,15 @@ export function ThemePlaylists() {
 									)}
 									<Box>
 										<ThemePlaylistStack
-										cardPlaylist={{
-											id: undefined,
-											name: 'Backgrounds',
-											default: 1,
-											themeList: `[${allThemeData?.filter((a: any) => !a.backgroundImage.toLowerCase().includes('none')).map((a: Theme) => a.id) ?? ''}]`,
-										}}
-										handleOpen={handleOpen}
-										allThemes={allThemeData}
-									/>
-								</Box>
-							</Group>
-							<Group pos={'relative'}>
-								{'No Backgrounds' === currentThemePlaylist && (
-									<FiChevronRight
-										style={{
-											position: 'absolute',
-											left: -14,
-											zIndex: 10,
-											fontSize: '2rem',
-											fontWeight: 'bold',
-											borderRadius: '50%',
-											backgroundColor: 'var(--mantine-color-border-0)',
-											color:
-												theme.borderColor === theme.primaryColor
-													? 'var(--mantine-color-accent-0)'
-													: 'var(--mantine-color-background-0)',
-										}}
-									/>
-								)}
-								<Box>
-									<ThemePlaylistStack
-										cardPlaylist={{
-											id: undefined,
-											name: 'No Backgrounds',
-											default: 1,
-											themeList: `[${allThemeData?.filter((a: any) => a.backgroundImage.toLowerCase().includes('none')).map((a: Theme) => a.id) ?? ''}]`,
-										}}
-										handleOpen={handleOpen}
-										allThemes={allThemeData}
-									/>
-								</Box>
-							</Group>
-							<Group pos={'relative'}>
-								{'Time of Day' === currentThemePlaylist && (
-									<FiChevronRight
-										style={{
-											position: 'absolute',
-											left: -14,
-											zIndex: 10,
-											fontSize: '2rem',
-											fontWeight: 'bold',
-											borderRadius: '50%',
-											backgroundColor: 'var(--mantine-color-border-0)',
-											color:
-												theme.borderColor === theme.primaryColor
-													? 'var(--mantine-color-accent-0)'
-													: 'var(--mantine-color-background-0)',
-										}}
-									/>
-								)}
-								<Box>
-									<ThemePlaylistStack
-										cardPlaylist={{
-											id:
-												themePlaylists?.find(
-													(a: ThemePlaylist) => a.name === 'Time of Day',
-												)?.id ?? undefined,
-											name: 'Time of Day',
-											default: 1,
-											themeList:
-												themePlaylists?.find(
-													(a: ThemePlaylist) => a.name === 'Time of Day',
-												)?.themeList ?? '[]',
-										}}
+											cardPlaylist={timeOfDayPlaylist}
 											handleOpen={handleOpen}
 											allThemes={allThemeData}
 										/>
 									</Box>
 								</Group>
 							</Group>
+						</Stack>
+						<Stack w={'100%'} justify='center' align='center' pos={'relative'}>
 							<Group justify='center' align='center' pos={'relative'}>
 								<Text
 									p={0}
@@ -271,7 +313,7 @@ export function ThemePlaylists() {
 											.map((cardPlaylist: ThemePlaylist) => {
 												return (
 													<Group key={cardPlaylist.name} pos={'relative'}>
-													{cardPlaylist.name === currentThemePlaylist && (
+														{cardPlaylist.name === settings.currentThemePlaylist && (
 															<FiChevronRight
 																style={{
 																	position: 'absolute',
@@ -305,6 +347,7 @@ export function ThemePlaylists() {
 									</Group>
 								)}
 							</Group>
+						</Stack>
 					</>
 				)}
 			</Stack>
--- a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx
@@ -18,7 +18,7 @@ export function ThemePlaylistCard({
 	allThemes: Theme[];
 }) {
 	const [hover, setHover] = useState(false);
-	const { setThemeName, setCurrentThemePlaylist, handleDelete } = useCommonHooks();
+	const { updateSetting, handleDelete } = useCommonHooks();
 	const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const themeList = JSON.parse(
@@ -117,8 +117,8 @@ export function ThemePlaylistCard({
 					border: 'solid var(--mantine-color-border-0)',
 				}}
 				onClick={() => {
-					setCurrentThemePlaylist(cardPlaylist.name);
-					setThemeName('random');
+					updateSetting('currentThemePlaylist', cardPlaylist.name);
+					updateSetting('theme', 'random');
 				}}
 				disabled={themeList.length === 0}
 			>
--- a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
@@ -1,14 +1,15 @@
 import { Parallax } from '@gfazioli/mantine-parallax';
 import { Reflection } from '@gfazioli/mantine-reflection';
-import { ActionIcon, Box, Group, Stack, Text } from '@mantine/core';
-import { useDebouncedCallback, useDisclosure } from '@mantine/hooks';
+import { ActionIcon, Box, Group, Overlay, Popover, Stack, Text } from '@mantine/core';
+import { useDebouncedCallback, useDisclosure, useLongPress } from '@mantine/hooks';
 import { DeleteItemModal } from 'components';
 import { useCommonHooks } from 'hooks';
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FiEdit, FiTrash } from 'react-icons/fi';
 import { textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
-import { ThemeCard } from '../../Themes';
+import { ThemeCardPreview } from '../../Themes/ThemeCard';
+import { ThemeModalContent } from '../../Themes/ThemeModal/components/ThemeModalContent';

 export function ThemePlaylistStack({
 	cardPlaylist,
@@ -19,16 +20,14 @@ export function ThemePlaylistStack({
 	handleOpen: (cardPlaylist: ThemePlaylist) => void;
 	allThemes: Theme[];
 }) {
+	const [pressed, setPressed] = useState<boolean>(false);
+	const handlers = useLongPress(() => {
+		setPressed(true);
+	});
 	const [hover, setHover] = useState(false);
-	const { setThemeName, setCurrentThemePlaylist, handleDelete, currentUser } =
-		useCommonHooks();
+	const { settings, updateSetting, handleDelete } = useCommonHooks();
 	const [indexOffset, setIndexOffset] = useState(0);
-	const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
-	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
-	const themeList = JSON.parse(
-		cardPlaylist?.themeList?.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
-	);
-
+	const [movingIndex, setMovingIndex] = useState(0);
 	const missingTheme = {
 		id: undefined,
 		name: 'default',
@@ -41,8 +40,14 @@ export function ThemePlaylistStack({
 		randomEnabled: 1,
 		textShadowsEnabled: 0,
 		appShadowsEnabled: 0,
-		themeFont: currentUser.defaultFont,
+		themeFont: settings.defaultFont,
 	};
+	const [topTheme, setTopTheme] = useState<Theme>(missingTheme);
+	const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
+	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+	const themeList = JSON.parse(
+		cardPlaylist?.themeList?.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
+	);

 	const presentationProps = {
 		initialRotationX: 60,
@@ -62,7 +67,79 @@ export function ThemePlaylistStack({
 		}
 	}, 75);

+	const sortedItems = useMemo(
+		() =>
+			(themeList.length > 0 &&
+				themeList.sort((a: number, b: number) => (a > b ? 1 : -1))) ||
+			[],
+		[themeList],
+	);
+
+	const items = sortedItems?.map((item: number, index: number) => {
+		let spot = index + indexOffset;
+		if (spot <= -1) {
+			spot = index + indexOffset + themeList.length;
+		} else if (spot >= themeList.length) {
+			spot = index + indexOffset - themeList.length;
+		} else {
+			spot = index + indexOffset;
+		}
+		const theme: any = allThemes.find((theme: Theme) => theme.id === item);
 		return (
+			<Box
+				key={theme.id}
+				style={{
+					transition: 'all 0.3s ease-in-out',
+					position: 'absolute',
+					top: 16 * (spot + 1),
+					zIndex: themeList.length - spot,
+				}}
+			>
+				<Parallax {...(!(hover && spot === 0) ? presentationProps : { disabled: true })}>
+					<ThemeCardPreview key={theme.id} cardTheme={theme} />
+				</Parallax>
+			</Box>
+		);
+	});
+
+	useEffect(() => {
+		if (cardPlaylist.name === 'Time of Day') {
+			setTopTheme(
+				allThemes.find(
+					(t: Theme) => t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
+				) || missingTheme,
+			);
+		} else if (indexOffset > 0 && indexOffset < themeList.length) {
+			setMovingIndex(themeList.length - indexOffset);
+			setTopTheme(
+				allThemes.find(
+					(theme: Theme) => theme.id === themeList[themeList.length - indexOffset],
+				) || missingTheme,
+			);
+		} else if (indexOffset < 0 && Math.abs(indexOffset) < themeList.length) {
+			setMovingIndex(Math.abs(indexOffset));
+			setTopTheme(
+				allThemes.find((theme: Theme) => theme.id === themeList[Math.abs(indexOffset)]) ||
+					missingTheme,
+			);
+		} else if (indexOffset === 0) {
+			setMovingIndex(0);
+			setTopTheme(
+				allThemes.find((theme: Theme) => theme.id === themeList[0]) || missingTheme,
+			);
+		}
+	}, [indexOffset]);
+
+	return (
+		<Popover
+			withArrow
+			opened={pressed}
+			{...handlers}
+			arrowSize={16}
+			transitionProps={{ duration: 200, timingFunction: 'ease' }}
+		>
+			<Popover.Target>
+				<Box>
 					<Reflection reflectionStart={75} reflectionEnd={100} shadowOpacity={0.25}>
 						<Stack
 							gap={0}
@@ -78,8 +155,8 @@ export function ThemePlaylistStack({
 								borderRadius: '100%',
 							}}
 							onClick={() => {
-					setCurrentThemePlaylist(cardPlaylist.name);
-					setThemeName('random');
+								updateSetting('currentThemePlaylist', cardPlaylist.name);
+								updateSetting('theme', 'random');
 							}}
 						>
 							{modalOpened && (
@@ -100,85 +177,6 @@ export function ThemePlaylistStack({
 									}
 								/>
 							)}
-				{cardPlaylist?.name === 'Time of Day' ? (
-					<Stack
-						w='100%'
-						h='200px'
-						justify='center'
-						pos='relative'
-						gap={16}
-						style={{ overflow: 'hidden' }}
-					>
-						<Parallax
-							{...presentationProps}
-							style={{ position: 'absolute', top: -60, zIndex: 3 }}
-						>
-							<ThemeCard
-								cardTheme={
-									allThemes.find((theme: Theme) => theme.id === Number(themeList[0])) ||
-									missingTheme
-								}
-								allThemes={allThemes}
-								themePlaylists={[]}
-								setSelectedTheme={() => {}}
-								openThemeModal={() => {}}
-								enabled={false}
-								management={false}
-							/>
-						</Parallax>
-						<Parallax
-							{...presentationProps}
-							style={{ position: 'absolute', top: -60, zIndex: 2 }}
-						>
-							<ThemeCard
-								cardTheme={
-									allThemes.find((theme: Theme) => theme.id === Number(themeList[1])) ||
-									missingTheme
-								}
-								allThemes={allThemes}
-								themePlaylists={[]}
-								setSelectedTheme={() => {}}
-								openThemeModal={() => {}}
-								enabled={false}
-								management={false}
-							/>
-						</Parallax>
-						<Parallax
-							{...presentationProps}
-							style={{ position: 'absolute', top: -60, zIndex: 1 }}
-						>
-							<ThemeCard
-								cardTheme={
-									allThemes.find((theme: Theme) => theme.id === Number(themeList[2])) ||
-									missingTheme
-								}
-								allThemes={allThemes}
-								themePlaylists={[]}
-								setSelectedTheme={() => {}}
-								openThemeModal={() => {}}
-								enabled={false}
-								management={false}
-							/>
-						</Parallax>
-						<Parallax
-							{...presentationProps}
-							style={{ position: 'absolute', top: -60, zIndex: 0 }}
-						>
-							<ThemeCard
-								cardTheme={
-									allThemes.find((theme: Theme) => theme.id === Number(themeList[3])) ||
-									missingTheme
-								}
-								allThemes={allThemes}
-								themePlaylists={[]}
-								setSelectedTheme={() => {}}
-								openThemeModal={() => {}}
-								enabled={false}
-								management={false}
-							/>
-						</Parallax>
-					</Stack>
-				) : (
 							<Stack
 								w='100%'
 								h='200px'
@@ -192,59 +190,174 @@ export function ThemePlaylistStack({
 								}}
 								onWheel={handleMouseWheel}
 							>
-						{themeList
-							.sort((a: number, b: number) => (a > b ? 1 : -1))
-							.map((item: number, index: number) => {
-								let spot = index + indexOffset;
-								if (spot <= -1) {
-									spot = index + indexOffset + themeList.length;
-								} else if (spot >= themeList.length) {
-									spot = index + indexOffset - themeList.length;
-								} else {
-									spot = index + indexOffset;
-								}
-								const theme: any = allThemes.find((theme: Theme) => theme.id === item);
-								return (
-									<Box
-										key={theme.id}
+								{cardPlaylist?.name === 'Time of Day' ? (
+									<>
+										<Parallax
+											{...(!(
+												hover &&
+												Number(themeList[0]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											// style={{ position: 'absolute', top: 16 * 1, zIndex: 3 }}
 											style={{
-											transition: 'all 0.3s ease-in-out',
 												position: 'absolute',
-											top: 16 * (spot + 1),
-											zIndex: themeList.length - spot,
+												top: 16,
+												zIndex: !(
+													hover &&
+													Number(themeList[0]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 3
+													: 4,
 											}}
 										>
-										<Parallax {...presentationProps}>
-											<ThemeCard
-												key={theme.id}
-												cardTheme={theme}
-												allThemes={allThemes}
-												themePlaylists={[]}
-												setSelectedTheme={() => {}}
-												openThemeModal={() => {}}
-												enabled={false}
-												management={false}
+											<ThemeCardPreview
+												cardTheme={
+													allThemes.find(
+														(theme: Theme) => theme.id === Number(themeList[0]),
+													) || missingTheme
+												}
 											/>
 										</Parallax>
-									</Box>
-								);
-							})}
-					</Stack>
+										<Parallax
+											{...(!(
+												hover &&
+												Number(themeList[1]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[1]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 2
+													: 16,
+												zIndex: !(
+													hover &&
+													Number(themeList[1]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 2
+													: 4,
+											}}
+										>
+											<ThemeCardPreview
+												cardTheme={
+													allThemes.find(
+														(theme: Theme) => theme.id === Number(themeList[1]),
+													) || missingTheme
+												}
+											/>
+										</Parallax>
+										<Parallax
+											{...(!(
+												hover &&
+												Number(themeList[2]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[2]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 3
+													: 16,
+												zIndex: !(
+													hover &&
+													Number(themeList[2]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 1
+													: 4,
+											}}
+										>
+											<ThemeCardPreview
+												cardTheme={
+													allThemes.find(
+														(theme: Theme) => theme.id === Number(themeList[2]),
+													) || missingTheme
+												}
+											/>
+										</Parallax>
+										<Parallax
+											{...(!(
+												hover &&
+												Number(themeList[3]) ===
+													Number(themeList[Math.floor(new Date().getHours() / 6)])
+											) && presentationProps)}
+											style={{
+												position: 'absolute',
+												top: !(
+													hover &&
+													Number(themeList[3]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 16 * 4
+													: 0,
+												zIndex: !(
+													hover &&
+													Number(themeList[3]) ===
+														Number(themeList[Math.floor(new Date().getHours() / 6)])
+												)
+													? 0
+													: 4,
+											}}
+										>
+											<ThemeCardPreview
+												cardTheme={
+													allThemes.find(
+														(theme: Theme) => theme.id === Number(themeList[3]),
+													) || missingTheme
+												}
+											/>
+										</Parallax>
+									</>
+								) : (
+									items.slice(movingIndex, movingIndex + 8)
 								)}
-
-				<Group w={'100%'} pos={'absolute'} justify='space-between' bottom={0}>
+							</Stack>
+						</Stack>
+					</Reflection>
+					<Group
+						w={'100%'}
+						pos={'absolute'}
+						justify='space-between'
+						bottom={0}
+						style={{ zIndex: 1000 }}
+					>
+						<Group gap={2}>
 							<Text
 								style={{
 									paddingRight: '.25rem',
 									paddingLeft: '.25rem',
 									backgroundColor: 'var(--mantine-color-border-0)',
-							borderRadius: '4px',
-							color: 'var(--mantine-color-primary-0)',
+									borderRadius: '16px',
+									color: 'var(--mantine-color-background-0)',
 								}}
 							>
 								{cardPlaylist.name}
 							</Text>
-					<Group gap={0} style={{ zIndex: 1000 }}>
+							{themeList.length > 0 && (
+								<Text
+									style={{
+										paddingRight: '.25rem',
+										paddingLeft: '.25rem',
+										backgroundColor: 'var(--mantine-color-background-0)',
+										borderRadius: '16px',
+										color: 'var(--mantine-color-accent-0)',
+										minWidth: '1.5rem',
+										textAlign: 'center',
+									}}
+								>
+									{themeList.length}
+								</Text>
+							)}
+						</Group>
+						<Group gap={0}>
 							{!defaultLists.includes(cardPlaylist.name) && (
 								<ActionIcon
 									style={{
@@ -278,7 +391,30 @@ export function ThemePlaylistStack({
 							)}
 						</Group>
 					</Group>
-			</Stack>
-		</Reflection>
+				</Box>
+			</Popover.Target>
+			<Popover.Dropdown
+				bg={'var(--mantine-color-primary-0)'}
+				p={0}
+				style={{ border: 'none' }}
+				onClick={() => {
+					pressed && setPressed(false);
+				}}
+			>
+				<Overlay
+					w={'calc(300%)'}
+					h={'calc(300%)'}
+					pos={'absolute'}
+					left={'-100%'}
+					top={'-100%'}
+					zIndex={-1}
+					opacity={0.8}
+					bg={
+						'radial-gradient(circle, var(--mantine-color-primary-0) 0%, transparent 60%)'
+					}
+				/>
+				<ThemeModalContent selectedTheme={topTheme} />
+			</Popover.Dropdown>
+		</Popover>
 	);
 }
--- a/src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCard.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCard.tsx
@@ -27,8 +27,7 @@ export function ThemeCard({
 }) {
 	const { hovered, ref: hoverRef } = useHover();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
-	const { currentTheme, setCurrentTheme, setCurrentThemePlaylist, handleDelete } =
-		useCommonHooks();
+	const { settings, updateSetting, handleDelete } = useCommonHooks();
 	const [hoverPreview, setHoverPreview] = useDebouncedState(false, 1000);
 	const [transition, setTransition] = useDebouncedState(false, 200);

@@ -113,7 +112,7 @@ export function ThemeCard({
 			<Button
 				w={'275px'}
 				h={'115px'}
-				disabled={currentTheme === 'random'}
+				disabled={settings.theme === 'random'}
 				style={{
 					backgroundImage:
 						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
@@ -137,12 +136,12 @@ export function ThemeCard({
 				}}
 				onClick={() => {
 					if (enabled !== false) {
-						setCurrentTheme(cardTheme.name);
-						setCurrentThemePlaylist('All');
+						updateSetting('theme', cardTheme.name);
+						updateSetting('currentThemePlaylist', 'All');
 					}
 				}}
 			>
-				{hovered && enabled && currentTheme !== 'random' && (
+				{hovered && enabled && settings.theme !== 'random' && (
 					<Overlay
 						style={{
 							opacity: !hoverPreview || transition ? 0.5 : 0,
--- a/src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCardPreview.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCardPreview.tsx
@@ -0,0 +1,119 @@
+import { Box, Button, Group, Stack, Text } from '@mantine/core';
+import type { Theme } from 'types';
+import { MiniAppItem } from './components/MiniAppItem';
+import { MiniGroupItem } from './components/MiniGroupItem';
+
+export function ThemeCardPreview({ cardTheme }: { cardTheme: Theme }) {
+	return (
+		<Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}>
+			<Text
+				style={{
+					position: 'absolute',
+					top: -10,
+					left: 6,
+					paddingRight: '.25rem',
+					paddingLeft: '.25rem',
+					backgroundColor: cardTheme.backgroundColor,
+					borderRadius: '4px',
+					color:
+						cardTheme.borderColor === cardTheme.primaryColor
+							? cardTheme.accentColor
+							: cardTheme.primaryColor,
+					zIndex: 3,
+					boxShadow: `2px -2px ${cardTheme.borderColor}`,
+					textOverflow: 'ellipsis',
+					overflow: 'hidden',
+					whiteSpace: 'nowrap',
+					maxWidth: 275,
+				}}
+			>
+				{cardTheme.name}
+			</Text>
+			<Button
+				w={'275px'}
+				h={'115px'}
+				style={{
+					backgroundImage:
+						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
+							? undefined
+							: `linear-gradient(${cardTheme?.backgroundColor}33, ${cardTheme?.backgroundColor}33), url(../../trigger/api/backgroundImages/thumbs/${cardTheme?.backgroundImage})`,
+					backgroundSize:
+						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
+							? undefined
+							: 'cover',
+					backgroundColor:
+						cardTheme?.backgroundImage?.toLocaleLowerCase() === 'none'
+							? cardTheme?.backgroundColor
+							: undefined,
+					backgroundPosition: 'center',
+					border: `solid ${cardTheme.borderColor}`,
+					transition: 'all .25s ease',
+				}}
+			>
+				<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
+					<Stack align='center' gap={12}>
+						<Box
+							style={{
+								height: '8px',
+								width: '100px',
+								backgroundColor: cardTheme.searchColor,
+								borderRadius: '4px',
+								borderBottom: `solid 1px ${cardTheme.borderColor}`,
+							}}
+						/>
+						<Group justify='space-between'>
+							<Box
+								style={{
+									height: '.5rem',
+									width: '100px',
+									backgroundColor: cardTheme.accentColor,
+									borderRadius: '4px',
+								}}
+							/>
+							<Box
+								style={{
+									height: '.5rem',
+									width: '50px',
+									backgroundColor: cardTheme.primaryColor,
+									borderRadius: '4px',
+								}}
+							/>
+						</Group>
+						<Group w={'100%'} mb={-4}>
+							<Box
+								style={{
+									height: '2px',
+									width: '40px',
+									backgroundColor: cardTheme.primaryColor,
+									borderRadius: '4px',
+								}}
+							/>
+						</Group>
+						<Group w={'100%'} gap={10} justify='space-between'>
+							<MiniAppItem cardTheme={cardTheme} />
+							<MiniAppItem cardTheme={cardTheme} />
+							<MiniAppItem cardTheme={cardTheme} />
+							<MiniAppItem cardTheme={cardTheme} />
+						</Group>
+						<Group w={'100%'} mb={-4}>
+							<Box
+								style={{
+									height: '2px',
+									width: '32px',
+									backgroundColor: cardTheme.primaryColor,
+									borderRadius: '4px',
+								}}
+							/>
+						</Group>
+						<Group w={'100%'} gap={10} justify='space-between'>
+							<MiniGroupItem cardTheme={cardTheme} />
+							<MiniGroupItem cardTheme={cardTheme} />
+							<MiniGroupItem cardTheme={cardTheme} />
+							<MiniGroupItem cardTheme={cardTheme} />
+						</Group>
+					</Stack>
+				</Group>
+			</Button>
+		</Group>
+	);
+}
--- a/src/pages/settings/components/Theming/Themes/ThemeCard/components/ThemeManagementPill.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeCard/components/ThemeManagementPill.tsx
@@ -29,14 +29,13 @@ export function ThemeManagementPill({
 	transition: boolean;
 	setTransition: (transition: boolean) => void;
 }) {
-	const { currentTheme, currentThemePlaylist, handleThemeChange, theme } =
-		useCommonHooks();
+	const { settings, handleThemeChange, theme } = useCommonHooks();
 	const [shiftEdit, setShiftEdit] = useState<number>(0);
 	const [shiftShuffle, setShiftShuffle] = useState<number>(0);
 	const { mutateAsync } = useMutationAPI();
 	return (
 		<>
-			{currentTheme === 'random' && cardTheme.name === theme.name ? (
+			{settings.theme === 'random' && cardTheme.name === theme.name ? (
 				<Group>
 					<Group
 						onMouseEnter={() => {
@@ -81,16 +80,16 @@ export function ThemeManagementPill({
 							setShiftShuffle(0);
 						}}
 						onClick={() => {
-							if (currentThemePlaylist === 'All') {
+							if (settings.currentThemePlaylist === 'All') {
 								handleThemeChange(allThemes, false);
-							} else if (currentThemePlaylist === 'Backgrounds') {
+							} else if (settings.currentThemePlaylist === 'Backgrounds') {
 								handleThemeChange(
 									allThemes.filter(
 										(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
 									),
 									false,
 								);
-							} else if (currentThemePlaylist === 'No Backgrounds') {
+							} else if (settings.currentThemePlaylist === 'No Backgrounds') {
 								handleThemeChange(
 									allThemes.filter((a: any) =>
 										a.backgroundImage.toLowerCase().includes('none'),
@@ -100,7 +99,7 @@ export function ThemeManagementPill({
 							} else {
 								const themeList = JSON.parse(
 									themePlaylists?.find(
-										(t: ThemePlaylist) => t?.name === currentThemePlaylist,
+										(t: ThemePlaylist) => t?.name === settings.currentThemePlaylist,
 									)?.themeList ?? '[]',
 								);
 								const filteredThemes = allThemes.filter((t: Theme) =>
@@ -203,6 +202,8 @@ export function ThemeManagementPill({
 									method: 'PATCH',
 									endpoint: 'api/themes',
 									body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
+								}).catch((error) => {
+									console.error(error);
 								});
 							}}
 						>
--- a/src/pages/settings/components/Theming/Themes/ThemeCard/index.ts
+++ b/src/pages/settings/components/Theming/Themes/ThemeCard/index.ts
@@ -1 +1,2 @@
 export { ThemeCard } from './ThemeCard';
+export { ThemeCardPreview } from './ThemeCardPreview';
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/ThemeModal.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeModal/ThemeModal.tsx
@@ -30,7 +30,7 @@ export function ThemeModal({
 	themePlaylists: ThemePlaylist[];
 }) {
 	const themesEndpoint = 'api/themes';
-	const { currentUser, isMobile } = useCommonHooks();
+	const { settings, isMobile } = useCommonHooks();
 	const [defaultTheme, setDefaultTheme] = useState<Theme>({ ...selectedTheme });
 	const [designerTheme, setDesignerTheme] = useState<Theme>({
 		...selectedTheme,
@@ -68,7 +68,7 @@ export function ThemeModal({
 			randomEnabled: 1,
 			textShadowsEnabled: 0,
 			appShadowsEnabled: 0,
-			themeFont: currentUser.defaultFont,
+			themeFont: settings.defaultFont,
 		});
 	};

@@ -77,6 +77,8 @@ export function ThemeModal({
 			method: designerTheme?.id === undefined ? 'POST' : 'PATCH',
 			endpoint: themesEndpoint,
 			body: designerTheme,
+		}).catch((error) => {
+			console.error(error);
 		});
 		handleClose();
 	};
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeChanges.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeChanges.tsx
@@ -25,7 +25,7 @@ export default function ThemeChanges({
 	designerTheme: Theme;
 	setDesignerTheme: (theme: Theme) => void;
 }) {
-	const { currentUser, getObjectDiff } = useCommonHooks();
+	const { settings, getObjectDiff } = useCommonHooks();
 	return (
 		<Stack
 			gap={0}
@@ -148,7 +148,7 @@ export default function ThemeChanges({
 														}}
 													>
 														{defaultTheme[key as keyof Theme] ||
-															`Default (${currentUser.defaultFont})`}
+															`Default (${settings.defaultFont})`}
 													</Text>
 													<Text>→</Text>
 													<Text
@@ -158,7 +158,7 @@ export default function ThemeChanges({
 														}}
 													>
 														{designerTheme[key as keyof Theme] ||
-															`Default (${currentUser.defaultFont})`}
+															`Default (${settings.defaultFont})`}
 													</Text>
 												</Group>
 											)}
@@ -197,9 +197,11 @@ export default function ThemeChanges({
 														<ColorSwatch
 															h={50}
 															onClick={() => {
-																navigator.clipboard.writeText(
-																	defaultTheme[key as keyof Theme] as string,
-																);
+																navigator.clipboard
+																	.writeText(defaultTheme[key as keyof Theme] as string)
+																	.catch((error) => {
+																		console.error(error);
+																	});
 																notifications.show({
 																	title: (
 																		<Text fw={600} c={'var(--mantine-color-accent-0)'}>
@@ -250,9 +252,11 @@ export default function ThemeChanges({
 														<ColorSwatch
 															h={50}
 															onClick={() => {
-																navigator.clipboard.writeText(
-																	defaultTheme[key as keyof Theme] as string,
-																);
+																navigator.clipboard
+																	.writeText(defaultTheme[key as keyof Theme] as string)
+																	.catch((error) => {
+																		console.error(error);
+																	});
 																notifications.show({
 																	title: (
 																		<Text fw={600} c={'var(--mantine-color-accent-0)'}>
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx
@@ -37,7 +37,7 @@ export function ThemeEditor({
 	duplicate: boolean;
 	setDuplicate: (duplicate: boolean) => void;
 }) {
-	const { currentUser, isMobile } = useCommonHooks();
+	const { settings, isMobile } = useCommonHooks();
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
 	const [rgba, setRgba] = useState<{ r: number; g: number; b: number; a?: number }>({
@@ -80,7 +80,7 @@ export function ThemeEditor({
 		} else if (font && !customFontEnabled) {
 			setDesignerTheme({
 				...designerTheme,
-				themeFont: currentUser.defaultFont || 'Jost',
+				themeFont: settings.defaultFont || 'Jost',
 			});
 		}
 	}, [font]);
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx
@@ -5,7 +5,7 @@ import { selectClasses, textClasses } from 'styles';
 import type { Theme } from 'types';

 export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
-	const { currentUser, textShadowStyle, largeTextShadowStyle } = useCommonHooks();
+	const { settings, textShadowStyle, largeTextShadowStyle } = useCommonHooks();
 	return (
 		<Stack
 			style={{
@@ -31,10 +31,11 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 				'--mantine-color-border-0': selectedTheme?.borderColor,
 				'--mantine-color-search-0': selectedTheme?.searchColor,
 				transition: 'all 0.2s ease',
-				fontFamily: selectedTheme.themeFont ?? currentUser.defaultFont,
+				fontFamily: selectedTheme.themeFont ?? settings.defaultFont,
 			}}
 			align='center'
 			gap={0}
+			miw={600}
 		>
 			<Select
 				disabled
@@ -46,7 +47,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 						color: selectedTheme?.primaryColor,
 						borderBottom: `thin solid ${selectedTheme?.borderColor}`,
 						backgroundColor: `color-mix(in srgb, ${selectedTheme?.searchColor}, transparent 50%)`,
-						fontFamily: selectedTheme.themeFont ?? currentUser.defaultFont,
+						fontFamily: selectedTheme.themeFont ?? settings.defaultFont,
 					},
 				}}
 				data={[
@@ -86,22 +87,6 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 				>
 					Applications
 				</Text>
-				<Stack
-					style={{
-						gap: '.25rem',
-						backgroundSize: 'cover',
-						borderBottom: '0px solid',
-						display: 'flex',
-						gridColumnGap: '5px',
-						gridRowGap: '5px',
-						gridTemplateColumns: '1fr 1fr 1fr',
-						gridTemplateRows: '64px',
-						padding: 0,
-						justifyContent: 'center',
-						alignContent: 'center',
-					}}
-					w={'100%'}
-				>
 				<Group
 					style={{
 						display: 'grid',
@@ -140,7 +125,6 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 					/>
 				</Group>
 			</Stack>
-			</Stack>
 			<Stack gap={0} w={'100%'}>
 				<Text
 					className={textClasses.sectionTitle}
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeOptions.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeOptions.tsx
@@ -35,7 +35,7 @@ export default function ThemeOptions({
 	duplicate: boolean;
 	randomColor: (withAlpha?: boolean) => string;
 }) {
-	const { currentUser } = useCommonHooks();
+	const { settings } = useCommonHooks();
 	return (
 		<Stack h={'100%'} justify='space-between' align='center' gap={4}>
 			<Stack w={'100%'} align='center' gap={0} h={'min-content'}>
@@ -137,7 +137,7 @@ export default function ThemeOptions({
 							onClick={() => {
 								setCustomFontEnabled(!customFontEnabled);
 								setFont(
-									customFontEnabled ? currentUser.defaultFont : defaultTheme.themeFont,
+									customFontEnabled ? settings.defaultFont : defaultTheme.themeFont,
 								);
 							}}
 							style={{
@@ -163,7 +163,7 @@ export default function ThemeOptions({
 							autoLoad
 							defaultValue={
 								designerTheme.themeFont === null
-									? currentUser.defaultFont
+									? settings.defaultFont
 									: designerTheme.themeFont
 							}
 							value={(pickerFont: string) => {
@@ -183,7 +183,7 @@ export default function ThemeOptions({
 							color={'red'}
 							size={32}
 							onClick={() => {
-								setFont(currentUser.defaultFont);
+								setFont(settings.defaultFont);
 								setCustomFontEnabled(false);
 							}}
 							style={{
--- a/src/pages/settings/components/Theming/Themes/ThemePreviewMiddleware.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemePreviewMiddleware.tsx
@@ -61,6 +61,9 @@ export function ThemePreviewMiddleware({
 				bg={'var(--mantine-color-primary-0)'}
 				p={0}
 				style={{ border: 'none' }}
+				onClick={() => {
+					pressed && setPressed(false);
+				}}
 			>
 				<Overlay
 					w={'calc(300%)'}
--- a/src/pages/settings/components/Theming/Themes/Themes.tsx
+++ b/src/pages/settings/components/Theming/Themes/Themes.tsx
@@ -24,15 +24,37 @@ import { ThemeCard } from './ThemeCard';
 import { ThemeModal } from './ThemeModal';

 export function Themes() {
+	const { settings, updateSetting, theme, isMobile } = useCommonHooks();
 	const backgroundsEndpoint = 'api/backgrounds';
 	const { data: allThemeData, isFetching: allThemeDataIsFetching } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
-	const allThemes: Theme[] = allThemeData?.filter((a: Theme) =>
+	const allThemes: Theme[] = allThemeData
+		?.filter((a: Theme) =>
 			a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
-	);
+		)
+		.sort((a: Theme, b: Theme) => {
+			switch (settings.themesSettingsSort) {
+				case 'A>Z':
+					return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
+				case 'Z>A':
+					return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? 1 : -1;
+				case 'Newest':
+					if (a.id && b.id) {
+						return a.id < b.id ? 1 : -1;
+					}
+					return -1;
+				case 'Oldest':
+					if (a.id && b.id) {
+						return a.id > b.id ? 1 : -1;
+					}
+					return -1;
+				default:
+					return 0;
+			}
+		});
 	const { data: backgroundData, isFetching: backgroundDataIsFetching } = useQueryAPI({
 		endpoint: backgroundsEndpoint,
 	});
@@ -62,16 +84,6 @@ export function Themes() {
 		),
 	] as string[];

-	const {
-		currentTheme,
-		currentUser,
-		setCurrentTheme,
-		theme,
-		isMobile,
-		currentThemePlaylist,
-		setCurrentThemePlaylist,
-	} = useCommonHooks();
-
 	const [selectedTheme, setSelectedTheme] = useState<Theme>({
 		id: undefined,
 		name: 'default',
@@ -84,7 +96,7 @@ export function Themes() {
 		randomEnabled: 1,
 		textShadowsEnabled: 0,
 		appShadowsEnabled: 0,
-		themeFont: currentUser.defaultFont,
+		themeFont: settings.defaultFont,
 	});
 	const [isLoading, setIsLoading] = useState(false);
 	const [isNew, setIsNew] = useState(false);
@@ -139,6 +151,11 @@ export function Themes() {
 				searchPlaceholder={'Search Themes...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={settings.themesSettingsSort}
+				setSortBy={(value) => {
+					updateSetting('themesSettingsSort', value);
+				}}
+				customSearchEnabled={false}
 			/>
 			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
 				<LoadingOverlay
@@ -159,7 +176,7 @@ export function Themes() {
 				>
 					<Overlay
 						display={
-							currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
+							settings.theme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
 						}
 						blur={5}
 						style={{
@@ -174,7 +191,7 @@ export function Themes() {
 					{allThemes?.length > 0 ? (
 						allThemes.map((cardTheme: Theme) => (
 							<Group key={cardTheme.name} pos={'relative'}>
-								{cardTheme.name === currentTheme && (
+								{cardTheme.name === settings.theme && (
 									<FiChevronRight
 										style={{
 											position: 'absolute',
@@ -194,11 +211,12 @@ export function Themes() {
 								<Box
 									style={{
 										zIndex:
-											currentTheme === 'random' &&
+											settings.theme === 'random' &&
 											(themePlaylists
 												.find(
 													(t: ThemePlaylist) =>
-														t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
+														t.name.toLowerCase() ===
+														settings.currentThemePlaylist.toLowerCase(),
 												)
 												?.themeList.includes(`${cardTheme.id}`) ||
 												cardTheme.name === theme.name)
@@ -285,7 +303,9 @@ export function Themes() {
 									fontSize: isMobile ? '.8rem' : '1.2rem',
 								}}
 							>
-								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
+								{settings.currentThemePlaylist === 'All'
+									? 'All'
+									: settings.currentThemePlaylist}
 							</Text>
 						</Group>
 						<Divider
@@ -295,11 +315,13 @@ export function Themes() {
 						/>
 						<Button
 							onClick={() => {
-								if (currentThemePlaylist === 'All') {
-									navigate(`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`);
+								if (settings.currentThemePlaylist === 'All') {
+									void navigate(
+										`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`,
+									);
 								} else {
-									setCurrentThemePlaylist('All');
-									setCurrentTheme(theme.name);
+									updateSetting('currentThemePlaylist', 'All');
+									updateSetting('theme', theme.name);
 								}
 							}}
 							style={{
@@ -307,7 +329,7 @@ export function Themes() {
 								padding: isMobile ? 0 : undefined,
 							}}
 						>
-							{currentThemePlaylist === 'All' ? (
+							{settings.currentThemePlaylist === 'All' ? (
 								isMobile ? (
 									<FiMousePointer />
 								) : (
@@ -323,11 +345,11 @@ export function Themes() {
 							className={toolTipClasses.default}
 							classNames={toolTipClasses}
 							label='Shuffle is always on when a playlist is active.'
-							disabled={currentThemePlaylist === 'All'}
+							disabled={settings.currentThemePlaylist === 'All'}
 						>
 							<Group>
 								<Switch
-									disabled={currentThemePlaylist !== 'All'}
+									disabled={settings.currentThemePlaylist !== 'All'}
 									label={
 										isMobile ? (
 											<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
@@ -336,10 +358,10 @@ export function Themes() {
 										)
 									}
 									labelPosition='left'
-									checked={currentTheme === 'random'}
+									checked={settings.theme === 'random'}
 									onChange={(e) => {
-										setCurrentTheme(e.target.checked ? 'random' : theme.name);
-										setCurrentThemePlaylist('All');
+										updateSetting('theme', e.target.checked ? 'random' : theme.name);
+										updateSetting('currentThemePlaylist', 'All');
 									}}
 									className={switchClasses.default}
 									classNames={switchClasses}
--- a/src/pages/settings/components/WoL/DebouncedWolClient.tsx
+++ b/src/pages/settings/components/WoL/DebouncedWolClient.tsx
@@ -28,7 +28,11 @@ function DebouncedWolClient({

 	useEffect(() => {
 		if (debounced && Object.keys(debounced).length) {
-			mutateAsync({ method: 'PATCH', endpoint: 'api/WolClients', body: debounced });
+			mutateAsync({ method: 'PATCH', endpoint: 'api/WolClients', body: debounced }).catch(
+				(error) => {
+					console.error(error);
+				},
+			);
 		}
 	}, [debounced]);

--- a/src/pages/settings/components/WoL/WolClients.tsx
+++ b/src/pages/settings/components/WoL/WolClients.tsx
@@ -19,6 +19,7 @@ import DebouncedWolClient from './DebouncedWolClient';
 import WolClientSettingsItem from './WolClientSettingsItem';

 export function WolClients() {
+	const { isMobile, theme, settings, updateSetting } = useCommonHooks();
 	const defaultWolClient: WolClient = {
 		id: undefined,
 		hostname: '',
@@ -41,13 +42,37 @@ export function WolClients() {
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const wolClients: WolClient[] =
-		wolClientsData.filter(
+		wolClientsData
+			?.filter(
 				(a: WolClient) =>
 					a.hostname.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
 					a.macAddress.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
-		) || [];
+			)
+			?.sort((a: WolClient, b: WolClient) => {
+				switch (settings.wolClientsSettingsSort) {
+					case 'A>Z':
+						return a.hostname.toLocaleLowerCase() > b.hostname.toLocaleLowerCase()
+							? 1
+							: -1;
+					case 'Z>A':
+						return a.hostname.toLocaleLowerCase() < b.hostname.toLocaleLowerCase()
+							? 1
+							: -1;
+					case 'Newest':
+						if (a.id && b.id) {
+							return a.id < b.id ? 1 : -1;
+						}
+						return -1;
+					case 'Oldest':
+						if (a.id && b.id) {
+							return a.id > b.id ? 1 : -1;
+						}
+						return -1;
+					default:
+						return 0;
+				}
+			}) || [];
 	const { mutateAsync } = useMutationAPI();
-	const { isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [isOpen, setIsOpen] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
@@ -77,6 +102,8 @@ export function WolClients() {
 									method: 'POST',
 									endpoint: endpoint,
 									body: values,
+								}).catch((error) => {
+									console.error(error);
 								});
 								handleClose();
 							})}
@@ -151,6 +178,11 @@ export function WolClients() {
 				searchPlaceholder={'Search Clients...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
+				sortBy={settings.wolClientsSettingsSort}
+				setSortBy={(value) => {
+					updateSetting('wolClientsSettingsSort', value);
+				}}
+				customSearchEnabled={false}
 			/>
 			<Stack
 				mt={isMobile ? '10rem' : '6rem'}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -7,6 +7,7 @@ export type { Message } from './message';
 export type { PersonalData } from './personalData';
 export type { Provider } from './provider';
 export type { SearchHistoryItem, SearchShortcut } from './search';
+export type { Settings } from './settings';
 export type { Theme, ThemePlaylist } from './theme';
 export { ThemeProperties } from './theme';
 export type { User } from './user';
--- a/src/types/settings.ts
+++ b/src/types/settings.ts
@@ -0,0 +1,35 @@
+export interface Settings {
+	theme: string;
+	appFilter: string[];
+	appSort: string;
+	appDensity: number;
+	appScale: number;
+	bookmarkSort: string;
+	bookmarkFilter: string[];
+	bookmarkDensity: number;
+	bookmarkScale: number;
+	currentThemePlaylist: string;
+	defaultProviderLabel: string;
+	defaultProviderURL: string;
+	defaultProviderPrefix: string;
+	defaultProviderIcon: string;
+	timeFormat: string;
+	firstName: string;
+	lastName: string;
+	email: string;
+	physicalAddress: string;
+	enableWol: number;
+	enableGuacamole: number;
+	guacamoleHost: string;
+	nickname: string;
+	defaultFont: string;
+	lat: number;
+	lon: number;
+	messageSettingsSort: string;
+	appSettingsSort: string;
+	bookmarkSettingsSort: string;
+	themesSettingsSort: string;
+	providerSettingsSort: string;
+	wolClientsSettingsSort: string;
+	guacamoleClientsSettingsSort: string;
+}
Author	SHA1	Message	Date
Sean Edmunds	148bef7dfd	Package updates All checks were successful Deploy to production / build (push) Successful in 20s Details	2026-10-23 11:27:04 -05:00
Sean Edmunds	e6c5f02a50	Sort fixes All checks were successful Deploy to production / build (push) Successful in 18s Details	2026-10-20 19:19:27 -05:00
Sean Edmunds	2f8d3ad58e	Added persistent sort to more locations All checks were successful Deploy to production / build (push) Successful in 18s Details	2026-10-20 18:58:52 -05:00
Sean Edmunds	2cf34f86fa	Minor fixes All checks were successful Deploy to production / build (push) Successful in 19s Details	2026-10-20 16:13:51 -05:00
Sean Edmunds	ecf061da1f	Refactor settings management and add mutation error handling All checks were successful Deploy to production / build (push) Successful in 18s Details	2026-10-20 14:16:20 -05:00
Sean Edmunds	69dae97a79	Minor fixes All checks were successful Deploy to production / build (push) Successful in 19s Details	2026-10-15 17:05:26 -05:00
Sean Edmunds	ffd241dad8	Minor updates to styles and package updates All checks were successful Deploy to production / build (push) Successful in 19s Details	2026-10-15 13:58:35 -05:00
Sean Edmunds	142a45ef54	Bug fix All checks were successful Deploy to production / build (push) Successful in 19s Details	2026-10-15 12:14:58 -05:00
Sean Edmunds	4bcd1e4858	Working preview on time of day playlist All checks were successful Deploy to production / build (push) Successful in 19s Details	2026-10-13 14:05:51 -05:00
Sean Edmunds	1f86881533	Performance tweaks All checks were successful Deploy to production / build (push) Successful in 19s Details	2026-10-13 13:52:24 -05:00
Sean Edmunds	a78ed0dad0	Improvements to playlist stacks All checks were successful Deploy to production / build (push) Successful in 18s Details	2026-10-13 13:31:28 -05:00
Sean Edmunds	1e614790f6	Delete bug fix All checks were successful Deploy to production / build (push) Successful in 19s Details	2026-10-13 11:58:52 -05:00
Sean Edmunds	e4b07a3907	Updates to settings to allow sorting All checks were successful Deploy to production / build (push) Successful in 20s Details	2026-10-13 11:37:27 -05:00
Sean Edmunds	01dd6b1aa2	Adding sorting to items in settings All checks were successful Deploy to production / build (push) Successful in 18s Details	2026-10-12 17:10:03 -05:00
Sean Edmunds	78e6bd3374	Minor style fix All checks were successful Deploy to production / build (push) Successful in 18s Details	2026-10-12 16:17:50 -05:00
Sean Edmunds	bd9e77c382	Updates to the stack for performance All checks were successful Deploy to production / build (push) Successful in 18s Details	2026-10-12 16:04:09 -05:00
Sean Edmunds	ea56aa8402	New less heavy component for previews All checks were successful Deploy to production / build (push) Successful in 17s Details	2026-10-12 13:43:14 -05:00
smedmunds	204c9fcd02	Merge pull request 'fix/theme-playlists-performance' (#1 ) from fix/theme-playlists-performance into master All checks were successful Deploy to production / build (push) Successful in 20s Details Reviewed-on: #1	2026-10-12 11:21:30 -05:00
Sean Edmunds	bf761df56d	Style fixes All checks were successful Deploy to production / build (push) Successful in 21s Details	2026-10-12 11:17:21 -05:00
Sean Edmunds	68fa451d19	perf: optimize ThemePlaylists component by memoizing handlers, derived state, and stack objects All checks were successful Deploy to production / build (push) Successful in 21s Details	2026-10-12 15:47:49 +00:00