diff --git a/index.html b/index.html
index 30154c9c1..4c816cc8b 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSV Explorer</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
     <script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
@@ -10,9 +9,9 @@
     <style>
         body {
             display: flex;
-            height: 100%;
+            height: 100vh;
             margin: 0;
-            background-color: #0d1b2a; /* Dark background for the page */
+            background-color: #0d1b2a;
         }
         .sidebar {
             width: 250px;
@@ -40,7 +39,7 @@
             background: #3f5f5f;
         }
         #example {
-            height: calc(100vh - 40px); /* Full height of the remaining space */
+            height: calc(100vh - 40px);
         }
         .loading {
             text-align: center;
@@ -66,66 +65,91 @@ <h3>CSV Files</h3>
             loadCSVFiles();
         });
 
+        function getRepoInfo() {
+            const host = window.location.host;
+            const path = window.location.pathname;
+
+            let githubUsername, repoName;
+
+            // Check if the URL is in the format of GitHub Pages
+            if (host.endsWith('.github.io')) {
+                githubUsername = host.split('.github.io')[0];
+
+                const pathParts = path.split('/').filter(part => part);
+
+                if (pathParts.length > 0) {
+                    // URL is in the format: username.github.io/repoName/
+                    repoName = pathParts[0];
+                } else {
+                    // URL is in the format: username.github.io/
+                    repoName = `${githubUsername}.github.io`;
+                }
+            } else {
+                console.error('This script must be run on a GitHub Pages site.');
+                return null;
+            }
+
+            return {
+                githubUsername,
+                repoName,
+                branchName: 'main' // Assuming 'main'; you can adjust as needed
+            };
+        }
+
         function loadCSVFiles() {
-            // Fetch the list of CSV files from your server or backend
-            fetch('/api/list_csv') // Update this to point to your actual API endpoint
+            const repoInfo = getRepoInfo();
+            if (!repoInfo) {
+                alert('Failed to retrieve repository information.');
+                return;
+            }
+
+            const { githubUsername, repoName, branchName } = repoInfo;
+            const apiUrl = `https://api.github.com/repos/${githubUsername}/${repoName}/git/trees/${branchName}?recursive=1`;
+
+            fetch(apiUrl)
                 .then(response => response.json())
                 .then(data => {
+                    if (data.truncated) {
+                        console.error('The repository is too large to retrieve file list via GitHub API.');
+                        return;
+                    }
+
+                    const csvFiles = data.tree.filter(file => file.path.endsWith('.csv'));
                     const csvList = document.getElementById('csvList');
-                    data.csv_files.forEach(file => {
+
+                    csvFiles.forEach(file => {
                         const div = document.createElement('div');
                         div.className = 'csv-file';
-                        div.textContent = file;
-                        div.onclick = () => loadCSV(file);
+                        div.textContent = file.path;
+                        div.onclick = () => loadCSV(file.path, githubUsername, repoName, branchName);
                         csvList.appendChild(div);
                     });
                 })
                 .catch(error => console.error('Error loading CSV list:', error));
         }
 
-        function loadCSV(filePath) {
-            // Show loading indicator
+        function loadCSV(filePath, githubUsername, repoName, branchName) {
             document.getElementById('loadingIndicator').style.display = 'block';
 
-            // Reset previous Handsontable instance
             if (window.hot) {
                 window.hot.destroy();
             }
 
-            fetch(`/api/load_csv_paginated?file_path=${filePath}&offset=0&limit=100`) // Initial chunk
-                .then(response => response.json())
-                .then(data => {
-                    const { columns, data: rows } = data;
-                    createHandsontable(rows, columns);
-
-                    // Setup infinite scroll
-                    let offset = 100;
-                    const limit = 100;
-                    const exampleDiv = document.getElementById('example');
-
-                    exampleDiv.onscroll = () => {
-                        if (exampleDiv.scrollTop + exampleDiv.clientHeight >= exampleDiv.scrollHeight) {
-                            // Load the next chunk of rows
-                            fetch(`/api/load_csv_paginated?file_path=${filePath}&offset=${offset}&limit=${limit}`)
-                                .then(response => response.json())
-                                .then(newData => {
-                                    if (newData.data.length > 0) {
-                                        window.hot.loadData([...window.hot.getData(), ...newData.data]);
-                                        offset += limit;
-                                    }
-                                })
-                                .catch(error => console.error('Error loading additional CSV rows:', error));
-                        }
-                    };
-                })
-                .finally(() => {
-                    // Hide loading indicator once loading is complete
+            const rawUrl = `https://raw.githubusercontent.com/${githubUsername}/${repoName}/${branchName}/${filePath}`;
+
+            Papa.parse(rawUrl, {
+                download: true,
+                header: true,
+                skipEmptyLines: true,
+                complete: function(results) {
+                    createHandsontable(results.data, results.meta.fields);
                     document.getElementById('loadingIndicator').style.display = 'none';
-                })
-                .catch(error => {
-                    console.error('Error loading the CSV file:', error);
+                },
+                error: function(error) {
+                    console.error('Error parsing CSV file:', error);
                     document.getElementById('loadingIndicator').style.display = 'none';
-                });
+                }
+            });
         }
 
         function createHandsontable(data, colHeaders) {
@@ -139,7 +163,7 @@ <h3>CSV Files</h3>
                     type: 'text',
                     title: header
                 })),
-                licenseKey: 'non-commercial-and-evaluation', // Specify the license key here
+                licenseKey: 'non-commercial-and-evaluation',
                 colWidths: 150,
                 rowHeights: 23,
                 manualColumnResize: true,
