diff --git a/src/renderer/components/ft-logo-full/ft-logo-full.css b/src/renderer/components/FtLogoFull/FtLogoFull.css
similarity index 100%
rename from src/renderer/components/ft-logo-full/ft-logo-full.css
rename to src/renderer/components/FtLogoFull/FtLogoFull.css
diff --git a/src/renderer/components/ft-logo-full/ft-logo-full.vue b/src/renderer/components/FtLogoFull/FtLogoFull.vue
similarity index 99%
rename from src/renderer/components/ft-logo-full/ft-logo-full.vue
rename to src/renderer/components/FtLogoFull/FtLogoFull.vue
index d73063727f3ef..1450d4aceb946 100644
--- a/src/renderer/components/ft-logo-full/ft-logo-full.vue
+++ b/src/renderer/components/FtLogoFull/FtLogoFull.vue
@@ -1,6 +1,5 @@
 <template>
   <svg
-    class="ft-logo-full"
     viewBox="0 0 640 200"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
@@ -63,4 +62,4 @@
   </svg>
 </template>
 
-<style scoped src="./ft-logo-full.css" />
+<style scoped src="./FtLogoFull.css" />
diff --git a/src/renderer/views/About/About.css b/src/renderer/views/About/About.css
index 38c5e66ce287d..51416a5c72566 100644
--- a/src/renderer/views/About/About.css
+++ b/src/renderer/views/About/About.css
@@ -8,7 +8,7 @@
   text-align: center;
 }
 
-.ft-logo-full {
+.logo {
   max-inline-size: 100%;
   inline-size: 500px;
 }
diff --git a/src/renderer/views/About/About.js b/src/renderer/views/About/About.js
deleted file mode 100644
index d47e65713089e..0000000000000
--- a/src/renderer/views/About/About.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { defineComponent } from 'vue'
-import FtCard from '../../components/ft-card/ft-card.vue'
-import packageDetails from '../../../../package.json'
-import { ABOUT_BITCOIN_ADDRESS } from '../../../constants'
-import FtLogoFull from '../../components/ft-logo-full/ft-logo-full.vue'
-
-export default defineComponent({
-  name: 'About',
-  components: {
-    'ft-card': FtCard,
-    'ft-logo-full': FtLogoFull,
-  },
-  data: function () {
-    return {
-      versionNumber: `v${packageDetails.version}`
-    }
-  },
-  computed: {
-    chunks: function () {
-      return [
-        {
-          icon: ['fab', 'github'],
-          title: this.$t('About.Source code'),
-          content: `<a href="https://github.com/FreeTubeApp/FreeTube" lang="en">GitHub: FreeTubeApp/FreeTube</a><br>${this.$t('About.Licensed under the')} <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">${this.$t('About.AGPLv3')}</a>`
-        },
-        {
-          icon: ['fas', 'file-download'],
-          title: this.$t('About.Downloads / Changelog'),
-          content: `<a href="https://github.com/FreeTubeApp/FreeTube/releases">${this.$t('About.GitHub releases')}</a>`
-        },
-        {
-          icon: ['fas', 'question-circle'],
-          title: this.$t('About.Help'),
-          content: `<a href="https://docs.freetubeapp.io/">${this.$t('About.FreeTube Wiki')}</a> / <a href="https://docs.freetubeapp.io/faq/">${this.$t('About.FAQ')}</a> / <a href="https://github.com/FreeTubeApp/FreeTube/discussions/">${this.$t('About.Discussions')}</a>`
-        },
-        {
-          icon: ['fas', 'exclamation-circle'],
-          title: this.$t('About.Report a problem'),
-          content: `<a href="https://github.com/FreeTubeApp/FreeTube/issues">${this.$t('About.GitHub issues')}</a><br>${this.$t('About.Please check for duplicates before posting')}`
-        },
-        {
-          icon: ['fas', 'globe'],
-          title: this.$t('About.Website'),
-          content: '<a href="https://freetubeapp.io/">https://freetubeapp.io/</a>'
-        },
-        {
-          icon: ['fas', 'newspaper'],
-          title: this.$t('About.Blog'),
-          content: '<a href="https://blog.freetubeapp.io">https://blog.freetubeapp.io</a>'
-        },
-        {
-          icon: ['fas', 'envelope'],
-          title: this.$t('About.Email'),
-          content: '<a href="mailto:FreeTubeApp@protonmail.com">FreeTubeApp@protonmail.com</a>'
-        },
-        {
-          icon: ['fab', 'mastodon'],
-          title: this.$t('About.Mastodon'),
-          content: '<a href="https://fosstodon.org/@FreeTube">@FreeTube@fosstodon.org</a>'
-        },
-        {
-          icon: ['fas', 'comment-dots'],
-          title: this.$t('About.Chat on Matrix'),
-          content: `<a href="https://matrix.to/#/#freetube:matrix.org?via=matrix.org&via=privacytools.io&via=tchncs.de">#freetube:matrix.org</a><br>${this.$t('About.Please read the')} <a href="https://docs.freetubeapp.io/community/matrix/">${this.$t('About.room rules')}</a>`
-        },
-        {
-          icon: ['fas', 'language'],
-          title: this.$t('About.Translate'),
-          content: '<a href="https://hosted.weblate.org/engage/free-tube/">https://hosted.weblate.org/engage/free-tube/</a>'
-        },
-        {
-          icon: ['fas', 'users'],
-          title: this.$t('About.Credits'),
-          content: `${this.$t('About.FreeTube is made possible by')} <a href="https://docs.freetubeapp.io/credits/">${this.$t('About.these people and projects')}</a>`
-        },
-        {
-          icon: ['fab', 'bitcoin'],
-          title: `${this.$t('About.Donate')} - BTC`,
-          content: `<a href="bitcoin:${ABOUT_BITCOIN_ADDRESS}">${ABOUT_BITCOIN_ADDRESS}</a>`
-        }
-      ]
-    }
-  }
-})
diff --git a/src/renderer/views/About/About.vue b/src/renderer/views/About/About.vue
index 6aec14edadf3a..c56b167753be5 100644
--- a/src/renderer/views/About/About.vue
+++ b/src/renderer/views/About/About.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <ft-card class="card">
+    <FtCard class="card">
       <h1>
         {{ $t("About.About") }}
       </h1>
       <section class="brand">
-        <ft-logo-full />
+        <FtLogoFull class="logo" />
         <div class="version">
           {{ versionNumber }} {{ $t("About.Beta") }}
         </div>
@@ -16,7 +16,7 @@
           :key="chunk.title"
           class="chunk"
         >
-          <font-awesome-icon
+          <FontAwesomeIcon
             class="icon"
             :icon="chunk.icon"
           />
@@ -29,9 +29,87 @@
           />
         </figure>
       </section>
-    </ft-card>
+    </FtCard>
   </div>
 </template>
 
-<script src="./About.js" />
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import FtCard from '../../components/ft-card/ft-card.vue'
+import FtLogoFull from '../../components/FtLogoFull/FtLogoFull.vue'
+
+import { ABOUT_BITCOIN_ADDRESS } from '../../../constants'
+import packageDetails from '../../../../package.json'
+
+const { t } = useI18n()
+
+const versionNumber = `v${packageDetails.version}`
+
+const chunks = computed(() => [
+  {
+    icon: ['fab', 'github'],
+    title: t('About.Source code'),
+    content: `<a href="https://github.com/FreeTubeApp/FreeTube" lang="en">GitHub: FreeTubeApp/FreeTube</a><br>${t('About.Licensed under the')} <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">${t('About.AGPLv3')}</a>`
+  },
+  {
+    icon: ['fas', 'file-download'],
+    title: t('About.Downloads / Changelog'),
+    content: `<a href="https://github.com/FreeTubeApp/FreeTube/releases">${t('About.GitHub releases')}</a>`
+  },
+  {
+    icon: ['fas', 'question-circle'],
+    title: t('About.Help'),
+    content: `<a href="https://docs.freetubeapp.io/">${t('About.FreeTube Wiki')}</a> / <a href="https://docs.freetubeapp.io/faq/">${t('About.FAQ')}</a> / <a href="https://github.com/FreeTubeApp/FreeTube/discussions/">${t('About.Discussions')}</a>`
+  },
+  {
+    icon: ['fas', 'exclamation-circle'],
+    title: t('About.Report a problem'),
+    content: `<a href="https://github.com/FreeTubeApp/FreeTube/issues">${t('About.GitHub issues')}</a><br>${t('About.Please check for duplicates before posting')}`
+  },
+  {
+    icon: ['fas', 'globe'],
+    title: t('About.Website'),
+    content: '<a href="https://freetubeapp.io/">https://freetubeapp.io/</a>'
+  },
+  {
+    icon: ['fas', 'newspaper'],
+    title: t('About.Blog'),
+    content: '<a href="https://blog.freetubeapp.io">https://blog.freetubeapp.io</a>'
+  },
+  {
+    icon: ['fas', 'envelope'],
+    title: t('About.Email'),
+    content: '<a href="mailto:FreeTubeApp@protonmail.com">FreeTubeApp@protonmail.com</a>'
+  },
+  {
+    icon: ['fab', 'mastodon'],
+    title: t('About.Mastodon'),
+    content: '<a href="https://fosstodon.org/@FreeTube">@FreeTube@fosstodon.org</a>'
+  },
+  {
+    icon: ['fas', 'comment-dots'],
+    title: t('About.Chat on Matrix'),
+    content: `<a href="https://matrix.to/#/#freetube:matrix.org?via=matrix.org&via=privacytools.io&via=tchncs.de">#freetube:matrix.org</a><br>${t('About.Please read the')} <a href="https://docs.freetubeapp.io/community/matrix/">${t('About.room rules')}</a>`
+  },
+  {
+    icon: ['fas', 'language'],
+    title: t('About.Translate'),
+    content: '<a href="https://hosted.weblate.org/engage/free-tube/">https://hosted.weblate.org/engage/free-tube/</a>'
+  },
+  {
+    icon: ['fas', 'users'],
+    title: t('About.Credits'),
+    content: `${t('About.FreeTube is made possible by')} <a href="https://docs.freetubeapp.io/credits/">${t('About.these people and projects')}</a>`
+  },
+  {
+    icon: ['fab', 'bitcoin'],
+    title: `${t('About.Donate')} - BTC`,
+    content: `<a href="bitcoin:${ABOUT_BITCOIN_ADDRESS}">${ABOUT_BITCOIN_ADDRESS}</a>`
+  }
+])
+</script>
+
 <style scoped src="./About.css" />