diff --git a/frontend_build/src/webpack.config.base.js b/frontend_build/src/webpack.config.base.js
index 3e5ce395e32..649e976b82e 100644
--- a/frontend_build/src/webpack.config.base.js
+++ b/frontend_build/src/webpack.config.base.js
@@ -61,12 +61,6 @@ var config = {
         options: {
           preserveWhitespace: false,
           loaders: {
-            js: {
-              loader: 'buble-loader',
-              query: {
-                objectAssign: 'Object.assign',
-              },
-            },
             stylus: ExtractTextPlugin.extract({
               allChunks: true,
               use: vueStylusLoaders,
@@ -76,6 +70,9 @@ var config = {
               use: vueSassLoaders,
             }),
           },
+          buble: {
+            objectAssign: 'Object.assign',
+          },
           // handles <mat-svg/>, <ion-svg/>, <iconic-svg/>, and <file-svg/> svg inlining
           preLoaders: { html: 'svg-icon-inline-loader' },
         },
diff --git a/karma_config/testUtils.js b/karma_config/testUtils.js
index 5f0b7068cd1..862f20cbd45 100644
--- a/karma_config/testUtils.js
+++ b/karma_config/testUtils.js
@@ -21,6 +21,7 @@ class MockResource {
     } else {
       fetchable.fetch = () => Promise.resolve(payload);
     }
+    sinon.spy(fetchable, 'fetch');
     return fetchable;
   }
 
@@ -35,7 +36,9 @@ class MockResource {
   }
 
   __getModelFetchReturns(payload, willReject = false) {
-    this.getModel.returns(this.__getFetchable(payload, willReject));
+    const fetchable = this.__getFetchable(payload, willReject);
+    this.getModel.returns(fetchable);
+    return fetchable;
   }
 
   __getModelSaveReturns(payload, willReject = false) {
@@ -45,7 +48,9 @@ class MockResource {
   }
 
   __getCollectionFetchReturns(payload, willReject = false) {
-    this.getCollection.returns(this.__getFetchable(payload, willReject));
+    const fetchable = this.__getFetchable(payload, willReject);
+    this.getCollection.returns(fetchable);
+    return fetchable;
   }
 }
 
diff --git a/karma_config/vueLocal.js b/karma_config/vueLocal.js
index e4b08cc9cb1..63683acfbce 100644
--- a/karma_config/vueLocal.js
+++ b/karma_config/vueLocal.js
@@ -4,6 +4,9 @@ import router from 'vue-router';
 import vueintl from 'vue-intl';
 import 'intl';
 import 'intl/locale-data/jsonp/en.js';
+import kRouter from 'kolibri.coreVue.router';
+
+kRouter.init([]);
 
 vue.prototype.Kolibri = {};
 vue.config.silent = true;
diff --git a/kolibri/content/api.py b/kolibri/content/api.py
index 64700802898..f02a1a34cf1 100644
--- a/kolibri/content/api.py
+++ b/kolibri/content/api.py
@@ -401,6 +401,7 @@ def _studio_response_to_kolibri_response(cls, studioresp):
             "thumbnail": studioresp.get("icon_encoding"),
             "public": studioresp.get("public", True),
             "total_resources": studioresp.get("total_resource_count", 0),
+            "total_file_size": studioresp.get("published_size"),
             "version": studioresp.get("version", 0),
             "included_languages": included_languages,
             "last_updated": studioresp.get("last_published"),
diff --git a/kolibri/content/serializers.py b/kolibri/content/serializers.py
index de8673fed38..aa43e08893b 100644
--- a/kolibri/content/serializers.py
+++ b/kolibri/content/serializers.py
@@ -51,8 +51,18 @@ def get_lang_name(self, instance):
 
     class Meta:
         model = ChannelMetadata
-        fields = ('root', 'id', 'name', 'description', 'author', 'last_updated', 'version', 'thumbnail',
-                  'lang_code', 'lang_name')
+        fields = (
+            'author',
+            'description',
+            'id',
+            'last_updated',
+            'lang_code',
+            'lang_name',
+            'name',
+            'root',
+            'thumbnail',
+            'version',
+        )
 
 
 class LowerCaseField(serializers.CharField):
diff --git a/kolibri/core/assets/src/api-resources/channel.js b/kolibri/core/assets/src/api-resources/channel.js
index 01962009564..747718adb6f 100644
--- a/kolibri/core/assets/src/api-resources/channel.js
+++ b/kolibri/core/assets/src/api-resources/channel.js
@@ -3,6 +3,9 @@ import { Resource } from '../api-resource';
 /**
  * @example <caption>Delete a channel</caption>
  * ChannelResource.getModel(channel_id).delete()
+ *
+ * @example Only get the channels that are "available" (i.e. with resources on device)
+ * ChannelResource.getCollection().fetch({ available: true })
  */
 export default class ChannelResource extends Resource {
   static resourceName() {
diff --git a/kolibri/core/assets/src/api-resources/contentNodeGranular.js b/kolibri/core/assets/src/api-resources/contentNodeGranular.js
new file mode 100644
index 00000000000..d4eeb3b06ca
--- /dev/null
+++ b/kolibri/core/assets/src/api-resources/contentNodeGranular.js
@@ -0,0 +1,28 @@
+import { Resource } from '../api-resource';
+
+/**
+ * @example Get ContentNode from a local USB drive for the purposes of importing from that drive.
+ * ContentNodeGranular.getModel(pk).fetch({ importing_from_drive_id: 'drive_1' });
+ *
+ * @example Get ContentNode from a remote channel (whose content DB has been downloaded).
+ * OR exporting to a USB drive.
+ * ContentNodeGranular.getModel(pk).fetch();
+ *
+ * Note: if the top-level of the channel is desired, then `pk` must be the channels's `root` id.
+ */
+export default class ContentNodeGranularResource extends Resource {
+  static resourceName() {
+    return 'contentnode_granular';
+  }
+
+  static idKey() {
+    return 'pk';
+  }
+
+  // Given a node ID, returns the {total_file_size, on_device_file_size}
+  getFileSizes(pk) {
+    return this.client({
+      path: `${this.urls['contentnodefilesize_list']()}${pk}`,
+    });
+  }
+}
diff --git a/kolibri/core/assets/src/api-resources/index.js b/kolibri/core/assets/src/api-resources/index.js
index 8580eaa7a56..ddc976db0fa 100644
--- a/kolibri/core/assets/src/api-resources/index.js
+++ b/kolibri/core/assets/src/api-resources/index.js
@@ -1,5 +1,6 @@
 import ClassroomResource from './classroom';
 import ContentNodeResource from './contentNode';
+import ContentNodeGranular from './contentNodeGranular';
 import FacilityUserResource from './facilityUser';
 import FacilityUsernameResource from './facilityUsername';
 import LearnerGroupResource from './learnerGroup';
@@ -24,6 +25,7 @@ import UserProgressResource from './userProgress';
 import ContentNodeProgressResource from './contentNodeProgress';
 import DeviceProvisionResource from './deviceProvision';
 import DevicePermissionsResource, { NewDevicePermissionsResource } from './devicePermissions';
+import RemoteChannel from './remoteChannel';
 
 const classroomResource = new ClassroomResource();
 const contentNodeResource = new ContentNodeResource();
@@ -52,10 +54,14 @@ const contentNodeProgressResource = new ContentNodeProgressResource();
 const deviceProvisionResource = new DeviceProvisionResource();
 const devicePermissionsResource = new DevicePermissionsResource();
 const newDevicePermissionsResource = new NewDevicePermissionsResource();
+const ContentNodeGranularResource = new ContentNodeGranular();
+const RemoteChannelResource = new RemoteChannel();
 
 export {
   classroomResource as ClassroomResource,
   contentNodeResource as ContentNodeResource,
+  ContentNodeGranularResource,
+  RemoteChannelResource,
   facilityUserResource as FacilityUserResource,
   facilityUsernameResource as FacilityUsernameResource,
   learnerGroupResource as LearnerGroupResource,
diff --git a/kolibri/core/assets/src/api-resources/remoteChannel.js b/kolibri/core/assets/src/api-resources/remoteChannel.js
new file mode 100644
index 00000000000..5dcfa35c3db
--- /dev/null
+++ b/kolibri/core/assets/src/api-resources/remoteChannel.js
@@ -0,0 +1,7 @@
+import { Resource } from '../api-resource';
+
+export default class RemoteChannelResource extends Resource {
+  static resourceName() {
+    return 'remotechannel';
+  }
+}
diff --git a/kolibri/core/assets/src/api-resources/task.js b/kolibri/core/assets/src/api-resources/task.js
index e23c0d9a5b7..9f099e1458a 100644
--- a/kolibri/core/assets/src/api-resources/task.js
+++ b/kolibri/core/assets/src/api-resources/task.js
@@ -1,32 +1,109 @@
 import { Resource } from '../api-resource';
+import pickBy from 'lodash/pickBy';
 
 export default class TaskResource extends Resource {
   static resourceName() {
     return 'task';
   }
 
-  localExportContent(driveId) {
-    const clientObj = {
-      path: this.localExportUrl(),
-      entity: { drive_id: driveId },
-    };
-    return this.client(clientObj);
+  /**
+   * Initiates a Task that imports a Channel Metadata DB from a remote source
+   *
+   * @param {string} channel_id -
+   *
+   */
+  startRemoteChannelImport({ channel_id }) {
+    return this.client({
+      path: this.urls[`${this.name}_startremotechannelimport`](),
+      method: 'POST',
+      entity: {
+        channel_id,
+      },
+    });
   }
 
-  localImportContent(driveId) {
-    const clientObj = {
-      path: this.localImportUrl(),
-      entity: { drive_id: driveId },
-    };
-    return this.client(clientObj);
+  /**
+   * Initiates a Task that imports a Channel Metadata DB from a local drive
+   *
+   * @param {string} params.channel_id -
+   * @param {string} params.drive_id -
+   *
+   */
+  startDiskChannelImport({ channel_id, drive_id }) {
+    return this.client({
+      path: this.urls[`${this.name}_startdiskchannelimport`](),
+      method: 'POST',
+      entity: {
+        channel_id,
+        drive_id,
+      },
+    });
   }
 
-  remoteImportContent(channelId) {
-    const clientObj = {
-      path: this.remoteImportUrl(),
-      entity: { channel_id: channelId },
-    };
-    return this.client(clientObj);
+  /**
+   * Initiates a Task that imports Channel Content from a remote source
+   *
+   * @param {string} params.channel_id -
+   * @param {string} [params.baseurl] - URL of remote source (defaults to Kolibri Studio)
+   * @param {Array<string>} [params.node_ids] -
+   * @param {Array<string>} [params.exclude_node_ids] -
+   * @returns {Promise}
+   *
+   */
+  startRemoteContentImport(params) {
+    return this.client({
+      path: this.urls[`${this.name}_startremotecontentimport`](),
+      method: 'POST',
+      entity: pickBy(params),
+    });
+  }
+
+  /**
+   * Initiates a Task that imports Channel Content from a local drive
+   *
+   * @param {string} params.channel_id -
+   * @param {string} params.drive_id -
+   * @param {Array<string>} [params.node_ids] -
+   * @param {Array<string>} [params.exclude_node_ids] -
+   * @returns {Promise}
+   *
+   */
+  startDiskContentImport(params) {
+    return this.client({
+      path: this.urls[`${this.name}_startdiskcontentimport`](),
+      method: 'POST',
+      entity: pickBy(params),
+    });
+  }
+
+  /**
+   * Initiates a Task that exports Channel Content to a local drive
+   *
+   * @param {string} params.channel_id -
+   * @param {string} params.drive_id -
+   * @param {Array<string>} [params.node_ids] -
+   * @param {Array<string>} [params.exclude_node_ids] -
+   * @returns {Promise}
+   *
+   */
+  startDiskContentExport(params) {
+    // Not naming it after URL to keep internal consistency
+    return this.client({
+      path: this.urls[`${this.name}_startdiskexport`](),
+      method: 'POST',
+      entity: pickBy(params),
+    });
+  }
+
+  /**
+   * Gets all the Tasks outside of the Resource Layer mechanism
+   *
+   */
+  getTasks() {
+    return this.client({
+      path: this.urls[`${this.name}_list`](),
+      method: 'GET',
+    });
   }
 
   deleteChannel(channelId) {
@@ -58,16 +135,6 @@ export default class TaskResource extends Resource {
     };
     return this.client(clientObj);
   }
-
-  get localExportUrl() {
-    return this.urls[`${this.name}_startlocalexport`];
-  }
-  get localImportUrl() {
-    return this.urls[`${this.name}_startlocalimport`];
-  }
-  get remoteImportUrl() {
-    return this.urls[`${this.name}_startremoteimport`];
-  }
   get deleteChannelUrl() {
     return this.urls[`${this.name}_startdeletechannel`];
   }
diff --git a/kolibri/core/assets/src/router.js b/kolibri/core/assets/src/router.js
index 6df3bccf187..a19a1426f30 100644
--- a/kolibri/core/assets/src/router.js
+++ b/kolibri/core/assets/src/router.js
@@ -45,6 +45,10 @@ class Router {
   replace(location, onComplete, onAbort) {
     return this._vueRouter.replace(location, onComplete, onAbort);
   }
+
+  push(location, onComplete, onAbort) {
+    return this._vueRouter.push(location, onComplete, onAbort);
+  }
 }
 
 const router = new Router();
diff --git a/kolibri/core/assets/src/views/core-modal/index.vue b/kolibri/core/assets/src/views/core-modal/index.vue
index ba5cfa05638..1fcc4b475e3 100644
--- a/kolibri/core/assets/src/views/core-modal/index.vue
+++ b/kolibri/core/assets/src/views/core-modal/index.vue
@@ -21,7 +21,7 @@
         :style="{ width: width, height: height }"
       >
 
-        <div class="top-buttons" @keydown.enter.stop>
+        <div class="top-buttons" @keydown.enter.stop v-if="!hideTopButtons">
           <button :aria-label="$tr('goBack')" @click="emitBackEvent" class="header-btn btn-back" v-if="enableBackBtn">
             <mat-svg category="navigation" name="arrow_back" />
           </button>
@@ -100,6 +100,10 @@
         type: String,
         required: false,
       },
+      hideTopButtons: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -221,9 +225,6 @@
   .btn-close
     right: -10px
 
-  .title
-    text-align: center
-
   .fade-enter-active, .fade-leave-active
     transition: all 0.3s ease
 
diff --git a/kolibri/core/assets/src/views/immersive-full-screen/index.vue b/kolibri/core/assets/src/views/immersive-full-screen/index.vue
index cdf8ca1d0a4..eacdcfc7c73 100644
--- a/kolibri/core/assets/src/views/immersive-full-screen/index.vue
+++ b/kolibri/core/assets/src/views/immersive-full-screen/index.vue
@@ -24,6 +24,7 @@
   import { validateLinkObject } from 'kolibri.utils.validators';
 
   export default {
+    name: 'immersiveFullScreen',
     props: {
       backPageLink: {
         type: Object,
diff --git a/kolibri/core/assets/src/views/k-breadcrumbs/index.vue b/kolibri/core/assets/src/views/k-breadcrumbs/index.vue
index 4653e957354..e640a68e625 100644
--- a/kolibri/core/assets/src/views/k-breadcrumbs/index.vue
+++ b/kolibri/core/assets/src/views/k-breadcrumbs/index.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div v-show="crumbs.length > 1">
+  <div v-show="showAllCrumbs || crumbs.length > 1">
     <nav class="breadcrumbs">
       <div v-show="collapsedCrumbs.length" class="breadcrumbs-dropdown-wrapper">
         <ui-icon-button :hasDropdown="true" icon="expand_more" size="small">
@@ -110,6 +110,14 @@
           return crumbItems.slice(0, -1).every(crumb => validateLinkObject(crumb.link));
         },
       },
+      /**
+       * When set to 'true', a breadcrumb will be shown for each item in 'items' array.
+       * Otherwise, the first item will be omitted.
+       */
+      showAllCrumbs: {
+        type: Boolean,
+        default: false,
+      },
     },
 
     data: () => ({
@@ -135,6 +143,12 @@
         return Math.min(this.parentWidth - DROPDOWN_SIDE_PADDING, MAX_CRUMB_WIDTH);
       },
     },
+    watch: {
+      items(val) {
+        this.crumbs = Array.from(val);
+        this.attachSensors();
+      },
+    },
     created() {
       this.crumbs = Array.from(this.items);
     },
diff --git a/kolibri/plugins/management/assets/src/device_management/constants.js b/kolibri/plugins/management/assets/src/device_management/constants.js
index 233e1c51a6b..af4d205e1ea 100644
--- a/kolibri/plugins/management/assets/src/device_management/constants.js
+++ b/kolibri/plugins/management/assets/src/device_management/constants.js
@@ -5,12 +5,10 @@ export const PageNames = {
 };
 
 export const ContentWizardPages = {
-  CHOOSE_IMPORT_SOURCE: 'CHOOSE_IMPORT_SOURCE',
-  EXPORT: 'EXPORT',
-  IMPORT_LOCAL: 'IMPORT_LOCAL',
-  IMPORT_NETWORK: 'IMPORT_NETWORK',
-  LOCAL_IMPORT_PREVIEW: 'LOCAL_IMPORT_PREVIEW',
-  REMOTE_IMPORT_PREVIEW: 'REMOTE_IMPORT_PREVIEW',
+  AVAILABLE_CHANNELS: 'AVAILABLE_CHANNELS',
+  SELECT_CONTENT: 'SELECT_CONTENT',
+  SELECT_DRIVE: 'SELECT_DRIVE',
+  SELECT_IMPORT_SOURCE: 'SELECT_IMPORT_SOURCE',
 };
 
 export const TaskTypes = {
@@ -29,3 +27,9 @@ export const TaskStatuses = {
   QUEUED: 'QUEUED',
   SCHEDULED: 'SCHEDULED',
 };
+
+export const TransferTypes = {
+  LOCALIMPORT: 'localimport',
+  REMOTEIMPORT: 'remoteimport',
+  LOCALEXPORT: 'localexport',
+};
diff --git a/kolibri/plugins/management/assets/src/device_management/deviceApp.js b/kolibri/plugins/management/assets/src/device_management/deviceApp.js
index a1372d2f9b8..b3b48b138c4 100644
--- a/kolibri/plugins/management/assets/src/device_management/deviceApp.js
+++ b/kolibri/plugins/management/assets/src/device_management/deviceApp.js
@@ -1,4 +1,4 @@
-import KolibriApp from 'kolibri_app';
+import KolibriApp from 'kolibri_app'; // eslint-disable-line
 import RootVue from './views';
 import mutations from './state/mutations';
 import initialState from './state/initialState';
@@ -10,6 +10,14 @@ import {
 } from './state/actions/managePermissionsActions';
 import { showManageContentPage } from './state/actions/manageContentActions';
 import store from 'kolibri.coreVue.vuex.store';
+import { createTranslator } from 'kolibri.utils.i18n';
+import wizardTransitionRoutes from './wizardTransitionRoutes';
+
+const translator = createTranslator('deviceAppPageTitles', {
+  manageDeviceContent: 'Manage Device Content',
+  manageDevicePermissions: 'Manage Device Permissions',
+  manageUserPermissions: 'Manage User Permissions',
+});
 
 function hideLoadingScreen() {
   store.dispatch('CORE_SET_PAGE_LOADING', false);
@@ -33,7 +41,7 @@ const routes = [
     handler: ({ name }) => {
       preparePage(store.dispatch, {
         name,
-        title: 'Manage Device Content',
+        title: translator.$tr('manageDeviceContent'),
       });
       showManageContentPage(store).then(hideLoadingScreen);
     },
@@ -44,7 +52,7 @@ const routes = [
     handler: ({ name }) => {
       preparePage(store.dispatch, {
         name,
-        title: 'Manage Device Permissions',
+        title: translator.$tr('manageDevicePermissions'),
       });
       showManagePermissionsPage(store).then(hideLoadingScreen);
     },
@@ -55,11 +63,12 @@ const routes = [
     handler: ({ params, name }) => {
       preparePage(store.dispatch, {
         name,
-        title: 'Manage User Permissions',
+        title: translator.$tr('manageUserPermissions'),
       });
       showUserPermissionsPage(store, params.userid).then(hideLoadingScreen);
     },
   },
+  ...wizardTransitionRoutes,
 ];
 
 class DeviceManagementModule extends KolibriApp {
diff --git a/kolibri/plugins/management/assets/src/device_management/state/actions/availableChannelsActions.js b/kolibri/plugins/management/assets/src/device_management/state/actions/availableChannelsActions.js
new file mode 100644
index 00000000000..0cf34d06458
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/state/actions/availableChannelsActions.js
@@ -0,0 +1,50 @@
+import { RemoteChannelResource } from 'kolibri.resources';
+import { ContentWizardPages, TransferTypes } from '../../constants';
+import { driveChannelList, installedChannelList, wizardState } from '../getters';
+import router from 'kolibri.coreVue.router';
+
+/**
+ * Prepares the Available Channels Page for import/export flows
+ *
+ */
+export function showAvailableChannelsPage(store) {
+  router.push({
+    name: 'GOTO_AVAILABLE_CHANNELS_PAGE',
+  });
+  store.dispatch('SET_WIZARD_PAGENAME', ContentWizardPages.AVAILABLE_CHANNELS);
+  const { transferType, selectedDrive } = wizardState(store.state);
+  const setAvailableChannels = store.dispatch.bind(null, 'SET_AVAILABLE_CHANNELS');
+
+  // REMOTEIMPORT -> get Available Channels from RemoteChannel API
+  if (transferType === TransferTypes.REMOTEIMPORT) {
+    store.dispatch('SET_WIZARD_STATUS', 'LOADING_CHANNELS_FROM_KOLIBRI_STUDIO');
+    return RemoteChannelResource.getCollection()
+      .fetch()
+      .then(publicChannels => {
+        setAvailableChannels(publicChannels);
+        store.dispatch('SET_WIZARD_STATUS', '');
+      });
+  }
+
+  // LOCALIMPORT -> get Available Channels from selected drive's metadata
+  if (transferType === TransferTypes.LOCALIMPORT) {
+    setAvailableChannels(driveChannelList(store.state)(selectedDrive.id));
+  }
+
+  // LOCALEXPORT -> get Available Channels from store
+  if (transferType === TransferTypes.LOCALEXPORT) {
+    setAvailableChannels(installedChannelList(store.state));
+  }
+  return Promise.resolve();
+}
+
+/**
+ * Makes request to RemoteChannel API with a token. Does not actually interact
+ * with Vuex store.
+ *
+ * @param {string} token -
+ * @returns Promise
+ */
+export function getRemoteChannelByToken(token) {
+  return RemoteChannelResource.getModel(token).fetch()._promise;
+}
diff --git a/kolibri/plugins/management/assets/src/device_management/state/actions/contentTransferActions.js b/kolibri/plugins/management/assets/src/device_management/state/actions/contentTransferActions.js
new file mode 100644
index 00000000000..65ac088ad62
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/state/actions/contentTransferActions.js
@@ -0,0 +1,101 @@
+import { taskList, wizardState } from '../getters';
+import { ChannelResource, TaskResource } from 'kolibri.resources';
+import { TaskStatuses, TransferTypes } from '../../constants';
+
+export const ErrorTypes = {
+  CONTENT_DB_LOADING_ERROR: 'CONTENT_DB_LOADING_ERROR',
+  TREEVIEW_LOADING_ERROR: 'TREEVIEW_LOADING_ERROR',
+  CHANNEL_TASK_ERROR: 'CHANNEL_TASK_ERROR',
+};
+
+/**
+ * Starts Task that downloads a Channel Metadata database
+ *
+ */
+export function downloadChannelMetadata(store) {
+  const { transferType, transferredChannel, selectedDrive } = wizardState(store.state);
+  let promise;
+  if (transferType === TransferTypes.LOCALIMPORT) {
+    promise = TaskResource.startDiskChannelImport({
+      channel_id: transferredChannel.id,
+      drive_id: selectedDrive.id,
+    });
+  } else if (transferType === TransferTypes.REMOTEIMPORT) {
+    promise = TaskResource.startRemoteChannelImport({
+      channel_id: transferredChannel.id,
+    });
+  }
+  promise = promise.catch(() => Promise.reject({ errorType: ErrorTypes.CONTENT_DB_LOADING_ERROR }));
+
+  return promise
+    .then(task => {
+      return waitForTaskToComplete(store, task.entity.id);
+    })
+    .then(completedTask => {
+      const { taskId, cancelled } = completedTask;
+      if (taskId && !cancelled) {
+        return TaskResource.cancelTask(taskId).then(() => {
+          return ChannelResource.getModel(transferredChannel.id).fetch({ file_sizes: true })
+            ._promise;
+        });
+      }
+      return Promise.reject({ errorType: ErrorTypes.CHANNEL_TASK_ERROR });
+    });
+}
+
+const combinePks = nodes => nodes.map(({ pk }) => pk);
+
+/**
+ * Starts a Task that transfers Channel ContentNodes to/from a drive
+ *
+ */
+export function transferChannelContent(store) {
+  let promise;
+  const { transferType, transferredChannel, selectedDrive, nodesForTransfer } = wizardState(
+    store.state
+  );
+  const params = {
+    channel_id: transferredChannel.id,
+    node_ids: combinePks(nodesForTransfer.included),
+    exclude_node_ids: combinePks(nodesForTransfer.omitted),
+  };
+  switch (transferType) {
+    case TransferTypes.REMOTEIMPORT:
+      promise = TaskResource.startRemoteContentImport(params);
+      break;
+    case TransferTypes.LOCALIMPORT:
+      promise = TaskResource.startDiskContentImport({
+        ...params,
+        drive_id: selectedDrive.id,
+      });
+      break;
+    case TransferTypes.LOCALEXPORT:
+      promise = TaskResource.startDiskContentExport({
+        ...params,
+        drive_id: selectedDrive.id,
+      });
+  }
+  return promise;
+}
+
+/**
+ * Watches the pageState.taskList and resolves when the tracked Task is COMPLETED.
+ *
+ * @param {string} taskId
+ *
+ */
+export function waitForTaskToComplete(store, taskId) {
+  return new Promise((resolve, reject) => {
+    const stopWatching = store.watch(taskList, function checkTaskProgress(tasks) {
+      const match = tasks.find(task => task.id === taskId);
+      // Assume if no matching Task was found, it was cancelled.
+      if (!match || match.status === TaskStatuses.COMPLETED) {
+        stopWatching();
+        resolve({ taskId, cancelled: !match });
+      } else if (match.status === TaskStatuses.FAILED) {
+        stopWatching();
+        reject();
+      }
+    });
+  });
+}
diff --git a/kolibri/plugins/management/assets/src/device_management/state/actions/contentTreeViewerActions.js b/kolibri/plugins/management/assets/src/device_management/state/actions/contentTreeViewerActions.js
new file mode 100644
index 00000000000..33e3d04c936
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/state/actions/contentTreeViewerActions.js
@@ -0,0 +1,113 @@
+import sumBy from 'lodash/sumBy';
+import map from 'lodash/fp/map';
+import partition from 'lodash/partition';
+import find from 'lodash/find';
+import { selectedNodes } from '../getters';
+import { ContentNodeGranularResource } from 'kolibri.resources';
+
+const pluckPks = map('pk');
+
+function isDescendantOrSelf(testNode, selfNode) {
+  return testNode.pk === selfNode.pk || find(testNode.path, { pk: selfNode.pk });
+}
+
+/**
+ * Queries the server for a ContentNode's file sizes
+ *
+ * @param node {Node} - (sanitized) Node, which has resource, but not file sizes
+ * @returns {Promise<{total_file_size, on_device_file_size}>}
+ *
+ */
+export function getContentNodeFileSize(node) {
+  return ContentNodeGranularResource.getFileSizes(node.pk).then(({ entity }) => {
+    return entity;
+  });
+}
+
+/**
+ * Adds a new node to the transfer list.
+ *
+ * @param node {Node} - Node to be added
+ * @param node.path {Array<String>} - path (via ids) from channel root to the Node
+ *
+ */
+export function addNodeForTransfer(store, node) {
+  const { included, omitted } = selectedNodes(store.state);
+  // remove nodes in "omit" that are either descendants of new node or the node itself
+  const [notToOmit, toOmit] = partition(omitted, omitNode => isDescendantOrSelf(omitNode, node));
+  if (notToOmit.length > 0) {
+    store.dispatch('REPLACE_OMIT_LIST', toOmit);
+  }
+  // remove nodes in "include" that would be made redundant by the new one
+  const [notToIncluded, toInclude] = partition(included, includeNode =>
+    isDescendantOrSelf(includeNode, node)
+  );
+  if (notToIncluded.length > 0) {
+    store.dispatch('REPLACE_INCLUDE_LIST', toInclude);
+  }
+  return getContentNodeFileSize(node).then(fileSizes => {
+    store.dispatch('ADD_NODE_TO_INCLUDE_LIST', {
+      ...node,
+      ...fileSizes,
+    });
+  });
+}
+
+/**
+ * Removes node from transfer list
+ *
+ * @param node {Node} - node to be removed
+ *
+ */
+export function removeNodeForTransfer(store, node) {
+  let promise = Promise.resolve();
+  const { included, omitted } = selectedNodes(store.state);
+  // remove nodes in "include" that are either descendants of the removed node or the node itself
+  const [notToInclude, toInclude] = partition(included, includeNode =>
+    isDescendantOrSelf(includeNode, node)
+  );
+  if (notToInclude.length > 0) {
+    store.dispatch('REPLACE_INCLUDE_LIST', toInclude);
+  }
+  // if the removed node's has ancestors that are selected, the removed node gets placed in "omit"
+  const includedAncestors = included.filter(
+    includeNode => pluckPks(node.path).includes(includeNode.pk) && node.pk !== includeNode.pk
+  );
+  if (includedAncestors.length > 0) {
+    // remove redundant nodes in "omit" that either descendants of the new node or the node itself
+    const [notToOmit, toOmit] = partition(omitted, omitNode => isDescendantOrSelf(omitNode, node));
+    if (notToOmit.length > 0) {
+      store.dispatch('REPLACE_OMIT_LIST', toOmit);
+    }
+    promise = getContentNodeFileSize(node)
+      .then(fileSizes => {
+        store.dispatch('ADD_NODE_TO_OMIT_LIST', {
+          ...node,
+          ...fileSizes,
+        });
+      })
+      .then(() => {
+        // loop through the ancestor list and remove any that have been completely un-selected
+        includedAncestors.forEach(ancestor => {
+          const ancestorResources = ancestor.total_resources - ancestor.on_device_resources;
+          const toOmit = omitted.filter(n => pluckPks(n.path).includes(ancestor.pk));
+          // When total_resources === on_device_resources, then that node is not selectable.
+          // So we need to compare the difference (i.e  # of transferrable nodes) when
+          // deciding whether parent is fully omitted.
+          const omittedResources =
+            sumBy(toOmit, 'total_resources') - sumBy(omitted, 'on_device_resources');
+          if (ancestorResources === omittedResources) {
+            // remove the ancestor from "include"
+            store.dispatch('REPLACE_INCLUDE_LIST', included.filter(n => n.pk !== ancestor.pk));
+            // remove all desceandants from "omit"
+            store.dispatch(
+              'REPLACE_OMIT_LIST',
+              omitted.filter(n => !pluckPks(n.path).includes(ancestor.pk))
+            );
+          }
+        });
+      });
+  }
+
+  return promise;
+}
diff --git a/kolibri/plugins/management/assets/src/device_management/state/actions/contentWizardActions.js b/kolibri/plugins/management/assets/src/device_management/state/actions/contentWizardActions.js
index f331ef0b1fd..c93461c6dc3 100644
--- a/kolibri/plugins/management/assets/src/device_management/state/actions/contentWizardActions.js
+++ b/kolibri/plugins/management/assets/src/device_management/state/actions/contentWizardActions.js
@@ -1,135 +1,75 @@
-import { TaskResource } from 'kolibri.resources';
-import { ContentWizardPages } from '../../constants';
-import { handleApiError } from 'kolibri.coreVue.vuex.actions';
-import {
-  triggerLocalContentExportTask,
-  triggerLocalContentImportTask,
-  triggerRemoteContentImportTask,
-} from './taskActions';
-import find from 'lodash/find';
-
-export function updateWizardLocalDriveList(store) {
-  store.dispatch('SET_CONTENT_PAGE_WIZARD_BUSY', true);
-  TaskResource.localDrives()
-    .then(response => {
-      store.dispatch('SET_CONTENT_PAGE_WIZARD_BUSY', false);
-      store.dispatch('SET_CONTENT_PAGE_WIZARD_DRIVES', response.entity);
-    })
-    .catch(error => {
-      store.dispatch('SET_CONTENT_PAGE_WIZARD_BUSY', false);
-      handleApiError(store, error);
-    });
-}
-
-export function showWizardPage(store, pageName, meta = {}) {
-  store.dispatch('SET_CONTENT_PAGE_WIZARD_STATE', {
-    shown: Boolean(pageName),
-    page: pageName || null,
-    error: null,
-    busy: false,
-    drivesLoading: false,
-    driveList: null,
-    meta,
-  });
-}
-
-export function startImportWizard(store) {
-  showWizardPage(store, ContentWizardPages.CHOOSE_IMPORT_SOURCE);
-}
-
-export function startExportWizard(store) {
-  showWizardPage(store, ContentWizardPages.EXPORT);
-  updateWizardLocalDriveList(store);
-}
-
-export function closeImportExportWizard(store) {
-  showWizardPage(store, false);
-}
+import { ContentWizardPages as PageNames, TransferTypes } from '../../constants';
+import { showAvailableChannelsPage } from './availableChannelsActions';
+import { showSelectContentPage } from './selectContentActions';
 
 /**
  * State machine for the Import/Export wizards.
- * Only handles forward, back, and cancel transitions.
+ * Only handles forward and cancel transitions.
+ * Back transitions are handled by router.
  *
  * @param store - vuex store object
- * @param {string} transition - 'forward', 'backward', or 'cancel'
+ * @param {string} transition - 'forward' or 'cancel'
  * @param {Object} params - data needed to execute transition
- * @returns {undefined}
+ * @returns {Promise}
+ *
  */
 export function transitionWizardPage(store, transition, params) {
-  const wizardPage = store.state.pageState.wizardState.page;
-  const FORWARD = 'forward';
-  const BACKWARD = 'backward';
+  const wizardPage = store.state.pageState.wizardState.pageName;
   const CANCEL = 'cancel';
+  const LOCAL_DRIVE = 'local';
+  const KOLIBRI_STUDIO = 'network';
 
-  const showPage = showWizardPage.bind(null, store);
-
-  if (transition === CANCEL) {
-    return showPage(false);
+  function _updatePageName(pageName) {
+    store.dispatch('SET_WIZARD_PAGENAME', pageName);
   }
 
-  // At Choose Source Wizard
-  if (wizardPage === ContentWizardPages.CHOOSE_IMPORT_SOURCE) {
-    if (transition === FORWARD && params.source === 'local') {
-      return showPage(ContentWizardPages.IMPORT_LOCAL);
-    }
-    if (transition === FORWARD && params.source === 'network') {
-      return showPage(ContentWizardPages.IMPORT_NETWORK);
-    }
+  function _updateTransferType(transferType) {
+    store.dispatch('SET_TRANSFER_TYPE', transferType);
   }
 
-  // At Local Import Wizard
-  if (wizardPage === ContentWizardPages.IMPORT_LOCAL) {
-    if (transition === BACKWARD) {
-      return showPage(ContentWizardPages.CHOOSE_IMPORT_SOURCE);
-    }
-    if (transition === FORWARD) {
-      const driveInfo = find(store.state.pageState.wizardState.driveList, { id: params.driveId });
-      return showPage(ContentWizardPages.LOCAL_IMPORT_PREVIEW, {
-        driveId: params.driveId,
-        driveName: driveInfo.name,
-        channelList: driveInfo.metadata.channels,
-      });
-    }
+  if (transition === CANCEL) {
+    return _updatePageName('');
   }
 
-  // At Network Import Wizard
-  if (wizardPage === ContentWizardPages.IMPORT_NETWORK) {
-    if (transition === BACKWARD) {
-      return showPage(ContentWizardPages.CHOOSE_IMPORT_SOURCE);
-    }
-    if (transition === FORWARD) {
-      return showPage(ContentWizardPages.REMOTE_IMPORT_PREVIEW, {
-        channelId: params.channelId,
-      });
+  // AT LANDING PAGE
+  // Forward with params : { import : Boolean }
+  if (wizardPage === '') {
+    if (params.import) {
+      _updatePageName(PageNames.SELECT_IMPORT_SOURCE);
+    } else {
+      _updateTransferType(TransferTypes.LOCALEXPORT);
+      _updatePageName(PageNames.SELECT_DRIVE);
     }
   }
 
-  // At Export Wizard
-  if (wizardPage === ContentWizardPages.EXPORT) {
-    if (transition === FORWARD) {
-      return triggerLocalContentExportTask(store, params.driveId);
+  // At SELECT_IMPORT_SOURCE
+  // Forward with params : { source : 'local' | 'network' }
+  if (wizardPage === PageNames.SELECT_IMPORT_SOURCE) {
+    const { source } = params;
+    if (source === LOCAL_DRIVE) {
+      _updateTransferType(TransferTypes.LOCALIMPORT);
+      _updatePageName(PageNames.SELECT_DRIVE);
+      return Promise.resolve();
+    }
+    if (source === KOLIBRI_STUDIO) {
+      _updateTransferType(TransferTypes.REMOTEIMPORT);
+      return showAvailableChannelsPage(store);
     }
   }
 
-  // At Local Import Preview
-  if (wizardPage === ContentWizardPages.LOCAL_IMPORT_PREVIEW) {
-    if (transition === BACKWARD) {
-      return showPage(ContentWizardPages.IMPORT_LOCAL);
-    }
-    if (transition === FORWARD) {
-      return triggerLocalContentImportTask(store, params.sourceId);
-    }
+  // At SELECT_DRIVE
+  // Forward with params : { driveId }
+  if (wizardPage === PageNames.SELECT_DRIVE) {
+    store.dispatch('SET_SELECTED_DRIVE', params.driveId);
+    return showAvailableChannelsPage(store);
   }
 
-  // At Network Import Preview
-  if (wizardPage === ContentWizardPages.REMOTE_IMPORT_PREVIEW) {
-    if (transition === BACKWARD) {
-      return showPage(ContentWizardPages.IMPORT_NETWORK);
-    }
-    if (transition === FORWARD) {
-      return triggerRemoteContentImportTask(store, params.sourceId);
-    }
+  // At AVAILABLE_CHANNELS
+  // Forward with params: { channel }
+  if (wizardPage === PageNames.AVAILABLE_CHANNELS) {
+    store.dispatch('SET_TRANSFER_CHANNEL', params.channel);
+    return showSelectContentPage(store);
   }
 
-  return undefined;
+  return Promise.resolve();
 }
diff --git a/kolibri/plugins/management/assets/src/device_management/state/actions/manageContentActions.js b/kolibri/plugins/management/assets/src/device_management/state/actions/manageContentActions.js
index 1862b491c3c..743bf6343f2 100644
--- a/kolibri/plugins/management/assets/src/device_management/state/actions/manageContentActions.js
+++ b/kolibri/plugins/management/assets/src/device_management/state/actions/manageContentActions.js
@@ -1,11 +1,5 @@
 import { ChannelResource } from 'kolibri.resources';
 import { canManageContent } from 'kolibri.coreVue.vuex.getters';
-import {
-  handleApiError,
-  setChannelInfo,
-  samePageCheckGenerator,
-} from 'kolibri.coreVue.vuex.actions';
-import { fetchCurrentTasks } from './taskActions';
 
 /**
  * Force-refresh the ChannelResource Collection
@@ -15,30 +9,14 @@ export function refreshChannelList(store) {
   return ChannelResource.getCollection()
     .fetch({ file_sizes: true }, true)
     .then(channels => {
-      store.dispatch('SET_CONTENT_PAGE_CHANNELS', channels);
+      store.dispatch('SET_CHANNEL_LIST', channels);
     });
 }
 
 export function showManageContentPage(store) {
   if (canManageContent(store.state)) {
-    store.dispatch('SET_CONTENT_PAGE_STATE', {
-      taskList: [],
-      channelList: [],
-      wizardState: {
-        shown: false,
-      },
-    });
-
-    setChannelInfo(store);
-
-    return fetchCurrentTasks(store)
-      .only(samePageCheckGenerator(store))
-      ._promise.then(function onSuccess(taskList) {
-        store.dispatch('SET_CONTENT_PAGE_TASKS', taskList);
-      })
-      .catch(function onFailure(error) {
-        handleApiError(store, error);
-      });
+    store.dispatch('RESET_MANAGE_CONTENT_PAGESTATE');
+    return refreshChannelList(store);
   }
   return Promise.resolve();
 }
diff --git a/kolibri/plugins/management/assets/src/device_management/state/actions/selectContentActions.js b/kolibri/plugins/management/assets/src/device_management/state/actions/selectContentActions.js
new file mode 100644
index 00000000000..f9e8b4d5749
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/state/actions/selectContentActions.js
@@ -0,0 +1,97 @@
+import client from 'kolibri.client';
+import urls from 'kolibri.urls';
+import { ContentNodeGranularResource } from 'kolibri.resources';
+import { ContentWizardPages, TransferTypes } from '../../constants';
+import { channelIsInstalled, wizardState } from '../getters';
+import { downloadChannelMetadata } from './contentTransferActions';
+import { navigateToTopicUrl } from '../../wizardTransitionRoutes';
+
+/**
+ * Transitions the import/export wizard to the 'select-content-page'
+ *
+ */
+export function showSelectContentPage(store) {
+  let dbPromise;
+  const { transferredChannel } = wizardState(store.state);
+  const channelOnDevice = channelIsInstalled(store.state)(transferredChannel.id);
+  store.dispatch('SET_WIZARD_PAGENAME', ContentWizardPages.SELECT_CONTENT);
+
+  // Downloading the Content Metadata DB
+  if (channelOnDevice) {
+    // If already on device, then skip the DB download, and use on-device
+    // Channel metadata, since it has root id.
+    dbPromise = Promise.resolve(channelOnDevice);
+  } else {
+    dbPromise = downloadChannelMetadata(store);
+  }
+
+  // Hydrating the store with the Channel Metadata
+  return dbPromise
+    .then(channel => {
+      // The channel objects are not consistent if they come from different workflows.
+      // Replacing them here with canonical type from ChannelResource.
+      store.dispatch('SET_TRANSFERRED_CHANNEL', channel);
+      navigateToTopicUrl({ title: channel.name, pk: channel.root });
+    })
+    .catch(({ errorType }) => {
+      store.dispatch('SET_WIZARD_STATUS', errorType);
+    });
+}
+
+/**
+ * Updates wizardState.treeView when a new topic is clicked.
+ *
+ * @param {Object} topic - { pk, title, path }
+ *
+ */
+export function updateTreeViewTopic(store, topic) {
+  const { transferType, selectedDrive } = wizardState(store.state);
+  const fetchArgs = {};
+  if (transferType === TransferTypes.LOCALIMPORT) {
+    fetchArgs.importing_from_drive_id = selectedDrive.id;
+  }
+  return (
+    ContentNodeGranularResource.getModel(topic.pk)
+      // Need to force fetch, since cached values are used even with different
+      // query params
+      .fetch(fetchArgs, true)
+      .then(contents => {
+        store.dispatch('SET_CURRENT_TOPIC_NODE', contents);
+        store.dispatch('UPDATE_PATH_BREADCRUMBS', topic);
+      })
+      .catch(() => {
+        store.dispatch('SET_WIZARD_STATUS', 'TREEVIEW_LOADING_ERROR');
+      })
+  );
+}
+
+/**
+ * Makes a call to freespace API and places result in the store.
+ * If transfer type is LOCALEXPORT, it gets the selected drive's freespace.
+ *
+ * @param {string} path - Path to the Kolibri data folder. If empty, defaults to server's KOLIBRI_HOME.
+ * @returns {Promise}
+ *
+ */
+export function getAvailableSpaceOnDrive(store, path = '') {
+  const { transferType, selectedDrive } = wizardState(store.state);
+  let promise;
+
+  if (transferType === TransferTypes.LOCALEXPORT) {
+    promise = Promise.resolve(selectedDrive.freespace);
+  } else {
+    const params = path ? { path } : {};
+    promise = client({
+      path: `${urls['freespace']()}`,
+      params,
+    }).then(({ entity }) => entity.freespace);
+  }
+  return promise
+    .then(freespace => {
+      return store.dispatch('SET_AVAILABLE_SPACE', freespace);
+    })
+    .catch(() => {
+      // UI will handle this gracefully with something instead of throwing an error
+      return store.dispatch('SET_AVAILABLE_SPACE', -1);
+    });
+}
diff --git a/kolibri/plugins/management/assets/src/device_management/state/actions/taskActions.js b/kolibri/plugins/management/assets/src/device_management/state/actions/taskActions.js
index 83d54f0c331..94dcf73d8a8 100644
--- a/kolibri/plugins/management/assets/src/device_management/state/actions/taskActions.js
+++ b/kolibri/plugins/management/assets/src/device_management/state/actions/taskActions.js
@@ -1,27 +1,7 @@
 /* eslint-env node */
 import { TaskResource } from 'kolibri.resources';
-import { samePageCheckGenerator } from 'kolibri.coreVue.vuex.actions';
-import logger from 'kolibri.lib.logging';
-import { closeImportExportWizard } from './contentWizardActions';
-
-const logging = logger.getLogger(__filename);
-
-function transformTasks(tasks) {
-  return tasks.map(task => ({
-    id: task.id,
-    type: task.type,
-    status: task.status,
-    metadata: task.metadata,
-    percentage: task.percentage,
-    cancellable: task.cancellable,
-  }));
-}
-
-export function fetchCurrentTasks() {
-  return TaskResource.getCollection()
-    .fetch()
-    .then(transformTasks);
-}
+import isEqual from 'lodash/isEqual';
+import pick from 'lodash/fp/pick';
 
 export function cancelTask(store, taskId) {
   return TaskResource.cancelTask(taskId).then(function onSuccess() {
@@ -30,15 +10,13 @@ export function cancelTask(store, taskId) {
 }
 
 function updateTasks(store, tasks) {
-  store.dispatch('SET_CONTENT_PAGE_TASKS', transformTasks(tasks));
+  store.dispatch('SET_CONTENT_PAGE_TASKS', tasks);
 }
 
 function triggerTask(store, taskPromise) {
-  store.dispatch('SET_CONTENT_PAGE_WIZARD_BUSY', true);
   return taskPromise
     .then(function onSuccess(task) {
       updateTasks(store, [task.entity]);
-      closeImportExportWizard(store);
     })
     .catch(function onFailure(error) {
       let errorText;
@@ -48,41 +26,39 @@ function triggerTask(store, taskPromise) {
         errorText = error.status.text;
       }
       store.dispatch('SET_CONTENT_PAGE_WIZARD_ERROR', errorText);
-      store.dispatch('SET_CONTENT_PAGE_WIZARD_BUSY', false);
     });
 }
 
-export function triggerLocalContentImportTask(store, driveId) {
-  return triggerTask(store, TaskResource.localImportContent(driveId));
+export function triggerChannelDeleteTask(store, channelId) {
+  return triggerTask(store, TaskResource.deleteChannel(channelId));
 }
 
-export function triggerLocalContentExportTask(store, driveId) {
-  return triggerTask(store, TaskResource.localExportContent(driveId));
-}
+const simplifyTask = pick(['id', 'status', 'percentage']);
 
-export function triggerRemoteContentImportTask(store, channelId) {
-  return triggerTask(store, TaskResource.remoteImportContent(channelId));
+function _taskListShouldUpdate(state, newTasks) {
+  const oldTasks = state.pageState.taskList;
+  return !isEqual(oldTasks.map(simplifyTask), newTasks.map(simplifyTask));
 }
 
-export function triggerChannelDeleteTask(store, channelId) {
-  return triggerTask(store, TaskResource.deleteChannel(channelId));
+/**
+ * Updates pageState.taskList, but only if there is a change.
+ */
+export function refreshTaskList(store) {
+  // This uses TaskResource.getTasks instead of .getCollection because
+  // .getCollection mutates values in store.state such that _taskListShouldUpdate doesn't work
+  return TaskResource.getTasks().then(({ entity: newTasks }) => {
+    if (_taskListShouldUpdate(store.state, newTasks)) {
+      updateTasks(store, newTasks);
+    }
+  });
 }
 
-export function pollTasks(store) {
-  const samePageCheck = samePageCheckGenerator(store);
-  TaskResource.getCollection()
-    .fetch({}, true)
-    .only(
-      // don't handle response if we've switched pages or if we're in the middle of another operation
-      () => samePageCheck() && !store.state.pageState.wizardState.busy,
-      taskList => {
-        updateTasks(store, taskList);
-        if (taskList.length && store.state.pageState.wizardState.shown) {
-          closeImportExportWizard(store);
-        }
-      },
-      error => {
-        logging.error(`poll error: ${error}`);
-      }
-    );
+/**
+ * Updates pageState.wizardState.driveList
+ *
+ */
+export function refreshDriveList(store) {
+  return TaskResource.localDrives().then(({ entity }) => {
+    store.dispatch('SET_DRIVE_LIST', entity);
+  });
 }
diff --git a/kolibri/plugins/management/assets/src/device_management/state/getters.js b/kolibri/plugins/management/assets/src/device_management/state/getters.js
new file mode 100644
index 00000000000..fe546868542
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/state/getters.js
@@ -0,0 +1,60 @@
+import find from 'lodash/find';
+import sumBy from 'lodash/sumBy';
+
+export function wizardState(state) {
+  return state.pageState.wizardState;
+}
+
+export function selectedNodes(state) {
+  return wizardState(state).nodesForTransfer;
+}
+
+export function nodesForTransfer(state) {
+  return wizardState(state).nodesForTransfer;
+}
+
+export function availableChannels(state) {
+  return wizardState(state).availableChannels;
+}
+
+export function driveChannelList(state) {
+  return function getListByDriveId(driveId) {
+    const match = find(wizardState(state).driveList, { id: driveId });
+    return match ? match.metadata.channels : [];
+  };
+}
+
+export function installedChannelList(state) {
+  return state.pageState.channelList;
+}
+
+export function channelIsInstalled(state) {
+  return function findChannel(channelId) {
+    return find(installedChannelList(state), { id: channelId });
+  };
+}
+
+export function taskList(state) {
+  return state.pageState.taskList;
+}
+
+export function cachedTopicPath(state) {
+  return function getPath(pk) {
+    return state.pageState.wizardState.pathCache[pk];
+  };
+}
+
+export function getDriveById(state) {
+  return function getDrive(driveId) {
+    return find(state.pageState.wizardState.driveList, { id: driveId });
+  };
+}
+
+export function nodeTransferCounts(state) {
+  const { included, omitted } = selectedNodes(state);
+  const getDifference = key => (sumBy(included, key) || 0) - (sumBy(omitted, key) || 0);
+  return {
+    resources: getDifference('total_resources'),
+    fileSize: getDifference('total_file_size'),
+  };
+}
diff --git a/kolibri/plugins/management/assets/src/device_management/state/initialState.js b/kolibri/plugins/management/assets/src/device_management/state/initialState.js
index eee228b5e31..efe821ac216 100644
--- a/kolibri/plugins/management/assets/src/device_management/state/initialState.js
+++ b/kolibri/plugins/management/assets/src/device_management/state/initialState.js
@@ -1,5 +1,9 @@
+import { manageContentPageState } from './wizardState';
+
 export default {
   pageName: '',
-  pageState: {},
+  pageState: {
+    ...manageContentPageState(),
+  },
   welcomeModalVisible: false,
 };
diff --git a/kolibri/plugins/management/assets/src/device_management/state/mutations/contentTransferMutations.js b/kolibri/plugins/management/assets/src/device_management/state/mutations/contentTransferMutations.js
new file mode 100644
index 00000000000..2eced200a53
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/state/mutations/contentTransferMutations.js
@@ -0,0 +1,67 @@
+import omit from 'lodash/fp/omit';
+import { cachedTopicPath, nodesForTransfer } from '../getters';
+
+export function ADD_NODE_TO_INCLUDE_LIST(state, node) {
+  nodesForTransfer(state).included.push(node);
+}
+
+export function REMOVE_NODE_FROM_INCLUDE_LIST(state, node) {
+  const newList = nodesForTransfer(state).included.filter(n => n.pk !== node.pk);
+  nodesForTransfer(state).included = newList;
+}
+
+export function REPLACE_INCLUDE_LIST(state, newList) {
+  nodesForTransfer(state).included = newList;
+}
+
+export function ADD_NODE_TO_OMIT_LIST(state, node) {
+  nodesForTransfer(state).omitted.push(node);
+}
+
+export function REMOVE_NODE_FROM_OMIT_LIST(state, node) {
+  const newList = nodesForTransfer(state).omitted.filter(n => n.pk !== node.pk);
+  nodesForTransfer(state).omitted = newList;
+}
+
+export function REPLACE_OMIT_LIST(state, newList) {
+  nodesForTransfer(state).omitted = newList;
+}
+
+export function SET_TREEVIEW_CURRENTNODE(state, payload) {
+  state.pageState.wizardState.treeView.currentNode = payload;
+}
+
+export function SET_CURRENT_TOPIC_NODE(state, currentTopicNode) {
+  state.pageState.wizardState.currentTopicNode = currentTopicNode;
+}
+
+export function ADD_PATH_TO_CACHE(state, { node, path }) {
+  state.pageState.wizardState.pathCache[node.pk] = path;
+}
+
+export function UPDATE_PATH_BREADCRUMBS(state, topic) {
+  const omitPath = omit('path');
+  const cached = cachedTopicPath(state)(topic.pk);
+  if (cached) {
+    state.pageState.wizardState.path = cached;
+  } else {
+    let newCachedPath;
+    // This only happens in showSelectChannel page when hydrating with channel node
+    if (!topic.path) {
+      newCachedPath = [omitPath(topic)];
+    } else {
+      // Every time else, path should be annotated by UI
+      newCachedPath = topic.path.map(omitPath);
+    }
+    ADD_PATH_TO_CACHE(state, { node: topic, path: newCachedPath });
+    UPDATE_PATH_BREADCRUMBS(state, topic);
+  }
+}
+
+export function SET_AVAILABLE_SPACE(state, space) {
+  state.pageState.wizardState.availableSpace = space;
+}
+
+export function SET_TRANSFERRED_CHANNEL(state, channel) {
+  state.pageState.wizardState.transferredChannel = channel;
+}
diff --git a/kolibri/plugins/management/assets/src/device_management/state/mutations/contentWizardMutations.js b/kolibri/plugins/management/assets/src/device_management/state/mutations/contentWizardMutations.js
index b00fa2189bd..c8996a83c86 100644
--- a/kolibri/plugins/management/assets/src/device_management/state/mutations/contentWizardMutations.js
+++ b/kolibri/plugins/management/assets/src/device_management/state/mutations/contentWizardMutations.js
@@ -1,15 +1,34 @@
-export function SET_CONTENT_PAGE_WIZARD_STATE(state, wizardState) {
-  state.pageState.wizardState = wizardState;
+import set from 'lodash/set';
+import { getDriveById } from '../getters';
+
+function setWizardState(state, path, value) {
+  set(state.pageState.wizardState, path, value);
+}
+
+export function SET_WIZARD_PAGENAME(state, pageName) {
+  setWizardState(state, 'pageName', pageName);
+}
+
+export function SET_DRIVE_LIST(state, driveList) {
+  setWizardState(state, 'driveList', driveList);
+}
+
+export function SET_AVAILABLE_CHANNELS(state, availableChannels) {
+  setWizardState(state, 'availableChannels', availableChannels);
+}
+
+export function SET_SELECTED_DRIVE(state, driveId) {
+  setWizardState(state, 'selectedDrive', getDriveById(state)(driveId));
 }
 
-export function SET_CONTENT_PAGE_WIZARD_DRIVES(state, driveList) {
-  state.pageState.wizardState.driveList = driveList;
+export function SET_TRANSFER_CHANNEL(state, transferredChannel) {
+  setWizardState(state, 'transferredChannel', transferredChannel);
 }
 
-export function SET_CONTENT_PAGE_WIZARD_ERROR(state, error) {
-  state.pageState.wizardState.error = error;
+export function SET_TRANSFER_TYPE(state, transferType) {
+  setWizardState(state, 'transferType', transferType);
 }
 
-export function SET_CONTENT_PAGE_WIZARD_BUSY(state, isBusy) {
-  state.pageState.wizardState.busy = isBusy;
+export function SET_WIZARD_STATUS(state, status) {
+  setWizardState(state, 'status', status);
 }
diff --git a/kolibri/plugins/management/assets/src/device_management/state/mutations/index.js b/kolibri/plugins/management/assets/src/device_management/state/mutations/index.js
index d814b3fbabf..a816ef17f93 100644
--- a/kolibri/plugins/management/assets/src/device_management/state/mutations/index.js
+++ b/kolibri/plugins/management/assets/src/device_management/state/mutations/index.js
@@ -1,6 +1,7 @@
 import * as manageContentMutations from './manageContentMutations';
 import * as contentWizardMutations from './contentWizardMutations';
 import * as managePermissionsMutations from './managePermissionsMutations';
+import * as contentTransferMutations from './contentTransferMutations';
 
 const mutations = {
   SET_PAGE_NAME(state, name) {
@@ -14,10 +15,10 @@ const mutations = {
   },
 };
 
-export default Object.assign(
-  {},
-  mutations,
-  manageContentMutations,
-  contentWizardMutations,
-  managePermissionsMutations
-);
+export default {
+  ...mutations,
+  ...manageContentMutations,
+  ...contentWizardMutations,
+  ...managePermissionsMutations,
+  ...contentTransferMutations,
+};
diff --git a/kolibri/plugins/management/assets/src/device_management/state/mutations/manageContentMutations.js b/kolibri/plugins/management/assets/src/device_management/state/mutations/manageContentMutations.js
index 790b092d078..3f2a16242f0 100644
--- a/kolibri/plugins/management/assets/src/device_management/state/mutations/manageContentMutations.js
+++ b/kolibri/plugins/management/assets/src/device_management/state/mutations/manageContentMutations.js
@@ -1,3 +1,9 @@
+import { manageContentPageState } from '../wizardState';
+
+export function RESET_MANAGE_CONTENT_PAGESTATE(state) {
+  state.pageState = manageContentPageState();
+}
+
 export function SET_CONTENT_PAGE_STATE(state, newPageState) {
   state.pageState = newPageState;
 }
@@ -6,6 +12,6 @@ export function SET_CONTENT_PAGE_TASKS(state, taskList) {
   state.pageState.taskList = taskList;
 }
 
-export function SET_CONTENT_PAGE_CHANNELS(state, channelList) {
+export function SET_CHANNEL_LIST(state, channelList) {
   state.pageState.channelList = channelList;
 }
diff --git a/kolibri/plugins/management/assets/src/device_management/state/wizardState.js b/kolibri/plugins/management/assets/src/device_management/state/wizardState.js
new file mode 100644
index 00000000000..7971621ddca
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/state/wizardState.js
@@ -0,0 +1,35 @@
+// Minimal state needed to render the manage content page
+export function manageContentPageState() {
+  return {
+    channelList: [],
+    taskList: [],
+    wizardState: importExportWizardState(),
+  };
+}
+
+// Monolithic object that stores state needed for all import/export flows
+export function importExportWizardState() {
+  return {
+    // 0. can be set at any time
+    status: '',
+    // 1. set after clicking "import" or "export", and changes throughout flow
+    pageName: '',
+    // 2. set after choosing REMOTEEXPORT or LOCALIMPORT
+    driveList: [],
+    // 3. set after choosing a USB drive or Kolibri Central Server
+    transferType: '',
+    availableChannels: [],
+    selectedDrive: {},
+    availableSpace: -1,
+    // 4. set after choosing channel
+    transferredChannel: {},
+    currentTopicNode: {},
+    path: [],
+    pathCache: {},
+    nodesForTransfer: {
+      included: [],
+      omitted: [],
+      // totalFileSize and totalResources are defined as getters
+    },
+  };
+}
diff --git a/kolibri/plugins/management/assets/src/device_management/test/actions/contentTransferActions.spec.js b/kolibri/plugins/management/assets/src/device_management/test/actions/contentTransferActions.spec.js
new file mode 100644
index 00000000000..fe9be09c498
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/actions/contentTransferActions.spec.js
@@ -0,0 +1,13 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import assert from 'assert';
+
+describe('downloadChannelMetadata action', () => {});
+
+describe('transferChannelContent action', () => {
+  it('during LOCALIMPORT, makes correct request to startdiskcontentimport', () => {});
+
+  it('during LOCALEXPORT, makes correct request to startdiskexport', () => {});
+
+  it('during REMOTEIMPORT, makes correct request to startremotecontentimport', () => {});
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/actions/contentTreeViewerActions.spec.js b/kolibri/plugins/management/assets/src/device_management/test/actions/contentTreeViewerActions.spec.js
new file mode 100644
index 00000000000..76740254391
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/actions/contentTreeViewerActions.spec.js
@@ -0,0 +1,354 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import Vuex from 'vuex';
+import assert from 'assert';
+import sinon from 'sinon';
+import omit from 'lodash/fp/omit';
+import { mockResource } from 'testUtils'; // eslint-disable-line
+import mutations from '../../state/mutations';
+import { ChannelResource, ContentNodeGranularResource, TaskResource } from 'kolibri.resources';
+import {
+  addNodeForTransfer,
+  removeNodeForTransfer,
+} from '../../state/actions/contentTreeViewerActions';
+import { makeNode, contentNodeGranularPayload } from '../utils/data';
+import { nodesForTransfer, wizardState, nodeTransferCounts } from '../../state/getters';
+import { updateTreeViewTopic } from '../../state/actions/selectContentActions';
+import { importExportWizardState } from '../../state/wizardState';
+
+const simplePath = (...pks) => pks.map(pk => ({ pk, title: `node_${pk}` }));
+
+mockResource(ChannelResource);
+mockResource(ContentNodeGranularResource);
+mockResource(TaskResource);
+
+function makeStore() {
+  return new Vuex.Store({
+    state: {
+      pageState: {
+        taskList: [],
+        channelList: [],
+        wizardState: importExportWizardState(),
+      },
+    },
+    mutations,
+  });
+}
+
+describe('contentTreeViewer actions', () => {
+  let store;
+
+  function assertIncludeEquals(expected) {
+    // HACK add the hard-coded file sizes to the expected array
+    assert.deepEqual(nodesForTransfer(store.state).included, expected.map(addFileSizes));
+  }
+
+  function assertOmitEquals(expected) {
+    assert.deepEqual(nodesForTransfer(store.state).omitted, expected.map(addFileSizes));
+  }
+
+  function assertFilesResourcesEqual(expectedFiles, expectedResources) {
+    // Maybe rename these so they don't clash with API.
+    const { fileSize, resources } = nodeTransferCounts(store.state);
+    assert.equal(fileSize, expectedFiles);
+    assert.equal(resources, expectedResources);
+  }
+
+  function setIncludedNodes(nodes) {
+    nodesForTransfer(store.state).included = nodes.map(addFileSizes);
+  }
+
+  function setOmittedNodes(nodes) {
+    nodesForTransfer(store.state).omitted = nodes.map(addFileSizes);
+  }
+
+  before(() => {
+    ContentNodeGranularResource.getFileSizes = sinon.stub();
+  });
+
+  beforeEach(() => {
+    store = makeStore();
+    // For now, just keep it simple and make the file size result 0/1
+    // TODO extend this mock to return arbitrary file sizes
+    ContentNodeGranularResource.getFileSizes.returns(
+      Promise.resolve({
+        entity: {
+          total_file_size: 1,
+          on_device_file_size: 0,
+        },
+      })
+    );
+  });
+
+  afterEach(() => {
+    ContentNodeGranularResource.getFileSizes.reset();
+  });
+
+  function addFileSizes(node) {
+    return {
+      ...node,
+      total_file_size: 1,
+      on_device_file_size: 0,
+    };
+  }
+
+  /**
+   * Notes:
+   * `makeNode` gives each Node a resource and file count of 1 by default,
+   * with 0 file/resources on the device
+   *
+   * assertFilesResourcesEqual counts items to be imported or exported, so it is not the totals
+   * of the Nodes, but rather the totals of what's actually on the devices
+   */
+  describe('addNodeForTransfer action', () => {
+    it('adding a single Node to empty list', () => {
+      // ...straightforwardly adds it to `include`
+      const node_1 = makeNode('1_1_1', { path: simplePath('1', '1_1') });
+      return addNodeForTransfer(store, node_1).then(() => {
+        assertIncludeEquals([node_1]);
+        assertOmitEquals([]);
+        assertFilesResourcesEqual(1, 1);
+      });
+    });
+
+    it('adding Nodes that are not parent/child to each other', () => {
+      // ...straightforwardly adds both to `include`
+      const node_1 = makeNode('1_1_1', { path: simplePath('1', '1_1') });
+      const node_2 = makeNode('2_2_1', { path: simplePath('2', '2_2') });
+      return addNodeForTransfer(store, node_1)
+        .then(() => {
+          return addNodeForTransfer(store, node_2);
+        })
+        .then(() => {
+          assertIncludeEquals([node_1, node_2]);
+          assertOmitEquals([]);
+          assertFilesResourcesEqual(2, 2);
+        });
+      // console.log(store.state.pageState.wizardState.nodesForTransfer.included);
+    });
+
+    it('when a Node with descendants in `include` is added', () => {
+      // ...the descendants are removed from `include`, because they are made redundant by the Node
+      const ancestorNode = makeNode('1_1', {
+        path: simplePath('1'),
+        on_device_resources: 3,
+        total_resources: 10,
+      });
+      const descendantNode_1 = makeNode('1_1_1', { path: simplePath('1', '1_1') });
+      const descendantNode_2 = makeNode('1_1_1_1', { path: simplePath('1', '1_1', '1_1_1') });
+      return addNodeForTransfer(store, descendantNode_1)
+        .then(() => addNodeForTransfer(store, descendantNode_2))
+        .then(() => addNodeForTransfer(store, ancestorNode))
+        .then(() => {
+          assertIncludeEquals([ancestorNode]);
+          assertOmitEquals([]);
+          // files/resources are not double counted
+          assertFilesResourcesEqual(1, 10);
+        });
+    });
+
+    it('when a Node in `omit` is re-added', () => {
+      // ...it and all its descendants are removed from "omit"
+      const node = makeNode('1', { path: simplePath() });
+      const childNode = makeNode('1_1', { path: simplePath('1') });
+      const siblingNode = makeNode('1_2', { path: simplePath('1') });
+      setIncludedNodes([]);
+      setOmittedNodes([node, childNode, siblingNode]);
+      return addNodeForTransfer(store, node).then(() => {
+        assertIncludeEquals([node]);
+        assertOmitEquals([]);
+        assertFilesResourcesEqual(1, 1);
+      });
+    });
+
+    // The case where all descendants of a node are selected is handled at select-content-page,
+    // since the store does not have enough information to detect when this happens.
+    // When this happens, the descendants are replaced with the ancestor node.
+  });
+
+  describe('removeNodeForTransfer action', () => {
+    it('removing a single Node that was originally in `include`', () => {
+      // ...straightforwardly removes it from `include`
+      const node_1 = makeNode('1_1_1', { path: simplePath('1', '1_1') });
+      return addNodeForTransfer(store, node_1)
+        .then(() => {
+          assertIncludeEquals([node_1]);
+          assertOmitEquals([]);
+          return removeNodeForTransfer(store, node_1);
+        })
+        .then(() => {
+          assertIncludeEquals([]);
+          assertOmitEquals([]);
+          assertFilesResourcesEqual(0, 0);
+        });
+    });
+
+    it('removing a descendant of an included Node', () => {
+      // ...adds the descendant to `omit`, but does not remove Node from `include`
+      const parentNode = makeNode('1_1', {
+        path: simplePath('1'),
+        total_resources: 50,
+        on_device_resources: 20,
+      });
+      const childNode = makeNode('1_1_1', {
+        path: simplePath('1', '1_1'),
+        total_resources: 20,
+        on_device_resources: 10,
+      });
+      return addNodeForTransfer(store, parentNode)
+        .then(() => {
+          return removeNodeForTransfer(store, childNode);
+        })
+        .then(() => {
+          assertIncludeEquals([parentNode]);
+          assertOmitEquals([childNode]);
+          assertFilesResourcesEqual(0, 30);
+        });
+    });
+
+    it('removing a sibling is same as removing single Node', () => {
+      const node_1 = makeNode('1_1', { path: simplePath('1') });
+      const node_2 = makeNode('1_2', { path: simplePath('1') });
+      return addNodeForTransfer(store, node_1)
+        .then(() => {
+          return addNodeForTransfer(store, node_2);
+        })
+        .then(() => {
+          removeNodeForTransfer(store, node_2);
+        })
+        .then(() => {
+          assertIncludeEquals([node_1]);
+          assertOmitEquals([]);
+          assertFilesResourcesEqual(1, 1);
+        });
+    });
+
+    it('removing a Node removes it and all descendants from `include`', () => {
+      const node = makeNode('1', {
+        path: simplePath(),
+        total_resources: 15,
+        on_device_resources: 10,
+      });
+      const childNode = makeNode('1_1', {
+        path: simplePath('1'),
+        total_resources: 10,
+        on_device_resources: 5,
+      });
+      const grandchildNode = makeNode('1_1_1', {
+        path: simplePath('1', '1_1'),
+        total_resources: 5,
+        on_device_resources: 2,
+      });
+      // Not sure how this state can happen in practice.
+      // May need to remove or rewrite this test.
+      setIncludedNodes([node, childNode, grandchildNode]);
+      setOmittedNodes([]);
+      return removeNodeForTransfer(store, node).then(() => {
+        assertIncludeEquals([]);
+        assertOmitEquals([]);
+        assertFilesResourcesEqual(0, 0);
+      });
+    });
+
+    it('removing a Node removes its descendants from `omit`', () => {
+      // ...since they are redundant
+      const topNode = makeNode('1', {
+        path: simplePath(),
+        on_device_resources: 8,
+        total_resources: 15,
+      });
+      const childNode = makeNode('1_1', {
+        path: simplePath('1'),
+        on_device_resources: 2,
+        total_resources: 10,
+      });
+      const grandchildNode = makeNode('1_1_1', {
+        path: simplePath('1', '1_1'),
+        on_device_resources: 0,
+        total_resources: 5,
+      });
+      setIncludedNodes([topNode]);
+      setOmittedNodes([grandchildNode]);
+      // Not sure this is possible in practice. On UI, childNode will
+      // be indeterminate, so user will need to click it once, making it selected
+      // which will then remove grandchildNode. After then, they can de-select it.
+      return removeNodeForTransfer(store, childNode).then(() => {
+        assertIncludeEquals([topNode]);
+        assertOmitEquals([childNode]);
+        assertFilesResourcesEqual(0, 5);
+      });
+    });
+
+    it('when removing a Node leads to an included parent Node being un-selected', () => {
+      // i.e. all of the parent's resources are omitted.
+      // Then that parent node will be removed from `include`.
+      // Then all of the parent node's descendants will be removed from `omit`.
+      // This keeps the store clean of unnecessary Nodes.
+      const topNode = makeNode('1', {
+        path: simplePath(),
+        total_resources: 25, // 25-10 = 15 transferrable resources
+        on_device_resources: 10,
+      });
+      const childNode = makeNode('1_1', {
+        path: simplePath('1'),
+        total_resources: 15, // 10 transferrable
+        on_device_resources: 5,
+      });
+      const siblingNode = makeNode('1_2', {
+        path: simplePath('1'),
+        total_resources: 10, // 5 transferrable
+        on_device_resources: 5,
+      });
+      setIncludedNodes([topNode]);
+      setOmittedNodes([childNode]);
+      return removeNodeForTransfer(store, siblingNode).then(() => {
+        assertIncludeEquals([]);
+        assertOmitEquals([]);
+        assertFilesResourcesEqual(0, 0);
+      });
+    });
+  });
+});
+
+describe('updateTreeViewTopic action', () => {
+  // There are integration tests in showSelectContentPage spec covers that CNG.getModel
+  // is correctly called
+  let store;
+  const cngPayload = contentNodeGranularPayload();
+  const topic_1 = { pk: 'topic_1', title: 'Topic One' };
+  const topic_2 = { pk: 'topic_2', title: 'Topic Two' };
+  const topic_3 = { pk: 'topic_3', title: 'Topic Three' };
+  const topic_4 = { pk: 'topic_4', title: 'Topic Four' };
+
+  topic_1.path = []; // like a channel
+  topic_2.path = [topic_1];
+  topic_3.path = [...topic_2.path, topic_2];
+  topic_4.path = [...topic_3.path, topic_3];
+
+  beforeEach(() => {
+    store = makeStore();
+    ContentNodeGranularResource.__getModelFetchReturns(cngPayload);
+  });
+
+  function assertPathEquals(expected) {
+    assert.deepEqual(wizardState(store.state).path, expected.map(omit('path')));
+  }
+
+  it('moving forward by one topic', () => {
+    return updateTreeViewTopic(store, topic_1).then(() => assertPathEquals([]));
+  });
+
+  it('moving forward by more than one topic', () => {
+    // i.e. going from a/b/c/d -> a -> a/b/c/d (by clicking back)
+    return updateTreeViewTopic(store, topic_4)
+      .then(() => updateTreeViewTopic(store, topic_1))
+      .then(() => updateTreeViewTopic(store, topic_4))
+      .then(() => assertPathEquals(topic_4.path));
+  });
+
+  it('moving backwards by more than one topic', () => {
+    return updateTreeViewTopic(store, topic_4)
+      .then(() => updateTreeViewTopic(store, topic_2))
+      .then(() => assertPathEquals(topic_2.path));
+  });
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/actions/contentWizardActions.spec.js b/kolibri/plugins/management/assets/src/device_management/test/actions/contentWizardActions.spec.js
new file mode 100644
index 00000000000..70a6e60c213
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/actions/contentWizardActions.spec.js
@@ -0,0 +1,182 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import Vuex from 'vuex';
+import assert from 'assert';
+import sinon from 'sinon';
+import { transitionWizardPage } from '../../state/actions/contentWizardActions';
+import { availableChannels, wizardState } from '../../state/getters';
+import mutations from '../../state/mutations';
+import * as selectContentActions from '../../state/actions/selectContentActions';
+import { TaskResource, RemoteChannelResource } from 'kolibri.resources';
+import { mockResource } from 'testUtils'; // eslint-disable-line
+import { importExportWizardState } from '../../state/wizardState';
+
+mockResource(RemoteChannelResource);
+
+const installedChannels = [
+  { id: 'installed_channel_1', name: 'Installed Channel One' },
+  { id: 'installed_channel_2', name: 'Installed Channel Two' },
+];
+
+const driveList = [
+  {
+    id: 'drive_1',
+    name: 'Drive Nummer Eins',
+    metadata: {
+      channels: [
+        { id: 'drive_1_channel_1', name: 'Drive 1 Channel One' },
+        { id: 'drive_1_channel_2', name: 'Drive 1 Channel Two' },
+      ],
+    },
+  },
+  {
+    id: 'drive_2',
+    name: 'Drive Nummer Zwei',
+    metadata: {
+      channels: [
+        { id: 'drive_2_channel_1', name: 'Drive 2 Channel One' },
+        { id: 'drive_2_channel_2', name: 'Drive 2 Channel Two' },
+      ],
+    },
+  },
+];
+
+function makeStore() {
+  return new Vuex.Store({
+    state: {
+      pageState: {
+        channelList: [...installedChannels],
+        wizardState: {
+          ...importExportWizardState(),
+          driveList: [...driveList],
+        },
+      },
+    },
+    mutations,
+  });
+}
+
+describe('transitionWizardPage action', () => {
+  // Tests import/export workflow from ManageContentPage to the SelectContentPage
+  // Covers integrations with showAvailableChannelsPage and showSelectContentPage
+  let store;
+  let showSelectContentPageStub;
+
+  const pageName = () => wizardState(store.state).pageName;
+  const transferType = () => wizardState(store.state).transferType;
+  const selectedDrive = () => wizardState(store.state).selectedDrive;
+
+  beforeEach(() => {
+    store = makeStore();
+
+    showSelectContentPageStub = sinon
+      .stub(selectContentActions, 'showSelectContentPage')
+      .returns(Promise.resolve());
+  });
+
+  afterEach(() => {
+    showSelectContentPageStub.restore();
+  });
+
+  it('REMOTEIMPORT flow correctly updates wizardState', () => {
+    const publicChannels = [
+      { id: 'public_channel_1', name: 'Public Channel One' },
+      { id: 'public_channel_2', name: 'Public Channel Two' },
+    ];
+    // makes call to RemoteChannel API
+    const fetchSpy = RemoteChannelResource.__getCollectionFetchReturns(publicChannels).fetch;
+
+    // STEP 1 - click "import" -> SELECT_IMPORT_SOURCE
+    transitionWizardPage(store, 'forward', { import: true });
+    assert.equal(pageName(), 'SELECT_IMPORT_SOURCE');
+
+    // STEP 2 - choose "internet" from options -> AVAILABLE_CHANNELS
+    return transitionWizardPage(store, 'forward', { source: 'network' })
+      .then(() => {
+        assert.equal(pageName(), 'AVAILABLE_CHANNELS');
+        assert.equal(transferType(), 'remoteimport');
+
+        // Calls from inside showAvailableChannelsPage
+        sinon.assert.calledOnce(RemoteChannelResource.getCollection);
+        sinon.assert.calledOnce(fetchSpy);
+        assert.equal(availableChannels(store.state), publicChannels);
+
+        // STEP 3 - pick first channel -> SELECT_CONTENT
+        return transitionWizardPage(store, 'forward', {
+          channel: {
+            id: 'public_channel_1',
+          },
+        });
+      })
+      .then(() => {
+        sinon.assert.calledOnce(showSelectContentPageStub);
+        RemoteChannelResource.__resetMocks();
+      });
+  });
+
+  it('LOCALIMPORT flow correctly updates wizardState', () => {
+    const localDrivesStub = sinon.stub(TaskResource, 'localDrives').returns(
+      Promise.resolve({
+        entity: [],
+      })
+    );
+    const selectedUsbDrive = driveList[1];
+    const channel = {
+      ...selectedUsbDrive.metadata.channels[0],
+    };
+
+    // STEP 1 - click "import" -> SELECT_IMPORT_SOURCE
+    transitionWizardPage(store, 'forward', { import: true });
+    assert.equal(pageName(), 'SELECT_IMPORT_SOURCE');
+
+    // STEP 2 - choose "usb drive" from options -> SELECT_DRIVE
+    transitionWizardPage(store, 'forward', { source: 'local' });
+    assert.equal(pageName(), 'SELECT_DRIVE');
+    assert.equal(transferType(), 'localimport');
+
+    // STEP 3 - choose "drive_2" -> AVAILABLE_CHANNELS
+    return transitionWizardPage(store, 'forward', { driveId: 'drive_2' })
+      .then(() => {
+        assert.equal(pageName(), 'AVAILABLE_CHANNELS');
+        assert.deepEqual(selectedDrive(), selectedUsbDrive);
+        assert.deepEqual(availableChannels(store.state), selectedUsbDrive.metadata.channels);
+
+        // STEP 4 - pick the first channel -> go to "select content" page
+        return transitionWizardPage(store, 'forward', { channel });
+      })
+      .then(() => {
+        sinon.assert.calledOnce(showSelectContentPageStub);
+        localDrivesStub.restore();
+      });
+  });
+
+  it('LOCALEXPORT flow correctly updates wizardState', () => {
+    const localDrivesStub = sinon.stub(TaskResource, 'localDrives').returns(
+      Promise.resolve({
+        entity: [],
+      })
+    );
+    const channel = {
+      ...installedChannels[0],
+    };
+
+    // STEP 1 - click "export" -> SELECT_DRIVE
+    transitionWizardPage(store, 'forward', { import: false });
+    assert.equal(pageName(), 'SELECT_DRIVE');
+    assert.equal(transferType(), 'localexport');
+
+    // STEP 2 - choose "drive_1" -> AVAILABLE_CHANNELS
+    return transitionWizardPage(store, 'forward', { driveId: 'drive_1' })
+      .then(() => {
+        assert.equal(pageName(), 'AVAILABLE_CHANNELS');
+        assert.deepEqual(availableChannels(store.state), installedChannels);
+
+        // STEP 3 - pick a channel -> SELECT_CONTENT
+        return transitionWizardPage(store, 'forward', { channel });
+      })
+      .then(() => {
+        sinon.assert.calledOnce(showSelectContentPageStub);
+        localDrivesStub.restore();
+      });
+  });
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/actions/showSelectContentPage.spec.js b/kolibri/plugins/management/assets/src/device_management/test/actions/showSelectContentPage.spec.js
new file mode 100644
index 00000000000..6b2ec085184
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/actions/showSelectContentPage.spec.js
@@ -0,0 +1,216 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import Vuex from 'vuex';
+import assert from 'assert';
+import sinon from 'sinon';
+import router from 'kolibri.coreVue.router';
+import { showSelectContentPage } from '../../state/actions/selectContentActions';
+import mutations from '../../state/mutations';
+import { wizardState } from '../../state/getters';
+import { ChannelResource, ContentNodeGranularResource, TaskResource } from 'kolibri.resources';
+import { mockResource } from 'testUtils'; // eslint-disable-line
+import { importExportWizardState } from '../../state/wizardState';
+import { defaultChannel } from '../utils/data';
+
+mockResource(ChannelResource);
+mockResource(ContentNodeGranularResource);
+mockResource(TaskResource);
+
+function makeStore() {
+  return new Vuex.Store({
+    state: {
+      pageState: {
+        taskList: [],
+        channelList: [{ id: 'channel_1', name: 'Installed Channel', root: 'channel_1_root' }],
+        wizardState: {
+          ...importExportWizardState(),
+          pageName: 'SELECT_CONTENT',
+          transferredChannel: { ...defaultChannel },
+        },
+      },
+    },
+    mutations: {
+      ...mutations,
+      addTask(state, task) {
+        state.pageState.taskList.push(task);
+      },
+    },
+  });
+}
+
+// Have store suddenly add a Task to the store so the task waiting step
+// resolves successfully
+function hackStoreWatcher(store) {
+  setTimeout(() => {
+    store.dispatch('addTask', { id: 'task_1', status: 'COMPLETED' });
+  }, 1);
+}
+
+describe('showSelectContentPage action', () => {
+  let store;
+
+  before(() => {
+    // Add mock methods not in generic mock Resource
+    TaskResource.startRemoteChannelImport = sinon.stub();
+    TaskResource.startDiskChannelImport = sinon.stub();
+  });
+
+  beforeEach(() => {
+    store = makeStore();
+    hackStoreWatcher(store);
+    const taskEntity = { entity: { id: 'task_1' } };
+    TaskResource.cancelTask = sinon.stub().returns(Promise.resolve());
+    TaskResource.startDiskChannelImport.returns(Promise.resolve(taskEntity));
+    TaskResource.startRemoteChannelImport.returns(Promise.resolve(taskEntity));
+    ChannelResource.getModel.returns({
+      fetch: () => ({
+        _promise: Promise.resolve({
+          name: 'Channel One',
+          root: 'channel_1_root',
+        }),
+      }),
+    });
+  });
+
+  afterEach(() => {
+    ChannelResource.__resetMocks();
+    ContentNodeGranularResource.__resetMocks();
+    TaskResource.__resetMocks();
+    TaskResource.startRemoteChannelImport.reset();
+    TaskResource.startDiskChannelImport.reset();
+    TaskResource.cancelTask.reset();
+  });
+
+  function setUpStateForTransferType(transferType) {
+    store.state.pageState.wizardState.transferType = transferType;
+    store.state.pageState.wizardState.selectedDrive = {
+      id: `${transferType}_specs_drive`,
+    };
+    store.state.pageState.wizardState.transferredChannel = {
+      id: `${transferType}_brand_new_channel`,
+    };
+  }
+
+  function useInstalledChannel() {
+    store.state.pageState.wizardState.transferredChannel = { id: 'channel_1' };
+  }
+
+  // Tests for common behavior
+  function testNoChannelsAreImported(store, options) {
+    return showSelectContentPage(store, options).then(() => {
+      sinon.assert.notCalled(TaskResource.startDiskChannelImport);
+      sinon.assert.notCalled(TaskResource.startRemoteChannelImport);
+    });
+  }
+
+  let pushStub;
+
+  before(() => {
+    pushStub = sinon.stub(router, 'push');
+  });
+
+  function testUpdateTopicUrlIsCorrect(store, { pk, title }) {
+    // To test the end of this action, we spy router.push. Production code for
+    // router-based tree view updater relies on the kolibri.store singleton, while these tests
+    // stub store with fresh Vuex.Store instance.
+    pushStub.restore();
+    return showSelectContentPage(store).then(() => {
+      sinon.assert.calledWithMatch(pushStub, {
+        name: 'GOTO_TOPIC_TREEVIEW',
+        params: { node: { pk, title } },
+        query: { pk },
+      });
+    });
+  }
+
+  describe('during LOCALIMPORT only', () => {
+    beforeEach(() => {
+      setUpStateForTransferType('localimport');
+    });
+
+    it('if channel already installed, "startdiskchannelimport" is not called', () => {
+      useInstalledChannel();
+      return testNoChannelsAreImported(store);
+    });
+
+    it('after metadata is downloaded, user is redirected to correct wizard URL', () => {
+      return testUpdateTopicUrlIsCorrect(store, {
+        pk: 'channel_1_root',
+        title: 'Installed Channel',
+      });
+    });
+
+    it('if channel is *not* on device, then "startdiskchannelimport" is called', () => {
+      return showSelectContentPage(store).then(() => {
+        sinon.assert.calledWith(TaskResource.startDiskChannelImport, {
+          channel_id: 'localimport_brand_new_channel',
+          drive_id: 'localimport_specs_drive',
+        });
+        sinon.assert.notCalled(TaskResource.startRemoteChannelImport);
+      });
+    });
+
+    it('errors from startDiskChannelImport are handled', () => {
+      TaskResource.startDiskChannelImport.returns(Promise.reject());
+      return showSelectContentPage(store).then(() => {
+        assert.equal(wizardState(store.state).status, 'CONTENT_DB_LOADING_ERROR');
+      });
+    });
+  });
+
+  describe('during REMOTEIMPORT only', () => {
+    beforeEach(() => {
+      setUpStateForTransferType('remoteimport');
+    });
+
+    it('if channel is already installed, then "startremotechannelimport" is *not* called', () => {
+      useInstalledChannel();
+      return testNoChannelsAreImported(store);
+    });
+
+    it('after metadata is downloaded, user is redirected to correct wizard URL', () => {
+      return testUpdateTopicUrlIsCorrect(store, {
+        pk: 'channel_1_root',
+        title: 'Installed Channel',
+      });
+    });
+
+    it('if channel is *not* on device, then "startremotechannelimport" is called', () => {
+      return showSelectContentPage(store).then(() => {
+        sinon.assert.calledWith(TaskResource.startRemoteChannelImport, {
+          channel_id: 'remoteimport_brand_new_channel',
+        });
+        sinon.assert.notCalled(TaskResource.startDiskChannelImport);
+      });
+    });
+
+    it('errors from startRemoteChannelImport are handled', () => {
+      TaskResource.startRemoteChannelImport.returns(Promise.reject());
+      return showSelectContentPage(store).then(() => {
+        assert.equal(wizardState(store.state).status, 'CONTENT_DB_LOADING_ERROR');
+      });
+    });
+  });
+
+  describe('during LOCALEXPORT only', () => {
+    beforeEach(() => {
+      setUpStateForTransferType('localexport');
+      // In principle, only channels already on the device can be exported
+      useInstalledChannel();
+    });
+
+    it('"startdiskchannelimport" and "startremotechannelimport" are not called', () => {
+      return testNoChannelsAreImported(store);
+    });
+
+    it('after metadata is downloaded, user is redirected to correct wizard URL', () => {
+      return testUpdateTopicUrlIsCorrect(store, {
+        pk: 'channel_1_root',
+        title: 'Installed Channel',
+      });
+    });
+  });
+
+  // Not tested:
+  // * When channel import Tasks fail
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/treeViewUtils.spec.js b/kolibri/plugins/management/assets/src/device_management/test/treeViewUtils.spec.js
new file mode 100644
index 00000000000..ca9cdb41b92
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/treeViewUtils.spec.js
@@ -0,0 +1,250 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import assert from 'assert';
+import { annotateNode } from '../views/select-content-page/treeViewUtils';
+import { makeNode } from './utils/data';
+import pick from 'lodash/pick';
+
+function simplePath(pks) {
+  return pks.map(makeNode);
+}
+
+function assertAnnotationsEqual(annotated, expected) {
+  assert.deepEqual(pick(annotated, ['message', 'disabled', 'checkboxType']), expected);
+}
+
+function makeNodeWithResources(id, total = 1, onDevice = 0) {
+  return makeNode(id, { total_resources: total, on_device_resources: onDevice });
+}
+
+function makeNodesForTransfer(included, omitted) {
+  return { included, omitted };
+}
+
+describe('annotateNode utility correctly annotates', () => {
+  // Simplest cases
+  it('nodes that are in the "include" list (100% selected)', () => {
+    const node_1 = makeNodeWithResources('1', 100, 0);
+    const selected = makeNodesForTransfer([node_1], []);
+    const annotated = annotateNode(node_1, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '100 resources selected',
+      disabled: false,
+      checkboxType: 'checked',
+    });
+  });
+
+  it('nodes that are neither selected nor omitted', () => {
+    const node_1 = makeNodeWithResources('1', 100, 0);
+    const selected = makeNodesForTransfer([], []);
+    const annotated = annotateNode(node_1, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '',
+      disabled: false,
+      checkboxType: 'unchecked',
+    });
+  });
+
+  it('nodes that are in the "omit list"', () => {
+    const node_1 = makeNodeWithResources('1', 100, 0);
+    const selected = makeNodesForTransfer([], [node_1]);
+    const annotated = annotateNode(node_1, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '',
+      disabled: false,
+      checkboxType: 'unchecked',
+    });
+  });
+
+  // Nodes with resources on the device
+  it('nodes that have all resources on the device', () => {
+    const node_1 = makeNodeWithResources('1', 100, 100);
+    const selected = makeNodesForTransfer([], []);
+    const annotated = annotateNode(node_1, selected);
+    assertAnnotationsEqual(annotated, {
+      message: 'Already on your device',
+      disabled: true,
+      checkboxType: 'checked',
+    });
+  });
+
+  it('nodes that are not selected, but have some resources on the device', () => {
+    const node_1 = makeNodeWithResources('1', 2000, 10);
+    const selected = makeNodesForTransfer([], []);
+    const annotated = annotateNode(node_1, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '10 of 2,000 resources on your device',
+      disabled: false,
+      checkboxType: 'unchecked',
+    });
+  });
+
+  it('nodes that are in "omit" list, but have some resources on the device', () => {
+    const node_1 = makeNodeWithResources('1', 2000, 10);
+    const selected = makeNodesForTransfer([], [node_1]);
+    const annotated = annotateNode(node_1, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '10 of 2,000 resources on your device',
+      disabled: false,
+      checkboxType: 'unchecked',
+    });
+  });
+
+  it('nodes that are in "include" and have some resources on the device', () => {
+    // ...are annotated as if included as normal (no special message about resources on device)
+    const node_1 = makeNodeWithResources('1', 100, 10);
+    const selected = makeNodesForTransfer([node_1], []);
+    const annotated = annotateNode(node_1, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '100 resources selected',
+      disabled: false,
+      checkboxType: 'checked',
+    });
+  });
+
+  it('nodes that are proxy-included by ancestor, but have all resources on the device', () => {
+    // ...are disabled
+    const includedAncestor = makeNodeWithResources('1');
+    const onDeviceDescendant = {
+      ...makeNodeWithResources('1_1', 1, 1),
+      path: simplePath(['1']),
+    };
+    const selected = makeNodesForTransfer([includedAncestor], []);
+    const annotated = annotateNode(onDeviceDescendant, selected);
+    assertAnnotationsEqual(annotated, {
+      message: 'Already on your device',
+      disabled: true,
+      checkboxType: 'checked',
+    });
+  });
+
+  // Funky cases
+  it('nodes that are not in "include" list, but have ancestors that are', () => {
+    // ...are annotated as if they were selected
+    const includedAncestor = makeNode('1', { path: simplePath(['1']) });
+    const notIncludedDescendant = makeNode('1_1_1_1', {
+      path: simplePath(['1', '1_1', '1_1_1']),
+      total_resources: 10,
+    });
+    const selected = makeNodesForTransfer([includedAncestor], []);
+    const annotated = annotateNode(notIncludedDescendant, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '10 resources selected',
+      disabled: false,
+      checkboxType: 'checked',
+    });
+  });
+
+  it('nodes with an ancestor in "include", but have descendants in "omit"', () => {
+    // ...are annotated as if they were partially selected
+    // All descendants except the omitted one will be imported
+    const includedAncestor = makeNode('1', { path: simplePath(['1']) });
+    const omittedDescendant = {
+      ...makeNodeWithResources('1_1_1_1', 10, 2),
+      path: simplePath(['1', '1_1', '1_1_1']),
+    };
+    const partiallySelected = {
+      ...makeNodeWithResources('1_1_1', 20, 3),
+      path: simplePath(['1', '1_1']),
+    };
+    const selected = makeNodesForTransfer([includedAncestor], [omittedDescendant]);
+    const annotated = annotateNode(partiallySelected, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '10 of 20 resources selected',
+      disabled: false,
+      checkboxType: 'indeterminate',
+    });
+  });
+
+  it('nodes that are in "include" but have some descendants in "omit"', () => {
+    // ...are annotated as if they are partially selected
+    // Here, 20 - 8 = 12 resoures will be staged for import
+    const includedNode = makeNodeWithResources('1', 20, 5);
+    const omittedNode_1 = {
+      ...makeNodeWithResources('1_2_1_1', 5, 1),
+      path: simplePath(['1', '1_2', '1_2_1']),
+    };
+    const omittedNode_2 = {
+      ...makeNodeWithResources('1_3', 3, 1),
+      path: simplePath(['1']),
+    };
+    const selected = makeNodesForTransfer([includedNode], [omittedNode_1, omittedNode_2]);
+    const annotated = annotateNode(includedNode, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '12 of 20 resources selected',
+      disabled: false,
+      checkboxType: 'indeterminate',
+    });
+  });
+
+  it('nodes that are not in "include" but have some descendants in "include"', () => {
+    // ...are annotated as if they are partially selected
+    const parentNode = makeNodeWithResources('1', 10, 0);
+    const childNode_1 = {
+      ...makeNodeWithResources('1_1', 3, 0),
+      path: simplePath(['1']),
+    };
+    const childNode_2 = {
+      ...makeNodeWithResources('1_2', 3, 0),
+      path: simplePath(['1']),
+    };
+    const selected = makeNodesForTransfer([childNode_1, childNode_2], []);
+    const annotated = annotateNode(parentNode, selected);
+    // Here, assumption is all descendants of included nodes will be imported
+    assertAnnotationsEqual(annotated, {
+      message: '6 of 10 resources selected',
+      disabled: false,
+      checkboxType: 'indeterminate',
+    });
+  });
+
+  it('nodes that are not in "include" but have all descendants in "include"', () => {
+    // ...are annotated as if they are completely selected
+    const parentNode = makeNodeWithResources('1', 10, 3);
+    const childNode_1 = {
+      ...makeNodeWithResources('1_1', 3, 1),
+      path: simplePath(['1']),
+    };
+    const childNode_2 = {
+      ...makeNodeWithResources('1_2', 3, 1),
+      path: simplePath(['1']),
+    };
+    const childNode_3 = {
+      ...makeNodeWithResources('1_3', 4, 1),
+      path: simplePath(['1']),
+    };
+    const selected = makeNodesForTransfer([childNode_1, childNode_2, childNode_3], []);
+    const annotated = annotateNode(parentNode, selected);
+    // Technically not correct, but implication is that they are completing the parentNode.
+    // Will really only be transfering 7 resources.
+    assertAnnotationsEqual(annotated, {
+      message: '10 resources selected',
+      disabled: false,
+      checkboxType: 'checked',
+    });
+  });
+
+  it('nodes that are in "include" but have all descendants in "omit"', () => {
+    // ...are annotated as if they were completely un-selected
+    const parentNode = makeNodeWithResources('1', 10, 3);
+    const childNode_1 = {
+      ...makeNodeWithResources('1_1', 3, 1),
+      path: simplePath(['1']),
+    };
+    const childNode_2 = {
+      ...makeNodeWithResources('1_2', 3, 1),
+      path: simplePath(['1']),
+    };
+    const childNode_3 = {
+      ...makeNodeWithResources('1_3', 4, 1),
+      path: simplePath(['1']),
+    };
+    const selected = makeNodesForTransfer([parentNode], [childNode_1, childNode_2, childNode_3]);
+    const annotated = annotateNode(parentNode, selected);
+    assertAnnotationsEqual(annotated, {
+      message: '',
+      disabled: false,
+      checkboxType: 'unchecked',
+    });
+  });
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/utils/data.js b/kolibri/plugins/management/assets/src/device_management/test/utils/data.js
new file mode 100644
index 00000000000..ab4e1ec29a3
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/utils/data.js
@@ -0,0 +1,68 @@
+const TOTAL_RESOURCES = 'total_resources';
+const ON_DEVICE_RESOURCES = 'on_device_resources';
+const TOTAL_FILE_SIZE = 'total_file_size';
+const ON_DEVICE_FILE_SIZE = 'on_device_file_size';
+
+export const defaultChannel = {
+  description: 'An awesome channel',
+  id: 'awesome_channel',
+  language: 'English',
+  language_code: 'en',
+  name: 'Channel Title',
+  [ON_DEVICE_FILE_SIZE]: 95189556,
+  [ON_DEVICE_RESOURCES]: 52,
+  thumbnail: '',
+  [TOTAL_FILE_SIZE]: 5000000000,
+  [TOTAL_RESOURCES]: 5000,
+  version: 20,
+};
+
+const defaultNode = {
+  kind: 'topic',
+  // [ON_DEVICE_FILE_SIZE]: 1,
+  [ON_DEVICE_RESOURCES]: 1,
+  path: [],
+  // [TOTAL_FILE_SIZE]: 1,
+  [TOTAL_RESOURCES]: 1,
+};
+
+export function makeNode(pk, attrs = {}) {
+  return {
+    ...defaultNode,
+    pk,
+    title: `node_${pk}`,
+    ...attrs,
+  };
+}
+
+export function contentNodeGranularPayload() {
+  return {
+    pk: 'topic_1',
+    title: 'Addition and subtraction intro',
+    available: false,
+    importable: true,
+    kind: 'topic',
+    total_resources: 2,
+    [ON_DEVICE_RESOURCES]: 0,
+    children: [
+      {
+        pk: 'ee73cfd40eec4260a1f302157dda69d4',
+        title: 'Put together, take apart',
+        available: false,
+        importable: true,
+        kind: 'topic',
+        total_resources: 1,
+        [ON_DEVICE_RESOURCES]: 0,
+      },
+      {
+        pk: 'f3cb61172a114c21a32982d1316ec786',
+        title: 'Addition and subtraction word problems',
+        available: false,
+        kind: 'video',
+        total_resources: 1,
+        [ON_DEVICE_RESOURCES]: 0,
+        importable: false,
+      },
+    ],
+  };
+}
diff --git a/kolibri/plugins/management/assets/src/device_management/test/views/available-channels-page.spec.js b/kolibri/plugins/management/assets/src/device_management/test/views/available-channels-page.spec.js
new file mode 100644
index 00000000000..0a0b5852c34
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/views/available-channels-page.spec.js
@@ -0,0 +1,295 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import assert from 'assert';
+import sinon from 'sinon';
+import { mount } from 'avoriaz';
+import AvailableChannelsPage from '../../views/available-channels-page';
+import ChannelListItem from '../../views/manage-content-page/channel-list-item.vue';
+import UiSelect from 'keen-ui/src/UiSelect';
+import kFilterTextbox from 'kolibri.coreVue.components.kFilterTextbox';
+import ImmersiveFullScreen from 'kolibri.coreVue.components.immersiveFullScreen';
+import ChannelTokenModal from '../../views/available-channels-page/channel-token-modal';
+import { importExportWizardState } from '../../state/wizardState';
+import cloneDeep from 'lodash/cloneDeep';
+
+const router = new VueRouter({
+  routes: [{ path: '', name: 'wizardtransition' }],
+});
+
+const availableChannels = [
+  {
+    name: 'Awesome Channel',
+    id: 'awesome_channel',
+    language_code: 'en',
+    language: 'English',
+    total_resources: 100,
+  },
+  {
+    name: 'Bird Channel',
+    id: 'bird_channel',
+    total_resources: 100,
+  },
+  {
+    name: 'Hunden Channel',
+    id: 'hunden_channel',
+    language_code: 'de',
+    language: 'German',
+    total_resources: 100,
+  },
+  {
+    name: 'Kaetze Channel',
+    id: 'kaetze_channel',
+    language_code: 'de',
+    language: 'German',
+    total_resources: 100,
+  },
+];
+
+const channelsOnDevice = cloneDeep(availableChannels);
+
+// Pretending that metadata has been downloaded previously for Bird & Hunden channel,
+// but no resources. Awesome & Kaetze channel have some resources.
+channelsOnDevice[0].on_device_resources = 90;
+channelsOnDevice[1].on_device_resources = 0;
+channelsOnDevice[2].on_device_resources = 0;
+channelsOnDevice[3].on_device_resources = 90;
+
+function makeStore() {
+  return new Vuex.Store({
+    state: {
+      pageState: {
+        channelList: channelsOnDevice,
+        wizardState: {
+          ...importExportWizardState(),
+          availableChannels,
+          transferType: 'localimport',
+          status: '',
+        },
+      },
+    },
+  });
+}
+
+function makeWrapper(options = {}) {
+  const { store, props = {} } = options;
+  const defaultProps = {};
+  return mount(AvailableChannelsPage, {
+    propsData: { ...defaultProps, ...props },
+    store: store || makeStore(),
+    router,
+  });
+}
+
+// prettier-ignore
+function getElements(wrapper) {
+  return {
+    noChannels: () => wrapper.find('.no-channels'),
+    channelsList: () => wrapper.find('.channels-list'),
+    channelsAvailableText: () => wrapper.first('.channels p').text().trim(),
+    channelListItems: () => wrapper.find(ChannelListItem),
+    channelTokenModal: () => wrapper.first(ChannelTokenModal),
+    filters: () => wrapper.find('.filters'),
+    languageFilter: () => wrapper.first(UiSelect),
+    titleText: () => wrapper.first('.channels h1').text().trim(),
+    titleFilter: () => wrapper.first(kFilterTextbox),
+    unlistedChannelsSection: () => wrapper.find('section.unlisted-channels'),
+    wholePageBackLink: () => wrapper.first(ImmersiveFullScreen).getProp('backPageLink'),
+    wholePageBackText: () => wrapper.first(ImmersiveFullScreen).getProp('backPageText'),
+  }
+}
+
+function testChannelVisibility(wrapper, visibilities) {
+  const channels = getElements(wrapper).channelListItems();
+  visibilities.forEach((v, i) => {
+    assert.equal(!channels[i].hasStyle('display', 'none'), v);
+  });
+}
+
+describe('availableChannelsPage', () => {
+  let store;
+
+  beforeEach(() => {
+    store = makeStore();
+  });
+
+  function setTransferType(transferType) {
+    store.state.pageState.wizardState.transferType = transferType;
+  }
+
+  it('back button link is correct', () => {
+    const wrapper = makeWrapper();
+    const { wholePageBackLink } = getElements(wrapper);
+    const backLink = wholePageBackLink();
+    assert.deepEqual(backLink, {
+      name: 'wizardtransition',
+      path: '',
+      params: {
+        transition: 'cancel',
+      },
+    });
+  });
+
+  it('in REMOTEIMPORT mode, the unlisted channel button is available', () => {
+    // ...and clicking it opens the channel token modal
+    setTransferType('remoteimport');
+    const wrapper = makeWrapper({ store });
+    const { unlistedChannelsSection, channelTokenModal } = getElements(wrapper);
+    const button = unlistedChannelsSection()[0].first('button');
+    button.trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      assert(channelTokenModal().isVueComponent);
+    });
+  });
+
+  it('in LOCALIMPORT and LOCALEXPORT mode, the unlisted channel button is not available', () => {
+    setTransferType('localexport');
+    const wrapper = makeWrapper({ store });
+    const { unlistedChannelsSection } = getElements(wrapper);
+    assert.deepEqual(unlistedChannelsSection(), []);
+  });
+
+  it('in LOCALEXPORT mode, the back link text and title are correct', () => {
+    setTransferType('localexport');
+    store.state.pageState.wizardState.selectedDrive = {
+      id: 'f9e29616935fbff37913ed46bf20e2c0',
+      name: 'SANDISK (F:)',
+    };
+    const wrapper = makeWrapper({ store });
+    const { wholePageBackText, titleText } = getElements(wrapper);
+    assert.equal(wholePageBackText(), 'Export to SANDISK (F:)');
+    assert.equal(titleText(), 'Your channels');
+  });
+
+  it('in LOCALIMPORT mode, the back link text and title are correct', () => {
+    setTransferType('localimport');
+    store.state.pageState.wizardState.selectedDrive = {
+      id: 'f9e29616935fbff37913ed46bf20e2c0',
+      name: 'SANDISK (G:)',
+    };
+    const wrapper = makeWrapper({ store });
+    const { wholePageBackText, titleText } = getElements(wrapper);
+    assert.equal(wholePageBackText(), 'Import from SANDISK (G:)');
+    assert.equal(titleText(), 'SANDISK (G:)');
+  });
+
+  it('in REMOTEIMPORT mode, the back link text and title are correct', () => {
+    setTransferType('remoteimport');
+    const wrapper = makeWrapper({ store });
+    const { wholePageBackText, titleText } = getElements(wrapper);
+    assert.equal(wholePageBackText(), 'Kolibri Central Server');
+    assert.equal(titleText(), 'Channels');
+  });
+
+  it('in LOCALEXPORT shows the correct number of channels available message', () => {
+    setTransferType('localexport');
+    store.state.pageState.wizardState.availableChannels = [...channelsOnDevice];
+    const wrapper = makeWrapper({ store });
+    const { channelsAvailableText, noChannels } = getElements(wrapper);
+    assert.equal(channelsAvailableText(), '2 channels available');
+    assert.deepEqual(noChannels(), []);
+  });
+
+  it('in REMOTEIMPORT/LOCALIMPORT shows the correct number of channels available message', () => {
+    setTransferType('localimport');
+    const wrapper = makeWrapper({ store });
+    const { channelsAvailableText, noChannels } = getElements(wrapper);
+    assert.equal(channelsAvailableText(), '4 channels available');
+    assert.deepEqual(noChannels(), []);
+  });
+
+  it('if there are no channels, then filters do not appear', () => {
+    store.state.pageState.wizardState.availableChannels = [];
+    const wrapper = makeWrapper({ store });
+    const { filters } = getElements(wrapper);
+    assert.deepEqual(filters(), []);
+  });
+
+  it('in LOCALIMPORT/REMOTEIMPORT, channel item (not) on device has the correct props', () => {
+    const wrapper = makeWrapper();
+    const { channelListItems } = getElements(wrapper);
+    const channels = channelListItems();
+    assert.equal(channels[0].getProp('mode'), 'IMPORT');
+    assert.equal(channels[0].getProp('onDevice'), true);
+    assert.equal(channels[1].getProp('onDevice'), false);
+    assert.equal(channels[2].getProp('onDevice'), false);
+    assert.equal(channels[3].getProp('onDevice'), true);
+  });
+
+  it('IN LOCALEXPORT, with no filters, all channels (with resources) appear', () => {
+    setTransferType('localexport');
+    store.state.pageState.wizardState.availableChannels = [...channelsOnDevice];
+    const wrapper = makeWrapper({ store });
+    assert.equal(wrapper.vm.titleFilter, '');
+    assert.equal(wrapper.vm.languageFilter.value, 'ALL');
+    testChannelVisibility(wrapper, [true, false, false, true]);
+  });
+
+  it('IN LOCALIMPORT/REMOTEIMPORT, with no filters, all appear', () => {
+    setTransferType('localimport');
+    const wrapper = makeWrapper({ store });
+    assert.equal(wrapper.vm.titleFilter, '');
+    assert.equal(wrapper.vm.languageFilter.value, 'ALL');
+    testChannelVisibility(wrapper, [true, true, true, true]);
+  });
+
+  it('the correct language filter options appear', () => {
+    const wrapper = makeWrapper();
+    const { languageFilter } = getElements(wrapper);
+    // Fake labels for now
+    const expected = [
+      { label: 'All Languages', value: 'ALL' },
+      { label: 'English', value: 'en' },
+      { label: 'German', value: 'de' },
+    ];
+    assert.deepEqual(languageFilter().getProp('options'), expected);
+  });
+
+  it('with language filter, the correct channels appear', () => {
+    const wrapper = makeWrapper();
+    const { languageFilter } = getElements(wrapper);
+    const filter = languageFilter();
+    // Can't seem to trigger the event, so calling setValue method directly
+    filter.vm.setValue({ label: 'English', value: 'en' });
+    return wrapper.vm.$nextTick().then(() => {
+      testChannelVisibility(wrapper, [true, false, false, false]);
+    });
+  });
+
+  it('with keyword filter, the correct channels appear', () => {
+    const wrapper = makeWrapper();
+    const { titleFilter } = getElements(wrapper);
+    const filter = titleFilter();
+    // Can't trigger 'input' event; need to set new value manually
+    filter.vm.model = 'bir ch';
+    return wrapper.vm.$nextTick().then(() => {
+      assert.equal(wrapper.vm.titleFilter, 'bir ch');
+      testChannelVisibility(wrapper, [false, true, false, false]);
+    });
+  });
+
+  it('with both filters, the correct channels appear', () => {
+    const wrapper = makeWrapper();
+    const { languageFilter, titleFilter } = getElements(wrapper);
+    const lFilter = languageFilter();
+    const tFilter = titleFilter();
+    lFilter.vm.setValue({ label: 'German', value: 'de' });
+    tFilter.vm.model = 'hund';
+    return wrapper.vm.$nextTick().then(() => {
+      testChannelVisibility(wrapper, [false, false, true, false]);
+    });
+  });
+
+  it('clicking "select" on one of the channels invokes page-transition action', () => {
+    const wrapper = makeWrapper();
+    const { channelListItems } = getElements(wrapper);
+    const actionStub = sinon.stub(wrapper.vm, 'transitionWizardPage');
+    const channels = channelListItems();
+    channels[0].first('button').trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.calledOnce(actionStub);
+      sinon.assert.calledWith(actionStub, 'forward', { channel: availableChannels[0] });
+    });
+  });
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/views/channel-list-item.spec.js b/kolibri/plugins/management/assets/src/device_management/test/views/channel-list-item.spec.js
index f36bb8200f7..458bea0d6ba 100644
--- a/kolibri/plugins/management/assets/src/device_management/test/views/channel-list-item.spec.js
+++ b/kolibri/plugins/management/assets/src/device_management/test/views/channel-list-item.spec.js
@@ -5,19 +5,20 @@ import sinon from 'sinon';
 import assert from 'assert';
 import ChannelListItem from '../../views/manage-content-page/channel-list-item.vue';
 import { mount } from 'avoriaz';
-
-const defaultChannel = {
-  name: 'Channel Title',
-  version: 20,
-  description: 'An awesome channel',
-  total_file_size: 5000000000,
-  thumbnail: '',
-};
+import { defaultChannel } from '../utils/data';
 
 function makeStore() {
   return new Vuex.Store({
     state: {
-      pageState: {},
+      pageState: {
+        taskList: [],
+        channelList: [{ id: 'installed', name: 'Installed Channel', version: 11 }],
+      },
+    },
+    mutations: {
+      addTask(state, task) {
+        state.pageState.taskList.push(task);
+      },
     },
   });
 }
@@ -25,137 +26,147 @@ function makeStore() {
 function makeWrapper(options = {}) {
   const { props = {}, store } = options;
   const defaultProps = {
-    channel: defaultChannel,
-    mode: 'managing',
+    channel: {
+      ...defaultChannel,
+      thumbnail: 'data:image/png;base64,abcd1234',
+    },
+    mode: 'MANAGE',
+    onDevice: false,
   };
   return mount(ChannelListItem, {
-    propsData: Object.assign(defaultProps, props),
+    propsData: { ...defaultProps, ...props },
     store: store || makeStore(),
   });
 }
 
+// prettier-ignore
 function getElements(wrapper) {
   return {
-    resourcesSizeText: () =>
-      wrapper
-        .first('.resources-size')
-        .text()
-        .trim(),
+    resourcesSizeText: () => wrapper.first('.resources-size').text().trim(),
     resourcesSize: () => wrapper.find('.resources-size'),
     onDevice: () => wrapper.find('.on-device'),
     deleteButton: () => wrapper.find('button[name="delete"]'),
     selectButton: () => wrapper.find('button[name="select"]'),
-    title: () =>
-      wrapper
-        .first('.title')
-        .text()
-        .trim(),
-    version: () =>
-      wrapper
-        .first('.version')
-        .text()
-        .trim(),
-    description: () =>
-      wrapper
-        .first('.description')
-        .text()
-        .trim(),
+    title: () => wrapper.first('.title').text().trim(),
+    version: () => wrapper.first('.version').text().trim(),
+    description: () => wrapper.first('.description').text().trim(),
     thumbnail: () => wrapper.first('.thumbnail'),
+    addTaskMutation: (task) => wrapper.vm.$store.dispatch('addTask', task),
   };
 }
 
+const fakeImage = 'data:image/png;base64,abcd1234';
+
 describe('channelListItem', () => {
-  describe('in either mode', () => {
+  let importWrapper;
+  let exportWrapper;
+  let manageWrapper;
+
+  beforeEach(() => {
+    exportWrapper = makeWrapper({ props: { mode: 'EXPORT' } });
+    importWrapper = makeWrapper({ props: { mode: 'IMPORT' } });
+    manageWrapper = makeWrapper({ props: { mode: 'MANAGE' } });
+  });
+
+  describe('in any mode', () => {
+    function testAll(test) {
+      test(importWrapper);
+      test(exportWrapper);
+      test(manageWrapper);
+    }
+
     it('shows the channel title, version, and description', () => {
-      const wrapper = makeWrapper();
-      const { title, version, description } = getElements(wrapper);
-      assert.equal(title(), 'Channel Title');
-      assert.equal(version(), 'Version 20');
-      assert.equal(description(), 'An awesome channel');
+      function test(wrapper) {
+        const { title, version, description } = getElements(wrapper);
+        assert.equal(title(), 'Channel Title');
+        assert.equal(version(), 'Version 20');
+        assert.equal(description(), 'An awesome channel');
+      }
+      testAll(test);
     });
 
     it('shows the thumbnail using encoded string', () => {
-      const wrapper = makeWrapper({
-        props: {
-          channel: Object.assign({}, defaultChannel, {
-            thumbnail: 'abcd1234',
-          }),
-        },
-      });
-      const { thumbnail } = getElements(wrapper);
-      const thumb = thumbnail();
-      assert.equal(thumb.first('img').getAttribute('src'), 'abcd1234');
-      assert(!thumb.contains('svg'));
+      function test(wrapper) {
+        wrapper.setProps({ thumbnail: fakeImage });
+        const { thumbnail } = getElements(wrapper);
+        const thumb = thumbnail();
+        assert.equal(thumb.first('img').getAttribute('src'), fakeImage);
+        assert(!thumb.contains('svg'));
+      }
+      testAll(test);
     });
 
     it('defaults to a material design icon if there is no thumbnail', () => {
-      const wrapper = makeWrapper();
-      const { thumbnail } = getElements(wrapper);
-      const thumb = thumbnail();
-      assert(thumb.contains('svg'));
-      assert(!thumb.contains('img'));
+      function test(wrapper) {
+        const { thumbnail } = getElements(wrapper);
+        wrapper.setProps({ channel: { ...defaultChannel, thumbnail: '' } });
+        const thumb = thumbnail();
+        assert(thumb.contains('svg'));
+        assert(!thumb.contains('img'));
+      }
+      testAll(test);
     });
   });
 
-  describe('when in "managing" mode', () => {
-    it('shows the file size of the Resources', () => {
-      const wrapper = makeWrapper();
-      const { resourcesSizeText, onDevice } = getElements(wrapper);
-      assert.equal(resourcesSizeText(), '4 GB resources');
-      assert.deepEqual(onDevice(), []);
+  it('if the channel is installed, the version number is of the installed channel', () => {
+    importWrapper.setProps({
+      onDevice: true,
+      channel: {
+        id: 'installed',
+        version: 20,
+      },
     });
+    const { version } = getElements(importWrapper);
+    assert.equal(version(), 'Version 11');
+  });
 
-    it('shows a delete button', () => {
-      const wrapper = makeWrapper();
-      const { deleteButton, selectButton } = getElements(wrapper);
-      assert(deleteButton()[0].is('button'));
-      // Select button is not shown
-      assert.deepEqual(selectButton(), []);
+  it('if the channel is not installed, the version number is of the remote channel', () => {
+    importWrapper.setProps({
+      onDevice: true,
+      channel: {
+        id: 'not_installed',
+        version: 20,
+      },
     });
+    const { version } = getElements(importWrapper);
+    assert.equal(version(), 'Version 20');
+  });
 
-    it('delete button is disabled when there are tasks in queue', () => {
-      const store = makeStore();
-      store.state.pageState.taskList = [{ id: 'task_1' }];
-      const wrapper = makeWrapper({ store });
-      const { deleteButton } = getElements(wrapper);
-      assert.equal(deleteButton()[0].getAttribute('disabled'), 'disabled');
-    });
+  it('in MANAGE/EXPORT shows the file sizes of Resources', () => {
+    // ...and does not show the "On Device" indicator
+    function test(wrapper) {
+      const { resourcesSizeText, onDevice } = getElements(wrapper);
+      assert.equal(resourcesSizeText(), '4 GB resources');
+      assert.deepEqual(onDevice(), []);
+    }
+    test(manageWrapper);
+    test(exportWrapper);
+  });
 
-    it('delete button is not disabled when there are no tasks in queue', () => {
-      const store = makeStore();
-      store.state.pageState.taskList = [];
-      const wrapper = makeWrapper({ store });
-      const { deleteButton } = getElements(wrapper);
-      assert.equal(deleteButton()[0].hasAttribute('disabled'), false);
-    });
-
-    it('clicking delete button triggers "clickdelete" event', () => {
-      const wrapper = makeWrapper();
-      const emitSpy = sinon.spy(wrapper.vm, '$emit');
-      const { deleteButton } = getElements(wrapper);
-      deleteButton()[0].trigger('click');
-      return wrapper.vm.$nextTick().then(() => {
-        sinon.assert.calledOnce(emitSpy);
-        sinon.assert.calledWith(emitSpy, 'clickdelete');
-      });
+  it('in MANAGE mode only, clicking "delete" triggers a "clickdelete" event', () => {
+    const wrapper = manageWrapper;
+    const { deleteButton, selectButton } = getElements(wrapper);
+    const emitSpy = sinon.spy(wrapper.vm, '$emit');
+    // Select button is not shown
+    assert.deepEqual(selectButton(), []);
+    deleteButton()[0].trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.calledOnce(emitSpy);
+      sinon.assert.calledWith(emitSpy, 'clickdelete');
     });
   });
 
-  describe('when in "importing" mode', () => {
-    const defaultProps = {
-      mode: 'importing',
-      onDevice: true,
-    };
-
-    it('shows a select button', () => {
-      const wrapper = makeWrapper({ props: defaultProps });
-      const { deleteButton, selectButton } = getElements(wrapper);
-      assert(selectButton()[0].is('button'));
-      assert.deepEqual(deleteButton(), []);
+  it('in MANAGE mode only, delete button is disabled when tasks in queue', () => {
+    const wrapper = manageWrapper;
+    const { deleteButton, addTaskMutation } = getElements(wrapper);
+    addTaskMutation({ id: 'task_1' });
+    return wrapper.vm.$nextTick().then(() => {
+      assert.equal(deleteButton()[0].getAttribute('disabled'), 'disabled');
     });
+  });
 
-    it('clicking delete button triggers "clickselect" event', () => {
-      const wrapper = makeWrapper({ props: defaultProps });
+  it('in IMPORT/EXPORT mode, clicking "select" triggers a "clickselect" event', () => {
+    function test(wrapper) {
       const emitSpy = sinon.spy(wrapper.vm, '$emit');
       const { selectButton } = getElements(wrapper);
       selectButton()[0].trigger('click');
@@ -163,23 +174,43 @@ describe('channelListItem', () => {
         sinon.assert.calledOnce(emitSpy);
         sinon.assert.calledWith(emitSpy, 'clickselect');
       });
-    });
+    }
+    return Promise.all([test(importWrapper), test(exportWrapper)]);
+  });
+
+  it('in IMPORT/EXPORT mode, "select" button is disabled when tasks in queue', () => {
+    function test(wrapper) {
+      const { selectButton, addTaskMutation } = getElements(wrapper);
+      addTaskMutation({ id: 'task_1' });
+      return wrapper.vm.$nextTick().then(() => {
+        assert.equal(selectButton()[0].getAttribute('disabled'), 'disabled');
+      });
+    }
+    return Promise.all([test(importWrapper), test(exportWrapper)]);
+  });
 
-    it('shows the "on device" indicator if channel is installed', () => {
-      const wrapper = makeWrapper({ props: defaultProps });
+  it('in IMPORT mode only, shows an "on device" indicator if channel is installed', () => {
+    function posTest(wrapper) {
+      wrapper.setProps({ onDevice: true });
       const { onDevice, resourcesSize } = getElements(wrapper);
       assert(onDevice()[0].is('div'));
       assert.deepEqual(resourcesSize(), []);
-    });
-
-    it('does not show the "on device" indicator if channel is not installed', () => {
-      const props = Object.assign({}, defaultProps, {
-        onDevice: false,
-      });
-      const wrapper = makeWrapper({ props });
-      const { onDevice, resourcesSize } = getElements(wrapper);
+    }
+    function negTest(wrapper) {
+      wrapper.setProps({ onDevice: true });
+      const { onDevice } = getElements(wrapper);
       assert.deepEqual(onDevice(), []);
-      assert.deepEqual(resourcesSize(), []);
-    });
+    }
+    posTest(importWrapper);
+    negTest(exportWrapper);
+    negTest(manageWrapper);
+  });
+
+  it('in IMPORT mode only, does not show the "on device" indicator if channel is not installed', () => {
+    const wrapper = importWrapper;
+    wrapper.setProps({ onDevice: false });
+    const { onDevice, resourcesSize } = getElements(wrapper);
+    assert.deepEqual(onDevice(), []);
+    assert.deepEqual(resourcesSize(), []);
   });
 });
diff --git a/kolibri/plugins/management/assets/src/device_management/test/views/channel-token-modal.spec.js b/kolibri/plugins/management/assets/src/device_management/test/views/channel-token-modal.spec.js
new file mode 100644
index 00000000000..5227a73bf1f
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/views/channel-token-modal.spec.js
@@ -0,0 +1,156 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import assert from 'assert';
+import { mount } from 'avoriaz';
+import sinon from 'sinon';
+import ChannelTokenModal from '../../views/available-channels-page/channel-token-modal';
+import kTextbox from 'kolibri.coreVue.components.kTextbox';
+import UiAlert from 'keen-ui/src/UiAlert';
+
+function makeWrapper() {
+  return mount(ChannelTokenModal);
+}
+
+function getElements(wrapper) {
+  return {
+    cancelButton: () => wrapper.first('button[name="cancel"]'),
+    tokenTextbox: () => wrapper.first(kTextbox),
+    networkErrorAlert: () => wrapper.find(UiAlert),
+    lookupTokenStub: () => sinon.stub(wrapper.vm, 'lookupToken'),
+    $emitSpy: () => sinon.stub(wrapper.vm, '$emit'),
+  };
+}
+
+describe('channelTokenModal component', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = makeWrapper();
+  });
+
+  it('pressing "cancel" emits a close modal event', () => {
+    const emitSpy = sinon.spy(wrapper.vm, '$emit');
+    const { cancelButton } = getElements(wrapper);
+    cancelButton().trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.calledWith(emitSpy, 'closemodal');
+    });
+  });
+
+  describe('submitting a token', () => {
+    function inputToken(wrapper, token) {
+      const textbox = getElements(wrapper).tokenTextbox();
+      textbox.vm.$emit('input', token);
+      return wrapper.vm.$nextTick().then(() => {
+        assert.equal(textbox.getProp('value'), token.trim());
+      });
+    }
+
+    function assertTextboxInvalid(wrapper) {
+      const textbox = getElements(wrapper).tokenTextbox();
+      assert.equal(textbox.getProp('invalid'), true);
+      assert.equal(textbox.getProp('invalidText'), 'Check whether you entered token correctly');
+    }
+
+    it('if user has not interacted with the form, then no validation messages appear', () => {
+      const { tokenTextbox, networkErrorAlert } = getElements(wrapper);
+      assert.equal(tokenTextbox().getProp('invalid'), false);
+      assert.deepEqual(networkErrorAlert(), []);
+    });
+
+    it('disables the form while waiting for a response from the server', () => {
+      //...then re-enables it afterwards
+      const { lookupTokenStub } = getElements(wrapper);
+      const lookupStub = lookupTokenStub();
+      const disabledSpy = sinon.spy();
+      wrapper.vm.$watch('formIsDisabled', disabledSpy);
+      // not checking the Promise.reject case
+      lookupStub.returns(Promise.resolve([]));
+      return inputToken(wrapper, 'toka-toka-token')
+        .then(() => {
+          wrapper.vm.submitForm();
+        })
+        .then(() => {
+          assert.equal(disabledSpy.firstCall.args[0], true);
+          assert.equal(disabledSpy.firstCall.args[1], false);
+        });
+    });
+
+    it('emits a "channel found" event  if token lookup is successful', () => {
+      const tokenPayload = { id: 'toka-toka-token' };
+      const { lookupTokenStub, $emitSpy } = getElements(wrapper);
+      const lookupStub = lookupTokenStub();
+      const emitSpy = $emitSpy();
+      lookupStub.returns(Promise.resolve([tokenPayload]));
+      return inputToken(wrapper, 'toka-toka-token')
+        .then(() => {
+          wrapper.vm.submitForm();
+        })
+        .then(() => {
+          sinon.assert.calledWith(lookupStub, 'toka-toka-token');
+          sinon.assert.calledWith(emitSpy, 'channelfound', tokenPayload);
+        });
+    });
+
+    it('on submit, shows a validation message when token code is empty', () => {
+      return inputToken(wrapper, '    ')
+        .then(() => {
+          // HACK: Clicking the submit button does not propagate to the form, so calling
+          // submit method directly
+          return wrapper.vm.submitForm();
+        })
+        .then(() => {
+          assertTextboxInvalid(wrapper);
+        });
+    });
+
+    it('on blur, shows a validation message when token code is empty', () => {
+      const textbox = getElements(wrapper).tokenTextbox();
+      return inputToken(wrapper, '    ')
+        .then(() => {
+          // Reaching into ui-textbox's blur to trigger it on k-textbox
+          textbox.vm.$refs.textbox.$emit('blur');
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
+          assertTextboxInvalid(wrapper);
+        });
+    });
+
+    it('if the token does not point to a channel (404 code), shows a validation message', () => {
+      const tokenPayload = { status: { code: 404 } };
+      const { lookupTokenStub, $emitSpy } = getElements(wrapper);
+      const lookupStub = lookupTokenStub();
+      const emitSpy = $emitSpy();
+      lookupStub.returns(Promise.reject(tokenPayload));
+      return inputToken(wrapper, 'toka-toka-token')
+        .then(() => {
+          return wrapper.vm.submitForm();
+        })
+        .then(() => {
+          sinon.assert.calledWith(lookupStub, 'toka-toka-token');
+          sinon.assert.notCalled(emitSpy);
+          assertTextboxInvalid(wrapper);
+        });
+    });
+
+    it('shows an ui-alert error if there is a generic network error (other error code)', () => {
+      const tokenPayload = { status: { code: 500 } };
+      const { tokenTextbox, networkErrorAlert, lookupTokenStub, $emitSpy } = getElements(wrapper);
+      const textbox = tokenTextbox();
+      const lookupStub = lookupTokenStub();
+      const emitSpy = $emitSpy();
+      lookupStub.returns(Promise.reject(tokenPayload));
+      return inputToken(wrapper, 'toka-toka-token')
+        .then(() => {
+          return wrapper.vm.submitForm();
+        })
+        .then(() => {
+          sinon.assert.calledWith(lookupStub, 'toka-toka-token');
+          sinon.assert.notCalled(emitSpy);
+          assert.equal(textbox.getProp('invalid'), false);
+          assert(networkErrorAlert()[0].isVueComponent);
+        });
+    });
+  });
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/views/content-node-row.spec.js b/kolibri/plugins/management/assets/src/device_management/test/views/content-node-row.spec.js
new file mode 100644
index 00000000000..fec5073eee6
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/views/content-node-row.spec.js
@@ -0,0 +1,122 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import sinon from 'sinon';
+import { mount } from 'avoriaz';
+import assert from 'assert';
+import ContentNodeRow from '../../views/select-content-page/content-node-row.vue';
+import { makeNode } from '../utils/data';
+import kCheckbox from 'kolibri.coreVue.components.kCheckbox';
+
+const defaultProps = {
+  node: {
+    title: 'Awesome Content',
+    kind: 'topic',
+    id: 'awesome_content',
+  },
+  message: 'HELLO',
+};
+
+function makeWrapper(props = {}) {
+  return mount(ContentNodeRow, {
+    propsData: { ...defaultProps, ...props },
+  });
+}
+
+function getElements(wrapper) {
+  return {
+    titleText: () =>
+      wrapper
+        .first('.title')
+        .text()
+        .trim(),
+    messageText: () =>
+      wrapper
+        .first('.message')
+        .text()
+        .trim(),
+    goToTopicButton: () => wrapper.find('button[name="select-node"]'),
+    checkbox: () => wrapper.first('input[type="checkbox"]'),
+    kCheckbox: () => wrapper.first(kCheckbox),
+  };
+}
+
+describe('contentNodeRow component', () => {
+  it('shows the correct title', () => {
+    const wrapper = makeWrapper();
+    const { titleText } = getElements(wrapper);
+    assert.equal(titleText(), 'Awesome Content');
+  });
+
+  it('shows the correct message', () => {
+    const wrapper = makeWrapper();
+    const { messageText } = getElements(wrapper);
+    assert.equal(messageText(), 'HELLO');
+  });
+
+  it('when node is a topic, title is a button that emits "clicktopic" event', () => {
+    const wrapper = makeWrapper();
+    const { goToTopicButton } = getElements(wrapper);
+    const emitSpy = sinon.spy(wrapper.vm, '$emit');
+    goToTopicButton()[0].trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.calledOnce(emitSpy);
+      sinon.assert.calledWith(emitSpy, 'clicktopic', wrapper.vm.node);
+    });
+  });
+
+  it('when node is not a topic, title is just text', () => {
+    const wrapper = makeWrapper({
+      node: makeNode('1', {
+        kind: 'video',
+      }),
+    });
+    const { goToTopicButton, titleText } = getElements(wrapper);
+    assert.equal(goToTopicButton()[0], undefined);
+    assert.equal(titleText(), 'node_1');
+  });
+
+  it('when node is disabled, title is just text', () => {
+    const wrapper = makeWrapper({ disabled: true });
+    const { goToTopicButton, titleText } = getElements(wrapper);
+    assert.equal(goToTopicButton()[0], undefined);
+    assert.equal(titleText(), 'Awesome Content');
+  });
+
+  it('when checkbox is changed, it emits a "changeselection" event', () => {
+    const wrapper = makeWrapper();
+    const { checkbox } = getElements(wrapper);
+    const emitSpy = sinon.spy(wrapper.vm, '$emit');
+    // have to "click" the inner checkbox to trigger "change" on whole component
+    checkbox().trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.calledOnce(emitSpy);
+      sinon.assert.calledWith(emitSpy, 'changeselection', wrapper.vm.node);
+    });
+  });
+
+  it('when props.disabled, the checkbox is disabled', () => {
+    const wrapper = makeWrapper({ disabled: true });
+    const { checkbox } = getElements(wrapper);
+    assert.equal(checkbox().getAttribute('disabled'), 'disabled');
+  });
+
+  it('when props.checked, the checkbox is checked', () => {
+    const wrapper = makeWrapper({
+      disabled: true,
+      checked: true,
+    });
+    // For some reason, the HTML for the actual checkbox does not have checked attribute
+    const { kCheckbox } = getElements(wrapper);
+    assert.equal(kCheckbox().getProp('checked'), true);
+  });
+
+  it('when props.determinate, the checkbox is indeterminate', () => {
+    const wrapper = makeWrapper({
+      disabled: true,
+      checked: true,
+      indeterminate: true,
+    });
+    const { kCheckbox } = getElements(wrapper);
+    assert.equal(kCheckbox().getProp('indeterminate'), true);
+  });
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/views/content-tree-viewer.spec.js b/kolibri/plugins/management/assets/src/device_management/test/views/content-tree-viewer.spec.js
new file mode 100644
index 00000000000..756b616f5af
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/views/content-tree-viewer.spec.js
@@ -0,0 +1,288 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import assert from 'assert';
+import { mount } from 'avoriaz';
+import sinon from 'sinon';
+import ContentTreeViewer from '../../views/select-content-page/content-tree-viewer.vue';
+import ContentNodeRow from '../../views/select-content-page/content-node-row.vue';
+import kCheckbox from 'kolibri.coreVue.components.kCheckbox';
+import { importExportWizardState } from '../../state/wizardState';
+import { makeNode, contentNodeGranularPayload } from '../utils/data';
+import mutations from '../../state/mutations';
+import omit from 'lodash/omit';
+
+function simplePath(pks) {
+  return pks.map(makeNode);
+}
+
+function makeStore() {
+  return new Vuex.Store({
+    state: {
+      pageState: {
+        wizardState: {
+          ...importExportWizardState(),
+          currentTopicNode: {
+            ...contentNodeGranularPayload(),
+          },
+        },
+      },
+    },
+    mutations,
+  });
+}
+
+function makeWrapper(options = {}) {
+  const { props = {}, store } = options;
+  return mount(ContentTreeViewer, {
+    propsData: props,
+    store: store || makeStore(),
+    router: new VueRouter({}),
+  });
+}
+
+function getElements(wrapper) {
+  return {
+    // Need to filter out checkboxes in content-node-rows
+    selectAllCheckbox: () =>
+      wrapper.find(kCheckbox).find(el => el.getProp('label') === 'Select all'),
+    emptyState: () => wrapper.first('.no-contents'),
+    contentsSection: () => wrapper.find('.contents'),
+    firstTopicButton: () => wrapper.find(ContentNodeRow)[0].first('button'),
+  };
+}
+
+describe('contentTreeViewer component', () => {
+  let store;
+
+  function setChildren(children) {
+    store.state.pageState.wizardState.currentTopicNode.children = children;
+  }
+
+  function setIncludedNodes(nodes) {
+    store.state.pageState.wizardState.nodesForTransfer.included = nodes;
+  }
+
+  function setOmittedNodes(nodes) {
+    store.state.pageState.wizardState.nodesForTransfer.omitted = nodes;
+  }
+
+  beforeEach(() => {
+    store = makeStore();
+  });
+
+  it('shows one content-node-row for each importable node in topic', () => {
+    const wrapper = makeWrapper({ store });
+    const rows = wrapper.find(ContentNodeRow);
+    // TODO: Investigate; CNG Payload has one importable topic
+    assert.equal(rows.length, 2);
+  });
+
+  xit('if in import mode, then non-importable nodes are filtered from the list', () => {});
+
+  xit('in LOCALEXPORT, if a node has available: false, then it is not shown', () => {});
+
+  it('it shows an empty state if the topic has no children', () => {
+    setChildren([]);
+    const wrapper = makeWrapper({ store });
+    const { contentsSection, emptyState } = getElements(wrapper);
+    assert.equal(contentsSection()[0], undefined);
+    assert(emptyState().is('div'));
+  });
+
+  it('when clicking a topic-title button on a row, a "update topic" action is trigged', () => {
+    const wrapper = makeWrapper({ store });
+    const { firstTopicButton } = getElements(wrapper);
+    const updateTopicStub = sinon.stub(wrapper.vm, 'updateCurrentTopicNode');
+    firstTopicButton().trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.calledOnce(updateTopicStub);
+      sinon.assert.calledWith(updateTopicStub, wrapper.vm.annotatedChildNodes[0]);
+    });
+  });
+
+  it('child nodes are annotated with their full path', () => {
+    store.state.pageState.wizardState.path = [
+      { pk: 'channel_1', title: 'Channel 1' },
+      { pk: 'topic_1', title: 'Topic 1' },
+    ];
+    const wrapper = makeWrapper({ store });
+    wrapper.vm.annotatedChildNodes.forEach(n => {
+      const expectedPath = [
+        { pk: 'channel_1', title: 'Channel 1' },
+        { pk: 'topic_1', title: 'Topic 1' },
+        { pk: n.pk, title: n.title },
+      ];
+      assert.deepEqual(n.path, expectedPath);
+    });
+  });
+
+  xit('the correct breadcrumbs appear on the top', () => {
+    // TODO create breadcrumb util to convert path -> breadrumbs.items prop
+  });
+
+  describe('loading and error states', () => {
+    it('shows loading screen when loading', () => {});
+
+    it('removes loading screen when loaded', () => {});
+
+    it('shows an error state if there was an error loading node', () => {});
+  });
+
+  describe('"select all" checkbox state', () => {
+    // These are integration tests with component and annotateNode utility
+    function checkboxIsChecked(wrapper) {
+      const { selectAllCheckbox } = getElements(wrapper);
+      return selectAllCheckbox().getProp('checked');
+    }
+
+    it('if neither topic nor any ancestor is selected, then "Select All" is unchecked', () => {
+      const wrapper = makeWrapper({ store });
+      assert.equal(checkboxIsChecked(wrapper), false);
+    });
+    it('if any ancestor of the topic is selected, then "Select All" is checked', () => {
+      store.state.pageState.wizardState.path = [{ pk: 'channel_1' }];
+      setIncludedNodes([makeNode('channel_1')]);
+      const wrapper = makeWrapper({ store });
+      assert.equal(checkboxIsChecked(wrapper), true);
+    });
+
+    it('if the topic itself is selected, then "Select All" is checked', () => {
+      setIncludedNodes([makeNode('topic_1')]);
+      const wrapper = makeWrapper({ store });
+      assert.equal(checkboxIsChecked(wrapper), true);
+    });
+
+    it('if topic is selected, but one descendant is omitted', () => {
+      // ...then "Select All" is unchecked
+      setIncludedNodes([makeNode('topic_1')]);
+      setOmittedNodes([makeNode('subtopic_1', { path: [{ pk: 'topic_1' }] })]);
+      const wrapper = makeWrapper({ store });
+      assert.equal(checkboxIsChecked(wrapper), false);
+    });
+  });
+
+  describe('toggling "select all" checkbox', () => {
+    it('if unchecked, clicking the "Select All" for the topic triggers an "add node" action', () => {
+      // Selected w/ unselected child scenario
+      setIncludedNodes([makeNode('topic_1', { total_resources: 1000 })]);
+      setOmittedNodes([makeNode('subtopic_1', { path: [{ pk: 'topic_1', title: '' }] })]);
+      const wrapper = makeWrapper({ store });
+      const { selectAllCheckbox } = getElements(wrapper);
+      const addNodeStub = sinon.stub(wrapper.vm, 'addNodeForTransfer').returns(Promise.resolve());
+      selectAllCheckbox().trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
+        const sanitized = omit(wrapper.vm.annotatedTopicNode, [
+          'message',
+          'checkboxType',
+          'disabled',
+          'children',
+        ]);
+        sinon.assert.calledOnce(addNodeStub);
+        sinon.assert.calledWithMatch(addNodeStub, sanitized);
+      });
+    });
+
+    it('if topic is checked, clicking the "Select All" for the topic triggers a "remove node" action', () => {
+      setIncludedNodes([makeNode('topic_1')]);
+      const wrapper = makeWrapper({ store });
+      const removeNodeStub = sinon
+        .stub(wrapper.vm, 'removeNodeForTransfer')
+        .returns(Promise.resolve());
+      const { selectAllCheckbox } = getElements(wrapper);
+      selectAllCheckbox().trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
+        const sanitized = omit(wrapper.vm.annotatedTopicNode, [
+          'message',
+          'checkboxType',
+          'disabled',
+          'children',
+        ]);
+        sinon.assert.calledOnce(removeNodeStub);
+        sinon.assert.calledWithMatch(removeNodeStub, sanitized);
+      });
+    });
+  });
+
+  describe('selecting child nodes', () => {
+    it('clicking a checked child node triggers a "remove node" action', () => {
+      const subTopic = makeNode('subtopic_1', {
+        path: [{ pk: 'subtopic_1', title: 'node_subtopic_1' }],
+        total_resources: 100,
+        on_device_resources: 50,
+      });
+      setChildren([subTopic]);
+      setIncludedNodes([subTopic]);
+      const wrapper = makeWrapper({ store });
+      const removeNodeStub = sinon
+        .stub(wrapper.vm, 'removeNodeForTransfer')
+        .returns(Promise.resolve());
+      const topicRow = wrapper.first(ContentNodeRow);
+      assert.equal(topicRow.getProp('checked'), true);
+      assert.equal(topicRow.getProp('disabled'), false);
+      topicRow.first('input[type="checkbox"]').trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
+        sinon.assert.calledOnce(removeNodeStub);
+        sinon.assert.calledWithMatch(removeNodeStub, subTopic);
+      });
+    });
+
+    it('clicking an unchecked child node triggers an "add node" action', () => {
+      // Need to add at least two children, so clicking subtopic doesn't complete the topic
+      const subTopic = makeNode('subtopic_1', {
+        path: [{ pk: 'subtopic_1', title: 'node_subtopic_1' }],
+        total_resources: 100,
+        on_device_resources: 50,
+      });
+      const subTopic2 = makeNode('subtopic_2', {
+        path: [{ pk: 'subtopic_1', title: 'node_subtopic_1' }],
+        total_resources: 100,
+        on_device_resources: 50,
+      });
+      setChildren([subTopic, subTopic2]);
+      const wrapper = makeWrapper({ store });
+      const addNodeStub = sinon.stub(wrapper.vm, 'addNodeForTransfer').returns(Promise.resolve());
+      const topicRow = wrapper.first(ContentNodeRow);
+      assert.equal(topicRow.getProp('checked'), false);
+      topicRow.first('input[type="checkbox"]').trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
+        sinon.assert.calledOnce(addNodeStub);
+        sinon.assert.calledWithMatch(addNodeStub, subTopic);
+      });
+    });
+
+    it('clicking an indeterminate child node triggers an "add node" action', () => {
+      const subTopic = makeNode('subtopic', {
+        path: simplePath(['channel_1', 'topic_1']),
+        total_resources: 5,
+      });
+      const subTopic2 = makeNode('subtopic2', {
+        path: simplePath(['channel_1', 'topic_1']),
+        total_resources: 5,
+      });
+      const subSubTopic = makeNode('subsubtopic', {
+        path: simplePath(['channel_1', 'topic_1', 'subtopic']),
+        total_resources: 1,
+      });
+
+      store.state.pageState.wizardState.path = simplePath(['channel_1']);
+      setChildren([subTopic, subTopic2]);
+      setIncludedNodes([subSubTopic]);
+      const wrapper = makeWrapper({ store });
+      const addNodeStub = sinon.stub(wrapper.vm, 'addNodeForTransfer').returns(Promise.resolve());
+      const topicRow = wrapper.first(ContentNodeRow);
+      assert.equal(topicRow.getProp('checked'), false);
+      assert.equal(topicRow.getProp('indeterminate'), true);
+      topicRow.first('input[type="checkbox"]').trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
+        sinon.assert.calledOnce(addNodeStub);
+        sinon.assert.calledWithMatch(addNodeStub, { pk: 'subtopic' });
+      });
+    });
+  });
+
+  xit('clicking an indeterminate or unchecked child node that completes the parent', () => {
+    // ...triggers an "add node" action with the parent topic
+  });
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/views/select-content-page.spec.js b/kolibri/plugins/management/assets/src/device_management/test/views/select-content-page.spec.js
new file mode 100644
index 00000000000..77bb12b2056
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/views/select-content-page.spec.js
@@ -0,0 +1,192 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import assert from 'assert';
+import { mount } from 'avoriaz';
+import SelectContentPage from '../../views/select-content-page';
+import { defaultChannel, contentNodeGranularPayload } from '../utils/data';
+import { wizardState } from '../../state/getters';
+import SelectedResourcesSize from '../../views/select-content-page/selected-resources-size';
+import sinon from 'sinon';
+import { importExportWizardState } from '../../state/wizardState';
+
+SelectContentPage.vuex.actions.getAvailableSpaceOnDrive = () => {};
+
+const router = new VueRouter({
+  routes: [],
+});
+
+function makeStore() {
+  return new Vuex.Store({
+    state: {
+      pageState: {
+        channelList: [
+          {
+            ...defaultChannel,
+            on_device_file_size: 2200000000,
+            on_device_resources: 2000,
+          },
+        ],
+        taskList: [],
+        wizardState: {
+          ...importExportWizardState(),
+          transferredChannel: { ...defaultChannel },
+          transferType: 'localimport',
+          currentTopicNode: contentNodeGranularPayload(),
+        },
+      },
+    },
+  });
+}
+
+function makeWrapper(options) {
+  const { store, props = {} } = options;
+  return mount(SelectContentPage, {
+    propsData: props,
+    store: store || makeStore(),
+    router,
+  });
+}
+
+// prettier-ignore
+function getElements(wrapper) {
+  return {
+    description: () => wrapper.first('.description').text().trim(),
+    notificationsSection: () => wrapper.find('section.notifications'),
+    onDeviceRows: () => wrapper.find('tr.on-device td'),
+    resourcesSize: () => wrapper.find(SelectedResourcesSize),
+    thumbnail: () => wrapper.first('.thumbnail'),
+    title: () => wrapper.first('.title').text().trim(),
+    totalSizeRows: () => wrapper.find('tr.total-size td'),
+    treeView: () => wrapper.find('section.resources-tree-view'),
+    updateSection: () => wrapper.find('.updates-available'),
+    updateButton: () => wrapper.find('button[name="update"]'),
+    version: () => wrapper.first('.version').text().trim(),
+    versionAvailable: () => wrapper.first('.updates-available span').text().trim(),
+  };
+}
+
+function updateMetaChannel(store, updates) {
+  const { transferredChannel } = store.state.pageState.wizardState;
+  store.state.pageState.wizardState.transferredChannel = {
+    ...transferredChannel,
+    ...updates,
+  };
+}
+
+describe('selectContentPage', () => {
+  let store;
+
+  beforeEach(() => {
+    store = makeStore();
+  });
+
+  it('shows the thumbnail, title, descripton, and version of the channel', () => {
+    const fakeImage = 'data:image/png;base64,abcd1234';
+    updateMetaChannel(store, { thumbnail: fakeImage });
+    const wrapper = makeWrapper({ store });
+    const { thumbnail, version, title, description } = getElements(wrapper);
+    assert.equal(
+      thumbnail()
+        .first('img')
+        .getAttribute('src'),
+      fakeImage
+    );
+    assert.equal(title(), 'Channel Title');
+    assert.equal(version(), 'Version 20');
+    assert.equal(description(), 'An awesome channel');
+  });
+
+  xit('if there is no thumbnail, it shows a placeholder', () => {});
+
+  it('shows the total size of the channel', () => {
+    const wrapper = makeWrapper({ store });
+    const { totalSizeRows } = getElements(wrapper);
+    const rows = totalSizeRows();
+    assert.equal(rows[1].text(), '5,000');
+    assert.equal(rows[2].text(), '4 GB');
+  });
+
+  it('if resources are on the device, it shows the total size of those', () => {
+    const wrapper = makeWrapper({ store });
+    const { onDeviceRows } = getElements(wrapper);
+    const rows = onDeviceRows();
+    assert.equal(rows[1].text(), '2,000');
+    assert.equal(rows[2].text(), '2 GB');
+  });
+
+  it('if channel is not on device, it shows size and resources as 0', () => {
+    updateMetaChannel(store, { id: 'not_awesome_channel' });
+    const wrapper = makeWrapper({ store });
+    const { onDeviceRows } = getElements(wrapper);
+    const rows = onDeviceRows();
+    assert.equal(rows[1].text(), '0');
+    assert.equal(rows[2].text(), '0 B');
+  });
+
+  it('if a new version is available, a update notification and button appear', () => {
+    updateMetaChannel(store, { version: 1000 });
+    const wrapper = makeWrapper({ store });
+    const { updateSection, notificationsSection, versionAvailable } = getElements(wrapper);
+    assert(updateSection()[0].is('div'));
+    assert(notificationsSection()[0].is('section'));
+    // { useGrouping: false } intl option not working, but probably won't see such a large number
+    assert.equal(versionAvailable(), 'Version 1,000 available');
+  });
+
+  it('in LOCALIMPORT, clicking the "update" button triggers a downloadChannelMetadata action', () => {
+    updateMetaChannel(store, { version: 1000 });
+    store.state.pageState.wizardState.transferType = 'localimport';
+    store.state.pageState.wizardState.selectedDrive = {
+      driveId: 'drive_1',
+    };
+    const wrapper = makeWrapper({ store });
+    const { updateButton } = getElements(wrapper);
+    const stub = sinon.stub(wrapper.vm, 'downloadChannelMetadata').returns(Promise.resolve());
+    updateButton()[0].trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.called(stub);
+    });
+  });
+
+  it('in REMOTEIMPORT, clicking the "update" button triggers a downloadChannelMetadata action', () => {
+    updateMetaChannel(store, { version: 1000 });
+    wizardState(store.state).transferType = 'remoteimport';
+    const wrapper = makeWrapper({ store });
+    const { updateButton } = getElements(wrapper);
+    const stub = sinon.stub(wrapper.vm, 'downloadChannelMetadata').returns(Promise.resolve());
+    updateButton()[0].trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.calledWith(stub);
+    });
+  });
+
+  xit('if in LOCALEXPORT, the "channel up-to-date" is not shown', () => {});
+
+  it('if a new version is not available, then no notification/button appear', () => {
+    updateMetaChannel(store, { version: 20 });
+    const wrapper = makeWrapper({ store });
+    const { updateSection, notificationsSection } = getElements(wrapper);
+    assert(notificationsSection()[0].isEmpty());
+    assert.deepEqual(updateSection(), []);
+  });
+
+  xit('if on-device info is not ready, then the size display and tree view are not shown', () => {});
+
+  xit('if on-device info is ready, then the size display and tree view are shown', () => {});
+
+  xit('the correct props are passed to the selected resources size component', () => {
+    const wrapper = makeWrapper({ store });
+    const { resourcesSize } = getElements(wrapper);
+    const props = resourcesSize()[0].vm.$props;
+    assert.deepEqual(props, {
+      mode: 'import',
+      fileSize: 10000000000,
+      resourceCount: 5000,
+      spaceOnDrive: 1000,
+    });
+  });
+
+  xit('when there is an error, a ui-alert appears', () => {});
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/views/select-drive-modal.spec.js b/kolibri/plugins/management/assets/src/device_management/test/views/select-drive-modal.spec.js
new file mode 100644
index 00000000000..8386b471fec
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/views/select-drive-modal.spec.js
@@ -0,0 +1,210 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import Vuex from 'vuex';
+import assert from 'assert';
+import { mount } from 'avoriaz';
+import sinon from 'sinon';
+import SelectDriveModal from '../../views/manage-content-page/wizards/select-drive-modal';
+import { wizardState } from '../../state/getters';
+import coreModal from 'kolibri.coreVue.components.coreModal';
+import UiAlert from 'keen-ui/src/UiAlert';
+
+SelectDriveModal.vuex.actions.refreshDriveList = () => Promise.resolve();
+
+function makeWrapper(options = {}) {
+  const { props = {}, store } = options;
+  return mount(SelectDriveModal, {
+    propsData: {
+      mode: 'import',
+      ...props,
+    },
+    store: store || makeStore(),
+  });
+}
+
+function makeStore() {
+  return new Vuex.Store({
+    state: {
+      pageState: {
+        wizardState: {
+          transferType: 'localimport',
+          driveList: [
+            {
+              id: 'unwritable_drive',
+              metadata: { channels: [{ id: 'installed_channel' }] },
+              name: 'Unwritable',
+              writable: false,
+            },
+            {
+              id: 'writable_importable_drive',
+              metadata: { channels: [{ id: 'channel_1' }] },
+              name: 'Writable and Importable',
+              writable: true,
+            },
+            {
+              id: 'no_content_drive',
+              metadata: { channels: [] },
+              name: 'Writable and Importable',
+              writable: true,
+            },
+          ],
+        },
+      },
+    },
+  });
+}
+
+function getElements(wrapper) {
+  return {
+    titleText: () => wrapper.first(coreModal).getProp('title'),
+    driveListLoading: () => wrapper.find('.drive-list-loading'),
+    driveListLoadingText: () =>
+      wrapper
+        .first('.drive-list-loading')
+        .text()
+        .trim(),
+    driveListContainer: () => wrapper.find('.drive-list'),
+    writableImportableRadio: () => wrapper.find('input[value="writable_importable_drive"]'),
+    noContentRadio: () => wrapper.find('input[value="no_content_drive"]'),
+    unwritableRadio: () => wrapper.find('input[value="unwritable_drive"]'),
+    cancelButton: () => wrapper.find('.buttons button')[0],
+    continueButton: () => wrapper.find('.buttons button')[1],
+    UiAlerts: () => wrapper.find(UiAlert),
+    findingLocalDrives: () => wrapper.find('.finding-local-drives'),
+  };
+}
+
+describe('selectDriveModal component', () => {
+  let store;
+
+  beforeEach(() => {
+    store = makeStore();
+  });
+
+  function setTransferType(transferType) {
+    store.state.pageState.wizardState.transferType = transferType;
+  }
+
+  it('when importing, shows the correct title', () => {
+    setTransferType('localimport');
+    const wrapper = makeWrapper({ store });
+    const { titleText } = getElements(wrapper);
+    assert.equal(titleText(), 'Select a drive');
+  });
+
+  it('when exporting, shows the correct title', () => {
+    setTransferType('localexport');
+    const wrapper = makeWrapper({ store });
+    const { titleText } = getElements(wrapper);
+    assert.equal(titleText(), 'Select an export destination');
+  });
+
+  xit('drive labels show the available space', () => {});
+
+  it('when drive list is loading, show a message', () => {
+    const wrapper = makeWrapper({ store });
+    return wrapper.vm.$nextTick().then(() => {
+      const alert = wrapper.find(UiAlert)[0];
+      assert.equal(alert.text().trim(), 'Finding local drives…');
+    });
+  });
+
+  it('when drive list is loaded, it shows the drive-list component ', () => {
+    const wrapper = makeWrapper({ store });
+    const { driveListContainer, driveListLoading } = getElements(wrapper);
+    return wrapper.vm
+      .$nextTick()
+      .then(() => {
+        return wrapper.vm.$nextTick();
+      })
+      .then(() => {
+        assert(driveListContainer()[0].is('div'));
+        assert.deepEqual(driveListLoading(), []);
+      });
+  });
+
+  it('in import mode, drive-list only shows the drives with content', () => {
+    setTransferType('localimport');
+    const wrapper = makeWrapper({ store });
+    const { writableImportableRadio, noContentRadio } = getElements(wrapper);
+    assert(writableImportableRadio()[0].is('input'));
+    assert.deepEqual(noContentRadio(), []);
+  });
+
+  it('in export mode, drive-list only shows drives that are writable', () => {
+    setTransferType('localexport');
+    const wrapper = makeWrapper({ store });
+    const { writableImportableRadio, noContentRadio, unwritableRadio } = getElements(wrapper);
+    assert(writableImportableRadio()[0].is('input'));
+    assert(noContentRadio()[0].is('input'));
+    assert.deepEqual(unwritableRadio(), []);
+  });
+
+  it('in import mode, if there are no drives with content, there is an empty state', () => {
+    setTransferType('localimport');
+    wizardState(store.state).driveList.forEach(d => {
+      d.metadata.channels = [];
+    });
+    const wrapper = makeWrapper({ store });
+    const driveListText = wrapper.find(UiAlert);
+    const expectedMessage = 'No drives with Kolibri content are connected to the server';
+    assert.equal(driveListText[0].text().trim(), expectedMessage);
+  });
+
+  it('in export mode, if there are no writable drives, there is an empty state', () => {
+    setTransferType('localexport');
+    wizardState(store.state).driveList.forEach(d => {
+      d.writable = false;
+    });
+    const wrapper = makeWrapper({ store });
+    const driveListText = wrapper.find(UiAlert);
+    const expectedMessage = 'No drives that can be written to are connected to the server';
+    assert.equal(driveListText[0].text().trim(), expectedMessage);
+  });
+
+  it('when no drive is selected, "Continue" button is disabled', () => {
+    const wrapper = makeWrapper({ store });
+    const { continueButton } = getElements(wrapper);
+    assert.equal(continueButton().getAttribute('disabled'), 'disabled');
+  });
+
+  it('when a drive is selected, "Continue" button is enabled', () => {
+    const wrapper = makeWrapper({ store });
+    const { continueButton, writableImportableRadio } = getElements(wrapper);
+    writableImportableRadio()[0].trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      assert.equal(continueButton().hasAttribute('disabled'), false);
+    });
+  });
+
+  it('clicking "Continue" triggers a "transitionWizardPage" action', () => {
+    const wrapper = makeWrapper({ store });
+    const transitionStub = sinon.stub(wrapper.vm, 'transitionWizardPage');
+    const { continueButton, writableImportableRadio } = getElements(wrapper);
+    writableImportableRadio()[0].trigger('click');
+    return wrapper.vm
+      .$nextTick()
+      .then(() => {
+        continueButton().trigger('click');
+      })
+      .then(() => {
+        // same parameters for import or export flow
+        sinon.assert.calledWith(transitionStub, 'forward', {
+          driveId: 'writable_importable_drive',
+        });
+      });
+  });
+
+  it('clicking "Cancel" triggers a "transitionWizardPage" action', () => {
+    const wrapper = makeWrapper({ store });
+    const transitionStub = sinon.stub(wrapper.vm, 'transitionWizardPage');
+    const { cancelButton } = getElements(wrapper);
+    cancelButton().trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.calledWith(transitionStub, 'cancel');
+    });
+  });
+
+  // not tested
+  // * when resfreshDriveList fails
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/test/views/selected-resources-size.spec.js b/kolibri/plugins/management/assets/src/device_management/test/views/selected-resources-size.spec.js
new file mode 100644
index 00000000000..a01ec932b24
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/test/views/selected-resources-size.spec.js
@@ -0,0 +1,118 @@
+/* eslint-env mocha */
+import Vue from 'vue-test'; // eslint-disable-line
+import assert from 'assert';
+import { mount } from 'avoriaz';
+import sinon from 'sinon';
+import SelectedResourcesSize from '../../views/select-content-page/selected-resources-size.vue';
+import kButton from 'kolibri.coreVue.components.kButton';
+import UiAlert from 'keen-ui/src/UiAlert.vue';
+
+function makeWrapper(props = {}) {
+  const defaultProps = {
+    mode: 'import',
+    resourceCount: 10,
+    fileSize: 10000000,
+    spaceOnDrive: 5000000000,
+  };
+
+  return mount(SelectedResourcesSize, {
+    propsData: { ...defaultProps, ...props },
+  });
+}
+
+// prettier-ignore
+function getElements(wrapper) {
+  return {
+    button: () => wrapper.first(kButton),
+    buttonText: () => wrapper.first(kButton).text().trim(),
+    chooseMsg: () => wrapper.first('.choose-message').text().trim(),
+    notification: () => wrapper.find(UiAlert),
+    remainingSpaceMsg: () => wrapper.first('.remaining-space').text().trim(),
+    resourcesSelectedMsg: () => wrapper.first('.resources-selected-message').text().trim(),
+  }
+}
+
+describe('selectedResourcesSize component', () => {
+  it('shows the correct message and button when in import mode', () => {
+    const wrapper = makeWrapper();
+    const { chooseMsg, buttonText } = getElements(wrapper);
+    assert.equal(chooseMsg(), 'Choose content to import');
+    assert.equal(buttonText(), 'import');
+  });
+
+  it('shows the correct message and button when in export mode', () => {
+    const wrapper = makeWrapper({ mode: 'export' });
+    const { chooseMsg, buttonText } = getElements(wrapper);
+    assert.equal(chooseMsg(), 'Choose content to export');
+    assert.equal(buttonText(), 'export');
+  });
+
+  it('shows correct "resources selected" message given resourceCount & fileSize props', () => {
+    const wrapper = makeWrapper();
+    const { resourcesSelectedMsg } = getElements(wrapper);
+    assert.equal(resourcesSelectedMsg(), 'Resources selected: 10 (9 MB)');
+  });
+
+  it('confirmation button is disabled when no resources are selected', () => {
+    const wrapper = makeWrapper({
+      resourceCount: 0,
+      fileSize: 0,
+    });
+    const { button } = getElements(wrapper);
+    assert.equal(button().getProp('disabled'), true);
+  });
+
+  it('confirmation button is disabled when remaining space is zero', () => {
+    const wrapper = makeWrapper({
+      resourceCount: 10,
+      fileSize: 10,
+      spaceOnDrive: 9,
+    });
+    const { button } = getElements(wrapper);
+    assert.equal(button().getProp('disabled'), true);
+  });
+
+  it('when button is clicked, it emits an "clickconfirm" event', () => {
+    const wrapper = makeWrapper();
+    const emitSpy = sinon.spy(wrapper.vm, '$emit');
+    const { button } = getElements(wrapper);
+    button().trigger('click');
+    return wrapper.vm.$nextTick().then(() => {
+      sinon.assert.calledOnce(emitSpy);
+      sinon.assert.calledWith(emitSpy, 'clickconfirm');
+    });
+  });
+
+  it('confirmation button is enabled when some resources are selected', () => {
+    const wrapper = makeWrapper({
+      resourceCount: 1,
+      fileSize: 10,
+    });
+    const { button } = getElements(wrapper);
+    assert.equal(button().getProp('disabled'), false);
+  });
+
+  it('shows the "remaining space message"', () => {
+    const wrapper = makeWrapper();
+    const { remainingSpaceMsg } = getElements(wrapper);
+    assert.equal(remainingSpaceMsg(), 'Your remaining space: 4 GB');
+  });
+
+  it('shows an error notification when remaining space goes to zero', () => {
+    const wrapper = makeWrapper();
+    const { notification } = getElements(wrapper);
+    assert.deepEqual(notification(), []);
+    wrapper.setProps({ fileSize: 100000000000000 });
+    return wrapper.vm
+      .$nextTick()
+      .then(() => {
+        assert(notification()[0].isVueComponent);
+        wrapper.setProps({ fileSize: 100 });
+        return wrapper.vm.$nextTick();
+      })
+      .then(() => {
+        // Then disappears if it goes back above zero
+        assert.deepEqual(notification(), []);
+      });
+  });
+});
diff --git a/kolibri/plugins/management/assets/src/device_management/views/available-channels-page/channel-token-modal.vue b/kolibri/plugins/management/assets/src/device_management/views/available-channels-page/channel-token-modal.vue
new file mode 100644
index 00000000000..64905fc6e5c
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/available-channels-page/channel-token-modal.vue
@@ -0,0 +1,133 @@
+<template>
+
+  <core-modal
+    :title="$tr('enterChannelToken')"
+    :hideTopButtons="true"
+  >
+    <p>{{ $tr('tokenExplanation') }}</p>
+
+    <form @submit.prevent="submitForm">
+      <ui-alert
+        v-if="tokenNetworkError"
+        :dismissible="false"
+        type="error"
+      >
+        {{ $tr('networkErrorMessage') }}
+      </ui-alert>
+
+      <k-textbox
+        :label="$tr('channelTokenLabel')"
+        v-model.trim="token"
+        :invalid="!tokenIsValid"
+        :invalidText="$tr('invalidTokenMessage')"
+        autofocus
+        @blur="tokenIsBlurred=true"
+        :disabled="formIsDisabled"
+      />
+
+      <div class="buttons">
+        <k-button
+          :text="$tr('cancel')"
+          name="cancel"
+          appearance="flat-button"
+          @click="$emit('closemodal')"
+          :disabled="formIsDisabled"
+        />
+        <k-button
+          class="submit"
+          type="submit"
+          :text="$tr('confirm')"
+          :primary="true"
+          :disabled="formIsDisabled"
+        />
+      </div>
+    </form>
+  </core-modal>
+
+</template>
+
+
+<script>
+
+  import UiAlert from 'keen-ui/src/UiAlert';
+  import coreModal from 'kolibri.coreVue.components.coreModal';
+  import kButton from 'kolibri.coreVue.components.kButton';
+  import kTextbox from 'kolibri.coreVue.components.kTextbox';
+  import { getRemoteChannelByToken } from '../../state/actions/availableChannelsActions';
+
+  export default {
+    name: 'channelTokenModal',
+    components: {
+      UiAlert,
+      coreModal,
+      kButton,
+      kTextbox,
+    },
+    data() {
+      return {
+        formIsDisabled: false,
+        formIsSubmitted: false,
+        token: '',
+        tokenIsBlurred: false,
+        tokenLookupFailed: false,
+        tokenNetworkError: false,
+      };
+    },
+    computed: {
+      tokenIsValid() {
+        if (this.formIsSubmitted || this.tokenIsBlurred) {
+          return !this.tokenLookupFailed && this.token !== '';
+        }
+        return true;
+      },
+    },
+    methods: {
+      submitForm() {
+        this.tokenLookupFailed = false;
+        this.formIsSubmitted = true;
+        if (this.tokenIsValid) {
+          this.formIsDisabled = true;
+          return this.lookupToken(this.token)
+            .then(([channel]) => {
+              this.$emit('channelfound', channel);
+            })
+            .catch(error => {
+              if (error.status.code === 404) {
+                this.tokenLookupFailed = true;
+              } else {
+                this.tokenNetworkError = true;
+              }
+            })
+            .then(() => {
+              this.formIsDisabled = false;
+            });
+        }
+        return Promise.resolve();
+      },
+      lookupToken(token) {
+        return getRemoteChannelByToken(token);
+      },
+    },
+    $trs: {
+      cancel: 'Cancel',
+      channelTokenLabel: 'Channel token',
+      confirm: 'Confirm',
+      enterChannelToken: 'Enter channel token',
+      invalidTokenMessage: 'Check whether you entered token correctly',
+      networkErrorMessage: 'Unable to connect to token',
+      tokenExplanation: 'Channel tokens unlock unlisted channels from Kolibri Studio',
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  .buttons
+    text-align: right
+
+  .submit
+    margin-right: 0
+
+</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/available-channels-page/index.vue b/kolibri/plugins/management/assets/src/device_management/views/available-channels-page/index.vue
new file mode 100644
index 00000000000..4e0b4f015f5
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/available-channels-page/index.vue
@@ -0,0 +1,284 @@
+<template>
+
+  <immersive-full-screen
+    :backPageText="backText"
+    :backPageLink="goBackLink"
+  >
+    <subpage-container withSideMargin>
+      <div
+        v-if="channelsAreAvailable"
+        class="top-matter"
+      >
+        <div class="channels dib">
+          <h1>{{ channelsTitle }}</h1>
+          <p>{{ $tr('channelsAvailable', { channels: numberOfAvailableChannels }) }}</p>
+        </div>
+        <div class="filters dib">
+          <ui-select
+            :options="languageFilterOptions"
+            v-model="languageFilter"
+            :label="$tr('languageFilterLabel')"
+            class="language-filter dib"
+          />
+          <k-filter-textbox
+            :placeholder="$tr('titleFilterPlaceholder')"
+            v-model="titleFilter"
+            class="title-filter"
+          />
+        </div>
+      </div>
+
+      <ui-progress-linear
+        v-if="channelsAreLoading"
+        type="indefinite"
+        color="primary"
+      />
+
+      <!-- Similar code in channels-grid -->
+      <div v-if="channelsAreAvailable">
+        <div class="channel-list-header">
+          {{ $tr('channelHeader') }}
+        </div>
+
+        <div class="channels-list">
+          <channel-list-item
+            v-for="channel in availableChannels"
+            v-show="showChannel(channel)"
+            :channel="channel"
+            :key="channel.id"
+            :onDevice="channelIsOnDevice(channel)"
+            @clickselect="goToChannel(channel)"
+            class="channel-list-item"
+            :mode="channelListItemMode"
+          />
+        </div>
+      </div>
+
+      <section
+        class="unlisted-channels"
+        v-if="showUnlistedChannels"
+      >
+        <channel-token-modal
+          v-if="showTokenModal"
+          @closemodal="showTokenModal=false"
+          @channelfound="goToChannel"
+        />
+        <span>{{ $tr('channelNotListedExplanation') }}&nbsp;</span>
+
+        <k-button
+          :text="$tr('channelTokenButtonLabel')"
+          appearance="basic-link"
+          name="showtokenmodal"
+          @click="showTokenModal=true"
+        />
+      </section>
+    </subpage-container>
+  </immersive-full-screen>
+
+</template>
+
+
+<script>
+
+  import UiProgressLinear from 'keen-ui/src/UiProgressLinear';
+  import UiSelect from 'keen-ui/src/UiSelect';
+  import channelListItem from '../manage-content-page/channel-list-item';
+  import immersiveFullScreen from 'kolibri.coreVue.components.immersiveFullScreen';
+  import kFilterTextbox from 'kolibri.coreVue.components.kFilterTextbox';
+  import kButton from 'kolibri.coreVue.components.kButton';
+  import channelTokenModal from '../available-channels-page/channel-token-modal';
+  import subpageContainer from '../containers/subpage-container';
+  import uniqBy from 'lodash/uniqBy';
+  import { installedChannelList, wizardState } from '../../state/getters';
+  import { transitionWizardPage } from '../../state/actions/contentWizardActions';
+  import { TransferTypes } from '../../constants';
+
+  const ALL_FILTER = 'ALL';
+
+  export default {
+    name: 'availableChannelsPage',
+    components: {
+      channelListItem,
+      channelTokenModal,
+      immersiveFullScreen,
+      kButton,
+      kFilterTextbox,
+      subpageContainer,
+      UiProgressLinear,
+      UiSelect,
+    },
+    data() {
+      return {
+        // Initialized with this filter, but localized label is added after mount
+        languageFilter: { value: 'ALL' },
+        titleFilter: '',
+        showTokenModal: false,
+      };
+    },
+    computed: {
+      channelListItemMode() {
+        if (this.transferType === TransferTypes.LOCALEXPORT) {
+          return 'EXPORT';
+        }
+        return 'IMPORT';
+      },
+      channelsAreLoading() {
+        return this.wizardStatus === 'LOADING_CHANNELS_FROM_KOLIBRI_STUDIO';
+      },
+      backText() {
+        switch (this.transferType) {
+          case TransferTypes.LOCALEXPORT:
+            return this.$tr('exportToDisk', { driveName: this.selectedDrive.name });
+          case TransferTypes.LOCALIMPORT:
+            return this.$tr('importFromDisk', { driveName: this.selectedDrive.name });
+          default:
+            return this.$tr('kolibriCentralServer');
+        }
+      },
+      channelsTitle() {
+        switch (this.transferType) {
+          case TransferTypes.LOCALEXPORT:
+            return this.$tr('yourChannels');
+          case TransferTypes.LOCALIMPORT:
+            return this.selectedDrive.name;
+          default:
+            return this.$tr('channels');
+        }
+      },
+      languageFilterOptions() {
+        const codes = uniqBy(this.availableChannels, 'language')
+          .map(({ language, language_code }) => ({
+            value: language_code,
+            label: language,
+          }))
+          .filter(x => x.value);
+        return [this.allLanguagesOption, ...codes];
+      },
+      numberOfAvailableChannels() {
+        if (this.transferType === TransferTypes.LOCALEXPORT) {
+          return this.availableChannels.filter(this.channelIsOnDevice).length;
+        }
+        return this.availableChannels.length;
+      },
+      channelsAreAvailable() {
+        return !this.channelsAreLoading && this.availableChannels.length > 0;
+      },
+      showUnlistedChannels() {
+        return this.channelsAreAvailable && this.transferType === TransferTypes.REMOTEIMPORT;
+      },
+      goBackLink() {
+        return {
+          name: 'wizardtransition',
+          params: {
+            transition: 'cancel',
+          },
+        };
+      },
+      allLanguagesOption() {
+        return {
+          label: this.$tr('allLanguages'),
+          value: ALL_FILTER,
+        };
+      },
+    },
+    mounted() {
+      this.languageFilter = { ...this.allLanguagesOption };
+    },
+    methods: {
+      channelIsOnDevice(channel) {
+        const match = this.installedChannelList.find(({ id }) => id === channel.id);
+        return match && match.on_device_resources > 0;
+      },
+      goToChannel(channel) {
+        this.transitionWizardPage('forward', { channel });
+      },
+      showChannel(channel) {
+        let languageMatches = true;
+        let titleMatches = true;
+        let isOnDevice = true;
+        if (this.transferType === TransferTypes.LOCALEXPORT) {
+          isOnDevice = this.channelIsOnDevice(channel);
+        }
+        if (this.languageFilter.value !== ALL_FILTER) {
+          languageMatches = channel.language_code === this.languageFilter.value;
+        }
+        if (this.titleFilter) {
+          // Similar code in userSearchUtils
+          const tokens = this.titleFilter.split(/\s+/).map(val => val.toLowerCase());
+          titleMatches = tokens.every(token => channel.name.toLowerCase().includes(token));
+        }
+        return languageMatches && titleMatches && isOnDevice;
+      },
+    },
+    vuex: {
+      getters: {
+        // TODO do correct filtering for LOCALEXPORT. Possible that languages and
+        // other things might still leak out from unavailable channels.
+        availableChannels: state => wizardState(state).availableChannels,
+        selectedDrive: state => wizardState(state).selectedDrive,
+        installedChannelList,
+        transferType: state => wizardState(state).transferType,
+        wizardStatus: state => wizardState(state).status,
+      },
+      actions: {
+        transitionWizardPage,
+      },
+    },
+    $trs: {
+      allLanguages: 'All Languages',
+      channelsAvailable:
+        '{channels, number, integer} {channels, plural, one {channel} other {channels} } available',
+      channelHeader: 'Channel',
+      channels: 'Channels',
+      exportToDisk: 'Export to {driveName}',
+      importFromDisk: 'Import from {driveName}',
+      kolibriCentralServer: 'Kolibri Central Server',
+      languageFilterLabel: 'Language:',
+      titleFilterPlaceholder: 'Search for a channel…',
+      yourChannels: 'Your channels',
+      channelTokenButtonLabel: 'Try adding a token',
+      channelNotListedExplanation: "Don't see your channel listed?",
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  @require '~kolibri.styles.definitions'
+
+  .channel-list-header
+    font-size: 14px
+    padding: 16px 0
+    color: $core-text-annotation
+
+  .channel-list-item:first-of-type
+    border-top: 1px solid $core-grey
+
+  .dib
+    display: inline-block
+
+  .top-matter
+    margin-bottom: 32px
+
+  .channels
+    width: 30%
+
+  .filters
+    width: 70%
+    vertical-align: top
+    margin: 16px 0
+
+  .language-filter
+    width: 45%
+
+  .title-filter
+    width: 50%
+    float: right
+    margin-top: 10px
+
+  .unlisted-channels
+    padding: 16px 0
+
+</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/channel-list-item.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/channel-list-item.vue
index 4b57e093f7a..5a123970e22 100644
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/channel-list-item.vue
+++ b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/channel-list-item.vue
@@ -3,9 +3,18 @@
   <div class="channel-list-item">
 
     <div class="thumbnail dtc">
-      <img v-if="thumbnailImg" :src="thumbnailImg">
-      <div v-else class="default-icon">
-        <mat-svg category="navigation" name="apps" />
+      <img
+        v-if="thumbnailImg"
+        :src="thumbnailImg"
+      >
+      <div
+        v-else
+        class="default-icon"
+      >
+        <mat-svg
+          category="navigation"
+          name="apps"
+        />
       </div>
     </div>
 
@@ -13,19 +22,28 @@
 
       <div class="details-top">
         <div class="other-details">
-          <div v-if="inImportingMode && onDevice" class="on-device">
-            <mat-svg category="action" name="check_circle" />
-            {{ $tr('onYourDevice') }}
+          <div
+            v-if="inImportMode && onDevice"
+            class="on-device"
+          >
+            <mat-svg
+              category="action"
+              name="check_circle"
+            />
+            <span>{{ $tr('onYourDevice') }}</span>
           </div>
-          <div v-if="inManagingMode" class="resources-size">
-            {{ resourcesSizeText }}
+          <div
+            v-if="inExportMode || inManageMode"
+            class="resources-size"
+          >
+            <span>{{ resourcesSizeText }}</span>
           </div>
         </div>
         <div class="title">
           {{ channel.name }}
         </div>
         <div class="version">
-          {{ $tr('version', { version: channel.version }) }}
+          {{ $tr('version', { version: versionNumber }) }}
         </div>
       </div>
 
@@ -39,13 +57,15 @@
 
     <div class="buttons dtc">
       <k-button
-        v-if="inImportingMode"
+        v-if="inImportMode || inExportMode"
         @click="$emit('clickselect')"
         name="select"
         :text="$tr('selectButton')"
+        primary
+        :disabled="tasksInQueue"
       />
       <k-button
-        v-if="inManagingMode"
+        v-if="inManageMode"
         @click="$emit('clickdelete')"
         name="delete"
         :text="$tr('deleteButton')"
@@ -60,10 +80,14 @@
 <script>
 
   import bytesForHumans from './bytesForHumans';
+  import { channelIsInstalled } from '../../state/getters';
   import kButton from 'kolibri.coreVue.components.kButton';
 
-  const IMPORTING = 'importing';
-  const MANAGING = 'managing';
+  const Modes = {
+    IMPORT: 'IMPORT',
+    EXPORT: 'EXPORT',
+    MANAGE: 'MANAGE',
+  };
 
   export default {
     name: 'channelListItem',
@@ -76,7 +100,7 @@
         required: true,
       },
       mode: {
-        type: String,
+        type: String, // 'IMPORT' | 'EXPORT' | 'MANAGE'
         required: true,
       },
       onDevice: {
@@ -85,11 +109,14 @@
       },
     },
     computed: {
-      inImportingMode() {
-        return this.mode === IMPORTING;
+      inImportMode() {
+        return this.mode === Modes.IMPORT;
       },
-      inManagingMode() {
-        return this.mode === MANAGING;
+      inExportMode() {
+        return this.mode === Modes.EXPORT;
+      },
+      inManageMode() {
+        return this.mode === Modes.MANAGE;
       },
       resourcesSizeText() {
         return this.$tr('resourcesSize', { size: bytesForHumans(this.channel.total_file_size) });
@@ -101,10 +128,18 @@
         const { taskList = [] } = this.pageState;
         return taskList.length > 0;
       },
+      versionNumber() {
+        const installed = this.channelIsInstalled(this.channel.id);
+        if (installed) {
+          return installed.version;
+        }
+        return this.channel.version;
+      },
     },
     vuex: {
       getters: {
         pageState: ({ pageState }) => pageState,
+        channelIsInstalled,
       },
     },
     $trs: {
@@ -131,6 +166,8 @@
   .channel-list-item
     display: table
     vertical-align: middle
+    padding: 2em 0
+    border-bottom: 1px solid $core-grey
 
   .title
     font-size: 1.2em
@@ -142,6 +179,7 @@
     color: $core-text-annotation
 
   .description
+    width: 66%
     padding: 1em 0
 
   .thumbnail
@@ -167,6 +205,14 @@
     float: right
     line-height: 1.7em
 
+  .on-device
+    line-height: 1.7em
+    svg
+      fill: $core-status-correct
+    span
+      margin-left: 10px
+      vertical-align: top
+
   .buttons
     width: 10%
     text-align: right
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/channels-grid.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/channels-grid.vue
index 9d067657260..234a58907e6 100644
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/channels-grid.vue
+++ b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/channels-grid.vue
@@ -14,13 +14,15 @@
         </div>
 
         <div class="channel-list">
-          <div class="channel-item-wrapper" v-for="channel in sortedChannels" :key="channel.id">
-            <channel-list-item
-              :channel="channel"
-              mode="managing"
-              @clickdelete="selectedChannelId=channel.id"
-            />
-          </div>
+          <channel-list-item
+            class="channel-list-item"
+            v-for="channel in sortedChannels"
+            v-show="channel.on_device_resources > 0"
+            :key="channel.id"
+            :channel="channel"
+            mode="MANAGE"
+            @clickdelete="selectedChannelId=channel.id"
+          />
         </div>
       </div>
 
@@ -113,10 +115,7 @@
     padding: 1em 0
     color: $core-text-annotation
 
-  .channel-item-wrapper
-    padding: 2em 0
-    border-bottom: 1px solid $core-grey
-    &:first-of-type
-      border-top: 1px solid $core-grey
+  .channel-list-item:first-of-type
+    border-top: 1px solid $core-grey
 
 </style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/index.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/index.vue
index 0e633809bc9..c82c10b5c8c 100644
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/index.vue
+++ b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/index.vue
@@ -1,9 +1,11 @@
 <template>
 
   <div>
-
     <template v-if="canManageContent">
-      <component v-if="pageState.wizardState.shown" :is="wizardComponent" />
+      <component
+        v-if="wizardPageName!==''"
+        :is="wizardComponent"
+      />
 
       <subpage-container>
         <task-progress
@@ -16,7 +18,10 @@
           <h1 class="page-title">
             {{ $tr('title') }}
           </h1>
-          <div class="buttons" v-if="!tasksInQueue">
+          <div
+            class="buttons"
+            v-if="!tasksInQueue"
+          >
             <k-button
               :text="$tr('import')"
               class="button"
@@ -38,7 +43,10 @@
       </subpage-container>
     </template>
 
-    <auth-message v-else :details="$tr('noAccessDetails')" />
+    <auth-message
+      v-else
+      :details="$tr('noAccessDetails')"
+    />
 
   </div>
 
@@ -48,28 +56,25 @@
 <script>
 
   import { canManageContent } from 'kolibri.coreVue.vuex.getters';
-  import { pollTasks, cancelTask } from '../../state/actions/taskActions';
-  import { startImportWizard, startExportWizard } from '../../state/actions/contentWizardActions';
+  import { refreshTaskList, cancelTask } from '../../state/actions/taskActions';
+  import { transitionWizardPage } from '../../state/actions/contentWizardActions';
   import { ContentWizardPages } from '../../constants';
   import authMessage from 'kolibri.coreVue.components.authMessage';
   import channelsGrid from './channels-grid';
   import kButton from 'kolibri.coreVue.components.kButton';
-  import wizardImportSource from './wizards/wizard-import-source';
-  import wizardImportNetwork from './wizards/wizard-import-network';
-  import wizardImportLocal from './wizards/wizard-import-local';
-  import wizardExport from './wizards/wizard-export';
-  import importPreview from './wizards/import-preview';
+  import availableChannelsPage from '../available-channels-page';
+  import selectImportSource from './wizards/select-import-source-modal';
   import subpageContainer from '../containers/subpage-container';
   import taskProgress from './task-progress';
+  import selectDriveModal from './wizards/select-drive-modal';
+  import selectContentPage from '../select-content-page';
   import { refreshChannelList } from '../../state/actions/manageContentActions';
 
   const pageNameComponentMap = {
-    [ContentWizardPages.CHOOSE_IMPORT_SOURCE]: 'wizard-import-source',
-    [ContentWizardPages.IMPORT_NETWORK]: 'wizard-import-network',
-    [ContentWizardPages.IMPORT_LOCAL]: 'wizard-import-local',
-    [ContentWizardPages.EXPORT]: 'wizard-export',
-    [ContentWizardPages.LOCAL_IMPORT_PREVIEW]: 'import-preview',
-    [ContentWizardPages.REMOTE_IMPORT_PREVIEW]: 'import-preview',
+    [ContentWizardPages.SELECT_IMPORT_SOURCE]: 'selectImportSource',
+    [ContentWizardPages.SELECT_DRIVE]: 'selectDriveModal',
+    [ContentWizardPages.AVAILABLE_CHANNELS]: 'availableChannelsPage',
+    [ContentWizardPages.SELECT_CONTENT]: 'selectContentPage',
   };
 
   const POLL_DELAY = 1000;
@@ -85,15 +90,14 @@
     },
     components: {
       authMessage,
+      availableChannelsPage,
       channelsGrid,
       kButton,
-      importPreview,
+      selectDriveModal,
+      selectContentPage,
       subpageContainer,
       taskProgress,
-      wizardImportSource,
-      wizardImportNetwork,
-      wizardImportLocal,
-      wizardExport,
+      selectImportSource,
     },
     data: () => ({
       intervalId: undefined,
@@ -101,7 +105,7 @@
     }),
     computed: {
       wizardComponent() {
-        return pageNameComponentMap[this.pageState.wizardState.page];
+        return pageNameComponentMap[this.wizardPageName];
       },
     },
     watch: {
@@ -115,7 +119,7 @@
     },
     mounted() {
       if (this.canManageContent) {
-        this.intervalId = setInterval(this.pollTasks, POLL_DELAY);
+        this.intervalId = setInterval(this.refreshTaskList, POLL_DELAY);
       }
     },
     destroyed() {
@@ -124,9 +128,9 @@
     methods: {
       openWizard(action) {
         if (action === 'import') {
-          return this.startImportWizard();
+          return this.transitionWizardPage('forward', { import: true });
         }
-        return this.startExportWizard();
+        return this.transitionWizardPage('forward', { import: false });
       },
       clearFirstTask(unblockCb) {
         this.cancelTask(this.firstTask.id)
@@ -140,6 +144,7 @@
     vuex: {
       getters: {
         canManageContent,
+        wizardPageName: ({ pageState }) => pageState.wizardState.pageName,
         pageState: ({ pageState }) => pageState,
         firstTask: ({ pageState }) => pageState.taskList[0],
         tasksInQueue: ({ pageState }) => pageState.taskList.length > 0,
@@ -147,10 +152,9 @@
       },
       actions: {
         cancelTask,
-        pollTasks,
+        refreshTaskList,
         refreshChannelList,
-        startExportWizard,
-        startImportWizard,
+        transitionWizardPage,
       },
     },
   };
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/task-progress.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/task-progress.vue
index c786cf9f81f..319e42d425a 100644
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/task-progress.vue
+++ b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/task-progress.vue
@@ -88,6 +88,14 @@
     computed: {
       TaskStatuses: () => TaskStatuses,
       stageText() {
+        // Special case for Channel DB downloading, since they never go into RUNNING
+        if (this.type === 'UPDATING_CHANNEL') {
+          return this.$tr('updatingChannel');
+        }
+        if (this.type === 'DOWNLOADING_CHANNEL_CONTENTS') {
+          return this.$tr('downloadingChannelContents');
+        }
+
         if (this.status === TaskStatuses.RUNNING) {
           switch (this.type) {
             case TaskTypes.REMOTE_IMPORT:
@@ -162,6 +170,8 @@
       taskHasFailed: 'Transfer failed. Please try again.',
       deleteTaskHasFailed: 'Attempt to delete channel failed. Please try again.',
       deletingChannel: 'Deleting channel…',
+      downloadingChannelContents: 'Downoading channel contents…',
+      updatingChannel: 'Updating channel…',
     },
   };
 
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/drive-list.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/drive-list.vue
index ce7e7bd4d18..50e90079ee1 100644
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/drive-list.vue
+++ b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/drive-list.vue
@@ -2,29 +2,23 @@
 
   <div class="drive-list">
     <div v-if="drives.length === 0">
-      <h2 class="core-text-alert">
-        <mat-svg class="error-svg" category="alert" name="error_outline" />
-        {{ $tr('noDrivesDetected') }}
-      </h2>
+      <ui-alert
+        type="info"
+        :dismissible="false"
+      >
+        {{ noDrivesText }}
+      </ui-alert>
     </div>
 
     <div v-else>
       <h2>{{ $tr('drivesFound') }}</h2>
       <k-radio-button
-        v-for="drive in enabledDrives"
+        v-for="drive in drives"
         :key="drive.id"
         :label="enabledDriveLabel(drive)"
         :radiovalue="drive.id"
-        v-model="selectedDrive"
-        @change="$emit('change', drive.id)"
-      />
-      <k-radio-button
-        v-for="drive in disabledDrives"
-        :key="drive.id"
-        :label="disabledDriveLabel(drive)"
-        :radiovalue="drive.id"
-        :disabled="true"
-        v-model="selectedDrive"
+        :value="value"
+        @change="$emit('input', drive.id)"
       />
     </div>
   </div>
@@ -35,25 +29,24 @@
 <script>
 
   import kRadioButton from 'kolibri.coreVue.components.kRadioButton';
+  import UiAlert from 'keen-ui/src/UiAlert';
 
   export default {
     name: 'wizardDriveList',
-    components: { kRadioButton },
+    components: {
+      kRadioButton,
+      UiAlert,
+    },
     props: {
-      value: {
-        type: String,
-        required: true,
-      },
       drives: {
         type: Array,
         required: true,
       },
-      enabledDrivePred: {
-        type: Function,
+      mode: {
+        type: String,
         required: true,
       },
-      enabledMsg: { type: Function },
-      disabledMsg: {
+      value: {
         type: String,
         required: true,
       },
@@ -64,11 +57,11 @@
       };
     },
     computed: {
-      enabledDrives() {
-        return this.drives.filter(drive => this.enabledDrivePred(drive));
-      },
-      disabledDrives() {
-        return this.drives.filter(drive => !this.enabledDrivePred(drive));
+      noDrivesText() {
+        if (this.mode === 'IMPORT') {
+          return this.$tr('noImportableDrives');
+        }
+        return this.$tr('noExportableDrives');
       },
     },
     mounted() {
@@ -88,7 +81,8 @@
     },
     $trs: {
       drivesFound: 'Drives found',
-      noDrivesDetected: 'No drives were detected',
+      noImportableDrives: 'No drives with Kolibri content are connected to the server',
+      noExportableDrives: 'No drives that can be written to are connected to the server',
     },
   };
 
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/import-preview.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/import-preview.vue
deleted file mode 100644
index 8ee21777746..00000000000
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/import-preview.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-
-  <core-modal
-    :title="modalTitle"
-    :enableBgClickCancel="false"
-    @cancel="cancel"
-    @enter="submit"
-    :enableBackBtn="true"
-    @back="goBack"
-  >
-    <div>
-
-      <!-- LOCAL IMPORT PREVIEW -->
-      <div v-if="importSource === 'local'">
-        <p>{{ localImportPrompt }}</p>
-
-        <ul class="channel-list">
-          <li v-for="(channel, i) in channelList" :key="i">
-            {{ channel.name }}
-            <span v-if="coreChannel(channel.id)" class="already-installed">
-              ({{ $tr('channelAlreadyInstalled') }})
-            </span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- REMOTE IMPORT PREVIEW -->
-      <div v-if="importSource === 'remote'">
-        <p>{{ $tr('remoteImportPrompt') }}</p>
-
-        <p v-if="coreChannel(sourceMeta.channelId)">
-          {{ coreChannel(sourceMeta.channelId).title }}
-          <span class="already-installed">
-            ({{ $tr('channelAlreadyInstalled') }})
-          </span>
-        </p>
-        <p v-else>
-          {{ sourceMeta.channelId }}
-        </p>
-      </div>
-
-      <ui-alert type="error" v-show="error" :dismissible="false">
-        {{ error }}
-      </ui-alert>
-
-      <div class="button-wrapper">
-        <k-button
-          @click="cancel"
-          :text="$tr('cancelButtonLabel')"
-          :disabled="wizardBusy"
-        />
-        <k-button
-          v-show="!error"
-          :text="$tr('confirmButtonLabel')"
-          @click="submit"
-          :primary="true"
-          :disabled="wizardBusy"
-        />
-      </div>
-    </div>
-
-  </core-modal>
-
-</template>
-
-
-<script>
-
-  import coreModal from 'kolibri.coreVue.components.coreModal';
-  import kButton from 'kolibri.coreVue.components.kButton';
-  import uiAlert from 'kolibri.coreVue.components.uiAlert';
-  import { transitionWizardPage } from '../../../state/actions/contentWizardActions';
-  import find from 'lodash/find';
-
-  export default {
-    name: 'previewImportWizard',
-    components: {
-      coreModal,
-      kButton,
-      uiAlert,
-    },
-    computed: {
-      modalTitle() {
-        if (this.importSource === 'local') {
-          return this.$tr('localImportTitle');
-        } else {
-          return this.$tr('remoteImportTitle');
-        }
-      },
-      localImportPrompt() {
-        return this.$tr('localImportPrompt', {
-          numChannels: this.channelList.length,
-          driveName: this.sourceMeta.driveName,
-        });
-      },
-      importSource() {
-        if (this.sourceMeta.driveId !== undefined) {
-          return 'local';
-        }
-        return 'remote';
-      },
-      channelList() {
-        return this.sourceMeta.channelList;
-      },
-      sourceId() {
-        if (this.importSource === 'local') {
-          return this.sourceMeta.driveId;
-        } else {
-          return this.sourceMeta.channelId;
-        }
-      },
-    },
-    methods: {
-      cancel() {
-        this.transitionWizardPage('cancel');
-      },
-      goBack() {
-        this.transitionWizardPage('backward');
-      },
-      submit() {
-        return this.transitionWizardPage('forward', { sourceId: this.sourceId });
-      },
-    },
-    vuex: {
-      getters: {
-        error: state => state.pageState.wizardState.error,
-        sourceMeta: state => state.pageState.wizardState.meta,
-        coreChannel: state => channelId => {
-          return find(state.pageState.channelList, { id: channelId });
-        },
-        wizardBusy: ({ pageState }) => pageState.wizardState.busy,
-      },
-      actions: {
-        transitionWizardPage,
-      },
-    },
-    $trs: {
-      cancelButtonLabel: 'Cancel',
-      channelAlreadyInstalled: 'Already installed',
-      confirmButtonLabel: 'Import',
-      localImportPrompt:
-        'You are about to import {numChannels, number} {numChannels, plural, one {channel} other {channels}} on {driveName}',
-      localImportTitle: 'Import from local drive',
-      remoteImportPrompt: 'You are about to import 1 channel',
-      remoteImportTitle: 'Import from internet',
-    },
-  };
-
-</script>
-
-
-<style lang="stylus" scoped>
-
-  .button-wrapper
-    margin: 1em 0
-    text-align: center
-
-  .channel-list
-    list-style: none
-    padding-left: 0
-
-  .channel-list li
-    margin: 1rem 0
-
-  .already-installed
-    font-weight: bold
-
-  .error
-    color: red
-
-</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/select-drive-modal.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/select-drive-modal.vue
new file mode 100644
index 00000000000..20b069c9bb1
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/select-drive-modal.vue
@@ -0,0 +1,155 @@
+<template>
+
+  <core-modal
+    :title="title"
+    :enableBgClickCancel="false"
+    hideTopButtons
+  >
+    <transition mode="out-in">
+      <ui-alert
+        v-if="driveStatus==='LOADING'"
+        type="info"
+        :dismissible="false"
+      >
+        <span class="finding-local-drives">
+          {{ $tr('findingLocalDrives') }}
+        </span>
+      </ui-alert>
+
+      <ui-alert
+        v-else-if="driveStatus==='ERROR'"
+        type="error"
+        :dismissible="false"
+      >
+        {{ $tr('problemFindingLocalDrives') }}
+      </ui-alert>
+
+    </transition>
+
+    <drive-list
+      v-if="driveStatus===''"
+      v-model="selectedDriveId"
+      :drives="enabledDrives"
+      :mode="inImportMode ? 'IMPORT' : 'EXPORT'"
+    />
+
+    <div class="buttons">
+      <k-button
+        :text="$tr('cancel')"
+        @click="cancel"
+        appearance="flat-button"
+      />
+      <k-button
+        class="forward-button"
+        :text="$tr('continue')"
+        @click="goForward"
+        :disabled="continueIsDisabled"
+        :primary="true"
+      />
+    </div>
+  </core-modal>
+
+</template>
+
+
+<script>
+
+  import coreModal from 'kolibri.coreVue.components.coreModal';
+  import kButton from 'kolibri.coreVue.components.kButton';
+  import UiAlert from 'keen-ui/src/UiAlert';
+  import driveList from './drive-list';
+  import { refreshDriveList } from '../../../state/actions/taskActions';
+  import { transitionWizardPage } from '../../../state/actions/contentWizardActions';
+  import { wizardState } from '../../../state/getters';
+  import { TransferTypes } from '../../../constants';
+
+  export default {
+    name: 'selectDriveModal',
+    components: {
+      coreModal,
+      driveList,
+      kButton,
+      UiAlert,
+    },
+    data() {
+      return {
+        driveStatus: '',
+        selectedDriveId: '',
+        showError: false,
+      };
+    },
+    computed: {
+      inImportMode() {
+        return this.transferType === TransferTypes.LOCALIMPORT;
+      },
+      continueIsDisabled() {
+        return this.selectedDriveId === '';
+      },
+      title() {
+        if (this.inImportMode) {
+          return this.$tr('selectDrive');
+        }
+        return this.$tr('selectExportDestination');
+      },
+      enabledDrives() {
+        return this.driveList.filter(this.driveIsEnabled);
+      },
+    },
+    mounted() {
+      this.driveStatus = 'LOADING';
+      this.refreshDriveList()
+        .catch(() => {
+          this.driveStatus = 'ERROR';
+        })
+        .then(() => {
+          this.driveStatus = '';
+        });
+    },
+    methods: {
+      driveIsEnabled(drive) {
+        if (this.inImportMode) {
+          return drive.metadata.channels.length > 0;
+        }
+        return drive.writable;
+      },
+      goForward() {
+        this.transitionWizardPage('forward', {
+          driveId: this.selectedDriveId,
+        });
+      },
+      cancel() {
+        this.transitionWizardPage('cancel');
+      },
+    },
+    vuex: {
+      getters: {
+        driveList: state => wizardState(state).driveList,
+        transferType: state => wizardState(state).transferType,
+      },
+      actions: {
+        transitionWizardPage,
+        refreshDriveList,
+      },
+    },
+    $trs: {
+      cancel: 'Cancel',
+      continue: 'Continue',
+      findingLocalDrives: 'Finding local drives…',
+      problemFindingLocalDrives: 'There was a problem finding local drives.',
+      selectDrive: 'Select a drive',
+      selectExportDestination: 'Select an export destination',
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  .buttons
+    text-align: right
+
+  .forward-button
+    margin-right: 0
+
+</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/select-import-source-modal.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/select-import-source-modal.vue
new file mode 100644
index 00000000000..e50f05b55d4
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/select-import-source-modal.vue
@@ -0,0 +1,92 @@
+<template>
+
+  <core-modal
+    :title="$tr('title')"
+    hideTopButtons
+  >
+    <div class="options">
+      <k-radio-button
+        :label="$tr('network')"
+        v-model="source"
+        radiovalue="network"
+        autofocus
+      />
+      <k-radio-button
+        :label="$tr('localDrives')"
+        v-model="source"
+        radiovalue="local"
+      />
+    </div>
+
+    <div class="buttons">
+      <k-button
+        @click="cancel"
+        appearance="flat-button"
+        :text="$tr('cancel')"
+      />
+      <k-button
+        @click="goForward"
+        primary
+        :text="$tr('continue')"
+      />
+    </div>
+  </core-modal>
+
+</template>
+
+
+<script>
+
+  import coreModal from 'kolibri.coreVue.components.coreModal';
+  import kRadioButton from 'kolibri.coreVue.components.kRadioButton';
+  import kButton from 'kolibri.coreVue.components.kButton';
+  import { transitionWizardPage } from '../../../state/actions/contentWizardActions';
+
+  export default {
+    name: 'selectImportSourceModal',
+    components: {
+      coreModal,
+      kButton,
+      kRadioButton,
+    },
+    data() {
+      return {
+        source: 'network',
+      };
+    },
+    $trs: {
+      cancel: 'Cancel',
+      continue: 'Continue',
+      network: 'Kolibri Central Server',
+      localDrives: 'Attached drive or memory card',
+      title: 'Import from where?',
+    },
+    methods: {
+      goForward() {
+        return this.transitionWizardPage('forward', { source: this.source });
+      },
+      cancel() {
+        return this.transitionWizardPage('cancel');
+      },
+    },
+    vuex: {
+      actions: {
+        transitionWizardPage,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  .options
+    margin: 2em 0
+
+  .buttons
+    text-align: right
+    button:nth-child(2)
+      margin-right: 0
+
+</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-export.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-export.vue
deleted file mode 100644
index 930382a63ce..00000000000
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-export.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-
-  <core-modal
-    :title="$tr('title')"
-    :error="wizardState.error ? true : false"
-    :enableBgClickCancel="false"
-    @cancel="cancel"
-    @enter="submit"
-  >
-    <div class="main">
-      <template v-if="!drivesLoading">
-        <div class="modal-message">
-          <p>
-            {{ $tr('exportPrompt', { numChannels: channelList.length, exportSize }) }}
-          </p>
-          <drive-list
-            :value="selectedDrive"
-            :drives="wizardState.driveList"
-            :enabledDrivePred="driveIsEnabled"
-            :disabledMsg="$tr('notWritable')"
-            :enabledMsg="formatEnabledMsg"
-            @change="(driveId) => selectedDrive = driveId"
-          />
-        </div>
-        <div class="refresh-btn-wrapper">
-          <k-button @click="updateWizardLocalDriveList" :disabled="wizardState.busy" :text="$tr('refresh')" />
-        </div>
-      </template>
-      <loading-spinner v-else :delay="500" class="spinner" />
-    </div>
-    <div class="core-text-alert">
-      {{ wizardState.error }}
-    </div>
-    <div class="button-wrapper">
-      <k-button
-        @click="cancel"
-        appearance="flat-button"
-        :text="$tr('cancel')" />
-      <k-button
-        :text="$tr('export')"
-        @click="submit"
-        :disabled="!canSubmit"
-        :primary="true" />
-    </div>
-  </core-modal>
-
-</template>
-
-
-<script>
-
-  import {
-    transitionWizardPage,
-    updateWizardLocalDriveList,
-  } from '../../../state/actions/contentWizardActions';
-  import bytesForHumans from '../bytesForHumans';
-  import coreModal from 'kolibri.coreVue.components.coreModal';
-  import kButton from 'kolibri.coreVue.components.kButton';
-  import loadingSpinner from 'kolibri.coreVue.components.loadingSpinner';
-  import driveList from './drive-list';
-  import sumBy from 'lodash/sumBy';
-
-  export default {
-    name: 'wizardExport',
-    $trs: {
-      available: 'available',
-      cancel: 'Cancel',
-      export: 'Export',
-      exportPrompt:
-        'You are about to export {numChannels, number} {numChannels, plural, one {channel} other {channels}} ({exportSize})',
-      notWritable: 'Not writable',
-      refresh: 'Refresh',
-      title: 'Export to where?',
-      waitForTotalSize: 'Calculating size...',
-    },
-    components: {
-      coreModal,
-      kButton,
-      loadingSpinner,
-      driveList,
-    },
-    data: () => ({ selectedDrive: '' }),
-    computed: {
-      drivesLoading() {
-        return this.wizardState.driveList === null;
-      },
-      canSubmit() {
-        return !this.drivesLoading && !this.wizardState.busy && this.selectedDrive !== '';
-      },
-      exportSize() {
-        return bytesForHumans(sumBy(this.channelList, 'total_file_size'));
-      },
-    },
-    methods: {
-      formatEnabledMsg(drive) {
-        return `${bytesForHumans(drive.freespace)} ${this.$tr('available')}`;
-      },
-      driveIsEnabled(drive) {
-        return drive.writable;
-      },
-      submit() {
-        if (this.canSubmit) {
-          this.transitionWizardPage('forward', { driveId: this.selectedDrive });
-        }
-      },
-      cancel() {
-        if (!this.wizardState.busy) {
-          this.transitionWizardPage('cancel');
-        }
-      },
-      selectDriveByID(driveID) {
-        this.selectedDrive = driveID;
-      },
-    },
-    vuex: {
-      getters: {
-        channelList: state => state.pageState.channelList,
-        wizardState: state => state.pageState.wizardState,
-      },
-      actions: {
-        transitionWizardPage,
-        updateWizardLocalDriveList,
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="stylus" scoped>
-
-  @require '~kolibri.styles.definitions'
-
-  $min-height = 200px
-
-  .main
-    text-align: left
-    margin: 3em 0
-    min-height: $min-height
-
-  h2
-    font-size: 1em
-
-  .modal-message
-    margin: 2em 0
-
-  .button-wrapper
-    margin: 1em 0
-    text-align: center
-
-  button
-    margin: 0.4em
-
-  .refresh-btn-wrapper
-    text-align: center
-
-  .spinner
-    height: $min-height
-
-</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-import-local.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-import-local.vue
deleted file mode 100644
index 72e646d01a7..00000000000
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-import-local.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-
-  <core-modal
-    :title="$tr('title')"
-    :error="wizardState.error"
-    :enableBgClickCancel="false"
-    :enableBackBtn="true"
-    @cancel="cancel"
-    @enter="submit"
-    @back="goBack"
-  >
-    <div class="main">
-      <template v-if="!drivesLoading">
-        <div class="modal-message">
-          <drive-list
-            :value="selectedDrive"
-            :drives="wizardState.driveList"
-            :enabledDrivePred="driveIsEnabled"
-            :disabledMsg="$tr('incompatible')"
-            @change="(driveId) => selectedDrive = driveId"
-          />
-        </div>
-        <div class="refresh-btn-wrapper">
-          <k-button
-            :text="$tr('refresh')"
-            @click="updateWizardLocalDriveList"
-            :disabled="wizardState.busy"
-          />
-        </div>
-      </template>
-      <loading-spinner v-else :delay="500" class="spinner" />
-    </div>
-    <div class="core-text-alert">
-      {{ wizardState.error }}
-    </div>
-    <div class="button-wrapper">
-      <k-button
-        @click="cancel"
-        appearance="flat-button"
-        :text="$tr('cancel')" />
-      <k-button
-        :text="$tr('import')"
-        @click="submit"
-        :disabled="!canSubmit"
-        :primary="true" />
-    </div>
-  </core-modal>
-
-</template>
-
-
-<script>
-
-  import {
-    transitionWizardPage,
-    updateWizardLocalDriveList,
-  } from '../../../state/actions/contentWizardActions';
-  import coreModal from 'kolibri.coreVue.components.coreModal';
-  import kButton from 'kolibri.coreVue.components.kButton';
-  import loadingSpinner from 'kolibri.coreVue.components.loadingSpinner';
-  import driveList from './drive-list';
-  export default {
-    name: 'wizardLocalImport',
-    $trs: {
-      title: 'Import from a Local Drive',
-      incompatible: 'No content available',
-      refresh: 'Refresh',
-      cancel: 'Cancel',
-      import: 'Import',
-    },
-    components: {
-      coreModal,
-      kButton,
-      loadingSpinner,
-      driveList,
-    },
-    data: () => ({ selectedDrive: '' }),
-    computed: {
-      drivesLoading() {
-        return this.wizardState.driveList === null;
-      },
-      canSubmit() {
-        return !this.drivesLoading && this.selectedDrive !== '' && !this.wizardState.busy;
-      },
-    },
-    mounted() {
-      this.updateWizardLocalDriveList();
-    },
-    methods: {
-      driveIsEnabled: drive => drive.metadata.channels.length > 0,
-      goBack() {
-        this.transitionWizardPage('backward');
-      },
-      submit() {
-        this.transitionWizardPage('forward', { driveId: this.selectedDrive });
-      },
-      cancel() {
-        if (!this.wizardState.busy) {
-          this.transitionWizardPage('cancel');
-        }
-      },
-    },
-    vuex: {
-      getters: { wizardState: state => state.pageState.wizardState },
-      actions: {
-        transitionWizardPage,
-        updateWizardLocalDriveList,
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="stylus" scoped>
-
-  @require '~kolibri.styles.definitions'
-
-  $min-height = 200px
-
-  .main
-    text-align: left
-    margin: 3em 0
-    min-height: $min-height
-
-  h2
-    font-size: 1em
-
-  .modal-message
-    margin: 2em 0
-
-  .button-wrapper
-    margin: 1em 0
-    text-align: center
-
-  button
-    margin: 0.4em
-
-  .refresh-btn-wrapper
-    text-align: center
-
-  .spinner
-    height: $min-height
-
-  .core-text-alert
-    text-align: center
-
-</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-import-network.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-import-network.vue
deleted file mode 100644
index 38b6bf68d9e..00000000000
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-import-network.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-
-  <core-modal
-    :title="$tr('title')"
-    :error="wizardState.error"
-    :enableBgClickCancel="false"
-    :enableBackBtn="true"
-    @cancel="cancel"
-    @enter="submit"
-    @back="goBack"
-  >
-    <form @submit.prevent="submit">
-      <div class="main">
-        <k-textbox
-          ref="textbox"
-          :label="$tr('enterContentChannel')"
-          v-model.trim="channelId"
-          :disabled="formIsDisabled"
-          :invalid="channelIdIsInvalid"
-          :invalidText="$tr('channelIdIsInvalid')"
-          @blur="channelIdBlurred=true"
-        />
-      </div>
-
-      <div class="button-wrapper">
-        <k-button
-          @click="cancel"
-          :text="$tr('cancel')"
-          type="button"
-          appearance="flat-button"
-          :disabled="formIsDisabled" />
-        <k-button
-          :text="$tr('import')"
-          type="submit"
-          :disabled="formIsDisabled"
-          :primary="true" />
-      </div>
-    </form>
-  </core-modal>
-
-</template>
-
-
-<script>
-
-  import { transitionWizardPage } from '../../../state/actions/contentWizardActions';
-  import coreModal from 'kolibri.coreVue.components.coreModal';
-  import kButton from 'kolibri.coreVue.components.kButton';
-  import kTextbox from 'kolibri.coreVue.components.kTextbox';
-
-  export default {
-    name: 'wizardImportNetwork',
-    $trs: {
-      title: 'Import from the internet',
-      enterContentChannel: 'Content channel ID',
-      cancel: 'Cancel',
-      import: 'Import',
-      channelIdIsInvalid: 'Content Channel ID cannot be blank',
-    },
-    components: {
-      coreModal,
-      kButton,
-      kTextbox,
-    },
-    data: () => ({
-      channelId: '',
-      channelIdBlurred: false,
-    }),
-    computed: {
-      channelIdIsInvalid() {
-        return this.channelIdBlurred && !this.formIsValid;
-      },
-      formIsDisabled() {
-        return this.wizardState.busy;
-      },
-      formIsValid() {
-        return this.channelId !== '';
-      },
-    },
-    methods: {
-      goBack() {
-        this.transitionWizardPage('backward');
-      },
-      submit() {
-        if (this.formIsValid) {
-          this.transitionWizardPage('forward', { channelId: this.channelId });
-        } else {
-          this.channelIdBlurred = true;
-          this.$refs.textbox.focus();
-        }
-      },
-      cancel() {
-        this.transitionWizardPage('cancel');
-      },
-    },
-    vuex: {
-      getters: { wizardState: state => state.pageState.wizardState },
-      actions: { transitionWizardPage },
-    },
-  };
-
-</script>
-
-
-<style lang="stylus" scoped>
-
-  @require '~kolibri.styles.definitions'
-
-  .main
-    margin: 3em 0
-
-  h2
-    font-size: 1em
-
-  input
-    margin: 1em 0
-    padding: 0.6em 0.8em
-    border: 2px solid $core-action-normal
-    border-radius: 4px
-
-  .button-wrapper
-    margin: 1em 0
-    text-align: center
-
-  button
-    margin: 0.4em
-
-  .core-text-alert
-    text-align: center
-
-</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-import-source.vue b/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-import-source.vue
deleted file mode 100644
index 7b27bf94474..00000000000
--- a/kolibri/plugins/management/assets/src/device_management/views/manage-content-page/wizards/wizard-import-source.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-
-  <core-modal :title="$tr('title')" @cancel="cancel">
-    <div class="main">
-      <div class="lg-button-wrapper">
-        <k-button
-          :text="$tr('internet')"
-          @click="goForward('network')" />
-        <k-button
-          :text="$tr('localDrives')"
-          @click="goForward('local')" />
-      </div>
-      <k-button
-        @click="cancel"
-        appearance="flat-button"
-        :text="$tr('cancel')" />
-    </div>
-  </core-modal>
-
-</template>
-
-
-<script>
-
-  import { transitionWizardPage } from '../../../state/actions/contentWizardActions';
-  import coreModal from 'kolibri.coreVue.components.coreModal';
-  import kButton from 'kolibri.coreVue.components.kButton';
-  export default {
-    name: 'wizardImportSource',
-    components: {
-      coreModal,
-      kButton,
-    },
-    $trs: {
-      title: 'Please choose a source...',
-      internet: 'Internet',
-      localDrives: 'Local Drives',
-      cancel: 'Cancel',
-    },
-    methods: {
-      goForward(source) {
-        return this.transitionWizardPage('forward', { source });
-      },
-      cancel() {
-        return this.transitionWizardPage('cancel');
-      },
-    },
-    vuex: {
-      actions: { transitionWizardPage },
-    },
-  };
-
-</script>
-
-
-<style lang="stylus" scoped>
-
-  @require '~kolibri.styles.definitions'
-
-  .main
-    text-align: center
-    margin-bottom: 4em 0
-
-  .lg-button-wrapper
-    margin: 4em 0
-
-  .cancel-btn
-    margin-bottom: 2em
-
-  .text-only-buttons
-    height: 36px
-    padding-right: 2em
-    padding-left: 2em
-    margin: 1em
-    color: $core-text-annotation
-    border: 1px $core-text-annotation solid
-
-  .icon
-    width: 50px
-    height: 50px
-
-</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/select-content-page/channel-contents-summary.vue b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/channel-contents-summary.vue
new file mode 100644
index 00000000000..d771b19a1db
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/channel-contents-summary.vue
@@ -0,0 +1,117 @@
+<template>
+
+  <section>
+    <div class="channel-header">
+      <img
+        v-if="channel.thumbnail"
+        class="thumbnail"
+        :src="channel.thumbnail"
+      >
+      <h2 class="title">
+        {{ channel.name }}
+      </h2>
+      <p class="version">
+        {{ $tr('version', { version: versionNumber }) }}
+      </p>
+      <p class="description">
+        {{ channel.description }}
+      </p>
+    </div>
+
+    <table class="channel-statistics">
+      <tr class="headers">
+        <th></th>
+        <th>{{ $tr('resourcesCol') }}</th>
+        <th>{{ $tr('sizeCol') }}</th>
+      </tr>
+
+      <tr class="total-size">
+        <td>{{ $tr('totalSizeRow') }}</td>
+        <td>{{ $tr('resourceCount', { count: channel.total_resources || 0 }) }}</td>
+        <td>{{ bytesForHumans(channel.total_file_size || 0) }}</td>
+      </tr>
+
+      <tr class="on-device">
+        <td>{{ $tr('onDeviceRow') }}</td>
+        <td>{{ $tr('resourceCount', { count: channelOnDevice.on_device_resources || 0 }) }}</td>
+        <td>{{ bytesForHumans(channelOnDevice.on_device_file_size || 0) }}</td>
+      </tr>
+    </table>
+  </section>
+
+</template>
+
+
+<script>
+
+  import bytesForHumans from '../manage-content-page/bytesForHumans';
+
+  export default {
+    name: 'channelContentsSummary',
+    components: {},
+    props: {
+      channel: {
+        type: Object,
+        required: true,
+      },
+      channelOnDevice: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      versionNumber() {
+        return this.channelOnDevice.version || this.channel.version;
+      },
+    },
+    methods: {
+      bytesForHumans,
+    },
+    $trs: {
+      onDeviceRow: 'On your device',
+      resourcesCol: 'Resources',
+      resourceCount: '{count, number, useGrouping}',
+      sizeCol: 'Size',
+      totalSizeRow: 'Total size',
+      version: 'Version {version, number, integer}',
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  .thumbnail
+    max-width: 200px
+
+  .description
+    max-width: 66%
+
+  .title
+    font-size: 32px
+    font-weight: bold
+
+  .version
+    font-size: 14px
+    margin-bottom: 32px
+
+  .channel-statistics
+    margin: 36px 0
+
+  tr.headers > th
+    padding: 8px 0
+    text-align: right
+    font-weight: normal
+    min-width: 125px
+    &:nth-child(1)
+      min-width: 175px
+
+  tr.total-size, tr.on-device
+    td
+      text-align: right
+      padding: 8px 0
+      &:first-of-type
+        text-align: left
+
+</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/select-content-page/content-node-row.vue b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/content-node-row.vue
new file mode 100644
index 00000000000..d706a84ff92
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/content-node-row.vue
@@ -0,0 +1,110 @@
+<template>
+
+  <div class="row">
+    <k-checkbox
+      class="checkbox display-cell"
+      :label="node.title"
+      :showLabel="false"
+      :checked="checked"
+      :indeterminate="indeterminate"
+      :disabled="disabled"
+      @change="$emit('changeselection', node)"
+    />
+
+    <div class="title display-cell">
+      <content-icon
+        class="icon"
+        :kind="node.kind"
+      />
+      <k-button
+        v-if="showButton"
+        :text="node.title"
+        appearance="basic-link"
+        @click="$emit('clicktopic', node)"
+        name="select-node"
+      />
+      <span v-else>
+        {{ node.title }}
+      </span>
+    </div>
+
+    <div class="message display-cell">
+      {{ message }}
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import contentIcon from 'kolibri.coreVue.components.contentIcon';
+  import kButton from 'kolibri.coreVue.components.kButton';
+  import kCheckbox from 'kolibri.coreVue.components.kCheckbox';
+  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
+
+  export default {
+    name: 'contentNodeRow',
+    components: {
+      contentIcon,
+      kButton,
+      kCheckbox,
+    },
+    props: {
+      node: {
+        type: Object,
+        required: true,
+      },
+      checked: {
+        type: Boolean,
+        default: false,
+      },
+      indeterminate: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      message: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      showButton() {
+        return !this.disabled && this.node.kind === ContentNodeKinds.TOPIC;
+      },
+    },
+    $trs: {
+      select: 'Select',
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  .row
+    display: table
+    width: 100%
+    vertical-align: middle
+
+  .display-cell
+    display: table-cell
+    vertical-align: inherit
+
+  .icon
+    margin-left: 8px
+    margin-right: 4px
+
+  .title
+    width: 60%
+
+  .message
+    width: 40%
+    text-align: right
+
+</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/select-content-page/content-tree-viewer.vue b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/content-tree-viewer.vue
new file mode 100644
index 00000000000..9c590e7b7ed
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/content-tree-viewer.vue
@@ -0,0 +1,195 @@
+<template>
+
+  <section class="content-tree-viewer">
+    <div class="breadcrumbs">
+      <k-breadcrumbs
+        :items="breadcrumbs"
+        :showAllCrumbs="true"
+      />
+    </div>
+
+    <div
+      v-if="annotatedChildNodes.length > 0"
+      class="contents"
+    >
+      <div class="select-all">
+        <k-checkbox
+          :label="$tr('selectAll')"
+          :checked="nodeIsChecked(annotatedTopicNode)"
+          :disabled="disableAll || annotatedTopicNode.disabled"
+          @change="toggleSelectAll"
+        />
+      </div>
+
+      <div class="content-node-rows">
+        <content-node-row
+          v-for="node in annotatedChildNodes"
+          v-if="showNode(node)"
+          :checked="nodeIsChecked(node)"
+          :disabled="disableAll || node.disabled"
+          :indeterminate="nodeIsIndeterminate(node)"
+          :key="node.pk"
+          :message="node.message"
+          :node="node"
+          @clicktopic="updateCurrentTopicNode(node)"
+          @changeselection="toggleSelection(node)"
+        />
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="no-contents"
+    >
+      {{ $tr('topicHasNoContents') }}
+    </div>
+  </section>
+
+</template>
+
+
+<script>
+
+  import kCheckbox from 'kolibri.coreVue.components.kCheckbox';
+  import kBreadcrumbs from 'kolibri.coreVue.components.kBreadcrumbs';
+  import contentNodeRow from './content-node-row';
+  import { annotateNode, CheckboxTypes, transformBreadrumb } from './treeViewUtils';
+  import {
+    addNodeForTransfer,
+    removeNodeForTransfer,
+  } from '../../state/actions/contentTreeViewerActions';
+  import { wizardState } from '../../state/getters';
+  import last from 'lodash/last';
+  import every from 'lodash/every';
+  import omit from 'lodash/omit';
+  import { navigateToTopicUrl } from '../../wizardTransitionRoutes';
+  import { TransferTypes } from '../../constants';
+
+  // Removes annotations (except path) added to nodes in ContentTreeViewer before putting in store.
+  function sanitizeNode(node) {
+    return omit(node, ['message', 'checkboxType', 'disabled', 'children']);
+  }
+
+  export default {
+    name: 'contentTreeViewer',
+    components: {
+      contentNodeRow,
+      kBreadcrumbs,
+      kCheckbox,
+    },
+    data() {
+      return {
+        disableAll: false,
+      };
+    },
+    computed: {
+      childNodesWithPath() {
+        return this.childNodes.map(node => ({
+          ...node,
+          path: [
+            ...this.path,
+            {
+              pk: node.pk,
+              title: node.title,
+            },
+          ],
+        }));
+      },
+      annotatedChildNodes() {
+        return this.childNodesWithPath.map(n => annotateNode(n, this.nodesForTransfer));
+      },
+      annotatedTopicNode() {
+        // For the purposes of annotating the parent topic node, we need to add
+        // the disabled child nodes to the "include" list. So if all the non-disabled
+        // nodes are selected, then the parent topic's checkbox will be checked.
+        const selections = {
+          included: [
+            ...this.nodesForTransfer.included,
+            ...this.annotatedChildNodes.filter(n => n.disabled),
+          ],
+          omitted: [...this.nodesForTransfer.omitted],
+        };
+        return annotateNode({ ...this.topicNode, path: [...this.path] }, selections);
+      },
+      breadcrumbItems() {
+        const items = [...this.breadcrumbs];
+        delete last(items).link;
+        return items;
+      },
+    },
+    methods: {
+      nodeIsChecked(node) {
+        return node.checkboxType === CheckboxTypes.CHECKED;
+      },
+      nodeIsIndeterminate(node) {
+        return node.checkboxType === CheckboxTypes.INDETERMINATE;
+      },
+      nodeCompletesParent(node) {
+        // Get sibling nodes and check if every one is either checked or disabled
+        const siblings = this.annotatedChildNodes.filter(({ pk }) => pk !== node.pk);
+        return every(siblings, node => this.nodeIsChecked(node) || node.disabled);
+      },
+      showNode(node) {
+        if (this.transferType === TransferTypes.LOCALEXPORT) {
+          return node.available;
+        }
+        return true;
+      },
+      updateCurrentTopicNode(node) {
+        return navigateToTopicUrl.call(this, node);
+      },
+      toggleSelectAll() {
+        this.toggleSelection(this.annotatedTopicNode);
+      },
+      toggleSelection(node) {
+        // When the clicked node would put the parent at 100% included,
+        // add the parent (as a side effect, all the children are removed from "include").
+        const sanitized = sanitizeNode(node);
+        this.disableAll = true;
+        let promise;
+        if (this.nodeIsChecked(node)) {
+          promise = this.removeNodeForTransfer(sanitized);
+        } else {
+          if (this.nodeCompletesParent(node)) {
+            promise = this.addNodeForTransfer(sanitizeNode(this.annotatedTopicNode));
+          } else {
+            promise = this.addNodeForTransfer(sanitized);
+          }
+        }
+        return promise.then(() => {
+          this.disableAll = false;
+          this.$forceUpdate();
+        });
+      },
+    },
+    vuex: {
+      getters: {
+        breadcrumbs: state => wizardState(state).path.map(transformBreadrumb),
+        childNodes: state => wizardState(state).currentTopicNode.children,
+        path: state => wizardState(state).path,
+        nodesForTransfer: state => wizardState(state).nodesForTransfer,
+        topicNode: state => wizardState(state).currentTopicNode,
+        transferType: state => wizardState(state).transferType,
+      },
+      actions: {
+        addNodeForTransfer,
+        removeNodeForTransfer,
+      },
+    },
+    $trs: {
+      selectAll: 'Select all',
+      topicHasNoContents: 'This topic has no sub-topics or resources',
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  .select-all
+    .k-checkbox-container
+      margin-top: 0
+      margin-bottom: 0
+
+</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/select-content-page/index.vue b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/index.vue
new file mode 100644
index 00000000000..62dade0d08f
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/index.vue
@@ -0,0 +1,218 @@
+<template>
+
+  <immersive-full-screen
+    :backPageText="$tr('selectContent')"
+    :backPageLink="goBackLink"
+  >
+    <subpage-container withSideMargin>
+      <task-progress
+        v-if="showUpdateProgressBar"
+        type="UPDATING_CHANNEL"
+        status="QUEUED"
+        :percentage="0"
+        :cancellable="false"
+      />
+      <task-progress
+        v-if="tasksInQueue"
+        type="DOWNLOADING_CHANNEL_CONTENTS"
+        v-bind="firstTask"
+        :cancellable="false"
+      />
+
+      <section class="notifications">
+        <ui-alert
+          v-if="newVersionAvailable"
+          type="info"
+          :removeIcon="true"
+          :dismissible="false"
+        >
+          {{ $tr('newVersionAvailableNotification') }}
+        </ui-alert>
+      </section>
+
+      <section
+        v-if="channelOnDevice.on_device_resources > 0"
+        class="updates"
+      >
+        <div
+          class="updates-available"
+          v-if="newVersionAvailable"
+        >
+          <span>
+            {{ $tr('newVersionAvailable', { version: channel.version }) }}
+          </span>
+          <k-button
+            :text="$tr('update')"
+            :primary="true"
+            name="update"
+            @click="updateChannelMetadata()"
+          />
+        </div>
+        <span v-else>{{ $tr('channelUpToDate') }}</span>
+      </section>
+
+      <channel-contents-summary
+        :channel="channel"
+        :channelOnDevice="channelOnDevice"
+      />
+
+      <!-- Assuming that if wizardState.status is truthy, it's an error -->
+      <ui-alert
+        v-if="wizardStatus!==''"
+        type="error"
+        :dismissible="false"
+      >
+        {{ $tr('problemFetchingChannel') }}
+      </ui-alert>
+
+      <template v-if="onDeviceInfoIsReady">
+        <ui-alert
+          v-if="contentTransferError"
+          type="error"
+          :dismissible="false"
+        >
+          {{ $tr('problemTransferringContents') }}
+        </ui-alert>
+        <!-- Contains size estimates + submit button -->
+        <selected-resources-size
+          :mode="mode"
+          :fileSize="nodeTransferCounts.fileSize"
+          :resourceCount="nodeTransferCounts.resources"
+          :spaceOnDrive="availableSpace"
+          @clickconfirm="startTransferringContent()"
+        />
+        <hr>
+        <content-tree-viewer />
+      </template>
+    </subpage-container>
+  </immersive-full-screen>
+
+</template>
+
+
+<script>
+
+  import kButton from 'kolibri.coreVue.components.kButton';
+  import immersiveFullScreen from 'kolibri.coreVue.components.immersiveFullScreen';
+  import selectedResourcesSize from './selected-resources-size';
+  import contentTreeViewer from './content-tree-viewer';
+  import channelContentsSummary from './channel-contents-summary';
+  import uiAlert from 'keen-ui/src/UiAlert';
+  import subpageContainer from '../containers/subpage-container';
+  import { channelIsInstalled, wizardState, nodeTransferCounts } from '../../state/getters';
+  import isEmpty from 'lodash/isEmpty';
+  import { getAvailableSpaceOnDrive } from '../../state/actions/selectContentActions';
+  import {
+    downloadChannelMetadata,
+    transferChannelContent,
+    waitForTaskToComplete,
+  } from '../../state/actions/contentTransferActions';
+  import taskProgress from '../manage-content-page/task-progress';
+  import { WizardTransitions } from '../../wizardTransitionRoutes';
+  import { PageNames } from '../../constants';
+
+  export default {
+    name: 'selectContentPage',
+    components: {
+      channelContentsSummary,
+      contentTreeViewer,
+      immersiveFullScreen,
+      kButton,
+      selectedResourcesSize,
+      subpageContainer,
+      taskProgress,
+      uiAlert,
+    },
+    data() {
+      return {
+        showUpdateProgressBar: false,
+        contentTransferError: false,
+      };
+    },
+    computed: {
+      channelOnDevice() {
+        const installedChannel = this.channelIsInstalled(this.channel.id);
+        return (
+          installedChannel || {
+            on_device_file_size: 0,
+            on_device_resources: 0,
+          }
+        );
+      },
+      newVersionAvailable() {
+        if (this.channelOnDevice.version) {
+          return this.channel.version > this.channelOnDevice.version;
+        }
+        return false;
+      },
+      goBackLink() {
+        return {
+          name: WizardTransitions.GOTO_AVAILABLE_CHANNELS_PAGE,
+        };
+      },
+    },
+    mounted() {
+      this.getAvailableSpaceOnDrive();
+    },
+    methods: {
+      updateChannelMetadata() {
+        // NOTE: This only updates the metadata, not the underlying content.
+        // This could produced unexpected behavior for users.
+        this.showUpdateProgressBar = true;
+        return this.downloadChannelMetadata().then(() => {
+          this.showUpdateProgressBar = false;
+        });
+      },
+      startTransferringContent() {
+        this.contentTransferError = false;
+        return this.transferChannelContent()
+          .then(() => {
+            this.$router.replace({ name: PageNames.MANAGE_CONTENT_PAGE });
+          })
+          .catch(() => {
+            this.contentTransferError = true;
+          });
+      },
+    },
+    vuex: {
+      getters: {
+        availableSpace: state => wizardState(state).availableSpace || 0,
+        channel: state => wizardState(state).transferredChannel,
+        channelIsInstalled,
+        databaseIsLoading: ({ pageState }) => pageState.databaseIsLoading,
+        firstTask: ({ pageState }) => pageState.taskList[0],
+        mode: state => (wizardState(state).transferType === 'localexport' ? 'export' : 'import'),
+        nodeTransferCounts,
+        onDeviceInfoIsReady: state => !isEmpty(wizardState(state).currentTopicNode),
+        selectedItems: state => wizardState(state).nodesForTransfer || {},
+        tasksInQueue: ({ pageState }) => pageState.taskList.length > 0,
+        wizardStatus: state => wizardState(state).status,
+      },
+      actions: {
+        downloadChannelMetadata,
+        getAvailableSpaceOnDrive,
+        transferChannelContent,
+        waitForTaskToComplete,
+      },
+    },
+    $trs: {
+      channelUpToDate: 'Channel up-to-date',
+      newVersionAvailable: 'Version {version, number} available',
+      newVersionAvailableNotification:
+        'New channel version available. Some of your files may be outdated or deleted.',
+      problemFetchingChannel: 'There was a problem getting the contents of this channel',
+      problemTransferringContents: 'There was a problem transferring the selected contents',
+      selectContent: 'Select content',
+      update: 'Update',
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  .updates
+    text-align: right
+
+</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/select-content-page/selected-resources-size.vue b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/selected-resources-size.vue
new file mode 100644
index 00000000000..eed50557154
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/selected-resources-size.vue
@@ -0,0 +1,116 @@
+<template>
+
+  <section class="selected-resources-size">
+    <div class="choose-message">
+      <span v-if="isInImportMode">
+        {{ $tr('chooseContentToImport') }}
+      </span>
+      <span v-else>
+        {{ $tr('chooseContentToExport') }}
+      </span>
+    </div>
+    <div class="resources-selected">
+      <div class="resources-selected-message">
+        {{ $tr('resourcesSelected', { fileSize: bytesForHumans(fileSize), resources: resourceCount }) }}
+      </div>
+
+      <k-button
+        :text="buttonText"
+        :disabled="buttonIsDisabled"
+        @click="$emit('clickconfirm')"
+      />
+    </div>
+
+    <div class="remaining-space">
+      {{ $tr('remainingSpace', { space: bytesForHumans(remainingSpaceAfterTransfer) }) }}
+    </div>
+
+    <ui-alert
+      v-if="remainingSpaceAfterTransfer<=0"
+      type="error"
+      :dismissible="false"
+    >
+      {{ $tr('notEnoughSpace') }}
+    </ui-alert>
+  </section>
+
+</template>
+
+
+<script>
+
+  import bytesForHumans from '../manage-content-page/bytesForHumans';
+  import kButton from 'kolibri.coreVue.components.kButton';
+  import uiAlert from 'keen-ui/src/UiAlert.vue';
+
+  const RequiredNumber = { type: Number, required: true };
+
+  export default {
+    name: 'selectedResourcesSize',
+    components: {
+      kButton,
+      uiAlert,
+    },
+    props: {
+      mode: {
+        type: String,
+        required: true,
+        validator(val) {
+          return val === 'import' || val === 'export';
+        },
+      },
+      fileSize: RequiredNumber,
+      resourceCount: RequiredNumber,
+      spaceOnDrive: RequiredNumber,
+    },
+    computed: {
+      isInImportMode() {
+        return this.mode === 'import';
+      },
+      buttonText() {
+        return this.isInImportMode ? this.$tr('import') : this.$tr('export');
+      },
+      buttonIsDisabled() {
+        return this.resourceCount === 0 || this.remainingSpaceAfterTransfer <= 0;
+      },
+      remainingSpaceAfterTransfer() {
+        return Math.max(this.spaceOnDrive - this.fileSize, 0);
+      },
+    },
+    methods: {
+      bytesForHumans,
+    },
+    $trs: {
+      chooseContentToExport: 'Choose content to export',
+      chooseContentToImport: 'Choose content to import',
+      export: 'export',
+      import: 'import',
+      notEnoughSpace: 'Not enough space on your device. Select less content to make more space.',
+      remainingSpace: 'Your remaining space: {space}',
+      resourcesSelected: 'Resources selected: {resources, number, integer} ({fileSize})',
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  .choose-message
+    padding: 8px 0
+    font-weight: bold
+
+  .resources-selected
+    margin: 8px 0
+    &-message
+      display: inline
+    button
+      display: inline
+
+
+  .remaining-space
+    text-align: right
+    margin-top: -24px
+    margin-bottom: 8px
+
+</style>
diff --git a/kolibri/plugins/management/assets/src/device_management/views/select-content-page/treeViewUtils.js b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/treeViewUtils.js
new file mode 100644
index 00000000000..62e86ec8434
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/views/select-content-page/treeViewUtils.js
@@ -0,0 +1,162 @@
+import find from 'lodash/find';
+import flip from 'lodash/flip';
+import sumBy from 'lodash/fp/sumBy';
+import { createTranslator } from 'kolibri.utils.i18n';
+import { updateTopicLinkObject } from '../../wizardTransitionRoutes';
+
+const translator = createTranslator('treeViewRowMessages', {
+  alreadyOnYourDevice: 'Already on your device',
+  fractionOfResourcesOnDevice:
+    '{onDevice, number, useGrouping} of {total, number, useGrouping} resources on your device',
+  resourcesSelected:
+    '{total, number, useGrouping} {total, plural, one {resource} other {resources}} selected',
+  fractionOfResourcesSelected:
+    '{selected, number, useGrouping} of {total, number, useGrouping} {total, plural, one {resource} other {resources}} selected',
+  noTitle: 'No title',
+});
+
+export const CheckboxTypes = {
+  CHECKED: 'checked',
+  UNCHECKED: 'unchecked',
+  INDETERMINATE: 'indeterminate',
+};
+
+// One-liner utilities for annotateNode
+// isAncestorOf(a, b) is truthy if a is an ancestor of b
+const isAncestorOf = (a, b) => find(b.path, { pk: a.pk });
+const isDescedantOf = flip(isAncestorOf);
+const sumTotalResources = sumBy('total_resources');
+const sumOnDeviceResources = sumBy('on_device_resources');
+
+/**
+ * Takes a Node, plus contextual data from store, then annotates them with info
+ * needed to correctly display it on tree view.
+ *
+ * @param node {Node}
+ * @param selectedNodes {SelectedNodes}
+ * @param selectedNodes.omitted {Array<Node>}
+ * @param selectedNodes.included {Array<Node>}
+ * @returns {AnnotatedNode} - annotations are message, disabled, and checkboxType
+ *
+ */
+export function annotateNode(node, selectedNodes) {
+  const { on_device_resources, total_resources } = node;
+  const isIncluded = find(selectedNodes.included, { pk: node.pk });
+  const isOmitted = find(selectedNodes.omitted, { pk: node.pk });
+  const ancestorIsIncluded = find(selectedNodes.included, iNode => isAncestorOf(iNode, node));
+  const ancestorIsOmitted = find(selectedNodes.omitted, oNode => isAncestorOf(oNode, node));
+
+  // Completely on device -> DISABLED
+  if (on_device_resources === total_resources) {
+    return {
+      ...node,
+      message: translator.$tr('alreadyOnYourDevice'),
+      disabled: true,
+      checkboxType: CheckboxTypes.CHECKED,
+    };
+  }
+
+  if (!(isOmitted || ancestorIsOmitted) && (isIncluded || ancestorIsIncluded)) {
+    const omittedDescendants = selectedNodes.omitted.filter(oNode => isDescedantOf(oNode, node));
+
+    // If any descendants are omitted -> UNCHECKED or INDETERMINATE
+    if (omittedDescendants.length > 0) {
+      const omittedResources =
+        (sumTotalResources(omittedDescendants) || 0) -
+        (sumOnDeviceResources(omittedDescendants) || 0);
+
+      // All descendants are omitted -> UNCHECKED
+      if (omittedResources === total_resources - on_device_resources) {
+        return {
+          ...node,
+          message: '',
+          disabled: false,
+          checkboxType: CheckboxTypes.UNCHECKED,
+        };
+      }
+
+      // Some (but not all) descendants are omitted -> INDETERMINATE
+      return {
+        ...node,
+        message: translator.$tr('fractionOfResourcesSelected', {
+          selected: total_resources - sumTotalResources(omittedDescendants),
+          total: total_resources,
+        }),
+        disabled: false,
+        checkboxType: CheckboxTypes.INDETERMINATE,
+      };
+    }
+
+    // Completely selected -> CHECKED
+    return {
+      ...node,
+      message: translator.$tr('resourcesSelected', { total: total_resources }),
+      disabled: false,
+      checkboxType: CheckboxTypes.CHECKED,
+    };
+  }
+
+  const fullyIncludedDescendants = selectedNodes.included
+    .filter(iNode => isDescedantOf(iNode, node))
+    .filter(iNode => !selectedNodes.omitted.find(oNode => isDescedantOf(oNode, iNode)));
+
+  if (fullyIncludedDescendants.length > 0) {
+    const fullIncludedDescendantsResources =
+      sumTotalResources(fullyIncludedDescendants) - sumOnDeviceResources(fullyIncludedDescendants);
+
+    // Node is not selected, has all children selected -> CHECKED
+    if (fullIncludedDescendantsResources === total_resources - on_device_resources) {
+      return {
+        ...node,
+        message: translator.$tr('resourcesSelected', { total: total_resources }),
+        disabled: false,
+        checkboxType: CheckboxTypes.CHECKED,
+      };
+    }
+
+    // Node is not selected, has some children selected -> INDETERMINATE
+    return {
+      ...node,
+      message: translator.$tr('fractionOfResourcesSelected', {
+        selected: fullIncludedDescendantsResources,
+        total: total_resources,
+      }),
+      disabled: false,
+      checkboxType: CheckboxTypes.INDETERMINATE,
+    };
+  }
+
+  if (on_device_resources > 0) {
+    // Node has some (but not all) resources on device -> UNCHECKED (w/ message).
+    // Node with all resources on device handled at top of this function.
+    return {
+      ...node,
+      message: translator.$tr('fractionOfResourcesOnDevice', {
+        onDevice: on_device_resources,
+        total: total_resources,
+      }),
+      disabled: false,
+      checkboxType: CheckboxTypes.UNCHECKED,
+    };
+  }
+
+  // Node is not selected, has no children, is not on device -> UNCHECKED
+  return {
+    ...node,
+    message: '',
+    disabled: false,
+    checkboxType: CheckboxTypes.UNCHECKED,
+  };
+}
+
+/**
+ * Takes an array of breadcrumb { id, title } objects in state, and converts them
+ * into a form that can be used in k-breadcrumbs props.items { text, link: LinkObject }.
+ *
+ */
+export function transformBreadrumb(node) {
+  return {
+    text: node.title || translator.$tr('noTitle'),
+    link: updateTopicLinkObject(node),
+  };
+}
diff --git a/kolibri/plugins/management/assets/src/device_management/wizardTransitionRoutes.js b/kolibri/plugins/management/assets/src/device_management/wizardTransitionRoutes.js
new file mode 100644
index 00000000000..762b1d3b92f
--- /dev/null
+++ b/kolibri/plugins/management/assets/src/device_management/wizardTransitionRoutes.js
@@ -0,0 +1,80 @@
+import get from 'lodash/get';
+import router from 'kolibri.coreVue.router';
+import store from 'kolibri.coreVue.vuex.store';
+import { ContentWizardPages } from './constants';
+import { transitionWizardPage } from './state/actions/contentWizardActions';
+import { updateTreeViewTopic } from './state/actions/selectContentActions';
+
+export const WizardTransitions = {
+  GOTO_TOPIC_TREEVIEW: 'GOTO_TOPIC_TREEVIEW',
+  GOTO_AVAILABLE_CHANNELS_PAGE: 'GOTO_AVAILABLE_CHANNELS_PAGE',
+};
+
+export function updateTopicLinkObject(node) {
+  return {
+    name: WizardTransitions.GOTO_TOPIC_TREEVIEW,
+    query: {
+      pk: node.pk,
+    },
+    params: {
+      node,
+    },
+  };
+}
+
+// To update the treeview topic programatically
+export function navigateToTopicUrl(node) {
+  router.push(updateTopicLinkObject(node));
+}
+
+// Special fake routes so we can use router-link-dependant components inside
+// the wizard modals/immersive-full-screen
+export default [
+  {
+    name: WizardTransitions.GOTO_TOPIC_TREEVIEW,
+    path: '/content/wizard/topic',
+    handler: ({ params, query }) => {
+      let nextNode;
+      // Redirect to /content if coming into URL directly without initiating workflow
+      if (
+        get(store.state.pageState, 'wizardState.pageName') !== ContentWizardPages.SELECT_CONTENT
+      ) {
+        return router.replace('/content');
+      }
+      if (!params.node) {
+        nextNode = {
+          // Works fine without title at the moment.
+          path: store.state.pageState.wizardState.pathCache[params.pk],
+          pk: query.pk,
+        };
+      } else {
+        nextNode = params.node;
+      }
+      return updateTreeViewTopic(store, nextNode);
+    },
+  },
+  {
+    name: WizardTransitions.GOTO_AVAILABLE_CHANNELS_PAGE,
+    path: '/content/wizard/availablechannels',
+    handler: () => {
+      if (!get(store.state.pageState, 'wizardState.pageName')) {
+        return router.replace('/content');
+      }
+      // This action should maintain most of the state, except for nodesForTransfer
+      store.dispatch('REPLACE_INCLUDE_LIST', []);
+      store.dispatch('REPLACE_OMIT_LIST', []);
+      // TODO adjust tests to account for this flow (they assume fresh start from /content).
+      return store.dispatch('SET_WIZARD_PAGENAME', ContentWizardPages.AVAILABLE_CHANNELS);
+    },
+  },
+  {
+    name: 'wizardtransition',
+    // Wizard transitions don't change the URL
+    path: '',
+    handler: ({ params }) => {
+      if (params.transition === 'cancel') {
+        transitionWizardPage(store, 'cancel');
+      }
+    },
+  },
+];
diff --git a/kolibri/plugins/style_guide/assets/src/views/content/breadcrumbs/index.vue b/kolibri/plugins/style_guide/assets/src/views/content/breadcrumbs/index.vue
index 23be0cb7a29..966d15dd6f2 100644
--- a/kolibri/plugins/style_guide/assets/src/views/content/breadcrumbs/index.vue
+++ b/kolibri/plugins/style_guide/assets/src/views/content/breadcrumbs/index.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <page-template :completed="true">
+  <page-template :completed="false">
 
     <h1>Topic tree breadcrumbs</h1>
 
diff --git a/kolibri/tasks/api.py b/kolibri/tasks/api.py
index bd31f8fb890..3f6837ccae9 100644
--- a/kolibri/tasks/api.py
+++ b/kolibri/tasks/api.py
@@ -27,6 +27,7 @@
 
 logging = logger.getLogger(__name__)
 
+
 NETWORK_ERROR_STRING = _("There was a network error.")
 
 DISK_IO_ERROR_STRING = _("There was a disk access error.")
@@ -69,7 +70,14 @@ def startremotechannelimport(self, request):
             "started_by": request.user.pk,
         }
 
-        job_id = get_client().schedule(call_command, "importchannel", "network", channel_id, baseurl=baseurl, extra_metadata=job_metadata,)
+        job_id = get_client().schedule(
+            call_command,
+            "importchannel",
+            "network",
+            channel_id,
+            baseurl=baseurl,
+            extra_metadata=job_metadata,
+        )
         resp = _job_to_response(get_client().status(job_id))
 
         return Response(resp)