diff --git a/index.html b/index.html
index a99f6b6..d023981 100644
--- a/index.html
+++ b/index.html
@@ -261,7 +261,7 @@
 
     <div id="app">
       <!-- This modal is used for switching between buffers -->
-      <div id="modal-buffers" class="invisible opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
+      <div id="modal-buffers" class="invisible flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
         <div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
 					<p class="text-semibold lg:text-2xl text-sm pb-4 text-selection_foreground">Known universes</p>
 					<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
@@ -288,7 +288,7 @@
 
       <!-- This modal is used for settings -->
       <div id="modal-settings" class="invisible flex
-              absolute lg:justify-center lg:items-center 
+              absolute lg:justify-center lg:items-center
               lg:overflow-y-auto lg:overflow-x-auto
               overflow-y-scroll owerflow-x-scroll
               md:top-0 md:bottom-0 h-screen w-full"
@@ -559,7 +559,7 @@
 
       <template id="ui-known-universe-item-template">
         <!-- A known universe button in "opening" interface -->
-        <li class="py-2 px-4 flex justify-between text-cyan">
+        <li class="py-2 px-4 flex justify-between text-brightwhite hover:bg-selection_background hover:text-selection_foreground">
           <button class="universe-name load-universe" title="Load this universe">Universe Name</button>
           <button class="delete-universe" title="Delete this universe">🗑</button>
         </li>
diff --git a/src/documentation/learning/samples/sample_list.ts b/src/documentation/learning/samples/sample_list.ts
index 0175196..8a92694 100644
--- a/src/documentation/learning/samples/sample_list.ts
+++ b/src/documentation/learning/samples/sample_list.ts
@@ -32,7 +32,7 @@ export const samples_to_markdown = (
 
     markdownList += `
 <button 
-	class="hover:bg-neutral-500 inline px-4 py-2 bg-neutral-700 text-orange-300 text-xl"
+	class="hover:bg-foreground inline px-4 py-2 bg-black text-brightwhite hover:text-background text-xl"
 	onclick="app.api._playDocExampleOnce(app.api.codeExamples['${codeId}'])"
 >
 ${keys[i]}
@@ -75,7 +75,7 @@ beat(0.5)::sound('wt_stereo').n([0, 1].pick()).ad(0, .25).out()
 
 Pick one folder and spend some time exploring it. There is a lot of different waveforms.
 
-<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
+<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
 ${samples_to_markdown(application, "Waveforms")}
 </div>
 
@@ -94,7 +94,7 @@ beat(0.5)::sound(['bd', 'cp'].pick()).bank("AkaiLinn").out()
 Here is the complete list of available machines:
 
 
-<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
+<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
 ${samples_to_markdown(application, "Machines")}
 </div>
 
@@ -102,7 +102,7 @@ ${samples_to_markdown(application, "Machines")}
 
 The default sample pack used by Ryan Kirkbride's [FoxDot](https://github.com/Qirky/FoxDot). It is a nice curated sample pack that covers all the basic sounds you could want.
 
-<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
+<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
 ${samples_to_markdown(application, "FoxDot")}
 </div>
 
@@ -110,7 +110,7 @@ ${samples_to_markdown(application, "FoxDot")}
 
 This set of audio samples is taken from [this wonderful collection](https://archive.org/details/AmigaSoundtrackerSamplePacksst-xx) of **Ultimate Tracker Amiga samples**. They were initially made by Karsten Obarski. These files were processed: pitched down one octave, gain down 6db. The audio has been processed with [SoX](https://github.com/chirlu/sox). The script used to do so is also included in this repository.
 
-<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
+<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
 ${samples_to_markdown(application, "Amiga")}
 </div>
 
@@ -128,7 +128,7 @@ beat(4)::sound('amen1').stretch(4).out()
 
 The stretch should be adapted based on the length of each amen break.
 
-<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
+<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
 ${samples_to_markdown(application, "Amen")}
 </div>
 
@@ -137,7 +137,7 @@ ${samples_to_markdown(application, "Amen")}
 Many live coders are expecting to find the Tidal sample library wherever they go, so here it is :)
 
 
-<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
+<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
 ${samples_to_markdown(application, "Tidal")}
 </div>
 
@@ -145,7 +145,7 @@ ${samples_to_markdown(application, "Tidal")}
 
 This sample pack is only one folder full of french phonems! It sounds super nice.
 
-<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
+<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
 ${samples_to_markdown(application, "Juliette")}
 </div>
 `;
diff --git a/src/style.css b/src/style.css
index 6bde57f..e0c88d1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2318,6 +2318,16 @@ video {
   background-color: rgb(var(--brightmagenta) / var(--tw-bg-opacity));
 }
 
+.hover\:bg-selection_foreground:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-selection_background:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
+}
+
 .hover\:text-background:hover {
   --tw-text-opacity: 1;
   color: rgb(var(--background) / var(--tw-text-opacity));
@@ -2328,6 +2338,11 @@ video {
   color: rgb(var(--brightwhite) / var(--tw-text-opacity));
 }
 
+.hover\:text-selection_foreground:hover {
+  --tw-text-opacity: 1;
+  color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;