diff --git a/client/src/app/announcements/announcements.css b/client/src/app/announcements/announcements.css
index fafbb3e..dbcc49d 100644
--- a/client/src/app/announcements/announcements.css
+++ b/client/src/app/announcements/announcements.css
@@ -1,11 +1,11 @@
 hr {
   width: 100%;
   border: none;
-  border-top: 1px solid var(--foreground);
+  border-top: 1px solid var(--border);
   margin: 0;
 }
 
-:host ::ng-deep ul{
+:host ::ng-deep ul {
   list-style-type: disc;
   list-style-position: inside;
 }
@@ -15,6 +15,7 @@ hr {
   margin-bottom: 1em;
   width: 90%;
 }
+
 .tag {
   display: inline-block;
   padding: 0 0.5em;
@@ -23,13 +24,13 @@ hr {
 }
 
 .products {
-  background-color: #e0f7fa;
-  color: #006064;
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
 }
 
 .community {
-  background-color: #e8f5e9;
-  color: #1b5e20;
+  background-color: var(--witch-rose);
+  color: var(--witch-moon);
 }
 
 .date {
diff --git a/client/src/app/home/home.css b/client/src/app/home/home.css
index 4fc11aa..e80f12f 100644
--- a/client/src/app/home/home.css
+++ b/client/src/app/home/home.css
@@ -1,99 +1,96 @@
 ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
-::ng-deep main{
+::ng-deep main {
   overflow: hidden !important;
   max-width: 100%;
 }
 
 #one {
-    transform: translateY(-200vh);
-    animation: slide-down 2s forwards;
-    font-size: 1.3rem;
+  transform: translateY(-200vh);
+  animation: slide-down 2s forwards;
+  font-size: 1.3rem;
 }
 
 #two {
-    transform: translateY(200vh);
-    animation: slide-up 2s forwards 2s;
+  transform: translateY(200vh);
+  animation: slide-up 2s forwards 2s;
 }
 
 #three {
-    transform: translateX(-200vw);
-    animation: slide-left 2s forwards 4s;
+  transform: translateX(-200vw);
+  animation: slide-left 2s forwards 4s;
 }
 
 #four {
-    transform: translateX(200vw);
-    animation: slide-right 2s forwards 6s;
+  transform: translateX(200vw);
+  animation: slide-right 2s forwards 6s;
 }
 
 #five {
-    transform: translateX(-200vw);
-    animation: slide-left 2s forwards 8s;
+  transform: translateX(-200vw);
+  animation: slide-left 2s forwards 8s;
 }
 
 #six {
-    transform: translateX(200vw);
-    animation: slide-right 2s forwards 10s;
+  transform: translateX(200vw);
+  animation: slide-right 2s forwards 10s;
 }
 
 #seven {
-    transform: translateX(-200vw);
-    animation: slide-left 2s forwards 12s;
+  transform: translateX(-200vw);
+  animation: slide-left 2s forwards 12s;
 }
 
 #fade {
-    opacity: 0;
-    animation: fade-in 2s forwards 14s;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
-    flex-wrap: wrap;
+  opacity: 0;
+  animation: fade-in 2s forwards 14s;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 1em;
 }
 
 .btn {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: var(--foreground);
-    color: var(--background);
-    text-decoration: none;
-    border-radius: 50px;
-    border: 2px solid white;
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--accent);
+  color: var(--witch-moon);
+  text-decoration: none;
+  border-radius: 50px;
+  border: 2px solid var(--border);
 }
 
 .btn:hover {
-    background-color: var(--background);
-    color: var(--foreground);
-    transition: background-color 0.3s, color 0.3s;
+  background-color: var(--highlight);
+  color: var(--foreground);
+  transition: background-color 0.3s, color 0.3s;
 }
 
 @keyframes slide-left {
-    100% { transform: translateX(0%); }
+  100% { transform: translateX(0%); }
 }
 
 @keyframes slide-right {
-    100% { transform: translateX(0%); }
+  100% { transform: translateX(0%); }
 }
 
 @keyframes slide-up {
-    100% { transform: translateY(0%); }
+  100% { transform: translateY(0%); }
 }
 
 @keyframes slide-down {
-    100% { transform: translateY(0%); }
+  100% { transform: translateY(0%); }
 }
 
 @keyframes fade-in {
-    100% { opacity: 1; }
-}
-
-@keyframes background-color {
-    0% { background-color: var(--foreground); }
-    100% { background-color: var(--background); }
+  100% { opacity: 1; }
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
diff --git a/client/src/app/home/home.html b/client/src/app/home/home.html
index d458a8f..ecc3e6c 100644
--- a/client/src/app/home/home.html
+++ b/client/src/app/home/home.html
@@ -1,8 +1,9 @@
 <h1>Hi there, I'm Hikari~!</h1>
 <img
-  src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png"
+  src="https://cdn.nhcarrigan.com/hikari.png"
   alt="Hikari"
   height="250"
+  style="display: block; margin: auto;"
 />
 <p id="one">How may I help you today?</p>
 <p id="two">I can assist you with:</p>
diff --git a/client/src/app/nav/nav.css b/client/src/app/nav/nav.css
index 2bb2a1b..d5ca17f 100644
--- a/client/src/app/nav/nav.css
+++ b/client/src/app/nav/nav.css
@@ -6,11 +6,13 @@ nav {
   height: 40px;
   color: var(--foreground);
   background-color: var(--background);
+  border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-left: 15px;
   padding-right: 15px;
+  z-index: 100;
 }
 
 nav a:not(#logo) {
@@ -34,7 +36,7 @@ img {
 hr {
   width: 100%;
   border: none;
-  border-top: 1px solid var(--foreground);
+  border-top: 1px solid var(--border);
   margin: 0;
 }
 
@@ -50,7 +52,7 @@ hr {
   top: 40px;
   background-color: var(--background);
   color: var(--foreground);
-  border: 1px solid var(--foreground);
+  border: 1px solid var(--border);
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
@@ -59,7 +61,6 @@ hr {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
   text-decoration: none;
   font-size: 2rem;
 }
diff --git a/client/src/app/products/products.css b/client/src/app/products/products.css
index 3c78adc..4733dba 100644
--- a/client/src/app/products/products.css
+++ b/client/src/app/products/products.css
@@ -3,44 +3,44 @@ a.product {
 }
 
 a.product:hover {
-  background-color: var(--background);
+  background-color: var(--highlight);
   color: var(--foreground);
 }
 
 .product:not(a) {
   cursor: default;
-  border: 2px dashed grey;
+  border: 2px dashed var(--witch-silver);
 }
 
 .btn {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: var(--foreground);
-    color: var(--background);
-    text-decoration: none;
-    border-radius: 50px;
-    border: 2px solid white;
-    font-family: 'OpenDyslexic', monospace;
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--accent);
+  color: var(--witch-moon);
+  text-decoration: none;
+  border-radius: 50px;
+  border: 2px solid var(--border);
 }
 
 .btn:disabled {
-    background-color: var(--background);
-    color: var(--foreground);
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
+  opacity: 0.6;
 }
 
 .btn:hover {
-    background-color: var(--background);
-    color: var(--foreground);
-    transition: background-color 0.3s, color 0.3s;
+  background-color: var(--highlight);
+  color: var(--foreground);
+  transition: background-color 0.3s, color 0.3s;
 }
 
 .product {
   display: grid;
   grid-template-areas: "logo title icon" "logo description icon";
   grid-template-columns: 100px 1fr auto;
-  background-color: var(--foreground);
-  color: var(--background);
-  border: 2px solid white;
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
+  border: 2px solid var(--border);
   border-radius: 50px;
   margin-left: 10px;
   margin-right: 10px;
@@ -49,6 +49,14 @@ a.product:hover {
   align-items: center;
 }
 
+.title {
+  color: var(--witch-moon);
+}
+
+.description {
+  color: var(--witch-moon);
+}
+
 .icons {
   grid-area: icon;
   font-size: 2rem;
diff --git a/client/src/app/products/products.html b/client/src/app/products/products.html
index 6dfa7b0..312eb7d 100644
--- a/client/src/app/products/products.html
+++ b/client/src/app/products/products.html
@@ -1,8 +1,9 @@
 <h1>Products</h1>
 <img
-  src="https://cdn.nhcarrigan.com/new-avatars/hikari-thinking-full.png"
+  src="https://cdn.nhcarrigan.com/hikari.png"
   alt="Hikari"
   height="250"
+  style="display: block; margin: auto;"
 />
 <p>Excellent! What sort of product are you looking for?</p>
 <div class="row">
diff --git a/client/src/app/sanctions/sanctions.css b/client/src/app/sanctions/sanctions.css
index 002525b..dbe3ca2 100644
--- a/client/src/app/sanctions/sanctions.css
+++ b/client/src/app/sanctions/sanctions.css
@@ -1,11 +1,11 @@
 hr {
   width: 100%;
   border: none;
-  border-top: 1px solid var(--foreground);
+  border-top: 1px solid var(--border);
   margin: 0;
 }
 
-:host ::ng-deep ul{
+:host ::ng-deep ul {
   list-style-type: disc;
   list-style-position: inside;
 }
@@ -15,13 +15,14 @@ hr {
   margin-bottom: 1em;
   width: 90%;
 }
+
 .tag {
   display: inline-block;
   padding: 0 0.5em;
   border-radius: 50px;
   font-size: 0.8em;
-  background-color: #e0f7fa;
-  color: #006064;
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
 }
 
 .date {
diff --git a/client/src/app/sanctions/sanctions.ts b/client/src/app/sanctions/sanctions.ts
index 1611a3d..95d2622 100644
--- a/client/src/app/sanctions/sanctions.ts
+++ b/client/src/app/sanctions/sanctions.ts
@@ -31,10 +31,6 @@ export class Sanctions {
 
   private async loadSanctions(): Promise<void> {
     const sanctions = await this.sanctionsService.getSanctions();
-    this.sanctions = sanctions.sort((a, b) => {
-      return b.createdAt > a.createdAt
-        ? 1
-        : -1;
-    });
+    this.sanctions = sanctions.sort((a, b) => b.number - a.number);
   }
 }
diff --git a/client/src/app/soon/soon.css b/client/src/app/soon/soon.css
index fb675d8..32ab36c 100644
--- a/client/src/app/soon/soon.css
+++ b/client/src/app/soon/soon.css
@@ -1,15 +1,15 @@
 .btn {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: var(--foreground);
-    color: var(--background);
-    text-decoration: none;
-    border-radius: 50px;
-    border: 2px solid white;
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--accent);
+  color: var(--witch-moon);
+  text-decoration: none;
+  border-radius: 50px;
+  border: 2px solid var(--border);
 }
 
 .btn:hover {
-    background-color: var(--background);
-    color: var(--foreground);
-    transition: background-color 0.3s, color 0.3s;
+  background-color: var(--highlight);
+  color: var(--foreground);
+  transition: background-color 0.3s, color 0.3s;
 }
diff --git a/client/src/app/soon/soon.html b/client/src/app/soon/soon.html
index c83961b..3b8cdd8 100644
--- a/client/src/app/soon/soon.html
+++ b/client/src/app/soon/soon.html
@@ -1,8 +1,9 @@
 <h1>Oh dear~!</h1>
 <img
-  src="https://cdn.nhcarrigan.com/new-avatars/hikari-cry-full.png"
+  src="https://cdn.nhcarrigan.com/hikari.png"
   alt="Hikari"
   height="250"
+  style="display: block; margin: auto;"
 />
 <p>You appear to have become lost!</p>
 <p>
diff --git a/client/src/index.html b/client/src/index.html
index 3ab1cd9..96e3275 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -15,10 +15,4 @@
     <app-root></app-root>
   </body>
   <script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
-  <script>
-    const styleElement = document.getElementById("nhcarrigan-global-styles");
-    if (styleElement) {
-      styleElement.remove();
-    }
-  </script>
 </html>
diff --git a/client/src/styles.css b/client/src/styles.css
index 21629fc..e653b8e 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -1,102 +1,12 @@
-@font-face {
-  font-family: 'Vampyr';
-  src: url('https://cdn.nhcarrigan.com/fonts/vampyr.ttf') format('truetype');
-}
-
-:root {
-  --foreground: #8F2447;
-  --background: #E1F6F9DC;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-family: 'Vampyr', monospace;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto;
-  min-height: 100vh;
-  min-width: 100vw;
-}
-body::before {
-  background: url(https://cdn.nhcarrigan.com/background.png);
-  background-size: cover;
-  background-position: center;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 1;
-  pointer-events: none;
-}
+/* Account for the fixed navigation bar */
 main {
-  color: var(--foreground);
-  background-color: var(--background);
-  text-align: center;
-  border-radius: 10px;
-  width: 100vw;
-  margin-bottom: 85px;
   margin-top: 50px;
-  min-height: calc(100vh - 85px - 50px);
-}
-footer {
-  width: 100%;
-  color: var(--foreground);
-  background-color: var(--background);
-  position: fixed;
-  bottom: 0;
-  height: 75px;
-  padding: 0 10px;
-}
-#footer-inner-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 75px;
-}
-#footer-badge-container {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  align-items: center;
-  justify-content: space-around;
-}
-#audio-theme-button, #theme-select-button {
-  background: none;
-  border: none;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-  color: var(--foreground);
-}
-a {
-  color: unset;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-}
-.btn:not(:disabled) {
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-}
-#tree-nation-offset-website {
-  display: flex;
-  align-items: center;
-}
-.is-dark {
-  --foreground: #E1F6F9;
-  --background: #8F2447bb;
+  min-height: calc(100vh - 50px - 85px);
 }
+
 @media screen and (max-width: 625px) {
-  #tree-nation-offset-website {
-    display: none;
-  }
-  footer, #footer-inner-container {
-    height: 50px;
-    justify-content: space-around;
-  }
   main {
     margin-bottom: 60px;
+    min-height: calc(100vh - 50px - 60px);
   }
 }