diff --git a/directory/src/routes/path/_tab_base.scss b/directory/src/routes/path/_tab_base.scss
new file mode 100644
index 0000000..b2a5447
--- /dev/null
+++ b/directory/src/routes/path/_tab_base.scss
@@ -0,0 +1,151 @@
+.group {
+  padding: 1rem;
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  user-select: none;
+
+  .date {
+    margin: 1.5rem;
+    font-family: "Bender";
+    font-weight: bold;
+    text-align: right;
+    color: var(--date-color);
+    font-size: 1.5rem;
+    letter-spacing: 0.1rem;
+    flex: auto;
+    user-select: none;
+  }
+
+  .item {
+    position: relative;
+    cursor: pointer;
+    width: 180px;
+    margin: 1.25rem;
+    background-image: repeating-linear-gradient(
+      90deg,
+      var(--home-item-background-linear-gradient-color) 0,
+      var(--home-item-background-linear-gradient-color) 1px,
+      transparent 1px,
+      transparent 5px
+    );
+    .background-filler {
+      border-right: 1px solid var(--home-item-background-linear-gradient-color);
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: -1px;
+      bottom: 0;
+    }
+    .outline {
+      display: block;
+      position: absolute;
+      opacity: 0;
+      visibility: hidden;
+      transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+      width: 100%;
+      height: 100%;
+      left: -6px;
+      top: -6px;
+      border: var(--home-item-outline-color) 1px dashed;
+      padding: 6px;
+
+      %share {
+        content: "";
+        display: block;
+        position: absolute;
+        left: -3px;
+        height: 3px;
+        width: 100%;
+        border-left: var(--text-color) solid 3px;
+        border-right: var(--text-color) solid 3px;
+      }
+
+      &::before {
+        @extend %share;
+        top: -3px;
+      }
+
+      &::after {
+        @extend %share;
+        bottom: -3px;
+      }
+    }
+
+    .img {
+      height: 360px;
+      width: 100%;
+      transition: background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+    }
+
+    .info {
+      white-space: nowrap;
+      position: relative;
+      padding: 0.8rem 0.4rem;
+      line-height: 1.2em;
+      height: 36px;
+
+      .container {
+        color: var(--text-color-full);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 1.25rem;
+        font-weight: bold;
+        .title {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          line-height: 1.3em;
+          height: auto;
+        }
+        .type {
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+          text-align: center;
+          width: 1.5rem;
+          fill: var(--text-color);
+        }
+      }
+
+      .wrapper {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: var(--secondary-text-color);
+        .text {
+          font-size: 0.75rem;
+          font-family: "Geometos";
+          margin-top: 1rem;
+        }
+      }
+
+      .background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        visibility: hidden;
+        transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+        background-image: linear-gradient(
+          70deg,
+          transparent 40%,
+          currentColor 150%
+        );
+      }
+    }
+
+    &:hover {
+      .img {
+        background-color: var(--home-item-hover-background-color);
+      }
+      .outline,
+      .info .background {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+}
diff --git a/directory/src/routes/path/changelogs.css b/directory/src/routes/path/changelogs.css
deleted file mode 100644
index c2ea891..0000000
--- a/directory/src/routes/path/changelogs.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.changelogs .item-group {
-    flex-direction: column;
-    align-items: stretch;
-}
-
-.changelogs .item-info {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
-    padding-left: 1rem;
-    word-break: break-word;
-}
-
-.changelogs .item-info-content {
-    font-size: 1.5rem;
-    display: list-item;
-}
\ No newline at end of file
diff --git a/directory/src/routes/path/changelogs.jsx b/directory/src/routes/path/changelogs.jsx
index bd0ad35..3420fb2 100644
--- a/directory/src/routes/path/changelogs.jsx
+++ b/directory/src/routes/path/changelogs.jsx
@@ -3,7 +3,7 @@ import React, {
   useEffect,
   useMemo
 } from 'react'
-import './changelogs.css'
+import classes from './changelogs.module.scss'
 import { useHeader } from '@/state/header';
 import { useAppbar } from '@/state/appbar';
 import useUmami from '@parcellab/react-use-umami'
@@ -46,18 +46,18 @@ export default function Changelogs() {
         return (
           v.map((item) => {
             return (
-              <section className="item-group-wrapper" key={item.date} hidden={currentTab !== item.key}>
-                <section className="item-group">
-                  <section className="item-info">
+              <section className={classes.wrapper} key={item.date} hidden={currentTab !== item.key}>
+                <section className={classes.group}>
+                  <section className={classes.info}>
                     {item.content.map((entry, index) => {
                       return (
-                        <section className="item-info-content" key={index}>
+                        <section className={classes.content} key={index}>
                           {entry}
                         </section>
                       )
                     })}
                   </section>
-                  <section className='item-group-date'>{item.date}</section>
+                  <section className={classes.date}>{item.date}</section>
                 </section>
                 <MainBorder />
               </section>
@@ -69,7 +69,7 @@ export default function Changelogs() {
   }, [changelogs, currentTab])
 
   return (
-    <section className="changelogs">
+    <section>
       {content}
     </section>
   )
diff --git a/directory/src/routes/path/changelogs.module.scss b/directory/src/routes/path/changelogs.module.scss
new file mode 100644
index 0000000..cc00b63
--- /dev/null
+++ b/directory/src/routes/path/changelogs.module.scss
@@ -0,0 +1,19 @@
+@use 'tab_base';
+
+.group {
+  flex-direction: column;
+  align-items: stretch;
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding-left: 1rem;
+    word-break: break-word;
+    .content {
+      font-size: 1.5rem;
+      display: list-item;
+    }
+  }
+}
diff --git a/directory/src/routes/path/home.css b/directory/src/routes/path/home.css
deleted file mode 100644
index d10b81c..0000000
--- a/directory/src/routes/path/home.css
+++ /dev/null
@@ -1,150 +0,0 @@
-.item-group {
-    padding: 1rem;
-    display: flex;
-    align-items: flex-end;
-    flex-wrap: wrap;
-    user-select: none;
-}
-
-.item-group-date {
-    margin: 1.5rem;
-    font-family: "Bender";
-    font-weight: bold;
-    text-align: right;
-    color: var(--date-color);
-    font-size: 1.5rem;
-    letter-spacing: 0.1rem;
-    flex: auto;
-    user-select: none;
-}
-
-.item-group .item {
-    position: relative;
-    cursor: pointer;
-    width: 180px;
-    margin: 1.25rem;
-    background-image: repeating-linear-gradient(90deg, var(--home-item-background-linear-gradient-color) 0, var(--home-item-background-linear-gradient-color) 1px, transparent 1px, transparent 5px);
-}
-
-.item-group .item .item-background-filler {
-    border-right: 1px solid var(--home-item-background-linear-gradient-color);
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: -1px;
-    bottom: 0;
-}
-
-.item-group .item .item-outline {
-    display: block;
-    position: absolute;
-    opacity: 0;
-    visibility: hidden;
-    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
-}
-
-.item-group .item .item-outline {
-    width: 100%;
-    height: 100%;
-    left: -6px;
-    top: -6px;
-    border: var(--home-item-outline-color) 1px dashed;
-    padding: 6px;
-}
-
-.item-group .item .item-outline::before,
-.item-group .item .item-outline::after {
-    content: "";
-    display: block;
-    position: absolute;
-    left: -3px;
-    height: 3px;
-    width: 100%;
-    border-left: var(--text-color) solid 3px;
-    border-right: var(--text-color) solid 3px;
-}
-
-.item-group .item .item-outline::before {
-    top: -3px;
-}
-
-.item-group .item .item-outline::after {
-    bottom: -3px;
-}
-
-.item-group .item:hover .item-outline,
-.item-group .item:hover .item-info .item-info-background {
-    opacity: 1;
-    visibility: visible;
-}
-
-.item-group .item .item-img {
-    height: 360px;
-    width: 100%;
-    transition: background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
-}
-
-.item-group .item:hover .item-img {
-    background-color: var(--home-item-hover-background-color);
-}
-
-.item-group .item .item-info {
-    white-space: nowrap;
-    position: relative;
-    padding: 0.8rem 0.4rem;
-    line-height: 1.2em;
-    height: 36px;
-}
-
-.item-group .item .item-info .item-title-container {
-    color: var(--text-color-full);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 1.25rem;
-    font-weight: bold;
-}
-
-.item-group .item .item-info .item-title-container .item-title {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.item-group .item .item-info .item-title-container .item-title {
-    line-height: 1.3em;
-    height: auto;
-}
-
-.item-group .item .item-info .item-title-container .item-type {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    text-align: center;
-    width: 1.5rem;
-    fill: var(--text-color)
-}
-
-.item-group .item .item-info .item-text {
-    font-size: 0.75rem;
-    font-family: "Geometos";
-    margin-top: 1rem; 
-}
-
-.item-group .item .item-info .item-info-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    visibility: hidden;
-    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
-    background-image: linear-gradient(70deg, transparent 40%, currentColor 150%);
-}
-
-.item-group .item .item-info .item-text-wrapper {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--secondary-text-color);
-}
\ No newline at end of file
diff --git a/directory/src/routes/path/home.jsx b/directory/src/routes/path/home.jsx
index 9d210be..16d0d74 100644
--- a/directory/src/routes/path/home.jsx
+++ b/directory/src/routes/path/home.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import {
   NavLink,
 } from "react-router-dom";
-import './home.css'
+import classes from './home.module.scss'
 import { useConfig } from '@/state/config';
 import {
   useLanguage
@@ -58,13 +58,13 @@ export default function Home() {
   const isShown = useCallback((type) => currentTab === 'all' || currentTab === type, [currentTab])
 
   return (
-    <section className="home">
+    <section>
       {
         content.map((v) => {
           const length = v.filter((v) => isShown(v.type)).length
           return (
-            <section className="item-group-wrapper" key={v[0].date} hidden={length === 0}>
-              <section className="item-group">
+            <section key={v[0].date} hidden={length === 0}>
+              <section className={classes.group}>
                 {v.map(item => {
                   return (
                     <OperatorElement
@@ -74,7 +74,7 @@ export default function Home() {
                     />
                   )
                 })}
-                <section className='item-group-date'>{v[0].date}</section>
+                <section className={classes.date}>{v[0].date}</section>
               </section>
               <MainBorder />
             </section>
@@ -107,23 +107,23 @@ function OperatorElement({ item, hidden }) {
     return (
       <NavLink
         to={`/${item.link}`}
-        className="item"
+        className={classes.item}
         hidden={hidden}
       >
         <section
           onMouseEnter={() => playVoice()}
         >
-          <section className="item-background-filler" />
-          <section className="item-outline" />
-          <section className="item-img">
+          <section className={classes['background-filler']} />
+          <section className={classes.outline} />
+          <section className={classes.img}>
             <ImageElement
               item={item}
             />
           </section>
-          <section className="item-info">
-            <section className="item-title-container">
-              <section className="item-title">{item.codename[language]}</section>
-              <section className="item-type">
+          <section className={classes.info}>
+            <section className={classes.container}>
+              <section className={classes.title}>{item.codename[language]}</section>
+              <section className={classes.type}>
                 <CharIcon
                   type={item.type}
                   viewBox={
@@ -131,10 +131,10 @@ function OperatorElement({ item, hidden }) {
                   } />
               </section>
             </section>
-            <section className="item-text-wrapper">
-              <span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
+            <section className={classes.wrapper}>
+              <span className={classes.text}>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
             </section>
-            <section className="item-info-background" style={{
+            <section className={classes.background} style={{
               color: item.color
             }} />
           </section>
diff --git a/directory/src/routes/path/home.module.scss b/directory/src/routes/path/home.module.scss
new file mode 100644
index 0000000..7e38453
--- /dev/null
+++ b/directory/src/routes/path/home.module.scss
@@ -0,0 +1 @@
+@use 'tab_base';
\ No newline at end of file