diff --git a/static/index.js b/static/index.js
index 1d94545..6e10f0d 100644
--- a/static/index.js
+++ b/static/index.js
@@ -4,34 +4,44 @@ document.addEventListener('DOMContentLoaded', () => {
     const logsElement = document.getElementById('logs');
     const prevPageButton = document.getElementById('prevPage');
     const nextPageButton = document.getElementById('nextPage');
+    const pageInfo = document.getElementById('pageInfo');
     let currentPage = 0;
-    const linesPerPage = 50;
+    let linesPerPage;
     let autoRefreshInterval;
 
-    if (form) {
-        console.log('Form:', form);
-        console.log('Submit button:', form.querySelector('button[type="submit"]'));
-    }
+    // Fetch the configuration value for linesPerPage
+    fetch('/config/lines_per_page')
+        .then(response => response.json())
+        .then(data => {
+            linesPerPage = data.lines_per_page;
+            // Initial fetch of logs after getting the config value
+            fetchLogs(currentPage);
+        });
 
     const fetchLogs = (page) => {
-        fetch(`/logfile?lines=${linesPerPage * (page + 1)}`)
+        fetch(`/logfile?page=${page}&lines_per_page=${linesPerPage}`)
             .then(response => response.json())
             .then(data => {
                 if (data.error) {
                     logsElement.textContent = data.error;
                 } else {
-                    // Reverse the order of log lines
-                    const reversedLogs = data.log.reverse();
-                    logsElement.textContent = reversedLogs.join('');
+                    logsElement.innerHTML = data.log.map((line, index) => {
+                        const lineNumber = data.start_line - index;
+                        return `<span class="line-number">${lineNumber}</span> ${line}`;
+                    }).join('');
+                    // Disable/enable pagination buttons based on the page number and total lines
+                    prevPageButton.disabled = page === 0;
+                    nextPageButton.disabled = (page + 1) * linesPerPage >= data.total_lines;
+                    pageInfo.textContent = `Page ${page + 1} of ${Math.ceil(data.total_lines / linesPerPage)}`;
                 }
             });
     };
 
-    const startAutoRefresh = () => {
+    function startAutoRefresh() {
         autoRefreshInterval = setInterval(() => {
             fetchLogs(currentPage);
         }, 5000); // Refresh every 5 seconds
-    };
+    }
 
     const stopAutoRefresh = () => {
         clearInterval(autoRefreshInterval);
diff --git a/templates/index.html b/templates/index.html
index 60a2233..057f18a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,7 +2,7 @@
 {% block content %}
         <section id="scrapingFormContainer" class="container-fluid d-flex justify-content-center">
             <div class="container-md my-5 mx-2 shadow-lg p-4 ">
-                <h2>Config</h2>
+                <h2>Config <span id="activity_indicator" class="badge text-bg-danger">Inactive</span></h2>
                 <form id="scrapingForm" method="POST" action="{{ url_for('start_scraping') }}">
                     {{ form.hidden_tag() }}
                     <div class="form-group">
@@ -43,6 +43,6 @@
             </div>
         </section>
         {% block scripts %}
-        <script src="{{url_for('static', filename='app.js')}}"></script>
+        <script src="{{url_for('static', filename='index.js')}}"></script>
         {% endblock %}    
 {% endblock content %}