diff --git a/src/assets/_global_layout.scss b/src/assets/_global_layout.scss
deleted file mode 100644
index 065f327b..00000000
--- a/src/assets/_global_layout.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-// form inputs
-.funky-box {
-  background: $light;
-  padding: 1em;
-  border-radius: 0.25em;
-  border: 1px solid $main_color;
-  border-bottom: 3px solid $main_color_strong;
-
-  &:focus {
-    color: $main_color_strong;
-  }
-}
-
-input, textarea,
-select {
-  @extend .funky-box;
-}
-
-textarea {
-  margin-top: 1em;
-  border-left: 3px solid $main_color_strong;
-}
-
-
-// buttons
-.btn {
-  display: inline-block;
-  padding: 1em;
-  border-radius: 0.25em;
-  background: $main_color_strong;
-  color: $light;
-  border: 0;
-  margin: 1em;
-  min-height: 1.5rem;
-}
-
-.btn-block {
-  display: block;
-  font-weight: 600;
-  font-size: 1.25em;
-  text-align: center;
-}
-
-a {
-  text-decoration: none;
-
-  nav & {
-
-    @extend .btn-outline, .btn;
-    display: inline-block;
-    margin: 0.5em;
-    padding: 0.5em;
-    color: #000;
-    font-size: 1rem;
-  }
-}
-
-.home_link {
-  text-decoration: none;
-}
-
-.btn-outline {
-  background: $light;
-  border: solid 1px $main_color_strong;
-}
-
-.striked {
-  @extend .btn-outline;
-  color: $main_color_strong;
-}
diff --git a/src/assets/scss/_global_layout.scss b/src/assets/scss/_global_layout.scss
new file mode 100644
index 00000000..2210bfbc
--- /dev/null
+++ b/src/assets/scss/_global_layout.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+body {
+  background-color: #fff;
+}
\ No newline at end of file
diff --git a/src/assets/scss/atoms/_buttons.scss b/src/assets/scss/atoms/_buttons.scss
new file mode 100644
index 00000000..b8505830
--- /dev/null
+++ b/src/assets/scss/atoms/_buttons.scss
@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+// buttons
+.btn {
+  display: inline-block;
+  padding: 1em;
+  border-radius: 0.25em;
+  background: $primary_color;
+  // color: $light;
+  border: 0;
+  margin: 1em;
+  min-height: 1.5rem;
+}
+
+.btn-block {
+  display: block;
+  font-weight: 600;
+  font-size: 1.25em;
+  text-align: center;
+}
+
+.btn-outline {
+  // background: $light;
+  border: solid 1px $primary_color;
+}
+
+.striked {
+  @extend .btn-outline;
+  color: $primary_color;
+}
diff --git a/src/assets/_font.scss b/src/assets/scss/atoms/_fonts.scss
similarity index 67%
rename from src/assets/_font.scss
rename to src/assets/scss/atoms/_fonts.scss
index 6c1bb39d..f6c59b0b 100644
--- a/src/assets/_font.scss
+++ b/src/assets/scss/atoms/_fonts.scss
@@ -1,7 +1,15 @@
+@charset "UTF-8";
+
 body {
   font-family: "DejaVu Sans Light", "Arial", "DejaVu Sans Mono";
+  font-size: 1.4rem;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: "Brie Light", "Arial", "DejaVu Sans Mono";
 }
diff --git a/src/assets/scss/atoms/_forms.scss b/src/assets/scss/atoms/_forms.scss
new file mode 100644
index 00000000..9aac85d5
--- /dev/null
+++ b/src/assets/scss/atoms/_forms.scss
@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+// form inputs
+.funky-box {
+  // background: $light;
+  padding: 1em;
+  border-radius: 0.25em;
+  border-bottom: 3px solid $primary_color;
+
+  &:focus {
+    color: $primary_color;
+  }
+}
+
+input,
+textarea,
+select {
+  @extend .funky-box;
+}
+
+textarea {
+  margin-top: 1em;
+  border-left: 3px solid $primary_color;
+}
diff --git a/src/assets/scss/atoms/_headings.scss b/src/assets/scss/atoms/_headings.scss
new file mode 100644
index 00000000..03bb3631
--- /dev/null
+++ b/src/assets/scss/atoms/_headings.scss
@@ -0,0 +1 @@
+@charset "UTF-8";
\ No newline at end of file
diff --git a/src/assets/scss/atoms/_images.scss b/src/assets/scss/atoms/_images.scss
new file mode 100644
index 00000000..03bb3631
--- /dev/null
+++ b/src/assets/scss/atoms/_images.scss
@@ -0,0 +1 @@
+@charset "UTF-8";
\ No newline at end of file
diff --git a/src/assets/scss/atoms/_links.scss b/src/assets/scss/atoms/_links.scss
new file mode 100644
index 00000000..0148c21f
--- /dev/null
+++ b/src/assets/scss/atoms/_links.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+a {
+  text-decoration: none;
+
+  nav & {
+    @extend .btn-outline, .btn;
+    display: inline-block;
+    margin: 0.5em;
+    padding: 0.5em;
+    color: #000;
+    font-size: 1rem;
+  }
+}
+
+.home_link {
+  text-decoration: none;
+}
diff --git a/src/assets/scss/atoms/_lists.scss b/src/assets/scss/atoms/_lists.scss
new file mode 100644
index 00000000..03bb3631
--- /dev/null
+++ b/src/assets/scss/atoms/_lists.scss
@@ -0,0 +1 @@
+@charset "UTF-8";
\ No newline at end of file
diff --git a/src/assets/_debug.scss b/src/assets/scss/molecules/_debug.scss
similarity index 100%
rename from src/assets/_debug.scss
rename to src/assets/scss/molecules/_debug.scss
diff --git a/src/assets/_logo.scss b/src/assets/scss/molecules/_logo.scss
similarity index 72%
rename from src/assets/_logo.scss
rename to src/assets/scss/molecules/_logo.scss
index 41ee0682..1b1ebd96 100644
--- a/src/assets/_logo.scss
+++ b/src/assets/scss/molecules/_logo.scss
@@ -1,5 +1,5 @@
 .logo_first {
-  color: $logo_color;
+  color: $font_color;
 }
 
 .logo_second {
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
new file mode 100644
index 00000000..a1f4c378
--- /dev/null
+++ b/src/assets/scss/variables.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+$primary_color: #FFD52C;
+
+$font_color: #000;
+
+$logo_color_2: #8A9B51;
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
deleted file mode 100644
index 9bff7463..00000000
--- a/src/assets/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$main_color: #fdffbf;
-$main_color_strong: #FFD52C;
-$second_color: cyan;
-$light: white;
-
-$logo_color: #000;
-$logo_color_2: #8A9B51;
diff --git a/src/styles.scss b/src/styles.scss
index de03bb14..2ed2020c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,6 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
-@import "assets/variables";
-@import "assets/font";
-@import "assets/global_layout";
-@import "assets/logo";
-@import "assets/debug";
+@import "assets/scss/variables";
+@import "assets/scss/global_layout";
+
+@import "assets/scss/atoms/fonts";
+@import "assets/scss/atoms/headings";
+@import "assets/scss/atoms/buttons";
+@import "assets/scss/atoms/links";
+@import "assets/scss/atoms/forms";
+@import "assets/scss/atoms/lists";
+@import "assets/scss/atoms/images";
+
+@import "assets/scss/molecules/logo";
+@import "assets/scss/molecules/debug";