diff --git a/app/assets/styles.css b/app/assets/styles.css
index 64238ae..9fd354f 100644
--- a/app/assets/styles.css
+++ b/app/assets/styles.css
@@ -4,21 +4,23 @@
 
 @layer base {
   @define-mixin light-vars {
-    --color-gray-darkest: 36 36 36;
-    --color-gray-dark: 66 66 66;
-    --color-gray: 97 97 97;
-    --color-gray-light: 199 199 199;
-    --color-gray-lighter: 209 209 209;
-    --color-gray-lightest: 245 245 245;
+    --color-base-1: 36 36 36;
+    --color-base-2: 66 66 66;
+    --color-base-3: 97 97 97;
+    --color-base-4: 199 199 199;
+    --color-base-5: 209 209 209;
+    --color-base-6: 245 245 245;
+    --color-base-7: 255 255 255;
   }
 
   @define-mixin dark-vars {
-    --color-gray-darkest: 245 245 245;
-    --color-gray-dark: 209 209 209;
-    --color-gray: 199 199 199;
-    --color-gray-light: 97 97 97;
-    --color-gray-lighter: 66 66 66;
-    --color-gray-lightest: 36 36 36;
+    --color-base-1: 255 255 255;
+    --color-base-2: 245 245 245;
+    --color-base-3: 209 209 209;
+    --color-base-4: 199 199 199;
+    --color-base-5: 97 97 97;
+    --color-base-6: 66 66 66;
+    --color-base-7: 36 36 36;
   }
 
   :root {
@@ -40,7 +42,8 @@
   }
 
   body {
-    @apply text-gray-dark;
+    @apply text-base-2;
+    @apply bg-base-7;
   }
 
   p {
@@ -52,13 +55,13 @@
   @apply table-auto border text-left mb-4;
 
   thead {
-    @apply bg-gray-light;
+    @apply bg-base-4;
 
     tr {
       @apply border-b;
 
       th {
-        @apply px-4 py-4 text-gray-dark font-normal whitespace-nowrap;
+        @apply px-4 py-4 text-base-2 font-normal whitespace-nowrap;
 
         &[type='button'] {
           @apply cursor-pointer select-none;
@@ -77,11 +80,11 @@
   tbody {
     tr {
       &:nth-child(even) {
-        @apply bg-gray-light;
+        @apply bg-base-4;
       }
 
       td {
-        @apply px-4 py-2 text-gray-darkest align-top;
+        @apply px-4 py-2 text-base-6 align-top;
       }
     }
   }
diff --git a/app/components/badge.hbs b/app/components/badge.hbs
index 30924b8..ae4fdf0 100644
--- a/app/components/badge.hbs
+++ b/app/components/badge.hbs
@@ -1,5 +1,5 @@
 {{#let
-  'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-light text-gray-dark'
+  'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-base-4 text-base-2'
   (hash
     success='bg-green-light text-green-dark'
   ) as |commonClasses variableClasses|
diff --git a/app/components/form/element.hbs b/app/components/form/element.hbs
index d703ad3..04c50be 100644
--- a/app/components/form/element.hbs
+++ b/app/components/form/element.hbs
@@ -2,7 +2,7 @@
   {{#if @label}}
     <label
       for={{@for}}
-      class='block font-medium mb-1 text-gray-dark
+      class='block font-medium mb-1 text-base-2
         {{if @required "after:content-['*'] after:text-red-500"}}'
     >
       {{~@label~}}
diff --git a/app/components/menu-item.hbs b/app/components/menu-item.hbs
index d29a48f..1ee52e3 100644
--- a/app/components/menu-item.hbs
+++ b/app/components/menu-item.hbs
@@ -1,4 +1,4 @@
-<LinkTo @route={{@route}} @model={{@model}} @activeClass="bg-text" class="flex items-center px-4 py-2 rounded-md text-gray hover:bg-text">
+<LinkTo @route={{@route}} @model={{@model}} @activeClass="bg-text" class="flex items-center px-4 py-2 rounded-md text-base-3 hover:bg-text">
   {{#if @icon}}
     <@icon />
   {{/if}}
diff --git a/app/components/stat.hbs b/app/components/stat.hbs
index 0d004c6..2a09d3b 100644
--- a/app/components/stat.hbs
+++ b/app/components/stat.hbs
@@ -1,14 +1,14 @@
 <div
-  class='px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6'
+  class='px-4 py-5 base-7 shadow rounded-lg overflow-hidden sm:p-6'
   ...attributes
 >
   <div class='flex items-center'>
     <div class="mr-2">{{yield to='icon'}}</div>
     <div>
-      <dt class='text-sm font-medium text-gray truncate'>
+      <dt class='text-sm font-medium text-base-3 truncate'>
         {{@title}}
       </dt>
-      <dd class='text-3xl font-semibold text-gray-900'>
+      <dd class='text-3xl font-semibold text-base-3'>
         {{#if (has-block)}}
           {{yield}}
         {{else}}
diff --git a/app/components/theme-toggler.hbs b/app/components/theme-toggler.hbs
index eb21514..39e105f 100644
--- a/app/components/theme-toggler.hbs
+++ b/app/components/theme-toggler.hbs
@@ -1,4 +1,4 @@
-<div class='grid grid-cols-3 gap-1 p-1 rounded bg-gray-lightest'>
+<div class='grid grid-cols-3 gap-1 p-1 rounded bg-base-5'>
   {{#each this.themes as |item|}}
     {{#let (eq item.id this.theme) as |selected|}}
       <Button
@@ -6,7 +6,7 @@
         @icon={{item.icon}}
         @onClick={{fn this.changeTheme item.id}}
         @size='sm'
-        class='border-none {{if selected "bg-white shadow-sm"}}'
+        class='border-none {{if selected "base-7 shadow-sm"}}'
       />
     {{/let}}
   {{/each}}
diff --git a/app/index.html b/app/index.html
index 33c4826..5815049 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-theme='light'>
   <head>
     <meta charset="utf-8">
     <title>MeiliAdmin</title>
diff --git a/app/templates/admin.hbs b/app/templates/admin.hbs
index 8f23836..24bd76d 100644
--- a/app/templates/admin.hbs
+++ b/app/templates/admin.hbs
@@ -8,11 +8,11 @@
     </LinkTo>
 
     {{#let
-      'flex items-center px-4 py-2 font-semibold text-lg text-gray-dark'
+      'flex items-center px-4 py-2 font-semibold text-lg text-base-2'
       as |classLink|
     }}
       <nav class='flex flex-col flex-1 mb-4'>
-        {{!-- <div class='px-4 py-2 text-sm text-gray'>Indexes</div>
+        {{!-- <div class='px-4 py-2 text-sm text-base-3'>Indexes</div>
           {{#each @model.results as |item|}}
             <LinkTo
               @route='admin.indexes.item'
@@ -24,15 +24,15 @@
             </LinkTo>
           {{/each}} --}}
         <LinkTo @route='admin.indexes.index' class={{classLink}}>
-          <Icons::FolderMultipleOutline class='fill-gray mr-2' />
+          <Icons::FolderMultipleOutline class='fill-base-3 mr-2' />
           Indexes
         </LinkTo>
         <LinkTo @route='admin.tasks.index' class={{classLink}}>
-          <Icons::FormatListChecks class='fill-gray mr-2' />
+          <Icons::FormatListChecks class='fill-base-3 mr-2' />
           Tasks
         </LinkTo>
         <LinkTo @route='admin.keys.index' class={{classLink}}>
-          <Icons::KeyOutline class='fill-gray mr-2' />
+          <Icons::KeyOutline class='fill-base-3 mr-2' />
           Keys
         </LinkTo>
 
@@ -44,7 +44,7 @@
           target='_blank'
           rel='noopener noreferrer'
         >
-          <Icons::HelpCircleOutline class='fill-gray mr-2' />
+          <Icons::HelpCircleOutline class='fill-base-3 mr-2' />
           Documentation
         </a>
         <a
@@ -53,7 +53,7 @@
           target='_blank'
           rel='noopener noreferrer'
         >
-          <Icons::Github class='fill-gray mr-2' />
+          <Icons::Github class='fill-base-3 mr-2' />
           MeiliAdmin
         </a>
 
@@ -64,7 +64,7 @@
           {{on 'click' this.invalidateSession}}
           class={{classLink}}
         >
-          <Icons::Logout class='fill-gray mr-2' />
+          <Icons::Logout class='fill-base-3 mr-2' />
           Logout
         </button>
       </nav>
diff --git a/app/templates/login.hbs b/app/templates/login.hbs
index eea19cd..7f857cc 100644
--- a/app/templates/login.hbs
+++ b/app/templates/login.hbs
@@ -1,6 +1,6 @@
 <div class='min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8'>
   <div class='sm:mx-auto sm:w-full sm:max-w-md'>
-    <div class='bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10 mb-6'>
+    <div class='base-7 py-8 px-4 shadow sm:rounded-lg sm:px-10 mb-6'>
       <form class='space-y-6' {{on 'submit' this.authenticate}}>
         <Headers::H1 class='text-center' @title="MeiliAdmin"/>
 
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index ec50b76..70c774a 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -5,15 +5,16 @@ module.exports = {
   darkMode: 'media',
   theme: {
     extend: {
-      borderColor: (theme) => theme('colors.gray.lighter'),
+      borderColor: (theme) => theme('colors.base.5'),
       colors: {
-        gray: {
-          darkest: 'rgb(var(--color-gray-darkest) / <alpha-value>)',
-          dark: 'rgb(var(--color-gray-dark) / <alpha-value>)',
-          DEFAULT: 'rgb(var(--color-gray) / <alpha-value>)',
-          light: 'rgb(var(--color-gray-light) / <alpha-value>)',
-          lighter: 'rgb(var(--color-gray-lighter) / <alpha-value>)',
-          lightest: 'rgb(var(--color-gray-lightest) / <alpha-value>)',
+        base: {
+          1: 'rgb(var(--color-base-1) / <alpha-value>)',
+          2: 'rgb(var(--color-base-2) / <alpha-value>)',
+          3: 'rgb(var(--color-base-3) / <alpha-value>)',
+          4: 'rgb(var(--color-base-4) / <alpha-value>)',
+          5: 'rgb(var(--color-base-5) / <alpha-value>)',
+          6: 'rgb(var(--color-base-6) / <alpha-value>)',
+          7: 'rgb(var(--color-base-7) / <alpha-value>)',
         },
         primary: {
           light: colors.pink['100'],