diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss
index 06a0ecae..e2f2736d 100644
--- a/components/CharacterUnit/index.scss
+++ b/components/CharacterUnit/index.scss
@@ -27,7 +27,7 @@
   }
 
   h3 {
-    color: var(--text-secondary);
+    color: var(--text-primary);
     font-size: $font-regular;
     font-weight: $normal;
     line-height: 1.1;
diff --git a/components/JobSkillItem/index.scss b/components/JobSkillItem/index.scss
index fd846821..22697fab 100644
--- a/components/JobSkillItem/index.scss
+++ b/components/JobSkillItem/index.scss
@@ -15,13 +15,17 @@
     }
 
     & p.placeholder {
-      color: $grey-30;
+      color: var(--text-secondary-hover);
+    }
+
+    & svg {
+      fill: var(--icon-secondary-hover);
     }
   }
 
   & > img,
   & > div.placeholder {
-    background: white;
+    background: var(--card-bg);
     border-radius: calc($unit / 2);
     border: 1px solid rgba(0, 0, 0, 0);
     width: $unit * 5;
@@ -34,13 +38,13 @@
     justify-content: center;
 
     & > svg {
-      fill: $grey-60;
+      fill: var(--icon-secondary);
       width: $unit * 2;
       height: $unit * 2;
     }
   }
 
   p.placeholder {
-    color: $grey-50;
+    color: var(--text-secondary);
   }
 }
diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss
index 15b9ae87..afd9840f 100644
--- a/components/SummonUnit/index.scss
+++ b/components/SummonUnit/index.scss
@@ -91,7 +91,7 @@
   }
 
   h3 {
-    color: var(--text-secondary);
+    color: var(--text-primary);
     font-size: $font-regular;
     font-weight: $normal;
     line-height: 1.1;
diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index f97c5017..357d386d 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -82,7 +82,7 @@
   }
 
   h3 {
-    color: var(--text-secondary);
+    color: var(--text-primary);
     font-size: $font-button;
     font-weight: $normal;
     line-height: 1.1;
diff --git a/styles/themes.scss b/styles/themes.scss
index 9f811b5e..07e0cd94 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -4,7 +4,9 @@
   --card-bg: white;
 
   --text-primary: #{$text--primary--color--light};
+
   --text-secondary: #{$text--secondary--color--light};
+  --text-secondary-hover: #{$text--secondary--hover--light};
 
   --icon-secondary: #{$icon--secondary--color--light};
   --icon-secondary-hover: #{$icon--secondary--hover--light};
@@ -30,7 +32,9 @@
   --card-bg: #{$page--element--bg--dark};
 
   --text-primary: #{$text--primary--color--dark};
+
   --text-secondary: #{$text--secondary--color--dark};
+  --text-secondary-hover: #{$text--secondary--hover--dark};
 
   --icon-secondary: #{$icon--secondary--color--dark};
   --icon-secondary-hover: #{$icon--secondary--hover--dark};
diff --git a/styles/variables.scss b/styles/variables.scss
index a2858f30..826a9662 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -39,8 +39,10 @@ $switch--nub--bg--dark: $grey-15;
 $text--primary--color--light: $grey-20;
 $text--primary--color--dark: $grey-90;
 
-$text--secondary--color--light: $grey-10;
-$text--secondary--color--dark: $grey-70;
+$text--secondary--color--light: $grey-40;
+$text--secondary--hover--light: $grey-20;
+$text--secondary--color--dark: $grey-40;
+$text--secondary--hover--dark: $grey-70;
 
 $icon--secondary--color--light: $grey-70;
 $icon--secondary--color--dark: $grey-40;