diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss
index 400e0ee7..a71ff388 100644
--- a/components/CharacterUnit/index.scss
+++ b/components/CharacterUnit/index.scss
@@ -1,12 +1,12 @@
 .CharacterUnit {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: $unit / 2;
     max-width: 200px;
 
     &.editable .CharacterImage:hover {
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+        border: $hover-stroke;
+        box-shadow: $hover-shadow;
         cursor: pointer;
         transform: $scale-tall;
     }
@@ -45,7 +45,7 @@
         aspect-ratio: 131 / 238;
         background: white;
         border: 1px solid rgba(0, 0, 0, 0);
-        border-radius: 8px;
+        border-radius: $unit;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -58,18 +58,18 @@
             width: 17vw;
         }
 
-        &:hover .icon {
-            color: #555;
+        &:hover .icon svg {
+            color: $grey-10;
         }
 
         .icon {
             position: absolute;
-            height: 20px;
-            width: 20px;
+            height: $unit * 3;
+            width: $unit * 3;
             z-index: 1;
         
             svg {
-                fill: #c9c9c9;
+                fill: $grey-70;
             }
         }
     }
diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss
index 1570cec7..5a42c7fc 100644
--- a/components/SummonUnit/index.scss
+++ b/components/SummonUnit/index.scss
@@ -39,44 +39,44 @@
         margin-right: 0;
     }
 
+    &.main.editable .SummonImage:hover,
+    &.friend.editable .SummonImage:hover {
+        transform: $scale-tall;
+    }
+
+    &.editable .SummonImage:hover {
+        border: $hover-stroke;
+        box-shadow: $hover-shadow;
+        cursor: pointer;
+        transform: $scale-wide;
+    }
+
     .SummonImage {
         background: white;
         border: 1px solid rgba(0, 0, 0, 0);
-        border-radius: 8px;
+        border-radius: $unit;
         display: flex;
         align-items: center;
         justify-content: center;
         overflow: hidden;
         transition: all 0.18s ease-in-out;
 
-        &:hover .icon {
-            color: #555;
+        &:hover .icon svg {
+            fill: $grey-10;
         }
 
         .icon {
             position: absolute;
-            height: 20px;
-            width: 20px;
+            height: $unit * 3;
+            width: $unit * 3;
             z-index: 1;
     
             svg {
-                fill: #c9c9c9;
+                fill: $grey-70;
             }
         }
     }
 
-    &.editable .SummonImage:hover {
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
-        cursor: pointer;
-        transform: $scale-wide;
-    }
-
-    &.main.editable .SummonImage:hover,
-    &.friend.editable .SummonImage:hover {
-        transform: $scale-tall;
-    }
-
     &.filled h3 {
         display: block;
     }
diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index 51881421..ea2b8c22 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -4,8 +4,8 @@
     gap: 4px;
 
     &.editable .WeaponImage:hover {
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+        border: $hover-stroke;
+        box-shadow: $hover-shadow;
         cursor: pointer;
         transform: $scale-wide;
     }
@@ -64,22 +64,22 @@
     .WeaponImage {
         background: white;
         border: 1px solid rgba(0, 0, 0, 0);
-        border-radius: 8px;
+        border-radius: $unit;
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-bottom: 2px;
+        margin-bottom: $unit / 4;
         overflow: hidden;
         transition: all 0.18s ease-in-out;
 
-        &:hover .icon {
-            color: #555;
+        &:hover .icon svg {
+            fill: $grey-10;
         }
 
         h3 {
-            color: #333;
+            color: $grey-00;
             font-size: $font-regular;
-            font-weight: 500;
+            font-weight: $medium;
             margin: 0;
             text-align: center;
         }
@@ -92,12 +92,12 @@
 
         .icon {
             position: absolute;
-            height: 20px;
-            width: 20px;
+            height: $unit * 3;
+            width: $unit * 3;
             z-index: 1;
         
             svg {
-                fill: #c9c9c9;
+                fill: $grey-70;
             }
         }
     }
diff --git a/styles/variables.scss b/styles/variables.scss
index b31a354c..b42d44d4 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -34,4 +34,8 @@ $font-xlarge:   24px;
 
 // Scale factors
 $scale-wide: scale(1.05, 1.05);
-$scale-tall: scale(1.012, 1.012);
\ No newline at end of file
+$scale-tall: scale(1.012, 1.012);
+
+// Shadows
+$hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
+$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;
\ No newline at end of file