diff --git a/src/app/layouts/AppLayout.jsx b/src/app/layouts/AppLayout.jsx
index e7ff8995..711d8618 100644
--- a/src/app/layouts/AppLayout.jsx
+++ b/src/app/layouts/AppLayout.jsx
@@ -1,11 +1,13 @@
-import Header from './Header'
-import Footer from './Footer'
+import Header from './header/Header'
+import Footer from './footer/Footer'
+
+import classNames from './styles.scss'
 
 export default function AppLayout({ children }) {
   return (
-    <div className="wrapper">
+    <div className={classNames.wrapper}>
       <Header />
-      <div className="main">
+      <div className={classNames.main}>
         {children}
       </div>
       <Footer />
diff --git a/src/app/layouts/Footer.jsx b/src/app/layouts/footer/Footer.jsx
similarity index 54%
rename from src/app/layouts/Footer.jsx
rename to src/app/layouts/footer/Footer.jsx
index ae460d70..9d06453f 100644
--- a/src/app/layouts/Footer.jsx
+++ b/src/app/layouts/footer/Footer.jsx
@@ -1,9 +1,11 @@
 import { Component } from 'react'
 
+import classNames from './styles.scss'
+
 export default class Footer extends Component {
   render() {
     return (
-      <footer>Footer</footer>
+      <footer className={classNames.footer}>Footer</footer>
     )
   }
 }
diff --git a/src/app/layouts/footer/styles.scss b/src/app/layouts/footer/styles.scss
new file mode 100644
index 00000000..8b59f167
--- /dev/null
+++ b/src/app/layouts/footer/styles.scss
@@ -0,0 +1,7 @@
+@import 'variables';
+
+.footer {
+  height: $footer-height;
+  background-color: $primary;
+  color: #fff;
+}
\ No newline at end of file
diff --git a/src/app/layouts/Header.jsx b/src/app/layouts/header/Header.jsx
similarity index 74%
rename from src/app/layouts/Header.jsx
rename to src/app/layouts/header/Header.jsx
index 08e2a718..0936058b 100644
--- a/src/app/layouts/Header.jsx
+++ b/src/app/layouts/header/Header.jsx
@@ -1,10 +1,12 @@
 import { Component } from 'react'
 import { Link } from 'common/router/Link'
 
+import classNames from './styles.scss'
+
 export default class Header extends Component {
   render() {
     return (
-      <header>
+      <header className={classNames.header}>
         <Link to="root">Logo</Link>
         <Link to="test">test</Link>
       </header>
diff --git a/src/app/layouts/header/styles.scss b/src/app/layouts/header/styles.scss
new file mode 100644
index 00000000..51de9ee5
--- /dev/null
+++ b/src/app/layouts/header/styles.scss
@@ -0,0 +1,8 @@
+@import 'variables';
+
+.header {
+  height: $header-height;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-around;
+}
\ No newline at end of file
diff --git a/src/app/layouts/styles.scss b/src/app/layouts/styles.scss
new file mode 100644
index 00000000..959e2903
--- /dev/null
+++ b/src/app/layouts/styles.scss
@@ -0,0 +1,11 @@
+@import 'variables';
+
+.wrapper {
+  height: 100%;
+  background-color: $gray-100;
+}
+
+.main {
+  height: calc(100% - #{$header-height} - #{$footer-height});
+  overflow: auto;
+}
diff --git a/src/app/pages/auth/LoginForm.jsx b/src/app/pages/auth/LoginForm.jsx
index 70b8a428..9e591566 100644
--- a/src/app/pages/auth/LoginForm.jsx
+++ b/src/app/pages/auth/LoginForm.jsx
@@ -1,4 +1,5 @@
 import { TextField } from 'common/forms'
+import classNames from './styles.scss'
 
 export default function LoginForm({ handleSubmit }) {
   return (
@@ -6,7 +7,7 @@ export default function LoginForm({ handleSubmit }) {
       <h2>Login</h2>
       <TextField name="email" label="Email" type="email" />
       <TextField name="password" label="Password" type="password" />
-      <button>Login</button>
+      <button className={classNames.btn}>Login</button>
     </form>
   )
 }
diff --git a/src/app/pages/auth/styles.scss b/src/app/pages/auth/styles.scss
new file mode 100644
index 00000000..3618eb35
--- /dev/null
+++ b/src/app/pages/auth/styles.scss
@@ -0,0 +1,5 @@
+@import 'variables';
+
+.btn {
+  background: $secondary;
+}
\ No newline at end of file
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
deleted file mode 100644
index 67112585..00000000
--- a/src/styles/_layout.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.wrapper {
-  height: 100%;
-  background-color: $gray-100;
-}
-
-.main {
-  height: calc(100% - #{$header-height} - #{$footer-height});
-  overflow: auto;
-}
-
-header {
-  height: $header-height;
-  background-color: #fff;
-  display: flex;
-  justify-content: space-around;
-}
-
-footer {
-  height: $footer-height;
-  background-color: $primary;
-  color: #fff;
-}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 3e7f2b38..a210f3e2 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,3 +1,6 @@
+@import "functions";
+@import "mixins";
+
 /* stylelint-disable number-leading-zero  */
 // Variables
 //
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 038c5892..7a7d047e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,9 +1,10 @@
 @import "bootstrap";
-@import "./layout";
 
-html,
-body,
-#root {
-  height: 100%;
-  display: block;
+:global {
+  html,
+  body,
+  #root {
+    height: 100%;
+    display: block;
+  }
 }