diff --git a/README.md b/README.md
index 2b12735..6dd692b 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ To add a component :
     </template>
 
     <style scoped lang="scss">
-    @import "../assets/base.scss";
+    @use "../assets/base.scss";
     </style>
     ```
 2. You can now add this component to a page by using `import ComponentName from '../../src/components/ComponentName.vue'` in the `<script setup>`, and using it with the `<ComponentName/>` tag inside the html.
diff --git a/index.html b/index.html
index 963ca2e..d7a3d98 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/package-lock.json b/package-lock.json
index 967e899..23b8432 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "website",
       "version": "0.1.0",
       "dependencies": {
+        "help": "^3.0.2",
         "vue": "^3.2.13"
       },
       "devDependencies": {
@@ -2338,9 +2339,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2397,9 +2398,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/package.json b/package.json
index 804484b..4eff42b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "deploy": "npm run build && npx gh-pages -d dist"
   },
   "dependencies": {
+    "help": "^3.0.2",
     "vue": "^3.2.13"
   },
   "devDependencies": {
diff --git a/public/index.html b/public/index.html
index 63f177f..f659678 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/src/about/about-page.vue b/src/about/about-page.vue
index 49dfa45..02c9664 100644
--- a/src/about/about-page.vue
+++ b/src/about/about-page.vue
@@ -19,10 +19,10 @@ import AboutExplanatoryText from '../../src/components/AboutExplanatoryText.vue'
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 template {
-    color: $text;
+    color: base.$text;
 }
 
 h1 {
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 46d1688..f935711 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -1,4 +1,4 @@
-@import './base.scss';
+@use 'base.scss';
 
 #app {
   margin: 0 auto;
@@ -8,7 +8,7 @@
 a,
 .green {
   text-decoration: none;
-  color: $secondary;
+  color: base.$secondary;
   transition: 0.4s;
 }
 
diff --git a/src/components/AboutExplanatoryText.vue b/src/components/AboutExplanatoryText.vue
index d6c2fa7..b445dcf 100644
--- a/src/components/AboutExplanatoryText.vue
+++ b/src/components/AboutExplanatoryText.vue
@@ -10,7 +10,7 @@
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 p {
     text-align: center;
diff --git a/src/components/AboutOrganizationalChart.vue b/src/components/AboutOrganizationalChart.vue
index 0efa216..abc8d41 100644
--- a/src/components/AboutOrganizationalChart.vue
+++ b/src/components/AboutOrganizationalChart.vue
@@ -47,7 +47,7 @@ const mentors = [
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 h2 {
     font-weight: 600;
@@ -56,7 +56,7 @@ h2 {
     width: max-content;
     margin: 15px auto;
 
-    border-bottom: 4px solid $blue;
+    border-bottom: 4px solid base.$blue;
 }
 
 .category {
diff --git a/src/components/AboutSubteams.vue b/src/components/AboutSubteams.vue
index d70e94e..ab294ea 100644
--- a/src/components/AboutSubteams.vue
+++ b/src/components/AboutSubteams.vue
@@ -111,7 +111,7 @@ document.addEventListener("DOMContentLoaded", function () {
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 $grid-columns: 3;
 $grid-rows: 3;
@@ -142,7 +142,7 @@ $grid-rows: 3;
     width: max-content;
     margin: 15px auto;
 
-    border-bottom: 4px solid $blue;
+    border-bottom: 4px solid base.$blue;
 }
 
 .programming {
@@ -179,33 +179,33 @@ $grid-rows: 3;
     display: flex;
     max-height: 20%;
     height: 100%;
-    background-color: $primary;
-    color: $text;
+    background-color: base.$primary;
+    color: base.$text;
     align-items: center;
     justify-content: center;
 
     h3 {
         width: 100%;
-        color: $blue;
+        color: base.$blue;
         cursor: pointer;
         text-align: center;
         padding: calc(4vh - 12px) 0;
         margin: 0;
 
         .arrow {
-            color: $accent;
+            color: base.$accent;
             margin-left: 5px;
         }
     }
 
     h3:hover {
-        color: $accent;
+        color: base.$accent;
         font-weight: 1000;
     }
 }
 
 .subteamExplanation {
-    background-color: $primary;
+    background-color: base.$primary;
     max-height: 0px;
     height: 100%;
     overflow: hidden;
@@ -228,7 +228,7 @@ $grid-rows: 3;
     flex-flow: column nowrap;
     justify-content: flex-end;
     transition: 0.5s ease-in-out;
-    border: 5px solid $primary;
+    border: 5px solid base.$primary;
 
     * {  
         transition: inherit;
diff --git a/src/components/BaseFooter.vue b/src/components/BaseFooter.vue
index 94fa2c4..699941e 100644
--- a/src/components/BaseFooter.vue
+++ b/src/components/BaseFooter.vue
@@ -117,7 +117,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 main {
   position: relative;
@@ -133,7 +133,7 @@ h2 {
 
 hr {
   border-width: 0px;
-  border-top: 1px solid $primary;
+  border-top: 1px solid base.$primary;
   width: 50vw;
   margin: 10px auto;
 }
@@ -146,13 +146,13 @@ h5 {
 
   a {
     font-weight: 500;
-    color: $accent;
+    color: base.$accent;
     padding: 5px;
     border-radius: 10px;
   }
 
   a:hover {
-    background-color: $accent;
+    background-color: base.$accent;
     color: white;
   }
 }
@@ -160,8 +160,8 @@ h5 {
 footer {
   position: relative;
   z-index: 1;
-  outline: 1px solid $primary;
-  background-color: $background;
+  outline: 1px solid base.$primary;
+  background-color: base.$background;
   padding: 25px;
   margin: 25px 0px 25px;
   display: grid;
@@ -188,10 +188,10 @@ footer {
       h1 {
         font-size: 32px;
         line-height: 1.5;
-        color: $text;
+        color: base.$text;
 
         span {
-          background-color: $accent;
+          background-color: base.$accent;
           border-radius: 8vh;
           padding: 5px 0.6em;
           color: white;
@@ -252,11 +252,11 @@ footer {
         display: block;
 
         a:hover {
-          background-color: rgba($secondary, $alpha: 0.2);
+          background-color: rgba(base.$secondary, $alpha: 0.2);
         }
 
         li {
-          color: $secondary;
+          color: base.$secondary;
           font-weight: 300;
           margin-left: 0px;
           clear: both;
@@ -278,20 +278,20 @@ footer {
       display: flex;
       justify-content: left;
       align-items: center;
-      outline: 0px solid $primary;
+      outline: 0px solid base.$primary;
       position: relative;
       z-index: 2;
     }
 
     a:hover {
       transition: all 0.5s ease;
-      background-color: rgba($secondary, $alpha: 0.2);
-      outline: 1px solid $secondary;
+      background-color: rgba(base.$secondary, $alpha: 0.2);
+      outline: 1px solid base.$secondary;
     }
 
     a.active, a.active>li{
       color: white;
-      background-color: $secondary;
+      background-color: base.$secondary;
     }
   }
 }
@@ -333,7 +333,7 @@ footer {
     a {
       position: relative;
       height: auto;
-      color: $text;
+      color: base.$text;
       width: 70px;
       display: flex;
       align-items: center;
@@ -342,8 +342,8 @@ footer {
 
     a:hover {
       span {
-        background-color: rgba($secondary, $alpha: 0.2);
-        outline: 1px solid $secondary;
+        background-color: rgba(base.$secondary, $alpha: 0.2);
+        outline: 1px solid base.$secondary;
       }
     }
   }
diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index 2e85780..cee56c1 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -17,7 +17,7 @@ import BaseNav from './BaseNav.vue'
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 header {
   display: grid;
@@ -60,11 +60,11 @@ header a {
   height: min-content;
   width: min-content;
   line-height: 1;
-  color: rgba($text, 0.9);
+  color: rgba(base.$text, 0.9);
 }
 
 .icons a:hover {
-  color: rgba($secondary, $alpha: 0.6);
+  color: rgba(base.$secondary, $alpha: 0.6);
 }
 
 h1 {
diff --git a/src/components/BaseNav.vue b/src/components/BaseNav.vue
index 7ec8780..76d12f1 100644
--- a/src/components/BaseNav.vue
+++ b/src/components/BaseNav.vue
@@ -58,7 +58,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 .openButton {
   display: none;
@@ -98,7 +98,7 @@ nav {
       display: flex;
       justify-content: center;
       align-items: center;
-      outline: 0px solid $primary;
+      outline: 0px solid base.$primary;
       position: relative;
       z-index: 2;
     }
@@ -111,13 +111,13 @@ nav {
 
     a:hover {
       transition: all 0.5s ease;
-      background-color: rgba($secondary, $alpha: 0.2);
-      outline: 1px solid $secondary;
+      background-color: rgba(base.$secondary, $alpha: 0.2);
+      outline: 1px solid base.$secondary;
     }
 
     a.active {
       color: white;
-      background-color: $secondary;
+      background-color: base.$secondary;
     }
   }
 
@@ -132,7 +132,7 @@ nav {
 
     ul {
       height: auto;
-      background: $grey;
+      background: base.$grey;
       padding-top: 40px;
       transform: translateY(-40px);
       border-radius: 10px;
@@ -169,7 +169,7 @@ ul li ul:focus {
     top: 10px;
     right: 10px;
     font-size: 24px;
-    background-color: $background;
+    background-color: base.$background;
     width: 40px;
     height: 40px;
     border-radius: 50%;
@@ -185,7 +185,7 @@ ul li ul:focus {
     top: 0px;
     right: 0px;
     padding: 8px 20px;
-    background-color: $background;
+    background-color: base.$background;
     z-index: 3;
     transform: translateX(110%);
 
@@ -215,7 +215,7 @@ ul li ul:focus {
           transform: translate(0, 0);
           background-color: transparent;
           font-size: 90%;
-          color: $secondary;
+          color: base.$secondary;
 
           li {
             padding: 0;
diff --git a/src/components/HomeInsta.vue b/src/components/HomeInsta.vue
index e66f205..66465ed 100644
--- a/src/components/HomeInsta.vue
+++ b/src/components/HomeInsta.vue
@@ -18,7 +18,7 @@
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 main {
   padding: 20px;
@@ -34,10 +34,10 @@ main > h2 {
   width: max-content;
   margin: 10px auto 40px;
 
-  border-bottom: 4px solid $accent;
+  border-bottom: 4px solid base.$accent;
 
   i {
-    color: $accent;
+    color: base.$accent;
   }
 }
 
diff --git a/src/components/HomePhoto.vue b/src/components/HomePhoto.vue
index 31bc548..6375ecb 100644
--- a/src/components/HomePhoto.vue
+++ b/src/components/HomePhoto.vue
@@ -12,7 +12,7 @@
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 section {
   width: 98vw;
@@ -38,12 +38,12 @@ main {
   flex-flow: row-reverse;
   align-items: flex-end;
   border-radius: 10px;
-  // box-shadow: 0px 10px 12px rgba($text, $alpha: 0.4);
+  // box-shadow: 0px 10px 12px rgba(base.$text, base.$alpha: 0.4);
 }
 
 h5 {
-  color: $background;
-  text-shadow: 1px 1px 0px rgba($text, $alpha: 0.8);
+  color: base.$background;
+  text-shadow: 1px 1px 0px rgba(base.$text, base.$alpha: 0.8);
   font-weight: 400;
   display: inline;
   font-size: 16px;
diff --git a/src/components/HomeRecently.vue b/src/components/HomeRecently.vue
index 1b87b56..7d36d96 100644
--- a/src/components/HomeRecently.vue
+++ b/src/components/HomeRecently.vue
@@ -47,10 +47,10 @@ import NewsCardUnclick from "./NewsCardUnclick.vue";
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 main {
-  background-color: $primary;
+  background-color: base.$primary;
   margin: auto;
   padding: 15px;
 
@@ -62,7 +62,7 @@ main {
     width: max-content;
     margin: 15px auto;
 
-    border-bottom: 4px solid $blue;
+    border-bottom: 4px solid base.$blue;
   }
 }
 
diff --git a/src/components/MemberCardComponent.vue b/src/components/MemberCardComponent.vue
index 2299001..7abfa67 100644
--- a/src/components/MemberCardComponent.vue
+++ b/src/components/MemberCardComponent.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps } from 'vue';
 
 const props = defineProps({
   link: {
@@ -21,13 +20,13 @@ const props = defineProps({
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 .member {
     display: flex;
     flex-direction: column;
     text-align: center;
-    background-color: $primary;
+    background-color: base.$primary;
     border-radius: 10px;
     width: 15%;
     min-width: 175px;
@@ -45,10 +44,10 @@ const props = defineProps({
         gap: 4px;
         padding: 4px;
         border-radius: 10px 10px 0px 0px;
-        background: $secondary;
+        background: base.$secondary;
 
         h4 {
-            background: linear-gradient($accent, $orange);
+            background: linear-gradient(base.$accent, base.$orange);
             padding: 0 8px;
             border-radius: 8px;
         }
diff --git a/src/components/NewsCardClickable.vue b/src/components/NewsCardClickable.vue
index c820b47..c116f2e 100644
--- a/src/components/NewsCardClickable.vue
+++ b/src/components/NewsCardClickable.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps } from 'vue';
 
 const props = defineProps({
   link: {
@@ -34,10 +33,10 @@ const props = defineProps({
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 h3 {
-  color: $blue;
+  color: base.$blue;
   margin: 15px 0px 0px;
   grid-area: mid;
 
@@ -131,7 +130,7 @@ h4 {
   color: white;
   border-radius: 10px;
   padding: 2px 10px;
-  background: linear-gradient($accent, $orange);
+  background: linear-gradient(base.$accent, base.$orange);
   width: max-content;
   height: min-content;
 }
@@ -140,7 +139,7 @@ h5 {
   text-align: justify;
   font-weight: 300;
   margin-left: 15px;
-  color: $secondary;
+  color: base.$secondary;
 }
 
 a {
@@ -150,13 +149,13 @@ a {
   transition: all 0.5s ease;
 
   i {
-    color: $accent;
+    color: base.$accent;
     transition: all 0.5s ease-out;
   }
 }
 
 h3+a:hover {
-  color: $accent;
+  color: base.$accent;
   font-weight: 500;
 
   i {
diff --git a/src/components/NewsCardUnclick.vue b/src/components/NewsCardUnclick.vue
index 4d3913e..dd6d68a 100644
--- a/src/components/NewsCardUnclick.vue
+++ b/src/components/NewsCardUnclick.vue
@@ -22,10 +22,10 @@
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 h3 {
-  color: $blue;
+  color: base.$blue;
   margin: 15px 0px 0px;
   grid-area: mid;
 
@@ -74,7 +74,7 @@ h4 {
   color: white;
   border-radius: 10px;
   padding: 2px 10px;
-  background: linear-gradient($accent, $orange);
+  background: linear-gradient(base.$accent, base.$orange);
   width: max-content;
   height: min-content;
 }
@@ -83,7 +83,7 @@ h5 {
   text-align: justify;
   font-weight: 300;
   margin-left: 15px;
-  color: $secondary;
+  color: base.$secondary;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/components/ProjectsCard.vue b/src/components/ProjectsCard.vue
index 2fbac3b..d3a4c27 100644
--- a/src/components/ProjectsCard.vue
+++ b/src/components/ProjectsCard.vue
@@ -22,10 +22,10 @@
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 h3 {
-  color: $blue;
+  color: base.$blue;
   margin: 15px 0px 0px;
   grid-area: mid;
 
@@ -74,7 +74,7 @@ h4 {
   color: white;
   border-radius: 10px;
   padding: 2px 10px;
-  background: linear-gradient($accent, $orange);
+  background: linear-gradient(base.$accent, base.$orange);
   width: max-content;
   height: min-content;
 }
@@ -83,6 +83,6 @@ h5 {
   text-align: justify;
   font-weight: 300;
   margin-left: 15px;
-  color: $secondary;
+  color: base.$secondary;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/RobotCardComponent.vue b/src/components/RobotCardComponent.vue
index 62ec994..df72161 100644
--- a/src/components/RobotCardComponent.vue
+++ b/src/components/RobotCardComponent.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { defineProps } from 'vue';
 
 const props = defineProps({
   side: { // the default is right
@@ -64,7 +63,7 @@ document.addEventListener("DOMContentLoaded", function () {
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 $line-distance : 50px;
 $circle-radius : 15px;
@@ -114,13 +113,13 @@ $circle-radius : 15px;
     cursor: pointer;
 
     i {
-      color: $accent;
+      color: base.$accent;
       transition: all 0.5s ease-out;
     }
   }
 
   a:hover {
-    color: $accent;
+    color: base.$accent;
     font-weight: 500;
   }
 
@@ -213,7 +212,7 @@ $circle-radius : 15px;
 .line {
   position: relative;
   grid-area: timeline;
-  background: $accent;
+  background: base.$accent;
   width: 4px;
   height: 100%;
 
@@ -224,7 +223,7 @@ $circle-radius : 15px;
     width: $circle-radius;
     height: $circle-radius;
     border-radius: 50%;
-    background: linear-gradient($accent, $orange);
+    background: linear-gradient(base.$accent, base.$orange);
     transform: translate(-50%, -50%);
   }
 
@@ -233,7 +232,7 @@ $circle-radius : 15px;
     top: 50%;
     left: calc(50% + $circle-radius/2 + 3px);
     width: $line-distance;
-    border-top: 5px dotted $accent;
+    border-top: 5px dotted base.$accent;
     transform: translateY(-50%);
   }
 
@@ -245,7 +244,7 @@ $circle-radius : 15px;
 // Styles specific to year
 
 .card { // DEFAULT
-  @include content($primary);
+  @include content(base.$primary);
 }
 
 #reefscape_2025 {
diff --git a/src/components/SponsorsLogos.vue b/src/components/SponsorsLogos.vue
index abbb976..d2c8cf4 100644
--- a/src/components/SponsorsLogos.vue
+++ b/src/components/SponsorsLogos.vue
@@ -18,10 +18,10 @@
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 .sponsors {
-  background-color: $background;
+  background-color: base.$background;
 
   display: flex;
   height: 75px;
@@ -34,12 +34,12 @@
   justify-content: space-evenly;
   align-items: center;
   z-index: 0;
-  // box-shadow: 0px -5px 0px 0 $accent, 0 -10px 0px 0px $text , 0 -15px 0px 0px $primary;
+  // box-shadow: 0px -5px 0px 0 base.$accent, 0 -10px 0px 0px base.$text , 0 -15px 0px 0px base.$primary;
 
   a,
   img {
     height: 100%;
-    color: $accent;
+    color: base.$accent;
     transition: all 0.5s ease;
   }
 
diff --git a/src/home/home-page.vue b/src/home/home-page.vue
index fa295b9..ef62559 100644
--- a/src/home/home-page.vue
+++ b/src/home/home-page.vue
@@ -26,10 +26,10 @@ import HomeInstaFeed from "../components/HomeInsta.vue";
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 h1 span {
-  background-color: $accent;
+  background-color: base.$accent;
   border-radius: 1em;
   padding: 5px 0.5em;
   color: white;
diff --git a/src/join/Join-page.vue b/src/join/Join-page.vue
index 985d2ec..980c35c 100644
--- a/src/join/Join-page.vue
+++ b/src/join/Join-page.vue
@@ -17,12 +17,12 @@ import BaseFooter from '../../src/components/BaseFooter.vue'
 even though a member can obviously be part of multiple <a href="/about/#subteams"><span>subteams</span></a> at the same time!  
 We work on a regular schedule within Collège Stanislas in Montreal.  
 Here is the typical weekly schedule, depending on the subteam you're in: <br>  
-<div>Build Team:</div>  <li>Thursday and Friday from 5:30 PM to 7:30 PM.</li>  
+<!-- <div>Build Team:</div>  <li>Thursday and Friday from 5:30 PM to 7:30 PM.</li>  
 <div>Media Team:</div>  <li>Friday from 5:30 PM to 7:30 PM.</li>  
 <div>Marketing Team:</div>  <li>Friday from 5:30 PM to 7:30 PM.</li>  
 <div>Finance Team:</div>  <li>Thursday from 5:30 PM to 7:30 PM.</li>  
 <div>Programming Team:</div>  <li>Wednesday and Friday from 5:30 PM to 7:30 PM.</li>  
-<div>Design Team:</div>  <li>Wednesday and Friday from 5:30 PM to 7:30 PM.</li>
+<div>Design Team:</div>  <li>Wednesday and Friday from 5:30 PM to 7:30 PM.</li> -->
       </p>
        
     </div><div class="member band" id="student">
@@ -52,7 +52,7 @@ Here is the typical weekly schedule, depending on the subteam you're in: <br>
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 h2 {
   text-align: center;
@@ -74,23 +74,23 @@ h3 {
   font-family: "New Amsterdam", sans-serif;
 
   a {
-    color: $accent;
+    color: base.$accent;
   }
 }
 
 .band {
-  background-color: $grey;
-  border: 10px solid $secondary;
+  background-color: base.$grey;
+  border: 10px solid base.$secondary;
   margin: auto;
   margin-top: 50px;
   width: 60%;
   padding: 0 15px;
 
   h3 {
-    color: $accent;
+    color: base.$accent;
 
     span {
-      color: $blue;
+      color: base.$blue;
     }
   }
 
@@ -111,7 +111,7 @@ h3 {
     font-size: large;
   }
   a span {
-    color: $blue;
+    color: base.$blue;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/outreach/outreach-page.vue b/src/outreach/outreach-page.vue
index dedeeac..c3bcd1b 100644
--- a/src/outreach/outreach-page.vue
+++ b/src/outreach/outreach-page.vue
@@ -81,14 +81,14 @@ import ProjectCard from "../../src/components/ProjectsCard.vue";
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 h1 {
   font-size: min(13vw, 80px);
 }
 
 .outreach-main {
-  background-color: $primary;
+  background-color: base.$primary;
   margin: auto;
   padding: 15px;
 
@@ -100,7 +100,7 @@ h1 {
     width: max-content;
     margin: 15px auto;
 
-    border-bottom: 4px solid $blue;
+    border-bottom: 4px solid base.$blue;
   }
 }
 
diff --git a/src/robots/Robots-page.vue b/src/robots/Robots-page.vue
index 8b6ac89..c89a82d 100644
--- a/src/robots/Robots-page.vue
+++ b/src/robots/Robots-page.vue
@@ -111,7 +111,7 @@ import RobotCardComponent from '../../src/components/RobotCardComponent.vue';
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 nav {
   display: flex;
@@ -133,8 +133,8 @@ nav {
     left: 50%;
     font-size: 32px;
     width: min-content;
-    color: $accent;
+    color: base.$accent;
     transform: translateX(-50%) translateY(-10px);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/sponsors/sponsors-page.vue b/src/sponsors/sponsors-page.vue
index 1a49eef..87fabd7 100644
--- a/src/sponsors/sponsors-page.vue
+++ b/src/sponsors/sponsors-page.vue
@@ -59,7 +59,8 @@ import SponsorsLogos from "../../src/components/SponsorsLogos.vue";
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
+@use "sass:color";
 
 section.docs {
   display: flex;
@@ -70,7 +71,7 @@ section.docs {
   a {
     font-size: 1.5em;
     font-weight: 500;
-    color: $accent;
+    color: base.$accent;
     text-decoration: none;
     display: flex;
     align-items: center;
@@ -93,13 +94,13 @@ main {
     text-align: center;
     width: max-content;
     margin: 0.75em auto 15px;
-    color: darken($secondary, 10%);
+    color: color.adjust(base.$secondary, $lightness: -10%);
   }
 }
 
 .donating {
   h2 {
-    color: $text;
+    color: base.$text;
   }
 
   background-color: white;
@@ -107,7 +108,7 @@ main {
 }
 
 a {
-  color: $accent;
+  color: base.$accent;
 
   &:hover {
     text-decoration: underline;
@@ -132,7 +133,7 @@ p {
 }
 
 a.donate {
-  background-color: $accent;
+  background-color: base.$accent;
   color: white;
   font-size: 1.5em;
   padding: 0.5em 1.4em;
@@ -146,8 +147,8 @@ a.donate {
 
   &:hover {
     background-color: rgba(white, 0.5);
-    color: $accent;
-    outline: 3px solid $accent;
+    color: base.$accent;
+    outline: 3px solid base.$accent;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/work-in-progress/work-in-progress.vue b/src/work-in-progress/work-in-progress.vue
index 19e22c8..1b27085 100644
--- a/src/work-in-progress/work-in-progress.vue
+++ b/src/work-in-progress/work-in-progress.vue
@@ -14,7 +14,7 @@ import BaseFooter from '../../src/components/BaseFooter.vue'
 </template>
 
 <style scoped lang="scss">
-@import "../assets/base.scss";
+@use "../assets/base.scss";
 
 h1 {
     font-size: 4em;
