diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/Box.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/Box.vue
new file mode 100644
index 0000000000..92782fe904
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/Box.vue
@@ -0,0 +1,130 @@
+<template>
+
+  <div class="box">
+    <KTransition kind="component-fade-out-in">
+      <div
+        v-if="loading"
+        key="box-loader-wrapper"
+        class="loader-wrapper"
+      >
+        <KCircularLoader disableDefaultTransition />
+      </div>
+      <div
+        v-else
+        key="box-content"
+        class="box-content"
+      >
+        <div class="box-icon">
+          <KIcon :icon="icon" />
+        </div>
+        <slot></slot>
+        <div
+          v-if="$slots.chip"
+          class="chip"
+        >
+          <slot name="chip"></slot>
+        </div>
+      </div>
+    </KTransition>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import { themePalette, themeTokens } from 'kolibri-design-system/lib/styles/theme';
+
+  export default {
+    name: 'Box',
+    setup(props) {
+      const paletteTheme = themePalette();
+      const tokensTheme = themeTokens();
+
+      const boxBackgroundColor = computed(() => {
+        switch (props.kind) {
+          case 'warning':
+            return paletteTheme.yellow.v_100;
+          case 'info':
+            return paletteTheme.grey.v_100;
+          default:
+            throw new Error(`Unsupported box kind: ${props.kind}`);
+        }
+      });
+      const boxTextColor = computed(() => {
+        switch (props.kind) {
+          case 'warning':
+            return paletteTheme.red.v_500;
+          case 'info':
+            return tokensTheme.text;
+          default:
+            throw new Error(`Unsupported box kind: ${props.kind}`);
+        }
+      });
+      const icon = computed(() => {
+        switch (props.kind) {
+          case 'warning':
+            return 'warningIncomplete';
+          case 'info':
+            return 'infoOutline';
+          default:
+            throw new Error(`Unsupported box kind: ${props.kind}`);
+        }
+      });
+
+      return {
+        boxBackgroundColor,
+        boxTextColor,
+        icon,
+      };
+    },
+    props: {
+      kind: {
+        type: String,
+        required: false,
+        default: 'info',
+        validator: value => ['warning', 'info'].includes(value),
+      },
+      loading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .box {
+    padding: 8px;
+    color: v-bind('boxTextColor');
+    background-color: v-bind('boxBackgroundColor');
+    border-radius: 4px;
+  }
+
+  .box-content {
+    display: flex;
+    gap: 8px;
+  }
+
+  .box-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .chip {
+    margin-left: auto;
+  }
+
+  .loader-wrapper {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/LoadingText.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/LoadingText.vue
new file mode 100644
index 0000000000..6138ec7a0c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/LoadingText.vue
@@ -0,0 +1,67 @@
+<template>
+
+  <div v-if="!omitted">
+    <div
+      v-if="loading"
+      class="loader-wrapper"
+    >
+      <KCircularLoader :size="16" />
+      {{ $tr('checking') }}
+    </div>
+    <div v-else-if="finishedLoading">
+      <slot></slot>
+    </div>
+    <div v-else>{{ $tr('error') }}</div>
+  </div>
+  <div v-else><KEmptyPlaceholder /></div>
+
+</template>
+
+
+<script setup>
+
+  defineProps({
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+    finishedLoading: {
+      type: Boolean,
+      required: true,
+    },
+    omitted: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  });
+
+</script>
+
+
+<script>
+
+  export default {
+    $trs: {
+      checking: 'Checking...',
+      error: 'Error loading data.',
+    },
+  };
+
+</script>
+
+
+<style scoped lang="scss">
+
+  .loader-wrapper {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .loader-wrapper ::v-deep .ui-progress-circular {
+    display: inline-block;
+    margin: 0;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/StatusChip.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/StatusChip.vue
new file mode 100644
index 0000000000..8e2b8c4d37
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/StatusChip.vue
@@ -0,0 +1,103 @@
+<template>
+
+  <div class="status-chip">
+    <KIcon
+      :icon="icon"
+      :color="labelColor"
+      class="status-icon"
+    />
+    {{ text }}
+  </div>
+
+</template>
+
+
+<script>
+
+  import { themePalette } from 'kolibri-design-system/lib/styles/theme';
+  import { computed } from 'vue';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+  import { CommunityLibraryStatus } from 'shared/constants';
+
+  export default {
+    name: 'StatusChip',
+    setup(props) {
+      const theme = themePalette();
+
+      const { pendingStatus$, approvedStatus$, flaggedStatus$ } = communityChannelsStrings;
+
+      const configChoices = {
+        [CommunityLibraryStatus.PENDING]: {
+          text: pendingStatus$(),
+          color: theme.yellow.v_100,
+          labelColor: theme.orange.v_600,
+          icon: 'schedule',
+        },
+        [CommunityLibraryStatus.APPROVED]: {
+          text: approvedStatus$(),
+          color: theme.green.v_100,
+          labelColor: theme.green.v_600,
+          icon: 'circleCheckmark',
+        },
+        [CommunityLibraryStatus.REJECTED]: {
+          text: flaggedStatus$(),
+          color: theme.red.v_100,
+          labelColor: theme.red.v_600,
+          icon: 'error',
+        },
+      };
+
+      const icon = computed(() => configChoices[props.status].icon);
+      const text = computed(() => configChoices[props.status].text);
+      const color = computed(() => configChoices[props.status].color);
+      const labelColor = computed(() => configChoices[props.status].labelColor);
+
+      return {
+        icon,
+        text,
+        color,
+        labelColor,
+      };
+    },
+    props: {
+      status: {
+        type: String,
+        required: true,
+        validator: value =>
+          [
+            CommunityLibraryStatus.APPROVED,
+            CommunityLibraryStatus.PENDING,
+            CommunityLibraryStatus.REJECTED,
+          ].includes(value),
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="css" scoped>
+
+  .status-chip {
+    display: flex;
+    gap: 3px;
+    align-items: center;
+    height: 20px;
+    padding-top: 2px;
+    padding-right: 5px;
+    padding-bottom: 2px;
+    padding-left: 3px;
+    font-size: 12px;
+    font-weight: 400;
+    color: v-bind('labelColor');
+    background-color: v-bind('color');
+    border-radius: 16px;
+  }
+
+  .status-icon {
+    position: static;
+    width: 18px;
+    height: 18px;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js
new file mode 100644
index 0000000000..e66e568157
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js
@@ -0,0 +1,560 @@
+import { computed, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import { factory } from '../../../../store';
+
+import SubmitToCommunityLibrarySidePanel from '../';
+import Box from '../Box.vue';
+import StatusChip from '../StatusChip.vue';
+
+import { usePublishedData } from '../composables/usePublishedData';
+import { useLatestCommunityLibrarySubmission } from '../composables/useLatestCommunityLibrarySubmission';
+import { Categories, CommunityLibraryStatus } from 'shared/constants';
+import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+import { CommunityLibrarySubmission } from 'shared/data/resources';
+import CountryField from 'shared/views/form/CountryField.vue';
+
+jest.mock('../composables/usePublishedData', () => ({
+  usePublishedData: jest.fn(),
+}));
+jest.mock('../composables/useLatestCommunityLibrarySubmission', () => ({
+  useLatestCommunityLibrarySubmission: jest.fn(),
+}));
+jest.mock('shared/data/resources', () => ({
+  CommunityLibrarySubmission: {
+    create: jest.fn(() => Promise.resolve()),
+  },
+}));
+
+const store = factory();
+
+const {
+  nonePrimaryInfo$,
+  flaggedPrimaryInfo$,
+  approvedPrimaryInfo$,
+  submittedPrimaryInfo$,
+  reviewersWillSeeLatestFirst$,
+} = communityChannelsStrings;
+
+async function makeWrapper({ channel, publishedData, latestSubmission }) {
+  const isLoading = ref(true);
+  const isFinished = ref(false);
+
+  usePublishedData.mockReturnValue({
+    isLoading,
+    isFinished,
+    data: computed(() => publishedData),
+  });
+
+  useLatestCommunityLibrarySubmission.mockReturnValue({
+    isLoading,
+    isFinished,
+    data: computed(() => latestSubmission),
+  });
+
+  const wrapper = mount(SubmitToCommunityLibrarySidePanel, {
+    store,
+    propsData: {
+      channel,
+    },
+  });
+
+  // To simmulate that first the data is loading and then it finishes loading
+  // and correctly trigger watchers depending on that
+  await wrapper.vm.$nextTick();
+
+  isLoading.value = false;
+  isFinished.value = true;
+
+  await wrapper.vm.$nextTick();
+
+  return wrapper;
+}
+
+const publishedNonPublicChannel = {
+  id: 'published-non-public-channel',
+  version: 2,
+  name: 'Published Non-Public Channel',
+  published: true,
+  public: false,
+};
+
+const publicChannel = {
+  id: 'published-non-public-channel',
+  version: 2,
+  name: 'Published Non-Public Channel',
+  published: true,
+  public: true,
+};
+
+const nonPublishedChannel = {
+  id: 'non-published-channel',
+  version: 0,
+  name: 'Non-public Channel',
+  published: false,
+  public: false,
+};
+
+const publishedData = {
+  2: {
+    included_languages: ['en', null],
+    included_licenses: [1],
+    included_categories: [Categories.SCHOOL],
+  },
+  1: {
+    included_languages: ['en', null],
+    included_licenses: [1],
+    included_categories: [Categories.SCHOOL],
+  },
+};
+
+const submittedLatestSubmission = { channel_version: 2, status: CommunityLibraryStatus.PENDING };
+
+describe('SubmitToCommunityLibrarySidePanel', () => {
+  describe('correct warnings are shown', () => {
+    it('when channel is published, not public and not submitted', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const warningBoxes = wrapper
+        .findAllComponents(Box)
+        .filter(box => box.props('kind') === 'warning');
+      expect(warningBoxes.length).toBe(0);
+    });
+
+    it('when channel is public', async () => {
+      const wrapper = await makeWrapper({
+        channel: publicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const warningBoxes = wrapper
+        .findAllComponents(Box)
+        .filter(box => box.props('kind') === 'warning');
+      expect(warningBoxes.length).toBe(1);
+      const warningBox = warningBoxes.wrappers[0];
+      expect(warningBox.attributes('data-test')).toBe('public-warning');
+    });
+
+    it('when channel is not published', async () => {
+      const wrapper = await makeWrapper({
+        channel: nonPublishedChannel,
+        publishedData: {},
+        latestSubmission: null,
+      });
+
+      const warningBoxes = wrapper
+        .findAllComponents(Box)
+        .filter(box => box.props('kind') === 'warning');
+      expect(warningBoxes.length).toBe(1);
+      const warningBox = warningBoxes.wrappers[0];
+      expect(warningBox.attributes('data-test')).toBe('not-published-warning');
+    });
+
+    it('when current version of channel is already submitted', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: submittedLatestSubmission,
+      });
+
+      const warningBoxes = wrapper
+        .findAllComponents(Box)
+        .filter(box => box.props('kind') === 'warning');
+      expect(warningBoxes.length).toBe(1);
+      const warningBox = warningBoxes.wrappers[0];
+      expect(warningBox.attributes('data-test')).toBe('already-submitted-warning');
+    });
+  });
+
+  describe('correct info is shown in the info box', () => {
+    it('when this is the first submission', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const infoBoxes = wrapper.findAllComponents(Box).filter(box => box.props('kind') === 'info');
+      expect(infoBoxes.length).toBe(1);
+      const infoBox = infoBoxes.wrappers[0];
+      expect(infoBox.text()).toContain(nonePrimaryInfo$());
+    });
+
+    it('when the previous submission was rejected', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: { channel_version: 1, status: CommunityLibraryStatus.REJECTED },
+      });
+
+      const infoBoxes = wrapper.findAllComponents(Box).filter(box => box.props('kind') === 'info');
+      expect(infoBoxes.length).toBe(1);
+      const infoBox = infoBoxes.wrappers[0];
+      expect(infoBox.text()).toContain(flaggedPrimaryInfo$());
+    });
+
+    it('when the previous submission was approved', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: { channel_version: 1, status: CommunityLibraryStatus.APPROVED },
+      });
+
+      const infoBoxes = wrapper.findAllComponents(Box).filter(box => box.props('kind') === 'info');
+      expect(infoBoxes.length).toBe(1);
+      const infoBox = infoBoxes.wrappers[0];
+      expect(infoBox.text()).toContain(approvedPrimaryInfo$());
+      expect(infoBox.text()).toContain(reviewersWillSeeLatestFirst$());
+    });
+
+    it('when the previous submission is pending', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: { channel_version: 1, status: CommunityLibraryStatus.PENDING },
+      });
+
+      const infoBoxes = wrapper.findAllComponents(Box).filter(box => box.props('kind') === 'info');
+      expect(infoBoxes.length).toBe(1);
+      const infoBox = infoBoxes.wrappers[0];
+      expect(infoBox.text()).toContain(submittedPrimaryInfo$());
+      expect(infoBox.text()).toContain(reviewersWillSeeLatestFirst$());
+    });
+  });
+
+  describe('show more button', () => {
+    it('is displayed when this is the first submission', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const moreDetailsButton = wrapper.find('[data-test="more-details-button"]');
+      expect(moreDetailsButton.exists()).toBe(true);
+    });
+
+    it('is not displayed when there are previous submissions', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: { channel_version: 1, status: CommunityLibraryStatus.APPROVED },
+      });
+
+      const moreDetailsButton = wrapper.find('[data-test="more-details-button"]');
+      expect(moreDetailsButton.exists()).toBe(false);
+    });
+
+    it('when clicked, shows additional info', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      let moreDetails = wrapper.find('[data-test="more-details"]');
+      expect(moreDetails.exists()).toBe(false);
+
+      let moreDetailsButton = wrapper.find('[data-test="more-details-button"]');
+      await moreDetailsButton.trigger('click');
+
+      moreDetails = wrapper.find('.more-details-text');
+      expect(moreDetails.exists()).toBe(true);
+
+      moreDetailsButton = wrapper.find('[data-test="more-details-button"]');
+      expect(moreDetailsButton.exists()).toBe(false);
+    });
+  });
+
+  describe('show less button', () => {
+    it('is displayed when additional info is shown', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const moreDetails = wrapper.find('[data-test="more-details"]');
+      expect(moreDetails.exists()).toBe(false);
+
+      let lessDetailsButton = wrapper.find('[data-test="less-details-button"]');
+      expect(lessDetailsButton.exists()).toBe(false);
+
+      const moreDetailsButton = wrapper.find('[data-test="more-details-button"]');
+      await moreDetailsButton.trigger('click');
+
+      lessDetailsButton = wrapper.find('[data-test="less-details-button"]');
+      expect(lessDetailsButton.exists()).toBe(true);
+    });
+
+    it('when clicked, hides additional info', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      let moreDetails = wrapper.find('[data-test="more-details"]');
+      expect(moreDetails.exists()).toBe(false);
+
+      const moreDetailsButton = wrapper.find('[data-test="more-details-button"]');
+      await moreDetailsButton.trigger('click');
+
+      let lessDetailsButton = wrapper.find('[data-test="less-details-button"]');
+      expect(lessDetailsButton.exists()).toBe(true);
+      await lessDetailsButton.trigger('click');
+
+      moreDetails = wrapper.find('[data-test="more-details"]');
+      expect(moreDetails.exists()).toBe(false);
+
+      lessDetailsButton = wrapper.find('[data-test="less-details-button"]');
+      expect(lessDetailsButton.exists()).toBe(false);
+    });
+  });
+
+  describe('submission status chip', () => {
+    it('is not displayed when there are no submissions', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const statusChip = wrapper.findAllComponents(StatusChip);
+      expect(statusChip.exists()).toBe(false);
+    });
+
+    function testStatusChip(submissionStatus, chipStatus) {
+      it(`is displayed correctly when status is ${submissionStatus}`, async () => {
+        const wrapper = await makeWrapper({
+          channel: publishedNonPublicChannel,
+          publishedData,
+          latestSubmission: { channel_version: 1, status: submissionStatus },
+        });
+
+        const statusChip = wrapper.findComponent(StatusChip);
+        expect(statusChip.props('status')).toBe(chipStatus);
+      });
+    }
+
+    testStatusChip(CommunityLibraryStatus.APPROVED, CommunityLibraryStatus.APPROVED);
+    testStatusChip(CommunityLibraryStatus.LIVE, CommunityLibraryStatus.APPROVED);
+    testStatusChip(CommunityLibraryStatus.REJECTED, CommunityLibraryStatus.REJECTED);
+    testStatusChip(CommunityLibraryStatus.PENDING, CommunityLibraryStatus.PENDING);
+  });
+
+  it('is editable when channel is published, not public and not submitted', async () => {
+    const wrapper = await makeWrapper({
+      channel: publishedNonPublicChannel,
+      publishedData,
+      latestSubmission: null,
+    });
+
+    const descriptionTextbox = wrapper.findComponent('.description-textbox');
+    expect(descriptionTextbox.props('disabled')).toBe(false);
+  });
+
+  describe('is not editable', () => {
+    it('when channel is public', async () => {
+      const wrapper = await makeWrapper({
+        channel: publicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const descriptionTextbox = wrapper.findComponent('.description-textbox');
+      expect(descriptionTextbox.props('disabled')).toBe(true);
+    });
+
+    it('when channel is not published', async () => {
+      const wrapper = await makeWrapper({
+        channel: nonPublishedChannel,
+        publishedData: {},
+        latestSubmission: null,
+      });
+
+      const descriptionTextbox = wrapper.findComponent('.description-textbox');
+      expect(descriptionTextbox.props('disabled')).toBe(true);
+    });
+
+    it('when current version of channel is already submitted', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: submittedLatestSubmission,
+      });
+
+      const descriptionTextbox = wrapper.findComponent('.description-textbox');
+      expect(descriptionTextbox.props('disabled')).toBe(true);
+    });
+  });
+
+  describe('submit button', () => {
+    describe('is disabled', () => {
+      it('when channel is public', async () => {
+        const wrapper = await makeWrapper({
+          channel: publicChannel,
+          publishedData,
+          latestSubmission: null,
+        });
+
+        const submitButton = wrapper.find('[data-test="submit-button"]');
+        expect(submitButton.props('disabled')).toBe(true);
+      });
+
+      it('when channel is not published', async () => {
+        const wrapper = await makeWrapper({
+          channel: nonPublishedChannel,
+          publishedData: {},
+          latestSubmission: null,
+        });
+
+        const submitButton = wrapper.find('[data-test="submit-button"]');
+        expect(submitButton.props('disabled')).toBe(true);
+      });
+
+      it('when current version of channel is already submitted', async () => {
+        const wrapper = await makeWrapper({
+          channel: publishedNonPublicChannel,
+          publishedData,
+          latestSubmission: submittedLatestSubmission,
+        });
+
+        const submitButton = wrapper.find('[data-test="submit-button"]');
+        expect(submitButton.props('disabled')).toBe(true);
+      });
+
+      it('when no description is provided', async () => {
+        const wrapper = await makeWrapper({
+          channel: publishedNonPublicChannel,
+          publishedData,
+          latestSubmission: null,
+        });
+
+        const submitButton = wrapper.find('[data-test="submit-button"]');
+        expect(submitButton.props('disabled')).toBe(true);
+      });
+    });
+
+    it('is enabled when channel is published, not public, not submitted and description is provided', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const descriptionTextbox = wrapper.findComponent('.description-textbox');
+      await descriptionTextbox.vm.$emit('input', 'Some description');
+
+      const submitButton = wrapper.find('[data-test="submit-button"]');
+      expect(submitButton.props('disabled')).toBe(false);
+    });
+  });
+
+  it('cancel button emits close event', async () => {
+    const wrapper = await makeWrapper({
+      channel: publishedNonPublicChannel,
+      publishedData,
+      latestSubmission: null,
+    });
+
+    const cancelButton = wrapper.find('[data-test="cancel-button"]');
+    await cancelButton.trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  describe('when submit button is clicked', () => {
+    beforeEach(() => {
+      CommunityLibrarySubmission.create.mockClear();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('the panel closes', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const descriptionTextbox = wrapper.findComponent('.description-textbox');
+      await descriptionTextbox.vm.$emit('input', 'Some description');
+
+      const submitButton = wrapper.find('[data-test="submit-button"]');
+      await submitButton.trigger('click');
+
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+
+    it('a submission snackbar is shown', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const descriptionTextbox = wrapper.findComponent('.description-textbox');
+      await descriptionTextbox.vm.$emit('input', 'Some description');
+
+      const submitButton = wrapper.find('[data-test="submit-button"]');
+      await submitButton.trigger('click');
+
+      jest.useFakeTimers();
+
+      expect(store.getters['snackbarIsVisible']).toBe(true);
+      expect(CommunityLibrarySubmission.create).not.toHaveBeenCalled();
+    });
+
+    it('the submission is created after a timeout', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const descriptionTextbox = wrapper.findComponent('.description-textbox');
+      await descriptionTextbox.vm.$emit('input', 'Some description');
+
+      const countryField = wrapper.findComponent(CountryField);
+      await countryField.vm.$emit('input', ['Czech Republic']);
+
+      jest.useFakeTimers();
+
+      const submitButton = wrapper.find('[data-test="submit-button"]');
+      await submitButton.trigger('click');
+
+      jest.runAllTimers();
+
+      expect(CommunityLibrarySubmission.create).toHaveBeenCalledWith({
+        description: 'Some description',
+        channel: publishedNonPublicChannel.id,
+        countries: ['CZ'],
+        categories: [Categories.SCHOOL],
+      });
+    });
+  });
+
+  describe('when a previous submission exists', () => {
+    it('the previously selected countries are pre-filled', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: {
+          channel_version: 1,
+          status: CommunityLibraryStatus.REJECTED,
+          countries: ['CZ'],
+        },
+      });
+
+      const countryField = wrapper.findComponent(CountryField);
+      expect(countryField.props('value')).toEqual(['Czech Republic']);
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/composables/useLatestCommunityLibrarySubmission.js b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/composables/useLatestCommunityLibrarySubmission.js
new file mode 100644
index 0000000000..ee65710b7f
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/composables/useLatestCommunityLibrarySubmission.js
@@ -0,0 +1,19 @@
+import { useFetch } from '../../../../composables/useFetch';
+import { CommunityLibrarySubmission } from 'shared/data/resources';
+
+export function useLatestCommunityLibrarySubmission(channelId) {
+  function fetchLatestSubmission() {
+    // Submissions are ordered by most recent first in the backend
+    return CommunityLibrarySubmission.fetchCollection({ channel: channelId, max_results: 1 }).then(
+      response => {
+        if (response.results.length > 0) {
+          return response.results[0];
+        }
+        return null;
+      },
+    );
+  }
+  return useFetch({
+    asyncFetchFunc: fetchLatestSubmission,
+  });
+}
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/composables/usePublishedData.js b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/composables/usePublishedData.js
new file mode 100644
index 0000000000..3b35b3b7dc
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/composables/usePublishedData.js
@@ -0,0 +1,6 @@
+import { useFetch } from '../../../../composables/useFetch';
+import { Channel } from 'shared/data/resources';
+
+export function usePublishedData(channelId) {
+  return useFetch({ asyncFetchFunc: () => Channel.getPublishedData(channelId) });
+}
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
new file mode 100644
index 0000000000..d3d4e91d5f
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -0,0 +1,541 @@
+<template>
+
+  <div id="submit-to-community-library-side-panel-root">
+    <SidePanelModal
+      alignment="right"
+      sidePanelWidth="700px"
+      @closePanel="$emit('close')"
+    >
+      <template #header>
+        <h1 class="side-panel-title">{{ submitToCommunityLibrary$() }}</h1>
+      </template>
+
+      <template #default>
+        <div class="content">
+          <Box
+            kind="info"
+            :loading="latestSubmissionIsLoading"
+            class="info-box"
+          >
+            <div
+              key="box-message"
+              class="box-message"
+            >
+              {{ infoBoxPrimaryText }}
+              <div v-if="infoBoxSecondaryText">
+                {{ infoBoxSecondaryText }}
+              </div>
+              <template v-if="latestSubmissionIsFinished && latestSubmissionStatus === null">
+                <div
+                  v-if="showingMoreDetails"
+                  class="more-details-text"
+                >
+                  {{ moreDetails$() }}
+                </div>
+                <KButton
+                  v-if="!showingMoreDetails"
+                  appearance="basic-link"
+                  :text="moreDetailsButton$()"
+                  data-test="more-details-button"
+                  @click="showingMoreDetails = !showingMoreDetails"
+                />
+                <KButton
+                  v-else
+                  appearance="basic-link"
+                  :text="lessDetailsButton$()"
+                  data-test="less-details-button"
+                  @click="showingMoreDetails = !showingMoreDetails"
+                />
+              </template>
+            </div>
+            <template #chip>
+              <StatusChip
+                v-if="latestSubmissionStatus"
+                :status="latestSubmissionStatus"
+              />
+            </template>
+          </Box>
+          <Box
+            v-if="!isPublished"
+            kind="warning"
+            data-test="not-published-warning"
+          >
+            {{ notPublishedWarning$() }}
+          </Box>
+          <Box
+            v-else-if="isPublic"
+            kind="warning"
+            data-test="public-warning"
+          >
+            {{ publicWarning$() }}
+          </Box>
+          <Box
+            v-else-if="isCurrentVersionAlreadySubmitted"
+            kind="warning"
+            data-test="already-submitted-warning"
+          >
+            {{ alreadySubmittedWarning$() }}
+          </Box>
+          <div class="channel-title">{{ channel.name }}</div>
+          <div>
+            <div class="field-annotation">{{ languagesDetected$() }}</div>
+            <LoadingText
+              :loading="publishedDataIsLoading"
+              :finishedLoading="publishedDataIsFinished"
+              :omitted="!detectedLanguages"
+            >
+              {{ detectedLanguages }}
+            </LoadingText>
+          </div>
+          <div>
+            <div class="field-annotation">{{ licensesDetected$() }}</div>
+            <LoadingText
+              :loading="publishedDataIsLoading"
+              :finishedLoading="publishedDataIsFinished"
+              :omitted="!detectedLicenses"
+            >
+              {{ detectedLicenses }}
+            </LoadingText>
+          </div>
+          <div>
+            <div class="field-annotation">{{ categoriesDetected$() }}</div>
+            <LoadingText
+              :loading="publishedDataIsLoading"
+              :finishedLoading="publishedDataIsFinished"
+              :omitted="!detectedCategories"
+            >
+              {{ detectedCategories }}
+            </LoadingText>
+          </div>
+          <div class="country-area">
+            <KTransition kind="component-fade-out-in">
+              <div
+                v-if="latestSubmissionIsLoading"
+                class="loader-wrapper"
+              >
+                <KCircularLoader disableDefaultTransition />
+              </div>
+              <CountryField
+                v-else-if="latestSubmissionIsFinished"
+                v-model="countries"
+                class="country-field"
+                :disabled="!canBeEdited"
+                :label="countryLabel$()"
+                fullWidth
+                :hide-details="true"
+              />
+            </KTransition>
+          </div>
+          <KTextbox
+            v-model="description"
+            :disabled="!canBeEdited"
+            :invalid="description.length < 1"
+            :invalidText="descriptionRequired$()"
+            textArea
+            :label="descriptionLabel$()"
+            :maxlength="250"
+            style="width: 100%"
+            class="description-textbox"
+          />
+        </div>
+      </template>
+
+      <template #bottomNavigation>
+        <div class="footer">
+          <KButton
+            data-test="cancel-button"
+            @click="$emit('close')"
+          >
+            {{ cancelAction$() }}
+          </KButton>
+          <KButton
+            primary
+            :disabled="!canBeSubmitted"
+            data-test="submit-button"
+            @click="onSubmit"
+          >
+            {{ submitButton$() }}
+          </KButton>
+        </div>
+      </template>
+    </SidePanelModal>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed, getCurrentInstance, ref, watch } from 'vue';
+  import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
+
+  import camelCase from 'lodash/camelCase';
+
+  import Box from './Box';
+  import LoadingText from './LoadingText';
+  import StatusChip from './StatusChip';
+  import { useLatestCommunityLibrarySubmission } from './composables/useLatestCommunityLibrarySubmission';
+  import { usePublishedData } from './composables/usePublishedData';
+
+  import { translateMetadataString } from 'shared/utils/metadataStringsTranslation';
+  import countriesUtil from 'shared/utils/countries';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+  import SidePanelModal from 'shared/views/SidePanelModal';
+  import CountryField from 'shared/views/form/CountryField';
+  import LanguagesMap from 'shared/leUtils/Languages';
+  import LicensesMap from 'shared/leUtils/Licenses';
+  import { CategoriesLookup, CommunityLibraryStatus } from 'shared/constants';
+  import { CommunityLibrarySubmission } from 'shared/data/resources';
+
+  export default {
+    name: 'SubmitToCommunityLibrarySidePanel',
+    components: {
+      SidePanelModal,
+      Box,
+      LoadingText,
+      StatusChip,
+      CountryField,
+    },
+    emits: ['close'],
+    setup(props, { emit }) {
+      const tokensTheme = themeTokens();
+
+      const { proxy } = getCurrentInstance();
+      const store = proxy.$store;
+
+      // Destructure translation functions from communityChannelsStrings
+      const {
+        submitToCommunityLibrary$,
+        moreDetails$,
+        moreDetailsButton$,
+        lessDetailsButton$,
+        languagesDetected$,
+        licensesDetected$,
+        categoriesDetected$,
+        countryLabel$,
+        descriptionLabel$,
+        descriptionRequired$,
+        notPublishedWarning$,
+        publicWarning$,
+        alreadySubmittedWarning$,
+        submitButton$,
+        cancelAction$,
+        submittedPrimaryInfo$,
+        reviewersWillSeeLatestFirst$,
+        approvedPrimaryInfo$,
+        flaggedPrimaryInfo$,
+        nonePrimaryInfo$,
+        submittedSnackbar$,
+        errorSnackbar$,
+        submittingSnackbar$,
+      } = communityChannelsStrings;
+
+      const annotationColor = computed(() => tokensTheme.annotation);
+      const infoSeparatorColor = computed(() => tokensTheme.fineLine);
+
+      const showingMoreDetails = ref(false);
+      const countries = ref([]);
+      const description = ref('');
+
+      const {
+        isLoading: latestSubmissionIsLoading,
+        isFinished: latestSubmissionIsFinished,
+        data: latestSubmissionData,
+      } = useLatestCommunityLibrarySubmission(props.channel.id);
+
+      function countryCodeToName(code) {
+        return countriesUtil.getName(code, 'en');
+      }
+
+      watch(latestSubmissionIsFinished, newVal => {
+        if (newVal && latestSubmissionData.value) {
+          countries.value = latestSubmissionData.value.countries.map(code =>
+            countryCodeToName(code),
+          );
+        }
+      });
+
+      const latestSubmissionStatus = computed(() => {
+        // We distinguish here between "not loaded yet" (undefined)
+        // and "loaded and none present" (null). This distinction is
+        // not used in the UI and is mostly intended to convey the
+        // state more accurately to the developer in case of debugging.
+        // UI code should rely on XXXIsLoading and XXXIsFinished instead.
+        if (!latestSubmissionIsFinished.value) return undefined;
+        if (!latestSubmissionData.value) return null;
+
+        // We do not need to distinguish LIVE from APPROVED in the UI
+        const uiSubmissionStatus =
+          latestSubmissionData.value.status == CommunityLibraryStatus.LIVE
+            ? CommunityLibraryStatus.APPROVED
+            : latestSubmissionData.value.status;
+
+        return uiSubmissionStatus;
+      });
+
+      const infoConfig = computed(() => {
+        if (!latestSubmissionIsFinished.value) return undefined;
+
+        switch (latestSubmissionStatus.value) {
+          case CommunityLibraryStatus.PENDING:
+            return {
+              primaryText: submittedPrimaryInfo$(),
+              secondaryText: reviewersWillSeeLatestFirst$(),
+            };
+          case CommunityLibraryStatus.APPROVED:
+            return {
+              primaryText: approvedPrimaryInfo$(),
+              secondaryText: reviewersWillSeeLatestFirst$(),
+            };
+          case CommunityLibraryStatus.REJECTED:
+            return {
+              primaryText: flaggedPrimaryInfo$(),
+              secondaryText: null,
+            };
+          case null:
+            return {
+              primaryText: nonePrimaryInfo$(),
+              secondaryText: null,
+            };
+          default:
+            return undefined;
+        }
+      });
+
+      const infoBoxPrimaryText = computed(() => infoConfig.value?.primaryText);
+      const infoBoxSecondaryText = computed(() => infoConfig.value?.secondaryText);
+
+      const isPublished = computed(() => props.channel.published);
+      const isPublic = computed(() => props.channel.public);
+      const isCurrentVersionAlreadySubmitted = computed(() => {
+        if (!latestSubmissionData.value) return false;
+        return latestSubmissionData.value.channel_version === props.channel.version;
+      });
+
+      const canBeEdited = computed(
+        () => isPublished.value && !isPublic.value && !isCurrentVersionAlreadySubmitted.value,
+      );
+
+      const canBeSubmitted = computed(
+        () => canBeEdited.value && publishedDataIsFinished.value && description.value.length >= 1,
+      );
+
+      const {
+        isLoading: publishedDataIsLoading,
+        isFinished: publishedDataIsFinished,
+        data: publishedData,
+      } = usePublishedData(props.channel.id);
+
+      const latestPublishedData = computed(() => {
+        if (!publishedData.value) return undefined;
+
+        return publishedData.value[props.channel.version];
+      });
+
+      const detectedLanguages = computed(() => {
+        // We need to filter out null values due to a backend bug
+        // causing null values to sometimes be included in the list
+        const languageCodes = latestPublishedData.value?.included_languages.filter(
+          code => code !== null,
+        );
+
+        // We distinguish here between "not loaded yet" (undefined)
+        // and "loaded and none present" (null). This distinction is
+        // not used in the UI and is mostly intended to convey the
+        // state more accurately to the developer in case of debugging.
+        // UI code should rely on XXXIsLoading and XXXIsFinished instead.
+        if (!languageCodes) return undefined;
+        if (languageCodes.length === 0) return null;
+
+        return languageCodes.map(code => LanguagesMap.get(code).readable_name).join(', ');
+      });
+
+      const detectedLicenses = computed(() => {
+        // We distinguish here between "not loaded yet" (undefined)
+        // and "loaded and none present" (null). This distinction is
+        // not used in the UI and is mostly intended to convey the
+        // state more accurately to the developer in case of debugging.
+        // UI code should rely on XXXIsLoading and XXXIsFinished instead.
+        if (!latestPublishedData.value?.included_licenses) return undefined;
+        if (latestPublishedData.value.included_licenses.length === 0) return null;
+
+        return latestPublishedData.value.included_licenses
+          .map(licenseId => LicensesMap.get(licenseId).license_name)
+          .join(', ');
+      });
+
+      function categoryIdToName(categoryId) {
+        return translateMetadataString(camelCase(CategoriesLookup[categoryId]));
+      }
+
+      const detectedCategories = computed(() => {
+        // We distinguish here between "not loaded yet" (undefined)
+        // and "loaded and none present" (null). This distinction is
+        // not used in the UI and is mostly intended to convey the
+        // state more accurately to the developer in case of debugging.
+        // UI code should rely on XXXIsLoading and XXXIsFinished instead.
+        if (!latestPublishedData.value?.included_categories) return undefined;
+        if (latestPublishedData.value.included_categories.length === 0) return null;
+
+        return latestPublishedData.value.included_categories
+          .map(categoryId => categoryIdToName(categoryId))
+          .join(', ');
+      });
+
+      function showSnackbar(params) {
+        return store.dispatch('showSnackbar', params);
+      }
+
+      function onSubmit() {
+        // It should be possible to undo a submission within a short time window
+        // in case the user made a mistake and wants to change something.
+        // To avoid having to deal with undoing logic, we simply show a "submitting"
+        // snackbar for a few seconds with a cancel option, and only submit
+        // if the user doesn't cancel within that time window.
+        const submitDelayMs = 5000;
+
+        const timer = setTimeout(() => {
+          CommunityLibrarySubmission.create({
+            description: description.value,
+            channel: props.channel.id,
+            countries: countries.value.map(country => countriesUtil.getAlpha2Code(country, 'en')),
+            categories: latestPublishedData.value.included_categories,
+          })
+            .then(() => {
+              showSnackbar({ text: submittedSnackbar$() });
+            })
+            .catch(() => {
+              showSnackbar({ text: errorSnackbar$() });
+            });
+        }, submitDelayMs);
+
+        showSnackbar({
+          text: submittingSnackbar$(),
+          duration: null,
+          actionText: cancelAction$(),
+          actionCallback: () => {
+            clearTimeout(timer);
+          },
+        });
+
+        emit('close');
+      }
+
+      return {
+        annotationColor,
+        infoSeparatorColor,
+        showingMoreDetails,
+        countries,
+        description,
+        latestSubmissionIsLoading,
+        latestSubmissionIsFinished,
+        latestSubmissionStatus,
+        infoBoxPrimaryText,
+        infoBoxSecondaryText,
+        isPublished,
+        isPublic,
+        isCurrentVersionAlreadySubmitted,
+        canBeEdited,
+        canBeSubmitted,
+        publishedDataIsLoading,
+        publishedDataIsFinished,
+        detectedLanguages,
+        detectedLicenses,
+        detectedCategories,
+        onSubmit,
+        // Translation functions
+        submitToCommunityLibrary$,
+        moreDetails$,
+        moreDetailsButton$,
+        lessDetailsButton$,
+        languagesDetected$,
+        licensesDetected$,
+        categoriesDetected$,
+        countryLabel$,
+        descriptionLabel$,
+        descriptionRequired$,
+        notPublishedWarning$,
+        publicWarning$,
+        alreadySubmittedWarning$,
+        submitButton$,
+        cancelAction$,
+      };
+    },
+    props: {
+      channel: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped lang="scss">
+
+  .side-panel-title {
+    margin: 0;
+    font-size: 20px;
+  }
+
+  .channel-title {
+    font-weight: 600;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    line-height: 140%;
+  }
+
+  .box-message {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .info-box {
+    min-height: 4em;
+  }
+
+  .loader-wrapper {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .more-details-text {
+    padding-top: 8px;
+    border-top: 1px solid v-bind('infoSeparatorColor');
+  }
+
+  .field-annotation {
+    margin-bottom: 8px;
+    color: v-bind('annotationColor');
+  }
+
+  .country-field {
+    width: 100%;
+  }
+
+  .country-area {
+    display: flex;
+    min-height: 64px;
+  }
+
+  .footer {
+    display: flex;
+    gap: 16px;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .description-textbox ::v-deep .textbox {
+    max-width: 100%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/composables/useFetch.js b/contentcuration/contentcuration/frontend/channelEdit/composables/useFetch.js
new file mode 100644
index 0000000000..eadf93ed35
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/composables/useFetch.js
@@ -0,0 +1,28 @@
+import { ref } from 'vue';
+
+export function useFetch({ asyncFetchFunc }) {
+  const isLoading = ref(true);
+  const isFinished = ref(false);
+  const data = ref(null);
+  const error = ref(null);
+
+  async function fetchData() {
+    isLoading.value = true;
+    isFinished.value = false;
+    data.value = null;
+    error.value = null;
+    try {
+      data.value = await asyncFetchFunc();
+      isLoading.value = false;
+      isFinished.value = true;
+    } catch (error) {
+      error.value = error;
+      throw error;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+  fetchData();
+
+  return { isLoading, isFinished, data, error };
+}
diff --git a/contentcuration/contentcuration/frontend/channelEdit/utils.js b/contentcuration/contentcuration/frontend/channelEdit/utils.js
index 54e2530f0f..0d734e558f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/utils.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/utils.js
@@ -2,7 +2,8 @@ import translator from './translator';
 import { RouteNames } from './constants';
 import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 import { MasteryModelsNames } from 'shared/leUtils/MasteryModels';
-import { metadataStrings, constantStrings } from 'shared/mixins';
+import { metadataStrings } from 'shared/strings/metadataStrings';
+import { constantStrings } from 'shared/mixins';
 import {
   ContentModalities,
   AssessmentItemTypes,
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 95bb47fa68..6ca82f5d2d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -84,6 +84,31 @@
         >
           {{ $tr('apiGenerated') }}
         </span>
+        <BaseMenu>
+          <template #activator="{ on }">
+            <KButton
+              hasDropdown
+              class="share-button"
+              v-on="on"
+            >
+              {{ $tr('shareMenuButton') }}
+            </KButton>
+          </template>
+          <VList>
+            <VListTile @click="showSubmitToCommunityLibrarySidePanel = true">
+              <VListTileTitle>{{ $tr('submitToCommunityLibrary') }}</VListTileTitle>
+            </VListTile>
+            <VListTile
+              :to="shareChannelLink"
+              @click="trackClickEvent('Share channel')"
+            >
+              <VListTileTitle>{{ $tr('inviteCollaborators') }}</VListTileTitle>
+            </VListTile>
+            <VListTile @click="showTokenModal = true">
+              <VListTileTitle>{{ $tr('shareToken') }}</VListTileTitle>
+            </VListTile>
+          </VList>
+        </BaseMenu>
         <VTooltip
           v-if="!loading && canManage"
           bottom
@@ -211,6 +236,11 @@
       v-if="showPublishSidePanel"
       @close="showPublishSidePanel = false"
     />
+    <SubmitToCommunityLibrarySidePanel
+      v-if="showSubmitToCommunityLibrarySidePanel"
+      :channel="currentChannel"
+      @close="showSubmitToCommunityLibrarySidePanel = false"
+    />
     <template v-if="isPublished">
       <ChannelTokenModal
         v-model="showTokenModal"
@@ -318,6 +348,7 @@
   import SavingIndicator from '../../components/edit/SavingIndicator';
   import { DraggableRegions, DraggableUniverses, RouteNames } from '../../constants';
   import PublishSidePanel from '../../components/sidePanels/PublishSidePanel';
+  import SubmitToCommunityLibrarySidePanel from '../../components/sidePanels/SubmitToCommunityLibrarySidePanel';
   import MainNavigationDrawer from 'shared/views/MainNavigationDrawer';
   import ToolBar from 'shared/views/ToolBar';
   import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
@@ -337,6 +368,7 @@
       MainNavigationDrawer,
       ToolBar,
       PublishSidePanel,
+      SubmitToCommunityLibrarySidePanel,
       ProgressModal,
       ChannelTokenModal,
       SyncResourcesModal,
@@ -359,6 +391,7 @@
       return {
         drawer: false,
         showPublishSidePanel: false,
+        showSubmitToCommunityLibrarySidePanel: false,
         showTokenModal: false,
         showSyncModal: false,
         showClipboard: false,
@@ -535,6 +568,12 @@
       incompleteDescendantsText:
         '{count, number, integer} {count, plural, one {resource is incomplete and cannot be published} other {resources are incomplete and cannot be published}}',
 
+      // Share menu section
+      shareMenuButton: 'Share',
+      submitToCommunityLibrary: 'Submit to community library',
+      inviteCollaborators: 'Invite collaborators',
+      shareToken: 'Share token',
+
       // Delete channel section
       deleteChannelButton: 'Delete channel',
       deleteTitle: 'Delete this channel',
@@ -577,6 +616,11 @@
     }
   }
 
+  .share-button {
+    margin-right: 8px;
+    margin-left: 8px;
+  }
+
   .clipboard-fab.dragging-over.in-draggable-universe {
     animation: bounce 0.5s infinite alternate;
 
diff --git a/contentcuration/contentcuration/frontend/shared/constants.js b/contentcuration/contentcuration/frontend/shared/constants.js
index 77ddaa9b90..42feb9ef7e 100644
--- a/contentcuration/contentcuration/frontend/shared/constants.js
+++ b/contentcuration/contentcuration/frontend/shared/constants.js
@@ -327,3 +327,11 @@ export const completionCriteriaToDropdownMap = {
   [CompletionCriteria.MASTERY]: CompletionDropdownMap.goal,
   [CompletionCriteria.REFERENCE]: CompletionDropdownMap.reference,
 };
+
+export const CommunityLibraryStatus = {
+  PENDING: 'PENDING',
+  APPROVED: 'APPROVED',
+  REJECTED: 'REJECTED',
+  SUPERSEDED: 'SUPERSEDED',
+  LIVE: 'LIVE',
+};
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index e90d37ec7f..f04944080b 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1412,6 +1412,10 @@ export const Channel = new CreateModelResource({
       .then(response => response.data.languages);
     return uniq(compact(localLanguages.concat(remoteLanguages)));
   },
+  async getPublishedData(id) {
+    const response = await client.get(window.Urls.channel_published_data(id));
+    return response.data;
+  },
 });
 
 function getChannelFromChannelScope() {
@@ -2393,3 +2397,17 @@ export const Recommendation = new APIResource({
     });
   },
 });
+
+export const CommunityLibrarySubmission = new APIResource({
+  urlName: 'community_library_submission',
+  fetchCollection(params) {
+    return client.get(this.collectionUrl(), { params }).then(response => {
+      return response.data || [];
+    });
+  },
+  create(params) {
+    return client.post(this.collectionUrl(), params).then(response => {
+      return response.data;
+    });
+  },
+});
diff --git a/contentcuration/contentcuration/frontend/shared/mixins.js b/contentcuration/contentcuration/frontend/shared/mixins.js
index fa7625859c..c99f8e033c 100644
--- a/contentcuration/contentcuration/frontend/shared/mixins.js
+++ b/contentcuration/contentcuration/frontend/shared/mixins.js
@@ -1,4 +1,3 @@
-import camelCase from 'lodash/camelCase';
 import isEqual from 'lodash/isEqual';
 import transform from 'lodash/transform';
 import uniq from 'lodash/uniq';
@@ -13,6 +12,7 @@ import {
   ONE_TB,
   filterTypes,
 } from './constants';
+import { translateMetadataString } from './utils/metadataStringsTranslation';
 import { createTranslator, updateTabTitle } from 'shared/i18n';
 import Languages from 'shared/leUtils/Languages';
 import Licenses from 'shared/leUtils/Licenses';
@@ -200,560 +200,16 @@ export const constantsTranslationMixin = {
   },
 };
 
-// METADATA STRINGS AND RELATED MIXIN
-
-export const metadataStrings = createTranslator('CommonMetadataStrings', {
-  // Titles/Headers
-
-  learningActivity: {
-    message: 'Learning Activity',
-    context: 'A title for the category of education material interaction, i.e. watch, read, listen',
-  },
-  completion: {
-    message: 'Completion',
-    context: 'A title for the metadata that explains when an activity is finished',
-  },
-  duration: {
-    message: 'Duration',
-    context: 'A title for the metadata that explains how long an activity will take',
-  },
-  category: {
-    message: 'Category',
-    context: 'A title for the metadata that explains the subject matter of an activity',
-  },
-  // Completion criteria types
-  reference: {
-    message: 'Reference material',
-    context:
-      'One of the completion criteria types. Progress made on a resource with this criteria is not tracked.',
-  },
-  completeDuration: {
-    message: 'When time spent is equal to duration',
-    context:
-      'One of the completion criteria types. A resource with this criteria is considered complete when learners spent given time studying it.',
-  },
-  exactTime: {
-    message: 'Time to complete',
-    context:
-      'One of the completion criteria types. A subset of "When time spent is equal to duration". For example, for an audio resource with this criteria, learnes need to hear the whole length of audio for the resource to be considered complete.',
-  },
-  allContent: {
-    message: 'Viewed in its entirety',
-    context:
-      'One of the completion criteria types. A resource with this criteria is considered complete when learners studied it all, for example they saw all pages of a document.',
-  },
-  determinedByResource: {
-    message: 'Determined by the resource',
-    context:
-      'One of the completion criteria types. Typically used for embedded html5/h5p resources that contain their own completion criteria, for example reaching a score in an educational game.',
-  },
-  masteryMofN: {
-    message: 'Goal: {m} out of {n}',
-    context:
-      'One of the completion criteria types specific to exercises. An exercise with this criteria is considered complete when learners answered m questions out of n correctly.',
-  },
-  goal: {
-    message: 'When goal is met',
-    context:
-      'One of the completion criteria types specific to exercises. An exercise with this criteria is considered complete when learners reached a given goal, for example 100% correct.',
-  },
-  practiceQuiz: {
-    message: 'Practice quiz',
-    context:
-      'One of the completion criteria types specific to exercises. An exercise with this criteria represents a quiz.',
-  },
-  survey: {
-    message: 'Survey',
-    context:
-      'One of the completion criteria types specific to exercises. An exercise with this criteria represents a survey.',
-  },
-
-  // Learning Activities
-  all: {
-    message: 'All',
-    context: 'A label for everything in the group of activities.',
-  },
-  watch: {
-    message: 'Watch',
-    context:
-      'Resource and filter label for the type of learning activity with video. Translate as a VERB',
-  },
-  create: {
-    message: 'Create',
-    context: 'Resource and filter label for the type of learning activity. Translate as a VERB',
-  },
-  read: {
-    message: 'Read',
-    context:
-      'Resource and filter label for the type of learning activity with documents. Translate as a VERB',
-  },
-  practice: {
-    message: 'Practice',
-    context:
-      'Resource and filter label for the type of learning activity with questions and answers. Translate as a VERB',
-  },
-  reflect: {
-    message: 'Reflect',
-    context: 'Resource and filter label for the type of learning activity. Translate as a VERB',
-  },
-  listen: {
-    message: 'Listen',
-    context:
-      'Resource and filter label for the type of learning activity with audio. Translate as a VERB',
-  },
-  explore: {
-    message: 'Explore',
-    context: 'Resource and filter label for the type of learning activity. Translate as a VERB',
-  },
-
-  // Library Categories
-  school: {
-    message: 'School',
-    context: 'Category type.',
-  },
-  basicSkills: {
-    message: 'Basic skills',
-    context:
-      'Category type. Basic skills refer to learning resources focused on aspects like literacy, numeracy and digital literacy.',
-  },
-  work: {
-    message: 'Work',
-    context:
-      'Top level category group that contains resources for acquisition of professional skills.',
-  },
-  dailyLife: {
-    message: 'Daily life',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Everyday_life',
-  },
-  forTeachers: {
-    message: 'For teachers',
-    context: 'Category type',
-  },
-
-  // School Categories
-  mathematics: {
-    message: 'Mathematics',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Mathematics',
-  },
-  sciences: {
-    message: 'Sciences',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Science',
-  },
-  socialSciences: {
-    message: 'Social sciences',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Social_science',
-  },
-  arts: {
-    message: 'Arts',
-    context: 'Refers to a category group type. See https://en.wikipedia.org/wiki/The_arts',
-  },
-  computerScience: {
-    message: 'Computer science',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Computer_science',
-  },
-  languageLearning: {
-    message: 'Language learning',
-    context: 'Category type.',
-  },
-  history: {
-    message: 'History',
-    context: 'Category type.',
-  },
-  readingAndWriting: {
-    message: 'Reading and writing',
-    context: 'School subject category',
-  },
-
-  // Mathematics Subcategories
-  arithmetic: {
-    message: 'Arithmetic',
-    context: 'Math category type. See https://en.wikipedia.org/wiki/Arithmetic',
-  },
-  algebra: {
-    message: 'Algebra',
-    context: 'A type of math category. See https://en.wikipedia.org/wiki/Algebra',
-  },
-  geometry: {
-    message: 'Geometry',
-    context: 'Category type.',
-  },
-  calculus: {
-    message: 'Calculus',
-    context: 'Math category type. https://en.wikipedia.org/wiki/Calculus',
-  },
-  statistics: {
-    message: 'Statistics',
-    context: 'A math category. See https://en.wikipedia.org/wiki/Statistics',
-  },
-
-  // Sciences Subcategories
-  biology: {
-    message: 'Biology',
-    context: 'Science category type. See https://en.wikipedia.org/wiki/Biology',
-  },
-  chemistry: {
-    message: 'Chemistry',
-    context: 'Science category type. See https://en.wikipedia.org/wiki/Chemistry',
-  },
-  physics: {
-    message: 'Physics',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Physics.',
-  },
-  earthScience: {
-    message: 'Earth science',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Earth_science',
-  },
-  astronomy: {
-    message: 'Astronomy',
-    context: 'Science category type. See https://en.wikipedia.org/wiki/Astronomy',
-  },
-
-  //  Literature Subcategories
-  literature: {
-    message: 'Literature',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Literature',
-  },
-  readingComprehension: {
-    message: 'Reading comprehension',
-    context: 'Category type.',
-  },
-  writing: {
-    message: 'Writing',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Writing',
-  },
-  logicAndCriticalThinking: {
-    message: 'Logic and critical thinking',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Critical_thinking',
-  },
-
-  // Social Sciences Subcategories
-  politicalScience: {
-    message: 'Political science',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Political_science.',
-  },
-  sociology: {
-    message: 'Sociology',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Sociology',
-  },
-  anthropology: {
-    message: 'Anthropology',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Anthropology',
-  },
-  civicEducation: {
-    message: 'Civic education',
-    context:
-      'Category type. Civic education is the study of the rights and obligations of citizens in society. See https://en.wikipedia.org/wiki/Civics',
-  },
-
-  // Arts Subcategories = {
-  visualArt: {
-    message: 'Visual art',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Visual_arts',
-  },
-  music: {
-    message: 'Music',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Music',
-  },
-  dance: {
-    message: 'Dance',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Dance',
-  },
-  drama: {
-    message: 'Drama',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Drama',
-  },
-
-  //  Computer Science Subcategories
-  programming: {
-    message: 'Programming',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Computer_programming',
-  },
-  mechanicalEngineering: {
-    message: 'Mechanical engineering',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Mechanical_engineering.',
-  },
-  webDesign: {
-    message: 'Web design',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Web_design',
-  },
-
-  // Basic Skills
-  literacy: {
-    message: 'Literacy',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Literacy',
-  },
-  numeracy: {
-    message: 'Numeracy',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Numeracy',
-  },
-  digitalLiteracy: {
-    message: 'Digital literacy',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Digital_literacy',
-  },
-  learningSkills: {
-    message: 'Learning skills',
-    context:
-      'A category label and type of basic skill.\nhttps://en.wikipedia.org/wiki/Study_skills',
-  },
-
-  // Work Categories
-  professionalSkills: {
-    message: 'Professional skills',
-    context: 'Category type. Refers to skills that are related to a profession or a job.',
-  },
-  technicalAndVocationalTraining: {
-    message: 'Technical and vocational training',
-    context:
-      'A level of education. See https://en.wikipedia.org/wiki/TVET_(Technical_and_Vocational_Education_and_Training)',
-  },
-
-  //  VocationalSubcategories
-  softwareToolsAndTraining: {
-    message: 'Software tools and training',
-    context: 'Subcategory type for technical and vocational training.',
-  },
-  skillsTraining: {
-    message: 'Skills training',
-    context: 'Subcategory type for technical and vocational training.',
-  },
-  industryAndSectorSpecific: {
-    message: 'Industry and sector specific',
-    context: 'Subcategory type for technical and vocational training.',
-  },
-
-  // Daily Life Categories
-  publicHealth: {
-    message: 'Public health',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Public_health.',
-  },
-  entrepreneurship: {
-    message: 'Entrepreneurship',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Entrepreneurship',
-  },
-  financialLiteracy: {
-    message: 'Financial literacy',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Financial_literacy',
-  },
-  currentEvents: {
-    message: 'Current events',
-    context:
-      "Category type. Could also be translated as 'News'. See https://en.wikipedia.org/wiki/News",
-  },
-  environment: {
-    message: 'Environment',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Environmental_studies',
-  },
-  mediaLiteracy: {
-    message: 'Media literacy',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Media_literacy',
-  },
-  diversity: {
-    message: 'Diversity',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Diversity_(politics)',
-  },
-  mentalHealth: {
-    message: 'Mental health',
-    context: 'Category type. See https://en.wikipedia.org/wiki/Mental_health',
-  },
-
-  // Teacher-Specific Categories
-  guides: {
-    message: 'Guides',
-    context:
-      'Category label in the Kolibri resources library; refers to any guide-type material for teacher professional development.',
-  },
-  lessonPlans: {
-    message: 'Lesson plans',
-    context:
-      'Category label in the Kolibri resources library; refers to lesson planning materials for teachers.',
-  },
-
-  // Resources Needed Categories = {
-  forBeginners: {
-    message: 'For beginners',
-    context: 'Filter option and a label for the resources in the Kolibri Library.',
-  },
-  toUseWithPaperAndPencil: {
-    message: 'Paper and pencil',
-    context: 'Refers to a filter for resources.\n',
-  },
-  needsInternet: {
-    message: 'Internet connection',
-    context: 'Refers to a filter for resources.',
-  },
-  needsMaterials: {
-    message: 'Other supplies',
-    context: 'Refers to a filter for resources.\n',
-  },
-  softwareTools: {
-    message: 'Other software tools',
-    context: 'Refers to a filter for resources that need additional software to be used.',
-  },
-  peers: {
-    message: 'Working with peers',
-    context:
-      'Refers to a filter for resources that require a learner to work with other learners to be used.',
-  },
-  teacher: {
-    message: 'Working with a teacher',
-    context:
-      'Refers to a filter for resources that require a learner to work with a teacher to be used.',
-  },
-
-  // Accessibility category name
-  accessibility: {
-    message: 'Accessibility',
-    context:
-      'Allows the user to filter for all the resources with accessibility features for learners with disabilities.',
-  },
-  // Accessibility Categories
-  signLanguage: {
-    message: 'Includes sign language captions',
-    context:
-      'https://en.wikipedia.org/wiki/Sign_language\nhttps://en.wikipedia.org/wiki/List_of_sign_languages\nWherever communities of deaf people exist, sign languages have developed as useful means of communication, and they form the core of local Deaf cultures. Although signing is used primarily by the deaf and hard of hearing, it is also used by hearing individuals, such as those unable to physically speak, those who have trouble with spoken language due to a disability or condition (augmentative and alternative communication), or those with deaf family members, such as children of deaf adults. ',
-  },
-  audioDescription: {
-    message: 'Includes audio descriptions',
-    context:
-      'Content has narration used to provide information surrounding key visual elements for the benefit of blind and visually impaired users.\nhttps://en.wikipedia.org/wiki/Audio_description',
-  },
-  taggedPdf: {
-    message: 'Tagged PDF',
-    context:
-      'A tagged PDF includes hidden accessibility markups (tags) that make the document accessible to those who use screen readers and other assistive technology (AT).\n\nhttps://taggedpdf.com/what-is-a-tagged-pdf/',
-  },
-  altText: {
-    message: 'Includes alternative text descriptions for images',
-    context:
-      'Alternative text, or alt text, is a written substitute for an image. It is used to describe information being provided by an image, graph, or any other visual element on a web page. It provides information about the context and function of an image for people with varying degrees of visual and cognitive impairments. When a screen reader encounters an image, it will read aloud the alternative text.\nhttps://www.med.unc.edu/webguide/accessibility/alt-text/',
-  },
-  highContrast: {
-    message: 'Includes high contrast text for learners with low vision',
-    context:
-      "Accessibility filter used to search for resources that have high contrast color themes for users with low vision ('display' refers to digital content, not the hardware like screens or monitors).\nhttps://veroniiiica.com/2019/10/25/high-contrast-color-schemes-low-vision/",
-  },
-  captionsSubtitles: {
-    message: 'Includes captions or subtitles',
-    context:
-      'Accessibility filter to search for video and audio resources that have text captions for users who are deaf or hard of hearing.\nhttps://www.w3.org/WAI/media/av/captions/',
-  },
-
-  // Used to categorize the level or audience of content
-  // ContentLevels
-  level: {
-    message: 'Level',
-    context: 'Refers to the educational learning level, such a preschool, primary, secondary, etc.',
-  },
-  preschool: {
-    message: 'Preschool',
-    context:
-      'Refers to a level of education offered to children before they begin compulsory education at primary school.\n\nSee https://en.wikipedia.org/wiki/Preschool',
-  },
-  lowerPrimary: {
-    message: 'Lower primary',
-    context:
-      'Refers to a level of learning. Approximately corresponds to the first half of primary school.',
-  },
-  upperPrimary: {
-    message: 'Upper primary',
-    context:
-      'Refers to a level of education. Approximately corresponds to the second half of primary school.\n',
-  },
-  lowerSecondary: {
-    message: 'Lower secondary',
-    context:
-      'Refers to a level of learning. Approximately corresponds to the first half of secondary school (high school).',
-  },
-  upperSecondary: {
-    message: 'Upper secondary',
-    context:
-      'Refers to a level of education. Approximately corresponds to the second half of secondary school.',
-  },
-  tertiary: {
-    message: 'Tertiary',
-    context: 'A level of education. See https://en.wikipedia.org/wiki/Tertiary_education',
-  },
-  specializedProfessionalTraining: {
-    message: 'Specialized professional training',
-    context: 'Level of education that refers to training for a profession (job).',
-  },
-  allLevelsBasicSkills: {
-    message: 'All levels -- basic skills',
-    context: 'Refers to a type of educational level.',
-  },
-  allLevelsWorkSkills: {
-    message: 'All levels -- work skills',
-    context: 'Refers to a type of educational level.',
-  },
-
-  browseChannel: {
-    message: 'Browse channel',
-    context: 'Heading on page where a user can browse the content within a channel',
-  },
-  topicLabel: {
-    message: 'Folder',
-    context:
-      'A collection of resources and other subfolders within a channel. Nested folders allow a channel to be organized as a tree or hierarchy.',
-  },
-  readReference: {
-    message: 'Reference',
-    context:
-      "Label displayed for the 'Read' learning activity, used instead of the time duration information, to indicate a resource that may not need sequential reading from the beginning to the end. Similar concept as the 'reference' books in the traditional library, that the user just  'consults', and does not read from cover to cover.",
-  },
-  shortActivity: {
-    message: 'Short activity',
-    context: 'Label with time estimation for learning activities that take less than 30 minutes.',
-  },
-  longActivity: {
-    message: 'Long activity',
-    context: 'Label with time estimation for learning activities that take more than 30 minutes.',
-  },
-});
+// METADATA MIXIN
 
 export const metadataTranslationMixin = {
   methods: {
     translateMetadataString(key) {
-      const camelKey = camelCase(key);
-      if (nonconformingKeys[key]) {
-        key = nonconformingKeys[key];
-      } else if (nonconformingKeys[camelKey]) {
-        key = nonconformingKeys[camelKey];
-      } else if (
-        !metadataStrings._defaultMessages[key] &&
-        metadataStrings._defaultMessages[camelKey]
-      ) {
-        key = camelKey;
-      }
-      return metadataStrings.$tr(key);
+      return translateMetadataString(key);
     },
   },
 };
 
-/**
- * An object mapping ad hoc keys (like those to be passed to CommonMetadataStrings()) which do not
- * conform to the expectations. Examples:
- *
- * - Misspelling of the key in CommonMetadataStrings but a kolibri-constant used to access it is
- *   spelled correctly and will not map.
- * - Keys were defined and string-froze which are not camelCase.
- * - Keys which, when _.camelCase()'ed will not result in a valid key, requiring manual mapping
- */
-const nonconformingKeys = {
-  PAPER_PENCIL: 'toUseWithPaperAndPencil',
-  PEERS: 'peers',
-  TEACHER: 'teacher',
-  INTERNET: 'needsInternet',
-  BASIC_SKILLS: 'allLevelsBasicSkills',
-  FOUNDATIONS: 'basicSkills',
-  foundationsLogicAndCriticalThinking: 'logicAndCriticalThinking',
-  toolsAndSoftwareTraining: 'softwareToolsAndTraining',
-  foundations: 'basicSkills',
-  OTHER_SUPPLIES: 'needsMaterials',
-  SPECIAL_SOFTWARE: 'softwareTools',
-  PROFESSIONAL: 'specializedProfessionalTraining',
-  WORK_SKILLS: 'allLevelsWorkSkills',
-};
-
 /**
  * jayoshih: using a mixin to handle this to handle the translations
  *           and handle cases where user opens page at a component
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
index e9488d7099..43762612be 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -69,4 +69,124 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
     message: 'Language is required',
     context: 'Error message when language selection is required',
   },
+  pendingStatus: {
+    message: 'Pending',
+    context: 'Status indicating that an Community Library submission is pending',
+  },
+  approvedStatus: {
+    message: 'Approved',
+    context: 'Status indicating that an Community Library submission is approved',
+  },
+  flaggedStatus: {
+    message: 'Flagged',
+    context: 'Status indicating that an Community Library submission is rejected',
+  },
+  // Submit to Community Library panel strings
+  submitToCommunityLibrary: {
+    message: 'Submit to Community Library',
+    context: 'The title of the "Submit to Community Library" panel',
+  },
+  submittedPrimaryInfo: {
+    message: 'A previous version is still pending review.',
+    context:
+      'Information shown in the "Submit to Community Library" panel when a previous version is pending review',
+  },
+  reviewersWillSeeLatestFirst: {
+    message: 'Reviewers will see the latest submission first.',
+    context:
+      'Information shown in the "Submit to Community Library" panel about how reviewers see submissions',
+  },
+  approvedPrimaryInfo: {
+    message: 'A previous version is live in the Community Library.',
+    context:
+      'Information shown in the "Submit to Community Library" panel when a previous version is approved and live',
+  },
+  flaggedPrimaryInfo: {
+    message:
+      'A previous version was flagged for review. Ensure you have fixed all highlighted issues before submitting.',
+    context:
+      'Information shown in the "Submit to Community Library" panel when a previous version was flagged',
+  },
+  nonePrimaryInfo: {
+    message: 'Your published channel will be added to the Community Library review queue.',
+    context:
+      'Information shown in the "Submit to Community Library" panel when there are no previous submissions',
+  },
+  moreDetailsButton: {
+    message: 'More details about the Community Library',
+    context:
+      'Button in the "Submit to Community Library" panel to show more details about the Community Library',
+  },
+  lessDetailsButton: {
+    message: 'Show less',
+    context:
+      'Button in the "Submit to Community Library" panel to hide details about the Community Library',
+  },
+  moreDetails: {
+    message:
+      "The Kolibri Community Library features channels created by the community. Share your openly licensed work for review, and once it's approved, it will be available to users in your selected region or language.",
+    context:
+      'Detailed description of the Community Library shown in the "Submit to Community Library" panel',
+  },
+  notPublishedWarning: {
+    message:
+      "This channel isn't published to Kolibri Studio yet. Publish first, then submit to the Community Library.",
+    context:
+      'Warning shown in the "Submit to Community Library" panel when the channel is not published',
+  },
+  publicWarning: {
+    message:
+      'This channel is currently public in the Content Library. It is not possible to submit public channels to the Community Library.',
+    context: 'Warning shown in the "Submit to Community Library" panel when the channel is public',
+  },
+  alreadySubmittedWarning: {
+    message:
+      'This version of the channel has already been submitted to the Community Library. Please wait for review or make changes and publish a new version before submitting again.',
+    context:
+      'Warning shown in the "Submit to Community Library" panel when the current version of the channel is already submitted',
+  },
+  descriptionLabel: {
+    message: "Describe what's new in this submission",
+    context:
+      'Label for the submission description field in the "Submit to Community Library" panel',
+  },
+  descriptionRequired: {
+    message: 'Description is required',
+    context:
+      'Error message shown in the "Submit to Community Library" panel when description is required but empty',
+  },
+  submitButton: {
+    message: 'Submit for review',
+    context: 'Button in the "Submit to Community Library" panel to submit channel for review',
+  },
+  submittingSnackbar: {
+    message: 'Submitting channel to Community Library...',
+    context: 'Snackbar message shown while submitting from the "Submit to Community Library" panel',
+  },
+  submittedSnackbar: {
+    message: 'Channel submitted to Community Library',
+    context:
+      'Snackbar message shown after successful submission from the "Submit to Community Library" panel',
+  },
+  errorSnackbar: {
+    message: 'There was an error submitting the channel',
+    context:
+      'Snackbar message shown when submission fails from the "Submit to Community Library" panel',
+  },
+  countryLabel: {
+    message: 'Country',
+    context: 'Label for the country selection field in the "Submit to Community Library" panel',
+  },
+  languagesDetected: {
+    message: 'Language(s) detected',
+    context: 'Label for detected languages in the "Submit to Community Library" panel',
+  },
+  licensesDetected: {
+    message: 'License(s) detected',
+    context: 'Label for detected licenses in the "Submit to Community Library" panel',
+  },
+  categoriesDetected: {
+    message: 'Categories',
+    context: 'Label for detected categories in the "Submit to Community Library" panel',
+  },
 });
diff --git a/contentcuration/contentcuration/frontend/shared/strings/metadataStrings.js b/contentcuration/contentcuration/frontend/shared/strings/metadataStrings.js
new file mode 100644
index 0000000000..8b1ee9ae58
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/strings/metadataStrings.js
@@ -0,0 +1,509 @@
+import { createTranslator } from 'shared/i18n';
+
+export const metadataStrings = createTranslator('CommonMetadataStrings', {
+  // Titles/Headers
+
+  learningActivity: {
+    message: 'Learning Activity',
+    context: 'A title for the category of education material interaction, i.e. watch, read, listen',
+  },
+  completion: {
+    message: 'Completion',
+    context: 'A title for the metadata that explains when an activity is finished',
+  },
+  duration: {
+    message: 'Duration',
+    context: 'A title for the metadata that explains how long an activity will take',
+  },
+  category: {
+    message: 'Category',
+    context: 'A title for the metadata that explains the subject matter of an activity',
+  },
+  // Completion criteria types
+  reference: {
+    message: 'Reference material',
+    context:
+      'One of the completion criteria types. Progress made on a resource with this criteria is not tracked.',
+  },
+  completeDuration: {
+    message: 'When time spent is equal to duration',
+    context:
+      'One of the completion criteria types. A resource with this criteria is considered complete when learners spent given time studying it.',
+  },
+  exactTime: {
+    message: 'Time to complete',
+    context:
+      'One of the completion criteria types. A subset of "When time spent is equal to duration". For example, for an audio resource with this criteria, learnes need to hear the whole length of audio for the resource to be considered complete.',
+  },
+  allContent: {
+    message: 'Viewed in its entirety',
+    context:
+      'One of the completion criteria types. A resource with this criteria is considered complete when learners studied it all, for example they saw all pages of a document.',
+  },
+  determinedByResource: {
+    message: 'Determined by the resource',
+    context:
+      'One of the completion criteria types. Typically used for embedded html5/h5p resources that contain their own completion criteria, for example reaching a score in an educational game.',
+  },
+  masteryMofN: {
+    message: 'Goal: {m} out of {n}',
+    context:
+      'One of the completion criteria types specific to exercises. An exercise with this criteria is considered complete when learners answered m questions out of n correctly.',
+  },
+  goal: {
+    message: 'When goal is met',
+    context:
+      'One of the completion criteria types specific to exercises. An exercise with this criteria is considered complete when learners reached a given goal, for example 100% correct.',
+  },
+  practiceQuiz: {
+    message: 'Practice quiz',
+    context:
+      'One of the completion criteria types specific to exercises. An exercise with this criteria represents a quiz.',
+  },
+  survey: {
+    message: 'Survey',
+    context:
+      'One of the completion criteria types specific to exercises. An exercise with this criteria represents a survey.',
+  },
+
+  // Learning Activities
+  all: {
+    message: 'All',
+    context: 'A label for everything in the group of activities.',
+  },
+  watch: {
+    message: 'Watch',
+    context:
+      'Resource and filter label for the type of learning activity with video. Translate as a VERB',
+  },
+  create: {
+    message: 'Create',
+    context: 'Resource and filter label for the type of learning activity. Translate as a VERB',
+  },
+  read: {
+    message: 'Read',
+    context:
+      'Resource and filter label for the type of learning activity with documents. Translate as a VERB',
+  },
+  practice: {
+    message: 'Practice',
+    context:
+      'Resource and filter label for the type of learning activity with questions and answers. Translate as a VERB',
+  },
+  reflect: {
+    message: 'Reflect',
+    context: 'Resource and filter label for the type of learning activity. Translate as a VERB',
+  },
+  listen: {
+    message: 'Listen',
+    context:
+      'Resource and filter label for the type of learning activity with audio. Translate as a VERB',
+  },
+  explore: {
+    message: 'Explore',
+    context: 'Resource and filter label for the type of learning activity. Translate as a VERB',
+  },
+
+  // Library Categories
+  school: {
+    message: 'School',
+    context: 'Category type.',
+  },
+  basicSkills: {
+    message: 'Basic skills',
+    context:
+      'Category type. Basic skills refer to learning resources focused on aspects like literacy, numeracy and digital literacy.',
+  },
+  work: {
+    message: 'Work',
+    context:
+      'Top level category group that contains resources for acquisition of professional skills.',
+  },
+  dailyLife: {
+    message: 'Daily life',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Everyday_life',
+  },
+  forTeachers: {
+    message: 'For teachers',
+    context: 'Category type',
+  },
+
+  // School Categories
+  mathematics: {
+    message: 'Mathematics',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Mathematics',
+  },
+  sciences: {
+    message: 'Sciences',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Science',
+  },
+  socialSciences: {
+    message: 'Social sciences',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Social_science',
+  },
+  arts: {
+    message: 'Arts',
+    context: 'Refers to a category group type. See https://en.wikipedia.org/wiki/The_arts',
+  },
+  computerScience: {
+    message: 'Computer science',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Computer_science',
+  },
+  languageLearning: {
+    message: 'Language learning',
+    context: 'Category type.',
+  },
+  history: {
+    message: 'History',
+    context: 'Category type.',
+  },
+  readingAndWriting: {
+    message: 'Reading and writing',
+    context: 'School subject category',
+  },
+
+  // Mathematics Subcategories
+  arithmetic: {
+    message: 'Arithmetic',
+    context: 'Math category type. See https://en.wikipedia.org/wiki/Arithmetic',
+  },
+  algebra: {
+    message: 'Algebra',
+    context: 'A type of math category. See https://en.wikipedia.org/wiki/Algebra',
+  },
+  geometry: {
+    message: 'Geometry',
+    context: 'Category type.',
+  },
+  calculus: {
+    message: 'Calculus',
+    context: 'Math category type. https://en.wikipedia.org/wiki/Calculus',
+  },
+  statistics: {
+    message: 'Statistics',
+    context: 'A math category. See https://en.wikipedia.org/wiki/Statistics',
+  },
+
+  // Sciences Subcategories
+  biology: {
+    message: 'Biology',
+    context: 'Science category type. See https://en.wikipedia.org/wiki/Biology',
+  },
+  chemistry: {
+    message: 'Chemistry',
+    context: 'Science category type. See https://en.wikipedia.org/wiki/Chemistry',
+  },
+  physics: {
+    message: 'Physics',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Physics.',
+  },
+  earthScience: {
+    message: 'Earth science',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Earth_science',
+  },
+  astronomy: {
+    message: 'Astronomy',
+    context: 'Science category type. See https://en.wikipedia.org/wiki/Astronomy',
+  },
+
+  //  Literature Subcategories
+  literature: {
+    message: 'Literature',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Literature',
+  },
+  readingComprehension: {
+    message: 'Reading comprehension',
+    context: 'Category type.',
+  },
+  writing: {
+    message: 'Writing',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Writing',
+  },
+  logicAndCriticalThinking: {
+    message: 'Logic and critical thinking',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Critical_thinking',
+  },
+
+  // Social Sciences Subcategories
+  politicalScience: {
+    message: 'Political science',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Political_science.',
+  },
+  sociology: {
+    message: 'Sociology',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Sociology',
+  },
+  anthropology: {
+    message: 'Anthropology',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Anthropology',
+  },
+  civicEducation: {
+    message: 'Civic education',
+    context:
+      'Category type. Civic education is the study of the rights and obligations of citizens in society. See https://en.wikipedia.org/wiki/Civics',
+  },
+
+  // Arts Subcategories = {
+  visualArt: {
+    message: 'Visual art',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Visual_arts',
+  },
+  music: {
+    message: 'Music',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Music',
+  },
+  dance: {
+    message: 'Dance',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Dance',
+  },
+  drama: {
+    message: 'Drama',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Drama',
+  },
+
+  //  Computer Science Subcategories
+  programming: {
+    message: 'Programming',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Computer_programming',
+  },
+  mechanicalEngineering: {
+    message: 'Mechanical engineering',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Mechanical_engineering.',
+  },
+  webDesign: {
+    message: 'Web design',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Web_design',
+  },
+
+  // Basic Skills
+  literacy: {
+    message: 'Literacy',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Literacy',
+  },
+  numeracy: {
+    message: 'Numeracy',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Numeracy',
+  },
+  digitalLiteracy: {
+    message: 'Digital literacy',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Digital_literacy',
+  },
+  learningSkills: {
+    message: 'Learning skills',
+    context:
+      'A category label and type of basic skill.\nhttps://en.wikipedia.org/wiki/Study_skills',
+  },
+
+  // Work Categories
+  professionalSkills: {
+    message: 'Professional skills',
+    context: 'Category type. Refers to skills that are related to a profession or a job.',
+  },
+  technicalAndVocationalTraining: {
+    message: 'Technical and vocational training',
+    context:
+      'A level of education. See https://en.wikipedia.org/wiki/TVET_(Technical_and_Vocational_Education_and_Training)',
+  },
+
+  //  VocationalSubcategories
+  softwareToolsAndTraining: {
+    message: 'Software tools and training',
+    context: 'Subcategory type for technical and vocational training.',
+  },
+  skillsTraining: {
+    message: 'Skills training',
+    context: 'Subcategory type for technical and vocational training.',
+  },
+  industryAndSectorSpecific: {
+    message: 'Industry and sector specific',
+    context: 'Subcategory type for technical and vocational training.',
+  },
+
+  // Daily Life Categories
+  publicHealth: {
+    message: 'Public health',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Public_health.',
+  },
+  entrepreneurship: {
+    message: 'Entrepreneurship',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Entrepreneurship',
+  },
+  financialLiteracy: {
+    message: 'Financial literacy',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Financial_literacy',
+  },
+  currentEvents: {
+    message: 'Current events',
+    context:
+      "Category type. Could also be translated as 'News'. See https://en.wikipedia.org/wiki/News",
+  },
+  environment: {
+    message: 'Environment',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Environmental_studies',
+  },
+  mediaLiteracy: {
+    message: 'Media literacy',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Media_literacy',
+  },
+  diversity: {
+    message: 'Diversity',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Diversity_(politics)',
+  },
+  mentalHealth: {
+    message: 'Mental health',
+    context: 'Category type. See https://en.wikipedia.org/wiki/Mental_health',
+  },
+
+  // Teacher-Specific Categories
+  guides: {
+    message: 'Guides',
+    context:
+      'Category label in the Kolibri resources library; refers to any guide-type material for teacher professional development.',
+  },
+  lessonPlans: {
+    message: 'Lesson plans',
+    context:
+      'Category label in the Kolibri resources library; refers to lesson planning materials for teachers.',
+  },
+
+  // Resources Needed Categories = {
+  forBeginners: {
+    message: 'For beginners',
+    context: 'Filter option and a label for the resources in the Kolibri Library.',
+  },
+  toUseWithPaperAndPencil: {
+    message: 'Paper and pencil',
+    context: 'Refers to a filter for resources.\n',
+  },
+  needsInternet: {
+    message: 'Internet connection',
+    context: 'Refers to a filter for resources.',
+  },
+  needsMaterials: {
+    message: 'Other supplies',
+    context: 'Refers to a filter for resources.\n',
+  },
+  softwareTools: {
+    message: 'Other software tools',
+    context: 'Refers to a filter for resources that need additional software to be used.',
+  },
+  peers: {
+    message: 'Working with peers',
+    context:
+      'Refers to a filter for resources that require a learner to work with other learners to be used.',
+  },
+  teacher: {
+    message: 'Working with a teacher',
+    context:
+      'Refers to a filter for resources that require a learner to work with a teacher to be used.',
+  },
+
+  // Accessibility category name
+  accessibility: {
+    message: 'Accessibility',
+    context:
+      'Allows the user to filter for all the resources with accessibility features for learners with disabilities.',
+  },
+  // Accessibility Categories
+  signLanguage: {
+    message: 'Includes sign language captions',
+    context:
+      'https://en.wikipedia.org/wiki/Sign_language\nhttps://en.wikipedia.org/wiki/List_of_sign_languages\nWherever communities of deaf people exist, sign languages have developed as useful means of communication, and they form the core of local Deaf cultures. Although signing is used primarily by the deaf and hard of hearing, it is also used by hearing individuals, such as those unable to physically speak, those who have trouble with spoken language due to a disability or condition (augmentative and alternative communication), or those with deaf family members, such as children of deaf adults. ',
+  },
+  audioDescription: {
+    message: 'Includes audio descriptions',
+    context:
+      'Content has narration used to provide information surrounding key visual elements for the benefit of blind and visually impaired users.\nhttps://en.wikipedia.org/wiki/Audio_description',
+  },
+  taggedPdf: {
+    message: 'Tagged PDF',
+    context:
+      'A tagged PDF includes hidden accessibility markups (tags) that make the document accessible to those who use screen readers and other assistive technology (AT).\n\nhttps://taggedpdf.com/what-is-a-tagged-pdf/',
+  },
+  altText: {
+    message: 'Includes alternative text descriptions for images',
+    context:
+      'Alternative text, or alt text, is a written substitute for an image. It is used to describe information being provided by an image, graph, or any other visual element on a web page. It provides information about the context and function of an image for people with varying degrees of visual and cognitive impairments. When a screen reader encounters an image, it will read aloud the alternative text.\nhttps://www.med.unc.edu/webguide/accessibility/alt-text/',
+  },
+  highContrast: {
+    message: 'Includes high contrast text for learners with low vision',
+    context:
+      "Accessibility filter used to search for resources that have high contrast color themes for users with low vision ('display' refers to digital content, not the hardware like screens or monitors).\nhttps://veroniiiica.com/2019/10/25/high-contrast-color-schemes-low-vision/",
+  },
+  captionsSubtitles: {
+    message: 'Includes captions or subtitles',
+    context:
+      'Accessibility filter to search for video and audio resources that have text captions for users who are deaf or hard of hearing.\nhttps://www.w3.org/WAI/media/av/captions/',
+  },
+
+  // Used to categorize the level or audience of content
+  // ContentLevels
+  level: {
+    message: 'Level',
+    context: 'Refers to the educational learning level, such a preschool, primary, secondary, etc.',
+  },
+  preschool: {
+    message: 'Preschool',
+    context:
+      'Refers to a level of education offered to children before they begin compulsory education at primary school.\n\nSee https://en.wikipedia.org/wiki/Preschool',
+  },
+  lowerPrimary: {
+    message: 'Lower primary',
+    context:
+      'Refers to a level of learning. Approximately corresponds to the first half of primary school.',
+  },
+  upperPrimary: {
+    message: 'Upper primary',
+    context:
+      'Refers to a level of education. Approximately corresponds to the second half of primary school.\n',
+  },
+  lowerSecondary: {
+    message: 'Lower secondary',
+    context:
+      'Refers to a level of learning. Approximately corresponds to the first half of secondary school (high school).',
+  },
+  upperSecondary: {
+    message: 'Upper secondary',
+    context:
+      'Refers to a level of education. Approximately corresponds to the second half of secondary school.',
+  },
+  tertiary: {
+    message: 'Tertiary',
+    context: 'A level of education. See https://en.wikipedia.org/wiki/Tertiary_education',
+  },
+  specializedProfessionalTraining: {
+    message: 'Specialized professional training',
+    context: 'Level of education that refers to training for a profession (job).',
+  },
+  allLevelsBasicSkills: {
+    message: 'All levels -- basic skills',
+    context: 'Refers to a type of educational level.',
+  },
+  allLevelsWorkSkills: {
+    message: 'All levels -- work skills',
+    context: 'Refers to a type of educational level.',
+  },
+
+  browseChannel: {
+    message: 'Browse channel',
+    context: 'Heading on page where a user can browse the content within a channel',
+  },
+  topicLabel: {
+    message: 'Folder',
+    context:
+      'A collection of resources and other subfolders within a channel. Nested folders allow a channel to be organized as a tree or hierarchy.',
+  },
+  readReference: {
+    message: 'Reference',
+    context:
+      "Label displayed for the 'Read' learning activity, used instead of the time duration information, to indicate a resource that may not need sequential reading from the beginning to the end. Similar concept as the 'reference' books in the traditional library, that the user just  'consults', and does not read from cover to cover.",
+  },
+  shortActivity: {
+    message: 'Short activity',
+    context: 'Label with time estimation for learning activities that take less than 30 minutes.',
+  },
+  longActivity: {
+    message: 'Long activity',
+    context: 'Label with time estimation for learning activities that take more than 30 minutes.',
+  },
+});
diff --git a/contentcuration/contentcuration/frontend/shared/utils/countries.js b/contentcuration/contentcuration/frontend/shared/utils/countries.js
new file mode 100644
index 0000000000..34ee48dc51
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/utils/countries.js
@@ -0,0 +1,11 @@
+// NOTE that this list MUST stay in sync with the list of countries
+// generated on the backend in contentcuration/management/commands/loadconstants.py,
+// and special care should be taken when updating the i18n-iso-countries library.
+const countries = require('i18n-iso-countries');
+countries.registerLocale(require('i18n-iso-countries/langs/en.json'));
+countries.registerLocale(require('i18n-iso-countries/langs/es.json'));
+countries.registerLocale(require('i18n-iso-countries/langs/ar.json'));
+countries.registerLocale(require('i18n-iso-countries/langs/fr.json'));
+countries.registerLocale(require('i18n-iso-countries/langs/pt.json'));
+
+export default countries;
diff --git a/contentcuration/contentcuration/frontend/shared/utils/metadataStringsTranslation.js b/contentcuration/contentcuration/frontend/shared/utils/metadataStringsTranslation.js
new file mode 100644
index 0000000000..d755334623
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/utils/metadataStringsTranslation.js
@@ -0,0 +1,40 @@
+import camelCase from 'lodash/camelCase';
+
+import { metadataStrings } from 'shared/strings/metadataStrings';
+
+/**
+ * An object mapping ad hoc keys (like those to be passed to CommonMetadataStrings()) which do not
+ * conform to the expectations. Examples:
+ *
+ * - Misspelling of the key in CommonMetadataStrings but a kolibri-constant used to access it is
+ *   spelled correctly and will not map.
+ * - Keys were defined and string-froze which are not camelCase.
+ * - Keys which, when _.camelCase()'ed will not result in a valid key, requiring manual mapping
+ */
+const nonconformingKeys = {
+  PAPER_PENCIL: 'toUseWithPaperAndPencil',
+  PEERS: 'peers',
+  TEACHER: 'teacher',
+  INTERNET: 'needsInternet',
+  BASIC_SKILLS: 'allLevelsBasicSkills',
+  FOUNDATIONS: 'basicSkills',
+  foundationsLogicAndCriticalThinking: 'logicAndCriticalThinking',
+  toolsAndSoftwareTraining: 'softwareToolsAndTraining',
+  foundations: 'basicSkills',
+  OTHER_SUPPLIES: 'needsMaterials',
+  SPECIAL_SOFTWARE: 'softwareTools',
+  PROFESSIONAL: 'specializedProfessionalTraining',
+  WORK_SKILLS: 'allLevelsWorkSkills',
+};
+
+export function translateMetadataString(key) {
+  const camelKey = camelCase(key);
+  if (nonconformingKeys[key]) {
+    key = nonconformingKeys[key];
+  } else if (nonconformingKeys[camelKey]) {
+    key = nonconformingKeys[camelKey];
+  } else if (!metadataStrings._defaultMessages[key] && metadataStrings._defaultMessages[camelKey]) {
+    key = camelKey;
+  }
+  return metadataStrings.$tr(key);
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/index.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/index.vue
index c4ba819651..b3260130ec 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CompletionOptions/index.vue
@@ -131,7 +131,8 @@
     getDurationValidators,
     translateValidator,
   } from 'shared/utils/validation';
-  import { metadataStrings, metadataTranslationMixin } from 'shared/mixins';
+  import { metadataTranslationMixin } from 'shared/mixins';
+  import { metadataStrings } from 'shared/strings/metadataStrings';
   import ExpandableSelect from 'shared/views/form/ExpandableSelect';
 
   const DEFAULT_SHORT_ACTIVITY = 600;
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue b/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue
index 8254a4f8bb..13d8f1f0d5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue
@@ -28,17 +28,9 @@
 
 <script>
 
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
+  import countries from '../../utils/countries';
 
-  // NOTE that this list MUST stay in sync with the list of countries
-  // generated on the backend in contentcuration/management/commands/loadconstants.py,
-  // and special care should be taken when updating the i18n-iso-countries library.
-  var countries = require('i18n-iso-countries');
-  countries.registerLocale(require('i18n-iso-countries/langs/en.json'));
-  countries.registerLocale(require('i18n-iso-countries/langs/es.json'));
-  countries.registerLocale(require('i18n-iso-countries/langs/ar.json'));
-  countries.registerLocale(require('i18n-iso-countries/langs/fr.json'));
-  countries.registerLocale(require('i18n-iso-countries/langs/pt.json'));
+  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
 
   export default {
     name: 'CountryField',
@@ -69,6 +61,10 @@
         required: false,
         default: null,
       },
+      fullWidth: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -98,6 +94,9 @@
       rules() {
         return [v => (!this.required || v.length ? true : this.$tr('locationRequiredMessage'))];
       },
+      autocompleteMaxWidth() {
+        return this.fullWidth ? '100%' : '500px';
+      },
     },
     methods: {
       searchInputClear() {
@@ -122,7 +121,7 @@
   }
 
   .v-autocomplete {
-    max-width: 500px;
+    max-width: v-bind('autocompleteMaxWidth');
   }
 
 </style>