diff --git a/src/routes/pages/settings/UpdateAppPage.tsx b/src/routes/pages/settings/UpdateAppPage.tsx
index d0182c2125..6ca2b389a0 100644
--- a/src/routes/pages/settings/UpdateAppPage.tsx
+++ b/src/routes/pages/settings/UpdateAppPage.tsx
@@ -23,6 +23,7 @@ import { PageContentIonSpinner } from "#/features/user/AsyncProfile";
 import { ua } from "#/helpers/device";
 import { unloadServiceWorkerAndRefresh } from "#/helpers/serviceWorker";
 
+import AppVersionInfo from "./about/AppVersionInfo";
 import { UpdateContext } from "./update/UpdateContext";
 
 const UpToDateText = styled.div`
@@ -108,7 +109,7 @@ export default function UpdateAppPage() {
               <IonItem>
                 <IonLabel>Current version</IonLabel>
                 <IonLabel slot="end" color="medium">
-                  {import.meta.env.APP_VERSION}
+                  <AppVersionInfo />
                 </IonLabel>
               </IonItem>
               <IonItem
diff --git a/src/routes/pages/settings/about/AppDetails.tsx b/src/routes/pages/settings/about/AppDetails.tsx
index b44ed506dd..308584a7f2 100644
--- a/src/routes/pages/settings/about/AppDetails.tsx
+++ b/src/routes/pages/settings/about/AppDetails.tsx
@@ -1,6 +1,7 @@
-import { IonText } from "@ionic/react";
 import { styled } from "@linaria/react";
 
+import AppVersionInfo from "./AppVersionInfo";
+
 const AppContainer = styled.div`
   display: flex;
   align-items: center;
@@ -22,26 +23,12 @@ const AppContainer = styled.div`
   }
 `;
 
-const buildInfo = (() => {
-  if (import.meta.env.DEV) return <IonText color="danger">Development</IonText>;
-
-  // If the app version is different from the git ref (tag), it's a pre-release
-  if (import.meta.env.APP_GIT_REF !== import.meta.env.APP_VERSION)
-    return (
-      <IonText color="warning">
-        Beta Track — [{import.meta.env.APP_BUILD}]{" "}
-        {import.meta.env.APP_GIT_REF.slice(0, 7)}
-      </IonText>
-    );
-})();
-
 export default function AppDetails() {
   return (
     <AppContainer>
       <img src="/logo.png" alt="" />
       <div>
-        Voyager {import.meta.env.APP_VERSION}
-        {buildInfo && <aside>{buildInfo}</aside>}
+        Voyager <AppVersionInfo betaPrefix="Beta Track" betaAs="aside" />
         <aside>by Alexander Harding</aside>
       </div>
     </AppContainer>
diff --git a/src/routes/pages/settings/about/AppVersionInfo.tsx b/src/routes/pages/settings/about/AppVersionInfo.tsx
new file mode 100644
index 0000000000..808590b7c0
--- /dev/null
+++ b/src/routes/pages/settings/about/AppVersionInfo.tsx
@@ -0,0 +1,34 @@
+import { IonText } from "@ionic/react";
+import React from "react";
+
+interface AppVersionInfoProps {
+  betaAs?: React.ElementType;
+  betaPrefix?: string;
+}
+
+export default function AppVersionInfo({
+  betaAs: BetaEl = React.Fragment,
+  ...props
+}: AppVersionInfoProps) {
+  return (
+    <>
+      {import.meta.env.APP_VERSION}{" "}
+      <BetaEl>
+        <BetaInfo {...props} />
+      </BetaEl>
+    </>
+  );
+}
+
+function BetaInfo({ betaPrefix }: AppVersionInfoProps) {
+  if (import.meta.env.DEV) return <IonText color="danger">Development</IonText>;
+
+  // If the app version is different from the git ref (tag), it's a pre-release
+  if (import.meta.env.APP_GIT_REF !== import.meta.env.APP_VERSION)
+    return (
+      <IonText color="warning">
+        {betaPrefix && `${betaPrefix} – `}[{import.meta.env.APP_BUILD}]{" "}
+        {import.meta.env.APP_GIT_REF.slice(0, 7)}
+      </IonText>
+    );
+}