diff --git a/src/js/components/SurahIndex/index.tsx b/src/js/components/SurahIndex/index.tsx
index 25dc7d74c..213934914 100644
--- a/src/js/components/SurahIndex/index.tsx
+++ b/src/js/components/SurahIndex/index.tsx
@@ -54,7 +54,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
               href={`/${locale.name}/${surah.urlName}/`}
             >
               {locale.direction === "ltr" ? (
-                <span className="color-secondary font-extrabold w-10 text-center">
+                <span className="background-secondary color-white ml-2 mr-3 font-extrabold w-10 text-center">
                   {formatNumber(locale, surah.id)}
                 </span>
               ) : (
diff --git a/src/js/components/SurahStream/Stream.tsx b/src/js/components/SurahStream/Stream.tsx
index abd10fa89..278059a46 100644
--- a/src/js/components/SurahStream/Stream.tsx
+++ b/src/js/components/SurahStream/Stream.tsx
@@ -61,7 +61,7 @@ export function Stream({
                 />
                 <span
                   className={classNames({
-                    "background-primary color-white pr-3 pl-3 rounded border-black": isRTL,
+                    "color-primary font-extrabold": isRTL,
                   })}
                 >
                   {t(locale, "surah")} {formatNumber(locale, surah.id)}