diff --git a/aircox/static/aircox/css/admin.css b/aircox/static/aircox/css/admin.css
index e7ac9d6..b2e135e 100644
--- a/aircox/static/aircox/css/admin.css
+++ b/aircox/static/aircox/css/admin.css
@@ -31,11 +31,11 @@
   --a-progress-bar-bg: var(--hg-color-2);
   --a-progress-bar-color: var(--hg-color);
   --a-progress-bar-pd: 0.4rem;
-  --a-playlist-header-bg: var(--hg-color-2-alpha);
+  --a-playlist-header-bg: var(--secondary-color);
   --a-playlist-header-fg: var(--text-color);
   --a-playlist-title-sz: 1rem;
   --a-playlist-title-pd: 0.6rem;
-  --a-playlist-item-border: 1px var(--hg-color-2) solid;
+  --a-playlist-item-border: 1px var(--secondary-color) solid;
   --a-sound-bg: var(--hg-color-alpha);
   --a-sound-hv-bg: var(--hg-color);
   --a-sound-playing-fg: var(--hg-color-alpha);
@@ -51,12 +51,12 @@
   --a-player-bar-button-hg-fg: var(--button-hg-fg);
   --a-player-bar-button-hg-bg: var(--button-hg-bg);
   --button-fg: var(--text-color);
-  --button-bg: var(--hg-color);
-  --button-sec-bg: var(--hg-color-alpha);
+  --button-bg: var(--main-color);
+  --button-sec-bg: var(--main-color-light);
   --button-hg-fg: var(--text-color);
-  --button-hg-bg: var(--hg-color-2);
+  --button-hg-bg: var(--secondary-color);
   --button-active-fg: var(--text-color);
-  --button-active-bg: var(--hg-color-2);
+  --button-active-bg: var(--secondary-color-light);
 }
 
 @media screen and (max-width: 1380px) {
@@ -148,11 +148,6 @@
   font-size: 1rem;
 }
 
-@media screen and (max-width: 400px) {
-  .preview .content {
-    display: none;
-  }
-}
 .preview-cover {
   background-size: cover;
   height: var(--preview-cover-size);
@@ -231,7 +226,7 @@
   margin-top: 0.6rem;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 400px) {
   .list-item .headings {
     flex-direction: column;
   }
diff --git a/aircox/static/aircox/css/public.css b/aircox/static/aircox/css/public.css
index 86b1154..5eb538d 100644
--- a/aircox/static/aircox/css/public.css
+++ b/aircox/static/aircox/css/public.css
@@ -31,11 +31,11 @@
   --a-progress-bar-bg: var(--hg-color-2);
   --a-progress-bar-color: var(--hg-color);
   --a-progress-bar-pd: 0.4rem;
-  --a-playlist-header-bg: var(--hg-color-2-alpha);
+  --a-playlist-header-bg: var(--secondary-color);
   --a-playlist-header-fg: var(--text-color);
   --a-playlist-title-sz: 1rem;
   --a-playlist-title-pd: 0.6rem;
-  --a-playlist-item-border: 1px var(--hg-color-2) solid;
+  --a-playlist-item-border: 1px var(--secondary-color) solid;
   --a-sound-bg: var(--hg-color-alpha);
   --a-sound-hv-bg: var(--hg-color);
   --a-sound-playing-fg: var(--hg-color-alpha);
@@ -51,12 +51,12 @@
   --a-player-bar-button-hg-fg: var(--button-hg-fg);
   --a-player-bar-button-hg-bg: var(--button-hg-bg);
   --button-fg: var(--text-color);
-  --button-bg: var(--hg-color);
-  --button-sec-bg: var(--hg-color-alpha);
+  --button-bg: var(--main-color);
+  --button-sec-bg: var(--main-color-light);
   --button-hg-fg: var(--text-color);
-  --button-hg-bg: var(--hg-color-2);
+  --button-hg-bg: var(--secondary-color);
   --button-active-fg: var(--text-color);
-  --button-active-bg: var(--hg-color-2);
+  --button-active-bg: var(--secondary-color-light);
 }
 
 @media screen and (max-width: 1380px) {
@@ -148,11 +148,6 @@
   font-size: 1rem;
 }
 
-@media screen and (max-width: 400px) {
-  .preview .content {
-    display: none;
-  }
-}
 .preview-cover {
   background-size: cover;
   height: var(--preview-cover-size);
@@ -231,7 +226,7 @@
   margin-top: 0.6rem;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 400px) {
   .list-item .headings {
     flex-direction: column;
   }
diff --git a/assets/src/assets/components.scss b/assets/src/assets/components.scss
index d65df5a..7fd9595 100644
--- a/assets/src/assets/components.scss
+++ b/assets/src/assets/components.scss
@@ -35,11 +35,11 @@
     --a-progress-bar-color: var(--hg-color);
     --a-progress-bar-pd: #{v.$mp-2};
 
-    --a-playlist-header-bg: var(--hg-color-2-alpha);
+    --a-playlist-header-bg: var(--secondary-color);
     --a-playlist-header-fg: var(--text-color);
     --a-playlist-title-sz: #{v.$text-size};
     --a-playlist-title-pd: #{v.$mp-3};
-    --a-playlist-item-border: 1px var(--hg-color-2) solid;
+    --a-playlist-item-border: 1px var(--secondary-color) solid;
 
     --a-sound-bg: var(--hg-color-alpha);
     --a-sound-hv-bg: var(--hg-color);
@@ -58,12 +58,12 @@
     --a-player-bar-button-hg-bg: var(--button-hg-bg);
 
     --button-fg: var(--text-color);
-    --button-bg: var(--hg-color);
-    --button-sec-bg: var(--hg-color-alpha);
+    --button-bg: var(--main-color);
+    --button-sec-bg: var(--main-color-light);
     --button-hg-fg: var(--text-color);
-    --button-hg-bg: var(--hg-color-2);
+    --button-hg-bg: var(--secondary-color);
     --button-active-fg: var(--text-color);
-    --button-active-bg: var(--hg-color-2);
+    --button-active-bg: var(--secondary-color-light);
 }
 
 
@@ -251,13 +251,6 @@
 }
 
 
-@media screen and (max-width: v.$screen-very-small) {
-    .preview .content {
-        display: none;
-    }
-}
-
-
 .preview-cover {
     background-size: cover;
     height: var(--preview-cover-size);
@@ -354,7 +347,7 @@
     }
 }
 
-@media screen and (max-width: v.$screen-small) {
+@media screen and (max-width: v.$screen-very-small) {
     .list-item .headings {
         flex-direction: column;