diff --git a/package-lock.json b/package-lock.json
index 8b91062..8a34fe7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8669,6 +8669,12 @@
       "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w==",
       "dev": true
     },
+    "vue-slider-component": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-2.8.1.tgz",
+      "integrity": "sha512-iAHCwGF448KCE1dUrs0OuMzUvl1q87ZYptE2krgi+ka2ZDZg12jq/S38k/XuFZXAb4OW9AGWqnlkzvvnG+JsPQ==",
+      "dev": true
+    },
     "vue-style-loader": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz",
diff --git a/package.json b/package.json
index 55d6e33..2552862 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,19 @@
   },
   "devDependencies": {
     "@branu-jp/v-drag": "0.0.10",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.7",
     "debounce": "^1.1.0",
     "event-emitter-es6": "^1.1.5",
+    "file-loader": "^1.1.4",
+    "node-sass": "^4.5.3",
     "query-parse": "^2.0.0",
+    "sass-loader": "^6.0.6",
     "three": "^0.89.0",
     "three-orbit-controls": "^82.1.0",
     "three.meshline": "^1.0.3",
@@ -36,21 +46,12 @@
     "vue-color": "^2.4.3",
     "vue-dragging": "^1.0.8",
     "vue-json-tree-view": "^2.1.3",
+    "vue-loader": "^13.0.5",
     "vue-material": "^1.0.0-beta-10.2",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-stage-3": "^6.24.1",
-    "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.4",
-    "node-sass": "^4.5.3",
-    "sass-loader": "^6.0.6",
-    "vue-loader": "^13.0.5",
+    "vue-slider-component": "^2.8.1",
     "vue-template-compiler": "^2.4.4",
+    "vuex": "^3.0.1",
     "webpack": "^3.6.0",
     "webpack-dev-server": "^2.9.1"
   },
diff --git a/speckle-plugin-manifest.json b/speckle-plugin-manifest.json
index 825852d..b041417 100644
--- a/speckle-plugin-manifest.json
+++ b/speckle-plugin-manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Speckle Viewer",
-  "version":"0.1.12",
+  "version":"0.2.0",
   "desc": "This plugins allows you to view streams in your browser, amongst other things.",
   "serveFrom": "/view",
   "author": "Speckle Project Contributors",
diff --git a/src/App.vue b/src/App.vue
index 6246986..af1829c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,14 +15,13 @@
       </md-dialog>
     </div>
     <md-app>
-      <md-app-toolbar class="md-primary md-dense" style='z-index: 10'>
+      <md-app-toolbar class="md-transparent xxx-md-dense md-elevation-0 no-shadow" style='z-index: 10'>
         <div class="md-toolbar-row">
           <div class="md-toolbar-section-start">
-            <md-button class='md-icon-button md-raised' @click.native='showAccounts=!showAccounts'>
-              <md-icon style='color: black'>
-                {{ showAccounts ? "close" : "menu"}}
+            <md-button class='md-icon-button' @click.native='showAccounts=!showAccounts'>
+              <md-icon xxx-style='color: black'>
+                {{ showAccounts ? "arrow_left" : "menu"}}
               </md-icon>
-              <md-tooltip v-if="!isIOS" md-direction="bottom">Menu</md-tooltip>
             </md-button>
             <md-button class='md-icon-button' @click.native='showAddStreamDialog=true'>
               <md-icon>add</md-icon>
@@ -36,7 +35,6 @@
               <md-icon>list</md-icon>
               <md-tooltip v-if="!isIOS" md-direction="top">Show details for selected objects</md-tooltip>
             </md-button>
-            <p class="md-caption" style="color:white" v-show='selectedObjects!=null'>{{selectedObjects ? selectedObjects.hash : ''}}</p>
             <!-- <md-button class='md-icon-button' @click.native='showViewSelect = !showViewSelect'> -->
             <!--   <md-icon>videocam</md-icon> -->
             <!--   <md-tooltip md-direction="top">Set camera view</md-tooltip> -->
@@ -65,8 +63,8 @@
           </div>
         </div>
       </md-app-toolbar>
-      <md-app-drawer :md-active.sync="showAccounts" style='z-index:100' class='md-elevation-4' md-persistent="full">
-        <sidebar-menu v-on:add="addReceiver"></sidebar-menu>
+      <md-app-drawer :md-active.sync="showAccounts" style='padding:14px; box-sizing:border-box; background-color:#448aff;' class='md-scrollbar md-elevation-4 md-primary' md-persistent="full">
+        <sidebar-menu v-on:addreceiver="addReceiver"></sidebar-menu>
       </md-app-drawer>
       <md-app-content>
         <speckle-renderer></speckle-renderer>
@@ -124,7 +122,7 @@ export default {
       showAddStreamDialog: false,
       addStreamString: null,
       showStreamList: false,
-      showAccounts: false,
+      showAccounts: true,
       showViewSelect: false,
       showSettings: false,
       showObjectDetails: false,
@@ -134,42 +132,40 @@ export default {
       progressMessage: 'All is ready.'
     }
   },
+  computed: {
+    isMobileView( ) {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test( navigator.userAgent ) && window.innerWidth < 768
+    },
+    isIOS( ) {
+      return ( typeof window.orientation !== "undefined" ) && ( navigator.userAgent.indexOf( 'OS X' ) !== -1 )
+    },
+    receivers( ) {
+      return this.$store.getters.allReceivers
+    },
+    objects( ) {
+      return this.$store.getters.allObjects
+    },
+    selectedObjects( ) {
+      return this.$store.getters.selectedObjects
+    }
+  },
   methods: {
     zoomExt( ) {
       if ( !this.selectedObjects )
-        bus.$emit( 'zext' )
+        bus.$emit( 'r-zoom-ext' )
       else
-        bus.$emit( 'zoomToObject' )
+        bus.$emit( 'r-zoom-to-object' )
     },
+
     zoomToObject( ) {
-      bus.$emit( 'zoomToObject' )
-    },
-    createReceivers( ) {
-      if ( this.receiversCreated ) return
-      if ( this.$store.state.initStreams.length != 0 ) {
-        let receivers = this.$store.state.initStreams
-          .filter( id => id != "" )
-          .map( id => {
-            return {
-              serverUrl: this.$store.state.server,
-              streamId: id,
-              token: this.$store.getters.user.apitoken,
-              objects: [ ],
-              layers: [ ],
-              history: [ ],
-              name: 'Loading ' + id + '...',
-              layerMaterials: [ ]
-            }
-          } )
-        this.$store.commit( 'ADD_RECEIVERS', { receivers } )
-      }
+      bus.$emit( 'r-zoom-to-object' )
     },
+
     addReceiver( streamId ) {
-      if ( !streamId ) {
-        this.snackbarMessage = 'Invalid streamId'
+      if ( !streamId || streamId === '' ) {
+        this.snackbarMessage = 'Invalid streamId.'
         return this.showSnackbar = true
       }
-      console.log( 'Adding a receiver', streamId )
       if ( this.$store.getters.receiverById( streamId ) ) {
         this.snackbarMessage = 'That stream is already loaded'
         return this.showSnackbar = true
@@ -180,20 +176,33 @@ export default {
         token: this.$store.getters.user.apitoken,
         objects: [ ],
         layers: [ ],
-        history: [ ],
-        name: 'Loading ' + streamId + '...',
-        layerMaterials: [ ]
+        children: [ ],
+        parent: null,
+        createdAt: null,
+        updatedAt: null,
+        baseProperties: {
+          units: null
+        },
+        owner: {
+          name: null,
+          surname: null,
+        },
+        comments: null,
+        name: 'Loading ' + streamId + '...'
       }
       this.$store.commit( 'ADD_RECEIVER', { receiver } )
     },
+
     saveSettings( settings ) {
       window.localStorage.setItem( 'viewerSettings', JSON.stringify( settings ) )
       this.$store.commit( 'SET_VIEWER_SETTINGS', { settings } )
     },
+
     snackbarUpdate( message ) {
       this.snackbarMessage = message
       this.showSnackbar = true
     },
+
     toggleObjectDetails( ) {
       if ( !this.selectedObjects ) {
         return this.snackbarUpdate( "No objects selected" )
@@ -203,44 +212,22 @@ export default {
     }
   },
   created( ) {
-    this.createReceivers( )
-
     if ( window.localStorage.getItem( 'viewerSettings' ) !== null ) {
       this.$store.commit( 'SET_VIEWER_SETTINGS', { settings: JSON.parse( window.localStorage.getItem( 'viewerSettings' ) ) } )
     }
+
     this.viewerSettings = this.$store.getters.viewerSettings
-  },
-  computed: {
-    searchobjects( ) {
-      let objects = this.$store.getters.allObjects
-      if ( objects.length === 0 ) return [ ]
-      let objectIds = objects.map( ( obj ) => {
-        return obj.type + ' ' + obj._id
-      } )
-      return objectIds
-    },
-    isMobileView( ) {
-      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test( navigator.userAgent ) && window.innerWidth < 768
-    },
-    isIOS ( ) {
-      return (typeof window.orientation !== "undefined") && (navigator.userAgent.indexOf('OS X') !== -1)
-    },
-    receivers( ) {
-      return this.$store.getters.allReceivers
-    },
-    objects( ) {
-      return this.$store.getters.allObjects
-    },
-    selectedObjects( ) {
-      return this.$store.getters.selectedObjects
-    }
-  },
-  mounted( ) {
+
+    this.$store.state.initStreams.forEach( streamId => {
+      this.addReceiver( streamId )
+    } )
+
     bus.$on( 'snackbar-update', this.snackbarUpdate )
     bus.$on( 'stream-load-progress', message => {
       this.progressMessage = message
     } )
-  }
+  },
+  mounted( ) {}
 }
 
 </script>
@@ -250,14 +237,6 @@ export default {
   border: 1px solid rgba(#000, .12);
 }
 
-.view-field {
-  width: auto;
-}
-
-.md-menu-content {
-  max-height: none;
-}
-
 #app {
   position: fixed;
   top: 0;
@@ -266,6 +245,16 @@ export default {
   height: 100%;
 }
 
-#main {}
+.no-shadow {
+  box-shadow: none !important;
+}
+
+.no-margin {
+  margin: 0 !important;
+}
+
+.md-card.md-with-hover {
+  cursor: default;
+}
 
 </style>
diff --git a/src/components/Controller.vue b/src/components/Controller.vue
index ef3d1af..29db97a 100644
--- a/src/components/Controller.vue
+++ b/src/components/Controller.vue
@@ -1,59 +1,65 @@
 <template>
-  
   <div class='speckle-input'>
     <div class='controller-wrapper'>
-      <div class='md-subheading'>{{trimmedName}}: {{controller.value}}</div>
-    <div class='md-layout md-alignment-center-left'>
-      <!-- <vue-slider ref='slider' :interval='0.01' :dot-size='24' :width='200' :min="min" :max="max" v-model='controller.value'></vue-slider> -->
-      <div class='md-layout-item md-size-5 md-caption'>{{min}}</div>
-      <div class='md-layout-item slider-wrapper md-caption'><input type="range" :min="min" :max="max" step='0.01' class='slider' v-model.number="controller.value"></div>
-      <div class='md-layout-item md-size-10 md-caption'>{{max}}</div> 
-    </div>
+      <div class='md-subheading-xxx'>{{trimmedName}}: <strong>{{controller.value}}</strong></div>
+      <!-- <div class='md-layout md-alignment-center-left'>
+        <div class='md-layout-item md-size-5 md-caption'>{{min}}</div>
+        <div class='md-layout-item slider-wrapper md-caption'><input type="range" :min="min" :max="max" step='0.01' class='slider' v-model.number="controller.value"></div>
+        <div class='md-layout-item md-size-10 md-caption'>{{max}}</div>
+      </div> -->
+      <vue-slider ref='slider' :interval='controller.step' :dot-size='24' :min="controller.min" :max="controller.max" :value='controller.value' tooltip='hover' lazy v-on:callback='changed' :disabled='!enabled'></vue-slider>
     </div>
   </div>
 </template>
-
 <script>
-//import vueSlider from 'vue-slider-component'
+import VueSlider from 'vue-slider-component'
+
 export default {
   name: 'Controller',
-  props: ['controller'],
+  props: [ 'controller', 'enabled' ],
   components: {
-    //vueSlider
+    VueSlider
   },
   computed: {
-    trimmedName: function(){
-      return this.controller.name.slice(7)
+    trimmedName: function( ) {
+      return this.controller.name.slice( 7 )
     },
   },
-  data() {
+  data( ) {
     return {
       min: this.controller.min,
       max: this.controller.max
     }
   },
   methods: {
+    changed( val ) {
+      this.controller.value = val
+      this.$emit( 'changed' )
+    }
   },
-  mounted()
-  {
-  
+  mounted( ) {
+
   }
 }
-</script>
 
+</script>
 <style scoped>
-.speckle-input{
-  width:100%
+.speckle-input {
+  width: 100%
 }
-.slider-wrapper{
-  padding-left:5px;
-  padding-right:5px;
+
+.slider-wrapper {
+  padding-left: 5px;
+  padding-right: 5px;
 }
-.slider{
-  width:100%
+
+.slider {
+  width: 100%
 }
-.controller-wrapper{
-  padding-top:5px;
-  padding-bottom:5px;
+
+.controller-wrapper {
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
+
 </style>
diff --git a/src/components/LoginScreen.vue b/src/components/LoginScreen.vue
index 376ea52..5cae593 100644
--- a/src/components/LoginScreen.vue
+++ b/src/components/LoginScreen.vue
@@ -12,10 +12,6 @@
           <md-input type='password' v-model='password'></md-input>
         </md-field>
         <md-button class='md-primary md-raised' @click.native='login'>Login</md-button>
-        <md-button class='md-accent md-raised' @click.native='guestLogin' v-if='allowGuestLogin'>
-          Continue as guest
-          <md-tooltip v-if="!isIOS">You will not be allowed to comment or edit.</md-tooltip>
-        </md-button>
         <div v-show='loginError' class='login-error'>
           <br>
           <md-icon>warning</md-icon>
@@ -32,7 +28,6 @@ export default {
   computed: {
     logoUrl( ) { return window.SpkAppConfig.logoUrl },
     serverUrl( ) { return this.$store.state.server },
-    allowGuestLogin( ) { return true }, 
     isIOS ( ) {
       return (typeof window.orientation !== "undefined") && (navigator.userAgent.indexOf('OS X') !== -1)
     },
@@ -62,9 +57,6 @@ export default {
         .catch( err => {
           this.loginError = true
         } )
-    },
-    guestLogin( ) {
-      this.$emit( 'success', { guest: true } )
     }
   }
 }
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index e8d245c..78d143a 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,38 +1,39 @@
 <template>
-  <md-autocomplete v-if='objects.length>0'
-    class="search"
-    v-model="selection"
-    v-on:input='select(selection)'
-    :md-options="objects"
-    md-layout="box">
+  <!-- <div style="margin-left: 20px; padding:2px; background: white">
+    <md-chips class='md-primary' v-model="fruits" md-placeholder="Add filter conditions!">
+    </md-chips>
+  </div> -->
+  <md-autocomplete  class="search" v-model="selection" v-on:input='select(selection)' md-layout="box">
     <label>Search...</label>
   </md-autocomplete>
-</template>
 
+<!--   <md-field md-clearable md-layout="box" style='color: white !important'>
+      <label>Cleareable</label>
+      <md-input v-model="initial"></md-input>
+    </md-field> -->
+</template>
 <script>
 export default {
   name: 'SearchBar',
-  props:{
-    objects: { type: Array }
-  },
-  data() {
+  data( ) {
     return {
       selection: null,
-      searchVisible: false
+      searchVisible: false,
+      fruits: [ 'area>10' ]
     }
   },
   methods: {
-    toggleSearchBar() {
-      this.searchVisible = ! this.searchVisible
+    toggleSearchBar( ) {
+      this.searchVisible = !this.searchVisible
     },
-    select(selection) {
-      bus.$emit('select-bus', selection)
+    select( selection ) {
+      bus.$emit( 'select-bus', selection )
     }
   },
 }
-</script>
 
+</script>
 <style scoped>
-.search {
-}
+.search {}
+
 </style>
diff --git a/src/components/SidebarMenu.vue b/src/components/SidebarMenu.vue
index 9f4c1f1..355bfeb 100644
--- a/src/components/SidebarMenu.vue
+++ b/src/components/SidebarMenu.vue
@@ -1,100 +1,73 @@
 <template>
   <div>
-    <md-toolbar class="md-primary">
-      <span class="md-toolbar-section-end">
-        <md-button class="md-icon-button" @click="showAccountsStuff=!showAccountsStuff">
-          <md-icon>{{showAccountsStuff ? "keyboard_arrow_up" : "keyboard_arrow_down"}}</md-icon>
-        </md-button>
-      </span>
-      <span class="md-title" v-if='showLogin'>Login</span>
-      <span class="md-title" v-else>Hello <strong>{{user.name}}!</strong></span>
-    </md-toolbar>
-    <login-screen v-if='showLogin && showAccountsStuff' v-on:success='loggedIn'></login-screen>
-    <div class="user-menu" v-if='!showLogin && showAccountsStuff'>
-      <md-list>
-        <md-list-item md-expand>
-          <md-icon>person</md-icon>
-          <span class="md-list-item-text">My Account</span>
-          <md-list class='md-triple-line md-dense' slot='md-expand'>
-            <md-list-item class='md-inset'>
-              <div class="md-list-item-text">
-                <span>{{user.name}} {{user.surname}}</span>
-                <span>{{user.email}}</span>
-                <p>{{user.createdAt}}</p>
-              </div>
-              <md-button class="md-raised md-icon-button md-list-action" @click='logOut'>
-                <md-icon class="md-primary">close</md-icon>
-              </md-button>
-            </md-list-item>
-          </md-list>
-        </md-list-item>
-        <md-list-item md-expand>
-          <md-icon>import_export</md-icon>
-          <span class="md-list-item-text">My Streams</span>
-          <md-list class='md-double-line md-dense' slot='md-expand' :md-expand-single="true" >
-            <md-list-item> 
-              <md-field md-clearable>
-                <md-icon>search</md-icon>
-            <label>Filter your streams</label>
-            <md-input v-model='searchFilter'></md-input>
-              </md-field>
-            </md-list-item>
-            <md-list-item>
-              <md-button class="md-icon-button md-dense" @click="updateStreamList">
-                <md-icon>refresh</md-icon>
-                <md-tooltip v-if="!isIOS" md-delay="500">Refresh stream list</md-tooltip>
-              </md-button>
-              <div class="md-layout-item">
-                <md-button :disabled='startIndex==0' class='md-dense md-icon-button md-primary' @click='startIndex -= startIndex != 0 ? itemsPerPage : 0'>
-                  <md-icon>chevron_left</md-icon>
-                </md-button>
-              </div>
-              <div class="md-layout-item md-text-center">
-                <div class='md-caption'>{{currentPage}} / {{pageCount}}</div>
+    <!-- User Login card -->
+    <md-card style='margin-bottom:20px;' md-with-hover v-if='showLogin'>
+      <md-card-header>
+        <md-card-header-text>
+          <div class="md-title">Login</div>
+          <div class="md-caption">{{$store.state.server}}</div>
+        </md-card-header-text>
+      </md-card-header>
+      <login-screen v-on:success='loggedIn'></login-screen>
+    </md-card>
+    <!-- Account card -->
+    <md-card v-if='!showLogin' class='md-elevation-0' md-with-hover>
+      <md-card-header>
+        <md-card-header-text>
+          <div class="md-title">Hello, {{user.name}}!</div>
+          <div class="md-caption">{{$store.state.server}}</div>
+        </md-card-header-text>
+        <md-menu xxx-md-size="dense" md-direction="bottom-end">
+          <md-button class="md-icon-button" md-menu-trigger>
+            <md-icon>more_vert</md-icon>
+          </md-button>
+          <md-menu-content>
+            <md-menu-item @click='logOut'>
+              <span>Logout</span>
+            </md-menu-item>
+            <md-menu-item>
+              <a :href="linkToAdmin" target="_blank">Admin</a>
+            </md-menu-item>
+          </md-menu-content>
+        </md-menu>
+      </md-card-header>
+      <md-card-content style='background: white;'>
+        <div class='md-layout md-alignment-center-left'>
+          <md-button class='md-layout-item md-size-10 md-icon-button md-dense md-primary no-margin' @click.native='getStreams'>
+            <md-icon>refresh</md-icon>
+          </md-button>
+          <md-field class='md-layout-item md-dense md-raised' md-layout="box">
+            <label>Search through your {{parentStreams.length}} streams.</label>
+            <md-input v-model="searchFilter"></md-input>
+            <md-icon>search</md-icon>
+          </md-field>
+        </div>
+        <md-list>
+          <div v-for='stream in paginatedStreams' :key='stream.id' class='md-inset'>
+            <div class="md-layout md-alignment-center-left" style="margin-bottom:10px;">
+              <div class="md-layout-item md-size-70">
+                <span>{{stream.name}}</span>
+                <span class='md-caption'>{{stream.streamId}}</span>
               </div>
-              <div class="md-layout-item">
-                <md-button :disabled='currentPage == pageCount' class='md-dense md-icon-button md-primary' @click='startIndex += currentPage == pageCount ? 0 : itemsPerPage '>
-                  <md-icon>chevron_right</md-icon>
+              <div class="md-layout-item md-size-30" style='text-align: right'>
+                <md-button class="md-icon-button xxxmd-dense md-raised" v-on:click='$emit("addreceiver", stream.streamId)'>
+                  <md-icon>add</md-icon>
                 </md-button>
               </div>
-              <div class="md-caption">Showing {{startIndex + 1}} - {{startIndex + itemsPerPage}} out of <strong> {{filteredStreams.length}} </strong> </div>
-            </md-list-item>
-            <md-list-item v-for='stream in paginatedStreams' :key='stream.id' class='md-inset'>
-              <div class="md-list-item-text">
-                <span>{{stream.name}}</span>
-                <span>{{stream.streamId}}</span>
-              </div>
-              <md-button class="md-icon-button md-list-action md-dense" v-on:click='addStream(stream.streamId)'>
-                <md-icon>add</md-icon>
-                <md-tooltip v-if="!isIOS" md-delay="800">Add this stream to the viewer</md-tooltip>
-              </md-button>
-            </md-list-item>
-
-            <!--               <md-button class="md-icon-button md-list-action md-dense" v-on:click='shareStream(stream.streamId)'>
-              <md-icon>share</md-icon>
-              <md-tooltip md-delay="800">Copy stream address to clipboard</md-tooltip>
-              </md-button> -->
-          </md-list>
-        </md-list-item>
-      </md-list>
-    </div>
-    <md-toolbar class="md-accent md-elevation-4" md-elevation="0">
-      <span class="md-toolbar-section-end">
-        <md-button class="md-icon-button" @click="showCurrentStreamStuff=!showCurrentStreamStuff">
-          <md-icon>{{showCurrentStreamStuff ? "keyboard_arrow_up" : "keyboard_arrow_down"}}</md-icon>
-        </md-button>
-      </span>
-      <span class="md-title">Current <strong>Streams</strong></span>
-    </md-toolbar>
-    <md-list v-show='showCurrentStreamStuff'>
-      <speckle-receiver v-on:drop="dropReceiver" v-for='receiver in $store.state.receivers' :key='receiver.streamId' :spkreceiver='receiver'></speckle-receiver>
-    </md-list>
-    <span v-show='$store.state.receivers.length === 0 && showCurrentStreamStuff' class='md-subheading' style="padding: 10px">No streams present.</span>
+            </div>
+          </div>
+        </md-list>
+      </md-card-content>
+    </md-card>
+    <br>
+    <!-- Receiver Cards -->
+    <speckle-receiver v-for='receiver in $store.state.receivers' :key='receiver.streamId' :spkreceiver='receiver'></speckle-receiver>
+    <span v-show='$store.state.receivers.length === 0' class='md-caption' style="padding: 10px">No streams loaded.</span>
   </div>
 </template>
 <script>
 import LoginScreen from './LoginScreen.vue'
-import SpeckleReceiver from './SpeckleReceiver.vue'
+import SpeckleReceiver from './SpeckleReceiverCard.vue'
 
 export default {
   name: 'UserMenu',
@@ -110,35 +83,21 @@ export default {
   data( ) {
     return {
       showLogin: false,
-      showAccountsStuff: true,
-      showCurrentStreamStuff: true,
-      email: null,
-      password: null,
-      loginError: false,
-      menuVisible: false,
       user: { name: 'Not initialised' },
       streams: [ ],
       searchFilter: null,
-      startIndex: 0,
-      itemsPerPage: 5,
-      streamAddition: null
+      itemsPerPage: 10,
+      linkToAdmin: this.$store.state.server.replace( '/api/v1', '/admin' )
     }
   },
   methods: {
-    getUser( ) { return this.$store.getters.user },
-    toggleShowNewStream( ) {},
-    toggleMenu( ) {
-      if ( this.user ) {
-        this.menuVisible = !this.menuVisible
-      } else { this.showLogin = !this.showLogin }
-    },
     logOut( ) {
       this.$store.commit( 'SET_USER', {} )
       window.localStorage.setItem( 'userAccount', null )
       window.localStorage.setItem( 'token', null )
       this.user = null
-      this.menuVisible = false
       this.showLogin = true
+      this.$http.defaults.headers.common[ 'Authorization' ] = ''
     },
     loggedIn( args ) {
       if ( args.guest === false ) {
@@ -151,7 +110,7 @@ export default {
         this.$http.defaults.headers.common[ 'Authorization' ] = jwtToken
         this.user = args.account
         this.getStreams( )
-        this.menuVisible = true
+
       } else if ( args.guest === true ) {
         let account = { apitoken: '', name: 'Anonymous', guest: true }
         this.$store.commit( 'SET_USER', { account } )
@@ -160,29 +119,10 @@ export default {
     },
     getStreams( ) {
       var jwtToken = localStorage.getItem( 'token' )
-      this.$http.get( this.$store.state.server + '/streams', {
-        headers: {
-          Authorization: jwtToken
-        }
-      } )
+      this.$http.get( this.$store.state.server + '/streams' )
         .then( response => {
           this.streams = response.data.resources.reverse( )
         } )
-    },
-    updateStreamList() {
-      this.getStreams()
-    },
-    addStream( stream ) {
-      this.$emit( 'add', stream )
-    },
-    dropReceiver( streamId ) {
-      console.log( 'Dropping receiver:', streamId )
-      this.$store.commit( 'DROP_RECEIVER', { streamId } )
-      bus.$emit( 'renderer-drop-stream', streamId )
-      bus.$emit( 'renderer-update' )
-    },
-    shareStream( streamId ) {
-      this.$clipboard( window.location.origin + '/?' + streamId )
     }
   },
   created( ) {
@@ -215,59 +155,21 @@ export default {
   },
   computed: {
     parentStreams( ) {
-      return this.streams.filter(stream => stream.isComputedResult == false)
+      return this.streams.filter( stream => stream.isComputedResult == false && stream.parent == null )
     },
     filteredStreams( ) {
       if ( this.searchFilter == null || this.searchFilter == '' )
-        return this.parentStreams
+        return [ ]
       else {
-        //this.startIndex = 0
         return this.parentStreams.filter( stream => stream.name.toLowerCase( ).includes( this.searchFilter.toLowerCase( ) ) || stream.streamId.toLowerCase( ).includes( this.searchFilter.toLowerCase( ) ) )
       }
     },
     paginatedStreams( ) {
-      return this.filteredStreams
-        .slice( this.startIndex, this.startIndex + this.itemsPerPage )
-    },
-    pageCount( ) {
-      return parseInt( this.filteredStreams.length / this.itemsPerPage ) + 1
-    },
-    currentPage( ) {
-      if ( this.startIndex == 0 ) return 1
-      return this.startIndex / this.itemsPerPage + 1
-    },
-    isIOS ( ) {
-      return (typeof window.orientation !== "undefined") && (navigator.userAgent.indexOf('OS X') !== -1)
-    },
+      return this.filteredStreams.slice( 0, this.itemsPerPage )
+    }
   }
 }
 
 </script>
 <style scoped>
-.user-menu {}
-
-.md-list-item-expand {
-  border: 0 !important;
-}
-
-.md-list-item-content>.md-icon:first-child {
-  margin-right: 8px;
-}
-
-.md-divider.md-inset {
-  margin-left: 32px;
-}
-
-.md-drawer {
-  width: auto;
-}
-
-.md-field {
-  margin-bottom: 0px;
-}
-
-.login-error {
-  color: #FF0000 !important;
-}
-
 </style>
diff --git a/src/components/SpeckleColorPicker.vue b/src/components/SpeckleColorPicker.vue
deleted file mode 100644
index 6de256f..0000000
--- a/src/components/SpeckleColorPicker.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <div id='color-picker' v-drag:dragable v-show='visible'>
-    <div id="dragable">
-      <md-button class="md-icon-button md-dense md-warn" v-if='isGuestUser' style='margin:0;'>
-        <md-icon style='font-size:20px;'>warning</md-icon>
-        <md-tooltip md-direction="bottom">You are not logged in, changes will not be saved.</md-tooltip>
-      </md-button>
-      <md-button class="md-icon-button md-dense" style='margin:0;' @click.native='visible = false'>
-        <md-icon style='font-size:20px;'>close</md-icon>
-        <md-tooltip md-direction="bottom">Close</md-tooltip>
-      </md-button>
-    </div>
-    <div class="content">
-      <div class="other-options">
-        <div style='cursor:pointer; height: 30px; line-height: 30px;' @click='showExtra = !showExtra'>Extra options
-          <md-icon>{{ showExtra ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</md-icon>
-        </div>
-        <div v-show='showExtra'>
-          <md-field style='margin-bottom: 10px !important'>
-            <label>shininess</label>
-            <md-input type="number" v-model='layerMaterial.shininess'></md-input>
-          </md-field>
-          <md-checkbox class='md-primary' style='margin-top: 5px;' v-model='layerMaterial.showEdges'><small>Edges</small></md-checkbox>
-          <md-checkbox class='md-primary' style='margin-top: 5px;' v-model='layerMaterial.wireframe'><small>Wireframe</small></md-checkbox>
-        </div>
-      </div>
-      <color-picker v-model='layerMaterial.color'></color-picker>
-    </div>
-    </div>
-</template>
-<script>
-import { Chrome, Compact } from 'vue-color'
-import * as THREE from 'three'
-import * as ML from 'three.meshline'
-import debounce from 'debounce'
-
-export default {
-  name: '',
-  components: {
-    'color-picker': Chrome,
-    'compact-picker': Compact
-  },
-  computed: {
-    isGuestUser( ) {
-      return this.$store.getters.user.guest
-    },
-    layerMaterial( ) {
-      if ( this.layerGuid != '' )
-        return this.$store.getters.layerMaterial( this.streamId, this.layerGuid )
-      return this.temp
-    }
-  },
-  watch: {
-    'layerMaterial.color': {
-      handler( newValue ) {
-        this.layerMaterial.color.hex = newValue.hex
-        this.layerMaterial.color.a = newValue.a
-        this.layerMaterial.threeMeshMaterial.color = new THREE.Color( newValue.hex )
-        this.layerMaterial.threeLineMaterial.color = new THREE.Color( newValue.hex )
-        this.layerMaterial.threePointMaterial.color = new THREE.Color( newValue.hex )
-        this.layerMaterial.threeMeshMaterial.opacity = newValue.a
-        this.layerMaterial.threeLineMaterial.opacity = newValue.a
-        this.layerMaterial.threePointMaterial.opacity = newValue.a
-      },
-      deep: true
-    },
-    'layerMaterial.shininess': {
-      handler( newValue ) {
-        if ( newValue < 0 ) newValue = 0
-        if ( newValue > 50 ) newValue = 50
-        this.layerMaterial.threeMeshMaterial.shininess = newValue
-        this.layerMaterial.threeMeshVertexColorsMaterial.shininess = newValue
-      }
-    },
-    'layerMaterial.showEdges': {
-      handler( newValue ) {
-        this.layerMaterial.threeEdgesMaterial.visible = newValue
-      }
-    },
-    'layerMaterial.wireframe': {
-      handler( newValue ) {
-        this.layerMaterial.threeMeshMaterial.wireframe = newValue
-        this.layerMaterial.threeMeshVertexColorsMaterial.wireframe = newValue
-      }
-    },
-    'visible': {
-      handler( nval ) {
-        if ( !nval ) this.commitUpdates( )
-      }
-    }
-  },
-  data( ) {
-    return {
-      temp: {
-        color: { hex: '#B3B3B3', a: 1 },
-        smooth: true,
-        shiny: 0,
-        showEdges: true,
-        wireframe: false
-      },
-      layerGuid: '',
-      streamId: '',
-      visible: false,
-      showExtra: false
-    }
-  },
-  methods: {
-    commitUpdates( ) {
-      console.log( 'updating db with colors and stuffs.' )
-      if ( this.$store.getters.user.guest === true ) return console.warn( 'User not logged in, will not commit updates.' )
-      this.$http.put( this.$store.state.server + '/streams/' + this.streamId + '/layers', {
-          layers: this.$store.getters.receiverById( this.streamId ).layers
-        }, {
-          headers: { Authorization: this.$store.getters.authToken }
-        } )
-        .then( response => {} )
-        .catch( err => {
-          console.warn( 'Failed to update stream cosmetics.' )
-          console.warn( err )
-        } )
-    }
-  },
-  mounted( ) {
-    bus.$on( 'show-color-picker', args => {
-      this.visible = !this.visible
-      if ( this.visible ) {
-        this.layerGuid = args.layerGuid
-        this.streamId = args.streamId
-      }
-    } )
-  }
-}
-
-</script>
-<style>
-#dragable {
-  position: relative;
-  top: 0px;
-  left: 0px;
-  height: 30px;
-  cursor: move;
-  background-color: white;
-  text-align: right;
-  line-height: 30px;
-}
-
-#dragable span {
-  /*width: 220px;*/
-  line-height: 30px;
-  cursor: pointer;
-}
-
-#color-picker {
-  position: fixed;
-  z-index: 100;
-  left: 420px;
-  top: 10px;
-}
-
-.other-options {
-  border-top: 1px solid #E6E6E6;
-  box-sizing: border-box;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.content {
-  background-color: white;
-}
-
-</style>
diff --git a/src/components/SpeckleMobileLayer.vue b/src/components/SpeckleMobileLayer.vue
deleted file mode 100644
index 0c94f8b..0000000
--- a/src/components/SpeckleMobileLayer.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div class='spk-layer' @click='toggleLayer'>
-    <!-- <span class="layer-name"> -->
-      {{ spklayer.name }} ({{spklayer.objectCount}} objs)
-    <!-- </span> -->
-    <span class="layer-buttons"> 
-      <md-icon>{{ visible ? "visibility" : "visibility_off" }}</md-icon>
-    </span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SpeckleMobileLayer',
-  props: { 
-    spklayer: { type: Object },
-    streamid: { type: String },
-  },
-  components: {
-  },
-  computed: {
-    layerMaterial() {
-      return this.$store.getters.layerMaterial( this.streamid, this.spklayer.guid )
-    },
-    colorStyle() {
-      if( this.layerMaterial )
-        return 'color:' + this.layerMaterial.color.hex
-      return 'color:gray'
-    },
-    showPicker() {
-      return this.showColorPicker
-    }
-  },
-  data() {
-    return {
-      visible: true
-    }
-  },
-  methods: {
-    showColorPicker() {
-      bus.$emit( 'show-color-picker', { layerGuid: this.spklayer.guid, streamId: this.streamid } )
-    },
-    toggleLayer() {
-      this.visible = ! this.visible
-      this.layerMaterial.threeMeshMaterial.visible = this.visible
-      this.layerMaterial.threeMeshVertexColorsMaterial.visible = this.visible
-      this.layerMaterial.threeLineMaterial.visible = this.visible
-      this.layerMaterial.threeEdgesMaterial.visible = this.layerMaterial.showEdges ? this.visible : this.layerMaterial.threeEdgesMaterial.visible
-      this.layerMaterial.threePointMaterial.visible = this.visible
-    }
-  }, 
-  mounted() {
-  }
-}
-</script>
-
-<style scoped>
-
-.spk-layer{
-  position: relative;
-  margin-top: 10px;
-  width: 90%;
-  left: 3%;
-  box-sizing: border-box;
-  padding: 5px 20px;
-  background-color: #F3F3F3;
-  border-radius: 30px;
-  font-size: 12px;
-  transition: all .3s ease;
-  cursor: pointer;
-}
-.spk-layer:hover{
-  /*background-color: #B3B3B3;*/
-}
-
-.layer-buttons {
-  float: left;
-  margin-right: 10px;
-}
-
-.layer-buttons .md-icon {
-  cursor: pointer;
-}
-
-</style>
\ No newline at end of file
diff --git a/src/components/SpeckleMobileNav.vue b/src/components/SpeckleMobileNav.vue
deleted file mode 100644
index dac2855..0000000
--- a/src/components/SpeckleMobileNav.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-    <div id='mobile-nav'>
-      <md-bottom-bar md-shiftxxx id='buttons'>
-        <md-bottom-bar-item md-icon="add" @click.native='openTheAdder' style='color: red'></md-bottom-bar-item>
-        <md-bottom-bar-item :md-icon="currentView==='layers' ? 'close' : 'layers'" @click.native='currentView = currentView === "layers" ? "3d" : "layers"'></md-bottom-bar-item>
-        <md-bottom-bar-item :md-icon="currentView==='comments' ? 'close' : 'camera_alt'" @click.native='currentView = currentView === "comments" ? "3d" : "comments"'></md-bottom-bar-item>
-<!--         <md-bottom-bar-item md-icon="zoom_out_map" @click.native='' style='color: #FF0000 !important'></md-bottom-bar-item> -->
-        <md-bottom-bar-item :md-icon="currentView==='settings' ? 'close' : 'help_outline'" @click.native='currentView = currentView === "settings" ? "3d" : "settings"'></md-bottom-bar-item>
-
-      </md-bottom-bar>
-    <transition name="fade">
-      <md-whiteframe id='mobile-elements' v-show='currentView!="3d"'>
-        <md-button class="md-icon-button md-primary md-raised close-button" @click.native='currentView="3d"'>
-          <md-icon>close</md-icon>
-        </md-button>
-        <div v-show='currentView === "comments"'>
-          <div class="md-caption">Comments/Saved Views:</div>
-          <div v-for='comment in comments' class='comment' @click='setView(comment.camera)'>
-            <strong><span class='comment-author'>{{comment.author.name == user.name ? 'You :' : comment.author.name + ' said:'}}</span></strong>
-            <span class='comment-text'>{{comment.text}}</span>
-          </div>
-        </div>
-        <div v-show='currentView === "layers"'>
-          <div v-for='receiver in receivers' class='layer-group'>
-           <div class='comment'><span><strong>{{receiver.name}}</strong> <code>{{receiver.streamId}}</code></span></div>
-           <speckle-receiver-layer v-for='layer in receiver.layers' :key='layer.guid' :spklayer='layer' :streamid='receiver.streamId'></speckle-receiver-layer>
-          </div>
-        </div>
-        <div v-show='currentView === "settings"'>
-          <div class="md-caption">Help</div>
-          <p><md-icon style='font-size:12px; color: #3F3F3F;'>pan_tool</md-icon> <strong>Pan:</strong> Three finger drag.</p>
-          <p><md-icon style='font-size:12px; color: #3F3F3F;'>3d_rotation</md-icon> <strong>Rotate:</strong> One finger drag.</p>
-          <p><md-icon style='font-size:12px; color: #3F3F3F;'>zoom_in</md-icon> <strong>Zoom:</strong> Pinch in and out with two fingers.</p>
-        </div>
-      </md-whiteframe>
-    </transition>
-  </div>
-</template>
-
-<script>
-import SpeckleReceiverLayer       from './SpeckleMobileLayer.vue'
-
-
-export default {
-  name: 'SpeckleMobileNav',
-  components: {
-    SpeckleReceiverLayer
-  },
-  watch: {
-    'currentView': {
-      handler( newValue, oldValue ) {
-        if( !this.isMobile ) return
-        if( newValue === oldValue ) return
-        if( newValue === '3d' ) bus.$emit('renderer-unpop')
-        else if(oldValue === '3d')
-          bus.$emit('renderer-pop')
-      }
-    }
-  },
-  computed: {
-    isMobile() {
-      return this.$store.getters.isMobile
-    },
-    layersButtonIcon() {
-      if( this.currentView === 'layers') return 'close'
-      else return 'layers'
-    },
-    user() {
-      return this.$store.getters.user
-    },
-    receivers() {
-      return this.$store.getters.allReceivers
-    },
-    layers() {
-      return 'lol'
-    },
-    comments() {
-      return this.$store.getters.allComments
-    }
-  },
-  data() {
-    return {
-      currentView: '3d',
-    }
-  },
-  methods: {
-    openTheAdder() {
-      this.$emit('addstream')
-    },
-    setView( where ) {
-      bus.$emit( 'renderer-setview', where )
-    },
-    toggleDo( ) {
-      bus.$emit('renderer-toggle-do')
-    }
-  }
-}
-</script>
-
-<style scoped>
-  #mobile-nav {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-  }
-  #buttons {
-    z-index: 2;
-  }
-  #mobile-elements { 
-    position: fixed;
-    bottom: 50px;
-    height: 35%;
-    background-color: white;
-    width: 100%;
-    z-index: 1;
-    overflow-y: auto;
-    box-sizing: border-box;
-    padding: 20px 10px 20px 10px;
-  }
-
-  .close-button {
-    position: fixed;
-    bottom: 40%;
-    right: 10px;
-    z-index: 100;
-  }
-  .comment {
-    position: relative;
-    margin-top: 10px;
-    width: 90%;
-    left: 3%;
-    box-sizing: border-box;
-    padding: 5px 20px;
-    background-color: #E6E6E6;
-    border-radius: 30px;
-    font-size: 12px;
-    transition: all .3s ease;
-    cursor: pointer;
-  }
-
-  .comment:hover{
-    background-color: #B3B3B3;
-  } 
-
-  .layer-group {
-    position: relative;
-    margin-top: 10px;
-    width: 90%;
-    left: 3%;
-    box-sizing: border-box;
-    border-radius: 10px;
-    font-size: 12px;
-    transition: all .3s ease;
-    cursor: pointer;
-  }
-  .fade-enter-active, .fade-leave-active {
-    transition: all .3s
-  }
-  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
-    opacity: 0
-  }
-</style>
\ No newline at end of file
diff --git a/src/components/SpeckleReceiverCard.vue b/src/components/SpeckleReceiverCard.vue
new file mode 100644
index 0000000..8e62a90
--- /dev/null
+++ b/src/components/SpeckleReceiverCard.vue
@@ -0,0 +1,391 @@
+<template>
+  <md-card md-with-hover class='md-elevation-0' style='margin-bottom:10px;'>
+    <md-card-header>
+      <md-card-header-text>
+        <div class="md-title">{{spkreceiver.name}}</div>
+        <div class="md-caption">{{spkreceiver.streamId}}</div>
+      </md-card-header-text>
+      <md-button class="md-icon-button xxx-md-raised" v-on:click='removeReceiver(spkreceiver.streamId)'>
+        <md-icon>close</md-icon>
+      </md-button>
+      <md-button v-show='expired' class='md-icon-button md-dense md-accent md-raised' @click.native='refreshStreamObjects()'>
+        <md-icon>refresh</md-icon>
+        <md-tooltip v-if="!isIOS">Update available. Click to refresh.</md-tooltip>
+      </md-button>
+    </md-card-header>
+    <md-card-content>
+      <md-tabs>
+        <md-tab id="tab-info" md-label="Info" xxx-md-icon='info'>
+          <p>Created on: <strong>{{createdAt}}</strong></p>
+          <p>Modified on: <strong>{{createdAt}}</strong></p>
+          <p>Units: <strong>{{spkreceiver.baseProperties.units}}</strong></p>
+          <p>Owner: <strong>{{owner.name}} {{owner.surname}}</strong></p>
+        </md-tab>
+        <md-tab id="tab-layers" md-label="Layers" xxx-md-icon='layers'>
+          <div xxxlass='md-inset' v-for='layer in layers' :key='layer.guid'>
+            <speckle-receiver-layer :spklayer='layer' :streamid='spkreceiver.streamId'></speckle-receiver-layer>
+          </div>
+        </md-tab>
+        <md-tab id="tab-controllers" md-label="Controllers" xxx-md-icon='sliders'>
+          <div v-for='controller in controllers' :key='controller.guid'>
+            <controller :controller='controller' v-on:changed='controllersChanged' :enabled='!computeInProgress'></controller>
+          </div>
+          <div v-if='!controllers || !controllers.length'>
+            <p class='md-caption'>No controllers are broadcasting for this stream (make sure you "enable remote control" on the gh sender).</p>
+          </div>
+          <br>
+          <div style="text-align: right">
+            <md-button class='md-dense md-raised xxx-no-margin md-icon-button' @click.native='getControllers()'>
+              <md-icon>refresh</md-icon>
+              <md-tooltip>Refresh controller list.</md-tooltip>
+            </md-button>&nbsp
+            <md-button v-if='currentComputeResponse!=null' class='md-dense md-raised no-margin' @click.native='restoreOriginal()'>
+              Restore original
+            </md-button>
+          </div>
+          <br>
+          <br>
+          <md-progress-bar md-mode="indeterminate" v-if='showComputeProgressBar'></md-progress-bar>
+        </md-tab>
+        <md-tab id="tab-history" md-label="History">
+          <p v-show='spkreceiver.children.length == 0' class='md-caption'>This stream has no history.</p>
+          <history-item v-for='streamId in historyStreams' :key='streamId' :streamid='streamId' :selected='streamId==selectedHistoryItem' v-on:selectme='historySelect' v-on:restore='restoreLatest'></history-item>
+          <br>
+          <p v-show='spkreceiver.children.length != 0'>Showing {{historyStreams.length}} out of {{spkreceiver.children.length}} history items.</p>
+          <md-button v-if='historyStreams.length < spkreceiver.children.length' class='md-dense md-raised no-margin' @click.native='maxHistoryObjects+=10'>
+            Load 10 more...
+          </md-button>
+        </md-tab>
+      </md-tabs>
+    </md-card-content>
+  </md-card>
+</template>
+<script>
+import qp from 'query-parse'
+import ClientReceiver from '../receiver/ClientReceiver'
+import SpeckleReceiverLayer from './SpeckleReceiverLayer.vue'
+import HistoryItem from './SpeckleReceiverHistoryItem.vue'
+import Controller from './Controller.vue'
+
+import debounce from 'debounce'
+
+export default {
+  name: 'SpeckleReceiver',
+  components: {
+    SpeckleReceiverLayer,
+    Controller,
+    HistoryItem
+  },
+  props: [ 'spkreceiver' ],
+  data( ) {
+    return {
+      comments: 'Hello World. How Are you? Testing testing 123.',
+      expired: false,
+      debounceCount: 0,
+      senderId: null,
+      viewerSettings: {},
+      controllers: [ ],
+      controllersChecked: false,
+      streamParent: null,
+      selectedHistoryItem: null,
+      selectedHistoryStream: null,
+      currentComputeResponse: null,
+      showComputeProgressBar: false,
+      computeInProgress: false,
+      maxHistoryObjects: 10,
+      owner: { name: null, surname: null }
+    }
+  },
+  computed: {
+    historyStreams( ) {
+      return this.spkreceiver.children.reverse( ).slice( 0, this.maxHistoryObjects )
+    },
+    createdAt( ) {
+      return new Date( this.spkreceiver.createdAt ).toLocaleString( )
+    },
+    username( ) {
+      return this.$store.getters.user.name
+    },
+    layers( ) {
+      return this.spkreceiver.layers
+    },
+    sliders( ) {
+      return this.controllers.filter( c => c.InputType === 'Slider' )
+    },
+    inRenderObjects( ) {
+      return this.$store.state.inRenderObjects
+    },
+    isIOS( ) {
+      return ( typeof window.orientation !== "undefined" ) && ( navigator.userAgent.indexOf( 'OS X' ) !== -1 )
+    },
+  },
+  methods: {
+    // returning  back from history
+    restoreLatest( ) {
+      let prevHistoryObjs = this.selectedHistoryStream.objects.map( o => o._id )
+      bus.$emit( 'r-unload-objects', { objs: prevHistoryObjs, streamId: this.selectedHistoryStream.streamId } )
+
+      let toUnGhost = this.spkreceiver.objects.map( o => o._id )
+      bus.$emit( 'r-unghost-objects', toUnGhost )
+      this.selectedHistoryItem = null
+    },
+
+    // returning back from controllers
+    restoreOriginal( ) {
+      let toUnload = this.currentComputeResponse.objects.map( o => o._id )
+      bus.$emit( 'r-unload-objects', { objs: toUnload, streamId: this.currentComputeResponse.streamId } )
+      this.spkreceiver.objects = [ ]
+      this.refreshStreamObjects( )
+      this.getControllers( )
+    },
+
+    async historySelect( streamId ) {
+      if ( this.selectedHistoryItem === streamId ) return
+      console.log( `History selection ${streamId}` )
+
+      // get the requested history stream
+      let res = await this.$http.get( `${this.$store.state.server}/streams/${streamId}` )
+      let stream = res.data.resource
+
+      // unload previous selected history objects  (TODO: check for overlaps with new stream)
+      if ( this.selectedHistoryItem !== null ) {
+        let toUnload = this.selectedHistoryStream.objects.map( o => o._id )
+        bus.$emit( 'r-unload-objects', { objs: toUnload, streamId: this.selectedHistoryStream.streamId } )
+      }
+
+      // ghost objects from original
+      let toGhost = this.spkreceiver.objects.filter( obj => stream.objects.find( o => o._id === obj._id ) == null ).map( o => o._id )
+      bus.$emit( 'r-ghost-objects', toGhost )
+
+      // unghost objects from original
+      let toUnGhost = this.spkreceiver.objects.filter( obj => stream.objects.find( o => o._id === obj._id ) != null ).map( o => o._id )
+      bus.$emit( 'r-unghost-objects', toUnGhost )
+
+
+      this.selectedHistoryItem = streamId
+      this.selectedHistoryStream = stream
+
+      // set basics
+      stream.objects.forEach( ( obj, i ) => {
+        obj.streams = [ stream.streamId ]
+        let layer = stream.layers.find( layer => { return i >= layer.startIndex && i < ( layer.startIndex + layer.objectCount ) } )
+        obj.layerGuids = [ layer.guid ]
+      } )
+
+      let toRequest = stream.objects.filter( obj => this.inRenderObjects.indexOf( obj._id ) === -1 )
+      bus.$emit( 'r-load-objects', { toRequest: toRequest, zoomExt: false } )
+
+      let toUpdateProps = stream.objects.filter( obj => this.inRenderObjects.indexOf( obj._id ) !== -1 )
+      bus.$emit( 'r-update-props', toUpdateProps )
+    },
+
+    async receiverReady( stream ) {
+      try {
+        let res = await this.$http.get( this.$store.state.server + '/streams/' + this.spkreceiver.streamId )
+        let payload = { ...res.data.resource }
+        let stream = payload
+
+        this.$store.commit( 'INIT_RECEIVER_DATA', { payload } )
+        // set basics
+        stream.objects.forEach( ( obj, i ) => {
+          obj.streams = [ stream.streamId ]
+          let layer = stream.layers.find( layer => { return i >= layer.startIndex && i < ( layer.startIndex + layer.objectCount ) } )
+          obj.layerGuids = [ layer.guid ]
+        } )
+
+        let toRequest = stream.objects.filter( obj => this.inRenderObjects.indexOf( obj._id ) === -1 )
+        let toUpdateProps = stream.objects.filter( obj => this.inRenderObjects.indexOf( obj._id ) !== -1 )
+
+        bus.$emit( 'r-load-objects', { toRequest: toRequest, zoomExt: true } )
+        bus.$emit( 'r-update-props', toUpdateProps )
+
+        let ownerResp = await this.$http.get( `${this.$store.state.server}/accounts/${stream.owner}` )
+        this.owner = ownerResp.data.resource
+
+        this.updateUrl( )
+      } catch ( e ) {
+        console.warn( e )
+      }
+    },
+
+    async refreshStreamObjects( ) {
+      console.log( 'updating stream' )
+      try {
+        let res = await this.$http.get( this.$store.state.server + '/streams/' + this.spkreceiver.streamId )
+        let stream = res.data.resource
+
+        // set basics
+        stream.objects.forEach( ( obj, i ) => {
+          obj.streams = [ stream.streamId ]
+          let layer = stream.layers.find( layer => { return i >= layer.startIndex && i < ( layer.startIndex + layer.objectCount ) } )
+          obj.layerGuids = [ layer.guid ]
+        } )
+
+        let toUnload = this.spkreceiver.objects.filter( obj => stream.objects.find( o => o._id === obj._id ) == null ).map( o => o._id )
+        bus.$emit( 'r-unload-objects', { objs: toUnload, streamId: stream.streamId } )
+
+        let toRequest = stream.objects.filter( obj => this.inRenderObjects.indexOf( obj._id ) === -1 )
+        let toUpdateProps = stream.objects.filter( obj => this.inRenderObjects.indexOf( obj._id ) !== -1 )
+
+        let payload = { ...res.data.resource }
+        this.$store.commit( 'INIT_RECEIVER_DATA', { payload } )
+
+        bus.$emit( 'r-load-objects', { toRequest: toRequest, zoomExt: false } )
+        bus.$emit( 'r-update-props', toUpdateProps )
+        this.expired = false
+      } catch ( e ) {
+        console.warn( e )
+      }
+    },
+
+    removeReceiver( streamId ) {
+      let toUnload = this.spkreceiver.objects.map( o => o._id )
+      bus.$emit( 'r-unload-objects', { objs: toUnload, streamId: this.spkreceiver.streamId } )
+
+      // unload history, if any loaded
+      if ( this.selectedHistoryItem !== null )
+        bus.$emit( 'r-unload-objects', { objs: this.selectedHistoryStream.objects.map( o => o._id ), streamId: this.selectedHistoryItem } )
+
+      // unload compute response, if any loaded
+      if ( this.currentComputeResponse !== null )
+        bus.$emit( 'r-unload-objects', { objs: this.currentComputeResponse.objects.map( o => o._id ), streamId: this.currentComputeResponse.streamId } )
+
+      this.$store.commit( 'DROP_RECEIVER', { streamId } )
+      this.updateUrl( )
+    },
+
+    updateGlobal( ) {
+      console.info( 'live update event' )
+      this.viewerSettings.autoRefresh ? this.refreshStreamObjects( ) : this.expired = true
+    },
+
+    async updateMeta( ) {
+      console.log( "todo: update metatada" )
+    },
+
+    getControllers( ) {
+      console.log( 'Getting controllers for ' + this.spkreceiver.streamId )
+      this.mySpkReceiver.broadcast( { eventType: 'get-definition-io' } )
+    },
+
+    addControllers( wsMessage ) {
+      this.senderId = wsMessage.senderId
+      this.controllers = wsMessage.args.controllers
+      // console.log( this.controllers )
+    },
+
+    controllersChanged( ) {
+      console.log( 'controllers changed', this.controllers )
+      this.showComputeProgressBar = true
+      let args = { controllers: this.controllers, layers: this.spkreceiver.layers, client: this.mySpkReceiver, senderId: this.senderId }
+      this.computeInProgress = true
+      this.sendComputeRequest( args )
+    },
+
+    async computeResponse( streamId ) {
+      console.log( `got ${streamId} as compute response` )
+
+      let res = await this.$http.get( this.$store.state.server + '/streams/' + streamId )
+      let stream = res.data.resource
+
+      let toUnload = this.spkreceiver.objects.filter( obj => stream.objects.find( o => o._id === obj._id ) == null ).map( o => o._id )
+      bus.$emit( 'r-unload-objects', { objs: toUnload, streamId: this.spkreceiver.streamId } )
+
+      if ( this.currentComputeResponse != null ) {
+        // unload it
+        let toUnload = this.currentComputeResponse.objects.filter( obj => stream.objects.find( o => o._id === obj._id ) == null ).map( o => o._id )
+        bus.$emit( 'r-unload-objects', { objs: toUnload, streamId: this.currentComputeResponse.streamId } )
+      }
+
+      this.currentComputeResponse = stream
+
+      // set basics
+      stream.objects.forEach( ( obj, i ) => {
+        obj.streams = [ stream.streamId ]
+        let layer = stream.layers.find( layer => { return i >= layer.startIndex && i < ( layer.startIndex + layer.objectCount ) } )
+        obj.layerGuids = [ layer.guid ]
+      } )
+
+
+      let toRequest = stream.objects.filter( obj => this.inRenderObjects.indexOf( obj._id ) === -1 )
+      let toUpdateProps = stream.objects.filter( obj => this.inRenderObjects.indexOf( obj._id ) !== -1 )
+
+      bus.$emit( 'r-load-objects', { toRequest: toRequest, zoomExt: false } )
+      bus.$emit( 'r-update-props', toUpdateProps )
+
+      this.showComputeProgressBar = false
+      this.computeInProgress = false
+    },
+
+    receiverError( err ) {
+      this.error = err
+      if ( err == 'Remote control is disabled for this sender' ) { // need a more elegant error handler for progress bar
+      }
+      bus.$emit( 'snackbar-update', err )
+    },
+
+    sendComputeRequest: _.debounce( args => {
+      console.log( 'sendComputeRequest args:', args )
+      let requestParams = args.controllers.map( controller => {
+        return {
+          guid: controller.guid,
+          value: controller.inputType != 'Point' ? controller.value : { X: controller.X, Y: controller.Y, Z: controller.Z },
+          inputType: controller.inputType
+        }
+      } )
+      let message = { eventType: 'compute-request', requestParameters: requestParams }
+      console.log( 'Sending computation request. requestParams:', requestParams )
+      args.client.sendMessage( message, args.senderId )
+    }, 700 ),
+
+    revertToParent( ) {
+      this.streamParent = null
+      this.getAndSetStream( )
+      bus.$emit( 'snackbar-update', "Restoring parent stream" )
+    },
+
+    updateUrl( ) {
+      let streams = this.$store.getters.allReceivers.map( r => r.streamId ).join( ',' )
+      // check if we have a query first
+      if ( window.location.href.includes( '?' ) ) {
+        let query = window.location.href.split( '?' )
+        let queryObject = qp.toObject( query[ 1 ] )
+        let newQuery = '?'
+        // recreate the query:
+        // 1. include the server, if it was present
+        if ( queryObject.server )
+          newQuery += 'server=' + queryObject.server + '&'
+        // 2. add the streams list, if we actually have any receivers
+        if ( this.$store.getters.allReceivers.length !== 0 )
+          newQuery += 'streams=' + streams
+        // 3. get that in the url bar
+        history.replaceState( { spk: 'changed history' }, "Speckle Viewer Rocks", newQuery )
+      // if no query, just barge in and add the streams list, but do check if we have any streams to actually add
+      } else if ( this.$store.getters.allReceivers.length !== 0 ) {
+        history.replaceState( { spk: 'changed history' }, "Speckle Viewer Rocks", '?streams=' + streams )
+      }
+    }
+  },
+  mounted( ) {
+    this.viewerSettings = this.$store.getters.viewerSettings
+    console.log( 'Stream receiver mounted for streamid: ' + this.spkreceiver.streamId )
+    this.name = 'loading ' + this.spkreceiver.streamId
+
+    this.mySpkReceiver = new ClientReceiver( {
+      baseUrl: this.spkreceiver.serverUrl,
+      streamId: this.spkreceiver.streamId,
+      token: this.spkreceiver.token
+    } )
+
+    this.mySpkReceiver.on( 'error', this.receiverError )
+    this.mySpkReceiver.on( 'ready', this.receiverReady )
+    this.mySpkReceiver.on( 'update-meta', this.updateMeta )
+    this.mySpkReceiver.on( 'update-global', this.updateGlobal )
+    this.mySpkReceiver.on( 'get-def-io-response', this.addControllers )
+    this.mySpkReceiver.on( 'compute-response', this.computeResponse )
+  }
+}
+
+</script>
+<style>
+</style>
diff --git a/src/components/SpeckleReceiverHistoryItem.vue b/src/components/SpeckleReceiverHistoryItem.vue
new file mode 100644
index 0000000..3b92659
--- /dev/null
+++ b/src/components/SpeckleReceiverHistoryItem.vue
@@ -0,0 +1,91 @@
+<template>
+  <md-card style="margin-bottom: 4px; padding: 10px; cursor:default;" :class='{"md-elevation-0":true, "md-primary selected":selected}' md-with-hover>
+    <div class="md-layout md-alignment-center-left">
+      <div class="md-layout-item md-size-70" style="cursor: pointer" @click='selectThis()'>
+        <p class="md-layout-item">
+          <strong>{{updatedAt}}</strong></span>
+          <span v-if='!stream.isComputedResult'>
+          <br>
+          <span class="md-caption">{{streamid}}, {{stream.name}}</span>
+          </span>
+          <div v-if='stream.isComputedResult'>
+            <span class="md-caption">Computed result <strong>{{streamid}}</strong></span>
+            <div class='md-caption' v-for='inp in stream.globalMeasures.input' :key='inp.name'>{{inp.name}}: <strong>{{inp.value}}</strong></div>
+            <!-- {{stream.globalMeasures}} -->
+          </div>
+        </p>
+      </div>
+      <div class="md-layout-item md-size-15" style="text-align: right" >
+        <md-button v-if='selected' class='md-icon-button md-dense xxxmd-accent md-raised' @click.stop='$emit("restore")'>
+          <md-icon>refresh</md-icon>
+          <md-tooltip>Restore latest stream version.</md-tooltip>
+        </md-button>
+      </div>
+      <div class="md-layout-item md-size-15" style="text-align: right">
+        <a class='md-icon-button md-dense xxxmd-accent md-raised' style='border-bottom:none; text-decoration: none !important' :href='href' target='_blank'>
+          <md-icon>open_in_new</md-icon>
+          <md-tooltip>Open in a new tab.</md-tooltip>
+        </a>
+      </div>
+    </div>
+  </md-card>
+</template>
+<script>
+import qp from 'query-parse'
+
+export default {
+  name: 'HistoryItem',
+  props: { streamid: { type: String }, selected: { type: Boolean } },
+  computed: {
+    updatedAt( ) {
+      return new Date( this.stream.updatedAt ).toLocaleString( )
+    },
+    href() {
+      let query = qp.toObject( window.location.href.split( '?' )[ 1 ] )
+      let reassembledQuery = window.location.href.split( '?' )[ 0 ]
+
+      if ( query.server )
+        reassembledQuery += `?server=${query.server}`
+      reassembledQuery += `&streams=${this.streamid}`
+      return reassembledQuery
+    }
+  },
+  data( ) {
+    return {
+      stream: {
+        name: "Loading",
+        updatedAt: null
+      }
+    }
+  },
+  methods: {
+    selectThis( ) {
+      this.$emit( 'selectme', this.streamid )
+    }
+  },
+  mounted( ) {
+    this.$http.get( this.$store.state.server + '/streams/' + this.streamid + '?fields=name,updatedAt,isComputedResult,globalMeasures' )
+      .then( response => {
+        this.stream.updatedAt = response.data.resource.updatedAt
+        this.stream.name = response.data.resource.name
+        this.stream.isComputedResult = response.data.resource.isComputedResult
+        this.stream.globalMeasures = response.data.resource.globalMeasures
+      } )
+      .catch( err => {
+        console.log( err )
+      } )
+  }
+}
+
+</script>
+<style scoped>
+.selected {
+  /*z-index: 100;*/
+}
+
+.slected.md-caption {
+  color: white !important;
+
+}
+
+</style>
diff --git a/src/components/SpeckleReceiverLayer.vue b/src/components/SpeckleReceiverLayer.vue
index 8d8198a..c91396d 100644
--- a/src/components/SpeckleReceiverLayer.vue
+++ b/src/components/SpeckleReceiverLayer.vue
@@ -1,120 +1,78 @@
 <template>
-  <div class='spk-layer'>
-    <div class='layer-details'>
-    <span class="layer-name">
-      {{ spklayer.name }} ({{spklayer.objectCount}} objs)
-    </span>
-    <span class="layer-buttons"> 
-      <md-icon v-show='showPicker' @click.native='showColorPicker' :style='colorStyle'>color_lens</md-icon>
-      <md-icon @click.native='toggleLayer'>{{ visible ? "visibility" : "visibility_off" }}</md-icon>
-      <md-icon @click.native='toggleObjects'>{{ objectsExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</md-icon>
-    </span>
+  <md-card style="margin-bottom: 4px; padding: 10px; cursor: pointer;" class='md-elevation-0' md-with-hover @click.native='toggleLayer'>
+    <div class='md-layout md-alignment-center-center' >
+      <div class='md-layout-item md-size-70'>
+        {{ spklayer.name }} <span class="md-caption">({{spklayer.objectCount}} objs)</span>
+      </div>
+      <div class="md-layout-item" style="text-align: right">
+        <!-- <md-button class='md-dense md-icon-button md-primary' @click.native='toggleLayer'> -->
+          <md-icon class='md-primary'>{{ visible ? "visibility" : "visibility_off" }}</md-icon>
+        <!-- </md-button> -->
+      </div>
     </div>
-    <!-- <md-list v-show='objectsExpanded'>
-      <md-list-item class='md-inset' v-for='object in objects' :key='object.guid'>
-        <speckle-receiver-object :spkobj='object'></speckle-receiver-object>
-      </md-list-item>
-    </md-list> -->
-  </div>
+  </md-card>
 </template>
-
 <script>
-
 import SpeckleReceiverObject from './SpeckleReceiverObject.vue'
 
 export default {
   name: 'SpkReceiverLayer',
-  props: { 
+  props: {
     spklayer: { type: Object },
     streamid: { type: String },
   },
   components: {
-    SpeckleReceiverObject  
+    SpeckleReceiverObject
   },
-  data() {
+  data( ) {
     return {
       visible: true,
       objectsExpanded: false,
     }
   },
   computed: {
-    layerMaterial() {
+    layerMaterial( ) {
       return this.spklayer.properties
     },
-    colorStyle() {
-      if( this.layerMaterial )
+    colorStyle( ) {
+      if ( this.layerMaterial )
         return 'color:' + this.spklayer.properties.color.hex
       return 'color:gray'
     },
-    showPicker() {
+    showPicker( ) {
       return this.showColorPicker
     },
-    objects() {
-      return this.$store.getters.objectsByLayer(this.spklayer.guid)
+    objects( ) {
+      return this.$store.getters.objectsByLayer( this.spklayer.guid )
     }
   },
   watch: {
-    layerName(){
+    layerName( ) {
       return this.spklayer.name
     },
-    objectCount(){
-      console.log(this.spklayer)
+    objectCount( ) {
+      console.log( this.spklayer )
       return this.spklayer.objectCount
     },
   },
   methods: {
-    showColorPicker() {
+    showColorPicker( ) {
       bus.$emit( 'show-color-picker', { layerGuid: this.spklayer.guid, streamId: this.streamid } )
     },
-    toggleLayer() {
-      this.visible = ! this.visible
-      this.layerMaterial.threeMeshMaterial.visible = this.visible
-      this.layerMaterial.threeMeshVertexColorsMaterial.visible = this.visible
-      this.layerMaterial.threeLineMaterial.visible = this.visible
-      this.layerMaterial.threeEdgesMaterial.visible = this.layerMaterial.showEdges ? this.visible : this.layerMaterial.threeEdgesMaterial.visible
-      this.layerMaterial.threePointMaterial.visible = this.visible
+    toggleLayer( ) {
+      this.visible = !this.visible
+      bus.$emit( 'r-toggle-layer', {
+        layerGuid: this.spklayer.guid,
+        state: this.visible
+      } )
     },
-    toggleObjects(){
-      this.objectsExpanded = ! this.objectsExpanded
+    toggleObjects( ) {
+      this.objectsExpanded = !this.objectsExpanded
     }
-  }, 
-  mounted() {
-  }
+  },
+  mounted( ) {}
 }
-</script>
 
+</script>
 <style scoped>
-
-/*
-.spk-layer{
-  border-bottom: 1px solid #E6E6E6;
-  position: relative;
-}
-.spk-layer:last-of-type{
-  border-bottom: 0;
-}
-.layer-details {
-  position: relative;
-  display: inline-block;
-  font-size: 12px;
-}
-.layer-name {
-  float: left;
-  display: inline-block;
-  width: 70%;
-  overflow: hidden;
-}
-.layer-buttons {
-  text-align: right;
-  float: left;
-  display: inline-block;
-  width: 30%;
-  box-sizing: border-box;
-  color: #666666;
-}
-
-.layer-buttons .md-icon {
-  cursor: pointer;
-}
-*/
 </style>
diff --git a/src/components/SpeckleRenderer.vue b/src/components/SpeckleRenderer.vue
index 556e0ed..ceb28b9 100644
--- a/src/components/SpeckleRenderer.vue
+++ b/src/components/SpeckleRenderer.vue
@@ -44,136 +44,180 @@ export default {
     }
   },
   methods: {
-    loadStream( ) {
-      this.update( )
-    },
-    async update( ) {
-      // removes the objects that are no longer in any stream's object list
-      // TODO: remove them from the vuejs store as well (free for GC?)
-      for ( let myObject of this.scene.children ) {
-        if ( myObject.hasOwnProperty( '_id' ) ) {
-          let found = this.allObjects.find( o => { return o._id === myObject._id && o.streamId === myObject.streamId } )
-          if ( !found ) {
-            scene.remove( myObject )
-            myObject.geometry.dispose( )
-            // myObject.material.dispose( ) // don't dispose material as they're used across?
-            myObject = null
-          }
-        }
-      }
-
-      // creates a list of objects to request from the server and makes the previously requested ones visible
-      let thingsToReq = [ ]
-      for ( let myObject of this.allObjects ) {
-        let sceneObj = this.scene.children.find( obj => { return obj.name === myObject.streamId + '::' + myObject._id } )
-        if ( !sceneObj ) {
-          let layer = this.layerMaterials.find( lmat => { return lmat.guid === myObject.layerGuid && lmat.streamId === myObject.streamId } )
-          if ( !layer ) layer = this.defaultLayerMaterial
-          thingsToReq.push( { object: myObject, layer: layer } )
-        } else {
-          // makes things visible; this should no longer be the case (as we're removing the objects fully above ¯\_(ツ)_/¯
-          if ( sceneObj.visible === false ) {
-            sceneObj.visible = true
-            sceneObj.isCurrent = true
-            sceneObj.spkProperties = myObject.properties
-          }
-        }
-      }
-
-      let totalCount = 0
-      let requestBatches = [ ]
-      let maxObjectRequestCount = 25
-      let bucket = [ ]
-      for ( var i = 0; i < thingsToReq.length; i++ ) {
-        bucket.push( thingsToReq[ i ] )
+    // proper load unload methods
+    // 1. loads objects into the scene
+    async loadObjects( args ) {
+      let toRequest = args.toRequest,
+        zExt = true
+      try { zExt = args.zoomExt } catch ( e ) {}
+      // prepare buckets
+      let totalCount = 0,
+        requestBatches = [ ],
+        maxObjectRequestCount = 25,
+        bucket = [ ]
+      for ( var i = 0; i < toRequest.length; i++ ) {
+        bucket.push( toRequest[ i ] )
         if ( i % maxObjectRequestCount == 0 && i != 0 ) {
           requestBatches.push( [ ...bucket ] )
           bucket = [ ]
         }
       }
-      if ( bucket.length != 0 )
-        requestBatches.push( bucket )
+      if ( bucket.length != 0 ) requestBatches.push( bucket )
 
-      let filledBatch = [ ]
-      let k = 1
+      console.info( `Made ${requestBatches.length} batches` )
+
+      // request the objects from the server
+      let filledBatch = [ ],
+        k = 1
       for ( const batch of requestBatches ) {
-        let res = await this.$http.post( this.$store.state.server + '/objects/getbulk?omit=base64,rawData', batch.map( item => item.object._id ) )
+        let res = await this.$http.post( this.$store.state.server + '/objects/getbulk?omit=base64,rawData', batch.map( item => item._id ) )
         res.data.resources.forEach( ( obj, i ) => {
-          obj.streamId = batch[ i ].object.streamId;
-          obj.layerGuid = batch[ i ].object.layerGuid
+          obj.streams = batch[ i ].streams
+          obj.layerGuids = batch[ i ].layerGuids
         } )
         if ( requestBatches.length > 0 && batch.length > 0 )
-          bus.$emit( 'stream-load-progress', `Got ${ k++ * maxObjectRequestCount } objects out of ${thingsToReq.length }` )
-
-        filledBatch = [ ...res.data.resources.map( ( obj, i ) => { return { object: obj, layer: batch[ i ].layer } } ), ...filledBatch ]
+          bus.$emit( 'stream-load-progress', `Got ${ k++ * maxObjectRequestCount } objects out of ${toRequest.length }` )
+        filledBatch = [ ...res.data.resources, ...filledBatch ]
       }
 
+      // convert the objects and add them to the scene
       let convertedCount = 0
-      filledBatch.forEach( ( pair, i ) => {
-        convertedCount++
-        if ( !Converter.hasOwnProperty( pair.object.type ) )
-          throw new Error( `Objects of type ${pair.object.type} not supported.` )
-        else
-          Converter[ pair.object.type ]( { obj: pair.object, layer: pair.layer, camera: this.camera }, ( err, threeObj ) => {
-            threeObj.hash = pair.object.hash
-            threeObj.streamId = pair.object.streamId
-            threeObj.layerGuid = pair.object.layerGuid
-            threeObj.visible = pair.layer.visible
-            threeObj.isCurrent = true
-            threeObj.spkProperties = pair.object.properties
-            threeObj.name = pair.object.streamId + '::' + pair.object._id
-            threeObj._id = pair.object._id
-
-            let color = null
-            try {
-              color = pair.object.properties.spkColor
-            } catch( e ) { }
-
-            if ( color ) {
-              // override material
-              let color = pair.object.properties.spkColor
-              if ( threeObj instanceof THREE.Mesh ) {
-                threeObj.material = new THREE.MeshPhongMaterial( {
-                  color: new THREE.Color( color.hex ),
-                  specular: new THREE.Color( '#FFECB3' ),
-                  shininess: 30,
-                  side: THREE.DoubleSide,
-                  transparent: true,
-                  wireframe: false,
-                  opacity: color.a
-                } )
-              }
-              if ( threeObj instanceof THREE.Line ) {
-                threeObj.material = new THREE.LineBasicMaterial( {
-                  color: new THREE.Color( color.hex ),
-                  linewidth: 1,
-                  opacity: color.a
-                } )
-              }
-              if ( threeObj instanceof THREE.Points ) {
-                threeObj.material = new THREE.PointsMaterial( {
-                  color: new THREE.Color( color.hex ),
-                  sizeAttenuation: false,
-                  transparent: true,
-                  size: 3,
-                  opacity: color.a
-                } )
-              }
-            }
-            this.scene.add( threeObj )
-            if ( convertedCount >= filledBatch.length ) {
-              this.needsBoundsRefresh = true
-              this.computeSceneBoundingSphere( geometry => {
-                this.needsBoundsRefresh = false
-                this.sceneBoundingSphere = geometry.boundingSphere
-                this.zoomExtents( )
-                bus.$emit( 'stream-load-progress', `All ready.` )
-              } )
-            }
-          } )
+      filledBatch.forEach( object => {
+        if ( !Converter.hasOwnProperty( object.type ) ) {
+          convertedCount++
+          if ( convertedCount >= filledBatch.length ) {
+            this.computeSceneBoundingSphereAndZoomExt( zExt )
+            bus.$emit( 'stream-load-progress', `All ready.` )
+          }
+          return console.warn( `Objects of type ${object.type} not supported.` )
+        }
+        let layer = this.$store.getters.allLayerMaterials.find( l => object.layerGuids.indexOf( l.guid ) > -1 )
+        if ( !layer ) layer = this.defaultLayerMaterial
+        Converter[ object.type ]( { obj: object, layer: layer }, ( err, threeObj ) => {
+          convertedCount++
+          threeObj.hash = object.hash
+          threeObj.streams = object.streams
+          threeObj.layerGuids = object.layerGuids
+          threeObj._id = object._id
+          threeObj.properties = object.properties
+
+          let color = null
+          try { color = object.properties.spkColor } catch ( e ) {}
+          if ( color ) {
+            if ( threeObj instanceof THREE.Mesh ) threeObj.material = this.getMeshMaterial( color )
+            if ( threeObj instanceof THREE.Line ) threeObj.material = this.getLineMaterial( color )
+            if ( threeObj instanceof THREE.Points ) threeObj.material = this.getPointsMaterial( color )
+          }
+          this.scene.add( threeObj )
+          this.$store.state.inRenderObjects.push( object._id )
+          if ( convertedCount >= filledBatch.length ) {
+            this.computeSceneBoundingSphereAndZoomExt( zExt )
+            bus.$emit( 'stream-load-progress', `All ready.` )
+          }
+        } )
+      } )
+    },
+
+    // 2. updates object tracking (streams and layers)
+    updateObjectProps( toUp ) {
+      toUp.forEach( newObj => {
+        let found = this.scene.children.filter( obj => obj.hasOwnProperty( '_id' ) ).find( obj => obj._id === newObj._id )
+        found.streams = [ ...newObj.streams, ...found.streams ]
+        found.layerGuids = [ ...newObj.layerGuids, ...found.layerGuids ]
+      } )
+    },
+
+    // 3. unloads objects
+    unloadObjects( args ) {
+      let removedIds = [ ]
+      let objectIds = args.objs,
+        streamId = args.streamId
+
+      this.scene.children = this.scene.children.filter( object => {
+        // probably a scene object
+        if ( !object.hasOwnProperty( '_id' ) )
+          return true
+        if ( objectIds.indexOf( object._id ) !== -1 ) {
+          object.streams = object.streams.filter( x => x !== streamId )
+          if ( object.streams.length === 0 ) {
+            removedIds.push( object._id )
+            return false
+          }
+          return true
+        }
+        return true
+      } )
+
+      this.$store.commit( 'REMOVE_INRENDER_OBJS', removedIds )
+      this.computeSceneBoundingSphere( geometry => this.sceneBoundingSphere = geometry.boundingSphere )
+    },
+
+    // visibility methods
+    toggleLayer( args ) {
+      this.scene.traverse( obj => {
+        if ( !obj.hasOwnProperty( 'layerGuids' ) ) return
+        if ( obj.layerGuids.indexOf( args.layerGuid ) >= 0 )
+          obj.visible = args.state
+      } )
+    },
+
+    ghostObjects( objIds ) {
+      this.scene.traverse( obj => {
+        if ( !obj.hasOwnProperty( '_id' ) ) return
+        if ( obj.hasOwnProperty( 'ghostMaterial' ) ) return // means it's already ghosted
+        if ( objIds.indexOf( obj._id ) !== -1 ) {
+          obj.ghostMaterial = obj.material // keep old ref
+          obj.material = obj.material.clone( ) // break ref
+          obj.material.opacity = 0.1 // change opacity
+          obj.premultipliedAlpha = true
+          obj.renderOrder = 1
+          // obj.material.wireframe = true
+        }
+      } )
+    },
+
+    unghostObjects( objIds ) {
+      this.scene.traverse( obj => {
+        if ( !obj.hasOwnProperty( '_id' ) || !obj.hasOwnProperty( 'ghostMaterial' ) ) return
+        if ( objIds.indexOf( obj._id ) !== -1 ) {
+          obj.material.dispose( ) // only leaky bladders, no leaky memory please
+          obj.material = obj.ghostMaterial // go back
+          obj.renderOrder = 0
+          delete obj.ghostMaterial
+        }
       } )
     },
 
+    // Custom color material generators
+    getMeshMaterial( color ) {
+      return new THREE.MeshPhongMaterial( {
+        color: new THREE.Color( color.hex ),
+        specular: new THREE.Color( '#FFECB3' ),
+        shininess: 30,
+        side: THREE.DoubleSide,
+        transparent: true,
+        wireframe: false,
+        opacity: color.a
+      } )
+    },
+    getLineMaterial( color ) {
+      return new THREE.LineBasicMaterial( {
+        color: new THREE.Color( color.hex ),
+        linewidth: 1,
+        opacity: color.a
+      } )
+    },
+    getPointsMaterial( color ) {
+      return new THREE.PointsMaterial( {
+        color: new THREE.Color( color.hex ),
+        sizeAttenuation: false,
+        transparent: true,
+        size: 3,
+        opacity: color.a
+      } )
+    },
+
+    // Base Render Methods
     render( ) {
       TWEEN.update( )
 
@@ -187,10 +231,10 @@ export default {
       this.renderer.setSize( window.innerWidth, window.innerHeight )
     },
 
+    // Selection methods
     deselectObjects( ) {
       this.hoveredObjects.forEach( myObject => {
         let layer = this.layerMaterials.find( lmat => { return lmat.guid === myObject.layerGuid && lmat.streamId === myObject.streamId } )
-
         myObject.material = myObject.originalMaterial
       } )
       this.hoveredObjects = [ ]
@@ -200,6 +244,7 @@ export default {
       if ( this.$store.getters.selectedObjects != null )
         this.$store.commit( 'SET_SELECTED_OBJECTS', { selectedObjectProperties } )
     },
+
     selectObject( selectedObject ) {
       selectedObject.originalMaterial = selectedObject.material
       selectedObject.material = this.hoverMaterial
@@ -210,11 +255,14 @@ export default {
       this.selectedObjectsProperties = {
         hash: selectedObject.hash,
         streamId: selectedObject.streamId,
-        properties: selectedObject.spkProperties
+        properties: selectedObject.properties,
+        streams: selectedObject.streams,
+        layers: selectedObject.layerGuids
       }
       let selectedObjectProperties = this.selectedObjectsProperties
       this.$store.commit( 'SET_SELECTED_OBJECTS', { selectedObjectProperties } )
     },
+
     canvasClickedEvent( event ) {
       if ( event.which === 3 ) {
         this.deselectObjects( )
@@ -226,41 +274,21 @@ export default {
       // preselect object
       let mouse = new THREE.Vector2( ( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1 )
       this.raycaster.setFromCamera( mouse, this.camera )
-
       let intersects = this.raycaster.intersectObjects( scene.children )
       if ( intersects.length <= 0 ) {
         return
       }
-
       let selectedObject = null
       intersects.reverse( ).forEach( obj => {
         if ( obj.object.material.visible ) selectedObject = obj.object
       } )
-
       if ( !selectedObject ) {
         return
       }
       this.selectObject( selectedObject )
     },
-    selectBus( objectId ) {
-      this.deselectObjects( )
-      let selectedObject = this.scene.children.find( child => { return child.name.includes( objectId ) } )
-      let hash = this.getHash( objectId )
-      this.zoomToObject( hash )
-      this.selectObject( selectedObject )
-    },
-    getHash( objectId ) {
-      let child = this.scene.children.find( child => { return child.name.includes( objectId ) } )
-      return child.hash
-    },
-    dropStream( streamId ) {
-      this.scene.children = this.scene.children.filter( child => !child.name.includes( streamId ) )
-      this.computeSceneBoundingSphere( geometry => {
-        this.needsBoundsRefresh = false
-        this.sceneBoundingSphere = geometry.boundingSphere
-        this.zoomExtents( )
-      } )
-    },
+
+    // Renderer Camera Methods
     zoomToObject( hash ) {
       if ( this.hoveredObject ) {
         hash = this.hoveredObject
@@ -288,6 +316,14 @@ export default {
         target: [ bsphere.center.x, bsphere.center.y, bsphere.center.z ]
       }, 100 )
     },
+
+    computeSceneBoundingSphereAndZoomExt( zExt ) {
+      this.computeSceneBoundingSphere( geometry => {
+        this.sceneBoundingSphere = geometry.boundingSphere
+        if ( zExt ) this.zoomExtents( )
+      } )
+    },
+
     computeSceneBoundingSphere( cb ) {
       let minX, minY, minZ, maxX, maxY, maxZ
 
@@ -300,6 +336,7 @@ export default {
       geometry.computeBoundingSphere( )
       cb( geometry )
     },
+
     zoomExtents( duration ) {
       let offset = this.sceneBoundingSphere.radius / Math.tan( Math.PI / 180.0 * this.controls.object.fov * 0.5 )
       let vector = new THREE.Vector3( 0, 0, 1 )
@@ -313,11 +350,13 @@ export default {
         target: [ this.sceneBoundingSphere.center.x, this.sceneBoundingSphere.center.y, this.sceneBoundingSphere.center.z ]
       }, 250 )
     },
+
     setFar_t( ) {
       let camDistance = this.camera.position.distanceTo( this.sceneBoundingSphere.center )
       this.camera.far = 2 * this.sceneBoundingSphere.radius + camDistance
       this.camera.updateProjectionMatrix( )
     },
+
     setCamera( where, time ) {
       let self = this
       let duration = time ? time : 350
@@ -341,7 +380,6 @@ export default {
     this.selectionBoxes = [ ]
     this.hoveredObjects = [ ]
 
-    this.needsBoundsRefresh = false
     this.loadFinishedPromise = null
 
     this.updateInProgress = false
@@ -401,28 +439,23 @@ export default {
     window.THREE = THREE
     window.scene = this.scene
 
-    bus.$on( 'renderer-update', debounce( this.update, 300 ) )
-    bus.$on( 'renderer-setview', this.setCamera )
-    bus.$on( 'renderer-load-stream', this.loadStream )
-    bus.$on( 'zext', this.zoomExtents )
+    bus.$on( 'r-load-objects', this.loadObjects )
+    bus.$on( 'r-unload-objects', this.unloadObjects )
+    bus.$on( 'r-update-props', this.updateObjectProps )
+
+    bus.$on( 'r-ghost-objects', this.ghostObjects )
+    bus.$on( 'r-unghost-objects', this.unghostObjects )
+    bus.$on( 'r-zoom-to-object', this.zoomToObject )
+    bus.$on( 'r-zoom-ext', this.zoomExtents )
+
+    bus.$on( 'r-deselect-objects', this.deselectObjects )
+
+
+
+    bus.$on( 'select-bus', this.selectBus )
+    bus.$on( 'r-toggle-layer', this.toggleLayer )
+
 
-    bus.$on( 'renderer-pop', ( ) => {
-      console.log( "POP" )
-      this.$refs.mycanvas.classList.toggle( 'pop' )
-    } )
-    bus.$on( 'renderer-unpop', ( ) => {
-      console.log( "UNPOP" )
-      this.$refs.mycanvas.classList.toggle( 'pop' )
-    } )
-    bus.$on( 'select-bus', ( objectId ) => {
-      this.selectBus( objectId )
-    } )
-    bus.$on( 'zoomToObject', ( ) => {
-      this.zoomToObject( )
-    } )
-    bus.$on( 'renderer-drop-stream', ( streamId ) => {
-      this.dropStream( streamId )
-    } )
     document.addEventListener( 'keydown', ( event ) => {
       const keyName = event.key;
       if ( keyName == ' ' ) this.zoomExtents( )
@@ -443,61 +476,4 @@ export default {
   background-color: aliceblue;
 }
 
-#render-window.pop {
-  top: -15%;
-}
-
-.object-info {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  z-index: 10;
-  user-select: none;
-}
-
-.expand-button {
-  z-index: 42;
-  margin: 0px !important;
-}
-
-
-.expanded-info-box {
-  border-color: grey;
-  position: absolute;
-  top: 0;
-  left: 35px;
-  /*max-width: 400px;*/
-  max-height: 300px;
-  border-top-left-radius: 12px;
-  border-bottom-left-radius: 12px;
-  border-top-right-radius: 12px;
-  border-bottom-right-radius: 12px;
-  user-select: auto;
-  z-index: 40;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-
-@media (max-width: 768px) {
-  .expanded-info-box {
-    position: fixed;
-    top: auto;
-    bottom: 50px;
-    left: 2%;
-    width: 96%;
-    max-width: 96%;
-    height: 30%;
-    background-color: white;
-    z-index: 44;
-    overflow-x: auto;
-  }
-}
-
-.tree-view-wrapper {
-  font-family: auto;
-  overflow: hidden !important;
-}
-
 </style>
diff --git a/src/main.js b/src/main.js
index 6ea3e68..627972a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,7 +24,7 @@ window.camLoc = {}
 
 // if we provide a server url, use that.
 // if not, assume the plugin is online and live, and
-// default to `window.location.origin + '/api/v1'` 
+// default to `window.location.origin + '/api/v1'`
 
 if ( window.location.href.includes( '?' ) ) {
   let query = qp.toObject( window.location.href.split( '?' )[ 1 ] )
@@ -34,7 +34,7 @@ if ( window.location.href.includes( '?' ) ) {
     Store.state.server = window.location.origin + '/api/v1'
 
   if( query.streams )
-    Store.state.initStreams = query.streams.split(',')
+    Store.state.initStreams = query.streams.split(',').filter( s => s !== '')
 } else {
   Store.state.server = window.location.origin + '/api/v1'
 }
diff --git a/src/receiver/ClientReceiver.js b/src/receiver/ClientReceiver.js
index 9873dcd..ed049ac 100644
--- a/src/receiver/ClientReceiver.js
+++ b/src/receiver/ClientReceiver.js
@@ -19,53 +19,52 @@ export default class SpeckleReceiver extends EventEmitter {
     this.stream = null
     this.wsReconnectionAttempts = 0
 
-    this.setupClient( cb => this.setupWebsockets( cb => this.getStream( cb => {
-      this.emit( 'ready', this.stream.name, this.stream.layers, this.stream.objects, [], [] )
-      this.setupWsReconnecter()
-    } ) ) )
+    this.setupClient( cb => this.setupWebsockets( cb => {
+      this.setupWsReconnecter( )
+      this.emit( 'ready' )
+    } ) )
   }
 
-  setupWsReconnecter () {
-    this.wsConnectionChecker = setInterval( () => {
-      if( ( !this.ws || this.ws.readyState == 3 ) && ( this.wsReconnectionAttempts < 20 ) ) {
-        this.setupWebsockets()
-        this.wsReconnectionAttempts++
-      }
-    }, 2000 )
+  // registers an anonymous client
+  setupClient( cb ) {
+    axios.post( this.baseUrl + '/clients', { client: { documentName: 'Online Viewer' } }, { headers: { 'Auth': this.auth } } )
+      .then( response => {
+        this.clientId = response.data.resource._id
+        cb( )
+      } )
+      .catch( err => {
+        console.log( err )
+      } )
   }
 
+  // sets up websockets & ws events
   setupWebsockets( cb ) {
     this.ws = new WebSocket( this.wsUrl + '/?access_token=' + this.auth + '&stream_id=' + this.streamId + '&client_id=' + this.clientId )
 
     this.ws.onopen = ( ) => {
       console.log( 'Websocket connection opened for', this.streamId )
-      cb()
+      if ( cb ) cb( )
     }
 
     this.ws.onmessage = message => {
       if ( message.data === 'ping' ) return this.ws.send( 'alive' )
       let parsedMessage = JSON.parse( message.data )
-      switch( parsedMessage.args.eventType ) {
+      switch ( parsedMessage.args.eventType ) {
         case 'update-global':
           this.emit( 'update-global' )
-          console.log( 'GLOBAL UPDATE YO' )
           break
         case 'update-meta':
           this.emit( 'update-meta' )
-          console.log( 'METAMETA UPDATE YO')
           break
         case 'compute-request-error':
           this.emit( 'error', parsedMessage.args.response )
           break
         case 'compute-response':
           this.childStreamId = parsedMessage.args.streamId
-          this.getChildStream( cb => {
-            this.emit( 'ready', this.stream.name, this.stream.layers, this.stream.objects, [], [] )
-          })
+          this.emit( 'compute-response', this.childStreamId )
           break
         default:
-          console.log( 'Custom event received:', parsedMessage.args.eventType )
-          this.emit( parsedMessage.args.eventType, parsedMessage)
+          this.emit( parsedMessage.args.eventType, parsedMessage )
           break;
       }
     }
@@ -75,30 +74,29 @@ export default class SpeckleReceiver extends EventEmitter {
     }
   }
 
-  setupClient( cb ) {
-    axios.post( this.baseUrl + '/clients', { client: { documentName: 'Online Viewer' } }, { headers: { 'Auth': this.auth } } )
-      .then( response => {
-        this.clientId = response.data.resource._id
-        cb( )
-      } )
-      .catch( err => {
-        console.log( err )
-      } )
+  // sets up ws reconnecter
+  setupWsReconnecter( ) {
+    this.wsConnectionChecker = setInterval( ( ) => {
+      if ( ( !this.ws || this.ws.readyState == 3 ) && ( this.wsReconnectionAttempts < 20 ) ) {
+        this.setupWebsockets( )
+        this.wsReconnectionAttempts++
+      }
+    }, 2000 )
   }
 
   broadcast( message ) {
-    if( !this.streamId )
+    if ( !this.streamId )
       throw new Error( 'No streamId, where should I broadcast?' )
     this.ws.send( JSON.stringify( {
       eventName: 'broadcast',
       senderId: this.clientId,
       streamId: this.streamId,
-      args:  message
+      args: message
     } ) )
   }
 
-  sendMessage( args, recipientId  ) {
-    console.log(args)
+  sendMessage( args, recipientId ) {
+    console.log( args )
     this.ws.send( JSON.stringify( {
       eventName: 'message',
       senderId: this.clientId,
@@ -108,50 +106,4 @@ export default class SpeckleReceiver extends EventEmitter {
 
     } ) )
   }
-
-  getStream( cb ) {
-    axios.get( this.baseUrl + '/streams/' + this.streamId, { headers: { 'Auth': this.auth } } )
-      .then( response => {
-        console.log( response.data )
-        this.stream = response.data.resource
-        cb( this.stream )
-      } )
-      .catch( err => {
-        console.log( err )
-      } )
-  }
-
-  getChildStream( cb ) {
-    axios.get( this.baseUrl + '/streams/' + this.childStreamId, { headers: { 'Auth': this.auth } } )
-      .then( response => {
-        console.log( response.data.resource )
-        this.stream = response.data.resource
-        cb( this.stream )
-      } )
-      .catch( err => {
-        console.log( err )
-      } )
-  }
-
-  getStreamNameAndLayers( cb ) {
-    // TODO: Promise.all()
-    let responseName = {}
-    axios.get( this.baseUrl + '/streams/' + this.streamId + '?fields=name,layers', { headers: { 'Auth': this.auth } } )
-      .then( response => {
-        cb( responseName.data.resource.name, response.data.resource.layers )
-      })
-      .catch( err => {
-        console.error( err )
-      })
-  }
-
-  getObject( objectId ) {
-    axios.get( this.baseUrl + '/objects/' + objectId )
-      .then( response => {
-
-      })
-      .catch( err => {
-        console.log( err )
-      })
-  }
 }
diff --git a/src/store/Store.js b/src/store/Store.js
index 14eccea..3118ce4 100644
--- a/src/store/Store.js
+++ b/src/store/Store.js
@@ -9,16 +9,15 @@ Vue.use( Vuex )
 export default new Vuex.Store( {
   state: {
     server: null,
-    auth: false,
-    token: null,
+    jwtToken: '',
+    user: {},
     mobile: false,
     initStreams: [ ],
     receivers: [ ],
     comments: [ ],
-    user: {},
-    jwtToken: '',
-    viewerSettings: {},
-    selectedObjects: []
+    viewerSettings: { },
+    selectedObjects: [ ],
+    inRenderObjects: [ ]
   },
   getters: {
     isMobile: state => state.mobile,
@@ -63,6 +62,10 @@ export default new Vuex.Store( {
   },
   actions: {},
   mutations: {
+    ADD_INRENDER_OBJS( state, objects ) { },
+    REMOVE_INRENDER_OBJS( state, objects ) {
+      state.inRenderObjects = state.inRenderObjects.filter( id => objects.indexOf(id) === -1 )
+    },
     SET_VIEWER_SETTINGS( state, { settings } ) {
       state.viewerSettings = settings
     },
@@ -80,7 +83,7 @@ export default new Vuex.Store( {
       state.receivers = receivers
     },
     ADD_RECEIVER( state, { receiver } ) {
-      state.receivers.push( receiver )
+      state.receivers.unshift( receiver )
     },
 
     ADD_COMMENT( state, { payload } ) {
@@ -104,12 +107,28 @@ export default new Vuex.Store( {
       l.threeMeshMaterial.opacity = payload.a
       l.threeLineMaterial.opacity = payload.a
       l.threePointMaterial.opacity = payload.a
-
     },
 
     INIT_RECEIVER_DATA( state, { payload } ) {
+
       let target = state.receivers.find( rec => rec.streamId === payload.streamId )
+
       target.name = payload.name
+      target.children = payload.children
+      target.createdAt = payload.createdAt
+      target.updatedAt = payload.updatedAt
+      target.comments = payload.comments
+      target.baseProperties = payload.baseProperties
+      target.owner = payload.owner
+
+      // check if object table matches layer table
+      let objCountLayers = 0
+      payload.layers.forEach( l => objCountLayers += l.objectCount )
+      if ( objCountLayers != payload.objects.length ) {
+        console.warn( `Malformed layer table in stream ${payload.streamId}: ${payload.objects.length} objs out of which ${objCountLayers}  accounted for by layers.\nWill replace with one layer only that contains all objects.` )
+        payload.layers = [ ]
+        payload.layers.push( { guid: "gen-" + Date.now, name: "Default Layer", objectCount: payload.objects.length, orderIndex: 0, startIndex: 0, topology: "" } )
+      }
 
       // set objects
       target.objects = payload.objects.map( ( obj, index ) => {
@@ -121,6 +140,8 @@ export default new Vuex.Store( {
           _id: obj._id
         }
       } )
+
+      // create layers magic
       target.layers = payload.layers.map( layer => {
         if ( layer.properties === undefined || layer.properties.threeMeshMaterial === undefined ) {
           layer.properties = new LMat( { guid: layer.guid, streamId: target.streamId, color: layer.properties ? layer.properties.color.hex : null } )