diff --git a/docs/background.jpeg b/docs/background.jpeg
new file mode 100644
index 00000000..0e0c7ee1
Binary files /dev/null and b/docs/background.jpeg differ
diff --git a/docs/index.html b/docs/index.html
index 0db60e05..9a7e5755 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,50 +1,4 @@
-<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/g/bootstrap@4.0.0-alpha.6(css/bootstrap.min.css)" rel="stylesheet"><script src="https://cdn.jsdelivr.net/g/jquery@3.2.1,tether@1.4.0,bootstrap@4.0.0-alpha.6,modernizr@3.3.1,detectizr@2.2.0"></script><title>Terminus</title><style>body {
-    font-family: 'Source Sans Pro', sans-serif;
-    background: #111;
-    color: #ccc;
-    min-height: 100vh;
-    background-image: radial-gradient(#111, #000);
-}
-
-h1 {
-    font-size: 64px;
-}
-
-h1, h2, h3, h5 {
-    font-weight: 300;
-    color: white;
-}
-
-.btn i + span,
-.nav-link i + span {
-    margin-left: 10px;
-}
-
-.btn-outline-primary {
-    color: #b6e7ff !important;
-}
-
-.nav-link {
-    font-size: 22px;
-}
-
-video, img {
-    max-width: 100%;
-    box-shadow: 0 0 50px black;
-}
-</style><script defer>setTimeout(function () {
-    /*
-    if (Detectizr.os.name == 'windows') {
-        $('[href="#windows"]').tab('show')
-    }
-    if (Detectizr.os.name == 'mac os') {
-        $('[href="#macos"]').tab('show')
-    }
-    if (Detectizr.os.name == 'linux') {
-        $('[href="#linux"]').tab('show')
-    }
-    */
-})</script></head><body><div class="container mt-5 mb-5"><div class="text-center"><h1>Terminus</h1><h5>A terminal for a more modern age</h5><h2 class="text-muted">alpha</h2></div><div class="d-flex flex-row mt-5 mb-5"><ul class="nav nav-pills flex-column mr-5" style="min-width: 200px;"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#windows" role="tab"><i class="fa fa-windows"></i><span>Windows</span></a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#macos" role="tab"><i class="fa fa-apple"></i><span>macOS</span></a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#linux" role="tab"><i class="fa fa-linux"></i><span>Linux</span></a></li></ul><div class="tab-content"><div class="tab-pane active" id="windows" role="tabpanel"><div class="row"><div class="col-6"><video src="videos/windows.mp4" autoplay loop></video></div><div class="col-6"><h3>A proper Windows experience</h3><p> <b>Clink </b>provides tab completion, readline-style editing and persistent command history on Windows.</p><p>Also supported:<ul> <li>Classic CMD</li><li>PowerShell </li><li>Bash on Windows </li></ul></p></div></div></div><div class="tab-pane" id="macos" role="tabpanel"><div class="row"><div class="col-6"><!--video(src='videos/windows.mp4', autoplay, loop)--></div><div class="col-6"><h3>Well...</h3><p>Not much to say here, it just works.</p></div></div></div><div class="tab-pane" id="linux" role="tabpanel"><div class="row"><div class="col-6"><img src="linux.png"></div><div class="col-6"><p><ul> <li>Spawn with a global hotkey</li><li>Tabs persist after restart</li><li>Auto-dock to any side of any screen</li><li>Full Unicode and double-width character support</li></ul></p></div></div></div></div></div><div class="text-center"><div class="mt-3 mb-3"><h2></h2><div><div class="btn-group mt-3 mb-1"><a class="btn btn-lg btn-outline-success" href="https://github.com/Eugeny/terminus/releases/latest" target="_blank"><i class="fa fa-download"></i><span>Downloads</span></a><a class="btn btn-lg btn-outline-secondary" href="https://github.com/Eugeny/terminus" target="_blank"><i class="fa fa-github"></i><span>GitHub</span></a></div></div><small class="text-muted">EXE, DMG, DEB, RPM, TGZ</small></div></div><div class="row mt-5"><div class="col-6"><h3>User experience</h3><ul><li>Spawn and hide with a global hotkey</li><li>Fully customizable hotkey schema</li><li>Restores tabs </li><li>Drag in a file to paste the path</li><li>Click paths and URLs to open in browser/file manager</li><li>Keeps the current directory in new tabs</li></ul></div><div class="col-6"><div class="mb-5"><h3>Customizable</h3><p>Multiple app themes and a myriad of community color schemes for the terminal. Color scheme editor included.</p></div><div>       <h3>Infinitely extensible</h3><p>Install plugins from the NPM repository, or create your own with Typescript and Angular framework.</p></div></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><title>Terminus</title></head><body><div class="container mt-5 mb-5"><div class="text-center"><h1>Terminus</h1><h5>A terminal for a more modern age</h5><h2 class="text-muted">alpha</h2></div><div class="d-flex flex-row mt-5 mb-5"><ul class="nav nav-pills flex-column mr-5" style="min-width: 200px"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#windows" role="tab"><i class="fa fa-windows"></i><span>Windows</span></a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#macos" role="tab"><i class="fa fa-apple"></i><span>macOS</span></a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#linux" role="tab"><i class="fa fa-linux"></i><span>Linux</span></a></li></ul><div class="tab-content"><div class="tab-pane active" id="windows" role="tabpanel"><div class="row"><div class="col-6"><video src="videos/windows.mp4" autoplay loop></video></div><div class="col-6"><h3>A proper Windows experience</h3><p> <b>Clink </b>provides tab completion, readline-style editing and persistent command history on Windows.</p><p>Also supported:<ul> <li>Classic CMD</li><li>PowerShell </li><li>Bash on Windows </li></ul></p></div></div></div><div class="tab-pane" id="macos" role="tabpanel"><div class="row"><div class="col-6"><!--video(src='videos/windows.mp4', autoplay, loop)--></div><div class="col-6"><h3>Well...</h3><p>Not much to say here, it just works.</p></div></div></div><div class="tab-pane" id="linux" role="tabpanel"><div class="row"><div class="col-6"><img src="linux.png"></div><div class="col-6"><p><ul> <li>Spawn with a global hotkey</li><li>Tabs persist after restart</li><li>Auto-dock to any side of any screen</li><li>Full Unicode and double-width character support</li></ul></p></div></div></div></div></div><div class="text-center"><div class="mt-3 mb-3"><h2></h2><div><div class="btn-group mt-3 mb-1"><a class="btn btn-lg btn-outline-success" href="https://github.com/Eugeny/terminus/releases/latest" target="_blank"><i class="fa fa-download"></i><span>Downloads</span></a><a class="btn btn-lg btn-outline-secondary" href="https://github.com/Eugeny/terminus" target="_blank"><i class="fa fa-github"></i><span>GitHub</span></a></div></div><small class="text-muted">EXE, DMG, DEB, RPM, TGZ</small></div></div><div class="row mt-5"><div class="col-6"><h3>User experience</h3><ul><li>Spawn and hide with a global hotkey</li><li>Fully customizable hotkey schema</li><li>Restores tabs </li><li>Drag in a file to paste the path</li><li>Click paths and URLs to open in browser/file manager</li><li>Keeps the current directory in new tabs</li></ul></div><div class="col-6"><div class="mb-5"><h3>Customizable</h3><p>Multiple app themes and a myriad of community color schemes for the terminal. Color scheme editor included.</p></div><div>       <h3>Infinitely extensible</h3><p>Install plugins from the NPM repository, or create your own with Typescript and Angular framework.</p></div></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
diff --git a/docs/index.js b/docs/index.js
new file mode 100644
index 00000000..0779cb30
--- /dev/null
+++ b/docs/index.js
@@ -0,0 +1 @@
+import './styles.scss'
diff --git a/docs/index.pug b/docs/index.pug
index f46ef3af..2d12a328 100644
--- a/docs/index.pug
+++ b/docs/index.pug
@@ -1,155 +1,64 @@
 doctype html
 html
     head
+        meta(name='viewport', content='initial-scale=1, minimal-ui, shrink-to-fit=no')
         link(href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400", rel="stylesheet")
         link(href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel="stylesheet")
-        link(href="https://cdn.jsdelivr.net/g/bootstrap@4.0.0-alpha.6(css/bootstrap.min.css)", rel="stylesheet")
-        script(src="https://cdn.jsdelivr.net/g/jquery@3.2.1,tether@1.4.0,bootstrap@4.0.0-alpha.6,modernizr@3.3.1,detectizr@2.2.0")
+        script(src='bundle.js')
         title Terminus
-        style.
-            body {
-                font-family: 'Source Sans Pro', sans-serif;
-                background: #111;
-                color: #ccc;
-                min-height: 100vh;
-                background-image: radial-gradient(#111, #000);
-            }
-            
-            h1 {
-                font-size: 64px;
-            }
-            
-            h1, h2, h3, h5 {
-                font-weight: 300;
-                color: white;
-            }
-            
-            .btn i + span,
-            .nav-link i + span {
-                margin-left: 10px;
-            }
-            
-            .btn-outline-primary {
-                color: #b6e7ff !important;
-            }
-            
-            .nav-link {
-                font-size: 22px;
-            }
-            
-            video, img {
-                max-width: 100%;
-                box-shadow: 0 0 50px black;
-            }
-        
-        script(defer).
-            setTimeout(function () {
-                /*
-                if (Detectizr.os.name == 'windows') {
-                    $('[href="#windows"]').tab('show')
-                }
-                if (Detectizr.os.name == 'mac os') {
-                    $('[href="#macos"]').tab('show')
-                }
-                if (Detectizr.os.name == 'linux') {
-                    $('[href="#linux"]').tab('show')
-                }
-                */
-            })
     body
-        .container.mt-5.mb-5
+        .container.mt-5.mb-5#header
             .text-center
                 h1 Terminus
-                h5 A terminal for a more modern age
-                h2.text-muted alpha
+                .subtitle A terminal for a more modern age
                 
-            .d-flex.flex-row.mt-5.mb-5
-                ul.nav.nav-pills.flex-column.mr-5(style='min-width: 200px')
-                    li.nav-item
-                        a.nav-link.active(data-toggle='tab', href='#windows', role='tab')
-                            i.fa.fa-windows
-                            span Windows
-                    li.nav-item
-                        a.nav-link(data-toggle='tab', href='#macos', role='tab')
-                            i.fa.fa-apple
-                            span macOS
-                    li.nav-item
-                        a.nav-link(data-toggle='tab', href='#linux', role='tab')
-                            i.fa.fa-linux
-                            span Linux
-
-                .tab-content
-                    #windows.tab-pane.active(role='tabpanel')
-                        .row
-                            .col-6
-                                video(src='videos/windows.mp4', autoplay, loop)
-                            .col-6
-                                h3 A proper Windows experience
-                                p 
-                                    b Clink 
-                                    | provides tab completion, readline-style editing and persistent command history on Windows.
-                                p Also supported:
-                                    ul 
-                                        li Classic CMD
-                                        li PowerShell 
-                                        li Bash on Windows 
-
-                    #macos.tab-pane(role='tabpanel')
-                        .row
-                            .col-6
-                                //video(src='videos/windows.mp4', autoplay, loop)
-                            .col-6
-                                h3 Well...
-                                p Not much to say here, it just works.
-
-                    #linux.tab-pane(role='tabpanel')
-                        .row
-                            .col-6
-                                img(src='linux.png')
-                            .col-6
-                                p
-                                    ul 
-                                        li Spawn with a global hotkey
-                                        li Tabs persist after restart
-                                        li Auto-dock to any side of any screen
-                                        li Full Unicode and double-width character support
+                a.btn.btn-lg.btn-outline-dark.mt-4(href='https://github.com/Eugeny/terminus/releases/latest', target='_blank')
+                    strong DOWNLOAD
 
+                a.btn.btn-lg.btn-outline-secondary.mt-4.ml-3(href='https://github.com/Eugeny/terminus', target='_blank')
+                    strong GITHUB
                     
+                
+        .background-stripe
+            .overlay.overlay1
+            .overlay.overlay2
+            .terminal
+
+        .container.mt-5.mb-5
+            .d-flex.flex-wrap.flex-md-nowrap
+                .w-100
+                    .feature windows
+                    .feature linux
+                    .feature macos
+                    br
+                    .feature powershell
+                    .feature wsl
+                    .feature cygwin
+                    .feature git-bash
+                    .feature cmder
+                    .feature clink
+                    
+                .w-100
+                    .feature full unicode
+                    .feature global hotkey
+                    .feature plugins
+                    .feature tab recovery
+                    .feature custom css
+                    .feature themes
+                    .feature font ligatures
+                    .feature clickable paths
+                    .feature tabs on top/bottom
+                    .feature vibrancy
+                    .feature bracketed paste
+                    
+        .container.mt-5.mb-5
             .text-center
-                .mt-3.mb-3
-                    h2
+                a.btn.btn-lg.btn-outline-secondary.mt-5(href='#header')
+                    strong BEAM ME UP
 
-                    div
-                        .btn-group.mt-3.mb-1
-                            a.btn.btn-lg.btn-outline-success(href='https://github.com/Eugeny/terminus/releases/latest', target='_blank')
-                                i.fa.fa-download
-                                span Downloads
-                            a.btn.btn-lg.btn-outline-secondary(href='https://github.com/Eugeny/terminus', target='_blank')
-                                i.fa.fa-github
-                                span GitHub
-                    small.text-muted EXE, DMG, DEB, RPM, TGZ
-
-                        
-            .row.mt-5
-                .col-6
-                    h3 User experience
-                    ul
-                        li Spawn and hide with a global hotkey
-                        li Fully customizable hotkey schema
-                        li Restores tabs 
-                        li Drag in a file to paste the path
-                        li Click paths and URLs to open in browser/file manager
-                        li Keeps the current directory in new tabs
-
-                .col-6
-                    .mb-5
-                        h3 Customizable
-                        p Multiple app themes and a myriad of community color schemes for the terminal. Color scheme editor included.
-                        
-                    div        
-                        h3 Infinitely extensible
-                        p Install plugins from the NPM repository, or create your own with Typescript and Angular framework.
-                        
+        .background-stripe2
+            .overlay.overlay1
+                                        
         script.
           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
           (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/linux.png b/docs/linux.png
deleted file mode 100644
index 30d04f9f..00000000
Binary files a/docs/linux.png and /dev/null differ
diff --git a/docs/package.json b/docs/package.json
index d036c31b..34a8ebc5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,15 +1,24 @@
 {
   "name": "docs",
   "version": "1.0.0",
-  "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "pug index.pug",
-    "watch": "pug -w index.pug"
+    "build": "webpack --progress",
+    "watch": "webpack --progress --watch"
   },
-  "author": "",
-  "license": "ISC",
+  "private": true,
   "devDependencies": {
-    "pug-cli": "^1.0.0-alpha6"
+    "bootstrap": "^4.1.3",
+    "css-loader": "^1.0.0",
+    "file-loader": "^1.1.11",
+    "node-sass": "^4.9.3",
+    "pug": "^2.0.3",
+    "pug-cli": "^1.0.0-alpha6",
+    "pug-html-loader": "^1.1.5",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.22.1",
+    "val-loader": "^1.1.1",
+    "webpack": "^4.16.5",
+    "webpack-cli": "^3.1.0"
   }
 }
diff --git a/docs/styles.scss b/docs/styles.scss
new file mode 100644
index 00000000..ed1929d0
--- /dev/null
+++ b/docs/styles.scss
@@ -0,0 +1,135 @@
+$font-family-sans-serif: "Source Sans Pro";
+$border-radius-lg: 0;
+$btn-border-width: 3px;
+
+@import "node_modules/bootstrap/scss/bootstrap";
+
+
+h1 {
+    font-size: 10vw;
+    font-weight: 200;
+    margin: 0;
+}
+
+.subtitle {
+    font-style: italic;
+    color: #999;
+    font-size: 5vw;
+    font-weight: 300;
+}
+
+.background-stripe {
+    width: 100vw;
+    background-image: url('./background.jpeg');
+    background-size: cover;
+    height: 30vw;
+    margin: 200px 0 150px;
+    min-height: 1000px;
+    position: relative;
+
+    .overlay {
+        position: absolute;
+        width: 100vw;
+        width: 1px;
+        height: 1px;
+
+        &.overlay1 {
+            top: -1px;
+            left: 0;
+            border-top: 10vw solid white;
+            border-right: 100vw solid transparent;
+        }
+
+        &.overlay2 {
+            bottom: -1px;
+            right: 0;
+            border-bottom: 10vw solid white;
+            border-left: 100vw solid transparent;
+        }
+    }
+
+    .terminal {
+        position: absolute;
+        left: 50%;
+        top: 5vw;
+
+        width: 1304px;
+        margin-left: -652px;
+        height: 972px;
+        border-radius: 5px;
+
+        box-shadow: 0 0 100px black;
+        background: url('./terminal.png');
+        background-size: cover;
+
+        animation: slideIn ease-out 1s;
+        opacity: .95;
+    }
+
+    @media(max-width: 1500px) {
+        min-height: 500px;
+        margin: 200px 0 100px;
+
+        .terminal {
+            width: 652px;
+            top: -100px;
+            margin-left: -326px;
+            height: 486px;
+        }
+    }
+
+    @media(max-width: 750px) {
+        min-height: 250px;
+        margin: 100px 0 50px;
+
+        .terminal {
+            width: 326px;
+            top: -50px;
+            margin-left: -163px;
+            height: 243px;
+        }
+    }
+
+}
+
+.feature {
+    font-size: 45px;
+    line-height: 40px;
+    opacity: .5;
+    font-style: italic;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        margin-top: 200px;
+    }
+    to {
+        opacity: .95;
+        margin-top: 0px;
+    }
+}
+
+
+.background-stripe2 {
+    width: 100vw;
+    background-image: url('./background.jpeg');
+    background-size: cover;
+    height: 30vw;
+    margin: 100px 0 0;
+    position: relative;
+
+    .overlay {
+        position: absolute;
+        width: 100vw;
+        width: 1px;
+        height: 1px;
+
+        &.overlay1 {
+            top: -1px;
+            right: 0;
+            border-top: 10vw solid white;
+            border-left: 100vw solid transparent;
+        }
+    }
+}
diff --git a/docs/terminal.png b/docs/terminal.png
new file mode 100644
index 00000000..7a7097c1
Binary files /dev/null and b/docs/terminal.png differ
diff --git a/docs/videos/windows.mp4 b/docs/videos/windows.mp4
deleted file mode 100644
index a347322e..00000000
Binary files a/docs/videos/windows.mp4 and /dev/null differ
diff --git a/docs/webpack.config.js b/docs/webpack.config.js
new file mode 100644
index 00000000..a6ad5494
--- /dev/null
+++ b/docs/webpack.config.js
@@ -0,0 +1,27 @@
+const path = require('path')
+
+module.exports = {
+  entry: {
+    'index.ignore': 'file-loader?name=index.html!pug-html-loader!' + path.resolve(__dirname, './index.pug'),
+    'bundle': path.resolve(__dirname, 'index.js'),
+  },
+  context: __dirname,
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
+      {
+        test: /\.(jpeg|png)?$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: 'assets/[name].[ext]'
+          }
+        }
+      }
+    ]
+  },
+}
