diff --git a/frontend/components/Button.vue b/frontend/components/Button.vue
index f2a178ac..9b101de0 100644
--- a/frontend/components/Button.vue
+++ b/frontend/components/Button.vue
@@ -7,7 +7,7 @@ defineProps({
 
 <template>
   <button
-    class="flex select-none rounded bg-gradient-to-r from-main-500 to-main-600 font-medium text-white ring-main-600 ring-offset-2 transition hover:from-main-600 hover:to-main-700 hover:shadow focus:outline-none focus-visible:ring dark:ring-offset-gray-800"
+    class="flex select-none rounded bg-gradient-to-r from-main-500 to-main-600 font-medium text-white ring-main-600 ring-offset-2 transition hover:from-main-600 hover:to-main-700 hover:shadow focus:outline-none focus-visible:ring dark:from-main-600 dark:to-main-700 dark:ring-offset-gray-800 dark:hover:from-main-700 dark:hover:to-main-800"
     :class="{ 'px-4 py-2 text-sm': small, 'px-6 py-2': !small }"
     :disabled="loading"
   >
diff --git a/frontend/components/ButtonSmall.vue b/frontend/components/ButtonSmall.vue
index 88388972..c2a67542 100644
--- a/frontend/components/ButtonSmall.vue
+++ b/frontend/components/ButtonSmall.vue
@@ -10,7 +10,7 @@ defineProps({
     v-if="link"
     :to="link"
     :external="external"
-    class="inline-flex items-center gap-2 rounded border px-2 py-1 text-sm font-medium leading-tight transition duration-100 hover:border-main-300 hover:bg-main-100 hover:text-main-800 dark:hover:border-main-600 dark:hover:bg-main-800 dark:hover:text-main-100"
+    class="inline-flex select-none items-center gap-2 rounded border px-2 py-1 text-sm font-medium leading-tight transition duration-100 hover:border-main-300 hover:bg-main-100 hover:text-main-800 dark:hover:border-main-600 dark:hover:bg-main-800 dark:hover:text-main-100"
     :class="{
       'border-gray-200 bg-gray-50 text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 ':
         !coloured,
diff --git a/frontend/components/Home/HeroImage.vue b/frontend/components/Home/HeroImage.vue
index 772fc901..4bf28f61 100644
--- a/frontend/components/Home/HeroImage.vue
+++ b/frontend/components/Home/HeroImage.vue
@@ -100,11 +100,11 @@ svg {
 
 @media (prefers-color-scheme: dark) {
   svg {
-    --hero-document: var(--gray-800);
+    --hero-document: var(--gray-900);
     --hero-hills: var(--gray-800);
     --hero-trees: var(--gray-500);
     --hero-clouds: var(--main-700);
-    --hero-row: var(--main-900);
+    --hero-row: var(--gray-700);
   }
 }
 </style>
diff --git a/frontend/components/Home/Search.vue b/frontend/components/Home/Search.vue
index 7fbbe5b8..7da8ae17 100644
--- a/frontend/components/Home/Search.vue
+++ b/frontend/components/Home/Search.vue
@@ -2,7 +2,7 @@
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
 </script>
 <template>
-  <section class="bg-main-600 text-white">
+  <section class="bg-main-600 text-white dark:bg-main-800">
     <div
       class="mx-auto flex max-w-screen-lg flex-col gap-2 px-6 py-10 text-center sm:py-16 lg:px-8"
     >
diff --git a/frontend/components/Home/Upload.vue b/frontend/components/Home/Upload.vue
index 79787e3b..588a253f 100644
--- a/frontend/components/Home/Upload.vue
+++ b/frontend/components/Home/Upload.vue
@@ -1,5 +1,5 @@
 <template>
-  <aside class="relative bg-main-800 text-main-600">
+  <aside class="relative bg-main-800 text-main-600 dark:bg-main-900">
     <svg aria-hidden="true" class="absolute inset-0 z-0 h-full w-full">
       <defs>
         <pattern
diff --git a/frontend/components/LinksSection.vue b/frontend/components/LinksSection.vue
index 7aba5496..bdb82ae6 100644
--- a/frontend/components/LinksSection.vue
+++ b/frontend/components/LinksSection.vue
@@ -16,7 +16,7 @@ defineProps({
   <section
     class="w-full print:hidden"
     :class="{
-      'bg-gradient-to-r from-main-500 to-main-700 dark:from-main-600 dark:to-main-800':
+      'bg-gradient-to-r from-main-500 to-main-700 dark:from-main-700 dark:to-main-900':
         !dark,
       'bg-main-800': dark,
     }"
@@ -31,7 +31,7 @@ defineProps({
           v-for="link in links"
           :key="link.location"
           :to="link.location"
-          class="flex items-center justify-center rounded-md bg-white/10 px-7 py-2 font-medium text-white ring-white ring-opacity-40 transition hover:bg-white/25 focus:outline-none focus-visible:ring"
+          class="flex select-none items-center justify-center rounded-md bg-white/10 px-7 py-2 font-medium text-white ring-white ring-opacity-40 transition hover:bg-white/25 focus:outline-none focus-visible:ring"
         >
           {{ link.text }}
         </NuxtLink>
diff --git a/frontend/components/Menu.vue b/frontend/components/Menu.vue
index 2b6c5ed4..dc146e54 100644
--- a/frontend/components/Menu.vue
+++ b/frontend/components/Menu.vue
@@ -51,7 +51,7 @@ const links: Link[] = [
       <div class="absolute inset-y-0 right-0 flex items-center px-2 sm:hidden">
         <PopoverButton
           v-slot="{ open }"
-          class="ring-primary-light items-center justify-center rounded p-2 text-gray-500 outline-none ring-main-500 transition hover:bg-main-100 hover:text-main-700 focus:bg-main-100 focus:text-main-700 focus:ring-2 dark:text-gray-200 dark:ring-offset-gray-800 dark:hover:bg-gray-700 dark:hover:text-main-600 dark:focus:bg-gray-700 dark:focus:text-main-600"
+          class="ring-primary-light items-center justify-center rounded p-2 text-gray-500 outline-none ring-main-500 transition hover:bg-main-100 hover:text-main-700 focus:bg-main-100 focus:text-main-700 focus:ring-2 dark:text-gray-200 dark:ring-offset-gray-800 dark:hover:bg-gray-700 dark:hover:text-gray-200 dark:focus:bg-gray-700 dark:focus:text-gray-200"
         >
           <span class="sr-only">Open main menu</span>