diff --git a/.gitignore b/.gitignore
index a9a0d7d..33a4904 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
 /packages/typescript/**/dist/
 /rake/tasks/deploy.rake
 /.gems/
+/submodules/quran-json/
 /crash.log
 node_modules/
 *.core
diff --git a/nanoc/rules/stream.rules b/nanoc/rules/stream.rules
index e03caa2..476844e 100644
--- a/nanoc/rules/stream.rules
+++ b/nanoc/rules/stream.rules
@@ -5,7 +5,7 @@
 # Contains rules for the the surah stream available
 # at /<locale>/<name>/, /<locale>/<id>/
 
-compile "/json/*/*/surah.json" do
+compile "/json/*/*/{surah,info}.json" do
   write(item.identifier.to_s)
   if File.size(item.raw_filename) > (1024 * 10)
     filter :gzip
diff --git a/src/js/loaders/SurahStreamLoader.ts b/src/js/loaders/SurahStreamLoader.ts
index 644b34a..bc1bcff 100644
--- a/src/js/loaders/SurahStreamLoader.ts
+++ b/src/js/loaders/SurahStreamLoader.ts
@@ -13,7 +13,8 @@ import postman, { item } from "postman";
     item.css("/css/main/surah-stream.css"),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
     item.font("Mada Regular", "url(/fonts/mada-regular.ttf"),
-    item.json(`/json/${locale}/${surahId}/surah.json`, { className: "surah" }),
+    item.json(`/json/${locale}/${surahId}/info.json`, { className: "json surahinfo" }),
+    item.json(`/json/${locale}/${surahId}/surah.json`, { className: "json surah" }),
     item.progress((percent: number) => {
       progressBar.value = percent;
       progressNumber.innerText = `${percent.toFixed(0)}%`;
diff --git a/src/js/main/surah-stream.tsx b/src/js/main/surah-stream.tsx
index c8574e7..513316f 100644
--- a/src/js/main/surah-stream.tsx
+++ b/src/js/main/surah-stream.tsx
@@ -1,4 +1,4 @@
-import { Surah, Ayah, TSurah, TLocale } from "Quran";
+import { Surah, Ayah, TAyat, TSurah, TLocale } from "Quran";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { T } from "~/lib/t";
@@ -12,18 +12,20 @@ import { SurahStream } from "~/components/SurahStream";
   /*
    * Configure an instance of Surah
    */
-  const node1: HTMLScriptElement = document.querySelector("script.surah")!;
-  const node2: HTMLScriptElement = document.querySelector(".json.durations")!;
-  const blob1: [TSurah, [number, string]] = JSON.parse(node1.innerText)!;
-  const blob2: Array<[number, number]> = JSON.parse(node2.innerText)!;
-  const surah = new Surah(blob1[0]);
-  for (let i = 1; i < blob1.length; i++) {
-    const [id, body] = blob1[i] as [number, string];
+  const node1: HTMLScriptElement = document.querySelector(".json.surahinfo")!;
+  const node2: HTMLScriptElement = document.querySelector(".json.surah")!;
+  const node3: HTMLScriptElement = document.querySelector(".json.durations")!;
+  const blob1: TSurah = JSON.parse(node1.innerText)!;
+  const blob2: [number, string][] = JSON.parse(node2.innerText)!;
+  const blob3: [number, number][] = JSON.parse(node3.innerText)!;
+  const surah = new Surah(blob1);
+  for (let i = 0; i < blob2.length; i++) {
+    const [id, body] = blob2[i] as [number, string];
     surah.ayat.push(new Ayah({ id, body }));
   }
   for (let i = 0; i < surah.ayat.length; i++) {
     const ayah = surah.ayat[i];
-    const [, ms] = blob2[i];
+    const [, ms] = blob3[i];
     ayah.ms = ms * 1000;
   }