diff --git a/components/ElementToggle/index.scss b/components/ElementToggle/index.module.scss
similarity index 100%
rename from components/ElementToggle/index.scss
rename to components/ElementToggle/index.module.scss
diff --git a/components/ElementToggle/index.tsx b/components/ElementToggle/index.tsx
index 0748b66f..0e5cefbb 100644
--- a/components/ElementToggle/index.tsx
+++ b/components/ElementToggle/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next'
 
 import * as ToggleGroup from '@radix-ui/react-toggle-group'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   currentElement: number
diff --git a/components/ErrorSection/index.scss b/components/ErrorSection/index.module.scss
similarity index 100%
rename from components/ErrorSection/index.scss
rename to components/ErrorSection/index.module.scss
diff --git a/components/ErrorSection/index.tsx b/components/ErrorSection/index.tsx
index b606c798..c37dc4ae 100644
--- a/components/ErrorSection/index.tsx
+++ b/components/ErrorSection/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next'
 import Button from '~components/common/Button'
 import { ResponseStatus } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   status: ResponseStatus
diff --git a/components/FilterBar/index.scss b/components/FilterBar/index.module.scss
similarity index 100%
rename from components/FilterBar/index.scss
rename to components/FilterBar/index.module.scss
diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx
index 9d69cca8..ccd444f7 100644
--- a/components/FilterBar/index.tsx
+++ b/components/FilterBar/index.tsx
@@ -12,7 +12,7 @@ import { defaultFilterset } from '~utils/defaultFilters'
 
 import FilterIcon from '~public/icons/Filter.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 import { getCookie } from 'cookies-next'
 import RaidCombobox from '~components/raids/RaidCombobox'
 import { appState } from '~utils/appState'
diff --git a/components/FilterModal/index.scss b/components/FilterModal/index.module.scss
similarity index 100%
rename from components/FilterModal/index.scss
rename to components/FilterModal/index.module.scss
diff --git a/components/FilterModal/index.tsx b/components/FilterModal/index.tsx
index 23b65409..4492b717 100644
--- a/components/FilterModal/index.tsx
+++ b/components/FilterModal/index.tsx
@@ -21,7 +21,7 @@ import SelectItem from '~components/common/SelectItem'
 import type { DialogProps } from '@radix-ui/react-dialog'
 
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends DialogProps {
   defaultFilterSet: FilterSet
diff --git a/components/GridRep/index.scss b/components/GridRep/index.module.scss
similarity index 100%
rename from components/GridRep/index.scss
rename to components/GridRep/index.module.scss
diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx
index 6c3bc029..e4f04d35 100644
--- a/components/GridRep/index.tsx
+++ b/components/GridRep/index.tsx
@@ -13,7 +13,7 @@ import Button from '~components/common/Button'
 
 import SaveIcon from '~public/icons/Save.svg'
 import ShieldIcon from '~public/icons/Shield.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   shortcode: string
diff --git a/components/GridRepCollection/index.scss b/components/GridRepCollection/index.module.scss
similarity index 100%
rename from components/GridRepCollection/index.scss
rename to components/GridRepCollection/index.module.scss
diff --git a/components/GridRepCollection/index.tsx b/components/GridRepCollection/index.tsx
index 6780cb79..176dca66 100644
--- a/components/GridRepCollection/index.tsx
+++ b/components/GridRepCollection/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   children: React.ReactNode
diff --git a/components/Header/index.scss b/components/Header/index.module.scss
similarity index 100%
rename from components/Header/index.scss
rename to components/Header/index.module.scss
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 5bd6d940..33627fd8 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -34,7 +34,7 @@ import ChevronIcon from '~public/icons/Chevron.svg'
 import MenuIcon from '~public/icons/Menu.svg'
 import PlusIcon from '~public/icons/Add.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const Header = () => {
   // Localization
diff --git a/components/Layout/index.scss b/components/Layout/index.scss
deleted file mode 100644
index b8403bc0..00000000
--- a/components/Layout/index.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.ToastViewport {
-  position: fixed;
-  bottom: 0px;
-  right: 0px;
-  display: flex;
-  flex-direction: column;
-  width: 340px;
-  max-width: 100vw;
-  z-index: 2147483647;
-  padding: 25px;
-  gap: 10px;
-  margin: 0px;
-  list-style: none;
-  outline: none;
-}
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index 20ffa423..8664c112 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -8,8 +8,6 @@ import { appState } from '~utils/appState'
 import TopHeader from '~components/Header'
 import UpdateToast from '~components/toasts/UpdateToast'
 
-import './index.scss'
-
 interface Props {}
 
 const Layout = ({ children }: PropsWithChildren<Props>) => {
diff --git a/components/RaidSelect/index.scss b/components/RaidSelect/index.module.scss
similarity index 100%
rename from components/RaidSelect/index.scss
rename to components/RaidSelect/index.module.scss
diff --git a/components/RaidSelect/index.tsx b/components/RaidSelect/index.tsx
index 8d114b59..7f3fd28e 100644
--- a/components/RaidSelect/index.tsx
+++ b/components/RaidSelect/index.tsx
@@ -7,7 +7,7 @@ import Overlay from '~components/common/Overlay'
 
 import ChevronIcon from '~public/icons/Chevron.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 import SegmentedControl from '~components/common/SegmentedControl'
 import Segment from '~components/common/Segment'
 import Input from '~components/common/Input'
diff --git a/components/about/AboutPage/index.scss b/components/about/AboutPage/index.module.scss
similarity index 100%
rename from components/about/AboutPage/index.scss
rename to components/about/AboutPage/index.module.scss
diff --git a/components/about/AboutPage/index.tsx b/components/about/AboutPage/index.tsx
index 14307f98..4608ea11 100644
--- a/components/about/AboutPage/index.tsx
+++ b/components/about/AboutPage/index.tsx
@@ -6,7 +6,7 @@ import ShareIcon from '~public/icons/Share.svg'
 import DiscordIcon from '~public/icons/discord.svg'
 import GithubIcon from '~public/icons/github.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {}
 
diff --git a/components/about/ChangelogUnit/index.scss b/components/about/ChangelogUnit/index.module.scss
similarity index 100%
rename from components/about/ChangelogUnit/index.scss
rename to components/about/ChangelogUnit/index.module.scss
diff --git a/components/about/ChangelogUnit/index.tsx b/components/about/ChangelogUnit/index.tsx
index 98fdb87b..5645fd26 100644
--- a/components/about/ChangelogUnit/index.tsx
+++ b/components/about/ChangelogUnit/index.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
 import api from '~utils/api'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   id: string
diff --git a/components/about/ContentUpdate/index.scss b/components/about/ContentUpdate/index.module.scss
similarity index 100%
rename from components/about/ContentUpdate/index.scss
rename to components/about/ContentUpdate/index.module.scss
diff --git a/components/about/ContentUpdate/index.tsx b/components/about/ContentUpdate/index.tsx
index 6506e098..740c2211 100644
--- a/components/about/ContentUpdate/index.tsx
+++ b/components/about/ContentUpdate/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'next-i18next'
 import ChangelogUnit from '~components/about/ChangelogUnit'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface UpdateObject {
   character?: string[]
diff --git a/components/about/RoadmapPage/index.scss b/components/about/RoadmapPage/index.module.scss
similarity index 100%
rename from components/about/RoadmapPage/index.scss
rename to components/about/RoadmapPage/index.module.scss
diff --git a/components/about/RoadmapPage/index.tsx b/components/about/RoadmapPage/index.tsx
index 2b396078..4468c575 100644
--- a/components/about/RoadmapPage/index.tsx
+++ b/components/about/RoadmapPage/index.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'next-i18next'
 import ShareIcon from '~public/icons/Share.svg'
 import GithubIcon from '~public/icons/github.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const ROADMAP_ITEMS = 6
 
diff --git a/components/about/UpdatesPage/index.scss b/components/about/UpdatesPage/index.module.scss
similarity index 100%
rename from components/about/UpdatesPage/index.scss
rename to components/about/UpdatesPage/index.module.scss
diff --git a/components/about/UpdatesPage/index.tsx b/components/about/UpdatesPage/index.tsx
index 10b1061f..a98e8a2b 100644
--- a/components/about/UpdatesPage/index.tsx
+++ b/components/about/UpdatesPage/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next'
 import ContentUpdate from '~components/about/ContentUpdate'
 import ChangelogUnit from '~components/about/ChangelogUnit'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const UpdatesPage = () => {
   const { t: common } = useTranslation('common')
diff --git a/components/auth/AccountModal/index.scss b/components/auth/AccountModal/index.module.scss
similarity index 100%
rename from components/auth/AccountModal/index.scss
rename to components/auth/AccountModal/index.module.scss
diff --git a/components/auth/AccountModal/index.tsx b/components/auth/AccountModal/index.tsx
index 93394c9a..9fc38fc5 100644
--- a/components/auth/AccountModal/index.tsx
+++ b/components/auth/AccountModal/index.tsx
@@ -23,7 +23,7 @@ import { accountState } from '~utils/accountState'
 import { pictureData } from '~utils/pictureData'
 
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 type StateVariables = {
   [key: string]: boolean
diff --git a/components/auth/LoginModal/index.scss b/components/auth/LoginModal/index.module.scss
similarity index 100%
rename from components/auth/LoginModal/index.scss
rename to components/auth/LoginModal/index.module.scss
diff --git a/components/auth/LoginModal/index.tsx b/components/auth/LoginModal/index.tsx
index 49ae2ff2..77fc7c28 100644
--- a/components/auth/LoginModal/index.tsx
+++ b/components/auth/LoginModal/index.tsx
@@ -10,12 +10,12 @@ import { accountState } from '~utils/accountState'
 
 import Button from '~components/common/Button'
 import Input from '~components/common/Input'
-import { Dialog, DialogTrigger, DialogClose } from '~components/common/Dialog'
+import { Dialog, DialogClose } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
 import changeLanguage from '~utils/changeLanguage'
 
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface ErrorMap {
   [index: string]: string
diff --git a/components/auth/SignupModal/index.scss b/components/auth/SignupModal/index.module.scss
similarity index 100%
rename from components/auth/SignupModal/index.scss
rename to components/auth/SignupModal/index.module.scss
diff --git a/components/auth/SignupModal/index.tsx b/components/auth/SignupModal/index.tsx
index 67f24c6f..5cc96dc2 100644
--- a/components/auth/SignupModal/index.tsx
+++ b/components/auth/SignupModal/index.tsx
@@ -10,10 +10,10 @@ import { accountState } from '~utils/accountState'
 
 import Button from '~components/common/Button'
 import Input from '~components/common/Input'
-import { Dialog, DialogTrigger, DialogClose } from '~components/common/Dialog'
+import { Dialog, DialogClose } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   open: boolean
diff --git a/components/character/CharacterConflictModal/index.scss b/components/character/CharacterConflictModal/index.module.scss
similarity index 100%
rename from components/character/CharacterConflictModal/index.scss
rename to components/character/CharacterConflictModal/index.module.scss
diff --git a/components/character/CharacterConflictModal/index.tsx b/components/character/CharacterConflictModal/index.tsx
index 72418460..e0fa7f7f 100644
--- a/components/character/CharacterConflictModal/index.tsx
+++ b/components/character/CharacterConflictModal/index.tsx
@@ -9,7 +9,7 @@ import Overlay from '~components/common/Overlay'
 
 import { appState } from '~utils/appState'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   open: boolean
diff --git a/components/character/CharacterGrid/index.scss b/components/character/CharacterGrid/index.module.scss
similarity index 100%
rename from components/character/CharacterGrid/index.scss
rename to components/character/CharacterGrid/index.module.scss
diff --git a/components/character/CharacterGrid/index.tsx b/components/character/CharacterGrid/index.tsx
index 048ba655..53656f81 100644
--- a/components/character/CharacterGrid/index.tsx
+++ b/components/character/CharacterGrid/index.tsx
@@ -17,7 +17,7 @@ import type { DetailsObject, JobSkillObject, SearchableObject } from '~types'
 import api from '~utils/api'
 import { appState } from '~utils/appState'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/character/CharacterHovercard/index.scss b/components/character/CharacterHovercard/index.module.scss
similarity index 100%
rename from components/character/CharacterHovercard/index.scss
rename to components/character/CharacterHovercard/index.module.scss
diff --git a/components/character/CharacterHovercard/index.tsx b/components/character/CharacterHovercard/index.tsx
index b65d23a2..e0c165a2 100644
--- a/components/character/CharacterHovercard/index.tsx
+++ b/components/character/CharacterHovercard/index.tsx
@@ -18,7 +18,7 @@ import {
 } from '~data/overMastery'
 import { ExtendedMastery } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   gridCharacter: GridCharacter
diff --git a/components/character/CharacterModal/index.scss b/components/character/CharacterModal/index.module.scss
similarity index 100%
rename from components/character/CharacterModal/index.scss
rename to components/character/CharacterModal/index.module.scss
diff --git a/components/character/CharacterModal/index.tsx b/components/character/CharacterModal/index.tsx
index 29568c76..40d5ed75 100644
--- a/components/character/CharacterModal/index.tsx
+++ b/components/character/CharacterModal/index.tsx
@@ -30,7 +30,7 @@ const MAX_AWAKENING_LEVEL = 9
 
 // Styles and icons
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 // Types
 import {
diff --git a/components/character/CharacterResult/index.scss b/components/character/CharacterResult/index.module.scss
similarity index 100%
rename from components/character/CharacterResult/index.scss
rename to components/character/CharacterResult/index.module.scss
diff --git a/components/character/CharacterResult/index.tsx b/components/character/CharacterResult/index.tsx
index e98e3a73..7ce1d758 100644
--- a/components/character/CharacterResult/index.tsx
+++ b/components/character/CharacterResult/index.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import UncapIndicator from '~components/uncap/UncapIndicator'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   data: Character
diff --git a/components/character/CharacterSearchFilterBar/index.scss b/components/character/CharacterSearchFilterBar/index.module.scss
similarity index 100%
rename from components/character/CharacterSearchFilterBar/index.scss
rename to components/character/CharacterSearchFilterBar/index.module.scss
diff --git a/components/character/CharacterSearchFilterBar/index.tsx b/components/character/CharacterSearchFilterBar/index.tsx
index 0f454af5..47697364 100644
--- a/components/character/CharacterSearchFilterBar/index.tsx
+++ b/components/character/CharacterSearchFilterBar/index.tsx
@@ -8,7 +8,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import SearchFilter from '~components/search/SearchFilter'
 import SearchFilterCheckboxItem from '~components/search/SearchFilterCheckboxItem'
 
-import './index.scss'
+import styles from './index.module.scss'
 import {
   emptyElementState,
   emptyProficiencyState,
diff --git a/components/character/CharacterUnit/index.scss b/components/character/CharacterUnit/index.module.scss
similarity index 100%
rename from components/character/CharacterUnit/index.scss
rename to components/character/CharacterUnit/index.module.scss
diff --git a/components/character/CharacterUnit/index.tsx b/components/character/CharacterUnit/index.tsx
index 6b460760..e4c00ebb 100644
--- a/components/character/CharacterUnit/index.tsx
+++ b/components/character/CharacterUnit/index.tsx
@@ -31,7 +31,7 @@ import type {
   SearchableObject,
 } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   gridCharacter?: GridCharacter
diff --git a/components/common/Alert/index.scss b/components/common/Alert/index.module.scss
similarity index 100%
rename from components/common/Alert/index.scss
rename to components/common/Alert/index.module.scss
diff --git a/components/common/Alert/index.tsx b/components/common/Alert/index.tsx
index c6a34b48..5b07ae46 100644
--- a/components/common/Alert/index.tsx
+++ b/components/common/Alert/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import * as AlertDialog from '@radix-ui/react-alert-dialog'
 
-import './index.scss'
+import styles from './index.module.scss'
 import Button from '~components/common/Button'
 import Overlay from '~components/common/Overlay'
 
diff --git a/components/common/Button/index.scss b/components/common/Button/index.module.scss
similarity index 100%
rename from components/common/Button/index.scss
rename to components/common/Button/index.module.scss
diff --git a/components/common/Button/index.tsx b/components/common/Button/index.tsx
index 8594c129..e24f10ee 100644
--- a/components/common/Button/index.tsx
+++ b/components/common/Button/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/common/CharLimitedFieldset/index.scss b/components/common/CharLimitedFieldset/index.module.scss
similarity index 100%
rename from components/common/CharLimitedFieldset/index.scss
rename to components/common/CharLimitedFieldset/index.module.scss
diff --git a/components/common/CharLimitedFieldset/index.tsx b/components/common/CharLimitedFieldset/index.tsx
index 52119c51..36967461 100644
--- a/components/common/CharLimitedFieldset/index.tsx
+++ b/components/common/CharLimitedFieldset/index.tsx
@@ -6,7 +6,7 @@ import React, {
 } from 'react'
 
 import classNames from 'classnames'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends React.HTMLProps<HTMLInputElement> {
   fieldName: string
diff --git a/components/common/Command/index.scss b/components/common/Command/index.module.scss
similarity index 100%
rename from components/common/Command/index.scss
rename to components/common/Command/index.module.scss
diff --git a/components/common/Command/index.tsx b/components/common/Command/index.tsx
index 2f1602bc..17fdc643 100644
--- a/components/common/Command/index.tsx
+++ b/components/common/Command/index.tsx
@@ -5,7 +5,7 @@ import { Command as CommandPrimitive } from 'cmdk'
 import { Dialog } from '../Dialog'
 import { DialogContent, DialogProps } from '@radix-ui/react-dialog'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const Command = forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
diff --git a/components/common/ContextMenu/index.scss b/components/common/ContextMenu/index.module.scss
similarity index 100%
rename from components/common/ContextMenu/index.scss
rename to components/common/ContextMenu/index.module.scss
diff --git a/components/common/ContextMenu/index.tsx b/components/common/ContextMenu/index.tsx
index c3787dd9..4a647001 100644
--- a/components/common/ContextMenu/index.tsx
+++ b/components/common/ContextMenu/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import classNames from 'classnames'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/common/ContextMenuItem/index.scss b/components/common/ContextMenuItem/index.module.scss
similarity index 100%
rename from components/common/ContextMenuItem/index.scss
rename to components/common/ContextMenuItem/index.module.scss
diff --git a/components/common/ContextMenuItem/index.tsx b/components/common/ContextMenuItem/index.tsx
index be1b7ec9..5492c8aa 100644
--- a/components/common/ContextMenuItem/index.tsx
+++ b/components/common/ContextMenuItem/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import classNames from 'classnames'
 import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   className?: string
diff --git a/components/common/Dialog/index.scss b/components/common/Dialog/index.module.scss
similarity index 100%
rename from components/common/Dialog/index.scss
rename to components/common/Dialog/index.module.scss
diff --git a/components/common/Dialog/index.tsx b/components/common/Dialog/index.tsx
index e7010d8e..bda1c12e 100644
--- a/components/common/Dialog/index.tsx
+++ b/components/common/Dialog/index.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useEffect, useState } from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { useLockedBody } from 'usehooks-ts'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends DialogPrimitive.DialogProps {}
 
diff --git a/components/common/DialogContent/index.scss b/components/common/DialogContent/index.module.scss
similarity index 100%
rename from components/common/DialogContent/index.scss
rename to components/common/DialogContent/index.module.scss
diff --git a/components/common/DialogContent/index.tsx b/components/common/DialogContent/index.tsx
index 6bf22156..92ce3b78 100644
--- a/components/common/DialogContent/index.tsx
+++ b/components/common/DialogContent/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import debounce from 'lodash.debounce'
 
 import Overlay from '~components/common/Overlay'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/common/DropdownMenuContent/index.scss b/components/common/DropdownMenuContent/index.module.scss
similarity index 100%
rename from components/common/DropdownMenuContent/index.scss
rename to components/common/DropdownMenuContent/index.module.scss
diff --git a/components/common/DropdownMenuContent/index.tsx b/components/common/DropdownMenuContent/index.tsx
index 37a47f5e..40932820 100644
--- a/components/common/DropdownMenuContent/index.tsx
+++ b/components/common/DropdownMenuContent/index.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends DropdownMenuPrimitive.DropdownMenuContentProps {}
 
diff --git a/components/common/DurationInput/index.scss b/components/common/DurationInput/index.module.scss
similarity index 100%
rename from components/common/DurationInput/index.scss
rename to components/common/DurationInput/index.module.scss
diff --git a/components/common/DurationInput/index.tsx b/components/common/DurationInput/index.tsx
index 42f11c1b..b3498555 100644
--- a/components/common/DurationInput/index.tsx
+++ b/components/common/DurationInput/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, ChangeEvent, KeyboardEvent } from 'react'
 import classNames from 'classnames'
 
 import Input from '~components/common/Input'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/common/Hovercard/index.scss b/components/common/Hovercard/index.module.scss
similarity index 100%
rename from components/common/Hovercard/index.scss
rename to components/common/Hovercard/index.module.scss
diff --git a/components/common/Hovercard/index.tsx b/components/common/Hovercard/index.tsx
index 3531d059..0f68e43e 100644
--- a/components/common/Hovercard/index.tsx
+++ b/components/common/Hovercard/index.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'
 import classNames from 'classnames'
 
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends HoverCardPrimitive.HoverCardContentProps {}
 
diff --git a/components/common/Input/index.scss b/components/common/Input/index.module.scss
similarity index 100%
rename from components/common/Input/index.scss
rename to components/common/Input/index.module.scss
diff --git a/components/common/Input/index.tsx b/components/common/Input/index.tsx
index 11244306..56659fda 100644
--- a/components/common/Input/index.tsx
+++ b/components/common/Input/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/common/InputTableField/index.scss b/components/common/InputTableField/index.module.scss
similarity index 100%
rename from components/common/InputTableField/index.scss
rename to components/common/InputTableField/index.module.scss
diff --git a/components/common/InputTableField/index.tsx b/components/common/InputTableField/index.tsx
index a043d7ed..deee1e57 100644
--- a/components/common/InputTableField/index.tsx
+++ b/components/common/InputTableField/index.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import Input from '~components/common/Input'
 import TableField from '~components/common/TableField'
 
-import './index.scss'
+import styles from './index.module.scss'
 import classNames from 'classnames'
 
 interface Props
diff --git a/components/common/LabelledInput/index.scss b/components/common/LabelledInput/index.module.scss
similarity index 100%
rename from components/common/LabelledInput/index.scss
rename to components/common/LabelledInput/index.module.scss
diff --git a/components/common/LabelledInput/index.tsx b/components/common/LabelledInput/index.tsx
index 57a6b837..95b201a4 100644
--- a/components/common/LabelledInput/index.tsx
+++ b/components/common/LabelledInput/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/common/Overlay/index.scss b/components/common/Overlay/index.module.scss
similarity index 100%
rename from components/common/Overlay/index.scss
rename to components/common/Overlay/index.module.scss
diff --git a/components/common/Overlay/index.tsx b/components/common/Overlay/index.tsx
index 7cd824b3..1a49d2eb 100644
--- a/components/common/Overlay/index.tsx
+++ b/components/common/Overlay/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   visible: boolean
diff --git a/components/common/PictureSelectItem/index.scss b/components/common/PictureSelectItem/index.module.scss
similarity index 100%
rename from components/common/PictureSelectItem/index.scss
rename to components/common/PictureSelectItem/index.module.scss
diff --git a/components/common/PictureSelectItem/index.tsx b/components/common/PictureSelectItem/index.tsx
index 629a4aa4..0d35edd9 100644
--- a/components/common/PictureSelectItem/index.tsx
+++ b/components/common/PictureSelectItem/index.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react'
 import * as Select from '@radix-ui/react-select'
 
-import './index.scss'
+import styles from './index.module.scss'
 import classNames from 'classnames'
 
 interface Props extends ComponentProps<'div'> {
diff --git a/components/common/Popover/index.scss b/components/common/Popover/index.module.scss
similarity index 100%
rename from components/common/Popover/index.scss
rename to components/common/Popover/index.module.scss
diff --git a/components/common/Popover/index.tsx b/components/common/Popover/index.tsx
index 83265154..ec84c199 100644
--- a/components/common/Popover/index.tsx
+++ b/components/common/Popover/index.tsx
@@ -10,7 +10,7 @@ import classNames from 'classnames'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import ChevronIcon from '~public/icons/Chevron.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends ComponentProps<'div'> {
   open: boolean
diff --git a/components/common/PopoverContent/index.scss b/components/common/PopoverContent/index.module.scss
similarity index 100%
rename from components/common/PopoverContent/index.scss
rename to components/common/PopoverContent/index.module.scss
diff --git a/components/common/PopoverContent/index.tsx b/components/common/PopoverContent/index.tsx
index 81873d5c..315d2ae8 100644
--- a/components/common/PopoverContent/index.tsx
+++ b/components/common/PopoverContent/index.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'
 import classnames from 'classnames'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/common/Segment/index.scss b/components/common/Segment/index.module.scss
similarity index 100%
rename from components/common/Segment/index.scss
rename to components/common/Segment/index.module.scss
diff --git a/components/common/Segment/index.tsx b/components/common/Segment/index.tsx
index cfc0b3f6..f975c3dd 100644
--- a/components/common/Segment/index.tsx
+++ b/components/common/Segment/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   groupName: string
diff --git a/components/common/SegmentedControl/index.scss b/components/common/SegmentedControl/index.module.scss
similarity index 100%
rename from components/common/SegmentedControl/index.scss
rename to components/common/SegmentedControl/index.module.scss
diff --git a/components/common/SegmentedControl/index.tsx b/components/common/SegmentedControl/index.tsx
index edb6534f..09467f2b 100644
--- a/components/common/SegmentedControl/index.tsx
+++ b/components/common/SegmentedControl/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import classNames from 'classnames'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   className?: string
diff --git a/components/common/Select/index.scss b/components/common/Select/index.module.scss
similarity index 100%
rename from components/common/Select/index.scss
rename to components/common/Select/index.module.scss
diff --git a/components/common/Select/index.tsx b/components/common/Select/index.tsx
index 74928edd..d9b7144a 100644
--- a/components/common/Select/index.tsx
+++ b/components/common/Select/index.tsx
@@ -6,7 +6,7 @@ import Overlay from '~components/common/Overlay'
 
 import ChevronIcon from '~public/icons/Chevron.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props
diff --git a/components/common/SelectGroup/index.scss b/components/common/SelectGroup/index.module.scss
similarity index 100%
rename from components/common/SelectGroup/index.scss
rename to components/common/SelectGroup/index.module.scss
diff --git a/components/common/SelectGroup/index.tsx b/components/common/SelectGroup/index.tsx
index 6387b720..a41667a5 100644
--- a/components/common/SelectGroup/index.tsx
+++ b/components/common/SelectGroup/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/common/SelectItem/index.scss b/components/common/SelectItem/index.module.scss
similarity index 100%
rename from components/common/SelectItem/index.scss
rename to components/common/SelectItem/index.module.scss
diff --git a/components/common/SelectItem/index.tsx b/components/common/SelectItem/index.tsx
index 79b7ddef..37f85aee 100644
--- a/components/common/SelectItem/index.tsx
+++ b/components/common/SelectItem/index.tsx
@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react'
 import * as Select from '@radix-ui/react-select'
 
-import './index.scss'
+import styles from './index.module.scss'
 import classNames from 'classnames'
 
 interface Props extends ComponentProps<'div'> {
diff --git a/components/common/SelectTableField/index.scss b/components/common/SelectTableField/index.module.scss
similarity index 100%
rename from components/common/SelectTableField/index.scss
rename to components/common/SelectTableField/index.module.scss
diff --git a/components/common/SelectTableField/index.tsx b/components/common/SelectTableField/index.tsx
index 83e88b0e..aa85a7c6 100644
--- a/components/common/SelectTableField/index.tsx
+++ b/components/common/SelectTableField/index.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import Select from '~components/common/Select'
 import TableField from '~components/common/TableField'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   name: string
diff --git a/components/common/SelectWithInput/index.scss b/components/common/SelectWithInput/index.module.scss
similarity index 100%
rename from components/common/SelectWithInput/index.scss
rename to components/common/SelectWithInput/index.module.scss
diff --git a/components/common/SelectWithInput/index.tsx b/components/common/SelectWithInput/index.tsx
index 0e044855..d16c356e 100644
--- a/components/common/SelectWithInput/index.tsx
+++ b/components/common/SelectWithInput/index.tsx
@@ -10,7 +10,7 @@ import Select from '~components/common/Select'
 import SelectItem from '~components/common/SelectItem'
 
 // Styles and icons
-import './index.scss'
+import styles from './index.module.scss'
 
 // Types
 interface Props {
diff --git a/components/common/Slider/index.scss b/components/common/Slider/index.module.scss
similarity index 100%
rename from components/common/Slider/index.scss
rename to components/common/Slider/index.module.scss
diff --git a/components/common/Slider/index.tsx b/components/common/Slider/index.tsx
index 0d4d3651..37a7dd7e 100644
--- a/components/common/Slider/index.tsx
+++ b/components/common/Slider/index.tsx
@@ -3,7 +3,7 @@ import * as SliderPrimitive from '@radix-ui/react-slider'
 import type { SliderProps } from '@radix-ui/react-slider'
 import classNames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {}
 
diff --git a/components/common/SliderTableField/index.scss b/components/common/SliderTableField/index.module.scss
similarity index 100%
rename from components/common/SliderTableField/index.scss
rename to components/common/SliderTableField/index.module.scss
diff --git a/components/common/SliderTableField/index.tsx b/components/common/SliderTableField/index.tsx
index 33673f98..977de6cc 100644
--- a/components/common/SliderTableField/index.tsx
+++ b/components/common/SliderTableField/index.tsx
@@ -3,7 +3,7 @@ import Input from '~components/common/Input'
 import Slider from '~components/common/Slider'
 import TableField from '~components/common/TableField'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   name: string
diff --git a/components/common/Switch/index.scss b/components/common/Switch/index.module.scss
similarity index 100%
rename from components/common/Switch/index.scss
rename to components/common/Switch/index.module.scss
diff --git a/components/common/Switch/index.tsx b/components/common/Switch/index.tsx
index e89a40d3..3f0ccec9 100644
--- a/components/common/Switch/index.tsx
+++ b/components/common/Switch/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import * as RadixSwitch from '@radix-ui/react-switch'
 
 import classNames from 'classnames'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/common/SwitchTableField/index.scss b/components/common/SwitchTableField/index.module.scss
similarity index 100%
rename from components/common/SwitchTableField/index.scss
rename to components/common/SwitchTableField/index.module.scss
diff --git a/components/common/SwitchTableField/index.tsx b/components/common/SwitchTableField/index.tsx
index 2344572d..27994939 100644
--- a/components/common/SwitchTableField/index.tsx
+++ b/components/common/SwitchTableField/index.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import Switch from '~components/common/Switch'
 import TableField from '~components/common/TableField'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   name: string
diff --git a/components/common/TableField/index.scss b/components/common/TableField/index.module.scss
similarity index 100%
rename from components/common/TableField/index.scss
rename to components/common/TableField/index.module.scss
diff --git a/components/common/TableField/index.tsx b/components/common/TableField/index.tsx
index b0d6bb1c..f12eafd3 100644
--- a/components/common/TableField/index.tsx
+++ b/components/common/TableField/index.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   name: string
diff --git a/components/common/TextFieldset/index.scss b/components/common/TextFieldset/index.module.scss
similarity index 100%
rename from components/common/TextFieldset/index.scss
rename to components/common/TextFieldset/index.module.scss
diff --git a/components/common/TextFieldset/index.tsx b/components/common/TextFieldset/index.tsx
index f7d1055d..75bafa83 100644
--- a/components/common/TextFieldset/index.tsx
+++ b/components/common/TextFieldset/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   fieldName: string
diff --git a/components/common/Toast/index.scss b/components/common/Toast/index.module.scss
similarity index 100%
rename from components/common/Toast/index.scss
rename to components/common/Toast/index.module.scss
diff --git a/components/common/Toast/index.tsx b/components/common/Toast/index.tsx
index de134ae3..ed317d70 100644
--- a/components/common/Toast/index.tsx
+++ b/components/common/Toast/index.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'
 import classNames from 'classnames'
 
 import * as ToastPrimitive from '@radix-ui/react-toast'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends ToastPrimitive.ToastProps {
   altText: string
diff --git a/components/common/ToggleSwitch/index.scss b/components/common/ToggleSwitch/index.module.scss
similarity index 100%
rename from components/common/ToggleSwitch/index.scss
rename to components/common/ToggleSwitch/index.module.scss
diff --git a/components/common/ToggleSwitch/index.tsx b/components/common/ToggleSwitch/index.tsx
index dd51c65b..7f108d44 100644
--- a/components/common/ToggleSwitch/index.tsx
+++ b/components/common/ToggleSwitch/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   name: string
diff --git a/components/common/Token/index.scss b/components/common/Token/index.module.scss
similarity index 100%
rename from components/common/Token/index.scss
rename to components/common/Token/index.module.scss
diff --git a/components/common/Token/index.tsx b/components/common/Token/index.tsx
index 64509cb3..a43a84e1 100644
--- a/components/common/Token/index.tsx
+++ b/components/common/Token/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/common/Tooltip/index.scss b/components/common/Tooltip/index.module.scss
similarity index 100%
rename from components/common/Tooltip/index.scss
rename to components/common/Tooltip/index.module.scss
diff --git a/components/common/Tooltip/index.tsx b/components/common/Tooltip/index.tsx
index a894886c..519ee9d8 100644
--- a/components/common/Tooltip/index.tsx
+++ b/components/common/Tooltip/index.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames'
 
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
-import './index.scss'
+import styles from './index.module.scss'
 interface Props extends TooltipPrimitive.TooltipContentProps {
   content: React.ReactNode
   open?: boolean
diff --git a/components/extra/ExtraContainer/index.scss b/components/extra/ExtraContainer/index.module.scss
similarity index 100%
rename from components/extra/ExtraContainer/index.scss
rename to components/extra/ExtraContainer/index.module.scss
diff --git a/components/extra/ExtraContainer/index.tsx b/components/extra/ExtraContainer/index.tsx
index 508f3d57..86d61b56 100644
--- a/components/extra/ExtraContainer/index.tsx
+++ b/components/extra/ExtraContainer/index.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react'
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {}
diff --git a/components/extra/ExtraWeaponsGrid/index.scss b/components/extra/ExtraWeaponsGrid/index.module.scss
similarity index 100%
rename from components/extra/ExtraWeaponsGrid/index.scss
rename to components/extra/ExtraWeaponsGrid/index.module.scss
diff --git a/components/extra/ExtraWeaponsGrid/index.tsx b/components/extra/ExtraWeaponsGrid/index.tsx
index c42cc618..e2dbf10c 100644
--- a/components/extra/ExtraWeaponsGrid/index.tsx
+++ b/components/extra/ExtraWeaponsGrid/index.tsx
@@ -5,7 +5,7 @@ import WeaponUnit from '~components/weapon/WeaponUnit'
 
 import type { SearchableObject } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 import classNames from 'classnames'
 
 // Props
diff --git a/components/extra/GuidebookResult/index.scss b/components/extra/GuidebookResult/index.module.scss
similarity index 100%
rename from components/extra/GuidebookResult/index.scss
rename to components/extra/GuidebookResult/index.module.scss
diff --git a/components/extra/GuidebookResult/index.tsx b/components/extra/GuidebookResult/index.tsx
index 4c84c5d7..50140740 100644
--- a/components/extra/GuidebookResult/index.tsx
+++ b/components/extra/GuidebookResult/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   data: Guidebook
diff --git a/components/extra/GuidebookUnit/index.scss b/components/extra/GuidebookUnit/index.module.scss
similarity index 100%
rename from components/extra/GuidebookUnit/index.scss
rename to components/extra/GuidebookUnit/index.module.scss
diff --git a/components/extra/GuidebookUnit/index.tsx b/components/extra/GuidebookUnit/index.tsx
index 5e64f969..c5d1d7d6 100644
--- a/components/extra/GuidebookUnit/index.tsx
+++ b/components/extra/GuidebookUnit/index.tsx
@@ -17,7 +17,7 @@ import type { SearchableObject } from '~types'
 
 import PlusIcon from '~public/icons/Add.svg'
 import SettingsIcon from '~public/icons/Settings.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   guidebook: Guidebook | undefined
diff --git a/components/extra/GuidebooksGrid/index.scss b/components/extra/GuidebooksGrid/index.module.scss
similarity index 100%
rename from components/extra/GuidebooksGrid/index.scss
rename to components/extra/GuidebooksGrid/index.module.scss
diff --git a/components/extra/GuidebooksGrid/index.tsx b/components/extra/GuidebooksGrid/index.tsx
index 81602925..5993de67 100644
--- a/components/extra/GuidebooksGrid/index.tsx
+++ b/components/extra/GuidebooksGrid/index.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames'
 
 import type { SearchableObject } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/job/JobAccessoryItem/index.scss b/components/job/JobAccessoryItem/index.module.scss
similarity index 100%
rename from components/job/JobAccessoryItem/index.scss
rename to components/job/JobAccessoryItem/index.module.scss
diff --git a/components/job/JobAccessoryItem/index.tsx b/components/job/JobAccessoryItem/index.tsx
index c547a900..9b7ccf9d 100644
--- a/components/job/JobAccessoryItem/index.tsx
+++ b/components/job/JobAccessoryItem/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 
 import * as RadioGroup from '@radix-ui/react-radio-group'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   accessory: JobAccessory
diff --git a/components/job/JobAccessoryPopover/index.scss b/components/job/JobAccessoryPopover/index.module.scss
similarity index 100%
rename from components/job/JobAccessoryPopover/index.scss
rename to components/job/JobAccessoryPopover/index.module.scss
diff --git a/components/job/JobAccessoryPopover/index.tsx b/components/job/JobAccessoryPopover/index.tsx
index 45314a45..6986de4f 100644
--- a/components/job/JobAccessoryPopover/index.tsx
+++ b/components/job/JobAccessoryPopover/index.tsx
@@ -14,7 +14,7 @@ import {
 } from '~components/common/PopoverContent'
 import JobAccessoryItem from '~components/job/JobAccessoryItem'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   buttonref: React.RefObject<HTMLButtonElement>
diff --git a/components/job/JobDropdown/index.scss b/components/job/JobDropdown/index.module.scss
similarity index 100%
rename from components/job/JobDropdown/index.scss
rename to components/job/JobDropdown/index.module.scss
diff --git a/components/job/JobDropdown/index.tsx b/components/job/JobDropdown/index.tsx
index 5a0f1407..b16f1771 100644
--- a/components/job/JobDropdown/index.tsx
+++ b/components/job/JobDropdown/index.tsx
@@ -10,7 +10,7 @@ import SelectGroup from '~components/common/SelectGroup'
 import { appState } from '~utils/appState'
 import { jobGroups } from '~data/jobGroups'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/job/JobImage/index.scss b/components/job/JobImage/index.module.scss
similarity index 100%
rename from components/job/JobImage/index.scss
rename to components/job/JobImage/index.module.scss
diff --git a/components/job/JobImage/index.tsx b/components/job/JobImage/index.tsx
index 15a5f8da..01f04895 100644
--- a/components/job/JobImage/index.tsx
+++ b/components/job/JobImage/index.tsx
@@ -7,7 +7,7 @@ import JobAccessoryPopover from '~components/job/JobAccessoryPopover'
 import ShieldIcon from '~public/icons/Shield.svg'
 import ManaturaIcon from '~public/icons/Manatura.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 import classNames from 'classnames'
 
 interface Props {
diff --git a/components/job/JobSection/index.scss b/components/job/JobSection/index.module.scss
similarity index 100%
rename from components/job/JobSection/index.scss
rename to components/job/JobSection/index.module.scss
diff --git a/components/job/JobSection/index.tsx b/components/job/JobSection/index.tsx
index 41258d14..c1999f69 100644
--- a/components/job/JobSection/index.tsx
+++ b/components/job/JobSection/index.tsx
@@ -13,7 +13,7 @@ import api from '~utils/api'
 import { appState } from '~utils/appState'
 import type { JobSkillObject, SearchableObject } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/job/JobSkillItem/index.scss b/components/job/JobSkillItem/index.module.scss
similarity index 100%
rename from components/job/JobSkillItem/index.scss
rename to components/job/JobSkillItem/index.module.scss
diff --git a/components/job/JobSkillItem/index.tsx b/components/job/JobSkillItem/index.tsx
index a1ded0d3..93c43ff6 100644
--- a/components/job/JobSkillItem/index.tsx
+++ b/components/job/JobSkillItem/index.tsx
@@ -14,7 +14,7 @@ import ContextMenuItem from '~components/common/ContextMenuItem'
 
 import EllipsisIcon from '~public/icons/Ellipsis.svg'
 import PlusIcon from '~public/icons/Add.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props extends React.ComponentPropsWithoutRef<'div'> {
diff --git a/components/job/JobSkillResult/index.scss b/components/job/JobSkillResult/index.module.scss
similarity index 100%
rename from components/job/JobSkillResult/index.scss
rename to components/job/JobSkillResult/index.module.scss
diff --git a/components/job/JobSkillResult/index.tsx b/components/job/JobSkillResult/index.tsx
index 508a3684..0259d5aa 100644
--- a/components/job/JobSkillResult/index.tsx
+++ b/components/job/JobSkillResult/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { SkillGroup, skillClassification } from '~data/skillGroups'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   data: JobSkill
diff --git a/components/job/JobSkillSearchFilterBar/index.scss b/components/job/JobSkillSearchFilterBar/index.module.scss
similarity index 100%
rename from components/job/JobSkillSearchFilterBar/index.scss
rename to components/job/JobSkillSearchFilterBar/index.module.scss
diff --git a/components/job/JobSkillSearchFilterBar/index.tsx b/components/job/JobSkillSearchFilterBar/index.tsx
index e58f011d..6478c508 100644
--- a/components/job/JobSkillSearchFilterBar/index.tsx
+++ b/components/job/JobSkillSearchFilterBar/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import Select from '~components/common/Select'
 import SelectItem from '~components/common/SelectItem'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   sendFilters: (filters: { [key: string]: number }) => void
diff --git a/components/mastery/AwakeningSelectWithInput/index.scss b/components/mastery/AwakeningSelectWithInput/index.module.scss
similarity index 100%
rename from components/mastery/AwakeningSelectWithInput/index.scss
rename to components/mastery/AwakeningSelectWithInput/index.module.scss
diff --git a/components/mastery/AwakeningSelectWithInput/index.tsx b/components/mastery/AwakeningSelectWithInput/index.tsx
index 80bf5ed9..a3d3d44e 100644
--- a/components/mastery/AwakeningSelectWithInput/index.tsx
+++ b/components/mastery/AwakeningSelectWithInput/index.tsx
@@ -10,7 +10,7 @@ import Select from '~components/common/Select'
 import SelectItem from '~components/common/SelectItem'
 
 // Styles and icons
-import './index.scss'
+import styles from './index.module.scss'
 
 // Types
 interface Props {
diff --git a/components/mastery/AxSelect/index.scss b/components/mastery/AxSelect/index.module.scss
similarity index 100%
rename from components/mastery/AxSelect/index.scss
rename to components/mastery/AxSelect/index.module.scss
diff --git a/components/mastery/AxSelect/index.tsx b/components/mastery/AxSelect/index.tsx
index 6fc0af8f..9e156ab4 100644
--- a/components/mastery/AxSelect/index.tsx
+++ b/components/mastery/AxSelect/index.tsx
@@ -9,7 +9,7 @@ import classNames from 'classnames'
 
 import ax from '~data/ax'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface ErrorMap {
   [index: string]: string
diff --git a/components/mastery/ExtendedMasterySelect/index.scss b/components/mastery/ExtendedMasterySelect/index.module.scss
similarity index 100%
rename from components/mastery/ExtendedMasterySelect/index.scss
rename to components/mastery/ExtendedMasterySelect/index.module.scss
diff --git a/components/mastery/ExtendedMasterySelect/index.tsx b/components/mastery/ExtendedMasterySelect/index.tsx
index 3fdd7425..08ef5802 100644
--- a/components/mastery/ExtendedMasterySelect/index.tsx
+++ b/components/mastery/ExtendedMasterySelect/index.tsx
@@ -9,7 +9,7 @@ import Select from '~components/common/Select'
 import SelectItem from '~components/common/SelectItem'
 
 // Styles and icons
-import './index.scss'
+import styles from './index.module.scss'
 
 // Types
 interface Props {
diff --git a/components/mastery/RingSelect/index.scss b/components/mastery/RingSelect/index.module.scss
similarity index 100%
rename from components/mastery/RingSelect/index.scss
rename to components/mastery/RingSelect/index.module.scss
diff --git a/components/mastery/RingSelect/index.tsx b/components/mastery/RingSelect/index.tsx
index b998b07d..d473b5be 100644
--- a/components/mastery/RingSelect/index.tsx
+++ b/components/mastery/RingSelect/index.tsx
@@ -8,7 +8,7 @@ import ExtendedMasterySelect from '~components/mastery/ExtendedMasterySelect'
 import { overMastery } from '~data/overMastery'
 
 // Styles and icons
-import './index.scss'
+import styles from './index.module.scss'
 
 // Types
 import { CharacterOverMastery, ExtendedMastery } from '~types'
diff --git a/components/party/EditPartyModal/index.scss b/components/party/EditPartyModal/index.module.scss
similarity index 100%
rename from components/party/EditPartyModal/index.scss
rename to components/party/EditPartyModal/index.module.scss
diff --git a/components/party/EditPartyModal/index.tsx b/components/party/EditPartyModal/index.tsx
index 92db0d85..265a767b 100644
--- a/components/party/EditPartyModal/index.tsx
+++ b/components/party/EditPartyModal/index.tsx
@@ -27,7 +27,7 @@ import { appState } from '~utils/appState'
 
 import CheckIcon from '~public/icons/Check.svg'
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends DialogProps {
   party?: Party
diff --git a/components/party/Party/index.scss b/components/party/Party/index.module.scss
similarity index 100%
rename from components/party/Party/index.scss
rename to components/party/Party/index.module.scss
diff --git a/components/party/Party/index.tsx b/components/party/Party/index.tsx
index 45c6ae3f..7ef521b7 100644
--- a/components/party/Party/index.tsx
+++ b/components/party/Party/index.tsx
@@ -23,7 +23,7 @@ import { setEditKey, storeEditKey, unsetEditKey } from '~utils/userToken'
 
 import type { DetailsObject } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/party/PartyDropdown/index.scss b/components/party/PartyDropdown/index.module.scss
similarity index 100%
rename from components/party/PartyDropdown/index.scss
rename to components/party/PartyDropdown/index.module.scss
diff --git a/components/party/PartyFooter/index.scss b/components/party/PartyFooter/index.module.scss
similarity index 100%
rename from components/party/PartyFooter/index.scss
rename to components/party/PartyFooter/index.module.scss
diff --git a/components/party/PartyFooter/index.tsx b/components/party/PartyFooter/index.tsx
index 78450225..feefb9f5 100644
--- a/components/party/PartyFooter/index.tsx
+++ b/components/party/PartyFooter/index.tsx
@@ -18,7 +18,7 @@ import { youtube } from '~utils/youtube'
 
 import type { DetailsObject } from 'types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/party/PartyHeader/index.scss b/components/party/PartyHeader/index.module.scss
similarity index 100%
rename from components/party/PartyHeader/index.scss
rename to components/party/PartyHeader/index.module.scss
diff --git a/components/party/PartyHeader/index.tsx b/components/party/PartyHeader/index.tsx
index f7124d33..27572c0e 100644
--- a/components/party/PartyHeader/index.tsx
+++ b/components/party/PartyHeader/index.tsx
@@ -23,7 +23,7 @@ import SaveIcon from '~public/icons/Save.svg'
 
 import type { DetailsObject } from 'types'
 
-import './index.scss'
+import styles from './index.module.scss'
 import RemixTeamAlert from '~components/dialogs/RemixTeamAlert'
 import RemixedToast from '~components/toasts/RemixedToast'
 import { set } from 'local-storage'
diff --git a/components/party/PartySegmentedControl/index.scss b/components/party/PartySegmentedControl/index.module.scss
similarity index 100%
rename from components/party/PartySegmentedControl/index.scss
rename to components/party/PartySegmentedControl/index.module.scss
diff --git a/components/party/PartySegmentedControl/index.tsx b/components/party/PartySegmentedControl/index.tsx
index e45fb56e..85c810b0 100644
--- a/components/party/PartySegmentedControl/index.tsx
+++ b/components/party/PartySegmentedControl/index.tsx
@@ -14,7 +14,7 @@ import SummonRep from '~components/reps/SummonRep'
 
 import { GridType } from '~utils/enums'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Fix for valtio readonly array
 declare module 'valtio' {
diff --git a/components/raids/RaidCombobox/index.scss b/components/raids/RaidCombobox/index.module.scss
similarity index 100%
rename from components/raids/RaidCombobox/index.scss
rename to components/raids/RaidCombobox/index.module.scss
diff --git a/components/raids/RaidCombobox/index.tsx b/components/raids/RaidCombobox/index.tsx
index d032ee99..7855f4cd 100644
--- a/components/raids/RaidCombobox/index.tsx
+++ b/components/raids/RaidCombobox/index.tsx
@@ -27,7 +27,7 @@ import Button from '~components/common/Button'
 import ArrowIcon from '~public/icons/Arrow.svg'
 import CrossIcon from '~public/icons/Cross.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const NUM_SECTIONS = 3
 const NUM_ELEMENTS = 5
diff --git a/components/raids/RaidItem/index.scss b/components/raids/RaidItem/index.module.scss
similarity index 100%
rename from components/raids/RaidItem/index.scss
rename to components/raids/RaidItem/index.module.scss
diff --git a/components/raids/RaidItem/index.tsx b/components/raids/RaidItem/index.tsx
index 328caf49..329eb4e7 100644
--- a/components/raids/RaidItem/index.tsx
+++ b/components/raids/RaidItem/index.tsx
@@ -2,7 +2,7 @@ import React, { ComponentProps, PropsWithChildren } from 'react'
 import { useTranslation } from 'next-i18next'
 import { CommandItem } from '~components/common/Command'
 import classNames from 'classnames'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props extends ComponentProps<'div'> {
   className?: string
diff --git a/components/reps/CharacterRep/index.scss b/components/reps/CharacterRep/index.module.scss
similarity index 100%
rename from components/reps/CharacterRep/index.scss
rename to components/reps/CharacterRep/index.module.scss
diff --git a/components/reps/CharacterRep/index.tsx b/components/reps/CharacterRep/index.tsx
index 8d53442e..abbe757e 100644
--- a/components/reps/CharacterRep/index.tsx
+++ b/components/reps/CharacterRep/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import 'fix-date'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   job?: Job
diff --git a/components/reps/RepSegment/index.scss b/components/reps/RepSegment/index.module.scss
similarity index 100%
rename from components/reps/RepSegment/index.scss
rename to components/reps/RepSegment/index.module.scss
diff --git a/components/reps/RepSegment/index.tsx b/components/reps/RepSegment/index.tsx
index dbe473f4..da012c91 100644
--- a/components/reps/RepSegment/index.tsx
+++ b/components/reps/RepSegment/index.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   controlGroup: string
diff --git a/components/reps/SummonRep/index.scss b/components/reps/SummonRep/index.module.scss
similarity index 100%
rename from components/reps/SummonRep/index.scss
rename to components/reps/SummonRep/index.module.scss
diff --git a/components/reps/SummonRep/index.tsx b/components/reps/SummonRep/index.tsx
index 86ff0b76..cebd4106 100644
--- a/components/reps/SummonRep/index.tsx
+++ b/components/reps/SummonRep/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   grid: {
diff --git a/components/reps/WeaponRep/index.scss b/components/reps/WeaponRep/index.module.scss
similarity index 100%
rename from components/reps/WeaponRep/index.scss
rename to components/reps/WeaponRep/index.module.scss
diff --git a/components/reps/WeaponRep/index.tsx b/components/reps/WeaponRep/index.tsx
index 53fa18b2..fba18518 100644
--- a/components/reps/WeaponRep/index.tsx
+++ b/components/reps/WeaponRep/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   grid: {
diff --git a/components/search/SearchFilter/index.scss b/components/search/SearchFilter/index.module.scss
similarity index 100%
rename from components/search/SearchFilter/index.scss
rename to components/search/SearchFilter/index.module.scss
diff --git a/components/search/SearchFilter/index.tsx b/components/search/SearchFilter/index.tsx
index 0da565e5..223724f5 100644
--- a/components/search/SearchFilter/index.tsx
+++ b/components/search/SearchFilter/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import ChevronIcon from '~public/icons/Chevron.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   label: string
diff --git a/components/search/SearchFilterCheckboxItem/index.scss b/components/search/SearchFilterCheckboxItem/index.module.scss
similarity index 100%
rename from components/search/SearchFilterCheckboxItem/index.scss
rename to components/search/SearchFilterCheckboxItem/index.module.scss
diff --git a/components/search/SearchFilterCheckboxItem/index.tsx b/components/search/SearchFilterCheckboxItem/index.tsx
index 073d7b51..91b5c81f 100644
--- a/components/search/SearchFilterCheckboxItem/index.tsx
+++ b/components/search/SearchFilterCheckboxItem/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import CheckIcon from '~public/icons/Check.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   checked?: boolean
diff --git a/components/search/SearchModal/index.scss b/components/search/SearchModal/index.module.scss
similarity index 100%
rename from components/search/SearchModal/index.scss
rename to components/search/SearchModal/index.module.scss
diff --git a/components/search/SearchModal/index.tsx b/components/search/SearchModal/index.tsx
index 09cca333..dee34ff6 100644
--- a/components/search/SearchModal/index.tsx
+++ b/components/search/SearchModal/index.tsx
@@ -24,7 +24,7 @@ import GuidebookResult from '~components/extra/GuidebookResult'
 import type { DialogProps } from '@radix-ui/react-dialog'
 import type { SearchableObject, SearchableObjectArray } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 import CrossIcon from '~public/icons/Cross.svg'
 
 interface Props extends DialogProps {
diff --git a/components/summon/ExtraSummons/index.scss b/components/summon/ExtraSummons/index.module.scss
similarity index 100%
rename from components/summon/ExtraSummons/index.scss
rename to components/summon/ExtraSummons/index.module.scss
diff --git a/components/summon/ExtraSummons/index.tsx b/components/summon/ExtraSummons/index.tsx
index 7c6ba706..7debe3df 100644
--- a/components/summon/ExtraSummons/index.tsx
+++ b/components/summon/ExtraSummons/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useTranslation } from 'next-i18next'
 import SummonUnit from '~components/summon/SummonUnit'
 import { SearchableObject } from '~types'
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/summon/SummonGrid/index.scss b/components/summon/SummonGrid/index.module.scss
similarity index 100%
rename from components/summon/SummonGrid/index.scss
rename to components/summon/SummonGrid/index.module.scss
diff --git a/components/summon/SummonGrid/index.tsx b/components/summon/SummonGrid/index.tsx
index 3a72028b..08a2a8da 100644
--- a/components/summon/SummonGrid/index.tsx
+++ b/components/summon/SummonGrid/index.tsx
@@ -15,7 +15,7 @@ import api from '~utils/api'
 import { appState } from '~utils/appState'
 import type { DetailsObject, SearchableObject } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/summon/SummonHovercard/index.scss b/components/summon/SummonHovercard/index.module.scss
similarity index 100%
rename from components/summon/SummonHovercard/index.scss
rename to components/summon/SummonHovercard/index.module.scss
diff --git a/components/summon/SummonHovercard/index.tsx b/components/summon/SummonHovercard/index.tsx
index e225d3c1..4476cc7d 100644
--- a/components/summon/SummonHovercard/index.tsx
+++ b/components/summon/SummonHovercard/index.tsx
@@ -11,7 +11,7 @@ import Button from '~components/common/Button'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
 import UncapIndicator from '~components/uncap/UncapIndicator'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   gridSummon: GridSummon
diff --git a/components/summon/SummonResult/index.scss b/components/summon/SummonResult/index.module.scss
similarity index 100%
rename from components/summon/SummonResult/index.scss
rename to components/summon/SummonResult/index.module.scss
diff --git a/components/summon/SummonResult/index.tsx b/components/summon/SummonResult/index.tsx
index ecaccb25..bba985d1 100644
--- a/components/summon/SummonResult/index.tsx
+++ b/components/summon/SummonResult/index.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import UncapIndicator from '~components/uncap/UncapIndicator'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   data: Summon
diff --git a/components/summon/SummonSearchFilterBar/index.scss b/components/summon/SummonSearchFilterBar/index.module.scss
similarity index 100%
rename from components/summon/SummonSearchFilterBar/index.scss
rename to components/summon/SummonSearchFilterBar/index.module.scss
diff --git a/components/summon/SummonSearchFilterBar/index.tsx b/components/summon/SummonSearchFilterBar/index.tsx
index 4edf4ccb..8a48d5af 100644
--- a/components/summon/SummonSearchFilterBar/index.tsx
+++ b/components/summon/SummonSearchFilterBar/index.tsx
@@ -8,7 +8,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import SearchFilter from '~components/search/SearchFilter'
 import SearchFilterCheckboxItem from '~components/search/SearchFilterCheckboxItem'
 
-import './index.scss'
+import styles from './index.module.scss'
 import { emptyElementState, emptyRarityState } from '~utils/emptyStates'
 import { elements, rarities } from '~utils/stateValues'
 
diff --git a/components/summon/SummonUnit/index.scss b/components/summon/SummonUnit/index.module.scss
similarity index 100%
rename from components/summon/SummonUnit/index.scss
rename to components/summon/SummonUnit/index.module.scss
diff --git a/components/summon/SummonUnit/index.tsx b/components/summon/SummonUnit/index.tsx
index 35bbe18d..a88dc8de 100644
--- a/components/summon/SummonUnit/index.tsx
+++ b/components/summon/SummonUnit/index.tsx
@@ -23,7 +23,7 @@ import type { SearchableObject } from '~types'
 
 import PlusIcon from '~public/icons/Add.svg'
 import SettingsIcon from '~public/icons/Settings.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   gridSummon: GridSummon | undefined
diff --git a/components/toasts/UpdateToast/index.scss b/components/toasts/UpdateToast/index.module.scss
similarity index 100%
rename from components/toasts/UpdateToast/index.scss
rename to components/toasts/UpdateToast/index.module.scss
diff --git a/components/toasts/UpdateToast/index.tsx b/components/toasts/UpdateToast/index.tsx
index 2d2d9efc..7b3ddf3b 100644
--- a/components/toasts/UpdateToast/index.tsx
+++ b/components/toasts/UpdateToast/index.tsx
@@ -7,7 +7,7 @@ import classNames from 'classnames'
 import Button from '~components/common/Button'
 import Toast from '~components/common/Toast'
 
-import './index.scss'
+import styles from './index.module.scss'
 import { useTranslation } from 'next-i18next'
 
 interface Props {
diff --git a/components/uncap/TranscendenceFragment/index.scss b/components/uncap/TranscendenceFragment/index.module.scss
similarity index 100%
rename from components/uncap/TranscendenceFragment/index.scss
rename to components/uncap/TranscendenceFragment/index.module.scss
diff --git a/components/uncap/TranscendenceFragment/index.tsx b/components/uncap/TranscendenceFragment/index.tsx
index 0daaef18..769b3696 100644
--- a/components/uncap/TranscendenceFragment/index.tsx
+++ b/components/uncap/TranscendenceFragment/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   stage: number
diff --git a/components/uncap/TranscendencePopover/index.scss b/components/uncap/TranscendencePopover/index.module.scss
similarity index 100%
rename from components/uncap/TranscendencePopover/index.scss
rename to components/uncap/TranscendencePopover/index.module.scss
diff --git a/components/uncap/TranscendencePopover/index.tsx b/components/uncap/TranscendencePopover/index.tsx
index de69b163..69c8fe38 100644
--- a/components/uncap/TranscendencePopover/index.tsx
+++ b/components/uncap/TranscendencePopover/index.tsx
@@ -9,7 +9,7 @@ import {
 } from '~components/common/PopoverContent'
 import TranscendenceStar from '~components/uncap/TranscendenceStar'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/uncap/TranscendenceStar/index.scss b/components/uncap/TranscendenceStar/index.module.scss
similarity index 100%
rename from components/uncap/TranscendenceStar/index.scss
rename to components/uncap/TranscendenceStar/index.module.scss
diff --git a/components/uncap/TranscendenceStar/index.tsx b/components/uncap/TranscendenceStar/index.tsx
index 624abf4b..e093d8fd 100644
--- a/components/uncap/TranscendenceStar/index.tsx
+++ b/components/uncap/TranscendenceStar/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 
 import TranscendenceFragment from '~components/uncap/TranscendenceFragment'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/uncap/UncapIndicator/index.scss b/components/uncap/UncapIndicator/index.module.scss
similarity index 100%
rename from components/uncap/UncapIndicator/index.scss
rename to components/uncap/UncapIndicator/index.module.scss
diff --git a/components/uncap/UncapIndicator/index.tsx b/components/uncap/UncapIndicator/index.tsx
index f6691f27..1a603786 100644
--- a/components/uncap/UncapIndicator/index.tsx
+++ b/components/uncap/UncapIndicator/index.tsx
@@ -3,7 +3,7 @@ import UncapStar from '~components/uncap/UncapStar'
 import TranscendencePopover from '~components/uncap/TranscendencePopover'
 import TranscendenceStar from '~components/uncap/TranscendenceStar'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   type: 'character' | 'weapon' | 'summon'
diff --git a/components/uncap/UncapStar/index.scss b/components/uncap/UncapStar/index.module.scss
similarity index 100%
rename from components/uncap/UncapStar/index.scss
rename to components/uncap/UncapStar/index.module.scss
diff --git a/components/uncap/UncapStar/index.tsx b/components/uncap/UncapStar/index.tsx
index 5393a494..a714988c 100644
--- a/components/uncap/UncapStar/index.tsx
+++ b/components/uncap/UncapStar/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
diff --git a/components/weapon/WeaponConflictModal/index.scss b/components/weapon/WeaponConflictModal/index.module.scss
similarity index 100%
rename from components/weapon/WeaponConflictModal/index.scss
rename to components/weapon/WeaponConflictModal/index.module.scss
diff --git a/components/weapon/WeaponConflictModal/index.tsx b/components/weapon/WeaponConflictModal/index.tsx
index f257a880..4f7bcaca 100644
--- a/components/weapon/WeaponConflictModal/index.tsx
+++ b/components/weapon/WeaponConflictModal/index.tsx
@@ -9,7 +9,7 @@ import Overlay from '~components/common/Overlay'
 
 import mapWeaponSeries from '~utils/mapWeaponSeries'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   open: boolean
diff --git a/components/weapon/WeaponGrid/index.scss b/components/weapon/WeaponGrid/index.module.scss
similarity index 100%
rename from components/weapon/WeaponGrid/index.scss
rename to components/weapon/WeaponGrid/index.module.scss
diff --git a/components/weapon/WeaponGrid/index.tsx b/components/weapon/WeaponGrid/index.tsx
index b27cb658..fb933a5c 100644
--- a/components/weapon/WeaponGrid/index.tsx
+++ b/components/weapon/WeaponGrid/index.tsx
@@ -20,7 +20,7 @@ import { appState } from '~utils/appState'
 
 import type { DetailsObject, SearchableObject } from '~types'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/weapon/WeaponHovercard/index.scss b/components/weapon/WeaponHovercard/index.module.scss
similarity index 100%
rename from components/weapon/WeaponHovercard/index.scss
rename to components/weapon/WeaponHovercard/index.module.scss
diff --git a/components/weapon/WeaponHovercard/index.tsx b/components/weapon/WeaponHovercard/index.tsx
index 1e9132c1..fa4535c2 100644
--- a/components/weapon/WeaponHovercard/index.tsx
+++ b/components/weapon/WeaponHovercard/index.tsx
@@ -13,7 +13,7 @@ import UncapIndicator from '~components/uncap/UncapIndicator'
 
 import ax from '~data/ax'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   gridWeapon: GridWeapon
diff --git a/components/weapon/WeaponKeySelect/index.scss b/components/weapon/WeaponKeySelect/index.module.scss
similarity index 100%
rename from components/weapon/WeaponKeySelect/index.scss
rename to components/weapon/WeaponKeySelect/index.module.scss
diff --git a/components/weapon/WeaponKeySelect/index.tsx b/components/weapon/WeaponKeySelect/index.tsx
index 1880921e..5624612a 100644
--- a/components/weapon/WeaponKeySelect/index.tsx
+++ b/components/weapon/WeaponKeySelect/index.tsx
@@ -5,7 +5,7 @@ import SelectGroup from '~components/common/SelectGroup'
 import SelectItem from '~components/common/SelectItem'
 import api from '~utils/api'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 // Props
 interface Props {
diff --git a/components/weapon/WeaponLabelIcon/index.scss b/components/weapon/WeaponLabelIcon/index.module.scss
similarity index 100%
rename from components/weapon/WeaponLabelIcon/index.scss
rename to components/weapon/WeaponLabelIcon/index.module.scss
diff --git a/components/weapon/WeaponLabelIcon/index.tsx b/components/weapon/WeaponLabelIcon/index.tsx
index 477716cd..c4bb9b17 100644
--- a/components/weapon/WeaponLabelIcon/index.tsx
+++ b/components/weapon/WeaponLabelIcon/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   labelType: string
diff --git a/components/weapon/WeaponModal/index.scss b/components/weapon/WeaponModal/index.module.scss
similarity index 100%
rename from components/weapon/WeaponModal/index.scss
rename to components/weapon/WeaponModal/index.module.scss
diff --git a/components/weapon/WeaponModal/index.tsx b/components/weapon/WeaponModal/index.tsx
index 537e1f77..e7e76168 100644
--- a/components/weapon/WeaponModal/index.tsx
+++ b/components/weapon/WeaponModal/index.tsx
@@ -22,7 +22,7 @@ import { appState } from '~utils/appState'
 import { NO_AWAKENING } from '~data/awakening'
 
 import CrossIcon from '~public/icons/Cross.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface GridWeaponObject {
   weapon: {
diff --git a/components/weapon/WeaponResult/index.scss b/components/weapon/WeaponResult/index.module.scss
similarity index 100%
rename from components/weapon/WeaponResult/index.scss
rename to components/weapon/WeaponResult/index.module.scss
diff --git a/components/weapon/WeaponResult/index.tsx b/components/weapon/WeaponResult/index.tsx
index 5fe233c9..23a30363 100644
--- a/components/weapon/WeaponResult/index.tsx
+++ b/components/weapon/WeaponResult/index.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import UncapIndicator from '~components/uncap/UncapIndicator'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   data: Weapon
diff --git a/components/weapon/WeaponSearchFilterBar/index.scss b/components/weapon/WeaponSearchFilterBar/index.module.scss
similarity index 100%
rename from components/weapon/WeaponSearchFilterBar/index.scss
rename to components/weapon/WeaponSearchFilterBar/index.module.scss
diff --git a/components/weapon/WeaponSearchFilterBar/index.tsx b/components/weapon/WeaponSearchFilterBar/index.tsx
index d19a67aa..f70f7c7c 100644
--- a/components/weapon/WeaponSearchFilterBar/index.tsx
+++ b/components/weapon/WeaponSearchFilterBar/index.tsx
@@ -8,7 +8,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import SearchFilter from '~components/search/SearchFilter'
 import SearchFilterCheckboxItem from '~components/search/SearchFilterCheckboxItem'
 
-import './index.scss'
+import styles from './index.module.scss'
 import {
   emptyElementState,
   emptyProficiencyState,
diff --git a/components/weapon/WeaponUnit/index.scss b/components/weapon/WeaponUnit/index.module.scss
similarity index 100%
rename from components/weapon/WeaponUnit/index.scss
rename to components/weapon/WeaponUnit/index.module.scss
diff --git a/components/weapon/WeaponUnit/index.tsx b/components/weapon/WeaponUnit/index.tsx
index 8c2c260f..391aab96 100644
--- a/components/weapon/WeaponUnit/index.tsx
+++ b/components/weapon/WeaponUnit/index.tsx
@@ -22,7 +22,7 @@ import ax from '~data/ax'
 
 import PlusIcon from '~public/icons/Add.svg'
 import SettingsIcon from '~public/icons/Settings.svg'
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   gridWeapon: GridWeapon | undefined
diff --git a/styles/globals.scss b/styles/globals.scss
index 23fe54e9..1d392cf6 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -407,3 +407,19 @@ select {
     text-align: center;
   }
 }
+
+.ToastViewport {
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  display: flex;
+  flex-direction: column;
+  width: 340px;
+  max-width: 100vw;
+  z-index: 2147483647;
+  padding: 25px;
+  gap: 10px;
+  margin: 0px;
+  list-style: none;
+  outline: none;
+}