diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index 26d1987..e90e7fa 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  @apply text-gray-100;
+  @apply text-zinc-100;
   @apply bg-black;
   background-image: url('@/assets/img/information-bg.jpg');
   background-size: 400px;
diff --git a/src/components/ScheduleBox.vue b/src/components/ScheduleBox.vue
index 0444f9a..f2739bd 100644
--- a/src/components/ScheduleBox.vue
+++ b/src/components/ScheduleBox.vue
@@ -11,7 +11,7 @@
         </div>
       </div>
 
-      <div class="bg-gray-900 bg-opacity-70 backdrop-blur-sm pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
+      <div class="bg-zinc-900 bg-opacity-70 backdrop-blur-sm pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
         <div class="flex items-center justify-between font-splatoon2">
           <div class="flex items-center space-x-2 text-sm lg:text-lg">
             <template v-if="store.activeSchedule">
@@ -22,11 +22,11 @@
             </template>
 
             <template v-else>
-              <div class="w-32 bg-gray-600 rounded animate-pulse">&nbsp;</div>
+              <div class="w-32 bg-zinc-600 rounded animate-pulse">&nbsp;</div>
             </template>
           </div>
 
-          <div class="justify-end text-xs lg:text-sm bg-gray-100 bg-opacity-80 rounded text-black px-2" v-if="store.activeSchedule">
+          <div class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2" v-if="store.activeSchedule">
             {{ formatTime(store.activeSchedule.startTime) }}
             &ndash;
             {{ formatTime(store.activeSchedule.endTime) }}
diff --git a/src/components/ScheduleRow.vue b/src/components/ScheduleRow.vue
index e94248f..c1c6c01 100644
--- a/src/components/ScheduleRow.vue
+++ b/src/components/ScheduleRow.vue
@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div class="sm:hidden bg-gray-500 rounded animate-pulse w-32" v-else>
+    <div class="sm:hidden bg-zinc-500 rounded animate-pulse w-32" v-else>
       &nbsp;
     </div>
 
@@ -27,11 +27,11 @@
               </div>
             </div>
 
-            <div class="text-sm text-gray-300 text-shadow">
+            <div class="text-sm text-zinc-300 text-shadow">
               in {{ formatDurationFromNow(props.schedule.startTime) }}
             </div>
 
-            <div class="text-sm text-gray-300 text-shadow">
+            <div class="text-sm text-zinc-300 text-shadow">
               {{ formatTime(props.schedule.startTime) }}
               &ndash;
               {{ formatTime(props.schedule.endTime) }}
@@ -39,9 +39,9 @@
           </template>
 
           <template v-else>
-            <div class="text-xs lg:text-lg bg-gray-500 rounded animate-pulse">&nbsp;</div>
-            <div class="text-sm mx-8 bg-gray-500 rounded animate-pulse">&nbsp;</div>
-            <div class="text-sm mx-4 bg-gray-500 rounded animate-pulse">&nbsp;</div>
+            <div class="text-xs lg:text-lg bg-zinc-500 rounded animate-pulse">&nbsp;</div>
+            <div class="text-sm mx-8 bg-zinc-500 rounded animate-pulse">&nbsp;</div>
+            <div class="text-sm mx-4 bg-zinc-500 rounded animate-pulse">&nbsp;</div>
           </template>
         </div>
       </div>
diff --git a/src/components/Splatoon3Countdown.vue b/src/components/Splatoon3Countdown.vue
index b72b0b5..3efc27b 100644
--- a/src/components/Splatoon3Countdown.vue
+++ b/src/components/Splatoon3Countdown.vue
@@ -3,11 +3,11 @@
     <div class="mt-6 font-splatoon2" aria-hidden="true">
       <div class="font-splatoon2 text-center space-y-2">
         <div v-if="isReleased">
-          <div class="text-gray-100 text-2xl ss:text-5xl">is out now!</div>
+          <div class="text-zinc-100 text-2xl ss:text-5xl">is out now!</div>
         </div>
         <div v-else>
-          <div class="text-gray-300 ss:text-3xl ss:mb-2">releases in</div>
-          <div class="text-gray-100 text-2xl ss:text-5xl">{{ days(remainingTime) }}!</div>
+          <div class="text-zinc-300 ss:text-3xl ss:mb-2">releases in</div>
+          <div class="text-zinc-100 text-2xl ss:text-5xl">{{ days(remainingTime) }}!</div>
         </div>
       </div>
       <div class="bg-blue-pattern rounded-full overflow-hidden my-4">
diff --git a/src/components/StageImage.vue b/src/components/StageImage.vue
index 4e32c50..9dc0352 100644
--- a/src/components/StageImage.vue
+++ b/src/components/StageImage.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="relative">
-    <div class="bg-gray-700 aspect-[2/1] overflow-hidden" :class="imgClass">
+    <div class="bg-zinc-700 aspect-[2/1] overflow-hidden" :class="imgClass">
       <img :src="lowRes" v-if="lowRes" />
-      <div class="bg-gray-500 animate-pulse h-full" :class="imgClass" v-else>&nbsp;</div>
+      <div class="bg-zinc-500 animate-pulse h-full" :class="imgClass" v-else>&nbsp;</div>
     </div>
 
     <div class="
       absolute
-      bg-gray-900
+      bg-zinc-900
       rounded
       bottom-0
       left-1/2
diff --git a/src/components/gear/DailyDropGear.vue b/src/components/gear/DailyDropGear.vue
index fd2d9d9..9602a66 100644
--- a/src/components/gear/DailyDropGear.vue
+++ b/src/components/gear/DailyDropGear.vue
@@ -32,7 +32,7 @@
       </div>
       <div class="space-y-4 px-4">
         <GearCardHorizontal
-          class="bg-gray-100 bg-opacity-20 backdrop-blur-sm border border-gray-50 border-opacity-20 rounded-lg"
+          class="bg-zinc-100 bg-opacity-20 backdrop-blur-sm border border-zinc-50 border-opacity-20 rounded-lg"
           v-for="gear in gears"
           :key="gear.id"
           :gear="gear"
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index e83ecc7..6fbf373 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -5,7 +5,7 @@
         <router-link to="/">Splatoon 3</router-link>
       </div>
 
-      <div class="justify-end font-splatoon2 text-3xl text-gray-200" v-if="props.title">
+      <div class="justify-end font-splatoon2 text-3xl text-zinc-200" v-if="props.title">
         {{ props.title }}
       </div>
     </div>
@@ -16,7 +16,7 @@
 
     <slot />
 
-    <div class="m-2 text-center text-xs text-gray-500">
+    <div class="m-2 text-center text-xs text-zinc-500">
       <div>
         <img src="@/assets/img/little-buddy.png" class="mx-auto mb-4" width="50" />
       </div>
@@ -67,7 +67,7 @@ onUnmounted(() => time.stopUpdatingNow());
 
 <style scoped>
 .footer-links a span {
-  @apply text-gray-300;
+  @apply text-zinc-300;
 }
 
 .footer-links a:hover span {
diff --git a/src/layouts/ScreenshotLayout.vue b/src/layouts/ScreenshotLayout.vue
index 1078f04..03d96d8 100644
--- a/src/layouts/ScreenshotLayout.vue
+++ b/src/layouts/ScreenshotLayout.vue
@@ -3,13 +3,13 @@
     <slot />
 
     <div class="h-12 m-4 bg-black bg-opacity-50 rounded-full">
-      <div class="flex justify-between h-full font-splatoon2 text-sm text-gray-300">
+      <div class="flex justify-between h-full font-splatoon2 text-sm text-zinc-300">
         <div class="flex justify-start items-center space-x-6 ml-4">
           <div>
             <img src="@/assets/img/favicon.svg" class="h-16 -my-8" />
           </div>
           <div class="flex items-center space-x-8">
-            <div class="text-3xl text-gray-50">
+            <div class="text-3xl text-zinc-50">
               {{ header }}
             </div>
             <div>
@@ -59,7 +59,7 @@ function formatDateTime(date) {
 
 <style scoped>
 .footer-links a span {
-  @apply text-gray-300;
+  @apply text-zinc-300;
 }
 
 .footer-links a:hover span {
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 92d5b42..5985972 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -8,7 +8,7 @@
 
           <div class="relative md:rotate-1">
             <ProductContainer class="py-12 bg-octoarrow">
-              <div class="faq text-gray-300 px-10">
+              <div class="faq text-zinc-300 px-10">
                 <div class="space-y-6">
                   <h1 class="font-splatoon2">About!</h1>
 
@@ -115,11 +115,11 @@ import Splat5 from '../components/splats/Splat5.vue';
 }
 
 .faq h1 {
-  @apply text-gray-50 text-3xl font-bold mb-2;
+  @apply text-zinc-50 text-3xl font-bold mb-2;
 }
 
 .faq h2 {
-  @apply text-gray-100 text-xl font-semibold mb-1;
+  @apply text-zinc-100 text-xl font-semibold mb-1;
 }
 
 .faq p {