Updates to styles; misc bugfixes

package-lock.json

@@ -13,26 +13,26 @@
 				"@mantine/form": "^8.1.3",
 				"@mantine/hooks": "^8.1.3",
 				"@mantine/notifications": "^8.1.3",
-				"@tanstack/react-query": "^5.81.5",
+				"@tanstack/react-query": "^5.82.0",
-				"@tanstack/react-query-devtools": "^5.81.5",
+				"@tanstack/react-query-devtools": "^5.82.0",
-				"@tanstack/react-query-persist-client": "^5.81.5",
+				"@tanstack/react-query-persist-client": "^5.82.0",
 				"idb-keyval": "^6.2.2",
 				"jotai": "^2.12.5",
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
 				"react-icons": "^5.5.0",
 				"react-router-dom": "^7.6.3",
-				"recharts": "^3.0.2"
+				"recharts": "^3.1.0"
 			},
 			"devDependencies": {
-				"@types/node": "^24.0.10",
+				"@types/node": "^24.0.12",
 				"@types/react": "^19.1.8",
 				"@types/react-dom": "^19.1.6",
 				"@vitejs/plugin-react": "^4.6.0",
 				"@vitest/coverage-v8": "^3.2.4",
 				"@vitest/ui": "^3.2.4",
 				"typescript": "^5.8.3",
-				"vite": "^7.0.2",
+				"vite": "^7.0.4",
 				"vite-plugin-dts": "~4.5.4",
 				"vite-tsconfig-paths": "^5.1.4",
 				"vitest": "^3.2.4"
@@ -1630,9 +1630,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.81.5",
+			"version": "5.82.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.5.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.82.0.tgz",
-			"integrity": "sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q==",
+			"integrity": "sha512-JrjoVuaajBQtnoWSg8iaPHaT4mW73lK2t+exxHNOSMqy0+13eKLqJgTKXKImLejQIfdAHQ6Un0njEhOvUtOd5w==",
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -1650,12 +1650,12 @@
 			}
 		},
 		"node_modules/@tanstack/query-persist-client-core": {
-			"version": "5.81.5",
+			"version": "5.82.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.5.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.82.0.tgz",
-			"integrity": "sha512-imiMWYXf8KuXavOgVRc5IDixqP0VKEN6IxZ/vyuX87Wk0eX7QmRtjLn1AD4Hz7GxYPM3RalRzP5Bshc30hgOcg==",
+			"integrity": "sha512-lcjS9Zj9YKo5HNNB/GilPNZos9jKpNqpxmgPkJx2NsKEbgiVfyzWVxKAa09bkhKyWMQ/gMp8kx2RPuh/tG2wSw==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.81.5"
+				"@tanstack/query-core": "5.82.0"
 			},
 			"funding": {
 				"type": "github",
@@ -1663,12 +1663,12 @@
 			}
 		},
 		"node_modules/@tanstack/react-query": {
-			"version": "5.81.5",
+			"version": "5.82.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.5.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.82.0.tgz",
-			"integrity": "sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==",
+			"integrity": "sha512-mnk8/ofKEthFeMdhV1dV8YXRf+9HqvXAcciXkoo755d/ocfWq7N/Y9jGOzS3h7ZW9dDGwSIhs3/HANWUBsyqYg==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.81.5"
+				"@tanstack/query-core": "5.82.0"
 			},
 			"funding": {
 				"type": "github",
@@ -1679,9 +1679,9 @@
 			}
 		},
 		"node_modules/@tanstack/react-query-devtools": {
-			"version": "5.81.5",
+			"version": "5.82.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.5.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.82.0.tgz",
-			"integrity": "sha512-lCGMu4RX0uGnlrlLeSckBfnW/UV+KMlTBVqa97cwK7Z2ED5JKnZRSjNXwoma6sQBTJrcULvzgx2K6jEPvNUpDw==",
+			"integrity": "sha512-MC05Zq3zr/59jhgF7dL6JSGPg1krbasDSizmRxjNcvxgh/sUTwRFD9CGN10YYX7LB6jq0ZpFtCjSVGdLiFrKAA==",
 			"license": "MIT",
 			"dependencies": {
 				"@tanstack/query-devtools": "5.81.2"
@@ -1691,24 +1691,24 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.81.5",
+				"@tanstack/react-query": "^5.82.0",
 				"react": "^18 || ^19"
 			}
 		},
 		"node_modules/@tanstack/react-query-persist-client": {
-			"version": "5.81.5",
+			"version": "5.82.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.5.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.82.0.tgz",
-			"integrity": "sha512-ZV69n636C22RkbFK0rzel80oWjyWbMKiUwUE2MKhYWTSr42+JmqoehDwJ5sWcO8CxHNm4vWF8pyG+goRzluMYw==",
+			"integrity": "sha512-5gzGHxq7XerI8SWSj19DHS4YrivlszumeyP4fPPhrfB3Awky/3c4lI3WBc1mDFsH21rKb0aXF15FSDsnNeN60w==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-persist-client-core": "5.81.5"
+				"@tanstack/query-persist-client-core": "5.82.0"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.81.5",
+				"@tanstack/react-query": "^5.82.0",
 				"react": "^18 || ^19"
 			}
 		},
@@ -1847,9 +1847,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "24.0.10",
+			"version": "24.0.12",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.10.tgz",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.12.tgz",
-			"integrity": "sha512-ENHwaH+JIRTDIEEbDK6QSQntAYGtbvdDXnMXnZaZ6k13Du1dPMmprkEHIL7ok2Wl2aZevetwTAb5S+7yIF+enA==",
+			"integrity": "sha512-LtOrbvDf5ndC9Xi+4QZjVL0woFymF/xSTKZKPgrrl7H7XoeDvnD+E2IclKVDyaK9UM756W/3BXqSU+JEHopA9g==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -3785,9 +3785,9 @@
 			}
 		},
 		"node_modules/recharts": {
-			"version": "3.0.2",
+			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.0.2.tgz",
+			"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.0.tgz",
-			"integrity": "sha512-eDc3ile9qJU9Dp/EekSthQPhAVPG48/uM47jk+PF7VBQngxeW3cwQpPHb/GHC1uqwyCRWXcIrDzuHRVrnRryoQ==",
+			"integrity": "sha512-NqAqQcGBmLrfDs2mHX/bz8jJCQtG2FeXfE0GqpZmIuXIjkpIwj8sd9ad0WyvKiBKPd8ZgNG0hL85c8sFDwascw==",
 			"license": "MIT",
 			"dependencies": {
 				"@reduxjs/toolkit": "1.x.x || 2.x.x",
@@ -4517,9 +4517,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "7.0.2",
+			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.4.tgz",
-			"integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==",
+			"integrity": "sha512-SkaSguuS7nnmV7mfJ8l81JGBFV7Gvzp8IzgE8A8t23+AxuNX61Q5H1Tpz5efduSN7NHC8nQXD3sKQKZAu5mNEA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {

package.json

@@ -15,26 +15,26 @@
 		"@mantine/form": "^8.1.3",
 		"@mantine/hooks": "^8.1.3",
 		"@mantine/notifications": "^8.1.3",
-		"@tanstack/react-query": "^5.81.5",
+		"@tanstack/react-query": "^5.82.0",
-		"@tanstack/react-query-devtools": "^5.81.5",
+		"@tanstack/react-query-devtools": "^5.82.0",
-		"@tanstack/react-query-persist-client": "^5.81.5",
+		"@tanstack/react-query-persist-client": "^5.82.0",
 		"idb-keyval": "^6.2.2",
 		"jotai": "^2.12.5",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",
 		"react-router-dom": "^7.6.3",
-		"recharts": "^3.0.2"
+		"recharts": "^3.1.0"
 	},
 	"devDependencies": {
-		"@types/node": "^24.0.10",
+		"@types/node": "^24.0.12",
 		"@types/react": "^19.1.8",
 		"@types/react-dom": "^19.1.6",
 		"@vitejs/plugin-react": "^4.6.0",
 		"@vitest/coverage-v8": "^3.2.4",
 		"@vitest/ui": "^3.2.4",
 		"typescript": "^5.8.3",
-		"vite": "^7.0.2",
+		"vite": "^7.0.4",
 		"vite-plugin-dts": "~4.5.4",
 		"vite-tsconfig-paths": "^5.1.4",
 		"vitest": "^3.2.4"

src/components/Applications/AppItem.tsx

@@ -0,0 +1,125 @@
+import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
+import { useCommonHooks } from 'hooks';
+import { useState } from 'react';
+import * as fa6 from 'react-icons/fa6';
+import { FiAlertCircle } from 'react-icons/fi';
+import * as si from 'react-icons/si';
+import * as vsc from 'react-icons/vsc';
+import { actionIconClasses, boxClasses, textClasses } from 'styles';
+
+export function AppItem({
+	url,
+	icon,
+	name,
+	enabled,
+	scale,
+	linksActive,
+}: {
+	url: string;
+	icon: string;
+	name: string;
+	enabled: number | null;
+	scale: number;
+	linksActive: boolean;
+}) {
+	const { ref, width, height } = useElementSize();
+	const allIcons: any = { ...fa6, ...vsc, ...si };
+	const Icon = allIcons[icon];
+	const { isMobile } = useCommonHooks();
+	const [textDecoration, setTextDecoration] = useState<string>('none');
+	const [hover, setHover] = useState<boolean>(false);
+	const validUrl =
+		url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
+	return (
+		<Box
+			component='a'
+			href={linksActive ? validUrl : undefined}
+			onMouseOver={() => {
+				setTextDecoration('underline');
+				setHover(true);
+			}}
+			onMouseOut={() => {
+				setTextDecoration('none');
+				setHover(false);
+			}}
+			className={boxClasses.appItemBox}
+			h={scale * 64}
+			ref={ref}
+			style={{
+				justifyContent: width / height < 2 ? 'center' : undefined,
+			}}
+		>
+			{enabled === 0 && (
+				<Tooltip
+					c={'var(--mantine-color-primary-0)'}
+					bg={'var(--mantine-color-background-0)'}
+					label='This app is disabled.'
+				>
+					<ActionIcon
+						className={actionIconClasses.settingsTooltip}
+						classNames={actionIconClasses}
+						pos={'absolute'}
+						right={0}
+						size={'xl'}
+						variant='subtle'
+						style={{ zIndex: 1 }}
+					>
+						<FiAlertCircle color='red' />
+					</ActionIcon>
+				</Tooltip>
+			)}
+			{hover && (
+				<svg
+					style={{ position: 'absolute', borderRadius: '6px' }}
+					height='100%'
+					width='100%'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<rect
+						rx={(scale * 64) / 8}
+						ry={(scale * 64) / 8}
+						height='100%'
+						width='100%'
+						strokeLinejoin='round'
+					/>
+				</svg>
+			)}
+			<Stack
+				// align={isMobile ? 'center' : undefined}
+				justify={isMobile ? 'center' : undefined}
+				style={{
+					marginRight: scale * 16,
+					marginLeft: scale * 16,
+					paddingTop: isMobile ? scale : scale * 16,
+				}}
+			>
+				{Icon && <Icon style={{ height: scale * 32, width: scale * 32 }} />}
+			</Stack>
+			{width / height > 2 && (
+				<Stack
+					justify='center'
+					style={{
+						overflow: 'hidden',
+						whiteSpace: 'nowrap',
+						gap: 0,
+					}}
+				>
+					<Text fz={scale * 11} className={textClasses.appName} classNames={textClasses}>
+						{name}
+					</Text>
+					<Text
+						fz={scale * 11}
+						className={textClasses.appUrl}
+						classNames={textClasses}
+						style={{
+							textDecoration: textDecoration,
+						}}
+					>
+						{url}
+					</Text>
+				</Stack>
+			)}
+		</Box>
+	);
+}

src/components/index.ts

@@ -1,3 +1,4 @@
+export { AppItem } from './Applications/AppItem';
 export { HelpModal } from './HelpModal/HelpModal';
 export { Loading } from './Loading';
 export { MainLayout } from './MainLayout';

src/hooks/useCommonHooks.ts

@@ -25,6 +25,10 @@ export function useCommonHooks() {
 		key: 'appDensity',
 		defaultValue: 6,
 	});
+	const [appScale, setAppScale] = useLocalStorage<number>({
+		key: 'appScale',
+		defaultValue: 1,
+	});
 	const [bookmarkSort, setBookmarkSort] = useLocalStorage<string>({
 		key: 'bookmarkSort',
 		defaultValue: 'A>Z',
@@ -37,6 +41,10 @@ export function useCommonHooks() {
 		key: 'bookmarkDensity',
 		defaultValue: 6,
 	});
+	const [bookmarkScale, setBookmarkScale] = useLocalStorage<number>({
+		key: 'bookmarkScale',
+		defaultValue: 1,
+	});
 	const [currentTheme, setCurrentTheme] = useLocalStorage<string>({
 		key: 'theme',
 		defaultValue: 'random',
@@ -134,12 +142,16 @@ export function useCommonHooks() {
 		setAppSort,
 		appDensity,
 		setAppDensity,
+		appScale,
+		setAppScale,
 		bookmarkSort,
 		setBookmarkSort,
 		bookmarkFilter,
 		setBookmarkFilter,
 		bookmarkDensity,
 		setBookmarkDensity,
+		bookmarkScale,
+		setBookmarkScale,
 		currentTheme,
 		setCurrentTheme,
 		currentThemePlaylist,

src/pages/homepage/components/Applications/AppItem.tsx

@@ -1,80 +0,0 @@
-import { Box, Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
-import { useState } from 'react';
-import * as fa6 from 'react-icons/fa6';
-import * as si from 'react-icons/si';
-import * as vsc from 'react-icons/vsc';
-import { boxClasses, textClasses } from 'styles';
-
-function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
-	const allIcons: any = { ...fa6, ...vsc, ...si };
-	const Icon = allIcons[icon];
-	const { isMobile } = useCommonHooks();
-	const [textDecoration, setTextDecoration] = useState<string>('none');
-	const [hover, setHover] = useState<boolean>(false);
-	const validUrl =
-		url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
-	return (
-		<Box
-			component='a'
-			href={validUrl}
-			onMouseOver={() => {
-				setTextDecoration('underline');
-				setHover(true);
-			}}
-			onMouseOut={() => {
-				setTextDecoration('none');
-				setHover(false);
-			}}
-			className={boxClasses.appItemBox}
-			h={'64px'}
-		>
-			{hover && (
-				<svg
-					style={{ position: 'absolute', borderRadius: '6px' }}
-					height='100%'
-					width='100%'
-					xmlns='http://www.w3.org/2000/svg'
-				>
-					<rect rx='8' ry='8' height='100%' width='100%' strokeLinejoin='round' />
-				</svg>
-			)}
-			<Stack
-				align={isMobile ? 'center' : undefined}
-				justify={isMobile ? 'center' : undefined}
-				style={{
-					width: isMobile ? '100%' : undefined,
-					marginRight: isMobile ? 0 : '1rem',
-					marginLeft: isMobile ? 0 : '1rem',
-					paddingTop: isMobile ? 0 : '1rem',
-				}}
-			>
-				{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
-			</Stack>
-			<Stack
-				justify='center'
-				style={{
-					overflow: 'hidden',
-					whiteSpace: 'nowrap',
-					gap: 0,
-					flex: 1,
-				}}
-			>
-				<Text className={textClasses.appName} classNames={textClasses}>
-					{name}
-				</Text>
-				<Text
-					className={textClasses.appUrl}
-					classNames={textClasses}
-					style={{
-						textDecoration: textDecoration,
-					}}
-				>
-					{url}
-				</Text>
-			</Stack>
-		</Box>
-	);
-}
-
-export default AppItem;

src/pages/homepage/components/Applications/Applications.tsx

@@ -1,15 +1,15 @@
 import { Stack, Text } from '@mantine/core';
+import { AppItem } from 'components';
 import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 import type { Application } from 'types';
-import AppItem from './AppItem';
 
 function Applications({ contentType }: { contentType: string[] }) {
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
-	const { appSort, appDensity } = useCommonHooks();
+	const { appSort, appDensity, appScale } = useCommonHooks();
 	const [applications, setApplications] = useState<Application[]>([]);
 
 	useEffect(() => {
@@ -42,7 +42,11 @@ function Applications({ contentType }: { contentType: string[] }) {
 		<>
 			{applications.length > 0 && contentType.length > 0 && (
 				<Stack gap={0}>
-					<Text className={textClasses.sectionTitle} classNames={textClasses}>
+					<Text
+						fz={appScale * 20}
+						className={textClasses.sectionTitle}
+						classNames={textClasses}
+					>
 						Applications
 					</Text>
 					<Stack
@@ -65,6 +69,9 @@ function Applications({ contentType }: { contentType: string[] }) {
 										name={application.name}
 										url={application.url}
 										icon={application.icon}
+										enabled={application.enabled}
+										scale={appScale}
+										linksActive
 									/>
 								);
 							})}

src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx

@@ -6,9 +6,11 @@ import BookmarkItem from './BookmarkItem';
 function BookmarkGroups({
 	bookmarks,
 	category,
+	bookmarkScale,
 }: {
 	bookmarks: Bookmark[];
 	category: string;
+	bookmarkScale: number;
 }) {
 	return (
 		<Stack
@@ -18,13 +20,21 @@ function BookmarkGroups({
 				whiteSpace: 'nowrap',
 			}}
 		>
-			<Text className={textClasses.bookmarkCategory} classNames={textClasses}>
+			<Text
+				fz={bookmarkScale * 14}
+				className={textClasses.bookmarkCategory}
+				classNames={textClasses}
+			>
 				{category}
 			</Text>
 			{bookmarks
 				?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))
 				.map((bookmark: Bookmark) => (
-					<BookmarkItem key={bookmark.name} bookmark={bookmark} />
+					<BookmarkItem
+						key={bookmark.name}
+						bookmark={bookmark}
+						bookmarkScale={bookmarkScale}
+					/>
 				))}
 		</Stack>
 	);

src/pages/homepage/components/Bookmarks/BookmarkItem.tsx

@@ -2,13 +2,20 @@ import { Text } from '@mantine/core';
 import { textClasses } from 'styles';
 import type { Bookmark } from 'types';
 
-function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
+function BookmarkItem({
+	bookmark,
+	bookmarkScale,
+}: {
+	bookmark: Bookmark;
+	bookmarkScale: number;
+}) {
 	return (
 		<Text
 			className={textClasses.bookmarkItem}
 			classNames={textClasses}
 			component='a'
 			href={bookmark.url}
+			fz={bookmarkScale * 14}
 		>
 			{bookmark.name}
 		</Text>

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -12,7 +12,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/bookmarkCategories',
 	});
-	const { bookmarkSort, bookmarkDensity } = useCommonHooks();
+	const { bookmarkSort, bookmarkDensity, bookmarkScale } = useCommonHooks();
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
@@ -59,7 +59,11 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 				groups?.length > 0 &&
 				contentType.length > 0 && (
 					<Stack gap={0}>
-						<Text className={textClasses.sectionTitle} classNames={textClasses}>
+						<Text
+							fz={bookmarkScale * 20}
+							className={textClasses.sectionTitle}
+							classNames={textClasses}
+						>
 							Bookmarks
 						</Text>
 						<Stack
@@ -85,6 +89,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 												(bookmark: Bookmark) =>
 													bookmark.category === category.categoryName,
 											)}
+											bookmarkScale={bookmarkScale}
 										/>
 									);
 								})}

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Menu, Stack } from '@mantine/core';
+import { Box, Button, Group, Menu, Overlay, Stack } from '@mantine/core';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiSettings } from 'react-icons/fi';
@@ -31,12 +31,16 @@ function SettingsButton() {
 		setAppSort,
 		appDensity,
 		setAppDensity,
+		appScale,
+		setAppScale,
 		bookmarkSort,
 		setBookmarkSort,
 		bookmarkFilter,
 		setBookmarkFilter,
 		bookmarkDensity,
 		setBookmarkDensity,
+		bookmarkScale,
+		setBookmarkScale,
 	} = useCommonHooks();
 
 	const handleWakeRequest = () => {
@@ -96,12 +100,20 @@ function SettingsButton() {
 							width: isMobile ? '100%' : undefined,
 						}}
 					>
-						<WakeOnLan
+						<Box
-							wolClients={wolClients}
+							pos={'relative'}
-							selectedClient={selectedClient}
+							style={{ filter: wolClients.length === 0 ? 'grayscale(1)' : undefined }}
-							setSelectedClient={setSelectedClient}
+						>
-							handleWakeRequest={handleWakeRequest}
+							{wolClients.length === 0 && (
-						/>
+								<Overlay opacity={0.75} style={{ borderRadius: '10px' }} />
+							)}
+							<WakeOnLan
+								wolClients={wolClients}
+								selectedClient={selectedClient}
+								setSelectedClient={setSelectedClient}
+								handleWakeRequest={handleWakeRequest}
+							/>
+						</Box>
 						<ThemingCard />
 					</Stack>
 					<Stack>
@@ -114,6 +126,8 @@ function SettingsButton() {
 							setSort={setAppSort}
 							density={appDensity}
 							setDensity={setAppDensity}
+							scale={appScale}
+							setScale={setAppScale}
 						/>
 						<SettingsCard
 							categories={categories}
@@ -124,6 +138,8 @@ function SettingsButton() {
 							setSort={setBookmarkSort}
 							density={bookmarkDensity}
 							setDensity={setBookmarkDensity}
+							scale={bookmarkScale}
+							setScale={setBookmarkScale}
 						/>
 					</Stack>
 				</Group>

src/pages/homepage/components/SettingsButton/SettingsCard.tsx

@@ -18,6 +18,8 @@ function SettingsCard({
 	setSort,
 	density,
 	setDensity,
+	scale,
+	setScale,
 }: {
 	categories: ComboboxItem[];
 	sectionTitle: string;
@@ -27,6 +29,8 @@ function SettingsCard({
 	setSort: any;
 	density: any;
 	setDensity: any;
+	scale: any;
+	setScale: any;
 }) {
 	return (
 		<Stack
@@ -53,19 +57,41 @@ function SettingsCard({
 			>
 				{sectionTitle}
 			</Text>
-			<Text fz={'.875rem'} mt={'1rem'}>
+			<Group w={'100%'} justify='center'>
-				Density
+				<Stack w={scale !== undefined ? '60%' : '90%'} align='center'>
-			</Text>
+					<Text fz={'.875rem'} mt={'1rem'}>
-			<Stack m={0} p={0} gap={0} w={'90%'}>
+						Density
-				<Slider
+					</Text>
-					className={sliderClasses.default}
+					<Slider
-					classNames={sliderClasses}
+						className={sliderClasses.default}
-					value={density}
+						classNames={sliderClasses}
-					onChange={(value) => setDensity(value)}
+						value={density}
-					min={1}
+						onChange={(value) => setDensity(value)}
-					max={8}
+						min={1}
-				/>
+						max={8}
-			</Stack>
+						marks={[{ value: 6, label: 'Default' }]}
+						onDoubleClick={() => setDensity(6)}
+					/>
+				</Stack>
+				{scale !== undefined && (
+					<Stack w={'33%'} align='center'>
+						<Text fz={'.875rem'} mt={'1rem'}>
+							Scale
+						</Text>
+						<Slider
+							className={sliderClasses.default}
+							classNames={sliderClasses}
+							value={scale}
+							onChange={(value) => setScale(value)}
+							step={0.1}
+							min={0.5}
+							max={2}
+							marks={[{ value: 1, label: 'Default' }]}
+							onDoubleClick={() => setScale(1)}
+						/>
+					</Stack>
+				)}
+			</Group>
 			<Group justify='center' mb={'.25rem'}>
 				<MultiSelect
 					label='Filter'

src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx

@@ -27,7 +27,7 @@ function WakeOnLan({
 			<Button
 				classNames={buttonClasses}
 				className={buttonClasses.wakeButton}
-				disabled={!wolClients?.length || selectedClient === null}
+				disabled={!wolClients?.length || selectedClient?.macAddress === undefined}
 				onClick={() => {
 					handleWakeRequest();
 				}}

src/pages/settings/components/Applications/AppSettingsItem.tsx

@@ -1,109 +0,0 @@
-import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
-import { useState } from 'react';
-import { FiAlertCircle } from 'react-icons/fi';
-import { actionIconClasses, boxClasses, textClasses } from 'styles';
-
-function AppSettingsItem({
-	url,
-	icon,
-	name,
-	enabled,
-	allIcons,
-}: {
-	url: string;
-	icon: string;
-	name: string;
-	enabled: number;
-	allIcons: any;
-}) {
-	const Icon = allIcons[icon];
-	const [textDecoration, setTextDecoration] = useState<string>('none');
-	const [hover, setHover] = useState<boolean>(false);
-	const { isMobile } = useCommonHooks();
-	return (
-		<Box pos={'relative'}>
-			{enabled === 0 && (
-				<Tooltip
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
-					label='This app is disabled.'
-				>
-					<ActionIcon
-						className={actionIconClasses.settingsTooltip}
-						classNames={actionIconClasses}
-						pos={'absolute'}
-						right={0}
-						size={'xl'}
-						variant='subtle'
-						style={{ zIndex: 1 }}
-					>
-						<FiAlertCircle color='red' />
-					</ActionIcon>
-				</Tooltip>
-			)}
-			<Box
-				component='a'
-				onMouseOver={() => {
-					setTextDecoration('underline');
-					setHover(true);
-				}}
-				onMouseOut={() => {
-					setTextDecoration('none');
-					setHover(false);
-				}}
-				className={boxClasses.appItemBox}
-			>
-				{hover && (
-					<svg
-						style={{ position: 'absolute', borderRadius: '6px' }}
-						height='100%'
-						width='100%'
-						xmlns='http://www.w3.org/2000/svg'
-					>
-						<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
-					</svg>
-				)}
-				<Stack
-					align={isMobile ? 'center' : undefined}
-					justify={isMobile ? 'center' : undefined}
-					style={{
-						height: '128px',
-						width: isMobile ? '100%' : undefined,
-						marginRight: isMobile ? '0' : '1rem',
-						marginLeft: isMobile ? '0' : '2rem',
-						paddingTop: isMobile ? '0' : '2rem',
-					}}
-				>
-					{Icon && <Icon style={{ height: '4rem', width: '4rem' }} />}
-				</Stack>
-				<Stack
-					style={{
-						display: 'flex',
-						flexDirection: 'column',
-						justifyContent: 'center',
-						flex: 1,
-						overflow: 'hidden',
-						gap: 0,
-					}}
-				>
-					<Text fz={'1.5rem'} className={textClasses.appName} classNames={textClasses}>
-						{name}
-					</Text>
-					<Text
-						fz={'1rem'}
-						className={textClasses.appUrl}
-						classNames={textClasses}
-						style={{
-							textDecoration: textDecoration,
-						}}
-					>
-						{url}
-					</Text>
-				</Stack>
-			</Box>
-		</Box>
-	);
-}
-
-export default AppSettingsItem;

src/pages/settings/components/Applications/Applications.tsx

@@ -15,6 +15,7 @@ import {
 } from '@mantine/core';
 import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import { AppItem } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import * as fa6 from 'react-icons/fa6';
@@ -25,7 +26,6 @@ import type { Application } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
 import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
-import AppSettingsItem from './AppSettingsItem';
 import DebouncedApplication from './DebouncedApplication';
 
 const ApplicationSettings = () => {
@@ -267,7 +267,11 @@ const ApplicationSettings = () => {
 				}
 			/>
 			<DragDropContext onDragEnd={onDragEnd}>
-				<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
+				<Stack
+					mt={isMobile ? '10rem' : '6rem'}
+					mb={isMobile ? '6rem' : '1rem'}
+					align='center'
+				>
 					{applications.length > 0 ? (
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
@@ -303,12 +307,14 @@ const ApplicationSettings = () => {
 																>
 																	#{index + 1}
 																</Text>
-																<AppSettingsItem
+																<AppItem
+																	key={application.name}
+																	name={application.name}
 																	url={application.url}
 																	icon={application.icon}
-																	name={application.name}
 																	enabled={application.enabled}
-																	allIcons={allIcons}
+																	scale={2}
+																	linksActive={false}
 																/>
 															</Box>
 														</Box>
@@ -331,12 +337,14 @@ const ApplicationSettings = () => {
 																e.stopPropagation();
 															}}
 														>
-															<AppSettingsItem
+															<AppItem
+																key={application.name}
+																name={application.name}
 																url={application.url}
 																icon={application.icon}
-																name={application.name}
 																enabled={application.enabled}
-																allIcons={allIcons}
+																scale={2}
+																linksActive={false}
 															/>
 														</Box>
 													</Popover.Target>

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -1,23 +1,20 @@
 import {
-	ActionIcon,
 	Card,
 	type ComboboxItem,
 	type ComboboxLikeRenderOptionInput,
 	Group,
 	Select,
 	Stack,
-	Switch,
 	Text,
 	TextInput,
-	Tooltip,
 } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiPower, FiTrash } from 'react-icons/fi';
+import { cardClasses, selectClasses, textInputClasses } from 'styles';
-import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
+import ManagementPill from '../Shared/ManagementPill';
 
 function DebouncedApplication({
 	application,
@@ -79,70 +76,16 @@ function DebouncedApplication({
 					</Stack>
 				}
 			/>
-			<Group
+			<ManagementPill
-				style={{
+				enabled={app.enabled}
-					position: 'absolute',
+				onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-					right: '1rem',
+					setUpdate({
-					top: '.5rem',
+						...app,
-					width: 'fit-content',
+						enabled: event.target.checked ? 1 : 0,
-					backgroundColor:
+					});
-						'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
-					padding: '.5rem',
-					borderRadius: '10px',
-					color: 'var(--mantine-color-search-0)',
-					backdropFilter: 'brightness(0.5)',
 				}}
-			>
+				openModal={openModal}
-				<Tooltip
+			/>
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
-					bd={'solid 1px var(--mantine-color-border-0)'}
-					label={'Enabled'}
-					refProp='rootRef'
-					styles={{
-						tooltip: { marginTop: '-.5rem' },
-						arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
-					}}
-					withArrow
-				>
-					<Switch
-						className={switchClasses.enable}
-						classNames={switchClasses}
-						defaultChecked={app.enabled === 1}
-						defaultValue={app.enabled}
-						thumbIcon={
-							<FiPower
-								style={{
-									color: app.enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
-								}}
-							/>
-						}
-						onChange={(event) => {
-							setUpdate({
-								...app,
-								enabled: event.target.checked ? 1 : 0,
-							});
-						}}
-					/>
-				</Tooltip>
-				|
-				<Tooltip
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
-					bd={'solid 1px var(--mantine-color-border-0)'}
-					label={'Delete'}
-				>
-					<ActionIcon
-						color='red'
-						onClick={() => {
-							setIsOpen(true);
-							openModal();
-						}}
-					>
-						<FiTrash color='black' />
-					</ActionIcon>
-				</Tooltip>
-			</Group>
 			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
 				<TextInput
 					label={'Name'}

src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx

@@ -10,7 +10,7 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
 			style={{
 				cursor: 'pointer',
 				borderRadius: '4px',
-				color: 'var(--mantine-color-accent-0)',
+				color: 'var(--mantine-color-primary-0)',
 				backgroundColor: 'var(--mantine-color-search-0)',
 				padding: '.5rem',
 			}}

src/pages/settings/components/Bookmarks/Bookmarks.tsx

@@ -203,7 +203,11 @@ const BookmarkSettings = () => {
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
-					<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
+					<Stack
+						mt={isMobile ? '10rem' : '6rem'}
+						mb={isMobile ? '6rem' : '1rem'}
+						align='center'
+					>
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
 								<Stack
@@ -279,7 +283,11 @@ const BookmarkSettings = () => {
 					</Stack>
 				</DragDropContext>
 			) : (
-				<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
+				<Stack
+					mt={isMobile ? '10rem' : '6rem'}
+					mb={isMobile ? '6rem' : '1rem'}
+					align='center'
+				>
 					<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
 						{groups.length > 0 ? (
 							groups?.map((group: BookmarkGroup) => (

src/pages/settings/components/Messages/DebouncedMessage.tsx

@@ -1,19 +1,10 @@
-import {
+import { Card, Stack, Text, TextInput } from '@mantine/core';
-	ActionIcon,
-	Card,
-	Group,
-	Stack,
-	Switch,
-	Text,
-	TextInput,
-	Tooltip,
-} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useCommonHooks } from 'hooks';
-import { FiPower, FiTrash } from 'react-icons/fi';
+import { cardClasses, textInputClasses } from 'styles';
-import { cardClasses, switchClasses, textInputClasses } from 'styles';
 import type { Message } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
+import ManagementPill from '../Shared/ManagementPill';
 
 function DebouncedMessage({
 	label,
@@ -56,72 +47,16 @@ function DebouncedMessage({
 					</Stack>
 				}
 			/>
-			<Group
+			<ManagementPill
-				style={{
+				enabled={message.customGreeting}
-					position: 'absolute',
+				onChange={() => {
-					right: '1rem',
+					setMessage({
-					top: '.5rem',
+						...message,
-					width: 'fit-content',
+						customGreeting: message.customGreeting === 1 ? 0 : 1,
-					backgroundColor:
+					});
-						'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
-					padding: '.5rem',
-					borderRadius: '10px',
-					color: 'var(--mantine-color-search-0)',
-					backdropFilter: 'brightness(0.5)',
 				}}
-			>
+				openModal={openModal}
-				<Tooltip
+			/>
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
-					bd={'solid 1px var(--mantine-color-border-0)'}
-					label={message.customGreeting === 1 ? 'Enabled' : 'Disabled'}
-					refProp='rootRef'
-					styles={{
-						tooltip: { marginTop: '-.5rem' },
-						arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
-					}}
-					withArrow
-				>
-					<Switch
-						className={switchClasses.enable}
-						classNames={switchClasses}
-						defaultChecked={message.customGreeting === 1}
-						defaultValue={message.customGreeting}
-						thumbIcon={
-							<FiPower
-								style={{
-									color:
-										message.customGreeting === 1
-											? 'var(--mantine-color-accent-0)'
-											: 'red',
-								}}
-							/>
-						}
-						onChange={(event) => {
-							setMessage({
-								...message,
-								customGreeting: event.target.checked ? 1 : 0,
-							});
-						}}
-					/>
-				</Tooltip>
-				|
-				<Tooltip
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
-					bd={'solid 1px var(--mantine-color-border-0)'}
-					label={'Delete'}
-				>
-					<ActionIcon
-						color='red'
-						onClick={() => {
-							openModal();
-						}}
-					>
-						<FiTrash color='black' />
-					</ActionIcon>
-				</Tooltip>
-			</Group>
 			<TextInput
 				label={label}
 				disabled={message.customGreeting === 0}

src/pages/settings/components/Messages/Messages.tsx

@@ -120,7 +120,11 @@ const MessageSettings = () => {
 					</Stack>
 				}
 			/>
-			<Stack mb={isMobile ? '6rem' : undefined} align='center'>
+			<Stack
+				mt={isMobile ? '10rem' : '6rem'}
+				mb={isMobile ? '6rem' : undefined}
+				align='center'
+			>
 				<Grid w={'75%'}>
 					{messages.length > 0 ? (
 						messages?.map((message: Message) => (

src/pages/settings/components/Personalization/Personalization.tsx

@@ -66,7 +66,7 @@ const PersonalizationSettings = () => {
 				isLoading={false}
 				setIsLoading={() => {}}
 			/>
-			<Stack align='center'>
+			<Stack align='center' mt={'6rem'}>
 				<Grid w={'75%'}>
 					{personalIsFetching && (
 						<Overlay

src/pages/settings/components/Search/SearchProviders.tsx

@@ -152,7 +152,12 @@ const SearchProviderSettings = () => {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
+			<Stack
+				mt={isMobile ? '10rem' : '6rem'}
+				mb={isMobile ? '6rem' : '1rem'}
+				w={'100%'}
+				align='center'
+			>
 				<Grid columns={18} w={'75%'}>
 					{providers.length > 0 ? (
 						providers?.map((provider: Provider) => (

src/pages/settings/components/Shared/ManagementPill.tsx

@@ -0,0 +1,76 @@
+import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core';
+import { FiPower, FiTrash } from 'react-icons/fi';
+import { switchClasses } from 'styles';
+
+function ManagementPill({
+	enabled,
+	onChange,
+	openModal,
+}: {
+	enabled: number;
+	onChange: any;
+	openModal: () => void;
+}) {
+	return (
+		<Group
+			style={{
+				position: 'absolute',
+				right: '1rem',
+				top: '.5rem',
+				width: 'fit-content',
+				backgroundColor:
+					'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
+				padding: '.5rem',
+				borderRadius: '10px',
+				color: 'var(--mantine-color-search-0)',
+				backdropFilter: 'brightness(0.5)',
+			}}
+		>
+			<Tooltip
+				c={'var(--mantine-color-primary-0)'}
+				bg={'var(--mantine-color-background-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
+				label={enabled === 1 ? 'Enabled' : 'Disabled'}
+				refProp='rootRef'
+				styles={{
+					tooltip: { marginTop: '-.5rem' },
+					arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
+				}}
+				withArrow
+			>
+				<Switch
+					className={switchClasses.enable}
+					classNames={switchClasses}
+					defaultChecked={enabled === 1}
+					defaultValue={enabled}
+					thumbIcon={
+						<FiPower
+							style={{
+								color: enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
+							}}
+						/>
+					}
+					onChange={onChange}
+				/>
+			</Tooltip>
+			|
+			<Tooltip
+				c={'var(--mantine-color-primary-0)'}
+				bg={'var(--mantine-color-background-0)'}
+				bd={'solid 1px var(--mantine-color-border-0)'}
+				label={'Delete'}
+			>
+				<ActionIcon
+					color='red'
+					onClick={() => {
+						openModal();
+					}}
+				>
+					<FiTrash color='black' />
+				</ActionIcon>
+			</Tooltip>
+		</Group>
+	);
+}
+
+export default ManagementPill;

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -58,6 +58,10 @@ function SettingsHeader({
 				paddingTop: '1.5rem',
 				paddingBottom: '1.5rem',
 				paddingLeft: '1rem',
+				height: 'min-content',
+				width: '100%',
+				marginTop: 0,
+				position: 'absolute',
 			}}
 		>
 			<Group w={isMobile ? undefined : '100%'}>

src/pages/settings/components/Theming/BackgroundModal.tsx

@@ -12,7 +12,7 @@ import {
 	Text,
 	TextInput,
 } from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
+import { useDebouncedValue, useElementSize } from '@mantine/hooks';
 import { useCommonHooks } from 'hooks';
 import { useFileUploadAPI } from 'hooks/useAPI';
 import { useEffect, useState } from 'react';
@@ -38,6 +38,7 @@ function BackgroundModal({
 	backgroundList: string[];
 	inUseBackgrounds: string[];
 }) {
+	const { ref, width } = useElementSize();
 	const [background, setBackground] = useState<File | null>(null);
 	const [fileName, setFileName] = useState<string>('');
 	const [newFileName, setNewFileName] = useState<string>('');
@@ -173,7 +174,7 @@ function BackgroundModal({
 									backgroundFilter: 'blur(5px)',
 								}}
 							>
-								<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
+								<SimpleGrid w={'100%'} cols={3} p={'.75rem'}>
 									{backgroundList
 										.filter((background) => background !== 'None')
 										.filter(
@@ -195,11 +196,17 @@ function BackgroundModal({
 														top: '-.5rem',
 														left: 0,
 														zIndex: 3,
+														boxShadow: '2px -2px var(--mantine-color-primary-0)',
+														textOverflow: 'ellipsis',
+														overflow: 'hidden',
+														whiteSpace: 'nowrap',
+														maxWidth: width,
 													}}
 												>
 													{background}
 												</Text>
 												<Card
+													ref={ref}
 													style={{
 														aspectRatio: '16/9',
 														width: '100%',

src/pages/settings/components/Theming/ThemeCard.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useElementSize } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
@@ -18,6 +18,7 @@ function ThemeCard({
 	allThemes: Theme[];
 	themePlaylists: ThemePlaylist[];
 }) {
+	const { ref, width } = useElementSize();
 	const [hover, setHover] = useState(false);
 	const [shiftEdit, setShiftEdit] = useState<number>(0);
 	const [shiftShuffle, setShiftShuffle] = useState<number>(0);
@@ -73,18 +74,24 @@ function ThemeCard({
 					left: 6,
 					paddingRight: '.25rem',
 					paddingLeft: '.25rem',
-					backgroundColor: cardTheme.borderColor,
+					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: width,
 				}}
 			>
 				{cardTheme.name}
 			</Text>
 			<Button
+				ref={ref}
 				w={'275px'}
 				h={'115px'}
 				disabled={currentTheme === 'random'}

src/pages/settings/components/Theming/ThemeModal.tsx

@@ -171,7 +171,7 @@ function ThemeModal({
 				</Modal.Header>
 				<Modal.Body>
 					<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
-						<Stack display={'flex'} pos={'relative'} w={'70%'}>
+						<Stack display={'flex'} pos={'relative'} w={isMobile ? '100%' : '70%'}>
 							<ThemeModalContent selectedTheme={designerTheme} />
 							<Tooltip
 								label={'Change Primary Color'}
@@ -242,7 +242,7 @@ function ThemeModal({
 									bd={`1px solid ${selectedTheme.primaryColor}`}
 									pos={'absolute'}
 									top={'4.5rem'}
-									right={'7rem'}
+									right={'15%'}
 								/>
 							</Tooltip>
 							<Tooltip
@@ -260,7 +260,7 @@ function ThemeModal({
 									bd={`1px solid ${selectedTheme.primaryColor}`}
 									pos={'absolute'}
 									top={'3.25rem'}
-									left={'14.5rem'}
+									left={'6.5rem'}
 								/>
 							</Tooltip>
 							<Tooltip
@@ -282,7 +282,7 @@ function ThemeModal({
 							</Tooltip>
 						</Stack>
 						<Stack
-							w={'28%'}
+							w={isMobile ? '100%' : '28%'}
 							h={'436px'}
 							p={'1rem'}
 							style={{

src/pages/settings/components/Theming/ThemePlaylists.tsx

@@ -97,7 +97,7 @@ function ThemePlaylists() {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Stack>
+			<Stack mt={isMobile ? '10rem' : '6rem'}>
 				{allThemeData && (
 					<>
 						<Group justify='center' align='center' pos={'relative'}>

src/pages/settings/components/Theming/Themes.tsx

@@ -170,7 +170,7 @@ function ThemesSettings() {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Stack mt={'1rem'} align='center'>
+			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
 				<Group
 					w={'85%'}
 					justify='center'
@@ -258,24 +258,34 @@ function ThemesSettings() {
 					bottom: isMobile ? '3.25rem' : 0,
 				}}
 			>
-				<Group w={isMobile ? undefined : '100%'} justify='space-between'>
+				<Group w={'100%'} justify={isMobile ? 'center' : 'space-between'}>
 					<Text
-						miw={isMobile ? 100 : undefined}
+						w={'fit-content'}
 						className={textClasses.settingsSubTitle}
 						classNames={textClasses}
 						fz={isMobile ? '1rem' : undefined}
+						style={
+							isMobile
+								? {
+										position: 'absolute',
+										top: -16,
+										left: 4,
+										padding: '.25rem',
+										backgroundColor: 'var(--mantine-color-background-0)',
+										backdropFilter: 'blur(5px) brightness(.25)',
+										borderRadius: '10px',
+										boxShadow: '2px -2px var(--mantine-color-accent-0)',
+									}
+								: undefined
+						}
 					>
 						Current Settings:
 					</Text>
-					<Group
+					<Group>
-						pos={isMobile ? undefined : 'absolute'}
-						w={isMobile ? undefined : '100%'}
-						justify='center'
-					>
 						<Group>
 							<Text
 								style={{
-									color: 'var(--mantine-color-accent-0)',
+									color: 'var(--mantine-color-primary-0)',
 									fontWeight: 'bold',
 								}}
 							>

src/pages/settings/components/WoL/WolClients.tsx

@@ -127,7 +127,12 @@ const WolClientSettings = () => {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
+			<Stack
+				mt={isMobile ? '10rem' : '6rem'}
+				mb={isMobile ? '6rem' : '1rem'}
+				w={'100%'}
+				align='center'
+			>
 				<Grid columns={18} w={'75%'}>
 					{wolClients.length > 0 ? (
 						wolClients?.map((client: WolClient) => (
@@ -143,12 +148,7 @@ const WolClientSettings = () => {
 									offset={isMobile ? -100 : 0}
 								>
 									<Popover.Target>
-										<Group
+										<Group justify='center'>
-											onClick={(e) => {
-												e.stopPropagation();
-											}}
-											justify='center'
-										>
 											<WolClientSettingsItem client={client} />
 										</Group>
 									</Popover.Target>

src/styles/Box.module.css

@@ -13,14 +13,12 @@
 
 .appItemBox {
 	display: flex;
-	flex: 1;
 	margin: 0;
 	backdrop-filter: blur(5px) brightness(1.2);
 	border-radius: 6px;
 	font-size: 2rem;
 	text-transform: uppercase;
 	overflow: hidden;
-	text-overflow: ellipsis;
 }
 
 .appItemBox rect {

src/styles/Slider.module.css

@@ -1,4 +1,5 @@
 .default {
+	width: 100%;
 	.trackContainer {
 		.track::before {
 			background-color: var(--mantine-color-border-0);

src/styles/Switch.module.css

@@ -1,13 +1,4 @@
 .default {
-	@media (max-width: 600px) {
-		&.root {
-			.label {
-				position: absolute;
-				top: -22px;
-				left: -8px;
-			}
-		}
-	}
 	&.root {
 		.label {
 			font-size: 1rem;

src/styles/Text.module.css

@@ -29,13 +29,10 @@
 .sectionTitle {
 	&.root {
 		text-decoration: underline;
-		font-size: 1.25rem;
 		font-weight: 200;
 		font-style: italic;
-		height: 10px;
 		text-transform: uppercase;
 		margin-top: 1.25rem;
-		margin-bottom: 1.25rem;
 		color: var(--mantine-color-primary-0);
 	}
 }
@@ -53,6 +50,8 @@
 		color: var(--mantine-color-primary-0);
 		font-family: "Jost", sans-serif;
 		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 }
 
@@ -63,12 +62,13 @@
 		text-transform: uppercase;
 		color: var(--mantine-color-accent-0);
 		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 }
 
 .bookmarkCategory {
 	&.root {
-		font-size: .875rem;
 		color: var(--mantine-color-accent-0);
 		text-transform: uppercase;
 		margin-top: 1rem;
@@ -80,7 +80,6 @@
 .bookmarkItem {
 	&.root {
 		display: block;
-		font-size: .875rem;
 		line-height: 2;
 		color: var(--mantine-color-primary-0);
 		text-overflow: ellipsis;