diff --git a/components/character/CharacterResult/index.module.scss b/components/character/CharacterResult/index.module.scss
index b247ab9d..1ec8b654 100644
--- a/components/character/CharacterResult/index.module.scss
+++ b/components/character/CharacterResult/index.module.scss
@@ -1,4 +1,4 @@
-.CharacterResult {
+.result {
   border-radius: 6px;
   display: flex;
   gap: $unit;
@@ -8,7 +8,7 @@
     background: var(--button-contained-bg);
     cursor: pointer;
 
-    .Info h5 {
+    .info h5 {
       color: var(--text-primary);
     }
   }
@@ -21,7 +21,7 @@
     width: 120px;
   }
 
-  .Info {
+  .info {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
diff --git a/components/character/CharacterResult/index.tsx b/components/character/CharacterResult/index.tsx
index 7ce1d758..5ef46c6f 100644
--- a/components/character/CharacterResult/index.tsx
+++ b/components/character/CharacterResult/index.tsx
@@ -31,9 +31,9 @@ const CharacterResult = (props: Props) => {
   }
 
   return (
-    <li className="CharacterResult" onClick={props.onClick}>
+    <li className={styles.result} onClick={props.onClick}>
       <img alt={character.name[locale]} src={characterUrl()} />
-      <div className="Info">
+      <div className={styles.info}>
         <h5>{character.name[locale]}</h5>
         <UncapIndicator
           type="character"
@@ -41,7 +41,7 @@ const CharacterResult = (props: Props) => {
           ulb={character.uncap.ulb}
           special={character.special}
         />
-        <div className="tags">
+        <div className={styles.tags}>
           <WeaponLabelIcon labelType={Element[character.element]} />
         </div>
       </div>
diff --git a/components/job/JobSkillResult/index.module.scss b/components/job/JobSkillResult/index.module.scss
index b558483c..d1924c5e 100644
--- a/components/job/JobSkillResult/index.module.scss
+++ b/components/job/JobSkillResult/index.module.scss
@@ -1,4 +1,4 @@
-.JobSkillResult {
+.result {
   border-radius: 6px;
   display: flex;
   gap: $unit;
@@ -9,12 +9,12 @@
     background: var(--button-contained-bg);
     cursor: pointer;
 
-    .Info h5 {
+    .info h5 {
       color: var(--text-primary);
     }
   }
 
-  .Info {
+  .info {
     display: flex;
     flex-direction: row;
     gap: $unit-half;
diff --git a/components/job/JobSkillResult/index.tsx b/components/job/JobSkillResult/index.tsx
index 0259d5aa..2eefa754 100644
--- a/components/job/JobSkillResult/index.tsx
+++ b/components/job/JobSkillResult/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
+import classNames from 'classnames'
 import { SkillGroup, skillClassification } from '~data/skillGroups'
 
 import styles from './index.module.scss'
@@ -22,17 +23,21 @@ const JobSkillResult = (props: Props) => {
     setGroup(skillClassification.find((group) => group.id === skill.color))
   }, [skill, setGroup, skillClassification])
 
+  const classes = classNames({
+    [styles.skill]: true,
+    [styles.pill]: true,
+    [styles[`${group?.name['en'].toLowerCase()}`]]: true,
+  })
+
   const jobSkillUrl = () =>
     `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-skills/${skill.slug}.png`
 
   return (
-    <li className="JobSkillResult" onClick={props.onClick}>
+    <li className={styles.result} onClick={props.onClick}>
       <img alt={skill.name[locale]} src={jobSkillUrl()} />
-      <div className="Info">
+      <div className={styles.info}>
         <h5>{skill.name[locale]}</h5>
-        <div className={`skill pill ${group?.name['en'].toLowerCase()}`}>
-          {group?.name[locale]}
-        </div>
+        <div className={classes}>{group?.name[locale]}</div>
       </div>
     </li>
   )
diff --git a/components/summon/SummonResult/index.module.scss b/components/summon/SummonResult/index.module.scss
index 69de7ce4..cf165364 100644
--- a/components/summon/SummonResult/index.module.scss
+++ b/components/summon/SummonResult/index.module.scss
@@ -1,4 +1,4 @@
-.SummonResult {
+.result {
   border-radius: 6px;
   display: flex;
   gap: $unit;
@@ -8,7 +8,7 @@
     background: var(--button-contained-bg);
     cursor: pointer;
 
-    .Info h5 {
+    .info h5 {
       color: var(--text-primary);
     }
   }
@@ -21,7 +21,7 @@
     width: 120px;
   }
 
-  .Info {
+  .info {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
diff --git a/components/summon/SummonResult/index.tsx b/components/summon/SummonResult/index.tsx
index bba985d1..1361c28a 100644
--- a/components/summon/SummonResult/index.tsx
+++ b/components/summon/SummonResult/index.tsx
@@ -21,12 +21,12 @@ const SummonResult = (props: Props) => {
   const summon = props.data
 
   return (
-    <li className="SummonResult" onClick={props.onClick}>
+    <li className={styles.result} onClick={props.onClick}>
       <img
         alt={summon.name[locale]}
         src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}.jpg`}
       />
-      <div className="Info">
+      <div className={styles.info}>
         <h5>{summon.name[locale]}</h5>
         <UncapIndicator
           type="summon"
@@ -34,7 +34,7 @@ const SummonResult = (props: Props) => {
           ulb={summon.uncap.ulb}
           special={false}
         />
-        <div className="tags">
+        <div className={styles.tags}>
           <WeaponLabelIcon labelType={Element[summon.element]} />
         </div>
       </div>
diff --git a/components/weapon/WeaponResult/index.module.scss b/components/weapon/WeaponResult/index.module.scss
index c67efcc9..7a6f53c9 100644
--- a/components/weapon/WeaponResult/index.module.scss
+++ b/components/weapon/WeaponResult/index.module.scss
@@ -1,4 +1,4 @@
-.WeaponResult {
+.result {
   border-radius: 6px;
   display: flex;
   gap: $unit;
@@ -8,7 +8,7 @@
     background: var(--button-contained-bg);
     cursor: pointer;
 
-    .Info h5 {
+    .info h5 {
       color: var(--text-primary);
     }
   }
@@ -21,7 +21,7 @@
     width: 120px;
   }
 
-  .Info {
+  .info {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -32,6 +32,7 @@
       display: inline-block;
       font-size: $font-medium;
       font-weight: $medium;
+      opacity: 1;
     }
 
     .UncapIndicator {
diff --git a/components/weapon/WeaponResult/index.tsx b/components/weapon/WeaponResult/index.tsx
index 23a30363..9506a952 100644
--- a/components/weapon/WeaponResult/index.tsx
+++ b/components/weapon/WeaponResult/index.tsx
@@ -33,12 +33,12 @@ const WeaponResult = (props: Props) => {
   const weapon = props.data
 
   return (
-    <li className="WeaponResult" onClick={props.onClick}>
+    <li className={styles.result} onClick={props.onClick}>
       <img
         alt={weapon.name[locale]}
         src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`}
       />
-      <div className="Info">
+      <div className={styles.info}>
         <h5>{weapon.name[locale]}</h5>
         <UncapIndicator
           type="weapon"
@@ -46,7 +46,7 @@ const WeaponResult = (props: Props) => {
           ulb={weapon.uncap.ulb}
           special={false}
         />
-        <div className="tags">
+        <div className={styles.tags}>
           <WeaponLabelIcon labelType={Element[weapon.element]} />
           <WeaponLabelIcon labelType={Proficiency[weapon.proficiency]} />
         </div>