diff --git a/app/static/index.js b/app/static/index.js
index 8297074..c05bab3 100644
--- a/app/static/index.js
+++ b/app/static/index.js
@@ -1,71 +1,18 @@
-class LogScraperApp {
+class ScraperApp {
     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.getElementById('startButton');
-        
-        this.currentPage = 0;
-        this.linesPerPage = null;
-        this.autoRefreshInterval = null;
+        this.activityIndicator = document.getElementById('activity_indicator');
 
         this.init();
     }
 
-    async init() {
-        await this.fetchConfig();
-        await this.checkScrapingStatus();
+    init() {
+        this.checkScrapingStatus();
         this.addEventListeners();
     }
 
-    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 {
-                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');
@@ -73,19 +20,23 @@ class LogScraperApp {
             if (data.scraping_active) {
                 this.startButton.disabled = true;
                 this.stopButton.disabled = false;
-                this.startAutoRefresh();
+                this.activityIndicator.classList.remove('text-bg-danger');
+                this.activityIndicator.classList.add('text-bg-success');
+                this.activityIndicator.textContent = 'Active';
             } else {
                 this.startButton.disabled = false;
                 this.stopButton.disabled = true;
+                this.activityIndicator.classList.remove('text-bg-success');
+                this.activityIndicator.classList.add('text-bg-danger');
+                this.activityIndicator.textContent = 'Inactive';
             }
-            this.fetchLogs(this.currentPage);
         } catch (error) {
             console.error('Error checking scraping status:', error);
         }
     }
 
     async startScraping(event) {
-        event.preventDefault();
+        event.preventDefault(); // Prevent the default form submission
         const formData = new FormData(this.form);
         try {
             const response = await fetch('/start_scraping', {
@@ -93,12 +44,8 @@ class LogScraperApp {
                 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();
+                this.checkScrapingStatus();
             }
         } catch (error) {
             console.error('Error starting scraping:', error);
@@ -107,14 +54,12 @@ class LogScraperApp {
 
     async stopScraping() {
         try {
-            const response = await fetch('/stop_scraping', { method: 'POST' });
+            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();
+                this.checkScrapingStatus();
             }
         } catch (error) {
             console.error('Error stopping scraping:', error);
@@ -122,23 +67,10 @@ class LogScraperApp {
     }
 
     addEventListeners() {
-        this.prevPageButton.addEventListener('click', () => {
-            if (this.currentPage > 0) {
-                this.currentPage--;
-                this.fetchLogs(this.currentPage);
-            }
-        });
-
-        this.nextPageButton.addEventListener('click', () => {
-            this.currentPage++;
-            this.fetchLogs(this.currentPage);
-        });
-
         this.form.addEventListener('submit', (event) => this.startScraping(event));
-
         this.stopButton.addEventListener('click', () => this.stopScraping());
     }
 }
 
 // Initialize the application when DOM is fully loaded
-document.addEventListener('DOMContentLoaded', () => new LogScraperApp());
+document.addEventListener('DOMContentLoaded', () => new ScraperApp());
\ No newline at end of file
diff --git a/app/static/log_viewer.js b/app/static/log_viewer.js
new file mode 100644
index 0000000..8f40880
--- /dev/null
+++ b/app/static/log_viewer.js
@@ -0,0 +1,97 @@
+class LogViewerApp {
+    constructor() {
+        this.logsElement = document.getElementById('logs');
+        this.prevPageButton = document.getElementById('prevPage');
+        this.nextPageButton = document.getElementById('nextPage');
+        this.pageInfo = document.getElementById('pageInfo');
+        
+        this.currentPage = 0;
+        this.linesPerPage = null;
+        this.autoRefreshInterval = null;
+
+        this.init();
+    }
+
+    async init() {
+        await this.fetchConfig();
+        await this.checkScrapingStatus();
+        this.addEventListeners();
+    }
+
+    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 {
+                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.startAutoRefresh();
+            } else {
+                this.stopAutoRefresh();
+            }
+            this.fetchLogs(this.currentPage);
+        } catch (error) {
+            console.error('Error checking scraping status:', error);
+        }
+    }
+
+    addEventListeners() {
+        this.prevPageButton.addEventListener('click', () => {
+            if (this.currentPage > 0) {
+                this.currentPage--;
+                this.fetchLogs(this.currentPage);
+            }
+        });
+
+        this.nextPageButton.addEventListener('click', () => {
+            this.currentPage++;
+            this.fetchLogs(this.currentPage);
+        });
+    }
+}
+
+// Initialize the application when DOM is fully loaded
+document.addEventListener('DOMContentLoaded', () => new LogViewerApp());
\ No newline at end of file
diff --git a/app/templates/base.html b/app/templates/base.html
index a85aa5e..c2029a7 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -22,6 +22,9 @@
         {% block content %}
         {% endblock %}
     </main>
+    <footer>
+        {% include 'includes/footer.html' %}
+    </footer>
     {% block scripts %}
     {% include 'includes/scripts.html' %}
     {% endblock %}
diff --git a/app/templates/includes/footer.html b/app/templates/includes/footer.html
new file mode 100644
index 0000000..e69de29
diff --git a/app/templates/index.html b/app/templates/index.html
index b42d230..dcb5992 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -24,23 +24,5 @@
                 </div>
             </div>
         </section>
-        <section id="resultsContainer" class="container-fluid d-flex justify-content-center">
-            <div class="container-md my-5 mx-2 shadow-lg p-4" style="height: 500px;">
-                <div class="row">
-                    <div class="col-8">
-                        <h2>Logs</h2>
-                        <pre id="logs" class="pre-scrollable" style="height: 350px; overflow:scroll; "><code></code></pre>
-                        <div class="btn-group btn-group-sm">
-                            <button class="btn btn-primary" id="prevPage">Previous</button>
-                            <button class="btn btn-primary" id="pageInfo" disabled>Page 1 of 1</button>
-                            <button class="btn btn-primary" id="nextPage">Next</button>
-                        </div>
-                    </div>
-                    <div class="col">
-                        <h2>Stats</h2>
-                    </div>
-                </div>
-            </div>
-        </section>
         <script src="{{url_for('static', filename='index.js')}}"></script>
 {% endblock content %}
diff --git a/app/templates/log_viewer.html b/app/templates/log_viewer.html
index f111e7c..35ff6ad 100644
--- a/app/templates/log_viewer.html
+++ b/app/templates/log_viewer.html
@@ -1,3 +1,22 @@
 {% extends 'base.html' %}
 {% block content %}
+<section id="resultsContainer" class="container-fluid d-flex justify-content-center">
+    <div class="container-md my-5 mx-2 shadow-lg p-4" style="height: 500px;">
+        <div class="row">
+            <div class="col-8">
+                <h2>Logs</h2>
+                <pre id="logs" class="pre-scrollable" style="height: 350px; overflow:scroll;"><code></code></pre>
+                <div class="btn-group btn-group-sm">
+                    <button class="btn btn-primary" id="prevPage">Previous</button>
+                    <button class="btn btn-primary" id="pageInfo" disabled>Page 1 of 1</button>
+                    <button class="btn btn-primary" id="nextPage">Next</button>
+                </div>
+            </div>
+            <div class="col">
+                <h2>Stats</h2>
+            </div>
+        </div>
+    </div>
+</section>
+<script src="{{url_for('static', filename='log_viewer.js')}}"></script>
 {% endblock content %}
\ No newline at end of file