diff --git a/src/components/Layout.js b/src/components/Layout.js
index f565a9c..4c5cea6 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -2,7 +2,7 @@ import React from 'react'
 import Helmet from 'react-helmet'
 
 import Navbar from './Navbar'
-import './all.sass'
+import '../css/main.scss'
 
 const TemplateWrapper = ({ children }) => (
   <div>
diff --git a/src/components/PostList.js b/src/components/PostList.js
index c77b682..be31892 100644
--- a/src/components/PostList.js
+++ b/src/components/PostList.js
@@ -14,8 +14,7 @@ export default class IndexPage extends React.Component {
           </div>
           {posts.map(({ node: post }) => (
             <div
-              className="content"
-              style={{ border: '1px solid #eaecee', padding: '2em 4em' }}
+              className="blog-post"
               key={post.id}
             >
               <p>
diff --git a/src/components/all.sass b/src/components/all.sass
deleted file mode 100644
index e69de29..0000000
diff --git a/src/css/base.scss b/src/css/base.scss
new file mode 100644
index 0000000..d0c646b
--- /dev/null
+++ b/src/css/base.scss
@@ -0,0 +1,8 @@
+body {
+  background: $color-background;
+}
+
+.blog-post {
+  background: white;
+  padding: 0 0 2rem;
+}
\ No newline at end of file
diff --git a/src/css/fonts.scss b/src/css/fonts.scss
new file mode 100644
index 0000000..d1470d9
--- /dev/null
+++ b/src/css/fonts.scss
@@ -0,0 +1,3 @@
+body {
+  font-family: monospace;
+}
\ No newline at end of file
diff --git a/src/css/main.scss b/src/css/main.scss
new file mode 100644
index 0000000..314acaf
--- /dev/null
+++ b/src/css/main.scss
@@ -0,0 +1,4 @@
+/* DNS 2019 STYLE */
+@import 'variables.scss';
+@import 'fonts.scss';
+@import 'base.scss';
\ No newline at end of file
diff --git a/src/css/variables.scss b/src/css/variables.scss
new file mode 100644
index 0000000..6682555
--- /dev/null
+++ b/src/css/variables.scss
@@ -0,0 +1 @@
+$color-background: orange;
\ No newline at end of file