diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioImmersiveModal.vue b/contentcuration/contentcuration/frontend/shared/views/StudioImmersiveModal.vue
new file mode 100644
index 0000000000..6c959b4e03
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioImmersiveModal.vue
@@ -0,0 +1,145 @@
+<template>
+
+  <div
+    v-if="value"
+    class="modal-wrapper"
+  >
+    <KToolbar
+      :textColor="dark ? 'white' : 'black'"
+      :style="{ backgroundColor: toolbarBackgroundColor }"
+    >
+      <template #icon>
+        <KIconButton
+          icon="close"
+          :ariaLabel="$tr('close')"
+          :tooltip="$tr('close')"
+          :color="dark ? $themeTokens.textInverted : $themeTokens.text"
+          data-test="close"
+          @click="$emit('input', false)"
+        />
+      </template>
+
+      <template #default>
+        <span class="notranslate toolbar-title">
+          <slot name="header">{{ title }}</slot>
+        </span>
+      </template>
+
+      <template #actions>
+        <slot name="action"></slot>
+      </template>
+    </KToolbar>
+
+    <StudioOfflineAlert :offset="64" />
+
+    <StudioPage
+      :offline="offline"
+      :marginTop="contentMarginTop"
+    >
+      <slot></slot>
+    </StudioPage>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapState } from 'vuex';
+  import StudioOfflineAlert from './StudioOfflineAlert';
+  import StudioPage from './StudioPage';
+
+  export default {
+    name: 'StudioImmersiveModal',
+    components: {
+      StudioOfflineAlert,
+      StudioPage,
+    },
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      color: {
+        type: String,
+        default: 'appBarDark',
+      },
+      dark: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
+      toolbarBackgroundColor() {
+        return this.color === 'appBarDark'
+          ? this.$themePalette.grey.v_900
+          : this.$themeTokens[this.color] || this.color;
+      },
+      contentMarginTop() {
+        return this.offline ? 112 : 64;
+      },
+    },
+    watch: {
+      value(val) {
+        this.hideHTMLScroll(!!val);
+        if (val) {
+          document.addEventListener('keydown', this.handleKeyDown);
+        } else {
+          document.removeEventListener('keydown', this.handleKeyDown);
+        }
+      },
+    },
+    beforeDestroy() {
+      this.hideHTMLScroll(false);
+      document.removeEventListener('keydown', this.handleKeyDown);
+    },
+    methods: {
+      hideHTMLScroll(hidden) {
+        document.querySelector('html').style = hidden
+          ? 'overflow-y: hidden !important;'
+          : 'overflow-y: auto !important';
+      },
+      handleKeyDown(event) {
+        if (event.key === 'Escape') {
+          this.$emit('input', false);
+        }
+      },
+    },
+    $trs: {
+      close: 'Close',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .modal-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 17;
+    overflow-y: auto;
+    background-color: white;
+  }
+
+  .toolbar-title {
+    display: block;
+    max-width: calc(100% - 80px);
+    margin-inline-start: 16px;
+    margin-inline-end: 16px;
+    white-space: nowrap;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioPage.vue b/contentcuration/contentcuration/frontend/shared/views/StudioPage.vue
index e473c66c39..eba2dae12f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioPage.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioPage.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <main class="studio-page-outer">
+  <main
+    class="studio-page-outer"
+    :style="outerStyle"
+  >
     <div
       class="studio-page-inner"
       :style="innerStyle"
@@ -31,10 +34,19 @@
         maxWidth: windowIsLarge.value ? '1000px' : '100%',
       }));
 
-      return { innerStyle };
+      const outerStyle = computed(() => {
+        const marginTop = props.marginTop !== null ? props.marginTop : 104;
+        return {
+          marginTop: `${marginTop}px`,
+          height: `calc(100vh - ${marginTop}px)`,
+        };
+      });
+
+      return { innerStyle, outerStyle };
     },
     props: {
       offline: { type: Boolean, default: false },
+      marginTop: { type: Number, default: null },
     },
   };
 
@@ -45,8 +57,6 @@
 
   .studio-page-outer {
     width: 100%;
-    height: calc(100vh - 104px);
-    margin-top: 104px;
     margin-bottom: 16px;
     overflow-x: hidden;
     overflow-y: auto;
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
index 65c886f2c7..ea652809fe 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <FullscreenModal
+  <StudioImmersiveModal
     v-model="dialog"
     color="appBarDark"
     :dark="true"
@@ -8,50 +8,32 @@
     <template #header>
       <span class="notranslate">{{ channel ? channel.name : '' }}</span>
     </template>
-    <LoadingText
-      v-if="loading"
-      absolute
-    />
-    <VCardText v-else-if="channel">
-      <VLayout class="mb-3">
-        <VSpacer v-if="$vuetify.breakpoint.smAndUp" />
-        <BaseMenu>
-          <template #activator="{ on }">
-            <VBtn
-              color="primary"
-              dark
-              :block="$vuetify.breakpoint.xsOnly"
-              v-on="on"
-            >
-              {{ $tr('downloadButton') }}
-              &nbsp;
-              <Icon
-                icon="dropdown"
-                :color="$themeTokens.textInverted"
-              />
-            </VBtn>
+    <StudioLargeLoader v-if="loading" />
+    <div v-else-if="channel">
+      <div class="download-button-container">
+        <KButton
+          class="download-button"
+          :text="$tr('downloadButton')"
+          :primary="true"
+          hasDropdown
+          data-test="download-button"
+        >
+          <template #menu>
+            <KDropdownMenu
+              :options="downloadOptions"
+              @select="handleDownloadSelect"
+            />
           </template>
-          <VList>
-            <VListTile @click="generatePDF">
-              <VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
-            </VListTile>
-            <VListTile
-              data-test="dl-csv"
-              @click="generateCSV"
-            >
-              <VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
-            </VListTile>
-          </VList>
-        </BaseMenu>
-      </VLayout>
+        </KButton>
+      </div>
       <DetailsPanel
         v-if="channel && details"
         class="channel-details-wrapper"
         :details="channelWithDetails"
         :loading="loading"
       />
-    </VCardText>
-  </FullscreenModal>
+    </div>
+  </StudioImmersiveModal>
 
 </template>
 
@@ -61,16 +43,16 @@
   import { mapActions, mapGetters } from 'vuex';
   import { channelExportMixin } from './mixins';
   import DetailsPanel from 'shared/views/details/DetailsPanel.vue';
+  import StudioLargeLoader from 'shared/views/StudioLargeLoader';
+  import StudioImmersiveModal from 'shared/views/StudioImmersiveModal';
   import { routerMixin } from 'shared/mixins';
-  import LoadingText from 'shared/views/LoadingText';
-  import FullscreenModal from 'shared/views/FullscreenModal';
 
   export default {
     name: 'ChannelDetailsModal',
     components: {
       DetailsPanel,
-      LoadingText,
-      FullscreenModal,
+      StudioLargeLoader,
+      StudioImmersiveModal,
     },
     mixins: [routerMixin, channelExportMixin],
     props: {
@@ -98,6 +80,12 @@
         }
         return { ...this.channel, ...this.details };
       },
+      downloadOptions() {
+        return [
+          { label: this.$tr('downloadPDF'), value: 'pdf' },
+          { label: this.$tr('downloadCSV'), value: 'csv' },
+        ];
+      },
       backLink() {
         return {
           name: this.$route.query.last,
@@ -135,6 +123,13 @@
     },
     methods: {
       ...mapActions('channel', ['loadChannel', 'loadChannelDetails']),
+      handleDownloadSelect(option) {
+        if (option.value === 'pdf') {
+          this.generatePDF();
+        } else if (option.value === 'csv') {
+          this.generateCSV();
+        }
+      },
       async generatePDF() {
         this.$analytics.trackEvent('channel_details', 'Download PDF', {
           id: this.channelId,
@@ -187,14 +182,24 @@
 
 <style lang="scss" scoped>
 
-  .v-toolbar__title {
-    font-weight: bold;
+  .download-button-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 24px;
   }
 
-  .draft-header {
-    padding-right: 10px;
-    font-style: italic;
-    color: gray;
+  [dir='rtl'] .download-button-container {
+    justify-content: flex-start;
+  }
+
+  @media (max-width: 600px) {
+    .download-button-container {
+      justify-content: center;
+    }
+
+    .download-button {
+      width: 100%;
+    }
   }
 
   .channel-details-wrapper {
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelDetailsModal.spec.js b/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelDetailsModal.spec.js
index 93e507bfa2..cf2c414242 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelDetailsModal.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/__tests__/channelDetailsModal.spec.js
@@ -1,99 +1,236 @@
-import { mount } from '@vue/test-utils';
+import { render, screen, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex, { Store } from 'vuex';
 import VueRouter from 'vue-router';
-import ChannelDetailsModal from './../ChannelDetailsModal';
-import storeFactory from 'shared/vuex/baseStore';
-
-const PARENTROUTE = 'Parent route';
-const TESTROUTE = 'test channel details modal route';
-const router = new VueRouter({
-  routes: [
-    {
-      name: PARENTROUTE,
-      path: '/',
-      props: true,
-      children: [
-        {
-          name: TESTROUTE,
-          path: '/testroute',
-          props: true,
-          component: ChannelDetailsModal,
+import ChannelDetailsModal from '../ChannelDetailsModal.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+
+const channelId = '11111111111111111111111111111111';
+const testChannel = {
+  id: channelId,
+  name: 'Test Channel',
+  description: 'Test Description',
+};
+
+const testDetails = {
+  count: 10,
+  size: 1024,
+};
+
+const mockActions = {
+  loadChannel: jest.fn(() => Promise.resolve(testChannel)),
+  loadChannelDetails: jest.fn(() => Promise.resolve(testDetails)),
+};
+
+const createMockStore = () => {
+  return new Store({
+    state: {
+      connection: {
+        online: true,
+      },
+    },
+    modules: {
+      channel: {
+        namespaced: true,
+        state: {
+          channelsMap: {
+            [channelId]: testChannel,
+          },
+        },
+        getters: {
+          getChannel: state => id => state.channelsMap[id],
         },
-      ],
+        actions: mockActions,
+      },
     },
-  ],
-});
+  });
+};
 
-const store = storeFactory();
-const channelId = '11111111111111111111111111111111';
+const PARENT_ROUTE = 'parent-route';
+const TEST_ROUTE = 'channel-details';
 
-function makeWrapper() {
-  return mount(ChannelDetailsModal, {
-    router,
+const createRouter = () => {
+  return new VueRouter({
+    routes: [
+      {
+        name: PARENT_ROUTE,
+        path: '/',
+        children: [
+          {
+            name: TEST_ROUTE,
+            path: '/channel/:channelId',
+            component: ChannelDetailsModal,
+          },
+        ],
+      },
+    ],
+  });
+};
+
+const renderComponent = (options = {}) => {
+  const store = createMockStore();
+  const router = createRouter();
+
+  router.push({
+    name: TEST_ROUTE,
+    params: { channelId },
+    query: { last: PARENT_ROUTE },
+  });
+
+  return render(ChannelDetailsModal, {
+    localVue,
     store,
-    propsData: {
+    router,
+    props: {
       channelId,
     },
-    computed: {
-      channel() {
-        return {
-          name: 'test',
-        };
+    stubs: {
+      StudioImmersiveModal: {
+        template: `
+          <div v-if="value" data-testid="modal-wrapper">
+            <button data-test="close" @click="handleClose">Close</button>
+            <div><slot name="header"></slot></div>
+            <slot></slot>
+          </div>
+        `,
+        props: ['value'],
+        methods: {
+          handleClose() {
+            this.$emit('input', false);
+          },
+        },
+        mounted() {
+          const handleKeyDown = event => {
+            if (event.key === 'Escape') {
+              this.$emit('input', false);
+            }
+          };
+          document.addEventListener('keydown', handleKeyDown);
+          this.$once('hook:beforeDestroy', () => {
+            document.removeEventListener('keydown', handleKeyDown);
+          });
+        },
+      },
+      StudioLargeLoader: {
+        template: '<div data-testid="loader">Loading...</div>',
+      },
+      DetailsPanel: {
+        template: '<div data-testid="details-panel">Details Panel</div>',
+        props: ['details', 'loading'],
+      },
+      KButton: {
+        template: `
+          <button :data-test="$attrs['data-test']">
+            {{ text }}
+          </button>
+        `,
+        props: ['text', 'primary', 'hasDropdown'],
+      },
+      KDropdownMenu: {
+        template: '<div></div>',
+        props: ['options'],
+      },
+      StudioPage: {
+        template: '<div><slot></slot></div>',
+        props: ['offline', 'marginTop'],
+      },
+      StudioOfflineAlert: {
+        template: '<div></div>',
+        props: ['offset'],
+      },
+    },
+    mocks: {
+      $analytics: {
+        trackAction: jest.fn(),
+        trackEvent: jest.fn(),
       },
     },
+    ...options,
   });
-}
-
-describe('channelDetailsModal', () => {
-  let wrapper;
+};
 
+describe('ChannelDetailsModal', () => {
   beforeEach(() => {
-    router.push({
-      name: TESTROUTE,
-      params: {
-        channelId,
-      },
+    jest.clearAllMocks();
+  });
+
+  it('should display loading indicator initially', () => {
+    renderComponent();
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+  });
+
+  it('should display channel name in header', async () => {
+    renderComponent();
+    await waitFor(() => {
+      expect(screen.getByText(testChannel.name)).toBeInTheDocument();
     });
-    wrapper = makeWrapper();
   });
 
-  it('clicking close should close the modal', async () => {
-    await wrapper.findComponent('[data-test="close"]').trigger('click');
-    expect(wrapper.vm.dialog).toBe(false);
+  it('should close modal when close button is clicked', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText(testChannel.name)).toBeInTheDocument();
+    });
+
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal-wrapper')).not.toBeInTheDocument();
+    });
   });
 
-  it('clicking download CSV button should call generateChannelsCSV', async () => {
-    await wrapper.setData({ loading: false });
-    const generateChannelsCSV = jest.spyOn(wrapper.vm, 'generateChannelsCSV');
-    generateChannelsCSV.mockImplementation(() => Promise.resolve());
-    await wrapper.findComponent('[data-test="dl-csv"]').trigger('click');
-    expect(generateChannelsCSV).toHaveBeenCalledWith([wrapper.vm.channelWithDetails]);
+  it('should close modal when ESC key is pressed', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('modal-wrapper')).toBeInTheDocument();
+    });
+
+    await user.keyboard('{Escape}');
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal-wrapper')).not.toBeInTheDocument();
+    });
   });
 
-  describe('load', () => {
-    let loadChannel;
-    let loadChannelDetails;
+  it('should display download button after loading', async () => {
+    renderComponent();
 
-    beforeEach(() => {
-      loadChannel = jest.spyOn(wrapper.vm, 'loadChannel');
-      loadChannelDetails = jest.spyOn(wrapper.vm, 'loadChannelDetails');
+    await waitFor(() => {
+      expect(screen.getByText('Download channel summary')).toBeInTheDocument();
     });
+  });
+
+  it('should display details panel after loading', async () => {
+    renderComponent();
 
-    it('should automatically close if loadChannel does not find a channel', async () => {
-      await wrapper.vm.load();
-      expect(wrapper.vm.dialog).toBe(false);
+    await waitFor(() => {
+      expect(screen.getByTestId('details-panel')).toBeInTheDocument();
     });
+  });
 
-    it('load should call loadChannel and loadChannelDetails', async () => {
-      await wrapper.vm.load();
-      expect(loadChannel).toHaveBeenCalled();
-      expect(loadChannelDetails).toHaveBeenCalled();
+  it('should call loadChannel and loadChannelDetails on mount', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(mockActions.loadChannel).toHaveBeenCalledWith(expect.any(Object), channelId);
+      expect(mockActions.loadChannelDetails).toHaveBeenCalledWith(expect.any(Object), channelId);
     });
+  });
+
+  it('should track analytics on mount', async () => {
+    renderComponent();
 
-    it('load should update document.title', async () => {
-      const channel = { name: 'testing channel' };
-      loadChannel.mockImplementation(() => Promise.resolve(channel));
-      await wrapper.vm.load();
-      expect(document.title).toContain(channel.name);
+    await waitFor(() => {
+      expect(screen.getByText(testChannel.name)).toBeInTheDocument();
     });
   });
 });