diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index d208ee5a..3579f6db 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -4,7 +4,10 @@ import { filter, trim } from 'lodash'
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
-import { parseBackendVersionString, parseFrontendVersionString } from '../../services/version/version.service'
+import { extractCommit } from '../../services/version/version.service'
+
+const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
+const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
 
 const settings = {
   data () {
@@ -101,14 +104,12 @@ const settings = {
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }
-  },
-  methods: {
-    parseBackendVersion (versionString) {
-      return parseBackendVersionString(versionString)
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    frontendVersionLink () {
+      return pleromaFeCommitUrl + this.$store.state.instance.frontendVersion
     },
-    parseFrontendVersion (versionString) {
-      return parseFrontendVersionString(versionString)
+    backendVersionLink () {
+      return pleromaBeCommitUrl + extractCommit(this.$store.state.instance.backendVersion)
     }
   },
   watch: {
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 3ca7bdc0..17f1f1a1 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -268,7 +268,7 @@
               <p>{{$t('settings.version.backend_version')}}</p>
               <ul class="option-list">
                 <li>
-                  <div v-html="parseBackendVersion(backendVersion)"></div>
+                  <a :href="backendVersionLink" target="_blank">{{backendVersion}}</a>
                 </li>
               </ul>
             </li>
@@ -276,7 +276,7 @@
               <p>{{$t('settings.version.frontend_version')}}</p>
               <ul class="option-list">
                 <li>
-                  <div v-html="parseFrontendVersion(frontendVersion)"></div>
+                  <a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a>
                 </li>
               </ul>
             </li>
diff --git a/src/services/version/version.service.js b/src/services/version/version.service.js
index 6c5036c1..a750b0dd 100644
--- a/src/services/version/version.service.js
+++ b/src/services/version/version.service.js
@@ -1,10 +1,6 @@
 
-export const parseBackendVersionString = versionString => {
-  const regex = /(-g)(\w+)$/i
-  const replacer = '$1<a href="https://git.pleroma.social/pleroma/pleroma/commit/$2" target="_blank">$2</a>'
-  return versionString.replace(regex, replacer)
-}
-
-export const parseFrontendVersionString = versionString => {
-  return `<a href="https://git.pleroma.social/pleroma/pleroma-fe/commit/${versionString}" target="_blank">#${versionString}</a>`
+export const extractCommit = versionString => {
+  const regex = /-g(\w+)$/i
+  const matches = versionString.match(regex)
+  return matches ? matches[1] : ''
 }