diff --git a/src/components/FolderView/FolderItem.vue b/src/components/FolderView/FolderItem.vue
index ee65b802..95cef68c 100644
--- a/src/components/FolderView/FolderItem.vue
+++ b/src/components/FolderView/FolderItem.vue
@@ -33,7 +33,7 @@ defineProps<{
   grid-template-columns: max-content 1fr;
   padding-right: 1rem;
   align-items: center;
-  background-color: $gray3;
+  background-color: $gray5;
   transition: all 0.2s ease;
   border-radius: 0.75rem;
 
diff --git a/src/components/PlaylistsList/PlaylistCard.vue b/src/components/PlaylistsList/PlaylistCard.vue
index 4751e885..7de4f4d1 100644
--- a/src/components/PlaylistsList/PlaylistCard.vue
+++ b/src/components/PlaylistsList/PlaylistCard.vue
@@ -30,7 +30,7 @@ const props = defineProps<{
 
 <style lang="scss">
 .p-card {
-  background-color: $gray5;
+  background-color: #2c2c2e45;
   display: grid;
   grid-template-rows: 1fr max-content;
   padding: 1rem;