diff --git a/package.json b/package.json
index a6d1999..e70f312 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.4.4"
+    "astro": "^3.4.4",
+    "sass": "^1.69.5"
   },
   "devDependencies": {
     "prettier": "^3.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d68a7aa..a59020f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,10 @@ settings:
 dependencies:
   astro:
     specifier: ^3.4.4
-    version: 3.4.4(typescript@5.2.2)
+    version: 3.4.4(sass@1.69.5)(typescript@5.2.2)
+  sass:
+    specifier: ^1.69.5
+    version: 1.69.5
 
 devDependencies:
   prettier:
@@ -48,7 +51,7 @@ packages:
       astro: ^3.3.0
     dependencies:
       '@astrojs/prism': 3.0.0
-      astro: 3.4.4(typescript@5.2.2)
+      astro: 3.4.4(sass@1.69.5)(typescript@5.2.2)
       github-slugger: 2.0.0
       import-meta-resolve: 3.1.1
       mdast-util-definitions: 6.0.0
@@ -907,7 +910,7 @@ packages:
     resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
     dev: false
 
-  /astro@3.4.4(typescript@5.2.2):
+  /astro@3.4.4(sass@1.69.5)(typescript@5.2.2):
     resolution: {integrity: sha512-Xyhif8RtKpNLo/TXN0Klxt0uq/2xNzbJ1tZ2udn/QguT9a6iGeO+N1iRSU5a4FrZNKb5jyg7koLpwfEVJjj7cw==}
     engines: {node: '>=18.14.1', npm: '>=6.14.0'}
     hasBin: true
@@ -965,7 +968,7 @@ packages:
       tsconfck: 3.0.0(typescript@5.2.2)
       unist-util-visit: 4.1.2
       vfile: 5.3.7
-      vite: 4.5.0
+      vite: 4.5.0(sass@1.69.5)
       vitefu: 0.2.5(vite@4.5.0)
       which-pm: 2.1.1
       yargs-parser: 21.1.1
@@ -1801,6 +1804,10 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: false
 
+  /immutable@4.3.4:
+    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
+    dev: false
+
   /import-meta-resolve@3.1.1:
     resolution: {integrity: sha512-qeywsE/KC3w9Fd2ORrRDUw6nS/nLwZpXgfrOc2IILvZYnCaEMd+D56Vfg9k4G29gIeVi3XKql1RQatME8iYsiw==}
     dev: false
@@ -3044,6 +3051,16 @@ packages:
       suf-log: 2.5.3
     dev: true
 
+  /sass@1.69.5:
+    resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.4
+      source-map-js: 1.0.2
+    dev: false
+
   /sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
     dev: false
@@ -3540,7 +3557,7 @@ packages:
       vfile-message: 4.0.2
     dev: false
 
-  /vite@4.5.0:
+  /vite@4.5.0(sass@1.69.5):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -3571,6 +3588,7 @@ packages:
       esbuild: 0.18.20
       postcss: 8.4.31
       rollup: 3.29.4
+      sass: 1.69.5
     optionalDependencies:
       fsevents: 2.3.3
     dev: false
@@ -3583,7 +3601,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.5.0
+      vite: 4.5.0(sass@1.69.5)
     dev: false
 
   /web-namespaces@2.0.1:
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 608884c..835fe8b 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,7 +2,7 @@
 
 ---
 
-<footer class="footer">
+<footer>
   <div class="footerIcon">
     <img
       class="footerImage"
@@ -57,7 +57,8 @@
         >
       </div>
     </div>
-  </div><div class="footerNotice">
+  </div>
+  <div class="footerNotice">
     <p>
       This website is NOT affiliated with Nintendo or any other party. All
       product names, logos, and brands are property of their respective owners.
@@ -69,8 +70,8 @@
     </p>
   </div>
 </footer>
-<style>
-  .footer {
+<style lang="scss">
+  footer {
     align-items: center;
     margin: 100px 1px 0 0;
     background-color: rgba(0, 0, 0, 0.4);
@@ -78,94 +79,92 @@
     bottom: 0;
     width: 100%;
     padding: 5px;
-  }
 
-  .footerIcon {
-    display: block;
-    text-align: center;
-  }
+    .footerIcon {
+      display: block;
+      text-align: center;
 
-  .footerImage {
-    max-width: initial;
-    max-height: initial;
-    width: 48px;
-    margin: 0.5rem auto;
-  }
+      .footerImage {
+        max-width: initial;
+        max-height: initial;
+        width: 48px;
+        margin: 0.5rem auto;
+      }
 
-  .footerImageNote {
-    font-size: 0.75rem;
-  }
+      .footerImageNote {
+        font-size: 0.75rem;
+      }
+    }
 
-  .footerTable {
-    padding: 20px 0;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 20px;
-  }
+    .footerTable {
+      padding: 20px 0;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 20px;
 
-  .footerTable h3 {
-    margin-bottom: 8px;
-  }
+      h3 {
+        margin-bottom: 8px;
+      }
+    }
 
-  .footerLinks {
-    display: flex;
-    flex-direction: column;
-    align-items: baseline;
-  }
+    .footerLinks {
+      display: flex;
+      flex-direction: column;
+      align-items: baseline;
 
-  .footerLinks a {
-    position: relative;
-    color: #ffffff;
-    text-decoration: none;
-  }
+      a {
+        position: relative;
+        color: #ffffff;
+        text-decoration: none;
 
-  .footerLinks a:hover {
-    color: #ffffff;
-  }
+        &:hover {
+          color: #ffffff;
+        }
 
-  .footerLinks a::before {
-    content: "";
-    position: absolute;
-    display: block;
-    width: 100%;
-    height: 2px;
-    bottom: 0;
-    left: 0;
-    transform: scaleX(0);
-    transform-origin: left;
-    background-color: #ffffff;
-    transition: transform 0.3s ease;
-  }
+        &::before {
+          content: "";
+          position: absolute;
+          display: block;
+          width: 100%;
+          height: 2px;
+          bottom: 0;
+          left: 0;
+          transform: scaleX(0);
+          transform-origin: left;
+          background-color: #ffffff;
+          transition: transform 0.3s ease;
+        }
 
-  .footerLinks a:hover::before {
-    transform: scaleX(1);
-  }
+        &:hover::before {
+          transform: scaleX(1);
+        }
+      }
+    }
 
-  .footerNotice {
-    margin: 0 auto;
-    text-align: center;
-    font-size: 0.75rem;
-  }
+    .footerNotice {
+      margin: 0 auto;
+      text-align: center;
+      font-size: 0.75rem;
+    }
 
-  @media (min-width: 768px) {
-    .footer {
+    @media (min-width: 768px) {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       column-gap: 0px;
       margin: 0 auto;
-    }
 
-    .footerIcon {
-      grid-column: span 1;
-      justify-self: center;
-    }
+      .footerIcon {
+        grid-column: span 1;
+        justify-self: center;
+      }
 
-    .footerTable {
-      grid-column: span 3;
-    }
+      .footerTable {
+        grid-column: span 3;
+      }
 
-    .footerNotice {
-      grid-column: span 4;
+      .footerNotice {
+        grid-column: span 4;
+      }
     }
   }
 </style>
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index b8fe832..334457a 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -1,111 +1,84 @@
-<nav class="navMenu">
-  <ul class="grid">
+<nav>
+  <ul>
     <li class="navElem">
-      <div class="logoWtxt">
-        <a class:list={["pad3px", "textBx"]} href="/" target="_self"
-          ><img
-            class:list={["logo", "pad3px"]}
-            src="https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"
-            alt="The Bots Logo"
-          />li'l Judd</a
-        >
-      </div>
+      <a class="textBx" href="/" target="_self">
+        <img
+          id="logo"
+          src="https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"
+          alt="The Bots Logo"
+        />
+         li'l Judd
+      </a>
     </li>
     <li class="navElem">
-      <a class="navLink" href="/features" target="_self">Features</a>
+      <a href="/features" target="_self">Features</a>
     </li>
     <li class="navElem">
-      <a class="navLink" href="/how-do-i" target="_self">How do I...?</a>
+      <a href="/how-do-i" target="_self">How do I...?</a>
     </li>
     <li class="navElem">
-      <a class="navLink" href="/stack" target="_self">The Stack</a>
+      <a href="/stack" target="_self">The Stack</a>
     </li>
     <li class="navElem">
-      <a class="navLink" href="/about" target="_self">About</a>
+      <a href="/about" target="_self">About</a>
     </li>
-    <li class="navElemR">
+    <li class="navElem">
       <a
-        class="navLink"
         href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"
         target="_blank">Invite to your server</a
       >
     </li>
   </ul>
 </nav>
-<style>
-  .navMenu {
+<style lang="scss">
+  nav {
     display: flex;
     flex-direction: column;
     background-color: rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(5px);
     position: sticky;
     border-radius: 5px;
-  }
 
-  .logo {
-    width: 32px;
-    height: 32px;
-    border-radius: 100%;
-    max-width: initial;
-    max-height: initial;
-    margin: 0.35rem;
-  }
+    ul {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0;
 
-  .navElem {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    transition: 0.5s;
-  }
+      .navElem {
+        margin: 0.5rem 1rem;
+        transition: 0.5s;
+        color: white;
 
-  .navElem:hover {
-    color: rgb(96 59 255) !important;
-  }
+        &:hover {
+          color: rgb(96 59 255) !important;
+        }
 
-  .navElemR {
-    transition: 0.5s;
-  }
+        .textBx {
+          display: flex;
+          align-items: center;
 
-  .navElemR:hover {
-    color: rgb(96 59 255) !important;
-  }
-
-  .logoWtxt {
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-  }
-
-  .pad3px {
-    padding: 3px;
-  }
-
-  .textBx {
-    display: flex;
-    align-items: center;
-  }
-
-  @media (min-width: 768px) {
-    .grid {
-      display: grid;
-      /*grid-template-columns: repeat(6, 1fr);*/
-      grid-template-columns: repeat(8, 1fr);
+          #logo {
+            width: 32px;
+            height: 32px;
+            border-radius: 100%;
+            max-width: initial;
+            max-height: initial;
+            margin: 0.5rem;
+          }
+        }
+      }
     }
 
-    .navElem {
-      grid-column: span 1;
-      margin: 0.5rem 0.5rem 0.5rem 0.5rem;
-      align-items: center;
-      text-align: center;
-    }
+    @media (min-width: 768px) {
+      ul {
+        flex-direction: row;
+        padding: 0 2rem;
 
-    .navElemR {
-      grid-column: 8;
-      margin: 0.5rem 0.5rem 0.5rem 0.5rem;
-      align-items: center;
-      text-align: center;
+        .navElem:last-child {
+          margin-left: auto;
+        }
+      }
     }
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d275ad6..a173d9d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -24,7 +24,7 @@ import NavBar from "@components/NavBar.astro";
     <Footer />
   </body>
 </html>
-<style>
+<style lang="scss">
   .contentDiv {
     display: flex;
     flex-direction: column;
@@ -72,4 +72,13 @@ import NavBar from "@components/NavBar.astro";
   ul {
     font-family: "Splatoon", sans-serif;
   }
+
+  li {
+    list-style-type: none;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
 </style>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 97cea98..7ab4201 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -8,6 +8,8 @@ import Layout from "@layouts/Layout.astro";
     <p>
       EMail: <a href="mailto:contact@moonleay.net">contact@moonleay.net</a>
     </p>
-    <p>Discord: <a>@moonleay</a></p>
+    <p>
+      Discord: <a>@moonleay</a>
+    </p>
   </section>
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b15e863..51c96da 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,7 +14,7 @@ import Layout from "@layouts/Layout.astro";
     </div>
   </section>
 </Layout>
-<style>
+<style lang="scss">
   .section {
     display: flex;
     flex-direction: column;