diff --git a/src/components/ceCard.astro b/src/components/ceCard.astro
index b4f6d93..b7b255f 100644
--- a/src/components/ceCard.astro
+++ b/src/components/ceCard.astro
@@ -33,8 +33,8 @@ if(mlb === "false") {
     }
 
     article {
-        background-color: rgb(27, 27, 27);
-        border-color: #1e1e1e;
+        background-color: var(--c-darkergray);
+        border-color: var(--c-darkgray);
         padding: 20px;
         padding-top: 5px;
         width: 35%;
diff --git a/src/components/contactCard.astro b/src/components/contactCard.astro
index a9acd46..b221b4e 100644
--- a/src/components/contactCard.astro
+++ b/src/components/contactCard.astro
@@ -22,8 +22,8 @@ const { link, site } = Astro.props;
         line-height: normal;
     }
     article {
-        background-color: rgb(27, 27, 27);
-        border-color: #1e1e1e;
+        background-color: var(--c-darkergray);
+        border-color: var(--c-darkgray);
         padding: 10px;
         text-align: center;
         transition: transform var(--speed) var(--ease);
diff --git a/src/components/favouriteCard.astro b/src/components/favouriteCard.astro
index 25b115b..78baafa 100644
--- a/src/components/favouriteCard.astro
+++ b/src/components/favouriteCard.astro
@@ -49,8 +49,8 @@ const img: string = `/fgosite/favourites/${image}.webp`;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
-        background-color: rgb(27, 27, 27);
-        border-color: #1e1e1e;
+        background-color: var(--c-darkergray);
+        border-color: var(--c-darkgray);
         padding: 0em 0.75em;
         width: 40%;
         height: auto;
diff --git a/src/components/hero.astro b/src/components/hero.astro
index 253b501..37d94de 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -12,7 +12,7 @@ This is still a work in progress and continuously expanded. Feel free to look ar
         display: flex;
         width: 100%;
         height: 5em;
-        background-color: #2e2e2e;
+        background-color: var(--c-gray);
         text-align: center;
         align-items: center;
         justify-content: center;
diff --git a/src/components/navbar.astro b/src/components/navbar.astro
index 4fe06df..0e740c0 100644
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@@ -19,7 +19,7 @@
 
 <style>
     header {
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
         display: flex;
         height: auto;
         width: 100%;
@@ -53,7 +53,7 @@
         line-height: 1.5em;
     }
     .mobile > ul {
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
         align-items: center;
         flex-wrap: wrap;
         flex-direction: column;
@@ -70,7 +70,7 @@
 
     .mobile {
         display:flex;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
         border: 0px;
         width: 100%;
         height: 64px;
diff --git a/src/components/navbarEntry.astro b/src/components/navbarEntry.astro
index d6bb4cb..25c3a4d 100644
--- a/src/components/navbarEntry.astro
+++ b/src/components/navbarEntry.astro
@@ -45,9 +45,9 @@ const fulllink = `/fgosite/${slug}`;
         font-weight: bold;
     }
     li > a:hover{
-        color: #c105ff;
+        color: var(--c-purplepink);
     }
     .current {
-        color: #b86cffed;
+        color: var(--c-darkpurple);
     }
 </style>
\ No newline at end of file
diff --git a/src/components/navbuttonsTitle.astro b/src/components/navbuttonsTitle.astro
deleted file mode 100644
index 80901ef..0000000
--- a/src/components/navbuttonsTitle.astro
+++ /dev/null
@@ -1,31 +0,0 @@
----
-
----
-
-<div>
-    <button>Servant Offering</button>
-    <button>TA Achievements</button>
-    <button>About</button>
-</div>
-
-
-<style>
-    div {
-        display: flex;
-        margin: 1em 0%;
-    }
-    button {
-        padding: 1em 1em;
-        margin: 0em 0.5em;
-        background-color: rgb(218, 66, 218);
-        border-radius: 0%;
-        border-width: 0;
-        text-align: center;
-        font-size: large;
-        color: black;
-        width: 10em;
-    }
-    button:active {
-        background-color: blueviolet;
-    }
-</style>
\ No newline at end of file
diff --git a/src/components/servantCard.astro b/src/components/servantCard.astro
index 7f6cf0b..ef1342f 100644
--- a/src/components/servantCard.astro
+++ b/src/components/servantCard.astro
@@ -63,8 +63,8 @@ if(bond10 === "false") {
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
-        background-color: rgb(27, 27, 27);
-        border-color: #1e1e1e;
+        background-color: var(--c-darkergray);
+        border-color: var(--c-darkgray);
         padding: 0em 0.75em;
         width: 40%;
         height: auto;
@@ -113,7 +113,7 @@ if(bond10 === "false") {
     article:hover .expand-on-hover {
         transform: scaleY(1);
         transition: transform 200ms ease-in-out;
-        background-color: #242424;
+        background-color: var(--c-duskgray);
     }
 
     .bond-ce {
diff --git a/src/components/taCard.astro b/src/components/taCard.astro
index f852b58..869a3ea 100644
--- a/src/components/taCard.astro
+++ b/src/components/taCard.astro
@@ -19,8 +19,8 @@ const icon: string = `background: url('/fgosite/ta_icons/${image}.webp')`
 
 <style>
 article {
-    background-color: rgb(27, 27, 27);
-    border-color: #1e1e1e;
+    background-color: var(--c-darkergray);
+    border-color: var(--c-darkgray);
     padding: 10px;
     text-align: center;
     transition: transform var(--speed) var(--ease);
@@ -40,7 +40,7 @@ article > div {
 
 article:hover h2 {
     color: white;
-    background-color: #1e1e1e;
+    background-color: var(--c-darkgray);
     font-size: 18px;
     display: inline-block;
     vertical-align: bottom;
diff --git a/src/components/technologyCard.astro b/src/components/technologyCard.astro
index a46b6f4..b252f7a 100644
--- a/src/components/technologyCard.astro
+++ b/src/components/technologyCard.astro
@@ -19,8 +19,8 @@ const icon: string = `background-image: url('/fgosite/technologies/${image}.webp
 
 <style>
 article {
-    background-color: rgb(27, 27, 27);
-    border-color: #1e1e1e;
+    background-color: var(--c-darkergray);
+    border-color: var(--c-darkgray);
     padding: 10px;
     text-align: center;
     transition: transform var(--speed) var(--ease);
@@ -39,7 +39,7 @@ article > div {
 
 article:hover h2 {
     color: white;
-    background-color: #1e1e1e;
+    background-color: var(--c-darkgray);
     font-size: 18px;
     display: inline-block;
     vertical-align: center;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 8a9d4e0..79e187d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -42,9 +42,16 @@ const description: string = "A reference for all esports Servants, CEs and alrea
     	--speed: 50%;
     	--ease: 50%;
     	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+		--c-darkgray: #1e1e1e;
+		--c-duskgray: #242424;
+		--c-gray: #2e2e2e;
+		--c-lightgray: #3e3e3e;
+		--c-darkpurple: #b86cff;
+		--c-purplepink: #c105ff;
+		--c-darkergray: #1b1b1b;
 	}
 	body {
-		background: #3e3e3e;
+		background: var(--c-lightgray);
 		margin: 0px;
 	}
 </style>
diff --git a/src/layouts/baseSection.astro b/src/layouts/baseSection.astro
index 21e3f72..315e838 100644
--- a/src/layouts/baseSection.astro
+++ b/src/layouts/baseSection.astro
@@ -35,7 +35,7 @@ const { title } = Astro.props;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
 	@media(min-width: 512px) {	
     	div {
diff --git a/src/layouts/basicSection.astro b/src/layouts/basicSection.astro
index badba50..0b8b39e 100644
--- a/src/layouts/basicSection.astro
+++ b/src/layouts/basicSection.astro
@@ -19,7 +19,7 @@ const { title } = Astro.props;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
     div {
         row-gap: 1em;
diff --git a/src/layouts/contactSection.astro b/src/layouts/contactSection.astro
index 303d4db..59517f4 100644
--- a/src/layouts/contactSection.astro
+++ b/src/layouts/contactSection.astro
@@ -18,7 +18,7 @@ h1 {
     margin: 0.5rem 0px 0.5rem 0.5em;
     padding: 0.25rem 0.75rem;
     width: max-content;
-    background-color: #1e1e1e;
+    background-color: var(--c-darkgray);
 }
 div {
     row-gap: 1em;
diff --git a/src/layouts/hometitle.astro b/src/layouts/hometitle.astro
index f9a5483..e8403d6 100644
--- a/src/layouts/hometitle.astro
+++ b/src/layouts/hometitle.astro
@@ -26,6 +26,6 @@
         font-weight: bold;
         color: white;
         font-size: 5em;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
 </style>
\ No newline at end of file
diff --git a/src/layouts/taSection.astro b/src/layouts/taSection.astro
index 75fd328..d939a4f 100644
--- a/src/layouts/taSection.astro
+++ b/src/layouts/taSection.astro
@@ -28,7 +28,7 @@ const { title } = Astro.props;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
     h2 {
         color: white;