diff --git a/next.config.ts b/next.config.ts
index e9ffa30..b16851a 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,11 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
+import path from 'path';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  reactStrictMode: true,
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'src')],
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 95b48bb..f958ba0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7693,6 +7693,111 @@
           "optional": true
         }
       }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.0.3.tgz",
+      "integrity": "sha512-s3Q/NOorCsLYdCKvQlWU+a+GeAd3C8Rb3L1YnetsgwXzhc3UTWrtQpB/3eCjFOdGUj5QmXfRak12uocd1ZiiQw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.0.3.tgz",
+      "integrity": "sha512-Zxl/TwyXVZPCFSf0u2BNj5sE0F2uR6iSKxWpq4Wlk/Sv9Ob6YCKByQTkV2y6BCic+fkabp9190hyrDdPA/dNrw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.0.3.tgz",
+      "integrity": "sha512-T5+gg2EwpsY3OoaLxUIofmMb7ohAUlcNZW0fPQ6YAutaWJaxt1Z1h+8zdl4FRIOr5ABAAhXtBcpkZNwUcKI2fw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.0.3.tgz",
+      "integrity": "sha512-WkAk6R60mwDjH4lG/JBpb2xHl2/0Vj0ZRu1TIzWuOYfQ9tt9NFsIinI1Epma77JVgy81F32X/AeD+B2cBu/YQA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.0.3.tgz",
+      "integrity": "sha512-gWL/Cta1aPVqIGgDb6nxkqy06DkwJ9gAnKORdHWX1QBbSZZB+biFYPFti8aKIQL7otCE1pjyPaXpFzGeG2OS2w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.0.3.tgz",
+      "integrity": "sha512-QQEMwFd8r7C0GxQS62Zcdy6GKx999I/rTO2ubdXEe+MlZk9ZiinsrjwoiBL5/57tfyjikgh6GOU2WRQVUej3UA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.0.3.tgz",
+      "integrity": "sha512-9TEp47AAd/ms9fPNgtgnT7F3M1Hf7koIYYWCMQ9neOwjbVWJsHZxrFbI3iEDJ8rf1TDGpmHbKxXf2IFpAvheIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/src/app/globals.css b/src/app/globals.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/globals.scss b/src/app/globals.scss
new file mode 100644
index 0000000..0954227
--- /dev/null
+++ b/src/app/globals.scss
@@ -0,0 +1,24 @@
+@use '@/assets/variables' as *;
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
+@import '@/assets/reset.scss';
+
+body {
+  font-family: Pretendard;
+}
+
+button,
+input,
+select,
+textarea {
+  appearance: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background-color: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index cb6f4f7..24cfecf 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,15 +1,15 @@
-import type { Metadata } from "next";
-import "./globals.css";
+import type { Metadata } from 'next';
+import './globals.scss';
 
 export const metadata: Metadata = {
-  title: "Mogazoa",
+  title: 'Mogazoa',
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en">
       <body>{children}</body>
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
index e69de29..18bfabf 100644
--- a/src/app/page.module.scss
+++ b/src/app/page.module.scss
@@ -0,0 +1,7 @@
+@use '@/assets/variables' as *;
+.homeTag {
+  background-color: $green;
+  color: $red;
+  border: $border-red;
+  border-radius: $radi;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index df98771..8fb84ac 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
-// import styles from "./page.module.scss";
+import styles from "./page.module.scss";
 
 export default function Home() {
-  return <div>home</div>;
+  return <div className={styles.homeTag}>home</div>;
 }
diff --git a/src/assets/reset.scss b/src/assets/reset.scss
new file mode 100644
index 0000000..baf7e3f
--- /dev/null
+++ b/src/assets/reset.scss
@@ -0,0 +1,14 @@
+@use '@/assets/variables' as *;
+* {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-sizing: border-box;
+  background-color: $white;
+}
+
+body {
+  font-family: Pretendard;
+  background-color: $white;
+  transition: background-color 0.3s ease;
+}
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
new file mode 100644
index 0000000..19332c2
--- /dev/null
+++ b/src/assets/variables.scss
@@ -0,0 +1,36 @@
+$dark-black: #17171c;
+$black: #181d26;
+$light-black: #2e2e3a;
+$border-black: #353542;
+
+$dark-gray: #6e6e82;
+$gray: #9fa6b2;
+$white: #f1f1f5;
+
+$indigo: #5363ff;
+$blue: #5097fa;
+$gradient: linear-gradient(91deg, $blue 0%, $indigo 100%);
+
+$yellow: #ffc83c;
+$green: #05d58b;
+$pink: #ff2f9f;
+$red: #ff0000;
+
+$radi: 8px;
+$radi-rank: 50px;
+$radi-cates: 6px;
+$radi-catef: 100px;
+$radi-modal: 16px;
+
+$border-red: 1px solid $red;
+$border-black: 1px solid $border-black;
+$border-blue: 1px solid $blue;
+
+$pad-input: 23px 20px;
+$pad-button: 24px 288px;
+$pad-search: 16px 20px;
+$pad-menu: 15px 20px;
+$pad-cate: 4px 10px;
+$pad-cates: 4px 8px;
+$pad-catec: 8px 10px;
+$pad-stat: 30px 74px;