diff --git a/app/controllers/application.js b/app/controllers/application.js
index 46ead9a..1987a9b 100644
--- a/app/controllers/application.js
+++ b/app/controllers/application.js
@@ -2,7 +2,6 @@ import Controller from '@ember/controller';
 import EmberObject from '@ember/object';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
-import { observer } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 
 export default Controller.extend({
@@ -13,10 +12,6 @@ export default Controller.extend({
   connected: alias('storage.connected'),
   rootListing: alias('storage.rootListing'),
 
-  handleConnected: observer('connected', function() {
-    this.get('storage').fetchRootListing();
-  }),
-
   categories: function() {
     let categories = [];
     let rootListing = this.get('rootListing');
diff --git a/app/controllers/index.js b/app/controllers/index.js
index 75e1796..c2b2544 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -1,5 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as controller } from '@ember/controller';
+import { observer } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import { isPresent } from '@ember/utils';
@@ -10,7 +11,7 @@ export default Controller.extend({
   storage: service(),
 
   // connecting: alias('storage.connecting'),
-  // connected: alias('storage.connected'),
+  connected: alias('storage.connected'),
   rootListing: alias('storage.rootListing'),
   currentDirPath: alias('application.currentDirPath'),
 
@@ -22,6 +23,15 @@ export default Controller.extend({
     } else {
       return this.get('rootListing');
     }
-  }.property('rootListing.[]', 'model.[]')
+  }.property('rootListing.[]', 'model.[]'),
+
+  connectedChange: observer('connected', function() {
+    if (this.get('connected')) {
+      // console.debug('connectedChange connected');
+    } else {
+      this.set('model', {});
+      this.set('path', null);
+    }
+  }),
 
 });
diff --git a/app/routes/index.js b/app/routes/index.js
index 570d170..6ae4ab3 100644
--- a/app/routes/index.js
+++ b/app/routes/index.js
@@ -14,6 +14,8 @@ export default Route.extend({
   },
 
   model(params) {
+    if (this.get('storage.disconnected')) { return {}; }
+
     let path = params.path;
 
     if (isEmpty(params.path)) { return null; }
@@ -28,6 +30,7 @@ export default Route.extend({
 
   setupController(controller, model) {
     this._super(controller, model);
+    if (this.get('storage.disconnected')) { return true; }
 
     if (isEmpty(this.get('storage.categories')) && this.get('storage.connected')) {
       this.get('storage').fetchRootListing();
diff --git a/app/services/storage.js b/app/services/storage.js
index 2ecd63f..230645b 100644
--- a/app/services/storage.js
+++ b/app/services/storage.js
@@ -1,4 +1,5 @@
 import EmberObject from '@ember/object';
+import { computed, observer } from '@ember/object';
 import Service from '@ember/service';
 import RemoteStorage from 'npm:remotestoragejs';
 import Widget from 'npm:remotestorage-widget';
@@ -10,6 +11,7 @@ export default Service.extend({
   widget: null,
   connecting: true,
   connected: false,
+  disconnected: computed.not('connected'),
   client: null,
   rootListing: null,
 
@@ -72,6 +74,14 @@ export default Service.extend({
     this.set('client', rs.scope('/'));
   }.on('init'),
 
+  connectedChange: observer('connected', function() {
+    if (this.get('connected')) {
+      this.fetchRootListing();
+    } else {
+      this.set('rootListing', null);
+    }
+  }),
+
   fetchRootListing() {
     this.fetchListing('').then(items => {
       this.set('rootListing', items.sortBy('name'));