diff --git a/frontend/README.md b/frontend/README.md
index 242c84a..a5f235c 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -45,6 +45,10 @@ Give Speckle a try in no time by:
 
 # Repo structure
 
+> TBD!!!
+
+- `frontend/`
+- `backend/`
 
 ### Other repos
 
diff --git a/frontend/app-guide-full-demo.gif b/frontend/app-guide-full-demo.gif
deleted file mode 100644
index 88358cb..0000000
Binary files a/frontend/app-guide-full-demo.gif and /dev/null differ
diff --git a/frontend/app-guide-main-img.jpg b/frontend/app-guide-main-img.jpg
deleted file mode 100644
index 8f33d82..0000000
Binary files a/frontend/app-guide-main-img.jpg and /dev/null differ
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7436a48..b396f40 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1231,14 +1231,6 @@
         "@types/node": "*"
       }
     },
-    "@types/chart.js": {
-      "version": "2.9.34",
-      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.34.tgz",
-      "integrity": "sha512-CtZVk+kh1IN67dv+fB0CWmCLCRrDJgqOj15qPic2B1VCMovNO6B7Vhf/TgPpNscjhAL1j+qUntDMWb9A4ZmPTg==",
-      "requires": {
-        "moment": "^2.10.2"
-      }
-    },
     "@types/connect": {
       "version": "3.4.34",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
@@ -1752,6 +1744,16 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1778,6 +1780,34 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "fs-extra": {
           "version": "7.0.1",
           "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
@@ -1789,6 +1819,25 @@
             "universalify": "^0.1.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1805,6 +1854,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1821,6 +1880,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
+          "integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -2158,11 +2229,6 @@
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true
     },
-    "almost-equal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/almost-equal/-/almost-equal-1.1.0.tgz",
-      "integrity": "sha1-+FHGMROHV5lCdqou++jfowZszN0="
-    },
     "alphanum-sort": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
@@ -3111,32 +3177,6 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
-    "chart.js": {
-      "version": "2.9.4",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
-      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
-      "requires": {
-        "chartjs-color": "^2.1.0",
-        "moment": "^2.10.2"
-      }
-    },
-    "chartjs-color": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
-      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
-      "requires": {
-        "chartjs-color-string": "^0.6.0",
-        "color-convert": "^1.9.3"
-      }
-    },
-    "chartjs-color-string": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
-      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
-      "requires": {
-        "color-name": "^1.0.0"
-      }
-    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -3222,11 +3262,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "clamp": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
-      "integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
-    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -3470,42 +3505,16 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
     },
-    "color-interpolate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/color-interpolate/-/color-interpolate-1.0.5.tgz",
-      "integrity": "sha512-EcWwYtBJdbeHyYq/y5QwVWLBUm4s7+8K37ycgO9OdY6YuAEa0ywAY+ItlAxE1UO5bXW4ugxNhStTV3rsTZ35ZA==",
-      "requires": {
-        "clamp": "^1.0.1",
-        "color-parse": "^1.2.0",
-        "color-space": "^1.14.3",
-        "lerp": "^1.0.3"
-      }
-    },
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-    },
-    "color-parse": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-1.4.2.tgz",
-      "integrity": "sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==",
-      "requires": {
-        "color-name": "^1.0.0"
-      }
-    },
-    "color-space": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/color-space/-/color-space-1.16.0.tgz",
-      "integrity": "sha512-A6WMiFzunQ8KEPFmj02OnnoUnqhmSaHaZ/0LVFcPTdlvm8+3aMJ5x1HRHy3bDHPkovkf4sS0f4wsVvwk71fKkg==",
-      "requires": {
-        "hsluv": "^0.0.3",
-        "mumath": "^3.3.4"
-      }
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
     },
     "color-string": {
       "version": "1.5.5",
@@ -3523,21 +3532,6 @@
       "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
       "dev": true
     },
-    "colorjs.io": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.0.3.tgz",
-      "integrity": "sha512-JEqrQTV5eWOlDCgw+B3pPwaQuS7JG0il0SfMg2ucFt69Le5TtKJ/ENE2/NAsCBJYiEnACAEjQmf7VHedwlbMQw==",
-      "requires": {
-        "acorn": "^7.3.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
-        }
-      }
-    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -6091,11 +6085,6 @@
       "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
       "dev": true
     },
-    "hsluv": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz",
-      "integrity": "sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw="
-    },
     "html-entities": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
@@ -7212,11 +7201,6 @@
         "launch-editor": "^2.2.1"
       }
     },
-    "lerp": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/lerp/-/lerp-1.0.3.tgz",
-      "integrity": "sha1-oYyJaPkXiW3hXM/MKNVaa3Med24="
-    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -7747,11 +7731,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "moment": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -7788,14 +7767,6 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
-    "mumath": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/mumath/-/mumath-3.3.4.tgz",
-      "integrity": "sha1-SNSg8P2MrU57Mglu6JsWGmPTC78=",
-      "requires": {
-        "almost-equal": "^1.1.0"
-      }
-    },
     "mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -11452,14 +11423,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
-    "vue-chartjs": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-3.5.1.tgz",
-      "integrity": "sha512-foocQbJ7FtveICxb4EV5QuVpo6d8CmZFmAopBppDIGKY+esJV8IJgwmEW0RexQhxqXaL/E1xNURsgFFYyKzS/g==",
-      "requires": {
-        "@types/chart.js": "^2.7.55"
-      }
-    },
     "vue-cli-plugin-vuetify": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.3.1.tgz",
@@ -11550,87 +11513,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.1.tgz",
-      "integrity": "sha512-V53TJbHmzjBhCG5OYI2JWy/aYDspz4oVHKxS43Iy212GjGIG1T3EsB3+GWXFm/1z5VwjdjLmdZUFYM70y77vtQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e0fefe3..686b529 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,16 +10,12 @@
   "dependencies": {
     "@speckle/objectloader": "^2.1.1",
     "@speckle/viewer": "^2.1.1",
-    "chart.js": "^2.9.4",
-    "color-interpolate": "^1.0.5",
-    "colorjs.io": "^0.0.3",
     "core-js": "^3.6.5",
     "debounce": "^1.2.1",
     "lodash": "^4.17.21",
     "lodash.throttle": "^4.1.1",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
-    "vue-chartjs": "^3.5.1",
     "vue-router": "^3.2.0",
     "vue-timeago": "^5.1.3",
     "vuetify": "^2.4.11",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 284c95a..ccc2f6f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,65 +1,81 @@
-<template>
+<template lang="html">
   <v-app>
-    <v-app-bar
-        app
-        color="primary"
-        dark
-        dense
-    >
+    <v-app-bar app color="primary" dark dense>
       <v-btn text link to="/" small>
-        <v-img class="mr-2" src="@/assets/img.png" height="14" width="14"/>
-        <v-badge offset-y="7px" offset-x="0px" color="error" content="alpha">
-          <h3 class="text--white">Revit Dash</h3>
+        <v-img class="mr-2" src="@/assets/img.png" height="14" width="14" />
+        <v-badge
+          offset-y="7px"
+          offset-x="0px"
+          color="error"
+          content="master class"
+        >
+          <h3 class="text--white">AEC Tech</h3>
         </v-badge>
       </v-btn>
 
       <v-spacer></v-spacer>
 
-      <stream-search v-if="isAuthenticated" @selected="$router.push(`/streams/${$event.id}`)"/>
+      <stream-search
+        v-if="isAuthenticated"
+        @selected="$router.push(`/streams/${$event.id}`)"
+      />
 
       <v-spacer></v-spacer>
 
-      <div>
-        <v-tooltip bottom max-width="500" color="warning" v-if="alertAccepted">
-          <template v-slot:activator="{ on, attrs }">
-            <v-icon v-bind="attrs" v-on="on" class="mr-3" color="warning">mdi-alert-outline</v-icon>
-          </template>
-          <span>This app is still in <b>ALPHA</b> stage; meaning some things may not work as expected.</span>
-        </v-tooltip>
-      </div>
-
       <div>
         <v-tooltip left>
           <template v-slot:activator="{ on, attrs }">
-            <v-btn x-small v-bind="attrs" v-on="on" icon link href="https://speckle.community" target="_blank" class="mr-3">
+            <v-btn
+              x-small
+              v-bind="attrs"
+              v-on="on"
+              icon
+              link
+              href="https://speckle.community"
+              target="_blank"
+              class="mr-3"
+            >
               <v-icon size="x-large">mdi-help-circle-outline</v-icon>
             </v-btn>
           </template>
-          <span>Have any questions? <b>Join our Community!</b></span>
+          <span>
+            Have any questions?
+            <b>Join our Community!</b>
+          </span>
         </v-tooltip>
       </div>
 
       <v-btn
-          class="ma-2"
-          small
-          outlined
-          v-if="!isAuthenticated"
-          @click="$store.dispatch('redirectToAuth')"
+        class="ma-2"
+        small
+        outlined
+        v-if="!isAuthenticated"
+        @click="$store.dispatch('redirectToAuth')"
       >
-        <v-img class="mr-2" src="@/assets/img.png" height="14" width="14"/>
+        <v-img class="mr-2" src="@/assets/img.png" height="14" width="14" />
         <span>Login/Register</span>
       </v-btn>
       <v-menu v-else offset-y open-on-hover>
         <template v-slot:activator="{ on, attrs }">
           <v-avatar v-bind="attrs" v-on="on" size="32" color="grey lighten-3">
-            <v-img v-if="$store.state.user.avatar" :src="$store.state.user.avatar"/>
-            <v-img v-else :src="`https://robohash.org/${$store.user.id}.png?size=32x32`"/>
+            <v-img
+              v-if="$store.state.user.avatar"
+              :src="$store.state.user.avatar"
+            />
+            <v-img
+              v-else
+              :src="`https://robohash.org/${$store.user.id}.png?size=32x32`"
+            />
           </v-avatar>
         </template>
         <v-list dense nav subheader id="login-menu">
           <v-subheader class="caption">Logged in as:</v-subheader>
-          <p class="caption ml-3 mb-1">{{ $store.state.user.name }} <span
-              v-if="$store.state.user.email">({{ $store.state.user.email }})</span></p>
+          <p class="caption ml-3 mb-1">
+            {{ $store.state.user.name }}
+            <span v-if="$store.state.user.email">
+              ({{ $store.state.user.email }})
+            </span>
+          </p>
           <v-divider class="ma-1"></v-divider>
           <v-list-item link :href="`${serverUrl}/profile`" target="_blank">
             <v-list-item-title>Go to profile</v-list-item-title>
@@ -67,7 +83,11 @@
               <v-icon small>mdi-account</v-icon>
             </v-list-item-icon>
           </v-list-item>
-          <v-list-item link href="https://speckle.systems/tutorials/revit-dash/" target="_blank">
+          <v-list-item
+            link
+            href="https://speckle.systems/tutorials/revit-dash/"
+            target="_blank"
+          >
             <v-list-item-title>Feedback</v-list-item-title>
             <v-list-item-icon>
               <v-icon small>mdi-message-alert-outline</v-icon>
@@ -83,72 +103,43 @@
       </v-menu>
     </v-app-bar>
 
-    <div class="floating d-flex justify-end align-end">
-      <v-alert prominent v-if="alert"  color="error" max-width="60%">
-        <v-row align="center">
-          <v-col class="grow white--text">
-            This app is still in <b>ALPHA</b> stage; meaning some things may not work as expected. You can provide feedback on our <a src="https://speckle.community" class="font-weight-bold white--text text-decoration-underline">Community Forum</a>
-          </v-col>
-          <v-col class="shrink">
-            <v-btn outlined color="white" @click="alertOk">OK</v-btn>
-          </v-col>
-        </v-row>
-      </v-alert>
-    </div>
-
     <v-main>
       <transition name="fade">
-        <router-view/>
+        <router-view />
       </transition>
     </v-main>
   </v-app>
 </template>
 
 <script>
-import StreamSearch from "@/components/StreamSearch";
+import StreamSearch from "@/components/StreamSearch"
 
 export default {
-  name: 'App',
-  components: {StreamSearch},
+  name: "App",
+  components: { StreamSearch },
   data() {
     return {
-      serverUrl: process.env.VUE_APP_SERVER_URL,
-      alert: true,
-      alertAccepted: false
-    }
-  },
-  mounted() {
-    let seen = localStorage.getItem(process.env.VUE_APP_SPECKLE_NAME + ".alphaDisclaimerSeen")
-    if(seen == "true"){
-      this.alert = false
-      this.alertAccepted = true
+      serverUrl: process.env.VUE_APP_SERVER_URL
     }
   },
   computed: {
     isAuthenticated() {
       return this.$store.getters.isAuthenticated
-    },
-  },
-  methods: {
-    alertOk(){
-      console.log("alert ok'd")
-      localStorage.setItem(process.env.VUE_APP_SPECKLE_NAME + ".alphaDisclaimerSeen", true)
-      this.alert = false
-      this.alertAccepted = true
     }
   }
-};
+}
 </script>
 
 <style lang="scss">
-$heading-font-family: 'Space Grotesk';
+$heading-font-family: "Space Grotesk";
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
 }
 
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
-{
+ {
   opacity: 0;
 }
 
@@ -158,4 +149,4 @@ $heading-font-family: 'Space Grotesk';
   right: 2em;
   z-index: 1;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/RevitDashboard.vue b/frontend/src/components/RevitDashboard.vue
deleted file mode 100644
index 32049fb..0000000
--- a/frontend/src/components/RevitDashboard.vue
+++ /dev/null
@@ -1,358 +0,0 @@
-<template>
-  <div>
-    <revit-project-info :info="info" :stream="stream" :totals="totals"/>
-    <v-row>
-      <v-col cols="12">
-        <v-card max-height="500px" outlined>
-          <v-card-title>Objects by category</v-card-title>
-          <v-card-text>
-            <doughnut-chart ref="doughnut" v-if="objsByCategoryData" :chart-data="objsByCategoryData"
-                            :options="doughnutOptions"></doughnut-chart>
-          </v-card-text>
-        </v-card>
-      </v-col>
-      <v-col lg="6" sm="12" xs="12">
-        <v-card max-height="500px" min-height="500px" outlined>
-          <v-card-title>Elements Per Level/Category</v-card-title>
-          <v-card-text>
-            <horizontal-barchart v-if="objsByLevelData" :chart-data="objsByLevelData"
-                                 :options="options"></horizontal-barchart>
-          </v-card-text>
-        </v-card>
-      </v-col>
-      <v-col lg="6" sm="12" xs="12">
-        <v-card max-height="500px" min-height="500px" outlined>
-          <v-card-title>Families<v-badge inline :content="totals.families"></v-badge> and Types <v-badge inline :content="totals.types"></v-badge></v-card-title>
-          <v-card-subtitle>
-            <v-text-field dense clearable prepend-icon="mdi-filter" placeholder="Filter all family types"
-                          v-model="typeFilter"></v-text-field>
-          </v-card-subtitle>
-          <v-card-text>
-            <v-treeview dense :items="familyTypeTree" :search="typeFilter"></v-treeview>
-
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </div>
-</template>
-
-<script>
-import ObjectLoader from '@speckle/objectloader'
-import HorizontalBarchart from "@/components/charts/HorizontalBarchart";
-import interpolate from "color-interpolate";
-import DoughnutChart from "@/components/charts/DoughnutChart";
-import RevitProjectInfo from "@/components/RevitProjectInfo";
-import {TOKEN} from "@/speckleUtils";
-
-function debounce(callback, wait) {
-  let timerId;
-  return (...args) => {
-    clearTimeout(timerId);
-    timerId = setTimeout(() => {
-      callback(...args);
-    }, wait);
-  };
-}
-
-export default {
-  name: "RevitDashboard",
-  components: {RevitProjectInfo, DoughnutChart, HorizontalBarchart},
-  props: ["streamId", "objectId", "revitData", "info", "stream"],
-  data() {
-    return {
-      familyTypeTree: [],
-      typeFilter: "",
-      loader: null,
-      objsPerLevel: null,
-      colorRange: interpolate(["#047EFB", "#4caf50"]),
-      availableLevels: {},
-      availableFamTypes: null,
-      totals: {
-        levels: 0,
-        elements: 0,
-        views: 0,
-        families: 0,
-        types: 0
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            stacked: true,
-            categoryPercentage: 0.5,
-            barPercentage: 1
-          }],
-          yAxes: [{
-            stacked: true
-          }]
-        }
-      },
-      doughnutOptions: {
-        responsive: true,
-        maintainAspectRatio: false,
-        legend: {
-          position: 'left',
-          onClick: (e, legendItem) => {
-            this.$emit("legend-clicked", e, legendItem)
-          }
-        },
-        pieceLabel: {
-          mode: 'value',
-          precision: 0,
-          fontSize: 18,
-          fontColor: '#fff',
-          fontStyle: 'bold',
-        }
-      },
-    }
-  },
-  computed: {
-    objsByLevelData() {
-      // Fast exit if no object has been set yet
-      if (!this.objsPerLevel) return null
-
-      var labels = []
-      var dataSets = []
-      var count = 0
-      // Loop through categories
-      for (const [key, value] of Object.entries(this.objsPerLevel)) {
-        // Create empty data set
-        let dataSet = {
-          label: key,
-          backgroundColor: this.colorRange(count / Object.keys(this.objsPerLevel).length),
-          data: []
-        }
-        count++
-        // Loop through levels on each category
-        for (const [lvlKey, lvlValue] of Object.entries(value)) {
-          // Append level name to labels if it hasn't already
-          if (labels.indexOf(lvlKey) === -1) labels.push(lvlKey)
-          // Push category count per level to dataset data
-          dataSet.data.push(Object.keys(lvlValue).length)
-        }
-        // Add dataset to list
-        dataSets.push(dataSet)
-      }
-      return {
-        labels,
-        datasets: dataSets,
-      }
-    },
-    objsByCategoryData() {
-      // Fast exit if no object has been set yet
-      if (!this.objsPerLevel) return null
-
-      var labels = []
-      var count = 0
-      let dataSet = {
-        backgroundColor: [],
-        data: []
-      }
-      // Loop through categories
-      for (const [key, value] of Object.entries(this.objsPerLevel)) {
-        // Loop through levels on each category
-        labels.push(key)
-        dataSet.backgroundColor.push(this.colorRange(count / Object.keys(this.objsPerLevel).length))
-        var total = 0
-        for (const [_, lvlValue] of Object.entries(value)) {
-          // Push category count per level to dataset data
-          total += Object.keys(lvlValue).length
-        }
-        dataSet.data.push(total)
-        count++
-      }
-      return {
-        labels,
-        datasets: [dataSet],
-      }
-
-    }
-  },
-  async mounted() {
-    this.processStreamObjects()
-  },
-  watch: {
-    streamId: {
-      handler: function (val, oldVal) {
-        this.processStreamObjects()
-      }
-    },
-    objectId: {
-      handler: function (val, oldVal) {
-        this.processStreamObjects()
-      }
-    },
-    availableFamTypes: {
-      handler: function(val, oldVal) {
-        this.familyTypeTree = this.famTypeTree();
-      }
-    }
-  },
-  methods: {
-    famTypeTree() {
-      var totalFams = 0
-      var totalTypes = 0
-      if (!this.availableFamTypes) return []
-      var id = 0;
-      var items = []
-      // Iterate through the categories
-      Object.entries(this.availableFamTypes).forEach(([key, val]) => {
-        var children = []
-        // Iterate through the families
-        Object.entries(val).forEach(([childKey, childVal]) => {
-          var grandChilds = []
-          // Iterate through available types
-          Object.entries(childVal).forEach(([grandKey, grandVal]) => {
-            grandChilds.push({
-              id: id++,
-              name: grandKey
-            })
-            totalTypes++
-          })
-          children.push({
-            id: id++,
-            name: childKey,
-            children: grandChilds
-          })
-          totalFams++
-        })
-        items.push({
-          id: id++,
-          name: key,
-          children: children
-        })
-      })
-      this.totals.families = totalFams
-      this.totals.types = totalTypes
-      return items
-    },
-    async processStreamObjects() {
-      this.$emit("loaded", false)
-      this.$emit("progress", 0)
-
-      this.loader = new ObjectLoader({
-        serverUrl: process.env.VUE_APP_SERVER_URL,
-        streamId: this.stream.id,
-        objectId: this.objectId,
-        token: localStorage.getItem(TOKEN)
-      })
-
-      function shouldIgnore(obj) {
-        return obj.speckle_type.startsWith("Objects.Geometry") ||
-            obj.speckle_type.endsWith("DataChunk") ||
-            obj.speckle_type.endsWith("GridLine") ||
-            obj.speckle_type.endsWith("ElementType") ||
-            obj.speckle_type === "Base" ||
-            obj.speckle_type.endsWith("ProjectInfo")
-      }
-
-      // Initialize placeholders
-      const typeCategoryMap = {}
-      const objectsPerLevel = {}
-      const availableCategoriesAndTypes = {}
-      const availableLevels = {}
-      var totalViews = 0
-      var totalElements = 0
-      var total = 0
-      var count = 0
-      var d = debounce(() => {
-
-      }, 10)
-      for await (let obj of this.loader.getObjectIterator()) {
-        if (!total) total = obj.totalChildrenCount
-        var progress = Math.floor((count * 100) / total)
-        this.$emit("progress", progress)
-        count++
-        // Get all types in the document
-        if (obj.speckle_type.endsWith("ElementType")) {
-          typeCategoryMap[obj.type] = obj.category // Map type to category
-
-          // Ensure structure exists
-          if (!availableCategoriesAndTypes[obj.category])
-            availableCategoriesAndTypes[obj.category] = {}
-          if (!availableCategoriesAndTypes[obj.category][obj.family])
-            availableCategoriesAndTypes[obj.category][obj.family] = {}
-
-          // Assign
-          availableCategoriesAndTypes[obj.category][obj.family][obj.type] = obj
-          continue
-        }
-
-        // Get all views in the document
-        if (obj.speckle_type === "Objects.BuiltElements.View" || obj.speckle_type === "Objects.BuiltElements.View:Objects.BuiltElements.View3D") {
-          totalViews++
-          continue
-        }
-
-        // Should we ignore this object?
-        if (shouldIgnore(obj)) continue
-
-        // Increase element count
-        totalElements++
-
-        var rvtType = obj.type || "Other"
-        var lvl = obj.level?.name || "No level"
-
-        // If object has level, cache it.
-        if (lvl !== "No level" && !availableLevels[lvl]) {
-          availableLevels[lvl] = obj.level
-        }
-
-        // Make sure nested structure exists
-        if (!objectsPerLevel[rvtType])
-          objectsPerLevel[rvtType] = {}
-        if (!objectsPerLevel[rvtType][lvl])
-          objectsPerLevel[rvtType][lvl] = {}
-
-        // Assign obj
-        objectsPerLevel[rvtType][lvl][obj.elementId] = obj
-      }
-
-      // Load has finished, post-process data
-
-      // Organize categories per level
-      var catsPerLevel = {}
-      Object.keys(objectsPerLevel).forEach(fam => {
-        var value = objectsPerLevel[fam]
-        var cat = typeCategoryMap[fam]
-        if (!catsPerLevel[cat]) catsPerLevel[cat] = {}
-        Object.keys(value).forEach(levelKey => {
-          if (!catsPerLevel[cat][levelKey]) catsPerLevel[cat][levelKey] = {}
-          catsPerLevel[cat][levelKey] = {...catsPerLevel[cat][levelKey], ...objectsPerLevel[fam][levelKey]}
-        })
-      })
-
-      this.objsPerLevel = catsPerLevel
-      this.availableFamTypes = availableCategoriesAndTypes
-      this.availableLevels = availableLevels
-      this.totals.levels = Object.keys(this.availableLevels).length
-      this.totals.views = totalViews
-      this.totals.elements = totalElements
-
-      this.$emit("loaded", true)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.scroll-box {
-  overflow: scroll;
-  padding: 1em;
-}
-
-.v-card {
-  display: flex !important;
-  flex-direction: column;
-}
-
-.v-card__text {
-  flex-grow: 1;
-  overflow: auto;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/RevitProjectInfo.vue b/frontend/src/components/RevitProjectInfo.vue
deleted file mode 100644
index 3a1c992..0000000
--- a/frontend/src/components/RevitProjectInfo.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <v-row>
-    <v-col lg="6" sm="12" xs="12">
-      <v-card outlined class="d-flex flex-column fill-height">
-        <span class="d-flex justify-center grey--text body-2 mb-0 mt-1">Stream details</span>
-        <v-card-title>
-          {{ stream.name }}
-          <v-btn outlined color="primary" x-small class="ml-3" :href="serverUrl+'/streams/'+stream.id" target="_blank">View in Speckle.xyz</v-btn>
-        </v-card-title>
-        <v-card-subtitle>
-          You are viewing the latest commit on this stream
-        </v-card-subtitle>
-        <v-card-text style="min-height: 180px; height:100%">
-            <renderer show-selection-helper :object-urls="objectUrl"/>
-        </v-card-text>
-      </v-card>
-    </v-col>
-    <v-col lg="6" sm="12" xs="12" class="d-flex flex-column">
-        <v-card v-if="projectInfo" outlined class="d-flex flex-column fill-height">
-          <span class="d-flex justify-center grey--text body-2 mb-0 mt-1">Revit project overview</span>
-          <v-card-title>{{ projectInfo.name }} {{ projectInfo.number }}<span
-              class="d-flex align-center text-body-2 grey--text border pl-2">
-          <v-icon size="medium" color="grey"
-                  class="pr-1">mdi-home-circle-outline</v-icon>{{ projectInfo.address }}</span>
-          </v-card-title>
-          <v-card-subtitle class="d-flex align-center">
-            <v-icon size="small" class="pr-1">mdi-account-circle-outline</v-icon>
-            {{ projectInfo.author }}
-            <v-icon size="small" class="pr-1 pl-2">mdi-calendar-check-outline</v-icon>
-            {{ projectInfo.status }}
-          </v-card-subtitle>
-          <v-row wrap dense class="d-flex align-center justify-center ma-3">
-            <v-col v-for="(item, key) in totals" :key="key" class="col-4 d-flex flex-column justify-center align-center flex-fill">
-              <div class="d-flex flex-column justify-center align-center flex-fill">
-                <p class="text-md-h2 mb-0 primary--text">{{ item }}</p>
-                <p class="pb-0 ma-0 primary--text caption">{{ key.toUpperCase() }}</p>
-              </div>
-            </v-col>
-          </v-row>
-        </v-card>
-        <v-card v-else outlined class="d-flex justify-center align-center" height="100%">
-          <v-card-subtitle>No project info was sent on this commit</v-card-subtitle>
-        </v-card>
-    </v-col>
-  </v-row>
-</template>
-
-<script>
-import {getStreamObject} from "@/speckleUtils";
-import Renderer from "@/components/Renderer";
-
-export default {
-  name: "RevitProjectInfo",
-  components: {Renderer},
-  props: ["info", "stream", "totals"],
-  data() {
-    return {
-      projectInfo: null,
-      serverUrl: process.env.VUE_APP_SERVER_URL,
-    }
-  },
-  computed: {
-    objectUrl() {
-      return [`${this.serverUrl}/streams/${this.stream.id}/objects/${this.stream.commits.items[0].referencedObject}`]
-    }
-  },
-  watch: {
-    info: {
-      deep: true,
-      immediate: true,
-      handler: async function (val, oldVal) {
-        if (!val) return
-        var id = this.$route.params.id
-        var res = await getStreamObject(id, this.info[0].referencedId)
-        this.projectInfo = res
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.renderer-parent {
-  height: 200px;
-  width: 400px;
-  background-color: antiquewhite;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/StreamSearch.vue b/frontend/src/components/StreamSearch.vue
index e7794ba..c36c3dc 100644
--- a/frontend/src/components/StreamSearch.vue
+++ b/frontend/src/components/StreamSearch.vue
@@ -1,23 +1,23 @@
-<template>
+<template lang="html">
   <v-autocomplete
-      v-model="selectedSearchResult"
-      :items="streams.items"
-      :search-input.sync="search"
-      no-filter
-      counter="2"
-      rounded
-      filled
-      dense
-      flat
-      hide-no-data
-      hide-details
-      placeholder="Streams Search"
-      item-text="name"
-      item-value="id"
-      return-object
-      clearable
-      append-icon=""
-      @update:search-input="debounceInput"
+    v-model="selectedSearchResult"
+    :items="streams.items"
+    :search-input.sync="search"
+    no-filter
+    counter="2"
+    rounded
+    filled
+    dense
+    flat
+    hide-no-data
+    hide-details
+    placeholder="Streams Search"
+    item-text="name"
+    item-value="id"
+    return-object
+    clearable
+    append-icon=""
+    @update:search-input="debounceInput"
   >
     <template #item="{ item }" color="background">
       <v-list-item-content>
@@ -25,7 +25,9 @@
           <v-row class="pa-0 ma-0">
             {{ item.name }}
             <v-spacer></v-spacer>
-            <span class="primary rounded white--text pl-1 pr-1 caption">{{ item.id }}</span>
+            <span class="primary rounded white--text pl-1 pr-1 caption">
+              {{ item.id }}
+            </span>
           </v-row>
         </v-list-item-title>
         <v-list-item-subtitle class="caption primary--text">
@@ -38,22 +40,21 @@
 </template>
 
 <script>
-import {debounce} from "debounce"
-import {searchStreams} from "@/speckleUtils";
+import { debounce } from "debounce"
+import { searchStreams } from "@/speckleUtils"
 
 export default {
   name: "StreamSearch",
   data: () => ({
     search: "",
-    streams: {items: []},
+    streams: { items: [] },
     selectedSearchResult: null
   }),
   watch: {
     selectedSearchResult(val) {
       this.search = ""
       this.streams.items = []
-      if (val)
-        this.$emit("selected", val)
+      if (val) this.$emit("selected", val)
     }
   },
   methods: {
@@ -62,14 +63,11 @@ export default {
       var json = await searchStreams(e)
       this.streams = json.data.streams
     },
-    debounceInput: debounce(function (e) {
+    debounceInput: debounce(function(e) {
       this.fetchSearchResults(e)
     }, 300)
   }
 }
-
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/frontend/src/components/charts/DoughnutChart.js b/frontend/src/components/charts/DoughnutChart.js
deleted file mode 100644
index ac511d0..0000000
--- a/frontend/src/components/charts/DoughnutChart.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Doughnut, mixins } from 'vue-chartjs'
-import Chart from "chart.js"
-const { reactiveProp } = mixins
-
-export default {
-  extends: Doughnut,
-  mixins: [reactiveProp],
-  props: ['options'],
-  data(){
-    return {
-      oldClick: Chart.defaults.global.legend.onClick
-    }
-  },
-  mounted () {
-    // this.chartData is created in the mixin.
-    // If you want to pass options please create a local options object
-    this.renderChart(this.chartData, this.options)
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/components/charts/HorizontalBarchart.js b/frontend/src/components/charts/HorizontalBarchart.js
deleted file mode 100644
index 0874651..0000000
--- a/frontend/src/components/charts/HorizontalBarchart.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { HorizontalBar, mixins } from 'vue-chartjs'
-const { reactiveProp } = mixins
-
-export default {
-  extends: HorizontalBar,
-  mixins: [reactiveProp],
-  props: ['options'],
-  mounted () {
-    // this.chartData is created in the mixin.
-    // If you want to pass options please create a local options object
-    this.renderChart(this.chartData, this.options)
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/components/commitSelector/CommitButton.vue b/frontend/src/components/commitSelector/CommitButton.vue
new file mode 100644
index 0000000..281c1e7
--- /dev/null
+++ b/frontend/src/components/commitSelector/CommitButton.vue
@@ -0,0 +1,38 @@
+<template lang="html">
+  <v-hover v-slot="{ hover }">
+    <div
+      :class="{
+        primary: !hover & !selected,
+        'primary lighten-2': hover & !selected,
+        success: !hover & selected,
+        'success darken-2': hover & selected
+      }"
+      class="pa-2 commit-button d-flex justify-center align-center rounded"
+      @click="onClick"
+    >
+      A
+    </div>
+  </v-hover>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: false
+    }
+  },
+  methods: {
+    onClick(event) {
+      this.selected = !this.selected
+    }
+  }
+}
+</script>
+
+<style>
+.commit-button {
+  cursor: pointer;
+  min-height: 60px;
+}
+</style>
diff --git a/frontend/src/components/commitSelector/CommitPanel.vue b/frontend/src/components/commitSelector/CommitPanel.vue
new file mode 100644
index 0000000..d1ca419
--- /dev/null
+++ b/frontend/src/components/commitSelector/CommitPanel.vue
@@ -0,0 +1,18 @@
+<template>
+  <v-sheet color="white" rounded class="pa-3" elevation="1">
+    <v-row dense>
+      <v-col v-for="i in 5" :key="i">
+        <commit-button></commit-button>
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script>
+import CommitButton from "./CommitButton.vue"
+export default {
+  components: { CommitButton }
+}
+</script>
+
+<style></style>
diff --git a/frontend/src/components/ObjectListViewer.vue b/frontend/src/components/viewer/ObjectListViewer.vue
similarity index 99%
rename from frontend/src/components/ObjectListViewer.vue
rename to frontend/src/components/viewer/ObjectListViewer.vue
index 36916db..3307bbc 100644
--- a/frontend/src/components/ObjectListViewer.vue
+++ b/frontend/src/components/viewer/ObjectListViewer.vue
@@ -1,4 +1,4 @@
-<template>
+<template lang="html">
   <v-card :class="`my-1 mb-0 pa-0 pb-2 ${localExpand ? 'elevation-3' : 'elevation-0'} my-0`">
     <v-card-title>
       <v-chip @click="toggleLoadExpand">
diff --git a/frontend/src/components/ObjectSimpleViewer.vue b/frontend/src/components/viewer/ObjectSimpleViewer.vue
similarity index 99%
rename from frontend/src/components/ObjectSimpleViewer.vue
rename to frontend/src/components/viewer/ObjectSimpleViewer.vue
index 1922dfd..66edd5e 100644
--- a/frontend/src/components/ObjectSimpleViewer.vue
+++ b/frontend/src/components/viewer/ObjectSimpleViewer.vue
@@ -1,4 +1,4 @@
-<template>
+<template lang="html">
   <v-card elevation="0" :class="`my-1 pa-0 my-0`">
     <v-card-title>
       <v-chip color="" @click="toggleLoadExpand">
diff --git a/frontend/src/components/ObjectSpeckleViewer.vue b/frontend/src/components/viewer/ObjectSpeckleViewer.vue
similarity index 99%
rename from frontend/src/components/ObjectSpeckleViewer.vue
rename to frontend/src/components/viewer/ObjectSpeckleViewer.vue
index ac9526e..96f7f50 100644
--- a/frontend/src/components/ObjectSpeckleViewer.vue
+++ b/frontend/src/components/viewer/ObjectSpeckleViewer.vue
@@ -1,4 +1,4 @@
-<template>
+<template lang="html">
   <v-card :class="`my-1 pa-0 ${localExpand ? 'elevation-3' : 'elevation-0'} my-0`">
     <v-card-title v-if="object">
       <v-chip color="" @click="toggleLoadExpand">
diff --git a/frontend/src/components/ObjectValueViewer.vue b/frontend/src/components/viewer/ObjectValueViewer.vue
similarity index 94%
rename from frontend/src/components/ObjectValueViewer.vue
rename to frontend/src/components/viewer/ObjectValueViewer.vue
index 594ae89..ada58bc 100644
--- a/frontend/src/components/ObjectValueViewer.vue
+++ b/frontend/src/components/viewer/ObjectValueViewer.vue
@@ -1,4 +1,4 @@
-<template>
+<template lang="html">
   <div class="ml-4 my-2">
     <b>{{ keyName }}</b>
     <code class="ml-4">{{ value }}</code>
diff --git a/frontend/src/components/Renderer.vue b/frontend/src/components/viewer/Renderer.vue
similarity index 72%
rename from frontend/src/components/Renderer.vue
rename to frontend/src/components/viewer/Renderer.vue
index 852363e..0556475 100644
--- a/frontend/src/components/Renderer.vue
+++ b/frontend/src/components/viewer/Renderer.vue
@@ -1,20 +1,20 @@
 <template lang="html">
-  <v-sheet style="height: 100%; position: relative" class="transparent">
+  <v-container fluid fill-height class="transparent pa-0">
     <v-alert
-        v-show="showAlert"
-        text
-        type="warning"
-        dismissible
-        dense
-        style="position: absolute; z-index: 20; width: 100%"
-        class="caption"
+      v-show="showAlert"
+      text
+      type="warning"
+      dismissible
+      dense
+      style="position: absolute; z-index: 20; width: 100%"
+      class="caption"
     >
       {{ alertMessage }}
     </v-alert>
     <div
-        id="rendererparent"
-        ref="rendererparent"
-        :class="`${fullScreen ? 'fullscreen' : ''} ${darkMode ? 'dark' : ''}`"
+      id="rendererparent"
+      ref="rendererparent"
+      :class="`${fullScreen ? 'fullscreen' : ''} ${darkMode ? 'dark' : ''}`"
     >
       <v-fade-transition>
         <div v-show="!hasLoadedModel" class="overlay cover-all">
@@ -24,11 +24,11 @@
           <div class="overlay-abs radial-bg"></div>
           <div class="overlay-abs" style="pointer-events: none">
             <v-btn
-                color="primary"
-                class="vertical-center"
-                style="pointer-events: all"
-                small
-                @click="load()"
+              color="primary"
+              class="vertical-center"
+              style="pointer-events: all"
+              small
+              @click="load()"
             >
               <v-icon dense>mdi-play</v-icon>
             </v-btn>
@@ -36,27 +36,27 @@
         </div>
       </v-fade-transition>
       <v-progress-linear
-          v-if="hasLoadedModel && loadProgress < 99"
-          v-model="loadProgress"
-          height="4"
-          rounded
-          class="vertical-center elevation-10"
-          style="position: absolute; width: 80%; left: 10%; opacity: 0.5"
+        v-if="hasLoadedModel && loadProgress < 99"
+        v-model="loadProgress"
+        height="4"
+        rounded
+        class="vertical-center elevation-10"
+        style="position: absolute; width: 80%; left: 10%; opacity: 0.5"
       ></v-progress-linear>
 
       <v-card
-          elevation="0"
-          v-show="hasLoadedModel && loadProgress >= 99"
-          style="position: absolute; bottom: 0; z-index: 2; width: 100%"
-          class="pa-0 text-center transparent elevation-0 pb-3"
+        elevation="0"
+        v-show="hasLoadedModel && loadProgress >= 99"
+        style="position: absolute; bottom: 0; z-index: 2; width: 100%"
+        class="pa-0 text-center transparent elevation-0 pb-3"
       >
         <v-btn-toggle class="elevation-0" style="z-index: 100">
           <v-btn
-              :disabled="selectedObjects.length === 0"
-              v-if="(showSelectionHelper || fullScreen)"
-              small
-              color="primary"
-              @click="showObjectDetails = !showObjectDetails"
+            :disabled="selectedObjects.length === 0"
+            v-if="showSelectionHelper || fullScreen"
+            small
+            color="primary"
+            @click="showObjectDetails = !showObjectDetails"
           >
             <span v-if="!isSmall">Selection Details</span>
             <v-icon v-else small>mdi-cube</v-icon>
@@ -67,9 +67,9 @@
               <v-tooltip top>
                 <template #activator="{ on: onTooltip, attrs: tooltipAttrs }">
                   <v-btn
-                      small
-                      v-bind="{ ...tooltipAttrs, ...menuAttrs }"
-                      v-on="{ ...onTooltip, ...onMenu }"
+                    small
+                    v-bind="{ ...tooltipAttrs, ...menuAttrs }"
+                    v-on="{ ...onTooltip, ...onMenu }"
                   >
                     <v-icon small>mdi-camera</v-icon>
                   </v-btn>
@@ -95,7 +95,11 @@
                 <v-list-item-title>Right</v-list-item-title>
               </v-list-item>
               <v-divider v-if="namedViews.length !== 0"></v-divider>
-              <v-list-item v-for="view in namedViews" :key="view.id" @click="setNamedView(view.id)">
+              <v-list-item
+                v-for="view in namedViews"
+                :key="view.id"
+                @click="setNamedView(view.id)"
+              >
                 <v-list-item-title>{{ view.name }}</v-list-item-title>
               </v-list-item>
             </v-list>
@@ -119,40 +123,54 @@
           </v-tooltip>
           <v-tooltip top>
             <template #activator="{ on, attrs }">
-              <v-btn small v-bind="attrs" @click="fullScreen = !fullScreen" v-on="on">
-                <v-icon small>{{ fullScreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen' }}</v-icon>
+              <v-btn
+                small
+                v-bind="attrs"
+                @click="fullScreen = !fullScreen"
+                v-on="on"
+              >
+                <v-icon small>
+                  {{ fullScreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" }}
+                </v-icon>
               </v-btn>
             </template>
             Full screen
           </v-tooltip>
           <v-tooltip top>
             <template #activator="{ on, attrs }">
-              <v-btn v-bind="attrs" small @click="showHelp = !showHelp" v-on="on">
+              <v-btn
+                v-bind="attrs"
+                small
+                @click="showHelp = !showHelp"
+                v-on="on"
+              >
                 <v-icon small>mdi-help</v-icon>
               </v-btn>
             </template>
             Show viewer help
           </v-tooltip>
           <v-dialog
-              v-model="showObjectDetails"
-              width="500"
-              :fullscreen="$vuetify.breakpoint.smAndDown"
+            v-model="showObjectDetails"
+            width="500"
+            :fullscreen="$vuetify.breakpoint.smAndDown"
           >
             <v-card>
               <v-toolbar elevation="0">
                 <v-toolbar-title>Selection Details</v-toolbar-title>
                 <v-spacer></v-spacer>
-                <v-btn icon @click="showObjectDetails = false"><v-icon>mdi-close</v-icon></v-btn>
+                <v-btn icon @click="showObjectDetails = false">
+                  <v-icon>mdi-close</v-icon>
+                </v-btn>
               </v-toolbar>
               <v-sheet>
                 <div v-if="selectedObjects.length !== 0">
                   <object-simple-viewer
-                      v-for="(obj, ind) in selectedObjects"
-                      :key="obj.id + ind"
-                      :value="obj"
-                      :stream-id="$route.params.id"
-                      :key-name="`Selected Object ${ind + 1}`"
-                      force-expand
+                    v-for="(obj, ind) in selectedObjects"
+                    :key="obj.id + ind"
+                    :value="obj"
+                    :stream-id="$route.params.id"
+                    :key-name="`Selected Object ${ind + 1}`"
+                    force-expand
                   />
                 </div>
               </v-sheet>
@@ -187,16 +205,16 @@
         </v-btn-toggle>
       </v-card>
     </div>
-  </v-sheet>
+  </v-container>
 </template>
 <script>
-import throttle from 'lodash.throttle'
-import {Viewer} from '@speckle/viewer'
-import {TOKEN} from "@/speckleUtils";
-import ObjectSimpleViewer from "@/components/ObjectSimpleViewer";
+import throttle from "lodash.throttle"
+import { Viewer } from "@speckle/viewer"
+import { TOKEN } from "@/speckleUtils"
+import ObjectSimpleViewer from "@/components/viewer/ObjectSimpleViewer"
 
 export default {
-  components: {ObjectSimpleViewer},
+  components: { ObjectSimpleViewer },
   props: {
     autoLoad: {
       type: Boolean,
@@ -235,7 +253,10 @@ export default {
   },
   computed: {
     isSmall() {
-      return this.$vuetify.breakpoint.name === 'xs' || this.$vuetify.breakpoint.name === 'sm'
+      return (
+        this.$vuetify.breakpoint.name === "xs" ||
+        this.$vuetify.breakpoint.name === "sm"
+      )
     },
     darkMode() {
       return this.$vuetify.theme.dark
@@ -254,7 +275,7 @@ export default {
         this.namedViews.push(...views)
       }
     },
-    objectUrls(){
+    objectUrls() {
       this.unloadData()
       this.load()
     }
@@ -268,11 +289,11 @@ export default {
     // - initialise the actual renderer **once** (per app lifecycle, on refresh it's fine)
     // - juggle the container div out of this component's dom when the component is managed out by vue
     // - juggle the container div back in of this component's dom when it's back.
-    let renderDomElement = document.getElementById('renderer')
+    let renderDomElement = document.getElementById("renderer")
 
     if (!renderDomElement) {
-      renderDomElement = document.createElement('div')
-      renderDomElement.id = 'renderer'
+      renderDomElement = document.createElement("div")
+      renderDomElement.id = "renderer"
     }
 
     this.domElement = renderDomElement
@@ -284,13 +305,12 @@ export default {
 
     window.__viewer.onWindowResize()
     this.setupEvents()
-
   },
   beforeDestroy() {
     // NOTE: here's where we juggle the container div out, and do cleanup on the
     // viewer end.
     // hide renderer dom element.
-    this.domElement.style.display = 'none'
+    this.domElement.style.display = "none"
     // move renderer dom element outside this component so it doesn't get deleted.
     document.body.appendChild(this.domElement)
   },
@@ -308,26 +328,26 @@ export default {
       window.__viewer.interactions.toggleSectionBox()
     },
     setupEvents() {
-      window.__viewer.on('load-warning', ({ message }) => {
+      window.__viewer.on("load-warning", ({ message }) => {
         this.alertMessage = message
         this.showAlert = true
       })
 
       window.__viewer.on(
-          'load-progress',
-          throttle(
-              function (args) {
-                this.loadProgress = args.progress * 100
-                this.zoomEx()
-              }.bind(this),
-              200
-          )
+        "load-progress",
+        throttle(
+          function(args) {
+            this.loadProgress = args.progress * 100
+            this.zoomEx()
+          }.bind(this),
+          200
+        )
       )
 
-      window.__viewer.on('select', (objects) => {
+      window.__viewer.on("select", objects => {
         this.selectedObjects.splice(0, this.selectedObjects.length)
         this.selectedObjects.push(...objects)
-        this.$emit('selection', this.selectedObjects)
+        this.$emit("selection", this.selectedObjects)
       })
     },
     load() {
@@ -408,18 +428,18 @@ export default {
 .radial-bg {
   transition: all 0.5s ease-out;
   background: radial-gradient(
-      circle,
-      rgba(60, 94, 128, 0.8519782913165266) 0%,
-      rgba(63, 123, 135, 0.13489145658263302) 100%
+    circle,
+    rgba(60, 94, 128, 0.8519782913165266) 0%,
+    rgba(63, 123, 135, 0.13489145658263302) 100%
   );
   opacity: 1;
 }
 
 .radial-bg:hover {
   background: radial-gradient(
-      circle,
-      rgba(60, 94, 128, 0.8519782913165266) 0%,
-      rgba(63, 123, 135, 0.13489145658263302) 100%
+    circle,
+    rgba(60, 94, 128, 0.8519782913165266) 0%,
+    rgba(63, 123, 135, 0.13489145658263302) 100%
   );
   opacity: 0.5;
 }
@@ -431,4 +451,4 @@ export default {
   transform: translateY(-50%);
   z-index: 2;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 9b96f06..1f7d8b4 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,35 +1,35 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-import store from '../store/index.js'
-import WelcomeView from "@/views/WelcomeView";
-import RevitStream from "@/views/RevitStream";
+import Vue from "vue"
+import VueRouter from "vue-router"
+import Home from "../views/Home.vue"
+import store from "../store/index.js"
+import WelcomeView from "@/views/WelcomeView"
+import StreamView from "@/views/StreamView"
 
 Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
+    path: "/",
+    name: "Home",
     component: Home,
     meta: {
       requiresAuth: true,
-      title: 'Speckle Revit Dashboard',
+      title: "Speckle Revit Dashboard",
       metaTags: [
         {
-          name: 'description',
-          content: 'The speckle Revit Dashboard homepage'
+          name: "description",
+          content: "The speckle Revit Dashboard homepage"
         },
         {
-          property: 'og:description',
-          content: 'The speckle Revit Dashboard homepage'
+          property: "og:description",
+          content: "The speckle Revit Dashboard homepage"
         }
       ]
     }
   },
   {
-    path: '/login',
-    name: 'Login',
+    path: "/login",
+    name: "Login",
     component: WelcomeView,
     meta: {
       requiresNoAuth: true,
@@ -37,33 +37,32 @@ const routes = [
     }
   },
   {
-    path: '/streams/:id',
-    name: 'Streams',
-    component: RevitStream,
+    path: "/streams/:id",
+    name: "Streams",
+    component: StreamView,
     meta: {
       requiresAuth: true,
       title: "Stream | Speckle Revit Dashboard"
-
     }
   }
 ]
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
   routes
 })
 
 router.beforeEach(async (to, from, next) => {
-  if(to.meta.title){
+  if (to.meta.title) {
     document.title = to.meta.title
   }
   if (to.query.access_code) {
     // If the route contains an access code, exchange it
     try {
-      await store.dispatch('exchangeAccessCode', to.query.access_code)
+      await store.dispatch("exchangeAccessCode", to.query.access_code)
     } catch (err) {
-      console.warn("exchange failed", err);
+      console.warn("exchange failed", err)
     }
     // Whatever happens, go home.
     return next("/")
@@ -71,10 +70,8 @@ router.beforeEach(async (to, from, next) => {
   // Fetch if user is authenticated
   await store.dispatch("getUser")
   var isAuth = store.getters.isAuthenticated
-  if (to.meta.requiresAuth && !isAuth)
-    return next({name: "Login"})
-  else if (to.meta.requiresNoAuth && isAuth)
-    return next("/")
+  if (to.meta.requiresAuth && !isAuth) return next({ name: "Login" })
+  else if (to.meta.requiresNoAuth && isAuth) return next("/")
   // Any other page
   next()
 })
diff --git a/frontend/src/views/RevitStream.vue b/frontend/src/views/RevitStream.vue
deleted file mode 100644
index fd47ee7..0000000
--- a/frontend/src/views/RevitStream.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <v-container fill-height>
-    <v-container fluid v-if="!isRevitCommit" class="d-flex flex-column justify-center primary--text">
-      <v-icon color="primary">mdi-x</v-icon>
-      <p class="headline text-center">The latest commit on this stream does not come from Revit.</p>
-      <p class="text-center">
-      <v-btn link to="/" outlined color="primary"><v-icon small left>mdi-home</v-icon>Go home</v-btn>
-      </p>
-    </v-container>
-    <v-container v-else-if="loading" class="d-flex flex-column justify-center align-center">
-      <v-progress-linear size="50" color="primary" :value="progress"></v-progress-linear>
-      <p class="body-2 mt-2 primary--text">Processing your data...</p>
-    </v-container>
-    <v-container fluid v-if="isRevitCommit && refObj" v-show="!loading">
-      <revit-dashboard v-if="selectedCommit"
-                          :object-id="selectedCommit.referencedObject"
-                          @loaded="loading = !$event"
-                          @progress="progress = $event"
-                          @legend-clicked="onLegendClick"
-                          :info="refObj['@Project Information']"
-                          :stream="stream">
-      </revit-dashboard>
-    </v-container>
-
-  </v-container>
-</template>
-
-<script>
-import {getStreamCommits, getStreamObject} from "@/speckleUtils";
-import RevitDashboard from "@/components/RevitDashboard";
-import Chart from "chart.js"
-
-export default {
-  name: "RevitStream",
-  components: { RevitDashboard },
-  data() {
-    return {
-      stream: null,
-      selectedCommit: null,
-      refObj: null,
-      serverUrl: process.env.VUE_APP_SERVER_URL,
-      loading: true,
-      progress: 0
-    }
-  },
-  async mounted() {
-    if (this.streamId) {
-      this.getStream()
-    }
-  },
-  computed: {
-    streamId() {
-      return this.$route.params.id
-    },
-    isRevitCommit() {
-      return this.selectedCommit?.sourceApplication?.startsWith("Revit")
-    }
-  },
-  methods: {
-    async onLegendClick(e, legendItem) {
-      Chart.helpers.each(Chart.instances, function (instance) {
-        var chart = instance.chart
-        const index = chart.legend.legendItems.findIndex(element => element.text === legendItem.text);
-        if (index === -1) return
-        const {
-          type
-        } = chart.config;
-        if (type === 'pie' || type === 'doughnut') {
-          // Pie and doughnut charts only have a single dataset and visibility is per item
-          var ilen = (chart.data.datasets || []).length
-          for (let i = 0; i < ilen; ++i) {
-            var meta = chart.getDatasetMeta(i);
-            // toggle visibility of index if exists
-            if (meta.data[index]) {
-              meta.data[index].hidden = !meta.data[index].hidden;
-            }
-          }
-        } else {
-          const meta = chart.getDatasetMeta(index);
-
-          // See controller.isDatasetVisible comment
-          meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
-
-          // We hid a dataset ... rerender the chart
-        }
-        chart.update();
-      })
-    },
-    async getStream() {
-      var res = await getStreamCommits(this.streamId, 1, null)
-      this.selectedCommit = res.data.stream.commits.items[0]
-      this.stream = res.data.stream
-    },
-  },
-  watch: {
-    streamId: {
-      handler: async function (val, oldVal) {
-        if (val) this.getStream()
-      }
-    },
-    selectedCommit: {
-      handler: async function () {
-        this.refObj = await getStreamObject(this.stream.id, this.selectedCommit.referencedObject)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.bg-img {
-  background-position: center;
-  background-repeat: no-repeat;
-  /*background-attachment: fixed;*/
-}
-
-.max-h {
-  max-height: 400px;
-  height: 400px;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/StreamView.vue b/frontend/src/views/StreamView.vue
new file mode 100644
index 0000000..1794306
--- /dev/null
+++ b/frontend/src/views/StreamView.vue
@@ -0,0 +1,88 @@
+<template lang="html">
+  <v-container fill-height fluid class="pa-0">
+    <div class="float-center-top">
+      <CommitPanel></CommitPanel>
+    </div>
+    <Renderer v-if="refObj" :object-urls="[objectUrl]"></Renderer>
+  </v-container>
+</template>
+
+<script>
+import { getStreamCommits, getStreamObject } from "@/speckleUtils"
+import Renderer from "../components/viewer/Renderer.vue"
+import CommitPanel from "@/components/commitSelector/CommitPanel.vue"
+
+export default {
+  name: "StreamView",
+  components: { Renderer, CommitPanel },
+  data() {
+    return {
+      stream: null,
+      selectedCommit: null,
+      refObj: null,
+      serverUrl: process.env.VUE_APP_SERVER_URL,
+      loading: true,
+      progress: 0
+    }
+  },
+  async mounted() {
+    if (this.streamId) {
+      this.getStream()
+    }
+  },
+  computed: {
+    streamId() {
+      return this.$route.params.id
+    },
+    objectUrl() {
+      return [
+        `${this.serverUrl}/streams/${this.stream.id}/objects/${this.selectedCommit.referencedObject}`
+      ]
+    }
+  },
+  methods: {
+    async getStream() {
+      var res = await getStreamCommits(this.streamId, 1, null)
+      this.selectedCommit = res.data.stream.commits.items[0]
+      this.stream = res.data.stream
+    }
+  },
+  watch: {
+    streamId: {
+      handler: async function(val, oldVal) {
+        if (val) this.getStream()
+      }
+    },
+    selectedCommit: {
+      handler: async function() {
+        this.refObj = await getStreamObject(
+          this.stream.id,
+          this.selectedCommit.referencedObject
+        )
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bg-img {
+  background-position: center;
+  background-repeat: no-repeat;
+  /*background-attachment: fixed;*/
+}
+
+.max-h {
+  max-height: 400px;
+  height: 400px;
+}
+
+.float-center-top {
+  position: absolute;
+  display: flex;
+  left: 50%;
+  transform: translatex(-50%);
+  top: 1em;
+  z-index: 3;
+}
+</style>