diff --git a/src/App.css b/src/App.css
index 215b557..e8aa3aa 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,6 @@
 :root {
   --side-gap: 0.5rem;
+  --bg: linear-gradient(-90deg, #272626 22%, #25424a 68%, #37616c 84%);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/components/About/About.module.css b/src/components/About/About.module.css
index b1e8e34..3b9eca3 100644
--- a/src/components/About/About.module.css
+++ b/src/components/About/About.module.css
@@ -3,7 +3,7 @@
   align-items: center;
   padding: calc(var(--mantine-spacing-xl) * 4);
 
-  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  background: var(--bg);
 
   @media (max-width: $mantine-breakpoint-sm) {
     flex-direction: column-reverse;
diff --git a/src/components/Events/Events.module.css b/src/components/Events/Events.module.css
index 786692f..0d72c68 100644
--- a/src/components/Events/Events.module.css
+++ b/src/components/Events/Events.module.css
@@ -1,5 +1,5 @@
 .container {
-  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  background: var(--bg);
   max-width: 100vw;
   margin: 0;
   padding: rem(15px) calc(var(--mantine-spacing-xl) * 4) rem(100px)
diff --git a/src/components/FAQ/Faq.module.css b/src/components/FAQ/Faq.module.css
index 37a0cb9..c6b5da1 100644
--- a/src/components/FAQ/Faq.module.css
+++ b/src/components/FAQ/Faq.module.css
@@ -9,7 +9,7 @@
   background-position: top left;
   position: relative;
   color: var(--mantine-color-black);
-  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  background: var(--bg);
 }
 
 .title {
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
index c976cd6..d37f097 100644
--- a/src/components/Footer/Footer.module.css
+++ b/src/components/Footer/Footer.module.css
@@ -1,6 +1,6 @@
 .footer {
   border-top: rem(1px) solid var(--mantine-color-dark-2);
-  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  background: var(--bg);
   padding: rem(5px) 0;
 }
 
diff --git a/src/components/Hero/Hero.module.css b/src/components/Hero/Hero.module.css
index d91f873..4dd6040 100644
--- a/src/components/Hero/Hero.module.css
+++ b/src/components/Hero/Hero.module.css
@@ -1,5 +1,5 @@
 .wrapper {
-  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  background: var(--bg);
   color: white;
   display: flex;
   align-items: center; /* Vertically center the content */
diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css
index 99a6b16..3707ab5 100644
--- a/src/components/Navbar/Navbar.module.css
+++ b/src/components/Navbar/Navbar.module.css
@@ -4,7 +4,7 @@
   padding-right: var(--mantine-spacing-md);
   border-bottom: rem(1px) solid rgba(190, 190, 190, 0.3);
   box-shadow: 0px 1px 1px rgba(195, 195, 195, 0.3);
-  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  background: var(--bg);
   position: fixed;
   top: 0;
   left: 0;
diff --git a/src/pages/Teams/Teams.module.css b/src/pages/Teams/Teams.module.css
index 68c3ad7..ef690eb 100644
--- a/src/pages/Teams/Teams.module.css
+++ b/src/pages/Teams/Teams.module.css
@@ -1,5 +1,5 @@
 .container {
-  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  background: var(--bg);
   min-width: 100%;
   margin: 0;
   padding: rem(15px) calc(var(--mantine-spacing-lg) * 1) rem(100px)