diff --git a/components/AccountModal/index.scss b/components/AccountModal/index.scss
index 55e8df49..f5372ff1 100644
--- a/components/AccountModal/index.scss
+++ b/components/AccountModal/index.scss
@@ -19,11 +19,11 @@
       height: $height;
 
       &:focus {
-        box-shadow: 0 0 0 2px $grey-10;
+        box-shadow: 0 0 0 2px $grey-15;
       }
 
       &[data-state='checked'] {
-        background: $grey-10;
+        background: $grey-15;
       }
     }
 
@@ -60,7 +60,7 @@
 
       &:not(.btn-disabled) {
         background: $grey-90;
-        color: $grey-40;
+        color: $grey-50;
 
         &:hover {
           background: $grey-80;
@@ -89,7 +89,7 @@
         gap: calc($unit / 2);
 
         label {
-          color: $grey-10;
+          color: $grey-15;
           font-size: $font-regular;
         }
 
diff --git a/components/Alert/index.scss b/components/Alert/index.scss
index f6ef01e7..d8fdc1ea 100644
--- a/components/Alert/index.scss
+++ b/components/Alert/index.scss
@@ -42,7 +42,7 @@
 
     &:not(.btn-disabled) {
       background: $grey-90;
-      color: $grey-40;
+      color: $grey-50;
 
       &:hover {
         background: $grey-80;
diff --git a/components/AxSelect/index.scss b/components/AxSelect/index.scss
index d1717c8b..98b5a435 100644
--- a/components/AxSelect/index.scss
+++ b/components/AxSelect/index.scss
@@ -34,7 +34,7 @@
         background-color: $grey-90;
         border-radius: 6px;
         box-sizing: border-box;
-        color: $grey-10;
+        color: $grey-15;
         height: $unit * 6;
         display: block;
         font-size: $font-regular;
diff --git a/components/Button/index.scss b/components/Button/index.scss
index 7d88cca7..d437ea45 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -3,7 +3,7 @@
   background: transparent;
   border: none;
   border-radius: 6px;
-  color: $grey-50;
+  color: $grey-55;
   display: inline-flex;
   font-size: $font-button;
   font-weight: $normal;
@@ -13,15 +13,15 @@
   &:hover {
     background: $grey-100;
     cursor: pointer;
-    color: $grey-10;
+    color: $grey-15;
 
     .icon svg {
-      fill: $grey-10;
+      fill: $grey-15;
     }
 
     .icon.stroke svg {
       fill: none;
-      stroke: $grey-10;
+      stroke: $grey-15;
     }
   }
 
@@ -77,7 +77,7 @@
     margin-top: 2px;
 
     svg {
-      fill: $grey-50;
+      fill: $grey-55;
       height: 12px;
       width: 12px;
     }
@@ -90,7 +90,7 @@
 
     &.stroke svg {
       fill: none;
-      stroke: $grey-50;
+      stroke: $grey-55;
     }
 
     &.settings svg {
@@ -143,11 +143,11 @@
 
   &.null {
     background: $grey-90;
-    color: $grey-50;
+    color: $grey-55;
 
     &:hover {
       background: $grey-70;
-      color: $grey-10;
+      color: $grey-15;
     }
   }
 
diff --git a/components/CharLimitedFieldset/index.scss b/components/CharLimitedFieldset/index.scss
index da0a29ac..dc9eb4a5 100644
--- a/components/CharLimitedFieldset/index.scss
+++ b/components/CharLimitedFieldset/index.scss
@@ -17,7 +17,7 @@
   }
 
   .Counter {
-    color: $grey-50;
+    color: $grey-55;
     font-weight: $bold;
     line-height: 42px;
   }
diff --git a/components/CharacterConflictModal/index.scss b/components/CharacterConflictModal/index.scss
index 48176c81..866ec8f7 100644
--- a/components/CharacterConflictModal/index.scss
+++ b/components/CharacterConflictModal/index.scss
@@ -8,7 +8,7 @@
   }
 
   .arrow {
-    color: $grey-50;
+    color: $grey-55;
     font-size: 4rem;
     text-align: center;
   }
@@ -52,7 +52,7 @@
 
       &:not(.btn-disabled) {
         background: $grey-90;
-        color: $grey-40;
+        color: $grey-50;
 
         &:hover {
           background: $grey-80;
diff --git a/components/ElementToggle/index.scss b/components/ElementToggle/index.scss
index 11517faa..66b60813 100644
--- a/components/ElementToggle/index.scss
+++ b/components/ElementToggle/index.scss
@@ -12,7 +12,7 @@
     background: $grey-100;
     border: none;
     border-radius: 18px;
-    color: $grey-40;
+    color: $grey-50;
     flex-grow: 1;
     font-size: $font-regular;
     padding: ($unit) $unit * 2;
@@ -29,7 +29,7 @@
     &:hover,
     &[data-state='on'] {
       background: $grey-80;
-      color: $grey-10;
+      color: $grey-15;
 
       &.fire {
         background: $fire-bg-20;
diff --git a/components/FilterBar/index.scss b/components/FilterBar/index.scss
index 60204302..9098df3c 100644
--- a/components/FilterBar/index.scss
+++ b/components/FilterBar/index.scss
@@ -31,7 +31,7 @@
     // background-position-y: center;
     // background-position-x: 95%;
     // background-size: $unit * 1.5;
-    color: $grey-50;
+    color: $grey-55;
     font-size: $font-small;
     margin: 0;
     max-width: 200px;
diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss
index 436182c9..1905d603 100644
--- a/components/GridRep/index.scss
+++ b/components/GridRep/index.scss
@@ -109,7 +109,7 @@
     .raid,
     .user,
     time {
-      color: $grey-50;
+      color: $grey-55;
       font-size: $font-small;
     }
 
diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss
index 538936e6..1cc4cbb1 100644
--- a/components/HeaderMenu/index.scss
+++ b/components/HeaderMenu/index.scss
@@ -9,16 +9,16 @@
 }
 
 .MenuItem {
-  color: $grey-40;
+  color: $grey-50;
   font-weight: $normal;
 
   &:hover:not(.disabled) {
     background: $grey-95;
-    color: $grey-10;
+    color: $grey-15;
     cursor: pointer;
 
     a {
-      color: $grey-10;
+      color: $grey-15;
     }
   }
 
@@ -95,7 +95,7 @@
   }
 
   a {
-    color: $grey-40;
+    color: $grey-50;
   }
 
   & > a,
diff --git a/components/JobDropdown/index.scss b/components/JobDropdown/index.scss
index e69de29b..35cec4d9 100644
--- a/components/JobDropdown/index.scss
+++ b/components/JobDropdown/index.scss
@@ -0,0 +1,3 @@
+.Job.SelectTrigger {
+  margin-bottom: $unit;
+}
diff --git a/components/JobDropdown/index.tsx b/components/JobDropdown/index.tsx
index 111b2950..3b1d468c 100644
--- a/components/JobDropdown/index.tsx
+++ b/components/JobDropdown/index.tsx
@@ -2,6 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useSnapshot } from 'valtio'
 
+import Select from '~components/Select'
+import SelectItem from '~components/SelectItem'
+import SelectGroup from '~components/SelectGroup'
+
 import { appState } from '~utils/appState'
 import { jobGroups } from '~utils/jobGroups'
 
@@ -26,6 +30,7 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
     const { party } = useSnapshot(appState)
 
     // Set up local states for storing jobs
+    const [open, setOpen] = useState(false)
     const [currentJob, setCurrentJob] = useState<Job>()
     const [jobs, setJobs] = useState<Job[]>()
     const [sortedJobs, setSortedJobs] = useState<GroupedJob>()
@@ -58,10 +63,14 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
       }
     }, [appState, props.currentJob])
 
+    function openJobSelect() {
+      setOpen(!open)
+    }
+
     // Enable changing select value
-    function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
+    function handleChange(value: string) {
       if (jobs) {
-        const job = jobs.find((job) => job.id === event.target.value)
+        const job = jobs.find((job) => job.id === value)
         if (props.onChange) props.onChange(job)
         setCurrentJob(job)
       }
@@ -76,36 +85,37 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
           .sort((a, b) => a.order - b.order)
           .map((item, i) => {
             return (
-              <option key={i} value={item.id}>
+              <SelectItem key={i} value={item.id}>
                 {item.name[locale]}
-              </option>
+              </SelectItem>
             )
           })
 
       const groupName = jobGroups.find((g) => g.slug === group)?.name[locale]
 
       return (
-        <optgroup key={group} label={groupName}>
+        <SelectGroup key={group} label={groupName} separator={false}>
           {options}
-        </optgroup>
+        </SelectGroup>
       )
     }
 
     return (
-      <select
-        key={currentJob ? currentJob.id : -1}
-        value={currentJob ? currentJob.id : -1}
-        onBlur={props.onBlur}
+      <Select
+        trigger={'Select a class...'}
+        placeholder={'Select a class...'}
+        open={open}
+        onClick={openJobSelect}
         onChange={handleChange}
-        ref={ref}
+        triggerClass="Job"
       >
-        <option key="no-job" value={-1}>
+        <SelectItem key={-1} value="no-job">
           No class
-        </option>
+        </SelectItem>
         {sortedJobs
           ? Object.keys(sortedJobs).map((x) => renderJobGroup(x))
           : ''}
-      </select>
+      </Select>
     )
   }
 )
diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss
index 2d9adc9a..dfd34109 100644
--- a/components/JobSection/index.scss
+++ b/components/JobSection/index.scss
@@ -28,7 +28,7 @@
   }
 
   .JobImage {
-    $height: 249px;
+    $height: 252px;
     $width: 447px;
 
     background: url('/images/background_a.jpg');
diff --git a/components/JobSkillItem/index.scss b/components/JobSkillItem/index.scss
index 22697fab..0203afe3 100644
--- a/components/JobSkillItem/index.scss
+++ b/components/JobSkillItem/index.scss
@@ -44,7 +44,11 @@
     }
   }
 
-  p.placeholder {
-    color: var(--text-secondary);
+  p {
+    color: var(--text-primary);
+
+    &.placeholder {
+      color: var(--text-secondary);
+    }
   }
 }
diff --git a/components/JobSkillResult/index.scss b/components/JobSkillResult/index.scss
index 3dd464c8..2d72fb40 100644
--- a/components/JobSkillResult/index.scss
+++ b/components/JobSkillResult/index.scss
@@ -23,7 +23,7 @@
     .skill.pill {
       background: $grey-90;
       border-radius: $unit * 2;
-      color: $grey-10;
+      color: $grey-15;
       display: inline;
       font-size: $font-tiny;
       font-weight: $medium;
diff --git a/components/LoginModal/index.scss b/components/LoginModal/index.scss
index d6174992..e73b400d 100644
--- a/components/LoginModal/index.scss
+++ b/components/LoginModal/index.scss
@@ -17,7 +17,7 @@
 
     &:not(.btn-disabled) {
       background: $grey-90;
-      color: $grey-40;
+      color: $grey-50;
 
       &:hover {
         background: $grey-80;
diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx
index 50ca41ee..95a1b145 100644
--- a/components/RaidDropdown/index.tsx
+++ b/components/RaidDropdown/index.tsx
@@ -4,7 +4,6 @@ import { useRouter } from 'next/router'
 import Select from '~components/Select'
 import SelectItem from '~components/SelectItem'
 import SelectGroup from '~components/SelectGroup'
-import { SelectSeparator } from '@radix-ui/react-select'
 
 import api from '~utils/api'
 import { appState } from '~utils/appState'
@@ -131,7 +130,7 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(
     return (
       <Select
         trigger={'Select a raid...'}
-        placeholder={'Select a raid'}
+        placeholder={'Select a raid...'}
         open={open}
         onClick={openRaidSelect}
         onChange={handleChange}
diff --git a/components/SearchFilter/index.scss b/components/SearchFilter/index.scss
index ac71b595..b625bb65 100644
--- a/components/SearchFilter/index.scss
+++ b/components/SearchFilter/index.scss
@@ -3,7 +3,7 @@
   background: $grey-90;
   border: none;
   border-radius: $unit * 2;
-  color: $grey-40;
+  color: $grey-50;
   display: flex;
   gap: calc($unit / 2);
   flex-direction: row;
@@ -11,7 +11,7 @@
 
   &:hover {
     background: $grey-80;
-    color: $grey-10;
+    color: $grey-15;
     cursor: pointer;
   }
 
diff --git a/components/SearchFilterCheckboxItem/index.scss b/components/SearchFilterCheckboxItem/index.scss
index 800842d9..90e8a8e2 100644
--- a/components/SearchFilterCheckboxItem/index.scss
+++ b/components/SearchFilterCheckboxItem/index.scss
@@ -1,7 +1,7 @@
 .Item {
   align-items: center;
   border-radius: calc($unit / 2);
-  color: $grey-40;
+  color: $grey-50;
   font-size: $font-regular;
   line-height: 1.2;
   min-width: 100px;
@@ -18,7 +18,7 @@
     background: $grey-90;
 
     svg {
-      fill: $grey-50;
+      fill: $grey-55;
     }
   }
 
diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss
index defd700f..05d88831 100644
--- a/components/SearchModal/index.scss
+++ b/components/SearchModal/index.scss
@@ -62,7 +62,7 @@
     h5.total {
       font-size: $font-regular;
       font-weight: $normal;
-      color: $grey-40;
+      color: $grey-50;
       padding: calc($unit / 2) ($unit * 1.5);
     }
 
diff --git a/components/Segment/index.scss b/components/Segment/index.scss
index df2fc4ae..8341cac4 100644
--- a/components/Segment/index.scss
+++ b/components/Segment/index.scss
@@ -1,5 +1,5 @@
 .Segment {
-  color: $grey-50;
+  color: $grey-55;
   cursor: pointer;
   font-size: 1.4rem;
   font-weight: $normal;
diff --git a/components/Select/index.scss b/components/Select/index.scss
index 70db4794..7b837581 100644
--- a/components/Select/index.scss
+++ b/components/Select/index.scss
@@ -33,20 +33,25 @@
 }
 
 .Select {
-  background: var(--card-bg);
+  background: var(--select-bg);
   border-radius: $input-corner;
   border: $hover-stroke;
   box-shadow: $hover-shadow;
   padding: 0 $unit;
-  // position: relative;
-  // max-height: 350px !important;
-  // top: -800px;
-  z-index: 99999;
+  z-index: 40;
 
   .Scroll.Up,
   .Scroll.Down {
     padding: $unit 0;
     text-align: center;
+
+    &:hover svg {
+      fill: var(--icon-secondary-hover);
+    }
+
+    svg {
+      fill: var(--icon-secondary);
+    }
   }
 
   .Scroll.Up {
diff --git a/components/Select/index.tsx b/components/Select/index.tsx
index 3043d942..8bfc66b0 100644
--- a/components/Select/index.tsx
+++ b/components/Select/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
+import classNames from 'classnames'
 
 import ArrowIcon from '~public/icons/Arrow.svg'
 
@@ -13,6 +14,7 @@ interface Props {
   children?: React.ReactNode
   onClick?: () => void
   onChange?: (value: string) => void
+  triggerClass?: string
 }
 
 const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(
@@ -22,7 +24,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(
   return (
     <RadixSelect.Root onValueChange={props.onChange}>
       <RadixSelect.Trigger
-        className="SelectTrigger"
+        className={classNames('SelectTrigger', props.triggerClass)}
         placeholder={props.placeholder}
       >
         <RadixSelect.Value placeholder={props.placeholder} />
diff --git a/components/SelectGroup/index.scss b/components/SelectGroup/index.scss
index 5d9267bb..11d4ee17 100644
--- a/components/SelectGroup/index.scss
+++ b/components/SelectGroup/index.scss
@@ -15,7 +15,7 @@
     }
 
     .Separator {
-      background: var(--item-bg-hover);
+      background: var(--select-separator);
       border-radius: 1px;
       display: block;
       flex-grow: 1;
diff --git a/components/SelectItem/index.scss b/components/SelectItem/index.scss
index 9fa6e240..c4a79378 100644
--- a/components/SelectItem/index.scss
+++ b/components/SelectItem/index.scss
@@ -1,11 +1,22 @@
 .SelectItem {
   border-radius: $item-corner;
+  border: 2px solid transparent;
   color: var(--text-primary);
   font-size: $font-regular;
   padding: ($unit * 1.5) $unit-2x;
 
   &:hover {
-    background-color: var(--item-bg-hover);
+    background-color: var(--option-bg-hover);
     cursor: pointer;
+    outline: none;
+  }
+
+  &:focus {
+    border: 2px solid $blue;
+    outline: none;
+  }
+
+  &:last-child {
+    margin-bottom: $unit;
   }
 }
diff --git a/components/SignupModal/index.scss b/components/SignupModal/index.scss
index 5222385f..4d150173 100644
--- a/components/SignupModal/index.scss
+++ b/components/SignupModal/index.scss
@@ -17,7 +17,7 @@
 
     &:not(.btn-disabled) {
       background: $grey-90;
-      color: $grey-40;
+      color: $grey-50;
 
       &:hover {
         background: $grey-80;
@@ -26,7 +26,7 @@
   }
 
   .terms {
-    color: $grey-40;
+    color: $grey-50;
     font-size: $font-small;
     line-height: 1.2;
     margin-top: $unit;
diff --git a/components/SummonGrid/index.scss b/components/SummonGrid/index.scss
index a43a0cd2..88827936 100644
--- a/components/SummonGrid/index.scss
+++ b/components/SummonGrid/index.scss
@@ -5,7 +5,7 @@
   justify-content: center;
 
   & .Label {
-    color: $grey-50;
+    color: $grey-55;
     font-size: $font-tiny;
     font-weight: $medium;
     margin-bottom: $unit;
diff --git a/components/WeaponModal/index.scss b/components/WeaponModal/index.scss
index 12de759a..a71a19d9 100644
--- a/components/WeaponModal/index.scss
+++ b/components/WeaponModal/index.scss
@@ -10,7 +10,7 @@
       gap: calc($unit / 2);
 
       h3 {
-        color: $grey-50;
+        color: $grey-55;
         font-size: $font-small;
         margin-bottom: $unit;
       }
@@ -33,7 +33,7 @@
 
       &:not(.btn-disabled) {
         background: $grey-90;
-        color: $grey-40;
+        color: $grey-50;
 
         &:hover {
           background: $grey-80;
diff --git a/styles/globals.scss b/styles/globals.scss
index 48852000..e30ce601 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -69,7 +69,7 @@ h1,
 h2,
 h3,
 p {
-  color: $grey-10;
+  color: $grey-15;
 }
 
 h1 {
@@ -88,7 +88,7 @@ select {
   background-size: $unit * 1.5;
   border: none;
   border-radius: 6px;
-  color: $grey-10;
+  color: $grey-15;
   margin-bottom: $unit;
   font-size: $font-regular;
   padding: 0 ($unit * 2);
@@ -156,7 +156,7 @@ select {
       gap: $unit;
 
       p {
-        color: $grey-40;
+        color: $grey-50;
         font-size: $font-small;
         line-height: 1.25;
       }
@@ -175,7 +175,7 @@ select {
     }
 
     svg {
-      fill: $grey-40;
+      fill: $grey-50;
       float: right;
       height: 24px;
       width: 24px;
@@ -194,7 +194,7 @@ select {
     gap: calc($unit / 2);
 
     .SubTitle {
-      color: $grey-50;
+      color: $grey-55;
       font-size: $font-small;
       font-weight: $medium;
     }
diff --git a/styles/themes.scss b/styles/themes.scss
index bcef7ba3..5f3d2403 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -12,7 +12,9 @@
   --input-bound-bg: #{$input--bound--bg--light};
   --input-bound-bg-hover: #{$input--bound--bg--light--hover};
 
-  --item-bg-hover: #{$item--bg--light--hover};
+  --select-bg: #{$select--bg--light};
+  --select-separator: #{$select--separator--light};
+  --option-bg-hover: #{$option--bg--light--hover};
 
   --text-primary: #{$text--primary--color--light};
 
@@ -61,14 +63,16 @@
   --grid-rep-hover: #{$grid--rep--hover--dark};
 
   --card-bg: #{$page--element--bg--dark};
-  --bar-bg: #{$grey-00};
+  --bar-bg: #{$grey-10};
 
   --input-bg: #{$input--bg--dark};
   --input-bg-hover: #{$input--bg--dark--hover};
   --input-bound-bg: #{$input--bound--bg--dark};
   --input-bound-bg-hover: #{$input--bound--bg--dark--hover};
 
-  --item-bg-hover: #{$item--bg--dark--hover};
+  --select-bg: #{$select--bg--dark};
+  --select-separator: #{$select--separator--dark};
+  --option-bg-hover: #{$option--bg--dark--hover};
 
   --text-primary: #{$text--primary--color--dark};
 
diff --git a/styles/variables.scss b/styles/variables.scss
index 32a3c22e..3faa5443 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -22,13 +22,15 @@ $unit-12x: $unit * 12;
 $unit-20x: $unit * 20;
 
 // Colors
-$grey-00: #111;
-$grey-10: #191919;
-$grey-15: #232323;
-$grey-20: #2f2f2f;
-$grey-30: #444;
-$grey-40: #777;
-$grey-50: #888;
+$grey-00: #000;
+$grey-05: #0a0a0a;
+$grey-10: #111;
+$grey-15: #191919;
+$grey-25: #232323;
+$grey-30: #2f2f2f;
+$grey-40: #444;
+$grey-50: #777;
+$grey-55: #888;
 $grey-60: #a9a9a9;
 $grey-70: #c6c6c6;
 $grey-80: #e9e9e9;
@@ -103,36 +105,42 @@ $dark-bg-10: #d565fb;
 $dark-bg-20: #f2cdff;
 
 $page--bg--light: $grey-90;
-$page--bg--dark: $grey-10;
+$page--bg--dark: $grey-15;
 
 $page--hover--light: $grey-90;
-$page--hover--dark: $grey-20;
+$page--hover--dark: $grey-30;
 
 $page--element--bg--light: $grey-70;
-$page--element--bg--dark: $grey-30;
+$page--element--bg--dark: $grey-40;
 
+// Color Definitions: Input
 $input--bg--light: $grey-100;
 $input--bg--light--hover: $grey-95;
-$input--bg--dark: $grey-20;
-$input--bg--dark--hover: $grey-15;
+$input--bg--dark: $grey-40;
+$input--bg--dark--hover: $grey-30;
 
 $input--bound--bg--light: $grey-90;
 $input--bound--bg--light--hover: $grey-80;
-$input--bound--bg--dark: $grey-10;
-$input--bound--bg--dark--hover: $grey-15;
+$input--bound--bg--dark: $grey-15;
+$input--bound--bg--dark--hover: $grey-25;
 
-$item--bg--light--hover: $grey-90;
-$item--bg--dark--hover: $grey-10;
+$select--bg--light: $grey-100;
+$select--bg--dark: $grey-10;
+$select--separator--light: $grey-90;
+$select--separator--dark: $grey-05;
+$option--bg--light--hover: $grey-90;
+$option--bg--dark--hover: $grey-00;
 
 $grid--rep--hover--light: $grey-100;
-$grid--rep--hover--dark: $grey-00;
+$grid--rep--hover--dark: $grey-10;
 
 $grid--border--color--light: $grey-80;
-$grid--border--color--dark: $grey-30;
+$grid--border--color--dark: $grey-40;
 
 $switch--nub--bg--light: $grey-80;
-$switch--nub--bg--dark: $grey-20;
+$switch--nub--bg--dark: $grey-30;
 
+// Color Definitions: Additional Weapons
 $extra--purple--bg--light: $purple-90;
 $extra--purple--card--bg--light: $purple-80;
 $extra--purple--primary--light: $purple-30;
@@ -144,6 +152,7 @@ $extra--purple--primary--dark: $purple-00;
 $extra--purple--secondary--dark: $purple-10;
 $extra--purple--text--dark: $purple-00;
 
+// Color Definitions: Subaura
 $subaura--orange--bg--light: $orange-90;
 $subaura--orange--card--bg--light: $orange-80;
 $subaura--orange--primary--light: $orange-30;
@@ -155,22 +164,25 @@ $subaura--orange--primary--dark: $orange-00;
 $subaura--orange--secondary--dark: $orange-10;
 $subaura--orange--text--dark: $orange-00;
 
-$text--primary--color--light: $grey-30;
+// Color Definitions: Text
+$text--primary--color--light: $grey-40;
 $text--primary--color--dark: $grey-90;
 
-$text--secondary--color--light: $grey-40;
-$text--secondary--hover--light: $grey-30;
-$text--secondary--color--dark: $grey-40;
+$text--secondary--color--light: $grey-50;
+$text--secondary--hover--light: $grey-40;
+$text--secondary--color--dark: $grey-50;
 $text--secondary--hover--dark: $grey-70;
 
+// Color Definitions: Icon
 $icon--secondary--color--light: $grey-70;
-$icon--secondary--color--dark: $grey-40;
-$icon--secondary--hover--light: $grey-40;
+$icon--secondary--color--dark: $grey-50;
+$icon--secondary--hover--light: $grey-50;
 $icon--secondary--hover--dark: $grey-70;
 
 $text--tertiary--color--light: $grey-60;
 $text--tertiary--color--dark: $grey-60;
 
+// Font-weight
 $normal: 400;
 $medium: 500;
 $bold: 600;