diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 17fa852e0d..0eb5a48c65 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -17,7 +17,7 @@
         <!-- Results bar -->
         <VFlex xs12 class="mb-2">
           <h1 class="mb-2 ml-1 title">
-            {{ $tr('resultsText', { count: page.count }) }}
+            {{ $tr("resultsText", { count: page.count }) }}
           </h1>
           <ActionLink
             v-if="page.count && !selecting"
@@ -46,41 +46,35 @@
             <ChannelItem
               :channelId="item.id"
               :detailsRouteName="detailsRouteName"
-              style="flex-grow: 1; width: 100%;"
+              style="flex-grow: 1; width: 100%"
             />
           </VLayout>
         </VFlex>
-        <VFlex xs12 style="padding-bottom: 72px;">
+        <VFlex xs12 style="padding-bottom: 72px">
           <VLayout justify-center>
-            <Pagination
-              :pageNumber="page.page_number"
-              :totalPages="page.total_pages"
-            />
+            <Pagination :pageNumber="page.page_number" :totalPages="page.total_pages" />
           </VLayout>
         </VFlex>
       </VLayout>
-      <BottomToolBar
+      <BottomBar
         v-if="selecting"
-        clipped-left
-        color="white"
-        flat
         data-test="toolbar"
-        :height="$vuetify.breakpoint.xsOnly ? '72px' : '56px'"
+        :appearanceOverrides="{ height: $vuetify.breakpoint.xsOnly ? '72px' : '56px' }"
       >
         <VLayout row wrap align-center>
           <VFlex xs12 sm4 class="pb-1">
-            {{ $tr('channelSelectionCount', { count: selectedCount }) }}
+            {{ $tr("channelSelectionCount", { count: selectedCount }) }}
           </VFlex>
           <VFlex xs12 sm8>
             <VLayout row>
               <VSpacer />
               <VBtn flat data-test="cancel" class="ma-0" @click="setSelection(false)">
-                {{ $tr('cancelButton') }}
+                {{ $tr("cancelButton") }}
               </VBtn>
               <Menu top>
                 <template #activator="{ on }">
                   <VBtn color="primary" class="ma-0 mx-2" v-on="on">
-                    {{ $tr('downloadButton') }}
+                    {{ $tr("downloadButton") }}
                     <Icon class="ml-1">
                       arrow_drop_up
                     </Icon>
@@ -88,18 +82,17 @@
                 </template>
                 <VList>
                   <VListTile @click="downloadPDF">
-                    <VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
+                    <VListTileTitle>{{ $tr("downloadPDF") }}</VListTileTitle>
                   </VListTile>
                   <VListTile data-test="download-csv" @click="downloadCSV">
-                    <VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
+                    <VListTileTitle>{{ $tr("downloadCSV") }}</VListTileTitle>
                   </VListTile>
                 </VList>
               </Menu>
             </VLayout>
           </VFlex>
         </VLayout>
-
-      </BottomToolBar>
+      </BottomBar>
     </VContainer>
   </div>
 
@@ -118,7 +111,7 @@
   import ChannelItem from './ChannelItem';
   import LoadingText from 'shared/views/LoadingText';
   import Pagination from 'shared/views/Pagination';
-  import BottomToolBar from 'shared/views/BottomToolBar';
+  import BottomBar from 'shared/views/BottomBar';
   import Checkbox from 'shared/views/form/Checkbox';
   import ToolBar from 'shared/views/ToolBar';
   import OfflineText from 'shared/views/OfflineText';
@@ -132,7 +125,7 @@
       LoadingText,
       CatalogFilters,
       Pagination,
-      BottomToolBar,
+      BottomBar,
       Checkbox,
       ToolBar,
       OfflineText,
@@ -145,17 +138,17 @@
         selecting: false,
 
         /*
-          jayoshih: router guard makes it difficult to track
-            differences between previous query params and new
-            query params, so just track it manually
-        */
+            jayoshih: router guard makes it difficult to track
+              differences between previous query params and new
+              query params, so just track it manually
+          */
         previousQuery: this.$route.query,
 
         /*
-          jayoshih: using excluded logic here instead of selected
-            to account for selections across pages (some channels
-            not in current page)
-        */
+            jayoshih: using excluded logic here instead of selected
+              to account for selections across pages (some channels
+              not in current page)
+          */
         excluded: [],
       };
     },
diff --git a/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue b/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
index ca0182341f..03202e099e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/BottomBar.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="bottom-bar pa-2">
+  <div class="bottom-bar pa-2" :style="appearanceOverrides">
     <slot></slot>
   </div>
 
@@ -9,6 +9,12 @@
 
   export default {
     name: 'BottomBar',
+    props: {
+      appearanceOverrides: {
+        type: Object,
+        default: () => {},
+      },
+    },
   };
 
 </script>
@@ -17,7 +23,9 @@
   .bottom-bar {
     position: fixed;
     bottom: 0;
+    left: 0;
     z-index: 3;
+    display: flex;
     width: 100%;
     height: 64px;
     background-color: #ffffff;
diff --git a/contentcuration/contentcuration/frontend/shared/views/BottomToolBar.vue b/contentcuration/contentcuration/frontend/shared/views/BottomToolBar.vue
deleted file mode 100644
index 56b421fdd2..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/BottomToolBar.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-
-  <VToolbar v-bind="$attrs" style="top: unset; bottom: 0em;" fixed>
-    <slot></slot>
-  </VToolbar>
-
-</template>
-
-
-<script>
-
-  export default {
-    name: 'BottomToolBar',
-  };
-
-</script>
-
-<style lang="less" scoped>
-
-  /deep/ .v-toolbar__content {
-    border-top: 1px solid #eeeeee;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
index 2173e500d1..fcfb661891 100644
--- a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
@@ -10,7 +10,7 @@
     transition="dialog-bottom-transition"
     v-bind="$attrs"
   >
-    <VCard style="overflow-y: auto;">
+    <VCard style="overflow-y: auto">
       <VToolbar
         :color="color"
         dark
@@ -34,11 +34,7 @@
         <VSpacer />
         <slot name="action"></slot>
         <template v-if="$slots.tabs" #extension>
-          <Tabs
-            :color="color"
-            slider-color="white"
-            align-with-title
-          >
+          <Tabs :color="color" slider-color="white" align-with-title>
             <slot name="tabs"></slot>
           </Tabs>
         </template>
@@ -47,9 +43,9 @@
       <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>
+      <BottomBar v-if="$slots.bottom">
         <slot name="bottom"></slot>
-      </BottomToolBar>
+      </BottomBar>
     </VCard>
   </VDialog>
 
@@ -59,14 +55,14 @@
 
   import { mapState } from 'vuex';
   import OfflineText from './OfflineText';
-  import BottomToolBar from './BottomToolBar';
+  import BottomBar from './BottomBar';
   import Tabs from './Tabs';
 
   export default {
     name: 'FullscreenModal',
     components: {
       OfflineText,
-      BottomToolBar,
+      BottomBar,
       Tabs,
     },
     props: {
@@ -118,7 +114,6 @@
 
 </script>
 
-
 <style lang="less" scoped>
 
   /deep/ .v-tabs__div {