diff --git a/src/components/CharacterGrid/index.css b/src/components/CharacterGrid/index.scss
similarity index 95%
rename from src/components/CharacterGrid/index.css
rename to src/components/CharacterGrid/index.scss
index 74ae5816..c2bb63fc 100644
--- a/src/components/CharacterGrid/index.css
+++ b/src/components/CharacterGrid/index.scss
@@ -9,7 +9,7 @@
     flex-wrap: wrap;
     margin: 0;
     padding: 0;
-    width: 752px;
+    width: 761px;
 }
 
 #grid_characters > * {
diff --git a/src/components/CharacterGrid/index.tsx b/src/components/CharacterGrid/index.tsx
index cb2d3eb3..cb19fcb9 100644
--- a/src/components/CharacterGrid/index.tsx
+++ b/src/components/CharacterGrid/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import CharacterUnit from '~components/CharacterUnit'
 
-import './index.css'
+import './index.scss'
 
 export enum GridType {
     Class,
diff --git a/src/components/CharacterResult/index.css b/src/components/CharacterResult/index.scss
similarity index 100%
rename from src/components/CharacterResult/index.css
rename to src/components/CharacterResult/index.scss
diff --git a/src/components/CharacterResult/index.tsx b/src/components/CharacterResult/index.tsx
index 8126f452..c83a506e 100644
--- a/src/components/CharacterResult/index.tsx
+++ b/src/components/CharacterResult/index.tsx
@@ -3,7 +3,7 @@ import WeaponLabelIcon from '~components/WeaponLabelIcon'
 
 import images from '../../images/chara-grid/*.jpg'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     data: Character
diff --git a/src/components/CharacterUnit/index.css b/src/components/CharacterUnit/index.scss
similarity index 96%
rename from src/components/CharacterUnit/index.css
rename to src/components/CharacterUnit/index.scss
index 84d2cd64..feca9dc0 100644
--- a/src/components/CharacterUnit/index.css
+++ b/src/components/CharacterUnit/index.scss
@@ -56,10 +56,13 @@
 
 .CharacterImage .icon {
     position: absolute;
-    color: #c9c9c9;
     height: 20px;
     width: 20px;
     z-index: 1;
+
+    svg {
+        fill: #c9c9c9;
+    }
 }
 
 .CharacterImage:hover .icon {
diff --git a/src/components/CharacterUnit/index.tsx b/src/components/CharacterUnit/index.tsx
index e0ca2abf..253aa9c7 100644
--- a/src/components/CharacterUnit/index.tsx
+++ b/src/components/CharacterUnit/index.tsx
@@ -5,7 +5,7 @@ import { useModal as useModal } from '~utils/useModal'
 import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
 
-import './index.css'
+import './index.scss'
 
 import images from '../../images/chara-main/*.jpg'
 import Plus from '../../../assets/plus.svg'
diff --git a/src/components/Header/index.css b/src/components/Header/index.scss
similarity index 100%
rename from src/components/Header/index.css
rename to src/components/Header/index.scss
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 12985aa1..b84df4bb 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -5,7 +5,7 @@ import { useCookies } from 'react-cookie'
 import Button from '~components/Button'
 import HeaderMenu from '~components/HeaderMenu'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     navigate: (pathname: string) => void
diff --git a/src/components/WeaponGrid/index.css b/src/components/WeaponGrid/index.scss
similarity index 100%
rename from src/components/WeaponGrid/index.css
rename to src/components/WeaponGrid/index.scss
diff --git a/src/components/WeaponGrid/index.tsx b/src/components/WeaponGrid/index.tsx
index c9fe3e0f..a9b5cd88 100644
--- a/src/components/WeaponGrid/index.tsx
+++ b/src/components/WeaponGrid/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import WeaponUnit from '~components/WeaponUnit'
 
-import './index.css'
+import './index.scss'
 
 // GridType
 export enum GridType {
diff --git a/src/components/WeaponUnit/index.css b/src/components/WeaponUnit/index.scss
similarity index 97%
rename from src/components/WeaponUnit/index.css
rename to src/components/WeaponUnit/index.scss
index 57d53fa9..92766685 100644
--- a/src/components/WeaponUnit/index.css
+++ b/src/components/WeaponUnit/index.scss
@@ -51,10 +51,13 @@
 
 .WeaponImage .icon {
     position: absolute;
-    color: #c9c9c9;
     height: 20px;
     width: 20px;
     z-index: 1;
+
+    svg {
+        fill: #c9c9c9;
+    }
 }
 
 .WeaponImage:hover .icon {
diff --git a/src/components/WeaponUnit/index.tsx b/src/components/WeaponUnit/index.tsx
index 1799028a..2790276f 100644
--- a/src/components/WeaponUnit/index.tsx
+++ b/src/components/WeaponUnit/index.tsx
@@ -9,7 +9,7 @@ import mainImages from '../../images/weapon-main/*.jpg'
 import gridImages from '../../images/weapon-grid/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     onReceiveData: (weapon: Weapon, position: number) => void