diff --git a/contentcuration/contentcuration/frontend/channelList/router.js b/contentcuration/contentcuration/frontend/channelList/router.js
index 533057ef1b..01aa769d29 100644
--- a/contentcuration/contentcuration/frontend/channelList/router.js
+++ b/contentcuration/contentcuration/frontend/channelList/router.js
@@ -1,6 +1,6 @@
 import VueRouter from 'vue-router';
 import ChannelList from './views/Channel/ChannelList';
-import ChannelSetList from './views/ChannelSet/ChannelSetList';
+import StudioCollectionsTable from './views/ChannelSet/StudioCollectionsTable';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
 import CatalogList from './views/Channel/CatalogList';
 import { RouteNames } from './constants';
@@ -21,7 +21,7 @@ const router = new VueRouter({
     {
       name: RouteNames.CHANNEL_SETS,
       path: '/collections',
-      component: ChannelSetList,
+      component: StudioCollectionsTable,
     },
     {
       name: RouteNames.NEW_CHANNEL_SET,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
new file mode 100644
index 0000000000..2f26b6d902
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -0,0 +1,345 @@
+<template>
+
+  <KPageContainer class="page-container">
+    <div class="table-header">
+      <div class="header-left">
+        <KButton
+          appearance="basic-link"
+          class="info-link"
+          @click="infoDialog = true"
+        >
+          {{ $tr('aboutChannelSetsLink') }}
+        </KButton>
+
+        <KModal
+          v-if="infoDialog"
+          :title="$tr('aboutChannelSets')"
+          :cancelText="$tr('cancelButtonLabel')"
+          @cancel="infoDialog = false"
+        >
+          <div class="info-content">
+            <p>{{ $tr('channelSetsDescriptionText') }}</p>
+            <p>{{ $tr('channelSetsInstructionsText') }}</p>
+            <p
+              class="disclaimer"
+              :style="{ color: $themeTokens.error }"
+            >
+              {{ $tr('channelSetsDisclaimer') }}
+            </p>
+          </div>
+        </KModal>
+      </div>
+
+      <div class="header-right">
+        <KButton
+          v-if="!loading"
+          appearance="raised-button"
+          primary
+          data-test="add-channelset"
+          :text="$tr('addChannelSetTitle')"
+          @click="newChannelSet"
+        />
+      </div>
+    </div>
+
+    <div class="table-container">
+      <KTable
+        class="collections-table"
+        :stickyColumns="stickyColumns"
+        caption=""
+        :headers="tableHeaders"
+        :rows="tableRows"
+        :dataLoading="loading"
+        sortable
+        disableBuiltinSorting
+        :emptyMessage="$tr('noChannelSetsFound')"
+      >
+        <template #cell="{ content, colIndex }">
+          <!-- Column 0: Collection Name -->
+          <div
+            v-if="colIndex === 0"
+            class="collection-name-cell"
+          >
+            <div class="collection-info">
+              <h3
+                class="collection-title notranslate"
+                dir="auto"
+              >
+                {{ content }}
+              </h3>
+            </div>
+          </div>
+
+          <!-- Column 1: Tokens -->
+          <div
+            v-else-if="colIndex === 1"
+            class="tokens-cell"
+          >
+            <StudioCopyToken
+              v-if="content"
+              :token="content"
+              class="token-item"
+              :loading="!content"
+            />
+            <em
+              v-else
+              :style="{ color: $themeTokens.annotation }"
+              class="saving-text"
+            >
+              {{ $tr('saving') }}
+            </em>
+          </div>
+
+          <!-- Column 2: Channel Count -->
+          <div
+            v-else-if="colIndex === 2"
+            class="channel-count"
+          >
+            {{ $formatNumber(content) }}
+          </div>
+
+          <!-- Column 3: Actions -->
+          <div
+            v-else-if="colIndex === 3"
+            class="actions-cell"
+          >
+            <KIconButton
+              icon="optionsVertical"
+              :aria-label="$tr('options')"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :options="dropdownOptions"
+                  :hasIcons="true"
+                  @select="option => handleOptionSelect(option, content)"
+                />
+              </template>
+            </KIconButton>
+          </div>
+        </template>
+      </KTable>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <KModal
+      v-if="deleteDialog"
+      :title="$tr('deleteChannelSetTitle')"
+      :submitText="$tr('delete')"
+      :cancelText="$tr('cancel')"
+      @submit="confirmDelete"
+      @cancel="deleteDialog = false"
+    >
+      <p>{{ $tr('deleteChannelSetText') }}</p>
+    </KModal>
+  </KPageContainer>
+
+</template>
+
+
+<script>
+
+  import { mapActions, mapGetters } from 'vuex';
+  import { RouteNames } from '../../constants';
+  import StudioCopyToken from '../../../settings/pages/Account/StudioCopyToken';
+
+  export default {
+    name: 'StudioCollectionsTable',
+    components: {
+      StudioCopyToken,
+    },
+    data() {
+      return {
+        loading: true,
+        infoDialog: false,
+        deleteDialog: false,
+        collectionToDelete: null,
+      };
+    },
+    computed: {
+      ...mapGetters('channelSet', ['channelSets', 'getChannelSet']),
+
+      tableHeaders() {
+        return [
+          {
+            label: this.$tr('title'),
+            dataType: 'string',
+            minWidth: '200px',
+            width: '55%',
+            columnId: 'name',
+          },
+          {
+            label: this.$tr('token'),
+            dataType: 'string',
+            minWidth: '200px',
+            width: '20%',
+            columnId: 'tokens',
+          },
+          {
+            label: this.$tr('channelNumber'),
+            dataType: 'number',
+            minWidth: '100px',
+            width: '15%',
+            columnId: 'channel_count',
+          },
+          {
+            label: '',
+            dataType: 'undefined',
+            width: '10%',
+            columnId: 'actions',
+          },
+        ];
+      },
+
+      tableRows() {
+        if (!this.channelSets || !Array.isArray(this.channelSets)) {
+          return [];
+        }
+
+        return this.channelSets.map(collection => {
+          const channelSet = this.getChannelSet(collection.id);
+          const channelCount = channelSet?.channels?.length || 0;
+
+          return [
+            collection.name || '',
+            collection.secret_token || null,
+            channelCount,
+            collection.id,
+          ];
+        });
+      },
+
+      stickyColumns() {
+        return ['first', 'last'];
+      },
+
+      dropdownOptions() {
+        return [
+          {
+            label: this.$tr('edit'),
+            value: 'edit',
+            icon: 'edit',
+          },
+          {
+            label: this.$tr('delete'),
+            value: 'delete',
+            icon: 'trash',
+          },
+        ];
+      },
+    },
+    mounted() {
+      this.loadChannelSetList().then(() => {
+        this.loading = false;
+      });
+    },
+    methods: {
+      ...mapActions('channelSet', ['loadChannelSetList', 'deleteChannelSet']),
+
+      handleOptionSelect(option, collectionId) {
+        if (option.value === 'edit') {
+          this.$router.push({
+            name: RouteNames.CHANNEL_SET_DETAILS,
+            params: { channelSetId: collectionId },
+          });
+        } else if (option.value === 'delete') {
+          this.collectionToDelete =
+            this.getChannelSet(collectionId) ||
+            this.channelSets.find(c => c.id === collectionId) ||
+            null;
+          if (this.collectionToDelete) this.deleteDialog = true;
+        }
+      },
+
+      confirmDelete() {
+        if (this.collectionToDelete) {
+          this.deleteChannelSet(this.collectionToDelete)
+            .then(() => {
+              this.loadChannelSetList();
+              this.deleteDialog = false;
+              this.collectionToDelete = null;
+              this.$store.dispatch('showSnackbarSimple', this.$tr('collectionDeleted'));
+            })
+            .catch(() => {
+              this.deleteDialog = false;
+              this.collectionToDelete = null;
+              this.$store.dispatch('showSnackbarSimple', this.$tr('deleteError'));
+            });
+        }
+      },
+
+      newChannelSet() {
+        this.$router.push({
+          name: RouteNames.NEW_CHANNEL_SET,
+        });
+      },
+    },
+    $trs: {
+      aboutChannelSetsLink: 'Learn about collections',
+      aboutChannelSets: 'About collections',
+      channelSetsDescriptionText:
+        'A collection contains multiple Kolibri Studio channels that can be imported at one time to Kolibri with a single collection token.',
+      channelSetsInstructionsText:
+        'You can make a collection by selecting the channels you want to be imported together.',
+      channelSetsDisclaimer:
+        'You will need Kolibri version 0.12.0 or higher to import channel collections',
+      cancelButtonLabel: 'Close',
+      addChannelSetTitle: 'New collection',
+      noChannelSetsFound:
+        'You can package together multiple channels to create a collection. The entire collection can then be imported to Kolibri at once by using a collection token.',
+      title: 'Collection name',
+      token: 'Token ID',
+      channelNumber: 'Number of channels',
+      options: 'Options',
+      deleteChannelSetTitle: 'Delete collection',
+      deleteChannelSetText: 'Are you sure you want to delete this collection?',
+      cancel: 'Cancel',
+      edit: 'Edit collection',
+      delete: 'Delete collection',
+      saving: 'Saving',
+      collectionDeleted: 'Collection  deleted',
+      deleteError: 'Error deleting collection',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .page-container {
+    width: 100%;
+    max-width: 1440px;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .table-header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+  }
+
+  .header-left,
+  .header-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .info-content p {
+    margin-bottom: 16px;
+  }
+
+  .actions-cell {
+    display: flex;
+    justify-content: flex-end;
+  }
+  @media (max-width: 500px) {
+    .table-header {
+      justify-content: center;
+    }
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
new file mode 100644
index 0000000000..90cd753ab2
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
@@ -0,0 +1,202 @@
+import { render, screen, within, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex, { Store } from 'vuex';
+import { nextTick } from 'vue';
+import VueRouter from 'vue-router';
+import StudioCollectionsTable from '../StudioCollectionsTable.vue';
+import { RouteNames } from '../../../constants';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+
+const mockChannelSets = [
+  {
+    id: 'collection-1',
+    name: 'Test Collection 1',
+    secret_token: 'token-123',
+    channels: ['channel-1', 'channel-2'],
+  },
+  {
+    id: 'collection-2',
+    name: 'Test Collection 2',
+    secret_token: null,
+    channels: ['channel-3'],
+  },
+];
+
+const mockActions = {
+  loadChannelSetList: jest.fn(() => Promise.resolve()),
+  deleteChannelSet: jest.fn(() => Promise.resolve()),
+};
+
+const createMockStore = () => {
+  return new Store({
+    modules: {
+      channelSet: {
+        namespaced: true,
+        state: {},
+        getters: {
+          channelSets: () => mockChannelSets,
+          getChannelSet: () => id => mockChannelSets.find(cs => cs.id === id),
+        },
+        actions: mockActions,
+      },
+    },
+    actions: {
+      showSnackbarSimple: jest.fn(),
+    },
+  });
+};
+
+const renderComponent = async (options = {}) => {
+  const store = options.store || createMockStore();
+  const router = new VueRouter({
+    routes: [
+      {
+        name: RouteNames.CHANNEL_SETS,
+        path: '/collections',
+        component: StudioCollectionsTable,
+      },
+      {
+        name: RouteNames.NEW_CHANNEL_SET,
+        path: '/collections/new',
+        component: { template: '<div>New Channel Set</div>' },
+      },
+      {
+        name: RouteNames.CHANNEL_SET_DETAILS,
+        path: '/collections/:channelSetId',
+        component: { template: '<div>Channel Set Details</div>' },
+      },
+    ],
+  });
+
+  router.push({ name: RouteNames.CHANNEL_SETS });
+
+  const result = render(StudioCollectionsTable, {
+    localVue,
+    store,
+    router,
+    ...options,
+  });
+  await waitFor(() => {
+    expect(mockActions.loadChannelSetList).toHaveBeenCalled();
+  });
+
+  await nextTick();
+
+  return { ...result, router };
+};
+
+describe('StudioCollectionsTable', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should display channel sets in table when data is loaded', async () => {
+    await renderComponent();
+
+    expect(screen.getByText('Test Collection 1')).toBeInTheDocument();
+    expect(screen.getByText('Test Collection 2')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('should display empty message when no collections are present', async () => {
+    const emptyStore = new Store({
+      modules: {
+        channelSet: {
+          namespaced: true,
+          state: {},
+          getters: {
+            channelSets: () => [],
+            getChannelSet: () => () => null,
+          },
+          actions: mockActions,
+        },
+      },
+    });
+
+    await renderComponent({ store: emptyStore });
+
+    expect(
+      screen.getByText(
+        'You can package together multiple channels to create a collection. The entire collection can then be imported to Kolibri at once by using a collection token.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should open info modal when "Learn about collections" link is clicked', async () => {
+    const user = userEvent.setup();
+    await renderComponent();
+
+    const infoLink = screen.getByText('Learn about collections');
+    await user.click(infoLink);
+
+    expect(screen.getByRole('heading', { name: 'About collections' })).toBeInTheDocument();
+
+    const modal = screen.getByRole('dialog');
+    expect(
+      within(modal).getByText(
+        'A collection contains multiple Kolibri Studio channels that can be imported at one time to Kolibri with a single collection token.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should navigate to new channel set page when "New collection" button is clicked', async () => {
+    const user = userEvent.setup();
+    const { router } = await renderComponent();
+
+    const newCollectionButton = screen.getByRole('button', { name: /new collection/i });
+    await user.click(newCollectionButton);
+
+    expect(router.currentRoute.name).toBe(RouteNames.NEW_CHANNEL_SET);
+  });
+
+  it('should navigate to edit page when edit option is selected', async () => {
+    const user = userEvent.setup();
+    const { router } = await renderComponent();
+
+    const optionsButtons = screen.getAllByRole('button', { name: /options/i });
+    await user.click(optionsButtons[0]);
+
+    const editOption = screen.getByText('Edit collection');
+    await user.click(editOption);
+
+    expect(router.currentRoute.name).toBe(RouteNames.CHANNEL_SET_DETAILS);
+    expect(router.currentRoute.params.channelSetId).toBe('collection-1');
+  });
+
+  it('should call delete action when delete is confirmed', async () => {
+    const user = userEvent.setup();
+    await renderComponent();
+
+    const optionsButtons = screen.getAllByRole('button', { name: /options/i });
+    await user.click(optionsButtons[0]);
+
+    const deleteOption = screen.getByText('Delete collection');
+    await user.click(deleteOption);
+
+    const deleteConfirmationModal = screen.getByRole('dialog');
+
+    expect(
+      within(deleteConfirmationModal).getByRole('heading', {
+        name: 'Delete collection',
+      }),
+    ).toBeInTheDocument();
+
+    const deleteButton = within(deleteConfirmationModal).getByRole('button', {
+      name: 'Delete collection',
+    });
+    await user.click(deleteButton);
+
+    expect(mockActions.deleteChannelSet).toHaveBeenCalledWith(
+      expect.any(Object),
+      expect.objectContaining({
+        id: 'collection-1',
+        name: 'Test Collection 1',
+      }),
+    );
+  });
+});