diff --git a/CHANGELOG.md b/CHANGELOG.md
index e569e22..4445106 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## [Unreleased]
+- Remove destroyed mst roots from UI (resolves #48)
 
 ## [0.9.21] - 2019-3-9
 - mobx-devtools-mst mobx@5 support
diff --git a/packages/playground/src/casablanca/index.jsx b/packages/playground/src/casablanca/index.jsx
index 11ff173..20d8c4b 100644
--- a/packages/playground/src/casablanca/index.jsx
+++ b/packages/playground/src/casablanca/index.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { types } from 'mobx-state-tree';
+import { types, destroy } from 'mobx-state-tree';
 import { observer } from 'mobx-react';
 import { render } from 'react-dom';
 import inspectTree from 'mobx-devtools-mst'; // eslint-disable-line
@@ -61,6 +61,7 @@ class TodoAppComponent extends React.Component {
       <div>
         {storeInstance.todos.map(t => <TodoComponent key={t.id} {...t} />)}
         <input type="test" onKeyDown={this.handleInputKeydown} />
+        <button onClick={() => destroy(storeInstance)}>destroy</button>
       </div>
     );
   }
diff --git a/scripts/webextension/publish.js b/scripts/webextension/publish.js
index c307dc9..fcd4ab3 100644
--- a/scripts/webextension/publish.js
+++ b/scripts/webextension/publish.js
@@ -67,6 +67,7 @@ function publishCrhome(target = 'default') {
     }
     const { error, statusDetail } = JSON.parse(body);
     if (error) {
+      console.log({ error });
       throw error;
     }
     console.log('Chrome published', statusDetail); // eslint-disable-line no-console
diff --git a/src/frontend/TabMST/index.jsx b/src/frontend/TabMST/index.jsx
index ebdbd2e..30991e4 100644
--- a/src/frontend/TabMST/index.jsx
+++ b/src/frontend/TabMST/index.jsx
@@ -19,6 +19,7 @@ import LogItemExplorer from './LogItemExplorer';
       'mstLogEnabled',
       'activeRootId',
       'activeLogItemId',
+      'mstRootsUpdated',
     ],
   },
   injectProps: ({ mstLoggerStore, capabilitiesStore }) => {
@@ -103,6 +104,12 @@ export default class TabMST extends React.PureComponent {
   render() {
     if (!this.props.mstFound) return null;
 
+    if (this.props.rootsIds.length === 0) {
+      return (
+        <div className={css(styles.emptyState)}>No roots</div>
+      );
+    }
+
     const tabs = this.props.rootsIds.map(id => ({
       id,
       title: this.props.rootNamesById[id] || String(id),
@@ -147,6 +154,14 @@ export default class TabMST extends React.PureComponent {
 }
 
 const styles = StyleSheet.create({
+  emptyState: {
+    flex: '1 1 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: 20,
+    color: '#777',
+    fontWeight: 'bold',
+  },
   tabmst: {
     flex: '1 1 auto',
     display: 'flex',
diff --git a/src/frontend/stores/MSTChangesStore.js b/src/frontend/stores/MSTChangesStore.js
index f5045cf..6114cd6 100644
--- a/src/frontend/stores/MSTChangesStore.js
+++ b/src/frontend/stores/MSTChangesStore.js
@@ -46,6 +46,12 @@ export default class MSTChangesStore extends AbstractStore {
         roots.forEach(({ id, name }) => {
           this.rootNamesById[id] = name;
         });
+        this.emit('mstRootsUpdated');
+      }),
+      bridge.sub('frontend:remove-mst-root', (rootId) => {
+        delete this.rootNamesById[rootId];
+        delete this.itemsDataByRootId[rootId];
+        this.emit('mstRootsUpdated');
       })
     );