diff --git a/client/src/components/HistoryImport.vue b/client/src/components/HistoryImport.vue
index 08b1eb44b21a..f024c0991485 100644
--- a/client/src/components/HistoryImport.vue
+++ b/client/src/components/HistoryImport.vue
@@ -91,6 +91,7 @@ import { waitOnJob } from "components/JobStates/wait";
 import LoadingSpan from "components/LoadingSpan";
 import { getAppRoot } from "onload/loadConfig";
 import { errorMessageAsString } from "utils/simple-error";
+import { capitalizeFirstLetter } from "utils/strings";
 import Vue, { ref, watch } from "vue";
 
 import { fetchFileSources } from "@/api/remoteFiles";
@@ -165,7 +166,7 @@ export default {
             return this.invocationImport ? "invocation" : "history";
         },
         identifierTextCapitalized() {
-            return this.identifierText.charAt(0).toUpperCase() + this.identifierText.slice(1);
+            return capitalizeFirstLetter(this.identifierText);
         },
         identifierTextPlural() {
             return this.invocationImport ? "invocations" : "histories";
diff --git a/client/src/components/Notifications/Categories/SharedItemNotification.vue b/client/src/components/Notifications/Categories/SharedItemNotification.vue
index b141c87ed308..dcd3de959765 100644
--- a/client/src/components/Notifications/Categories/SharedItemNotification.vue
+++ b/client/src/components/Notifications/Categories/SharedItemNotification.vue
@@ -8,6 +8,7 @@ import { computed } from "vue";
 import type { SharedItemNotification } from "@/api/notifications";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 import { absPath } from "@/utils/redirect";
+import { capitalizeFirstLetter } from "@/utils/strings";
 
 import NotificationActions from "@/components/Notifications/NotificationActions.vue";
 
@@ -21,10 +22,6 @@ const props = defineProps<Props>();
 
 const notificationsStore = useNotificationsStore();
 
-function capitalizeFirstLetter(string: string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 const content = computed(() => props.notification.content);
 
 const sharedItemType = computed(() => {
diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index c2385e4c7e17..0165358c79e7 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
@@ -46,7 +46,7 @@
                 title="Disconnect External Identity"
                 class="d-block mt-3"
                 @click="onDisconnect(item)">
-                Disconnect {{ item.provider_label.charAt(0).toUpperCase() + item.provider_label.slice(1) }} -
+                Disconnect {{ capitalizeAsTitle(item.provider_label) }} -
                 {{ item.email }}
             </b-button>
 
@@ -99,6 +99,8 @@ import { sanitize } from "dompurify";
 import { userLogout } from "utils/logout";
 import Vue from "vue";
 
+import { capitalizeFirstLetter } from "@/utils/strings";
+
 import svc from "./service";
 
 import ExternalLogin from "components/User/ExternalIdentities/ExternalLogin.vue";
@@ -157,6 +159,9 @@ export default {
         Toast.success(notificationMessage);
     },
     methods: {
+        capitalizeAsTitle(str) {
+            return capitalizeFirstLetter(str);
+        },
         loadIdentities() {
             this.loading = true;
             svc.getIdentityProviders()
diff --git a/client/src/components/User/ExternalIdentities/ExternalLogin.vue b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
index d24b869ce488..c89310471ec1 100644
--- a/client/src/components/User/ExternalIdentities/ExternalLogin.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalLogin.vue
@@ -7,6 +7,7 @@ import Multiselect from "vue-multiselect";
 import { useConfig } from "@/composables/config";
 import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
+import { capitalizeFirstLetter } from "@/utils/strings";
 
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -282,7 +283,7 @@ function getIdpPreference() {
                                 {{ iDPInfo["label"].charAt(0).toUpperCase() + iDPInfo["label"].slice(1) }}
                             </span>
                             <span v-else>
-                                {{ idp.charAt(0).toUpperCase() + idp.slice(1) }}
+                                {{ capitalizeFirstLetter(idp) }}
                             </span>
                         </BButton>
                     </span>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index ff06ca1adf7d..2d41ffbe5445 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -7,6 +7,7 @@ import { type ComputedRef } from "vue";
 import { type components, GalaxyApi } from "@/api";
 import { getAppRoot } from "@/onload/loadConfig";
 import { errorMessageAsString } from "@/utils/simple-error";
+import { capitalizeFirstLetter } from "@/utils/strings";
 
 import LoadingSpan from "../LoadingSpan.vue";
 import HelpText from "@/components/Help/HelpText.vue";
@@ -369,12 +370,8 @@ const metrics = computed(() => {
     return Object.fromEntries(items.map((item) => [item.y_title, { spec: itemToSpec(item), item: item }]));
 });
 
-function getTimingInTitle(timing: string): string {
-    return timing.charAt(0).toUpperCase() + timing.slice(1);
-}
-
 const timingInTitles = computed(() => {
-    return getTimingInTitle(timing.value);
+    return capitalizeFirstLetter(timing.value);
 });
 
 const groupByInTitles = computed(() => {
@@ -391,9 +388,15 @@ const groupByInTitles = computed(() => {
             <BRow align-h="end" class="mb-2">
                 <BButtonGroup>
                     <b-dropdown right :text="'Timing: ' + timingInTitles">
-                        <b-dropdown-item @click="timing = 'seconds'">{{ getTimingInTitle("seconds") }}</b-dropdown-item>
-                        <b-dropdown-item @click="timing = 'minutes'">{{ getTimingInTitle("minutes") }}</b-dropdown-item>
-                        <b-dropdown-item @click="timing = 'hours'">{{ getTimingInTitle("hours") }}</b-dropdown-item>
+                        <b-dropdown-item @click="timing = 'seconds'">
+                            {{ capitalizeFirstLetter("seconds") }}
+                        </b-dropdown-item>
+                        <b-dropdown-item @click="timing = 'minutes'">
+                            {{ capitalizeFirstLetter("minutes") }}
+                        </b-dropdown-item>
+                        <b-dropdown-item @click="timing = 'hours'">
+                            {{ capitalizeFirstLetter("hours") }}
+                        </b-dropdown-item>
                     </b-dropdown>
                     <b-dropdown right :text="'Group By: ' + groupByInTitles">
                         <b-dropdown-item @click="groupBy = 'tool_id'">Tool</b-dropdown-item>
diff --git a/client/src/utils/strings.ts b/client/src/utils/strings.ts
index 52b706bf6de9..083e10029962 100644
--- a/client/src/utils/strings.ts
+++ b/client/src/utils/strings.ts
@@ -41,3 +41,11 @@ export function snakeCaseToTitleCase(str: string): string {
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(" ");
 }
+
+/**
+ * Capitalize the first letter of a string
+ */
+export function capitalizeFirstLetter(str: string): string {
+    str = str.trim();
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}