diff --git a/.gitignore b/.gitignore
index 6238ed9..e783703 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,4 +21,8 @@ pnpm-debug.log*
 .DS_Store
 
 /.idea/
-/.fleet/
\ No newline at end of file
+/.fleet/
+
+/.next/
+
+next-env.d.ts
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 835fe8b..9439812 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,5 @@
 ---
-
+import '../styles/components/Footer.scss'
 ---
 
 <footer>
@@ -70,101 +70,3 @@
     </p>
   </div>
 </footer>
-<style lang="scss">
-  footer {
-    align-items: center;
-    margin: 100px 1px 0 0;
-    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(5px);
-    bottom: 0;
-    width: 100%;
-    padding: 5px;
-
-    .footerIcon {
-      display: block;
-      text-align: center;
-
-      .footerImage {
-        max-width: initial;
-        max-height: initial;
-        width: 48px;
-        margin: 0.5rem auto;
-      }
-
-      .footerImageNote {
-        font-size: 0.75rem;
-      }
-    }
-
-    .footerTable {
-      padding: 20px 0;
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 20px;
-
-      h3 {
-        margin-bottom: 8px;
-      }
-    }
-
-    .footerLinks {
-      display: flex;
-      flex-direction: column;
-      align-items: baseline;
-
-      a {
-        position: relative;
-        color: #ffffff;
-        text-decoration: none;
-
-        &:hover {
-          color: #ffffff;
-        }
-
-        &::before {
-          content: "";
-          position: absolute;
-          display: block;
-          width: 100%;
-          height: 2px;
-          bottom: 0;
-          left: 0;
-          transform: scaleX(0);
-          transform-origin: left;
-          background-color: #ffffff;
-          transition: transform 0.3s ease;
-        }
-
-        &:hover::before {
-          transform: scaleX(1);
-        }
-      }
-    }
-
-    .footerNotice {
-      margin: 0 auto;
-      text-align: center;
-      font-size: 0.75rem;
-    }
-
-    @media (min-width: 768px) {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      column-gap: 0px;
-      margin: 0 auto;
-
-      .footerIcon {
-        grid-column: span 1;
-        justify-self: center;
-      }
-
-      .footerTable {
-        grid-column: span 3;
-      }
-
-      .footerNotice {
-        grid-column: span 4;
-      }
-    }
-  }
-</style>
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 334457a..9367e73 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -1,3 +1,6 @@
+---
+import '../styles/components/NavBar.scss';
+---
 <nav>
   <ul>
     <li class="navElem">
@@ -30,55 +33,3 @@
     </li>
   </ul>
 </nav>
-<style lang="scss">
-  nav {
-    display: flex;
-    flex-direction: column;
-    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(5px);
-    position: sticky;
-    border-radius: 5px;
-
-    ul {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 0;
-
-      .navElem {
-        margin: 0.5rem 1rem;
-        transition: 0.5s;
-        color: white;
-
-        &:hover {
-          color: rgb(96 59 255) !important;
-        }
-
-        .textBx {
-          display: flex;
-          align-items: center;
-
-          #logo {
-            width: 32px;
-            height: 32px;
-            border-radius: 100%;
-            max-width: initial;
-            max-height: initial;
-            margin: 0.5rem;
-          }
-        }
-      }
-    }
-
-    @media (min-width: 768px) {
-      ul {
-        flex-direction: row;
-        padding: 0 2rem;
-
-        .navElem:last-child {
-          margin-left: auto;
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index a173d9d..b0f70a3 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,8 @@
 ---
 import Footer from "@components/Footer.astro";
 import NavBar from "@components/NavBar.astro";
+import '../styles/Layout.scss';
+import '../styles/GlobalLayout.css'
 ---
 
 <!doctype html>
@@ -24,61 +26,3 @@ import NavBar from "@components/NavBar.astro";
     <Footer />
   </body>
 </html>
-<style lang="scss">
-  .contentDiv {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: auto;
-  }
-</style>
-<style is:global>
-  @font-face {
-    font-family: "Splatoon";
-    font-style: normal;
-    font-weight: 400;
-    src:
-      url("/assets/fonts/Splatoon2-common.woff2") format("woff2"),
-      url("/assets/fonts/Splatoon2-common.woff") format("woff");
-  }
-
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    font-family: "Splatoon", sans-serif;
-  }
-
-  body {
-    color: rgb(var(--foreground-rgb));
-    background-color: black;
-    background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/bg.jpg");
-    background-repeat: repeat;
-    background-size: 300px;
-    background-position: center;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  body a,
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  span,
-  li,
-  ul {
-    font-family: "Splatoon", sans-serif;
-  }
-
-  li {
-    list-style-type: none;
-  }
-
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
-</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 51c96da..2e0eb4f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from "@layouts/Layout.astro";
+import '../styles/pages/index.scss';
 ---
 
 <Layout>
@@ -14,37 +15,3 @@ import Layout from "@layouts/Layout.astro";
     </div>
   </section>
 </Layout>
-<style lang="scss">
-  .section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-  }
-
-  .section h1 {
-    font-size: 4rem;
-    margin-top: 8rem;
-  }
-
-  .section h5 {
-    font-size: 1.5rem;
-    margin-top: 0.25rem;
-  }
-
-  .section div {
-    margin-top: 1.5rem;
-  }
-
-  .p1 {
-    font-size: 1rem;
-  }
-
-  .p2 {
-    font-size: 0.8rem;
-  }
-
-  .p2 a {
-    font-weight: bolder;
-  }
-</style>
diff --git a/src/styles/GlobalLayout.css b/src/styles/GlobalLayout.css
new file mode 100644
index 0000000..7ac4bc6
--- /dev/null
+++ b/src/styles/GlobalLayout.css
@@ -0,0 +1,55 @@
+@font-face {
+    font-family: "Splatoon";
+    font-style: normal;
+    font-weight: 400;
+    src: url("/assets/fonts/Splatoon2-common.woff2") format("woff2"),
+    url("/assets/fonts/Splatoon2-common.woff") format("woff");
+}
+
+:root {
+    --foreground-rgb: 255, 255, 255;
+    font-family: "Splatoon", sans-serif;
+}
+
+body {
+    color: rgb(var(--foreground-rgb));
+    background-color: black;
+    background-image: url("https://static.moonleay.net/img/lilJuddWeb/bgs/bg.jpg");
+    background-repeat: repeat;
+    background-size: 300px;
+    background-position: center;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body a,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span,
+li,
+ul {
+    font-family: "Splatoon", sans-serif;
+}
+
+li {
+    list-style-type: none;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
diff --git a/src/styles/Layout.scss b/src/styles/Layout.scss
new file mode 100644
index 0000000..5439a2d
--- /dev/null
+++ b/src/styles/Layout.scss
@@ -0,0 +1,5 @@
+.contentDiv {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: auto;
+}
diff --git a/src/styles/components/Footer.scss b/src/styles/components/Footer.scss
new file mode 100644
index 0000000..428fc22
--- /dev/null
+++ b/src/styles/components/Footer.scss
@@ -0,0 +1,96 @@
+footer {
+  align-items: center;
+  margin: 100px 1px 0 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(5px);
+  bottom: 0;
+  width: 100%;
+  padding: 5px;
+
+  .footerIcon {
+    display: block;
+    text-align: center;
+
+    .footerImage {
+      max-width: initial;
+      max-height: initial;
+      width: 48px;
+      margin: 0.5rem auto;
+    }
+
+    .footerImageNote {
+      font-size: 0.75rem;
+    }
+  }
+
+  .footerTable {
+    padding: 20px 0;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+
+    h3 {
+      margin-bottom: 8px;
+    }
+  }
+
+  .footerLinks {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+
+    a {
+      position: relative;
+      color: #ffffff;
+      text-decoration: none;
+
+      &:hover {
+        color: #ffffff;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        transform: scaleX(0);
+        transform-origin: left;
+        background-color: #ffffff;
+        transition: transform 0.3s ease;
+      }
+
+      &:hover::before {
+        transform: scaleX(1);
+      }
+    }
+  }
+
+  .footerNotice {
+    margin: 0 auto;
+    text-align: center;
+    font-size: 0.75rem;
+  }
+
+  @media (min-width: 768px) {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: 0px;
+    margin: 0 auto;
+
+    .footerIcon {
+      grid-column: span 1;
+      justify-self: center;
+    }
+
+    .footerTable {
+      grid-column: span 3;
+    }
+
+    .footerNotice {
+      grid-column: span 4;
+    }
+  }
+}
diff --git a/src/styles/components/NavBar.scss b/src/styles/components/NavBar.scss
new file mode 100644
index 0000000..e20242a
--- /dev/null
+++ b/src/styles/components/NavBar.scss
@@ -0,0 +1,50 @@
+nav {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(5px);
+  position: sticky;
+  border-radius: 5px;
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+
+    .navElem {
+      margin: 0.5rem 1rem;
+      transition: 0.5s;
+      color: white;
+
+      &:hover {
+        color: rgb(96 59 255) !important;
+      }
+
+      .textBx {
+        display: flex;
+        align-items: center;
+
+        #logo {
+          width: 32px;
+          height: 32px;
+          border-radius: 100%;
+          max-width: initial;
+          max-height: initial;
+          margin: 0.5rem;
+        }
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    ul {
+      flex-direction: row;
+      padding: 0 2rem;
+
+      .navElem:last-child {
+        margin-left: auto;
+      }
+    }
+  }
+}
diff --git a/src/styles/pages/index.scss b/src/styles/pages/index.scss
new file mode 100644
index 0000000..a2bfdac
--- /dev/null
+++ b/src/styles/pages/index.scss
@@ -0,0 +1,32 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.section h1 {
+  font-size: 4rem;
+  margin-top: 8rem;
+}
+
+.section h5 {
+  font-size: 1.5rem;
+  margin-top: 0.25rem;
+}
+
+.section div {
+  margin-top: 1.5rem;
+}
+
+.p1 {
+  font-size: 1rem;
+}
+
+.p2 {
+  font-size: 0.8rem;
+}
+
+.p2 a {
+  font-weight: bolder;
+}