diff --git a/components/Job.js b/components/Job.js
index 8ac7021..108537a 100644
--- a/components/Job.js
+++ b/components/Job.js
@@ -1,13 +1,13 @@
 export default function Job({ logo, name, details, dateFrom, dateTo }) {
   return (
-    <div className="flex items-center gap-x-3 border rounded-xl w-full p-2 bg-gray-200">
+    <div className="flex items-center gap-x-3 border rounded-xl w-full p-2 bg-slate-500 bg-opacity-50 border-slate-500">
       <img src={logo} className="w-10 h-10 rounded-full" />
       <div className="flex flex-col flex-1">
         <div className="flex justify-between">
-          <span className="block text-sm font-bold text-gray-900">{name}</span>
-          <span className="block text-xs font-bold text-gray-500">{dateFrom} - {dateTo}</span>
+          <span className="block text-sm font-bold ">{name}</span>
+          <span className="block text-xs font-bold ">{dateFrom} - {dateTo}</span>
         </div>
-        <span className="block text-xs text-gray-700">{details}</span>
+        <span className="block text-xs ">{details}</span>
       </div>
     </div>
   )
diff --git a/components/Project.js b/components/Project.js
index 9827daf..28cd700 100644
--- a/components/Project.js
+++ b/components/Project.js
@@ -1,10 +1,10 @@
 export default function Project({ label, date, url }) {
   return (
     <div className="flex flex-row items-baseline justify-between gap-2">
-      <p className="text-gray-900 text-sm ">{label}</p>
+      <p className="text-sm ">{label}</p>
       <div className="border border-dashed flex-1 border-gray-500 h-0"></div>
       <div className="flex gap-1 items-baseline">
-        <i className="text-xs text-gray-800">{date}</i>
+        <i className="text-xs">{date}</i>
         <a href={url}>
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
             stroke="currentColor" className="w-5 h-5 cursor-pointer text-blue-500 hover:text-blue-600">
diff --git a/pages/index.js b/pages/index.js
index 20c6547..4e4a819 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,3 @@
-import Script from "next/script";
 import Job from "../components/Job";
 import Skill from "../components/Skill";
 import Project from "../components/Project";
@@ -8,20 +7,20 @@ export default function Landing({ jobs, skills, projects }) {
   return (
     <div>
       <Head>
-        <body className="bg-gradient-to-b from-gray-300 to-blue-200 container max-w-xl mx-auto text-gray-800 py-24 px-8 w-full " />
+        <body className="bg-gradient-to-b from-slate-900 to-slate-950 container max-w-xl mx-auto text-white py-24 px-8 w-full " />
       </Head>
 
-      <main className="flex gap-6 flex-col">
+      <main className="flex gap-1 flex-col">
         <section>
           <div className="flex flex-col gap-2">
             <div className="flex gap-4 items-center">
               <img className="inline-block h-10 w-10 rounded-full ring-2 ring-white"
                 src="https://gitlab.com/uploads/-/system/user/avatar/5083849/avatar.png?width=400" alt="" />
-              <h1 className="text-2xl text-gray-900 font-bold">Triston Armstrong</h1>
+              <h1 className="text-2xl font-bold">Triston Armstrong</h1>
             </div>
             <p className="text-sm">Full Stack Software Developer @ <a href="ventrahealth.com"
               className="text-blue-500">VentraHealth</a></p>
-            <div className="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div>
+            <div className="w-full border-dashed border-slate-500  my-4 border "></div>
             <p className="text-sm">I am a self taught Full Stack Software Developer with an unhealthy addiction to solving
               problems using code.</p>
             <div className="w-full border-dashed border-gray-700 border-opacity-10 my-4 border "></div>
@@ -29,28 +28,28 @@ export default function Landing({ jobs, skills, projects }) {
         </section>
 
         <section>
-          <h2 className="text-1xl text-gray-900 font-bold uppercase">Skills</h2>
+          <h2 className="text-1xl font-bold uppercase">Skills</h2>
           <div className="flex gap-2 py-4" id="skills">
             {skills.map(skill => <Skill key={skill.label} label={skill.label} color={skill.color} />)}
           </div>
         </section>
 
         <section>
-          <h2 className="text-1xl text-gray-900 font-bold uppercase">Jobs</h2>
+          <h2 className="text-1xl font-bold uppercase">Jobs</h2>
           <div className="flex flex-col gap-3 py-4" id="jobs">
             {jobs.map(job => <Job key={job.name} logo={job.logo} name={job.name} details={job.details} dateFrom={job.dateFrom} dateTo={job.dateTo} />)}
           </div>
         </section>
 
         <section>
-          <h2 className="text-1xl text-gray-900 font-bold uppercase">Personal Projects</h2>
+          <h2 className="text-1xl font-bold uppercase">Personal Projects</h2>
           <div className="flex flex-col gap-3 py-4" id="projects">
             {projects.map(project => <Project key={project.label} label={project.label} date={project.date} url={project.url} />)}
           </div>
         </section>
 
         <section>
-          <h2 className="text-1xl text-gray-900 font-bold uppercase">Notes</h2>
+          <h2 className="text-1xl font-bold uppercase">Notes</h2>
           <p>An endless trail of links to my personal notes</p>
           <a href="/notes">Go To Notes {"->"}</a>
         </section>
diff --git a/styles/global.css b/styles/global.css
index 90fd36d..89e2cb6 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -3,27 +3,27 @@
 @tailwind utilities;
 
 :root {
-  --background-body: #fff;
-  --background: #efefef;
-  --background-alt: #f7f7f7;
-  --selection: #9e9e9e;
-  --text-main: #363636;
-  --text-bright: #000;
-  --text-muted: #70777f;
-  --links: #0076d1;
+  --background-body: #202b38;
+  --background: #161f27;
+  --background-alt: #1a242f;
+  --selection: #1c76c5;
+  --text-main: #dbdbdb;
+  --text-bright: #fff;
+  --text-muted: #a9b1ba;
+  --links: #41adff;
   --focus: #0096bfab;
-  --border: #dbdbdb;
-  --code: #000;
+  --border: #526980;
+  --code: #ffbe85;
   --animation-duration: 0.1s;
-  --button-base: #d0cfcf;
-  --button-hover: #9b9b9b;
-  --scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%));
-  --scrollbar-thumb-hover: var(--button-hover);
-  --form-placeholder: #949494;
-  --form-text: #1d1d1d;
-  --variable: #39a33c;
-  --highlight: #ff0;
-  --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
+  --button-base: #0c151c;
+  --button-hover: #040a0f;
+  --scrollbar-thumb: var(--button-hover);
+  --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%));
+  --form-placeholder: #a9a9a9;
+  --form-text: #fff;
+  --variable: #d941e2;
+  --highlight: #efdb43;
+  --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
 }
 
 @layer components {
