diff --git a/src/components/base.tsx b/src/components/base.tsx
index 8cebaab..0f121af 100644
--- a/src/components/base.tsx
+++ b/src/components/base.tsx
@@ -27,6 +27,6 @@ export const BaseHtml = ({
       />
       <link rel="manifest" href="/site.webmanifest" />
     </head>
-    <body class="w-full bg-gray-900 text-gray-200">{children}</body>
+    <body class="w-full bg-neutral-900 text-neutral-200">{children}</body>
   </html>
 );
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 6850027..500d182 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -8,14 +8,14 @@ export const Header = ({
       <ul class="flex gap-4 ">
         <li>
           <a
-            class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
+            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
             href="/history">
             History
           </a>
         </li>
         <li>
           <a
-            class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
+            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
             href="/logoff">
             Logout
           </a>
@@ -27,7 +27,7 @@ export const Header = ({
       <ul class="flex gap-4">
         <li>
           <a
-            class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
+            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
             href="/login">
             Login
           </a>
@@ -35,7 +35,7 @@ export const Header = ({
         {accountRegistration ? (
           <li>
             <a
-              class="text-lime-600 transition-all hover:text-lime-500 hover:underline"
+              class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
               href="/register">
               Register
             </a>
@@ -47,7 +47,7 @@ export const Header = ({
 
   return (
     <header class="w-full p-4">
-      <nav class="mx-auto flex max-w-4xl justify-between rounded bg-gray-900 p-4">
+      <nav class="mx-auto flex max-w-4xl justify-between rounded bg-neutral-900 p-4">
         <ul>
           <li>
             <strong>
diff --git a/src/index.tsx b/src/index.tsx
index d06f342..f2658b5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -141,7 +141,7 @@ const app = new Elysia({
         <main class="mx-auto w-full max-w-4xl px-4">
           <h1 class="my-8 text-3xl">Welcome to ConvertX!</h1>
           <article class="article p-0">
-            <header class="w-full bg-gray-800 p-4">Create your account</header>
+            <header class="w-full bg-neutral-800 p-4">Create your account</header>
             <form method="post" action="/register" class="p-4">
               <fieldset class="mb-4 flex flex-col gap-4">
                 <label class="flex flex-col gap-1">
@@ -149,7 +149,7 @@ const app = new Elysia({
                   <input
                     type="email"
                     name="email"
-                    class="rounded bg-gray-800 p-3"
+                    class="rounded bg-neutral-800 p-3"
                     placeholder="Email"
                     autocomplete="email"
                     required
@@ -160,7 +160,7 @@ const app = new Elysia({
                   <input
                     type="password"
                     name="password"
-                    class="rounded bg-gray-800 p-3"
+                    class="rounded bg-neutral-800 p-3"
                     placeholder="Password"
                     autocomplete="current-password"
                     required
@@ -172,7 +172,7 @@ const app = new Elysia({
             <footer class="p-4">
               Report any issues on{" "}
               <a
-                class="text-lime-500 underline hover:text-lime-400"
+                class="text-accent-500 underline hover:text-accent-400"
                 href="https://github.com/C4illin/ConvertX"
               >
                 GitHub
@@ -202,7 +202,7 @@ const app = new Elysia({
                     <input
                       type="email"
                       name="email"
-                      class="rounded bg-gray-800 p-3"
+                      class="rounded bg-neutral-800 p-3"
                       placeholder="Email"
                       autocomplete="email"
                       required
@@ -213,7 +213,7 @@ const app = new Elysia({
                     <input
                       type="password"
                       name="password"
-                      class="rounded bg-gray-800 p-3"
+                      class="rounded bg-neutral-800 p-3"
                       placeholder="Password"
                       autocomplete="current-password"
                       required
@@ -324,7 +324,7 @@ const app = new Elysia({
                     <input
                       type="email"
                       name="email"
-                      class="rounded bg-gray-800 p-3"
+                      class="rounded bg-neutral-800 p-3"
                       placeholder="Email"
                       autocomplete="email"
                       required
@@ -335,7 +335,7 @@ const app = new Elysia({
                     <input
                       type="password"
                       name="password"
-                      class="rounded bg-gray-800 p-3"
+                      class="rounded bg-neutral-800 p-3"
                       placeholder="Password"
                       autocomplete="current-password"
                       required
@@ -528,12 +528,12 @@ const app = new Elysia({
               <div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
                 <table
                   id="file-list"
-                  class="w-full table-auto rounded bg-gray-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800"
+                  class="w-full table-auto rounded bg-neutral-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"
                 />
               </div>
               <div
                 id="dropzone"
-                class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-gray-700 transition-all hover:border-gray-600 [&.dragover]:border-4 [&.dragover]:border-gray-500"
+                class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-neutral-700 transition-all hover:border-neutral-600 [&.dragover]:border-4 [&.dragover]:border-neutral-500"
               >
                 <span>
                   <b>Choose a file</b> or drag it here
@@ -558,14 +558,14 @@ const app = new Elysia({
                   name="convert_to_search"
                   placeholder="Search for conversions"
                   autocomplete="off"
-                  class="w-full rounded bg-gray-800 p-4"
+                  class="w-full rounded bg-neutral-800 p-4"
                 />
                 <div class="select_container relative">
-                  <article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-gray-800 sm:h-[30vh]">
+                  <article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
                     {Object.entries(getAllTargets()).map(
                       ([converter, targets]) => (
                         <article
-                          class="convert_to_group w-full border-b border-gray-700 p-4 flex flex-col"
+                          class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
                           data-converter={converter}
                         >
                           <header class="mb-2 w-full text-xl font-bold" safe>
@@ -576,7 +576,7 @@ const app = new Elysia({
                               <button
                                 // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
                                 tabindex={0}
-                                class="target rounded bg-gray-700 p-1 text-base hover:bg-gray-600"
+                                class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
                                 data-value={`${target},${converter}`}
                                 data-target={target}
                                 data-converter={converter}
@@ -629,11 +629,11 @@ const app = new Elysia({
     ({ body }) => {
       return (
         <>
-          <article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-gray-800 sm:h-[30vh]">
+          <article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
             {Object.entries(getPossibleTargets(body.fileType)).map(
               ([converter, targets]) => (
                 <article
-                  class="convert_to_group w-full border-b border-gray-700 p-4 flex flex-col"
+                  class="convert_to_group w-full border-b border-neutral-700 p-4 flex flex-col"
                   data-converter={converter}
                 >
                   <header class="mb-2 w-full text-xl font-bold" safe>
@@ -644,7 +644,7 @@ const app = new Elysia({
                       <button
                         // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
                         tabindex={0}
-                        class="target rounded bg-gray-700 p-1 text-base hover:bg-gray-600"
+                        class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
                         data-value={`${target},${converter}`}
                         data-target={target}
                         data-converter={converter}
@@ -893,7 +893,7 @@ const app = new Elysia({
           <main class="w-full px-4">
             <article class="article">
               <h1 class="mb-4 text-xl">Results</h1>
-              <table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
+              <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
                 <thead>
                   <tr>
                     <th class="px-4 py-2">Time</th>
@@ -912,7 +912,7 @@ const app = new Elysia({
                       <td safe>{job.status}</td>
                       <td>
                         <a
-                          class="text-lime-500 underline hover:text-lime-400"
+                          class="text-accent-500 underline hover:text-accent-400"
                           href={`/results/${job.id}`}
                         >
                           View
@@ -990,9 +990,9 @@ const app = new Elysia({
                 <progress
                   max={job.num_files}
                   value={files.length}
-                  class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-gray-700 bg-none text-lime-500 accent-lime-500 [&::-moz-progress-bar]:bg-gray-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-lime-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
+                  class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
                 />
-                <table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
+                <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
                   <thead>
                     <tr>
                       <th class="px-4 py-2">Converted File Name</th>
@@ -1008,7 +1008,7 @@ const app = new Elysia({
                         <td safe>{file.status}</td>
                         <td>
                           <a
-                            class="text-lime-500 underline hover:text-lime-400"
+                            class="text-accent-500 underline hover:text-accent-400"
                             href={`/download/${outputPath}${file.output_file_name}`}
                           >
                             View
@@ -1016,7 +1016,7 @@ const app = new Elysia({
                         </td>
                         <td>
                           <a
-                            class="text-lime-500 underline hover:text-lime-400"
+                            class="text-accent-500 underline hover:text-accent-400"
                             href={`/download/${outputPath}${file.output_file_name}`}
                             download={file.output_file_name}
                           >
@@ -1093,9 +1093,9 @@ const app = new Elysia({
           <progress
             max={job.num_files}
             value={files.length}
-            class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-gray-700 bg-none text-lime-500 accent-lime-500 [&::-moz-progress-bar]:bg-gray-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-lime-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
+            class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
           />
-          <table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800">
+          <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
             <thead>
               <tr>
                 <th class="px-4 py-2">Converted File Name</th>
@@ -1111,7 +1111,7 @@ const app = new Elysia({
                   <td safe>{file.status}</td>
                   <td>
                     <a
-                      class="text-lime-500 underline hover:text-lime-400"
+                      class="text-accent-500 underline hover:text-accent-400"
                       href={`/download/${outputPath}${file.output_file_name}`}
                     >
                       View
@@ -1119,7 +1119,7 @@ const app = new Elysia({
                   </td>
                   <td>
                     <a
-                      class="text-lime-500 underline hover:text-lime-400"
+                      class="text-accent-500 underline hover:text-accent-400"
                       href={`/download/${outputPath}${file.output_file_name}`}
                       download={file.output_file_name}
                     >
@@ -1179,7 +1179,7 @@ const app = new Elysia({
           <main class="w-full px-4">
             <article class="article">
               <h1 class="mb-4 text-xl">Converters</h1>
-              <table class="w-full table-auto rounded bg-gray-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-gray-800 [&_ul]:list-inside [&_ul]:list-disc">
+              <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_ul]:list-inside [&_ul]:list-disc">
                 <thead>
                   <tr>
                     <th class="mx-4 my-2">Converter</th>
diff --git a/src/main.css b/src/main.css
index da0bfb7..3848cee 100644
--- a/src/main.css
+++ b/src/main.css
@@ -4,9 +4,42 @@
 
 @layer components {
   .article {
-    @apply p-4 mb-4 bg-gray-800/40 w-full mx-auto max-w-4xl rounded;
+    @apply p-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded;
   }
   .btn-primary {
-    @apply bg-lime-500 text-black rounded p-4 hover:bg-lime-400 cursor-pointer;
+    @apply bg-accent-500 text-contrast rounded p-4 hover:bg-accent-400 cursor-pointer transition-colors;
+  }
+}
+
+:root {
+    --contrast: 255, 255, 255;
+    --neutral-900: 243, 244, 246;
+    --neutral-800: 229, 231, 235;
+    --neutral-700: 209, 213, 219;
+    --neutral-600: 156, 163, 175;
+    --neutral-500: 180, 180, 180;
+    --neutral-400: 75, 85, 99;
+    --neutral-300: 55, 65, 81;
+    --neutral-200: 31, 41, 55;
+    --neutral-100: 17, 24, 39;
+    --accent-400: 132, 204, 22;
+    --accent-500: 101, 163, 13;
+    --accent-600: 77, 124, 15;
+  }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --contrast: 0, 0, 0;
+    --neutral-900: 17, 24, 39;
+    --neutral-800: 31, 41, 55;
+    --neutral-700: 55, 65, 81;
+    --neutral-600: 75, 85, 99;
+    --neutral-500: 107, 114, 128;
+    --neutral-300: 209, 213, 219;
+    --neutral-400: 156, 163, 175;
+    --neutral-200: 229, 231, 235;
+    --accent-600: 101, 163, 13;
+    --accent-500: 132, 204, 22;
+    --accent-400: 163, 230, 53;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 2ae7deb..634caf8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,25 @@
 /** @type {import('tailwindcss').Config} */
 // eslint-disable-next-line no-undef
 module.exports = {
-  content: ['./src/**/*.{html,js,tsx,jsx,cjs,mjs}'],
+  content: ["./src/**/*.{html,js,tsx,jsx,cjs,mjs}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        contrast: "rgba(var(--contrast))",
+        "neutral-900": "rgba(var(--neutral-900))",
+        "neutral-800": "rgba(var(--neutral-800))",
+        "neutral-700": "rgba(var(--neutral-700))",
+        "neutral-600": "rgba(var(--neutral-600))",
+        "neutral-500": "rgba(var(--neutral-500))",
+        "neutral-400": "rgba(var(--neutral-400))",
+        "neutral-300": "rgba(var(--neutral-300))",
+        "neutral-200": "rgba(var(--neutral-200))",
+        "neutral-100": "rgba(var(--neutral-100))",
+        "accent-600": "rgba(var(--accent-600))",
+        "accent-500": "rgba(var(--accent-500))",
+        "accent-400": "rgba(var(--accent-400))",
+      },
+    },
   },
-  plugins: [require('tailwind-scrollbar')],
-}
+  plugins: [require("tailwind-scrollbar")],
+};
