diff --git a/src/pages/settings/components/ThemeModal.tsx b/src/pages/settings/components/ThemeModal.tsx
index 39a7be3..941b874 100644
--- a/src/pages/settings/components/ThemeModal.tsx
+++ b/src/pages/settings/components/ThemeModal.tsx
@@ -39,14 +39,23 @@ function ThemeModal({
 	const filtered = backgroundList.filter((item: any) =>
 		item.toLowerCase().includes(query.toLowerCase()),
 	);
+	const re = /(?:\.([^.]+))?$/;
 	const items = filtered.map((item: any, index: any) => (
 		<UnstyledButton
 			data-list-item
 			key={item}
-			display='block'
-			bg={index === hovered ? `no-repeat center url(/backgrounds/${item})` : `no-repeat center url(/backgrounds/${item})`}
-			p={50}
-			w={'90%'}
+			style={{
+				width: '100%',
+				height: '75px',
+				background:
+					index === hovered
+						? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(/backgrounds/${item})`
+						: `no-repeat center url(/backgrounds/${item})`,
+				backgroundSize: 'cover',
+				backgroundColor: item === 'None' ? '#00000088' : undefined,
+				paddingLeft: 8,
+				alignItems: 'center',
+			}}
 			onClick={() =>
 				setSelectedTheme({
 					...selectedTheme,
@@ -54,13 +63,43 @@ function ThemeModal({
 				})
 			}
 		>
-			{item}
+			<Group h={'100%'} w={'100%'} justify='space-between'>
+				<Text
+					style={{
+						width: 'min-content',
+						height: 'min-content',
+						backdropFilter: 'blur(10px) brightness(.25)',
+						padding: 8,
+						borderRadius: 4,
+					}}
+				>
+					{item.replace(/\.[^/.]+$/, '')}
+				</Text>
+				{item !== 'None' && (
+					<Text
+						style={{
+							width: 'min-content',
+							backdropFilter: 'blur(10px) brightness(.25)',
+							padding: 8,
+							marginTop: 34,
+							borderTopLeftRadius: 4,
+							color: theme.accentColor,
+						}}
+					>
+						{re.exec(item.toUpperCase())?.[1]}
+					</Text>
+				)}
+			</Group>
 		</UnstyledButton>
 	));
 
 	useEffect(() => {
 		if (selectedTheme) {
-			setQuery(selectedTheme?.backgroundImage || '');
+			if (selectedTheme?.backgroundImage === 'none') {
+				setQuery('');
+			} else {
+				setQuery(selectedTheme?.backgroundImage || '');
+			}
 		}
 	}, [selectedTheme]);
 
@@ -273,44 +312,65 @@ function ThemeModal({
 							)}
 						</Stack>
 						<Stack h={'100%'} w={'50%'} align='center' justify='center'>
-							<TextInput
-								className={textInputClasses.default}
-								classNames={textInputClasses}
-								value={query}
-								onChange={(event) => {
-									setQuery(event.currentTarget.value);
-									setHovered(-1);
-								}}
-								onKeyDown={(event) => {
-									if (event.key === 'ArrowDown') {
-										event.preventDefault();
-										setHovered((current) => {
-											const nextIndex =
-												current + 1 >= filtered.length ? current : current + 1;
-											viewportRef.current
-												?.querySelectorAll('[data-list-item]')
-												?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
-											return nextIndex;
-										});
+							<Group gap={0}>
+								<Text mr={8}>Search:</Text>
+								<TextInput
+									className={textInputClasses.default}
+									classNames={textInputClasses}
+									value={query.replace(/\.[^/.]+$/, '')}
+									rightSection={
+										<FiX
+											style={{
+												cursor: 'pointer',
+												margin: '4px',
+											}}
+											onClick={() => {
+												setQuery('');
+											}}
+										/>
 									}
+									onChange={(event) => {
+										setQuery(event.currentTarget.value);
+										setHovered(-1);
+									}}
+									onKeyDown={(event) => {
+										if (event.key === 'ArrowDown') {
+											event.preventDefault();
+											setHovered((current) => {
+												const nextIndex =
+													current + 1 >= filtered.length ? current : current + 1;
+												viewportRef.current
+													?.querySelectorAll('[data-list-item]')
+													?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
+												return nextIndex;
+											});
+										}
 
-									if (event.key === 'ArrowUp') {
-										event.preventDefault();
-										setHovered((current) => {
-											const nextIndex = current - 1 < 0 ? current : current - 1;
-											viewportRef.current
-												?.querySelectorAll('[data-list-item]')
-												?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
-											return nextIndex;
-										});
-									}
+										if (event.key === 'ArrowUp') {
+											event.preventDefault();
+											setHovered((current) => {
+												const nextIndex = current - 1 < 0 ? current : current - 1;
+												viewportRef.current
+													?.querySelectorAll('[data-list-item]')
+													?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
+												return nextIndex;
+											});
+										}
+									}}
+								/>
+							</Group>
+							<ScrollArea.Autosize
+								viewportRef={viewportRef}
+								style={{
+									height: 150,
+									width: '90%',
+									borderRadius: 8,
 								}}
-							/>
-							<ScrollArea viewportRef={viewportRef} h={150} w={'100%'}>
-								<Stack gap={0} align='center'>
+							>
+								<Stack gap={0} align='center' display={'block'}>
 									{items}
 								</Stack>
-							</ScrollArea>
+							</ScrollArea.Autosize>
 						</Stack>
 					</Group>
 					<Divider color='black' my='sm' />