diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
index 1a7e4e09cf..08287a03cd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
@@ -1,39 +1,23 @@
 <template>
 
-  <VDialog
-    :value="true"
-    fullscreen
-    app
-    hide-overlay
-    transition="dialog-bottom-transition"
-    lazy
-    scrollable
-  >
-    <VCard :style="{'height': '100%'}">
-      <VToolbar
+  <FullscreenModal :value="true" :header="toolbarTitle">
+    <template #close>
+      <span></span>
+    </template>
+    <template #action>
+      <VBtn
         dark
-        app
-        color="primary"
-        clipped-right
+        flat
+        @click="onCancelClick"
       >
-        <VToolbarTitle>{{ toolbarTitle }}</VToolbarTitle>
-        <VSpacer />
-        <VToolbarItems>
-          <VBtn
-            dark
-            flat
-            @click="onCancelClick"
-          >
-            {{ $tr('cancelBtnLabel') }}
-          </VBtn>
-        </VToolbarItems>
-      </VToolbar>
-
+        {{ $tr('cancelBtnLabel') }}
+      </VBtn>
+    </template>
+    <VContent class="px-4">
       <p class="mt-4 ml-2">
         {{ $tr('resourcesDisplayedText') }}
         <span class="font-weight-bold notranslate">&apos;{{ targetNodeTitle }}&apos;</span>
       </p>
-
       <NodeTreeNavigation
         v-if="selectedNodeId"
         v-model="selectedNodeId"
@@ -97,10 +81,11 @@
           </template>
         </VListTile>
       </NodeTreeNavigation>
-    </VCard>
+    </VContent>
     <ResourceDrawer
       :nodeId="previewNodeId"
       :channelId="currentChannelId"
+      style="margin-top: 64px; max-height: calc(100vh-64px);"
       app
       @close="previewNodeId = null"
     >
@@ -115,7 +100,7 @@
         </VBtn>
       </template>
     </ResourceDrawer>
-  </VDialog>
+  </FullscreenModal>
 
 </template>
 
@@ -126,6 +111,7 @@
   import NodeTreeNavigation from './NodeTreeNavigation';
   import ResourceDrawer from './ResourceDrawer';
   import ContentNodeIcon from 'shared/views/ContentNodeIcon';
+  import FullscreenModal from 'shared/views/FullscreenModal';
 
   export default {
     name: 'AddRelatedResourcesModal',
@@ -133,6 +119,7 @@
       ContentNodeIcon,
       NodeTreeNavigation,
       ResourceDrawer,
+      FullscreenModal,
     },
     props: {
       targetNodeId: {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
index b4095b4e47..6d4adb81d6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
@@ -20,14 +20,12 @@
           app
         >
           <VBtn data-test="close" icon dark @click="handleClose">
-            <Icon>close</Icon>
+            <Icon>arrow_back</Icon>
           </VBtn>
           <VToolbarTitle>{{ modalTitle }}</VToolbarTitle>
           <VSpacer />
-          <VBtn v-if="canEdit" data-test="save" dark flat @click="handleClose">
-            {{ $tr('saveButtonText') }}
-          </VBtn>
-          <VBtn v-else data-test="copy" dark flat @click="copyContent">
+          <OfflineText indicator />
+          <VBtn v-if="!canEdit" data-test="copy" dark flat @click="copyContent">
             {{ $tr('copyButtonText', {
               count: nodes.length, size: formatFileSize(totalFileSize)}) }}
           </VBtn>
@@ -182,6 +180,7 @@
   import Uploader from 'shared/views/files/Uploader';
   import LoadingText from 'shared/views/LoadingText';
   import FormatPresets from 'shared/leUtils/FormatPresets';
+  import OfflineText from 'shared/views/OfflineText';
 
   export default {
     name: 'EditModal',
@@ -195,6 +194,7 @@
       FileUploadDefault,
       LoadingText,
       MessageDialog,
+      OfflineText,
     },
     mixins: [fileSizeMixin],
     props: {
@@ -283,7 +283,7 @@
             vm.loadContentNodes({ id__in: ids }),
             vm.loadFiles({ contentnode__in: ids }),
             ...ids.map(nodeId => vm.loadRelatedResources(nodeId)),
-            ...ids.map(nodeId => vm.loadNodeAssessmentItems(nodeId)),
+            vm.loadAssessmentItems({ contentnode__in: ids }),
           ])
             .then(() => {
               vm.loading = false;
@@ -313,7 +313,7 @@
         'createContentNode',
       ]),
       ...mapActions('file', ['loadFiles', 'createFile']),
-      ...mapActions('assessmentItem', ['loadNodeAssessmentItems']),
+      ...mapActions('assessmentItem', ['loadAssessmentItems']),
       ...mapActions('clipboard', ['copyAll']),
       ...mapMutations('contentNode', { enableValidation: 'ENABLE_VALIDATION_ON_NODES' }),
       closeModal() {
@@ -412,7 +412,6 @@
     $trs: {
       editingDetailsHeader: 'Editing Content Details',
       viewingDetailsHeader: 'Viewing Content Details',
-      saveButtonText: 'Finish',
       copyButtonText:
         '{count, plural,\n =1 {Copy to clipboard}\n other {Copy # items to clipboard}} ({size})',
       invalidNodesFound: '{count, plural,\n =1 {# error found}\n other {# errors found}}',
diff --git a/contentcuration/contentcuration/frontend/channelEdit/move/MoveModal.vue b/contentcuration/contentcuration/frontend/channelEdit/move/MoveModal.vue
index 373e503fa9..4ac72fd005 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/move/MoveModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/move/MoveModal.vue
@@ -1,179 +1,142 @@
 <template>
 
-  <VDialog
-    v-model="dialog"
-    fullscreen
-    scrollable
-    app
-    lazy
-    persistent
-    attach="body"
-  >
-    <VCard>
-      <VToolbar
-        dark
-        color="primary"
-        app
-        :extended="!loading"
-        :extension-height="48"
+  <FullscreenModal v-model="dialog" lazy>
+    <template #header>
+      {{ $tr("moveItems", {count: moveNodeIds.length}) }}
+      <b class="notranslate">{{ currentNode.title }}</b>
+    </template>
+    <ToolBar v-if="!loading" color="white" light>
+      <Breadcrumbs :items="crumbs" class="py-0">
+        <template #item="{item, isLast}">
+          <span
+            style="cursor: pointer;"
+            class="notranslate"
+            :class="isLast? 'font-weight-bold' : 'grey--text'"
+            @click="targetNodeId = item.id"
+          >
+            {{ item.title }}
+          </span>
+        </template>
+      </Breadcrumbs>
+      <VSpacer />
+      <VBtn color="grey lighten-4" data-test="newtopic" @click="showNewTopicModal = true">
+        {{ $tr("addTopic") }}
+      </VBtn>
+    </ToolBar>
+    <!-- list of children content -->
+    <LoadingText v-if="loading" data-test="loading" />
+    <VContainer v-else-if="!children.length" data-test="empty" fluid fill-height>
+      <VLayout align-center justify-center class="subheading">
+        <div>{{ $tr('emptyTopicText') }}</div>
+      </VLayout>
+    </VContainer>
+    <VContent
+      v-else
+      fluid
+      align-content-start
+      class="pb-5 mb-5"
+    >
+      <VCard
+        v-for="node in children"
+        :key="node.id"
         flat
-        clipped-right
+        class="pa-4 content-card"
+        :class="{disabled: isDisabled(node)}"
+        data-test="listitem"
+        @click="openTopic(node)"
       >
-        <VBtn icon exact data-test="close" @click="dialog=false">
-          <Icon>close</Icon>
-        </VBtn>
-        <VToolbarTitle>
-          {{ $tr("moveItems", {count: moveNodeIds.length}) }}
-          <b class="notranslate">{{ currentNode.title }}</b>
-        </VToolbarTitle>
-        <template v-if="!loading" #extension>
-          <ToolBar dense color="white" light>
-            <Breadcrumbs :items="crumbs" class="py-0">
-              <template #item="{item, isLast}">
-                <span
-                  style="cursor: pointer;"
-                  class="notranslate"
-                  :class="isLast? 'font-weight-bold' : 'grey--text'"
-                  @click="targetNodeId = item.id"
-                >
-                  {{ item.title }}
-                </span>
-              </template>
-            </Breadcrumbs>
-            <VSpacer />
-            <VBtn flat data-test="newtopic" @click="showNewTopicModal = true">
-              {{ $tr("addTopic") }}
-            </VBtn>
-          </ToolBar>
-        </template>
-      </VToolbar>
-      <VContent style="padding-top: 112px; padding-bottom: 64px; background-color: white;">
-        <!-- list of children content -->
-        <LoadingText v-if="loading" absolute data-test="loading" />
-        <VContainer v-else-if="!children.length" data-test="empty" fluid fill-height>
-          <VLayout align-center justify-center class="subheading">
-            <div>{{ $tr('emptyTopicText') }}</div>
-          </VLayout>
-        </VContainer>
-        <VContainer
-          v-else
-          fluid
-          align-content-start
-          class="pa-0"
-          style="max-height: calc(100vh - 178px); overflow-y: auto;"
-        >
-          <VCard
-            v-for="node in children"
-            :key="node.id"
-            flat
-            class="pa-4 content-card"
-            :class="{disabled: isDisabled(node)}"
-            data-test="listitem"
-            @click="openTopic(node)"
-          >
-            <VLayout align-center row>
-              <div style="min-width: 175px;">
-                <Thumbnail
-                  :src="node.thumbnail_src"
-                  :kind="node.kind"
-                  :isEmpty="!node.total_count"
-                />
+        <VLayout align-center row>
+          <div style="min-width: 175px;">
+            <Thumbnail
+              :src="node.thumbnail_src"
+              :kind="node.kind"
+              :isEmpty="!node.total_count"
+            />
+          </div>
+          <VFlex class="pl-2">
+            <VCardTitle class="headline notranslate pb-0">
+              {{ node.title }}
+            </VCardTitle>
+            <VCardText class="grey--text pt-0">
+              <div v-if="node.kind === 'topic'">
+                {{ $tr('resourcesCount', {count: node.resource_count || 0}) }}
               </div>
-              <VFlex class="pl-2">
-                <VCardTitle class="headline notranslate pb-0">
-                  {{ node.title }}
-                </VCardTitle>
-                <VCardText class="grey--text pt-0">
-                  <div v-if="node.kind === 'topic'">
-                    {{ $tr('resourcesCount', {count: node.resource_count || 0}) }}
-                  </div>
-                  <div class="notranslate subheading">
-                    {{ node.description }}
-                  </div>
-                </VCardText>
-              </VFlex>
-              <VSpacer />
-              <div style="min-width: 102px;">
-                <VCardActions class="options">
-                  <VBtn icon data-test="details" @click.stop="previewNodeId = node.id">
-                    <Icon color="primary">
-                      info
-                    </Icon>
-                  </VBtn>
-                  <VBtn v-if="node.kind === 'topic'" icon @click.stop="targetNodeId = node.id">
-                    <Icon>keyboard_arrow_right</Icon>
-                  </VBtn>
-                </VCardActions>
+              <div class="notranslate subheading">
+                {{ node.description }}
               </div>
-            </VLayout>
-          </VCard>
-        </VContainer>
-      </VContent>
-      <ResourceDrawer
-        app
-        :nodeId="previewNodeId"
-        :channelId="currentChannel.id"
-        @close="previewNodeId = null"
-      />
+            </VCardText>
+          </VFlex>
+          <VSpacer />
+          <div style="min-width: 102px;">
+            <VCardActions class="options">
+              <VBtn icon data-test="details" @click.stop="previewNodeId = node.id">
+                <Icon color="primary">
+                  info
+                </Icon>
+              </VBtn>
+              <VBtn v-if="node.kind === 'topic'" icon @click.stop="targetNodeId = node.id">
+                <Icon>keyboard_arrow_right</Icon>
+              </VBtn>
+            </VCardActions>
+          </div>
+        </VLayout>
+      </VCard>
+    </VContent>
+    <ResourceDrawer
+      app
+      style="margin-top: 64px;"
+      :nodeId="previewNodeId"
+      :channelId="currentChannel.id"
+      @close="previewNodeId = null"
+    />
 
-      <!-- footer buttons -->
-      <BottomToolBar color="white" flat clipped-right app>
-        <Icon class="mr-2">
-          assignment
-        </Icon>
-        <ActionLink
-          :text="$tr('copyClipboard')"
-          data-test="clipboard"
-          @click="copyToClipboard"
-        />
-        <VSpacer />
-        <VBtn flat exact data-test="cancel" @click="dialog=false">
-          {{ $tr("cancel") }}
-        </VBtn>
-        <VBtn
-          color="primary"
-          data-test="move"
-          :disabled="currentLocationId === targetNodeId"
-          @click="moveNodes"
-        >
-          {{ $tr("moveHere") }}
-        </VBtn>
-      </BottomToolBar>
+    <!-- footer buttons -->
+    <template #bottom>
+      <VSpacer />
+      <VBtn flat exact data-test="cancel" @click="dialog=false">
+        {{ $tr("cancel") }}
+      </VBtn>
+      <VBtn
+        color="primary"
+        data-test="move"
+        :disabled="currentLocationId === targetNodeId"
+        @click="moveNodes"
+      >
+        {{ $tr("moveHere") }}
+      </VBtn>
+    </template>
 
-      <NewTopicModal
-        v-if="showNewTopicModal"
-        v-model="showNewTopicModal"
-        data-test="newtopicmodal"
-        @createTopic="createTopic"
-      />
-    </VCard>
-  </VDialog>
+    <NewTopicModal
+      v-if="showNewTopicModal"
+      v-model="showNewTopicModal"
+      data-test="newtopicmodal"
+      @createTopic="createTopic"
+    />
+  </FullscreenModal>
 
 </template>
 <script>
 
   import { mapGetters, mapActions, mapMutations, mapState } from 'vuex';
   import { RouterNames } from '../constants';
-  import BottomToolBar from '../../shared/views/BottomToolBar';
   import ResourceDrawer from '../components/ResourceDrawer';
   import NewTopicModal from './NewTopicModal';
-  import ActionLink from 'shared/views/ActionLink';
   import Breadcrumbs from 'shared/views/Breadcrumbs';
   import LoadingText from 'shared/views/LoadingText';
   import Thumbnail from 'shared/views/files/Thumbnail';
   import ToolBar from 'shared/views/ToolBar';
+  import FullscreenModal from 'shared/views/FullscreenModal';
 
   export default {
     name: 'MoveModal',
     components: {
       NewTopicModal,
-      BottomToolBar,
-      ActionLink,
       Breadcrumbs,
       LoadingText,
       ResourceDrawer,
       Thumbnail,
       ToolBar,
+      FullscreenModal,
     },
     data() {
       return {
@@ -229,7 +192,6 @@
     },
     methods: {
       ...mapActions('contentNode', ['createContentNode', 'loadChildren', 'moveContentNodes']),
-      ...mapActions('clipboard', ['copyAll']),
       ...mapMutations('contentNode', { setMoveNodes: 'SET_MOVE_NODES' }),
       isDisabled(node) {
         return this.moveNodeIds.includes(node.id);
@@ -265,12 +227,6 @@
           this.$store.dispatch('showSnackbar', { text: this.$tr('topicCreatedMessage') });
         });
       },
-      copyToClipboard() {
-        this.copyAll({ id__in: this.moveNodeIds }).then(() => {
-          this.$router.push(this.closeLink);
-          this.$store.dispatch('showSnackbar', { text: this.$tr('copiedToClipboardMessage') });
-        });
-      },
       moveNodes() {
         this.moveContentNodes({ id__in: this.moveNodeIds, parent: this.targetNodeId }).then(() => {
           this.dialog = false;
@@ -283,7 +239,6 @@
       },
     },
     $trs: {
-      copyClipboard: 'Or copy to clipboard',
       moveItems: 'Moving {count, plural,\n =1 {# selection}\n other {# selections}} into:',
       addTopic: 'Add new topic',
       cancel: 'Cancel',
@@ -291,7 +246,6 @@
       resourcesCount: '{count, plural,\n =1 {# resource}\n other {# resources}}',
       emptyTopicText: 'No resources found',
       topicCreatedMessage: 'New topic created',
-      copiedToClipboardMessage: 'Copied to clipboard',
       movedMessage: 'Moved to {title}',
       goToLocationButton: 'Go to location',
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/move/__tests__/moveModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/move/__tests__/moveModal.spec.js
index 7e81a74614..274937b10a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/move/__tests__/moveModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/move/__tests__/moveModal.spec.js
@@ -37,6 +37,9 @@ function makeWrapper(selected) {
       currentChannel() {
         return { id: 'testing' };
       },
+      online() {
+        return false;
+      },
     },
     methods: {
       getChildren() {
@@ -46,6 +49,7 @@ function makeWrapper(selected) {
     stubs: {
       Breadcrumbs: true,
       ResourceDrawer: true,
+      OfflineText: true,
     },
   });
 }
@@ -85,18 +89,12 @@ describe('moveModal', () => {
     });
   });
   describe('close actions', () => {
-    it('closing modal should navigate to parent route', () => {
+    it('closing modal should clear moveNodes', () => {
       const setMoveNodes = jest.fn();
       wrapper.setMethods({ setMoveNodes });
       wrapper.find('[data-test="close"]').trigger('click');
       expect(setMoveNodes).toHaveBeenCalledWith([]);
     });
-    it('clicking CANCEL button should navigate to parent route', () => {
-      const setMoveNodes = jest.fn();
-      wrapper.setMethods({ setMoveNodes });
-      wrapper.find('[data-test="cancel"]').trigger('click');
-      expect(setMoveNodes).toHaveBeenCalledWith([]);
-    });
   });
   describe('new topic actions', () => {
     it('clicking NEW TOPIC button should open NewTopicModal', () => {
@@ -106,8 +104,8 @@ describe('moveModal', () => {
     it('NewTopicModal emitted createTopic event should trigger createContentNode', () => {
       const newTopicTitle = 'New topic title';
       const createTopic = jest.fn();
-      wrapper.setData({ showNewTopicModal: true });
       wrapper.setMethods({ createTopic });
+      wrapper.setData({ showNewTopicModal: true });
       wrapper.find('[data-test="newtopicmodal"]').vm.$emit('createTopic', newTopicTitle);
       expect(createTopic).toHaveBeenCalledWith(newTopicTitle);
     });
@@ -125,36 +123,12 @@ describe('moveModal', () => {
       expect(moveNodes).toHaveBeenCalled();
     });
     it('clicking MOVE button should trigger a move action', () => {
-      const moveContentNodesMock = jest.fn();
-      function moveContentNodes() {
-        return new Promise(resolve => {
-          moveContentNodesMock();
-          resolve();
-        });
-      }
-      wrapper.setData({ targetNodeId: testChildTopic.id });
+      const moveContentNodes = jest.fn().mockReturnValue(Promise.resolve());
       wrapper.setMethods({ moveContentNodes });
+      wrapper.setData({ targetNodeId: testChildTopic.id });
+
       wrapper.find('[data-test="move"]').trigger('click');
-      expect(moveContentNodesMock).toHaveBeenCalled();
-    });
-    it('clicking COPY TO CLIPBOARD button call copyNodesToClipboard', () => {
-      const copyToClipboard = jest.fn();
-      wrapper.setMethods({ copyToClipboard });
-      wrapper.find('[data-test="clipboard"]').trigger('click');
-      expect(copyToClipboard).toHaveBeenCalled();
-    });
-    it('clicking COPY TO CLIPBOARD button should trigger a copy action to clipboard', () => {
-      const copyContentNodesToClipboardMock = jest.fn();
-      function copyToClipboard() {
-        return new Promise(resolve => {
-          copyContentNodesToClipboardMock();
-          resolve();
-        });
-      }
-      wrapper.setProps({ moveNodeIds: 'node 1, node 2' });
-      wrapper.setMethods({ copyToClipboard });
-      wrapper.find('[data-test="clipboard"]').trigger('click');
-      expect(copyContentNodesToClipboardMock).toHaveBeenCalled();
+      expect(moveContentNodes).toHaveBeenCalled();
     });
   });
 });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditIndex.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditIndex.vue
index eedc340d4c..c5ba7ed62e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ChannelEditIndex.vue
@@ -12,6 +12,7 @@
         <IconButton v-if="canEdit" icon="delete" :text="$tr('openTrash')" :to="trashLink" />
       </VToolbarItems>
       <VSpacer />
+      <OfflineText indicator />
       <template v-if="$vuetify.breakpoint.smAndUp">
         <VTooltip v-if="canEdit" bottom attach="body">
           <template #activator="{ on }">
@@ -119,6 +120,7 @@
   import IconButton from 'shared/views/IconButton';
   import ToolBar from 'shared/views/ToolBar';
   import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
+  import OfflineText from 'shared/views/OfflineText';
   import { RouterNames as ChannelRouterNames } from 'frontend/channelList/constants';
 
   export default {
@@ -134,6 +136,7 @@
       MoveModal,
       SyncResourcesModal,
       Clipboard,
+      OfflineText,
     },
     data() {
       return {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ResourcePanel.vue
index 8fab57cec4..2bb7cf8b72 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ResourcePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ResourcePanel.vue
@@ -24,7 +24,7 @@
       </VLayout>
     </VFlex>
     <LoadingText v-if="loading || !node" class="mt-4" />
-    <VFlex v-else xs12>
+    <VFlex v-else xs12 class="pb-5">
       <VLayout row align-center class="my-2">
         <h1 class="notranslate title font-weight-bold">
           {{ node.title }}
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
index ca4312baa4..9729d377cf 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue
@@ -1,149 +1,129 @@
 <template>
 
-  <VDialog
-    fullscreen
-    persistent
-    scrollable
-    :value="showDialog"
-    transition="dialog-bottom-transition"
-    attach="body"
-    app
-  >
-    <VCard>
-      <router-view />
-      <VToolbar fixed clipped-right color="primary" dark app>
-        <VToolbarItems>
-          <VBtn flat icon :to="backLink" exact data-test="close">
-            <Icon>clear</Icon>
-          </VBtn>
-        </VToolbarItems>
-        <VToolbarTitle>
-          {{ $tr('trashModalTitle') }}
-        </VToolbarTitle>
-      </VToolbar>
-      <VContent style="padding-top: 64px;">
-        <VLayout row>
-          <LoadingText v-if="loading" absolute data-test="loading" />
-          <VContainer v-else-if="!items.length" fluid data-test="empty">
-            <h1 class="headline font-weight-bold pt-4 mt-4 text-xs-center">
-              {{ $tr('trashEmptyText') }}
-            </h1>
-            <p class="subheading text-xs-center mt-3">
-              {{ $tr('trashEmptySubtext') }}
+  <FullscreenModal v-model="dialog" :header="$tr('trashModalTitle')">
+    <router-view />
+    <VContent>
+      <VLayout row>
+        <LoadingText v-if="loading" data-test="loading" />
+        <VContainer v-else-if="!items.length" fluid data-test="empty">
+          <h1 class="headline font-weight-bold pt-4 mt-4 text-xs-center">
+            {{ $tr('trashEmptyText') }}
+          </h1>
+          <p class="subheading text-xs-center mt-3">
+            {{ $tr('trashEmptySubtext') }}
+          </p>
+        </VContainer>
+        <VContainer
+          v-else
+          fluid
+          class="pa-4"
+          data-test="list"
+          style="max-height: calc(100vh - 128px); overflow-y: auto;"
+        >
+          <VCard style="width: 100%; max-width: 900px; margin: 0 auto;" flat class="pa-2">
+            <p class="title mt-4">
+              {{ $tr('itemCountText', {count: items.length}) }}
             </p>
-          </VContainer>
-          <VContainer
-            v-else
-            fluid
-            class="pa-4"
-            data-test="list"
-            style="max-height: calc(100vh - 128px); overflow-y: auto;"
-          >
-            <VCard style="width: 100%; max-width: 900px; margin: 0 auto;" flat class="pa-2">
-              <p class="title mt-4">
-                {{ $tr('itemCountText', {count: items.length}) }}
-              </p>
-              <VDataTable :headers="headers" :items="items" hide-actions must-sort>
-                <template #headerCell="props">
-                  <VLayout v-if="props.header.selectAll" row align-center>
-                    <VFlex shrink>
-                      <VCheckbox
-                        :value="Boolean(selected.length)"
-                        hide-details
-                        color="primary"
-                        :indeterminate="!!selected.length && selected.length !== items.length"
-                        data-test="selectall"
-                        @change="toggleSelectAll"
-                      />
-                    </VFlex>
-                    <VFlex>
-                      {{ props.header.text }}
-                    </VFlex>
-                  </VLayout>
-                  <span v-else>
+            <VDataTable :headers="headers" :items="items" hide-actions must-sort>
+              <template #headerCell="props">
+                <VLayout v-if="props.header.selectAll" row align-center>
+                  <VFlex shrink>
+                    <VCheckbox
+                      :value="Boolean(selected.length)"
+                      hide-details
+                      color="primary"
+                      :indeterminate="!!selected.length && selected.length !== items.length"
+                      data-test="selectall"
+                      @change="toggleSelectAll"
+                    />
+                  </VFlex>
+                  <VFlex>
                     {{ props.header.text }}
-                  </span>
-                </template>
-                <template #items="{item}">
-                  <tr :key="item.id" :style="{backgroundColor: getItemBackground(item.id)}">
-                    <td>
-                      <VLayout row align-center>
-                        <VFlex shrink>
-                          <VCheckbox
-                            v-model="selected"
-                            color="primary"
-                            :value="item.id"
-                            data-test="checkbox"
-                            hide-details
-                          />
-                        </VFlex>
-                        <VFlex shrink class="mx-3">
-                          <ContentNodeIcon :kind="item.kind" />
-                        </VFlex>
-                        <VFlex class="notranslate" grow>
-                          <ActionLink
-                            :text="item.title"
-                            data-test="item"
-                            @click="previewNodeId = item.id"
-                          />
-                        </VFlex>
-                      </VLayout>
-                    </td>
-                    <td class="text-xs-right">
-                      {{ $formatRelative(item.modified, { now: new Date() }) }}
-                    </td>
-                  </tr>
-                </template>
-              </VDataTable>
-            </VCard>
-          </VContainer>
-          <ResourceDrawer
-            style="margin-top: 64px;"
-            :nodeId="previewNodeId"
-            :channelId="currentChannel.id"
-            app
-            @close="previewNodeId = null"
-          />
-        </VLayout>
-      </VContent>
-      <BottomToolBar flat color="white" clipped-right app>
-        <VSpacer />
-        <span v-if="selected.length" class="mr-4 subheading">
-          {{ $tr('selectedCountText', {count: selected.length} ) }}
-        </span>
-        <VBtn
-          flat
-          :disabled="!selected.length"
-          data-test="restore"
-          @click="restoreItems"
-        >
-          {{ $tr('restoreButton') }}
+                  </VFlex>
+                </VLayout>
+                <span v-else>
+                  {{ props.header.text }}
+                </span>
+              </template>
+              <template #items="{item}">
+                <tr :key="item.id" :style="{backgroundColor: getItemBackground(item.id)}">
+                  <td>
+                    <VLayout row align-center>
+                      <VFlex shrink>
+                        <VCheckbox
+                          v-model="selected"
+                          color="primary"
+                          :value="item.id"
+                          data-test="checkbox"
+                          hide-details
+                        />
+                      </VFlex>
+                      <VFlex shrink class="mx-3">
+                        <ContentNodeIcon :kind="item.kind" />
+                      </VFlex>
+                      <VFlex class="notranslate" grow>
+                        <ActionLink
+                          :text="item.title"
+                          data-test="item"
+                          @click="previewNodeId = item.id"
+                        />
+                      </VFlex>
+                    </VLayout>
+                  </td>
+                  <td class="text-xs-right">
+                    {{ $formatRelative(item.modified, { now: new Date() }) }}
+                  </td>
+                </tr>
+              </template>
+            </VDataTable>
+          </VCard>
+        </VContainer>
+        <ResourceDrawer
+          style="margin-top: 64px;"
+          :nodeId="previewNodeId"
+          :channelId="currentChannel.id"
+          app
+          @close="previewNodeId = null"
+        />
+      </VLayout>
+    </VContent>
+    <template #bottom>
+      <span v-if="selected.length" class="mr-4 subheading">
+        {{ $tr('selectedCountText', {count: selected.length} ) }}
+      </span>
+      <VSpacer />
+      <VBtn
+        flat
+        :disabled="!selected.length"
+        data-test="restore"
+        @click="restoreItems"
+      >
+        {{ $tr('restoreButton') }}
+      </VBtn>
+      <VBtn
+        color="primary"
+        :disabled="!selected.length"
+        data-test="delete"
+        @click="showConfirmationDialog = true"
+      >
+        {{ $tr('deleteButton') }}
+      </VBtn>
+    </template>
+    <MessageDialog
+      v-model="showConfirmationDialog"
+      :header="$tr('deleteConfirmationHeader', {count: selected.length})"
+      :text="$tr('deleteConfirmationText')"
+    >
+      <template #buttons="{close}">
+        <VBtn flat data-test="closeconfirm" @click="close">
+          {{ $tr('deleteConfirmationCancelButton') }}
         </VBtn>
-        <VBtn
-          color="primary"
-          :disabled="!selected.length"
-          data-test="delete"
-          @click="showConfirmationDialog = true"
-        >
-          {{ $tr('deleteButton') }}
+        <VBtn color="primary" data-test="deleteconfirm" @click="deleteNodes">
+          {{ $tr('deleteConfirmationDeleteButton') }}
         </VBtn>
-      </BottomToolBar>
-      <MessageDialog
-        v-model="showConfirmationDialog"
-        :header="$tr('deleteConfirmationHeader', {count: selected.length})"
-        :text="$tr('deleteConfirmationText')"
-      >
-        <template #buttons="{close}">
-          <VBtn flat data-test="closeconfirm" @click="close">
-            {{ $tr('deleteConfirmationCancelButton') }}
-          </VBtn>
-          <VBtn color="primary" data-test="deleteconfirm" @click="deleteNodes">
-            {{ $tr('deleteConfirmationDeleteButton') }}
-          </VBtn>
-        </template>
-      </MessageDialog>
-    </VCard>
-  </VDialog>
+      </template>
+    </MessageDialog>
+  </FullscreenModal>
 
 </template>
 <script>
@@ -153,20 +133,20 @@
   import { RouterNames } from '../../constants';
   import ResourceDrawer from '../../components/ResourceDrawer';
   import ContentNodeIcon from 'shared/views/ContentNodeIcon';
-  import BottomToolBar from 'shared/views/BottomToolBar';
   import ActionLink from 'shared/views/ActionLink';
   import MessageDialog from 'shared/views/MessageDialog';
   import LoadingText from 'shared/views/LoadingText';
+  import FullscreenModal from 'shared/views/FullscreenModal';
 
   export default {
     name: 'TrashModal',
     components: {
       ContentNodeIcon,
-      BottomToolBar,
       ResourceDrawer,
       ActionLink,
       MessageDialog,
       LoadingText,
+      FullscreenModal,
     },
     data() {
       return {
@@ -179,8 +159,15 @@
     computed: {
       ...mapGetters('currentChannel', ['currentChannel', 'trashId']),
       ...mapGetters('contentNode', ['getContentNodeChildren']),
-      showDialog() {
-        return this.$route.name === RouterNames.TRASH;
+      dialog: {
+        get() {
+          return this.$route.name === RouterNames.TRASH;
+        },
+        set(value) {
+          if (!value) {
+            this.$router.push(this.backLink);
+          }
+        },
       },
       headers() {
         return [
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
index 3fcc3e33c4..f200206a08 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js
@@ -1,44 +1,9 @@
-import { mount, createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
-import VueRouter from 'vue-router';
+import { mount } from '@vue/test-utils';
 import TrashModal from '../TrashModal';
+import store from '../../../store';
+import router from '../../../router';
 import { RouterNames } from '../../../constants';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-
-const currentChannelGetters = {
-  currentChannel: jest.fn(),
-  trashId: jest.fn(),
-};
-const contentNodeGetters = {
-  getContentNodeChildren: jest.fn(),
-};
-const contentNodeActions = {
-  deleteContentNodes: jest.fn(),
-  loadTrashTree: jest.fn(),
-  loadContentNodes: jest.fn(),
-};
-const contentNodeMutations = {
-  SET_MOVE_NODES: jest.fn(),
-};
-
-const store = new Store({
-  modules: {
-    currentChannel: {
-      namespaced: true,
-      getters: currentChannelGetters,
-    },
-    contentNode: {
-      namespaced: true,
-      getters: contentNodeGetters,
-      mutations: contentNodeMutations,
-      actions: contentNodeActions,
-    },
-  },
-});
-
 const testChildren = [
   {
     id: 'test1',
@@ -60,23 +25,6 @@ const testChildren = [
   },
 ];
 
-const router = new VueRouter({
-  routes: [
-    {
-      name: 'PARENT_ROUTE',
-      path: '/',
-      children: [
-        {
-          name: RouterNames.TRASH,
-          path: 'trash',
-          component: TrashModal,
-          props: true,
-        },
-      ],
-    },
-  ],
-});
-
 function makeWrapper(items) {
   return mount(TrashModal, {
     store,
@@ -93,9 +41,18 @@ function makeWrapper(items) {
       items() {
         return items || testChildren;
       },
+      offline() {
+        return false;
+      },
+      backLink() {
+        return {
+          name: 'TEST_PARENT',
+        };
+      },
     },
     stubs: {
       ResourceDrawer: true,
+      OfflineText: true,
     },
   });
 }
@@ -103,8 +60,8 @@ function makeWrapper(items) {
 describe('trashModal', () => {
   let wrapper;
   beforeEach(() => {
-    router.push({ name: RouterNames.TRASH });
     wrapper = makeWrapper();
+    router.replace({ name: RouterNames.TRASH, params: { nodeId: 'test' } });
     wrapper.setData({ loading: false });
   });
   describe('on load', () => {
@@ -138,7 +95,7 @@ describe('trashModal', () => {
   describe('on close', () => {
     it('clicking close button should go back to parent route', () => {
       wrapper.find('[data-test="close"]').trigger('click');
-      expect(wrapper.vm.$route.name).toBe('PARENT_ROUTE');
+      expect(wrapper.vm.$route.name).toBe('TEST_PARENT');
     });
   });
   describe('on delete', () => {
@@ -156,18 +113,13 @@ describe('trashModal', () => {
       expect(wrapper.vm.showConfirmationDialog).toBe(false);
     });
     it('clicking DELETE PERMANENTLY on delete confirmation dialog should trigger deletion', () => {
-      const deleteContentNodeMock = jest.fn();
-      function deleteContentNodes() {
-        return new Promise(resolve => {
-          deleteContentNodeMock();
-          resolve();
-        });
-      }
+      const selected = testChildren.map(c => c.id);
+      const deleteContentNodes = jest.fn().mockReturnValue(Promise.resolve());
       wrapper.setMethods({ deleteContentNodes });
-      wrapper.setData({ selected: testChildren.map(c => c.id) });
+      wrapper.setData({ selected });
       wrapper.setData({ showConfirmationDialog: true });
       wrapper.find('[data-test="deleteconfirm"]').trigger('click');
-      expect(deleteContentNodeMock).toHaveBeenCalled();
+      expect(deleteContentNodes).toHaveBeenCalledWith(selected);
     });
   });
   describe('on restore', () => {
@@ -177,14 +129,14 @@ describe('trashModal', () => {
     it('RESTORE should set moveNodes', () => {
       const selected = testChildren.map(c => c.id);
       const setMoveNodes = jest.fn();
-      wrapper.setData({ selected });
       wrapper.setMethods({ setMoveNodes });
+      wrapper.setData({ selected });
       wrapper.find('[data-test="restore"]').trigger('click');
       expect(setMoveNodes).toHaveBeenCalledWith(selected);
     });
     it('RESTORE should clear selected and previewNodeId', () => {
-      wrapper.setData({ selected: testChildren.map(c => c.id) });
       wrapper.setMethods({ setMoveNodes: jest.fn() });
+      wrapper.setData({ selected: testChildren.map(c => c.id) });
       wrapper.find('[data-test="restore"]').trigger('click');
       expect(wrapper.vm.selected).toEqual([]);
       expect(wrapper.vm.previewNodeId).toBe(null);
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/assessmentItem/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/assessmentItem/actions.js
index bed1bb6795..f4e36fbca3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/assessmentItem/actions.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/assessmentItem/actions.js
@@ -4,7 +4,7 @@ import { AssessmentItem, uuid4, resolveUpdater } from 'shared/data/resources';
  * Load all assessment items belonging to a content node.
  */
 export function loadNodeAssessmentItems(context, nodeId) {
-  return loadAssessmentItems(context, { contentnode: nodeId });
+  return loadAssessmentItems(context, { contentnode__in: [nodeId] });
 }
 
 export function loadAssessmentItems(context, params = {}) {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 3a2d78c18c..5b082ffc31 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -2,9 +2,18 @@
 
   <div>
     <CatalogFilters />
-    <VContainer fluid :class="$vuetify.breakpoint.xsOnly? 'pa-0' : 'pa-4'">
+    <VSlideYTransition>
+      <ToolBar v-show="offline" dense clipped-left absolute>
+        <OfflineText />
+      </ToolBar>
+    </VSlideYTransition>
+    <VContainer
+      fluid
+      :class="$vuetify.breakpoint.xsOnly? 'pa-0' : 'pa-4'"
+      :style="`margin-top: ${offline? 48: 0}`"
+    >
       <LoadingText v-if="loading" />
-      <VLayout v-else grid wrap class="list-wrapper mt-4">
+      <VLayout v-else grid wrap class="list-wrapper py-5">
         <!-- Results bar -->
         <VFlex xs12 class="mb-2">
           <h1 class="title ml-1 mb-2">
@@ -112,6 +121,8 @@
   import Pagination from 'shared/views/Pagination';
   import BottomToolBar from 'shared/views/BottomToolBar';
   import Checkbox from 'shared/views/form/Checkbox';
+  import ToolBar from 'shared/views/ToolBar';
+  import OfflineText from 'shared/views/OfflineText';
   import { constantsTranslationMixin } from 'shared/mixins';
   import { channelExportMixin } from 'shared/views/channel/mixins';
 
@@ -124,6 +135,8 @@
       Pagination,
       BottomToolBar,
       Checkbox,
+      ToolBar,
+      OfflineText,
     },
     mixins: [channelExportMixin, constantsTranslationMixin],
     data() {
@@ -150,6 +163,9 @@
     computed: {
       ...mapGetters('channel', ['getChannels']),
       ...mapState('channelList', ['page']),
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
       selectAll: {
         get() {
           return this.selected.length === this.channels.length;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 6c694d6839..d2c0d0cda8 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -46,28 +46,33 @@
       </template>
     </AppBar>
     <VContent>
+      <OfflineText v-if="!isCatalogPage" toolbar :offset="toolbarHeight" />
       <VContainer
         fluid
-        class="main-container"
-        :style="`height: calc(100vh - ${loggedIn? 112 : 64}px);`"
+        class="main-container pa-0"
+        :style="`height: calc(100vh - ${contentOffset}px); margin-top: ${offline? 48: 0}px;`"
       >
-        <VLayout row wrap justify-center>
-          <VFlex xs12 sm10 md8 lg6>
-            <VCard v-if="invitationList.length" v-show="isChannelList">
-              <VList subheader>
-                <VSubheader>{{ $tr('invitations', {count: invitationList.length}) }}</VSubheader>
-                <ChannelInvitation
-                  v-for="invitation in invitationList"
-                  :key="invitation.id"
-                  :invitationID="invitation.id"
-                />
-              </VList>
-            </VCard>
-          </VFlex>
-        </VLayout>
-        <keep-alive>
-          <router-view :key="$route.name + $route.params.listType ? $route.params.listType : ''" />
-        </keep-alive>
+        <VContainer fluid :class="isCatalogPage? 'pa-0' : 'pa-4'">
+          <VLayout row wrap justify-center>
+            <VFlex xs12 sm10 md8 lg6>
+              <VCard v-if="invitationList.length" v-show="isChannelList">
+                <VList subheader>
+                  <VSubheader>{{ $tr('invitations', {count: invitationList.length}) }}</VSubheader>
+                  <ChannelInvitation
+                    v-for="invitation in invitationList"
+                    :key="invitation.id"
+                    :invitationID="invitation.id"
+                  />
+                </VList>
+              </VCard>
+            </VFlex>
+          </VLayout>
+          <keep-alive>
+            <router-view
+              :key="$route.name + $route.params.listType ? $route.params.listType : ''"
+            />
+          </keep-alive>
+        </VContainer>
       </VContainer>
     </VContent>
     <GlobalSnackbar />
@@ -84,6 +89,7 @@
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
   import KolibriLogo from 'shared/views/KolibriLogo';
   import AppBar from 'shared/views/AppBar';
+  import OfflineText from 'shared/views/OfflineText';
 
   const CATALOG_PAGES = [
     RouterNames.CATALOG_ITEMS,
@@ -98,10 +104,12 @@
       ChannelInvitation,
       GlobalSnackbar,
       KolibriLogo,
+      OfflineText,
     },
     computed: {
       ...mapState({
         loggedIn: state => state.session.loggedIn,
+        offline: state => !state.connection.online,
       }),
       isRTL() {
         return window.isRTL;
@@ -112,6 +120,15 @@
       isFAQPage() {
         return this.$route.name === RouterNames.CATALOG_FAQ;
       },
+      isCatalogPage() {
+        return this.$route.name === RouterNames.CATALOG_ITEMS;
+      },
+      toolbarHeight() {
+        return this.loggedIn ? 112 : 64;
+      },
+      contentOffset() {
+        return this.toolbarHeight + (this.offline ? 48 : 0);
+      },
       ...mapGetters('channelList', ['invitations']),
       lists() {
         return Object.values(ListTypes).filter(l => l !== 'public');
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
index 04a43b4e0a..a1ce0cbd08 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue
@@ -1,156 +1,143 @@
 <template>
 
-  <VDialog
-    ref="dialog"
-    :value="$route.params.channelSetId == channelSetId"
-    attach="body"
-    fullscreen
-    scrollable
-    transition="dialog-bottom-transition"
+  <FullscreenModal
+    v-model="dialog"
+    :header="headerText"
   >
-    <VCard style="overflow-y: auto;">
-      <VWindow v-model="step">
-        <VWindowItem :value="1">
-          <VToolbar card prominent dark color="primary">
-            <VBtn icon data-test="close" @click="cancelChanges">
-              <Icon>clear</Icon>
-            </VBtn>
-            <MessageDialog
-              v-model="showUnsavedDialog"
-              :header="$tr('unsavedChangesHeader')"
-              :text="$tr('unsavedChangesText')"
-            >
-              <template #buttons="{close}">
-                <VSpacer />
-                <VBtn flat data-test="confirm-cancel" @click="confirmCancel">
-                  {{ $tr('closeButton') }}
-                </VBtn>
-                <VBtn color="primary" @click="save">
-                  {{ $tr('saveButton') }}
-                </VBtn>
-              </template>
-            </MessageDialog>
-            <VToolbarTitle>
-              {{ headerText }}
-            </VToolbarTitle>
-            <VSpacer />
-            <VBtn flat data-test="save" @click="save">
-              {{ saveText }}
-            </VBtn>
-          </VToolbar>
-          <VContainer>
-            <VLayout row justify-center>
-              <VFlex md12 lg10 xl8>
-                <VForm ref="channelsetform">
-                  <VTextField
-                    v-model="name"
-                    :rules="[nameValid]"
-                    :label="$tr('titleLabel')"
-                    maxlength="200"
-                    counter
-                    outline
-                  />
-                </VForm>
+    <template v-if="step === 1 && !channelSet.isNew" #header>
+      <span class="notranslate">{{ title }}</span>
+    </template>
+    <template v-if="step === 2" #close>
+      <VBtn icon @click="step --">
+        <Icon>
+          arrow_back
+        </Icon>
+      </VBtn>
+    </template>
+    <template v-if="step === 1" #action>
+      <VBtn flat data-test="save" @click="save">
+        {{ saveText }}
+      </VBtn>
+    </template>
+    <VWindow v-model="step">
+      <VWindowItem :value="1">
+        <VContainer>
+          <VLayout row justify-center>
+            <VFlex md12 lg10 xl8>
+              <VForm ref="channelsetform">
+                <VTextField
+                  v-model="name"
+                  :rules="[nameValid]"
+                  :label="$tr('titleLabel')"
+                  maxlength="200"
+                  counter
+                  outline
+                />
+              </VForm>
 
-                <div v-if="channelSet.secret_token">
-                  <p>{{ $tr('tokenPrompt') }}</p>
-                  <div class="caption grey--text text--darken-1">
-                    {{ $tr('token') }}
-                  </div>
-                  <CopyToken
-                    :token="channelSet.secret_token"
-                    style="max-width: max-content;"
-                  />
+              <div v-if="channelSet.secret_token">
+                <p>{{ $tr('tokenPrompt') }}</p>
+                <div class="caption grey--text text--darken-1">
+                  {{ $tr('token') }}
                 </div>
+                <CopyToken
+                  :token="channelSet.secret_token"
+                  style="max-width: max-content;"
+                />
+              </div>
 
-                <h1 class="headline mt-4 font-weight-bold">
-                  {{ $tr('channels') }}
-                </h1>
-                <p class="subheading">
-                  {{ $tr('channelCountText', {'channelCount': channels.length}) }}
-                </p>
+              <h1 class="headline mt-4 font-weight-bold">
+                {{ $tr('channels') }}
+              </h1>
+              <p class="subheading">
+                {{ $tr('channelCountText', {'channelCount': channels.length}) }}
+              </p>
 
-                <!-- Channel list section -->
-                <VCardText v-if="loadingChannels">
-                  {{ $tr('loading') }}
-                </VCardText>
-                <div v-else fluid>
-                  <VBtn color="primary" data-test="select" @click="step ++">
-                    {{ $tr('selectChannelsHeader') }}
-                  </VBtn>
-                  <VCard v-for="channelId in channels" :key="channelId" flat>
-                    <ChannelItem :channelId="channelId">
-                      <VBtn
-                        flat
-                        class="ma-0"
-                        color="primary"
-                        data-test="remove"
-                        @click="removeChannel(channelId)"
-                      >
-                        {{ $tr('removeText') }}
-                      </VBtn>
-                    </ChannelItem>
-                  </VCard>
-                </div>
-              </VFlex>
-            </VLayout>
-          </VContainer>
-        </VWindowItem>
-        <VWindowItem :value="2" lazy>
-          <VToolbar card prominent dark color="primary" class="notranslate">
-            <VBtn icon @click="step --">
-              <VIcon class="notranslate">
-                arrow_back
-              </VIcon>
-            </VBtn>
-            <VToolbarTitle>
-              {{ $tr('selectChannelsHeader') }}
-            </VToolbarTitle>
-          </VToolbar>
-          <VContainer fill-height>
-            <VLayout row justify-center>
-              <VFlex md12 lg10 xl8>
-                <h1 class="headline font-weight-bold mb-2">
+              <!-- Channel list section -->
+              <VCardText v-if="loadingChannels">
+                {{ $tr('loading') }}
+              </VCardText>
+              <div v-else fluid>
+                <VBtn color="primary" data-test="select" @click="step ++">
                   {{ $tr('selectChannelsHeader') }}
-                </h1>
-                <p>{{ $tr('publishedChannelsOnlyText') }}</p>
-                <VContainer>
-                  <VTabs showArrows slider-color="primary">
-                    <VTab
-                      v-for="listType in lists"
-                      :key="listType.id"
-                    >
-                      {{ $tr(listType) }}
-                    </VTab>
-                    <VTabItem
-                      v-for="listType in lists"
-                      :key="listType.id"
-                      lazy
+                </VBtn>
+                <VCard v-for="channelId in channels" :key="channelId" flat>
+                  <ChannelItem :channelId="channelId">
+                    <VBtn
+                      flat
+                      class="ma-0"
+                      color="primary"
+                      data-test="remove"
+                      @click="removeChannel(channelId)"
                     >
-                      <ChannelSelectionList v-model="channels" :listType="listType" />
-                    </VTabItem>
-                  </VTabs>
-                </VContainer>
-              </VFlex>
-            </VLayout>
-          </VContainer>
-          <BottomToolBar color="white" flat>
-            <VSpacer />
-            <div class="subheading mx-4">
-              {{ $tr('channelSelectedCountText', {'channelCount': channels.length}) }}
-            </div>
-            <VBtn
-              color="primary"
-              data-test="finish"
-              @click="step --"
-            >
-              {{ $tr('finish') }}
-            </VBtn>
-          </BottomToolBar>
-        </VWindowItem>
-      </VWindow>
-    </VCard>
-  </VDialog>
+                      {{ $tr('removeText') }}
+                    </VBtn>
+                  </ChannelItem>
+                </VCard>
+              </div>
+            </VFlex>
+          </VLayout>
+        </VContainer>
+      </VWindowItem>
+      <VWindowItem :value="2" lazy>
+        <VContainer fill-height>
+          <VLayout row justify-center>
+            <VFlex md12 lg10 xl8>
+              <h1 class="headline font-weight-bold mb-2">
+                {{ $tr('selectChannelsHeader') }}
+              </h1>
+              <p>{{ $tr('publishedChannelsOnlyText') }}</p>
+              <VContainer>
+                <VTabs showArrows slider-color="primary">
+                  <VTab
+                    v-for="listType in lists"
+                    :key="listType.id"
+                  >
+                    {{ $tr(listType) }}
+                  </VTab>
+                  <VTabItem
+                    v-for="listType in lists"
+                    :key="listType.id"
+                    lazy
+                  >
+                    <ChannelSelectionList v-model="channels" :listType="listType" />
+                  </VTabItem>
+                </VTabs>
+              </VContainer>
+            </VFlex>
+          </VLayout>
+        </VContainer>
+      </VWindowItem>
+    </VWindow>
+    <MessageDialog
+      v-model="showUnsavedDialog"
+      :header="$tr('unsavedChangesHeader')"
+      :text="$tr('unsavedChangesText')"
+    >
+      <template #buttons="{close}">
+        <VSpacer />
+        <VBtn flat data-test="confirm-cancel" @click="confirmCancel">
+          {{ $tr('closeButton') }}
+        </VBtn>
+        <VBtn color="primary" @click="save">
+          {{ $tr('saveButton') }}
+        </VBtn>
+      </template>
+    </MessageDialog>
+    <template v-if="step === 2" #bottom>
+      <div class="subheading mx-4">
+        {{ $tr('channelSelectedCountText', {'channelCount': channels.length}) }}
+      </div>
+      <VSpacer />
+      <VBtn
+        color="primary"
+        data-test="finish"
+        @click="step --"
+      >
+        {{ $tr('finish') }}
+      </VBtn>
+    </template>
+  </FullscreenModal>
 
 </template>
 
@@ -163,17 +150,17 @@
   import ChannelItem from './ChannelItem';
   import { ChangeTracker } from 'shared/data/changes';
   import CopyToken from 'shared/views/CopyToken';
-  import BottomToolBar from 'shared/views/BottomToolBar';
   import MessageDialog from 'shared/views/MessageDialog';
+  import FullscreenModal from 'shared/views/FullscreenModal';
 
   export default {
     name: 'ChannelSetModal',
     components: {
       CopyToken,
       ChannelSelectionList,
-      BottomToolBar,
       MessageDialog,
       ChannelItem,
+      FullscreenModal,
     },
     props: {
       channelSetId: {
@@ -193,6 +180,16 @@
     },
     computed: {
       ...mapGetters('channelSet', ['getChannelSet']),
+      dialog: {
+        get() {
+          return this.$route.params.channelSetId == this.channelSetId;
+        },
+        set(value) {
+          if (!value) {
+            this.cancelChanges();
+          }
+        },
+      },
       name: {
         get() {
           return this.channelSet.name || '';
@@ -218,7 +215,7 @@
         return this.getChannelSet(this.channelSetId) || {};
       },
       headerText() {
-        return this.channelSet.isNew ? this.$tr('creatingChannelSet') : this.title;
+        return this.step > 1 ? this.$tr('selectChannelsHeader') : this.$tr('creatingChannelSet');
       },
       saveText() {
         return this.channelSet.isNew ? this.$tr('createButton') : this.$tr('saveButton');
@@ -236,11 +233,6 @@
         });
       });
     },
-    mounted() {
-      // For some reason the 'hideScroll' method of the VDialog is not
-      // being called the first time the dialog is opened, so do that explicitly
-      this.$refs.dialog.hideScroll();
-    },
     methods: {
       ...mapActions('channel', ['loadChannelList']),
       ...mapActions('channelSet', ['updateChannelSet', 'loadChannelSet', 'deleteChannelSet']),
diff --git a/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue b/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
index db19970161..eb542011a3 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
@@ -17,8 +17,9 @@
         </VTab>
       </template>
     </AppBar>
+    <OfflineText toolbar :offset="112" />
     <VContent>
-      <VContainer class="ml-0 pl-5">
+      <VContainer class="ml-0 pl-5" :class="offline? 'pt-5': 'pt-2'">
         <router-view />
       </VContainer>
     </VContent>
@@ -30,14 +31,19 @@
 
 <script>
 
+  import { mapState } from 'vuex';
   import { RouterNames } from '../constants';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
   import AppBar from 'shared/views/AppBar';
+  import OfflineText from 'shared/views/OfflineText';
 
   export default {
     name: 'SettingsIndex',
-    components: { GlobalSnackbar, AppBar },
+    components: { GlobalSnackbar, AppBar, OfflineText },
     computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
       RouterNames() {
         return RouterNames;
       },
diff --git a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
new file mode 100644
index 0000000000..08dd072e87
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
@@ -0,0 +1,129 @@
+<template>
+
+  <VDialog
+    ref="dialog"
+    :value="value"
+    app
+    attach="body"
+    fullscreen
+    scrollable
+    persistent
+    transition="dialog-bottom-transition"
+    v-bind="$attrs"
+  >
+    <VCard style="overflow-y: auto;">
+      <VToolbar
+        :color="color"
+        dark
+        fixed
+        :extension-height="48"
+        clipped-left
+        clipped-right
+      >
+        <VToolbarItems>
+          <slot name="close">
+            <VBtn flat icon exact data-test="close" @click="$emit('input', false)">
+              <Icon>clear</Icon>
+            </VBtn>
+          </slot>
+        </VToolbarItems>
+        <VToolbarTitle>
+          <slot name="header">
+            {{ header }}
+          </slot>
+        </VToolbarTitle>
+        <VSpacer />
+        <slot name="action"></slot>
+        <template v-if="$slots.tabs" #extension>
+          <VTabs
+            color="primary"
+            slider-color="white"
+            align-with-title
+          >
+            <slot name="tabs"></slot>
+          </VTabs>
+        </template>
+      </VToolbar>
+      <OfflineText toolbar :offset="topToolbarHeight" />
+      <VContainer :style="`margin-top: ${contentOffset}px;`" fluid class="pa-0">
+        <slot></slot>
+      </VContainer>
+      <BottomToolBar v-if="$slots.bottom" color="white" flat clipped-left clipped-right>
+        <slot name="bottom"></slot>
+      </BottomToolBar>
+    </VCard>
+  </VDialog>
+
+</template>
+
+<script>
+
+  import { mapState } from 'vuex';
+  import OfflineText from './OfflineText';
+  import BottomToolBar from './BottomToolBar';
+
+  export default {
+    name: 'FullscreenModal',
+    components: {
+      OfflineText,
+      BottomToolBar,
+    },
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      header: {
+        type: String,
+        required: false,
+      },
+      color: {
+        type: String,
+        default: 'primary',
+      },
+    },
+    computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
+      topToolbarHeight() {
+        return this.$slots.tabs && this.$slots.tabs.length ? 112 : 64;
+      },
+      contentOffset() {
+        return this.topToolbarHeight + (this.offline ? 48 : 0);
+      },
+    },
+    watch: {
+      value(val) {
+        this.hideHTMLScroll(!!val);
+      },
+    },
+    mounted() {
+      this.hideHTMLScroll(true);
+    },
+    methods: {
+      hideHTMLScroll(hidden) {
+        document.querySelector('html').style = hidden
+          ? 'overflow-y: hidden !important;'
+          : 'overflow-y: auto !important';
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="less" scoped>
+
+  .v-toolbar__title {
+    font-weight: bold;
+  }
+
+  /deep/ .v-tabs__div {
+    min-width: 160px;
+  }
+  /deep/ .v-tabs__container {
+    padding: 0;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue b/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
new file mode 100644
index 0000000000..aa5926afc0
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
@@ -0,0 +1,88 @@
+<template>
+
+  <VFadeTransition v-if="offline" data-test="text">
+    <template v-show="offline && !libraryMode">
+      <VTooltip v-if="indicator" bottom z-index="300">
+        <template v-slot:activator="{ on }">
+          <div class="px-4" v-on="on">
+            <Icon class="mx-2">
+              cloud_off
+            </Icon>
+            <span class="font-weight-bold">
+              {{ $tr('offlineIndicatorText') }}
+            </span>
+          </div>
+        </template>
+        <span>{{ $tr('offlineText') }}</span>
+      </VTooltip>
+      <ToolBar
+        v-else-if="toolbar"
+        color="white"
+        dense
+        flat
+        fixed
+        clipped-left
+        clipped-right
+        :style="`margin-top: ${offset}px;`"
+        v-bind="$attrs"
+      >
+        <Icon class="mx-3">
+          cloud_off
+        </Icon>
+        <span>{{ $tr('offlineText') }}</span>
+      </ToolBar>
+      <div v-else>
+        <Icon class="mx-3">
+          cloud_off
+        </Icon>
+        <span>{{ $tr('offlineText') }}</span>
+      </div>
+    </template>
+  </VFadeTransition>
+
+</template>
+
+<script>
+
+  import { mapState } from 'vuex';
+  import ToolBar from './ToolBar';
+
+  export default {
+    name: 'OfflineText',
+    components: {
+      ToolBar,
+    },
+    props: {
+      indicator: {
+        type: Boolean,
+        default: false,
+      },
+      toolbar: {
+        type: Boolean,
+        default: false,
+      },
+      offset: {
+        type: Number,
+        default: 0,
+      },
+    },
+    computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
+      libraryMode() {
+        return window.libraryMode;
+      },
+    },
+    $trs: {
+      offlineIndicatorText: 'Offline',
+      offlineText: 'Offline. Your changes will be saved once your connection is back.',
+    },
+  };
+
+</script>
+<style scoped>
+  span {
+    vertical-align: bottom;
+  }
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/offlineText.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/offlineText.spec.js
new file mode 100644
index 0000000000..7fa0046ae1
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/offlineText.spec.js
@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils';
+import OfflineText from '../OfflineText';
+import storeFactory from 'shared/vuex/baseStore';
+
+const store = storeFactory();
+function makeWrapper() {
+  return mount(OfflineText, {
+    store,
+  });
+}
+
+describe('offlineText', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = makeWrapper();
+  });
+  it('should show if connection is offline', () => {
+    store.state.connection.online = false;
+    expect(wrapper.find('[data-test="text"]').exists()).toBe(true);
+  });
+  it('should be hidden if connection is online', () => {
+    store.state.connection.online = true;
+    expect(wrapper.find('[data-test="text"]').exists()).toBe(false);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
index d4b68d4679..6f34c7f304 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
@@ -1,59 +1,42 @@
 <template>
 
-  <VDialog
-    ref="dialog"
-    :value="channelId && routeParamID === channelId"
-    attach="body"
-    fullscreen
-    scrollable
-    app
-    persistent
-    transition="dialog-bottom-transition"
+  <FullscreenModal
+    v-model="dialog"
+    color="black"
   >
-    <VCard class="channel-wrapper">
-      <VToolbar dark fixed>
-        <VToolbarItems>
-          <VBtn flat icon :to="backLink" exact data-test="close">
-            <Icon>clear</Icon>
-          </VBtn>
-        </VToolbarItems>
-        <VToolbarTitle v-if="channel" class="notranslate">
-          {{ channel.name }}
-        </VToolbarTitle>
-      </VToolbar>
-      <LoadingText v-if="loading" absolute />
-      <div v-else-if="channel">
-        <VCardText>
-          <VLayout class="mb-3">
-            <VSpacer v-if="$vuetify.breakpoint.smAndUp" />
-            <VMenu offset-y>
-              <template v-slot:activator="{ on }">
-                <VBtn color="primary" dark :block="$vuetify.breakpoint.xsOnly" v-on="on">
-                  {{ $tr('downloadButton') }}
-                  &nbsp;
-                  <Icon>arrow_drop_down</Icon>
-                </VBtn>
-              </template>
-              <VList>
-                <VListTile @click="generatePdf">
-                  <VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
-                </VListTile>
-                <VListTile data-test="dl-csv" @click="generateChannelsCSV([channelWithDetails])">
-                  <VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
-                </VListTile>
-              </VList>
-            </VMenu>
-          </VLayout>
-          <Details
-            v-if="channel && details"
-            class="channel-details-wrapper"
-            :details="channelWithDetails"
-            :loading="loading"
-          />
-        </VCardText>
-      </div>
-    </VCard>
-  </VDialog>
+    <template #header>
+      <span class="notranslate">{{ channel.name }}</span>
+    </template>
+    <LoadingText v-if="loading" absolute />
+    <VCardText v-else-if="channel">
+      <VLayout class="mb-3">
+        <VSpacer v-if="$vuetify.breakpoint.smAndUp" />
+        <VMenu offset-y>
+          <template v-slot:activator="{ on }">
+            <VBtn color="primary" dark :block="$vuetify.breakpoint.xsOnly" v-on="on">
+              {{ $tr('downloadButton') }}
+              &nbsp;
+              <Icon>arrow_drop_down</Icon>
+            </VBtn>
+          </template>
+          <VList>
+            <VListTile @click="generatePdf">
+              <VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
+            </VListTile>
+            <VListTile data-test="dl-csv" @click="generateChannelsCSV([channelWithDetails])">
+              <VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
+            </VListTile>
+          </VList>
+        </VMenu>
+      </VLayout>
+      <Details
+        v-if="channel && details"
+        class="channel-details-wrapper"
+        :details="channelWithDetails"
+        :loading="loading"
+      />
+    </VCardText>
+  </FullscreenModal>
 
 </template>
 
@@ -64,12 +47,14 @@
   import Details from 'shared/views/details/Details';
   import { fileSizeMixin, constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import LoadingText from 'shared/views/LoadingText';
+  import FullscreenModal from 'shared/views/FullscreenModal';
 
   export default {
     name: 'ChannelDetailsModal',
     components: {
       Details,
       LoadingText,
+      FullscreenModal,
     },
     mixins: [fileSizeMixin, constantsTranslationMixin, routerMixin, channelExportMixin],
     props: {
@@ -86,6 +71,16 @@
     },
     computed: {
       ...mapGetters('channel', ['getChannel']),
+      dialog: {
+        get() {
+          return this.channelId && this.routeParamID === this.channelId;
+        },
+        set(value) {
+          if (!value) {
+            this.$router.push(this.backLink);
+          }
+        },
+      },
       channel() {
         return this.getChannel(this.channelId);
       },
@@ -109,11 +104,6 @@
         return this.$route.params.channelId;
       },
     },
-    watch: {
-      routeParamID(val) {
-        this.hideHTMLScroll(!!val);
-      },
-    },
     beforeRouteEnter(to, from, next) {
       next(vm => {
         if (vm.channel) {
@@ -124,7 +114,6 @@
     },
     mounted() {
       this.load();
-      this.hideHTMLScroll(true);
     },
     methods: {
       ...mapActions('channel', ['loadChannel', 'loadChannelDetails']),
@@ -156,11 +145,6 @@
             this.loadError = true;
           });
       },
-      hideHTMLScroll(hidden) {
-        document.querySelector('html').style = hidden
-          ? 'overflow-y: hidden !important;'
-          : 'overflow-y: auto !important';
-      },
     },
     $trs: {
       downloadButton: 'Download channel summary',
@@ -184,13 +168,6 @@
     color: gray;
   }
 
-  .channel-wrapper {
-    overflow-y: auto;
-    .v-card__text {
-      padding-top: 72px;
-    }
-  }
-
   .channel-details-wrapper {
     max-width: 900px;
     padding-bottom: 100px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
index 0c00e83e9a..78104167e3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
@@ -1,125 +1,90 @@
 <template>
 
-  <VDialog
-    ref="dialog"
-    :value="channelId && routeParamID === channelId"
-    attach="body"
-    fullscreen
-    scrollable
-    transition="dialog-bottom-transition"
+  <FullscreenModal
+    v-model="dialog"
+    :header="isNew? $tr('creatingHeader') : header"
   >
-    <VCard>
-      <VToolbar card prominent dark color="primary" extension-height="48px">
-        <VBtn icon data-test="close" @click="cancelChanges">
-          <Icon>
-            clear
-          </Icon>
-        </VBtn>
-        <VToolbarTitle>
-          <template v-if="isNew">
-            {{ $tr('creatingHeader') }}
-          </template>
-          <template v-else>
-            {{ header }}
-          </template>
-        </VToolbarTitle>
-        <VSpacer />
-        <VBtn flat @click="saveChannel">
-          {{ isNew? $tr('createButton') : $tr('saveChangesButton' ) }}
-        </VBtn>
-        <template v-if="!isNew" #extension>
-          <VTabs
-            v-model="currentTab"
-            color="primary"
-            slider-color="white"
-            align-with-title
-          >
-            <VTab :href="`#edit`" class="px-3">
-              {{ $tr('editTab') }}
-            </VTab>
-            <VTab :href="`#share`" class="px-3">
-              {{ $tr('shareTab') }}
-            </VTab>
-          </VTabs>
-        </template>
-      </VToolbar>
-      <VProgressLinear
-        v-if="loading"
-        indeterminate
-        color="primary"
-        style="margin: 0;"
-        height="5"
-      />
-      <VCardText v-else>
-        <VTabsItems v-model="currentTab">
-          <VTabItem value="edit">
-            <VCard flat class="pa-5">
-              <VLayout row>
-                <VFlex style="max-width: 800px;">
-                  <VForm ref="detailsform">
-                    <ChannelThumbnail v-model="thumbnail" />
-                    <fieldset class="py-1 mt-3 channel-info">
-                      <legend class="py-1 mb-2 legend-title font-weight-bold">
-                        {{ $tr('details') }}
-                      </legend>
-
-                      <VTextField
-                        v-model="name"
-                        outline
-                        :label="$tr('channelName')"
-                        :rules="[() => name.length ? true : $tr('channelError')]"
-                        required
-                      />
-                      <LanguageDropdown
-                        v-model="language"
-                        class="notranslate"
-                        outline
-                        required
-                      />
-                      <VTextarea
-                        v-model="description"
-                        outline
-                        :label="$tr('channelDescription')"
-                        maxlength="400"
-                        rows="4"
-                        auto-grow
-                        counter
-                      />
-                    </fieldset>
-
-                    <ContentDefaults
-                      v-model="contentDefaults"
-                    />
-                  </VForm>
-                </VFlex>
-              </VLayout>
-            </VCard>
-          </VTabItem>
-          <VTabItem value="share">
-            <VCard flat class="pa-5">
-              <ChannelSharing :channelId="channelId" />
-            </VCard>
-          </VTabItem>
-        </VTabsItems>
-      </VCardText>
+    <template #action>
+      <VBtn flat @click="saveChannel">
+        {{ isNew? $tr('createButton') : $tr('saveChangesButton' ) }}
+      </VBtn>
+    </template>
+    <template v-if="!isNew" #tabs>
+      <VTab href="#edit" class="px-3" @click="currentTab = 'edit'">
+        {{ $tr('editTab') }}
+      </VTab>
+      <VTab href="#share" class="px-3" @click="currentTab = 'share'">
+        {{ $tr('shareTab') }}
+      </VTab>
+    </template>
+    <VProgressLinear
+      v-if="loading"
+      indeterminate
+      color="primary"
+      style="margin: 0;"
+      height="5"
+    />
+    <VCardText v-else>
+      <VTabsItems v-model="currentTab">
+        <VTabItem value="edit">
+          <VForm ref="detailsform" class="pa-4 mb-5" style="max-width: 800px;">
+            <ChannelThumbnail v-model="thumbnail" />
+            <fieldset class="py-1 mt-3 channel-info">
+              <legend class="py-1 mb-2 legend-title font-weight-bold">
+                {{ $tr('details') }}
+              </legend>
+              <VTextField
+                v-model="name"
+                outline
+                :label="$tr('channelName')"
+                :rules="[() => name.length ? true : $tr('channelError')]"
+                required
+              />
+              <LanguageDropdown
+                v-model="language"
+                class="notranslate"
+                outline
+                required
+              />
+              <VTextarea
+                v-model="description"
+                outline
+                :label="$tr('channelDescription')"
+                maxlength="400"
+                rows="4"
+                auto-grow
+                counter
+              />
+            </fieldset>
 
-      <MessageDialog
-        v-model="showUnsavedDialog"
-        :header="$tr('unsavedChangesHeader')"
-        :text="$tr('unsavedChangesText')"
-      >
-        <template #buttons="{close}">
-          <VBtn flat @click="confirmCancel">
-            {{ $tr('closeButton') }}
-          </VBtn>
-          <VBtn color="primary" @click="close">
-            {{ $tr('keepEditingButton') }}
-          </VBtn>
+            <ContentDefaults
+              v-model="contentDefaults"
+            />
+          </VForm>
+        </VTabItem>
+        <VTabItem value="share">
+          <VCard flat class="pa-5">
+            <ChannelSharing :channelId="channelId" />
+          </VCard>
+        </VTabItem>
+      </VTabsItems>
+    </VCardText>
 
-        </template>
-      </MessageDialog>
-    </VCard>
-  </VDialog>
+    <MessageDialog
+      v-model="showUnsavedDialog"
+      :header="$tr('unsavedChangesHeader')"
+      :text="$tr('unsavedChangesText')"
+    >
+      <template #buttons="{close}">
+        <VBtn flat @click="confirmCancel">
+          {{ $tr('closeButton') }}
+        </VBtn>
+        <VBtn color="primary" @click="close">
+          {{ $tr('keepEditingButton') }}
+        </VBtn>
+      </template>
+    </MessageDialog>
+  </FullscreenModal>
 
 </template>
 
@@ -134,6 +99,7 @@
   import MessageDialog from 'shared/views/MessageDialog';
   import LanguageDropdown from 'shared/views/LanguageDropdown';
   import ContentDefaults from 'shared/views/form/ContentDefaults';
+  import FullscreenModal from 'shared/views/FullscreenModal';
 
   export default {
     name: 'ChannelModal',
@@ -143,6 +109,7 @@
       ChannelThumbnail,
       ChannelSharing,
       MessageDialog,
+      FullscreenModal,
     },
     props: {
       channelId: {
@@ -170,9 +137,21 @@
       routeParamID() {
         return this.$route.params.channelId;
       },
+      dialog: {
+        get() {
+          return this.channelId && this.routeParamID === this.channelId;
+        },
+        set(value) {
+          if (!value) {
+            this.cancelChanges();
+          }
+        },
+      },
       currentTab: {
         get() {
-          return this.$route.query.sharing ? 'share' : 'edit';
+          const sharing = this.$route.query.sharing;
+          // On load, sharing counts as string, so just process as if a string
+          return sharing && sharing.toString() === 'true' ? 'share' : 'edit';
         },
         set(value) {
           this.$router.replace({
@@ -233,18 +212,12 @@
         },
       },
     },
-    watch: {
-      routeParamID(val) {
-        this.hideHTMLScroll(!!val);
-      },
-    },
     beforeRouteEnter(to, from, next) {
       next(vm => {
         const channelId = to.params.channelId;
         vm.verifyChannel(channelId)
           .then(() => {
             vm.header = vm.channel.name; // Get channel name when user enters modal
-            vm.hideHTMLScroll(true);
           })
           .catch(() => {
             // Couldn't verify the channel details, so go back!
@@ -256,20 +229,11 @@
       });
     },
     mounted() {
-      // For some reason the 'hideScroll' method of the VDialog is not
-      // being called the first time the dialog is opened, so do that explicitly
-      this.$refs.dialog.hideScroll();
-
       // Set expiry to 1ms
       this.header = this.channel.name; // Get channel name when user enters modal
     },
     methods: {
       ...mapActions('channel', ['updateChannel', 'loadChannel', 'deleteChannel', 'commitChannel']),
-      hideHTMLScroll(hidden) {
-        document.querySelector('html').style = hidden
-          ? 'overflow-y: hidden !important;'
-          : 'overflow-y: auto !important';
-      },
       saveChannel() {
         if (this.$refs.detailsform.validate()) {
           this.changed = false;