diff --git a/assets/variables.scss b/assets/variables.scss
index 4057288..27b3330 100644
--- a/assets/variables.scss
+++ b/assets/variables.scss
@@ -2,7 +2,18 @@
 //
 // The variables you want to modify
 // $font-size-root: 20px0;
-
+:root{
+  --project-card-glow-primary:#89ff00;
+  --project-card-glow-secondary:#00bcd4;
+  --project-card-content:#0946ca;
+  --project-card-background:#060c21;
+  --contact-link-bg-primary:rgba(255, 255, 255, 0.911);
+  --contact-link-bg-secondary:rgba(255, 255, 255, 0.911);
+  --contact-link-shadow-primary:rgba(116, 227, 235, 0.959);
+  --navbar-color:#56eefd;
+  --navbar-bg:#111;
+  --sdgcard-bg:#06508b;
+}
 @layer base {
   @font-face {
     font-family: 'Open Sans';
diff --git a/components/Home/projectCard.vue b/components/Home/projectCard.vue
index 133eba4..86a1528 100644
--- a/components/Home/projectCard.vue
+++ b/components/Home/projectCard.vue
@@ -15,6 +15,7 @@
       ></div>
       <div
         class="
+          text-white
           flex
           justify-between
           items-center
@@ -54,6 +55,7 @@
             <button
               class="
                 contentBtn
+                text-white
                 transition-all
                 ease-in-out
                 duration-150
@@ -100,7 +102,7 @@ export default {
   left: 10vw;
 }
 .box {
-  background: #060c21;
+  background: var(--project-card-background);
 }
 .box::before {
   content: '';
@@ -126,9 +128,8 @@ export default {
 .box::before,
 .box::after {
   border-radius: 1.5rem;
-  background: linear-gradient(235deg, #89ff00, #010615, #00bcd4);
+  background: linear-gradient(235deg, var(--project-card-glow-primary), #010615, var(--project-card-glow-secondary));
 }
-
 .info h2 {
   color: #00bcd4;
 }
@@ -140,10 +141,10 @@ export default {
   margin: 0px 16px 0 0px;
 }
 .contentBtn {
-  box-shadow: 0 0 40px 40px #0946ca inset, 0 0 0 0 #0946ca;
+  box-shadow: 0 0 40px 40px var(--project-card-content) inset, 0 0 0 0 var(--project-card-content);
 }
 .contentBtn:hover {
-  box-shadow: 0 0 10px 0 #0946ca inset, 0 0 10px 4px #0946ca;
+  box-shadow: 0 0 10px 0 var(--project-card-content) inset, 0 0 10px 4px var(--project-card-content);
 }
 @media only screen and (max-width: 1000px) {
   .wrapper {
diff --git a/components/navbar.vue b/components/navbar.vue
index 6b9945e..321266a 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -86,7 +86,6 @@
 </template>
 <script>
 import { defineComponent } from '@nuxtjs/composition-api';
-
 export default defineComponent({
   data() {
     return {
@@ -125,7 +124,6 @@ export default defineComponent({
   }
 })
 </script>
-
 <style scoped>
 /* BUTTON STYLING */
 .navbar-toggle {
@@ -138,7 +136,7 @@ export default defineComponent({
   transition-property: stroke, stroke-dasharray, stroke-dashoffset;
   transition-timing-function: ease;
   transition-duration: 400ms;
-  stroke: #fff;
+  stroke: white;
   stroke-width: 5.5;
   stroke-linecap: round;
 }
@@ -152,7 +150,6 @@ export default defineComponent({
 .navbar-toggle.active {
   transform: rotate(45deg);
 }
-
 .navbar-toggle.active .line.top {
   stroke-dashoffset: -98px;
 }
@@ -165,16 +162,14 @@ export default defineComponent({
 }
 /* NAVBAR STYLING */
 .navbar {
-  background-color: #111;
-  border-left: 5px solid #56eefd;
+  background-color: var(--navbar-bg);
+  border-left: 5px solid var(--navbar-color);
   height: 100vh;
   left: 100vw;
 }
-
 .list_item {
   @apply text-2xl md:text-3xl lg:text-4xl;
 }
-
 .list_item:before, .list_item::after {
   content: ' ';
   display: block;
@@ -182,22 +177,21 @@ export default defineComponent({
   width: 0;
   top: 2px;
   height: 100%;
-  border-bottom: 2px solid #56eefd;
+  border-bottom: 2px solid var(--navbar-color);
   transition: 0.3s;
 }
 .list_item:before {
   right: 0;
 }
-
 .list_item:after {
   bottom: 0;
 }
 .list_item:hover {
-  color: #56eefd;
+  color: var(--navbar-color);
 }
-
 .list_item:hover:before, .list_item:hover:after {
   width: 50%;
 }
 
+
 </style>
diff --git a/components/sdgCard.vue b/components/sdgCard.vue
index c9c3004..639a71f 100644
--- a/components/sdgCard.vue
+++ b/components/sdgCard.vue
@@ -79,7 +79,6 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 import { OptiImage } from 'opti-image'
-
 export default defineComponent({
   components: {
     OptiImage
@@ -123,17 +122,16 @@ export default defineComponent({
   padding: 20px 20px;
   border-radius: 50%;
 }
-
 .our-team:hover img {
   transform: scale(1.2);
 }
 .our-team .team-content {
   width: 100%;
   height: 100%;
-  background: #06508b;
+  background: var(--sdgcard-bg);
   position: absolute;
   padding-top: 35%;
-  color: #fff;
+  color: white;
   opacity: 0;
   top: 0;
   left: 0;
@@ -158,7 +156,6 @@ export default defineComponent({
   opacity: 1;
   transform: scale(1);
 }
-
 .opti-image-loaded.opti-image {
   transition: transform 0.8s ease 0s;
 }
diff --git a/pages/contact/index.vue b/pages/contact/index.vue
index 4b587ed..27c38f1 100644
--- a/pages/contact/index.vue
+++ b/pages/contact/index.vue
@@ -146,7 +146,6 @@
 import { defineComponent } from '@nuxtjs/composition-api'
 import Online from '~/components/contact-us/discord/online.vue'
 import Map from '~/components/contact-us/map.vue'
-
 interface itemsObject {
   name: string
   url: string
@@ -157,7 +156,6 @@ interface itemsObject {
     color: string
   }
 }
-
 export default defineComponent({
   components: { Map, Online },
   data () {
@@ -200,14 +198,13 @@ img {
 #content:hover img {
   transform: scale(1.1);
 }
-
 ul li a {
-  background-color: rgba(255, 255, 255, 0.911);
+  background-color: var(--contact-link-bg-primary);
   transition: 0.4s;
 }
 ul li a:hover {
   transform: translate(0, -5px) scale(1.05);
-  background-color: rgba(255, 255, 255, 0.979);
-  box-shadow: 0px 0px 18px rgba(116, 227, 235, 0.959);
+  background-color: var(--contact-link-bg-secondary);
+  box-shadow: 0px 0px 18px var(--contact-link-shadow-primary);
 }
 </style>