diff --git a/src/assets/icons/openverse-logo-text.svg b/src/assets/icons/openverse-logo-text.svg
index c228afff0e..30e4d375f3 100644
--- a/src/assets/icons/openverse-logo-text.svg
+++ b/src/assets/icons/openverse-logo-text.svg
@@ -1,11 +1,15 @@
 <svg
   viewBox="0 0 95 15"
+  width="95"
+  height="15"
   xmlns="http://www.w3.org/2000/svg"
   fill="currentColor"
 >
+  <g id="logo">
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M11.0953 6.14123C11.0953 9.02825 8.70687 11.3686 5.76056 11.3686C2.81424 11.3686 0.425781 9.02825 0.425781 6.14123C0.425781 3.25421 2.81424 0.913818 5.76056 0.913818C8.70687 0.913818 11.0953 3.25421 11.0953 6.14123ZM7.89439 6.14122C7.89439 7.29603 6.93901 8.23219 5.76049 8.23219C4.58196 8.23219 3.62658 7.29603 3.62658 6.14122C3.62658 4.98641 4.58196 4.05026 5.76049 4.05026C6.93901 4.05026 7.89439 4.98641 7.89439 6.14122ZM15.59 14.811H11.9299V1.08903H15.5635V2.83027H15.643C16.0409 1.81671 16.9957 0.959089 18.5074 0.959089C20.5231 0.959089 22.4858 2.46643 22.4858 6.07884C22.4858 9.53532 20.6558 11.1986 18.4809 11.1986C17.0487 11.1986 16.0674 10.4449 15.643 9.43136H15.59V14.811ZM17.1283 3.71388C16.1204 3.71388 15.5104 4.59749 15.5104 6.07884C15.5104 7.5342 16.1204 8.4438 17.1283 8.4438C18.1361 8.4438 18.7196 7.56018 18.7196 6.07884C18.7196 4.59749 18.1361 3.71388 17.1283 3.71388ZM33.3253 7.84606C32.9805 9.92514 31.1637 11.2506 28.3391 11.2506C25.0768 11.2506 23.0877 9.3339 23.0877 6.10482C23.0877 3.01218 25.1033 0.959089 28.2595 0.959089C31.3361 0.959089 33.3253 2.90173 33.3253 6.07884V6.91047H26.6947V7.0664C26.6947 8.02798 27.3312 8.72967 28.4186 8.72967C29.1679 8.72967 29.7713 8.41131 29.9835 7.84606H33.3253ZM28.3391 3.47998C27.4439 3.47998 26.7146 4.07122 26.6947 4.93534H29.9569C29.937 4.07772 29.2475 3.47998 28.3391 3.47998ZM37.9187 5.45511C37.9254 4.46754 38.4956 3.86981 39.404 3.86981C40.3256 3.86981 40.8693 4.46754 40.8627 5.45511V11.0686H44.5228V4.70144C44.5294 2.5314 43.1304 0.959089 40.9688 0.959089C39.4703 0.959089 38.2834 1.72575 37.8392 2.9862H37.7331V1.08903H34.2587V11.0686H37.9187V5.45511ZM51.8232 1.08903H55.6689L52.2476 11.0686H48.004L44.5826 1.08903H48.4283L50.0727 7.69013H50.1788L51.8232 1.08903ZM60.7199 11.2506C63.5445 11.2506 65.3613 9.92514 65.7061 7.84606H62.3643C62.1521 8.41131 61.5487 8.72967 60.7995 8.72967C59.7121 8.72967 59.0755 8.02798 59.0755 7.0664V6.91047H65.7061V6.07884C65.7061 2.90173 63.7169 0.959089 60.6403 0.959089C57.4842 0.959089 55.4685 3.01218 55.4685 6.10482C55.4685 9.3339 57.4577 11.2506 60.7199 11.2506ZM59.0755 4.93534C59.0954 4.07122 59.8248 3.47998 60.7199 3.47998C61.6283 3.47998 62.3179 4.07772 62.3378 4.93534H59.0755ZM70.2996 11.0686H66.6395V1.08903H70.1935V2.9862H70.2996C70.6709 1.58281 71.5196 0.959089 72.607 0.959089C72.9253 0.959089 73.2435 1.01107 73.5353 1.09553V4.15568C73.1706 4.03224 72.5606 3.97376 72.1826 3.97376C71.1019 3.97376 70.2996 4.72743 70.2996 5.87093V11.0686ZM83.4846 4.3376C83.3918 2.22603 81.6015 0.959089 78.6575 0.959089C75.7467 0.959089 73.9498 2.12857 73.9631 4.20766C73.9498 5.77997 74.9908 6.78702 77.0662 7.14437L78.8697 7.45623C79.6654 7.59917 80.0234 7.80708 80.0367 8.18391C80.0234 8.59973 79.5394 8.83362 78.8697 8.83362C78.0409 8.83362 77.4574 8.48278 77.3579 7.84606H73.7244C73.9233 9.89266 75.7268 11.2506 78.8432 11.2506C81.6612 11.2506 83.7366 9.90565 83.7498 7.76809C83.7366 6.29324 82.7287 5.43562 80.6467 5.06528L78.578 4.70144C77.8022 4.565 77.5834 4.29212 77.5966 3.99975C77.5834 3.58393 78.1072 3.35004 78.7371 3.35004C79.4598 3.35004 80.0632 3.72687 80.1163 4.3376H83.4846ZM94.4583 7.84606C94.1135 9.92514 92.2968 11.2506 89.4721 11.2506C86.2099 11.2506 84.2207 9.3339 84.2207 6.10482C84.2207 3.01218 86.2364 0.959089 89.3926 0.959089C92.4692 0.959089 94.4583 2.90173 94.4583 6.07884V6.91047H87.8278V7.0664C87.8278 8.02798 88.4643 8.72967 89.5517 8.72967C90.301 8.72967 90.9044 8.41131 91.1165 7.84606H94.4583ZM89.4721 3.47998C88.577 3.47998 87.8477 4.07122 87.8278 4.93534H91.09C91.0701 4.07772 90.3805 3.47998 89.4721 3.47998Z"
   />
+  </g>
 </svg>
diff --git a/src/components/VHeaderOld/VLogoButtonOld.vue b/src/components/VHeaderOld/VLogoButtonOld.vue
index 68543c2473..41791b39f0 100644
--- a/src/components/VHeaderOld/VLogoButtonOld.vue
+++ b/src/components/VHeaderOld/VLogoButtonOld.vue
@@ -11,16 +11,19 @@
       :status="isFetching ? 'loading' : 'idle'"
       :auto-resize="autoResizeLogo"
     />
-    <OpenverseLogoText
+    <svg
       v-show="!isHeaderScrolled"
-      class="-ml-1 mt-1 me-3"
-      :class="{
-        'hidden sm:block md:hidden': isSearchRoute,
-      }"
-      :aria-hidden="true"
+      class="-ml-1 mt-1 flex flex-shrink-0 flex-grow-0 me-3"
+      :class="{ 'hidden sm:block md:hidden': isSearchRoute }"
+      xmlns="http://www.w3.org/2000/svg"
       width="95"
       height="15"
-    />
+      viewBox="0 0 95 15"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <use :href="`${OpenverseLogoText}#logo`" />
+    </svg>
   </VButton>
 </template>
 <script>
@@ -29,11 +32,11 @@ import { defineComponent } from '@nuxtjs/composition-api'
 import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
 import VButton from '~/components/VButton.vue'
 
-import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg?inline'
+import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg'
 
 export default defineComponent({
   name: 'VLogoButtonOld',
-  components: { OpenverseLogoText, VLogoLoader, VButton },
+  components: { VLogoLoader, VButton },
   props: {
     isFetching: {
       type: Boolean,
@@ -52,5 +55,8 @@ export default defineComponent({
       default: true,
     },
   },
+  setup() {
+    return { OpenverseLogoText }
+  },
 })
 </script>
diff --git a/src/components/VModal/VModal.vue b/src/components/VModal/VModal.vue
index d09baff49d..70ca360c5a 100644
--- a/src/components/VModal/VModal.vue
+++ b/src/components/VModal/VModal.vue
@@ -36,7 +36,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   defineComponent,
   ref,
@@ -44,10 +44,14 @@ import {
   reactive,
   computed,
   toRef,
+  PropType,
+  Ref,
 } from '@nuxtjs/composition-api'
 
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 
+import type { ModalColorMode, ModalVariant } from '~/types/modal'
+
 import VModalContent from '~/components/VModal/VModalContent.vue'
 
 export default defineComponent({
@@ -106,9 +110,7 @@ export default defineComponent({
      * @default undefined
      */
     initialFocusElement: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
-        process.server ? Object : HTMLElement
-      ),
+      type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
       default: undefined,
     },
     /**
@@ -122,9 +124,7 @@ export default defineComponent({
      * @default 'default'
      */
     variant: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'default' | 'full' | 'two-thirds'>} */ (
-        String
-      ),
+      type: String as PropType<ModalVariant>,
       default: 'default',
     },
     /**
@@ -135,9 +135,7 @@ export default defineComponent({
      * @default 'light'
      */
     mode: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'dark' | 'light'>} */ (
-        String
-      ),
+      type: String as PropType<ModalColorMode>,
       default: 'light',
     },
     /**
@@ -167,14 +165,12 @@ export default defineComponent({
   ],
   setup(props, { emit }) {
     const visibleRef = toRef(props, 'visible')
-    const internalVisibleRef =
-      /** @type {import('@nuxtjs/composition-api').Ref<boolean>} */ (
-        ref(props.visible === undefined ? false : props.visible)
-      )
-    const nodeRef = ref()
+    const internalVisibleRef: Ref<boolean> = ref<boolean>(
+      typeof props.visible === 'undefined' ? false : props.visible
+    )
+    const nodeRef = ref<null | HTMLElement>(null)
 
-    /** @type {import('@nuxtjs/composition-api').Ref<HTMLElement | undefined>} */
-    const triggerContainerRef = ref()
+    const triggerContainerRef = ref<HTMLElement | null>(null)
 
     const triggerA11yProps = reactive({
       'aria-expanded': false,
@@ -182,14 +178,11 @@ export default defineComponent({
     })
 
     const triggerRef = computed(
-      () =>
-        /** @type {HTMLElement | undefined} */ (
-          triggerContainerRef.value?.firstChild
-        )
+      () => triggerContainerRef.value?.firstChild as HTMLElement | undefined
     )
 
     watch(internalVisibleRef, (visible) => {
-      triggerA11yProps['aria-expanded'] = !!visible
+      triggerA11yProps['aria-expanded'] = visible
     })
 
     /**
@@ -223,7 +216,7 @@ export default defineComponent({
     }
 
     const onTriggerClick = () => {
-      if (internalVisibleRef.value === true) {
+      if (internalVisibleRef.value) {
         close()
       } else {
         open()
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
index f4d68bd1ff..b743347b85 100644
--- a/src/components/VModal/VModalContent.vue
+++ b/src/components/VModal/VModalContent.vue
@@ -67,14 +67,22 @@
   </VTeleport>
 </template>
 
-<script>
-import { defineComponent, toRefs, ref, computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import {
+  defineComponent,
+  toRefs,
+  ref,
+  computed,
+  PropType,
+} from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
 import { Portal as VTeleport } from 'portal-vue'
 
 import { useDialogContent } from '~/composables/use-dialog-content'
 import { warn } from '~/utils/console'
 
+import type { ModalColorMode, ModalVariant } from '~/types/modal'
+
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VLogoButtonOld from '~/components/VHeaderOld/VLogoButtonOld.vue'
@@ -93,9 +101,7 @@ export default defineComponent({
       required: true,
     },
     hide: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<() => void>} */ (
-        Function
-      ),
+      type: Function as PropType<() => void>,
       required: true,
     },
     hideOnEsc: {
@@ -115,26 +121,19 @@ export default defineComponent({
       default: true,
     },
     triggerElement: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
-        process.server ? Object : HTMLElement
-      ),
+      type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
+      default: null,
     },
     initialFocusElement: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
-        process.server ? Object : HTMLElement
-      ),
-      required: false,
+      type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
+      default: null,
     },
     variant: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'default' | 'full' | 'two-thirds'>} */ (
-        String
-      ),
+      type: String as PropType<ModalVariant>,
       default: 'default',
     },
     mode: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'dark' | 'light'>} */ (
-        String
-      ),
+      type: String as PropType<ModalColorMode>,
       default: 'light',
     },
     /**
@@ -152,11 +151,11 @@ export default defineComponent({
     }
 
     const propsRefs = toRefs(props)
-    const closeButton = ref()
+    const closeButton = ref<InstanceType<typeof VButton> | null>(null)
     const initialFocusElement = computed(
       () => props.initialFocusElement || closeButton.value?.$el
     )
-    const dialogRef = ref()
+    const dialogRef = ref<HTMLElement | null>(null)
     const { onKeyDown, onBlur } = useDialogContent({
       dialogRef,
       visibleRef: propsRefs.visible,
diff --git a/src/components/VModal/VSidebarTarget.vue b/src/components/VModal/VSidebarTarget.vue
index 58408984b9..3ae90efefa 100644
--- a/src/components/VModal/VSidebarTarget.vue
+++ b/src/components/VModal/VSidebarTarget.vue
@@ -9,6 +9,5 @@ import { PortalTarget as VTeleportTarget } from 'portal-vue'
 export default defineComponent({
   name: 'VSidebarTarget',
   components: { VTeleportTarget },
-  props: { element: { type: String, default: 'div' } },
 })
 </script>
diff --git a/src/types/modal.ts b/src/types/modal.ts
new file mode 100644
index 0000000000..06c8beb5de
--- /dev/null
+++ b/src/types/modal.ts
@@ -0,0 +1,2 @@
+export type ModalVariant = 'default' | 'full' | 'two-thirds'
+export type ModalColorMode = 'dark' | 'light'
diff --git a/tsconfig.json b/tsconfig.json
index c72461ae35..7881867866 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -67,6 +67,7 @@
     "src/components/VLogoLoader/**.vue",
     "src/components/VMediaInfo/**.vue",
     "src/components/VMediaTag/**.vue",
+    "src/components/VModal/**.vue",
     "src/components/VPopover/**.vue",
     "src/components/VRecentSearches/**.vue",
     "src/components/VSkeleton/**.vue",
@@ -85,7 +86,6 @@
     "src/components/VHeader/VPageLinks.vue",
     "src/components/VHeader/VSearchBar/**.vue",
     "src/components/VImageDetails/VRelatedImages.vue",
-    "src/components/VModal/VInputModal.vue",
     "src/pages/feedback.vue",
     "src/pages/search-help.vue",