diff --git a/.gitignore b/.gitignore
index 308984f..373b2b9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,8 @@
 /public/js
 /public/css
 /public/img
+/public/fonts
+/public/*.worker.js
 /public/storage
 /public/*.worker.*
 /storage/*.key
diff --git a/app/Jobs/RecordChatMessage.php b/app/Jobs/RecordChatMessage.php
index 80620e0..0a952ca 100644
--- a/app/Jobs/RecordChatMessage.php
+++ b/app/Jobs/RecordChatMessage.php
@@ -46,7 +46,7 @@ public function handle()
             'message' => $this->data->message,
             'created_at' => $this->data->createdAt,
             'user_type' => $this->data->isAgent ? User::class : Guest::class,
-            'user' => $this->data->isAgent ? (new User())->decode($this->data->user->hash) : (new Guest())->decode($this->data->user->hash)
+            'user_id' => $this->data->isAgent ? (new User())->decode($this->data->user->hash) : (new Guest())->decode($this->data->user->hash)
        ]);
     }
 }
diff --git a/composer.json b/composer.json
index 44f8dbc..829eaa3 100644
--- a/composer.json
+++ b/composer.json
@@ -20,6 +20,7 @@
         "league/csv": "^9.2",
         "predis/predis": "^1.1",
         "pusher/pusher-php-server": "~3.0",
+        "react/dns": "^0.4.19",
         "tymon/jwt-auth": "1.0.0-rc.4.1",
         "vinkla/hashids": "^5.2",
         "react/dns": "^0.4.19"
diff --git a/composer.lock b/composer.lock
index cdea20c..4314d3d 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "985c6795b9d4b61080da748e857b6997",
+    "content-hash": "331198cd7d4be83fab6dc80b57adf385",
     "packages": [
         {
             "name": "asm89/stack-cors",
diff --git a/package-lock.json b/package-lock.json
index 27dec7e..5b88a58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5616,24 +5616,28 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
         "aproba": {
           "version": "1.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+          "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5643,12 +5647,14 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
           "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
           "requires": {
             "balanced-match": "^1.0.0",
@@ -5657,34 +5663,40 @@
         },
         "chownr": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+          "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
           "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true,
           "optional": true
         },
         "debug": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5693,25 +5705,29 @@
         },
         "deep-extend": {
           "version": "0.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+          "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
           "dev": true,
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "dev": true,
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5720,13 +5736,15 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "dev": true,
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5742,7 +5760,8 @@
         },
         "glob": {
           "version": "7.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5756,13 +5775,15 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5771,7 +5792,8 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5780,7 +5802,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5790,18 +5813,21 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "dev": true
         },
         "ini": {
           "version": "1.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "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"
@@ -5809,13 +5835,15 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -5823,12 +5851,14 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "minipass": {
           "version": "2.3.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
+          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "dev": true,
           "requires": {
             "safe-buffer": "^5.1.2",
@@ -5837,7 +5867,8 @@
         },
         "minizlib": {
           "version": "1.2.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
+          "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5846,7 +5877,8 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
             "minimist": "0.0.8"
@@ -5854,13 +5886,15 @@
         },
         "ms": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
           "dev": true,
           "optional": true
         },
         "needle": {
           "version": "2.3.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz",
+          "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5871,7 +5905,8 @@
         },
         "node-pre-gyp": {
           "version": "0.12.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
+          "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5889,7 +5924,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5899,13 +5935,15 @@
         },
         "npm-bundled": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
+          "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
           "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.4.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
+          "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5915,7 +5953,8 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5927,18 +5966,21 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
           "requires": {
             "wrappy": "1"
@@ -5946,19 +5988,22 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5968,19 +6013,22 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+          "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -5992,7 +6040,8 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "dev": true,
               "optional": true
             }
@@ -6000,7 +6049,8 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6015,7 +6065,8 @@
         },
         "rimraf": {
           "version": "2.6.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6024,42 +6075,49 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
           "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.7.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "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",
@@ -6069,7 +6127,8 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6078,7 +6137,8 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -6086,13 +6146,15 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "dev": true,
           "optional": true
         },
         "tar": {
           "version": "4.4.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
+          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6107,13 +6169,15 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+          "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -6122,12 +6186,14 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "dev": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
+          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
           "dev": true
         }
       }
@@ -8913,6 +8979,12 @@
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
       "dev": true
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "dev": true
+    },
     "npm-conf": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
diff --git a/package.json b/package.json
index eb170b5..f5f5823 100644
--- a/package.json
+++ b/package.json
@@ -26,13 +26,14 @@
     "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-pro": "^5.10.1",
-    "husky": "^3.0.2",
+    "@fortawesome/fontawesome-pro": "^5.9.0",
+    "husky": "^3.0.1",
+    "normalize.css": "^8.0.1",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
     "varie-bundler": "^0.10.12",
-    "vue-template-compiler": "^2.6.2",
-    "webpack-bundle-analyzer": "^3.0.3"
+    "vue-template-compiler": "^2.6.10",
+    "webpack-bundle-analyzer": "^3.3.2"
   },
   "engines": {
     "node": "10.15.3"
diff --git a/resources/images/temp_avatar.svg b/resources/images/temp_avatar.svg
new file mode 100644
index 0000000..e93bd08
--- /dev/null
+++ b/resources/images/temp_avatar.svg
@@ -0,0 +1 @@
+<svg width="264px" height="280px" viewBox="0 0 264 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with getavataaars.com</desc><defs><circle id="path-1" cx="120" cy="120" r="120"></circle><path d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z" id="path-3"></path><path d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z" id="path-5"></path></defs><g id="Avataaar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-825.000000, -1100.000000)" id="Avataaar/Circle"><g transform="translate(825.000000, 1100.000000)"><g id="Circle" stroke-width="1" fill-rule="evenodd" transform="translate(12.000000, 40.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Circle-Background" fill="#E6E6E6" xlink:href="#path-1"></use><g id="Color/Palette/Blue-01" mask="url(#mask-2)" fill="#65C9FF"><rect id="🖍Color" x="0" y="0" width="240" height="240"></rect></g></g><mask id="mask-4" fill="white"><use xlink:href="#path-3"></use></mask><g id="Mask"></g><g id="Avataaar" stroke-width="1" fill-rule="evenodd" mask="url(#mask-4)"><g id="Body" transform="translate(32.000000, 36.000000)"><mask id="mask-6" fill="white"><use xlink:href="#path-5"></use></mask><use fill="#D0C6AC" xlink:href="#path-5"></use><g id="Skin/👶🏽-03-Brown" mask="url(#mask-6)" fill="#EDB98A"><g transform="translate(-32.000000, 0.000000)" id="Color"><rect x="0" y="0" width="264" height="244"></rect></g></g><path d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z" id="Neck-Shadow" fill-opacity="0.100000001" fill="#000000" mask="url(#mask-6)"></path></g><g id="Clothing/Blazer-+-Shirt" transform="translate(0.000000, 170.000000)"><defs><path d="M133.960472,0.294916112 C170.936473,3.32499816 200,34.2942856 200,72.0517235 L200,81 L0,81 L0,72.0517235 C1.22536245e-14,33.9525631 29.591985,2.76498122 67.0454063,0.219526408 C67.0152598,0.593114549 67,0.969227185 67,1.34762511 C67,13.2107177 81.9984609,22.8276544 100.5,22.8276544 C119.001539,22.8276544 134,13.2107177 134,1.34762511 C134,0.994669088 133.986723,0.64370138 133.960472,0.294916112 Z" id="react-path-1"></path></defs><g id="Shirt" transform="translate(32.000000, 29.000000)"><mask id="react-mask-2" fill="white"><use xlink:href="#react-path-1"></use></mask><use id="Clothes" fill="#E6E6E6" xlink:href="#react-path-1"></use><g id="Color/Palette/Black" mask="url(#react-mask-2)" fill="#262E33"><g transform="translate(-32.000000, -29.000000)" id="🖍Color"><rect x="0" y="0" width="264" height="110"></rect></g></g><g id="Shadowy" opacity="0.599999964" mask="url(#react-mask-2)" fill-opacity="0.16" fill="#000000"><g transform="translate(60.000000, -25.000000)" id="Hola-👋🏼"><ellipse cx="40.5" cy="27.8476251" rx="39.6351047" ry="26.9138272"></ellipse></g></g></g><g id="Blazer" transform="translate(32.000000, 28.000000)"><path d="M68.784807,1.12222847 C30.512317,2.80409739 -1.89486556e-14,34.3646437 -1.42108547e-14,73.0517235 L0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z" id="Saco" fill="#3A4C5A"></path><path d="M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z" id="Pocket-hanky" fill="#E6E6E6"></path><path d="M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z" id="Wing" fill="#2F4351"></path><path d="M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z" id="Wing" fill="#2F4351" transform="translate(141.000000, 41.000000) scale(-1, 1) translate(-141.000000, -41.000000) "></path></g></g><g id="Face" transform="translate(76.000000, 82.000000)" fill="#000000"><g id="Mouth/Default" transform="translate(2.000000, 52.000000)" fill-opacity="0.699999988"><path d="M40,15 C40,22.7319865 46.2680135,29 54,29 L54,29 C61.7319865,29 68,22.7319865 68,15" id="Mouth"></path></g><g id="Nose/Default" transform="translate(28.000000, 40.000000)" fill-opacity="0.16"><path d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8" id="Nose"></path></g><g id="Eyes/Default-😀" transform="translate(0.000000, 8.000000)" fill-opacity="0.599999964"><circle id="Eye" cx="30" cy="22" r="6"></circle><circle id="Eye" cx="82" cy="22" r="6"></circle></g><g id="Eyebrow/Outline/Default" fill-opacity="0.599999964"><g id="I-Browse" transform="translate(12.000000, 6.000000)"><path d="M3.63024536,11.1585767 C7.54515501,5.64986673 18.2779197,2.56083721 27.5230268,4.83118046 C28.5957248,5.0946055 29.6788665,4.43856013 29.9422916,3.36586212 C30.2057166,2.2931641 29.5496712,1.21002236 28.4769732,0.94659732 C17.7403633,-1.69001789 5.31209962,1.88699832 0.369754639,8.84142326 C-0.270109626,9.74178291 -0.0589363917,10.9903811 0.84142326,11.6302454 C1.74178291,12.2701096 2.9903811,12.0589364 3.63024536,11.1585767 Z" id="Eyebrow" fill-rule="nonzero"></path><path d="M61.6302454,11.1585767 C65.545155,5.64986673 76.2779197,2.56083721 85.5230268,4.83118046 C86.5957248,5.0946055 87.6788665,4.43856013 87.9422916,3.36586212 C88.2057166,2.2931641 87.5496712,1.21002236 86.4769732,0.94659732 C75.7403633,-1.69001789 63.3120996,1.88699832 58.3697546,8.84142326 C57.7298904,9.74178291 57.9410636,10.9903811 58.8414233,11.6302454 C59.7417829,12.2701096 60.9903811,12.0589364 61.6302454,11.1585767 Z" id="Eyebrow" fill-rule="nonzero" transform="translate(73.000154, 6.039198) scale(-1, 1) translate(-73.000154, -6.039198) "></path></g></g></g><g id="Top" stroke-width="1" fill-rule="evenodd"><defs><rect id="react-path-78" x="0" y="0" width="264" height="280"></rect><path d="M90.9102919,55.3613196 L175.085702,55.3613196 C193.333279,44.8338001 196.759397,26.1510357 183.849606,9.92600089 C180.635746,5.88682054 175.085702,21.6755614 158.028596,22.6504878 C140.97149,23.6254143 142.608865,16.3498661 124.45759,19.0739248 C106.306316,21.7979835 108.311575,36.37843 96.4671989,39.8768239 C88.5709482,42.2090865 86.7186458,47.370585 90.9102919,55.3613196 Z" id="react-path-77"></path><filter x="-0.8%" y="-2.0%" width="101.5%" height="108.0%" filterUnits="objectBoundingBox" id="react-filter-74"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.16 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><mask id="react-mask-76" fill="white"><use xlink:href="#react-path-78"></use></mask><g id="Mask"></g><g id="Top/Short-Hair/Frizzle" mask="url(#react-mask-76)"><g transform="translate(-1.000000, 0.000000)"><mask id="react-mask-75" fill="white"><use xlink:href="#react-path-77"></use></mask><use id="Hair-Maks" stroke="none" fill="#252E32" fill-rule="evenodd" xlink:href="#react-path-77"></use><g id="Skin/👶🏽-03-Brown" mask="url(#react-mask-75)" fill="#4A312C"><g transform="translate(0.000000, 0.000000) " id="Color"><rect x="0" y="0" width="264" height="280"></rect></g></g></g></g></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/resources/js/app/components/Dropdown.vue b/resources/js/app/components/Dropdown.vue
new file mode 100644
index 0000000..9b5d4b5
--- /dev/null
+++ b/resources/js/app/components/Dropdown.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="nav-dropdown" @click="showDropDownMenu = !showDropDownMenu">
+    <div class="dropdown" :class="{ open: showDropDownMenu }">
+      <slot></slot>&nbsp;
+      <i class="arrow"></i>
+      <div class="dropdown--menu" v-show="showDropDownMenu">
+        <template v-for="option in options">
+          <div
+            @click="$emit('select', option.value)"
+            class="dropdown--menu-item"
+          >
+            {{ option.display }}
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showDropDownMenu: false,
+    };
+  },
+};
+</script>
diff --git a/resources/js/app/mixins/Auth.ts b/resources/js/app/mixins/Auth.ts
index a3a0ec8..6908501 100644
--- a/resources/js/app/mixins/Auth.ts
+++ b/resources/js/app/mixins/Auth.ts
@@ -5,5 +5,8 @@ Vue.mixin({
     user() {
       return this.$store.getters["auth/user"]();
     },
+    isAuthed() {
+      return !!this.user;
+    },
   },
 });
diff --git a/resources/js/client/components/ClientChat.vue b/resources/js/client/components/ClientChat.vue
index 16d3857..299151c 100644
--- a/resources/js/client/components/ClientChat.vue
+++ b/resources/js/client/components/ClientChat.vue
@@ -1,28 +1,148 @@
 <template>
-  <form @submit.prevent="sendMessage">
-    <h3>Agents Here</h3>
-    {{ agents }}
-    <h3>Guests</h3>
-    {{ guests }}
-
-    <input type="text" v-model="message" @keyup="showTyping" />
-    <template v-for="message in previousMessages">
-      <chat-message
-        :message="message"
-        :current-time="currentTime"
-      ></chat-message>
-    </template>
-    <template v-for="message in messages">
-      <chat-message
-        :message="message"
-        :current-time="currentTime"
-      ></chat-message>
-    </template>
-    <p>>>{{ peopleAreTyping }}<<</p>
-    <button type="submit">Send</button>
-  </form>
+  <div class="replay-chat" :class="{ 'client-styles': !isAgent }">
+    <div class="chat__header">
+      <div class="chat__header-actions"></div>
+      <div>
+        <template v-if="isAgent">
+          <h3>Guests</h3>
+          {{ guests }}
+        </template>
+        <template v-else>
+          <template v-for="agent in agents">
+            <div class="agent">
+              <div class="agent__avatar">
+                <img src="./../../../../resources/images/temp_avatar.svg" />
+              </div>
+              <div class="agent__name">
+                <div>
+                  {{ agent.name }}
+                </div>
+                <small>Support Staff</small>
+              </div>
+            </div>
+          </template>
+        </template>
+      </div>
+    </div>
+
+    <div class="chat__content" ref="content">
+      <template v-for="message in previousMessages">
+        <chat-message
+          :class="{ left: message.user.isAgent, right: !message.user.isAgent }"
+          :message="message"
+          :current-time="currentTime"
+        ></chat-message>
+      </template>
+      <template v-for="message in messages">
+        <pre>{{ message.user }}</pre>
+        <chat-message
+          :message="message"
+          :current-time="currentTime"
+        ></chat-message>
+      </template>
+      <template v-for="user in usersTyping">
+        <pre>{{ user.name }}</pre>
+        ....
+      </template>
+    </div>
+
+    <div class="chat__footer">
+      <form @submit.prevent="sendMessage">
+        <div class="chat__input-area">
+          <div class="chat__input-area-input">
+            <input
+              placeholder="Write a message..."
+              type="text"
+              v-model="message"
+              @keyup="showTyping"
+            />
+          </div>
+          <div class="chat__input-area-actions">
+            actions
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
 </template>
 
+<style lang="scss" scoped>
+.client-styles {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  width: 350px;
+  height: 652px;
+
+  overflow: hidden;
+  border: 1px solid #f5f3f3;
+  border-radius: 5px;
+  background-color: white;
+  box-shadow: 0 2px 3px 1px #f5f3f3;
+
+  display: flex;
+  flex-direction: column;
+
+  .chat {
+    &__header {
+      z-index: 1;
+      padding: 10px;
+      border-bottom: 1px solid #f5f3f3;
+      box-shadow: 0 0 1px 1px darken(#f5f3f3, 5%);
+    }
+
+    &__content {
+      padding: 10px;
+      overflow-y: auto;
+      background-color: #f5f3f3;
+    }
+
+    &__footer {
+      border-top: 1px solid #f5f3f3;
+    }
+
+    &__input-area {
+      z-index: 1;
+      display: flex;
+      &-input {
+        flex: 1 1 auto;
+        input {
+          border-bottom-left-radius: 5px;
+          padding: 10px 5px;
+          border: 1px solid transparent;
+          width: 100%;
+          &::placeholder {
+            color: darken(#f5f3f3, 15%);
+          }
+
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+      &-actions {
+      }
+    }
+  }
+}
+
+.agent {
+  display: flex;
+  align-items: flex-end;
+
+  &__avatar,
+  &__avatar img {
+    width: 50px;
+    height: 50px;
+  }
+
+  &__name {
+    margin: 5px 10px;
+    text-transform: capitalize;
+  }
+}
+</style>
+
 <script>
 import ChatMessage from "./chat-components/ChatMessage";
 
@@ -52,7 +172,7 @@ export default {
       messages: [],
       message: null,
       currentTime: null,
-      peopleTyping: {},
+      usersTyping: {},
     };
   },
   created() {
@@ -60,6 +180,9 @@ export default {
       this.currentTime = new Date();
     }, ONE_MIN);
   },
+  mounted() {
+    this.scrollToBottom(true);
+  },
   watch: {
     channel: {
       immediate: true,
@@ -81,16 +204,19 @@ export default {
             .listenForWhisper("chat-message", (data) => {
               this.removePersonTyping(data.user.hash);
               this.messages.push(data);
+              this.scrollToBottom();
             })
             .listenForWhisper("chat-typing", (data) => {
-              clearTimeout(this.peopleTyping[data.user.hash]);
-              this.$set(
-                this.peopleTyping,
-                data.user.hash,
-                setTimeout(() => {
+              if (this.usersTyping[data.user.hash]) {
+                clearTimeout(this.usersTyping[data.user.hash].timeout);
+              }
+              this.$set(this.usersTyping, data.user.hash, {
+                name: data.user.name,
+                timeout: setTimeout(() => {
                   this.removePersonTyping(data.user.hash);
                 }, 3000),
-              );
+              });
+              this.scrollToBottom();
             });
         }
       },
@@ -104,8 +230,20 @@ export default {
         });
       }
     },
+    isScrolledToBottom() {
+      let elm = this.$refs["content"];
+      return elm.scrollTop === elm.scrollHeight - elm.offsetHeight;
+    },
+    scrollToBottom(force = false) {
+      if (force || this.isScrolledToBottom()) {
+        let elm = this.$refs["content"];
+        setTimeout(() => {
+          elm.scrollTop = elm.scrollHeight - elm.offsetHeight;
+        });
+      }
+    },
     removePersonTyping(userHash) {
-      this.$delete(this.peopleTyping, userHash);
+      this.$delete(this.usersTyping, userHash);
     },
     sendMessage() {
       let message = {
@@ -117,6 +255,7 @@ export default {
       this.channel.whisper("chat-message", message);
       this.messages.push(message);
       this.message = null;
+      this.scrollToBottom(true);
     },
   },
   computed: {
@@ -130,9 +269,6 @@ export default {
         return user.guest;
       });
     },
-    peopleAreTyping() {
-      return Object.keys(this.peopleTyping).length;
-    },
   },
 };
 </script>
diff --git a/resources/js/routes/index.ts b/resources/js/routes/index.ts
index 9472952..5a14dd6 100644
--- a/resources/js/routes/index.ts
+++ b/resources/js/routes/index.ts
@@ -36,13 +36,11 @@ export default function($router: RouterInterface) {
         .prefix("site/:site")
         .area(siteViews.SiteArea)
         .group(() => {
+          $router.route("setup", siteViews.SiteSetup);
           $router.route("dashboard", siteViews.SiteDashboard);
           $router.prefix("guest:guest").group(() => {
             $router.route("", siteViews.SiteGuestSessions);
-            $router.route(
-              "session/:session/components",
-              siteViews.SiteSessionPlayer,
-            );
+            $router.route("session/:session", siteViews.SiteSessionPlayer);
           });
         });
     });
diff --git a/resources/js/store/site/actions.ts b/resources/js/store/site/actions.ts
index eb98a22..4fc2df4 100644
--- a/resources/js/store/site/actions.ts
+++ b/resources/js/store/site/actions.ts
@@ -8,6 +8,9 @@ export default function(siteService: SiteService) {
     get: (context: ActionContext<SiteState, RootState>) => {
       return siteService.get().then(({ data }) => {
         context.commit("SET_SITES", data);
+        if (!context.state.selectedSite && data[0]) {
+          context.commit("SET_SELECTED_SITE", data[0]);
+        }
         return data;
       });
     },
diff --git a/resources/js/store/site/mutations.ts b/resources/js/store/site/mutations.ts
index 966e04a..76e3891 100644
--- a/resources/js/store/site/mutations.ts
+++ b/resources/js/store/site/mutations.ts
@@ -8,5 +8,8 @@ export default function() {
     SET_SITES: (state: SiteState, data) => {
       state.sites = data;
     },
+    SET_SELECTED_SITE: (state: SiteState, site) => {
+      state.selectedSite = site;
+    },
   };
 }
diff --git a/resources/js/store/site/state.ts b/resources/js/store/site/state.ts
index 1a4cce6..69e1c9e 100644
--- a/resources/js/store/site/state.ts
+++ b/resources/js/store/site/state.ts
@@ -1,4 +1,5 @@
 export default {
   site: null,
   sites: null,
+  selectedSite: null,
 };
diff --git a/resources/js/store/site/stateInterface.ts b/resources/js/store/site/stateInterface.ts
index 91e6f4c..fc8b531 100644
--- a/resources/js/store/site/stateInterface.ts
+++ b/resources/js/store/site/stateInterface.ts
@@ -1,4 +1,5 @@
 export interface SiteState {
-  site: null;
+  site: null | any;
   sites: null | Array<any>;
+  selectedSite: null | any;
 }
diff --git a/resources/js/views/Dashboard.vue b/resources/js/views/Dashboard.vue
index 6934ea3..5e3fc2b 100644
--- a/resources/js/views/Dashboard.vue
+++ b/resources/js/views/Dashboard.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <h3>Dashboard</h3>
+    Welcome!
     <h3>Sites</h3>
     <div>Create Site</div>
     <form v-form="siteForm" @submit.prevent="createSite">
@@ -32,14 +33,6 @@ export default Vue.extend({
       }),
     };
   },
-  watch: {
-    $route: {
-      immediate: true,
-      handler() {
-        this.$store.dispatch("site/get");
-      },
-    },
-  },
   methods: {
     createSite() {
       this.$store.dispatch("site/create", this.siteForm.data()).then((site) => {
diff --git a/resources/js/views/layouts/Authed.vue b/resources/js/views/layouts/Authed.vue
index b14be95..57851af 100644
--- a/resources/js/views/layouts/Authed.vue
+++ b/resources/js/views/layouts/Authed.vue
@@ -1,16 +1,23 @@
 <template>
   <div id="app">
     <alerts></alerts>
-    AUTHED LAYOUT
-    <router-view></router-view>
+    <div class="menu">
+      <app-menu></app-menu>
+    </div>
+    <div class="wrapper">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
 <script>
 import Alerts from "varie/Alerts";
+import AppMenu from "./components/AppMenu";
+
 export default {
   components: {
     Alerts,
+    AppMenu,
   },
 };
 </script>
diff --git a/resources/js/views/layouts/Public.vue b/resources/js/views/layouts/Public.vue
index 846f844..d1f1374 100644
--- a/resources/js/views/layouts/Public.vue
+++ b/resources/js/views/layouts/Public.vue
@@ -1,5 +1,6 @@
 <template>
-  <div id="app">
+  <div id="landing">
+    <alerts></alerts>
     <site-header></site-header>
     <router-view></router-view>
     <site-footer></site-footer>
@@ -7,9 +8,10 @@
 </template>
 
 <script>
+import Alerts from "varie/Alerts";
 import SiteHeader from "./components/SiteHeader";
 import SiteFooter from "./components/SiteFooter";
-import Alerts from "varie/Alerts";
+
 export default {
   components: {
     Alerts,
diff --git a/resources/js/views/layouts/components/AppMenu.vue b/resources/js/views/layouts/components/AppMenu.vue
new file mode 100644
index 0000000..8f34fed
--- /dev/null
+++ b/resources/js/views/layouts/components/AppMenu.vue
@@ -0,0 +1,95 @@
+<template>
+  <nav class="nav">
+    <div v-if="sites">
+      <dropdown :options="options" @select="changeSite">
+        <template v-if="selectedSite">
+          {{ selectedSite.domain }}
+        </template>
+      </dropdown>
+    </div>
+    <template v-if="selectedSite">
+      <ul>
+        <li>
+          <router-link
+            :to="{ name: 'site.dashboard', params: { site: selectedSite.id } }"
+            >Dashboard</router-link
+          >
+        </li>
+      </ul>
+
+      <h3>Sessions</h3>
+      <ul>
+        <li>
+          <router-link to="/" exact>Active</router-link>
+        </li>
+        <li>
+          <router-link to="/" exact>Recent</router-link>
+        </li>
+        <li>
+          <router-link to="/" exact>New</router-link>
+        </li>
+      </ul>
+
+      <h3>Settings</h3>
+      <ul>
+        <li>
+          <router-link
+            :to="{ name: 'site.setup', params: { site: selectedSite.id } }"
+            exact
+            >Setup</router-link
+          >
+        </li>
+        <li>
+          <router-link to="/" exact>Intergrations</router-link>
+        </li>
+      </ul>
+    </template>
+
+    <template>
+      bottom
+      <div>
+        <router-link to="/" exact>Help</router-link>
+      </div>
+      <div>
+        <router-link to="/" exact>Documentation</router-link>
+      </div>
+      <div>
+        <router-link to="/" exact>{{ user.email }}</router-link>
+      </div>
+    </template>
+  </nav>
+</template>
+
+<script>
+export default {
+  methods: {
+    changeSite(site) {
+      this.$store.commit("site/SET_SELECTED_SITE", site);
+    },
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler() {
+        this.$store.dispatch("site/get");
+      },
+    },
+  },
+  computed: {
+    options() {
+      return this.sites.map((site) => {
+        return {
+          value: site,
+          display: site.domain,
+        };
+      });
+    },
+    sites() {
+      return this.$store.state.site.sites || [];
+    },
+    selectedSite() {
+      return this.$store.state.site.selectedSite;
+    },
+  },
+};
+</script>
diff --git a/resources/js/views/layouts/components/SiteHeader.vue b/resources/js/views/layouts/components/SiteHeader.vue
index b08b460..6ad128c 100644
--- a/resources/js/views/layouts/components/SiteHeader.vue
+++ b/resources/js/views/layouts/components/SiteHeader.vue
@@ -1,18 +1,22 @@
 <template>
-  <div class="site-header">
-    <div class="site__logo">
-      <replay-logo></replay-logo>
-    </div>
-
-    <div></div>
+  <header class="header">
+    <nav class="site-header">
+      <div class="site-header__logo">
+        <router-link to="/" tag="span" class="cursor-pointer logo">
+          <replay-logo></replay-logo>
+        </router-link>
+      </div>
 
-    <div>
-      <div class="site-header__nav-item">
+      <div>
         <router-link :to="{ name: 'login' }">Login</router-link>
       </div>
-      <div class="site-header__nav-item">
+      <div>
         <router-link :to="{ name: 'register' }">Sign Up</router-link>
       </div>
-    </div>
-  </div>
+    </nav>
+  </header>
 </template>
+
+<script>
+export default {};
+</script>
diff --git a/resources/js/views/site/SiteDashboard.vue b/resources/js/views/site/SiteDashboard.vue
index fcda3e5..8109dc2 100644
--- a/resources/js/views/site/SiteDashboard.vue
+++ b/resources/js/views/site/SiteDashboard.vue
@@ -1,38 +1,58 @@
 <template>
-  <div v-if="site">
-    <h3>Guests for Site {{ site.domain }}</h3>
+  <div>
     <template v-if="guests && guests.length === 0">
       <h3>
         You haven't installed the script, or there hasn't been any recorded
         sessions.
       </h3>
+      <install-script :site="site"></install-script>
     </template>
     <template v-else>
-      <template v-for="guest in guests">
-        <router-link :to="{ name: 'site.guest', params: { guest: guest.hash } }"
-          >{{ guest.name }} {{ guest.ip_address }}</router-link
-        >
-      </template>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>IP Address</th>
+            <th>Session Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-for="guest in guests">
+            <tr>
+              <td>
+                <router-link
+                  :to="{ name: 'site.guest', params: { guest: guest.hash } }"
+                  >{{ guest.name }}</router-link
+                >
+              </td>
+              <td>
+                {{ guest.ip_address }}
+              </td>
+              <td>
+                {{ guest.created_at }}
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
     </template>
-    <code>
-      <pre>{{ installScript }}</pre>
-    </code>
   </div>
 </template>
 
 <script>
 import Vue from "vue";
+import InstallScript from "@views/site/components/InstallScript";
 
 // TODO - implement
 // chat-message
 // mark-chat-message-as-read
 
 export default Vue.extend({
+  components: { InstallScript },
   watch: {
     $route: {
       immediate: true,
       handler() {
-        this.$store.dispatch("site/show", this.siteId);
         this.$store.dispatch("site/guest/get", this.siteId);
       },
     },
@@ -47,18 +67,6 @@ export default Vue.extend({
     guests() {
       return this.$store.state.site.guest.guests;
     },
-    installScript() {
-      return `
-
-      <script async src="${window.location.origin}/js/client.js"><\/script>
-      <script>
-        window.replayjsQueue = window.replayjsQueue || [];
-        function replayjs(){replayjsQueue.push(arguments);}
-        replayjs('auth', "${this.site.api_key}");
-        replayjs('record');
-      <\/script>
-      `;
-    },
   },
 });
 </script>
diff --git a/resources/js/views/site/SiteGuestSessions.vue b/resources/js/views/site/SiteGuestSessions.vue
index 07f0b83..335685d 100644
--- a/resources/js/views/site/SiteGuestSessions.vue
+++ b/resources/js/views/site/SiteGuestSessions.vue
@@ -17,7 +17,7 @@
     <div v-for="session in sessions">
       <router-link
         :to="{
-          name: 'site.guest.session.components',
+          name: 'site.guest.session',
           params: { site: $route.params.site, session: session.hash },
         }"
       >
diff --git a/resources/js/views/site/SiteSetup.vue b/resources/js/views/site/SiteSetup.vue
new file mode 100644
index 0000000..06f36ee
--- /dev/null
+++ b/resources/js/views/site/SiteSetup.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <install-script :site="site"></install-script>
+  </div>
+</template>
+<script>
+import Vue from "vue";
+import InstallScript from "@views/site/components/InstallScript";
+export default Vue.extend({
+  components: { InstallScript },
+  computed: {
+    site() {
+      return this.$store.state.site.site;
+    },
+  },
+});
+</script>
diff --git a/resources/js/views/site/areas/SiteArea.vue b/resources/js/views/site/areas/SiteArea.vue
index 86bedd6..e29b11e 100644
--- a/resources/js/views/site/areas/SiteArea.vue
+++ b/resources/js/views/site/areas/SiteArea.vue
@@ -1,6 +1,23 @@
 <template>
-  <div>
-    Site Area
+  <div class="site-area" v-if="site">
     <router-view></router-view>
   </div>
 </template>
+
+<script>
+export default {
+  watch: {
+    $route: {
+      immediate: true,
+      handler() {
+        this.$store.dispatch("site/show", this.$route.params.site);
+      },
+    },
+  },
+  computed: {
+    site() {
+      return this.$store.state.site.site;
+    },
+  },
+};
+</script>
diff --git a/resources/js/views/site/components/InstallScript.vue b/resources/js/views/site/components/InstallScript.vue
new file mode 100644
index 0000000..fc6dac9
--- /dev/null
+++ b/resources/js/views/site/components/InstallScript.vue
@@ -0,0 +1,27 @@
+<template>
+  <pre>{{ installScript }}</pre>
+</template>
+
+<script>
+export default {
+  props: {
+    site: {
+      required: true,
+    },
+  },
+  computed: {
+    installScript() {
+      return `
+
+      <script async src="${window.location.origin}/js/client.js"><\/script>
+      <script>
+        window.replayjsQueue = window.replayjsQueue || [];
+        function replayjs(){replayjsQueue.push(arguments);}
+        replayjs('auth', "${this.site.api_key}");
+        replayjs('record');
+      <\/script>
+      `;
+    },
+  },
+};
+</script>
diff --git a/resources/js/views/site/components/session-player/SessionPlayer.vue b/resources/js/views/site/components/session-player/SessionPlayer.vue
index 1340a7c..876c331 100644
--- a/resources/js/views/site/components/session-player/SessionPlayer.vue
+++ b/resources/js/views/site/components/session-player/SessionPlayer.vue
@@ -1,59 +1,76 @@
 <template>
   <div>
-    <div class="left-nav">
-      <h1>Scale</h1>
-      <pre>{{ scale }}</pre>
-      <h1>User is Live</h1>
-      <pre>{{ canViewLive }}</pre>
-      <button @click="goLive" :disabled="!canViewLive">
-        Connect To Stream
-      </button>
-    </div>
-    <pre>Current : {{ currentTime }}</pre>
-
-    <h1>Skip Inactivity</h1>
-    <pre>{{ skipInactivity }}</pre>
-    <button @click="skipInactivity = !skipInactivity">
-      Toggle Skip Activity
-    </button>
-
-    <h1>Speed</h1>
-    <pre>{{ playbackSpeed }}x</pre>
-
-    <button @click="changePlaybackSpeed(1)">x1</button>
-    <button @click="changePlaybackSpeed(1.25)">x1.25</button>
-    <button @click="changePlaybackSpeed(1.5)">x1.5</button>
-    <button @click="changePlaybackSpeed(2)">x2</button>
-
-    <h1>Current Activity Range</h1>
-    >>
-    <pre>{{ currentActivityRange }}</pre>
-    <<
-
-    <session-progress-bar
-      v-if="session"
-      @play="play"
-      @stop="stop"
-      @seek="seek"
-      :is-playing="isPlaying"
-      :current-time="currentTime"
-      :starting-time="startingTime"
-      :ending-time="endingTime"
-      :session="session"
-      :activity-ranges="activityRanges"
-    ></session-progress-bar>
-    <div>
-      <pre>IS LOADING : {{ isLoading }}</pre>
-      <div class="preview-box" ref="previewBox" :class="{ loading: isLoading }">
-        <div class="overlay" ref="overlay">
-          <div ref="clicks" id="clicks"></div>
-          <div ref="cursor" id="cursor"></div>
+    <div id="player-wrapper">
+      <div class="dev-tool">
+        dev tool
+      </div>
+
+      <div class="playback">
+        <pre>IS LOADING : {{ isLoading }}</pre>
+        <div
+          class="preview-box"
+          ref="previewBox"
+          :class="{ loading: isLoading }"
+        >
+          <div class="overlay" ref="overlay">
+            <div ref="clicks" id="clicks"></div>
+            <div ref="cursor" id="cursor"></div>
+          </div>
+          <iframe
+            ref="preview"
+            id="preview"
+            sandbox="allow-scripts allow-same-origin"
+          ></iframe>
         </div>
-        <iframe
-          ref="preview"
-          id="preview"
-          sandbox="allow-scripts allow-same-origin"
-        ></iframe>
+      </div>
+
+      <div class="information">
+        information
+
+        <h1>Scale</h1>
+        <pre>{{ scale }}</pre>
+        <h1>User is Live</h1>
+        <pre>{{ canViewLive }}</pre>
+        <button @click="goLive" :disabled="!canViewLive">
+          Connect To Stream
+        </button>
+
+        <pre>Current : {{ currentTime }}</pre>
+
+        <h1>Skip Inactivity</h1>
+        <pre>{{ skipInactivity }}</pre>
+        <button @click="skipInactivity = !skipInactivity">
+          Toggle Skip Activity
+        </button>
+
+        <h1>Speed</h1>
+        <pre>{{ playbackSpeed }}x</pre>
+
+        <button @click="changePlaybackSpeed(1)">x1</button>
+        <button @click="changePlaybackSpeed(1.25)">x1.25</button>
+        <button @click="changePlaybackSpeed(1.5)">x1.5</button>
+        <button @click="changePlaybackSpeed(2)">x2</button>
+
+        <h1>Current Activity Range</h1>
+        >>
+        <pre>{{ currentActivityRange }}</pre>
+        <<
+      </div>
+
+      <div class="controls">
+        controls
+        <session-progress-bar
+          v-if="session"
+          @play="play"
+          @stop="stop"
+          @seek="seek"
+          :is-playing="isPlaying"
+          :current-time="currentTime"
+          :starting-time="startingTime"
+          :ending-time="endingTime"
+          :session="session"
+          :activity-ranges="activityRanges"
+        ></session-progress-bar>
       </div>
     </div>
   </div>
diff --git a/resources/js/views/site/components/session-player/components/SessionProgressBar.vue b/resources/js/views/site/components/session-player/components/SessionProgressBar.vue
index 7c18de0..e917101 100644
--- a/resources/js/views/site/components/session-player/components/SessionProgressBar.vue
+++ b/resources/js/views/site/components/session-player/components/SessionProgressBar.vue
@@ -165,7 +165,6 @@ export default {
   border: 1px solid #ccc;
   background-color: #fff;
   height: 20px;
-  width: 80%;
   border-radius: 8px;
   display: flex;
   position: relative;
diff --git a/resources/js/views/site/index.ts b/resources/js/views/site/index.ts
index fd8def5..9d8782c 100644
--- a/resources/js/views/site/index.ts
+++ b/resources/js/views/site/index.ts
@@ -1,3 +1,4 @@
+import SiteSetup from "./SiteSetup.vue";
 import SiteArea from "./areas/SiteArea.vue";
 import SiteDashboard from "./SiteDashboard.vue";
 import SiteSessionPlayer from "./SiteSessionPlayer.vue";
@@ -5,6 +6,7 @@ import SiteGuestSessions from "./SiteGuestSessions.vue";
 
 export default {
   SiteArea,
+  SiteSetup,
   SiteDashboard,
   SiteSessionPlayer,
   SiteGuestSessions,
diff --git a/resources/sass/_base.scss b/resources/sass/_base.scss
index 94c16c6..f49dee3 100755
--- a/resources/sass/_base.scss
+++ b/resources/sass/_base.scss
@@ -1,8 +1,9 @@
 // BASE STYLES =============================================
 // =========================================================
-@import "base/normalize";
 @import "base/variables";
 @import "base/mixins";
+@import "base/fonts";
+@import "base/layout";
 
 // BASICS --------------------------------------------------
 // ---------------------------------------------------------
@@ -12,6 +13,8 @@
 
 body,
 html {
+  font-family: $font-body;
+  color: $color-text-primary;
 }
 
 body {
@@ -60,7 +63,8 @@ small {
     color: $blue;
   }
 
-  &-badge {
+  &-capitalize {
+    text-transform: capitalize;
   }
 }
 
@@ -86,6 +90,9 @@ h3,
 h4,
 h5,
 h6 {
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  font-family: $font-header;
   &.primary {
   }
 
@@ -93,12 +100,51 @@ h6 {
   }
 }
 
+h1,
+h2 {
+  font-weight: 100;
+}
+
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 1.5rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+}
+
+h3 {
+  font-size: 1rem;
+}
+
+h4 {
+  font-size: 0.75rem;
+}
+
+h5 {
+  font-size: 0.5rem;
+}
+
+h6 {
+  font-size: 0.25rem;
+}
+
 // LINKS ---------------------------------------------------
 // ---------------------------------------------------------
 a {
+  color: $color-text-link;
+  text-decoration: none;
   &:active,
   &:focus,
   &:hover {
+    color: $color-hover-link;
   }
 }
 
diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index eda64c6..4c6701c 100755
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -1,16 +1,31 @@
 // LAYOUT ==================================================
 // =========================================================
 
-$site-margin: 10px;
-$site-padding: 10px;
-
 // This would include any page layout stuff, like grid
 // to place any headers/footers/sidebars needed
 
 html,
 body,
 #app {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
 }
 
 #app {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-template-areas: "menu wrapper";
+}
+
+.wrapper {
+  grid-area: wrapper;
+
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.menu {
+  grid-area: menu;
 }
diff --git a/resources/sass/_modules.scss b/resources/sass/_modules.scss
index cc50848..66b60f1 100755
--- a/resources/sass/_modules.scss
+++ b/resources/sass/_modules.scss
@@ -2,9 +2,11 @@
 // =========================================================
 
 // LAYOUT MODULES
-@import "modules/site-header";
-@import "modules/site-footer";
+@import "modules/header";
 
 // CONTENT MODULES
 @import "modules/replay-logo";
 @import "modules/spinner";
+@import "modules/dropdown";
+@import "modules/nav";
+@import "modules/player";
diff --git a/resources/sass/base/_fonts.scss b/resources/sass/base/_fonts.scss
new file mode 100644
index 0000000..593b4be
--- /dev/null
+++ b/resources/sass/base/_fonts.scss
@@ -0,0 +1,3 @@
+@import "~@fortawesome/fontawesome-pro/scss/fontawesome";
+@import "~@fortawesome/fontawesome-pro/scss/brands";
+@import "~@fortawesome/fontawesome-pro/scss/light";
diff --git a/resources/sass/base/_layout.scss b/resources/sass/base/_layout.scss
new file mode 100644
index 0000000..574451c
--- /dev/null
+++ b/resources/sass/base/_layout.scss
@@ -0,0 +1,3 @@
+// SITE Margin / Padding
+$site-margin: 20px;
+$site-padding: 20px;
diff --git a/resources/sass/base/_mixins.scss b/resources/sass/base/_mixins.scss
index 1e13099..d873797 100755
--- a/resources/sass/base/_mixins.scss
+++ b/resources/sass/base/_mixins.scss
@@ -37,14 +37,13 @@
 
 // MATERIAL DESIGN CARD DEPTH ------------------------------
 // ---------------------------------------------------------
-@mixin card($depth) {
-  @if $depth < 1 {
-    box-shadow: none;
-  } @else if $depth > 5 {
-    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
-  } @else {
-    box-shadow: bottom-shadow($depth), top-shadow($depth);
-  }
+
+@function bottom-shadow($depth) {
+  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
+  $blur: nth(1 3 3 5 6, $depth) * 4px;
+  $color: rgba(black, nth(0.24 0.23 0.23 0.22 0.22, $depth));
+
+  @return 0 $primary-offset $blur $color;
 }
 
 @function top-shadow($depth) {
@@ -55,12 +54,14 @@
   @return 0 $primary-offset $blur $color;
 }
 
-@function bottom-shadow($depth) {
-  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
-  $blur: nth(1 3 3 5 6, $depth) * 4px;
-  $color: rgba(black, nth(0.24 0.23 0.23 0.22 0.22, $depth));
-
-  @return 0 $primary-offset $blur $color;
+@mixin card($depth) {
+  @if $depth < 1 {
+    box-shadow: none;
+  } @else if $depth > 5 {
+    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
+  } @else {
+    box-shadow: bottom-shadow($depth), top-shadow($depth);
+  }
 }
 
 @mixin status($status) {
@@ -78,7 +79,7 @@
   } @else if $status == warning {
     background-color: $yellow;
   } @else {
-    background-color: $grayLight;
+    background-color: $gray;
   }
 }
 
diff --git a/resources/sass/base/_variables.scss b/resources/sass/base/_variables.scss
index e3b610e..5ef5b3e 100755
--- a/resources/sass/base/_variables.scss
+++ b/resources/sass/base/_variables.scss
@@ -3,50 +3,52 @@
 
 // BASE COLORS
 // NOTE: do not use these outside of _variables
-$green: #83b692;
-$blue: #48acf0;
-$yellow: #fec07a;
+$green: #42b884;
+$blue: #85cbe5;
+$yellow: #f5ff77;
+$orange: #ffa147;
 $red: #f4645f;
-$purple: #8165c6;
 
 $white: #ffffff;
-$black: #2b2b2b;
-$gray: #3c3f41;
-$gray-dark: darken($gray, 10%);
-$gray-medium: darken($gray, 5%);
-$gray-light: #b6b6b6;
-$gray-xlight: #eeefef;
+$black: #525252;
+$gray: #dae1e7;
+$code: #f5f2f0;
 
 // COLOR DECLARATIONS
 // NOTE: use these for application variables
 $color-background: $white;
-$color-background-content: $gray-light;
+$color-background-content: darken($gray, 5%);
+$color-background-code: $code;
+$color-border: $gray;
+$color-border-accent: $green;
 
-$color-text-primary: $gray;
+$color-text-primary: $black;
 $color-text-secondary: $gray;
 $color-text-inverse-primary: $white;
-$color-text-inverse-secondary: $gray-light;
-$color-text-accent: $purple;
-$color-text-link: $blue;
+$color-text-inverse-secondary: darken($white, 10%);
+$color-text-accent: $green;
+$color-text-link: $green;
 
 $color-state-success: $green;
 $color-state-neutral: $blue;
-$color-state-warning: $yellow;
+$color-state-warning: $orange;
 $color-state-danger: $red;
 $color-state-null: $gray;
 
 $color-divider: mix($gray, $white, 20%);
 $color-divider-inverse: rgba($white, 0.1);
 
-$color-hover-overlay: rgba($gray, 0.3);
-$color-hover-overlay-inverse: rgba($gray-dark, 0.3);
+$color-hover-overlay: rgba($green, 0.3);
+$color-hover-overlay-inverse: rgba($green, 0.3);
 $color-hover-link: mix($black, $color-text-link, 30%);
 $color-hover-link-inverse: mix($white, $color-text-link, 40%);
 $color-hover-list: mix($color-text-link, $white, 5%);
 
 // FONT DECLARATIONS
-$font-body: "Proxima Nova", Arial, sans-serif;
+$font-body: "Open Sans", sans-serif;
 $font-body-size: 14px;
 $font-body-weight: 400;
-
+$font-header: Montserrat, sans-serif;
+$font-header-weight: 600;
+$font-monospace: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 $font-icon: "icomoon";
diff --git a/resources/sass/modules/_dropdown.scss b/resources/sass/modules/_dropdown.scss
new file mode 100644
index 0000000..abbb6ba
--- /dev/null
+++ b/resources/sass/modules/_dropdown.scss
@@ -0,0 +1,101 @@
+.dropdown {
+  position: relative;
+  text-transform: capitalize;
+  flex: 1 0 auto;
+  justify-content: center;
+  align-items: center;
+
+  .arrow {
+    display: inline-block;
+    height: 0.5rem;
+    width: 0.5rem;
+    border: 2px solid gray;
+    border-left: none;
+    border-bottom: none;
+    transform: rotate(45deg);
+    transition: all 0.2s ease;
+    position: relative;
+    top: -1px;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.open {
+    .arrow {
+      top: -4px;
+      transform: rotate(135deg);
+      transition: all 0.2s ease;
+    }
+  }
+
+  &__label {
+    padding-right: $site-padding;
+
+    &-icon {
+      position: absolute;
+      top: $site-margin;
+      right: $site-margin;
+    }
+  }
+
+  &--menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: -1px;
+    right: -1px;
+    background-color: $color-background;
+    border: 1px solid $color-border;
+
+    &-item {
+      display: block;
+      padding: 2rem 0;
+      text-align: center;
+
+      &:not(:last-child) {
+        border: 1px solid $color-border-accent;
+      }
+
+      &:hover {
+        color: $white;
+        cursor: pointer;
+        background-color: $color-border-accent;
+      }
+
+      &:first-child {
+        &:before {
+          display: block;
+          content: "";
+          border: 10px solid $color-border;
+          border-top: none;
+          border-right-color: transparent;
+          border-left-color: transparent;
+          position: absolute;
+          bottom: calc(100% + 1px);
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        &:after {
+          display: block;
+          content: "";
+          border: 10px solid $color-background-content;
+          border-top: none;
+          border-right-color: transparent;
+          border-left-color: transparent;
+          position: absolute;
+          bottom: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        &:hover {
+          &:after {
+            border-bottom-color: $color-border-accent;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/resources/sass/modules/_header.scss b/resources/sass/modules/_header.scss
new file mode 100644
index 0000000..76fc768
--- /dev/null
+++ b/resources/sass/modules/_header.scss
@@ -0,0 +1,127 @@
+.site-header {
+  display: flex;
+  flex-shrink: 0;
+  border-top: 5px solid $color-border-accent;
+  border-bottom: 1px solid $color-border;
+  position: sticky;
+  top: 0;
+  background-color: $color-background;
+  z-index: 900;
+
+  &__logo {
+    @include breakpoint(md) {
+      display: none !important;
+    }
+  }
+
+  &__mobile {
+    cursor: pointer;
+    display: none !important;
+    @include breakpoint(md) {
+      display: inline-block !important;
+    }
+    &.active {
+      background: lighten($color-border-accent, 30%);
+    }
+  }
+
+  &__search {
+    @include breakpoint(md) {
+      display: none !important;
+    }
+  }
+
+  > div:first-child {
+    max-width: 274px;
+
+    .logo {
+      max-width: 100%;
+      align-items: center;
+      padding: 4px 80px 0;
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+  > div {
+    border-left: 1px solid $gray;
+    display: flex;
+    flex: 1 0 auto;
+    > * {
+      &:not(.algolia-autocomplete) {
+        display: flex;
+        flex: 1 0 auto;
+        border-bottom: 1px solid transparent;
+      }
+    }
+
+    a {
+      &:hover {
+        border: 1px solid $gray;
+      }
+    }
+  }
+
+  .algolia-autocomplete {
+    flex: 1 1 auto;
+    #search {
+      font-size: 1rem;
+      width: 100%;
+      display: flex;
+      padding: 2rem 3.5rem 1.5rem;
+      border-bottom: 4px solid;
+      border-color: transparent;
+    }
+  }
+
+  .nav-dropdown {
+    display: flex;
+    max-width: 250px; // janice will tell me to fix this with basis
+    user-select: none;
+  }
+
+  .nav-button {
+    flex: 0 1 120px;
+
+    @include breakpoint(md) {
+      padding: 1rem 1.75rem 0.75rem;
+    }
+
+    @include breakpoint(sm) {
+      flex: 1 1 auto;
+    }
+
+    a {
+      &:hover {
+        border: none !important;
+      }
+    }
+
+    a,
+    span {
+      align-items: center;
+      justify-content: center;
+      border-bottom: 2px solid transparent;
+    }
+  }
+}
+
+.search-area {
+  margin: 0;
+  li {
+    display: flex;
+    flex: 1 1 auto;
+    span {
+      display: flex;
+      flex: 1 1 auto;
+
+      #menu-search {
+        width: 100%;
+        padding-left: 1rem;
+        line-height: 3rem;
+        font-size: 1.25rem;
+        border: 1px solid lighten($color-text-primary, 50%);
+      }
+    }
+  }
+}
diff --git a/resources/sass/modules/_nav.scss b/resources/sass/modules/_nav.scss
new file mode 100644
index 0000000..5cf92a8
--- /dev/null
+++ b/resources/sass/modules/_nav.scss
@@ -0,0 +1,29 @@
+.menu {
+  border-right: 1px solid $color-border;
+}
+
+.nav {
+  white-space: nowrap;
+
+  ul {
+    padding: 0;
+    list-style: none;
+
+    a {
+      display: block;
+      padding: $site-padding;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $color-text-primary;
+        border-right: 5px solid $color-text-accent;
+        background-color: lighten($color-text-accent, 45%);
+      }
+
+      &.router-link-active {
+        border-right: 5px solid $color-border-accent;
+      }
+    }
+  }
+}
diff --git a/resources/sass/modules/_player.scss b/resources/sass/modules/_player.scss
new file mode 100644
index 0000000..8d4dd80
--- /dev/null
+++ b/resources/sass/modules/_player.scss
@@ -0,0 +1,26 @@
+#player-wrapper {
+  display: grid;
+  grid-template-rows: min-content 1fr min-content;
+  grid-template-columns: 2fr 1fr;
+  grid-template-areas:
+    "dev-tool information"
+    "playback information"
+    "controls controls";
+}
+
+.dev-tool {
+  grid-area: dev-tool;
+}
+
+.information {
+  grid-area: information;
+}
+
+.playback {
+  min-width: 0;
+  grid-area: playback;
+}
+
+.controls {
+  grid-area: controls;
+}
diff --git a/resources/sass/modules/site-footer.scss b/resources/sass/modules/site-footer.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/resources/sass/modules/site-header.scss b/resources/sass/modules/site-header.scss
deleted file mode 100755
index ebd1516..0000000
--- a/resources/sass/modules/site-header.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.site-header {
-  display: flex;
-  flex-shrink: 0;
-
-  &__nav-item {
-    padding: $site-padding;
-  }
-}
diff --git a/webpack.config.js b/webpack.config.js
index a96c097..484cfd2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -70,8 +70,6 @@ module.exports = function(env) {
     .chainWebpack((config) => {
       config.module.rules.delete("html");
       config.module.rules.delete("javascript");
-      config.module.rules.delete("fonts");
-      config.module.rules.delete("images");
 
       config.plugins.delete("html");
       config.plugins.delete("clean");