diff --git a/static/index.js b/static/index.js
index 6e10f0d..d4b8389 100644
--- a/static/index.js
+++ b/static/index.js
@@ -1,118 +1,144 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const form = document.getElementById('scrapingForm');
-    const stopButton = document.getElementById('stopButton');
-    const logsElement = document.getElementById('logs');
-    const prevPageButton = document.getElementById('prevPage');
-    const nextPageButton = document.getElementById('nextPage');
-    const pageInfo = document.getElementById('pageInfo');
-    let currentPage = 0;
-    let linesPerPage;
-    let autoRefreshInterval;
+class LogScraperApp {
+    constructor() {
+        this.form = document.getElementById('scrapingForm');
+        this.stopButton = document.getElementById('stopButton');
+        this.logsElement = document.getElementById('logs');
+        this.prevPageButton = document.getElementById('prevPage');
+        this.nextPageButton = document.getElementById('nextPage');
+        this.pageInfo = document.getElementById('pageInfo');
+        this.startButton = document.querySelector('button[type="submit"]');
+        
+        this.currentPage = 0;
+        this.linesPerPage = null;
+        this.autoRefreshInterval = null;
 
-    // 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?page=${page}&lines_per_page=${linesPerPage}`)
-            .then(response => response.json())
-            .then(data => {
-                if (data.error) {
-                    logsElement.textContent = data.error;
-                } else {
-                    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)}`;
-                }
-            });
-    };
-
-    function startAutoRefresh() {
-        autoRefreshInterval = setInterval(() => {
-            fetchLogs(currentPage);
-        }, 5000); // Refresh every 5 seconds
+        this.init();
     }
 
-    const stopAutoRefresh = () => {
-        clearInterval(autoRefreshInterval);
-    };
+    async init() {
+        await this.fetchConfig();
+        await this.checkScrapingStatus();
+        this.addEventListeners();
+    }
 
-    // Check scraping status on page load
-    fetch('/scraping_status')
-        .then(response => response.json())
-        .then(data => {
-            if (data.scraping_active) {
-                startButton.disabled = true;
-                stopButton.disabled = false;
-                startAutoRefresh();  // Start auto-refresh if scraping is active
+    async fetchConfig() {
+        try {
+            const response = await fetch('/config/lines_per_page');
+            const data = await response.json();
+            this.linesPerPage = data.lines_per_page;
+            this.fetchLogs(this.currentPage);
+        } catch (error) {
+            console.error('Error fetching config:', error);
+        }
+    }
+
+    async fetchLogs(page) {
+        try {
+            const response = await fetch(`/logfile?page=${page}&lines_per_page=${this.linesPerPage}`);
+            const data = await response.json();
+            
+            if (data.error) {
+                this.logsElement.textContent = data.error;
             } else {
-                startButton.disabled = false;
-                stopButton.disabled = true;
+                this.logsElement.innerHTML = data.log.map((line, index) => {
+                    const lineNumber = data.start_line - index;
+                    return `<span class="line-number">${lineNumber}</span> ${line}`;
+                }).join('');
+
+                this.updatePagination(data.total_lines);
+            }
+        } catch (error) {
+            console.error('Error fetching logs:', error);
+        }
+    }
+
+    updatePagination(totalLines) {
+        this.prevPageButton.disabled = this.currentPage === 0;
+        this.nextPageButton.disabled = (this.currentPage + 1) * this.linesPerPage >= totalLines;
+        this.pageInfo.textContent = `Page ${this.currentPage + 1} of ${Math.ceil(totalLines / this.linesPerPage)}`;
+    }
+
+    startAutoRefresh() {
+        this.autoRefreshInterval = setInterval(() => this.fetchLogs(this.currentPage), 5000);
+    }
+
+    stopAutoRefresh() {
+        clearInterval(this.autoRefreshInterval);
+    }
+
+    async checkScrapingStatus() {
+        try {
+            const response = await fetch('/scraping_status');
+            const data = await response.json();
+            if (data.scraping_active) {
+                this.startButton.disabled = true;
+                this.stopButton.disabled = false;
+                this.startAutoRefresh();
+            } else {
+                this.startButton.disabled = false;
+                this.stopButton.disabled = true;
+            }
+            this.fetchLogs(this.currentPage);
+        } catch (error) {
+            console.error('Error checking scraping status:', error);
+        }
+    }
+
+    async startScraping(event) {
+        event.preventDefault();
+        const formData = new FormData(this.form);
+        try {
+            const response = await fetch('/start_scraping', {
+                method: 'POST',
+                body: formData
+            });
+            const data = await response.json();
+
+            console.log(data);
+            if (data.status === "Scraping started") {
+                this.startButton.disabled = true;
+                this.stopButton.disabled = false;
+                this.startAutoRefresh();
+            }
+        } catch (error) {
+            console.error('Error starting scraping:', error);
+        }
+    }
+
+    async stopScraping() {
+        try {
+            const response = await fetch('/stop_scraping', { method: 'POST' });
+            const data = await response.json();
+
+            console.log(data);
+            if (data.status === "Scraping stopped") {
+                this.startButton.disabled = false;
+                this.stopButton.disabled = true;
+                this.stopAutoRefresh();
+            }
+        } catch (error) {
+            console.error('Error stopping scraping:', error);
+        }
+    }
+
+    addEventListeners() {
+        this.prevPageButton.addEventListener('click', () => {
+            if (this.currentPage > 0) {
+                this.currentPage--;
+                this.fetchLogs(this.currentPage);
             }
-            fetchLogs(currentPage);
         });
 
-    prevPageButton.addEventListener('click', () => {
-        if (currentPage > 0) {
-            currentPage--;
-            fetchLogs(currentPage);
-        }
-    });
+        this.nextPageButton.addEventListener('click', () => {
+            this.currentPage++;
+            this.fetchLogs(this.currentPage);
+        });
 
-    nextPageButton.addEventListener('click', () => {
-        currentPage++;
-        fetchLogs(currentPage);
-    });
+        this.form.addEventListener('submit', (event) => this.startScraping(event));
 
-    form.addEventListener('submit', function(e) {
-        e.preventDefault();
-        const formData = new FormData(this);
+        this.stopButton.addEventListener('click', () => this.stopScraping());
+    }
+}
 
-        fetch('/start_scraping', {
-            method: 'POST',
-            body: formData
-        }).then(response => response.json())
-          .then(data => {
-              console.log(data);
-              const submitButton = form.querySelector('button[type="submit"]');
-              if (data.status === "Scraping started") {
-                  if (submitButton) {
-                      submitButton.disabled = true;
-                  }
-                  stopButton.disabled = false;
-                  startAutoRefresh();  // Start auto-refresh when scraping starts
-              } else {
-                  // Handle errors or other statuses
-              }
-          });
-    });
-
-    stopButton.addEventListener('click', function() {
-        fetch('/stop_scraping', {
-            method: 'POST'
-        }).then(response => response.json())
-          .then(data => {
-              console.log(data);
-              const submitButton = form.querySelector('button[type="submit"]');
-              if (data.status === "Scraping stopped") {
-                  if (submitButton) {
-                      submitButton.disabled = false;
-                  }
-                  stopButton.disabled = true;
-                  stopAutoRefresh();  // Stop auto-refresh when scraping stops
-              } else {
-                  // Handle errors or other statuses
-              }
-          });
-    });
-});
\ No newline at end of file
+// Initialize the application when DOM is fully loaded
+document.addEventListener('DOMContentLoaded', () => new LogScraperApp());