diff --git a/src/components/ActionPanel/ActionPanel.stories.js b/src/components/ActionPanel/ActionPanel.stories.js
index 94a2df294..49452b332 100644
--- a/src/components/ActionPanel/ActionPanel.stories.js
+++ b/src/components/ActionPanel/ActionPanel.stories.js
@@ -1,6 +1,6 @@
 import ActionPanel from './ActionPanel.vue';
 import './ActionPanelStories.less';
-import {useTranslation} from '@/composables/useTranslation';
+import {useLocalize} from '@/composables/useLocalize';
 import {useModalStore} from '@/stores/modalStore';
 export default {
 	title: 'Components/ActionPanel',
@@ -11,7 +11,7 @@ export const Default = {
 	render: (args) => ({
 		components: {ActionPanel},
 		setup() {
-			const {t} = useTranslation();
+			const {t} = useLocalize();
 			const modalStore = useModalStore();
 
 			function openDeleteDialog() {
diff --git a/src/components/Modal/SideModalBody.vue b/src/components/Modal/SideModalBody.vue
index 7d5f96589..be3bf45a3 100644
--- a/src/components/Modal/SideModalBody.vue
+++ b/src/components/Modal/SideModalBody.vue
@@ -67,10 +67,10 @@ import {DialogPanel, DialogTitle, DialogDescription} from '@headlessui/vue';
 import Icon from '@/components/Icon/Icon.vue';
 import PkpDialog from '@/components/Modal/Dialog.vue';
 
-import {useTranslation} from '@/composables/useTranslation';
+import {useLocalize} from '@/composables/useLocalize';
 import {useModalStore} from '@/stores/modalStore';
 
-const {t} = useTranslation();
+const {t} = useLocalize();
 
 const modalStore = useModalStore();
 
diff --git a/src/composables/useLocalize.js b/src/composables/useLocalize.js
new file mode 100644
index 000000000..b5c355fa9
--- /dev/null
+++ b/src/composables/useLocalize.js
@@ -0,0 +1,15 @@
+import {
+	t,
+	localize,
+	localizeSubmission,
+	getMomentLocale,
+} from '@/utils/i18n.js';
+/** Check detailed documentation in @/utils/i18n.js */
+export function useLocalize() {
+	return {
+		t,
+		localize,
+		localizeSubmission,
+		getMomentLocale,
+	};
+}
diff --git a/src/composables/useTranslation.mdx b/src/composables/useLocalize.mdx
similarity index 74%
rename from src/composables/useTranslation.mdx
rename to src/composables/useLocalize.mdx
index b2909b307..5c428a60a 100644
--- a/src/composables/useTranslation.mdx
+++ b/src/composables/useLocalize.mdx
@@ -1,8 +1,8 @@
 import {Meta} from '@storybook/blocks';
 
-<Meta title="Composables/useTranslation" />
+<Meta title="Composables/useLocalize" />
 
-# useTranslation
+# useLocalize
 
 ## t - translation
 
@@ -19,9 +19,9 @@ Get translation from the 'po' files, based on currently selected language.
 
 <script setup>
 	import {computed} from 'vue';
-	import {useTranslation} from '@/composables/useTranslation';
+	import {useLocalize} from '@/composables/useLocalize';
 
-	const {t} = useTranslation();
+	const {t} = useLocalize();
 
 	   const start = ref(5);
 	   const end = ref(15);
@@ -53,7 +53,7 @@ This method mimics the DataObject::getLocalizedData() method from the PHP backen
 
 <script setup>
 	import {defineProps} from 'vue';
-	import {useTranslation} from '@/composables/useTranslation';
+	import {useLocalize} from '@/composables/useLocalize';
 
 	defineProps({
 		publication: {
@@ -62,7 +62,7 @@ This method mimics the DataObject::getLocalizedData() method from the PHP backen
 		},
 	});
 
-	const {localize} = useTranslation();
+	const {localize} = useLocalize();
 </script>
 ```
 
@@ -73,7 +73,7 @@ When working with submissions, a component should use the localizeSubmission mix
 ```html
 <script setup>
 	import {defineProps, computed} from 'vue';
-	import {useTranslation} from '@/composables/useTranslation';
+	import {useLocalize} from '@/composables/useLocalize';
 
 	const props = defineProps({
 		submission: {
@@ -86,7 +86,7 @@ When working with submissions, a component should use the localizeSubmission mix
 		},
 	});
 
-	const {localizeSubmission} = useTranslation();
+	const {localizeSubmission} = useLocalize();
 
 	const title = computed(() =>
 		localizeSubmission(props.publication.title, props.submission.locale),
@@ -94,6 +94,18 @@ When working with submissions, a component should use the localizeSubmission mix
 </script>
 ```
 
-```
+## getMomentLocale
+
+When using moment, you should always use this method to localize the date.
 
+```html
+<script setup>
+	import {useLocalize} from '@/composables/useLocalize';
+
+	const {getMomentLocale} = useLocalize();
+
+	const timeSince = moment(timestamp)
+		.locale(getMomentLocale($.pkp.app.currentLocale))
+		.fromNow();
+</script>
 ```
diff --git a/src/composables/useTranslation.js b/src/composables/useTranslation.js
index f0e9dd770..4345325ba 100644
--- a/src/composables/useTranslation.js
+++ b/src/composables/useTranslation.js
@@ -1,9 +1,17 @@
-import {t, localize} from '@/utils/i18n.js';
+// TODO: Its renamed to useLocalize, remove this once code base is migrated to useLocalize
 
+import {
+	t,
+	localize,
+	localizeSubmission,
+	getMomentLocale,
+} from '@/utils/i18n.js';
 /** Check detailed documentation in @/utils/i18n.js */
 export function useTranslation() {
 	return {
 		t,
 		localize,
+		localizeSubmission,
+		getMomentLocale,
 	};
 }
diff --git a/src/docs/guide/Translation/Translation.mdx b/src/docs/guide/Translation/Translation.mdx
index 8bad3f5dc..b89679a90 100644
--- a/src/docs/guide/Translation/Translation.mdx
+++ b/src/docs/guide/Translation/Translation.mdx
@@ -6,7 +6,7 @@ import {Meta} from '@storybook/blocks';
 
 ## Usage
 
-Check [useTranslation](../?path=/docs/composables-usetranslation--docs) composable for example, how to display translated string.
+Check [useLocalize](../?path=/docs/composables-useLocalize--docs) composable for example, how to display translated string.
 
 ## Development workflow
 
@@ -38,7 +38,7 @@ When page is being loaded, translations are fetched separately from the `/index.
 
 ## Usage
 
-Check [useTranslation](../?path=/docs/composables-usetranslation--docs) composable for example.
+Check [useLocalize](../?path=/docs/composables-useLocalize--docs) composable for example.
 
 Multilingual data is usually provided as a JSON object. Each key holds the locale code. The following response shows the name property of a journal in English and Canadian French.
 
diff --git a/src/mixins/localStorage.mdx b/src/mixins/localStorage.mdx
index 0320db8f4..b5f5502f6 100644
--- a/src/mixins/localStorage.mdx
+++ b/src/mixins/localStorage.mdx
@@ -4,7 +4,7 @@ import {Meta} from '@storybook/blocks';
 
 # localStorage
 
-**Mixins are [deprecated](../?path=/docs/guide-technical-roadmap--docs#vue3-composition-api-35) in favour of composables, for autosave its yet to be introduced when needed.**
+**Mixins are [deprecated](../?path=/docs/guide-technical-roadmap--docs#vue3-composition-api-35) in favour of composables, for localStorage its yet to be introduced when needed.**
 
 This mixin provides helper functions to read and write to the browser's [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Check whether the local storage is enabled in the browser before you read or write to it.
 
diff --git a/src/mixins/localizeMoment.mdx b/src/mixins/localizeMoment.mdx
index 643e06361..5c4aaf72b 100644
--- a/src/mixins/localizeMoment.mdx
+++ b/src/mixins/localizeMoment.mdx
@@ -2,7 +2,7 @@ import {Meta} from '@storybook/blocks';
 
 <Meta title="Mixins/localizeMoment" />
 
-**Mixins are [deprecated](../?path=/docs/guide-technical-roadmap--docs#vue3-composition-api-35) in favour of composables, for autosave its yet to be introduced when needed.**
+**Mixins are [deprecated](../?path=/docs/guide-technical-roadmap--docs#vue3-composition-api-35) in favour of composables. Use [useLocalize](../?path=/docs/composables-useLocalize--docs#getmomentlocale) composable, which provides equivalent function.**
 
 This mixin provides a single helper function to map PKP's application locale codes to those used in [moment.js](https://momentjs.com/). When using moment, you should always use this method to localize the date.
 
diff --git a/src/pages/submissions/submissionsPageStore.js b/src/pages/submissions/submissionsPageStore.js
index f25476849..e75944f16 100644
--- a/src/pages/submissions/submissionsPageStore.js
+++ b/src/pages/submissions/submissionsPageStore.js
@@ -2,7 +2,7 @@ import {computed, ref, watch} from 'vue';
 import {useFetchPaginated} from '@/composables/useFetchPaginated';
 import {useFiltersForm} from '@/composables/useFiltersForm';
 import {useSorting} from '@/composables/useSorting';
-import {useTranslation} from '@/composables/useTranslation';
+import {useLocalize} from '@/composables/useLocalize';
 import {useAnnouncer} from '@/composables/useAnnouncer';
 import {useUrlSearchParams} from '@vueuse/core';
 import {defineComponentStore} from '@/utils/defineComponentStore';
@@ -14,7 +14,7 @@ export const useSubmissionsPageStore = defineComponentStore(
 		 * Translation
 		 */
 
-		const {t} = useTranslation();
+		const {t} = useLocalize();
 
 		/** Announcer */
 
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index 4b22cfcd7..0a9ae5dc2 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -163,3 +163,21 @@ export function localizeSubmission(localizedString, submissionLocale) {
 
 	return '';
 }
+
+/**
+ * Get the Moment.js locale for a PKP locale
+ *
+ * This only maps the locales that need to be translated.
+ * Most PKP locales work fine in Moment.js.
+ *
+ * @param {String} locale The PKP locale, eg - `sr_RS@cyrillic`
+ */
+export function getMomentLocale(locale) {
+	const map = {
+		'sr_RS@latin': 'sr',
+		'sr_RS@cyrillic': 'sr-cyrl',
+		'uz_UZ@latin': 'uz-latn',
+	};
+
+	return map[locale] ?? locale;
+}