diff --git a/package.json b/package.json
index 52aab39719..5d98454249 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,7 @@
     "@testing-library/vue": "^5.8.2",
     "@types/express-useragent": "^1.0.2",
     "@types/jest": "^26.0.22",
+    "@types/lodash.sortby": "^4.7.7",
     "@types/module-alias": "^2.0.1",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aa3fabb38d..754b539b77 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,7 @@ specifiers:
   '@testing-library/vue': ^5.8.2
   '@types/express-useragent': ^1.0.2
   '@types/jest': ^26.0.22
+  '@types/lodash.sortby': ^4.7.7
   '@types/module-alias': ^2.0.1
   '@types/uuid': ^8.3.4
   '@typescript-eslint/eslint-plugin': ^5.17.0
@@ -149,6 +150,7 @@ devDependencies:
   '@testing-library/vue': 5.8.2
   '@types/express-useragent': 1.0.2
   '@types/jest': 26.0.24
+  '@types/lodash.sortby': 4.7.7
   '@types/module-alias': 2.0.1
   '@types/uuid': 8.3.4
   '@typescript-eslint/eslint-plugin': 5.17.0_19abd711d85a5efffc505795b0ac8452
@@ -5678,6 +5680,16 @@ packages:
     resolution: {integrity: sha512-62vfe65cMSzYaWmpmhqCMMNl0khen89w57mByPi1OseGfcV/LV03fO8YVrNj7rFQsRWNJo650WWyh6m7p8vZmA==}
     dev: true
 
+  /@types/lodash.sortby/4.7.7:
+    resolution: {integrity: sha512-J/4IS+jQopGBrrRetBXDCX0KnSeXJZ0rOTmGAxR9MWGV24YdHxX8IRi9LCGAU9GKWlBov9KRSfQpuup9PReqrw==}
+    dependencies:
+      '@types/lodash': 4.14.182
+    dev: true
+
+  /@types/lodash/4.14.182:
+    resolution: {integrity: sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==}
+    dev: true
+
   /@types/mdast/3.0.10:
     resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==}
     dependencies:
diff --git a/src/components/TableSortIcon.vue b/src/components/TableSortIcon.vue
index 0d6cbe833c..2cb682dc2b 100644
--- a/src/components/TableSortIcon.vue
+++ b/src/components/TableSortIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col" :class="[active ? activeClass : inactiveClass]">
+  <div class="flex flex-col" :class="[active ? 'text-dark-blue' : 'text-gray']">
     <svg
       width="12"
       height="6"
@@ -24,8 +24,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
   name: 'TableSortIcon',
   props: {
     active: {
@@ -33,11 +35,5 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      activeClass: 'text-dark-blue',
-      inactiveClass: 'text-gray',
-    }
-  },
-}
+})
 </script>
diff --git a/src/components/VSourcesTable.vue b/src/components/VSourcesTable.vue
new file mode 100644
index 0000000000..409d5693ac
--- /dev/null
+++ b/src/components/VSourcesTable.vue
@@ -0,0 +1,173 @@
+<template>
+  <table
+    :aria-label="$t('sources.aria.table').toString()"
+    role="region"
+    class="table table-fixed w-full mt-4 mb-10 not-prose text-base"
+  >
+    <thead>
+      <tr>
+        <th
+          tabindex="0"
+          @click="sortTable('display_name')"
+          @keypress.enter="sortTable('display_name')"
+        >
+          <span class="w-full flex flex-row items-center justify-between">
+            {{ $t('sources.providers.source') }}
+            <TableSortIcon :active="sorting.field === 'display_name'" />
+          </span>
+        </th>
+        <th
+          tabindex="0"
+          @click="sortTable('source_url')"
+          @keypress.enter="sortTable('source_url')"
+        >
+          <span class="w-full flex flex-row items-center justify-between">
+            {{ $t('sources.providers.domain') }}
+            <TableSortIcon :active="sorting.field === 'source_url'" />
+          </span>
+        </th>
+        <th
+          tabindex="0"
+          @click="sortTable('media_count')"
+          @keypress.enter="sortTable('media_count')"
+        >
+          <span class="w-full flex flex-row items-center justify-between">
+            {{ $t('sources.providers.item') }}
+            <TableSortIcon :active="sorting.field === 'media_count'" />
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(provider, index) in sortedProviders" :key="index">
+        <td>
+          {{ provider.display_name }}
+        </td>
+        <td class="font-semibold truncate">
+          <VLink :href="provider.source_url">
+            {{ cleanSourceUrlForPresentation(provider.source_url) }}
+          </VLink>
+        </td>
+        <td class="text-right">
+          {{ getLocaleFormattedNumber(provider.media_count || 0) }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import sortBy from 'lodash.sortby'
+import {
+  computed,
+  defineComponent,
+  PropType,
+  reactive,
+} from '@nuxtjs/composition-api'
+
+import { useProviderStore } from '~/stores/provider'
+import { useGetLocaleFormattedNumber } from '~/composables/use-get-locale-formatted-number'
+
+import type { SupportedMediaType } from '~/constants/media'
+
+import TableSortIcon from '~/components/TableSortIcon.vue'
+import VLink from '~/components/VLink.vue'
+
+import externalLinkIcon from '~/assets/icons/external-link.svg'
+
+export default defineComponent({
+  name: 'VSourcesTable',
+  components: {
+    TableSortIcon,
+    VLink,
+  },
+  props: {
+    media: {
+      type: String as PropType<SupportedMediaType>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const sorting = reactive({
+      direction: 'asc',
+      field: 'display_name',
+    })
+
+    function sortTable(field: string) {
+      let direction = 'asc'
+      if (field === sorting.field) {
+        direction = sorting.direction === 'asc' ? 'desc' : 'asc'
+      }
+
+      sorting.direction = direction
+      sorting.field = field
+    }
+    function cleanSourceUrlForPresentation(url: string) {
+      const stripProtocol = (s: string) => s.replace(/https?:\/\//, '')
+      const stripLeadingWww = (s: string) =>
+        s.startsWith('www.') ? s.replace('www.', '') : s
+      const removeAfterSlash = (s: string) => s.split('/')[0]
+
+      return removeAfterSlash(stripLeadingWww(stripProtocol(url)))
+    }
+    const getLocaleFormattedNumber = useGetLocaleFormattedNumber()
+    const providerStore = useProviderStore()
+
+    const sortedProviders = computed(() => {
+      const sorted = sortBy(providerStore.providers[props.media], [
+        sorting.field,
+      ])
+      return sorting.direction === 'asc' ? sorted : sorted.reverse()
+    })
+    return {
+      getLocaleFormattedNumber,
+      externalLinkIcon,
+      sortedProviders,
+      sorting,
+      sortTable,
+      cleanSourceUrlForPresentation,
+    }
+  },
+})
+</script>
+
+<style scoped>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .table {
+    @apply border-0 rounded-sm border-separate border-dark-charcoal-20;
+  }
+  .table th,
+  .table td {
+    @apply border-dark-charcoal-20;
+  }
+  .table a {
+    @apply text-pink hover:underline;
+  }
+  .table th {
+    @apply bg-dark-charcoal-10 border-t cursor-pointer;
+  }
+  .table th,
+  .table td {
+    @apply p-4 border-r first:border-l;
+  }
+  .table td {
+    @apply break-normal border-y-0;
+  }
+
+  .table tr {
+    @apply even:bg-dark-charcoal-06;
+  }
+
+  .table th {
+    @apply first:rounded-tl-sm last:rounded-tr-sm;
+  }
+
+  .table tr:last-child td {
+    @apply first:rounded-bl-sm last:rounded-br-sm border-b;
+  }
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index f985298efa..e47b2f3c40 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -94,8 +94,8 @@
     "cc-content": {
       "where": "Where does the content on {openverse} come from?",
       "content": "There is openly licensed content hosted on millions of domains across the breadth of the internet. Our team systematically identifies providers hosting CC-licensed content. If it’s a good fit, we index that content and make it discoverable through {openverse}.",
-      "provider": "Some providers have multiple different groupings of content within them. {flickr} has sources ranging from NASA to personal photography. The {smithsonian} comprises a dozen, diverse collections. Wikimedia Commons runs the gamut in terms of content, and is used by several Galleries, Libraries, Archives, and Museums highlighting some or all of their digitized collections.",
-      "europeana": "{openverse} is especially grateful for the work of {link}, an organization that works to digitize and make discoverable cultural heritage works across Europe. {openverse} is able to index hundreds of valuable sources, through a single integration with the {link-api}.",
+      "provider": "Some providers have multiple different groupings of content within them. {flickr} has sources ranging from NASA to personal photography. The {smithsonian} comprises a dozen diverse collections. Wikimedia Commons runs the gamut in terms of content, and is used by several Galleries, Libraries, Archives, and Museums highlighting some or all of their digitized collections.",
+      "europeana": "{openverse} is especially grateful for the work of {link}, an organization that works to digitize and make discoverable cultural heritage works across Europe. {openverse} is able to index hundreds of valuable sources through a single integration with the {link-api}.",
       "europeana-api": "Europeana API",
       "smithsonian": "Smithsonian Institute"
     },
@@ -108,7 +108,11 @@
     },
     "suggestions": "We appreciate suggestions for new sources from our community of users.",
     "issue-button": "Suggest a new source",
-    "aria": { "table": "sources table" }
+    "aria": { "table": "sources table" },
+    "heading": {
+      "image": "Image Sources",
+      "audio": "Audio Sources"
+    }
   },
   "meta-search-page": {
     "title": "Meta Search",
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index cec0a53a63..43f617befb 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -1606,7 +1606,17 @@ msgctxt "sources.issue-button"
 msgid "Suggest a new source"
 msgstr ""
 
+#: src/pages/sources.vue:77
+msgctxt "sources.heading.image"
+msgid "Image Sources"
+msgstr ""
+
 #: src/pages/sources.vue:79
+msgctxt "sources.heading.audio"
+msgid "Audio Sources"
+msgstr ""
+
+#: src/components/VSourcesTable.vue:3
 msgctxt "sources.aria.table"
 msgid "sources table"
 msgstr ""
@@ -1651,13 +1661,13 @@ msgstr ""
 #. Do not translate words between ### ###.
 #: src/pages/sources.vue:13
 msgctxt "sources.cc-content.provider"
-msgid "Some providers have multiple different groupings of content within them. ###flickr### has sources ranging from NASA to personal photography. The ###smithsonian### comprises a dozen, diverse collections. Wikimedia Commons runs the gamut in terms of content, and is used by several Galleries, Libraries, Archives, and Museums highlighting some or all of their digitized collections."
+msgid "Some providers have multiple different groupings of content within them. ###flickr### has sources ranging from NASA to personal photography. The ###smithsonian### comprises a dozen diverse collections. Wikimedia Commons runs the gamut in terms of content, and is used by several Galleries, Libraries, Archives, and Museums highlighting some or all of their digitized collections."
 msgstr ""
 
 #. Do not translate words between ### ###.
 #: src/pages/sources.vue:23
 msgctxt "sources.cc-content.europeana"
-msgid "###openverse### is especially grateful for the work of ###link###, an organization that works to digitize and make discoverable cultural heritage works across Europe. ###openverse### is able to index hundreds of valuable sources, through a single integration with the ###link-api###."
+msgid "###openverse### is especially grateful for the work of ###link###, an organization that works to digitize and make discoverable cultural heritage works across Europe. ###openverse### is able to index hundreds of valuable sources through a single integration with the ###link-api###."
 msgstr ""
 
 #: src/pages/sources.vue:30
@@ -1670,17 +1680,17 @@ msgctxt "sources.cc-content.smithsonian"
 msgid "Smithsonian Institute"
 msgstr ""
 
-#: src/pages/sources.vue:91
+#: src/components/VSourcesTable.vue:15
 msgctxt "sources.providers.source"
 msgid "Source"
 msgstr ""
 
-#: src/pages/sources.vue:101
+#: src/components/VSourcesTable.vue:25
 msgctxt "sources.providers.domain"
 msgid "Domain"
 msgstr ""
 
-#: src/pages/sources.vue:111
+#: src/components/VSourcesTable.vue:35
 msgctxt "sources.providers.item"
 msgid "Total items"
 msgstr ""
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index 0baafce318..295dfb5faf 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -74,178 +74,35 @@
         </strong>
       </template>
     </i18n>
-
-    <table
-      :aria-label="$t('sources.aria.table')"
-      role="region"
-      class="table is-striped mt-4 mb-10 border border-dark-charcoal-06 not-prose text-base"
-    >
-      <thead>
-        <tr>
-          <th
-            tabindex="0"
-            @click="sortTable('display_name')"
-            @keypress.enter="sortTable('display_name')"
-          >
-            <span class="w-full flex flex-row items-center justify-between">
-              {{ $t('sources.providers.source') }}
-              <TableSortIcon :active="sort.field === 'display_name'" />
-            </span>
-          </th>
-          <th
-            tabindex="0"
-            @click="sortTable('source_url')"
-            @keypress.enter="sortTable('source_url')"
-          >
-            <span class="w-full flex flex-row items-center justify-between">
-              {{ $t('sources.providers.domain') }}
-              <TableSortIcon :active="sort.field === 'source_url'" />
-            </span>
-          </th>
-          <th
-            tabindex="0"
-            @click="sortTable('media_count')"
-            @keypress.enter="sortTable('media_count')"
-          >
-            <span class="w-full flex flex-row items-center justify-between">
-              {{ $t('sources.providers.item') }}
-              <TableSortIcon :active="sort.field === 'media_count'" />
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(imageProvider, index) in sortedProviders" :key="index">
-          <td>
-            {{ imageProvider.display_name }}
-          </td>
-          <td class="font-semibold truncate">
-            <VLink :href="imageProvider.source_url">
-              {{ cleanSourceUrlForPresentation(imageProvider.source_url) }}
-            </VLink>
-          </td>
-          <td class="number-cell">
-            {{ getLocaleFormattedNumber(imageProvider.media_count || 0) }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <h5>{{ $t('sources.heading.image') }}</h5>
+    <VSourcesTable media="image" />
+    <h5>{{ $t('sources.heading.audio') }}</h5>
+    <VSourcesTable media="audio" />
   </VContentPage>
 </template>
 
-<script>
-import sortBy from 'lodash.sortby'
-import { computed } from '@nuxtjs/composition-api'
-
-import { useProviderStore } from '~/stores/provider'
-import { useGetLocaleFormattedNumber } from '~/composables/use-get-locale-formatted-number'
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
 
 import VButton from '~/components/VButton.vue'
 import VLink from '~/components/VLink.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
-import TableSortIcon from '~/components/TableSortIcon.vue'
 import VContentPage from '~/components/VContentPage.vue'
+import VSourcesTable from '~/components/VSourcesTable.vue'
 
 import externalLinkIcon from '~/assets/icons/external-link.svg'
 
-const SourcePage = {
-  name: 'source-page',
-  components: { VButton, VContentPage, VIcon, VLink, TableSortIcon },
-  data() {
-    return {
-      sort: {
-        direction: 'asc',
-        field: 'display_name',
-      },
-    }
-  },
+export default defineComponent({
+  name: 'SourcePage',
+  components: { VButton, VContentPage, VIcon, VLink, VSourcesTable },
   setup() {
-    const getLocaleFormattedNumber = useGetLocaleFormattedNumber()
-    const providerStore = useProviderStore()
-    const imageProviders = computed(() => providerStore.providers.image)
-
-    return { getLocaleFormattedNumber, externalLinkIcon, imageProviders }
+    return { externalLinkIcon }
   },
-  computed: {
-    sortedProviders() {
-      const sorted = sortBy(this.imageProviders, [this.sort.field])
-      return this.sort.direction === 'asc' ? sorted : sorted.reverse()
-    },
-  },
-  methods: {
-    sortTable(field) {
-      let direction = 'asc'
-      if (field === this.sort.field) {
-        direction = this.sort.direction === 'asc' ? 'desc' : 'asc'
-      }
-
-      this.sort = { direction, field }
-    },
-    cleanSourceUrlForPresentation(url) {
-      const stripProtocol = (s) => s.replace(/https?:\/\//, '')
-      const stripLeadingWww = (s) =>
-        s.startsWith('www.') ? s.replace('www.', '') : s
-      const stripTrailingSlash = (s) => (s.endsWith('/') ? s.slice(0, -1) : s)
 
-      return stripTrailingSlash(stripLeadingWww(stripProtocol(url)))
-    },
-  },
   head() {
     return {
       title: `${this.$t('sources.title')} | Openverse`,
     }
   },
-}
-
-export default SourcePage
+})
 </script>
-
-<style scoped>
-.table {
-  table-layout: fixed;
-  width: 100%;
-}
-
-.table.is-bordered td {
-  word-break: break-all;
-}
-
-.button.is-primary {
-  font-size: 1.1875rem;
-  font-weight: 700;
-}
-.table.is-striped th {
-  cursor: pointer;
-}
-.table.is-striped svg {
-  margin-top: -4px;
-}
-
-.table.is-striped th:not(:first-child),
-.table.is-striped td:not(:first-child) {
-  @apply border border-dark-charcoal-06;
-}
-.table.is-striped td,
-.table.is-striped th {
-  word-break: initial;
-  border-bottom: none;
-  border-top: none;
-}
-.table.is-striped {
-  --table-border-radius: 2px;
-  /* The following are styles for rounding the table's corners */
-  border-collapse: separate;
-  border-radius: var(table-border-radius);
-}
-
-.table.is-striped th:first-child {
-  border-top-left-radius: var(--table-border-radius);
-}
-.table.is-striped th:last-child {
-  border-top-right-radius: var(--table-border-radius);
-}
-.table.is-striped tr:last-child td:first-child,
-.table.is-striped tr:last-child td:last-child {
-  border-bottom-left-radius: var(--table-border-radius);
-}
-</style>
diff --git a/src/styles/components/table.sass b/src/styles/components/table.sass
deleted file mode 100644
index f23ea65963..0000000000
--- a/src/styles/components/table.sass
+++ /dev/null
@@ -1,173 +0,0 @@
-@import "../utilities/mixins"
-
-$table-color: $color-dark-slate-gray
-$table-background-color: $scheme-main
-
-$table-cell-border-width: 0 0 1px
-$table-cell-padding: $space-normal
-$table-cell-heading-color: $text-strong
-$table-cell-border: 1px solid $color-light-gray
-
-$table-head-cell-border-width: 0 0 2px
-$table-head-cell-color: $text-strong
-$table-foot-cell-border-width: 2px 0 0
-$table-foot-cell-color: $text-strong
-
-$table-head-background-color: #F0F0F1
-$table-body-background-color: transparent
-$table-foot-background-color: transparent
-
-$table-row-hover-background-color: $color-white
-
-$table-row-active-background-color: $primary
-$table-row-active-color: $color-white
-
-$table-striped-row-even-background-color: #F6F7F7
-$table-striped-row-even-hover-background-color: #F6F7F7
-
-.table
-  +block
-  background-color: $table-background-color
-  color: $table-color
-  td,
-  th
-    border: $table-cell-border
-    border-width: $table-cell-border-width
-    padding: $table-cell-padding
-    vertical-align: top
-    // Modifiers
-    &.is-narrow
-      white-space: nowrap
-      width: 1%
-    &.is-selected
-      background-color: $table-row-active-background-color
-      color: $table-row-active-color
-      a,
-      strong
-        color: currentColor
-    &.is-vcentered
-      vertical-align: middle
-  th
-    color: $table-cell-heading-color
-    &:not([align])
-      text-align: inherit
-  tr
-    &.is-selected
-      background-color: $table-row-active-background-color
-      color: $table-row-active-color
-      a,
-      strong
-        color: currentColor
-      td,
-      th
-        border-color: $table-row-active-color
-        color: currentColor
-  thead
-    td,
-    th
-      border-width: $table-head-cell-border-width
-      color: $table-head-cell-color
-      background-color: $table-head-background-color
-  tfoot
-    background-color: $table-foot-background-color
-    td,
-    th
-      border-width: $table-foot-cell-border-width
-      color: $table-foot-cell-color
-  tbody
-    background-color: $table-body-background-color
-    tr
-      &:last-child
-        td,
-        th
-          border-bottom-width: 0
-  // Modifiers
-  &.is-bordered
-    td,
-    th
-      border-width: 1px
-    tr
-      &:last-child
-        td,
-        th
-          border-bottom-width: 1px
-  &.is-fullwidth
-    width: 100%
-  &.is-hoverable
-    tbody
-      tr:not(.is-selected)
-        &:hover
-          background-color: $table-row-hover-background-color
-    &.is-striped
-      tbody
-        tr:not(.is-selected)
-          &:hover
-            background-color: $table-row-hover-background-color
-            &:nth-child(even)
-              background-color: $table-striped-row-even-hover-background-color
-  &.is-narrow
-    td,
-    th
-      padding: 0.25em 0.5em
-  &.is-striped
-    tbody
-      tr:not(.is-selected)
-        &:nth-child(even)
-          background-color: $table-striped-row-even-background-color
-
-.table-container
-  +block
-  +overflow-touch
-  overflow: auto
-  overflow-y: hidden
-  max-width: 100%
-
-.number-cell
-  text-align: right !important
-
-.table
-  font-size: $font-size-body-normal
-  line-height: 1.5
-
-.is-responsive
-  @media only screen and (max-width: 760px), (min-device-width: $tablet) and (max-device-width: $desktop)
-    table,
-    thead,
-    tbody,
-    th,
-    td,
-    tr
-      display: block
-    thead tr
-      position: absolute
-      top: -9999px
-      left: -9999px
-    tr
-      margin-top: $space-normal
-    td
-      position: relative
-      text-align: left !important
-      padding-left: calc(45% + 1rem)
-      background-color: $color-white
-    td:nth-child(2n)
-      background-color: $color-lighter-gray
-    td:first-child
-      border-top-left-radius: $space-smaller
-      border-top-right-radius: $space-smaller
-    td:last-child
-      border-bottom-left-radius: $space-smaller
-      border-bottom-right-radius: $space-smaller
-    td:before
-      position: absolute
-      top: 0
-      left: 0
-      font-size: $font-size-body-normal
-      font-weight: bold
-      line-height: 1.5
-      height: 100%
-      width: 45%
-      padding: $space-normal
-      background-color: $color-light-gray
-      border-right: 0.0625rem solid $color-light-gray
-    td:nth-of-type(n):before
-      content: attr(data-label)
diff --git a/src/styles/vocabulary.scss b/src/styles/vocabulary.scss
index 134ad45b7d..ee5e27c338 100644
--- a/src/styles/vocabulary.scss
+++ b/src/styles/vocabulary.scss
@@ -19,5 +19,4 @@
 @import 'components/image';
 @import 'components/navbar';
 @import 'components/card';
-@import 'components/table';
 @import 'components/content';
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-2xl-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-2xl-linux.png
index 23d04d1cf6..0d9a882986 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-2xl-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-2xl-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-lg-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-lg-linux.png
index a07c47ca50..fffc04efbc 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-lg-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-lg-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-md-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-md-linux.png
index 4f5817f83f..46381465da 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-md-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-md-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-sm-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-sm-linux.png
index ea4d7a1042..2a712270bd 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-sm-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-sm-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-xl-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-xl-linux.png
index 6a0209782d..0ae44d3620 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-xl-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-xl-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-xs-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-xs-linux.png
index c009fd04f9..39bf8c862b 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-xs-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-ltr-xs-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-2xl-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-2xl-linux.png
index 815361a057..7f249299cd 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-2xl-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-2xl-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-lg-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-lg-linux.png
index 46ecf8fe89..ba1774312c 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-lg-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-lg-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-md-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-md-linux.png
index 8e71de233e..ccb6f9de6c 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-md-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-md-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-sm-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-sm-linux.png
index e8d3f93fac..96ea0e52a9 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-sm-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-sm-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-xl-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-xl-linux.png
index 75947c96aa..035306ba8e 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-xl-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-xl-linux.png differ
diff --git a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-xs-linux.png b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-xs-linux.png
index 044c1d2556..0c23f3cf57 100644
Binary files a/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-xs-linux.png and b/test/playwright/visual-regression/sources.spec.ts-snapshots/sources-rtl-xs-linux.png differ
diff --git a/tsconfig.json b/tsconfig.json
index e3be362e7a..8d9ef9dbf0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -58,6 +58,9 @@
     "src/components/VGlobalAudioSection/VGlobalAudioSection.vue",
     "src/components/VInputField/VInputField.vue",
     "src/components/VHeader/VSearchBar/VSearchBar.vue",
+    "src/components/VAudioTrack/VPlayPause.vue",
+    "src/components/VSourcesTable.vue",
+    "src/components/TableSortIcon.vue",
     "src/pages/search-help.vue",
     "src/composables/types.js",
     "src/composables/use-event-listener-outside.js",