diff --git a/components/character/CharacterUnit/index.module.scss b/components/character/CharacterUnit/index.module.scss
index 5eca6149..c968bc1c 100644
--- a/components/character/CharacterUnit/index.module.scss
+++ b/components/character/CharacterUnit/index.module.scss
@@ -1,4 +1,4 @@
-.CharacterUnit {
+.unit {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -8,7 +8,7 @@
   position: relative;
   margin-bottom: $unit * 4;
 
-  &.editable .CharacterImage:hover {
+  &.editable .image:hover {
     border: $hover-stroke;
     box-shadow: $hover-shadow;
     cursor: pointer;
@@ -60,7 +60,7 @@
     z-index: 2;
   }
 
-  .CharacterImage {
+  .image {
     aspect-ratio: 131 / 273;
     background: var(--card-bg);
     border: 1px solid rgba(0, 0, 0, 0);
@@ -92,7 +92,7 @@
     }
   }
 
-  .CharacterName {
+  .name {
     @include breakpoint(phone) {
       font-size: $font-tiny;
     }
@@ -102,7 +102,7 @@
     opacity: 1;
   }
 
-  .Perpetuity {
+  .perpetuity {
     position: absolute;
     background-image: url('/icons/perpetuity/filled.svg');
     background-size: $unit-4x $unit-4x;
@@ -118,7 +118,7 @@
       cursor: pointer;
     }
 
-    &.Empty {
+    &.empty {
       background-image: url('/icons/perpetuity/empty.svg');
       opacity: 0;
 
diff --git a/components/character/CharacterUnit/index.tsx b/components/character/CharacterUnit/index.tsx
index e4c00ebb..530e1b8f 100644
--- a/components/character/CharacterUnit/index.tsx
+++ b/components/character/CharacterUnit/index.tsx
@@ -72,14 +72,14 @@ const CharacterUnit = ({
 
   // Classes
   const classes = classNames({
-    CharacterUnit: true,
-    editable: editable,
-    filled: gridCharacter !== undefined,
+    [styles.unit]: true,
+    [styles.editable]: editable,
+    [styles.filled]: gridCharacter !== undefined,
   })
 
   const buttonClasses = classNames({
-    Options: true,
-    Clicked: contextMenuOpen,
+    options: true,
+    clicked: contextMenuOpen,
   })
 
   // Other
@@ -278,8 +278,8 @@ const CharacterUnit = ({
   const perpetuity = () => {
     if (gridCharacter) {
       const classes = classNames({
-        Perpetuity: true,
-        Empty: !gridCharacter.perpetuity,
+        [styles.perpetuity]: true,
+        [styles.empty]: !gridCharacter.perpetuity,
       })
 
       return <i className={classes} onClick={handlePerpetuityClick} />
@@ -297,13 +297,13 @@ const CharacterUnit = ({
 
     const content = (
       <div
-        className="CharacterImage"
+        className={styles.image}
         tabIndex={gridCharacter ? gridCharacter.position * 7 : 0}
         onClick={openSearchModal}
       >
         {image}
         {editable ? (
-          <span className="icon">
+          <span className={styles.icon}>
             <PlusIcon />
           </span>
         ) : (
@@ -346,7 +346,7 @@ const CharacterUnit = ({
         ) : (
           ''
         )}
-        <h3 className="CharacterName">{character?.name[locale]}</h3>
+        <h3 className={styles.name}>{character?.name[locale]}</h3>
       </div>
       {searchModal()}
     </>
diff --git a/components/summon/SummonUnit/index.module.scss b/components/summon/SummonUnit/index.module.scss
index ac8be29e..798f99ec 100644
--- a/components/summon/SummonUnit/index.module.scss
+++ b/components/summon/SummonUnit/index.module.scss
@@ -1,4 +1,4 @@
-.SummonUnit {
+.unit {
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -26,7 +26,7 @@
       min-height: 15.9vw;
     }
 
-    .SummonImage {
+    .image {
       list-style-type: none;
       width: 100%;
     }
@@ -36,19 +36,19 @@
     margin-right: 0;
   }
 
-  &.main.editable .SummonImage:hover,
-  &.friend.editable .SummonImage:hover {
+  &.main.editable .image:hover,
+  &.friend.editable .image:hover {
     transform: $scale-tall;
   }
 
-  &.editable .SummonImage:hover {
+  &.editable .image:hover {
     border: $hover-stroke;
     box-shadow: $hover-shadow;
     cursor: pointer;
     transform: $scale-wide;
   }
 
-  .SummonImage {
+  .image {
     background: var(--card-bg);
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: $unit;
@@ -75,7 +75,7 @@
     }
   }
 
-  .SummonName {
+  .name {
     @include breakpoint(phone) {
       font-size: $font-tiny;
     }
@@ -113,11 +113,11 @@
     }
   }
 
-  &:hover .QuickSummon.Empty {
+  &:hover .quickSummon.empty {
     opacity: 1;
   }
 
-  &.main .QuickSummon {
+  &.main .quickSummon {
     $diameter: $unit-6x;
     background-size: $diameter $diameter;
     top: -2%;
@@ -126,11 +126,11 @@
     height: $diameter;
   }
 
-  &.friend .QuickSummon {
+  &.friend .quickSummon {
     display: none;
   }
 
-  &.grid .QuickSummon {
+  &.grid .quickSummon {
     $diameter: $unit-5x;
     background-size: $diameter $diameter;
     top: -5%;
@@ -139,7 +139,7 @@
     height: $diameter;
   }
 
-  .QuickSummon {
+  .quickSummon {
     position: absolute;
     background-image: url('/icons/quick_summon/filled.svg');
     z-index: 20;
@@ -150,7 +150,7 @@
       cursor: pointer;
     }
 
-    &.Empty {
+    &.empty {
       background-image: url('/icons/quick_summon/empty.svg');
       opacity: 0;
 
diff --git a/components/summon/SummonUnit/index.tsx b/components/summon/SummonUnit/index.tsx
index a88dc8de..fd7db373 100644
--- a/components/summon/SummonUnit/index.tsx
+++ b/components/summon/SummonUnit/index.tsx
@@ -62,17 +62,17 @@ const SummonUnit = ({
 
   // Classes
   const classes = classNames({
-    SummonUnit: true,
-    main: unitType == 0,
-    grid: unitType == 1,
-    friend: unitType == 2,
-    editable: editable,
-    filled: gridSummon !== undefined,
+    [styles.unit]: true,
+    [styles.main]: unitType == 0,
+    [styles.grid]: unitType == 1,
+    [styles.friend]: unitType == 2,
+    [styles.editable]: editable,
+    [styles.filled]: gridSummon !== undefined,
   })
 
   const buttonClasses = classNames({
-    Options: true,
-    Clicked: contextMenuOpen,
+    options: true,
+    clicked: contextMenuOpen,
   })
 
   // Other
@@ -273,8 +273,8 @@ const SummonUnit = ({
   const quickSummon = () => {
     if (gridSummon) {
       const classes = classNames({
-        QuickSummon: true,
-        Empty: !gridSummon.quick_summon,
+        [styles.quickSummon]: true,
+        [styles.empty]: !gridSummon.quick_summon,
       })
 
       return <i className={classes} onClick={handleQuickSummonClick} />
@@ -294,10 +294,10 @@ const SummonUnit = ({
     )
 
     const content = (
-      <div className="SummonImage" onClick={openSearchModal}>
+      <div className={styles.image} onClick={openSearchModal}>
         {image}
         {editable ? (
-          <span className="icon">
+          <span className={styles.icon}>
             <PlusIcon />
           </span>
         ) : (
@@ -338,7 +338,7 @@ const SummonUnit = ({
         ) : (
           ''
         )}
-        <h3 className="SummonName">{summon?.name[locale]}</h3>
+        <h3 className={styles.name}>{summon?.name[locale]}</h3>
       </div>
       {searchModal()}
     </>
diff --git a/components/weapon/WeaponUnit/index.module.scss b/components/weapon/WeaponUnit/index.module.scss
index 4a625318..ef4fb273 100644
--- a/components/weapon/WeaponUnit/index.module.scss
+++ b/components/weapon/WeaponUnit/index.module.scss
@@ -1,4 +1,4 @@
-.WeaponUnit {
+.unit {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -65,20 +65,20 @@
     }
   }
 
-  &.grid {
-    .WeaponImage {
+  &.weapon {
+    .image {
       list-style-type: none;
       width: 100%;
       height: auto;
 
-      .Awakening {
+      .awakening {
         width: 30%;
         height: auto;
         top: 14%;
         left: -3.5%;
       }
 
-      .Modifiers > .Skills {
+      .modifiers > .skills {
         bottom: 12%;
         left: -3.5%;
 
@@ -112,7 +112,7 @@
     text-align: center;
   }
 
-  .WeaponImage {
+  .image {
     background: var(--card-bg);
     border: 1px solid rgba(0, 0, 0, 0);
     border-radius: $unit;
@@ -128,14 +128,14 @@
       fill: var(--icon-secondary-hover);
     }
 
-    .Awakening {
+    .awakening {
       width: 100%;
       height: 100%;
       position: absolute;
       z-index: 3;
     }
 
-    .Modifiers {
+    .modifiers {
       display: flex;
       align-items: flex-end;
       width: 100%;
@@ -143,7 +143,7 @@
       position: absolute;
       z-index: 3;
 
-      .Skills {
+      .skills {
         display: flex;
         gap: $unit-fourth;
         justify-content: flex-end;
diff --git a/components/weapon/WeaponUnit/index.tsx b/components/weapon/WeaponUnit/index.tsx
index 391aab96..21690d3c 100644
--- a/components/weapon/WeaponUnit/index.tsx
+++ b/components/weapon/WeaponUnit/index.tsx
@@ -60,12 +60,12 @@ const WeaponUnit = ({
 
   // Classes
   const classes = classNames({
-    WeaponUnit: true,
-    mainhand: unitType == 0,
-    grid: unitType == 1,
-    editable: editable,
-    filled: gridWeapon !== undefined,
-    empty: gridWeapon == undefined,
+    [styles.unit]: true,
+    [styles.mainhand]: unitType == 0,
+    [styles.weapon]: unitType == 1,
+    [styles.editable]: editable,
+    [styles.filled]: gridWeapon !== undefined,
+    [styles.empty]: gridWeapon == undefined,
   })
 
   const buttonClasses = classNames({
@@ -197,7 +197,7 @@ const WeaponUnit = ({
       return (
         <img
           alt={`${awakening.type.name[locale]} Lv${gridWeapon.awakening.level}`}
-          className="Awakening"
+          className={styles.awakening}
           src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/awakening/${gridWeapon.awakening.type.slug}.png`}
         />
       )
@@ -229,7 +229,7 @@ const WeaponUnit = ({
         <img
           alt={altText}
           key={altText}
-          className="Skill"
+          className={styles.skill}
           src={`${baseUrl}${filename}`}
         />
       )
@@ -288,7 +288,7 @@ const WeaponUnit = ({
       <img
         alt={altText}
         key={altText}
-        className="Skill"
+        className={styles.skill}
         src={`${baseUrl}${filename}`}
       />
     )
@@ -362,7 +362,7 @@ const WeaponUnit = ({
         <img
           alt={altText}
           key={altText}
-          className="Skill"
+          className={styles.skill}
           src={`${baseUrl}${filename}`}
         />
       )
@@ -401,7 +401,7 @@ const WeaponUnit = ({
         <img
           alt={altText}
           key={altText}
-          className="Skill"
+          className={styles.skill}
           src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/ax/${axSkill.slug}.png`}
         />
       )
@@ -516,10 +516,10 @@ const WeaponUnit = ({
     )
 
     const content = (
-      <div className="WeaponImage" onClick={openSearchModal}>
-        <div className="Modifiers">
+      <div className={styles.image} onClick={openSearchModal}>
+        <div className={styles.modifiers}>
           {awakeningImage()}
-          <div className="Skills">
+          <div className={styles.skills}>
             {axImages()}
             {telumaImages()}
             {opusImages()}
@@ -528,7 +528,7 @@ const WeaponUnit = ({
         </div>
         {image}
         {editable ? (
-          <span className="icon">
+          <span className={styles.icon}>
             <PlusIcon />
           </span>
         ) : (
@@ -564,7 +564,7 @@ const WeaponUnit = ({
         ) : (
           ''
         )}
-        <h3 className="WeaponName">{weapon?.name[locale]}</h3>
+        <h3 className={styles.name}>{weapon?.name[locale]}</h3>
       </div>
       {searchModal()}
     </>