diff --git a/public/examples/4f187905-c47e-4ebd-a095-ba254e8bfd80.json b/public/examples/4f187905-c47e-4ebd-a095-ba254e8bfd80.json
new file mode 100644
index 0000000..27d61b7
--- /dev/null
+++ b/public/examples/4f187905-c47e-4ebd-a095-ba254e8bfd80.json
@@ -0,0 +1,33 @@
+{
+  "demoName": "Batch Payments flow from PHEE - Mifos X",
+  "demoDescription": "End-to-end batch payment flow from Payment Hub EE to Mifos X",
+  "tags": ["MifosX", "Phee"],
+  "steps": {
+    "1": {
+      "title": "Login to Ops Web",
+      "url": "http://ops.mifos.gazelle.test",
+      "details": "Login with default credentials to access the Payment Hub EE Operations Web"
+    },
+    "2": {
+      "title": "Upload Batch CSV",
+      "url": "http://ops.mifos.gazelle.test",
+      "details": "Upload the pre-generated bulk payment CSV file for the batch transaction"
+    },
+    "3": {
+      "title": "Approve the Batch",
+      "url": "http://ops.mifos.gazelle.test",
+      "details": "Review and approve the batch payment request"
+    },
+    "4": {
+      "title": "Monitor Batch Status",
+      "url": "http://ops.mifos.gazelle.test",
+      "details": "Monitor the batch processing status until completion"
+    },
+    "5": {
+      "title": "Verify Payments in MifosX",
+      "url": "http://mifos.mifos.gazelle.test",
+      "details": "Login to MifosX and verify the payments have been received"
+    }
+  },
+  "demoId": "4f187905-c47e-4ebd-a095-ba254e8bfd80"
+}
diff --git a/public/examples/metadata.json b/public/examples/metadata.json
new file mode 100644
index 0000000..a13253e
--- /dev/null
+++ b/public/examples/metadata.json
@@ -0,0 +1,18 @@
+{
+  "demos": [
+    {
+      "demoId": "4f187905-c47e-4ebd-a095-ba254e8bfd80",
+      "name": "Batch Payments flow from PHEE - Mifos X",
+      "file_name": "batch_payments_flow_from_phee__mifos_x.json",
+      "description": "End-to-end batch payment flow from Payment Hub EE to Mifos X",
+      "version": 1,
+      "steps_count": 5,
+      "created_at": "2026-04-20T09:42:33Z",
+      "updated_at": "2026-04-22T11:03:55Z",
+      "created_by": "kanishk05",
+      "last_modified_by": "kanishk05",
+      "deleted": false,
+      "tags": ["MifosX", "Phee"]
+    }
+  ]
+}
diff --git a/src/lib/api/fetchDemoData.ts b/src/lib/api/fetchDemoData.ts
index b52b180..5f3fa76 100644
--- a/src/lib/api/fetchDemoData.ts
+++ b/src/lib/api/fetchDemoData.ts
@@ -1,9 +1,19 @@
 import axios from 'axios';
 
 export const fetchDemoData = async (demotitle: string) => {
-  const response = await axios.get(`${import.meta.env.VITE_API_URL}/demoData`, {
-    params: { demotitle },
+  if (import.meta.env.VITE_API_URL) {
+    const response = await axios.get(
+      `${import.meta.env.VITE_API_URL}/demoData`,
+      { params: { demotitle } }
+    );
+    return response.data;
+  }
+
+  // Fallback to local examples when VITE_API_URL is not set
+  // demotitle is the demoId from the URL path
+  const response = await fetch(`/examples/${demotitle}.json`, {
+    headers: { Accept: 'application/json' },
   });
-  console.log(response);
-  return response.data;
+  const data = await response.json();
+  return data;
 };
diff --git a/src/lib/api/fetchDemoListData.ts b/src/lib/api/fetchDemoListData.ts
index c4a3465..09b08c4 100644
--- a/src/lib/api/fetchDemoListData.ts
+++ b/src/lib/api/fetchDemoListData.ts
@@ -1,6 +1,16 @@
 import axios from 'axios';
 
 export const fetchDemoListData = async () => {
-  const response = await axios.get(`${import.meta.env.VITE_API_URL}/demoList`);
-  return response.data.demos;
+  if (import.meta.env.VITE_API_URL) {
+    const response = await axios.get(
+      `${import.meta.env.VITE_API_URL}/demoList`
+    );
+    return response.data.demos;
+  }
+
+  // Fallback to local examples when VITE_API_URL is not set
+  const response = await axios.get('/examples/metadata.json');
+  return response.data.demos.filter(
+    (demo: { deleted: boolean }) => !demo.deleted
+  );
 };
diff --git a/src/pages/demo/demo-page.tsx b/src/pages/demo/demo-page.tsx
index 63264c6..a95e661 100644
--- a/src/pages/demo/demo-page.tsx
+++ b/src/pages/demo/demo-page.tsx
@@ -41,7 +41,7 @@ export const DemoPage = () => {
 
   useEffect(() => {
     setIsLoading(true);
-    const demoTitle = location.pathname.split('/')[3];
+    const demoTitle = location.pathname.split('/')[2];
     fetchDemoData(demoTitle)
       .then(demodatajson => {
         const steps = Object.entries(demodatajson.steps)