diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
index b01d127bf7..a14c96ff81 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
@@ -131,9 +131,9 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import StudioChip from 'shared/views/StudioChip';
   import ExpandableList from 'shared/views/ExpandableList';
   import { generateFormMixin } from 'shared/mixins';
-  import StudioChip from 'shared/views/StudioChip';
 
   const formMixin = generateFormMixin({
     subject: { required: true },
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioChip.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioChip.spec.js
deleted file mode 100644
index efc172b6a2..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioChip.spec.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { render, screen } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import VueRouter from 'vue-router';
-import StudioChip from '../StudioChip.vue';
-
-const mockRouter = new VueRouter();
-
-const renderComponent = (props = {}) => {
-  const defaultProps = {
-    text: 'Test Chip',
-    close: false,
-    ...props,
-  };
-
-  return render(StudioChip, {
-    props: defaultProps,
-    routes: mockRouter,
-  });
-};
-
-describe('StudioChip', () => {
-  test('renders with text prop', () => {
-    renderComponent({ text: 'Test Chip' });
-    expect(screen.getByText('Test Chip')).toBeInTheDocument();
-  });
-
-  test('renders close button when close prop is true', () => {
-    renderComponent({ close: true });
-    expect(screen.getByRole('button', { name: 'Remove Test Chip' })).toBeInTheDocument();
-  });
-
-  test('does not render close button when close prop is false', () => {
-    renderComponent({ close: false });
-    expect(screen.queryByRole('button', { name: 'Remove Test Chip' })).not.toBeInTheDocument();
-  });
-
-  test('emits close event when close button is clicked', async () => {
-    const user = userEvent.setup();
-    const { emitted } = renderComponent({ close: true });
-
-    await user.click(screen.getByRole('button', { name: 'Remove Test Chip' }));
-    expect(emitted().close).toHaveLength(1);
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioDetailsPanel.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioDetailsPanel.spec.js
new file mode 100644
index 0000000000..1795b51c83
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioDetailsPanel.spec.js
@@ -0,0 +1,329 @@
+import { render } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import StudioDetailsPanel from '../details/StudioDetailsPanel.vue';
+
+const router = new VueRouter({
+  routes: [],
+});
+
+const mockChannelDetails = {
+  name: 'Test Channel',
+  description: 'Test channel description',
+  thumbnail_url: null,
+  published: true,
+  version: 1,
+  primary_token: 'test-token',
+  language: 'en',
+  resource_count: 10,
+  kind_count: [],
+};
+
+describe('StudioDetailsPanel', () => {
+  it('renders without crashing with minimal props', () => {
+    const { container } = render(StudioDetailsPanel, {
+      router,
+      props: {
+        details: {},
+        isChannel: false,
+        loading: false,
+      },
+      mocks: {
+        $formatNumber: jest.fn(n => String(n)),
+        $formatDate: jest.fn(() => 'Test Date'),
+        $tr: jest.fn(key => key),
+      },
+    });
+
+    expect(container).toBeInTheDocument();
+  });
+
+  it('displays loader when loading is true', () => {
+    const { container } = render(StudioDetailsPanel, {
+      router,
+      props: {
+        details: {},
+        isChannel: true,
+        loading: true,
+      },
+      mocks: {
+        $formatNumber: jest.fn(n => String(n)),
+        $formatDate: jest.fn(() => 'Test Date'),
+        $tr: jest.fn(key => key),
+      },
+    });
+
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders channel information', () => {
+    const { container } = render(StudioDetailsPanel, {
+      router,
+      props: {
+        details: mockChannelDetails,
+        isChannel: true,
+        loading: false,
+      },
+      mocks: {
+        $formatNumber: jest.fn(n => String(n)),
+        $formatDate: jest.fn(() => 'Test Date'),
+        $tr: jest.fn(key => key),
+      },
+    });
+
+    expect(container).toHaveTextContent('Test Channel');
+  });
+
+  describe('when channel has all data', () => {
+    const fullDataChannel = {
+      name: 'Complete Channel',
+      description: 'A fully populated channel with all fields',
+      thumbnail_url: 'https://example.com/thumb.jpg',
+      published: true,
+      version: 2,
+      primary_token: 'test-token-abc123',
+      language: 'en',
+      created: '2025-01-15T10:00:00Z',
+      last_update: '2025-01-20T15:30:00Z',
+      resource_count: 42,
+      resource_size: 1024000000,
+      kind_count: [
+        { kind_id: 'video', count: 20 },
+        { kind_id: 'document', count: 22 },
+      ],
+      levels: ['Level 1', 'Level 2', 'Level 3'],
+      categories: ['Category A', 'Category B'],
+      includes: { coach_content: 1, exercises: 1 },
+      tags: [{ tag_name: 'science' }, { tag_name: 'math' }],
+      languages: ['English', 'Spanish', 'French'],
+      accessible_languages: ['English'],
+      authors: ['Author One', 'Author Two'],
+      providers: ['Provider ABC'],
+      aggregators: ['Aggregator XYZ'],
+      licenses: ['CC_BY_SA_3_0'],
+      copyright_holders: ['Copyright Holder Inc'],
+      original_channels: [],
+      sample_nodes: [],
+    };
+
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = render(StudioDetailsPanel, {
+        router,
+        props: {
+          details: fullDataChannel,
+          isChannel: true,
+          loading: false,
+        },
+        mocks: {
+          $formatNumber: jest.fn(n => String(n)),
+          $formatDate: jest.fn(() => 'Test Date'),
+          $tr: jest.fn(key => key),
+        },
+      });
+    });
+
+    it('should render channel name', () => {
+      expect(wrapper.container).toHaveTextContent('Complete Channel');
+    });
+
+    it('should render channel description', () => {
+      expect(wrapper.container).toHaveTextContent('A fully populated channel with all fields');
+    });
+
+    it('should render published status', () => {
+      expect(wrapper.container).toHaveTextContent('publishedHeading');
+    });
+
+    it('should render version information', () => {
+      expect(wrapper.container).toHaveTextContent('currentVersionHeading');
+      expect(wrapper.container).toHaveTextContent('2');
+    });
+
+    it('should render primary language', () => {
+      expect(wrapper.container).toHaveTextContent('primaryLanguageHeading');
+    });
+
+    it('should render resource count', () => {
+      expect(wrapper.container).toHaveTextContent('resourceHeading');
+      expect(wrapper.container).toHaveTextContent('42');
+    });
+
+    it('should render educational levels when present', () => {
+      expect(wrapper.container).toHaveTextContent('levelsHeading');
+      const levelRows = Array.from(wrapper.container.querySelectorAll('*')).filter(el =>
+        el.textContent?.includes('levelsHeading'),
+      );
+      expect(levelRows.length).toBeGreaterThan(0);
+    });
+
+    it('should render categories when present', () => {
+      expect(wrapper.container).toHaveTextContent('categoriesHeading');
+      const categoryRows = Array.from(wrapper.container.querySelectorAll('*')).filter(el =>
+        el.textContent?.includes('categoriesHeading'),
+      );
+      expect(categoryRows.length).toBeGreaterThan(0);
+    });
+
+    it('should render creation date', () => {
+      expect(wrapper.container).toHaveTextContent('creationHeading');
+    });
+
+    it('should render channel size', () => {
+      expect(wrapper.container).toHaveTextContent('sizeHeading');
+    });
+
+    it('should render licenses when present', () => {
+      expect(wrapper.container).toHaveTextContent('licensesLabel');
+    });
+
+    it('should render authors when present', () => {
+      expect(wrapper.container).toHaveTextContent('authorsLabel');
+    });
+
+    it('should render tags when present', () => {
+      expect(wrapper.container).toHaveTextContent('tagsHeading');
+    });
+  });
+
+  describe('when channel has missing data', () => {
+    const minimalChannel = {
+      name: 'Minimal Channel',
+      description: '',
+      thumbnail_url: null,
+      published: false,
+      version: null,
+      primary_token: null,
+      language: null,
+      created: null,
+      last_update: null,
+      resource_count: 0,
+      resource_size: 0,
+      kind_count: [],
+      levels: [],
+      categories: [],
+      includes: { coach_content: 0, exercises: 0 },
+      tags: [],
+      languages: [],
+      accessible_languages: [],
+      authors: [],
+      providers: [],
+      aggregators: [],
+      licenses: [],
+      copyright_holders: [],
+      original_channels: [],
+      sample_nodes: [],
+    };
+
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = render(StudioDetailsPanel, {
+        router,
+        props: {
+          details: minimalChannel,
+          isChannel: true,
+          loading: false,
+        },
+        mocks: {
+          $formatNumber: jest.fn(n => String(n)),
+          $formatDate: jest.fn(() => 'Test Date'),
+          $tr: jest.fn(key => key),
+        },
+      });
+    });
+
+    it('should render channel name even when minimal', () => {
+      expect(wrapper.container).toHaveTextContent('Minimal Channel');
+    });
+
+    it('should show placeholder icon when thumbnail is missing', () => {
+      expect(wrapper.container).toBeInTheDocument();
+    });
+
+    it('should show default text when levels are missing', () => {
+      expect(wrapper.container).toHaveTextContent('---');
+    });
+
+    it('should show default text when categories are missing', () => {
+      expect(wrapper.container).toHaveTextContent('---');
+    });
+
+    it('should not show primary language when not set', () => {
+      const container = wrapper.container;
+      const languageRows = Array.from(container.querySelectorAll('*')).filter(el =>
+        el.textContent?.includes('primaryLanguageHeading'),
+      );
+      expect(languageRows.length).toBe(0);
+    });
+
+    it('should render unpublished status when published is false', () => {
+      expect(wrapper.container).toHaveTextContent('unpublishedText');
+    });
+
+    it('should not display token row when token is not present', () => {
+      expect(wrapper.container).not.toHaveTextContent('test-token');
+    });
+  });
+
+  describe('when channel has partial data', () => {
+    const partialChannel = {
+      name: 'Partial Channel',
+      description: 'Some description',
+      thumbnail_url: null,
+      published: true,
+      version: 1,
+      primary_token: 'partial-token-xyz',
+      language: 'es',
+      created: '2025-01-10T10:00:00Z',
+      last_update: '2025-01-18T10:00:00Z',
+      resource_count: 15,
+      resource_size: 512000000,
+      kind_count: [{ kind_id: 'video', count: 15 }],
+      levels: [],
+      categories: ['Category C'],
+      includes: { coach_content: 0, exercises: 1 },
+      tags: [],
+      languages: [],
+      accessible_languages: [],
+      authors: [],
+      providers: [],
+      aggregators: [],
+      licenses: [],
+      copyright_holders: [],
+      original_channels: [],
+      sample_nodes: [],
+    };
+
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = render(StudioDetailsPanel, {
+        router,
+        props: {
+          details: partialChannel,
+          isChannel: true,
+          loading: false,
+        },
+        mocks: {
+          $formatNumber: jest.fn(n => String(n)),
+          $formatDate: jest.fn(() => 'Test Date'),
+          $tr: jest.fn(key => key),
+        },
+      });
+    });
+
+    it('should render fields that have data and show placeholder for missing fields', () => {
+      expect(wrapper.container).toHaveTextContent('Partial Channel');
+      expect(wrapper.container).toHaveTextContent('Some description');
+      expect(wrapper.container).toHaveTextContent('categoriesHeading');
+      expect(wrapper.container).toHaveTextContent('---');
+    });
+
+    it('should render both data-present and data-absent states', () => {
+      expect(wrapper.container).toHaveTextContent('categoriesHeading');
+      expect(wrapper.container).toHaveTextContent('levelsHeading');
+      expect(wrapper.container).toHaveTextContent('---');
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioDetailsRow.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioDetailsRow.spec.js
new file mode 100644
index 0000000000..f94363f482
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioDetailsRow.spec.js
@@ -0,0 +1,289 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import StudioDetailsRow from '../details/StudioDetailsRow.vue';
+
+const router = new VueRouter({
+  routes: [],
+});
+
+const mockHelpTooltip = {
+  name: 'HelpTooltip',
+  props: ['text', 'tooltipId'],
+  template: '<span data-testid="help-tooltip">{{ text }}</span>',
+};
+
+describe('StudioDetailsRow', () => {
+  it('renders label and text value', () => {
+    render(StudioDetailsRow, {
+      router,
+      props: {
+        label: 'Channel size',
+        text: '1.5 GB',
+      },
+      stubs: {
+        HelpTooltip: mockHelpTooltip,
+      },
+    });
+
+    expect(screen.getByText('Channel size')).toBeInTheDocument();
+    expect(screen.getByText('1.5 GB')).toBeInTheDocument();
+  });
+
+  it('renders slot content instead of text prop', () => {
+    render(StudioDetailsRow, {
+      router,
+      props: {
+        label: 'Description',
+      },
+      slots: {
+        default: '<div>Custom Content</div>',
+      },
+      stubs: {
+        HelpTooltip: mockHelpTooltip,
+      },
+    });
+
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Custom Content')).toBeInTheDocument();
+  });
+
+  it('displays HelpTooltip when definition is provided', () => {
+    render(StudioDetailsRow, {
+      router,
+      props: {
+        label: 'Resources for coaches',
+        text: '5',
+        definition: 'Resources for coaches are only visible to coaches in Kolibri',
+      },
+      stubs: {
+        HelpTooltip: mockHelpTooltip,
+      },
+    });
+
+    expect(screen.getByTestId('help-tooltip')).toBeInTheDocument();
+    expect(
+      screen.getByText('Resources for coaches are only visible to coaches in Kolibri'),
+    ).toBeInTheDocument();
+  });
+
+  it('does not display HelpTooltip when definition is not provided', () => {
+    render(StudioDetailsRow, {
+      router,
+      props: {
+        label: 'Created on',
+        text: 'October 11, 2025',
+      },
+      stubs: {
+        HelpTooltip: mockHelpTooltip,
+      },
+    });
+
+    expect(screen.queryByTestId('help-tooltip')).not.toBeInTheDocument();
+  });
+
+  it('renders empty text prop correctly', () => {
+    const { container } = render(StudioDetailsRow, {
+      router,
+      props: {
+        label: 'Empty Field',
+        text: '',
+      },
+      stubs: {
+        HelpTooltip: mockHelpTooltip,
+      },
+    });
+
+    expect(screen.getByText('Empty Field')).toBeInTheDocument();
+    const valueColumn = container.querySelector('.value-column');
+    expect(valueColumn).toHaveTextContent('');
+  });
+
+  describe('edge cases with various empty/falsy values', () => {
+    it('renders null value correctly', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Null Field',
+          text: null,
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.getByText('Null Field')).toBeInTheDocument();
+    });
+
+    it('renders undefined value correctly', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Undefined Field',
+          text: undefined,
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.getByText('Undefined Field')).toBeInTheDocument();
+    });
+
+    it('renders zero value correctly', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Zero Count',
+          text: '0',
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.getByText('Zero Count')).toBeInTheDocument();
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+
+    it('renders false boolean value correctly', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Boolean Field',
+          text: 'false',
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.getByText('Boolean Field')).toBeInTheDocument();
+      expect(screen.getByText('false')).toBeInTheDocument();
+    });
+
+    it('renders whitespace-only text correctly', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Whitespace Field',
+          text: '   ',
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.getByText('Whitespace Field')).toBeInTheDocument();
+    });
+
+    it('renders very long text value correctly', () => {
+      const longText = 'A'.repeat(500);
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Long Text Field',
+          text: longText,
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.getByText('Long Text Field')).toBeInTheDocument();
+      expect(screen.getByText(longText)).toBeInTheDocument();
+    });
+  });
+
+  describe('tooltip behavior', () => {
+    it('displays tooltip with correct content when definition is provided', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Test Label',
+          text: 'Test Value',
+          definition: 'This is a detailed explanation of the field',
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.getByTestId('help-tooltip')).toBeInTheDocument();
+      expect(screen.getByText('This is a detailed explanation of the field')).toBeInTheDocument();
+    });
+
+    it('does not display tooltip when definition is empty string', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Test Label',
+          text: 'Test Value',
+          definition: '',
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.queryByTestId('help-tooltip')).not.toBeInTheDocument();
+    });
+
+    it('does not display tooltip when definition is null', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Test Label',
+          text: 'Test Value',
+          definition: null,
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.queryByTestId('help-tooltip')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('slot content rendering', () => {
+    it('prioritizes slot content over text prop when both provided', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Mixed Content',
+          text: 'Should not see this',
+        },
+        slots: {
+          default: '<div>Slot content shown instead</div>',
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.getByText('Mixed Content')).toBeInTheDocument();
+      expect(screen.getByText('Slot content shown instead')).toBeInTheDocument();
+      expect(screen.queryByText('Should not see this')).not.toBeInTheDocument();
+    });
+
+    it('renders multiple elements in slot correctly', () => {
+      render(StudioDetailsRow, {
+        router,
+        props: {
+          label: 'Complex Slot',
+        },
+        slots: {
+          default: '<div>First element</div><div>Second element</div><div>Third element</div>',
+        },
+        stubs: {
+          HelpTooltip: mockHelpTooltip,
+        },
+      });
+
+      expect(screen.getByText('Complex Slot')).toBeInTheDocument();
+      expect(screen.getByText('First element')).toBeInTheDocument();
+      expect(screen.getByText('Second element')).toBeInTheDocument();
+      expect(screen.getByText('Third element')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
index 65c886f2c7..9deb31cd2f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
@@ -44,7 +44,7 @@
           </VList>
         </BaseMenu>
       </VLayout>
-      <DetailsPanel
+      <StudioDetailsPanel
         v-if="channel && details"
         class="channel-details-wrapper"
         :details="channelWithDetails"
@@ -60,15 +60,15 @@
 
   import { mapActions, mapGetters } from 'vuex';
   import { channelExportMixin } from './mixins';
-  import DetailsPanel from 'shared/views/details/DetailsPanel.vue';
   import { routerMixin } from 'shared/mixins';
-  import LoadingText from 'shared/views/LoadingText';
   import FullscreenModal from 'shared/views/FullscreenModal';
+  import LoadingText from 'shared/views/LoadingText';
+  import StudioDetailsPanel from 'shared/views/details/StudioDetailsPanel.vue';
 
   export default {
     name: 'ChannelDetailsModal',
     components: {
-      DetailsPanel,
+      StudioDetailsPanel,
       LoadingText,
       FullscreenModal,
     },
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsPanel.vue b/contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsPanel.vue
new file mode 100644
index 0000000000..9a56e3e39b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsPanel.vue
@@ -0,0 +1,761 @@
+<template>
+
+  <div :class="{ printing }">
+    <div class="thumbnail-container">
+      <KImg
+        v-if="isChannel ? _details.thumbnail_url : _details.thumbnail_src"
+        :src="isChannel ? _details.thumbnail_url : _details.thumbnail_src"
+        :altText="isChannel ? _details.name : _details.title"
+        aspectRatio="16:9"
+        scaleType="centerInside"
+      />
+      <KImg
+        v-else
+        isDecorative
+        aspectRatio="16:9"
+      >
+        <template #placeholder>
+          <div class="placeholder-content">
+            <KIcon
+              icon="image"
+              :style="{ fill: '#999999', width: '48px', height: '48px' }"
+            />
+          </div>
+        </template>
+      </KImg>
+    </div>
+    <br >
+    <h1
+      class="notranslate"
+      dir="auto"
+    >
+      {{ isChannel ? _details.name : _details.title }}
+    </h1>
+    <p
+      class="notranslate"
+      dir="auto"
+    >
+      {{ _details.description }}
+    </p>
+    <br >
+
+    <template v-if="isChannel">
+      <StudioDetailsRow
+        v-if="_details.published && _details.primary_token"
+        :label="$tr('tokenHeading')"
+      >
+        <template #default>
+          <StudioCopyToken
+            v-if="!printing"
+            :token="_details.primary_token"
+            :loading="false"
+          />
+          <span v-else>
+            {{ _details.primary_token.slice(0, 5) + '-' + _details.primary_token.slice(5) }}
+          </span>
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow :label="$tr('publishedHeading')">
+        <span v-if="_details.published">{{ publishedDate }}</span>
+        <em v-else>{{ $tr('unpublishedText') }}</em>
+      </StudioDetailsRow>
+      <StudioDetailsRow :label="$tr('currentVersionHeading')">
+        <template v-if="_details.published">
+          {{ _details.version }}
+        </template>
+        <template v-else>
+          {{ defaultText }}
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow
+        v-if="_details.language"
+        :label="$tr('primaryLanguageHeading')"
+        :text="translateLanguage(_details.language)"
+      />
+    </template>
+
+    <StudioLargeLoader v-if="loading" />
+    <div v-else-if="hasDetails">
+      <StudioDetailsRow
+        :label="$tr('creationHeading')"
+        :text="createdDate"
+      />
+      <StudioDetailsRow
+        :label="$tr('sizeHeading')"
+        :text="sizeText"
+      />
+      <StudioDetailsRow :label="$tr('resourceHeading')">
+        <template #default>
+          <p>{{ $formatNumber(_details.resource_count) }}</p>
+          <dl class="resource-list">
+            <div
+              v-for="item in kindCount"
+              :key="item.kind_id"
+              class="resource-item"
+            >
+              <dt class="resource-label">
+                <ContentNodeIcon :kind="item.kind_id" />
+                <span>{{ translateConstant(item.kind_id) }}</span>
+              </dt>
+              <dd class="resource-value">
+                {{ $formatNumber(item.count) }}
+              </dd>
+            </div>
+          </dl>
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow :label="$tr('levelsHeading')">
+        <template #default>
+          <div v-if="!levels.length">
+            {{ defaultText }}
+          </div>
+          <StudioChip
+            v-for="level in levels"
+            v-else-if="!printing"
+            :key="level"
+          >
+            {{ level }}
+          </StudioChip>
+          <span v-else>
+            {{ levelsPrintable }}
+          </span>
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow :label="$tr('categoriesHeading')">
+        <template #default>
+          <div v-if="!categories.length">
+            {{ defaultText }}
+          </div>
+          <StudioChip
+            v-for="category in categories"
+            v-else-if="!printing"
+            :key="category"
+          >
+            {{ category }}
+          </StudioChip>
+          <span v-else>
+            {{ categoriesPrintable }}
+          </span>
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow :label="$tr('containsHeading')">
+        <template
+          v-if="!printing"
+          #default
+        >
+          <StudioChip v-if="_details.includes.coach_content">
+            {{ $tr('coachHeading') }}
+          </StudioChip>
+          <StudioChip v-if="_details.includes.exercises">
+            {{ $tr('assessmentsIncludedText') }}
+          </StudioChip>
+          <div v-if="!_details.includes.exercises && !_details.includes.coach_content">
+            {{ defaultText }}
+          </div>
+        </template>
+        <template
+          v-else
+          #default
+        >
+          <span>{{ includesPrintable }}</span>
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow
+        :label="$tr('coachHeading')"
+        :text="$formatNumber(_details.includes.coach_content)"
+        :definition="!printing ? $tr('coachDescription') : ''"
+      />
+      <StudioDetailsRow :label="$tr('tagsHeading')">
+        <template #default>
+          <div v-if="!sortedTags.length">
+            {{ defaultText }}
+          </div>
+          <StudioChip
+            v-for="tag in sortedTags"
+            v-else-if="!printing"
+            :key="tag.tag_name"
+            :notranslate="true"
+          >
+            {{ tag.tag_name }}
+          </StudioChip>
+          <span v-else>
+            {{ tagPrintable }}
+          </span>
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow :label="$tr('languagesHeading')">
+        <template #default>
+          <ExpandableList
+            :noItemsText="defaultText"
+            :items="_details.languages"
+            :printing="printing"
+            inline
+          />
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow :label="$tr('subtitlesHeading')">
+        <template #default>
+          <ExpandableList
+            :noItemsText="defaultText"
+            :items="_details.accessible_languages"
+            :printing="printing"
+            inline
+          />
+        </template>
+      </StudioDetailsRow>
+
+      <StudioDetailsRow
+        :label="$tr('authorsLabel')"
+        :definition="!printing ? $tr('authorToolTip') : ''"
+      >
+        <template #default>
+          <ExpandableList
+            :noItemsText="defaultText"
+            :items="_details.authors"
+            :printing="printing"
+            inline
+          />
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow
+        :label="$tr('providersLabel')"
+        :definition="!printing ? $tr('providerToolTip') : ''"
+      >
+        <template #default>
+          <ExpandableList
+            :noItemsText="defaultText"
+            :items="_details.providers"
+            :printing="printing"
+            inline
+          />
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow
+        :label="$tr('aggregatorsLabel')"
+        :definition="!printing ? $tr('aggregatorToolTip') : ''"
+      >
+        <template #default>
+          <ExpandableList
+            :noItemsText="defaultText"
+            :items="_details.aggregators"
+            :printing="printing"
+            inline
+          />
+        </template>
+      </StudioDetailsRow>
+
+      <StudioDetailsRow :label="$tr('licensesLabel')">
+        <template #default>
+          <template v-if="!printing">
+            <span
+              v-for="license in _details.licenses"
+              :key="license"
+              ref="licenseChip"
+              class="license-chip-wrapper"
+            >
+              <StudioChip>
+                {{ translateConstant(license) }}
+              </StudioChip>
+              <KTooltip
+                :reference="`licenseChip-${license}`"
+                :refs="$refs"
+                placement="top"
+              >
+                <span>{{ translateConstant(license + '_description') }}</span>
+              </KTooltip>
+            </span>
+          </template>
+          <span v-else>
+            {{ licensesPrintable }}
+          </span>
+        </template>
+      </StudioDetailsRow>
+      <StudioDetailsRow :label="$tr('copyrightHoldersLabel')">
+        <template #default>
+          <ExpandableList
+            :items="_details.copyright_holders"
+            :no-items-text="defaultText"
+            :printing="printing"
+            inline
+          />
+        </template>
+      </StudioDetailsRow>
+
+      <StudioDetailsRow
+        v-if="_details.original_channels.length"
+        :label="$tr('containsContentHeading')"
+      >
+        <template #default>
+          <div
+            v-for="channel in _details.original_channels"
+            :key="channel.id"
+            class="preview-row"
+          >
+            <div class="source-thumbnail">
+              <KImg
+                v-if="channel.thumbnail"
+                :src="channel.thumbnail"
+                :altText="channel.name"
+                aspectRatio="16:9"
+                scaleType="contain"
+              />
+            </div>
+            <div
+              v-if="printing"
+              class="channel-name notranslate"
+            >
+              {{ channel.name }}
+            </div>
+            <a
+              v-else
+              :href="channelUrl(channel)"
+              target="_blank"
+              class="channel-link notranslate"
+            >
+              <span>{{ channel.name }}</span>
+              <KIcon
+                icon="openNewTab"
+                class="rtl-flip"
+                :style="{ marginLeft: '4px', marginRight: '4px' }"
+              />
+            </a>
+          </div>
+        </template>
+      </StudioDetailsRow>
+
+      <label
+        v-if="_details.sample_nodes.length"
+        class="sample-heading"
+      >
+        {{ isChannel ? $tr('sampleFromChannelHeading') : $tr('sampleFromTopicHeading') }}
+      </label>
+      <div
+        class="sample-nodes"
+        :class="{ 'printing-grid': printing }"
+      >
+        <div
+          v-for="node in _details.sample_nodes"
+          :key="node.node_id"
+          class="sample-node-card"
+        >
+          <KImg
+            v-if="node.thumbnail"
+            :src="node.thumbnail"
+            :altText="getTitle(node)"
+            aspectRatio="16:9"
+            scaleType="contain"
+          />
+          <KImg
+            v-else
+            isDecorative
+            aspectRatio="16:9"
+          >
+            <template #placeholder>
+              <div class="placeholder-content">
+                <KIcon
+                  icon="image"
+                  :style="{ fill: '#999999', width: '32px', height: '32px' }"
+                />
+              </div>
+            </template>
+          </KImg>
+          <div :class="getTitleClass(node)">
+            <p dir="auto">
+              {{ getTitle(node) }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import cloneDeep from 'lodash/cloneDeep';
+  import defaultsDeep from 'lodash/defaultsDeep';
+  import camelCase from 'lodash/camelCase';
+  import orderBy from 'lodash/orderBy';
+  import {
+    fileSizeMixin,
+    constantsTranslationMixin,
+    printingMixin,
+    titleMixin,
+    metadataTranslationMixin,
+  } from '../../mixins';
+  import { CategoriesLookup, LevelsLookup } from '../../constants';
+  import ContentNodeIcon from '../ContentNodeIcon';
+  import ExpandableList from '../ExpandableList';
+  import StudioChip from '../StudioChip';
+  import StudioLargeLoader from '../StudioLargeLoader';
+  import StudioCopyToken from '../../../settings/pages/Account/StudioCopyToken';
+  import { SCALE_TEXT, SCALE, CHANNEL_SIZE_DIVISOR } from './constants';
+  import StudioDetailsRow from './StudioDetailsRow';
+
+  const DEFAULT_DETAILS = {
+    name: '',
+    title: '',
+    description: '',
+    thumbnail_url: null,
+    thumbnail_src: null,
+    thumbnail_encoding: null,
+    published: false,
+    version: null,
+    primary_token: null,
+    language: null,
+    last_update: null,
+    created: null,
+    last_published: null,
+    resource_count: 0,
+    resource_size: 0,
+    includes: { coach_content: 0, exercises: 0 },
+    kind_count: [],
+    languages: [],
+    accessible_languages: [],
+    licenses: [],
+    tags: [],
+    copyright_holders: [],
+    authors: [],
+    aggregators: [],
+    providers: [],
+    sample_pathway: [],
+    original_channels: [],
+    sample_nodes: [],
+    levels: [],
+    categories: [],
+  };
+
+  export default {
+    name: 'StudioDetailsPanel',
+    components: {
+      StudioLargeLoader,
+      ContentNodeIcon,
+      ExpandableList,
+      StudioCopyToken,
+      StudioDetailsRow,
+      StudioChip,
+    },
+    mixins: [
+      fileSizeMixin,
+      constantsTranslationMixin,
+      printingMixin,
+      titleMixin,
+      metadataTranslationMixin,
+    ],
+    props: {
+      details: {
+        type: Object,
+        required: true,
+      },
+      isChannel: {
+        type: Boolean,
+        default: true,
+      },
+      loading: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      _details() {
+        const details = cloneDeep(this.details);
+        defaultsDeep(details, DEFAULT_DETAILS);
+        details.published = Boolean(details.last_published);
+        return details;
+      },
+      defaultText() {
+        // Making this a computed property so it's easier to update
+        return '---';
+      },
+      publishedDate() {
+        if (this.isChannel) {
+          return this.$formatDate(this._details.last_published, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          });
+        }
+        return '';
+      },
+      sizeText() {
+        const size = this._details.resource_size;
+        const sizeIndex = Math.max(
+          1,
+          Math.min(Math.ceil(Math.log(size / CHANNEL_SIZE_DIVISOR) / Math.log(2)), 10),
+        );
+        return this.$tr('sizeText', {
+          text: this.$tr(SCALE[sizeIndex]),
+          size: this.formatFileSize(size),
+        });
+      },
+      kindCount() {
+        return orderBy(this._details.kind_count, ['count', 'kind_id'], ['desc', 'asc']);
+      },
+      createdDate() {
+        return this.$formatDate(this._details.created, {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        });
+      },
+      hasDetails() {
+        return Object.keys(this.details).length;
+      },
+      sortedTags() {
+        return orderBy(this._details.tags, ['count'], ['desc']);
+      },
+      includesPrintable() {
+        const includes = [];
+        if (this._details.includes.coach_content) {
+          includes.push(this.$tr('coachHeading'));
+        }
+
+        if (this._details.includes.exercises) {
+          includes.push(this.$tr('assessmentsIncludedText'));
+        }
+
+        return includes.length ? includes.join(', ') : this.defaultText;
+      },
+      licensesPrintable() {
+        return this._details.licenses.map(this.translateConstant).join(', ');
+      },
+      tagPrintable() {
+        return this.sortedTags.map(tag => tag.tag_name).join(', ');
+      },
+      levels() {
+        return this._details.levels.map(level => {
+          level = LevelsLookup[level];
+          let translationKey;
+          if (level === 'PROFESSIONAL') {
+            translationKey = 'specializedProfessionalTraining';
+          } else if (level === 'WORK_SKILLS') {
+            translationKey = 'allLevelsWorkSkills';
+          } else if (level === 'BASIC_SKILLS') {
+            translationKey = 'allLevelsBasicSkills';
+          } else {
+            translationKey = camelCase(level);
+          }
+          return this.translateMetadataString(translationKey);
+        });
+      },
+      levelsPrintable() {
+        return this.levels.join(', ');
+      },
+      categories() {
+        return this._details.categories.map(category => {
+          category = CategoriesLookup[category];
+          return this.translateMetadataString(camelCase(category));
+        });
+      },
+      categoriesPrintable() {
+        return this.categories.join(', ');
+      },
+    },
+    mounted() {
+      if (!this.isChannel) {
+        this.$analytics.trackAction('node_details', 'View', {
+          id: this._details.id,
+        });
+      }
+    },
+    methods: {
+      channelUrl(channel) {
+        return window.Urls.channel(channel.id);
+      },
+    },
+    $trs: {
+      sizeHeading: 'Channel size',
+      sizeText: '{text} ({size})',
+      resourceHeading: 'Total resources',
+      coachHeading: 'Resources for coaches',
+      coachDescription: 'Resources for coaches are only visible to coaches in Kolibri',
+      tagsHeading: 'Common tags',
+      creationHeading: 'Created on',
+      containsHeading: 'Contains',
+      levelsHeading: 'Levels',
+      categoriesHeading: 'Categories',
+      languagesHeading: 'Languages',
+      subtitlesHeading: 'Captions and subtitles',
+      authorsLabel: 'Authors',
+      authorToolTip: 'Person or organization who created this content',
+      providersLabel: 'Providers',
+      providerToolTip: 'Organization that commissioned or is distributing the content',
+      aggregatorsLabel: 'Aggregators',
+      aggregatorToolTip:
+        'Website or organization hosting the content collection but not necessarily the creator or copyright holder',
+      licensesLabel: 'Licenses',
+      copyrightHoldersLabel: 'Copyright holders',
+      assessmentsIncludedText: 'Assessments',
+      [SCALE_TEXT.VERY_SMALL]: 'Very small',
+      [SCALE_TEXT.SMALL]: 'Small',
+      [SCALE_TEXT.AVERAGE]: 'Average',
+      [SCALE_TEXT.LARGE]: 'Large',
+      [SCALE_TEXT.VERY_LARGE]: 'Very large',
+      containsContentHeading: 'Contains content from',
+      sampleFromChannelHeading: 'Sample content from this channel',
+      sampleFromTopicHeading: 'Sample content from this topic',
+      tokenHeading: 'Channel token',
+      publishedHeading: 'Published on',
+      currentVersionHeading: 'Published version',
+      primaryLanguageHeading: 'Primary language',
+      unpublishedText: 'Unpublished',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .printing {
+    font-family: 'Noto Sans', helvetica !important;
+
+    /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+    :global(.material-icons) {
+      font-family: 'Material Icons' !important;
+    }
+  }
+
+  .thumbnail-container {
+    max-width: 300px;
+  }
+
+  .placeholder-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: var(--v-grey-lighten4);
+  }
+
+  .resource-list {
+    max-width: 350px;
+    margin: 8px 0;
+  }
+
+  .resource-item {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 16px;
+    align-items: center;
+    padding: 4px 0;
+    font-size: 12pt;
+    border-top: 0;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  .resource-label {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    font-weight: normal;
+  }
+
+  .resource-value {
+    margin: 0;
+    text-align: right;
+  }
+
+  .license-chip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .preview-row {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin: 16px 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .source-thumbnail {
+    flex-shrink: 0;
+    width: 150px;
+    border: 1px solid var(--v-grey-lighten3, #e0e0e0);
+  }
+
+  .channel-name {
+    padding: 0 16px;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .channel-link {
+    margin: 0 8px;
+    font-weight: bold;
+    color: var(--v-primary-base, #1976d2);
+    text-decoration: none;
+
+    span {
+      text-decoration: underline;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .rtl-flip {
+    transform: scaleX(1);
+
+    [dir='rtl'] & {
+      transform: scaleX(-1);
+    }
+  }
+
+  .sample-heading {
+    display: block;
+    margin-top: 24px;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 20px;
+    color: var(--v-grey-darken3);
+  }
+
+  .sample-nodes {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+    padding-top: 4px;
+    margin: 16px 0;
+
+    @media (min-width: 600px) {
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+
+    &.printing-grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  .sample-node-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    border: 1px solid var(--v-grey-lighten3, #e0e0e0);
+    border-radius: 4px;
+
+    > div:last-child {
+      padding: 12px;
+      font-weight: bold;
+      word-break: break-word;
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsRow.vue b/contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsRow.vue
new file mode 100644
index 0000000000..5ed7410da4
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/details/StudioDetailsRow.vue
@@ -0,0 +1,117 @@
+<template>
+
+  <div
+    class="studio-details-row"
+    :class="{ 'printing-mode': printing }"
+  >
+    <div class="label-column">
+      <label
+        class="label-text"
+        :aria-describedby="definition ? `tooltip-${_uid}` : undefined"
+      >
+        {{ label }}
+      </label>
+      <HelpTooltip
+        v-if="definition"
+        class="help-icon"
+        :text="definition"
+        :tooltipId="`tooltip-${_uid}`"
+      />
+    </div>
+    <div
+      class="value-column"
+      :class="{ notranslate }"
+    >
+      <slot>
+        {{ text }}
+      </slot>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import HelpTooltip from '../HelpTooltip';
+  import { printingMixin } from '../../mixins';
+
+  export default {
+    name: 'StudioDetailsRow',
+    components: {
+      HelpTooltip,
+    },
+    mixins: [printingMixin],
+    props: {
+      label: {
+        type: String,
+        default: '',
+      },
+      definition: {
+        type: String,
+        default: null,
+      },
+      text: {
+        type: String,
+        default: '',
+      },
+      notranslate: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .studio-details-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+    padding: 16px 0;
+    word-break: break-word;
+
+    @media (min-width: 600px) {
+      grid-template-columns: 5fr 7fr;
+    }
+
+    @media (min-width: 960px) {
+      grid-template-columns: 4fr 8fr;
+    }
+
+    &.printing-mode {
+      grid-template-columns: 4fr 8fr;
+    }
+  }
+
+  .label-column {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    padding-right: 44px;
+  }
+
+  .label-text {
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 20px;
+    color: var(--v-grey-darken3);
+    vertical-align: middle;
+  }
+
+  .help-icon {
+    position: absolute;
+    top: -12px;
+    right: 0;
+  }
+
+  .value-column {
+    padding-left: 10px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+</style>