diff --git a/src/hooks/useCommonHooks.ts b/src/hooks/useCommonHooks.ts
index efd4e70..6d9d199 100644
--- a/src/hooks/useCommonHooks.ts
+++ b/src/hooks/useCommonHooks.ts
@@ -11,7 +11,7 @@ export function useCommonHooks() {
 	const [theme, setTheme] = useAtom(appTheme);
 	const [themeName, setThemeName] = useLocalStorage<string>({
 		key: 'theme',
-		defaultValue: 'blackboard',
+		defaultValue: 'random',
 	});
 	const [appFilter, setAppFilter] = useLocalStorage<string[]>({
 		key: 'appFilter',
@@ -35,11 +35,11 @@ export function useCommonHooks() {
 	});
 	const [bookmarkDensity, setBookmarkDensity] = useLocalStorage<number>({
 		key: 'bookmarkDensity',
-		defaultValue: 5,
+		defaultValue: 6,
 	});
 	const [currentTheme, setCurrentTheme] = useLocalStorage<string>({
 		key: 'theme',
-		defaultValue: 'blackboard',
+		defaultValue: 'random',
 	});
 	const [currentThemePlaylist, setCurrentThemePlaylist] = useLocalStorage<string>({
 		key: 'themePlaylist',
diff --git a/src/pages/settings/components/Theming/ThemeModal.tsx b/src/pages/settings/components/Theming/ThemeModal.tsx
index cc58f74..08469f0 100644
--- a/src/pages/settings/components/Theming/ThemeModal.tsx
+++ b/src/pages/settings/components/Theming/ThemeModal.tsx
@@ -14,7 +14,7 @@ import {
 import { useCommonHooks } from 'hooks';
 import { useEffect, useRef, useState } from 'react';
 import { FiSave, FiX } from 'react-icons/fi';
-import { modalClasses, textClasses, textInputClasses } from 'styles';
+import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles';
 import type { Theme } from 'types';
 import ThemeModalContent from './ThemeModalContent';
 
@@ -56,63 +56,65 @@ function ThemeModal({
 	);
 
 	const re = /(?:\.([^.]+))?$/;
-	const items = filtered.map((item: string, index: number) => (
-		<UnstyledButton
-			data-list-item
-			key={item}
-			style={{
-				width: '100%',
-				height: '75px',
-				background:
-					item !== 'none'
-						? index === hovered
-							? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(../../api/backgroundImages/${item})`
-							: `no-repeat center url(../../api/backgroundImages/${item})`
-						: undefined,
-				backgroundSize: item !== 'none' ? 'cover' : undefined,
-				backgroundColor: item === 'none' ? '#00000088' : undefined,
-				paddingLeft: '.5rem',
-				alignItems: 'center',
-			}}
-			onClick={() =>
-				setSelectedTheme({
-					...selectedTheme,
-					backgroundImage: item,
-				})
-			}
-		>
-			<Group h={'100%'} w={'100%'} justify='space-between'>
-				<Text
-					style={{
-						width: 'min-content',
-						backdropFilter: 'blur(10px) brightness(.25)',
-						padding: '.5rem',
-						borderBottomRightRadius: 4,
-						marginTop: '-2.15rem',
-						marginLeft: '-.5rem',
-						color: 'white',
-					}}
-				>
-					{item.replace(/\.[^/.]+$/, '')}
-				</Text>
-				{item !== 'None' && (
+	const items = filtered.map((item: string, index: number) => {
+		return (
+			<UnstyledButton
+				data-list-item
+				key={item}
+				style={{
+					width: '100%',
+					height: '75px',
+					background:
+						item !== 'none' && item !== 'None'
+							? index === hovered
+								? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(../../api/backgroundImages/${item})`
+								: `no-repeat center url(../../api/backgroundImages/${item})`
+							: 'repeating-linear-gradient(45deg, #33333366, #33333366 10px, #88888866 10px, #88888866 20px)',
+					backgroundSize: item !== 'none' ? 'cover' : undefined,
+					backgroundColor: item === 'none' ? '#00000088' : undefined,
+					paddingLeft: '.5rem',
+					alignItems: 'center',
+				}}
+				onClick={() =>
+					setSelectedTheme({
+						...selectedTheme,
+						backgroundImage: item,
+					})
+				}
+			>
+				<Group h={'100%'} w={'100%'} justify='space-between'>
 					<Text
 						style={{
 							width: 'min-content',
 							backdropFilter: 'blur(10px) brightness(.25)',
 							padding: '.5rem',
-							marginTop: '2rem',
-							marginBottom: -1,
-							borderTopLeftRadius: 4,
+							borderBottomRightRadius: 4,
+							marginTop: '-2.15rem',
+							marginLeft: '-.5rem',
 							color: 'white',
 						}}
 					>
-						{re.exec(item.toUpperCase())?.[1]}
+						{item.replace(/\.[^/.]+$/, '')}
 					</Text>
-				)}
-			</Group>
-		</UnstyledButton>
-	));
+					{item !== 'None' && (
+						<Text
+							style={{
+								width: 'min-content',
+								backdropFilter: 'blur(10px) brightness(.25)',
+								padding: '.5rem',
+								marginTop: '2rem',
+								marginBottom: -1,
+								borderTopLeftRadius: 4,
+								color: 'white',
+							}}
+						>
+							{re.exec(item.toUpperCase())?.[1]}
+						</Text>
+					)}
+				</Group>
+			</UnstyledButton>
+		);
+	});
 
 	useEffect(() => {
 		if (selectedTheme) {
@@ -393,6 +395,8 @@ function ThemeModal({
 							</Group>
 							<ScrollArea.Autosize
 								viewportRef={viewportRef}
+								className={scrollAreaClasses.default}
+								classNames={scrollAreaClasses}
 								style={{
 									height: 150,
 									width: '90%',
diff --git a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
index ca18d05..018d2e3 100644
--- a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
@@ -77,7 +77,7 @@ function ThemePlaylistCard({
 					color:
 						theme.borderColor === theme.primaryColor
 							? 'var(--mantine-color-accent-0)'
-							: 'var(--mantine-color-background-0)',
+							: 'var(--mantine-color-primary-0)',
 					zIndex: 3,
 				}}
 			>
@@ -96,7 +96,7 @@ function ThemePlaylistCard({
 						color:
 							theme.borderColor === theme.primaryColor
 								? 'var(--mantine-color-accent-0)'
-								: 'var(--mantine-color-background-0)',
+								: 'var(--mantine-color-primary-0)',
 						zIndex: 3,
 					}}
 					onClick={() => {
@@ -119,7 +119,7 @@ function ThemePlaylistCard({
 						color:
 							theme.borderColor === theme.primaryColor
 								? 'var(--mantine-color-accent-0)'
-								: 'var(--mantine-color-background-0)',
+								: 'var(--mantine-color-red-6)',
 						zIndex: 3,
 					}}
 					onClick={() => {
diff --git a/src/pages/settings/components/Theming/ThemePlaylists.tsx b/src/pages/settings/components/Theming/ThemePlaylists.tsx
index 98e87e1..b96a03c 100644
--- a/src/pages/settings/components/Theming/ThemePlaylists.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists.tsx
@@ -128,7 +128,7 @@ function ThemePlaylists() {
 											color:
 												theme.borderColor === theme.primaryColor
 													? 'var(--mantine-color-accent-0)'
-													: 'var(--mantine-color-background-0)',
+													: 'var(--mantine-color-primary-0)',
 										}}
 									/>
 								)}
diff --git a/src/styles/Button.module.css b/src/styles/Button.module.css
index 580cb36..0898e45 100644
--- a/src/styles/Button.module.css
+++ b/src/styles/Button.module.css
@@ -52,7 +52,7 @@
 		padding: .5rem;
 		margin: 0;
 		background-color: var(--mantine-color-search-0);
-		color: var(--mantine-color-accent-0);
+		color: var(--mantine-color-primary-0);
 	}
 	&:hover {
 		background-color: var(--mantine-color-primary-0) !important;