diff --git a/index.html b/index.html
deleted file mode 100644
index eefcb81d5..000000000
--- a/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>Beautiful Atlas</title>
-    <link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.css' rel='stylesheet'>
-  </head>
-  <body style='display: flex; width: 100%'>
-    <div id="root" style='display: flex; width: 100%'></div>
-    <script src="/static/bundle.js"></script>
-    <script type="text/javascript">
-      // if ('serviceWorker' in navigator) {
-      //   navigator.serviceWorker.register('/service-worker.js')
-      //   .then(function(reg) {
-      //     console.log('SW registration succeeded');
-      //   }).catch(function(error) {
-      //     console.log('SW registration failed: ' + error);
-      //   });
-      // };
-    </script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index 1c4be6d3c..802c191f3 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,8 @@
     "babel-preset-react-hmre": "^1.0.1",
     "babel-preset-stage-0": "^6.5.0",
     "debug": "^2.2.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "html-webpack-plugin": "^2.16.1",
     "http-errors": "^1.4.0",
     "isomorphic-fetch": "^2.2.1",
     "jsonwebtoken": "^5.7.0",
diff --git a/server/routes.js b/server/routes.js
index a83dc4e1f..3c0161f9c 100644
--- a/server/routes.js
+++ b/server/routes.js
@@ -25,7 +25,7 @@ router.get('/service-worker.js', async (ctx) => {
 });
 
 router.get('*', async (ctx) => {
-  const stats = await sendfile(ctx, path.join(__dirname, 'static/index.html'));
+  const stats = await sendfile(ctx, path.join(__dirname, './static/dev.html'));
   if (!ctx.status) ctx.throw(httpErrors.NotFound());
 });
 
diff --git a/server/static/dev.html b/server/static/dev.html
new file mode 100644
index 000000000..dc5538d44
--- /dev/null
+++ b/server/static/dev.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Beautiful Atlas</title>
+    <link href="/static/styles.css" rel="stylesheet"></head>
+  </head>
+  <body style='display: flex; width: 100%'>
+    <div id="root" style='display: flex; width: 100%'></div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/server/static/index.html b/server/static/index.html
index eefcb81d5..25ae71cc1 100644
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -2,11 +2,9 @@
 <html>
   <head>
     <title>Beautiful Atlas</title>
-    <link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.css' rel='stylesheet'>
   </head>
   <body style='display: flex; width: 100%'>
     <div id="root" style='display: flex; width: 100%'></div>
-    <script src="/static/bundle.js"></script>
     <script type="text/javascript">
       // if ('serviceWorker' in navigator) {
       //   navigator.serviceWorker.register('/service-worker.js')
diff --git a/src/fonts/atlas/atlas.css b/src/fonts/atlas/atlas.css
index 73f6b3478..b7d6134e8 100644
--- a/src/fonts/atlas/atlas.css
+++ b/src/fonts/atlas/atlas.css
@@ -7,16 +7,16 @@
 
 @font-face {
   font-family: 'Atlas Grotesk';
-  src: url('./AtlasGrotesk-RegularItalic-Web.woff') format('woff');
-  font-weight: normal;
-  font-style: italic;
+  src: url('./AtlasGrotesk-Medium-Web.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
 }
 
 @font-face {
   font-family: 'Atlas Grotesk';
-  src: url('./AtlasGrotesk-Medium-Web.woff') format('woff');
-  font-weight: bold;
-  font-style: normal;
+  src: url('./AtlasGrotesk-RegularItalic-Web.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
 }
 
 @font-face {
diff --git a/src/index.js b/src/index.js
index 1da6da363..de450807a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,9 @@ import auth from 'utils/auth';
 
 import reducers from 'reducers';
 
+import 'normalize.css/normalize.css';
 import 'utils/base-styles.scss';
+import 'fonts/atlas/atlas.css';
 
 import Home from 'scenes/Home';
 // import App from 'scenes/App';
diff --git a/src/scenes/App/App.js b/src/scenes/App/App.js
index 288d0d322..369793fc3 100644
--- a/src/scenes/App/App.js
+++ b/src/scenes/App/App.js
@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import 'normalize.css/normalize.css';
-import '../../fonts/atlas/atlas.css';
 import styles from './App.scss';
 
 import {
diff --git a/webpack.config.js b/webpack.config.js
index 244e0ab5c..09b1eca5c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,7 @@
 var path = require('path');
 var webpack = require('webpack');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 // Load .env
 require('dotenv').config();
@@ -23,9 +25,15 @@ module.exports = {
         include: path.join(__dirname, 'src')
       },
       { test: /\.json$/, loader: 'json-loader' },
-      { test: /\.s?css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap' },
+      {
+        test: /\.s?css$/,
+        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap')
+      },
       { test: /\.(png|jpg|svg)$/, loader: 'url-loader' }, // inline base64 URLs for <=8k images, direct URLs for the rest
-      { test: /\.woff$/, loader: 'url-loader?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
+      {
+        test: /\.woff$/,
+        loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]'
+      },
     ]
   },
   resolve: {
@@ -38,5 +46,10 @@ module.exports = {
     new webpack.ProvidePlugin({
       'fetch': 'imports?this=>global!exports?global.fetch!isomorphic-fetch'
     }),
+    new ExtractTextPlugin("styles.css"),
+    new HtmlWebpackPlugin({
+      title: 'Atlas',
+      template: 'server/static/index.html',
+    }),
   ]
 };
\ No newline at end of file
