diff --git a/package-lock.json b/package-lock.json
index e5017b6f3..02064365c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -416,6 +416,16 @@
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
       "dev": true
     },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "dev": true,
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -504,12 +514,10 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true,
-      "optional": true
+    "arrive": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/arrive/-/arrive-2.4.1.tgz",
+      "integrity": "sha1-VkyH8gvAm4DeeBEk2UMWlQBLgCA="
     },
     "asn1": {
       "version": "0.2.3",
@@ -564,6 +572,12 @@
       "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=",
       "dev": true
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "dev": true
+    },
     "async-limiter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
@@ -1409,6 +1423,15 @@
       "integrity": "sha1-RqoXUftqL5PuXmibsQh9SxTGwgU=",
       "dev": true
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
@@ -1544,9 +1567,10 @@
       }
     },
     "bootstrap": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
-      "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E="
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.1.tgz",
+      "integrity": "sha512-SpiDSOcbg4J/PjVSt4ny5eY6j74VbVSjROY4Fb/WIUXBV9cnb5luyR4KnPvNoXuGnBK1T+nJIWqRsvU3yP8Mcg==",
+      "dev": true
     },
     "bootstrap-colorpicker": {
       "version": "2.5.2",
@@ -1556,10 +1580,10 @@
         "jquery": ">=1.10"
       }
     },
-    "bootstrap-switch": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/bootstrap-switch/-/bootstrap-switch-3.3.4.tgz",
-      "integrity": "sha1-cOCusqh3wNx2aZHeEI4hcPwpov8="
+    "bootstrap-material-design": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-material-design/-/bootstrap-material-design-4.1.1.tgz",
+      "integrity": "sha1-h0M9sL9k1qCvsPX6qoYGE0ydJtI="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -2066,6 +2090,18 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-2.0.2.tgz",
+      "integrity": "sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ==",
+      "dev": true,
+      "requires": {
+        "for-own": "^1.0.0",
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.0",
+        "shallow-clone": "^1.0.0"
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -2253,6 +2289,12 @@
         "date-now": "^0.1.4"
       }
     },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "dev": true
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -2808,6 +2850,12 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "dev": true
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -4088,6 +4136,15 @@
       "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
       "dev": true
     },
+    "for-own": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+      "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+      "dev": true,
+      "requires": {
+        "for-in": "^1.0.1"
+      }
+    },
     "foreach": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@@ -4700,6 +4757,18 @@
         }
       }
     },
+    "fstream": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
+      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      }
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -4717,6 +4786,44 @@
       "resolved": "https://registry.npmjs.org/gamma/-/gamma-1.0.0.tgz",
       "integrity": "sha1-mDwck5/iPZMnAVhXEeHZpDDLdMs="
     },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        }
+      }
+    },
     "gaze": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz",
@@ -4726,6 +4833,21 @@
         "globule": "^1.0.0"
       }
     },
+    "generate-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
+      "integrity": "sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=",
+      "dev": true
+    },
+    "generate-object-property": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
+      "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
+      "dev": true,
+      "requires": {
+        "is-property": "^1.0.0"
+      }
+    },
     "get-caller-file": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
@@ -5234,6 +5356,12 @@
       "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
       "dev": true
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "dev": true
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@@ -5665,13 +5793,6 @@
       "integrity": "sha512-pUh+xUQQhQzevjRHHFqqcTy0/dP/kS9I8HSrUydhihjuD09W6ldVWFtIrwhXdUJHis3i2rZNqEHpZH/cbinFbg==",
       "dev": true
     },
-    "image-size": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
-      "dev": true,
-      "optional": true
-    },
     "import-local": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz",
@@ -5698,6 +5819,12 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "in-publish": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "dev": true
+    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -6009,6 +6136,25 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-my-ip-valid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
+      "integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==",
+      "dev": true
+    },
+    "is-my-json-valid": {
+      "version": "2.17.2",
+      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz",
+      "integrity": "sha512-IBhBslgngMQN8DDSppmgDv7RNrlFotuuDsKcrCP3+HbFaVivIBU7u9oiiErw8sH4ynx3+gOGQ3q2otkgiSi6kg==",
+      "dev": true,
+      "requires": {
+        "generate-function": "^2.0.0",
+        "generate-object-property": "^1.1.0",
+        "is-my-ip-valid": "^1.0.0",
+        "jsonpointer": "^4.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -6091,6 +6237,12 @@
       "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
       "dev": true
     },
+    "is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=",
+      "dev": true
+    },
     "is-regex": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
@@ -6517,6 +6669,12 @@
         }
       }
     },
+    "jsonpointer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
+      "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
+      "dev": true
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -6620,41 +6778,6 @@
       "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==",
       "dev": true
     },
-    "less": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/less/-/less-3.0.4.tgz",
-      "integrity": "sha512-q3SyEnPKbk9zh4l36PGeW2fgynKu+FpbhiUNx/yaiBUQ3V0CbACCgb9FzYWcRgI2DJlP6eI4jc8XPrCTi55YcQ==",
-      "dev": true,
-      "requires": {
-        "errno": "^0.1.1",
-        "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "mime": "^1.4.1",
-        "mkdirp": "^0.5.0",
-        "promise": "^7.1.1",
-        "request": "^2.83.0",
-        "source-map": "~0.6.0"
-      }
-    },
-    "less-loader": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.1.0.tgz",
-      "integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==",
-      "dev": true,
-      "requires": {
-        "clone": "^2.1.1",
-        "loader-utils": "^1.1.0",
-        "pify": "^3.0.0"
-      },
-      "dependencies": {
-        "clone": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.1.tgz",
-          "integrity": "sha1-0hfR6WERjjrJpLi7oyhVU79kfNs=",
-          "dev": true
-        }
-      }
-    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -6740,6 +6863,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
       "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+      "dev": true
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -6788,6 +6917,12 @@
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
       "dev": true
     },
+    "lodash.tail": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
+      "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
+      "dev": true
+    },
     "lodash.unescape": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
@@ -7054,13 +7189,6 @@
         "brorand": "^1.0.1"
       }
     },
-    "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
-      "optional": true
-    },
     "mime-db": {
       "version": "1.33.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
@@ -7153,6 +7281,24 @@
         }
       }
     },
+    "mixin-object": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
+      "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
+      "dev": true,
+      "requires": {
+        "for-in": "^0.1.3",
+        "is-extendable": "^0.1.1"
+      },
+      "dependencies": {
+        "for-in": {
+          "version": "0.1.8",
+          "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
+          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=",
+          "dev": true
+        }
+      }
+    },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -7248,8 +7394,7 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
       "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "nanomatch": {
       "version": "1.2.9",
@@ -7315,6 +7460,35 @@
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
       "integrity": "sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ=="
     },
+    "node-gyp": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
+      "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=",
+      "dev": true,
+      "requires": {
+        "fstream": "^1.0.0",
+        "glob": "^7.0.3",
+        "graceful-fs": "^4.1.2",
+        "minimatch": "^3.0.2",
+        "mkdirp": "^0.5.0",
+        "nopt": "2 || 3",
+        "npmlog": "0 || 1 || 2 || 3 || 4",
+        "osenv": "0",
+        "request": "2",
+        "rimraf": "2",
+        "semver": "~5.3.0",
+        "tar": "^2.0.0",
+        "which": "1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
+          "dev": true
+        }
+      }
+    },
     "node-libs-browser": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.1.0.tgz",
@@ -7359,6 +7533,182 @@
       "resolved": "https://registry.npmjs.org/node-md6/-/node-md6-0.1.0.tgz",
       "integrity": "sha1-9WH0WyszY1K4KXbFHMoRR9U5N/U="
     },
+    "node-sass": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.0.tgz",
+      "integrity": "sha512-QFHfrZl6lqRU3csypwviz2XLgGNOoWQbo2GOvtsfQqOfL4cy1BtWnhx/XUeAO9LT3ahBzSRXcEO6DdvAH9DzSg==",
+      "dev": true,
+      "requires": {
+        "async-foreach": "^0.1.3",
+        "chalk": "^1.1.1",
+        "cross-spawn": "^3.0.0",
+        "gaze": "^1.0.0",
+        "get-stdin": "^4.0.1",
+        "glob": "^7.0.3",
+        "in-publish": "^2.0.0",
+        "lodash.assign": "^4.2.0",
+        "lodash.clonedeep": "^4.3.2",
+        "lodash.mergewith": "^4.6.0",
+        "meow": "^3.7.0",
+        "mkdirp": "^0.5.1",
+        "nan": "^2.10.0",
+        "node-gyp": "^3.3.1",
+        "npmlog": "^4.0.0",
+        "request": "~2.79.0",
+        "sass-graph": "^2.2.4",
+        "stdout-stream": "^1.4.0",
+        "true-case-path": "^1.0.2"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+          "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
+          "dev": true
+        },
+        "aws-sign2": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+          "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
+          "dev": true
+        },
+        "boom": {
+          "version": "2.10.1",
+          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+          "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
+          "dev": true,
+          "requires": {
+            "hoek": "2.x.x"
+          }
+        },
+        "caseless": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
+          "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "which": "^1.2.9"
+          }
+        },
+        "cryptiles": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+          "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
+          "dev": true,
+          "requires": {
+            "boom": "2.x.x"
+          }
+        },
+        "form-data": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+          "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.5",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "har-validator": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
+          "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=",
+          "dev": true,
+          "requires": {
+            "chalk": "^1.1.1",
+            "commander": "^2.9.0",
+            "is-my-json-valid": "^2.12.4",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "hawk": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+          "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+          "dev": true,
+          "requires": {
+            "boom": "2.x.x",
+            "cryptiles": "2.x.x",
+            "hoek": "2.x.x",
+            "sntp": "1.x.x"
+          }
+        },
+        "hoek": {
+          "version": "2.16.3",
+          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
+          "dev": true
+        },
+        "http-signature": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+          "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+          "dev": true,
+          "requires": {
+            "assert-plus": "^0.2.0",
+            "jsprim": "^1.2.2",
+            "sshpk": "^1.7.0"
+          }
+        },
+        "qs": {
+          "version": "6.3.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz",
+          "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=",
+          "dev": true
+        },
+        "request": {
+          "version": "2.79.0",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
+          "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "~0.6.0",
+            "aws4": "^1.2.1",
+            "caseless": "~0.11.0",
+            "combined-stream": "~1.0.5",
+            "extend": "~3.0.0",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.1.1",
+            "har-validator": "~2.0.6",
+            "hawk": "~3.1.3",
+            "http-signature": "~1.1.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.7",
+            "oauth-sign": "~0.8.1",
+            "qs": "~6.3.0",
+            "stringstream": "~0.0.4",
+            "tough-cookie": "~2.3.0",
+            "tunnel-agent": "~0.4.1",
+            "uuid": "^3.0.0"
+          }
+        },
+        "sntp": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+          "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
+          "dev": true,
+          "requires": {
+            "hoek": "2.x.x"
+          }
+        },
+        "tunnel-agent": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
+          "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=",
+          "dev": true
+        }
+      }
+    },
     "nomnom": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.5.2.tgz",
@@ -7437,6 +7787,18 @@
         "path-key": "^2.0.0"
       }
     },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "dev": true,
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
     "nth-check": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.1.tgz",
@@ -7651,6 +8013,16 @@
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "otp": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/otp/-/otp-0.1.3.tgz",
@@ -7964,6 +8336,11 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
+      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -8800,16 +9177,6 @@
       "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
       "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74="
     },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -8828,14 +9195,6 @@
         "revalidator": "0.1.x",
         "utile": "0.3.x",
         "winston": "2.1.x"
-      },
-      "dependencies": {
-        "colors": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/colors/-/colors-1.3.0.tgz",
-          "integrity": "sha512-EDpX3a7wHMWFA7PUHWPHNWqOxIIRSJetuwl0AS5Oi/5FMV8kWm69RTlgm00GKjBO1xFHMtBbL49yRtMMdticBw==",
-          "dev": true
-        }
       }
     },
     "proxy-addr": {
@@ -9669,6 +10028,121 @@
         }
       }
     },
+    "sass-graph": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "lodash": "^4.0.0",
+        "scss-tokenizer": "^0.2.3",
+        "yargs": "^7.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "dev": true
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "dev": true,
+          "requires": {
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wrap-ansi": "^2.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "dev": true,
+          "requires": {
+            "lcid": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "which-module": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
+          "dev": true
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+          "dev": true
+        },
+        "yargs": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+          "dev": true,
+          "requires": {
+            "camelcase": "^3.0.0",
+            "cliui": "^3.2.0",
+            "decamelize": "^1.1.1",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^1.4.0",
+            "read-pkg-up": "^1.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^1.0.2",
+            "which-module": "^1.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^5.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+          "dev": true,
+          "requires": {
+            "camelcase": "^3.0.0"
+          }
+        }
+      }
+    },
+    "sass-loader": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.0.2.tgz",
+      "integrity": "sha512-HfoUBjcBf56u7+Qb6/15OmfL4nymtACwAYXRuhgaSUJI3QF0ndID76SiTlwxDYgNYLtvP5s3xVSYMZISezsuKQ==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^2.0.1",
+        "loader-utils": "^1.0.1",
+        "lodash.tail": "^4.1.1",
+        "neo-async": "^2.5.0",
+        "pify": "^3.0.0"
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -9716,6 +10190,27 @@
       "resolved": "https://registry.npmjs.org/scryptsy/-/scryptsy-2.0.0.tgz",
       "integrity": "sha1-Jiw28CMc+nZU4jY/o5TNLexm83g="
     },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "dev": true,
+      "requires": {
+        "js-base64": "^2.1.8",
+        "source-map": "^0.4.2"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -9856,6 +10351,25 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-1.0.0.tgz",
+      "integrity": "sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA==",
+      "dev": true,
+      "requires": {
+        "is-extendable": "^0.1.1",
+        "kind-of": "^5.0.0",
+        "mixin-object": "^2.0.1"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+          "dev": true
+        }
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -9908,6 +10422,11 @@
         "is-fullwidth-code-point": "^2.0.0"
       }
     },
+    "snackbarjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/snackbarjs/-/snackbarjs-1.1.0.tgz",
+      "integrity": "sha1-pont9ExxEEdzvPIhxGk3ZosLvNY="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -10313,6 +10832,15 @@
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
       "dev": true
     },
+    "stdout-stream": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
+      "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.0.1"
+      }
+    },
     "stealthy-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
@@ -10406,6 +10934,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "stringstream": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",
+      "integrity": "sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==",
+      "dev": true
+    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -10551,6 +11085,17 @@
       "integrity": "sha512-dQRhbNQkRnaqauC7WqSJ21EEksgT0fYZX2lqXzGkpo8JNig9zGZTYoMGvyI2nWmXlE2VSVXVDu7wLVGu/mQEsg==",
       "dev": true
     },
+    "tar": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+      "dev": true,
+      "requires": {
+        "block-stream": "*",
+        "fstream": "^1.0.2",
+        "inherits": "2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -10742,6 +11287,30 @@
         "progress": "~1.1.2"
       }
     },
+    "true-case-path": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.2.tgz",
+      "integrity": "sha1-fskRMJJHZsf1c74wIMNPj9/QDWI=",
+      "dev": true,
+      "requires": {
+        "glob": "^6.0.4"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
+          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
+          "dev": true,
+          "requires": {
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "2 || 3",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -11633,6 +12202,15 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
     "winston": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/winston/-/winston-2.1.1.tgz",
diff --git a/package.json b/package.json
index ade3fe2ec..d675dd4b7 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
+    "bootstrap": "^4.1.1",
     "colors": "^1.3.0",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",
@@ -55,12 +56,12 @@
     "ink-docstrap": "^1.3.2",
     "js-to-mjs": "^0.2.0",
     "jsdoc-babel": "^0.4.0",
-    "less": "^3.0.2",
-    "less-loader": "^4.1.0",
+    "node-sass": "^4.9.0",
     "postcss-css-variables": "^0.8.1",
     "postcss-import": "^11.1.0",
     "postcss-loader": "^2.1.4",
     "prompt": "^1.0.0",
+    "sass-loader": "^7.0.2",
     "sitemap": "^1.13.0",
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",
@@ -71,13 +72,13 @@
     "worker-loader": "^1.1.1"
   },
   "dependencies": {
+    "arrive": "^2.4.1",
     "babel-plugin-transform-builtin-extend": "1.1.2",
     "babel-polyfill": "^6.26.0",
     "bcryptjs": "^2.4.3",
     "bignumber.js": "^7.0.1",
-    "bootstrap": "^3.3.7",
     "bootstrap-colorpicker": "^2.5.2",
-    "bootstrap-switch": "^3.3.4",
+    "bootstrap-material-design": "^4.1.1",
     "bson": "^2.0.6",
     "chi-squared": "^1.1.0",
     "crypto-api": "^0.8.0",
@@ -108,7 +109,9 @@
     "node-md6": "^0.1.0",
     "nwmatcher": "^1.4.4",
     "otp": "^0.1.3",
+    "popper.js": "^1.12.9",
     "scryptsy": "^2.0.0",
+    "snackbarjs": "^1.1.0",
     "sortablejs": "^1.7.0",
     "split.js": "^1.3.5",
     "ssdeep.js": "0.0.2",
diff --git a/src/core/Ingredient.mjs b/src/core/Ingredient.mjs
index 914500f37..023590148 100755
--- a/src/core/Ingredient.mjs
+++ b/src/core/Ingredient.mjs
@@ -21,7 +21,10 @@ class Ingredient {
         this.name  = "";
         this.type  = "";
         this._value = null;
+        this.disabled = false;
+        this.hint = "";
         this.toggleValues = [];
+        this.target = null;
 
         if (ingredientConfig) {
             this._parseConfig(ingredientConfig);
@@ -39,7 +42,10 @@ class Ingredient {
         this.name = ingredientConfig.name;
         this.type = ingredientConfig.type;
         this.defaultValue = ingredientConfig.value;
+        this.disabled = !!ingredientConfig.disabled;
+        this.hint = ingredientConfig.hint || false;
         this.toggleValues = ingredientConfig.toggleValues;
+        this.target = typeof ingredientConfig.target !== "undefined" ? ingredientConfig.target : null;
     }
 
 
diff --git a/src/core/Operation.mjs b/src/core/Operation.mjs
index 855b75ab0..cdeb9a731 100755
--- a/src/core/Operation.mjs
+++ b/src/core/Operation.mjs
@@ -170,12 +170,17 @@ class Operation {
      */
     get args() {
         return this._ingList.map(ing => {
-            return {
+            const conf = {
                 name: ing.name,
                 type: ing.type,
-                value: ing.defaultValue,
-                toggleValues: ing.toggleValues || []
+                value: ing.defaultValue
             };
+
+            if (ing.toggleValues) conf.toggleValues = ing.toggleValues;
+            if (ing.hint) conf.hint = ing.hint;
+            if (ing.disabled) conf.disabled = ing.disabled;
+            if (ing.target) conf.target = ing.target;
+            return conf;
         });
     }
 
diff --git a/src/core/Utils.mjs b/src/core/Utils.mjs
index c35aef136..78d4d97d7 100755
--- a/src/core/Utils.mjs
+++ b/src/core/Utils.mjs
@@ -828,11 +828,11 @@ class Utils {
      */
     static async displayFilesAsHTML(files) {
         const formatDirectory = function(file) {
-            const html = `<div class='panel panel-default' style='white-space: normal;'>
-                    <div class='panel-heading' role='tab'>
-                        <h4 class='panel-title'>
+            const html = `<div class='card' style='white-space: normal;'>
+                    <div class='card-header'>
+                        <h6 class="mb-0">
                             ${Utils.escapeHtml(file.name)}
-                        </h4>
+                        </h6>
                     </div>
                 </div>`;
             return html;
@@ -845,29 +845,29 @@ class Utils {
                 {type: "octet/stream"}
             );
 
-            const html = `<div class='panel panel-default' style='white-space: normal;'>
-                    <div class='panel-heading' role='tab' id='heading${i}'>
-                        <h4 class='panel-title'>
-                            <div>
-                                <a href='#collapse${i}'
-                                    class='collapsed'
-                                    data-toggle='collapse'
-                                    aria-expanded='true'
-                                    aria-controls='collapse${i}'
-                                    title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">${Utils.escapeHtml(file.name)}</a>
-                                <a href='${URL.createObjectURL(blob)}'
-                                    title='Download ${Utils.escapeHtml(file.name)}'
-                                    download='${Utils.escapeHtml(file.name)}'>&#x1f4be;</a>
-                                <span class='pull-right'>
-                                    ${file.size.toLocaleString()} bytes
-                                </span>
-                            </div>
-                        </h4>
+            const html = `<div class='card' style='white-space: normal;'>
+                    <div class='card-header' id='heading${i}'>
+                        <h6 class='mb-0'>
+                            <a class='collapsed'
+                                data-toggle='collapse'
+                                href='#collapse${i}'
+                                aria-expanded='false'
+                                aria-controls='collapse${i}'
+                                title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">
+                                ${Utils.escapeHtml(file.name)}</a>
+                            <span class='float-right' style="margin-top: -3px">
+                                ${file.size.toLocaleString()} bytes
+                                <a title="Download ${Utils.escapeHtml(file.name)}"
+                                    href='${URL.createObjectURL(blob)}'
+                                    download='${Utils.escapeHtml(file.name)}'>
+                                    <i class="material-icons" style="vertical-align: bottom">save</i>
+                                </a>
+                            </span>
+                        </h6>
                     </div>
-                    <div id='collapse${i}' class='panel-collapse collapse'
-                        role='tabpanel' aria-labelledby='heading${i}'>
-                        <div class='panel-body'>
-                            <pre><code>${Utils.escapeHtml(Utils.arrayBufferToStr(buff.buffer))}</code></pre>
+                    <div id='collapse${i}' class='collapse' aria-labelledby='heading${i}' data-parent="#files">
+                        <div class='card-body'>
+                            <pre>${Utils.escapeHtml(Utils.arrayBufferToStr(buff.buffer))}</pre>
                         </div>
                     </div>
                 </div>`;
@@ -875,8 +875,8 @@ class Utils {
         };
 
         let html = `<div style='padding: 5px; white-space: normal;'>
-                ${files.length} file(s) found<NL>
-            </div>`;
+                ${files.length} file(s) found
+            </div><div id="files" style="padding: 20px">`;
 
         for (let i = 0; i < files.length; i++) {
             if (files[i].name.endsWith("/")) {
@@ -886,7 +886,7 @@ class Utils {
             }
         }
 
-        return html;
+        return html += "</div>";
     }
 
 
diff --git a/src/core/lib/CanvasComponents.mjs b/src/core/lib/CanvasComponents.mjs
index 04664c3db..183dd0401 100755
--- a/src/core/lib/CanvasComponents.mjs
+++ b/src/core/lib/CanvasComponents.mjs
@@ -48,7 +48,7 @@ export function drawBarChart(canvas, scores, xAxisLabel, yAxisLabel, numXLabels,
         leftPadding = canvas.width * 0.08,
         rightPadding = canvas.width * 0.03,
         topPadding = canvas.height * 0.08,
-        bottomPadding = canvas.height * 0.15,
+        bottomPadding = canvas.height * 0.2,
         graphHeight = canvas.height - topPadding - bottomPadding,
         graphWidth = canvas.width - leftPadding - rightPadding,
         base = topPadding + graphHeight,
@@ -146,7 +146,7 @@ export function drawScaleBar(canvas, score, max, markings) {
         leftPadding = canvas.width * 0.01,
         rightPadding = canvas.width * 0.01,
         topPadding = canvas.height * 0.1,
-        bottomPadding = canvas.height * 0.3,
+        bottomPadding = canvas.height * 0.35,
         barHeight = canvas.height - topPadding - bottomPadding,
         barWidth = canvas.width - leftPadding - rightPadding;
 
diff --git a/src/core/lib/DateTime.mjs b/src/core/lib/DateTime.mjs
index 89b0e3c6e..00a177c61 100644
--- a/src/core/lib/DateTime.mjs
+++ b/src/core/lib/DateTime.mjs
@@ -49,8 +49,8 @@ export const DATETIME_FORMATS = [
  * MomentJS DateTime formatting examples.
  */
 export const FORMAT_EXAMPLES = `Format string tokens:
-<table class="table table-striped table-hover table-condensed table-bordered" style="font-family: sans-serif">
-  <thead>
+<table class="table table-striped table-hover table-sm table-bordered" style="font-family: sans-serif">
+  <thead class="thead-dark">
     <tr>
       <th>Category</th>
       <th>Token</th>
diff --git a/src/core/operations/Diff.mjs b/src/core/operations/Diff.mjs
index 8c72245cb..1fd6e5d89 100644
--- a/src/core/operations/Diff.mjs
+++ b/src/core/operations/Diff.mjs
@@ -47,9 +47,10 @@ class Diff extends Operation {
                 "value": true
             },
             {
-                "name": "Ignore whitespace (relevant for word and line)",
+                "name": "Ignore whitespace",
                 "type": "boolean",
-                "value": false
+                "value": false,
+                "hint": "Relevant for word and line"
             }
         ];
     }
diff --git a/src/core/operations/Magic.mjs b/src/core/operations/Magic.mjs
index b44b7ccc2..c5e7c53e1 100644
--- a/src/core/operations/Magic.mjs
+++ b/src/core/operations/Magic.mjs
@@ -77,7 +77,7 @@ class Magic extends Operation {
         const currentRecipeConfig = this.state.opList.map(op => op.config);
 
         let output = `<table
-                class='table table-hover table-condensed table-bordered'
+                class='table table-hover table-sm table-bordered'
                 style='table-layout: fixed;'>
             <tr>
                 <th>Recipe (click to load)</th>
diff --git a/src/core/operations/ParseColourCode.mjs b/src/core/operations/ParseColourCode.mjs
index a80e3b3af..ca6ee80d1 100644
--- a/src/core/operations/ParseColourCode.mjs
+++ b/src/core/operations/ParseColourCode.mjs
@@ -113,7 +113,7 @@ CMYK: ${cmyk}
         document.getElementById('input-text').value = 'rgba(' +
             color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')';
         window.app.autoBake();
-    });
+    }).children(".colorpicker").removeClass('dropdown-menu');
 </script>`;
     }
 
diff --git a/src/core/operations/ParseDateTime.mjs b/src/core/operations/ParseDateTime.mjs
index bb88c95d4..8b39616d2 100644
--- a/src/core/operations/ParseDateTime.mjs
+++ b/src/core/operations/ParseDateTime.mjs
@@ -7,7 +7,6 @@
 import Operation from "../Operation";
 import moment from "moment-timezone";
 import {DATETIME_FORMATS, FORMAT_EXAMPLES} from "../lib/DateTime";
-import OperationError from "../errors/OperationError";
 
 /**
  * Parse DateTime operation
@@ -60,7 +59,7 @@ class ParseDateTime extends Operation {
             date = moment.tz(input, inputFormat, inputTimezone);
             if (!date || date.format() === "Invalid date") throw Error;
         } catch (err) {
-            throw new OperationError(`Invalid format.\n\n${FORMAT_EXAMPLES}`);
+            return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
         }
 
         output += "Date: " + date.format("dddd Do MMMM YYYY") +
diff --git a/src/core/operations/ParseIPv4Header.mjs b/src/core/operations/ParseIPv4Header.mjs
index 4c745eaa4..cf5b31aa7 100644
--- a/src/core/operations/ParseIPv4Header.mjs
+++ b/src/core/operations/ParseIPv4Header.mjs
@@ -97,7 +97,7 @@ class ParseIPv4Header extends Operation {
             checksumResult = givenChecksum + " (incorrect, should be " + correctChecksum + ")";
         }
 
-        output = `<table class='table table-hover table-condensed table-bordered table-nonfluid'><tr><th>Field</th><th>Value</th></tr>
+        output = `<table class='table table-hover table-sm table-bordered table-nonfluid'><tr><th>Field</th><th>Value</th></tr>
 <tr><td>Version</td><td>${version}</td></tr>
 <tr><td>Internet Header Length (IHL)</td><td>${ihl} (${ihl * 4} bytes)</td></tr>
 <tr><td>Differentiated Services Code Point (DSCP)</td><td>${dscp}</td></tr>
diff --git a/src/core/operations/ToTable.mjs b/src/core/operations/ToTable.mjs
index 944904e6f..5f6b96700 100644
--- a/src/core/operations/ToTable.mjs
+++ b/src/core/operations/ToTable.mjs
@@ -147,12 +147,12 @@ class ToTable extends Operation {
          */
         function htmlOutput(tableData) {
             // Start the HTML output with suitable classes for styling.
-            let output = "<table class='table table-hover table-condensed table-bordered table-nonfluid'>";
+            let output = "<table class='table table-hover table-sm table-bordered table-nonfluid'>";
 
             // If the first row is a header then put it in <thead> with <th> cells.
             if (firstRowHeader) {
                 const row = tableData.shift();
-                output += "<thead>";
+                output += "<thead class='thead-light'>";
                 output += outputRow(row, "th");
                 output += "</thead>";
             }
diff --git a/src/core/operations/TranslateDateTimeFormat.mjs b/src/core/operations/TranslateDateTimeFormat.mjs
index 6ed72d9f1..6a60f6f02 100644
--- a/src/core/operations/TranslateDateTimeFormat.mjs
+++ b/src/core/operations/TranslateDateTimeFormat.mjs
@@ -7,7 +7,6 @@
 import Operation from "../Operation";
 import moment from "moment-timezone";
 import {DATETIME_FORMATS, FORMAT_EXAMPLES} from "../lib/DateTime";
-import OperationError from "../errors/OperationError";
 
 /**
  * Translate DateTime Format operation
@@ -68,7 +67,7 @@ class TranslateDateTimeFormat extends Operation {
             date = moment.tz(input, inputFormat, inputTimezone);
             if (!date || date.format() === "Invalid date") throw Error;
         } catch (err) {
-            throw new OperationError(`Invalid format.\n\n${FORMAT_EXAMPLES}`);
+            return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
         }
 
         return date.tz(outputTimezone).format(outputFormat);
diff --git a/src/web/App.mjs b/src/web/App.mjs
index c08658a7f..29ec20845 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -105,7 +105,7 @@ class App {
     handleError(err, logToConsole) {
         if (logToConsole) log.error(err);
         const msg = err.displayStr || err.toString();
-        this.alert(msg, "danger", this.options.errorTimeout, !this.options.showErrors);
+        this.alert(msg, this.options.errorTimeout, !this.options.showErrors);
     }
 
 
@@ -183,9 +183,10 @@ class App {
      * Sets the user's input data.
      *
      * @param {string} input - The string to set the input to
+     * @param {boolean} [silent=false] - Suppress statechange event
      */
-    setInput(input) {
-        this.manager.input.set(input);
+    setInput(input, silent=false) {
+        this.manager.input.set(input, silent);
     }
 
 
@@ -240,17 +241,16 @@ class App {
     initialiseSplitter() {
         this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
             sizes: [20, 30, 50],
-            minSize: [240, 325, 450],
+            minSize: [240, 370, 450],
             gutterSize: 4,
             onDrag: function() {
-                this.manager.controls.adjustWidth();
-                this.manager.output.adjustWidth();
+                this.manager.recipe.adjustWidth();
             }.bind(this)
         });
 
         this.ioSplitter = Split(["#input", "#output"], {
             direction: "vertical",
-            gutterSize: 4,
+            gutterSize: 4
         });
 
         this.resetLayout();
@@ -320,8 +320,8 @@ class App {
             if (this.operations.hasOwnProperty(favourites[i])) {
                 validFavs.push(favourites[i]);
             } else {
-                this.alert("The operation \"" + Utils.escapeHtml(favourites[i]) +
-                    "\" is no longer available. It has been removed from your favourites.", "info");
+                this.alert(`The operation "${Utils.escapeHtml(favourites[i])}" is no longer available. ` +
+                    "It has been removed from your favourites.");
             }
         }
         return validFavs;
@@ -337,7 +337,6 @@ class App {
         if (!this.isLocalStorageAvailable()) {
             this.alert(
                 "Your security settings do not allow access to local storage so your favourites cannot be saved.",
-                "danger",
                 5000
             );
             return false;
@@ -368,7 +367,7 @@ class App {
         const favourites = JSON.parse(localStorage.favourites);
 
         if (favourites.indexOf(name) >= 0) {
-            this.alert("'" + name + "' is already in your favourites", "info", 2000);
+            this.alert(`'${name}' is already in your favourites`, 3000);
             return;
         }
 
@@ -421,12 +420,12 @@ class App {
         if (this.uriParams.input) {
             try {
                 const inputData = fromBase64(this.uriParams.input);
-                this.setInput(inputData);
+                this.setInput(inputData, true);
             } catch (err) {}
         }
 
         this.autoBakePause = false;
-        this.autoBake();
+        window.dispatchEvent(this.manager.statechange);
     }
 
 
@@ -476,9 +475,8 @@ class App {
                 } else if (args[j].classList.contains("toggle-string")) {
                     // toggleString
                     args[j].value = recipeConfig[i].args[j].string;
-                    args[j].previousSibling.children[0].innerHTML =
-                        Utils.escapeHtml(recipeConfig[i].args[j].option) +
-                        " <span class='caret'></span>";
+                    args[j].parentNode.parentNode.querySelector("button").innerHTML =
+                        Utils.escapeHtml(recipeConfig[i].args[j].option);
                 } else {
                     // all others
                     args[j].value = recipeConfig[i].args[j];
@@ -507,9 +505,7 @@ class App {
     resetLayout() {
         this.columnSplitter.setSizes([20, 30, 50]);
         this.ioSplitter.setSizes([50, 50]);
-
-        this.manager.controls.adjustWidth();
-        this.manager.output.adjustWidth();
+        this.manager.recipe.adjustWidth();
     }
 
 
@@ -561,63 +557,35 @@ class App {
      * Pops up a message to the user and writes it to the console log.
      *
      * @param {string} str - The message to display (HTML supported)
-     * @param {string} style - The colour of the popup
-     *     "danger"  = red
-     *     "warning" = amber
-     *     "info"    = blue
-     *     "success" = green
-     * @param {number} timeout - The number of milliseconds before the popup closes automatically
+     * @param {number} timeout - The number of milliseconds before the alert closes automatically
      *     0 for never (until the user closes it)
      * @param {boolean} [silent=false] - Don't show the message in the popup, only print it to the
      *     console
      *
      * @example
-     * // Pops up a red box with the message "[current time] Error: Something has gone wrong!"
-     * // that will need to be dismissed by the user.
-     * this.alert("Error: Something has gone wrong!", "danger", 0);
+     * // Pops up a box with the message "Error: Something has gone wrong!" that will need to be
+     * // dismissed by the user.
+     * this.alert("Error: Something has gone wrong!", 0);
      *
-     * // Pops up a blue information box with the message "[current time] Happy Christmas!"
-     * // that will disappear after 5 seconds.
-     * this.alert("Happy Christmas!", "info", 5000);
+     * // Pops up a box with the message "Happy Christmas!" that will disappear after 5 seconds.
+     * this.alert("Happy Christmas!", 5000);
      */
-    alert(str, style, timeout, silent) {
+    alert(str, timeout, silent) {
         const time = new Date();
 
         log.info("[" + time.toLocaleString() + "] " + str);
         if (silent) return;
 
-        style = style || "danger";
         timeout = timeout || 0;
 
-        const alertEl = document.getElementById("alert"),
-            alertContent = document.getElementById("alert-content");
-
-        alertEl.classList.remove("alert-danger");
-        alertEl.classList.remove("alert-warning");
-        alertEl.classList.remove("alert-info");
-        alertEl.classList.remove("alert-success");
-        alertEl.classList.add("alert-" + style);
-
-        // If the box hasn't been closed, append to it rather than replacing
-        if (alertEl.style.display === "block") {
-            alertContent.innerHTML +=
-                "<br><br>[" + time.toLocaleTimeString() + "] " + str;
-        } else {
-            alertContent.innerHTML =
-                "[" + time.toLocaleTimeString() + "] " + str;
-        }
-
-        // Stop the animation if it is in progress
-        $("#alert").stop();
-        alertEl.style.display = "block";
-        alertEl.style.opacity = 1;
-
-        if (timeout > 0) {
-            clearTimeout(this.alertTimeout);
-            this.alertTimeout = setTimeout(function(){
-                $("#alert").slideUp(100);
-            }, timeout);
-        }
+        this.currentSnackbar = $.snackbar({
+            content: str,
+            timeout: timeout,
+            htmlAllowed: true,
+            onClose: () => {
+                this.currentSnackbar.remove();
+            }
+        });
     }
 
 
@@ -658,15 +626,6 @@ class App {
     }
 
 
-    /**
-     * Handler for the alert close button click event.
-     * Closes the alert box.
-     */
-    alertCloseClick() {
-        document.getElementById("alert").style.display = "none";
-    }
-
-
     /**
      * Handler for CyerChef statechange events.
      * Fires whenever the input or recipe changes in any way.
@@ -712,42 +671,6 @@ class App {
         this.loadURIParams();
     }
 
-
-    /**
-     * Function to call an external API from this view.
-     */
-    callApi(url, type, data, dataType, contentType) {
-        type = type || "POST";
-        data = data || {};
-        dataType = dataType || undefined;
-        contentType = contentType || "application/json";
-
-        let response = null,
-            success = false;
-
-        $.ajax({
-            url: url,
-            async: false,
-            type: type,
-            data: data,
-            dataType: dataType,
-            contentType: contentType,
-            success: function(data) {
-                success = true;
-                response = data;
-            },
-            error: function(data) {
-                success = false;
-                response = data;
-            },
-        });
-
-        return {
-            success: success,
-            response: response
-        };
-    }
-
 }
 
 export default App;
diff --git a/src/web/ControlsWaiter.mjs b/src/web/ControlsWaiter.mjs
index 2e8da9a0e..a3f74e295 100755
--- a/src/web/ControlsWaiter.mjs
+++ b/src/web/ControlsWaiter.mjs
@@ -26,44 +26,16 @@ class ControlsWaiter {
 
 
     /**
-     * Adjusts the display properties of the control buttons so that they fit within the current width
-     * without wrapping or overflowing.
+     * Initialise Bootstrap componenets
      */
-    adjustWidth() {
-        const controls     = document.getElementById("controls");
-        const step         = document.getElementById("step");
-        const clrBreaks    = document.getElementById("clr-breaks");
-        const saveImg      = document.querySelector("#save img");
-        const loadImg      = document.querySelector("#load img");
-        const stepImg      = document.querySelector("#step img");
-        const clrRecipImg  = document.querySelector("#clr-recipe img");
-        const clrBreaksImg = document.querySelector("#clr-breaks img");
-
-        if (controls.clientWidth < 470) {
-            step.childNodes[1].nodeValue = " Step";
-        } else {
-            step.childNodes[1].nodeValue = " Step through";
-        }
-
-        if (controls.clientWidth < 400) {
-            saveImg.style.display = "none";
-            loadImg.style.display = "none";
-            stepImg.style.display = "none";
-            clrRecipImg.style.display = "none";
-            clrBreaksImg.style.display = "none";
-        } else {
-            saveImg.style.display = "inline";
-            loadImg.style.display = "inline";
-            stepImg.style.display = "inline";
-            clrRecipImg.style.display = "inline";
-            clrBreaksImg.style.display = "inline";
-        }
-
-        if (controls.clientWidth < 330) {
-            clrBreaks.childNodes[1].nodeValue = " Clear breaks";
-        } else {
-            clrBreaks.childNodes[1].nodeValue = " Clear breakpoints";
-        }
+    initComponents() {
+        $("body").bootstrapMaterialDesign();
+        $("[data-toggle=tooltip]").tooltip({
+            animation: false,
+            container: "body",
+            boundary: "viewport",
+            trigger: "hover"
+        });
     }
 
 
@@ -105,18 +77,7 @@ class ControlsWaiter {
      * Handler for changes made to the Auto Bake checkbox.
      */
     autoBakeChange() {
-        const autoBakeLabel    = document.getElementById("auto-bake-label");
-        const autoBakeCheckbox = document.getElementById("auto-bake");
-
-        this.app.autoBake_ = autoBakeCheckbox.checked;
-
-        if (autoBakeCheckbox.checked) {
-            autoBakeLabel.classList.add("btn-success");
-            autoBakeLabel.classList.remove("btn-default");
-        } else {
-            autoBakeLabel.classList.add("btn-default");
-            autoBakeLabel.classList.remove("btn-success");
-        }
+        this.app.autoBake_ = document.getElementById("auto-bake").checked;
     }
 
 
@@ -128,20 +89,6 @@ class ControlsWaiter {
     }
 
 
-    /**
-     * Handler for the 'Clear breakpoints' command. Removes all breakpoints from operations in the
-     * recipe.
-     */
-    clearBreaksClick() {
-        const bps = document.querySelectorAll("#rec-list li.operation .breakpoint");
-
-        for (let i = 0; i < bps.length; i++) {
-            bps[i].setAttribute("break", "false");
-            bps[i].classList.remove("breakpoint-selected");
-        }
-    }
-
-
     /**
      * Populates the save disalog box with a URL incorporating the recipe and input.
      *
@@ -264,7 +211,6 @@ class ControlsWaiter {
         if (!this.app.isLocalStorageAvailable()) {
             this.app.alert(
                 "Your security settings do not allow access to local storage so your recipe cannot be saved.",
-                "danger",
                 5000
             );
             return false;
@@ -274,7 +220,7 @@ class ControlsWaiter {
         const recipeStr  = document.querySelector("#save-texts .tab-pane.active textarea").value;
 
         if (!recipeName) {
-            this.app.alert("Please enter a recipe name", "danger", 2000);
+            this.app.alert("Please enter a recipe name", 3000);
             return;
         }
 
@@ -291,7 +237,7 @@ class ControlsWaiter {
         localStorage.savedRecipes = JSON.stringify(savedRecipes);
         localStorage.recipeId = recipeId;
 
-        this.app.alert("Recipe saved as \"" + recipeName + "\".", "success", 2000);
+        this.app.alert(`Recipe saved as "${recipeName}".`, 3000);
     }
 
 
@@ -323,7 +269,10 @@ class ControlsWaiter {
         }
 
         // Populate textarea with first recipe
-        document.getElementById("load-text").value = savedRecipes.length ? savedRecipes[0].recipe : "";
+        const loadText = document.getElementById("load-text");
+        const evt = new Event("change");
+        loadText.value = savedRecipes.length ? savedRecipes[0].recipe : "";
+        loadText.dispatchEvent(evt);
     }
 
 
@@ -372,7 +321,7 @@ class ControlsWaiter {
 
             $("#rec-list [data-toggle=popover]").popover();
         } catch (e) {
-            this.app.alert("Invalid recipe", "danger", 2000);
+            this.app.alert("Invalid recipe", 2000);
         }
     }
 
@@ -391,7 +340,7 @@ class ControlsWaiter {
         if (reportBugInfo) {
             reportBugInfo.innerHTML = `* Version: ${PKG_VERSION + (typeof INLINE === "undefined" ? "" : "s")}
 * Compile time: ${COMPILE_TIME}
-* User-Agent: 
+* User-Agent:
 ${navigator.userAgent}
 * [Link to reproduce](${saveLink})
 
@@ -406,9 +355,7 @@ ${navigator.userAgent}
      */
     showStaleIndicator() {
         const staleIndicator = document.getElementById("stale-indicator");
-
-        staleIndicator.style.visibility = "visible";
-        staleIndicator.style.opacity = 1;
+        staleIndicator.classList.remove("hidden");
     }
 
 
@@ -418,9 +365,7 @@ ${navigator.userAgent}
      */
     hideStaleIndicator() {
         const staleIndicator = document.getElementById("stale-indicator");
-
-        staleIndicator.style.opacity = 0;
-        staleIndicator.style.visibility = "hidden";
+        staleIndicator.classList.add("hidden");
     }
 
 
diff --git a/src/web/HTMLCategory.mjs b/src/web/HTMLCategory.mjs
index 5a2e3f7e8..95b8a4df0 100755
--- a/src/web/HTMLCategory.mjs
+++ b/src/web/HTMLCategory.mjs
@@ -39,13 +39,12 @@ class HTMLCategory {
      */
     toHtml() {
         const catName = "cat" + this.name.replace(/[\s/-:_]/g, "");
-        let html = "<div class='panel category'>\
-            <a class='category-title' data-toggle='collapse'\
-                data-parent='#categories' href='#" + catName + "'>\
-                " + this.name + "\
-            </a>\
-            <div id='" + catName + "' class='panel-collapse collapse\
-            " + (this.selected ? " in" : "") + "'><ul class='op-list'>";
+        let html = `<div class="panel category">
+        <a class="category-title" data-toggle="collapse" data-target="#${catName}">
+            ${this.name}
+        </a>
+        <div id="${catName}" class="panel-collapse collapse ${(this.selected ? " show" : "")}" data-parent="#categories">
+            <ul class="op-list">`;
 
         for (let i = 0; i < this.opList.length; i++) {
             html += this.opList[i].toStubHtml();
diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs
index 2ce3f51f5..f94f8ca69 100755
--- a/src/web/HTMLIngredient.mjs
+++ b/src/web/HTMLIngredient.mjs
@@ -24,8 +24,7 @@ class HTMLIngredient {
         this.type = config.type;
         this.value = config.value;
         this.disabled = config.disabled || false;
-        this.disableArgs = config.disableArgs || false;
-        this.placeholder = config.placeholder || false;
+        this.hint = config.hint || false;
         this.target = config.target;
         this.toggleValues = config.toggleValues;
         this.id = "ing-" + this.app.nextIngId();
@@ -38,154 +37,180 @@ class HTMLIngredient {
      * @returns {string}
      */
     toHtml() {
-        const inline = (
-            this.type === "boolean" ||
-            this.type === "number" ||
-            this.type === "option" ||
-            this.type === "shortString" ||
-            this.type === "binaryShortString"
-        );
-        let html = inline ? "" : "<div class='clearfix'>&nbsp;</div>",
+        let html = "",
             i, m;
 
-        html += "<div class='arg-group" + (inline ? " inline-args" : "") +
-            (this.type === "text" ? " arg-group-text" : "") + "'><label class='arg-label' for='" +
-            this.id + "'>" + this.name + "</label>";
-
         switch (this.type) {
             case "string":
             case "binaryString":
             case "byteArray":
-                html += "<input type='text' id='" + this.id + "' class='arg arg-input' arg-name='" +
-                    this.name + "' value='" + this.value + "'" +
-                    (this.disabled ? " disabled='disabled'" : "") +
-                    (this.placeholder ? " placeholder='" + this.placeholder + "'" : "") + ">";
+                html += `<div class="form-group">
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
+                    <input type="text"
+                        class="form-control arg"
+                        id="${this.id}"
+                        arg-name="${this.name}"
+                        value="${this.value}"
+                        ${this.disabled ? "disabled" : ""}>
+                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                </div>`;
                 break;
             case "shortString":
             case "binaryShortString":
-                html += "<input type='text' id='" + this.id +
-                    "'class='arg arg-input short-string' arg-name='" + this.name + "'value='" +
-                    this.value + "'" + (this.disabled ? " disabled='disabled'" : "") +
-                    (this.placeholder ? " placeholder='" + this.placeholder + "'" : "") + ">";
+                html += `<div class="form-group inline">
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
+                    <input type="text"
+                        class="form-control arg inline"
+                        id="${this.id}"
+                        arg-name="${this.name}"
+                        value="${this.value}"
+                        ${this.disabled ? "disabled" : ""}>
+                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                </div>`;
                 break;
             case "toggleString":
-                html += "<div class='input-group'><div class='input-group-btn'>\
-                    <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'\
-                    aria-haspopup='true' aria-expanded='false'" +
-                    (this.disabled ? " disabled='disabled'" : "") + ">" + this.toggleValues[0] +
-                    " <span class='caret'></span></button><ul class='dropdown-menu'>";
+                html += `<div class="form-group input-group">
+                    <div class="toggle-string">
+                        <label for="${this.id}" class="bmd-label-floating toggle-string">${this.name}</label>
+                        <input type="text"
+                            class="form-control arg toggle-string"
+                            id="${this.id}"
+                            arg-name="${this.name}"
+                            value="${this.value}"
+                            ${this.disabled ? "disabled" : ""}>
+                        ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                    </div>
+                    <div class="input-group-append">
+                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${this.toggleValues[0]}</button>
+                        <div class="dropdown-menu toggle-dropdown">`;
                 for (i = 0; i < this.toggleValues.length; i++) {
-                    html += "<li><a href='#'>" + this.toggleValues[i] + "</a></li>";
+                    html += `<a class="dropdown-item" href="#">${this.toggleValues[i]}</a>`;
                 }
-                html += "</ul></div><input type='text' class='arg arg-input toggle-string'" +
-                    (this.disabled ? " disabled='disabled'" : "") +
-                    (this.placeholder ? " placeholder='" + this.placeholder + "'" : "") + "></div>";
+                html += `</div>
+                    </div>
+
+                </div>`;
                 break;
             case "number":
-                html += "<input type='number' id='" + this.id + "'class='arg arg-input' arg-name='" +
-                    this.name + "'value='" + this.value + "'" +
-                    (this.disabled ? " disabled='disabled'" : "") +
-                    (this.placeholder ? " placeholder='" + this.placeholder + "'" : "") + ">";
+                html += `<div class="form-group inline">
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
+                    <input type="number"
+                        class="form-control arg inline"
+                        id="${this.id}"
+                        arg-name="${this.name}"
+                        value="${this.value}"
+                        ${this.disabled ? "disabled" : ""}>
+                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                </div>`;
                 break;
             case "boolean":
-                html += "<input type='checkbox' id='" + this.id + "'class='arg' arg-name='" +
-                    this.name + "'" + (this.value ? " checked='checked' " : "") +
-                    (this.disabled ? " disabled='disabled'" : "") + ">";
-
-                if (this.disableArgs) {
-                    this.manager.addDynamicListener("#" + this.id, "click", this.toggleDisableArgs, this);
-                }
+                html += `<div class="form-group inline boolean-arg">
+                    <div class="checkbox">
+                        <label>
+                            <input type="checkbox"
+                                class="arg"
+                                id="${this.id}"
+                                arg-name="${this.name}"
+                                ${this.value ? " checked" : ""}
+                                ${this.disabled ? " disabled" : ""}
+                                value="${this.name}"> ${this.name}
+                        </label>
+                        ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                    </div>
+                </div>`;
                 break;
             case "option":
-                html += "<select class='arg' id='" + this.id + "'arg-name='" + this.name + "'" +
-                    (this.disabled ? " disabled='disabled'" : "") + ">";
+                html += `<div class="form-group inline">
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
+                    <select
+                        class="form-control arg inline"
+                        id="${this.id}"
+                        arg-name="${this.name}"
+                        ${this.disabled ? "disabled" : ""}>`;
                 for (i = 0; i < this.value.length; i++) {
                     if ((m = this.value[i].match(/\[([a-z0-9 -()^]+)\]/i))) {
-                        html += "<optgroup label='" + m[1] + "'>";
+                        html += `<optgroup label="${m[1]}">`;
                     } else if ((m = this.value[i].match(/\[\/([a-z0-9 -()^]+)\]/i))) {
                         html += "</optgroup>";
                     } else {
-                        html += "<option>" + this.value[i] + "</option>";
+                        html += `<option>${this.value[i]}</option>`;
                     }
                 }
-                html += "</select>";
+                html += `</select>
+                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                </div>`;
                 break;
             case "populateOption":
-                html += "<select class='arg' id='" + this.id + "'arg-name='" + this.name + "'" +
-                    (this.disabled ? " disabled='disabled'" : "") + ">";
+                html += `<div class="form-group">
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
+                    <select
+                        class="form-control arg"
+                        id="${this.id}"
+                        arg-name="${this.name}"
+                        ${this.disabled ? "disabled" : ""}>`;
                 for (i = 0; i < this.value.length; i++) {
                     if ((m = this.value[i].name.match(/\[([a-z0-9 -()^]+)\]/i))) {
-                        html += "<optgroup label='" + m[1] + "'>";
+                        html += `<optgroup label="${m[1]}">`;
                     } else if ((m = this.value[i].name.match(/\[\/([a-z0-9 -()^]+)\]/i))) {
                         html += "</optgroup>";
                     } else {
-                        html += "<option populate-value='" + this.value[i].value + "'>" +
-                            this.value[i].name + "</option>";
+                        html += `<option populate-value="${this.value[i].value}">${this.value[i].name}</option>`;
                     }
                 }
-                html += "</select>";
+                html += `</select>
+                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                </div>`;
 
                 this.manager.addDynamicListener("#" + this.id, "change", this.populateOptionChange, this);
                 break;
             case "editableOption":
-                html += "<div class='editable-option'>";
-                html += "<select class='editable-option-select' id='sel-" + this.id + "'" +
-                    (this.disabled ? " disabled='disabled'" : "") + ">";
+                html += `<div class="form-group input-group inline">
+                    <label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
+                    <input type="text"
+                        class="form-control arg inline"
+                        id="${this.id}"
+                        arg-name="${this.name}"
+                        value="${this.value[0].value}"
+                        ${this.disabled ? "disabled" : ""}>
+                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                    <div class="input-group-append inline">
+                        <button type="button"
+                            class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+                            data-toggle="dropdown"
+                            data-boundary="scrollParent"
+                            aria-haspopup="true"
+                            aria-expanded="false">
+                            <span class="sr-only">Toggle Dropdown</span>
+                        </button>
+                        <div class="dropdown-menu editable-option-menu">`;
                 for (i = 0; i < this.value.length; i++) {
-                    html += "<option value='" + this.value[i].value + "'>" + this.value[i].name + "</option>";
+                    html += `<a class="dropdown-item" href="#" value="${this.value[i].value}">${this.value[i].name}</a>`;
                 }
-                html += "</select>";
-                html += "<input class='arg arg-input editable-option-input' id='" + this.id +
-                    "'arg-name='" + this.name + "'" + " value='" + this.value[0].value + "'" +
-                    (this.disabled ? " disabled='disabled'" : "") +
-                    (this.placeholder ? " placeholder='" + this.placeholder + "'" : "") + ">";
-                html += "</div>";
-
+                html += `</div>
+                    </div>
+                </div>`;
 
-                this.manager.addDynamicListener("#sel-" + this.id, "change", this.editableOptionChange, this);
+                this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
                 break;
             case "text":
-                html += "<textarea id='" + this.id + "' class='arg' arg-name='" +
-                    this.name + "'" + (this.disabled ? " disabled='disabled'" : "") +
-                    (this.placeholder ? " placeholder='" + this.placeholder + "'" : "") + ">" +
-                    this.value + "</textarea>";
+                html += `<div class="form-group">
+                    <label for="${this.id}" class="bmd-label-floating">${this.name}</label>
+                    <textarea
+                        class="form-control arg"
+                        id="${this.id}"
+                        arg-name="${this.name}"
+                        ${this.disabled ? "disabled" : ""}>${this.value}</textarea>
+                    ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
+                </div>`;
                 break;
             default:
                 break;
         }
-        html += "</div>";
 
         return html;
     }
 
 
-    /**
-     * Handler for argument disable toggle.
-     * Toggles disabled state for all arguments in the disableArgs list for this ingredient.
-     *
-     * @param {event} e
-     */
-    toggleDisableArgs(e) {
-        const el = e.target;
-        const op = el.parentNode.parentNode;
-        const args = op.querySelectorAll(".arg-group");
-
-        for (let i = 0; i < this.disableArgs.length; i++) {
-            const els = args[this.disableArgs[i]].querySelectorAll("input, select, button");
-
-            for (let j = 0; j < els.length; j++) {
-                if (els[j].getAttribute("disabled")) {
-                    els[j].removeAttribute("disabled");
-                } else {
-                    els[j].setAttribute("disabled", "disabled");
-                }
-            }
-        }
-
-        this.manager.recipe.ingChange();
-    }
-
-
     /**
      * Handler for populate option changes.
      * Populates the relevant argument with the specified value.
@@ -195,25 +220,32 @@ class HTMLIngredient {
     populateOptionChange(e) {
         const el = e.target;
         const op = el.parentNode.parentNode;
-        const target = op.querySelectorAll(".arg-group")[this.target].querySelector("input, select, textarea");
+        const target = op.querySelectorAll(".arg")[this.target];
 
         target.value = el.childNodes[el.selectedIndex].getAttribute("populate-value");
+        const evt = new Event("change");
+        target.dispatchEvent(evt);
 
         this.manager.recipe.ingChange();
     }
 
 
     /**
-     * Handler for editable option changes.
+     * Handler for editable option clicks.
      * Populates the input box with the selected value.
      *
      * @param {event} e
      */
-    editableOptionChange(e) {
-        const select = e.target,
-            input = select.nextSibling;
+    editableOptionClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const link = e.target,
+            input = link.parentNode.parentNode.parentNode.querySelector("input");
 
-        input.value = select.childNodes[select.selectedIndex].value;
+        input.value = link.getAttribute("value");
+        const evt = new Event("change");
+        input.dispatchEvent(evt);
 
         this.manager.recipe.ingChange();
     }
diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs
index 5d7983089..1a6146e4f 100755
--- a/src/web/HTMLOperation.mjs
+++ b/src/web/HTMLOperation.mjs
@@ -6,9 +6,6 @@
 
 import HTMLIngredient from "./HTMLIngredient";
 
-const INFO_ICON = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAByElEQVR4XqVTzWoaYRQ9KZJmoVaS1J1QiYTIuOgqi9lEugguQhYhdGs3hTyAi0CWJTvJIks30ZBNsimUtlqkVLoQCuJsphRriyFjabWtEyf/Rv3iWcwwymTlgQuH851z5hu43wRGkEwmXwCIA4hiGAUAmUQikQbhEHwyGCWVSglVVUW73RYmyKnxjB56ncJ6NpsVxHGrI/ZLuniVb3DIqQmCHnrNkgcggNeSJPlisRgyJR2b737j/TcDsQUPwv6H5NR4BnroZcb6Z16N2PvyX6yna9Z8qp6JQ0Uf0ughmGHWBSAuyzJqrQ7eqKewY/dzE363C71e39LoWQq5wUwul4uzIBoIBHD01RgyrkZ8eDbvwUWnj623v2DHx4qB51IAzLIAXq8XP/7W0bUVVJtXWIk8wvlN364TA+/1IDMLwmWK/Hq3axmhaBdoGLeklm73ElaBYRgIzkyifHIOO4QQJKM3oJcZq6CgaVp0OTyHw9K/kQI4FiyHfdC0n2CWe5ApFosIPZ7C2tNpXpcDOehGyD/FIbd0euhlhllzFxRzC3fydbG4XRYbB9/tQ41n9m1U7l3lyp9LkfygiZeZCoecmtMqj/+Yxn7Od3v0j50qCO3zAAAAAElFTkSuQmCC";
-const REMOVE_ICON = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABwklEQVR42qRTPU8CQRB9K2CCMRJ6NTQajOUaqfxIbLCRghhjQixosLAgFNBQ3l8wsabxLxBJbCyVUBiMCVQEQkOEKBbCnefM3p4eohWXzM3uvHlv52b2hG3bmOWZw4yPn1/XQkCQ9wFxcgZZ0QLKpifpN8Z1n1L13griBBjHhYK0nMT4b+wom53ClAAFQacZJ/m8rNfrSOZy0vxJjPP6IJ2WzWYTO6mUwiwtILiJJSHUKVSWkchkZK1WQzQaxU2pVGUglkjIbreLUCiEx0qlStlFCpfPiPstYDtVKJH9ZFI2Gw1FGA6H6LTbCAaDeGu1FJl6UuYjpwTGzucokZW1NfnS66kyfT4fXns9RaZmlgNcuhZQU+jowLzuOK/HgwEW3E5ZlhLXVWKk11P3wNYNWw+HZdA0sUgx1zjGmD05nckx0ilGjBJdUq3fr7K5e8bGf43RdL7fOPSQb4lI8SLbrUfkUIuY32VTI1bJn5BqDnh4Dodt9ryPUDzyD7aquWoKQohl2i9sAbubwPkTcHkP3FHsg+yT+7sN7G0AF3Xg6sHB3onbdgWWKBDQg/BcTuVt51dQA/JrnIcyIu6rmPV3/hJgACPc0BMEYTg+AAAAAElFTkSuQmCC";
-
 
 /**
  * Object to handle the creation of operations.
@@ -49,19 +46,15 @@ class HTMLOperation {
         let html = "<li class='operation'";
 
         if (this.description) {
-            html += " data-container='body' data-toggle='popover' data-placement='auto right'\
-                data-content=\"" + this.description + "\" data-html='true' data-trigger='hover'";
+            html += ` data-container='body' data-toggle='popover' data-placement='right'
+                data-content="${this.description}" data-html='true' data-trigger='hover'
+                data-boundary='viewport'`;
         }
 
         html += ">" + this.name;
 
         if (removeIcon) {
-            html += "<img src='data:image/png;base64," + REMOVE_ICON +
-                "' class='op-icon remove-icon'>";
-        }
-
-        if (this.description) {
-            html += "<img src='data:image/png;base64," + INFO_ICON + "' class='op-icon'>";
+            html += "<i class='material-icons remove-icon op-icon'>delete</i>";
         }
 
         html += "</li>";
@@ -76,19 +69,19 @@ class HTMLOperation {
      * @returns {string}
      */
     toFullHtml() {
-        let html = "<div class='arg-title'>" + this.name + "</div>";
+        let html = `<div class="op-title">${this.name}</div>
+        <div class="ingredients">`;
 
         for (let i = 0; i < this.ingList.length; i++) {
             html += this.ingList[i].toHtml();
         }
 
-        html += "<div class='recip-icons'>\
-            <div class='breakpoint' title='Set breakpoint' break='false'></div>\
-            <div class='disable-icon recip-icon' title='Disable operation'\
-                disabled='false'></div>";
-
-        html += "</div>\
-            <div class='clearfix'>&nbsp;</div>";
+        html += `</div>
+        <div class="recip-icons">
+            <i class="material-icons breakpoint" title="Set breakpoint" break="false">pause</i>
+            <i class="material-icons disable-icon" title="Disable operation" disabled="false">not_interested</i>
+        </div>
+        <div class="clearfix">&nbsp;</div>`;
 
         return html;
     }
diff --git a/src/web/InputWaiter.mjs b/src/web/InputWaiter.mjs
index f17285279..37f1134a3 100755
--- a/src/web/InputWaiter.mjs
+++ b/src/web/InputWaiter.mjs
@@ -60,10 +60,11 @@ class InputWaiter {
      * Sets the input in the input area.
      *
      * @param {string|File} input
+     * @param {boolean} [silent=false] - Suppress statechange event
      *
      * @fires Manager#statechange
      */
-    set(input) {
+    set(input, silent=false) {
         const inputText = document.getElementById("input-text");
         if (input instanceof File) {
             this.setFile(input);
@@ -72,7 +73,7 @@ class InputWaiter {
         } else {
             inputText.value = input;
             this.closeFile();
-            window.dispatchEvent(this.manager.statechange);
+            if (!silent) window.dispatchEvent(this.manager.statechange);
             const lines = input.length < (this.app.options.ioDisplayThreshold * 1024) ?
                 input.count("\n") + 1 : null;
             this.setInputInfo(input.length, lines);
@@ -264,7 +265,7 @@ class InputWaiter {
         }
 
         if (r.hasOwnProperty("error")) {
-            this.app.alert(r.error, "danger", 10000);
+            this.app.alert(r.error, 10000);
         }
 
         if (r.hasOwnProperty("fileBuffer")) {
diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs
index 4ef7de074..d33616a40 100755
--- a/src/web/Manager.mjs
+++ b/src/web/Manager.mjs
@@ -84,6 +84,7 @@ class Manager {
     setup() {
         this.worker.registerChefWorker();
         this.recipe.initialiseOperationDragNDrop();
+        this.controls.initComponents();
         this.controls.autoBakeChange();
         this.bindings.updateKeybList();
         this.background.registerChefWorker();
@@ -107,7 +108,6 @@ class Manager {
         document.getElementById("auto-bake").addEventListener("change", this.controls.autoBakeChange.bind(this.controls));
         document.getElementById("step").addEventListener("click", this.controls.stepClick.bind(this.controls));
         document.getElementById("clr-recipe").addEventListener("click", this.controls.clearRecipeClick.bind(this.controls));
-        document.getElementById("clr-breaks").addEventListener("click", this.controls.clearBreaksClick.bind(this.controls));
         document.getElementById("save").addEventListener("click", this.controls.saveClick.bind(this.controls));
         document.getElementById("save-button").addEventListener("click", this.controls.saveButtonClick.bind(this.controls));
         document.getElementById("save-link-recipe-checkbox").addEventListener("change", this.controls.slrCheckChange.bind(this.controls));
@@ -125,8 +125,6 @@ class Manager {
         document.getElementById("edit-favourites").addEventListener("click", this.ops.editFavouritesClick.bind(this.ops));
         document.getElementById("save-favourites").addEventListener("click", this.ops.saveFavouritesClick.bind(this.ops));
         document.getElementById("reset-favourites").addEventListener("click", this.ops.resetFavouritesClick.bind(this.ops));
-        this.addDynamicListener(".op-list .op-icon", "mouseover", this.ops.opIconMouseover, this.ops);
-        this.addDynamicListener(".op-list .op-icon", "mouseleave", this.ops.opIconMouseleave, this.ops);
         this.addDynamicListener(".op-list", "oplistcreate", this.ops.opListCreate, this.ops);
         this.addDynamicListener("li.operation", "operationadd", this.recipe.opAdd, this.recipe);
 
@@ -137,7 +135,7 @@ class Manager {
         this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe);
         this.addDynamicListener("#rec-list li.operation", "dblclick", this.recipe.operationDblclick, this.recipe);
         this.addDynamicListener("#rec-list li.operation > div", "dblclick", this.recipe.operationChildDblclick, this.recipe);
-        this.addDynamicListener("#rec-list .input-group .dropdown-menu a", "click", this.recipe.dropdownToggleClick, this.recipe);
+        this.addDynamicListener("#rec-list .dropdown-menu.toggle-dropdown a", "click", this.recipe.dropdownToggleClick, this.recipe);
         this.addDynamicListener("#rec-list", "operationremove", this.recipe.opRemove.bind(this.recipe));
 
         // Input
@@ -160,6 +158,7 @@ class Manager {
         document.getElementById("switch").addEventListener("click", this.output.switchClick.bind(this.output));
         document.getElementById("undo-switch").addEventListener("click", this.output.undoSwitchClick.bind(this.output));
         document.getElementById("maximise-output").addEventListener("click", this.output.maximiseOutputClick.bind(this.output));
+        document.getElementById("magic").addEventListener("click", this.output.magicClick.bind(this.output));
         document.getElementById("output-text").addEventListener("scroll", this.highlighter.outputScroll.bind(this.highlighter));
         document.getElementById("output-text").addEventListener("mouseup", this.highlighter.outputMouseup.bind(this.highlighter));
         document.getElementById("output-text").addEventListener("mousemove", this.highlighter.outputMousemove.bind(this.highlighter));
@@ -168,15 +167,15 @@ class Manager {
         this.addMultiEventListener("#output-text", "mousedown dblclick select",  this.highlighter.outputMousedown, this.highlighter);
         this.addMultiEventListener("#output-html", "mousedown dblclick select",  this.highlighter.outputHtmlMousedown, this.highlighter);
         this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output);
-        this.addDynamicListener("#output-file-slice", "click", this.output.displayFileSlice, this.output);
+        this.addDynamicListener("#output-file-slice i", "click", this.output.displayFileSlice, this.output);
         document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output));
 
         // Options
         document.getElementById("options").addEventListener("click", this.options.optionsClick.bind(this.options));
         document.getElementById("reset-options").addEventListener("click", this.options.resetOptionsClick.bind(this.options));
-        $(document).on("switchChange.bootstrapSwitch", ".option-item input:checkbox", this.options.switchChange.bind(this.options));
-        $(document).on("switchChange.bootstrapSwitch", ".option-item input:checkbox", this.options.setWordWrap.bind(this.options));
-        $(document).on("switchChange.bootstrapSwitch", ".option-item input:checkbox#useMetaKey", this.bindings.updateKeybList.bind(this.bindings));
+        this.addDynamicListener(".option-item input[type=checkbox]", "change", this.options.switchChange, this.options);
+        this.addDynamicListener(".option-item input[type=checkbox]", "change", this.options.setWordWrap, this.options);
+        this.addDynamicListener(".option-item input[type=checkbox]#useMetaKey", "change", this.bindings.updateKeybList, this.bindings);
         this.addDynamicListener(".option-item input[type=number]", "keyup", this.options.numberChange, this.options);
         this.addDynamicListener(".option-item input[type=number]", "change", this.options.numberChange, this.options);
         this.addDynamicListener(".option-item select", "change", this.options.selectChange, this.options);
@@ -185,7 +184,6 @@ class Manager {
 
         // Misc
         window.addEventListener("keydown", this.bindings.parseInput.bind(this.bindings));
-        document.getElementById("alert-close").addEventListener("click", this.app.alertCloseClick.bind(this.app));
     }
 
 
diff --git a/src/web/OperationsWaiter.mjs b/src/web/OperationsWaiter.mjs
index d890cedc6..e0286d421 100755
--- a/src/web/OperationsWaiter.mjs
+++ b/src/web/OperationsWaiter.mjs
@@ -79,12 +79,12 @@ class OperationsWaiter {
 
             while (searchResultsEl.firstChild) {
                 try {
-                    $(searchResultsEl.firstChild).popover("destroy");
+                    $(searchResultsEl.firstChild).popover("dispose");
                 } catch (err) {}
                 searchResultsEl.removeChild(searchResultsEl.firstChild);
             }
 
-            $("#categories .in").collapse("hide");
+            $("#categories .show").collapse("hide");
             if (str) {
                 const matchedOps = this.filterOperations(str, true);
                 const matchedOpsHtml = matchedOps
@@ -185,7 +185,7 @@ class OperationsWaiter {
                 setTimeout(function() {
                     // Determine if the popover associated with this element is being hovered over
                     if ($(_this).data("bs.popover") &&
-                        ($(_this).data("bs.popover").$tip && !$(_this).data("bs.popover").$tip.is(":hover"))) {
+                        ($(_this).data("bs.popover").tip && !$($(_this).data("bs.popover").tip).is(":hover"))) {
                         $(_this).popover("hide");
                     }
                 }, 50);
@@ -237,13 +237,13 @@ class OperationsWaiter {
             onFilter: function (evt) {
                 const el = editableList.closest(evt.item);
                 if (el && el.parentNode) {
-                    $(el).popover("destroy");
+                    $(el).popover("dispose");
                     el.parentNode.removeChild(el);
                 }
             },
             onEnd: function(evt) {
                 if (this.removeIntent) {
-                    $(evt.item).popover("destroy");
+                    $(evt.item).popover("dispose");
                     evt.item.remove();
                 }
             }.bind(this),
@@ -268,7 +268,7 @@ class OperationsWaiter {
      */
     saveFavouritesClick() {
         const favs = document.querySelectorAll("#edit-favourites-list li");
-        const favouritesList = Array.from(favs, e => e.textContent);
+        const favouritesList = Array.from(favs, e => e.childNodes[0].textContent);
 
         this.app.saveFavourites(favouritesList);
         this.app.loadFavourites();
@@ -285,37 +285,6 @@ class OperationsWaiter {
         this.app.resetFavourites();
     }
 
-
-    /**
-     * Handler for opIcon mouseover events.
-     * Hides any popovers already showing on the operation so that there aren't two at once.
-     *
-     * @param {event} e
-     */
-    opIconMouseover(e) {
-        const opEl = e.target.parentNode;
-        if (e.target.getAttribute("data-toggle") === "popover") {
-            $(opEl).popover("hide");
-        }
-    }
-
-
-    /**
-     * Handler for opIcon mouseleave events.
-     * If this icon created a popover and we're moving back to the operation element, display the
-     *   operation popover again.
-     *
-     * @param {event} e
-     */
-    opIconMouseleave(e) {
-        const opEl = e.target.parentNode;
-        const toEl = e.toElement || e.relatedElement;
-
-        if (e.target.getAttribute("data-toggle") === "popover" && toEl === opEl) {
-            $(opEl).popover("show");
-        }
-    }
-
 }
 
 export default OperationsWaiter;
diff --git a/src/web/OptionsWaiter.mjs b/src/web/OptionsWaiter.mjs
index a3832dc43..3f08b91b7 100755
--- a/src/web/OptionsWaiter.mjs
+++ b/src/web/OptionsWaiter.mjs
@@ -20,11 +20,6 @@ const OptionsWaiter = function(app, manager) {
  * @param {Object} options
  */
 OptionsWaiter.prototype.load = function(options) {
-    $(".option-item input:checkbox").bootstrapSwitch({
-        size: "small",
-        animate: false,
-    });
-
     for (const option in options) {
         this.app.options[option] = options[option];
     }
@@ -33,7 +28,7 @@ OptionsWaiter.prototype.load = function(options) {
     const cboxes = document.querySelectorAll("#options-body input[type=checkbox]");
     let i;
     for (i = 0; i < cboxes.length; i++) {
-        $(cboxes[i]).bootstrapSwitch("state", this.app.options[cboxes[i].getAttribute("option")]);
+        cboxes[i].checked = this.app.options[cboxes[i].getAttribute("option")];
     }
 
     const nboxes = document.querySelectorAll("#options-body input[type=number]");
@@ -81,11 +76,11 @@ OptionsWaiter.prototype.resetOptionsClick = function() {
  * Modifies the option state and saves it to local storage.
  *
  * @param {event} e
- * @param {boolean} state
  */
-OptionsWaiter.prototype.switchChange = function(e, state) {
+OptionsWaiter.prototype.switchChange = function(e) {
     const el = e.target;
     const option = el.getAttribute("option");
+    const state = el.checked;
 
     log.debug(`Setting ${option} to ${state}`);
     this.app.options[option] = state;
diff --git a/src/web/OutputWaiter.mjs b/src/web/OutputWaiter.mjs
index 1b6a58785..7203a16fa 100755
--- a/src/web/OutputWaiter.mjs
+++ b/src/web/OutputWaiter.mjs
@@ -228,35 +228,6 @@ class OutputWaiter {
     }
 
 
-    /**
-     * Adjusts the display properties of the output buttons so that they fit within the current width
-     * without wrapping or overflowing.
-     */
-    adjustWidth() {
-        const output         = document.getElementById("output");
-        const saveToFile     = document.getElementById("save-to-file");
-        const copyOutput     = document.getElementById("copy-output");
-        const switchIO       = document.getElementById("switch");
-        const undoSwitch     = document.getElementById("undo-switch");
-        const maximiseOutput = document.getElementById("maximise-output");
-
-        if (output.clientWidth < 680) {
-            saveToFile.childNodes[1].nodeValue = "";
-            copyOutput.childNodes[1].nodeValue = "";
-            switchIO.childNodes[1].nodeValue = "";
-            undoSwitch.childNodes[1].nodeValue = "";
-            maximiseOutput.childNodes[1].nodeValue = "";
-        } else {
-            saveToFile.childNodes[1].nodeValue = " Save to file";
-            copyOutput.childNodes[1].nodeValue = " Copy output";
-            switchIO.childNodes[1].nodeValue = " Move output to input";
-            undoSwitch.childNodes[1].nodeValue = " Undo";
-            maximiseOutput.childNodes[1].nodeValue =
-                maximiseOutput.getAttribute("title") === "Maximise" ? " Max" : " Restore";
-        }
-    }
-
-
     /**
      * Handler for save click events.
      * Saves the current output to a file.
@@ -296,9 +267,9 @@ class OutputWaiter {
         }
 
         if (success) {
-            this.app.alert("Copied raw output successfully.", "success", 2000);
+            this.app.alert("Copied raw output successfully.", 2000);
         } else {
-            this.app.alert("Sorry, the output could not be copied.", "danger", 2000);
+            this.app.alert("Sorry, the output could not be copied.", 3000);
         }
 
         // Clean up
@@ -334,7 +305,9 @@ class OutputWaiter {
      */
     undoSwitchClick() {
         this.app.setInput(this.switchOrigData);
-        document.getElementById("undo-switch").disabled = true;
+        const undoSwitch = document.getElementById("undo-switch");
+        undoSwitch.disabled = true;
+        $(undoSwitch).tooltip("hide");
     }
 
 
@@ -345,17 +318,16 @@ class OutputWaiter {
     maximiseOutputClick(e) {
         const el = e.target.id === "maximise-output" ? e.target : e.target.parentNode;
 
-        if (el.getAttribute("title") === "Maximise") {
+        if (el.getAttribute("data-original-title").indexOf("Maximise") === 0) {
             this.app.columnSplitter.collapse(0);
             this.app.columnSplitter.collapse(1);
             this.app.ioSplitter.collapse(0);
 
-            el.setAttribute("title", "Restore");
-            el.innerHTML = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlUlEQVQ4y93RwQpBQRQG4C9ba1fxBteGPIj38BTejFJKLFnwCJIiCsW1mcV0k9yx82/OzGK+OXMGOpiiLTFjFNiilQI0sQ7IJiAjLKsgGVYB2YdaVO0kwy46/BVQi9ZDNPyQWen2ub/KufS8y7shfkq9tF9U7SC+/YluKvAI9YZeFeCECXJcA3JHP2WgMXJM/ZUcBwxeM+YuSWTgMtUAAAAASUVORK5CYII='> Restore";
-            this.adjustWidth();
+            $(el).attr("data-original-title", "Restore output pane");
+            el.querySelector("i").innerHTML = "fullscreen_exit";
         } else {
-            el.setAttribute("title", "Maximise");
-            el.innerHTML = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAi0lEQVQ4y83TMQrCQBCF4S+5g4rJEdJ7KE+RQ1lrIQQCllroEULuoM0Ww3a7aXwwLAzMPzDvLcz4hnooUItT1rsoVNy+4lgLWNL7RlcCmDBij2eCfNCrUITc0dRCrhj8m5otw0O6SV8LuAV3uhrAAa8sJ2Np7KPFawhgscVLjH9bCDhjt8WNKft88w/HjCvuVqu53QAAAABJRU5ErkJggg=='> Max";
+            $(el).attr("data-original-title", "Maximise output pane");
+            el.querySelector("i").innerHTML = "fullscreen";
             this.app.resetLayout();
         }
     }
@@ -450,6 +422,9 @@ class OutputWaiter {
      * Triggers the BackgroundWorker to attempt Magic on the current output.
      */
     backgroundMagic() {
+        this.hideMagicButton();
+        if (!this.app.options.autoMagic) return;
+
         const sample = this.dishStr ? this.dishStr.slice(0, 1000) :
             this.dishBuffer ? this.dishBuffer.slice(0, 1000) : "";
 
@@ -469,16 +444,52 @@ class OutputWaiter {
             !options[0].recipe.length)
             return;
 
-        //console.log(options);
-
         const currentRecipeConfig = this.app.getRecipeConfig();
         const newRecipeConfig = currentRecipeConfig.concat(options[0].recipe);
-        const recipeURL = "#recipe=" + Utils.encodeURIFragment(Utils.generatePrettyRecipe(newRecipeConfig));
         const opSequence = options[0].recipe.map(o => o.op).join(", ");
 
-        log.log(`Running <a href="${recipeURL}">${opSequence}</a> will result in "${Utils.truncate(options[0].data, 20)}"`);
-        //this.app.setRecipeConfig(newRecipeConfig);
-        //this.app.autoBake();
+        this.showMagicButton(opSequence, options[0].data, newRecipeConfig);
+    }
+
+
+    /**
+     * Handler for Magic click events.
+     *
+     * Loads the Magic recipe.
+     *
+     * @fires Manager#statechange
+     */
+    magicClick() {
+        const magicButton = document.getElementById("magic");
+        this.app.setRecipeConfig(JSON.parse(magicButton.getAttribute("data-recipe")));
+        window.dispatchEvent(this.manager.statechange);
+        this.hideMagicButton();
+    }
+
+
+    /**
+     * Displays the Magic button with a title and adds a link to a complete recipe.
+     *
+     * @param {string} opSequence
+     * @param {string} result
+     * @param {Object[]} recipeConfig
+     */
+    showMagicButton(opSequence, result, recipeConfig) {
+        const magicButton = document.getElementById("magic");
+        magicButton.setAttribute("data-original-title", `<i>${opSequence}</i> will produce <span class="data-text">"${Utils.truncate(result, 30)}"</span>`);
+        magicButton.setAttribute("data-recipe", JSON.stringify(recipeConfig), null, "");
+        magicButton.classList.remove("hidden");
+    }
+
+
+    /**
+     * Hides the Magic button and resets its values.
+     */
+    hideMagicButton() {
+        const magicButton = document.getElementById("magic");
+        magicButton.classList.add("hidden");
+        magicButton.setAttribute("data-recipe", "");
+        magicButton.setAttribute("data-original-title", "Magic!");
     }
 
 }
diff --git a/src/web/RecipeWaiter.mjs b/src/web/RecipeWaiter.mjs
index 60589766f..b913fede0 100755
--- a/src/web/RecipeWaiter.mjs
+++ b/src/web/RecipeWaiter.mjs
@@ -39,10 +39,10 @@ class RecipeWaiter {
             sort: true,
             animation: 0,
             delay: 0,
-            filter: ".arg-input,.arg",
+            filter: ".arg",
             preventOnFilter: false,
             setData: function(dataTransfer, dragEl) {
-                dataTransfer.setData("Text", dragEl.querySelector(".arg-title").textContent);
+                dataTransfer.setData("Text", dragEl.querySelector(".op-title").textContent);
             },
             onEnd: function(evt) {
                 if (this.removeIntent) {
@@ -100,9 +100,15 @@ class RecipeWaiter {
                 // Removes popover element and event bindings from the dragged operation but not the
                 // event bindings from the one left in the operations list. Without manually removing
                 // these bindings, we cannot re-initialise the popover on the stub operation.
-                $(evt.item).popover("destroy").removeData("bs.popover").off("mouseenter").off("mouseleave");
-                $(evt.clone).off(".popover").removeData("bs.popover");
-                evt.item.setAttribute("data-toggle", "popover-disabled");
+                $(evt.item)
+                    .popover("dispose")
+                    .removeData("bs.popover")
+                    .off("mouseenter")
+                    .off("mouseleave")
+                    .attr("data-toggle", "popover-disabled");
+                $(evt.clone)
+                    .off(".popover")
+                    .removeData("bs.popover");
             },
             onEnd: this.opSortEnd.bind(this)
         });
@@ -299,7 +305,7 @@ class RecipeWaiter {
                 } else if (ingList[j].classList.contains("toggle-string")) {
                     // toggleString
                     ingredients[j] = {
-                        option: ingList[j].previousSibling.children[0].textContent.slice(0, -1),
+                        option: ingList[j].parentNode.parentNode.querySelector("button").textContent,
                         string: ingList[j].value
                     };
                 } else if (ingList[j].getAttribute("type") === "number") {
@@ -312,7 +318,7 @@ class RecipeWaiter {
             }
 
             item = {
-                op: operations[i].querySelector(".arg-title").textContent,
+                op: operations[i].querySelector(".op-title").textContent,
                 args: ingredients
             };
 
@@ -366,7 +372,7 @@ class RecipeWaiter {
         // Disable auto-bake if this is a manual op
         if (op.manualBake && this.app.autoBake_) {
             this.manager.controls.setAutoBake(false);
-            this.app.alert("Auto-Bake is disabled by default when using this operation.", "info", 5000);
+            this.app.alert("Auto-Bake is disabled by default when using this operation.", 5000);
         }
     }
 
@@ -411,10 +417,13 @@ class RecipeWaiter {
      * @param {event} e
      */
     dropdownToggleClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
         const el = e.target;
-        const button = el.parentNode.parentNode.previousSibling;
+        const button = el.parentNode.parentNode.querySelector("button");
 
-        button.innerHTML = el.textContent + " <span class='caret'></span>";
+        button.innerHTML = el.textContent;
         this.ingChange();
     }
 
@@ -427,7 +436,7 @@ class RecipeWaiter {
      * @param {event} e
      */
     opAdd(e) {
-        log.debug(`'${e.target.querySelector(".arg-title").textContent}' added to recipe`);
+        log.debug(`'${e.target.querySelector(".op-title").textContent}' added to recipe`);
         window.dispatchEvent(this.manager.statechange);
     }
 
@@ -470,6 +479,44 @@ class RecipeWaiter {
         op.insertAdjacentHTML("beforeend", registerListEl);
     }
 
+    /**
+     * Adjusts the number of ingredient columns as the width of the recipe changes.
+     */
+    adjustWidth() {
+        const recList = document.getElementById("rec-list");
+
+        if (!this.ingredientRuleID) {
+            this.ingredientRuleID = null;
+            this.ingredientChildRuleID = null;
+
+            // Find relevant rules in the stylesheet
+            for (const i in document.styleSheets[0].cssRules) {
+                if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients") {
+                    this.ingredientRuleID = i;
+                }
+                if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients > div") {
+                    this.ingredientChildRuleID = i;
+                }
+            }
+        }
+
+        if (!this.ingredientRuleID || !this.ingredientChildRuleID) return;
+
+        const ingredientRule = document.styleSheets[0].cssRules[this.ingredientRuleID],
+            ingredientChildRule = document.styleSheets[0].cssRules[this.ingredientChildRuleID];
+
+        if (recList.clientWidth < 450) {
+            ingredientRule.style.gridTemplateColumns = "auto auto";
+            ingredientChildRule.style.gridColumn = "1 / span 2";
+        } else if (recList.clientWidth < 620) {
+            ingredientRule.style.gridTemplateColumns = "auto auto auto";
+            ingredientChildRule.style.gridColumn = "1 / span 3";
+        } else {
+            ingredientRule.style.gridTemplateColumns = "auto auto auto auto";
+            ingredientChildRule.style.gridColumn = "1 / span 4";
+        }
+    }
+
 }
 
 export default RecipeWaiter;
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 5575999ae..8748b5108 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -143,21 +143,19 @@
             <div id="preloader-error" class="loading-error"></div>
         </div>
         <!-- End preloader overlay -->
-        <span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
-        <div id="alert" class="alert alert-danger">
-            <button type="button" class="close" id="alert-close">&times;</button>
-            <span id="alert-content"></span>
-        </div>
+        <button type="button" class="btn btn-warning bmd-btn-icon" id="edit-favourites" data-toggle="tooltip" title="Edit favourites">
+            <i class="material-icons">star</i>
+        </button>
         <div id="content-wrapper">
-            <div id="banner">
-                <div class="col-md-4" style="text-align: left; padding-left: 10px;">
+            <div id="banner" class="row">
+                <div class="col" style="text-align: left; padding-left: 10px;">
                     <% if (htmlWebpackPlugin.options.inline) { %>
                         <span>Version <%= htmlWebpackPlugin.options.version %></span>
                     <% } else { %>
-                        <a href="cyberchef.htm" download>Download CyberChef<img aria-hidden="true" src="<%- require('../static/images/download-24x24.png') %>" alt="Download Icon"/></a>
+                        <a href="cyberchef.htm" download>Download CyberChef <i class="material-icons">file_download</i></a>
                     <% } %>
                 </div>
-                <div class="col-md-4" style="text-align: center;">
+                <div class="col" style="text-align: center;">
                     <span id="notice">
                         <script type="text/javascript">
                             // Must be text/javascript rather than application/javascript otherwise IE won't recognise it...
@@ -169,9 +167,9 @@
                         <noscript>JavaScript is not enabled. Good luck.</noscript>
                     </span>
                 </div>
-                <div class="col-md-4" style="text-align: right; padding-right: 0;">
-                    <a href="#" id="options">Options<img aria-hidden="true" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/></a>
-                    <a href="#" id="support" data-toggle="modal" data-target="#support-modal">About / Support<img aria-hidden="true" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/></a>
+                <div class="col" style="text-align: right; padding-right: 0;">
+                    <a href="#" id="options">Options <i class="material-icons">settings</i></a>
+                    <a href="#" id="support" data-toggle="modal" data-target="#support-modal">About / Support <i class="material-icons">help</i></a>
                 </div>
             </div>
             <div id="workspace-wrapper">
@@ -183,33 +181,42 @@
                 </div>
 
                 <div id="recipe" class="split split-horizontal no-select">
-                    <div class="title no-select">Recipe</div>
+                    <div class="title no-select">
+                        Recipe
+                        <span class="float-right">
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe">
+                                <i class="material-icons">save</i>
+                            </button>
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="load" data-toggle="tooltip" title="Load recipe">
+                                <i class="material-icons">folder</i>
+                            </button>
+                            <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-recipe" data-toggle="tooltip" title="Clear recipe">
+                                <i class="material-icons">delete</i>
+                            </button>
+                        </span>
+                    </div>
                     <ul id="rec-list" class="list-area no-select"></ul>
 
                     <div id="controls" class="no-select">
-                        <div id="operational-controls">
-                            <div id="bake-group">
-                                <button type="button" class="btn btn-success btn-lg" id="bake">
-                                    <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
-                                    <span>Bake!</span>
-                                </button>
-                                <label class="btn btn-success btn-lg" id="auto-bake-label" for="auto-bake">
-                                    <input type="checkbox" checked="checked" id="auto-bake">
-                                    <div>Auto Bake</div>
-                                </label>
-                            </div>
-
-                            <div class="btn-group" style="padding-top: 10px;">
-                                <button type="button" class="btn btn-default" id="step"><img aria-hidden="true" src="<%- require('../static/images/step-16x16.png') %>" alt="Footstep Icon"/> Step through</button>
-                                <button type="button" class="btn btn-default" id="clr-breaks"><img aria-hidden="true" src="<%- require('../static/images/erase-16x16.png') %>" alt="Eraser Icon"/> Clear breakpoints</button>
+                        <div class="d-flex align-items-center">
+                            <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
+                                Step
+                            </button>
+
+                            <button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake">
+                                <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
+                                <span>Bake!</span>
+                            </button>
+
+                            <div class="form-group" style="display: contents;">
+                                <div class="mx-1 checkbox">
+                                    <label id="auto-bake-label">
+                                        <input type="checkbox" checked="checked" id="auto-bake">
+                                        <br>Auto Bake
+                                    </label>
+                                </div>
                             </div>
                         </div>
-
-                        <div class="btn-group-vertical" id="extra-controls">
-                            <button type="button" class="btn btn-default" id="save"><img aria-hidden="true" src="<%- require('../static/images/save-16x16.png') %>" alt="Save Icon"/> Save recipe</button>
-                            <button type="button" class="btn btn-default" id="load"><img aria-hidden="true" src="<%- require('../static/images/open_yellow-16x16.png') %>" alt="Open Icon"/> Load recipe</button>
-                            <button type="button" class="btn btn-default" id="clr-recipe"><img aria-hidden="true" src="<%- require('../static/images/clean-16x16.png') %>" alt="Broom Icon"/> Clear recipe</button>
-                        </div>
                     </div>
                 </div>
 
@@ -217,10 +224,14 @@
                     <div id="input" class="split no-select">
                         <div class="title no-select">
                             <label for="input-text">Input</label>
-                            <div class="btn-group io-btn-group">
-                                <button type="button" class="btn btn-default btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
-                                <button type="button" class="btn btn-default btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
-                            </div>
+                            <span class="float-right">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="clr-io" data-toggle="tooltip" title="Clear input and output">
+                                    <i class="material-icons">delete</i>
+                                </button>
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="reset-layout" data-toggle="tooltip" title="Reset pane layout">
+                                    <i class="material-icons">view_compact</i>
+                                </button>
+                            </span>
                             <div class="io-info" id="input-info"></div>
                             <div class="io-info" id="input-selection-info"></div>
                         </div>
@@ -230,7 +241,7 @@
                             <div id="input-file">
                                 <div class="file-overlay"></div>
                                 <div style="position: relative; height: 100%;">
-                                    <div class="card">
+                                    <div class="io-card card">
                                         <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
                                         <div class="card-body">
                                             <button type="button" class="close" id="input-file-close">&times;</button>
@@ -248,16 +259,33 @@
                     <div id="output" class="split">
                         <div class="title no-select">
                             <label for="output-text">Output</label>
-                            <div class="btn-group io-btn-group">
-                                <button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
-                                <button type="button" class="btn btn-default btn-sm" id="copy-output" title="Copy output"><img aria-hidden="true" src="<%- require('../static/images/copy-16x16.png') %>" alt="Copy Icon"/> Copy raw output</button>
-                                <button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>
-                                <button type="button" class="btn btn-default btn-sm" id="undo-switch" title="Undo move" disabled="disabled"><img aria-hidden="true" src="<%- require('../static/images/undo-16x16.png') %>" alt="Undo Icon"/> Undo</button>
-                                <button type="button" class="btn btn-default btn-sm" id="maximise-output" title="Maximise"><img aria-hidden="true" src="<%- require('../static/images/maximise-16x16.png') %>" alt="Maximise Icon"/> Max</button>
-                            </div>
+                            <span class="float-right">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-to-file" data-toggle="tooltip" title="Save output to file">
+                                    <i class="material-icons">save</i>
+                                </button>
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="copy-output" data-toggle="tooltip" title="Copy raw output to the clipboard">
+                                    <i class="material-icons">content_copy</i>
+                                </button>
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="switch" data-toggle="tooltip" title="Move output to input">
+                                    <i class="material-icons">loop</i>
+                                </button>
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="undo-switch" data-toggle="tooltip" title="Undo" disabled="disabled">
+                                    <i class="material-icons">undo</i>
+                                </button>
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="maximise-output" data-toggle="tooltip" title="Maximise output pane">
+                                    <i class="material-icons">fullscreen</i>
+                                </button>
+                            </span>
                             <div class="io-info" id="output-info"></div>
                             <div class="io-info" id="output-selection-info"></div>
-                            <span id="stale-indicator" title="The output is stale.&#10;The input or recipe has changed since this output was generated. Bake again to get the new value.">&#x1F551;</span>
+                            <button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
+                                <svg width="22" height="22" viewBox="0 0 24 24">
+                                    <path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />
+                                </svg>
+                            </button>
+                            <span id="stale-indicator" class="hidden" data-toggle="tooltip" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">
+                                <i class="material-icons">access_time</i>
+                            </span>
                         </div>
                         <div class="textarea-wrapper">
                             <div id="output-highlighter" class="no-select"></div>
@@ -267,14 +295,16 @@
                             <div id="output-file">
                                 <div class="file-overlay"></div>
                                 <div style="position: relative; height: 100%;">
-                                    <div class="card">
+                                    <div class="io-card card">
                                         <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
                                         <div class="card-body">
                                             Size: <span id="output-file-size"></span><br>
-                                            <button id="output-file-download" type="button" class="btn btn-primary">Download</button>
+                                            <button id="output-file-download" type="button" class="btn btn-primary btn-outline">Download</button>
                                             <div class="input-group">
                                                 <span class="input-group-btn">
-                                                    <button id="output-file-slice" type="button" class="btn btn-default" title="View slice">&#x1f50d;</button>
+                                                    <button id="output-file-slice" type="button" class="btn btn-secondary bmd-btn-icon" title="View slice">
+                                                          <i class="material-icons">search</i>
+                                                    </button>
                                                 </span>
                                                 <input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="1024" min="0">
                                                 <div class="input-group-addon">to</div>
@@ -295,19 +325,23 @@
         </div>
 
         <div class="modal" id="save-modal" tabindex="-1" role="dialog">
-            <div class="modal-dialog modal-lg">
+            <div class="modal-dialog modal-lg" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <img aria-hidden="true" class="pull-right" src="<%- require('../static/images/save-22x22.png') %>" alt="Save Icon"/>
-                        <h4 class="modal-title">Save recipe</h4>
+                        <h5 class="modal-title">Save recipe</h5>
                     </div>
                     <div class="modal-body">
                         <div class="form-group">
-                            <label for="save-text">Save your recipe to local storage or copy the following string to load later</label>
                             <ul class="nav nav-tabs" role="tablist">
-                                <li role="presentation" class="active"><a href="#chef-format" role="tab" data-toggle="tab">Chef format</a></li>
-                                <li role="presentation"><a href="#clean-json" role="tab" data-toggle="tab">Clean JSON</a></li>
-                                <li role="presentation"><a href="#compact-json" role="tab" data-toggle="tab">Compact JSON</a></li>
+                                <li class="nav-item">
+                                    <a class="nav-link active" href="#chef-format" role="tab" data-toggle="tab">Chef format</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#clean-json" role="tab" data-toggle="tab">Clean JSON</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#compact-json" role="tab" data-toggle="tab">Compact JSON</a>
+                                </li>
                             </ul>
                             <div class="tab-content" id="save-texts">
                                 <div role="tabpanel" class="tab-pane active" id="chef-format">
@@ -322,22 +356,27 @@ <h4 class="modal-title">Save recipe</h4>
                             </div>
                         </div>
                         <div class="form-group">
-                            <label for="save-name">Recipe name</label>
-                            <input type="text" class="form-control" id="save-name" placeholder="Recipe name">
+                            <label for="save-name" class="bmd-label-floating">Recipe name</label>
+                            <input type="text" class="form-control" id="save-name">
+                            <span class="bmd-help">Save your recipe to local storage using this name, or copy it to load later</span>
                         </div>
                     </div>
                     <div class="modal-footer" id="save-footer">
                         <button type="button" class="btn btn-primary" id="save-button" data-dismiss="modal">Save</button>
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Done</button>
                     </div>
                     <div class="modal-body">
                         <div class="form-group" id="save-link-group">
-                            <label>Data link</label>
+                            <h6 style="display: inline">Data link</h6>
                             <div class="save-link-options">
-                                <input type="checkbox" id="save-link-recipe-checkbox" checked> <label for="save-link-recipe-checkbox"> Include recipe </label>
-                                <input type="checkbox" id="save-link-input-checkbox" checked> <label for="save-link-input-checkbox"> Include input </label>
+                                <label class="checkbox-inline">
+                                    <input type="checkbox" id="save-link-recipe-checkbox" checked> Include recipe
+                                </label>
+                                <label class="checkbox-inline">
+                                    <input type="checkbox" id="save-link-input-checkbox" checked> Include input
+                                </label>
                             </div>
-                            <br>
+                            <br><br>
                             <a id="save-link" style="word-wrap: break-word;"></a>
                         </div>
                     </div>
@@ -346,82 +385,63 @@ <h4 class="modal-title">Save recipe</h4>
         </div>
 
         <div class="modal" id="load-modal" tabindex="-1" role="dialog">
-            <div class="modal-dialog modal-lg">
+            <div class="modal-dialog modal-lg" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <img aria-hidden="true" class="pull-right" src="<%- require('../static/images/open_yellow-24x24.png') %>" alt="Open Icon"/>
-                        <h4 class="modal-title">Load recipe</h4>
+                        <h5 class="modal-title">Load recipe</h5>
                     </div>
                     <div class="modal-body">
                         <div class="form-group">
-                            <label for="load-name">Load your recipe from local storage by selecting its name from the drop-down</label>
+                            <label for="load-name" class="bmd-label-floating">Recipe name</label>
                             <select class="form-control" id="load-name"></select>
+                            <span class="bmd-help">Load your recipe from local storage by selecting its name from the drop-down</span>
                         </div>
                         <div class="form-group">
-                            <label for="load-text">Load your recipe by pasting it in the box below</label>
+                            <label for="load-text" class="bmd-label-floating">Recipe</label>
                             <textarea class="form-control" id="load-text" rows="5"></textarea>
+                            <span class="bmd-help">Load your recipe by pasting it into this box</span>
                         </div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-primary" id="load-button" data-dismiss="modal">Load</button>
                         <button type="button" class="btn btn-danger" id="load-delete-button">Delete</button>
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="modal" id="options-modal" tabindex="-1" role="dialog">
-            <div class="modal-dialog modal-lg">
+            <div class="modal-dialog modal-lg" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <img aria-hidden="true" class="pull-right" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/>
-                        <h4 class="modal-title">Options</h4>
+                        <h5 class="modal-title">Options</h5>
                     </div>
                     <div class="modal-body" id="options-body">
                         <p style="font-weight: bold">Please note that these options will persist between sessions.</p>
-                        <div class="option-item">
-                            <select option="theme" id="theme">
+
+                        <div class="form-group option-item">
+                            <label for="theme" class="bmd-label-floating"> Theme (only supported in modern browsers)</label>
+                            <select class="form-control" option="theme" id="theme">
                                 <option value="classic">Classic</option>
                                 <option value="dark">Dark</option>
                                 <option value="geocities">GeoCities</option>
                             </select>
-                            <label for="theme"> Theme (only supported in modern browsers)</label>
                         </div>
-                        <div class="option-item">
-                            <input type="checkbox" option="updateUrl" id="updateUrl" checked />
-                            <label for="updateUrl"> Update the URL when the input or recipe changes</label>
-                        </div>
-                        <div class="option-item">
-                            <input type="checkbox" option="showHighlighter" id="showHighlighter" checked />
-                            <label for="showHighlighter"> Highlight selected bytes in output and input (when possible)</label>
-                        </div>
-                        <div class="option-item">
-                            <input type="checkbox" option="treatAsUtf8" id="treatAsUtf8" checked />
-                            <label for="treatAsUtf8"> Treat output as UTF-8 if possible</label>
-                        </div>
-                        <div class="option-item">
-                            <input type="checkbox" option="wordWrap" id="wordWrap" checked />
-                            <label for="wordWrap"> Word wrap the input and output</label>
-                        </div>
-                        <div class="option-item">
-                            <input type="checkbox" option="showErrors" id="showErrors" checked />
-                            <label for="showErrors"> Operation error reporting (recommended)</label>
-                        </div>
-                        <div class="option-item">
-                            <input type="checkbox" option="useMetaKey" id="useMetaKey" />
-                            <label for="useMetaKey"> Use meta key for keybindings (Windows ⊞/Command ⌘)</label>
-                        </div>
-                        <div class="option-item">
-                            <input type="number" option="errorTimeout" id="errorTimeout" />
-                            <label for="errorTimeout"> Operation error timeout in ms (0 for never)</label>
+
+                        <div class="form-group option-item">
+                            <label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
+                            <input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
                         </div>
-                        <div class="option-item">
-                            <input type="number" option="ioDisplayThreshold" id="ioDisplayThreshold" />
-                            <label for="ioDisplayThreshold"> Size threshold for treating the input and output as a file (KiB)</label>
+
+                        <div class="form-group option-item">
+                            <label for="ioDisplayThreshold" class="bmd-label-floating">Size threshold for treating the input and output as a file (KiB)</label>
+                            <input type="number" class="form-control" option="ioDisplayThreshold" id="ioDisplayThreshold">
                         </div>
-                        <div class="option-item">
-                            <select option="logLevel" id="logLevel">
+
+                        <div class="form-group option-item">
+                            <label for="logLevel" class="bmd-label-floating">Console logging level</label>
+                            <select class="form-control" option="logLevel" id="logLevel">
                                 <option value="silent">Silent</option>
                                 <option value="error">Error</option>
                                 <option value="warn">Warn</option>
@@ -429,23 +449,70 @@ <h4 class="modal-title">Options</h4>
                                 <option value="debug">Debug</option>
                                 <option value="trace">Trace</option>
                             </select>
-                            <label for="logLevel"> Console logging level</label>
+                        </div>
+
+                        <div class="checkbox option-item">
+                            <label for="updateUrl">
+                                <input type="checkbox" option="updateUrl" id="updateUrl" checked>
+                                Update the URL when the input or recipe changes
+                            </label>
+                        </div>
+
+                        <div class="checkbox option-item">
+                            <label for="showHighlighter">
+                                <input type="checkbox" option="showHighlighter" id="showHighlighter" checked>
+                                Highlight selected bytes in output and input (when possible)
+                            </label>
+                        </div>
+
+                        <div class="checkbox option-item">
+                            <label for="treatAsUtf8">
+                                <input type="checkbox" option="treatAsUtf8" id="treatAsUtf8" checked>
+                                Treat output as UTF-8 if possible
+                            </label>
+                        </div>
+
+                        <div class="checkbox option-item">
+                            <label for="wordWrap">
+                                <input type="checkbox" option="wordWrap" id="wordWrap" checked>
+                                Word wrap the input and output
+                            </label>
+                        </div>
+
+                        <div class="checkbox option-item">
+                            <label for="showErrors">
+                                <input type="checkbox" option="showErrors" id="showErrors" checked>
+                                Operation error reporting (recommended)
+                            </label>
+                        </div>
+
+                        <div class="checkbox option-item">
+                            <label for="useMetaKey">
+                                <input type="checkbox" option="useMetaKey" id="useMetaKey">
+                                Use meta key for keybindings (Windows ⊞/Command ⌘)
+                            </label>
+                        </div>
+
+                        <div class="checkbox option-item">
+                            <label for="autoMagic">
+                                <input type="checkbox" option="autoMagic" id="autoMagic">
+                                Attempt to detect encoded data automagically
+                            </label>
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-default" id="reset-options">Reset options to default</button>
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-secondary" id="reset-options">Reset options to default</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="modal" id="favourites-modal" tabindex="-1" role="dialog">
-            <div class="modal-dialog modal-lg">
+            <div class="modal-dialog modal-lg" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <img aria-hidden="true" class="pull-right" src="<%- require('../static/images/favourite-24x24.png') %>" alt="Star Icon"/>
-                        <h4 class="modal-title">Edit Favourites</h4>
+                        <h5 class="modal-title">Edit Favourites</h5>
                     </div>
                     <div class="modal-body" id="favourites-body">
                         <ul>
@@ -459,7 +526,7 @@ <h4 class="modal-title">Edit Favourites</h4>
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal" id="reset-favourites">Reset favourites to default</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="reset-favourites">Reset favourites to default</button>
                         <button type="button" class="btn btn-success" data-dismiss="modal" id="save-favourites">Save</button>
                         <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                     </div>
@@ -468,11 +535,10 @@ <h4 class="modal-title">Edit Favourites</h4>
         </div>
 
         <div class="modal" id="support-modal" tabindex="-1" role="dialog">
-            <div class="modal-dialog modal-lg">
+            <div class="modal-dialog modal-lg" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <img aria-hidden="true" class="pull-right" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/>
-                        <h4 class="modal-title">CyberChef - The Cyber Swiss Army Knife</h4>
+                        <h5 class="modal-title">CyberChef - The Cyber Swiss Army Knife</h5>
                     </div>
                     <div class="modal-body">
                         <img aria-hidden="true" class="about-img-left" src="<%- require('../static/images/cyberchef-128x128.png') %>" alt="CyberChef Logo"/>
@@ -482,115 +548,112 @@ <h4 class="modal-title">CyberChef - The Cyber Swiss Army Knife</h4>
                         </p>
                         <p>&copy; Crown Copyright 2016.</p>
                         <p>Released under the Apache Licence, Version 2.0.</p>
-                        <p>
-                            <a href="https://gitter.im/gchq/CyberChef">
-                                <img src="<%- require('../static/images/gitter-badge.svg') %>">
-                            </a>
-                        </p>
-                        <br>
-                        <br>
-                        <div>
-                            <ul class="nav nav-tabs" role="tablist">
-                                <li role="presentation" class="active"><a href="#faqs" aria-controls="profile" role="tab" data-toggle="tab">
-                                    <img aria-hidden="true" src="<%- require('../static/images/help-16x16.png') %>" alt="Question Mark Icon"/>
+                        <p><a href="https://gitter.im/gchq/CyberChef">
+                            <img src="<%- require('../static/images/gitter-badge.svg') %>">
+                        </a></p>
+
+                        <ul class="nav nav-tabs" role="tablist">
+                            <li class="nav-item" role="presentation">
+                                <a class="nav-link active" href="#faqs" aria-controls="profile" role="tab" data-toggle="tab">
                                     FAQs
-                                </a></li>
-                                <li role="presentation"><a href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab">
-                                    <img aria-hidden="true" src="<%- require('../static/images/bug-16x16.png') %>" alt="Bug Icon"/>
+                                </a>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <a class="nav-link" href="#report-bug" aria-controls="messages" role="tab" data-toggle="tab">
                                     Report a bug
-                                </a></li>
-                                <li role="presentation"><a href="#about" aria-controls="messages" role="tab" data-toggle="tab">
-                                    <img aria-hidden="true" src="<%- require('../static/images/speech-16x16.png') %>" alt="Speech Balloon Icon"/>
+                                </a>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <a class="nav-link" href="#about" aria-controls="messages" role="tab" data-toggle="tab">
                                     About
-                                </a></li>
-                                <li role="presentation"><a href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
-                                    <img aria-hidden="true" src="<%- require('../static/images/code-16x16.png') %>" alt="List Icon"/>
+                                </a>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <a class="nav-link" href="#keybindings" aria-controls="messages" role="tab" data-toggle="tab">
                                     Keybindings
-                                </a></li>
-                            </ul>
-                            <div class="tab-content">
-                                <div role="tabpanel" class="tab-pane active" id="faqs">
-                                    <br>
-                                    <blockquote>
-                                        <a data-toggle="collapse" data-target="#faq-examples">
-                                            What sort of things can I do with CyberChef?
-                                        </a>
-                                    </blockquote>
-                                    <div class="collapse" id="faq-examples">
-                                        <p>There are around 200 operations in CyberChef allowing you to carry out simple and complex tasks easily. Here are some examples:</p>
-                                        <ul>
-                                            <li><a href="#recipe=From_Base64('A-Za-z0-9%2B/%3D',true)&input=VTI4Z2JHOXVaeUJoYm1RZ2RHaGhibXR6SUdadmNpQmhiR3dnZEdobElHWnBjMmd1">Decode a Base64-encoded string</a></li>
-                                            <li><a href="#recipe=Translate_DateTime_Format('Standard%20date%20and%20time','DD/MM/YYYY%20HH:mm:ss','UTC','dddd%20Do%20MMMM%20YYYY%20HH:mm:ss%20Z%20z','Australia/Queensland')&input=MTUvMDYvMjAxNSAyMDo0NTowMA">Convert a date and time to a different time zone</a></li>
-                                            <li><a href="#recipe=Parse_IPv6_address()&input=MjAwMTowMDAwOjQxMzY6ZTM3ODo4MDAwOjYzYmY6M2ZmZjpmZGQy">Parse a Teredo IPv6 address</a></li>
-                                            <li><a href="#recipe=From_Hexdump()Gunzip()&input=MDAwMDAwMDAgIDFmIDhiIDA4IDAwIDEyIGJjIGYzIDU3IDAwIGZmIDBkIGM3IGMxIDA5IDAwIDIwICB8Li4uLi6881cu/y7HwS4uIHwKMDAwMDAwMTAgIDA4IDA1IGQwIDU1IGZlIDA0IDJkIGQzIDA0IDFmIGNhIDhjIDQ0IDIxIDViIGZmICB8Li7QVf4uLdMuLsouRCFb/3wKMDAwMDAwMjAgIDYwIGM3IGQ3IDAzIDE2IGJlIDQwIDFmIDc4IDRhIDNmIDA5IDg5IDBiIDlhIDdkICB8YMfXLi6%2BQC54Sj8uLi4ufXwKMDAwMDAwMzAgIDRlIGM4IDRlIDZkIDA1IDFlIDAxIDhiIDRjIDI0IDAwIDAwIDAwICAgICAgICAgICB8TshObS4uLi5MJC4uLnw">Convert data from a hexdump, then decompress</a></li>
-                                            <li><a href="#recipe=RC4(%7B'option':'UTF8','string':'secret'%7D,'Hex','Hex')Disassemble_x86('64','Full%20x86%20architecture',16,0,true,true)&input=MjFkZGQyNTQwMTYwZWU2NWZlMDc3NzEwM2YyYTM5ZmJlNWJjYjZhYTBhYWJkNDE0ZjkwYzZjYWY1MzEyNzU0YWY3NzRiNzZiM2JiY2QxOTNjYjNkZGZkYmM1YTI2NTMzYTY4NmI1OWI4ZmVkNGQzODBkNDc0NDIwMWFlYzIwNDA1MDcxMzhlMmZlMmIzOTUwNDQ2ZGIzMWQyYmM2MjliZTRkM2YyZWIwMDQzYzI5M2Q3YTVkMjk2MmMwMGZlNmRhMzAwNzJkOGM1YTZiNGZlN2Q4NTlhMDQwZWVhZjI5OTczMzYzMDJmNWEwZWMxOQ">Decrypt and disassemble shellcode</a></li>
-                                            <li><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Display multiple timestamps as full dates</a></li>
-                                            <li><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)Conditional_Jump('1',false,'base64',10)To_Hex('Space')Return()Label('base64')To_Base64('A-Za-z0-9%2B/%3D')&input=U29tZSBkYXRhIHdpdGggYSAxIGluIGl0ClNvbWUgZGF0YSB3aXRoIGEgMiBpbiBpdA">Carry out different operations on data of different types</a></li>
-                                            <li><a href="#recipe=Register('key%3D(%5B%5C%5Cda-f%5D*)',true,false)Find_/_Replace(%7B'option':'Regex','string':'.*data%3D(.*)'%7D,'$1',true,false,true)RC4(%7B'option':'Hex','string':'$R0'%7D,'Hex','Latin1')&input=aHR0cDovL21hbHdhcmV6LmJpei9iZWFjb24ucGhwP2tleT0wZTkzMmE1YyZkYXRhPThkYjdkNWViZTM4NjYzYTU0ZWNiYjMzNGUzZGIxMQ">Use parts of the input as arguments to operations</a></li>
-                                        </ul>
-                                    </div>
-                                    <blockquote>
-                                        <a data-toggle="collapse" data-target="#faq-load-files">
-                                            Can I load input directly from files?
-                                        </a>
-                                    </blockquote>
-                                    <div class="collapse" id="faq-load-files">
-                                        <p>Yes! Just drag your file over the input box and drop it.</p>
-                                        <p>CyberChef can handle files up to around 500MB (depending on your browser), however some of the operations may take a very long time to run over this much data.</p>
-                                        <p>If the output is larger than a certain threshold (default 1MiB), it will be presented to you as a file available for download. Slices of the file can be viewed in the output if you need to inspect them.</p>
-                                    </div>
-                                    <blockquote>
-                                        <a data-toggle="collapse" data-target="#faq-fork">
-                                            How do I run operation X over multiple inputs at once?
-                                        </a>
-                                    </blockquote>
-                                    <div class="collapse" id="faq-fork">
-                                        <p>Maybe you have 10 timestamps that you want to parse or 16 encoded strings that all have the same key.</p>
-                                        <p>The 'Fork' operation (found in the 'Flow control' category) splits up the input line by line and runs all subsequent operations on each line separately. Each output is then displayed on a separate line. These delimiters can be changed, so if your inputs are separated by commas, you can change the split delimiter to a comma instead.</p>
-                                        <p><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Click here</a> for an example.</p>
-                                    </div>
+                                </a>
+                            </li>
+                        </ul>
+                        <div class="tab-content">
+                            <div role="tabpanel" class="tab-pane active" id="faqs">
+                                <br>
+                                <a class="btn btn-primary" data-toggle="collapse" data-target="#faq-examples">
+                                    What sort of things can I do with CyberChef?
+                                </a>
+                                <div class="collapse" id="faq-examples">
+                                    <p>There are around 200 operations in CyberChef allowing you to carry out simple and complex tasks easily. Here are some examples:</p>
+                                    <ul>
+                                        <li><a href="#recipe=From_Base64('A-Za-z0-9%2B/%3D',true)&input=VTI4Z2JHOXVaeUJoYm1RZ2RHaGhibXR6SUdadmNpQmhiR3dnZEdobElHWnBjMmd1">Decode a Base64-encoded string</a></li>
+                                        <li><a href="#recipe=Translate_DateTime_Format('Standard%20date%20and%20time','DD/MM/YYYY%20HH:mm:ss','UTC','dddd%20Do%20MMMM%20YYYY%20HH:mm:ss%20Z%20z','Australia/Queensland')&input=MTUvMDYvMjAxNSAyMDo0NTowMA">Convert a date and time to a different time zone</a></li>
+                                        <li><a href="#recipe=Parse_IPv6_address()&input=MjAwMTowMDAwOjQxMzY6ZTM3ODo4MDAwOjYzYmY6M2ZmZjpmZGQy">Parse a Teredo IPv6 address</a></li>
+                                        <li><a href="#recipe=From_Hexdump()Gunzip()&input=MDAwMDAwMDAgIDFmIDhiIDA4IDAwIDEyIGJjIGYzIDU3IDAwIGZmIDBkIGM3IGMxIDA5IDAwIDIwICB8Li4uLi6881cu/y7HwS4uIHwKMDAwMDAwMTAgIDA4IDA1IGQwIDU1IGZlIDA0IDJkIGQzIDA0IDFmIGNhIDhjIDQ0IDIxIDViIGZmICB8Li7QVf4uLdMuLsouRCFb/3wKMDAwMDAwMjAgIDYwIGM3IGQ3IDAzIDE2IGJlIDQwIDFmIDc4IDRhIDNmIDA5IDg5IDBiIDlhIDdkICB8YMfXLi6%2BQC54Sj8uLi4ufXwKMDAwMDAwMzAgIDRlIGM4IDRlIDZkIDA1IDFlIDAxIDhiIDRjIDI0IDAwIDAwIDAwICAgICAgICAgICB8TshObS4uLi5MJC4uLnw">Convert data from a hexdump, then decompress</a></li>
+                                        <li><a href="#recipe=RC4(%7B'option':'UTF8','string':'secret'%7D,'Hex','Hex')Disassemble_x86('64','Full%20x86%20architecture',16,0,true,true)&input=MjFkZGQyNTQwMTYwZWU2NWZlMDc3NzEwM2YyYTM5ZmJlNWJjYjZhYTBhYWJkNDE0ZjkwYzZjYWY1MzEyNzU0YWY3NzRiNzZiM2JiY2QxOTNjYjNkZGZkYmM1YTI2NTMzYTY4NmI1OWI4ZmVkNGQzODBkNDc0NDIwMWFlYzIwNDA1MDcxMzhlMmZlMmIzOTUwNDQ2ZGIzMWQyYmM2MjliZTRkM2YyZWIwMDQzYzI5M2Q3YTVkMjk2MmMwMGZlNmRhMzAwNzJkOGM1YTZiNGZlN2Q4NTlhMDQwZWVhZjI5OTczMzYzMDJmNWEwZWMxOQ">Decrypt and disassemble shellcode</a></li>
+                                        <li><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Display multiple timestamps as full dates</a></li>
+                                        <li><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)Conditional_Jump('1',false,'base64',10)To_Hex('Space')Return()Label('base64')To_Base64('A-Za-z0-9%2B/%3D')&input=U29tZSBkYXRhIHdpdGggYSAxIGluIGl0ClNvbWUgZGF0YSB3aXRoIGEgMiBpbiBpdA">Carry out different operations on data of different types</a></li>
+                                        <li><a href="#recipe=Register('key%3D(%5B%5C%5Cda-f%5D*)',true,false)Find_/_Replace(%7B'option':'Regex','string':'.*data%3D(.*)'%7D,'$1',true,false,true)RC4(%7B'option':'Hex','string':'$R0'%7D,'Hex','Latin1')&input=aHR0cDovL21hbHdhcmV6LmJpei9iZWFjb24ucGhwP2tleT0wZTkzMmE1YyZkYXRhPThkYjdkNWViZTM4NjYzYTU0ZWNiYjMzNGUzZGIxMQ">Use parts of the input as arguments to operations</a></li>
+                                    </ul>
                                 </div>
-                                <div role="tabpanel" class="tab-pane" id="report-bug">
-                                    <br>
-                                    <p>If you find a bug in CyberChef, please raise an issue in our GitHub repository explaining it in as much detail as possible. Copy and include the following information if relevant.</p>
-                                    <br>
-                                    <pre id="report-bug-info"></pre>
-                                    <br>
-                                    <a class="btn btn-primary" href="https://github.com/gchq/CyberChef/issues/new" role="button">Raise issue on GitHub</a>
+                                <br>
+
+                                <a class="btn btn-primary" data-toggle="collapse" data-target="#faq-load-files">
+                                    Can I load input directly from files?
+                                </a>
+                                <div class="collapse" id="faq-load-files">
+                                    <p>Yes! Just drag your file over the input box and drop it.</p>
+                                    <p>CyberChef can handle files up to around 500MB (depending on your browser), however some of the operations may take a very long time to run over this much data.</p>
+                                    <p>If the output is larger than a certain threshold (default 1MiB), it will be presented to you as a file available for download. Slices of the file can be viewed in the output if you need to inspect them.</p>
                                 </div>
-                                <div role="tabpanel" class="tab-pane" id="about" style="padding: 20px;">
-                                    <h5><strong>What</strong></h5>
-                                    <p>A simple, intuitive web app for analysing and decoding data without having to deal with complex tools or programming languages. CyberChef encourages both technical and non-technical people to explore data formats, encryption and compression.</p><br>
+                                <br>
+
+                                <a class="btn btn-primary" data-toggle="collapse" data-target="#faq-fork">
+                                    How do I run operation X over multiple inputs at once?
+                                </a>
+                                <div class="collapse" id="faq-fork">
+                                    <p>Maybe you have 10 timestamps that you want to parse or 16 encoded strings that all have the same key.</p>
+                                    <p>The 'Fork' operation (found in the 'Flow control' category) splits up the input line by line and runs all subsequent operations on each line separately. Each output is then displayed on a separate line. These delimiters can be changed, so if your inputs are separated by commas, you can change the split delimiter to a comma instead.</p>
+                                    <p><a href="#recipe=Fork('%5C%5Cn','%5C%5Cn',false)From_UNIX_Timestamp('Seconds%20(s)')&input=OTc4MzQ2ODAwCjEwMTI2NTEyMDAKMTA0NjY5NjQwMAoxMDgxMDg3MjAwCjExMTUzMDUyMDAKMTE0OTYwOTYwMA">Click here</a> for an example.</p>
+                                </div>
+                            </div>
+                            <div role="tabpanel" class="tab-pane" id="report-bug">
+                                <br>
+                                <p>If you find a bug in CyberChef, please raise an issue in our GitHub repository explaining it in as much detail as possible. Copy and include the following information if relevant.</p>
+                                <br>
+                                <pre id="report-bug-info"></pre>
+                                <br>
+                                <a class="btn btn-primary" href="https://github.com/gchq/CyberChef/issues/new" role="button">Raise issue on GitHub</a>
+                            </div>
+                            <div role="tabpanel" class="tab-pane" id="about" style="padding: 20px;">
+                                <h5><strong>What</strong></h5>
+                                <p>A simple, intuitive web app for analysing and decoding data without having to deal with complex tools or programming languages. CyberChef encourages both technical and non-technical people to explore data formats, encryption and compression.</p><br>
 
-                                    <h5><strong>Why</strong></h5>
-                                    <p>Digital data comes in all shapes, sizes and formats in the modern world – CyberChef helps to make sense of this data all on one easy-to-use platform.</p><br>
+                                <h5><strong>Why</strong></h5>
+                                <p>Digital data comes in all shapes, sizes and formats in the modern world – CyberChef helps to make sense of this data all on one easy-to-use platform.</p><br>
 
 
-                                    <h5><strong>How</strong></h5>
-                                    <p>The interface is designed with simplicity at its heart. Complex techniques are now as trivial as drag-and-drop. Simple functions can be combined to build up a "recipe", potentially resulting in complex analysis, which can be shared with other users and used with their input.</p>
-                                    <p>For those comfortable writing code, CyberChef is a quick and efficient way to prototype solutions to a problem which can then be scripted once proven to work.</p><br>
+                                <h5><strong>How</strong></h5>
+                                <p>The interface is designed with simplicity at its heart. Complex techniques are now as trivial as drag-and-drop. Simple functions can be combined to build up a "recipe", potentially resulting in complex analysis, which can be shared with other users and used with their input.</p>
+                                <p>For those comfortable writing code, CyberChef is a quick and efficient way to prototype solutions to a problem which can then be scripted once proven to work.</p><br>
 
 
-                                    <h5><strong>Who</strong></h5>
-                                    <p>It is expected that CyberChef will be useful for cybersecurity and antivirus companies. It should also appeal to the academic world and any individuals or companies involved in the analysis of digital data, be that software developers, analysts, mathematicians or casual puzzle solvers.</p><br>
+                                <h5><strong>Who</strong></h5>
+                                <p>It is expected that CyberChef will be useful for cybersecurity and antivirus companies. It should also appeal to the academic world and any individuals or companies involved in the analysis of digital data, be that software developers, analysts, mathematicians or casual puzzle solvers.</p><br>
 
 
-                                    <h5><strong>Aim</strong></h5>
-                                    <p>It is hoped that by releasing CyberChef through <a href="https://github.com/gchq/CyberChef">GitHub</a>, contributions can be added which can be rolled out into future versions of the tool.</p><br>
+                                <h5><strong>Aim</strong></h5>
+                                <p>It is hoped that by releasing CyberChef through <a href="https://github.com/gchq/CyberChef">GitHub</a>, contributions can be added which can be rolled out into future versions of the tool.</p><br>
 
 
-                                    <br>
-                                    <p>There are around 200 useful operations in CyberChef for anyone working on anything vaguely Internet-related, whether you just want to convert a timestamp to a different format, decompress gzipped data, create a SHA3 hash, or parse an X.509 certificate to find out who issued it.</p>
-                                    <p>It’s the Cyber Swiss Army Knife.</p>
-                                </div>
-                                <div role="tabpanel" class="tab-pane" id="keybindings" style="padding: 20px;">
-                                    <table class="table table-condensed table-bordered table-hover" id="keybList"></table>
-                                </div>
+                                <br>
+                                <p>There are around 200 useful operations in CyberChef for anyone working on anything vaguely Internet-related, whether you just want to convert a timestamp to a different format, decompress gzipped data, create a SHA3 hash, or parse an X.509 certificate to find out who issued it.</p>
+                                <p>It’s the Cyber Swiss Army Knife.</p>
+                            </div>
+                            <div role="tabpanel" class="tab-pane" id="keybindings" style="padding: 20px;">
+                                <table class="table table-condensed table-bordered table-hover" id="keybList"></table>
                             </div>
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                     </div>
                     <a href="https://github.com/gchq/CyberChef">
                         <img aria-hidden="true" style="position: absolute; top: 0; right: 0; border: 0;" src="<%- require('../static/images/fork_me.png') %>" alt="Fork me on GitHub">
@@ -600,19 +663,17 @@ <h5><strong>Aim</strong></h5>
         </div>
 
         <div class="modal" id="confirm-modal" tabindex="-1" role="dialog">
-            <div class="modal-dialog modal-lg">
+            <div class="modal-dialog modal-lg" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h4 class="modal-title" id="confirm-title"></h4>
+                        <h5 class="modal-title" id="confirm-title"></h5>
                     </div>
                     <div class="modal-body" id="confirm-body"></div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-success" id="confirm-yes">
-                            <img aria-hidden="true" src="<%- require('../static/images/thumb_up-16x16.png') %>" alt="Thumbs Up"/>
                             Yes
                         </button>
                         <button type="button" class="btn btn-danger" id="confirm-no" data-dismiss="modal">
-                            <img aria-hidden="true" src="<%- require('../static/images/thumb_down-16x16.png') %>" alt="Thumbs Down"/>
                             No
                         </button>
                     </div>
diff --git a/src/web/index.js b/src/web/index.js
index 1daf36fa9..911a1532e 100755
--- a/src/web/index.js
+++ b/src/web/index.js
@@ -9,8 +9,9 @@ import "./stylesheets/index.js";
 
 // Libs
 import "babel-polyfill";
-import "bootstrap";
-import "bootstrap-switch";
+import "arrive";
+import "snackbarjs";
+import "bootstrap-material-design";
 import "bootstrap-colorpicker";
 import moment from "moment-timezone";
 import * as CanvasComponents from "../core/lib/CanvasComponents";
@@ -50,7 +51,8 @@ function main() {
         theme:               "classic",
         useMetaKey:          false,
         ioDisplayThreshold:  512,
-        logLevel:            "info"
+        logLevel:            "info",
+        autoMagic:           true,
     };
 
     document.removeEventListener("DOMContentLoaded", main, false);
diff --git a/src/web/static/fonts/MaterialIcons-Regular.woff2 b/src/web/static/fonts/MaterialIcons-Regular.woff2
new file mode 100644
index 000000000..9fa211252
Binary files /dev/null and b/src/web/static/fonts/MaterialIcons-Regular.woff2 differ
diff --git a/src/web/static/images/auto-fix.svg b/src/web/static/images/auto-fix.svg
new file mode 100644
index 000000000..97c1ecade
--- /dev/null
+++ b/src/web/static/images/auto-fix.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" /></svg>
diff --git a/src/web/stylesheets/components/_alert.css b/src/web/stylesheets/components/_alert.css
deleted file mode 100755
index d702e2483..000000000
--- a/src/web/stylesheets/components/_alert.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Alert styles
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-#alert {
-    position: fixed;
-    width: 30%;
-    margin: 30px auto;
-    top: 10px;
-    left: 0;
-    right: 0;
-    z-index: 2000;
-    display: none;
-}
-
-#alert a {
-    text-decoration: underline;
-}
diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index d596ed05d..577385040 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -7,7 +7,7 @@
  */
 
 .operation {
-    cursor: pointer;
+    cursor: grab;
     padding: 10px;
     list-style-type: none;
     position: relative;
@@ -18,110 +18,150 @@
     border-right: none;
 }
 
-.arg-group {
-    display: table;
-    width: 100%;
-    margin-top: 10px;
+#rec-list .operation {
+    padding: 14px;
 }
 
-.arg-group-text {
-    display: block;
+.op-title {
+    font-weight: var(--op-title-font-weight);
 }
 
-.inline-args {
-    float: left;
-    width: auto;
-    margin-right: 30px;
-    height: 34px;
+.ingredients {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-column-gap: 14px;
 }
 
-.inline-args input[type="checkbox"] {
-    margin-top: 10px;
+.ingredients > div {
+    grid-column: 1 / span 3;
 }
 
-.inline-args input[type="number"] {
-    width: 100px;
+.ingredients > div.inline {
+    grid-column: unset;
 }
 
-.arg-title {
-    font-weight: var(--arg-title-font-weight);
+.ingredients .form-group {
+    margin-top: 1rem;
+    padding-top: 0;
 }
 
-.arg-input {
-    display: table-cell;
-    width: 100%;
-    padding: 6px 12px;
-    vertical-align: middle;
-    height: var(--arg-input-height);
-    font-size: var(--arg-input-font-size);
-    line-height: var(--arg-input-line-height);
-    color: var(--arg-font-colour);
-    background-color: var(--arg-background);
-    border: 1px solid var(--arg-border-colour);
+.arg {
     font-family: var(--fixed-width-font-family);
     text-overflow: ellipsis;
 }
 
-.short-string {
-    width: 150px;
+select.arg {
+    font-family: var(--primary-font-family);
+    min-width: 100px;
+}
+
+textarea.arg {
+    min-height: 74px;
+    resize: vertical;
+}
+
+div.toggle-string {
+    flex: 1;
+}
+
+.operation [class^='bmd-label'],
+.operation [class*=' bmd-label'] {
+    top: 13px !important;
+    left: 12px;
+    z-index: 10;
 }
 
-select {
-    display: block;
-    padding: 6px 8px;
-    height: 34px;
-    border: 1px solid var(--arg-border-colour);
+.operation label,
+.operation .checkbox label {
+    color: var(--arg-label-colour);
+}
+
+.operation .is-focused [class^='bmd-label'],
+.operation .is-focused [class*=' bmd-label'],
+.operation .is-focused [class^='bmd-label'],
+.operation .is-focused [class*=' bmd-label'],
+.operation .is-focused label,
+.operation .checkbox label:hover {
+    color: #1976d2;
+}
+
+.operation .form-control {
+    padding: 20px 12px 6px 12px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    background-image: none;
     background-color: var(--arg-background);
+    background-position-y: 100%, 100%;
     color: var(--arg-font-colour);
 }
 
-.arg[disabled] {
-    cursor: not-allowed;
-    opacity: 1;
-    background-color: var(--arg-disabled-background);
+.operation .form-control:hover {
+    background-image:
+        linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
+        linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
+    filter: brightness(97%);
 }
 
-textarea.arg {
-    width: 100%;
-    min-height: 50px;
-    height: 70px;
-    margin-top: 5px;
-    border: 1px solid var(--arg-border-colour);
-    resize: vertical;
-    color: var(--arg-font-colour);
+.operation .form-control:focus {
     background-color: var(--arg-background);
-    font-family: var(--fixed-width-font-family);
+    background-image:
+        linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
+        linear-gradient(to top, rgba(0, 0, 0, 0.26) 1px, rgba(0, 0, 0, 0) 1px);
+    filter: brightness(100%);
 }
 
-.arg-label {
-    display: table-cell;
-    width: 1px;
-    padding-right: 10px;
-    font-weight: normal;
-    vertical-align: middle;
-    white-space: pre;
+.operation .bmd-form-group.is-filled label.bmd-label-floating,
+.operation .bmd-form-group.is-focused label.bmd-label-floating {
+    top: 4px !important;
+    left: 12px;
 }
 
-.editable-option {
-    position: relative;
-    display: inline-block;
+.operation .bmd-form-group .bmd-help {
+    margin-top: -17px;
 }
 
-.editable-option-select {
-    min-width: 250px;
+.input-group .form-control {
+    border-top-left-radius: 4px !important;
 }
 
-.editable-option-input {
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    width: calc(100% - 20px);
-    height: calc(100% - 2px) !important;
-    border: none !important;
+.input-group-append button {
+    border-top-right-radius: 4px;
+    background-color: var(--arg-background) !important;
+    margin: unset;
 }
 
-button.dropdown-toggle {
-    background-color: var(--secondary-background-colour);
+.input-group-append button:hover {
+    filter: brightness(97%);
+}
+
+.editable-option-menu {
+    height: auto;
+    max-height: 350px;
+    overflow-x: hidden;
+}
+
+.editable-option-menu .dropdown-item {
+    padding: 0.3rem 1rem 0.3rem 1rem;
+    min-height: 1.6rem;
+    max-width: 20rem;
+}
+
+.boolean-arg {
+    height: 46px;
+}
+
+.boolean-arg .checkbox {
+    height: 100%;
+}
+
+.boolean-arg .checkbox label {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.boolean-arg .checkbox-decorator {
+    top: 13px;
 }
 
 .register-list {
@@ -132,8 +172,9 @@ button.dropdown-toggle {
 
 .op-icon {
     float: right;
-    margin-left: 10px;
-    margin-top: 3px;
+    color: #f44336;
+    font-size: 18px;
+    cursor: pointer;
 }
 
 .recip-icons {
@@ -143,33 +184,28 @@ button.dropdown-toggle {
     height: 16px;
 }
 
-.recip-icon {
+.recip-icons i {
     margin-right: 10px;
     vertical-align: baseline;
     float: right;
+    font-size: 18px;
+    cursor: pointer;
 }
 
 .disable-icon {
-    width: 16px;
-    height: 16px;
-    margin-top: -1px;
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACfElEQVQ4y6WTPWgTYRjHf8nlfVvuoDVIP4Yuki4WHKoUqggFRUTsUEGkVG2hmCq6OnTwIxYHB+eijZOKdLNDW1pKKyGigh8dBHUJElxyBgx3vEnukvdyDrUhRXDxGR+e/+/583xEwjDkfyIGwNVTzURm4tYAMA6MAoN/0tvAMrA48uL+l2bx4w0iYRjSuHKC6OnTZLqHk8CcaZq9bW1tSCkBqNVq+L5PpVIpAHdGfr5LN9bXiT7Z2nGgteb1/qFkLBJZ6OjowHEc8vk8pVIJgHg8TldXF52dnb2u6y5s7R/iuF5JSyAKkLl4eyAMwznLsrBtm1wu99Z13amk+BFJih8R13WXANrb27EsizAM5zIXbw+wC9Baj0spe5VSFAqFt4ZhXJ6ufXuK55E5cDKVSCTGenp6yGazKKWQUvZqrcebgCAIRqWUOI6DEOLR1K8POapVMgfPpoC7u2LLspYcx0FKSRAEo60OBg3DwPd9Jr5vPqWvj8zh83vEwL2J75vnfN/HMAy01oPNNQZBQBAEO1OvVsl0D/8lTuZfpYDd7gRBQKuD7XK5jGmarB679PIv8deVFJUKq8cuTZqmSblcRmu93QpYVkohhMCyrLE94n2/UlSrbJy5kRBCXBNCoJRCa73cClh0XbfgeR6WZZHNZunv719KvnmeYnWVVxdmJ2Ox2DMhxFHP83Bdt6C1XgR2LvHzQDvvb84npZQL8Xgc0zSJRqN7br7RaFCpVCiVStRqtZmhh9fTh754TQdMr82nPc+bsW27UCwWUUpRr9ep1+sopSgWi9i2XfA8b2Z6bT6ttabp4GMi0uz0aXbhn890+MFM85mO5MIdwP/Eb1pMUCdctYRzAAAAAElFTkSuQmCC') no-repeat;
+    color: #9e9e9e;
 }
 
 .disable-icon-selected {
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACFUlEQVR4XqWTP0tbURjGn9zY3mjBwsUhBQtS6XKxiNypIGZJ6SKYUYdaKWg7OrrE3pYO+Qit3dpFuuQO6lI7Z4nESQdjlJbkJh0MksSb3Jvk9H0gjZFu9YWH83LO7zn/3nNCSincJobAeP1sEDBFi6J50UyPy4l2RNuioz756Ts0tt1OB4jH2a52Ne2HGh9PwrJm2EcxZx/HyPRYMDgB2u02/N3d1c7w8BZMM1ptNJBPp3GwsUExB/s4RoYsPf0JOkFgdoH34YkJ/D48xC/HyTTOzl5ayWSIktwxqlVo0SjIkKWnP0Hg+4swjGitVMJFNpu5o+svptfXv6DZBDIZezoWS3Db3A0ZsvRcH8H354dGR9EoFHA3EvlorqycwvOAXM4G8Pav+f7YmEOGLD1gsIzl54+V+vBK/Yw9ZAv1LQW1FrdFSnKVfQTK5liPUfRI9I8ArqiPjLAF9vcHVybyzlpasgcZeq7voNXKNSsV3DMMXB4fp/8xLyzYuLri2DIZsvQM3sFOzXURiUR4zsQNcyrFleFVKpNyP2/IkKVnsArbF65bbkqplJSJZrl5x5qbs7G3h3artSyV+arr+lMyZOnpP2Wp6ZFos3R+vvUgCGDNzgKalkA4rECIr07662J2i0X4nrfJJ33jJT6Zmvpcr9XWCicn5WI+j7rrAmKgmLOPY2TI0sPgb8TBZOi/PpN1qnDr7/wH3jxgB/FKIXkAAAAASUVORK5CYII=') no-repeat;
+    color: #f44336;
 }
 
 .breakpoint {
-    float: right;
-    width: 14px;
-    height: 14px;
-    background-color: #eee;
-    border: 1px solid #aaa;
+    color: #9e9e9e;
 }
 
 .breakpoint-selected {
-    background: #eee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEXIUkvzUVHzTEzzn5785eXrbW24BgbzWVnze3vzVVXzY2Pyion509PzbW3zXV1UMxj0l5f1srKbRTRgOxzJDg796ur74ODfIyP5zs6LLx3pNTXYGxuxdkVZNhn////sCC1eAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAABWSURBVBjTnc+7EoAgDERRTOQVxMEZFAf//z8FjAUFDbfb060QU2FwxngimxnCea3bjegSgz+0tguAfBgIy64QGfZQdg91dgAtqUZgnfz6IacYVWvu2AvR4wNAv0nxrAAAAABJRU5ErkJggg==') no-repeat -2px -2px;
+    color: #f44336;
 }
 
 .break {
@@ -178,30 +214,40 @@ button.dropdown-toggle {
     border-color: var(--breakpoint-border-colour) !important;
 }
 
+.break .form-group * { color: var(--breakpoint-font-colour) !important; }
+
 .selected-op {
     color: var(--selected-operation-font-color) !important;
     background-color: var(--selected-operation-bg-colour) !important;
     border-color: var(--selected-operation-border-colour) !important;
 }
 
+.selected-op .form-group * { color: var(--selected-operation-font-color) !important; }
+
 .flow-control-op {
     color: var(--fc-operation-font-colour) !important;
     background-color: var(--fc-operation-bg-colour) !important;
     border-color: var(--fc-operation-border-colour) !important;
 }
 
+.flow-control-op .form-group *:not(.arg) { color: var(--fc-operation-font-colour) }
+
 .flow-control-op.break {
     color: var(--fc-breakpoint-operation-font-colour) !important;
     background-color: var(--fc-breakpoint-operation-bg-colour) !important;
     border-color: var(--fc-breakpoint-operation-border-colour) !important;
 }
 
+.flow-control-op.break .form-group * { color: var(--fc-breakpoint-operation-font-colour) !important; }
+
 .disabled {
     color: var(--disabled-font-colour) !important;
     background-color: var(--disabled-bg-colour) !important;
     border-color: var(--disabled-border-colour) !important;
 }
 
+.disabled .form-group * { color: var(--disabled-font-colour) !important; }
+
 .break .register-list {
     color: var(--fc-breakpoint-operation-font-colour) !important;
     background-color: var(--fc-breakpoint-operation-border-colour) !important;
diff --git a/src/web/stylesheets/components/_pane.css b/src/web/stylesheets/components/_pane.css
index fb8f309b6..40f6a3050 100755
--- a/src/web/stylesheets/components/_pane.css
+++ b/src/web/stylesheets/components/_pane.css
@@ -7,16 +7,25 @@
  */
 
 :root {
-    --title-height: 43px;
+    --title-height: 48px;
 }
 
 .title {
-    padding: 10px;
+    padding: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
     height: var(--title-height);
     border-bottom: 1px solid var(--primary-border-colour);
     font-weight: var(--title-weight);
+    font-size: var(--title-size);
     color: var(--title-colour);
     background-color: var(--title-background-colour);
+    line-height: calc(var(--title-height) - 14px);
+}
+
+.title>span,
+.title>.btn {
+    margin-top: -4px;
 }
 
 .list-area {
@@ -29,7 +38,7 @@
     padding: 0;
 }
 
-.card {
+.io-card.card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     width: 400px;
@@ -42,13 +51,14 @@
     color: var(--primary-font-colour);
     line-height: 30px;
     background-color: var(--primary-background-colour);
+    flex-direction: row;
 }
 
-.card:hover {
+.io-card.card:hover {
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }
 
-.card>img {
+.io-card.card>img {
     float: left;
     width: 128px;
     height: 128px;
@@ -56,13 +66,13 @@
     margin-top: 11px;
 }
 
-.card-body .close {
+.io-card.card .card-body .close {
     position: absolute;
     right: 10px;
-    top: 10px;
+    top: 4px;
 }
 
-.card-body {
+.io-card.card .card-body {
     float: left;
     padding: 16px;
     width: 250px;
@@ -72,12 +82,12 @@
     user-select: text;
 }
 
-.card-body>.btn {
-    margin-bottom: 15px;
+.io-card.card .card-body>.btn {
+    margin-bottom: 5px;
     margin-top: 5px;
 }
 
-.card input[type=number] {
+.io-card.card input[type=number] {
     padding-right: 6px;
     padding-left: 6px;
 }
diff --git a/src/web/stylesheets/index.css b/src/web/stylesheets/index.css
index d0c833257..b5463a5b0 100755
--- a/src/web/stylesheets/index.css
+++ b/src/web/stylesheets/index.css
@@ -19,7 +19,6 @@
 @import "./preloader.css";
 
 /* Components */
-@import "./components/_alert.css";
 @import "./components/_button.css";
 @import "./components/_list.css";
 @import "./components/_operation.css";
diff --git a/src/web/stylesheets/index.js b/src/web/stylesheets/index.js
index 860538b54..389722814 100755
--- a/src/web/stylesheets/index.js
+++ b/src/web/stylesheets/index.js
@@ -10,8 +10,7 @@
 import "highlight.js/styles/vs.css";
 
 /* Frameworks */
-import "./vendors/bootstrap.less";
-import "bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
+import "./vendors/bootstrap.scss";
 import "bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
 
 /* CyberChef styles */
diff --git a/src/web/stylesheets/layout/_banner.css b/src/web/stylesheets/layout/_banner.css
index cb902157d..a5e202ac4 100755
--- a/src/web/stylesheets/layout/_banner.css
+++ b/src/web/stylesheets/layout/_banner.css
@@ -14,11 +14,10 @@
     border-bottom: 1px solid var(--primary-border-colour);
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);
+    margin: 0;
 }
 
-#banner img {
-    margin-bottom: 2px;
-    margin-left: 8px;
+#banner i {
+    vertical-align: middle;
     padding-right: 10px;
 }
-
diff --git a/src/web/stylesheets/layout/_controls.css b/src/web/stylesheets/layout/_controls.css
index 204964259..b181cb259 100755
--- a/src/web/stylesheets/layout/_controls.css
+++ b/src/web/stylesheets/layout/_controls.css
@@ -7,8 +7,7 @@
  */
 
 :root {
-    --controls-height: 120px;
-    --controls-division: 65%;
+    --controls-height: 75px;
 }
 
 #controls {
@@ -17,49 +16,30 @@
     height: var(--controls-height);
     bottom: 0;
     padding: 10px;
+    padding-top: 12px;
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
 }
 
-#operational-controls {
-    width: var(--controls-division);
-    float: left;
+#auto-bake-label {
+    display: inline-block;
+    width: 100px;
+    padding: 0;
+    margin: 0;
     text-align: center;
+    color: var(--primary-font-colour);
+    font-size: 14px;
+    cursor: pointer;
 }
 
-#bake-group {
-    display: table;
-    width: 100%;
+#auto-bake-label .checkbox-decorator {
+    position: relative;
 }
 
 #bake {
-    display: table-cell;
-    width: 100%;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-#auto-bake-label {
-    display: table-cell;
-    padding: 1px;
-    line-height: 1.35;
-    width: 60px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: 1px solid transparent;
-}
-
-#auto-bake-label:hover {
-    border-left-color: var(--btn-success-hover-border-colour);
-}
-
-#auto-bake-label div {
-    font-size: 10px;
-    padding: 2px;
+    box-shadow: none;
 }
 
-#extra-controls {
-    float: right;
-    width: calc(100% - var(--controls-division));
-    padding-left: 10px;
+#controls .btn {
+    border-radius: 30px;
 }
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 1e58a7e54..5b0433f69 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -32,7 +32,7 @@
 
 .textarea-wrapper {
     position: absolute;
-    top: 43px;
+    top: var(--title-height);
     bottom: 0;
     width: 100%;
     overflow: hidden;
@@ -103,18 +103,13 @@
     display: none;
 }
 
-.io-btn-group {
-    float: right;
-    margin-top: -4px;
-}
-
 .io-info {
     margin-right: 20px;
-    margin-top: -4px;
+    margin-top: 1px;
     float: right;
     height: 30px;
     text-align: right;
-    line-height: 10px;
+    line-height: 12px;
     font-family: var(--fixed-width-font-family);
     font-weight: normal;
     font-size: 8pt;
@@ -131,20 +126,47 @@
 }
 
 #stale-indicator {
-    visibility: hidden;
-    transition: all 0.3s;
+    opacity: 1;
+    visibility: visibile;
+    transition: margin 0s, opacity 0.3s;
     margin-left: 5px;
-    font-size: larger;
-    font-weight: normal;
     cursor: help;
 }
 
+#stale-indicator i {
+    vertical-align: middle;
+    margin-bottom: 5px;
+}
+
 #output-loader .loading-msg {
     opacity: 1;
     font-family: var(--primary-font-family);
     line-height: var(--primary-line-height);
     color: var(--primary-font-colour);
     top: 50%;
-    
+
     transition: all 0.5s ease;
 }
+
+#magic {
+    opacity: 1;
+    visibility: visibile;
+    transition: margin 0s 0.3s, opacity 0.3s 0.3s, visibility 0.3s 0.3s;
+    margin-left: 5px;
+    margin-bottom: 5px;
+}
+
+#magic.hidden,
+#stale-indicator.hidden {
+    visibility: hidden;
+    transition: opacity 0.3s, margin 0.3s 0.3s, visibility 0.3s;
+    opacity: 0;
+}
+
+#magic.hidden {
+    margin-left: -32px;
+}
+
+#magic svg path {
+    fill: var(--primary-font-colour);
+}
diff --git a/src/web/stylesheets/layout/_modals.css b/src/web/stylesheets/layout/_modals.css
index ac3f5e045..a49c579d2 100755
--- a/src/web/stylesheets/layout/_modals.css
+++ b/src/web/stylesheets/layout/_modals.css
@@ -6,34 +6,12 @@
  * @license Apache-2.0
  */
 
-.option-item .bootstrap-switch {
-    margin: 15px 10px;
+.modal-content {
+    background-color: var(--primary-background-colour);
 }
 
-.option-item button {
-    margin: 10px;
-}
-
-.option-item label {
-    font-weight: normal;
-}
-
-.option-item input[type=number] {
-    margin: 15px 10px;
-    width: 80px;
-    height: 28px;
-    padding: 3px 10px;
-    vertical-align: middle;
-    font-size: calc(var(--arg-input-font-size) - 1px);
-    line-height: var(--arg-input-line-height);
-    color: var(--arg-font-colour);
-    background-color: var(--arg-background);
-    border: 1px solid var(--primary-border-colour);
-}
-
-.option-item select {
-    margin: 10px;
-    display: inline-block;
+.option-item {
+    margin-bottom: 20px;
 }
 
 #edit-favourites-list {
@@ -60,11 +38,15 @@
     margin: 10px 0 20px 20px;
 }
 
+#save-link-group {
+    padding-top: 0;
+}
+
 .save-link-options {
     float: right;
 }
 
-.save-link-options input{
+.save-link-options label {
     margin-left: 10px;
 }
 
@@ -84,7 +66,14 @@
 }
 
 #save-texts textarea {
-    border-top: none;
-    box-shadow: none;
     height: 200px;
 }
+
+#faqs a.btn {
+    text-transform: unset;
+}
+
+#faqs > div {
+    padding: 20px;
+    border-left: 2px solid var(--primary-border-colour);
+}
diff --git a/src/web/stylesheets/layout/_operations.css b/src/web/stylesheets/layout/_operations.css
index cb8c395bb..e5e4c887e 100755
--- a/src/web/stylesheets/layout/_operations.css
+++ b/src/web/stylesheets/layout/_operations.css
@@ -13,15 +13,16 @@
 }
 
 #search {
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid var(--primary-border-colour);
-    color: var(--primary-font-colour);
+    padding-left: 10px;
+    padding-right: 10px;
+    background-image:
+        linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
+        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
 }
 
 #edit-favourites {
     float: right;
-    margin-top: -5px;
+    margin-top: -7px;
 }
 
 .favourites-hover {
@@ -30,3 +31,13 @@
     border: 2px dashed var(--rec-list-operation-font-colour) !important;
     padding: 8px 8px 9px 8px;
 }
+
+#categories a {
+    color: #1976d2;
+    cursor: pointer;
+}
+
+#categories a:hover,
+.op-list .operation:hover {
+    filter: brightness(98%);
+}
diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css
index 9aa9acdc4..5d6bd3e89 100755
--- a/src/web/stylesheets/themes/_classic.css
+++ b/src/web/stylesheets/themes/_classic.css
@@ -8,12 +8,14 @@
 
 :root,
 :root.classic {
-    --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+        Roboto, "Helvetica Neue", Arial, sans-serif;
     --primary-font-colour: #333;
     --primary-font-size: 14px;
     --primary-line-height: 20px;
 
-    --fixed-width-font-family: "Consolas", monospace;
+    --fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
     --fixed-width-font-colour: inherit;
     --fixed-width-font-size: inherit;
 
@@ -28,6 +30,7 @@
 
     --title-colour: #424242;
     --title-weight: bold;
+    --title-size: 16px;
     --title-background-colour: #fafafa;
 
     --banner-font-colour: #468847;
@@ -41,7 +44,7 @@
 
     --rec-list-operation-font-colour: #468847;
     --rec-list-operation-bg-colour: #dff0d8;
-    --rec-list-operation-border-colour: #d6e9c6;
+    --rec-list-operation-border-colour: #d3e8c0;
 
     --selected-operation-font-color: #c09853;
     --selected-operation-bg-colour: #fcf8e3;
@@ -65,14 +68,12 @@
 
 
     /* Operation arguments */
-    --arg-title-font-weight: bold;
-    --arg-input-height: 34px;
-    --arg-input-line-height: 20px;
-    --arg-input-font-size: 15px;
+    --op-title-font-weight: bold;
     --arg-font-colour: #424242;
     --arg-background: #fff;
     --arg-border-colour: #ddd;
     --arg-disabled-background: #eee;
+    --arg-label-colour: #388e3c;
 
 
     /* Buttons */
diff --git a/src/web/stylesheets/themes/_dark.css b/src/web/stylesheets/themes/_dark.css
index e1702f5c1..62d91808b 100755
--- a/src/web/stylesheets/themes/_dark.css
+++ b/src/web/stylesheets/themes/_dark.css
@@ -64,14 +64,12 @@
 
 
     /* Operation arguments */
-    --arg-title-font-weight: bold;
-    --arg-input-height: 34px;
-    --arg-input-line-height: 20px;
-    --arg-input-font-size: 15px;
+    --op-title-font-weight: bold;
     --arg-font-colour: #bbb;
     --arg-background: #3c3c3c;
     --arg-border-colour: #3c3c3c;
     --arg-disabled-background: #4f4f4f;
+    --arg-label-colour: rgb(25, 118, 210);
 
 
     /* Buttons */
diff --git a/src/web/stylesheets/themes/_geocities.css b/src/web/stylesheets/themes/_geocities.css
index b52d8dfeb..12936e21f 100755
--- a/src/web/stylesheets/themes/_geocities.css
+++ b/src/web/stylesheets/themes/_geocities.css
@@ -64,14 +64,12 @@
 
 
     /* Operation arguments */
-    --arg-title-font-weight: bold;
-    --arg-input-height: 34px;
-    --arg-input-line-height: 20px;
-    --arg-input-font-size: 15px;
+    --op-title-font-weight: bold;
     --arg-font-colour: white;
     --arg-background: black;
     --arg-border-colour: lime;
     --arg-disabled-background: grey;
+    --arg-label-colour: red;
 
 
     /* Buttons */
diff --git a/src/web/stylesheets/utils/_general.css b/src/web/stylesheets/utils/_general.css
index 0b906424b..5c899769e 100755
--- a/src/web/stylesheets/utils/_general.css
+++ b/src/web/stylesheets/utils/_general.css
@@ -20,6 +20,10 @@ body {
     color: var(--subtext-font-colour);
 }
 
+.data-text {
+    font-family: var(--fixed-width-font-family);
+}
+
 .word-wrap {
     white-space: pre !important;
     word-wrap: normal !important;
@@ -29,6 +33,7 @@ body {
 .clearfix {
     clear: both;
     height: 0;
+    line-height: 0;
 }
 
 .blur {
@@ -36,7 +41,7 @@ body {
     text-shadow: rgba(0, 0, 0, 0.95) 0 0 10px !important;
 }
 
-.no-select { 
+.no-select {
     user-select: none;
 }
 
diff --git a/src/web/stylesheets/utils/_overrides.css b/src/web/stylesheets/utils/_overrides.css
index 43c5b1d21..014da99ad 100755
--- a/src/web/stylesheets/utils/_overrides.css
+++ b/src/web/stylesheets/utils/_overrides.css
@@ -8,98 +8,104 @@
 
 /* Bootstrap */
 
+/* fallback */
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url("../static/fonts/MaterialIcons-Regular.woff2") format('woff2');
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+.form-group {
+    margin-bottom: 0;
+}
+
+
 button,
 a:focus {
     outline: none;
 }
 
-.btn-default {
+.btn.btn-raised.btn-secondary {
     color: var(--btn-default-font-colour);
     background-color: var(--btn-default-bg-colour);
     border-color: var(--btn-default-border-colour);
 }
 
-.btn-default:hover,
-.btn-default:active,
-.btn-default:hover:active,
-.open>.dropdown-toggle.btn-default {
+.btn.btn-raised.btn-secondary:hover,
+.btn.btn-raised.btn-secondary:active,
+.btn.btn-raised.btn-secondary:hover:active {
     color: var(--btn-default-hover-font-colour);
     background-color: var(--btn-default-hover-bg-colour);
     border-color: var(--btn-default-hover-border-colour);
 }
 
-.btn-default:focus,
-.open>.dropdown-toggle.btn-default:hover,
-.open>.dropdown-toggle.btn-default:focus {
+.btn.btn-raised.btn-secondary:focus {
     color: var(--btn-default-font-colour);
     background-color: var(--btn-default-bg-colour);
     border-color: var(--btn-default-hover-border-colour);
 }
 
-.btn-default[disabled]:hover {
+.btn.btn-raised.btn-secondary[disabled]:hover {
     background-color: var(--primary-background-colour);
     border-color: var(--primary-border-colour);
 }
 
-.btn-success {
+.btn.btn-raised.btn-success {
     color: var(--btn-success-font-colour);
     background-color: var(--btn-success-bg-colour);
     border-color: var(--btn-success-border-colour);
 }
 
-.btn-success:hover,
-.btn-success:active,
-.btn-success:focus,
-.btn-success:hover:active {
+.btn.btn-raised.btn-success:hover,
+.btn.btn-raised.btn-success:active,
+.btn.btn-raised.btn-success:focus,
+.btn.btn-raised.btn-success:hover:active {
     color: var(--btn-success-hover-font-colour);
     background-color: var(--btn-success-hover-bg-colour);
     border-color: var(--btn-success-hover-border-colour);
 }
 
-.btn,
-.btn-lg,
-.nav-tabs>li>a,
-.form-control,
-.popover,
-.alert,
-.panel,
-.modal-content,
-.tooltip-inner,
-.dropdown-menu,
-.input-group-addon {
-    border-radius: 0 !important;
-}
-
-.btn.dropdown-toggle {
-    height: 34px;
-}
-
 input[type="search"] {
-    -webkit-appearance: searchfield;
-    box-shadow: none;
+    appearance: searchfield;
 }
 
 input[type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: searchfield-cancel-button;
-}
-
-.modal {
-    overflow-y: auto;
+    appearance: searchfield-cancel-button;
 }
 
-.modal-content {
-    background-color: var(--primary-background-colour);
+select.form-control:not([size]):not([multiple]), select.custom-file-control:not([size]):not([multiple]) {
+    height: unset !important;
 }
 
-.modal-header,
-.modal-footer {
-    border-color: var(--primary-border-colour);
+.checkbox label,
+.checkbox-inline,
+.is-focused .checkbox-inline,
+.is-focused .checkbox-inline:hover,
+[class^="bmd-label"],
+.form-control,
+.is-focused .form-control {
+    color: var(--primary-font-colour);
 }
 
 .form-control {
-    background-color: transparent;
-    border-color: var(--primary-border-colour);
-    color: var(--primary-font-colour);
+    background-image: linear-gradient(to top, rgb(25, 118, 210) 2px, rgba(25, 118, 210, 0) 2px), linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
 }
 
 code {
@@ -144,22 +150,27 @@ optgroup {
     border-color: var(--popover-border-colour);
 }
 
-.popover-content {
-    max-height: 90vh;
+.popover-body {
+    max-height: 95vh;
     overflow-y: auto;
+    color: var(--primary-font-colour);
 }
 
-.popover.right>.arrow {
+.bs-popover-right>.arrow {
     border-right-color: var(--popover-border-colour);
 }
 
-.popover.right>.arrow:after {
+.bs-popover-right>.arrow:after {
     border-right-color: var(--popover-background);
 }
 
-.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
-    background-color: var(--primary-background-colour);
-    border-color: var(--primary-border-colour);
+.nav-tabs .nav-link {
+    color: var(--subtext-font-colour);
+}
+
+.nav-tabs>li>a.nav-link.active, .nav-tabs>li>a.nav-link.active:focus, .nav-tabs>li>a.nav-link.active:hover {
+    background-color: var(--secondary-background-colour);
+    border-color: var(--secondary-border-colour);
     border-bottom-color: transparent;
     color: var(--primary-font-colour);
 }
@@ -168,11 +179,11 @@ optgroup {
     border-color: var(--primary-border-colour);
 }
 
-.nav>li>a:focus, .nav>li>a:hover {
+.nav a.nav-link:focus, .nav a.nav-link:hover {
     background-color: var(--secondary-border-colour);
 }
 
-.nav-tabs>li>a:hover {
+.nav-tabs a.nav-link:hover {
     border-color: var(--secondary-border-colour) var(--secondary-border-colour) var(--primary-border-colour);
 }
 
@@ -180,11 +191,11 @@ optgroup {
     background-color: var(--primary-background-colour);
 }
 
-.dropdown-menu>li>a {
+.dropdown-menu a {
     color: var(--primary-font-colour);
 }
 
-.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
+.dropdown-menu a:focus, .dropdown-menu a:hover {
     background-color: var(--secondary-background-colour);
     color: var(--primary-font-colour);
 }
@@ -199,30 +210,6 @@ optgroup {
 }
 
 
-/* Bootstrap-switch */
-
-.bootstrap-switch,
-.bootstrap-switch-container,
-.bootstrap-switch-handle-on,
-.bootstrap-switch-handle-off,
-.bootstrap-switch-label {
-    border-radius: 0 !important;
-}
-
-.bootstrap-switch .bootstrap-switch-label {
-    background-color: transparent;
-}
-
-.bootstrap-switch {
-    border-color: var(--primary-border-colour);
-}
-
-.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
-    background-color: var(--primary-border-colour);
-    color: var(--primary-font-colour);
-}
-
-
 /* Sortable */
 
 .sortable-ghost {
diff --git a/src/web/stylesheets/vendors/bootstrap.less b/src/web/stylesheets/vendors/bootstrap.less
deleted file mode 100755
index 7cb124e5c..000000000
--- a/src/web/stylesheets/vendors/bootstrap.less
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Bootstrap imports
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-// Core variables and mixins
-@import "~bootstrap/less/variables.less";
-@import "~bootstrap/less/mixins.less";
-
-// Reset and dependencies
-@import "~bootstrap/less/normalize.less";
-@import "~bootstrap/less/print.less";
-// @import "~bootstrap/less/glyphicons.less";
-
-// Core CSS
-@import "~bootstrap/less/scaffolding.less";
-@import "~bootstrap/less/type.less";
-@import "~bootstrap/less/code.less";
-@import "~bootstrap/less/grid.less";
-@import "~bootstrap/less/tables.less";
-@import "~bootstrap/less/forms.less";
-@import "~bootstrap/less/buttons.less";
-
-// Components
-@import "~bootstrap/less/component-animations.less";
-@import "~bootstrap/less/dropdowns.less";
-@import "~bootstrap/less/button-groups.less";
-@import "~bootstrap/less/input-groups.less";
-@import "~bootstrap/less/navs.less";
-// @import "~bootstrap/less/navbar.less";
-// @import "~bootstrap/less/breadcrumbs.less";
-// @import "~bootstrap/less/pagination.less";
-// @import "~bootstrap/less/pager.less";
-@import "~bootstrap/less/labels.less";
-// @import "~bootstrap/less/badges.less";
-// @import "~bootstrap/less/jumbotron.less";
-// @import "~bootstrap/less/thumbnails.less";
-@import "~bootstrap/less/alerts.less";
-@import "~bootstrap/less/progress-bars.less";
-// @import "~bootstrap/less/media.less";
-@import "~bootstrap/less/list-group.less";
-@import "~bootstrap/less/panels.less";
-// @import "~bootstrap/less/responsive-embed.less";
-// @import "~bootstrap/less/wells.less";
-@import "~bootstrap/less/close.less";
-
-// Components w/ JavaScript
-@import "~bootstrap/less/modals.less";
-@import "~bootstrap/less/tooltip.less";
-@import "~bootstrap/less/popovers.less";
-// @import "~bootstrap/less/carousel.less";
-
-// Utility classes
-@import "~bootstrap/less/utilities.less";
-// @import "~bootstrap/less/responsive-utilities.less";
diff --git a/src/web/stylesheets/vendors/bootstrap.scss b/src/web/stylesheets/vendors/bootstrap.scss
new file mode 100644
index 000000000..725e118d6
--- /dev/null
+++ b/src/web/stylesheets/vendors/bootstrap.scss
@@ -0,0 +1,23 @@
+/**
+ * Bootstrap Material Design with overrides
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2018
+ * @license Apache-2.0
+ */
+
+@import "~bootstrap-material-design/scss/variables/colors";
+
+$theme-colors: (
+    primary: $blue-700,
+    success: $green,
+    info: $light-blue,
+    warning: $deep-orange,
+    danger: $red,
+    light: $grey-100,
+    dark: $grey-800
+);
+
+$bmd-form-line-height: 1.25;
+
+@import "~bootstrap-material-design/scss/core";
diff --git a/webpack.config.js b/webpack.config.js
index ae4ec119a..89a36f698 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -61,22 +61,25 @@ module.exports = {
                 test: /forge.min.js$/,
                 loader: "imports-loader?jQuery=>null"
             },
+            {
+                test: /bootstrap-material-design/,
+                loader: "imports-loader?Popper=popper.js/dist/umd/popper.js"
+            },
             {
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
                     use: [
-                        { loader: "css-loader?minimize" },
+                        { loader: "css-loader" },
                         { loader: "postcss-loader" },
                     ]
                 })
             },
             {
-                test: /\.less$/,
+                test: /\.scss$/,
                 use: ExtractTextPlugin.extract({
                     use: [
-                        { loader: "css-loader?minimize" },
-                        { loader: "postcss-loader" },
-                        { loader: "less-loader" }
+                        { loader: "css-loader" },
+                        { loader: "sass-loader" }
                     ]
                 })
             },