diff --git a/gulp/gulp-build.js b/gulp/gulp-build.js
index 30b0898434..6218bca763 100644
--- a/gulp/gulp-build.js
+++ b/gulp/gulp-build.js
@@ -25,7 +25,7 @@ gulp.task('build:common', () => {
 
 gulp.task('build:server', ['build:src', 'build:common']);
 
-gulp.task('build:dev', ['browserify', 'prepare:staticNewStuff', 'semantic-ui'], (done) => {
+gulp.task('build:dev', ['browserify', 'prepare:staticNewStuff'], (done) => {
   gulp.start('grunt-build:dev', done);
 });
 
@@ -33,7 +33,7 @@ gulp.task('build:dev:watch', ['build:dev'], () => {
   gulp.watch(['website/client-old/**/*.styl', 'website/common/script/*']);
 });
 
-gulp.task('build:prod', ['browserify', 'build:server', 'prepare:staticNewStuff', 'semantic-ui'], (done) => {
+gulp.task('build:prod', ['browserify', 'build:server', 'prepare:staticNewStuff'], (done) => {
   runSequence(
     'grunt-build:prod',
     'apidoc',
diff --git a/gulp/gulp-semanticui.js b/gulp/gulp-semanticui.js
deleted file mode 100644
index ad0570351f..0000000000
--- a/gulp/gulp-semanticui.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import gulp from 'gulp';
-import fs from 'fs';
-
-// Make semantic-ui-less work with a theme in a different folder
-// Code taken from https://www.artembutusov.com/webpack-semantic-ui/
-
-// Relative to node_modules/semantic-ui-less
-const SEMANTIC_THEME_PATH = '../../website/client/assets/less/semantic-ui/theme.config';
-
-// fix well known bug with default distribution
-function fixFontPath (filename) {
-  return new Promise((resolve, reject) => {
-    fs.readFile(filename, 'utf8', (err, content) => {
-      if (err) return reject(err);
-
-      let newContent = content.replace(
-        '@fontPath  : \'../../themes/',
-        '@fontPath  : \'../../../themes/'
-      );
-
-      fs.writeFile(filename, newContent, 'utf8', (err1) => {
-        if (err) return reject(err1);
-        resolve();
-      });
-    });
-  });
-}
-
-gulp.task('semantic-ui', (done) => {
-  // relocate default config
-  fs.writeFile(
-    'node_modules/semantic-ui-less/theme.config',
-    `@import '${SEMANTIC_THEME_PATH}';\n`,
-    'utf8',
-    (err) => {
-      if (err) return done(err);
-
-      fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables')
-        .then(() => done())
-        .catch(done);
-    }
-  );
-});
\ No newline at end of file
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 4a51bbbe85..da7eb9042d 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -468,6 +468,11 @@
       "resolved": "https://registry.npmjs.org/async-each-series/-/async-each-series-1.1.0.tgz",
       "optional": true
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "from": "async-foreach@>=0.1.3 <0.2.0",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz"
+    },
     "asynckit": {
       "version": "0.4.0",
       "from": "asynckit@>=0.4.0 <0.5.0",
@@ -986,6 +991,11 @@
       "from": "boom@>=2.0.0 <3.0.0",
       "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz"
     },
+    "bootstrap": {
+      "version": "4.0.0-alpha.6",
+      "from": "bootstrap@4.0.0-alpha.6",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz"
+    },
     "bower": {
       "version": "1.3.12",
       "from": "bower@>=1.3.12 <1.4.0",
@@ -1881,6 +1891,11 @@
       "from": "clone@>=1.0.2 <2.0.0",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz"
     },
+    "clone-deep": {
+      "version": "0.2.4",
+      "from": "clone-deep@>=0.2.4 <0.3.0",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz"
+    },
     "clone-stats": {
       "version": "0.0.1",
       "from": "clone-stats@>=0.0.1 <0.0.2",
@@ -6405,6 +6420,11 @@
         }
       }
     },
+    "in-publish": {
+      "version": "2.0.0",
+      "from": "in-publish@>=2.0.0 <3.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz"
+    },
     "indent-string": {
       "version": "2.1.0",
       "from": "indent-string@>=2.1.0 <3.0.0",
@@ -6746,6 +6766,18 @@
       "from": "is-plain-obj@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
     },
+    "is-plain-object": {
+      "version": "2.0.1",
+      "from": "is-plain-object@>=2.0.1 <3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.1.tgz",
+      "dependencies": {
+        "isobject": {
+          "version": "1.0.2",
+          "from": "isobject@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-1.0.2.tgz"
+        }
+      }
+    },
     "is-png": {
       "version": "1.0.0",
       "from": "is-png@>=1.0.0 <2.0.0",
@@ -7686,36 +7718,6 @@
         }
       }
     },
-    "less": {
-      "version": "2.7.2",
-      "from": "less@>=2.7.1 <3.0.0",
-      "resolved": "https://registry.npmjs.org/less/-/less-2.7.2.tgz",
-      "dependencies": {
-        "asap": {
-          "version": "2.0.5",
-          "from": "asap@>=2.0.3 <2.1.0",
-          "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.5.tgz",
-          "optional": true
-        },
-        "image-size": {
-          "version": "0.5.1",
-          "from": "image-size@>=0.5.0 <0.6.0",
-          "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.1.tgz",
-          "optional": true
-        },
-        "promise": {
-          "version": "7.1.1",
-          "from": "promise@>=7.1.1 <8.0.0",
-          "resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz",
-          "optional": true
-        }
-      }
-    },
-    "less-loader": {
-      "version": "2.2.3",
-      "from": "less-loader@>=2.2.3 <3.0.0",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-2.2.3.tgz"
-    },
     "levn": {
       "version": "0.3.0",
       "from": "levn@>=0.3.0 <0.4.0",
@@ -7951,6 +7953,11 @@
       "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-3.0.3.tgz",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "from": "lodash.clonedeep@>=4.3.2 <5.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz"
+    },
     "lodash.create": {
       "version": "3.1.1",
       "from": "lodash.create@>=3.1.1 <4.0.0",
@@ -8038,6 +8045,11 @@
       "from": "lodash.memoize@>=3.0.3 <3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-3.0.4.tgz"
     },
+    "lodash.mergewith": {
+      "version": "4.6.0",
+      "from": "lodash.mergewith@>=4.6.0 <5.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz"
+    },
     "lodash.now": {
       "version": "2.4.1",
       "from": "lodash.now@>=2.4.1 <2.5.0",
@@ -8053,6 +8065,11 @@
       "from": "lodash.restparam@>=3.0.0 <4.0.0",
       "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz"
     },
+    "lodash.tail": {
+      "version": "4.1.1",
+      "from": "lodash.tail@>=4.1.1 <5.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz"
+    },
     "lodash.template": {
       "version": "3.6.2",
       "from": "lodash.template@>=3.0.0 <4.0.0",
@@ -8377,6 +8394,18 @@
       "from": "minimist@0.0.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz"
     },
+    "mixin-object": {
+      "version": "2.0.1",
+      "from": "mixin-object@>=2.0.1 <3.0.0",
+      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
+      "dependencies": {
+        "for-in": {
+          "version": "0.1.8",
+          "from": "for-in@>=0.1.3 <0.2.0",
+          "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz"
+        }
+      }
+    },
     "mkdirp": {
       "version": "0.5.1",
       "from": "mkdirp@>=0.5.1 <0.6.0",
@@ -8877,6 +8906,18 @@
         }
       }
     },
+    "node-gyp": {
+      "version": "3.5.0",
+      "from": "node-gyp@>=3.3.1 <4.0.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.5.0.tgz",
+      "dependencies": {
+        "glob": {
+          "version": "7.1.1",
+          "from": "glob@^7.0.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
+        }
+      }
+    },
     "node-libs-browser": {
       "version": "2.0.0",
       "from": "node-libs-browser@>=2.0.0 <3.0.0",
@@ -8958,6 +8999,53 @@
         }
       }
     },
+    "node-sass": {
+      "version": "4.5.0",
+      "from": "node-sass@latest",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.5.0.tgz",
+      "dependencies": {
+        "cross-spawn": {
+          "version": "3.0.1",
+          "from": "cross-spawn@>=3.0.0 <4.0.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz"
+        },
+        "gaze": {
+          "version": "1.1.2",
+          "from": "gaze@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz"
+        },
+        "glob": {
+          "version": "7.1.1",
+          "from": "glob@>=7.0.3 <8.0.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
+        },
+        "globule": {
+          "version": "1.1.0",
+          "from": "globule@>=1.0.0 <2.0.0",
+          "resolved": "https://registry.npmjs.org/globule/-/globule-1.1.0.tgz"
+        },
+        "lodash": {
+          "version": "4.16.6",
+          "from": "lodash@>=4.16.4 <4.17.0",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.16.6.tgz"
+        },
+        "lodash.assign": {
+          "version": "4.2.0",
+          "from": "lodash.assign@>=4.2.0 <5.0.0",
+          "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz"
+        },
+        "lru-cache": {
+          "version": "4.0.2",
+          "from": "lru-cache@>=4.0.1 <5.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.0.2.tgz"
+        },
+        "which": {
+          "version": "1.2.12",
+          "from": "which@>=1.2.9 <2.0.0",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.2.12.tgz"
+        }
+      }
+    },
     "node-status-codes": {
       "version": "1.0.0",
       "from": "node-status-codes@>=1.0.0 <2.0.0",
@@ -10836,6 +10924,65 @@
       "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.1.2.tgz",
       "dev": true
     },
+    "sass-graph": {
+      "version": "2.1.2",
+      "from": "sass-graph@>=2.1.1 <3.0.0",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.1.2.tgz",
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "from": "camelcase@>=3.0.0 <4.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz"
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "from": "cliui@>=3.2.0 <4.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz"
+        },
+        "glob": {
+          "version": "7.1.1",
+          "from": "glob@^7.0.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz"
+        },
+        "lodash.assign": {
+          "version": "4.2.0",
+          "from": "lodash.assign@^4.0.3",
+          "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz"
+        },
+        "window-size": {
+          "version": "0.2.0",
+          "from": "window-size@>=0.2.0 <0.3.0",
+          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.2.0.tgz"
+        },
+        "yargs": {
+          "version": "4.8.1",
+          "from": "yargs@>=4.7.1 <5.0.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-4.8.1.tgz"
+        },
+        "yargs-parser": {
+          "version": "2.4.1",
+          "from": "yargs-parser@>=2.4.1 <3.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-2.4.1.tgz"
+        }
+      }
+    },
+    "sass-loader": {
+      "version": "6.0.2",
+      "from": "sass-loader@latest",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-6.0.2.tgz",
+      "dependencies": {
+        "async": {
+          "version": "2.1.5",
+          "from": "async@>=2.1.5 <3.0.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.1.5.tgz"
+        },
+        "loader-utils": {
+          "version": "1.0.2",
+          "from": "loader-utils@>=1.0.1 <2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.0.2.tgz"
+        }
+      }
+    },
     "saucelabs": {
       "version": "1.0.1",
       "from": "saucelabs@>=1.0.1 <1.1.0",
@@ -10913,11 +11060,6 @@
         }
       }
     },
-    "semantic-ui-less": {
-      "version": "2.2.9",
-      "from": "semantic-ui-less@>=2.2.4 <2.3.0",
-      "resolved": "https://registry.npmjs.org/semantic-ui-less/-/semantic-ui-less-2.2.9.tgz"
-    },
     "semver": {
       "version": "5.0.3",
       "from": "semver@>=5.0.1 <5.1.0",
@@ -11041,6 +11183,23 @@
       "from": "sha.js@>=2.3.6 <3.0.0",
       "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.8.tgz"
     },
+    "shallow-clone": {
+      "version": "0.1.2",
+      "from": "shallow-clone@>=0.1.2 <0.2.0",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",
+      "dependencies": {
+        "kind-of": {
+          "version": "2.0.1",
+          "from": "kind-of@>=2.0.1 <3.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz"
+        },
+        "lazy-cache": {
+          "version": "0.2.7",
+          "from": "lazy-cache@>=0.2.3 <0.3.0",
+          "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz"
+        }
+      }
+    },
     "shallow-copy": {
       "version": "0.0.1",
       "from": "shallow-copy@>=0.0.1 <0.1.0",
@@ -11473,6 +11632,11 @@
       "from": "statuses@>=1.3.1 <2.0.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz"
     },
+    "stdout-stream": {
+      "version": "1.4.0",
+      "from": "stdout-stream@>=1.4.0 <2.0.0",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz"
+    },
     "stream-browserify": {
       "version": "2.0.1",
       "from": "stream-browserify@>=2.0.0 <3.0.0",
@@ -11883,6 +12047,11 @@
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.0.0.tgz",
       "dev": true
     },
+    "tether": {
+      "version": "1.4.0",
+      "from": "tether@>=1.4.0 <2.0.0",
+      "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.0.tgz"
+    },
     "text-table": {
       "version": "0.2.0",
       "from": "text-table@>=0.2.0 <0.3.0",
diff --git a/package.json b/package.json
index c11718104e..115ca58364 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "bcrypt": "^1.0.2",
     "bluebird": "^3.3.5",
     "body-parser": "^1.15.0",
+    "bootstrap": "^4.0.0-alpha.6",
     "bower": "~1.3.12",
     "browserify": "~12.0.1",
     "compression": "^1.6.1",
@@ -70,8 +71,6 @@
     "jade": "~1.11.0",
     "jquery": "^3.1.1",
     "js2xmlparser": "~1.0.0",
-    "less": "^2.7.1",
-    "less-loader": "^2.2.3",
     "lodash": "^4.17.4",
     "merge-stream": "^1.0.0",
     "method-override": "^2.3.5",
@@ -83,6 +82,7 @@
     "nconf": "~0.8.2",
     "nib": "^1.1.0",
     "node-gcm": "^0.14.4",
+    "node-sass": "^4.5.0",
     "nodemailer": "^2.3.2",
     "object-path": "^0.9.2",
     "ora": "^1.1.0",
@@ -102,7 +102,7 @@
     "rimraf": "^2.4.3",
     "run-sequence": "^1.1.4",
     "s3-upload-stream": "^1.0.6",
-    "semantic-ui-less": "~2.2.4",
+    "sass-loader": "^6.0.2",
     "serve-favicon": "^2.3.0",
     "shelljs": "^0.7.6",
     "stripe": "^4.2.0",
diff --git a/website/client/app.vue b/website/client/app.vue
index 70e1378f35..7697892f88 100644
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -3,7 +3,7 @@
 <template lang="pug">
 #app
   app-menu
-  .ui.grid.fluid
+  .container-fluid
     app-header
     router-view
 </template>
@@ -21,16 +21,6 @@ export default {
 };
 </script>
 
-<style src="assets/less/semantic-ui/semantic.less" lang="less"></style>
-<style src="assets/less/index.less" lang="less"></style>
-<style src="assets/css/index.css"></style>
-
-<style scoped>
-.ui.fixed.menu + .ui.grid {
-  padding-top: 0px;
-}
-
-.ui.grid {
-  margin-top: 0px;
-}
-</style>
\ No newline at end of file
+<style src="bootstrap/scss/bootstrap.scss" lang="scss"></style>
+<style src="assets/scss/index.scss" lang="scss"></style>
+<style src="assets/css/index.css"></style>
\ No newline at end of file
diff --git a/website/client/assets/less/loading-screen.less b/website/client/assets/less/loading-screen.less
deleted file mode 100644
index 4451c61996..0000000000
--- a/website/client/assets/less/loading-screen.less
+++ /dev/null
@@ -1,4 +0,0 @@
-// Rendered outside Vue
-#loading-screen {
-  height: 100%;
-}
diff --git a/website/client/assets/less/semantic-ui/README.md b/website/client/assets/less/semantic-ui/README.md
deleted file mode 100644
index 0fe6787163..0000000000
--- a/website/client/assets/less/semantic-ui/README.md
+++ /dev/null
@@ -1,109 +0,0 @@
-This folder contains the Semantic UI theme used on the website.
-
-To load a Semantic UI element uncomment it from semantic.less.
-
-The custom theme files are placed under /site.
-
-For each element there's a .variables file that contains variables that are different for our theme and a .overrides file that contains custom CSS properties.
-
-More info on theming can be found at http://semantic-ui.com/usage/theming.html.
-
-The list of files that can be placed under /site is this:
-
-├── collections
-│   ├── breadcrumb.overrides
-│   ├── breadcrumb.variables
-│   ├── form.overrides
-│   ├── form.variables
-│   ├── grid.overrides
-│   ├── grid.variables
-│   ├── menu.overrides
-│   ├── menu.variables
-│   ├── message.overrides
-│   ├── message.variables
-│   ├── table.overrides
-│   └── table.variables
-├── elements
-│   ├── button.overrides
-│   ├── button.variables
-│   ├── container.overrides
-│   ├── container.variables
-│   ├── divider.overrides
-│   ├── divider.variables
-│   ├── flag.overrides
-│   ├── flag.variables
-│   ├── header.overrides
-│   ├── header.variables
-│   ├── icon.overrides
-│   ├── icon.variables
-│   ├── image.overrides
-│   ├── image.variables
-│   ├── input.overrides
-│   ├── input.variables
-│   ├── label.overrides
-│   ├── label.variables
-│   ├── list.overrides
-│   ├── list.variables
-│   ├── loader.overrides
-│   ├── loader.variables
-│   ├── rail.overrides
-│   ├── rail.variables
-│   ├── reveal.overrides
-│   ├── reveal.variables
-│   ├── segment.overrides
-│   ├── segment.variables
-│   ├── step.overrides
-│   └── step.variables
-├── globals
-│   ├── reset.overrides
-│   ├── reset.variables
-│   ├── site.overrides
-│   └── site.variables
-├── modules
-│   ├── accordion.overrides
-│   ├── accordion.variables
-│   ├── chatroom.overrides
-│   ├── chatroom.variables
-│   ├── checkbox.overrides
-│   ├── checkbox.variables
-│   ├── dimmer.overrides
-│   ├── dimmer.variables
-│   ├── dropdown.overrides
-│   ├── dropdown.variables
-│   ├── embed.overrides
-│   ├── embed.variables
-│   ├── modal.overrides
-│   ├── modal.variables
-│   ├── nag.overrides
-│   ├── nag.variables
-│   ├── popup.overrides
-│   ├── popup.variables
-│   ├── progress.overrides
-│   ├── progress.variables
-│   ├── rating.overrides
-│   ├── rating.variables
-│   ├── search.overrides
-│   ├── search.variables
-│   ├── shape.overrides
-│   ├── shape.variables
-│   ├── sidebar.overrides
-│   ├── sidebar.variables
-│   ├── sticky.overrides
-│   ├── sticky.variables
-│   ├── tab.overrides
-│   ├── tab.variables
-│   ├── transition.overrides
-│   └── transition.variables
-└── views
-    ├── ad.overrides
-    ├── ad.variables
-    ├── card.overrides
-    ├── card.variables
-    ├── comment.overrides
-    ├── comment.variables
-    ├── feed.overrides
-    ├── feed.variables
-    ├── item.overrides
-    ├── item.variables
-    ├── statistic.overrides
-    └── statistic.variables
\ No newline at end of file
diff --git a/website/client/assets/less/semantic-ui/semantic.less b/website/client/assets/less/semantic-ui/semantic.less
deleted file mode 100644
index 426fa6d21b..0000000000
--- a/website/client/assets/less/semantic-ui/semantic.less
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
-
-███████╗███████╗███╗   ███╗ █████╗ ███╗   ██╗████████╗██╗ ██████╗    ██╗   ██╗██╗
-██╔════╝██╔════╝████╗ ████║██╔══██╗████╗  ██║╚══██╔══╝██║██╔════╝    ██║   ██║██║
-███████╗█████╗  ██╔████╔██║███████║██╔██╗ ██║   ██║   ██║██║         ██║   ██║██║
-╚════██║██╔══╝  ██║╚██╔╝██║██╔══██║██║╚██╗██║   ██║   ██║██║         ██║   ██║██║
-███████║███████╗██║ ╚═╝ ██║██║  ██║██║ ╚████║   ██║   ██║╚██████╗    ╚██████╔╝██║
-╚══════╝╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝ ╚═════╝     ╚═════╝ ╚═╝
-
-  Import this file into your LESS project to use Semantic UI without build tools
-*/
-
-// Un-comment each module when it gets used
-
-/* Global */
-& { @import "~semantic-ui-less/definitions/globals/reset"; }
-& { @import "~semantic-ui-less/definitions/globals/site"; }
-
-/* Elements */
-& { @import "~semantic-ui-less/definitions/elements/button"; }
-// & { @import "~semantic-ui-less/definitions/elements/container"; }
-// & { @import "~semantic-ui-less/definitions/elements/divider"; }
-// & { @import "~semantic-ui-less/definitions/elements/flag"; }
-& { @import "~semantic-ui-less/definitions/elements/header"; }
-& { @import "~semantic-ui-less/definitions/elements/icon"; }
-// & { @import "~semantic-ui-less/definitions/elements/image"; }
-& { @import "~semantic-ui-less/definitions/elements/input"; }
-// & { @import "~semantic-ui-less/definitions/elements/label"; }
-& { @import "~semantic-ui-less/definitions/elements/list"; }
-// & { @import "~semantic-ui-less/definitions/elements/loader"; }
-// & { @import "~semantic-ui-less/definitions/elements/rail"; }
-// & { @import "~semantic-ui-less/definitions/elements/reveal"; }
-& { @import "~semantic-ui-less/definitions/elements/segment"; }
-// & { @import "~semantic-ui-less/definitions/elements/step"; }
-
-/* Collections */
-// & { @import "~semantic-ui-less/definitions/collections/breadcrumb"; }
-& { @import "~semantic-ui-less/definitions/collections/form"; }
-& { @import "~semantic-ui-less/definitions/collections/grid"; }
-& { @import "~semantic-ui-less/definitions/collections/menu"; }
-// & { @import "~semantic-ui-less/definitions/collections/message"; }
-// & { @import "~semantic-ui-less/definitions/collections/table"; }
-
-/* Views */
-// & { @import "~semantic-ui-less/definitions/views/ad"; }
-& { @import "~semantic-ui-less/definitions/views/card"; }
-& { @import "~semantic-ui-less/definitions/views/comment"; }
-// & { @import "~semantic-ui-less/definitions/views/feed"; }
-// & { @import "~semantic-ui-less/definitions/views/item"; }
-// & { @import "~semantic-ui-less/definitions/views/statistic"; }
-
-/* Modules */
-// & { @import "~semantic-ui-less/definitions/modules/accordion"; }
-& { @import "~semantic-ui-less/definitions/modules/checkbox"; }
-// & { @import "~semantic-ui-less/definitions/modules/dimmer"; }
-& { @import "~semantic-ui-less/definitions/modules/dropdown"; }
-// & { @import "~semantic-ui-less/definitions/modules/embed"; }
-// & { @import "~semantic-ui-less/definitions/modules/modal"; }
-// & { @import "~semantic-ui-less/definitions/modules/nag"; }
-// & { @import "~semantic-ui-less/definitions/modules/popup"; }
-& { @import "~semantic-ui-less/definitions/modules/progress"; }
-// & { @import "~semantic-ui-less/definitions/modules/rating"; }
-// & { @import "~semantic-ui-less/definitions/modules/search"; }
-// & { @import "~semantic-ui-less/definitions/modules/shape"; }
-// & { @import "~semantic-ui-less/definitions/modules/sidebar"; }
-// & { @import "~semantic-ui-less/definitions/modules/sticky"; }
-// & { @import "~semantic-ui-less/definitions/modules/tab"; }
-// & { @import "~semantic-ui-less/definitions/modules/transition"; }
diff --git a/website/client/assets/less/semantic-ui/site/globals/site.overrides b/website/client/assets/less/semantic-ui/site/globals/site.overrides
deleted file mode 100644
index 86297f345e..0000000000
--- a/website/client/assets/less/semantic-ui/site/globals/site.overrides
+++ /dev/null
@@ -1,19 +0,0 @@
-// Add classes for colored text and backgrounds
-// See https://github.com/Semantic-Org/Semantic-UI/issues/1885#issuecomment-226047499
-@colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white;
-
-/* .text {
-  .-(@i: length(@colors)) when (@i > 0) {
-      @c: extract(@colors, @i);
-      &.@{c} { color: @@c }
-      .-((@i - 1));
-  }.-;
-}
-
-.background {
-  .-(@i: length(@colors)) when (@i > 0) {
-      @c: extract(@colors, @i);
-      &.@{c} { background-color: @@c }
-      .-((@i - 1));
-  }.-;
-} */
diff --git a/website/client/assets/less/semantic-ui/site/globals/site.variables b/website/client/assets/less/semantic-ui/site/globals/site.variables
deleted file mode 100644
index 4bf9b5862e..0000000000
--- a/website/client/assets/less/semantic-ui/site/globals/site.variables
+++ /dev/null
@@ -1,13 +0,0 @@
-// Disable google fonts
-@importGoogleFonts: false;
-
-// Set font
-@globalFont: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-@pageFont: @globalFont;
-@headerFont: @globalFont;
-
-// Define custom colors
-@red            : #f74e52;
-@yellow         : #ffbe5d;
-@blue           : #46a7d9;
\ No newline at end of file
diff --git a/website/client/assets/less/semantic-ui/theme.config b/website/client/assets/less/semantic-ui/theme.config
deleted file mode 100644
index ff740a2185..0000000000
--- a/website/client/assets/less/semantic-ui/theme.config
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
-
-████████╗██╗  ██╗███████╗███╗   ███╗███████╗███████╗
-╚══██╔══╝██║  ██║██╔════╝████╗ ████║██╔════╝██╔════╝
-   ██║   ███████║█████╗  ██╔████╔██║█████╗  ███████╗
-   ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██╔══╝  ╚════██║
-   ██║   ██║  ██║███████╗██║ ╚═╝ ██║███████╗███████║
-   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚══════╝╚══════╝
-
-*/
-
-/*******************************
-        Theme Selection
-*******************************/
-
-/* To override a theme for an individual element
-   specify theme name below
-*/
-
-/* Global */
-@site       : 'default';
-@reset      : 'default';
-
-/* Elements */
-@button     : 'default';
-@container  : 'default';
-@divider    : 'default';
-@flag       : 'default';
-@header     : 'default';
-@icon       : 'default';
-@image      : 'default';
-@input      : 'default';
-@label      : 'default';
-@list       : 'default';
-@loader     : 'default';
-@rail       : 'default';
-@reveal     : 'default';
-@segment    : 'default';
-@step       : 'default';
-
-/* Collections */
-@breadcrumb : 'default';
-@form       : 'default';
-@grid       : 'default';
-@menu       : 'default';
-@message    : 'default';
-@table      : 'default';
-
-/* Modules */
-@accordion  : 'default';
-@checkbox   : 'default';
-@dimmer     : 'default';
-@dropdown   : 'default';
-@embed      : 'default';
-@modal      : 'default';
-@nag        : 'default';
-@popup      : 'default';
-@progress   : 'default';
-@rating     : 'default';
-@search     : 'default';
-@shape      : 'default';
-@sidebar    : 'default';
-@sticky     : 'default';
-@tab        : 'default';
-@transition : 'default';
-
-/* Views */
-@ad         : 'default';
-@card       : 'default';
-@comment    : 'default';
-@feed       : 'default';
-@item       : 'default';
-@statistic  : 'default';
-
-/*******************************
-            Folders
-*******************************/
-
-/* Path to theme packages */
-@themesFolder : 'themes';
-
-/* Path to site override folder - relative to node_modules/semantic-ui */
-@siteFolder  : '../../website/client/assets/less/semantic-ui/site';
-
-
-/*******************************
-         Import Theme
-*******************************/
-
-@import "~semantic-ui-less/theme.less";
-
-/* End Config */
\ No newline at end of file
diff --git a/website/client/assets/less/utilities.less b/website/client/assets/less/utilities.less
deleted file mode 100644
index a10cb73b11..0000000000
--- a/website/client/assets/less/utilities.less
+++ /dev/null
@@ -1,7 +0,0 @@
-// Center content inside a container using flexbox
-// SemanticUI's .centered only support grids
-.center-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
\ No newline at end of file
diff --git a/website/client/assets/less/forms.less b/website/client/assets/scss/forms.scss
similarity index 50%
rename from website/client/assets/less/forms.less
rename to website/client/assets/scss/forms.scss
index bd256066ea..59600f07d3 100644
--- a/website/client/assets/less/forms.less
+++ b/website/client/assets/scss/forms.scss
@@ -1,7 +1,3 @@
-.label-primary {
-  font-weight: bold;
-}
-
 .nested-field {
   padding-left: 1.5rem;
 }
\ No newline at end of file
diff --git a/website/client/assets/less/index.less b/website/client/assets/scss/index.scss
similarity index 79%
rename from website/client/assets/less/index.less
rename to website/client/assets/scss/index.scss
index da8c3da799..6289c41dc1 100644
--- a/website/client/assets/less/index.less
+++ b/website/client/assets/scss/index.scss
@@ -1,7 +1,9 @@
 // CSS that doesn't belong to any specific Vue compoennt
-@import './utilities';
 @import './forms';
-@import './loading-screen';
+
+html, body {
+  height: 100%;
+}
 
 body {
   text-rendering: optimizeLegibility;
diff --git a/website/client/components/appHeader.vue b/website/client/components/appHeader.vue
index 97fc354caa..5669ad860e 100644
--- a/website/client/components/appHeader.vue
+++ b/website/client/components/appHeader.vue
@@ -1,32 +1,32 @@
 <template lang="pug">
 #app-header.row
   avatar#header-avatar(:user="$store.state.user")
-  .eight.wide.column
+  div
     span.character-name {{user.profile.name}}
     span.character-level Lvl {{user.stats.lvl}}
-    .progress-container
+    .progress-container.d-flex
       img.icon(src="~assets/header/png/health@3x.png")
-      .ui.progress.red
-        .bar(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
+      .progress
+        .progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
       span {{user.stats.hp | round}} / {{maxHealth}}
-    .progress-container
+    .progress-container.d-flex
       img.icon(src="~assets/header/png/experience@3x.png")
-      .ui.progress.yellow
-        .bar(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
+      .progress
+        .progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
       span {{user.stats.exp | round}} / {{toNextLevel}}
-    .progress-container(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
+    .progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
       img.icon(src="~assets/header/png/magic@3x.png")
-      .ui.progress.blue
-        .bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
+      .progress
+        .progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
       span {{user.stats.mp | round}} / {{maxMP}}
 </template>
 
 <style scoped>
+/* TODO refactor: only partially ported from SemanticUI; */
 #app-header {
-  padding: 0px 0px 0px 20px;
+  padding-left: 14px;
   margin-top: 56px;
   background: #36205d;
-  margin-left: 1rem;
   height: 192px;
   color: #d5c8ff;
 }
@@ -54,8 +54,6 @@
 }
 
 .progress-container {
-  display: flex;
-  align-items: center;
   margin-bottom: 12px;
 }
 
@@ -71,7 +69,7 @@
   margin-right: 10px;
 }
 
-.progress-container > .ui.progress {
+.progress-container > .progress {
   width: 203px;
   margin: 0px;
   border-radius: 0px;
@@ -79,7 +77,7 @@
   background-color: rgba(0, 0, 0, 0.35);
 }
 
-.progress-container > .ui.progress > .bar {
+.progress-container > .progress > .progress-bar {
   border-radius: 0px;
   height: 12px;
   min-width: 0px;
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index 289791dc5e..add0df296f 100644
--- a/website/client/components/appMenu.vue
+++ b/website/client/components/appMenu.vue
@@ -1,234 +1,131 @@
 <template lang="pug">
-// TODO srcset / svg images
-#app-menu.ui.top.fixed.menu
-  .header.item
+nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
+  .navbar-header
+    // TODO srcset / svg images
     img(src="~assets/header/png/logo@3x.png")
-  router-link.item(:to="{name: 'tasks'}", exact) 
-    span(v-once) {{ $t('tasks') }}
-  // .simple makes it possible to have a dropdown without JS
-  .ui.simple.dropdown
-    router-link.item(:to="{name: 'inventory'}", :class="{'active': $route.path.startsWith('/inventory')}") 
-      span(v-once) {{ $t('inventory') }}
-    .menu
-      router-link.item(:to="{name: 'inventory'}") 
-        span(v-once) {{ $t('inventory') }}
-      router-link.item(:to="{name: 'equipment'}") 
-        span(v-once) {{ $t('equipment') }}
-      router-link.item(:to="{name: 'stable'}") 
-        span(v-once) {{ $t('stable') }}
-  router-link.item(:to="{name: 'market'}") 
-    span(v-once) {{ $t('market') }}
-  .ui.simple.dropdown
-    router-link.item(:to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}") 
-      span(v-once) {{ $t('social') }}
-    .menu
-      router-link.item(:to="{name: 'tavern'}") 
-        span(v-once) {{ $t('tavern') }}
-      router-link.item(:to="{name: 'inbox'}") 
-        span(v-once) {{ $t('inbox') }}
-      router-link.item(:to="{name: 'challenges'}") 
-        span(v-once) {{ $t('challenges') }}
-      router-link.item(:to="{name: 'party'}") 
-        span(v-once) {{ $t('party') }}
-      router-link.item(:to="{name: 'guilds'}") 
-        span(v-once) {{ $t('guilds') }}
-  .ui.simple.dropdown
-    router-link.item(to="/help", :class="{'active': $route.path.startsWith('/help')}") 
-      span(v-once) {{ $t('help') }}
-    .menu
-      router-link.item(to="/help/faq") 
-        span(v-once) {{ $t('faq') }}
-      router-link.item(to="/help/report-bug") 
-        span(v-once) {{ $t('reportBug') }}
-      router-link.item(to="/help/request-feature") 
-        span(v-once) {{ $t('requestAF') }}
-  .right.menu
-    .item.with-img
+  .collapse.navbar-collapse
+    ul.navbar-nav.mr-auto
+      router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact) 
+        a.nav-link(v-once) {{ $t('tasks') }}
+      router-link.nav-item.dropdown(tag="li", :to="{name: 'inventory'}", :class="{'active': $route.path.startsWith('/inventory')}")
+        a.nav-link(v-once) {{ $t('inventory') }}
+        .dropdown-menu
+          router-link.dropdown-item(:to="{name: 'inventory'}", exact) {{ $t('inventory') }}
+          router-link.dropdown-item(:to="{name: 'equipment'}") {{ $t('equipment') }}
+          router-link.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
+      router-link.nav-item(tag="li", :to="{name: 'market'}", exact) 
+        a.nav-link(v-once) {{ $t('market') }}
+      router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}")
+        a.nav-link(v-once) {{ $t('social') }}
+        .dropdown-menu
+          router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
+          router-link.dropdown-item(:to="{name: 'inbox'}") {{ $t('inbox') }}
+          router-link.dropdown-item(:to="{name: 'challenges'}") {{ $t('challenges') }}
+          router-link.dropdown-item(:to="{name: 'party'}") {{ $t('party') }}
+          router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guilds') }}
+      router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
+        a.nav-link(v-once) {{ $t('help') }}
+        .dropdown-menu
+          router-link.dropdown-item(to="/help/faq") {{ $t('faq') }}
+          router-link.dropdown-item(to="/help/report-bug") {{ $t('reportBug') }}
+          router-link.dropdown-item(to="/help/request-feature") {{ $t('requestAF') }}
+    .item-with-icon
       img(src="~assets/header/png/gem@3x.png")
       span {{userGems}}
-    .item.with-img.gp-icon
+    .item-with-icon
       img(src="~assets/header/png/gold@3x.png")
       span {{user.stats.gp | floor}}
-    a.item.with-img.notifications-dropdown
+    .item-with-icon
       img(src="~assets/header/png/notifications@3x.png")
-    .ui.simple.dropdown.pointing
-      router-link.item.with-img.user-dropdown(:to="{name: 'avatar'}")
-        // TODO icons should be white when active
-        img(src="~assets/header/png/user@3x.png")
-      .menu
-        .item.user-edit-avatar
-          strong {{user.profile.name}}
-          a(v-once) {{ $t('editAvatar') }}
-        .divider
-        router-link.item(:to="{name: 'stats'}") 
-          span(v-once) {{ $t('stats') }}
-        router-link.item(:to="{name: 'achievements'}") 
-          span(v-once) {{ $t('achievements') }}
-        .divider
-        router-link.item(:to="{name: 'settings'}") 
-          span(v-once) {{ $t('settings') }}
-        .divider
-        router-link.item(to="/logout") 
-          span(v-once) {{ $t('logout') }}
+    router-link.dropdown.item-with-icon(:to="{name: 'avatar'}")
+      // TODO icons should be white when active
+      img(src="~assets/header/png/user@3x.png")
+      .dropdown-menu.dropdown-menu-right.user-dropdown
+        router-link.dropdown-item(:to="{name: 'avatar'}") {{ $t('editAvatar') }}
+        // .dropdown-divider
+        router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
+        router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
+        // .dropdown-divider
+        router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}
+        // .dropdown-divider
+        router-link.dropdown-item(to="/logout") {{ $t('logout') }}
 </template>
 
-<style lang="less">
-#app-menu {
+<style lang="scss" scoped>
+nav.navbar {
   background: #432874 url(~assets/header/png/bits.png) right no-repeat;
-  border-bottom: 0px;
-  
-  .item {
-    font-size: 16px !important;
+  padding: 0 1.5rem;
+  height: 56px;
+}
+
+.navbar-header {
+  margin-right: 3rem;
+
+  img {
+    height: 28px;
+  }
+}
+
+$active-purple: #6133b4;
+
+.nav-item {
+  .nav-link {
+    color: #fff;
+    font-weight: bold;
     line-height: 1.5;
+    padding: 1rem 1.5rem;
+  }
 
-    &.header {
-      width: 256px;
-      padding-left: 20px;
+  &:hover {
+    .nav-link {
+      color: #fff;
+      background: $active-purple;
+    }
+  }
 
-      img {
-        width: 128px;
-        height: 28px;
-      }
+  &.active,&:hover {
+    .nav-link {
+      box-shadow: 0px -4px 0px #6133b4 inset;
     }
   }
 }
 
-#app-menu .item:not(.header) img {
-  vertical-align: middle;
-  width: 32px;
-  height: 32px;
-  margin: 0 auto;
-}
-
-#app-menu .right.menu .item.with-img {
-  padding-left: 0px;
-  padding-right: 0px;
-  margin-right: 20px;
-}
-
-#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown{
-  width: 56px;
-}
-
-#app-menu .right.menu .item.with-img.user-dropdown, #app-menu .right.menu .item.with-img.notifications-dropdown {
-  width: 56px;
-}
-
-#app-menu .right.menu .item.with-img.notifications-dropdown {
-  margin-right: 0px;
-}
-
-#app-menu .right.menu .item.with-img.gp-icon {
-  margin-right: 40px;
-}
-
-#app-menu .right.menu .item.with-img img + span {
-  margin-left: 10px;
-}
-
-#app-menu .ui.menu .right.menu .ui.simple.dropdown > .item::before {
-  right: auto;
-  left: 0;
-}
-
-#app-menu > .item, #app-menu > .right.menu > .item, #app-menu .dropdown > .item {
-  height: 56px;
-  font-weight: bold;
-  text-align: center;
-  padding: 16px 20px;
-  color: #fff;
-}
-
-#app-menu > .item::before, #app-menu > .right.menu > .item::before, #app-menu .dropdown > .item::before {
-  width: 0px;
-}
-
-#app-menu > .item:not(.header):hover, #app-menu > .dropdown:hover {
-  background-color: #6133b4;
-}
-
-#app-menu > .item.active, #app-menu > .dropdown > .item.active {
-  box-shadow: 0px -4px 0px #6133b4 inset;
-}
-
-#app-menu > .dropdown > .menu {
-  border: none;
-  background-color: rgba(0, 0, 0, 0.5); // transparent
-}
-
-#app-menu > .dropdown > .menu > .item:last-child {
-  border-radius: 0px 0px 4px 4px !important;
-}
-
-#app-menu > .dropdown .menu > .item {
-  /* !important to override Semantic UI's !important */
-  width: 217px;
-  background: #6133b4 !important;
-  color: #fff !important;
-  padding: 6px 0px 6px 20px !important;
-}
-
-#app-menu .dropdown .menu .item.active {
-  font-weight: normal !important;
-}
-
-#app-menu > .dropdown .menu > .item:hover {
-  background: #4f2a93 !important; /* to override Semantic UI's !important */
-}
-
-#app-menu .ui.pointing.dropdown .menu .item {
-  padding-top: 12px !important;
-  padding-bottom: 12px !important;
-  color: #616162 !important;
-}
-
-#app-menu .ui.pointing.dropdown .menu .item {
-  padding-top: 12px !important;
-  padding-bottom: 12px !important;
-  color: #616162 !important;
-}
-
-#app-menu .ui.pointing.dropdown .menu .item:nth-child(3) {
-  padding-bottom: 8px !important;
-}
-
-#app-menu .ui.pointing.dropdown .menu .item:nth-child(4) {
-  padding-top: 8px !important;
-}
-
-#app-menu .ui.pointing.dropdown .menu {
-  width: 200px;
-  margin-right: 20px;
-  margin-top: 0px;
-}
-
-#app-menu .ui.pointing.dropdown .menu .item:hover {
-  background: #fff !important;
-  color: #6133b4 !important;
-}
-
-#app-menu .ui.pointing.dropdown > .menu::after {
-  top: -0.50em;
-  left: 85.3%;
-  width: 1em;
-  height: 1em;
-}
-
-#app-menu .ui.pointing.dropdown .divider {
-  margin: 0px;
-}
-
-#app-menu .user-edit-avatar strong, #app-menu .user-edit-avatar strong:hover {
-  color: #313131;
-  margin-top: -3px;
-  flex-grow: 1;
+// Make the dropdown menu open on hover
+.dropdown:hover .dropdown-menu {
   display: block;
+  margin-top: 0; // remove the gap so it doesn't close
 }
 
-#app-menu .user-edit-avatar a, #app-menu .user-edit-avatar a:hover {
-  font-size: 13px;
-  line-height: 1.23;
-  color: #6133b4;
+.dropdown-menu:not(.user-dropdown) {
+  background: $active-purple;
+  border-radius: 0px;
+  border: none;
+
+  .dropdown-item {
+    color: #fff;
+
+    &.active {
+      background: $active-purple;
+    }
+
+    &:hover {
+      background: #4f2a93;
+    }
+  }
+}
+
+.item-with-icon {
+  color: #fff;
+  font-weight: bold;
+  padding: 0.75rem 0;
+  padding-left: 1rem;
+
+  img {
+    vertical-align: middle;
+    width: 32px;
+    height: 32px;
+    margin-right: 0.5rem;
+  }
 }
 </style>
 
diff --git a/website/client/components/avatar.vue b/website/client/components/avatar.vue
index e03a39066c..36d1f04d2a 100644
--- a/website/client/components/avatar.vue
+++ b/website/client/components/avatar.vue
@@ -44,8 +44,8 @@
 
 <style scoped>
 .avatar {
-  max-width: 140px;
-  max-height: 147px;
+  width: 140px;
+  height: 147px;
   image-rendering: pixelated;
 }
 
diff --git a/website/client/components/inventory/index.vue b/website/client/components/inventory/index.vue
index 36879bba79..5d9a4c0715 100644
--- a/website/client/components/inventory/index.vue
+++ b/website/client/components/inventory/index.vue
@@ -1,19 +1,14 @@
 <template lang="pug">
 .row
-  .sixteen.wide.column
-    .ui.secondary.menu.center-content
-      router-link.item(:to="{name: 'inventory'}", exact)
-        span(v-once) {{ $t('inventory') }}
-      router-link.item(:to="{name: 'equipment'}")
-        span(v-once) {{ $t('equipment') }}
-      router-link.item(:to="{name: 'stable'}")
-        span(v-once) {{ $t('stable') }}
-
-  .sixteen.wide.column
+  .col-12
+    nav.nav
+      router-link.nav-link(:to="{name: 'inventory'}", exact) {{ $t('inventory') }}
+      router-link.nav-link(:to="{name: 'equipment'}") {{ $t('equipment') }}
+      router-link.nav-link(:to="{name: 'stable'}") {{ $t('stable') }}
+  .col-12
     router-view
 </template>
 
 <script>
-export default {
-};
+export default {};
 </script>
\ No newline at end of file
diff --git a/website/client/components/inventory/stable.vue b/website/client/components/inventory/stable.vue
index 3e50b471e9..8b1ed46d74 100644
--- a/website/client/components/inventory/stable.vue
+++ b/website/client/components/inventory/stable.vue
@@ -1,46 +1,48 @@
 <template lang="pug">
-.ui.grid
-  .three.wide.column
-    .ui.left.icon.input
-      i.search.icon
-      input(type="text", :placeholder="$t('search')")
-    h3(v-once) {{ $t('filter') }}
+.row
+  .col-3
+    .form-group
+      input.form-control(type="text", :placeholder="$t('search')")
 
-    .ui.form
-      .field
-        .ui.checkbox
-          input(type="checkbox")
-          label.label-primary(v-once) {{ $t('pets') }}
-      .field.nested-field
-        .ui.checkbox
-          input(type="checkbox")
-          label(v-once) {{ $t('hatchingPotions') }}
-      .field.nested-field
-        .ui.checkbox
-          input(type="checkbox")
-          label(v-once) {{ $t('quest') }}
-      .field.nested-field
-        .ui.checkbox
-          input(type="checkbox")
-          label(v-once) {{ $t('special') }}
-      .field
-        .ui.checkbox
-          input(type="checkbox")
-          label.label-primary(v-once) {{ $t('mounts') }}
-      .field.nested-field
-        .ui.checkbox
-          input(type="checkbox")
-          label(v-once) {{ $t('hatchingPotions') }}
-      .field.nested-field
-        .ui.checkbox
-          input(type="checkbox")
-          label(v-once) {{ $t('quest') }}
-      .field.nested-field
-        .ui.checkbox
-          input(type="checkbox")
-          label(v-once) {{ $t('special') }}
+    .form
+      h3(v-once) {{ $t('filter') }}
+      .form-group
+        .form-check
+          label.form-check-label(v-once) 
+            input.form-check-input(type="checkbox")
+            strong {{ $t('pets') }}
+        .form-check.nested-field
+          label.form-check-label(v-once) 
+            input.form-check-input(type="checkbox")
+            span {{ $t('hatchingPotions') }}
+        .form-check.nested-field
+          label.form-check-label(v-once) 
+            input.form-check-input(type="checkbox")
+            span {{ $t('quest') }}
+        .form-check.nested-field
+          label.form-check-label(v-once) 
+            input.form-check-input(type="checkbox")
+            span {{ $t('special') }}
+      .form-group
+        .form-check
+          label.form-check-label(v-once) 
+            input.form-check-input(type="checkbox")
+            strong {{ $t('mounts') }}
+        .form-check.nested-field
+          label.form-check-label(v-once) 
+            input.form-check-input(type="checkbox")
+            span {{ $t('hatchingPotions') }}
+        .form-check.nested-field
+          label.form-check-label(v-once) 
+            input.form-check-input(type="checkbox")
+            span {{ $t('quest') }}
+        .form-check.nested-field
+          label.form-check-label(v-once) 
+            input.form-check-input(type="checkbox")
+            span {{ $t('special') }}
 
-  .thirteen.wide.column
+
+  .col-9
     h2 Pets
     .inventory-item-container(v-for="pet in listAnimals('pet', content.dropEggs, content.dropHatchingPotions)")
       .PixelPaw
diff --git a/website/client/components/page.vue b/website/client/components/page.vue
index 103c5262aa..8f80bceb88 100644
--- a/website/client/components/page.vue
+++ b/website/client/components/page.vue
@@ -1,11 +1,10 @@
 <template lang="pug">
 .row
-  .sixteen.wide.column
+  .col
     h2 Page
     p {{ $route.path }}
 </template>
 
 <script>
-export default {
-};
+export default { };
 </script>
\ No newline at end of file
diff --git a/website/client/components/parentPage.vue b/website/client/components/parentPage.vue
index 9dfd1b7d4d..dd1a50aa98 100644
--- a/website/client/components/parentPage.vue
+++ b/website/client/components/parentPage.vue
@@ -1,10 +1,9 @@
 <template lang="pug">
 .row
-  .sixteen.wide.column
-    router-view.row
+  .col
+    router-view
 </template>
 
 <script>
-export default {
-};
+export default { };
 </script>
diff --git a/website/client/components/social/guilds/discovery/index.vue b/website/client/components/social/guilds/discovery/index.vue
index 026e176531..7ca02f662f 100644
--- a/website/client/components/social/guilds/discovery/index.vue
+++ b/website/client/components/social/guilds/discovery/index.vue
@@ -1,27 +1,28 @@
 <template lang="pug">
-.ui.grid
-  .three.wide.column
-    .ui.left.icon.input
-      i.search.icon
-      input(type="text", :placeholder="$t('search')")
-    h3(v-once) {{ $t('filter') }}
+.row
+  .col-3
+    .form-group
+      input.form-control(type="text", :placeholder="$t('search')")
+    
+    form
+      h3(v-once) {{ $t('filter') }}
 
-    .ui.form
-      h4 Interests
-      .field
-        .ui.checkbox
-          input(type="checkbox")
-          label(v-once) Habitica Official
-      .field
-        .ui.checkbox
-          input(type="checkbox")
-          label(v-once) Nature
-      .field
-        .ui.checkbox
-          input(type="checkbox")
-          label(v-once) Animals
+      .form-group
+        h5 Interests
+        .form-check
+          .label.form-check-label
+            input.form-check-input(type="checkbox")
+            span Habitica Official
+        .form-check
+          .label.form-check-label
+            input.form-check-input(type="checkbox")
+            span Nature
+        .form-check
+          .label.form-check-label
+            input.form-check-input(type="checkbox")
+            span Animals
 
-  .thirteen.wide.column
+  .col-9
     h2(v-once) {{ $t('publicGuilds') }}
     public-guild-item(v-for="guild in guilds", :key='guild._id', :guild="guild")
 </template>
diff --git a/website/client/components/social/guilds/discovery/publicGuildItem.vue b/website/client/components/social/guilds/discovery/publicGuildItem.vue
index 884839345d..ce881446d9 100644
--- a/website/client/components/social/guilds/discovery/publicGuildItem.vue
+++ b/website/client/components/social/guilds/discovery/publicGuildItem.vue
@@ -1,13 +1,19 @@
 <template lang="pug">
-.ui.clearing.raised.segment
-  .ui.right.floated.button(:class="[isMember ? 'red' : 'green']") {{ isMember ? $t('leave') : $t('join') }}
-  .floated
-    // TODO v-once?
-    router-link(:to="{ name: 'guild', params: { guildId: guild._id } }")
-      h3.ui.header {{ guild.name }}
+.card
+  .card-block
+    .clearfix
+      router-link.float-left(:to="{ name: 'guild', params: { guildId: guild._id } }")
+        h3 {{ guild.name }}
+      button.btn.float-right(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
     p {{ guild.description }}
 </template>
 
+<style lang="scss" scoped>
+.card {
+  margin-bottom: 1rem;
+}
+</style>
+
 <script>
 import { mapState } from '../../../../store';
 import groupUtilities from '../../../../mixins/groupsUtilities';
diff --git a/website/client/components/social/guilds/guild.vue b/website/client/components/social/guilds/guild.vue
index fd59809d60..eaf070fa80 100644
--- a/website/client/components/social/guilds/guild.vue
+++ b/website/client/components/social/guilds/guild.vue
@@ -1,36 +1,36 @@
 <template lang="pug">
 // TODO this is necessary until we have a way to wait for data to be loaded from the server
-div(v-if="guild")
-  .ui.grid
-    .row
-      .eight.wide.column.left.floated
-        h2.ui.header.sixteen.wide.column {{guild.name}}
-        .sixteen.wide.column
-          h4.ui.left.floated.header {{$t('groupLeader')}}
-          p {{guild.leader.profile.name}}
-      .eight.wide.column.right.floated
-        .ui.basic.segment.right.floated
-          // TODO extract button to component?
-          .ui.button(:class="[isMember ? 'red' : 'green']") {{ isMember ? $t('leave') : $t('join') }}
-        .ui.segment.compact.right.floated
-          h3.ui.header.centered
-            | {{guild.memberCount}}
-            .sub.header(v-once) {{ $t('members') }}
-    .row
-      .five.wide.column
-        h3.ui.header(v-once) {{ $t('description') }}
-        p {{ guild.description }}
-      .eleven.wide.column
-        h3.ui.header(v-once) {{ $t('chat') }}
-        .ui.minimal.comments
-          .comment(v-for="msg in guild.chat", :key="msg.id") 
-            .content
-              a.author {{msg.user}}
-              .metadata
-                span.date {{msg.timestamp}}
-              .text {{msg.text}}
+.row(v-if="guild")
+  .clearfix.col-12 
+    .float-left
+      h2 {{guild.name}}
+      strong.float-left {{$t('groupLeader')}}
+      span.float-left : {{guild.leader.profile.name}}
+    .float-right
+      .clearfix
+        h3.float-left
+          span.badge.badge-default {{guild.memberCount}}
+          |  {{$t('members')}}
+        button.btn.float-left(:class="[isMember ? 'btn-danger' : 'btn-success']") {{ isMember ? $t('leave') : $t('join') }}
+  .col-5
+    h4(v-once) {{ $t('description') }}
+    p {{ guild.description }}
+  .col-7
+    h4(v-once) {{ $t('chat') }}
+    .card(v-for="msg in guild.chat", :key="msg.id") 
+      .card-block
+        .clearfix
+          strong.float-left {{msg.user}}
+          .float-right {{msg.timestamp}}
+        .text {{msg.text}}
 </template>
 
+<style lang="scss" scoped>
+.card {
+  margin-bottom: 1rem;
+}
+
+</style>
 <script>
 import axios from 'axios';
 import groupUtilities from '../../../mixins/groupsUtilities';
diff --git a/website/client/components/social/inbox/conversationPage.vue b/website/client/components/social/inbox/conversationPage.vue
index d0d0e14cf0..7b93360a5c 100644
--- a/website/client/components/social/inbox/conversationPage.vue
+++ b/website/client/components/social/inbox/conversationPage.vue
@@ -1,23 +1,16 @@
 <template lang="pug">
-.ui.internally.celled.grid
-  .row
-    .sixteen.wide.column
-      .ui.comments
-        h2.ui.dividing.header Conversation
-        .comment(v-for="message in messages")
-          a.avatar
-            img(src='http://semantic-ui.com/images/avatar/small/matt.jpg')
-          .content
-            a.author {{message.from}}
-            .metadata
-              span.date {{message.date}}
-            .text
-              | {{message.message}}
-        .field
-          textarea(v-model='newMessage')
-        .ui.blue.labeled.submit.icon.button(v-on:click='reply')
-          i.icon.edit
-          |  Add Reply
+.row
+  .col-12
+    h2 Conversation
+    .card(v-for="message in messages")
+      .card-block
+        strong {{message.from}}
+        span {{message.date}}
+        p {{message.message}}
+    form.form.mt-2(@submit.prevent='reply')
+      .form-group
+        textarea.form-control(rows="3", v-model='newMessage')
+      button.btn.btn-primary(type="submit") Add Reply
 </template>
 
 <script>
diff --git a/website/client/components/social/inbox/index.vue b/website/client/components/social/inbox/index.vue
index bf4ef57149..e75d9b28c5 100644
--- a/website/client/components/social/inbox/index.vue
+++ b/website/client/components/social/inbox/index.vue
@@ -1,15 +1,11 @@
 <template lang="pug">
-.ui.internally.celled.grid
-  .row
-    .sixteen.wide.colum
-      h2.ui.dividing.header(v-once) {{ $t('inbox') }}
-      .ui.middle.aligned.selection.list
-        .item(v-for="conversation in conversations")
-          img.ui.avatar.image(src='http://semantic-ui.com/images/avatar/small/daniel.jpg')
-          .content
-            .header
-              router-link(:to="{ name: 'conversation', params: { id: conversation.fromUserId } }")
-                | {{ conversation.from }}
+.row
+  .col-12
+    h2(v-once) {{ $t('inbox') }}
+    .card(v-for="conversation in conversations")
+      .card-block
+        router-link(:to="{ name: 'conversation', params: { id: conversation.fromUserId } }")
+          | {{ conversation.from }}
 
 </template>
 
diff --git a/website/client/components/social/index.vue b/website/client/components/social/index.vue
index 5cd1e33ca4..dd0afa749c 100644
--- a/website/client/components/social/index.vue
+++ b/website/client/components/social/index.vue
@@ -1,19 +1,14 @@
 <template lang="pug">
 .row
-  .sixteen.wide.column
-    .ui.secondary.menu.center-content
-      router-link.item(:to="{name: 'tavern'}")
-        span(v-once) {{ $t('tavern') }}
-      router-link.item(:to="{name: 'guilds'}")
-        span(v-once) {{ $t('guilds') }}
-      router-link.item(:to="{name: 'inbox'}")
-        span(v-once) {{ $t('inbox') }}
-
-  .sixteen.wide.column
+  .col-12
+    nav.nav
+      router-link.nav-link(:to="{name: 'tavern'}", exact) {{ $t('tavern') }}
+      router-link.nav-link(:to="{name: 'inbox'}") {{ $t('inbox') }}
+      router-link.nav-link(:to="{name: 'guildsDiscovery'}") {{ $t('guilds') }}
+  .col-12
     router-view
 </template>
 
 <script>
-export default {
-};
+export default {};
 </script>
\ No newline at end of file
diff --git a/website/client/components/social/tavern.vue b/website/client/components/social/tavern.vue
index 10fbc36ef8..f18a368485 100644
--- a/website/client/components/social/tavern.vue
+++ b/website/client/components/social/tavern.vue
@@ -1,5 +1,7 @@
 <template lang="pug">
-.ui.grid
+.row
+  h2.col-12 Tavern
+// TODO Example code based on Semantic UI .ui.grid
   .four.wide.column
     h2.ui.dividing.header SideMenu
 
@@ -176,7 +178,7 @@
 <script>
 export default {
   data () {
-    // @TODO: Abstract to Store
+    // TODO: Abstract to Store
     let messages = [
       {
         from: 'Paglias',
@@ -195,7 +197,7 @@ export default {
 
   methods: {
     sendChat: function sendChat () {
-      // @TODO: This will be default values based on the conversation and current user
+      // TODO: This will be default values based on the conversation and current user
       let messageToSend = {
         from: 'TheHollidayInn',
         fromUserId: 3211,
diff --git a/website/client/components/userTasks.vue b/website/client/components/userTasks.vue
index 2b8bb58745..7f69b2d28a 100644
--- a/website/client/components/userTasks.vue
+++ b/website/client/components/userTasks.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 .row
-  .four.wide.column(v-for="taskType in tasksTypes")
+  .col(v-for="taskType in tasksTypes")
     h3 {{taskType}}s
     ul
       task(v-for="task in tasks", v-if="task.type === taskType", :key="task.id", :task="task")
diff --git a/website/client/index.html b/website/client/index.html
index c3ef84acd1..c8d08805ed 100644
--- a/website/client/index.html
+++ b/website/client/index.html
@@ -7,10 +7,8 @@
   </head>
   <body>
     <!-- #loading-screen needs to be rendered before vue, will be deleted once app is loaded -->
-    <div id="loading-screen" class="ui middle aligned one column grid">
-      <div class="column center aligned">
-        <p>Loading...</p>
-      </div>
+    <div id="loading-screen" class="h-100 w-100 d-flex justify-content-center align-items-center">
+      <p>Loading...</p>
     </div>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/website/client/router.js b/website/client/router.js
index 63b1c443e9..2a01b5689c 100644
--- a/website/client/router.js
+++ b/website/client/router.js
@@ -67,13 +67,13 @@ export default new VueRouter({
           component: EmptyView,
           children: [
             {
-              name: 'guilds',
-              path: '',
+              name: 'guildsDiscovery',
+              path: 'discovery',
               component: GuildsDiscoveryPage,
             },
             {
               name: 'guild',
-              path: ':guildId',
+              path: 'guild/:guildId',
               component: GuildPage,
               props: true,
             },