diff --git a/src/js/components/Stream.tsx b/src/js/components/Stream.tsx
index 6cbabc9..2810708 100644
--- a/src/js/components/Stream.tsx
+++ b/src/js/components/Stream.tsx
@@ -1,6 +1,6 @@
 import * as Quran from 'lib/Quran';
 import React, { useEffect } from 'react';
-import { TFunction } from 'lib/i18n';
+import { formatNumber, TFunction } from 'lib/i18n';
 import { Slice } from 'lib/Quran/Slice';
 import classNames from 'classnames';
 
@@ -25,10 +25,10 @@ export function Stream({ surah, stream, locale, slice, endOfStream, isPaused, t
       <li key={ayah.id} className="ayah fade">
         <span className="surah-id ayah-id">
           {t(locale, 'surah')}{' '}
-          {surah.id.toLocaleString(locale)}
+          {formatNumber(surah.id, locale)}
           {t(locale, 'comma')}{' '}
           {t(locale, 'ayah')}{' '}
-          {ayah.id.toLocaleString(locale)}
+          {formatNumber(ayah.id, locale)}
         </span>
         <p>{ayah.text}</p>
       </li>
diff --git a/src/js/pages/surah/index.tsx b/src/js/pages/surah/index.tsx
index 65347ba..e42f58b 100644
--- a/src/js/pages/surah/index.tsx
+++ b/src/js/pages/surah/index.tsx
@@ -6,7 +6,7 @@ import * as Quran from 'lib/Quran';
 import { SelectOption } from 'components/Select';
 import { ThemeSelect } from 'components/ThemeSelect';
 import { LanguageSelect } from 'components/LanguageSelect';
-import { i18n, TFunction } from 'lib/i18n';
+import { i18n, formatNumber, TFunction } from 'lib/i18n';
 
 interface Props {
   locale: Quran.Locale
@@ -35,7 +35,7 @@ function SurahIndex({ locale, surahs, t }: Props) {
           <li className="surah" key={key}>
             <a href={`/${locale}/${surah.slug}`}>
               <div className="surah id">
-                {surah.id.toLocaleString(locale)}
+                {formatNumber(surah.id, locale)}
               </div>
               <div className="surah name">
                 {surah.localizedName}