diff --git a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
index fa466f3..ca18d05 100644
--- a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
@@ -11,6 +11,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiTrash } from 'react-icons/fi';
+import { scrollAreaClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 import ThemeMiniCard from './ThemeMiniCard';
@@ -160,7 +161,13 @@ function ThemePlaylistCard({
 							>
 								Count: {themeList.length}
 							</Text>
-							<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
+							<ScrollArea
+								className={scrollAreaClasses.default}
+								classNames={scrollAreaClasses}
+								h={'255px'}
+								w={'100%'}
+								style={{ zIndex: 2 }}
+							>
 								<Stack gap={4}>
 									{themeList.length > 0 &&
 										themeList