diff --git a/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
new file mode 100644
index 0000000000..ce0fbb575f
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
@@ -0,0 +1,79 @@
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { useRouter, useRoute } from 'vue-router/composables';
+import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+import orderBy from 'lodash/orderBy';
+import { RouteNames } from '../constants';
+
+/**
+ * Composable for channel list functionality
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.listType - Type of channel list (from ChannelListTypes)
+ * @param {Array<string>} options.sortFields - Fields to sort by (default: ['modified'])
+ * @param {Array<string>} options.orderFields - Sort order (default: ['desc'])
+ * @returns {Object} Channel list state and methods
+ */
+export function useChannelList(options = {}) {
+  const { listType, sortFields = ['modified'], orderFields = ['desc'] } = options;
+
+  const instance = getCurrentInstance();
+  const store = instance.proxy.$store;
+
+  const router = useRouter();
+  const route = useRoute();
+
+  const { windowIsMedium, windowIsLarge, windowBreakpoint } = useKResponsiveWindow();
+
+  const loading = ref(false);
+
+  const channels = computed(() => store.getters['channel/channels'] || []);
+
+  const listChannels = computed(() => {
+    if (!channels.value || channels.value.length === 0) {
+      return [];
+    }
+
+    const filtered = channels.value.filter(channel => channel[listType] && !channel.deleted);
+
+    return orderBy(filtered, sortFields, orderFields);
+  });
+
+  const hasChannels = computed(() => listChannels.value.length > 0);
+
+  const maxWidthStyle = computed(() => {
+    if (windowBreakpoint.value >= 5) return '50%';
+    if (windowBreakpoint.value === 4) return '66.66%';
+    if (windowBreakpoint.value === 3) return '83.33%';
+
+    if (windowIsLarge.value) return '50%';
+    if (windowIsMedium.value) return '83.33%';
+
+    return '100%';
+  });
+
+  const loadData = async () => {
+    loading.value = true;
+    try {
+      await store.dispatch('channel/loadChannelList', { listType });
+    } catch (error) {
+      loading.value = false;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  onMounted(() => {
+    loadData();
+  });
+
+  return {
+    loading,
+    channels,
+    listChannels,
+    hasChannels,
+
+    maxWidthStyle,
+
+    loadData,
+  };
+}
diff --git a/contentcuration/contentcuration/frontend/channelList/router.js b/contentcuration/contentcuration/frontend/channelList/router.js
index f9624f157e..02a6703fd5 100644
--- a/contentcuration/contentcuration/frontend/channelList/router.js
+++ b/contentcuration/contentcuration/frontend/channelList/router.js
@@ -1,6 +1,7 @@
 import VueRouter from 'vue-router';
 import ChannelList from './views/Channel/ChannelList';
 import StudioMyChannels from './views/Channel/StudioMyChannels.vue';
+import StudioStarredChannels from './views/Channel/StudioStarredChannels.vue';
 import ChannelSetList from './views/ChannelSet/ChannelSetList';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
 import CatalogList from './views/Channel/CatalogList';
@@ -37,8 +38,7 @@ const router = new VueRouter({
     {
       name: RouteNames.CHANNELS_STARRED,
       path: '/starred',
-      component: ChannelList,
-      props: { listType: ChannelListTypes.STARRED },
+      component: StudioStarredChannels,
     },
     {
       name: RouteNames.CHANNELS_VIEW_ONLY,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels.vue
index 4126d7de18..05c3c7f5f6 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="my-channels">
+  <div class="studio-channels">
     <div
       class="new-channel"
       :style="{ maxWidth: maxWidthStyle }"
@@ -35,142 +35,13 @@
         ]"
         class="cards"
       >
-        <KCard
-          v-for="(channel, index) in listChannels"
+        <StudioChannelCard
+          v-for="channel in listChannels"
           :key="channel.id"
-          :headingLevel="2"
-          thumbnailDisplay="small"
-          :thumbnailSrc="thumbnailSrc(channel)"
-          :thumbnailAlign="'left'"
-          :thumbnailScaleType="'contain'"
-          :orientation="windowIsSmall ? 'vertical' : 'horizontal'"
-          :title="channel.name"
-          :titleMaxLines="2"
-          :data-testid="`card-${index}`"
-          @click="goToChannelRoute(channel)"
-        >
-          <template #thumbnailPlaceholder>
-            <KIcon
-              :color="$themePalette.grey.v_400"
-              class="img-placeholder-icon"
-              icon="image"
-            />
-          </template>
-          <template #belowTitle>
-            <div class="cards-below-title">
-              <div class="cards-resource">
-                <span> {{ $tr('resourceCount', { count: channel.count || 0 }) }} </span>
-                <span>
-                  {{ language(channel) }}
-                </span>
-              </div>
-              <div
-                class="cards-desc"
-                :style="{ color: $themePalette.text }"
-              >
-                {{ channel.description }}
-              </div>
-            </div>
-          </template>
-          <template #footer>
-            <div class="footer">
-              <div class="footer-left">
-                <span :style="{ color: $themeTokens.annotation }">
-                  {{ getPublishStatus(channel) }}
-                </span>
-                <div>
-                  <KTooltip
-                    :reference="`lastUpdatedTime-${index}`"
-                    placement="bottom"
-                    :refs="$refs"
-                  >
-                    {{
-                      $tr('lastUpdated', {
-                        updated: $formatRelative(channel.modified, { now: new Date() }),
-                      })
-                    }}
-                  </KTooltip>
-                  <div
-                    v-if="hasUnpublishedChanges(channel)"
-                    class="last-updated"
-                  >
-                    <KIcon
-                      :ref="`lastUpdatedTime-${index}`"
-                      :color="$themePalette.green.v_600"
-                      icon="dot"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div class="footer-right">
-                <div
-                  :ref="`detailIcon${index}`"
-                  class="details-link"
-                >
-                  <router-link
-                    :data-testid="`details-button-${index}`"
-                    :to="channelDetailsLink(channel)"
-                    @click.native.stop
-                  >
-                    <KIcon
-                      class="details-icon"
-                      :color="$themeTokens.primary"
-                      icon="info"
-                    />
-                  </router-link>
-                  <KTooltip
-                    :reference="`detailIcon${index}`"
-                    :refs="$refs"
-                    maxWidth="200px"
-                  >
-                    {{ $tr('details') }}
-                  </KTooltip>
-                </div>
-
-                <ChannelStar
-                  :channelId="channel.id"
-                  :data-testid="`bookmark-button-${index}`"
-                  :bookmark="channel.bookmark"
-                />
-                <KIconButton
-                  size="small"
-                  icon="optionsVertical"
-                  appearance="flat-button"
-                  :data-testid="`dropdown-button-${index}`"
-                  @click.stop="openDropDown(channel, index)"
-                >
-                  <template #menu>
-                    <KDropdownMenu
-                      :hasIcons="true"
-                      :options="dropDownArr"
-                      @select="option => selectedItem(option, channel)"
-                    />
-                  </template>
-                </KIconButton>
-              </div>
-            </div>
-          </template>
-        </KCard>
+          :channel="channel"
+        />
       </KCardGrid>
     </div>
-    <KModal
-      v-if="deleteDialog"
-      :title="canEdit ? $tr('deleteTitle') : $tr('removeTitle')"
-      :submitText="canEdit ? $tr('deleteChannel') : $tr('removeBtn')"
-      :cancelText="$tr('cancel')"
-      data-testid="delete-modal"
-      @submit="handleDelete"
-      @cancel="deleteDialog = false"
-    >
-      {{ canEdit ? $tr('deletePrompt') : $tr('removePrompt') }}
-    </KModal>
-    <ChannelTokenModal
-      v-if="selectedChannel && selectedChannel.published"
-      v-model="tokenDialog"
-      data-testid="copy-modal"
-      :channel="selectedChannel"
-      @copied="trackTokenCopy"
-    />
   </div>
 
 </template>
@@ -178,87 +49,31 @@
 
 <script>
 
-  import { mapGetters, mapActions } from 'vuex';
-  import orderBy from 'lodash/orderBy';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { useChannelList } from '../../composables/useChannelList';
   import { RouteNames } from '../../constants';
-  import ChannelStar from './ChannelStar';
+  import StudioChannelCard from './components/StudioChannelCard';
   import { ChannelListTypes } from 'shared/constants';
-  import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
-  import Languages from 'shared/leUtils/Languages';
 
   export default {
     name: 'StudioMyChannels',
     components: {
-      ChannelStar,
-      ChannelTokenModal,
+      StudioChannelCard,
     },
     setup() {
-      const { windowIsSmall, windowIsMedium, windowIsLarge, windowBreakpoint } =
-        useKResponsiveWindow();
-      return {
-        windowIsSmall,
-        windowIsMedium,
-        windowIsLarge,
-        windowBreakpoint,
-      };
-    },
-    data() {
+      // Use the channel list composable
+      const { loading, listChannels, maxWidthStyle } = useChannelList({
+        listType: ChannelListTypes.EDITABLE,
+        sortFields: ['modified'],
+        orderFields: ['desc'],
+      });
+
       return {
-        loading: false,
-        tokenDialog: false,
-        deleteDialog: false,
-        selectedChannel: {
-          published: false,
-        },
-        dropDownArr: [],
+        loading,
+        listChannels,
+        maxWidthStyle,
       };
     },
-    computed: {
-      ...mapGetters('channel', ['channels']),
-      listChannels() {
-        const channels = this.channels;
-        if (!channels) {
-          return [];
-        }
-        const sortFields = ['modified'];
-        const orderFields = ['desc'];
-        const data = orderBy(
-          this.channels.filter(channel => channel[ChannelListTypes.EDITABLE] && !channel.deleted),
-          sortFields,
-          orderFields,
-        );
-        return data;
-      },
-
-      // channel items properties
-      canEdit() {
-        return this.selectedChannel.edit;
-      },
-
-      maxWidthStyle() {
-        if (this.windowBreakpoint >= 5) return '50%';
-        if (this.windowBreakpoint === 4) return '66.66%';
-        if (this.windowBreakpoint === 3) return '83.33%';
-
-        if (this.windowIsLarge) return '50%';
-        if (this.windowIsMedium) return '83.33%';
-
-        return '100%';
-      },
-    },
-    created() {
-      this.loadData();
-    },
     methods: {
-      ...mapActions('channel', ['loadChannelList', 'deleteChannel', 'removeViewer']),
-      language(channel) {
-        const lang = Languages.get(channel.language);
-        if (lang) {
-          return lang.native_name;
-        }
-        return this.$tr('channelLanguageNotSetIndicator');
-      },
       newChannel() {
         this.$analytics.trackClick('channel_list', 'Create channel');
         this.$router.push({
@@ -266,171 +81,10 @@
           query: { last: this.$route.name },
         });
       },
-      goToChannelRoute(channel) {
-        window.location.href = window.Urls.channel(channel.id);
-      },
-      loadData() {
-        this.loading = true;
-        this.loadChannelList({ listType: ChannelListTypes.EDITABLE })
-          .then(() => {
-            this.loading = false;
-          })
-          .catch(() => {
-            this.loading = false;
-          });
-      },
-
-      hasUnpublishedChanges(channel) {
-        return !channel.last_published || channel.modified > channel.last_published;
-      },
-      trackTokenCopy() {
-        this.$analytics.trackAction('channel_list', 'Copy token', {
-          eventLabel: this.selectedChannel.primary_token,
-        });
-      },
-      channelDetailsLink(channel) {
-        return {
-          name: RouteNames.CHANNEL_DETAILS,
-          query: {
-            // this component is used on the catalog search
-            // page => do not lose search query
-            ...this.$route.query,
-            last: this.$route.name,
-          },
-          params: {
-            channelId: channel.id,
-          },
-        };
-      },
-      openDropDown(channel) {
-        this.selectedChannel = channel;
-        this.dropDownArr = this.dropDownItems(channel);
-      },
-      dropDownItems(channel) {
-        this.selectedChannel = channel;
-        let options = [
-          {
-            label: this.$tr('editChannel'),
-            icon: 'edit',
-            value: 'edit',
-          },
-          {
-            label: this.$tr('copyToken'),
-            icon: 'copy',
-            value: 'copy',
-          },
-          {
-            label: this.$tr('goToWebsite'),
-            icon: 'openNewTab',
-            value: 'source-url',
-          },
-          {
-            label: this.$tr('viewContent'),
-            icon: 'openNewTab',
-            value: 'demo-url',
-          },
-          {
-            label: this.canEdit ? this.$tr('deleteChannel') : this.$tr('removeChannel'),
-            icon: 'trash',
-            value: 'delete',
-          },
-        ];
-        if (!channel.published) {
-          options = options.filter(item => item.value !== 'copy');
-        }
-        if (channel.source_url === '') {
-          options = options.filter(item => item.value !== 'source-url');
-        }
-        if (channel.demo_server_url === '') {
-          options = options.filter(item => item.value !== 'demo-url');
-        }
-        return options;
-      },
-      selectedItem(option, channel) {
-        const value = option.value;
-        this.selectedChannel = channel;
-        if (value === 'edit') {
-          this.channelEditLink(channel);
-        } else if (value === 'copy') {
-          this.tokenDialog = true;
-        } else if (value === 'delete') {
-          this.deleteDialog = true;
-        } else if (value === 'source-url') {
-          window.open(channel.source_url, '_blank');
-        } else if (value === 'demo-url') {
-          window.open(channel.demo_server_url, '_blank');
-        }
-      },
-      channelEditLink(channel) {
-        this.$router.push({
-          name: RouteNames.CHANNEL_EDIT,
-          query: {
-            // this component is used on the catalog search
-            // page => do not lose search query
-            ...this.$route.query,
-            last: this.$route.name,
-          },
-          params: {
-            channelId: channel.id,
-            tab: 'edit',
-          },
-        });
-      },
-      handleDelete() {
-        if (!this.canEdit) {
-          const currentUserId = this.$store.state.session.currentUser.id;
-          this.removeViewer({ channelId: this.selectedChannel.id, userId: currentUserId }).then(
-            () => {
-              this.deleteDialog = false;
-              this.$store.dispatch('showSnackbarSimple', this.$tr('channelRemovedSnackbar'));
-            },
-          );
-        } else {
-          this.deleteChannel(this.selectedChannel.id).then(() => {
-            this.deleteDialog = false;
-            this.$store.dispatch('showSnackbarSimple', this.$tr('channelDeletedSnackbar'));
-          });
-        }
-      },
-      thumbnailSrc(channel) {
-        return channel.thumbnail_encoding && channel.thumbnail_encoding.base64
-          ? channel.thumbnail_encoding.base64
-          : channel.thumbnail_url;
-      },
-      getPublishStatus(channel) {
-        return channel.last_published
-          ? this.$tr('lastPublished', {
-            last_published: this.$formatRelative(channel.last_published, {
-              now: new Date(),
-            }),
-          })
-          : this.$tr('unpublishedText');
-      },
     },
     $trs: {
       channel: 'New channel',
       noChannelsFound: 'No channels found',
-      resourceCount: '{count, plural,\n =1 {# resource}\n other {# resources}}',
-      unpublishedText: 'Unpublished',
-      lastPublished: 'Published {last_published}',
-      lastUpdated: 'Updated {updated}',
-      details: 'Details',
-      viewContent: 'View channel on Kolibri',
-      goToWebsite: 'Go to source website',
-      editChannel: 'Edit channel details',
-      copyToken: 'Copy channel token',
-      deleteChannel: 'Delete channel',
-      deleteTitle: 'Delete this channel',
-      removeChannel: 'Remove from channel list',
-      removeBtn: 'Remove',
-      removeTitle: 'Remove from channel list',
-      deletePrompt: 'This channel will be permanently deleted. This cannot be undone.',
-      removePrompt:
-        'You have view-only access to this channel. Confirm that you want to remove it from your list of channels.',
-      channelDeletedSnackbar: 'Channel deleted',
-      channelRemovedSnackbar: 'Channel removed',
-      channelLanguageNotSetIndicator: 'No language set',
-      cancel: 'Cancel',
     },
   };
 
@@ -439,18 +93,7 @@
 
 <style lang="scss" scoped>
 
-  .my-channels {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    min-height: calc(100% - 64px - 48px);
-  }
-
-  .no-channels {
-    padding: 16px 0 0 16px;
-    font-size: 24px;
-  }
+  @import './styles/StudioChannels';
 
   .new-channel {
     display: flex;
@@ -459,88 +102,4 @@
     margin-top: 20px;
   }
 
-  .cards {
-    margin-top: 16px;
-
-    /* check this below class, this should be coming form KDS */
-    ::v-deep .visuallyhidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      border: 0;
-    }
-  }
-
-  .cards-below-title {
-    font-size: 14px;
-  }
-
-  .cards-resource {
-    span:first-child::after {
-      margin: 0 8px;
-      content: '•';
-    }
-  }
-
-  .cards-desc {
-    margin-top: 12px;
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .footer-right,
-  .footer-left,
-  .last-updated {
-    display: flex;
-    align-items: center;
-  }
-
-  .footer-left {
-    span {
-      font-size: 14px;
-    }
-
-    div {
-      margin-left: 8px;
-    }
-  }
-
-  .details-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.1);
-    }
-
-    a {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  .details-icon {
-    width: 100%;
-    height: 100%;
-  }
-
-  .img-placeholder-icon {
-    width: 50%;
-    min-width: 24px;
-    height: 50%;
-  }
-
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels.vue
new file mode 100644
index 0000000000..6abe1f0780
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels.vue
@@ -0,0 +1,74 @@
+<template>
+
+  <div class="studio-channels">
+    <div
+      class="channels-body"
+      :style="{ maxWidth: maxWidthStyle }"
+    >
+      <p
+        v-if="!listChannels.length && !loading"
+        class="no-channels"
+      >
+        {{ $tr('noChannelsFound') }}
+      </p>
+      <KCardGrid
+        layout="1-1-1"
+        :loading="loading"
+        :skeletonsConfig="[
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            count: 3,
+          },
+        ]"
+        class="cards"
+      >
+        <StudioChannelCard
+          v-for="channel in listChannels"
+          :key="channel.id"
+          :channel="channel"
+        />
+      </KCardGrid>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { useChannelList } from '../../composables/useChannelList';
+  import StudioChannelCard from './components/StudioChannelCard';
+  import { ChannelListTypes } from 'shared/constants';
+
+  export default {
+    name: 'StudioStarredChannels',
+    components: {
+      StudioChannelCard,
+    },
+    setup() {
+      const { loading, listChannels, maxWidthStyle } = useChannelList({
+        listType: ChannelListTypes.STARRED,
+        sortFields: ['modified'],
+        orderFields: ['desc'],
+      });
+
+      return {
+        loading,
+        listChannels,
+        maxWidthStyle,
+      };
+    },
+    $trs: {
+      noChannelsFound: 'No channels found',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import './styles/StudioChannels';
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioChannelCard.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioChannelCard.spec.js
new file mode 100644
index 0000000000..4591026480
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioChannelCard.spec.js
@@ -0,0 +1,142 @@
+import { render, fireEvent, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import { Store } from 'vuex';
+import StudioChannelCard from '../components/StudioChannelCard.vue';
+
+const unpublishedChannel = {
+  id: '36b0a7090f174d488ae7526c9e15a00e',
+  name: 'channel one',
+  description: 'channel one description',
+  thumbnail_encoding: {
+    base64: '',
+  },
+  thumbnail: '16bf072847b529c7528ded79aee808df.png',
+  language: 'ach',
+  public: false,
+  version: 0,
+  last_published: false,
+  deleted: false,
+  source_url: '',
+  demo_server_url: '',
+  edit: true,
+  view: false,
+  thumbnail_url: '',
+  published: false,
+  publishing: false,
+  staging_root_id: null,
+  __last_fetch: 1764224713827,
+  bookmark: true,
+};
+
+const publishedChannel = {
+  id: '36b0a7090f174d488ae7526c9e15a00e',
+  name: 'channel one',
+  description: 'channel one description',
+  thumbnail_encoding: {
+    base64: '',
+  },
+  thumbnail: '16bf072847b529c7528ded79aee808df.png',
+  language: 'ach',
+  public: false,
+  version: 0,
+  last_published: '2025-08-25T15:54:56.622912Z',
+  modified: '2025-08-25T15:54:56.748897Z',
+  deleted: false,
+  source_url: '',
+  demo_server_url: '',
+  edit: true,
+  view: false,
+  thumbnail_url: '',
+  published: true,
+  publishing: false,
+  staging_root_id: null,
+  __last_fetch: 1764224713827,
+  bookmark: true,
+};
+
+const router = new VueRouter({
+  routes: [
+    { name: 'CHANNEL_DETAILS', path: '/:channelId/details' },
+    { name: 'CHANNEL_EDIT', path: '/:channelId/:tab' },
+  ],
+});
+
+function renderComponent(props = {}, store) {
+  return render(StudioChannelCard, {
+    store,
+    props,
+    routes: router,
+  });
+}
+
+const store = new Store({
+  modules: {
+    channel: {
+      namespaced: true,
+      actions: {
+        deleteChannel: jest.fn(),
+        removeViewer: jest.fn(),
+      },
+    },
+  },
+});
+
+describe('StudioChannelCard.vue', () => {
+  it('open dropdown for published channel', async () => {
+    renderComponent({ channel: publishedChannel }, store);
+    const card = await screen.findByTestId('card');
+    expect(card).toHaveTextContent('channel one');
+    const dropdownButton = await screen.findByTestId('dropdown-button');
+    await fireEvent.click(dropdownButton);
+    expect(screen.getByText('Edit channel details')).toBeInTheDocument();
+    expect(screen.getByText('Copy channel token')).toBeInTheDocument();
+    expect(screen.getByText('Delete channel')).toBeInTheDocument();
+    const listItems = document.querySelectorAll('.ui-focus-container-content li');
+    expect(listItems.length).toBe(3);
+  });
+
+  it('open dropdown for unpulished channel', async () => {
+    renderComponent({ channel: unpublishedChannel }, store);
+    const dropdownButton = await screen.findByTestId('dropdown-button');
+    await fireEvent.click(dropdownButton);
+    expect(screen.getByText('Edit channel details')).toBeInTheDocument();
+    expect(screen.getByText('Delete channel')).toBeInTheDocument();
+    const listItems = document.querySelectorAll('.ui-focus-container-content li');
+    expect(listItems.length).toBe(2);
+  });
+
+  it('opens delete modal and close', async () => {
+    renderComponent({ channel: unpublishedChannel }, store);
+    const dropdownButton = await screen.findByTestId('dropdown-button');
+    await fireEvent.click(dropdownButton);
+    const deleteButton = screen.getByText('Delete channel');
+    await fireEvent.click(deleteButton);
+    let deleteModal = document.querySelector('[data-testid="delete-modal"]');
+    expect(deleteModal).not.toBeNull();
+    const closeDeleteModal = screen.getByText('Cancel');
+    await fireEvent.click(closeDeleteModal);
+    deleteModal = document.querySelector('[data-testid="delete-modal"]');
+    expect(deleteModal).toBeNull();
+  });
+
+  it('open copy modal and close', async () => {
+    renderComponent({ channel: publishedChannel }, store);
+    const dropdownButton = await screen.findByTestId('dropdown-button');
+    await fireEvent.click(dropdownButton);
+    const copyButton = screen.getByText('Copy channel token');
+    await fireEvent.click(copyButton);
+    let copyModal = document.querySelector('[data-testid="copy-modal"]');
+    expect(copyModal).not.toBeNull();
+    const closeCopyModal = screen.getByText('Close');
+    await fireEvent.click(closeCopyModal);
+    copyModal = document.querySelector('[data-testid="copy-modal"]');
+    expect(copyModal).toBeNull();
+  });
+
+  it('detail button takes to details page', async () => {
+    renderComponent({ channel: unpublishedChannel }, store);
+    const detailsButton = await screen.findByTestId('details-button');
+    await fireEvent.click(detailsButton);
+    expect(router.currentRoute.path).toBe('/36b0a7090f174d488ae7526c9e15a00e/details');
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioMyChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioMyChannels.spec.js
index 7999255177..14885beee9 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioMyChannels.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioMyChannels.spec.js
@@ -1,4 +1,4 @@
-import { render, fireEvent, screen, within } from '@testing-library/vue';
+import { render, screen } from '@testing-library/vue';
 import VueRouter from 'vue-router';
 import { Store } from 'vuex';
 import StudioMyChannels from '../StudioMyChannels.vue';
@@ -88,15 +88,8 @@ const store = new Store({
 describe('StudioMyChannels.vue', () => {
   it('renders my channels', async () => {
     renderComponent(store);
-    const card0 = await screen.findByTestId('card-0');
-    const cardElements = screen.queryAllByTestId(testId => testId.startsWith('card-'));
-    expect(await screen.findByText('New channel')).toBeInTheDocument();
-
-    expect(card0).toHaveTextContent('channel one');
-    expect(within(card0).getByTestId('details-button-0')).toBeInTheDocument();
-    expect(within(card0).getByTestId('dropdown-button-0')).toBeInTheDocument();
-
-    expect(cardElements.length).toBe(3);
+    const cards = await screen.findAllByTestId('card');
+    expect(cards.length).toBe(3);
   });
 
   it(`Shows 'No channel found' when there are no channels`, async () => {
@@ -117,67 +110,7 @@ describe('StudioMyChannels.vue', () => {
       },
     });
     renderComponent(store);
-    const cardElements = screen.queryAllByTestId(testId => testId.startsWith('card-'));
-    expect(cardElements.length).toBe(0);
-  });
-
-  it('open dropdown for published channel', async () => {
-    renderComponent(store);
-    const dropdownButton = await screen.findByTestId('dropdown-button-0');
-    await fireEvent.click(dropdownButton);
-    expect(screen.getByText('Edit channel details')).toBeInTheDocument();
-    expect(screen.getByText('Delete channel')).toBeInTheDocument();
-    expect(screen.getByText('Go to source website')).toBeInTheDocument();
-    expect(screen.getByText('View channel on Kolibri')).toBeInTheDocument();
-    expect(screen.getByText('Copy channel token')).toBeInTheDocument();
-    const listItems = document.querySelectorAll('.ui-focus-container-content li');
-    expect(listItems.length).toBe(5);
-  });
-
-  it('open dropdown for unpulished channel', async () => {
-    renderComponent(store);
-    const dropdownButton = await screen.findByTestId('dropdown-button-1');
-    await fireEvent.click(dropdownButton);
-    expect(screen.getByText('Edit channel details')).toBeInTheDocument();
-    expect(screen.getByText('Delete channel')).toBeInTheDocument();
-    expect(screen.getByText('Go to source website')).toBeInTheDocument();
-    expect(screen.getByText('View channel on Kolibri')).toBeInTheDocument();
-    const listItems = document.querySelectorAll('.ui-focus-container-content li');
-    expect(listItems.length).toBe(4);
-  });
-
-  it('opens delete modal and close', async () => {
-    renderComponent(store);
-    const dropdownButton = await screen.findByTestId('dropdown-button-0');
-    await fireEvent.click(dropdownButton);
-    const deleteButton = screen.getByText('Delete channel');
-    await fireEvent.click(deleteButton);
-    let deleteModal = document.querySelector('[data-testid="delete-modal"]');
-    expect(deleteModal).not.toBeNull();
-    const closeDeleteModal = screen.getByText('Cancel');
-    await fireEvent.click(closeDeleteModal);
-    deleteModal = document.querySelector('[data-testid="delete-modal"]');
-    expect(deleteModal).toBeNull();
-  });
-
-  it('open copy modal and close', async () => {
-    renderComponent(store);
-    const dropdownButton = await screen.findByTestId('dropdown-button-0');
-    await fireEvent.click(dropdownButton);
-    const copyButton = screen.getByText('Copy channel token');
-    await fireEvent.click(copyButton);
-    let copyModal = document.querySelector('[data-testid="copy-modal"]');
-    expect(copyModal).not.toBeNull();
-    const closeCopyModal = screen.getByText('Close');
-    await fireEvent.click(closeCopyModal);
-    copyModal = document.querySelector('[data-testid="copy-modal"]');
-    expect(copyModal).toBeNull();
-  });
-
-  it('detail button takes to details page', async () => {
-    renderComponent(store);
-    const detailsButton = await screen.findByTestId('details-button-0');
-    await fireEvent.click(detailsButton);
-    expect(router.currentRoute.path).toBe('/1/details');
+    const cards = screen.queryAllByTestId('card');
+    expect(cards.length).toBe(0);
   });
 });
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioStarredChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioStarredChannels.spec.js
new file mode 100644
index 0000000000..7d38818569
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioStarredChannels.spec.js
@@ -0,0 +1,117 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import { Store } from 'vuex';
+import StudioStarredChannels from '../StudioStarredChannels.vue';
+
+const mockChannels = [
+  {
+    id: '1',
+    name: 'channel one',
+    edit: true,
+    published: true,
+    source_url: 'https://example.com',
+    demo_server_url: 'https://demo.com',
+    deleted: false,
+    modified: 2,
+    last_published: 1,
+    description: 'Channel one description',
+    bookmark: true,
+    count: 5,
+    thumbnail_url: '',
+    language: 'en',
+  },
+  {
+    id: '2',
+    name: 'channel two',
+    edit: true,
+    published: false,
+    source_url: 'https://example.com',
+    demo_server_url: 'https://demo.com',
+    deleted: false,
+    modified: 2,
+    last_published: 1,
+    description: 'Channel two description',
+    bookmark: false,
+    count: 5,
+    thumbnail_url: '',
+    language: 'en',
+  },
+  {
+    id: '3',
+    name: 'channel three',
+    edit: true,
+    published: true,
+    source_url: 'https://example.com',
+    demo_server_url: 'https://demo.com',
+    deleted: false,
+    modified: 2,
+    last_published: 1,
+    description: 'Channel three description',
+    bookmark: false,
+    count: 5,
+    thumbnail_url: '',
+    language: 'en',
+  },
+];
+
+const router = new VueRouter({
+  routes: [
+    { name: 'CHANNEL_DETAILS', path: '/:channelId/details' },
+    { name: 'CHANNEL_EDIT', path: '/:channelId/:tab' },
+  ],
+});
+
+function renderComponent(store) {
+  return render(StudioStarredChannels, {
+    store,
+    routes: router,
+  });
+}
+
+const store = new Store({
+  modules: {
+    channel: {
+      namespaced: true,
+      getters: {
+        channels: () => {
+          return mockChannels;
+        },
+      },
+      actions: {
+        loadChannelList: jest.fn(),
+        createChannel: jest.fn(),
+      },
+    },
+  },
+});
+
+describe('StudioStarredChannels.vue', () => {
+  it('renders my channels', async () => {
+    renderComponent(store);
+    const cards = await screen.findAllByTestId('card');
+
+    expect(cards.length).toBe(1);
+  });
+
+  it(`Shows 'No channel found' when there are no channels`, async () => {
+    const store = new Store({
+      modules: {
+        channel: {
+          namespaced: true,
+          getters: {
+            channels: () => {
+              return [];
+            },
+          },
+          actions: {
+            loadChannelList: jest.fn(),
+            createChannel: jest.fn(),
+          },
+        },
+      },
+    });
+    renderComponent(store);
+    const cards = screen.queryAllByTestId('card');
+    expect(cards.length).toBe(0);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue
new file mode 100644
index 0000000000..007331ed5b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue
@@ -0,0 +1,414 @@
+<template>
+
+  <KCard
+    :key="channel.id"
+    class="channel"
+    :headingLevel="2"
+    thumbnailDisplay="small"
+    :thumbnailSrc="thumbnailSrc"
+    :thumbnailAlign="'left'"
+    :thumbnailScaleType="'contain'"
+    :orientation="windowIsSmall ? 'vertical' : 'horizontal'"
+    :title="channel.name"
+    :titleMaxLines="2"
+    data-testid="card"
+    @click="goToChannelRoute()"
+  >
+    <template #thumbnailPlaceholder>
+      <KIcon
+        :color="$themePalette.grey.v_400"
+        class="img-placeholder-icon"
+        icon="image"
+      />
+    </template>
+    <template #belowTitle>
+      <div class="below-title">
+        <div class="resource">
+          <span> {{ $tr('resourceCount', { count: channel.count || 0 }) }} </span>
+          <span>
+            {{ language }}
+          </span>
+        </div>
+        <div
+          class="desc"
+          :style="{ color: $themePalette.text }"
+        >
+          {{ channel.description }}
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="footer">
+        <div class="footer-left">
+          <span :style="{ color: $themeTokens.annotation }">
+            {{ getPublishStatus }}
+          </span>
+          <div>
+            <KTooltip
+              :reference="`lastUpdatedTime`"
+              placement="bottom"
+              :refs="$refs"
+            >
+              {{
+                $tr('lastUpdated', {
+                  updated: $formatRelative(channel.modified, { now: new Date() }),
+                })
+              }}
+            </KTooltip>
+            <div
+              v-if="hasUnpublishedChanges"
+              class="last-updated"
+            >
+              <KIcon
+                :ref="`lastUpdatedTime`"
+                :color="$themePalette.green.v_600"
+                icon="dot"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="footer-right">
+          <div ref="detailIcon">
+            <router-link
+              data-testid="details-button"
+              :to="channelDetailsLink"
+              :class="['details-link', linkComputedClass]"
+              @click.native.stop
+            >
+              <KIcon
+                class="details-icon"
+                :color="$themeTokens.primary"
+                icon="info"
+              />
+            </router-link>
+            <KTooltip
+              reference="detailIcon"
+              :refs="$refs"
+              maxWidth="200px"
+            >
+              {{ $tr('details') }}
+            </KTooltip>
+          </div>
+
+          <ChannelStar
+            :channelId="channel.id"
+            data-testid="bookmark-button"
+            :bookmark="channel.bookmark"
+          />
+          <KIconButton
+            size="small"
+            icon="optionsVertical"
+            appearance="flat-button"
+            data-testid="dropdown-button"
+            @click.stop="openDropDown"
+          >
+            <template #menu>
+              <KDropdownMenu
+                :hasIcons="true"
+                :options="dropDownArr"
+                @select="option => selectedItem(option)"
+              />
+            </template>
+          </KIconButton>
+        </div>
+      </div>
+      <KModal
+        v-if="deleteDialog"
+        :title="canEdit ? $tr('deleteTitle') : $tr('removeTitle')"
+        :submitText="canEdit ? $tr('deleteChannel') : $tr('removeBtn')"
+        :cancelText="$tr('cancel')"
+        data-testid="delete-modal"
+        appendToOverlay
+        @submit="handleDelete"
+        @cancel="deleteDialog = false"
+      >
+        {{ canEdit ? $tr('deletePrompt') : $tr('removePrompt') }}
+      </KModal>
+      <ChannelTokenModal
+        v-if="channel && channel.published"
+        v-model="tokenDialog"
+        appendToOverlay
+        data-testid="copy-modal"
+        :channel="channel"
+        @copied="trackTokenCopy"
+      />
+    </template>
+  </KCard>
+
+</template>
+
+
+<script>
+
+  import { mapActions } from 'vuex';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { RouteNames } from '../../../constants';
+  import ChannelStar from '../ChannelStar';
+  import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
+  import Languages from 'shared/leUtils/Languages';
+
+  export default {
+    name: 'StudioChannelCard',
+    components: {
+      ChannelStar,
+      ChannelTokenModal,
+    },
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
+    props: {
+      channel: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        tokenDialog: false,
+        deleteDialog: false,
+        dropDownArr: [],
+      };
+    },
+    computed: {
+      linkComputedClass() {
+        return this.$computedClass({
+          ':hover': {
+            backgroundColor: 'rgba(0,0,0,.1)',
+          },
+          ':focus': { ...this.$coreOutline, outlineOffset: 0 },
+        });
+      },
+      canEdit() {
+        return this.channel.edit;
+      },
+      thumbnailSrc() {
+        return this.channel.thumbnail_encoding && this.channel.thumbnail_encoding.base64
+          ? this.channel.thumbnail_encoding.base64
+          : this.channel.thumbnail_url;
+      },
+      getPublishStatus() {
+        return this.channel.last_published
+          ? this.$tr('lastPublished', {
+            last_published: this.$formatRelative(this.channel.last_published, {
+              now: new Date(),
+            }),
+          })
+          : this.$tr('unpublishedText');
+      },
+      channelDetailsLink() {
+        return {
+          name: RouteNames.CHANNEL_DETAILS,
+          query: {
+            // this component is used on the catalog search
+            // page => do not lose search query
+            ...this.$route.query,
+            last: this.$route.name,
+          },
+          params: {
+            channelId: this.channel.id,
+          },
+        };
+      },
+      language() {
+        const lang = Languages.get(this.channel.language);
+        if (lang) {
+          return lang.native_name;
+        }
+        return this.$tr('channelLanguageNotSetIndicator');
+      },
+      hasUnpublishedChanges() {
+        return !this.channel.last_published || this.channel.modified > this.channel.last_published;
+      },
+    },
+    methods: {
+      ...mapActions('channel', ['deleteChannel', 'removeViewer']),
+      goToChannelRoute() {
+        window.location.href = window.Urls.channel(this.channel.id);
+      },
+      openDropDown() {
+        this.dropDownArr = this.dropDownItems();
+      },
+      dropDownItems() {
+        let options = [
+          {
+            label: this.$tr('editChannel'),
+            icon: 'edit',
+            value: 'edit',
+          },
+          {
+            label: this.$tr('copyToken'),
+            icon: 'copy',
+            value: 'copy',
+          },
+          {
+            label: this.$tr('goToWebsite'),
+            icon: 'openNewTab',
+            value: 'source-url',
+          },
+          {
+            label: this.$tr('viewContent'),
+            icon: 'openNewTab',
+            value: 'demo-url',
+          },
+          {
+            label: this.canEdit ? this.$tr('deleteChannel') : this.$tr('removeChannel'),
+            icon: 'trash',
+            value: 'delete',
+          },
+        ];
+        if (!this.channel.published) {
+          options = options.filter(item => item.value !== 'copy');
+        }
+        if (this.channel.source_url === '') {
+          options = options.filter(item => item.value !== 'source-url');
+        }
+        if (this.channel.demo_server_url === '') {
+          options = options.filter(item => item.value !== 'demo-url');
+        }
+        return options;
+      },
+      selectedItem(option) {
+        const value = option.value;
+        if (value === 'edit') {
+          this.channelEditLink();
+        } else if (value === 'copy') {
+          this.tokenDialog = true;
+        } else if (value === 'delete') {
+          this.deleteDialog = true;
+        } else if (value === 'source-url') {
+          window.open(this.channel.source_url, '_blank');
+        } else if (value === 'demo-url') {
+          window.open(this.channel.demo_server_url, '_blank');
+        }
+      },
+      channelEditLink() {
+        this.$router.push({
+          name: RouteNames.CHANNEL_EDIT,
+          query: {
+            // this component is used on the catalog search
+            // page => do not lose search query
+            ...this.$route.query,
+            last: this.$route.name,
+          },
+          params: {
+            channelId: this.channel.id,
+            tab: 'edit',
+          },
+        });
+      },
+      handleDelete() {
+        if (!this.canEdit) {
+          const currentUserId = this.$store.state.session.currentUser.id;
+          this.removeViewer({ channelId: this.channel.id, userId: currentUserId }).then(() => {
+            this.deleteDialog = false;
+            this.$store.dispatch('showSnackbarSimple', this.$tr('channelRemovedSnackbar'));
+          });
+        } else {
+          this.deleteChannel(this.channel.id).then(() => {
+            this.deleteDialog = false;
+            this.$store.dispatch('showSnackbarSimple', this.$tr('channelDeletedSnackbar'));
+          });
+        }
+      },
+      trackTokenCopy() {
+        this.$analytics.trackAction('channel_list', 'Copy token', {
+          eventLabel: this.channel.primary_token,
+        });
+      },
+    },
+    $trs: {
+      resourceCount: '{count, plural,\n =1 {# resource}\n other {# resources}}',
+      unpublishedText: 'Unpublished',
+      lastPublished: 'Published {last_published}',
+      lastUpdated: 'Updated {updated}',
+      details: 'Details',
+      viewContent: 'View channel on Kolibri',
+      goToWebsite: 'Go to source website',
+      editChannel: 'Edit channel details',
+      copyToken: 'Copy channel token',
+      deleteChannel: 'Delete channel',
+      deleteTitle: 'Delete this channel',
+      removeChannel: 'Remove from channel list',
+      removeBtn: 'Remove',
+      removeTitle: 'Remove from channel list',
+      deletePrompt: 'This channel will be permanently deleted. This cannot be undone.',
+      removePrompt:
+        'You have view-only access to this channel. Confirm that you want to remove it from your list of channels.',
+      channelDeletedSnackbar: 'Channel deleted',
+      channelRemovedSnackbar: 'Channel removed',
+      channelLanguageNotSetIndicator: 'No language set',
+      cancel: 'Cancel',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .channel {
+    width: 100%;
+  }
+
+  .below-title {
+    font-size: 14px;
+  }
+
+  .resource {
+    span:first-child::after {
+      margin: 0 8px;
+      content: '•';
+    }
+  }
+
+  .desc {
+    margin-top: 12px;
+  }
+
+  .details-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .footer-right,
+  .footer-left,
+  .last-updated {
+    display: flex;
+    align-items: center;
+  }
+
+  .footer-left {
+    span {
+      font-size: 14px;
+    }
+
+    div {
+      margin-left: 8px;
+    }
+  }
+
+  .details-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .img-placeholder-icon {
+    width: 50%;
+    min-width: 24px;
+    height: 50%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/styles/StudioChannels.scss b/contentcuration/contentcuration/frontend/channelList/views/Channel/styles/StudioChannels.scss
new file mode 100644
index 0000000000..da4b164ec5
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/styles/StudioChannels.scss
@@ -0,0 +1,32 @@
+.studio-channels {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: 100%;
+}
+
+.no-channels {
+  padding: 16px 0 0 16px;
+  font-size: 24px;
+}
+
+.channels-body {
+  width: 100%;
+}
+
+.cards {
+  margin-top: 16px;
+
+  /* check this below class, this should be coming form KDS */
+  ::v-deep .visuallyhidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
+  }
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue
index d9cce46e7f..afe78c7a28 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelTokenModal.vue
@@ -4,6 +4,7 @@
     v-if="dialog"
     :title="$tr('copyTitle')"
     :cancelText="$tr('close')"
+    :appendToOverlay="appendToOverlay"
     @cancel="dialog = false"
   >
     <p>{{ $tr('copyTokenInstructions') }}</p>
@@ -30,6 +31,10 @@
         type: Boolean,
         default: false,
       },
+      appendToOverlay: {
+        type: Boolean,
+        default: false,
+      },
       channel: {
         type: Object,
         required: true,