diff --git a/public/images/GongspLogo.png b/public/images/GongspLogo.png
new file mode 100644
index 0000000..4203c82
Binary files /dev/null and b/public/images/GongspLogo.png differ
diff --git a/public/images/logo-400.png b/public/images/logo-400.png
new file mode 100644
index 0000000..e107a47
Binary files /dev/null and b/public/images/logo-400.png differ
diff --git a/public/images/superWaffle.png b/public/images/superWaffle.png
new file mode 100644
index 0000000..27cfe8b
Binary files /dev/null and b/public/images/superWaffle.png differ
diff --git a/src/App.js b/src/App.js
index ca2a86e..c3b1c24 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,11 @@
-import React from 'react';
-// import { useNavigate } from "react-router-dom";
-// import { useState } from "react/cjs/react.development";
-import Navbar from './components/navbar';
-import NavbarLanding from './components/navbarLanding';
-import isLogin from './utils/isLogin';
-import './statics/css/main.css';
-import { Outlet } from 'react-router-dom';
+import React from "react";
+import Navbar from "./components/navbar";
+import NavbarLanding from "./components/navbarLanding";
+import isLogin from "./utils/isLogin";
+import { Outlet } from "react-router-dom";
+import Footer from "./components/footer";
+import "./statics/css/darkUI.css";
+import "./statics/css/app.css";
 
 function App() {
   console.log(`
@@ -19,12 +19,15 @@ function App() {
                       dP                                                                         
   `);
   return (
-    <div>
+    <main>
       {isLogin() && <Navbar sticky="top" />}
       {!isLogin() && <NavbarLanding sticky="top" />}
       <p>Landing Page</p>
-      <Outlet />
-    </div>
+      <div className="outlet">
+        <Outlet />
+      </div>
+      <Footer />
+    </main>
   );
 }
 
diff --git a/src/components/footer.js b/src/components/footer.js
new file mode 100644
index 0000000..11947da
--- /dev/null
+++ b/src/components/footer.js
@@ -0,0 +1,36 @@
+import { Link } from "react-router-dom";
+import "../statics/css/Layout/footer.css";
+
+export default function Footer() {
+  const logo = "../../images/logo-400.png";
+  return (
+    <footer className="footer">
+      {/* <div className="footer__contents">
+        <div className="footer__logo">
+          <img src={logo} alt=""></img>
+        </div>
+
+        <div className="footer__introduce">
+          <div>서비스</div>
+          <div></div>
+        </div>
+
+        <div className="footer__madeby">Creator</div>
+        <div>lorem</div>
+      </div> */}
+      <div className="footer__contents"></div>
+
+      <div className="footer__rights">
+        <div className="footer__logo">
+          <img src="../../images/superWaffle.png" />
+          <div>© Super Waffle</div>
+        </div>
+        <div className="footer__link">
+          <Link to={"/"}>Service</Link>
+          <Link to={"/"}>Policy</Link>
+          <Link to={"/"}>Creator</Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/statics/css/Layout/footer.css b/src/statics/css/Layout/footer.css
new file mode 100644
index 0000000..4a6f654
--- /dev/null
+++ b/src/statics/css/Layout/footer.css
@@ -0,0 +1,53 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
+.hidden {
+  display: none;
+}
+
+.footer {
+  background-color: var(--bgColor);
+}
+
+.footer__contents {
+  width: 100%;
+  background-color: var(--htmlbgColor);
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 150px;
+}
+
+.footer__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer__rights {
+  border-top: 1px solid var(--textColor-darkest);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 64px;
+  color: var(--textColor-todo);
+}
+.footer__rights img {
+  margin: 3rem 0.8rem;
+  width: 36px;
+}
+
+.footer__link {
+  display: flex;
+  gap: 30px;
+  text-decoration: none;
+  color: #6667ab;
+}
+.footer__link a {
+  text-decoration: none;
+  color: var(--textColor-todo);
+}
+.footer__link a:hover {
+  color: #6667ab;
+}
+
+/*# sourceMappingURL=footer.css.map */
diff --git a/src/statics/css/Layout/footer.css.map b/src/statics/css/Layout/footer.css.map
new file mode 100644
index 0000000..c5973d5
--- /dev/null
+++ b/src/statics/css/Layout/footer.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/Layout/footer.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACdF;EAGE;;;AAMF;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EAKA;;AAJA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA,ODrCU;;ACsCV;EACE;EACA;;AAEF;EACE,OD3CQ","file":"footer.css"}
\ No newline at end of file
diff --git a/src/statics/css/Todo/todo.css b/src/statics/css/Todo/todo.css
index a5d8ac9..2579ac3 100644
--- a/src/statics/css/Todo/todo.css
+++ b/src/statics/css/Todo/todo.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/Todo/todo.css.map b/src/statics/css/Todo/todo.css.map
index 9459f87..0a962fd 100644
--- a/src/statics/css/Todo/todo.css.map
+++ b/src/statics/css/Todo/todo.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/Todo/todo.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"todo.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/Todo/todo.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"todo.css"}
\ No newline at end of file
diff --git a/src/statics/css/Todo/todoCreate.css b/src/statics/css/Todo/todoCreate.css
index bd638cb..f038ad4 100644
--- a/src/statics/css/Todo/todoCreate.css
+++ b/src/statics/css/Todo/todoCreate.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/Todo/todoCreate.css.map b/src/statics/css/Todo/todoCreate.css.map
index d1ba44e..a6880e3 100644
--- a/src/statics/css/Todo/todoCreate.css.map
+++ b/src/statics/css/Todo/todoCreate.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/Todo/todoCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAGF;EACE;EACA,ODlBQ;ECmBR;EACA;EACA","file":"todoCreate.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/Todo/todoCreate.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAGF;EACE;EACA,ODlBQ;ECmBR;EACA;EACA","file":"todoCreate.css"}
\ No newline at end of file
diff --git a/src/statics/css/Todo/todoItem.css b/src/statics/css/Todo/todoItem.css
index 6f0679a..4cab166 100644
--- a/src/statics/css/Todo/todoItem.css
+++ b/src/statics/css/Todo/todoItem.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/Todo/todoItem.css.map b/src/statics/css/Todo/todoItem.css.map
index 2afea01..f248760 100644
--- a/src/statics/css/Todo/todoItem.css.map
+++ b/src/statics/css/Todo/todoItem.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/Todo/todoItem.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EACE;;AAGJ;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEE;EACE;;AAIN;EACE;EACA;EACA;;AACA;EACE,ODxCM;ECyCN;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE,ODxDM;;AC2DV;EACE","file":"todoItem.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/Todo/todoItem.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EACE;;AAGJ;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEE;EACE;;AAIN;EACE;EACA;EACA;;AACA;EACE,ODxCM;ECyCN;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE,ODxDM;;AC2DV;EACE","file":"todoItem.css"}
\ No newline at end of file
diff --git a/src/statics/css/Todo/todoList.css b/src/statics/css/Todo/todoList.css
index 53ec0d3..72342a5 100644
--- a/src/statics/css/Todo/todoList.css
+++ b/src/statics/css/Todo/todoList.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/Todo/todoList.css.map b/src/statics/css/Todo/todoList.css.map
index 9f70d1e..abdb615 100644
--- a/src/statics/css/Todo/todoList.css.map
+++ b/src/statics/css/Todo/todoList.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/Todo/todoList.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA","file":"todoList.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/Todo/todoList.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA","file":"todoList.css"}
\ No newline at end of file
diff --git a/src/statics/css/app.css b/src/statics/css/app.css
new file mode 100644
index 0000000..6f0c057
--- /dev/null
+++ b/src/statics/css/app.css
@@ -0,0 +1,6 @@
+@import "main.css";
+.outlet {
+  min-height: calc(100vh - 180px);
+}
+
+/*# sourceMappingURL=app.css.map */
diff --git a/src/statics/css/app.css.map b/src/statics/css/app.css.map
new file mode 100644
index 0000000..4ed3703
--- /dev/null
+++ b/src/statics/css/app.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/app.scss"],"names":[],"mappings":"AAAQ;AAER;EACE","file":"app.css"}
\ No newline at end of file
diff --git a/src/statics/css/applicationModal.css b/src/statics/css/applicationModal.css
index bcf06e6..71c7035 100644
--- a/src/statics/css/applicationModal.css
+++ b/src/statics/css/applicationModal.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/applicationModal.css.map b/src/statics/css/applicationModal.css.map
index 0e16d5e..ef0a99a 100644
--- a/src/statics/css/applicationModal.css.map
+++ b/src/statics/css/applicationModal.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/applicationModal.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDpEI;ECqEJ;;AAGJ;EACE;EACA;;;AAIN;EACE;EACA;EACA","file":"applicationModal.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/applicationModal.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDpEI;ECqEJ;;AAGJ;EACE;EACA;;;AAIN;EACE;EACA;EACA","file":"applicationModal.css"}
\ No newline at end of file
diff --git a/src/statics/css/calendar.css b/src/statics/css/calendar.css
index f5787ee..97f01f2 100644
--- a/src/statics/css/calendar.css
+++ b/src/statics/css/calendar.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/calendar.css.map b/src/statics/css/calendar.css.map
index 7b0c8a1..46d90be 100644
--- a/src/statics/css/calendar.css.map
+++ b/src/statics/css/calendar.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/calendar.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE,ODGU;ECFV;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EAEA;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;AACA;EACE;EACA;;;AAGJ;EAEE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA","file":"calendar.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/calendar.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE,ODGU;ECFV;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EAEA;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;AACA;EACE;EACA;;;AAGJ;EAEE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA","file":"calendar.css"}
\ No newline at end of file
diff --git a/src/statics/css/categorySelect.css b/src/statics/css/categorySelect.css
index 96ee219..3f3bc05 100644
--- a/src/statics/css/categorySelect.css
+++ b/src/statics/css/categorySelect.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/categorySelect.css.map b/src/statics/css/categorySelect.css.map
index ba17bab..4aaaa0b 100644
--- a/src/statics/css/categorySelect.css.map
+++ b/src/statics/css/categorySelect.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/categorySelect.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"categorySelect.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/categorySelect.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"categorySelect.css"}
\ No newline at end of file
diff --git a/src/statics/css/dailyDetails.css b/src/statics/css/dailyDetails.css
index c320376..c0cbe6a 100644
--- a/src/statics/css/dailyDetails.css
+++ b/src/statics/css/dailyDetails.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/dailyDetails.css.map b/src/statics/css/dailyDetails.css.map
index 0cd0baa..703d6d0 100644
--- a/src/statics/css/dailyDetails.css.map
+++ b/src/statics/css/dailyDetails.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/dailyDetails.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE","file":"dailyDetails.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/dailyDetails.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE","file":"dailyDetails.css"}
\ No newline at end of file
diff --git a/src/statics/css/darkUI.css b/src/statics/css/darkUI.css
new file mode 100644
index 0000000..b7f6c14
--- /dev/null
+++ b/src/statics/css/darkUI.css
@@ -0,0 +1,45 @@
+:root {
+  --htmlbgColor: #ffffff;
+  --bgColor: #fcfcfc;
+  --bgColor-light: #eaeaea;
+  --borderColor: #ededed;
+  --borderColor2: #d6d6d6;
+  --borderColor3: #e1e1e1;
+  --textWhite: #eeeeee;
+  --textColor: #252525;
+  --textColor-dark: #8a8a8a;
+  --textColor-darker: #a1a1a1;
+  --textColor-darkest: #c2c2c2;
+  --textColor-todo: #6c757d;
+  --github-01: #e8eaee;
+  --github-02: #d5d6f5;
+  --github-03: #9fa2e3;
+  --board-textColor: #646464;
+  --if-bgColor: #f9f9f9;
+  --if-borderColor: #e5e5e5;
+}
+
+.ui-dark {
+  background-color: var(--htmlbgColor);
+  --htmlbgColor: #292929;
+  --bgColor: #373737;
+  --bgColor-light: #4a4a4a;
+  --bgColor-lighter: #565656;
+  --bgColor-dark: #1b1b1b;
+  --borderColor: #444444;
+  --borderColor2: #444444;
+  --borderColor3: #444444;
+  --textColor: #ededed;
+  --textColor-dark: #8a8a8a;
+  --textColor-darker: #6f6f6f;
+  --textColor-darkest: #838383;
+  --textColor-todo: #cdcdcd;
+  --github-01: rgba(102, 103, 171, 0.2);
+  --github-02: rgba(102, 103, 171, 0.4);
+  --github-03: rgba(102, 103, 171, 0.7);
+  --board-textColor: #ededed;
+  --if-bgColor: #323232;
+  --if-borderColor: #444444;
+}
+
+/*# sourceMappingURL=darkUI.css.map */
diff --git a/src/statics/css/darkUI.css.map b/src/statics/css/darkUI.css.map
new file mode 100644
index 0000000..b5a3386
--- /dev/null
+++ b/src/statics/css/darkUI.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/darkUI.scss"],"names":[],"mappings":"AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA","file":"darkUI.css"}
\ No newline at end of file
diff --git a/src/statics/css/datepicker.css b/src/statics/css/datepicker.css
index fe3c9b0..d100b71 100644
--- a/src/statics/css/datepicker.css
+++ b/src/statics/css/datepicker.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/datepicker.css.map b/src/statics/css/datepicker.css.map
index 503a5e3..b6dbe48 100644
--- a/src/statics/css/datepicker.css.map
+++ b/src/statics/css/datepicker.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/datepicker.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;;;AAEF;EACE,aDHY;;ACIZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,aDjBY;;ACkBZ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AACA;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE,kBDhDI;ECiDJ;;AAEF;EACE,kBDpDI;ECqDJ;;AAKN;EACE;EACA;EACA;EACA","file":"datepicker.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/datepicker.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;;;AAEF;EACE,aDHY;;ACIZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,aDjBY;;ACkBZ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AACA;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE,kBDhDI;ECiDJ;;AAEF;EACE,kBDpDI;ECqDJ;;AAKN;EACE;EACA;EACA;EACA","file":"datepicker.css"}
\ No newline at end of file
diff --git a/src/statics/css/datepickerStart.css b/src/statics/css/datepickerStart.css
index 7ac41c8..f7a7830 100644
--- a/src/statics/css/datepickerStart.css
+++ b/src/statics/css/datepickerStart.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/datepickerStart.css.map b/src/statics/css/datepickerStart.css.map
index ae63d33..f244793 100644
--- a/src/statics/css/datepickerStart.css.map
+++ b/src/statics/css/datepickerStart.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/datepickerStart.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA","file":"datepickerStart.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/datepickerStart.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA","file":"datepickerStart.css"}
\ No newline at end of file
diff --git a/src/statics/css/diary.css b/src/statics/css/diary.css
index 08d175b..a35399b 100644
--- a/src/statics/css/diary.css
+++ b/src/statics/css/diary.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/diary.css.map b/src/statics/css/diary.css.map
index b385a22..4fc9cf1 100644
--- a/src/statics/css/diary.css.map
+++ b/src/statics/css/diary.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/diary.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKJ;EACE;EAGA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA,kBDpDQ;ECqDR;EACA;EACA;EACA;EACA","file":"diary.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/diary.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKJ;EACE;EAGA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA,kBDpDQ;ECqDR;EACA;EACA;EACA;EACA","file":"diary.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/achievementList.css b/src/statics/css/home/achievementList.css
index 009baeb..2232c45 100644
--- a/src/statics/css/home/achievementList.css
+++ b/src/statics/css/home/achievementList.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/achievementList.css.map b/src/statics/css/home/achievementList.css.map
index a746174..6ef0d92 100644
--- a/src/statics/css/home/achievementList.css.map
+++ b/src/statics/css/home/achievementList.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/achievementList.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE,kBDVM;ECWN;;;AAMN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAKA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EAGA;EACA;;AAIJ;EACE;EACA;;;AAQJ;EACE;;;AAEF;EAEE;EAEA;EACA;EACA;EACA;EACA","file":"achievementList.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/achievementList.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE,kBDVM;ECWN;;;AAMN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAKA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EAGA;EACA;;AAIJ;EACE;EACA;;;AAQJ;EACE;;;AAEF;EAEE;EAEA;EACA;EACA;EACA;EACA","file":"achievementList.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/circularGraph.css b/src/statics/css/home/circularGraph.css
index 74ae8b2..faee637 100644
--- a/src/statics/css/home/circularGraph.css
+++ b/src/statics/css/home/circularGraph.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/circularGraph.css.map b/src/statics/css/home/circularGraph.css.map
index 9fad498..4e1b85f 100644
--- a/src/statics/css/home/circularGraph.css.map
+++ b/src/statics/css/home/circularGraph.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE","file":"circularGraph.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE","file":"circularGraph.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/dailyStats.css b/src/statics/css/home/dailyStats.css
index 353e03a..172d801 100644
--- a/src/statics/css/home/dailyStats.css
+++ b/src/statics/css/home/dailyStats.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/dailyStats.css.map b/src/statics/css/home/dailyStats.css.map
index 71e8a1e..d441db1 100644
--- a/src/statics/css/home/dailyStats.css.map
+++ b/src/statics/css/home/dailyStats.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/dailyStats.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EAEE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EAEE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"dailyStats.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/dailyStats.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EAEE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EAEE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"dailyStats.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/heatmap.css b/src/statics/css/home/heatmap.css
index fbc2b77..acbb3d9 100644
--- a/src/statics/css/home/heatmap.css
+++ b/src/statics/css/home/heatmap.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/heatmap.css.map b/src/statics/css/home/heatmap.css.map
index 01e8cf7..1f31a25 100644
--- a/src/statics/css/home/heatmap.css.map
+++ b/src/statics/css/home/heatmap.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/heatmap.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACpEA;EACE,aDDU;ECEV;;AAEF;EACE;;AAGA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE,MD/CM;;ACkDR;EACE","file":"heatmap.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/heatmap.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACZA;EACE,aDDU;ECEV;;AAEF;EACE;;AAGA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE,MD/CM;;ACkDR;EACE","file":"heatmap.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/home.css b/src/statics/css/home/home.css
index e8869c1..0ae1fe2 100644
--- a/src/statics/css/home/home.css
+++ b/src/statics/css/home/home.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/home.css.map b/src/statics/css/home/home.css.map
index 0dced49..86dd66e 100644
--- a/src/statics/css/home/home.css.map
+++ b/src/statics/css/home/home.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/home.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;AACA;EACE;EACA;EAEA;;AAGA;EACE;EAEA;EACA;EACA,aDdQ;ECeR;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA","file":"home.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/home.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AACA;EACE;EACA;EAEA;;AAGA;EACE;EAEA;EACA;EACA,aDdQ;ECeR;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA","file":"home.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/homeAchievement.css b/src/statics/css/home/homeAchievement.css
index bc4dfc9..2222533 100644
--- a/src/statics/css/home/homeAchievement.css
+++ b/src/statics/css/home/homeAchievement.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/homeAchievement.css.map b/src/statics/css/home/homeAchievement.css.map
index 156b1c4..b49dd7e 100644
--- a/src/statics/css/home/homeAchievement.css.map
+++ b/src/statics/css/home/homeAchievement.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeAchievement.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA","file":"homeAchievement.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeAchievement.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA","file":"homeAchievement.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/homeGoal.css b/src/statics/css/home/homeGoal.css
index 79cf2c9..3f49a8a 100644
--- a/src/statics/css/home/homeGoal.css
+++ b/src/statics/css/home/homeGoal.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/homeGoal.css.map b/src/statics/css/home/homeGoal.css.map
index 9ee9c9e..af4a068 100644
--- a/src/statics/css/home/homeGoal.css.map
+++ b/src/statics/css/home/homeGoal.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeGoal.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EAEA;EACA;EAEA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"homeGoal.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeGoal.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EAEA;EACA;EAEA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"homeGoal.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/homeMeetings.css b/src/statics/css/home/homeMeetings.css
index 8bb0165..5d80aeb 100644
--- a/src/statics/css/home/homeMeetings.css
+++ b/src/statics/css/home/homeMeetings.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/homeMeetings.css.map b/src/statics/css/home/homeMeetings.css.map
index e04c183..97bdd24 100644
--- a/src/statics/css/home/homeMeetings.css.map
+++ b/src/statics/css/home/homeMeetings.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeMeetings.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAEF;EACE;EACA;;AACA;EACE;EACA;;;AAGJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"homeMeetings.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeMeetings.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAEF;EACE;EACA;;AACA;EACE;EACA;;;AAGJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"homeMeetings.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/homeStatistics.css b/src/statics/css/home/homeStatistics.css
index 8b00e50..f5e3285 100644
--- a/src/statics/css/home/homeStatistics.css
+++ b/src/statics/css/home/homeStatistics.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/homeStatistics.css.map b/src/statics/css/home/homeStatistics.css.map
index dbad305..99ae006 100644
--- a/src/statics/css/home/homeStatistics.css.map
+++ b/src/statics/css/home/homeStatistics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeStatistics.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA","file":"homeStatistics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeStatistics.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA","file":"homeStatistics.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/homeStudiesList.css b/src/statics/css/home/homeStudiesList.css
index b66a6f4..84d46d8 100644
--- a/src/statics/css/home/homeStudiesList.css
+++ b/src/statics/css/home/homeStudiesList.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/homeStudiesList.css.map b/src/statics/css/home/homeStudiesList.css.map
index 419999c..fb2c44f 100644
--- a/src/statics/css/home/homeStudiesList.css.map
+++ b/src/statics/css/home/homeStudiesList.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeStudiesList.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA,ODpBQ;ECqBR;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EAME;;AALA;EACE;EACA;EACA","file":"homeStudiesList.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeStudiesList.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA,ODpBQ;ECqBR;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EAME;;AALA;EACE;EACA;EACA","file":"homeStudiesList.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/homeTodays.css b/src/statics/css/home/homeTodays.css
index 78a2f8f..e0a67b2 100644
--- a/src/statics/css/home/homeTodays.css
+++ b/src/statics/css/home/homeTodays.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/homeTodays.css.map b/src/statics/css/home/homeTodays.css.map
index 92fd697..412b719 100644
--- a/src/statics/css/home/homeTodays.css.map
+++ b/src/statics/css/home/homeTodays.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeTodays.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EAEA;EACA;EAGA;;AAME;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;AAcN;EACE;;AAiBF;EACE","file":"homeTodays.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeTodays.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EAEA;EACA;EAGA;;AAME;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;AAcN;EACE;;AAiBF;EACE","file":"homeTodays.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/homeTodos.css b/src/statics/css/home/homeTodos.css
index 3686628..72dda03 100644
--- a/src/statics/css/home/homeTodos.css
+++ b/src/statics/css/home/homeTodos.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/homeTodos.css.map b/src/statics/css/home/homeTodos.css.map
index d2d030f..a71ffa6 100644
--- a/src/statics/css/home/homeTodos.css.map
+++ b/src/statics/css/home/homeTodos.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeTodos.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACpEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE","file":"homeTodos.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeTodos.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACZA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE","file":"homeTodos.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/if.css b/src/statics/css/home/if.css
index 00c2c22..448aecd 100644
--- a/src/statics/css/home/if.css
+++ b/src/statics/css/home/if.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/if.css.map b/src/statics/css/home/if.css.map
index 46a1e46..73b9aa3 100644
--- a/src/statics/css/home/if.css.map
+++ b/src/statics/css/home/if.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/if.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAIF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE,ODrCU;ECsCV;EACA","file":"if.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/if.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAIF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE,ODrCU;ECsCV;EACA","file":"if.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/levelComponent.css b/src/statics/css/home/levelComponent.css
index 83fbd7c..47e04cb 100644
--- a/src/statics/css/home/levelComponent.css
+++ b/src/statics/css/home/levelComponent.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/levelComponent.css.map b/src/statics/css/home/levelComponent.css.map
index 2b411d8..f044d24 100644
--- a/src/statics/css/home/levelComponent.css.map
+++ b/src/statics/css/home/levelComponent.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/levelComponent.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACtEF;EACE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;EACA;;;AAGJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE","file":"levelComponent.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/levelComponent.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACdF;EACE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;EACA;;;AAGJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE","file":"levelComponent.css"}
\ No newline at end of file
diff --git a/src/statics/css/home/myAchievement.css b/src/statics/css/home/myAchievement.css
index e5870d7..17e5456 100644
--- a/src/statics/css/home/myAchievement.css
+++ b/src/statics/css/home/myAchievement.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/home/myAchievement.css.map b/src/statics/css/home/myAchievement.css.map
index bae0440..d30d787 100644
--- a/src/statics/css/home/myAchievement.css.map
+++ b/src/statics/css/home/myAchievement.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/myAchievement.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE,kBDfQ;ECgBR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"myAchievement.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/myAchievement.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE,kBDfQ;ECgBR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"myAchievement.css"}
\ No newline at end of file
diff --git a/src/statics/css/login.css b/src/statics/css/login.css
index 75c0d56..498f3d6 100644
--- a/src/statics/css/login.css
+++ b/src/statics/css/login.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/login.css.map b/src/statics/css/login.css.map
index 4fc9ca2..6ad9666 100644
--- a/src/statics/css/login.css.map
+++ b/src/statics/css/login.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/login.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA,kBDxJA;ECyJA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA,ODpLE","file":"login.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/login.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA,kBDxJA;ECyJA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA,ODpLE","file":"login.css"}
\ No newline at end of file
diff --git a/src/statics/css/main.css b/src/statics/css/main.css
index 2f4d4a3..c09a269 100644
--- a/src/statics/css/main.css
+++ b/src/statics/css/main.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/main.css.map b/src/statics/css/main.css.map
index 2cfe3fb..b460176 100644
--- a/src/statics/css/main.css.map
+++ b/src/statics/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE","file":"main.css"}
\ No newline at end of file
diff --git a/src/statics/css/meetingroom.css b/src/statics/css/meetingroom.css
index 9b3b45d..fe7b142 100644
--- a/src/statics/css/meetingroom.css
+++ b/src/statics/css/meetingroom.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/meetingroom.css.map b/src/statics/css/meetingroom.css.map
index cc1ce10..0279aa2 100644
--- a/src/statics/css/meetingroom.css.map
+++ b/src/statics/css/meetingroom.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/meetingroom.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;AACA;AACA;EACA;AACA;EACA;EACA;AACA;AACA;;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aD5CM;;AC+CR;EACE;EACA;EACA;EACA,YDhDI;ECiDJ,ODhDI;ECiDJ,aDrDM;ECsDN;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aD/EM;ECgFN;EAEA;EAGA;;AAIF;EACE;EACA;EAEA;EACA;EACA,OD3FI;EC4FJ,aDhGM;ECiGN;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;;AAOJ;AACE;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;AACA;AACA;AACA;EACA;EACA;EACA;AACA;EAEA;EACA;EACA;EACA,ODvJE;ECwJF;;AAEA;EACE;EACA;EAEA;EACA;EAEA,aDrKE;ECsKF;;AAEA;EAEE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAEA;EAEE;EACA,aD/LA;ECgMA;EACA;;AAEF;EAEE;EACA,aDtMA;ECuMA;EACA;;AAIJ;EAEE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA,aDvNA;ECwNA;EACA,ODtNF;;AC0NF;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,ODpOF;ECqOE;EACA;;AAGF;EACE;EACA,OD1OF;EC2OE;EACA;;AAGF;EACE,ODjPF;ECkPE;EACA;;AAGF;EACE,ODtPF;ECuPE;EACA;;AAMR;EAGE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EAEA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;AACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aDtSA;ECuSA,ODnSF;ECoSE;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,aD5TF;EC6TE;EACA;;AAGF;EAEE;EACA;EAIA;EACA;EACA;EACA;;AAIJ;EAEE;EACA;EACA,aDnVA;ECoVA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,aDzWF;EC0WE;EACA;;AAGF;EACE;EACA;EACA,OD7WJ;EC8WI,YDlXF;;ACqXA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAcF;EACE;EACA,aD7YF;EC8YE;EACA;;AAGF;EACE;EACA;EACA;EACA,ODlZJ;ECmZI,YDvZF;;AC0ZA;EACE;EACA;EACA,ODzZJ;EC0ZI,YD9ZF;;ACiaA;EACE;;AAGF;EACE;EACA,aDvaF;ECwaE;EACA,ODraJ;ECsaI;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,ODjbJ;ECkbI;EACA;EACA,aDxbF;ECybE;EACA;;AASF;EACE;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,aDhdF;ECidE;EACA;;AAUJ;EACE;;AAGF;EACE;EACA;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aD/fF;ECggBE;EAEA;;AAOV;EAGE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;AACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aD7iBA;EC8iBA,OD1iBF;EC2iBE;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,aDnkBF;ECokBE;EACA;;AAIJ;EAEE;EACA;EACA,aD7kBA;EC8kBA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE,ODnlBN;EColBM,aDxlBJ;ECylBI;EACA;EACA;;AAEF;EACE,OD3lBN;EC4lBM,aD/lBJ;ECgmBI;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAUhB;AACE;EACA;EACA;EACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;EACA;AACA;AACA;AACA;AACA;AACA;AACA;EACA;EACA;;AAEA;EAME;EACA;AACA;;AAGF;EACE;EACA;EAGA;EAOA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,aD7qBM;EC8qBN;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA,ODrrBE;ECsrBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,ODjsBE;ECksBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,OD7sBE;EC8sBF;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAOV;EACE;EACA;EACA;;;AAGF;EACE,kBD9vBU;EC+vBV;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;;;AAEF;EAKE;EAEA;EACA;EACA;;;AAEF;EACE;EACA,ODj2BU;ECk2BV;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA,kBDp4BU;ECq4BV;EACA;EACA;EACA","file":"meetingroom.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/meetingroom.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;AACA;AACA;EACA;AACA;EACA;EACA;AACA;AACA;;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aD5CM;;AC+CR;EACE;EACA;EACA;EACA,YDhDI;ECiDJ,ODhDI;ECiDJ,aDrDM;ECsDN;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aD/EM;ECgFN;EAEA;EAGA;;AAIF;EACE;EACA;EAEA;EACA;EACA,OD3FI;EC4FJ,aDhGM;ECiGN;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;;AAOJ;AACE;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;AACA;AACA;AACA;EACA;EACA;EACA;AACA;EAEA;EACA;EACA;EACA,ODvJE;ECwJF;;AAEA;EACE;EACA;EAEA;EACA;EAEA,aDrKE;ECsKF;;AAEA;EAEE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAEA;EAEE;EACA,aD/LA;ECgMA;EACA;;AAEF;EAEE;EACA,aDtMA;ECuMA;EACA;;AAIJ;EAEE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA,aDvNA;ECwNA;EACA,ODtNF;;AC0NF;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,ODpOF;ECqOE;EACA;;AAGF;EACE;EACA,OD1OF;EC2OE;EACA;;AAGF;EACE,ODjPF;ECkPE;EACA;;AAGF;EACE,ODtPF;ECuPE;EACA;;AAMR;EAGE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EAEA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;AACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aDtSA;ECuSA,ODnSF;ECoSE;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,aD5TF;EC6TE;EACA;;AAGF;EAEE;EACA;EAIA;EACA;EACA;EACA;;AAIJ;EAEE;EACA;EACA,aDnVA;ECoVA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,aDzWF;EC0WE;EACA;;AAGF;EACE;EACA;EACA,OD7WJ;EC8WI,YDlXF;;ACqXA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAcF;EACE;EACA,aD7YF;EC8YE;EACA;;AAGF;EACE;EACA;EACA;EACA,ODlZJ;ECmZI,YDvZF;;AC0ZA;EACE;EACA;EACA,ODzZJ;EC0ZI,YD9ZF;;ACiaA;EACE;;AAGF;EACE;EACA,aDvaF;ECwaE;EACA,ODraJ;ECsaI;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,ODjbJ;ECkbI;EACA;EACA,aDxbF;ECybE;EACA;;AASF;EACE;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,aDhdF;ECidE;EACA;;AAUJ;EACE;;AAGF;EACE;EACA;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aD/fF;ECggBE;EAEA;;AAOV;EAGE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;AACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aD7iBA;EC8iBA,OD1iBF;EC2iBE;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,aDnkBF;ECokBE;EACA;;AAIJ;EAEE;EACA;EACA,aD7kBA;EC8kBA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE,ODnlBN;EColBM,aDxlBJ;ECylBI;EACA;EACA;;AAEF;EACE,OD3lBN;EC4lBM,aD/lBJ;ECgmBI;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAUhB;AACE;EACA;EACA;EACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;EACA;AACA;AACA;AACA;AACA;AACA;AACA;EACA;EACA;;AAEA;EAME;EACA;AACA;;AAGF;EACE;EACA;EAGA;EAOA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,aD7qBM;EC8qBN;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA,ODrrBE;ECsrBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,ODjsBE;ECksBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,OD7sBE;EC8sBF;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAOV;EACE;EACA;EACA;;;AAGF;EACE,kBD9vBU;EC+vBV;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;;;AAEF;EAKE;EAEA;EACA;EACA;;;AAEF;EACE;EACA,ODj2BU;ECk2BV;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA,kBDp4BU;ECq4BV;EACA;EACA;EACA","file":"meetingroom.css"}
\ No newline at end of file
diff --git a/src/statics/css/modal.css b/src/statics/css/modal.css
index 75dbb7c..94035f3 100644
--- a/src/statics/css/modal.css
+++ b/src/statics/css/modal.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/modal.css.map b/src/statics/css/modal.css.map
index d14d166..ad29615 100644
--- a/src/statics/css/modal.css.map
+++ b/src/statics/css/modal.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/modal.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA,kBD5EI;EC6EJ;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;;AAKR;EACE;EACA;EACA","file":"modal.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/modal.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA,kBD5EI;EC6EJ;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;;AAKR;EACE;EACA;EACA","file":"modal.css"}
\ No newline at end of file
diff --git a/src/statics/css/modalLarge.css b/src/statics/css/modalLarge.css
index 0ff41d8..84dce9c 100644
--- a/src/statics/css/modalLarge.css
+++ b/src/statics/css/modalLarge.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/modalLarge.css.map b/src/statics/css/modalLarge.css.map
index 86bd640..de2632f 100644
--- a/src/statics/css/modalLarge.css.map
+++ b/src/statics/css/modalLarge.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/modalLarge.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDlEI;ECmEJ;;AAGJ;EACE;EACA;;;AAIN;EACE;EACA;EACA","file":"modalLarge.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/modalLarge.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDlEI;ECmEJ;;AAGJ;EACE;EACA;;;AAIN;EACE;EACA;EACA","file":"modalLarge.css"}
\ No newline at end of file
diff --git a/src/statics/css/navbar.css b/src/statics/css/navbar.css
index 4c1ae03..035cb9f 100644
--- a/src/statics/css/navbar.css
+++ b/src/statics/css/navbar.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
@@ -66,11 +22,15 @@
   display: flex;
   margin-left: 15%;
 }
-.navbar .navbar-menus .menu {
+.navbar .navbar-menus a {
   cursor: pointer;
   text-decoration: none;
   color: #e4e4e4;
   margin-right: 46px;
+  transition: all 0.5s ease 0s;
+}
+.navbar .navbar-menus a:hover {
+  color: var(--textColor-darker);
 }
 .navbar .navbar-profile {
   display: flex;
diff --git a/src/statics/css/navbar.css.map b/src/statics/css/navbar.css.map
index 6b88965..a182a75 100644
--- a/src/statics/css/navbar.css.map
+++ b/src/statics/css/navbar.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbar.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,aDRY;ECSZ;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;;;AAIN;EACE,aDtEY;ECuEZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA","file":"navbar.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbar.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,aDRY;ECSZ;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;;;AAIN;EACE,aD3EY;EC4EZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA","file":"navbar.css"}
\ No newline at end of file
diff --git a/src/statics/css/navbarHome.css b/src/statics/css/navbarHome.css
index f887e4e..4cb532b 100644
--- a/src/statics/css/navbarHome.css
+++ b/src/statics/css/navbarHome.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
@@ -73,6 +29,7 @@
   text-decoration: none;
   color: var(--textColor-darkest);
   align-items: center;
+  transition: all 0.5s ease 0s;
 }
 .sub-navbar .sub-navbar-menus .sub-navbar-menu svg path {
   stroke: var(--textColor-darkest);
@@ -88,5 +45,11 @@
   padding-left: 7px;
   padding-right: 3px;
 }
+.sub-navbar .sub-navbar-menus .sub-navbar-menu:hover {
+  color: #6667ab;
+}
+.sub-navbar .sub-navbar-menus .sub-navbar-menu:hover svg path {
+  stroke: #6667ab;
+}
 
 /*# sourceMappingURL=navbarHome.css.map */
diff --git a/src/statics/css/navbarHome.css.map b/src/statics/css/navbarHome.css.map
index 850c2ba..fccc07d 100644
--- a/src/statics/css/navbarHome.css.map
+++ b/src/statics/css/navbarHome.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarHome.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA,aDJY;ECKZ;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAIJ;EACE;EACA;;AAEE;EACE;;AAKN;EACE;EACA","file":"navbarHome.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarHome.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA,aDJY;ECKZ;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIE;EACE;;AAIJ;EACE;EACA;;AAEE;EACE;;AAKN;EACE;EACA;;AAGJ;EACE,OD/CM;;ACiDJ;EACE,QDlDE","file":"navbarHome.css"}
\ No newline at end of file
diff --git a/src/statics/css/navbarLanding.css b/src/statics/css/navbarLanding.css
index 8be55cd..07c8b65 100644
--- a/src/statics/css/navbarLanding.css
+++ b/src/statics/css/navbarLanding.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/navbarLanding.css.map b/src/statics/css/navbarLanding.css.map
index 34079d4..3729e75 100644
--- a/src/statics/css/navbarLanding.css.map
+++ b/src/statics/css/navbarLanding.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarLanding.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,ODPM;ECQN","file":"navbarLanding.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarLanding.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,ODPM;ECQN","file":"navbarLanding.css"}
\ No newline at end of file
diff --git a/src/statics/css/navbarSettings.css b/src/statics/css/navbarSettings.css
index caff0b0..f969130 100644
--- a/src/statics/css/navbarSettings.css
+++ b/src/statics/css/navbarSettings.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/navbarSettings.css.map b/src/statics/css/navbarSettings.css.map
index 8a2d6da..fa6486b 100644
--- a/src/statics/css/navbarSettings.css.map
+++ b/src/statics/css/navbarSettings.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarSettings.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;;AACA;EAEE;EACA;;AAGA;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEE;EACE,kBDnBA;;ACqBF;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA","file":"navbarSettings.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarSettings.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;;AACA;EAEE;EACA;;AAGA;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEE;EACE,kBDnBA;;ACqBF;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA","file":"navbarSettings.css"}
\ No newline at end of file
diff --git a/src/statics/css/paginator.css b/src/statics/css/paginator.css
index 1b6d240..6faa11a 100644
--- a/src/statics/css/paginator.css
+++ b/src/statics/css/paginator.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/paginator.css.map b/src/statics/css/paginator.css.map
index 7ea55a8..b3ec11b 100644
--- a/src/statics/css/paginator.css.map
+++ b/src/statics/css/paginator.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/paginator.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA,aDHY;;ACIZ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBDjBM;ECkBN;;AACA;EACE;;AAIF;EACE;EACA","file":"paginator.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/paginator.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA,aDHY;;ACIZ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBDjBM;ECkBN;;AACA;EACE;;AAIF;EACE;EACA","file":"paginator.css"}
\ No newline at end of file
diff --git a/src/statics/css/settings.css b/src/statics/css/settings.css
index 8ed91b4..8ab8b48 100644
--- a/src/statics/css/settings.css
+++ b/src/statics/css/settings.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/settings.css.map b/src/statics/css/settings.css.map
index 6cb8a25..0b71296 100644
--- a/src/statics/css/settings.css.map
+++ b/src/statics/css/settings.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settings.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;;AACA;EACE;EACA;;AAEA;EACE,aDRQ;ECSR;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA","file":"settings.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settings.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;;AACA;EACE;EACA;;AAEA;EACE,aDRQ;ECSR;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA","file":"settings.css"}
\ No newline at end of file
diff --git a/src/statics/css/settings/studyInfoApplied.css b/src/statics/css/settings/studyInfoApplied.css
index a1b8ae2..abbe1d9 100644
--- a/src/statics/css/settings/studyInfoApplied.css
+++ b/src/statics/css/settings/studyInfoApplied.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/settings/studyInfoApplied.css.map b/src/statics/css/settings/studyInfoApplied.css.map
index 8dab34e..5fce2d5 100644
--- a/src/statics/css/settings/studyInfoApplied.css.map
+++ b/src/statics/css/settings/studyInfoApplied.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/settings/studyInfoApplied.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA","file":"studyInfoApplied.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/settings/studyInfoApplied.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA","file":"studyInfoApplied.css"}
\ No newline at end of file
diff --git a/src/statics/css/settings/studyPersonnel.css b/src/statics/css/settings/studyPersonnel.css
index 1892fbe..70afdce 100644
--- a/src/statics/css/settings/studyPersonnel.css
+++ b/src/statics/css/settings/studyPersonnel.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/settings/studyPersonnel.css.map b/src/statics/css/settings/studyPersonnel.css.map
index ad18839..ae7c4ef 100644
--- a/src/statics/css/settings/studyPersonnel.css.map
+++ b/src/statics/css/settings/studyPersonnel.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/settings/studyPersonnel.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA","file":"studyPersonnel.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/settings/studyPersonnel.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA","file":"studyPersonnel.css"}
\ No newline at end of file
diff --git a/src/statics/css/settingsAdmin.css b/src/statics/css/settingsAdmin.css
index 54f2365..8339f89 100644
--- a/src/statics/css/settingsAdmin.css
+++ b/src/statics/css/settingsAdmin.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/settingsAdmin.css.map b/src/statics/css/settingsAdmin.css.map
index 01fc3c2..0e63211 100644
--- a/src/statics/css/settingsAdmin.css.map
+++ b/src/statics/css/settingsAdmin.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settingsAdmin.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIE;EACE;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE,OD3DI;;AC6DN;EACE;;AAGJ;EACE;EACA;EACA,kBDpEM;ECqEN;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAIN;EAEE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE,ODnHI;;ACqHN;EACE;;AAGJ;EACE;EACA;EACA,kBD5HM;EC6HN;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA","file":"settingsAdmin.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settingsAdmin.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIE;EACE;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE,OD3DI;;AC6DN;EACE;;AAGJ;EACE;EACA;EACA,kBDpEM;ECqEN;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAIN;EAEE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE,ODnHI;;ACqHN;EACE;;AAGJ;EACE;EACA;EACA,kBD5HM;EC6HN;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA","file":"settingsAdmin.css"}
\ No newline at end of file
diff --git a/src/statics/css/settingsAlarm.css b/src/statics/css/settingsAlarm.css
index fb0b56e..83604b4 100644
--- a/src/statics/css/settingsAlarm.css
+++ b/src/statics/css/settingsAlarm.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/settingsAlarm.css.map b/src/statics/css/settingsAlarm.css.map
index 67e15e0..6a6421d 100644
--- a/src/statics/css/settingsAlarm.css.map
+++ b/src/statics/css/settingsAlarm.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settingsAlarm.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGE;EACE;;AACA;EACE;;AAGI;EACE;;AAEF;EACE,ODpBJ;;ACuBA;EACE;;AAEF;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE,OD7CE;;ACgDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAIN;EACE;EACA;;AAEF;EACE,ODvEQ;ECwER;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA,kBDhGQ;ECiGR;EACA;EACA;EACA;EACA","file":"settingsAlarm.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settingsAlarm.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGE;EACE;;AACA;EACE;;AAGI;EACE;;AAEF;EACE,ODpBJ;;ACuBA;EACE;;AAEF;EACE;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE,OD7CE;;ACgDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAIN;EACE;EACA;;AAEF;EACE,ODvEQ;ECwER;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA,kBDhGQ;ECiGR;EACA;EACA;EACA;EACA","file":"settingsAlarm.css"}
\ No newline at end of file
diff --git a/src/statics/css/settingsProfile.css b/src/statics/css/settingsProfile.css
index fab51a7..13e50dc 100644
--- a/src/statics/css/settingsProfile.css
+++ b/src/statics/css/settingsProfile.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/settingsProfile.css.map b/src/statics/css/settingsProfile.css.map
index cdcc405..9bd6b5c 100644
--- a/src/statics/css/settingsProfile.css.map
+++ b/src/statics/css/settingsProfile.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settingsProfile.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;;AACA;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA,kBD/DI;ECgEJ;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE,aD/HM;ECgIN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE","file":"settingsProfile.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settingsProfile.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;;AACA;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA,kBD/DI;ECgEJ;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE,aD/HM;ECgIN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AAEE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE","file":"settingsProfile.css"}
\ No newline at end of file
diff --git a/src/statics/css/settingsStudy.css b/src/statics/css/settingsStudy.css
index c5228a8..bfa953a 100644
--- a/src/statics/css/settingsStudy.css
+++ b/src/statics/css/settingsStudy.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/settingsStudy.css.map b/src/statics/css/settingsStudy.css.map
index 26e3452..5dafb22 100644
--- a/src/statics/css/settingsStudy.css.map
+++ b/src/statics/css/settingsStudy.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settingsStudy.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;AACA;EACE;;AACA;EACE;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EAEA;EACA;EACA;;AAGF;EACE;EAOA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAIN;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAIN;EACE;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA,ODrJI;ECsJJ;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;EAEA;;AAEF;EACE;EACA;EACA;EACA;;AAKR;EACE;EACA;EACA;EACA;EACA;EACA,kBDnMQ;ECoMR;;AAGF;EACE;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGI;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA,OD1OA;EC2OA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAMV;EAEE,aD5QU;EC6QV;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE,OD/WE;ECgXF;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EACE;EACA;EACA,kBD9YI;EC+YJ;EACA;EACA;EACA;;AAEA;EACE;;AAQF;EACE;EACA;EACA","file":"settingsStudy.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/settingsStudy.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AACA;EACE;;AACA;EACE;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAIN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EAEA;EACA;EACA;;AAGF;EACE;EAOA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAIN;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAIN;EACE;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA,ODrJI;ECsJJ;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;EAEA;;AAEF;EACE;EACA;EACA;EACA;;AAKR;EACE;EACA;EACA;EACA;EACA;EACA,kBDnMQ;ECoMR;;AAGF;EACE;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGI;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA,OD1OA;EC2OA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAMV;EAEE,aD5QU;EC6QV;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE,OD/WE;ECgXF;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EACE;EACA;EACA,kBD9YI;EC+YJ;EACA;EACA;EACA;;AAEA;EACE;;AAQF;EACE;EACA;EACA","file":"settingsStudy.css"}
\ No newline at end of file
diff --git a/src/statics/css/signup.css b/src/statics/css/signup.css
index 0dfd2ab..0bf3aed 100644
--- a/src/statics/css/signup.css
+++ b/src/statics/css/signup.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/signup.css.map b/src/statics/css/signup.css.map
index c9fdfd9..5e746c4 100644
--- a/src/statics/css/signup.css.map
+++ b/src/statics/css/signup.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/signup.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EAsDE,aDrDY;ECsDZ;EACA;EACA;EACA;EACA;;AAzDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAYF;EACE;EACA;;AACA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA,ODlFE;ECmFF;;AAGJ;EACE;EACA;EACA;EACA;EACA,kBD3FI;EC4FJ;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EA0BE;EACA;EACA;EACA;EACA;;AA7BA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE,ODhJF;ECiJE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAYN;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EAEA;EACA;;AAMR;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;;AACA;EACE,OD1MN;;AC4MI;EAGE;EACA;;AAOV;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,kBDrOA;ECsOA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA,OD1QE","file":"signup.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/signup.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EAsDE,aDrDY;ECsDZ;EACA;EACA;EACA;EACA;;AAzDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAYF;EACE;EACA;;AACA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA,ODlFE;ECmFF;;AAGJ;EACE;EACA;EACA;EACA;EACA,kBD3FI;EC4FJ;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EA0BE;EACA;EACA;EACA;EACA;;AA7BA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE,ODhJF;ECiJE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAYN;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EAEA;EACA;;AAMR;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;;AACA;EACE,OD1MN;;AC4MI;EAGE;EACA;;AAOV;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,kBDrOA;ECsOA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA,OD1QE","file":"signup.css"}
\ No newline at end of file
diff --git a/src/statics/css/studyRecruit.css b/src/statics/css/studyRecruit.css
index a83091d..c9e83e1 100644
--- a/src/statics/css/studyRecruit.css
+++ b/src/statics/css/studyRecruit.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/studyRecruit.css.map b/src/statics/css/studyRecruit.css.map
index cceb0eb..57c252a 100644
--- a/src/statics/css/studyRecruit.css.map
+++ b/src/statics/css/studyRecruit.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruit.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EAEE;;AAGJ;EACE;EACA;EACA;EACA,kBD5DM;EC6DN;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AACA;EACE;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EACE;;AAIN;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EAEA;;AAEF;EACE;EACA,ODhIE;ECiIF;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA","file":"studyRecruit.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruit.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EAEE;;AAGJ;EACE;EACA;EACA;EACA,kBD5DM;EC6DN;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AACA;EACE;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EACE;;AAIN;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EAEA;;AAEF;EACE;EACA,ODhIE;ECiIF;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA","file":"studyRecruit.css"}
\ No newline at end of file
diff --git a/src/statics/css/studyRecruitCreate.css b/src/statics/css/studyRecruitCreate.css
index 3e9f8a4..88e46d7 100644
--- a/src/statics/css/studyRecruitCreate.css
+++ b/src/statics/css/studyRecruitCreate.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/studyRecruitCreate.css.map b/src/statics/css/studyRecruitCreate.css.map
index 98f3d9e..04c2ac3 100644
--- a/src/statics/css/studyRecruitCreate.css.map
+++ b/src/statics/css/studyRecruitCreate.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAOA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA,kBDpEE;ECqEF;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;;AACA;EACE;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA,kBDrIM;ECsIN;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA,kBD1JQ;EC2JR;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAOA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA,kBDpEE;ECqEF;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;;AACA;EACE;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA,kBDrIM;ECsIN;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA,kBD1JQ;EC2JR;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"}
\ No newline at end of file
diff --git a/src/statics/css/studyRecruitDetail.css b/src/statics/css/studyRecruitDetail.css
index 4998673..5f80c63 100644
--- a/src/statics/css/studyRecruitDetail.css
+++ b/src/statics/css/studyRecruitDetail.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/studyRecruitDetail.css.map b/src/statics/css/studyRecruitDetail.css.map
index 0423411..c31e53f 100644
--- a/src/statics/css/studyRecruitDetail.css.map
+++ b/src/statics/css/studyRecruitDetail.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitDetail.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKN;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE,OD9HE;EC+HF;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA,kBD7JM;EC8JN;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,kBDzKM;EC0KN;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,kBDtLM;ECuLN;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitDetail.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitDetail.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKN;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE,OD9HE;EC+HF;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA,kBD7JM;EC8JN;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,kBDzKM;EC0KN;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,kBDtLM;ECuLN;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitDetail.css"}
\ No newline at end of file
diff --git a/src/statics/css/studyroom.css b/src/statics/css/studyroom.css
index 987b5dc..989a756 100644
--- a/src/statics/css/studyroom.css
+++ b/src/statics/css/studyroom.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/studyroom.css.map b/src/statics/css/studyroom.css.map
index bff714c..410f0e8 100644
--- a/src/statics/css/studyroom.css.map
+++ b/src/statics/css/studyroom.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyroom.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;AACA;AACA;EACA;AACA;EACA;EACA;AACA;AACA;;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aD5CM;;ACiDR;EACE;EACA;EACA;EACA,YDlDI;ECmDJ,ODlDI;ECmDJ,aDvDM;ECwDN;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aDjFM;ECkFN;EAEA;EAGA;;AAIF;EACE;EACA;EAEA;EACA;EACA,OD7FI;EC8FJ,aDlGM;ECmGN;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;;AAOJ;AACE;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EACE;;AAEA;EAEE;EACA;AACA;AACA;AACA;EACA;EACA;EACA;EACA;AAEA;EAIA;;AAIA;EACE;EACA;EAEA;EACA;EAEA,aDzKE;EC0KF;;AAEA;EAEE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAEA;EAEE;EACA,aDnMA;ECoMA;EACA;;AAEF;EAEE;EACA,aD1MA;EC2MA;EACA;;AAIJ;EAME;EACA;;AAEA;EACE;EACA,aD3NA;EC4NA;EACA;EACA,OD3NF;;AC+NF;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,ODzOF;EC0OE;EACA;;AAGF;EACE;EACA,OD/OF;ECgPE;EACA;;AAGF;EACE,ODtPF;ECuPE;EACA;;AAGF;EACE,OD3PF;EC4PE;EACA;;AAMR;EAGE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EAEA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;AACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aD3SA;EC4SA,ODxSF;ECySE;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,aDjUF;ECkUE;EACA;;AAGF;EAEE;EACA;EAIA;EACA;EACA;EACA;;AAIJ;EAEE;EACA;EACA,aDxVA;ECyVA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,aD9WF;EC+WE;EACA;;AAGF;EACE;EACA;EACA,ODlXJ;ECmXI,YDvXF;;AC0XA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAcF;EACE;EACA,aDlZF;ECmZE;EACA;;AAGF;EACE;EACA;EACA;EACA,ODvZJ;ECwZI,YD5ZF;;AC+ZA;EACE;EACA;EACA,OD9ZJ;EC+ZI,YDnaF;;ACsaA;EACE;;AAGF;EACE;EACA,aD5aF;EC6aE;EACA,OD1aJ;EC2aI;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,ODtbJ;ECubI;EACA;EACA,aD7bF;EC8bE;EACA;;AASF;EACE;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,aDrdF;ECsdE;EACA;;AAUJ;EACE;;AAGF;EACE;EACA;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aDpgBF;ECqgBE;EAEA;;AAOV;EAGE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAGA;EACA;AACA;EACA;EACA;EACA;AACA;AACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aDljBA;ECmjBA,OD/iBF;ECgjBE;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,aDxkBF;ECykBE;EACA;;AAIJ;EAIE,aDllBA;ECmlBA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE,ODvmBN;ECwmBM,aD5mBJ;EC6mBI;EACA;EACA;;AAEF;EACE,OD/mBN;ECgnBM,aDnnBJ;EConBI;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAUhB;AACE;EACA;EACA;EACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;EACA;AACA;AACA;AACA;AACA;AACA;AACA;EACA;EACA;;AAEA;EAME;EACA;AACA;;AAGF;EACE;EACA;EAGA;EAOA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,aD7sBM;EC8sBN;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA,ODrtBE;ECstBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,ODjuBE;ECkuBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,OD7uBE;EC8uBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,ODzvBE;EC0vBF;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,OD7wBE;EC8wBF;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,ODvxBE;ECwxBF;EACA;EACA;;;AAOV;EACE;EACA;EACA;;;AAGF;EACE,kBDxyBU;ECyyBV;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyroom.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyroom.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;AACA;AACA;EACA;AACA;EACA;EACA;AACA;AACA;;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aD5CM;;ACiDR;EACE;EACA;EACA;EACA,YDlDI;ECmDJ,ODlDI;ECmDJ,aDvDM;ECwDN;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aDjFM;ECkFN;EAEA;EAGA;;AAIF;EACE;EACA;EAEA;EACA;EACA,OD7FI;EC8FJ,aDlGM;ECmGN;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;EACA;EACA;;AAOJ;AACE;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EACE;;AAEA;EAEE;EACA;AACA;AACA;AACA;EACA;EACA;EACA;EACA;AAEA;EAIA;;AAIA;EACE;EACA;EAEA;EACA;EAEA,aDzKE;EC0KF;;AAEA;EAEE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;;AAEA;EAEE;EACA,aDnMA;ECoMA;EACA;;AAEF;EAEE;EACA,aD1MA;EC2MA;EACA;;AAIJ;EAME;EACA;;AAEA;EACE;EACA,aD3NA;EC4NA;EACA;EACA,OD3NF;;AC+NF;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,ODzOF;EC0OE;EACA;;AAGF;EACE;EACA,OD/OF;ECgPE;EACA;;AAGF;EACE,ODtPF;ECuPE;EACA;;AAGF;EACE,OD3PF;EC4PE;EACA;;AAMR;EAGE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EAEA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;AACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aD3SA;EC4SA,ODxSF;ECySE;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,aDjUF;ECkUE;EACA;;AAGF;EAEE;EACA;EAIA;EACA;EACA;EACA;;AAIJ;EAEE;EACA;EACA,aDxVA;ECyVA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,aD9WF;EC+WE;EACA;;AAGF;EACE;EACA;EACA,ODlXJ;ECmXI,YDvXF;;AC0XA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAcF;EACE;EACA,aDlZF;ECmZE;EACA;;AAGF;EACE;EACA;EACA;EACA,ODvZJ;ECwZI,YD5ZF;;AC+ZA;EACE;EACA;EACA,OD9ZJ;EC+ZI,YDnaF;;ACsaA;EACE;;AAGF;EACE;EACA,aD5aF;EC6aE;EACA,OD1aJ;EC2aI;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,ODtbJ;ECubI;EACA;EACA,aD7bF;EC8bE;EACA;;AASF;EACE;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,aDrdF;ECsdE;EACA;;AAUJ;EACE;;AAGF;EACE;EACA;EAEA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aDpgBF;ECqgBE;EAEA;;AAOV;EAGE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAGA;EACA;AACA;EACA;EACA;EACA;AACA;AACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA,aDljBA;ECmjBA,OD/iBF;ECgjBE;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA,aDxkBF;ECykBE;EACA;;AAIJ;EAIE,aDllBA;ECmlBA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE,ODvmBN;ECwmBM,aD5mBJ;EC6mBI;EACA;EACA;;AAEF;EACE,OD/mBN;ECgnBM,aDnnBJ;EConBI;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAUhB;AACE;EACA;EACA;EACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;EACA;AACA;AACA;AACA;AACA;AACA;AACA;EACA;EACA;;AAEA;EAME;EACA;AACA;;AAGF;EACE;EACA;EAGA;EAOA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,aD7sBM;EC8sBN;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA,ODrtBE;ECstBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,ODjuBE;ECkuBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,OD7uBE;EC8uBF;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,ODzvBE;EC0vBF;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,OD7wBE;EC8wBF;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,ODvxBE;ECwxBF;EACA;EACA;;;AAOV;EACE;EACA;EACA;;;AAGF;EACE,kBDxyBU;ECyyBV;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyroom.css"}
\ No newline at end of file
diff --git a/src/statics/css/timepicker.css b/src/statics/css/timepicker.css
index 323c43c..7c37b29 100644
--- a/src/statics/css/timepicker.css
+++ b/src/statics/css/timepicker.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/timepicker.css.map b/src/statics/css/timepicker.css.map
index 291c66d..0c154b9 100644
--- a/src/statics/css/timepicker.css.map
+++ b/src/statics/css/timepicker.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/timepicker.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDpEI;ECqEJ;;AAGJ;EACE;EACA;;;AAIN;EACE;EACA;EACA","file":"timepicker.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/timepicker.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDpEI;ECqEJ;;AAGJ;EACE;EACA;;;AAIN;EACE;EACA;EACA","file":"timepicker.css"}
\ No newline at end of file
diff --git a/src/statics/css/todayStudy.css b/src/statics/css/todayStudy.css
index 3fead6e..1fe8af7 100644
--- a/src/statics/css/todayStudy.css
+++ b/src/statics/css/todayStudy.css
@@ -1,48 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css");
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-  --textColor-todo: #6c757d;
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-  --board-textColor: #646464;
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-  --textColor-todo: #cdcdcd;
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-  --board-textColor: #ededed;
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 .hidden {
   display: none;
 }
diff --git a/src/statics/css/todayStudy.css.map b/src/statics/css/todayStudy.css.map
index 6318c86..317bf5a 100644
--- a/src/statics/css/todayStudy.css.map
+++ b/src/statics/css/todayStudy.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/todayStudy.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAQF;EACE;;;ACrEF;EACE;;;AAGF;EACE;EACA;EACA;;;AAEF;EAGE;EACA;;;AAQF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAGF;EACE;EACA,ODhCQ;;ACkCV;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA","file":"todayStudy.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/todayStudy.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;;;AAGF;EACE;EACA;EACA;;;AAEF;EAGE;EACA;;;AAQF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAGF;EACE;EACA,ODhCQ;;ACkCV;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA","file":"todayStudy.css"}
\ No newline at end of file
diff --git a/src/statics/scss/Layout/footer.scss b/src/statics/scss/Layout/footer.scss
new file mode 100644
index 0000000..ec6d49a
--- /dev/null
+++ b/src/statics/scss/Layout/footer.scss
@@ -0,0 +1,52 @@
+@import "../main.scss";
+.footer {
+  // height: 100px;
+  // margin-top: 120px;
+  background-color: var(--bgColor);
+  // position: absolute;
+  // bottom: 0;
+  // width: 100%;
+}
+
+.footer__contents {
+  width: 100%;
+  // max-width: 1280px;
+  background-color: var(--htmlbgColor);
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 150px;
+  // margin: 0 auto;
+}
+
+.footer__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.footer__rights {
+  border-top: 1px solid var(--textColor-darkest);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 64px;
+  & img {
+    margin: 3rem 0.8rem;
+    width: 36px;
+  }
+  color: var(--textColor-todo);
+}
+.footer__link {
+  display: flex;
+  gap: 30px;
+  text-decoration: none;
+  color: $mainColor;
+  a {
+    text-decoration: none;
+    color: var(--textColor-todo);
+  }
+  a:hover {
+    color: $mainColor;
+  }
+}
diff --git a/src/statics/scss/app.scss b/src/statics/scss/app.scss
new file mode 100644
index 0000000..d03e629
--- /dev/null
+++ b/src/statics/scss/app.scss
@@ -0,0 +1,8 @@
+@import "main.css";
+
+.outlet {
+  min-height: calc(100vh - 180px);
+  // padding-bottom: 120px;
+  // position: absolute;
+  // bottom: 0;
+}
diff --git a/src/statics/scss/darkUI.scss b/src/statics/scss/darkUI.scss
new file mode 100644
index 0000000..25aaba0
--- /dev/null
+++ b/src/statics/scss/darkUI.scss
@@ -0,0 +1,55 @@
+//light mode
+:root {
+  --htmlbgColor: #ffffff;
+  --bgColor: #fcfcfc;
+  --bgColor-light: #eaeaea;
+  --borderColor: #ededed;
+  --borderColor2: #d6d6d6;
+  --borderColor3: #e1e1e1;
+  --textWhite: #eeeeee;
+
+  --textColor: #252525;
+  --textColor-dark: #8a8a8a;
+  --textColor-darker: #a1a1a1;
+  --textColor-darkest: #c2c2c2;
+
+  --textColor-todo: #6c757d;
+
+  --github-01: #e8eaee;
+  --github-02: #d5d6f5;
+  --github-03: #9fa2e3;
+
+  --board-textColor: #646464;
+
+  --if-bgColor: #f9f9f9;
+  --if-borderColor: #e5e5e5;
+}
+
+// dark mode
+.ui-dark {
+  background-color: var(--htmlbgColor);
+  --htmlbgColor: #292929;
+  --bgColor: #373737;
+  --bgColor-light: #4a4a4a;
+  --bgColor-lighter: #565656;
+  --bgColor-dark: #1b1b1b;
+  --borderColor: #444444;
+  --borderColor2: #444444;
+  --borderColor3: #444444;
+
+  --textColor: #ededed;
+  --textColor-dark: #8a8a8a;
+  --textColor-darker: #6f6f6f;
+  --textColor-darkest: #838383;
+
+  --textColor-todo: #cdcdcd;
+
+  --github-01: rgba(102, 103, 171, 0.2);
+  --github-02: rgba(102, 103, 171, 0.4);
+  --github-03: rgba(102, 103, 171, 0.7);
+
+  --board-textColor: #ededed;
+
+  --if-bgColor: #323232;
+  --if-borderColor: #444444;
+}
diff --git a/src/statics/scss/main.scss b/src/statics/scss/main.scss
index e6444a7..a7720a0 100644
--- a/src/statics/scss/main.scss
+++ b/src/statics/scss/main.scss
@@ -7,62 +7,6 @@ $font-family: "Pretendard";
 $mainColor: #6667ab;
 $textColor: #6c757d;
 
-// light mode
-:root {
-  --htmlbgColor: #ffffff;
-  --bgColor: #fcfcfc;
-  --bgColor-light: #eaeaea;
-  --borderColor: #ededed;
-  --borderColor2: #d6d6d6;
-  --borderColor3: #e1e1e1;
-  --textWhite: #eeeeee;
-
-  --textColor: #252525;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #a1a1a1;
-  --textColor-darkest: #c2c2c2;
-
-  --textColor-todo: #6c757d;
-
-  --github-01: #e8eaee;
-  --github-02: #d5d6f5;
-  --github-03: #9fa2e3;
-
-  --board-textColor: #646464;
-
-  --if-bgColor: #f9f9f9;
-  --if-borderColor: #e5e5e5;
-}
-
-// dark mode
-.ui-dark {
-  background-color: var(--htmlbgColor);
-  --htmlbgColor: #292929;
-  --bgColor: #373737;
-  --bgColor-light: #4a4a4a;
-  --bgColor-lighter: #565656;
-  --bgColor-dark: #1b1b1b;
-  --borderColor: #444444;
-  --borderColor2: #444444;
-  --borderColor3: #444444;
-
-  --textColor: #ededed;
-  --textColor-dark: #8a8a8a;
-  --textColor-darker: #6f6f6f;
-  --textColor-darkest: #838383;
-
-  --textColor-todo: #cdcdcd;
-
-  --github-01: rgba(102, 103, 171, 0.2);
-  --github-02: rgba(102, 103, 171, 0.4);
-  --github-03: rgba(102, 103, 171, 0.7);
-
-  --board-textColor: #ededed;
-
-  --if-bgColor: #323232;
-  --if-borderColor: #444444;
-}
-
 // Size Section
 $borderRadius-xl: 10px;
 $borderRadius-m: 7px;
@@ -71,27 +15,3 @@ $borderRadius-xs: 3px;
 .hidden {
   display: none;
 }
-
-// default Tags
-// .btn-l {
-//   cursor: pointer;
-//   color: $mainColor;
-//   // background-color: $color2;
-//   border-radius: $borderRadius-m;
-//   border: 0px;
-
-// &:hover {
-//   color: $color2;
-//   background-color: $color1;
-// }
-// }
-// .btn-m {
-//   cursor: pointer;
-//   color: $mainColor;
-//   background-color: $mainColor;
-//   border-radius: $borderRadius-xs;
-//   border: 0px;
-// }
-
-// Component
-// @import "login";
diff --git a/src/statics/scss/navbar.scss b/src/statics/scss/navbar.scss
index 1c32ab7..a732483 100644
--- a/src/statics/scss/navbar.scss
+++ b/src/statics/scss/navbar.scss
@@ -18,11 +18,16 @@
   .navbar-menus {
     display: flex;
     margin-left: 15%;
-    .menu {
+    // transition: all 0.5s ease 0s;
+    a {
       cursor: pointer;
       text-decoration: none;
       color: #e4e4e4;
       margin-right: 46px;
+      transition: all 0.5s ease 0s;
+    }
+    a:hover {
+      color: var(--textColor-darker);
     }
   }
   .navbar-profile {
diff --git a/src/statics/scss/navbarHome.scss b/src/statics/scss/navbarHome.scss
index acca9fb..0aa4f2e 100644
--- a/src/statics/scss/navbarHome.scss
+++ b/src/statics/scss/navbarHome.scss
@@ -26,8 +26,10 @@
       text-decoration: none;
       color: var(--textColor-darkest);
       align-items: center;
+      transition: all 0.5s ease 0s;
 
       svg {
+        // transition: all 0.5s ease 0s;
         path {
           stroke: var(--textColor-darkest);
         }
@@ -48,5 +50,13 @@
         padding-right: 3px;
       }
     }
+    .sub-navbar-menu:hover {
+      color: $mainColor;
+      & svg {
+        path {
+          stroke: $mainColor;
+        }
+      }
+    }
   }
 }