diff --git a/Cargo.lock b/Cargo.lock
index b1a3c32..734d0c5 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1590,9 +1590,9 @@ dependencies = [
 
 [[package]]
 name = "itoa"
-version = "1.0.13"
+version = "1.0.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "540654e97a3f4470a492cd30ff187bc95d89557a903a2bbf112e2fae98104ef2"
+checksum = "d75a2a4b1b190afb6f5425f10f6a8f959d2ea0b9c2b1d79553551850539e4674"
 
 [[package]]
 name = "js-sys"
diff --git a/resources/album_carousel.blp b/resources/album_carousel.blp
index 3bd2649..151e678 100644
--- a/resources/album_carousel.blp
+++ b/resources/album_carousel.blp
@@ -2,7 +2,9 @@ using Gtk 4.0;
 using Adw 1;
 
 template $AudreyUiAlbumCarousel: Adw.Bin {
-  styles [ "album-carousel" ]
+  styles [
+    "album-carousel"
+  ]
 
   child: Box {
     orientation: vertical;
@@ -14,13 +16,20 @@ template $AudreyUiAlbumCarousel: Adw.Bin {
 
       Label {
         label: bind template.title;
-        styles [ "title-2" ]
+
+        styles [
+          "title-2"
+        ]
       }
 
-      Button  {
+      Button {
         valign: center;
         icon-name: "view-refresh-symbolic";
-        styles [ "circular", "flat" ]
+
+        styles [
+          "circular",
+          "flat"
+        ]
       }
 
       Box {
@@ -28,19 +37,29 @@ template $AudreyUiAlbumCarousel: Adw.Bin {
         hexpand: true;
         valign: center;
 
-        Button  {
+        Button {
           icon-name: "go-previous-symbolic";
-          styles [ "flat" ]
+
+          styles [
+            "flat"
+          ]
         }
 
         Button {
           icon-name: "go-next-symbolic";
-          styles [ "flat" ]
+
+          styles [
+            "flat"
+          ]
         }
       }
     }
 
-    Separator { styles [ "spacer" ] }
+    Separator {
+      styles [
+        "spacer"
+      ]
+    }
 
     ScrolledWindow {
       hexpand: true;
@@ -63,6 +82,10 @@ template $AudreyUiAlbumCarousel: Adw.Bin {
         factory: BuilderListItemFactory {
           template ListItem {
             child: Box {
+              styles [
+                "album"
+              ]
+
               orientation: vertical;
               margin-bottom: 6;
               spacing: 6;
@@ -75,7 +98,10 @@ template $AudreyUiAlbumCarousel: Adw.Bin {
               }
 
               Box {
-                styles [ "labels" ]
+                styles [
+                  "labels"
+                ]
+
                 orientation: vertical;
                 homogeneous: true;
 
diff --git a/resources/play_queue.blp b/resources/play_queue.blp
index a8d5851..2b1469c 100644
--- a/resources/play_queue.blp
+++ b/resources/play_queue.blp
@@ -33,15 +33,19 @@ template $AudreyUiPlayQueue: Adw.Bin {
 
             [overlay]
             ProgressBar pulse_bar {
-              styles [ "osd" ]
+              styles [
+                "osd"
+              ]
+
               valign: start;
             }
 
             child: Picture {
-              styles [ "playing-cover-art" ]
+              styles [
+                "playing-cover-art"
+              ]
 
               valign: center;
-
               halign: center;
               paintable: bind template.playing-cover-art;
             };
diff --git a/resources/playbar.blp b/resources/playbar.blp
index 8d13810..4ac2ab1 100644
--- a/resources/playbar.blp
+++ b/resources/playbar.blp
@@ -158,7 +158,10 @@ template $AudreyUiPlaybar: Adw.Bin {
       [end]
       Box end {
         Separator {
-          styles ["spacer"]
+          styles [
+            "spacer"
+          ]
+
           hexpand: true;
         }
 
@@ -196,5 +199,9 @@ template $AudreyUiPlaybar: Adw.Bin {
 // make sure the middle is centered always
 SizeGroup {
   mode: horizontal;
-  widgets [start, end]
+
+  widgets [
+    start,
+    end
+  ]
 }
diff --git a/resources/style.css b/resources/style.css
index ef70524..9f80e8d 100644
--- a/resources/style.css
+++ b/resources/style.css
@@ -2,20 +2,23 @@ toolbarview#main {
   /* from amberol */
   background:
     linear-gradient(
-      127deg,
-      color-mix(in srgb, var(--background-color-0) 55%, transparent),
-      color-mix(in srgb, var(--background-color-0) 0%, transparent) 70.71%),
+      111deg,
+      oklch(from var(--background-color-0) l c h / 0.55),
+      oklch(from var(--background-color-0) l c h / 0) 65%
+    ),
     linear-gradient(
-      217deg,
-      color-mix(in srgb, var(--background-color-1) 55%, transparent),
-      color-mix(in srgb, var(--background-color-1) 0%, transparent) 70.71%),
+      222deg,
+      oklch(from var(--background-color-1) l c h / 0.55),
+      oklch(from var(--background-color-1) l c h / 0) 65%
+    ),
     linear-gradient(
-      336deg,
-      color-mix(in srgb, var(--background-color-2) 55%, transparent),
-      color-mix(in srgb, var(--background-color-2) 0%, transparent) 70.71%);
+      333deg,
+      oklch(from var(--background-color-2) l c h / 0.55),
+      oklch(from var(--background-color-2) l c h / 0) 65%
+    );
   transition-property: background;
-  transition-duration: 250ms;
-  transition-timing-function: ease;
+  transition-duration: 450ms;
+  transition-timing-function: cubic-bezier(0.13, 0.6, 0.8, 0.5);
 }
 
 #seek-scale slider {  
@@ -25,15 +28,6 @@ toolbarview#main {
   min-height: 10px;
 }
 
-#seek-scale trough {
-  background:
-    linear-gradient(
-      150deg,
-      color-mix(in srgb, var(--background-color-1) 16%, transparent),
-      color-mix(in srgb, var(--background-color-2) 16%, transparent) 70%);
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
-}
-
 #seek-scale trough highlight {
   background-color: var(--background-color-0);
 }
@@ -49,7 +43,7 @@ toolbarview#main {
 }
 
 #play-queue listview {
-  background-color: rgba(0,0,0,0);
+  background-color: oklch(0 0 0 / 0);
 }
 
 /* make drag and drop indicator take up entire perimeter */
@@ -58,7 +52,7 @@ toolbarview#main {
 }
 
 #play-queue .playing {
-  background-color: color-mix(in srgb, var(--accent-bg-color) 40%, transparent);
+  background-color: color-mix(in oklch, var(--accent-bg-color) 40%, transparent);
 }
 
 #play-queue .playing label.title {
@@ -66,7 +60,7 @@ toolbarview#main {
 }
 
 gridview.albums {
-  background-color: rgba(0,0,0,0);
+  background-color: oklch(0 0 0 / 0);
 }
 
 gridview.albums child {
@@ -79,7 +73,7 @@ gridview.albums child image {
 
 #play-queue-page picture.playing-cover-art {
   border-radius: 10px;
-  box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 7px;
+  box-shadow: oklch(0 0 0 / 0.6) 0px 0px 7px;
 }
 
 .loading-cover picture.playing-cover-art {
@@ -89,7 +83,7 @@ gridview.albums child image {
 
 /* album carousel */
 .album-carousel listview {
-  background-color: rgba(0,0,0,0);
+  background-color: oklch(0 0 0 / 0);
 }
 
 .album-carousel listview row {
@@ -99,15 +93,32 @@ gridview.albums child image {
 
 .album-carousel listview row image {
   border-radius: 3px;
-  background-color: #000;
+  background-color: oklch(0 0 0);
 }
 
 .album-carousel .labels {
   border-radius: 3px;
+}
+
+#seek-scale trough, .album-carousel .labels {
+  /* sort of adjusted rotation of the toolbarview idk */
   background:
     linear-gradient(
-      150deg,
-      color-mix(in srgb, var(--background-color-1) 16%, transparent),
-      color-mix(in srgb, var(--background-color-2) 16%, transparent) 50%);
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px;
+      220deg,
+      oklch(from var(--background-color-0) calc(l * 1.15) calc(c * 0.85) h / 0.15) 10%,
+      oklch(from var(--background-color-1) calc(l * 1.15) calc(c * 0.85) calc(h + 30) / 0.06) 70%
+    ),
+    linear-gradient(
+      40deg,
+      oklch(from var(--background-color-1) calc(l * 1.15) calc(c * 0.85) calc(h - 30) / 0.15) 10%,
+      oklch(from var(--background-color-2) calc(l * 1.15) calc(c * 0.85) calc(h - 30) / 0.06) 70%
+    );
+    box-shadow: oklch(0 0 0 / 0.25) 0px 0px 3px;
 }
+
+.album-carousel .labels:hover {
+  /* fancy hover */
+  background-color: oklch(from var(--accent-bg-color) calc(l * 0.8) calc(c * 0.8) h / 0.3);
+  transition: 300ms;
+}
+/* TODO: hover effect for whole album, not just label */