diff --git a/config.example.json b/config/config.example.json
similarity index 100%
rename from config.example.json
rename to config/config.example.json
diff --git a/src/static/stylesheets/variables.scss b/config/variables.scss
similarity index 90%
rename from src/static/stylesheets/variables.scss
rename to config/variables.scss
index fefed8a..8a3db43 100644
--- a/src/static/stylesheets/variables.scss
+++ b/config/variables.scss
@@ -4,5 +4,5 @@ $white: #fdfdfd;
 $black: #2f2f2f;
 $blue: #144A98;
 $grey: #A9A9A9;
-$topbar: #1B4367;
+$navbar: #1B4367;
 $break-large: 992px;
diff --git a/src/components/About.js b/src/components/About.js
index 04b9dac..c55a98c 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Spinner, Header } from '.'
-import '../static/stylesheets/globals.scss'
-import contentStyle from '../static/stylesheets/content.scss'
+import '../stylesheets/globals.scss'
+import contentStyle from '../stylesheets/content.scss'
 import style from './About.scss'
 import MarkdownIt from 'markdown-it'
 
diff --git a/src/components/About.scss b/src/components/About.scss
index e2ff11e..6a89082 100644
--- a/src/components/About.scss
+++ b/src/components/About.scss
@@ -1,4 +1,4 @@
-@import "../static/stylesheets/variables.scss";
+@import "../../config/variables.scss";
 
 .about {
     flex: 30%;
diff --git a/src/components/Blog.js b/src/components/Blog.js
index af07241..c46b5d8 100644
--- a/src/components/Blog.js
+++ b/src/components/Blog.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Spinner, Header } from '.'
-import '../static/stylesheets/globals.scss'
+import '../stylesheets/globals.scss'
 import styles from './Blog.scss'
-import contentStyle from '../static/stylesheets/content.scss'
+import contentStyle from '../stylesheets/content.scss'
 
 export default class Blog extends Component {
   static propTypes = {
diff --git a/src/components/Blog.scss b/src/components/Blog.scss
index b2baa05..4f1ae7d 100644
--- a/src/components/Blog.scss
+++ b/src/components/Blog.scss
@@ -1,4 +1,4 @@
-@import "../static/stylesheets/variables.scss";
+@import "../../config/variables.scss";
 
 .postDate {
   margin-right: 50px;
diff --git a/src/components/Header.js b/src/components/Header.js
index 0137c4b..8b3bf19 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import '../static/stylesheets/globals.scss';
+import '../stylesheets/globals.scss';
 import styles from './Header.scss';
 
 export default class Header extends Component {
diff --git a/src/components/Header.scss b/src/components/Header.scss
index 197f916..7181fa1 100644
--- a/src/components/Header.scss
+++ b/src/components/Header.scss
@@ -1,4 +1,4 @@
-@import "../static/stylesheets/variables.scss";
+@import "../../config/variables.scss";
 
 .mainHeader {
   border-left: 5px solid $blue;
diff --git a/src/components/Home.js b/src/components/Home.js
index 82c32be..3d82ea8 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
-import config from '../../config.json'
-import '../static/stylesheets/globals.scss'
+import config from '../../config/config.json'
+import '../stylesheets/globals.scss'
 import styles from './Home.scss'
 
 export default class Home extends Component {
diff --git a/src/components/Home.scss b/src/components/Home.scss
index 6466d80..6cfc428 100644
--- a/src/components/Home.scss
+++ b/src/components/Home.scss
@@ -1,4 +1,4 @@
-@import "../static/stylesheets/variables.scss";
+@import "../../config/variables.scss";
 
 #coverPage {
   background: url(../static/images/benjamin-child-6msS8vT5pzw-unsplash.jpg) no-repeat center center fixed;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 5f55687..8d6f521 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
-import config from '../../config.json'
-import '../static/stylesheets/globals.scss'
+import config from '../../config/config.json'
+import '../stylesheets/globals.scss'
 import styles from './Navbar.scss'
 
 export default class Navbar extends Component {
diff --git a/src/components/Navbar.scss b/src/components/Navbar.scss
index 80b8ade..dbcbfe2 100644
--- a/src/components/Navbar.scss
+++ b/src/components/Navbar.scss
@@ -1,7 +1,7 @@
-@import "../static/stylesheets/variables.scss";
+@import "../../config/variables.scss";
 
 .navbar {
-  background-color: #1B4367;
+  background-color: $navbar;
   color: $white;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/src/components/NotFoundPage.js b/src/components/NotFoundPage.js
index 6df731b..99783a7 100644
--- a/src/components/NotFoundPage.js
+++ b/src/components/NotFoundPage.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Navbar, Header } from '.'
-import '../static/stylesheets/globals.scss'
-import contentStyle from '../static/stylesheets/content.scss'
+import '../stylesheets/globals.scss'
+import contentStyle from '../stylesheets/content.scss'
 
 export const NotFoundPage = (props) => {
   return (
diff --git a/src/components/NotFoundWrapper.js b/src/components/NotFoundWrapper.js
index 11cd73d..f36c363 100644
--- a/src/components/NotFoundWrapper.js
+++ b/src/components/NotFoundWrapper.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { Wrapper, NotFoundPage } from '.'
-import '../static/stylesheets/globals.scss'
+import '../stylesheets/globals.scss'
 
 export default class NotFoundWrapper extends Component {
   render () {
diff --git a/src/components/Post.js b/src/components/Post.js
index c7aade5..869acfd 100644
--- a/src/components/Post.js
+++ b/src/components/Post.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Spinner, Header, Navbar } from '.'
-import '../static/stylesheets/globals.scss'
-import contentStyle from '../static/stylesheets/content.scss'
+import '../stylesheets/globals.scss'
+import contentStyle from '../stylesheets/content.scss'
 import styles from './Post.scss'
 import MarkdownIt from 'markdown-it'
 import fm from 'front-matter'
diff --git a/src/components/Post.scss b/src/components/Post.scss
index a1c7091..23a34e8 100644
--- a/src/components/Post.scss
+++ b/src/components/Post.scss
@@ -1,4 +1,4 @@
-@import "../static/stylesheets/variables.scss";
+@import "../../config/variables.scss";
 
 .postContent {
   clear: both;
diff --git a/src/components/Spinner.js b/src/components/Spinner.js
index e17adc4..a1a8d43 100644
--- a/src/components/Spinner.js
+++ b/src/components/Spinner.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import '../static/stylesheets/globals.scss'
+import '../stylesheets/globals.scss'
 import styles from './Spinner.scss'
 
 export default class Spinner extends Component {
diff --git a/src/components/Spinner.scss b/src/components/Spinner.scss
index 09d1fff..1b0b98f 100644
--- a/src/components/Spinner.scss
+++ b/src/components/Spinner.scss
@@ -1,7 +1,7 @@
 /*
   from https://loading.io/css/
 */
-@import "../static/stylesheets/variables.scss";
+@import "../../config/variables.scss";
 
 .spinnerWrapper {
   width: 100%;
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
index da7d37a..40625bf 100644
--- a/src/components/Wrapper.js
+++ b/src/components/Wrapper.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import '../static/stylesheets/globals.scss'
+import '../stylesheets/globals.scss'
 import styles from './Wrapper.scss'
 
 export default class Wrapper extends Component {
diff --git a/src/components/Wrapper.scss b/src/components/Wrapper.scss
index 9c29e5f..05fa8c0 100644
--- a/src/components/Wrapper.scss
+++ b/src/components/Wrapper.scss
@@ -1,11 +1,11 @@
-@import "../static/stylesheets/variables.scss";
+@import "../../config/variables.scss";
 
 .centerContent {
   text-align: center;
 }
 
 .flexWrap {
-  @media only screen and (min-width: 1024px) {
+  @media only screen and (min-width: $break-large) {
     display: flex;
   }
 }
diff --git a/src/static/stylesheets/content.scss b/src/stylesheets/content.scss
similarity index 88%
rename from src/static/stylesheets/content.scss
rename to src/stylesheets/content.scss
index 1845588..82bf16b 100644
--- a/src/static/stylesheets/content.scss
+++ b/src/stylesheets/content.scss
@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import "../../config/variables.scss";
 
 .contentWrapper {
   display: inline-block;
diff --git a/src/static/stylesheets/globals.scss b/src/stylesheets/globals.scss
similarity index 84%
rename from src/static/stylesheets/globals.scss
rename to src/stylesheets/globals.scss
index 8685502..ff3b8e8 100644
--- a/src/static/stylesheets/globals.scss
+++ b/src/stylesheets/globals.scss
@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import "../../config/variables.scss";
 
 :global(body, html) {
     height: 100%;
diff --git a/src/utils/api.js b/src/utils/api.js
index 60ce33c..c816d49 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import jsonfile from 'jsonfile'
 import path from 'path'
-import config from '../../config.json'
+import config from '../../config/config.json'
 
 export function getData (reqPath = '') {
   if (reqPath === '') {
diff --git a/src/utils/scanner.js b/src/utils/scanner.js
index 91a32a5..f382011 100644
--- a/src/utils/scanner.js
+++ b/src/utils/scanner.js
@@ -1,6 +1,6 @@
 import fs from 'fs'
 import path from 'path'
-import config from '../../config.json'
+import config from '../../config/config.json'
 import fm from 'front-matter'
 import moment from 'moment'
 import jsonfile from 'jsonfile'