diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 2014b8ad85..915a0b4c51 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -64,6 +64,7 @@
               :channelId="item.id"
               :detailsRouteName="detailsRouteName"
               style="flex-grow: 1; width: 100%"
+              @show-channel-details="handleShowChannelDetails"
             />
           </VLayout>
         </VFlex>
@@ -142,6 +143,22 @@
         </VLayout>
       </BottomBar>
     </VContainer>
+    <transition
+      name="backdrop"
+      appear
+    >
+      <div
+        v-if="showSidePanel"
+        class="backdrop"
+        @click="handleCloseSidePanel"
+      ></div>
+    </transition>
+    <ChannelDetailsSidePanel
+      v-if="showSidePanel"
+      v-model="showSidePanel"
+      :channelId="selectedChannelId"
+      @close="handleCloseSidePanel"
+    />
   </div>
 
 </template>
@@ -156,6 +173,7 @@
   import sortBy from 'lodash/sortBy';
   import union from 'lodash/union';
   import { RouteNames } from '../../constants';
+  import ChannelDetailsSidePanel from './ChannelDetailsSidePanel';
   import CatalogFilters from './CatalogFilters';
   import ChannelItem from './ChannelItem';
   import LoadingText from 'shared/views/LoadingText';
@@ -178,6 +196,7 @@
       Checkbox,
       ToolBar,
       OfflineText,
+      ChannelDetailsSidePanel,
     },
     mixins: [channelExportMixin, constantsTranslationMixin],
     data() {
@@ -185,12 +204,8 @@
         loading: true,
         loadError: false,
         selecting: false,
-
-        /**
-         * jayoshih: router guard makes it difficult to track
-         * differences between previous query params and new
-         * query params, so just track it manually
-         */
+        showSidePanel: false,
+        selectedChannelId: null,
         previousQuery: this.$route.query,
 
         /**
@@ -301,6 +316,14 @@
         this.setSelection(false);
         return this.downloadChannelsPDF(params);
       },
+      handleShowChannelDetails(channelId) {
+        this.showSidePanel = true;
+        this.selectedChannelId = channelId;
+      },
+      handleCloseSidePanel() {
+        this.showSidePanel = false;
+        this.selectedChannelId = null;
+      },
     },
     $trs: {
       resultsText: '{count, plural,\n =1 {# result found}\n other {# results found}}',
@@ -326,4 +349,41 @@
     margin: 0 auto;
   }
 
+  .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    background-attachment: fixed;
+  }
+
+  .backdrop-enter {
+    opacity: 0;
+  }
+
+  .backdrop-enter-to {
+    opacity: 1;
+  }
+
+  .backdrop-enter-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .backdrop-leave {
+    opacity: 1;
+  }
+
+  .backdrop-leave-to {
+    opacity: 0;
+  }
+
+  .backdrop-leave-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
new file mode 100644
index 0000000000..c54292c438
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
@@ -0,0 +1,152 @@
+<template>
+
+  <ResizableNavigationDrawer
+    right
+    :localName="'channel-details'"
+    :value="value"
+    :permanent="true"
+    :temporary="false"
+    v-bind="$attrs"
+    style="position: fixed; top: 0; right: 0; z-index: 10; height: 100vh"
+    @input="$emit('input', $event)"
+    @resize="$emit('resize', $event)"
+  >
+    <div class="channel-details-content">
+      <VLayout
+        row
+        align-center
+        class="mb-4"
+      >
+        <VFlex>
+          <h2 class="font-weight-bold headline">
+            {{ channel ? channel.name : '' }}
+          </h2>
+        </VFlex>
+        <VSpacer />
+        <VFlex shrink>
+          <KIconButton
+            icon="close"
+            :tooltip="$tr('close')"
+            @click="$emit('input', false)"
+          />
+        </VFlex>
+      </VLayout>
+      <DetailsPanel
+        v-if="channel && details"
+        :details="channelWithDetails"
+        :loading="loading"
+        @generate-pdf="generatePDF"
+        @generate-csv="generateCSV"
+      />
+    </div>
+  </ResizableNavigationDrawer>
+
+</template>
+
+
+<script>
+
+  import { mapActions, mapGetters } from 'vuex';
+  import DetailsPanel from 'shared/views/details/DetailsPanel';
+  import { routerMixin } from 'shared/mixins';
+  import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
+  import { channelExportMixin } from 'shared/views/channel/mixins';
+
+  export default {
+    name: 'ChannelDetailsSidePanel',
+    components: {
+      ResizableNavigationDrawer,
+      DetailsPanel,
+    },
+    mixins: [routerMixin, channelExportMixin],
+    props: {
+      channelId: {
+        type: String,
+        default: null,
+      },
+      value: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        details: null,
+        loading: true,
+      };
+    },
+    computed: {
+      ...mapGetters('channel', ['getChannel']),
+
+      channelWithDetails() {
+        if (!this.channel || !this.details) {
+          return {};
+        }
+        return { ...this.channel, ...this.details };
+      },
+      channel() {
+        return this.getChannel(this.channelId);
+      },
+    },
+    beforeMount() {
+      return this.load();
+    },
+    methods: {
+      ...mapActions('channel', ['loadChannel', 'loadChannelDetails']),
+      load() {
+        this.loading = true;
+        const channelPromise = this.loadChannel(this.channelId);
+        const detailsPromise = this.loadChannelDetails(this.channelId);
+
+        return Promise.all([channelPromise, detailsPromise])
+          .then(([channel, details]) => {
+            if (!channel) {
+              this.$router.replace(this.backLink).catch(() => {});
+              return;
+            }
+
+            this.details = details;
+            this.loading = false;
+          })
+          .catch(error => {
+            this.loading = false;
+            if (error.response) {
+              this.$store.dispatch('errors/handleAxiosError', error);
+            } else {
+              this.$store.dispatch('showSnackbarSimple', 'Error loading channel details');
+            }
+          });
+      },
+      async generatePDF() {
+        try {
+          this.$analytics.trackEvent('channel_details', 'Download PDF', {
+            id: this.channelId,
+          });
+          await this.generateChannelsPDF([this.channelWithDetails]);
+        } catch (error) {
+          this.$store.dispatch('showSnackbarSimple', 'Error generating PDF');
+        }
+      },
+      async generateCSV() {
+        this.$analytics.trackEvent('channel_details', 'Download CSV', {
+          id: this.channelId,
+        });
+        await this.generateChannelsCSV([this.channelWithDetails]);
+      },
+    },
+    $trs: {
+      close: 'Close',
+    },
+  };
+
+</script>
+
+
+<style>
+
+  .channel-details-content {
+    padding: 20px;
+    padding-top: 40px;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index c4fb7abf95..c83842bf44 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -7,9 +7,9 @@
       :class="{ added }"
       data-test="channel-card"
       tabindex="0"
-      :href="linkToChannelTree ? channelHref : null"
-      :to="linkToChannelTree ? null : channelDetailsLink"
-      @click="goToChannelRoute"
+      :href="isInChannelList && linkToChannelTree ? channelHref : null"
+      :to="isInChannelList ? (linkToChannelTree ? null : channelDetailsLink) : null"
+      @click="handleChannelClick"
     >
       <VLayout
         row
@@ -110,21 +110,23 @@
               :to="channelDetailsLink"
             >
               <KIconButton
+                v-if="detailsIcon"
                 :color="$themeTokens.primary"
-                data-test="details-button"
+                :data-test="detailsIcon.dataTest"
                 class="mr-1"
-                icon="info"
-                :tooltip="$tr('details')"
+                :icon="detailsIcon.icon"
+                :tooltip="detailsIcon.tooltip"
               />
             </KRouterLink>
 
             <KIconButton
-              v-if="!allowEdit && channel.published"
+              v-for="config in filteredIcons"
+              :key="config.key"
               class="mr-1"
-              icon="copy"
-              :tooltip="$tr('copyToken')"
-              data-test="token-button"
-              @click.stop.prevent="tokenDialog = true"
+              :icon="config.icon"
+              :tooltip="config.tooltip"
+              :data-test="config.dataTest"
+              @click.stop.prevent="config.clickHandler"
             />
             <ChannelStar
               v-if="loggedIn"
@@ -132,7 +134,8 @@
               :bookmark="channel.bookmark"
               class="mr-1"
             />
-            <BaseMenu v-if="showOptions">
+
+            <BaseMenu v-if="showKebabMenu">
               <template #activator="{ on }">
                 <VBtn
                   icon
@@ -271,6 +274,10 @@
         type: Boolean,
         default: false,
       },
+      isInChannelList: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -327,13 +334,72 @@
       libraryMode() {
         return window.libraryMode;
       },
-      showOptions() {
-        return (
-          this.allowEdit ||
-          this.channel.source_url ||
-          this.channel.demo_server_url ||
-          (this.channel.published && this.allowEdit)
-        );
+      hasUnpublishedChanges() {
+        return !this.channel.last_published || this.channel.modified > this.channel.last_published;
+      },
+      filteredIcons() {
+        return this.iconConfigs
+          .filter(c => ['copy', 'open-tab-link'].includes(c.key))
+          .filter(c => c.show);
+      },
+      detailsIcon() {
+        return this.iconConfigs.find(c => c.key === 'details' && c.show);
+      },
+      iconConfigs() {
+        return [
+          {
+            key: 'copy',
+            show: !this.allowEdit && this.channel.published,
+            icon: 'copy',
+            tooltip: this.$tr('copyToken'),
+            dataTest: 'token-button',
+            clickHandler: () => {
+              this.tokenDialog = true;
+            },
+          },
+          // show open tab link when
+          // only one of source or demo server url is present
+          // we do not show this icon if we are in channel list
+          {
+            key: 'open-tab-link',
+            show:
+              !this.isInChannelList &&
+              (this.channel.demo_server_url || this.channel.source_url) &&
+              ((this.loggedIn && !this.channel.demo_server_url && this.channel.source_url) ||
+                (this.loggedIn && !this.channel.source_url && this.channel.demo_server_url) ||
+                (!this.loggedIn &&
+                  this.channel.published &&
+                  // this check ensures that we show link to both in kebab menu
+                  !(this.channel.source_url && this.channel.demo_server_url))),
+            icon: 'openNewTab',
+            tooltip: this.channel.demo_server_url
+              ? this.$tr('viewOnKolibri')
+              : this.$tr('goToWebsite'),
+            dataTest: 'view-on-kolibri',
+            clickHandler: () => {
+              this.viewOnKolibri();
+            },
+          },
+          {
+            key: 'details',
+            show: !this.libraryMode && this.loggedIn,
+            icon: 'info',
+            tooltip: this.$tr('details'),
+            dataTest: 'details-button',
+            to: this.channelDetailsLink,
+          },
+          // show kebab menu when
+          // we are listing channels
+          // or when both source and demo server urls are present and user is logged in
+          {
+            key: 'kebab-menu',
+            show:
+              this.isInChannelList ||
+              (this.loggedIn && this.channel.source_url && this.channel.demo_server_url),
+            icon: 'optionsVertical',
+            dataTest: 'menu',
+          },
+        ];
       },
       linkToChannelTree() {
         return this.loggedIn && !this.libraryMode;
@@ -345,8 +411,9 @@
           return false;
         }
       },
-      hasUnpublishedChanges() {
-        return !this.channel.last_published || this.channel.modified > this.channel.last_published;
+      showKebabMenu() {
+        const kebabConfig = this.iconConfigs.find(config => config.key === 'kebab-menu');
+        return Boolean(kebabConfig && kebabConfig.show);
       },
     },
     mounted() {
@@ -375,16 +442,21 @@
           });
         }
       },
-      goToChannelRoute() {
-        this.linkToChannelTree
-          ? (window.location.href = this.channelHref)
-          : this.$router.push(this.channelDetailsLink).catch(() => {});
+      handleChannelClick() {
+        if (!this.isInChannelList) {
+          this.$emit('show-channel-details', this.channelId);
+        }
       },
       trackTokenCopy() {
         this.$analytics.trackAction('channel_list', 'Copy token', {
           eventLabel: this.channel.primary_token,
         });
       },
+      viewOnKolibri() {
+        if (this.channel.demo_server_url) {
+          window.open(this.channel.demo_server_url, '_blank');
+        }
+      },
     },
     $trs: {
       resourceCount: '{count, plural,\n =1 {# resource}\n other {# resources}}',
@@ -408,6 +480,7 @@
       channelRemovedSnackbar: 'Channel removed',
       channelLanguageNotSetIndicator: 'No language set',
       cancel: 'Cancel',
+      viewOnKolibri: 'View on Kolibri',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
index eba4dd2032..6b4e7a53cc 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
@@ -55,6 +55,7 @@
                 v-for="channel in listChannels"
                 :key="channel.id"
                 :channelId="channel.id"
+                :isInChannelList="true"
                 allowEdit
                 fullWidth
               />
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js
index bee20bfd13..8c4a9fb5c7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js
@@ -24,6 +24,7 @@ function makeWrapper(allowEdit, deleteStub, libraryMode) {
     propsData: {
       channelId: channelId,
       allowEdit: allowEdit,
+      isInChannelList: true,
     },
     computed: {
       libraryMode() {
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
index 9db35d0376..adbd257548 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
@@ -1,27 +1,104 @@
 <template>
 
   <div :class="{ printing }">
-    <div style="max-width: 300px">
-      <Thumbnail
-        :src="isChannel ? _details.thumbnail_url : _details.thumbnail_src"
-        :encoding="isChannel ? _details.thumbnail_encoding : null"
-      />
-    </div>
-    <br >
-    <h1
-      class="notranslate"
-      dir="auto"
-    >
-      {{ isChannel ? _details.name : _details.title }}
-    </h1>
-    <p
-      class="notranslate"
-      dir="auto"
+    <VLayout
+      row
+      class="details-layout"
     >
-      {{ _details.description }}
-    </p>
+      <VFlex
+        xs7
+        class="details-content"
+      >
+        <p
+          class="notranslate"
+          dir="auto"
+        >
+          {{ _details.description }}
+        </p>
+      </VFlex>
+      <VFlex
+        xs5
+        class="pa-3"
+      >
+        <Thumbnail
+          :src="isChannel ? _details.thumbnail_url : _details.thumbnail_src"
+          :encoding="isChannel ? _details.thumbnail_encoding : null"
+        />
+      </VFlex>
+    </VLayout>
     <br >
 
+    <!-- Action Buttons -->
+    <VLayout
+      v-if="isChannel"
+      row
+      class="mb-4"
+      style="margin-left: -8px"
+    >
+      <VBtn
+        v-if="!loggedIn && _details.demo_server_url"
+        color="primary"
+        class="mr-2"
+        @click="viewInKolibri"
+      >
+        <Icon
+          class="mr-2"
+          icon="openNewTab"
+          :color="$themeTokens.textInverted"
+        />
+        {{ $tr('viewInKolibri') }}
+      </VBtn>
+      <VBtn
+        v-else-if="_details.source_url"
+        color="primary"
+        class="mr-2"
+        :href="channelHref"
+      >
+        {{ $tr('goToChannel') }}
+      </VBtn>
+      <BaseMenu>
+        <template #activator="{ on }">
+          <VBtn
+            color="primary"
+            v-on="on"
+          >
+            {{ loggedIn ? $tr('options') : $tr('downloadButton') }}
+            <Icon
+              class="ml-1"
+              icon="dropdown"
+              :color="$themeTokens.textInverted"
+            />
+          </VBtn>
+        </template>
+        <VList>
+          <template v-if="loggedIn">
+            <VListTile
+              v-if="_details.source_url"
+              :href="_details.source_url"
+              target="_blank"
+            >
+              <VListTileTitle>{{ $tr('goToWebsite') }}</VListTileTitle>
+            </VListTile>
+            <VListTile
+              v-if="_details.demo_server_url"
+              @click="viewInKolibri"
+            >
+              <VListTileTitle>{{ $tr('viewInKolibri') }}</VListTileTitle>
+            </VListTile>
+          </template>
+          <VListTile @click="$emit('generate-pdf')">
+            <VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
+          </VListTile>
+          <VListTile
+            data-test="dl-csv"
+            @click="$emit('generate-csv')"
+          >
+            <VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
+          </VListTile>
+        </VList>
+      </BaseMenu>
+    </VLayout>
+
     <template v-if="isChannel">
       <DetailsRow
         v-if="_details.published && _details.primary_token"
@@ -357,10 +434,12 @@
 
 <script>
 
+  import { mapGetters } from 'vuex';
   import cloneDeep from 'lodash/cloneDeep';
   import defaultsDeep from 'lodash/defaultsDeep';
   import camelCase from 'lodash/camelCase';
   import orderBy from 'lodash/orderBy';
+  import BaseMenu from '../BaseMenu.vue';
   import { SCALE_TEXT, SCALE, CHANNEL_SIZE_DIVISOR } from './constants';
   import DetailsRow from './DetailsRow';
   import { CategoriesLookup, LevelsLookup } from 'shared/constants';
@@ -419,6 +498,7 @@
       CopyToken,
       DetailsRow,
       Thumbnail,
+      BaseMenu,
     },
     mixins: [
       fileSizeMixin,
@@ -428,10 +508,6 @@
       metadataTranslationMixin,
     ],
     props: {
-      // Object matching that returned by the channel details and
-      // node details API endpoints, see backend for details of the
-      // object structure and keys. get_details method on ContentNode
-      // model as a starting point.`
       details: {
         type: Object,
         required: true,
@@ -446,6 +522,13 @@
       },
     },
     computed: {
+      ...mapGetters(['loggedIn']),
+      channelHref() {
+        if (this.loggedIn && !window.libraryMode) {
+          return window.Urls.channel(this._details.id);
+        }
+        return null;
+      },
       _details() {
         const details = cloneDeep(this.details);
         defaultsDeep(details, DEFAULT_DETAILS);
@@ -552,6 +635,11 @@
       channelUrl(channel) {
         return window.Urls.channel(channel.id);
       },
+      viewInKolibri() {
+        if (this._details.demo_server_url) {
+          window.open(this._details.demo_server_url, '_blank');
+        }
+      },
     },
     $trs: {
       /* eslint-disable kolibri/vue-no-unused-translations */
@@ -590,6 +678,13 @@
       currentVersionHeading: 'Published version',
       primaryLanguageHeading: 'Primary language',
       unpublishedText: 'Unpublished',
+      viewInKolibri: 'View in Kolibri',
+      goToChannel: 'Go to Channel',
+      goToWebsite: 'Go to source website',
+      options: 'Options',
+      downloadButton: 'Download channel summary',
+      downloadPDF: 'Download PDF',
+      downloadCSV: 'Download CSV',
     },
   };
 
@@ -606,6 +701,14 @@
     }
   }
 
+  .details-layout {
+    align-items: center;
+  }
+
+  .details-content {
+    padding-right: 16px;
+  }
+
   .v-toolbar__title {
     font-weight: bold;
   }