diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index e43f6dd2ed..2c8288e068 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,7 +1,7 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-labels: "🛠 goal: fix, 🚦 status: awaiting triage, 💻 aspect: code, 🟧 priority: high"
+labels: "🛠 goal: fix, 🚦 status: awaiting triage"
 title: "<Replace this with actual title>"
 ---
 
diff --git a/package.json b/package.json
index 4d8fa3bac6..55455b216e 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@pinia/nuxt": "^0.1.8",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/line-clamp": "^0.3.1",
+    "@tailwindcss/typography": "^0.5.2",
     "@wordpress/is-shallow-equal": "^4.3.1",
     "axios": "^0.26.1",
     "axios-mock-adapter": "^1.20.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 158fe472d1..e8ce1c229b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,7 @@ specifiers:
   '@playwright/test': ^1.16.2
   '@popperjs/core': ^2.11.2
   '@tailwindcss/line-clamp': ^0.3.1
+  '@tailwindcss/typography': ^0.5.2
   '@testing-library/jest-dom': ^5.16.1
   '@testing-library/user-event': ^13.2.1
   '@testing-library/vue': ^5.8.2
@@ -107,6 +108,7 @@ dependencies:
   '@pinia/nuxt': 0.1.8_pinia@2.0.11
   '@popperjs/core': 2.11.2
   '@tailwindcss/line-clamp': 0.3.1_tailwindcss@3.0.9
+  '@tailwindcss/typography': 0.5.2_tailwindcss@3.0.9
   '@wordpress/is-shallow-equal': 4.3.1
   axios: 0.26.1
   axios-mock-adapter: 1.20.0_axios@0.26.1
@@ -5153,6 +5155,17 @@ packages:
       tailwindcss: 3.0.9_83bd3ad464991683de41d4aadec5fede
     dev: false
 
+  /@tailwindcss/typography/0.5.2_tailwindcss@3.0.9:
+    resolution: {integrity: sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      tailwindcss: 3.0.9_83bd3ad464991683de41d4aadec5fede
+    dev: false
+
   /@testing-library/dom/7.31.2:
     resolution: {integrity: sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==}
     engines: {node: '>=10'}
@@ -12350,6 +12363,10 @@ packages:
   /lodash._reinterpolate/3.0.0:
     resolution: {integrity: sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=}
 
+  /lodash.castarray/4.4.0:
+    resolution: {integrity: sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=}
+    dev: false
+
   /lodash.clonedeep/4.5.0:
     resolution: {integrity: sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=}
     dev: false
@@ -12361,6 +12378,10 @@ packages:
     resolution: {integrity: sha1-b4bL7di+TsmHvpqvM8loTbGzHn4=}
     dev: false
 
+  /lodash.isplainobject/4.0.6:
+    resolution: {integrity: sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=}
+    dev: false
+
   /lodash.kebabcase/4.1.1:
     resolution: {integrity: sha1-hImxyw0p/4gZXM7KRI/21swpXDY=}
     dev: false
diff --git a/src/components/VButton.vue b/src/components/VButton.vue
index 1f2da3556f..7abcbc1d42 100644
--- a/src/components/VButton.vue
+++ b/src/components/VButton.vue
@@ -252,7 +252,7 @@ export default VButton
 }
 
 a.button {
-  @apply no-underline;
+  @apply no-underline hover:no-underline;
 }
 
 .primary {
diff --git a/src/components/VContentPage.vue b/src/components/VContentPage.vue
new file mode 100644
index 0000000000..00477ed79b
--- /dev/null
+++ b/src/components/VContentPage.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="pt-5 md:pt-10" dir="ltr">
+    <div
+      class="px-6 lg:px-0 mb-10 lg:mb-30 md:max-w-4xl xl:max-w-5xl prose prose-sm md:prose-base mx-auto max-w-none prose-headings:font-bold lg:prose-headings:text-3xl prose-h1:text-4xl prose-h1:text-bold lg:prose-h1:text-6xl md:prose-h1:mb-10 prose-h3:text-2xl prose-h3:font-semibold md:prose-h3:mt-10"
+    >
+      <slot default />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  name: 'VContentPage',
+})
+</script>
diff --git a/src/composables/use-fetch-state.ts b/src/composables/use-fetch-state.ts
new file mode 100644
index 0000000000..92e78adc27
--- /dev/null
+++ b/src/composables/use-fetch-state.ts
@@ -0,0 +1,112 @@
+import { computed, reactive, Ref, ref, watch } from '@nuxtjs/composition-api'
+
+export interface FetchState {
+  isFetching: boolean
+  fetchingError: null | string
+  canFetch?: boolean
+  hasStarted?: boolean
+  isFinished?: boolean
+}
+
+/* Constants */
+
+/**
+ * Statuses of requests:
+ * - `idle`: the current request has never been sent yet, for example,
+ * on the first app load, or after a change in search filters or search term.
+ * - `fetching`: the request was sent, but no response was received yet.
+ * - `success`: a successful response was received for the current request.
+ * - `finished`: for multi-page requests, this is true when no more pages are left.
+ * - `error`: an error response was received.
+ */
+const statuses = Object.freeze({
+  IDLE: 'idle',
+  FETCHING: 'fetching',
+  SUCCESS: 'success',
+  ERROR: 'error',
+  FINISHED: 'finished',
+} as const)
+
+type Status = typeof statuses[keyof typeof statuses]
+/**
+ * When one of these statuses is received, the fetchError is set to `null` in a watcher.
+ */
+const nonErrorStatuses: Status[] = [
+  statuses.IDLE,
+  statuses.FETCHING,
+  statuses.SUCCESS,
+]
+/**
+ * With these statuses, it is possible to send the same request for a new page.
+ * This can help debounce requests and prevent racing states.
+ */
+const canFetchStatuses: Status[] = [statuses.IDLE, statuses.SUCCESS]
+
+/* Composable */
+
+export const useFetchState = (initialState = statuses.IDLE) => {
+  const fetchStatus: Ref<Status> = ref(initialState)
+  const fetchError: Ref<string | null> = ref(null)
+
+  watch(fetchStatus, () => {
+    if (nonErrorStatuses.includes(fetchStatus.value)) {
+      fetchError.value = null
+    }
+  })
+  const reset = () => {
+    fetchStatus.value = statuses.IDLE
+  }
+  const startFetching = () => {
+    fetchStatus.value = statuses.FETCHING
+  }
+  /**
+   * Called when any response is received. For an error response,
+   * pass the errorMessage string as a parameter.
+   * @param errorMessage - the message to show for response error.
+   */
+  const endFetching = (errorMessage?: string) => {
+    if (errorMessage) {
+      fetchStatus.value = statuses.ERROR
+      fetchError.value = errorMessage
+    } else {
+      fetchStatus.value = statuses.SUCCESS
+    }
+  }
+  const setFinished = () => {
+    fetchStatus.value = statuses.FINISHED
+  }
+
+  /**
+   * Whether the current request has been sent. This can be useful for displaying
+   * initial search page with a blank search term, such as for a provider search page.
+   */
+  const hasStarted = computed(() => fetchStatus.value !== statuses.IDLE)
+  const isFetching = computed(() => fetchStatus.value === statuses.FETCHING)
+  /**
+   * Whether a new request for the same parameters with a new page can be sent.
+   * Use this to ensure that prevent racing requests.
+   */
+  const canFetch = computed(() => canFetchStatuses.includes(fetchStatus.value))
+  /**
+   * Used for paginated requests, `isFinished` means there are no more pages left.
+   */
+  const isFinished = computed(() => fetchStatus.value === statuses.FINISHED)
+  const fetchingError = computed(() => fetchError.value)
+
+  const fetchState: FetchState = reactive({
+    hasStarted,
+    isFetching,
+    canFetch,
+    isFinished,
+    fetchingError,
+  })
+
+  return {
+    fetchState,
+
+    startFetching,
+    endFetching,
+    setFinished,
+    reset,
+  }
+}
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index 01a8c7de6d..ac268854c2 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-03-22T20:55:19+00:00\n"
+"POT-Creation-Date: 2022-03-23T10:00:02+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -263,7 +263,7 @@ msgid "###openverse### does not yet support built-in ###type### search."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:44
+#: src/pages/meta-search.vue:41
 msgctxt "meta-search.form.supported-title"
 msgid "Not finding what you're looking for? Try additional ###type### sources."
 msgstr ""
@@ -1132,13 +1132,13 @@ msgctxt "extension.description.intro"
 msgid "A browser extension that lets you search and use open-licensed and public domain images."
 msgstr ""
 
-#: src/pages/feedback.vue:6
+#: src/pages/feedback.vue:4
 msgctxt "feedback.title"
 msgid "Feedback"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/feedback.vue:8
+#: src/pages/feedback.vue:6
 msgctxt "feedback.intro"
 msgid "Thank you for using ###openverse###! We welcome your ideas for improving the tool below. To provide regular feedback, join the ###slack### channel in the ###making-wordpress### Slack workspace."
 msgstr ""
@@ -1151,7 +1151,7 @@ msgctxt "feedback.report"
 msgid "Report a Bug"
 msgstr ""
 
-#: src/pages/feedback.vue:54
+#: src/pages/feedback.vue:48
 msgctxt "feedback.loading"
 msgid "Loading..."
 msgstr ""
@@ -1169,72 +1169,72 @@ msgid "report a bug form"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:6
+#: src/pages/search-help.vue:4
 msgctxt "search-guide.title"
 msgid "###openverse### Syntax Guide"
 msgstr ""
 
-#: src/pages/search-help.vue:9
+#: src/pages/search-help.vue:7
 msgctxt "search-guide.intro"
 msgid "When you search, you can enter special symbols or words to your search term to make your search results more precise."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:217
+#: src/pages/search-help.vue:177
 msgctxt "search-guide.example.fuzziness.description"
 msgid "You can use ###highlight### to specify some fuzzy logic to the term according to the ###link### — the number of one character changes that need to be made to one string to make it the same as another string."
 msgstr ""
 
-#: src/pages/search-help.vue:227
+#: src/pages/search-help.vue:183
 msgctxt "search-guide.example.fuzziness.link-text"
 msgid "Levenshtein Edit Distance"
 msgstr ""
 
-#: src/pages/search-help.vue:239
+#: src/pages/search-help.vue:191
 msgctxt "search-guide.example.fuzziness.aria-label"
 msgid "theatre tilde 1"
 msgstr ""
 
-#: src/pages/search-help.vue:242
+#: src/pages/search-help.vue:194
 msgctxt "search-guide.example.fuzziness.example"
 msgid "theatre~1"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:232
+#: src/pages/search-help.vue:188
 msgctxt "search-guide.example.fuzziness.content"
 msgid "Example: ###link######br### This will search for images that match strings close to the term 'theatre' with a difference of one character. Results might include terms with different spellings like 'theater'."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:189
+#: src/pages/search-help.vue:157
 msgctxt "search-guide.example.precedence.description"
 msgid "You can use parentheses ###highlight### to specify precedence of terms or combine more complex queries."
 msgstr ""
 
-#: src/pages/search-help.vue:206
+#: src/pages/search-help.vue:166
 msgctxt "search-guide.example.precedence.aria-label"
 msgid "dogs plus open parenthesis corgis vertical bar labrador close parenthesis"
 msgstr ""
 
-#: src/pages/search-help.vue:209
+#: src/pages/search-help.vue:169
 msgctxt "search-guide.example.precedence.example"
 msgid "dogs + (corgis | labrador)"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:199
+#: src/pages/search-help.vue:163
 msgctxt "search-guide.example.precedence.content"
 msgid "Example: ###link######br### This will search for images that match dogs that are either corgis or labrador."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:163
+#: src/pages/search-help.vue:135
 msgctxt "search-guide.example.prefix.description"
 msgid "You can use the ###operator-name### to mark a prefix term. This will match anything after the *."
 msgstr ""
 
-#: src/pages/search-help.vue:170
+#: src/pages/search-help.vue:138
 msgctxt "search-guide.example.prefix.operator-name"
 msgid "operator (wildcard)"
 msgstr ""
@@ -1243,50 +1243,50 @@ msgctxt "search-guide.example.prefix.operator-aria-label"
 msgid "star operator (wildcard)"
 msgstr ""
 
-#: src/pages/search-help.vue:169
+#: src/pages/search-help.vue:137
 msgctxt "search-guide.example.prefix.aria-label"
 msgid "net star symbol"
 msgstr ""
 
-#: src/pages/search-help.vue:181
+#: src/pages/search-help.vue:149
 msgctxt "search-guide.example.prefix.example"
 msgid "net*"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:175
+#: src/pages/search-help.vue:143
 msgctxt "search-guide.example.prefix.content"
 msgid "Example: ###link######br### This will search for images matching anything with 'net'. This might include 'network', 'Netflix', 'Netherlands', etc.."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:134
+#: src/pages/search-help.vue:113
 msgctxt "search-guide.example.negate.description"
 msgid "You can use the ###operator### to exclude a search term from the results."
 msgstr ""
 
-#: src/pages/search-help.vue:144
+#: src/pages/search-help.vue:116
 msgctxt "search-guide.example.negate.operator-name"
 msgid "operator (signifies NOT)"
 msgstr ""
 
-#: src/pages/search-help.vue:142
+#: src/pages/search-help.vue:115
 msgctxt "search-guide.example.negate.operator-aria-label"
 msgid "minus operator (signifies NOT)"
 msgstr ""
 
-#: src/pages/search-help.vue:152
+#: src/pages/search-help.vue:124
 msgctxt "search-guide.example.negate.aria-label"
 msgid "dog minus pug"
 msgstr ""
 
-#: src/pages/search-help.vue:155
+#: src/pages/search-help.vue:127
 msgctxt "search-guide.example.negate.example"
 msgid "dog -pug"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:149
+#: src/pages/search-help.vue:121
 msgctxt "search-guide.example.negate.content"
 msgid "Example: ###link######br### This will search for images related to dog but won't include results related to 'pug'"
 msgstr ""
@@ -1296,282 +1296,282 @@ msgctxt "search-guide.example.or.description"
 msgid "Example: ###link######br### This will search for images related to dog or cat, but not necessarily both."
 msgstr ""
 
-#: src/pages/search-help.vue:123
+#: src/pages/search-help.vue:102
 msgctxt "search-guide.example.or.aria-label"
 msgid "dog vertical bar cat"
 msgstr ""
 
-#: src/pages/search-help.vue:126
+#: src/pages/search-help.vue:105
 msgctxt "search-guide.example.or.example"
 msgid "dog|cat"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:106
+#: src/pages/search-help.vue:85
 msgctxt "search-guide.example.and.description"
 msgid "Example: ###link######br### This will search for images related to both dog and cat."
 msgstr ""
 
-#: src/pages/search-help.vue:109
+#: src/pages/search-help.vue:88
 msgctxt "search-guide.example.and.aria-label"
 msgid "dog plus cat"
 msgstr ""
 
-#: src/pages/search-help.vue:112
+#: src/pages/search-help.vue:91
 msgctxt "search-guide.example.and.example"
 msgid "dog+cat"
 msgstr ""
 
-#: src/pages/search-help.vue:29
+#: src/pages/search-help.vue:27
 msgctxt "search-guide.combine.title"
 msgid "Combining terms"
 msgstr ""
 
-#: src/pages/search-help.vue:33
+#: src/pages/search-help.vue:31
 msgctxt "search-guide.combine.description"
 msgid "If you want to combine terms, you can use the following operators to perform more complex queries"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:36
+#: src/pages/search-help.vue:34
 msgctxt "search-guide.combine.and"
 msgid "###symbol### signifies AND operation"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:46
+#: src/pages/search-help.vue:42
 msgctxt "search-guide.combine.or"
 msgid "###symbol### signifies OR operation"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:57
+#: src/pages/search-help.vue:50
 msgctxt "search-guide.combine.negate"
 msgid "###symbol### negates a single token"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:66
+#: src/pages/search-help.vue:57
 msgctxt "search-guide.combine.prefix"
 msgid "###symbol### at the end of a term signifies a prefix query"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:75
+#: src/pages/search-help.vue:64
 msgctxt "search-guide.combine.precedence"
 msgid "###open### and ###close### signify precedence"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:95
+#: src/pages/search-help.vue:76
 msgctxt "search-guide.combine.fuzziness"
 msgid "###symbol### after a word signifies edit distance (fuzziness)"
 msgstr ""
 
-#: src/pages/search-help.vue:98
+#: src/pages/search-help.vue:78
 msgctxt "search-guide.combine.aria-labels.fuzziness"
 msgid "tilde N"
 msgstr ""
 
-#: src/pages/search-help.vue:82
+#: src/pages/search-help.vue:66
 msgctxt "search-guide.combine.aria-labels.open"
 msgid "open parenthesis"
 msgstr ""
 
-#: src/pages/search-help.vue:89
+#: src/pages/search-help.vue:71
 msgctxt "search-guide.combine.aria-labels.close"
 msgid "close parenthesis"
 msgstr ""
 
-#: src/pages/search-help.vue:69
+#: src/pages/search-help.vue:59
 msgctxt "search-guide.combine.aria-labels.star"
 msgid "star symbol"
 msgstr ""
 
-#: src/pages/search-help.vue:60
+#: src/pages/search-help.vue:52
 msgctxt "search-guide.combine.aria-labels.minus"
 msgid "minus symbol"
 msgstr ""
 
-#: src/pages/search-help.vue:40
+#: src/pages/search-help.vue:37
 msgctxt "search-guide.combine.aria-labels.plus"
 msgid "plus symbol"
 msgstr ""
 
-#: src/pages/search-help.vue:50
+#: src/pages/search-help.vue:45
 msgctxt "search-guide.combine.aria-labels.vertical-bar"
 msgid "vertical bar symbol"
 msgstr ""
 
-#: src/pages/search-help.vue:13
+#: src/pages/search-help.vue:11
 msgctxt "search-guide.exact.title"
 msgid "Search for an exact match"
 msgstr ""
 
-#: src/pages/search-help.vue:19
+#: src/pages/search-help.vue:17
 msgctxt "search-guide.exact.aria-label"
 msgid "quote unquote Claude Monet"
 msgstr ""
 
-#: src/pages/search-help.vue:22
+#: src/pages/search-help.vue:20
 msgctxt "search-guide.exact.claude-monet"
 msgid "\"Claude Monet\""
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/search-help.vue:15
+#: src/pages/search-help.vue:13
 msgctxt "search-guide.exact.content"
 msgid "Put a word or phrase inside quotes. For example, ###link###."
 msgstr ""
 
-#: src/pages/meta-search.vue:6
+#: src/pages/meta-search.vue:4
 msgctxt "meta-search-page.title"
 msgid "Meta Search"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:10
+#: src/pages/meta-search.vue:7
 msgctxt "meta-search-page.intro"
 msgid "###openverse### is built on top of a catalog that indexes CC-licensed and public domain content from selected sources. Learn more about our ###link###."
 msgstr ""
 
-#: src/pages/meta-search.vue:14
+#: src/pages/meta-search.vue:11
 msgctxt "meta-search-page.link"
 msgid "sources"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:17
+#: src/pages/meta-search.vue:14
 msgctxt "meta-search-page.license"
 msgid "The internet is a big place! There are plenty of search portals and collections, hosting CC-licensed and public domain content, which we aren’t able to index or surface results from within the ###openverse### interface. These are important sources of CC-licensed and public domain content, and we want to make sure that you are able to find the best openly licensed materials possible, regardless of where they are located."
 msgstr ""
 
-#: src/pages/meta-search.vue:19
+#: src/pages/meta-search.vue:16
 msgctxt "meta-search-page.content"
 msgid "What content types can I search for using the Meta Search feature?"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:22
+#: src/pages/meta-search.vue:19
 msgctxt "meta-search-page.content-types"
 msgid "Meta Search on ###openverse### currently supports image, audio, and video search on external sites."
 msgstr ""
 
-#: src/pages/meta-search.vue:53
+#: src/pages/meta-search.vue:50
 msgctxt "meta-search-page.use"
 msgid " Use "
 msgstr ""
 
-#: src/pages/meta-search.vue:107
+#: src/pages/meta-search.vue:104
 msgctxt "meta-search-page.why.title"
 msgid "Why did you build this?"
 msgstr ""
 
-#: src/pages/meta-search.vue:109
+#: src/pages/meta-search.vue:106
 msgctxt "meta-search-page.why.content"
 msgid "For many years, CC has offered its users a dedicated search portal for searching platforms that have CC licensing filters built in. These platforms included Europeana, Google Images, Flickr, Jamendo, Open Clip Art Library, SpinXpress, Wikimedia Commons, YouTube, ccMixter, and SoundCloud. The search experience looked like this:"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:111
+#: src/pages/meta-search.vue:108
 msgctxt "meta-search-page.why.new"
 msgid "For users of the legacy CC Meta Search site, the Meta Search feature on ###openverse### will look familiar. The goal was to ensure that the functionality is not lost, but is updated and embedded within our new search engine for openly licensed content. In addition, the Meta Search feature builds on this functionality, allowing us to quickly add new sources to Meta Search as we discover them, and support new content types in the future, as we expand."
 msgstr ""
 
-#: src/pages/meta-search.vue:116
+#: src/pages/meta-search.vue:113
 msgctxt "meta-search-page.why.aria-label"
 msgid "feedback"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:113
+#: src/pages/meta-search.vue:110
 msgctxt "meta-search-page.why.feedback-suggestions"
 msgid "We hope you enjoy, and if you have suggestions for improvement, leave us ###feedback###."
 msgstr ""
 
-#: src/pages/meta-search.vue:118
+#: src/pages/meta-search.vue:115
 msgctxt "meta-search-page.why.feedback-link"
 msgid "feedback"
 msgstr ""
 
-#: src/pages/meta-search.vue:90
+#: src/pages/meta-search.vue:87
 msgctxt "meta-search-page.new.title"
 msgid "Can I suggest new sources for Meta Search?"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:92
+#: src/pages/meta-search.vue:89
 msgctxt "meta-search-page.new.content"
 msgid "Yes, please! Create an ###issue### in our GitHub repository or send us an ###email### and tell us about the new sources you’d like to see included."
 msgstr ""
 
-#: src/pages/meta-search.vue:97
+#: src/pages/meta-search.vue:94
 msgctxt "meta-search-page.new.issue"
 msgid "issue"
 msgstr ""
 
-#: src/pages/meta-search.vue:102
+#: src/pages/meta-search.vue:99
 msgctxt "meta-search-page.new.email"
 msgid "email"
 msgstr ""
 
-#: src/pages/meta-search.vue:70
+#: src/pages/meta-search.vue:67
 msgctxt "meta-search-page.audio-video.title"
 msgid "How does the Meta Search feature work for non-indexed media types?"
 msgstr ""
 
-#: src/pages/meta-search.vue:84
+#: src/pages/meta-search.vue:81
 msgctxt "meta-search-page.audio-video.demo-label"
 msgid "Layout of Meta Search for non-indexed media type, like video"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:74
+#: src/pages/meta-search.vue:71
 msgctxt "meta-search-page.audio-video.content"
 msgid "###openverse### does not yet support built-in search for some media types, such as videos. For these media types, click on the appropriate tab and you’ll see sources where you can find CC-licensed content."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:77
+#: src/pages/meta-search.vue:74
 msgctxt "meta-search-page.audio-video.filter"
 msgid "The Filters bar on the left includes the ###use### filter, which may be supported by some meta search sources. Apply these before clicking on the button for the external source you’d like to search."
 msgstr ""
 
-#: src/pages/meta-search.vue:26
+#: src/pages/meta-search.vue:23
 msgctxt "meta-search-page.images.title"
 msgid "How does the Meta Search feature work for indexed media types?"
 msgstr ""
 
-#: src/pages/meta-search.vue:63
+#: src/pages/meta-search.vue:60
 msgctxt "meta-search-page.images.demo-label"
 msgid "Layout of Meta Search for indexed media type, like images"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:29
+#: src/pages/meta-search.vue:26
 msgctxt "meta-search-page.images.content"
 msgid "###openverse### supports built-in search for some media types, such as images. When you enter a query on the ###openverse### homepage, a page of results will be displayed. Scrolling to the bottom of the page, you have two choices:"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:34
+#: src/pages/meta-search.vue:31
 msgctxt "meta-search-page.images.continue"
 msgid "###load-more###, and continue browsing in ###openverse###."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:41
+#: src/pages/meta-search.vue:38
 msgctxt "meta-search-page.images.not-finding"
 msgid "See the section “###not-finding###” below the results."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/meta-search.vue:51
+#: src/pages/meta-search.vue:48
 msgctxt "meta-search-page.images.info"
 msgid "The “###not-finding###” section lists other sources of CC-licensed and public domain content. Your search query will be preloaded, and if supported, you can select a ###use### filter to proactively filter your results. Click on the button for the external source you’d like to search, and your results will open in a new tab."
 msgstr ""
 
-#: src/pages/sources.vue:6
+#: src/pages/sources.vue:4
 msgctxt "sources.title"
 msgid "Sources"
 msgstr ""
@@ -1587,160 +1587,160 @@ msgctxt "sources.single-name"
 msgid "Source"
 msgstr ""
 
-#: src/pages/sources.vue:63
+#: src/pages/sources.vue:57
 msgctxt "sources.suggestions"
 msgid "We appreciate suggestions for new sources from our community of users."
 msgstr ""
 
-#: src/pages/sources.vue:69
+#: src/pages/sources.vue:68
 msgctxt "sources.issue-button"
 msgid "Suggest a new source"
 msgstr ""
 
-#: src/pages/sources.vue:81
+#: src/pages/sources.vue:82
 msgctxt "sources.aria.table"
 msgid "sources table"
 msgstr ""
 
-#: src/pages/sources.vue:42
+#: src/pages/sources.vue:39
 msgctxt "sources.new-content.next"
 msgid "How do we decide what sources to add next?"
 msgstr ""
 
-#: src/pages/sources.vue:45
+#: src/pages/sources.vue:42
 msgctxt "sources.new-content.integrate"
 msgid "We have a never ending list of possible sources to research prior to integration. We ask ourselves questions like:"
 msgstr ""
 
-#: src/pages/sources.vue:50
+#: src/pages/sources.vue:46
 msgctxt "sources.new-content.impact"
 msgid " What is the impact or importance of this source to our users? If it exists within a provider like Wikimedia Commons, is it valuable for our users to be able to filter by this source directly?"
 msgstr ""
 
-#: src/pages/sources.vue:53
+#: src/pages/sources.vue:49
 msgctxt "sources.new-content.reuse"
 msgid "Is licensing and attribution information clearly displayed to enable confident reuse?"
 msgstr ""
 
-#: src/pages/sources.vue:56
+#: src/pages/sources.vue:52
 msgctxt "sources.new-content.total-items"
 msgid "How many new total items or new types of items can we bring to our users through this integration? Some sources are direct integrations, while others may be a source within a source."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/sources.vue:10
+#: src/pages/sources.vue:8
 msgctxt "sources.cc-content.where"
 msgid "Where does the content on ###openverse### come from?"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/sources.vue:13
+#: src/pages/sources.vue:11
 msgctxt "sources.cc-content.content"
 msgid "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###."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/sources.vue:15
+#: 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."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/sources.vue:26
+#: src/pages/sources.vue:24
 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###."
 msgstr ""
 
-#: src/pages/sources.vue:35
+#: src/pages/sources.vue:33
 msgctxt "sources.cc-content.europeana-api"
 msgid "Europeana API"
 msgstr ""
 
-#: src/pages/sources.vue:22
+#: src/pages/sources.vue:20
 msgctxt "sources.cc-content.smithsonian"
 msgid "Smithsonian Institute"
 msgstr ""
 
-#: src/pages/sources.vue:93
+#: src/pages/sources.vue:94
 msgctxt "sources.providers.source"
 msgid "Source"
 msgstr ""
 
-#: src/pages/sources.vue:103
+#: src/pages/sources.vue:104
 msgctxt "sources.providers.domain"
 msgid "Domain"
 msgstr ""
 
-#: src/pages/sources.vue:113
+#: src/pages/sources.vue:114
 msgctxt "sources.providers.item"
 msgid "Total items"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/about.vue:6
+#: src/pages/about.vue:4
 msgctxt "about.title"
 msgid "About ###openverse###"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/about.vue:73
+#: src/pages/about.vue:69
 msgctxt "about.declaration.content"
 msgid "Please note that ###openverse### does not verify whether the images are properly CC licensed, or whether the attribution and other licensing information we have aggregated is accurate or complete. Please independently verify the licensing status and attribution information before reusing the content. For more details, read the ###terms###."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/about.vue:78
+#: src/pages/about.vue:74
 msgctxt "about.declaration.terms"
 msgid "###openverse### Terms of Use"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/about.vue:56
+#: src/pages/about.vue:53
 msgctxt "about.transfer.content"
 msgid "###openverse### is the successor to CC Search which was launched by Creative Commons in 2019, after its migration to WordPress in 2021. You can read more about this transition in the official announcements from ###creative-commons### and ###wordpress###. We remain committed to our goal of tackling discoverability and accessibility of open access media."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/about.vue:22
+#: src/pages/about.vue:19
 msgctxt "about.planning.content"
 msgid "Currently ###openverse### only searches images, with search for audio and video provided through ###meta###. But we plan to add additional media types such as open texts and audio, with the ultimate goal of providing access to all 1.4 billion CC licensed and public domain works on the web. All of our code is open source (###search###, ###api###, ###catalog###) and we ###community###. You can see what ###working###."
 msgstr ""
 
-#: src/pages/about.vue:26
+#: src/pages/about.vue:23
 msgctxt "about.planning.meta"
 msgid "Meta Search"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/about.vue:35
+#: src/pages/about.vue:32
 msgctxt "about.planning.api"
 msgid "###openverse### API"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/about.vue:40
+#: src/pages/about.vue:37
 msgctxt "about.planning.catalog"
 msgid "###openverse### Catalog"
 msgstr ""
 
-#: src/pages/about.vue:45
+#: src/pages/about.vue:42
 msgctxt "about.planning.community"
 msgid "welcome community contribution"
 msgstr ""
 
-#: src/pages/about.vue:50
+#: src/pages/about.vue:47
 msgctxt "about.planning.working"
 msgid "we’re currently working on"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/about.vue:13
+#: src/pages/about.vue:10
 msgctxt "about.collection.content"
 msgid "###openverse### searches across more than 300 million images from open APIs and the ###common-crawl### dataset. It goes beyond simple search to aggregate results across multiple public repositories into a single catalog, and facilitates reuse through features like machine-generated tags and one-click attribution."
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/pages/about.vue:10
+#: src/pages/about.vue:7
 msgctxt "about.description.content"
 msgid "###openverse### is a tool that allows openly licensed and public domain works to be discovered and used by everyone."
 msgstr ""
diff --git a/src/pages/about.vue b/src/pages/about.vue
index c4c3e6b404..af860dc986 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -1,98 +1,92 @@
 <template>
-  <div class="section" dir="ltr">
-    <div class="container">
-      <div>
-        <h1 class="text-5xl mb-10">
-          {{ $t('about.title', { openverse: 'Openverse' }) }}
-        </h1>
-        <div class="content">
-          <p>
-            {{ $t('about.description.content', { openverse: 'Openverse' }) }}
-          </p>
+  <VContentPage>
+    <h1>
+      {{ $t('about.title', { openverse: 'Openverse' }) }}
+    </h1>
+    <p>
+      {{ $t('about.description.content', { openverse: 'Openverse' }) }}
+    </p>
 
-          <i18n path="about.collection.content" tag="p">
-            <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-            <template #openverse>Openverse</template>
-            <template #common-crawl>
-              <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-              <VLink href="https://commoncrawl.org/">Common Crawl</VLink>
-            </template>
-          </i18n>
+    <i18n path="about.collection.content" tag="p">
+      <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+      <template #openverse>Openverse</template>
+      <template #common-crawl>
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <VLink href="https://commoncrawl.org/">Common Crawl</VLink>
+      </template>
+    </i18n>
 
-          <i18n path="about.planning.content" tag="p">
-            <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-            <template #openverse>Openverse</template>
-            <template #meta>
-              <VLink href="/meta-search">{{ $t('about.planning.meta') }}</VLink>
-            </template>
-            <template #search>
-              <VLink href="https://github.com/wordpress/openverse-frontend/">{{
-                $t('about.planning.meta')
-              }}</VLink>
-            </template>
-            <template #api>
-              <VLink href="https://github.com/wordpress/openverse-api/">{{
-                $t('about.planning.api', { openverse: 'Openverse' })
-              }}</VLink>
-            </template>
-            <template #catalog>
-              <VLink href="https://github.com/wordpress/openverse-catalog/">{{
-                $t('about.planning.catalog', { openverse: 'Openverse' })
-              }}</VLink>
-            </template>
-            <template #community>
-              <VLink href="https://make.wordpress.org/openverse/">{{
-                $t('about.planning.community')
-              }}</VLink>
-            </template>
-            <template #working>
-              <VLink href="https://github.com/orgs/WordPress/projects/3">{{
-                $t('about.planning.working')
-              }}</VLink>
-            </template>
-          </i18n>
+    <i18n path="about.planning.content" tag="p">
+      <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+      <template #openverse>Openverse</template>
+      <template #meta>
+        <VLink href="/meta-search">{{ $t('about.planning.meta') }}</VLink>
+      </template>
+      <template #search>
+        <VLink href="https://github.com/wordpress/openverse-frontend/">{{
+          $t('about.planning.meta')
+        }}</VLink>
+      </template>
+      <template #api>
+        <VLink href="https://github.com/wordpress/openverse-api/">{{
+          $t('about.planning.api', { openverse: 'Openverse' })
+        }}</VLink>
+      </template>
+      <template #catalog>
+        <VLink href="https://github.com/wordpress/openverse-catalog/">{{
+          $t('about.planning.catalog', { openverse: 'Openverse' })
+        }}</VLink>
+      </template>
+      <template #community>
+        <VLink href="https://make.wordpress.org/openverse/">{{
+          $t('about.planning.community')
+        }}</VLink>
+      </template>
+      <template #working>
+        <VLink href="https://github.com/orgs/WordPress/projects/3">{{
+          $t('about.planning.working')
+        }}</VLink>
+      </template>
+    </i18n>
 
-          <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-          <i18n path="about.transfer.content" tag="p">
-            <template #openverse>Openverse</template>
-            <template #creative-commons>
-              <VLink
-                href="https://creativecommons.org/2021/05/03/cc-search-to-join-wordpress/"
-                >Creative Commons</VLink
-              >
-            </template>
-            <template #wordpress>
-              <VLink
-                href="https://ma.tt/2021/04/cc-search-to-join-wordpress-org/"
-                >WordPress</VLink
-              >
-            </template>
-          </i18n>
-          <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+    <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+    <i18n path="about.transfer.content" tag="p">
+      <template #openverse>Openverse</template>
+      <template #creative-commons>
+        <VLink
+          href="https://creativecommons.org/2021/05/03/cc-search-to-join-wordpress/"
+          >Creative Commons</VLink
+        >
+      </template>
+      <template #wordpress>
+        <VLink href="https://ma.tt/2021/04/cc-search-to-join-wordpress-org/"
+          >WordPress</VLink
+        >
+      </template>
+    </i18n>
+    <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
 
-          <i18n path="about.declaration.content" tag="p">
-            <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-            <template #openverse>Openverse</template>
-            <template #terms>
-              <VLink href="https://creativecommons.org/terms/">{{
-                $t('about.declaration.terms', { openverse: 'Openverse' })
-              }}</VLink>
-            </template>
-          </i18n>
-        </div>
-      </div>
-    </div>
-  </div>
+    <i18n path="about.declaration.content" tag="p">
+      <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+      <template #openverse>Openverse</template>
+      <template #terms>
+        <VLink href="https://creativecommons.org/terms/">{{
+          $t('about.declaration.terms', { openverse: 'Openverse' })
+        }}</VLink>
+      </template>
+    </i18n>
+  </VContentPage>
 </template>
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 
 import VLink from '~/components/VLink.vue'
+import VContentPage from '~/components/VContentPage.vue'
 
 const AboutPage = defineComponent({
   name: 'AboutPage',
-  components: { VLink },
+  components: { VLink, VContentPage },
   head() {
     return {
       title: `${this.$t('about.title', {
@@ -104,14 +98,3 @@ const AboutPage = defineComponent({
 
 export default AboutPage
 </script>
-
-<style lang="scss" scoped>
-@import '~/styles/text-only-page.scss';
-
-.table.is-bordered {
-  td,
-  th {
-    word-break: initial;
-  }
-}
-</style>
diff --git a/src/pages/feedback.vue b/src/pages/feedback.vue
index 09e0696e37..ab55ab2a0b 100644
--- a/src/pages/feedback.vue
+++ b/src/pages/feedback.vue
@@ -1,67 +1,60 @@
 <template>
-  <div class="section" dir="ltr">
-    <div class="container">
-      <div class="pb-6">
-        <h1 id="feedback" class="text-5xl mb-10">
-          {{ $t('feedback.title') }}
-        </h1>
-        <i18n path="feedback.intro" tag="p" class="mb-6">
-          <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-          <template #openverse>Openverse</template>
-          <template #slack>
-            <VLink href="https://wordpress.slack.com/messages/openverse/"
-              >#openverse</VLink
-            >
-          </template>
-          <template #making-wordpress>
-            <VLink href="https://make.wordpress.org/chat/"
-              >Making WordPress</VLink
-            >
-          </template>
-          <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
-        </i18n>
-        <section class="tabs mt-6">
-          <div role="tablist" :aria-label="$t('feedback.title')">
-            <button
-              v-for="(name, index) in tabs"
-              :id="name"
-              :key="index"
-              :class="tabClass(index, 'tab')"
-              role="tab"
-              :aria-selected="activeTab === index"
-              :aria-controls="`tab-${name}`"
-              @click.prevent="setActiveTab(index)"
-              @keyup.enter.prevent="setActiveTab(index)"
-            >
-              {{ $t(`feedback.${name}`) }}
-            </button>
-          </div>
-          <div
-            v-for="(name, index) in tabs"
-            :id="`tab-${name}`"
-            :key="index"
-            :class="tabClass(index, 'tabs-panel')"
-            :aria-labelledby="name"
-            role="tabpanel"
-            tabindex="0"
-          >
-            <iframe
-              class="form-iframe"
-              :aria-label="$t(`feedback.aria.${name}`)"
-              :src="forms[name]"
-              :title="`${name} form`"
-            >
-              {{ $t('feedback.loading') }}
-            </iframe>
-          </div>
-        </section>
+  <VContentPage>
+    <h1 id="feedback">
+      {{ $t('feedback.title') }}
+    </h1>
+    <i18n path="feedback.intro" tag="p">
+      <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+      <template #openverse>Openverse</template>
+      <template #slack>
+        <VLink href="https://wordpress.slack.com/messages/openverse/"
+          >#openverse</VLink
+        >
+      </template>
+      <template #making-wordpress>
+        <VLink href="https://make.wordpress.org/chat/">Making WordPress</VLink>
+      </template>
+      <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+    </i18n>
+    <section>
+      <div role="tablist" :aria-label="$t('feedback.title')">
+        <button
+          v-for="(name, index) in tabs"
+          :id="name"
+          :key="index"
+          role="tab"
+          :aria-selected="activeTab === index"
+          :aria-controls="`tab-${name}`"
+          @click.prevent="setActiveTab(index)"
+          @keyup.enter.prevent="setActiveTab(index)"
+        >
+          {{ $t(`feedback.${name}`) }}
+        </button>
       </div>
-    </div>
-  </div>
+      <div
+        v-for="(name, index) in tabs"
+        :id="`tab-${name}`"
+        :key="index"
+        :aria-labelledby="name"
+        role="tabpanel"
+        tabindex="0"
+      >
+        <iframe
+          class="form-iframe"
+          :aria-label="$t(`feedback.aria.${name}`)"
+          :src="forms[name]"
+          :title="`${name} form`"
+        >
+          {{ $t('feedback.loading') }}
+        </iframe>
+      </div>
+    </section>
+  </VContentPage>
 </template>
 
 <script>
 import VLink from '~/components/VLink.vue'
+import VContentPage from '~/components/VContentPage.vue'
 
 const bugForm =
   'https://docs.google.com/forms/d/e/1FAIpQLSenCn-3HoZlCz4vlL2621wjezfu1sPZDaWGe_FtQ1R5-5qR4Q/viewform'
@@ -70,7 +63,7 @@ const suggestionForm =
 
 export const FeedbackPage = {
   name: 'feedback-page',
-  components: { VLink },
+  components: { VLink, VContentPage },
   data() {
     return {
       activeTab: 0,
@@ -101,7 +94,8 @@ export const FeedbackPage = {
 
 export default FeedbackPage
 </script>
-<style lang="scss" scoped>
+
+<style scoped>
 .form-iframe {
   width: 100%;
   height: 1200px;
diff --git a/src/pages/meta-search.vue b/src/pages/meta-search.vue
index 95504e6838..8cd12213a4 100644
--- a/src/pages/meta-search.vue
+++ b/src/pages/meta-search.vue
@@ -1,136 +1,133 @@
 <template>
-  <div class="section mb-10" dir="ltr">
-    <div class="container">
-      <div class="mb-10">
-        <h1 class="text-5xl">
-          {{ $t('meta-search-page.title') }}
-        </h1>
-      </div>
+  <VContentPage>
+    <h1>
+      {{ $t('meta-search-page.title') }}
+    </h1>
 
-      <i18n path="meta-search-page.intro" tag="p" class="mb-4">
-        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        <template #openverse>Openverse</template>
-        <template #link>
-          <VLink href="/sources">{{ $t('meta-search-page.link') }}</VLink>
-        </template>
-      </i18n>
-      <p>{{ $t('meta-search-page.license', { openverse: 'Openverse' }) }}</p>
-      <h2 class="mt-10 mb-4 text-2xl">
-        {{ $t('meta-search-page.content') }}
-      </h2>
-      <p>
-        {{ $t('meta-search-page.content-types', { openverse: 'Openverse' }) }}
-      </p>
+    <i18n path="meta-search-page.intro" tag="p">
+      <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+      <template #openverse>Openverse</template>
+      <template #link>
+        <VLink href="/sources">{{ $t('meta-search-page.link') }}</VLink>
+      </template>
+    </i18n>
+    <p>{{ $t('meta-search-page.license', { openverse: 'Openverse' }) }}</p>
+    <h2>
+      {{ $t('meta-search-page.content') }}
+    </h2>
+    <p>
+      {{ $t('meta-search-page.content-types', { openverse: 'Openverse' }) }}
+    </p>
 
-      <h2 class="mt-10 mb-4 text-2xl">
-        {{ $t('meta-search-page.images.title') }}
-      </h2>
-      <p>
-        {{ $t('meta-search-page.images.content', { openverse: 'Openverse' }) }}
-      </p>
-      <div class="content">
-        <ol>
-          <li>
-            <i18n path="meta-search-page.images.continue">
-              <template #load-more>
-                <strong>{{ $t('browse-page.load') }}</strong>
-              </template>
-            </i18n>
-          </li>
-          <li>
-            <i18n path="meta-search-page.images.not-finding">
-              <template #not-finding>
-                <strong>{{
-                  $t('meta-search.form.supported-title', { type: ' ' })
-                }}</strong>
-              </template>
-            </i18n>
-          </li>
-        </ol>
-      </div>
-      <i18n path="meta-search-page.images.info" tag="p" class="mb-2">
-        <template #use>
-          <strong>{{ $t('meta-search-page.use') }}</strong>
-        </template>
-        <template #not-finding>
-          <strong>{{
-            $t('meta-search.form.supported-title', { type: ' ' })
-          }}</strong>
-        </template>
-      </i18n>
-      <figure class="image my-10">
-        <img
-          :alt="$t('meta-search-page.images.demo-label', { type: ' ' })"
-          src="~/assets/screenshots/supported.png"
-          aria-hidden="true"
-        />
-      </figure>
-
-      <h2 class="mt-10 mb-4 text-2xl">
-        {{ $t('meta-search-page.audio-video.title') }}
-      </h2>
-      <p>
-        {{
-          $t('meta-search-page.audio-video.content', { openverse: 'Openverse' })
-        }}
-      </p>
-      <i18n path="meta-search-page.audio-video.filter" tag="p" class="my-2">
-        <template #use>
-          <strong>{{ $t('meta-search-page.use') }}</strong>
-        </template>
-      </i18n>
-      <figure class="image my-10">
-        <img
-          :alt="$t('meta-search-page.audio-video.demo-label', { type: ' ' })"
-          src="~/assets/screenshots/unsupported.png"
-          aria-hidden="true"
-        />
-      </figure>
-      <h2 class="mt-10 mb-4 text-2xl">
-        {{ $t('meta-search-page.new.title') }}
-      </h2>
-      <i18n path="meta-search-page.new.content" tag="p" class="mb-2">
-        <template #issue>
-          <VLink
-            aria-label="issue"
-            href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C%F0%9F%A7%B9+status%3A+ticket+work+required%2C%E2%98%81%EF%B8%8F+provider%3A+any&template=new_source_suggestion.yml&title=%3CSource+name+here%3E"
-            >{{ $t('meta-search-page.new.issue') }}</VLink
-          >
-        </template>
-        <template #email>
-          <VLink aria-label="email" href="mailto:openverse@wordpress.org">{{
-            $t('meta-search-page.new.email')
-          }}</VLink>
-        </template>
-      </i18n>
-      <h2 class="mt-10 mb-4 text-2xl">
-        {{ $t('meta-search-page.why.title') }}
-      </h2>
-      <p>{{ $t('meta-search-page.why.content') }}</p>
-      <p class="my-2">
-        {{ $t('meta-search-page.why.new', { openverse: 'Openverse' }) }}
-      </p>
-      <i18n path="meta-search-page.why.feedback-suggestions" tag="p">
-        <template #feedback>
-          <VLink
-            :aria-label="$t('meta-search-page.why.aria-label')"
-            href="/feedback"
-            >{{ $t('meta-search-page.why.feedback-link') }}</VLink
-          >
-        </template>
-      </i18n>
+    <h2>
+      {{ $t('meta-search-page.images.title') }}
+    </h2>
+    <p>
+      {{ $t('meta-search-page.images.content', { openverse: 'Openverse' }) }}
+    </p>
+    <div>
+      <ol>
+        <li>
+          <i18n path="meta-search-page.images.continue">
+            <template #load-more>
+              <strong>{{ $t('browse-page.load') }}</strong>
+            </template>
+          </i18n>
+        </li>
+        <li>
+          <i18n path="meta-search-page.images.not-finding">
+            <template #not-finding>
+              <strong>{{
+                $t('meta-search.form.supported-title', { type: ' ' })
+              }}</strong>
+            </template>
+          </i18n>
+        </li>
+      </ol>
     </div>
-  </div>
+    <i18n path="meta-search-page.images.info" tag="p">
+      <template #use>
+        <strong>{{ $t('meta-search-page.use') }}</strong>
+      </template>
+      <template #not-finding>
+        <strong>{{
+          $t('meta-search.form.supported-title', { type: ' ' })
+        }}</strong>
+      </template>
+    </i18n>
+    <figure>
+      <img
+        :alt="$t('meta-search-page.images.demo-label', { type: ' ' })"
+        src="~/assets/screenshots/supported.png"
+        aria-hidden="true"
+      />
+    </figure>
+
+    <h2>
+      {{ $t('meta-search-page.audio-video.title') }}
+    </h2>
+    <p>
+      {{
+        $t('meta-search-page.audio-video.content', { openverse: 'Openverse' })
+      }}
+    </p>
+    <i18n path="meta-search-page.audio-video.filter" tag="p">
+      <template #use>
+        <strong>{{ $t('meta-search-page.use') }}</strong>
+      </template>
+    </i18n>
+    <figure>
+      <img
+        :alt="$t('meta-search-page.audio-video.demo-label', { type: ' ' })"
+        src="~/assets/screenshots/unsupported.png"
+        aria-hidden="true"
+      />
+    </figure>
+    <h2>
+      {{ $t('meta-search-page.new.title') }}
+    </h2>
+    <i18n path="meta-search-page.new.content" tag="p">
+      <template #issue>
+        <VLink
+          aria-label="issue"
+          href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C%F0%9F%A7%B9+status%3A+ticket+work+required%2C%E2%98%81%EF%B8%8F+provider%3A+any&template=new_source_suggestion.yml&title=%3CSource+name+here%3E"
+          >{{ $t('meta-search-page.new.issue') }}</VLink
+        >
+      </template>
+      <template #email>
+        <VLink aria-label="email" href="mailto:openverse@wordpress.org">{{
+          $t('meta-search-page.new.email')
+        }}</VLink>
+      </template>
+    </i18n>
+    <h2>
+      {{ $t('meta-search-page.why.title') }}
+    </h2>
+    <p>{{ $t('meta-search-page.why.content') }}</p>
+    <p>
+      {{ $t('meta-search-page.why.new', { openverse: 'Openverse' }) }}
+    </p>
+    <i18n path="meta-search-page.why.feedback-suggestions" tag="p">
+      <template #feedback>
+        <VLink
+          :aria-label="$t('meta-search-page.why.aria-label')"
+          href="/feedback"
+          >{{ $t('meta-search-page.why.feedback-link') }}</VLink
+        >
+      </template>
+    </i18n>
+  </VContentPage>
 </template>
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 
+import VContentPage from '~/components/VContentPage.vue'
 import VLink from '~/components/VLink.vue'
 
 export default defineComponent({
   name: 'MetaSearchPage',
-  components: { VLink },
+  components: { VContentPage, VLink },
   head() {
     return {
       title: `${this.$t('meta-search-page.title')} | Openverse`,
@@ -140,17 +137,8 @@ export default defineComponent({
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-@import '~/styles/text-only-page.scss';
-
+<style scoped>
 figure {
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-  border: 1px solid black;
-}
-
-h4 {
-  margin: 1rem 0;
+  @apply mx-auto md:w-[800px] max-w-full border border-black;
 }
 </style>
diff --git a/src/pages/search-help.vue b/src/pages/search-help.vue
index dd3105e319..eb0455396a 100644
--- a/src/pages/search-help.vue
+++ b/src/pages/search-help.vue
@@ -1,263 +1,214 @@
 <template>
-  <div class="section" dir="ltr">
-    <div class="container">
-      <div class="mb-10">
-        <h1 class="text-5xl mb-10">
-          {{ $t('search-guide.title', { openverse: 'Openverse' }) }}
-        </h1>
-        <p>
-          {{ $t('search-guide.intro') }}
-        </p>
-
-        <h2 class="mt-10 text-2xl mb-4">
-          {{ $t('search-guide.exact.title') }}
-        </h2>
-        <i18n path="search-guide.exact.content" tag="p">
-          <template #link>
-            <!-- eslint-disable -->
-            <VLink
-              :aria-label="$t('search-guide.exact.aria-label')"
-              href='https://search.creativecommons.org/search?q="Claude%20Monet"'
-            >
-              <em>{{ $t('search-guide.exact.claude-monet') }}</em>
-            </VLink>
-            <!-- eslint-enable -->
-          </template>
-        </i18n>
-
-        <h2 class="my-4 text-2xl">
-          {{ $t('search-guide.combine.title') }}
-        </h2>
-
-        <p class="my-4">
-          {{ $t('search-guide.combine.description') }}
-        </p>
-        <ul>
-          <i18n path="search-guide.combine.and" tag="li" class="listitem">
-            <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-            <template #symbol>
-              <code
-                :aria-label="$t('search-guide.combine.aria-labels.plus')"
-                class="literal"
-                >+</code
-              >
-            </template>
-          </i18n>
-          <i18n path="search-guide.combine.or" tag="li" class="listitem">
-            <template #symbol>
-              <code
-                :aria-label="
-                  $t('search-guide.combine.aria-labels.vertical-bar')
-                "
-                class="literal"
-                >|</code
-              >
-            </template>
-          </i18n>
-          <i18n path="search-guide.combine.negate" tag="li" class="listitem">
-            <template #symbol>
-              <code
-                :aria-label="$t('search-guide.combine.aria-labels.minus')"
-                class="literal"
-                >-</code
-              >
-            </template>
-          </i18n>
-          <i18n path="search-guide.combine.prefix" tag="li" class="listitem">
-            <template #symbol>
-              <code
-                :aria-label="$t('search-guide.combine.aria-labels.star')"
-                class="literal"
-                >*</code
-              >
-            </template>
-          </i18n>
-          <i18n
-            path="search-guide.combine.precedence"
-            tag="li"
-            class="listitem"
-          >
-            <template #open>
-              <code
-                :aria-label="$t('search-guide.combine.aria-labels.open')"
-                class="literal"
-                >(</code
-              >
-            </template>
-            <template #close>
-              <code
-                :aria-label="$t('search-guide.combine.aria-labels.close')"
-                class="literal"
-                >)</code
-              >
-            </template>
-          </i18n>
-          <i18n path="search-guide.combine.fuzziness" tag="li" class="listitem">
-            <template #symbol>
-              <code
-                :aria-label="$t('search-guide.combine.aria-labels.fuzziness')"
-                class="literal"
-                >~N</code
-              >
-            </template>
-          </i18n>
-        </ul>
-
-        <i18n path="search-guide.example.and.description" tag="p" class="my-4">
-          <template #link>
-            <VLink
-              :aria-label="$t('search-guide.example.and.aria-label')"
-              href="https://search.creativecommons.org/search?q=dog%2Bcat"
-            >
-              <em>{{ $t('search-guide.example.and.example') }}</em>
-            </VLink>
-          </template>
-          <template #br>
-            <br />
-          </template>
-        </i18n>
-
-        <i18n path="search-guide.example.or" tag="p" class="my-4">
-          <template #link>
-            <VLink
-              :aria-label="$t('search-guide.example.or.aria-label')"
-              href="https://search.creativecommons.org/search?q=dog%7Ccat"
-            >
-              <em>{{ $t('search-guide.example.or.example') }}</em>
-            </VLink>
-          </template>
-          <template #br>
-            <br />
-          </template>
-        </i18n>
-
-        <i18n
-          path="search-guide.example.negate.description"
-          tag="p"
-          class="mt-4"
+  <VContentPage>
+    <h1>
+      {{ $t('search-guide.title', { openverse: 'Openverse' }) }}
+    </h1>
+    <p>
+      {{ $t('search-guide.intro') }}
+    </p>
+
+    <h2>
+      {{ $t('search-guide.exact.title') }}
+    </h2>
+    <i18n path="search-guide.exact.content" tag="p">
+      <template #link>
+        <!-- eslint-disable -->
+        <VLink
+          :aria-label="$t('search-guide.exact.aria-label')"
+          href='https://search.creativecommons.org/search?q="Claude%20Monet"'
         >
-          <template #operator>
-            <em
-              :aria-label="
-                $t('search-guide.example.negate.operator-aria-label')
-              "
-              >- {{ $t('search-guide.example.negate.operator-name') }}</em
-            >
-          </template>
-        </i18n>
-
-        <i18n path="search-guide.example.negate.content" tag="p" class="mb-4">
-          <template #link>
-            <VLink
-              :aria-label="$t('search-guide.example.negate.aria-label')"
-              href="https://search.creativecommons.org/search?q=dog%20-pug"
-            >
-              <em>{{ $t('search-guide.example.negate.example') }}</em>
-            </VLink>
-          </template>
-          <template #br>
-            <br />
-          </template>
-        </i18n>
-
-        <i18n
-          path="search-guide.example.prefix.description"
-          tag="p"
-          class="mt-4"
+          <em>{{ $t('search-guide.exact.claude-monet') }}</em>
+        </VLink>
+        <!-- eslint-enable -->
+      </template>
+    </i18n>
+
+    <h2>
+      {{ $t('search-guide.combine.title') }}
+    </h2>
+
+    <p>
+      {{ $t('search-guide.combine.description') }}
+    </p>
+    <ul>
+      <i18n path="search-guide.combine.and" tag="li">
+        <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+        <template #symbol>
+          <code :aria-label="$t('search-guide.combine.aria-labels.plus')"
+            >+
+          </code>
+        </template>
+      </i18n>
+      <i18n path="search-guide.combine.or" tag="li">
+        <template #symbol>
+          <code
+            :aria-label="$t('search-guide.combine.aria-labels.vertical-bar')"
+            >|
+          </code>
+        </template>
+      </i18n>
+      <i18n path="search-guide.combine.negate" tag="li">
+        <template #symbol>
+          <code :aria-label="$t('search-guide.combine.aria-labels.minus')"
+            >-
+          </code>
+        </template>
+      </i18n>
+      <i18n path="search-guide.combine.prefix" tag="li">
+        <template #symbol>
+          <code :aria-label="$t('search-guide.combine.aria-labels.star')"
+            >*
+          </code>
+        </template>
+      </i18n>
+      <i18n path="search-guide.combine.precedence" tag="li">
+        <template #open>
+          <code :aria-label="$t('search-guide.combine.aria-labels.open')"
+            >(
+          </code>
+        </template>
+        <template #close>
+          <code :aria-label="$t('search-guide.combine.aria-labels.close')"
+            >)
+          </code>
+        </template>
+      </i18n>
+      <i18n path="search-guide.combine.fuzziness" tag="li">
+        <template #symbol>
+          <code :aria-label="$t('search-guide.combine.aria-labels.fuzziness')"
+            >~N
+          </code>
+        </template>
+      </i18n>
+    </ul>
+
+    <i18n path="search-guide.example.and.description" tag="p">
+      <template #link>
+        <VLink
+          :aria-label="$t('search-guide.example.and.aria-label')"
+          href="https://search.creativecommons.org/search?q=dog%2Bcat"
         >
-          <template #operator>
-            <em :aria-label="$t('search-guide.example.prefix.aria-label')"
-              >* {{ $t('search-guide.example.prefix.operator-name') }}</em
-            >
-          </template>
-        </i18n>
-
-        <i18n path="search-guide.example.prefix.content" tag="p" class="mb-4">
-          <template #link>
-            <VLink
-              :aria-label="$t('search-guide.example.prefix.aria-label')"
-              href="https://search.creativecommons.org/search?q=net%2a"
-            >
-              <em>{{ $t('search-guide.example.prefix.example') }}</em>
-            </VLink>
-          </template>
-          <template #br>
-            <br />
-          </template>
-        </i18n>
-
-        <i18n
-          path="search-guide.example.precedence.description"
-          tag="p"
-          class="mt-4"
+          <em>{{ $t('search-guide.example.and.example') }}</em>
+        </VLink>
+      </template>
+      <template #br>
+        <br />
+      </template>
+    </i18n>
+
+    <i18n path="search-guide.example.or" tag="p">
+      <template #link>
+        <VLink
+          :aria-label="$t('search-guide.example.or.aria-label')"
+          href="https://search.creativecommons.org/search?q=dog%7Ccat"
         >
-          <template #highlight>
-            <em>( and )</em>
-          </template>
-        </i18n>
-
-        <i18n
-          path="search-guide.example.precedence.content"
-          tag="p"
-          class="mb-4"
+          <em>{{ $t('search-guide.example.or.example') }}</em>
+        </VLink>
+      </template>
+      <template #br>
+        <br />
+      </template>
+    </i18n>
+
+    <i18n path="search-guide.example.negate.description" tag="p" class="mt-4">
+      <template #operator>
+        <em :aria-label="$t('search-guide.example.negate.operator-aria-label')"
+          >- {{ $t('search-guide.example.negate.operator-name') }}</em
         >
-          <template #link>
-            <VLink
-              :aria-label="$t('search-guide.example.precedence.aria-label')"
-              href="https://search.creativecommons.org/search?q=dogs%20%2B%20%28corgis%20%7C%20labrador%29"
-            >
-              <em>{{ $t('search-guide.example.precedence.example') }}</em>
-            </VLink>
-          </template>
-          <template #br>
-            <br />
-          </template>
-        </i18n>
-
-        <i18n
-          path="search-guide.example.fuzziness.description"
-          tag="p"
-          class="mt-4"
+      </template>
+    </i18n>
+
+    <i18n path="search-guide.example.negate.content" tag="p" class="mb-4">
+      <template #link>
+        <VLink
+          :aria-label="$t('search-guide.example.negate.aria-label')"
+          href="https://search.creativecommons.org/search?q=dog%20-pug"
         >
-          <template #highlight>
-            <em aria-label="tilde N">~N</em>
-          </template>
-          <template #link>
-            <VLink href="http://en.wikipedia.org/wiki/Levenshtein_distance">
-              {{ $t('search-guide.example.fuzziness.link-text') }}
-            </VLink>
-          </template>
-        </i18n>
-
-        <i18n
-          path="search-guide.example.fuzziness.content"
-          tag="p"
-          class="mb-4"
+          <em>{{ $t('search-guide.example.negate.example') }}</em>
+        </VLink>
+      </template>
+      <template #br>
+        <br />
+      </template>
+    </i18n>
+
+    <i18n path="search-guide.example.prefix.description" tag="p" class="mt-4">
+      <template #operator>
+        <em :aria-label="$t('search-guide.example.prefix.aria-label')"
+          >* {{ $t('search-guide.example.prefix.operator-name') }}</em
         >
-          <template #link>
-            <VLink
-              :aria-label="$t('search-guide.example.fuzziness.aria-label')"
-              href="https://search.creativecommons.org/search?q=theatre~1"
-            >
-              <em>{{ $t('search-guide.example.fuzziness.example') }}</em>
-            </VLink>
-          </template>
-          <template #br>
-            <br />
-          </template>
-        </i18n>
-        <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
-      </div>
-    </div>
-  </div>
+      </template>
+    </i18n>
+
+    <i18n path="search-guide.example.prefix.content" tag="p" class="mb-4">
+      <template #link>
+        <VLink
+          :aria-label="$t('search-guide.example.prefix.aria-label')"
+          href="https://search.creativecommons.org/search?q=net%2a"
+        >
+          <em>{{ $t('search-guide.example.prefix.example') }}</em>
+        </VLink>
+      </template>
+      <template #br>
+        <br />
+      </template>
+    </i18n>
+
+    <i18n path="search-guide.example.precedence.description" tag="p">
+      <template #highlight>
+        <em>( and )</em>
+      </template>
+    </i18n>
+
+    <i18n path="search-guide.example.precedence.content" tag="p" class="mb-4">
+      <template #link>
+        <VLink
+          :aria-label="$t('search-guide.example.precedence.aria-label')"
+          href="https://search.creativecommons.org/search?q=dogs%20%2B%20%28corgis%20%7C%20labrador%29"
+        >
+          <em>{{ $t('search-guide.example.precedence.example') }}</em>
+        </VLink>
+      </template>
+      <template #br>
+        <br />
+      </template>
+    </i18n>
+
+    <i18n path="search-guide.example.fuzziness.description" tag="p">
+      <template #highlight>
+        <em aria-label="tilde N">~N</em>
+      </template>
+      <template #link>
+        <VLink href="http://en.wikipedia.org/wiki/Levenshtein_distance">
+          {{ $t('search-guide.example.fuzziness.link-text') }}
+        </VLink>
+      </template>
+    </i18n>
+
+    <i18n path="search-guide.example.fuzziness.content" tag="p" class="mb-4">
+      <template #link>
+        <VLink
+          :aria-label="$t('search-guide.example.fuzziness.aria-label')"
+          href="https://search.creativecommons.org/search?q=theatre~1"
+        >
+          <em>{{ $t('search-guide.example.fuzziness.example') }}</em>
+        </VLink>
+      </template>
+      <template #br>
+        <br />
+      </template>
+    </i18n>
+    <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+  </VContentPage>
 </template>
 
 <script>
 import VLink from '~/components/VLink.vue'
+import VContentPage from '~/components/VContentPage.vue'
 
 const SearchHelpPage = {
   name: 'search-help-page',
-  components: { VLink },
+  components: { VLink, VContentPage },
   methods: {
     providerSearchLink(providerCode) {
       return `https://search.creativecommons.org/search?q=provider%3A%20"${providerCode}"`
@@ -274,8 +225,3 @@ const SearchHelpPage = {
 
 export default SearchHelpPage
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-@import '~/styles/text-only-page.scss';
-</style>
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index 46097e2ece..2900046bbf 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -1,139 +1,139 @@
 <template>
-  <div class="section" dir="ltr">
-    <div class="container">
-      <div class="mb-10">
-        <h1 class="text-5xl mb-10">
-          {{ $t('sources.title') }}
-        </h1>
-        <div class="mb-10">
-          <h3 class="text-2xl">
-            {{ $t('sources.cc-content.where', { openverse: 'Openverse' }) }}
-          </h3>
-          <p class="my-4">
-            {{ $t('sources.cc-content.content', { openverse: 'Openverse' }) }}
-          </p>
-          <i18n path="sources.cc-content.provider" tag="p" class="my-4">
-            <template #flickr>
-              <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-              <VLink href="https://www.flickr.com/">Flickr</VLink>
-            </template>
-            <template #smithsonian>
-              <VLink href="https://www.si.edu/">{{
-                $t('sources.cc-content.smithsonian')
-              }}</VLink>
-            </template>
-          </i18n>
-          <i18n path="sources.cc-content.europeana" tag="p" class="my-4">
-            <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-            <template #openverse>Openverse</template>
-            <template #link>
-              <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-              <VLink href="https://www.europeana.eu/en">Europeana</VLink>
-            </template>
-            <template #link-api>
-              <VLink href="https://pro.europeana.eu/page/apis">{{
-                $t('sources.cc-content.europeana-api')
-              }}</VLink>
-            </template>
-          </i18n>
-        </div>
-        <div class="mb-10">
-          <h3 class="text-2xl">
-            {{ $t('sources.new-content.next') }}
-          </h3>
-          <p class="my-4">
-            {{ $t('sources.new-content.integrate') }}
-          </p>
-          <div class="content">
-            <ul>
-              <li>
-                {{ $t('sources.new-content.impact') }}
-              </li>
-              <li>
-                {{ $t('sources.new-content.reuse') }}
-              </li>
-              <li>
-                {{ $t('sources.new-content.total-items') }}
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <h3 class="text-2xl my-4">
-          {{ $t('sources.suggestions') }}
-        </h3>
-        <VLink
-          href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C+%F0%9F%A7%B9+status%3A+ticket+work+required%2C+%E2%98%81%EF%B8%8F+provider%3A+any&template=new-source-suggestion.md&title=%5BSource+Suggestion%5D+Insert+source+name+here"
-          class="button is-primary py-8"
-        >
-          {{ $t('sources.issue-button') }}
-          <VIcon :icon-path="externalLinkIcon" :rtl-flip="true" class="mx-2" />
-        </VLink>
-      </div>
-      <i18n path="sources.detail" tag="p">
-        <template #single-name>
-          <strong>
-            {{ $t('sources.single-name') }}
-          </strong>
-        </template>
-      </i18n>
-      <table
-        :aria-label="$t('sources.aria.table')"
-        role="region"
-        class="table is-striped mt-4 mb-10 border border-admin-gray"
+  <VContentPage>
+    <h1>
+      {{ $t('sources.title') }}
+    </h1>
+
+    <h3>
+      {{ $t('sources.cc-content.where', { openverse: 'Openverse' }) }}
+    </h3>
+    <p>
+      {{ $t('sources.cc-content.content', { openverse: 'Openverse' }) }}
+    </p>
+    <i18n path="sources.cc-content.provider" tag="p">
+      <template #flickr>
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <VLink href="https://www.flickr.com/">Flickr</VLink>
+      </template>
+      <template #smithsonian>
+        <VLink href="https://www.si.edu/">{{
+          $t('sources.cc-content.smithsonian')
+        }}</VLink>
+      </template>
+    </i18n>
+    <i18n path="sources.cc-content.europeana" tag="p">
+      <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+      <template #openverse>Openverse</template>
+      <template #link>
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <VLink href="https://www.europeana.eu/en">Europeana</VLink>
+      </template>
+      <template #link-api>
+        <VLink href="https://pro.europeana.eu/page/apis">{{
+          $t('sources.cc-content.europeana-api')
+        }}</VLink>
+      </template>
+    </i18n>
+
+    <h3>
+      {{ $t('sources.new-content.next') }}
+    </h3>
+    <p>
+      {{ $t('sources.new-content.integrate') }}
+    </p>
+    <ul>
+      <li>
+        {{ $t('sources.new-content.impact') }}
+      </li>
+      <li>
+        {{ $t('sources.new-content.reuse') }}
+      </li>
+      <li>
+        {{ $t('sources.new-content.total-items') }}
+      </li>
+    </ul>
+
+    <h3>
+      {{ $t('sources.suggestions') }}
+    </h3>
+
+    <p class="inline-block">
+      <VButton
+        as="VLink"
+        variant="primary"
+        size="disabled"
+        class="not-prose font-semibold mt-5 px-6 py-4"
+        href="https://github.com/WordPress/openverse-catalog/issues/new?assignees=&labels=%F0%9F%9A%A6+status%3A+awaiting+triage%2C+%F0%9F%A7%B9+status%3A+ticket+work+required%2C+%E2%98%81%EF%B8%8F+provider%3A+any&template=new-source-suggestion.md&title=%5BSource+Suggestion%5D+Insert+source+name+here"
       >
-        <thead>
-          <tr>
-            <th
-              tabindex="0"
-              @click="sortTable('display_name')"
-              @keypress.enter="sortTable('display_name')"
-            >
-              <span class="table-header-inner">
-                {{ $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="table-header-inner">
-                {{ $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="table-header-inner">
-                {{ $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 class="font-semibold">
-              {{ imageProvider.display_name }}
-            </td>
-            <td class="font-semibold">
-              <VLink :href="imageProvider.source_url">
-                {{ imageProvider.source_url }}
-              </VLink>
-            </td>
-            <td class="number-cell font-semibold">
-              {{ getLocaleFormattedNumber(imageProvider.media_count || 0) }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+        {{ $t('sources.issue-button') }}
+        <VIcon :icon-path="externalLinkIcon" :rtl-flip="true" class="mx-2" />
+      </VButton>
+    </p>
+
+    <i18n path="sources.detail" tag="p">
+      <template #single-name>
+        <strong>
+          {{ $t('sources.single-name') }}
+        </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">
+            <VLink :href="imageProvider.source_url">
+              {{ imageProvider.source_url }}
+            </VLink>
+          </td>
+          <td class="number-cell">
+            {{ getLocaleFormattedNumber(imageProvider.media_count || 0) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </VContentPage>
 </template>
 
 <script>
@@ -147,12 +147,13 @@ 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 externalLinkIcon from '~/assets/icons/external-link.svg'
 
 const SourcePage = {
   name: 'source-page',
-  components: { VButton, VIcon, VLink, TableSortIcon },
+  components: { VButton, VContentPage, VIcon, VLink, TableSortIcon },
   data() {
     return {
       sort: {
@@ -195,62 +196,51 @@ export default SourcePage
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-@import '~/styles/text-only-page.scss';
+.table {
+  table-layout: fixed;
+  width: 100%;
+}
 
-$table-border: 1px solid $color-light-gray;
-$table-border-radius: 2px;
+.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 {
-  th {
-    cursor: pointer;
-  }
-
-  .table-header-inner {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    > .icon {
-      margin-top: -4px;
-    }
-  }
-
-  td,
-  th {
-    word-break: initial;
-    border-bottom: none;
-    border-top: none;
-  }
-
+  --table-border-radius: 2px;
   /* The following are styles for rounding the table's corners */
   border-collapse: separate;
-  border-radius: $table-border-radius;
-
-  th:first-child {
-    border-top-left-radius: $table-border-radius;
-  }
-  th:last-child {
-    border-top-right-radius: $table-border-radius;
-  }
-
-  tr:last-child {
-    td:first-child {
-      border-bottom-left-radius: $table-border-radius;
-    }
-    td:last-child {
-      border-bottom-right-radius: $table-border-radius;
-    }
-  }
+  border-radius: var(table-border-radius);
+}
 
-  th:not(:first-child),
-  td:not(:first-child) {
-    border-left: $table-border;
-  }
+.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/store/types.ts b/src/store/types.ts
index a5e6e8ccaa..dfe1c62779 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -1,6 +1,7 @@
 /**
  * The search result object
  */
+import type { FetchState } from '~/composables/use-fetch-state'
 
 type FrontendMediaType = MediaDetail['frontendMediaType']
 export interface MediaResult<
@@ -115,12 +116,6 @@ export interface Filters {
 }
 export type FilterCategory = keyof Filters
 
-export interface FetchState {
-  isFetching: boolean
-  fetchingError: null | string
-  isFinished?: boolean
-}
-
 export type MediaStoreResult<T extends FrontendMediaType> = MediaResult<
   Record<MediaDetail['id'], T>
 >
@@ -130,7 +125,7 @@ export interface MediaState {
     audio: MediaStoreResult<'audio'>
     image: MediaStoreResult<'image'>
   }
-  mediaFetchState: {
+  fetchState: {
     audio: FetchState
     image: FetchState
   }
diff --git a/src/styles/text-only-page.scss b/src/styles/text-only-page.scss
index 221062efd3..d287a5ce33 100644
--- a/src/styles/text-only-page.scss
+++ b/src/styles/text-only-page.scss
@@ -10,12 +10,3 @@ a > em {
   font-style: normal;
   font-weight: 600;
 }
-
-.table {
-  table-layout: fixed;
-  width: 100%;
-}
-
-.table.is-bordered td {
-  word-break: break-all;
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 2e064017f0..ffb852ffc3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -202,7 +202,26 @@ module.exports = {
         ring: 'inset 0 0 0 1px white',
         'ring-1.5': 'inset 0 0 0 1.5px white',
       },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            '--tw-prose-body': theme('colors.dark-charcoal'),
+            '--tw-prose-headings': theme('colors.dark-charcoal'),
+            '--tw-prose-links': theme('colors.pink'),
+            a: {
+              textDecoration: 'none',
+              '&:hover': {
+                'text-decoration': 'underline',
+              },
+            },
+          },
+        },
+      }),
     },
   },
-  plugins: [require('tailwindcss-rtl'), require('@tailwindcss/line-clamp')],
+  plugins: [
+    require('tailwindcss-rtl'),
+    require('@tailwindcss/line-clamp'),
+    require('@tailwindcss/typography'),
+  ],
 }
diff --git a/test/unit/specs/composables/use-fetch-state.spec.ts b/test/unit/specs/composables/use-fetch-state.spec.ts
new file mode 100644
index 0000000000..67d8f18f3d
--- /dev/null
+++ b/test/unit/specs/composables/use-fetch-state.spec.ts
@@ -0,0 +1,59 @@
+import { useFetchState } from '~/composables/use-fetch-state'
+
+describe('useFetchState', () => {
+  it('should use the default values', () => {
+    const fetchState = useFetchState()
+    expect(fetchState.fetchState).toEqual({
+      isFetching: false,
+      isFinished: false,
+      fetchingError: null,
+      canFetch: true,
+      hasStarted: false,
+    })
+  })
+  it('should start fetching', () => {
+    const fetchState = useFetchState()
+    fetchState.startFetching()
+
+    expect(fetchState.fetchState).toEqual({
+      isFetching: true,
+      isFinished: false,
+      fetchingError: null,
+      canFetch: false,
+      hasStarted: true,
+    })
+  })
+  it('should end fetching with success', () => {
+    const fetchState = useFetchState()
+    fetchState.endFetching()
+    expect(fetchState.fetchState).toEqual({
+      isFetching: false,
+      isFinished: false,
+      fetchingError: null,
+      canFetch: true,
+      hasStarted: true,
+    })
+  })
+  it('should end fetching with error', () => {
+    const fetchState = useFetchState()
+    fetchState.endFetching('Server Error')
+    expect(fetchState.fetchState).toEqual({
+      isFetching: false,
+      isFinished: false,
+      fetchingError: 'Server Error',
+      canFetch: false,
+      hasStarted: true,
+    })
+  })
+  it('should set fetching to finished', () => {
+    const fetchState = useFetchState()
+    fetchState.setFinished()
+    expect(fetchState.fetchState).toEqual({
+      isFetching: false,
+      isFinished: true,
+      fetchingError: null,
+      canFetch: false,
+      hasStarted: true,
+    })
+  })
+})
diff --git a/tsconfig.json b/tsconfig.json
index 4a7100feef..79204084b0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,6 +37,7 @@
     "**/*.ts",
     "test/proxy.js",
     "src/components/VLink.vue",
+    "src/components/VContentPage.vue",
     "src/composables/types.js",
     "src/composables/use-event-listener-outside.js",
     "src/composables/use-active-audio.js",