diff --git a/dist/0cb720bfa75c6b183683186e6c132d66.css b/dist/0cb720bfa75c6b183683186e6c132d66.css
new file mode 100644
index 0000000..c93bbb1
--- /dev/null
+++ b/dist/0cb720bfa75c6b183683186e6c132d66.css
@@ -0,0 +1 @@
+/* Colours */
diff --git a/dist/ef19487056b129c8f3eda17f9543ab70.js b/dist/0cb720bfa75c6b183683186e6c132d66.js
similarity index 96%
rename from dist/ef19487056b129c8f3eda17f9543ab70.js
rename to dist/0cb720bfa75c6b183683186e6c132d66.js
index ca88717..e92a55d 100644
--- a/dist/ef19487056b129c8f3eda17f9543ab70.js
+++ b/dist/0cb720bfa75c6b183683186e6c132d66.js
@@ -68,7 +68,7 @@ require = (function (modules, cache, entry) {
 
   // Override the current require with this new one
   return newRequire;
-})({14:[function(require,module,exports) {
+})({16:[function(require,module,exports) {
 var bundleURL = null;
 function getBundleURLCached() {
   if (!bundleURL) {
@@ -99,7 +99,7 @@ function getBaseURL(url) {
 exports.getBundleURL = getBundleURLCached;
 exports.getBaseURL = getBaseURL;
 
-},{}],13:[function(require,module,exports) {
+},{}],15:[function(require,module,exports) {
 var bundle = require('./bundle-url');
 
 function updateLink(link) {
@@ -131,7 +131,7 @@ function reloadCSS() {
 
 module.exports = reloadCSS;
 
-},{"./bundle-url":14}],0:[function(require,module,exports) {
+},{"./bundle-url":16}],0:[function(require,module,exports) {
 var global = (1, eval)('this');
 var OldModule = module.bundle.Module;
 function Module() {
@@ -149,7 +149,7 @@ function Module() {
 module.bundle.Module = Module;
 
 if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
-  var ws = new WebSocket('ws://localhost:61816/');
+  var ws = new WebSocket('ws://localhost:55587/');
   ws.onmessage = function(event) {
     var data = JSON.parse(event.data);
 
diff --git a/dist/1e2f52e9c1392de1657f3e960305c1ae.css b/dist/1e2f52e9c1392de1657f3e960305c1ae.css
new file mode 100644
index 0000000..5441f84
--- /dev/null
+++ b/dist/1e2f52e9c1392de1657f3e960305c1ae.css
@@ -0,0 +1,158 @@
+/* Colours */
+* {
+  box-sizing: border-box;
+  font-family: Verdana, Geneva, Tahoma, sans-serif; }
+
+hr {
+  background-color: #c0c0c0;
+  border: 2px solid #c0c0c0;
+  border-radius: 5px; }
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #f8f8f8; }
+
+main {
+  z-index: 980;
+  position: relative;
+  top: 5.5em;
+  width: 100%;
+  word-break: break-word; }
+
+pre {
+  /*background-color: #d8d8d8*/
+  border-radius: 5px; }
+
+h1 {
+  margin: 0; }
+
+h2 {
+  margin: 0; }
+
+h3 {
+  margin: 0; }
+
+h4 {
+  margin: 0; }
+
+h5 {
+  margin: 0; }
+
+h6 {
+  margin: 0; }
+
+h7 {
+  margin: 0; }
+
+h8 {
+  margin: 0; }
+
+h9 {
+  margin: 0; }
+
+h10 {
+  margin: 0; }
+
+h11 {
+  margin: 0; }
+
+h12 {
+  margin: 0; }
+
+.dev {
+  border: 1px solid black; }
+
+.display {
+  background-color: lightcoral;
+  border: 1px solid red;
+  text-align: center; }
+
+.container {
+  width: calc( 100% - 10em);
+  max-width: 90em;
+  margin: 0 auto; }
+
+.link {
+  color: #2980b9;
+  text-decoration: none;
+  font-size: 12pt; }
+
+div[class^="col-"] {
+  padding: 1rem 0; }
+
+.row {
+  display: flex;
+  flex-wrap: wrap; }
+
+.col-1 {
+  flex: 0 0 8.33333%; }
+
+.col-offset-1 {
+  margin-left: 8.33333%; }
+
+.col-2 {
+  flex: 0 0 16.66667%; }
+
+.col-offset-2 {
+  margin-left: 16.66667%; }
+
+.col-3 {
+  flex: 0 0 25%; }
+
+.col-offset-3 {
+  margin-left: 25%; }
+
+.col-4 {
+  flex: 0 0 33.33333%; }
+
+.col-offset-4 {
+  margin-left: 33.33333%; }
+
+.col-5 {
+  flex: 0 0 41.66667%; }
+
+.col-offset-5 {
+  margin-left: 41.66667%; }
+
+.col-6 {
+  flex: 0 0 50%; }
+
+.col-offset-6 {
+  margin-left: 50%; }
+
+.col-7 {
+  flex: 0 0 58.33333%; }
+
+.col-offset-7 {
+  margin-left: 58.33333%; }
+
+.col-8 {
+  flex: 0 0 66.66667%; }
+
+.col-offset-8 {
+  margin-left: 66.66667%; }
+
+.col-9 {
+  flex: 0 0 75%; }
+
+.col-offset-9 {
+  margin-left: 75%; }
+
+.col-10 {
+  flex: 0 0 83.33333%; }
+
+.col-offset-10 {
+  margin-left: 83.33333%; }
+
+.col-11 {
+  flex: 0 0 91.66667%; }
+
+.col-offset-11 {
+  margin-left: 91.66667%; }
+
+.col-12 {
+  flex: 0 0 100%; }
+
+.col-offset-12 {
+  margin-left: 100%; }
diff --git a/dist/33f23c9be750d12cdb4f825c7658d390.js b/dist/33f23c9be750d12cdb4f825c7658d390.js
deleted file mode 100644
index 7b79ec0..0000000
--- a/dist/33f23c9be750d12cdb4f825c7658d390.js
+++ /dev/null
@@ -1,73 +0,0 @@
-// modules are defined as an array
-// [ module function, map of requires ]
-//
-// map of requires is short require name -> numeric require
-//
-// anything defined in a previous bundle is accessed via the
-// orig method which is the require for previous bundles
-
-require = (function (modules, cache, entry) {
-  // Save the require from previous bundle to this closure if any
-  var previousRequire = typeof require === "function" && require;
-
-  function newRequire(name, jumped) {
-    if (!cache[name]) {
-      if (!modules[name]) {
-        // if we cannot find the module within our internal map or
-        // cache jump to the current global require ie. the last bundle
-        // that was added to the page.
-        var currentRequire = typeof require === "function" && require;
-        if (!jumped && currentRequire) {
-          return currentRequire(name, true);
-        }
-
-        // If there are other bundles on this page the require from the
-        // previous one is saved to 'previousRequire'. Repeat this as
-        // many times as there are bundles until the module is found or
-        // we exhaust the require chain.
-        if (previousRequire) {
-          return previousRequire(name, true);
-        }
-
-        var err = new Error('Cannot find module \'' + name + '\'');
-        err.code = 'MODULE_NOT_FOUND';
-        throw err;
-      }
-      
-      localRequire.resolve = resolve;
-
-      var module = cache[name] = new newRequire.Module;
-
-      modules[name][0].call(module.exports, localRequire, module, module.exports);
-    }
-
-    return cache[name].exports;
-
-    function localRequire(x){
-      return newRequire(localRequire.resolve(x));
-    }
-
-    function resolve(x){
-      return modules[name][1][x] || x;
-    }
-  }
-
-  function Module() {
-    this.bundle = newRequire;
-    this.exports = {};
-  }
-
-  newRequire.Module = Module;
-  newRequire.modules = modules;
-  newRequire.cache = cache;
-  newRequire.parent = previousRequire;
-
-  for (var i = 0; i < entry.length; i++) {
-    newRequire(entry[i]);
-  }
-
-  // Override the current require with this new one
-  return newRequire;
-})({10:[function(require,module,exports) {
-var e=document.querySelectorAll("code");e.forEach(e=>{let a=e.innerHTML.toString();var r="";for(let e=0;e<a.length;e++)switch(a.charAt(e)){default:r+=a.charAt(e);break;case">":r+="&gt;";break;case"<":r+="&lt;";break;case"&":r+="&amp;";break;case'"':r+="&quot;"}e.innerHTML=r});
-},{}]},{},[10])
\ No newline at end of file
diff --git a/dist/4cfae4bafd636610db6a870fd9806a4a.css b/dist/4cfae4bafd636610db6a870fd9806a4a.css
new file mode 100644
index 0000000..73afa02
--- /dev/null
+++ b/dist/4cfae4bafd636610db6a870fd9806a4a.css
@@ -0,0 +1,98 @@
+/* Colours */
+.embed {
+  background-color: #d8d8d8;
+  border-radius: 5px;
+  padding: 5px; }
+
+.alert-primary {
+  border-radius: 2px;
+  background-color: #3498db;
+  border: 1px solid #2980b9;
+  padding: 1rem;
+  color: white; }
+
+.alert-danger {
+  border-radius: 2px;
+  background-color: #e74c3c;
+  border: 1px solid #c0392b;
+  padding: 1rem;
+  color: white; }
+
+.alert-warning {
+  border-radius: 2px;
+  background-color: #f1c40f;
+  border: 1px solid #f39c12;
+  padding: 1rem;
+  color: white; }
+
+.alert-success {
+  border-radius: 2px;
+  background-color: #2ecc71;
+  border: 1px solid #27ae60;
+  padding: 1rem;
+  color: white; }
+
+.notification-primary {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #3498db;
+  border-radius: 2px; }
+
+.notification-primary h2 {
+  border-right: 0.3rem solid #3498db;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-danger {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #e74c3c;
+  border-radius: 2px; }
+
+.notification-danger h2 {
+  border-right: 0.3rem solid #e74c3c;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-warning {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #f1c40f;
+  border-radius: 2px; }
+
+.notification-warning h2 {
+  border-right: 0.3rem solid #f1c40f;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-success {
+  width: 100%;
+  display: flex;
+  padding: 5px;
+  border: 2px solid #2ecc71;
+  border-radius: 2px; }
+
+.notification-success h2 {
+  border-right: 0.3rem solid #2ecc71;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-body {
+  line-height: 30pt;
+  font-size: 15pt;
+  word-wrap: break-word; }
diff --git a/dist/569bb0a6178c618a412288662cf2d775.css b/dist/569bb0a6178c618a412288662cf2d775.css
new file mode 100644
index 0000000..438a573
--- /dev/null
+++ b/dist/569bb0a6178c618a412288662cf2d775.css
@@ -0,0 +1,43 @@
+/* Colours */
+/* Button Style Classes */
+.btn {
+  border-radius: 5px;
+  border-width: 2px;
+  padding: 5px;
+  transition: 50ms; }
+
+.btn-primary {
+  background-color: #3498db;
+  border: 2px solid #2980b9;
+  color: white; }
+
+.btn-danger {
+  background-color: #e74c3c;
+  border: 2px solid #c0392b;
+  color: white; }
+
+.btn-warning {
+  background-color: #f1c40f;
+  border: 2px solid #f39c12;
+  color: white; }
+
+.btn-success {
+  background-color: #2ecc71;
+  border: 2px solid #27ae60;
+  color: white; }
+
+/* Hover classes */
+.btn:hover {
+  background-color: rgba(216, 216, 216, 0.847); }
+
+.btn-primary:hover {
+  background-color: #2980b9; }
+
+.btn-danger:hover {
+  background-color: #c0392b; }
+
+.btn-warning:hover {
+  background-color: #f39c12; }
+
+.btn-success:hover {
+  background-color: #27ae60; }
diff --git a/dist/5ffe5b63075346d77633136e983e606d.css b/dist/5ffe5b63075346d77633136e983e606d.css
deleted file mode 100644
index 302dde2..0000000
--- a/dist/5ffe5b63075346d77633136e983e606d.css
+++ /dev/null
@@ -1 +0,0 @@
-.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:#3498db}input:focus+.slider{box-shadow:0 0 1px #3498db}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.range-slider{-webkit-appearance:none;border-radius:5px;width:100%;height:25px;background:#d8d8d8;outline:none;opacity:.7;transition:opacity .2s}.range-slider:hover{opacity:1}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#5b6568;cursor:pointer}.range-slider::-moz-range-thumb{width:25px;height:25px;background:#5b6568;cursor:pointer}.range-slider-rounded{-webkit-appearance:none;border-radius:5px;width:100%;height:15px;background:#d8d8d8;outline:none;opacity:.7;transition:opacity .2s}.range-slider-rounded:hover{opacity:1}.range-slider-rounded::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;width:25px;height:25px;background:#5b6568;cursor:pointer}.range-slider-rounded::-moz-range-thumb{width:25px;height:25px;background:#ecf0f1;cursor:pointer}
\ No newline at end of file
diff --git a/dist/61e12dcf19fe3b7df325ac0ba36a65a7.js b/dist/61e12dcf19fe3b7df325ac0ba36a65a7.js
new file mode 100644
index 0000000..be26dc5
--- /dev/null
+++ b/dist/61e12dcf19fe3b7df325ac0ba36a65a7.js
@@ -0,0 +1,216 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+require = (function (modules, cache, entry) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof require === "function" && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof require === "function" && require;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+      
+      localRequire.resolve = resolve;
+
+      var module = cache[name] = new newRequire.Module;
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module() {
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  // Override the current require with this new one
+  return newRequire;
+})({13:[function(require,module,exports) {
+var code = document.querySelectorAll("code");
+
+// code embed
+code.forEach(c => {
+    let code = c.innerHTML.toString();
+    var output = "";
+    for(let i = 0; i < code.length; i++){
+        switch(code.charAt(i)){
+            default: output += code.charAt(i); break;
+            case ">": output += "&gt;"; break;
+            case "<": output += "&lt;"; break;
+            case "&": output += "&amp;"; break;
+            case "\"": output += "&quot;"; break;
+        }
+    }
+    c.innerHTML = output;
+});
+
+// TODO JavaScript Input value return
+// Current way.. 
+// -------------------------------------
+// get input by getting the input object
+// catch oninput event inside a function
+// Handle it inside the function
+// -------------------------------------
+},{}],0:[function(require,module,exports) {
+var global = (1, eval)('this');
+var OldModule = module.bundle.Module;
+function Module() {
+  OldModule.call(this);
+  this.hot = {
+    accept: function (fn) {
+      this._acceptCallback = fn || function () {};
+    },
+    dispose: function (fn) {
+      this._disposeCallback = fn;
+    }
+  };
+}
+
+module.bundle.Module = Module;
+
+if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
+  var ws = new WebSocket('ws://localhost:55587/');
+  ws.onmessage = function(event) {
+    var data = JSON.parse(event.data);
+
+    if (data.type === 'update') {
+      data.assets.forEach(function (asset) {
+        hmrApply(global.require, asset);
+      });
+
+      data.assets.forEach(function (asset) {
+        if (!asset.isNew) {
+          hmrAccept(global.require, asset.id);
+        }
+      });
+    }
+
+    if (data.type === 'reload') {
+      ws.close();
+      ws.onclose = function () {
+        window.location.reload();
+      }
+    }
+
+    if (data.type === 'error-resolved') {
+      console.log('[parcel] ✨ Error resolved');
+    }
+
+    if (data.type === 'error') {
+      console.error('[parcel] 🚨  ' + data.error.message + '\n' + 'data.error.stack');
+    }
+  };
+}
+
+function getParents(bundle, id) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return [];
+  }
+
+  var parents = [];
+  var k, d, dep;
+
+  for (k in modules) {
+    for (d in modules[k][1]) {
+      dep = modules[k][1][d];
+      if (dep === id || (Array.isArray(dep) && dep[dep.length - 1] === id)) {
+        parents.push(+k);
+      }
+    }
+  }
+
+  if (bundle.parent) {
+    parents = parents.concat(getParents(bundle.parent, id));
+  }
+
+  return parents;
+}
+
+function hmrApply(bundle, asset) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+
+  if (modules[asset.id] || !bundle.parent) {
+    var fn = new Function('require', 'module', 'exports', asset.generated.js);
+    asset.isNew = !modules[asset.id];
+    modules[asset.id] = [fn, asset.deps];
+  } else if (bundle.parent) {
+    hmrApply(bundle.parent, asset);
+  }
+}
+
+function hmrAccept(bundle, id) {
+  var modules = bundle.modules;
+  if (!modules) {
+    return;
+  }
+
+  if (!modules[id] && bundle.parent) {
+    return hmrAccept(bundle.parent, id);
+  }
+
+  var cached = bundle.cache[id];
+  if (cached && cached.hot._disposeCallback) {
+    cached.hot._disposeCallback();
+  }
+
+  delete bundle.cache[id];
+  bundle(id);
+
+  cached = bundle.cache[id];
+  if (cached && cached.hot && cached.hot._acceptCallback) {
+    cached.hot._acceptCallback();
+    return true;
+  }
+
+  return getParents(global.require, id).some(function (id) {
+    return hmrAccept(global.require, id)
+  });
+}
+},{}]},{},[0,13])
\ No newline at end of file
diff --git a/dist/66d76bdda36bae1526edd730130bed9d.css b/dist/66d76bdda36bae1526edd730130bed9d.css
deleted file mode 100644
index f9a39e2..0000000
--- a/dist/66d76bdda36bae1526edd730130bed9d.css
+++ /dev/null
@@ -1 +0,0 @@
-.embed{background-color:#d8d8d8;border-radius:5px;padding:5px}.alert-primary{border-radius:2px;background-color:#3498db;border:1px solid #2980b9;padding:1rem;color:#fff}.alert-danger{border-radius:2px;background-color:#e74c3c;border:1px solid #c0392b;padding:1rem;color:#fff}.alert-warning{border-radius:2px;background-color:#f1c40f;border:1px solid #f39c12;padding:1rem;color:#fff}.alert-success{border-radius:2px;background-color:#2ecc71;border:1px solid #27ae60;padding:1rem;color:#fff}.notification-primary{width:100%;display:flex;padding:5px;border:2px solid #3498db;border-radius:2px}.notification-primary h2{border-right:.3rem solid #3498db;padding:5px;margin-right:5px;min-width:70px;height:auto;display:flex}.notification-danger{width:100%;display:flex;padding:5px;border:2px solid #e74c3c;border-radius:2px}.notification-danger h2{border-right:.3rem solid #e74c3c;padding:5px;margin-right:5px;min-width:70px;height:auto;display:flex}.notification-warning{width:100%;display:flex;padding:5px;border:2px solid #f1c40f;border-radius:2px}.notification-warning h2{border-right:.3rem solid #f1c40f;padding:5px;margin-right:5px;min-width:70px;height:auto;display:flex}.notification-success{width:100%;display:flex;padding:5px;border:2px solid #2ecc71;border-radius:2px}.notification-success h2{border-right:.3rem solid #2ecc71;padding:5px;margin-right:5px;min-width:70px;height:auto;display:flex}.notification-body{line-height:30pt;font-size:15pt;word-wrap:break-word}
\ No newline at end of file
diff --git a/dist/79522207f6bb4649efd25deca7a98f4e.css b/dist/79522207f6bb4649efd25deca7a98f4e.css
new file mode 100644
index 0000000..eec241a
--- /dev/null
+++ b/dist/79522207f6bb4649efd25deca7a98f4e.css
@@ -0,0 +1,153 @@
+/* Colours */
+header {
+  background: #f8f8f8;
+  text-align: center;
+  height: 30px;
+  z-index: 999;
+  width: 100%;
+  height: auto;
+  padding: 10px; }
+
+.locked-top {
+  top: 0;
+  position: fixed; }
+
+.nav-toggle {
+  display: none; }
+
+.nav-toggle-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-left: 1em;
+  height: 100%;
+  display: flex;
+  align-items: center; }
+
+.nav-toggle-label span,
+.nav-toggle-label span::before,
+.nav-toggle-label span::after {
+  display: block;
+  background: white;
+  height: 2px;
+  width: 2em;
+  border-radius: 2px; }
+
+.nav-toggle-label span::before,
+.nav-toggle-label span::after {
+  content: '';
+  position: absolute; }
+
+.nav-toggle-label span::before {
+  bottom: 30px; }
+
+.nav-toggle-label span::after {
+  top: 30px; }
+
+.nav-locked {
+  top: 100%;
+  left: 0;
+  position: absolute; }
+
+nav {
+  text-align: left;
+  width: 100%;
+  background: #f8f8f8;
+  display: none;
+  transform: scale(1, 0);
+  transform-origin: top;
+  transition: 400ms;
+  transition: transform 400ms ease-in-out; }
+
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none; }
+
+nav li {
+  margin-bottom: 1em;
+  margin-left: 1em; }
+
+nav a {
+  text-decoration: none;
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  color: #2e2e2e;
+  opacity: 0; }
+
+nav a:hover {
+  color: #a5a5a5; }
+
+.nav-toggle:checked ~ nav {
+  display: block;
+  transform: scale(1, 1);
+  transition: 400ms; }
+
+.nav-toggle:checked ~ nav a {
+  opacity: 1;
+  transition: opacity 150ms ease-in-out; }
+
+@media screen and (min-width: 800px) {
+  .nav-toggle-label {
+    display: none; } }
+
+header {
+  display: grid;
+  grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; }
+
+nav {
+  all: unset;
+  display: flex;
+  align-items: center; }
+
+nav a {
+  opacity: 1; }
+
+nav ul {
+  display: flex; }
+
+nav li {
+  margin-left: 1em;
+  margin-bottom: 0;
+  list-style: none; }
+
+.nav-logo-left {
+  grid-column: 2 / span 1; }
+
+.nav-left {
+  all: unset;
+  grid-column: 3 / 4;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center; }
+
+.nav-left ul {
+  display: flex;
+  justify-content: flex-end; }
+
+.sidebar-wrapper {
+  display: flex; }
+
+.sidebar-wrapper .sidebar-content {
+  width: 100%; }
+
+.sidebar-wrapper .sidebar-left {
+  padding: 0;
+  margin: 0;
+  margin-left: 0;
+  padding-right: 5px;
+  height: 100%; }
+
+.sidebar-wrapper .sidebar-left .sidebar-menu ul {
+  width: fit-content; }
+
+.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-title {
+  width: max-content;
+  font-size: 20pt;
+  padding-right: 5px; }
+
+.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-item li {
+  width: fit-content;
+  color: #2980b9;
+  text-decoration: none;
+  font-size: 12pt; }
diff --git a/dist/b8b1bea874564009706fb4e931edb7df.css b/dist/b8b1bea874564009706fb4e931edb7df.css
deleted file mode 100644
index 5df6cb7..0000000
--- a/dist/b8b1bea874564009706fb4e931edb7df.css
+++ /dev/null
@@ -1 +0,0 @@
-header{background:#f1f1f1;text-align:center;height:30px;z-index:1;width:100%;height:auto;padding:10px}.locked-top{top:0;position:fixed}.nav-toggle{display:none}.nav-toggle-label{position:absolute;top:0;left:0;margin-left:1em;height:100%;display:flex;align-items:center}.nav-toggle-label span,.nav-toggle-label span:after,.nav-toggle-label span:before{display:block;background:#fff;height:2px;width:2em;border-radius:2px}.nav-toggle-label span:after,.nav-toggle-label span:before{content:"";position:absolute}.nav-toggle-label span:before{bottom:30px}.nav-toggle-label span:after{top:30px}.nav-locked{top:100%;left:0;position:absolute}nav{text-align:left;width:100%;background:#f1f1f1;display:none;transform:scaleY(0);transform-origin:top;transition:.4s;transition:transform .4s ease-in-out}nav ul{margin:0;padding:0;list-style-type:none}nav li{margin-bottom:1em}nav a{text-decoration:none;font-size:1.2rem;text-transform:uppercase;color:#2e2e2e;opacity:0}nav a:hover{color:#a5a5a5}.nav-toggle:checked~nav{display:block;transform:scale(1);transition:.4s}.nav-toggle:checked~nav a{opacity:1;transition:opacity .15s ease-in-out}@media screen and (min-width:800px){.nav-toggle-label{display:none}}header{display:grid;grid-template-columns:1fr auto minmax(600px,1fr) 1fr}nav{all:unset;display:flex;align-items:center}nav a{opacity:1}nav ul{display:flex}nav li{margin-left:1em;margin-bottom:0;list-style:none}.nav-logo-left{grid-column:2/span 1}.nav-left{all:unset;grid-column:3/4;align-items:center}.nav-left,.nav-left ul{display:flex;justify-content:flex-end}.sidebar-wrapper{display:flex}.sidebar-wrapper .sidebar-content{width:100%}.sidebar-wrapper .sidebar-left{padding:0;margin:0;margin-left:0;padding-right:5px;height:100%}.sidebar-wrapper .sidebar-left .sidebar-menu ul{width:fit-content}.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-title{width:max-content;font-size:20pt;padding-right:5px}.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-item li{width:fit-content;color:#2980b9;text-decoration:none;font-size:12pt}
\ No newline at end of file
diff --git a/dist/e963a28fcd9397a02445457ce0abcb2f.css b/dist/e963a28fcd9397a02445457ce0abcb2f.css
new file mode 100644
index 0000000..cca69a3
--- /dev/null
+++ b/dist/e963a28fcd9397a02445457ce0abcb2f.css
@@ -0,0 +1,112 @@
+/* Colours */
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px; }
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0; }
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s; }
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s; }
+
+input:checked + .slider {
+  background-color: #3498db; }
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #3498db; }
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px); }
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px; }
+
+.slider.round:before {
+  border-radius: 50%; }
+
+/* Range slider */
+.range-slider {
+  -webkit-appearance: none;
+  border-radius: 5px;
+  width: 100%;
+  height: 25px;
+  background: #d8d8d8;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s; }
+
+.range-slider:hover {
+  opacity: 1; }
+
+.range-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #5b6568;
+  cursor: pointer; }
+
+.range-slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #5b6568;
+  cursor: pointer; }
+
+.range-slider-rounded {
+  -webkit-appearance: none;
+  border-radius: 5px;
+  width: 100%;
+  height: 15px;
+  background: #d8d8d8;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s; }
+
+.range-slider-rounded:hover {
+  opacity: 1; }
+
+.range-slider-rounded::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  background: #5b6568;
+  cursor: pointer; }
+
+.range-slider-rounded::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #ecf0f1;
+  cursor: pointer; }
diff --git a/dist/ef19487056b129c8f3eda17f9543ab70.css b/dist/ef19487056b129c8f3eda17f9543ab70.css
deleted file mode 100644
index a5197f8..0000000
--- a/dist/ef19487056b129c8f3eda17f9543ab70.css
+++ /dev/null
@@ -1 +0,0 @@
-*{box-sizing:border-box;font-family:Verdana,Geneva,Tahoma,sans-serif}hr{background-color:silver;border:2px solid silver;border-radius:5px}body{margin:0;padding:0;background:#f8f8f8}main{z-index:1;position:relative;top:5.5em;width:100%;word-break:break-word}pre{border-radius:5px}h1,h2,h3,h4,h5,h6,h7,h8,h9,h10,h11,h12{margin:0}.dev{border:1px solid #000}.display{background-color:#f08080;border:1px solid red;text-align:center}.container{width:calc(100% - 10em);max-width:90em;margin:0 auto}.link{color:#2980b9;text-decoration:none;font-size:12pt}div[class^=col-]{padding:1rem 0}.row{display:flex;flex-wrap:wrap}.col-1{flex:0 0 8.33333%}.col-offset-1{margin-left:8.33333%}.col-2{flex:0 0 16.66667%}.col-offset-2{margin-left:16.66667%}.col-3{flex:0 0 25%}.col-offset-3{margin-left:25%}.col-4{flex:0 0 33.33333%}.col-offset-4{margin-left:33.33333%}.col-5{flex:0 0 41.66667%}.col-offset-5{margin-left:41.66667%}.col-6{flex:0 0 50%}.col-offset-6{margin-left:50%}.col-7{flex:0 0 58.33333%}.col-offset-7{margin-left:58.33333%}.col-8{flex:0 0 66.66667%}.col-offset-8{margin-left:66.66667%}.col-9{flex:0 0 75%}.col-offset-9{margin-left:75%}.col-10{flex:0 0 83.33333%}.col-offset-10{margin-left:83.33333%}.col-11{flex:0 0 91.66667%}.col-offset-11{margin-left:91.66667%}.col-12{flex:0 0 100%}.col-offset-12{margin-left:100%}
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index c990c08..5daa25b 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,4 +1,78 @@
-<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sass test</title> <link rel="stylesheet" href="/dist/ef19487056b129c8f3eda17f9543ab70.css"> <link rel="stylesheet" href="/dist/b8b1bea874564009706fb4e931edb7df.css"> <link rel="stylesheet" href="/dist/66d76bdda36bae1526edd730130bed9d.css"> <link rel="stylesheet" href="/dist/5ffe5b63075346d77633136e983e606d.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css"> </head> <body> <header class="locked-top"> <h1 class="nav-logo">Logo</h1> <input id="nav-toggle" type="checkbox" class="nav-toggle"> <label for="nav-toggle" class="nav-toggle-label"> <span></span> </label> <nav> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </nav> </header> <main> <div class="container"> <h1>Toggle Slide</h1> <br>  <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label>  <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> <br><br> <h1>Slider</h1> <br> <input type="range" min="1" max="100" value="0" class="range-slider-rounded" id="slider"> <span>Span Value: </span><span id="output">0</span>  <br><br> <div class="embed"> <h1>Embed</h1> <hr> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p> </div> <br> <h1>Code Embed</h1> <pre>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Sass test</title>
+        <link rel="stylesheet" href="/dist/0cb720bfa75c6b183683186e6c132d66.css">
+        <link rel="stylesheet" href="/dist/1e2f52e9c1392de1657f3e960305c1ae.css">
+        <link rel="stylesheet" href="/dist/79522207f6bb4649efd25deca7a98f4e.css">
+        <link rel="stylesheet" href="/dist/4cfae4bafd636610db6a870fd9806a4a.css">
+        <link rel="stylesheet" href="/dist/e963a28fcd9397a02445457ce0abcb2f.css">
+        <link rel="stylesheet" href="/dist/569bb0a6178c618a412288662cf2d775.css">
+        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
+    </head>
+    <body>
+        <header class="locked-top">
+            <h1 class="nav-logo">Logo</h1>
+            <input id="nav-toggle" type="checkbox" class="nav-toggle">
+            <label for="nav-toggle" class="nav-toggle-label">
+                <span></span>
+            </label>
+            <nav>
+                <ul>
+                    <li><a href="#">Test</a></li>
+                    <li><a href="#">Test</a></li>
+                    <li><a href="#">Test</a></li>
+                    <li><a href="#">Test</a></li>
+                    <li><a href="#">Test</a></li>
+                </ul>
+            </nav>
+        </header>
+        <main>
+            <div class="container">
+                <h1>Button Test</h1>
+                <button class="btn">test</button>
+                <button class="btn btn-primary">test</button>
+                <button class="btn btn-warning">test</button>
+                <button class="btn btn-danger">test</button>
+                <button class="btn btn-success">test</button>
+                <h1>Toggle Slide</h1>
+                <br>
+                <!-- Rectangular switch -->
+                <label class="switch">
+                    <input type="checkbox">
+                    <span class="slider"></span>
+                </label>
+                <!-- Rounded switch -->
+                <label class="switch">
+                    <input type="checkbox">
+                    <span class="slider round"></span>
+                </label>  
+                <br><br>
+                <h1>Slider</h1>
+                <br>
+                <input type="range" min="1" max="100" value="0" class="range-slider-rounded" id="slider">
+                <span>Span Value: </span><span id="output">0</span>
+                <script>
+                    var slider = document.getElementById("slider");
+                    var output = document.getElementById("output");
+                    output.innerHTML = slider.value; // Display the default slider value
+
+                    // Update the current slider value (each time you drag the slider handle)
+                    slider.oninput = function() {
+                        output.innerHTML = this.value;
+                    }
+                </script>
+                <br><br>
+                <div class="embed">
+                    <h1>Embed</h1>
+                    <hr>
+                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p>
+                </div>
+                <br>
+                <h1>Code Embed</h1>
+                <pre>
                     <code class="language-html">
 <h1>test</h1>
 code here, escape it yourself.
@@ -6,7 +80,24 @@ code here, escape it yourself.
 <link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
 
                     </code>
-                </pre> <header> <h1 class="nav-logo">Logo</h1> <input id="nav-toggle" type="checkbox" class="nav-toggle"> <label for="nav-toggle" class="nav-toggle-label"> <span></span> </label> <nav> <ul> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> </nav> </header> <pre>
+                </pre>
+                <header>
+                    <h1 class="nav-logo">Logo</h1>
+                    <input id="nav-toggle" type="checkbox" class="nav-toggle">
+                    <label for="nav-toggle" class="nav-toggle-label">
+                        <span></span>
+                    </label>
+                    <nav>
+                        <ul>
+                            <li><a href="#">Test</a></li>
+                            <li><a href="#">Test</a></li>
+                            <li><a href="#">Test</a></li>
+                            <li><a href="#">Test</a></li>
+                            <li><a href="#">Test</a></li>
+                        </ul>
+                    </nav>
+                </header>
+                <pre>
                     <code class="language-html">
 <header>
     <h1 class="nav-logo">Logo</h1>
@@ -25,4 +116,56 @@ code here, escape it yourself.
     </nav>
 </header>
                     </code>
-                </pre> <h1 style="text-align:center">Alert Elements</h1> <div class="alert-primary"> test </div><br> <div class="alert-danger"> test </div><br> <div class="alert-warning"> test </div><br> <div class="alert-success"> test </div> <br> <h1 style="text-align:center">Notification Elements</h1> <div class="notification-primary"> <h2>ein kleiner test satz</h2> <span class="notification-body">Funktion test des objektes</span> </div> <br> <div class="notification-danger"> <h2>ein kleiner test satz</h2> <span class="notification-body">Funktion test des objektes</span> </div> <br> <div class="notification-warning"> <h2>ein kleiner test satz</h2> <span class="notification-body">Funktion test des objektes</span> </div> <br> <div class="notification-success"> <h2>ein kleiner test satz</h2> <span class="notification-body">Funktion test des objektes</span> </div> <br> <h1 style="text-align:center">CSS Grid</h1> <div class="row"> <div class="col-12 display"><h1>12</h1></div> <div class="col-11 display"><h1>11</h1></div> <div class="col-1 display"><h1>1</h1></div> <div class="col-10 display"><h1>10</h1></div> <div class="col-2 display"><h1>2</h1></div> <div class="col-9 display"><h1>9</h1></div> <div class="col-3 display"><h1>3</h1></div> <div class="col-8 display"><h1>8</h1></div> <div class="col-4 display"><h1>4</h1></div> <div class="col-7 display"><h1>7</h1></div> <div class="col-5 display"><h1>5</h1></div> <div class="col-6 display"><h1>6</h1></div> <div class="col-6 display"><h1>6</h1></div> </div> </div> </main> <br><br><br> <br><br><br> <script src="/dist/33f23c9be750d12cdb4f825c7658d390.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script> <script>var slider=document.getElementById("slider"),output=document.getElementById("output");output.innerHTML=slider.value,slider.oninput=function(){output.innerHTML=this.value},hljs.highlightAll();</script> </body> </html>
\ No newline at end of file
+                </pre>
+                <h1 style="text-align: center;">Alert Elements</h1>
+                <div class="alert-primary"> test </div><br>
+                <div class="alert-danger"> test </div><br>
+                <div class="alert-warning"> test </div><br>
+                <div class="alert-success"> test </div>
+                <br>
+                <h1 style="text-align: center;">Notification Elements</h1>
+                <div class="notification-primary"> 
+                    <h2>ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-danger"> 
+                    <h2>ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-warning"> 
+                    <h2>ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-success"> 
+                    <h2>ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <h1 style="text-align: center;">CSS Grid</h1>
+                <div class="row">
+                    <div class="col-12 display"><h1>12</h1></div>
+                    <div class="col-11 display"><h1>11</h1></div>
+                    <div class="col-1 display"><h1>1</h1></div>
+                    <div class="col-10 display"><h1>10</h1></div>
+                    <div class="col-2 display"><h1>2</h1></div>
+                    <div class="col-9 display"><h1>9</h1></div>
+                    <div class="col-3 display"><h1>3</h1></div>
+                    <div class="col-8 display"><h1>8</h1></div>
+                    <div class="col-4 display"><h1>4</h1></div>
+                    <div class="col-7 display"><h1>7</h1></div>
+                    <div class="col-5 display"><h1>5</h1></div>
+                    <div class="col-6 display"><h1>6</h1></div>
+                    <div class="col-6 display"><h1>6</h1></div>
+                </div>
+            </div>
+        </main>
+        <br><br><br>
+        <br><br><br>
+        <script src="/dist/61e12dcf19fe3b7df325ac0ba36a65a7.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
+        <script>hljs.highlightAll();</script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 66081cb..4141c38 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,10 +4,12 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Sass test</title>
-        <link rel="stylesheet" href="scss/main.sass">
-        <link rel="stylesheet" href="scss/navbar.sass">
-        <link rel="stylesheet" href="scss/messaging.sass">
-        <link rel="stylesheet" href="scss/selector.sass">
+        <link rel="stylesheet" href="sass/variables.sass">
+        <link rel="stylesheet" href="sass/main.sass">
+        <link rel="stylesheet" href="sass/navbar.sass">
+        <link rel="stylesheet" href="sass/messaging.sass">
+        <link rel="stylesheet" href="sass/selector.sass">
+        <link rel="stylesheet" href="sass/button.sass">
         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
     </head>
     <body>
@@ -29,6 +31,12 @@
         </header>
         <main>
             <div class="container">
+                <h1>Button Test</h1>
+                <button class="btn">test</button>
+                <button class="btn btn-primary">test</button>
+                <button class="btn btn-warning">test</button>
+                <button class="btn btn-danger">test</button>
+                <button class="btn btn-success">test</button>
                 <h1>Toggle Slide</h1>
                 <br>
                 <!-- Rectangular switch -->
diff --git a/src/scss/button.sass b/src/sass/button.sass
similarity index 74%
rename from src/scss/button.sass
rename to src/sass/button.sass
index af0ed9c..af9421e 100644
--- a/src/scss/button.sass
+++ b/src/sass/button.sass
@@ -1,15 +1,4 @@
-$primBG: rgb(248, 248, 248)
-$primary: #3498db
-$primary_dark: #2980b9
-$danger: #e74c3c
-$danger_dark: #c0392b
-$warning: #f1c40f
-$warning_dark: #f39c12
-$success: #2ecc71
-$success_dark: #27ae60
-$border_width: 2px
-$border_radius: 5px
-$padding: 5px
+@import variables
 
 /* Button Style Classes */
 .btn
@@ -36,7 +25,7 @@ $padding: 5px
 
 /* Hover classes */
 .btn:hover
-    background-color: #d8d8d8d8
+    background-color: rgba(216, 216, 216, 0.847)
 .btn-primary:hover
     background-color: $primary_dark
 .btn-danger:hover
diff --git a/src/sass/forms.sass b/src/sass/forms.sass
new file mode 100644
index 0000000..af2d932
--- /dev/null
+++ b/src/sass/forms.sass
@@ -0,0 +1,5 @@
+@import variables
+    /* flat forms*/
+.forms 
+    background-color: $darkbg
+    border: 
\ No newline at end of file
diff --git a/src/scss/main.sass b/src/sass/main.sass
similarity index 81%
rename from src/scss/main.sass
rename to src/sass/main.sass
index f185372..9f54642 100644
--- a/src/scss/main.sass
+++ b/src/sass/main.sass
@@ -1,13 +1,4 @@
-$primBG: rgb(248, 248, 248)
-$columns: 12
-$primary: #3498db
-$primary_dark: #2980b9
-$danger: #e74c3c
-$danger_dark: #c0392b
-$warning: #f1c40f
-$warning_dark: #f39c12
-$success: #2ecc71
-$success_dark: #27ae60
+@import variables
 
 *
   box-sizing: border-box
diff --git a/src/scss/messaging.sass b/src/sass/messaging.sass
similarity index 88%
rename from src/scss/messaging.sass
rename to src/sass/messaging.sass
index 7b95523..c678324 100644
--- a/src/scss/messaging.sass
+++ b/src/sass/messaging.sass
@@ -1,93 +1,86 @@
-$primary: #3498db
-$primary_dark: #2980b9
-$danger: #e74c3c
-$danger_dark: #c0392b
-$warning: #f1c40f
-$warning_dark: #f39c12
-$success: #2ecc71
-$success_dark: #27ae60
-    
-.embed 
-    background-color: #d8d8d8
-    border-radius: 5px
-    padding: 5px
-.alert-primary
-    border-radius: 2px
-    background-color: $primary
-    border: 1px solid $primary_dark
-    padding: 1rem
-    color: white
-.alert-danger
-    border-radius: 2px
-    background-color: $danger
-    border: 1px solid $danger_dark
-    padding: 1rem
-    color: white
-.alert-warning
-    border-radius: 2px
-    background-color: $warning
-    border: 1px solid $warning_dark
-    padding: 1rem
-    color: white
-.alert-success
-    border-radius: 2px
-    background-color: $success
-    border: 1px solid $success_dark
-    padding: 1rem
-    color: white
-.notification-primary
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $primary
-    border-radius: 2px
-.notification-primary h2
-    border-right: 0.3rem solid $primary
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-danger
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $danger
-    border-radius: 2px
-.notification-danger h2
-    border-right: 0.3rem solid $danger
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-warning
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $warning
-    border-radius: 2px
-.notification-warning h2
-    border-right: 0.3rem solid $warning
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-success
-    width: 100%;
-    display: flex
-    padding: 5px
-    border: 2px solid $success
-    border-radius: 2px
-.notification-success h2
-    border-right: 0.3rem solid $success
-    padding: 5px
-    margin-right: 5px;
-    min-width: 70px
-    height: auto
-    display: flex
-.notification-body
-    line-height: 30pt
-    font-size: 15pt
+@import variables
+    
+.embed 
+    background-color: #d8d8d8
+    border-radius: 5px
+    padding: 5px
+.alert-primary
+    border-radius: 2px
+    background-color: $primary
+    border: 1px solid $primary_dark
+    padding: 1rem
+    color: white
+.alert-danger
+    border-radius: 2px
+    background-color: $danger
+    border: 1px solid $danger_dark
+    padding: 1rem
+    color: white
+.alert-warning
+    border-radius: 2px
+    background-color: $warning
+    border: 1px solid $warning_dark
+    padding: 1rem
+    color: white
+.alert-success
+    border-radius: 2px
+    background-color: $success
+    border: 1px solid $success_dark
+    padding: 1rem
+    color: white
+.notification-primary
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $primary
+    border-radius: 2px
+.notification-primary h2
+    border-right: 0.3rem solid $primary
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-danger
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $danger
+    border-radius: 2px
+.notification-danger h2
+    border-right: 0.3rem solid $danger
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-warning
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $warning
+    border-radius: 2px
+.notification-warning h2
+    border-right: 0.3rem solid $warning
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-success
+    width: 100%;
+    display: flex
+    padding: 5px
+    border: 2px solid $success
+    border-radius: 2px
+.notification-success h2
+    border-right: 0.3rem solid $success
+    padding: 5px
+    margin-right: 5px;
+    min-width: 70px
+    height: auto
+    display: flex
+.notification-body
+    line-height: 30pt
+    font-size: 15pt
     word-wrap: break-word
\ No newline at end of file
diff --git a/src/scss/navbar.sass b/src/sass/navbar.sass
similarity index 95%
rename from src/scss/navbar.sass
rename to src/sass/navbar.sass
index 03627fc..971811b 100644
--- a/src/scss/navbar.sass
+++ b/src/sass/navbar.sass
@@ -1,10 +1,7 @@
+@import variables
 
-$navBG: #f1f1f1
-$navgap: 1em
-$navdefcolor: #2e2e2e
-$navhovcolor: #a5a5a5    
 header
-    background: $navBG
+    background: $primBG
     text-align: center
     height: 30px
     z-index: 999
@@ -47,7 +44,7 @@ header
 nav
     text-align: left
     width: 100%
-    background: $navBG
+    background: $primBG
     display: none
     transform: scale(1, 0)
     transform-origin: top
diff --git a/src/scss/selector.sass b/src/sass/selector.sass
similarity index 92%
rename from src/scss/selector.sass
rename to src/sass/selector.sass
index b1484db..d68da9b 100644
--- a/src/scss/selector.sass
+++ b/src/sass/selector.sass
@@ -1,100 +1,97 @@
-$primBG: rgb(248, 248, 248)
-$columns: 12
-$primary: #3498db
-$primary_dark: #2980b9
-
-/* The switch - the box around the slider */
-.switch 
-    position: relative
-    display: inline-block
-    width: 60px
-    height: 34px
-/* Hide default HTML checkbox */
-.switch input 
-    opacity: 0
-    width: 0
-    height: 0
-/* The slider */
-.slider 
-    position: absolute
-    cursor: pointer
-    top: 0
-    left: 0
-    right: 0
-    bottom: 0
-    background-color: #ccc
-    -webkit-transition: .4s
-    transition: .4s
-.slider:before 
-    position: absolute
-    content: ""
-    height: 26px
-    width: 26px
-    left: 4px
-    bottom: 4px
-    background-color: white
-    -webkit-transition: .4s
-    transition: .4s
-input:checked + .slider 
-    background-color: $primary
-input:focus + .slider 
-    box-shadow: 0 0 1px $primary
-input:checked + .slider:before 
-    -webkit-transform: translateX(26px)
-    -ms-transform: translateX(26px)
-    transform: translateX(26px)
-/* Rounded sliders */
-.slider.round 
-    border-radius: 34px
-.slider.round:before 
-    border-radius: 50%
-/* Range slider */
-.range-slider
-    -webkit-appearance: none
-    border-radius: 5px
-    width: 100%
-    height: 25px
-    background: #d8d8d8
-    outline: none
-    opacity: 0.7
-    -webkit-transition: .2s
-    transition: opacity .2s
-.range-slider:hover
-    opacity: 1
-.range-slider::-webkit-slider-thumb
-    -webkit-appearance: none
-    appearance: none
-    width: 25px
-    height: 25px
-    background: #5b6568
-    cursor: pointer
-.range-slider::-moz-range-thumb 
-    width: 25px
-    height: 25px
-    background: #5b6568
-    cursor: pointer
-.range-slider-rounded
-    -webkit-appearance: none
-    border-radius: 5px
-    width: 100%
-    height: 15px
-    background: #d8d8d8
-    outline: none
-    opacity: 0.7
-    -webkit-transition: .2s
-    transition: opacity .2s
-.range-slider-rounded:hover
-    opacity: 1
-.range-slider-rounded::-webkit-slider-thumb
-    -webkit-appearance: none
-    appearance: none
-    border-radius: 50%
-    width: 25px
-    height: 25px
-    background: #5b6568
-    cursor: pointer
-.range-slider-rounded::-moz-range-thumb 
-    width: 25px
-    height: 25px
-    background: #ecf0f1
+@import variables
+
+/* The switch - the box around the slider */
+.switch 
+    position: relative
+    display: inline-block
+    width: 60px
+    height: 34px
+/* Hide default HTML checkbox */
+.switch input 
+    opacity: 0
+    width: 0
+    height: 0
+/* The slider */
+.slider 
+    position: absolute
+    cursor: pointer
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-color: #ccc
+    -webkit-transition: .4s
+    transition: .4s
+.slider:before 
+    position: absolute
+    content: ""
+    height: 26px
+    width: 26px
+    left: 4px
+    bottom: 4px
+    background-color: white
+    -webkit-transition: .4s
+    transition: .4s
+input:checked + .slider 
+    background-color: $primary
+input:focus + .slider 
+    box-shadow: 0 0 1px $primary
+input:checked + .slider:before 
+    -webkit-transform: translateX(26px)
+    -ms-transform: translateX(26px)
+    transform: translateX(26px)
+/* Rounded sliders */
+.slider.round 
+    border-radius: 34px
+.slider.round:before 
+    border-radius: 50%
+/* Range slider */
+.range-slider
+    -webkit-appearance: none
+    border-radius: 5px
+    width: 100%
+    height: 25px
+    background: #d8d8d8
+    outline: none
+    opacity: 0.7
+    -webkit-transition: .2s
+    transition: opacity .2s
+.range-slider:hover
+    opacity: 1
+.range-slider::-webkit-slider-thumb
+    -webkit-appearance: none
+    appearance: none
+    width: 25px
+    height: 25px
+    background: #5b6568
+    cursor: pointer
+.range-slider::-moz-range-thumb 
+    width: 25px
+    height: 25px
+    background: #5b6568
+    cursor: pointer
+.range-slider-rounded
+    -webkit-appearance: none
+    border-radius: 5px
+    width: 100%
+    height: 15px
+    background: #d8d8d8
+    outline: none
+    opacity: 0.7
+    -webkit-transition: .2s
+    transition: opacity .2s
+.range-slider-rounded:hover
+    opacity: 1
+.range-slider-rounded::-webkit-slider-thumb
+    -webkit-appearance: none
+    appearance: none
+    border-radius: 50%
+    width: 25px
+    height: 25px
+    background: #5b6568
+    cursor: pointer
+.range-slider-rounded::-moz-range-thumb 
+    width: 25px
+    height: 25px
+    background: #ecf0f1
     cursor: pointer
\ No newline at end of file
diff --git a/src/sass/variables.sass b/src/sass/variables.sass
new file mode 100644
index 0000000..fa1710c
--- /dev/null
+++ b/src/sass/variables.sass
@@ -0,0 +1,18 @@
+$border_width: 2px
+$border_radius: 5px
+$padding: 5px
+$columns: 12
+$navgap: 1em
+
+/* Colours */
+$navhovcolor: #a5a5a5   
+$navdefcolor: #2e2e2e
+$primBG: rgb(248, 248, 248)
+$primary: #3498db
+$primary_dark: #2980b9
+$danger: #e74c3c
+$danger_dark: #c0392b
+$warning: #f1c40f
+$warning_dark: #f39c12
+$success: #2ecc71
+$success_dark: #27ae60
\ No newline at end of file
diff --git a/src/scss/forms.sass b/src/scss/forms.sass
deleted file mode 100644
index e69de29..0000000