diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index dca3d18..6b415a1 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -6,9 +6,12 @@ const generateEndpoint = '/api/generate';
 const userInput = document.getElementById('userInput');
 const sendButton = document.getElementById('sendButton');
 const outputArea = document.getElementById('outputArea');
+const loadingSpinner = document.getElementById('loadingSpinner');
+const darkModeToggle = document.getElementById('darkModeToggle');
 
 // Functions
 async function sendGen() {
+    loadingSpinner.classList.remove('hidden');
     outputArea.innerHTML = '<span class="text-blue-500">Generating... (please be patient, streaming responses are not enabled yet...)</span>';
     const response = await fetch(`${llmHost}${generateEndpoint}`, {
         method: 'POST',
@@ -51,6 +54,7 @@ async function readResponse(response) {
                             cleanResponse.push(JSONline.response);
                         }
                     }
+                    loadingSpinner.classList.add('hidden');
                     outputArea.innerHTML = cleanResponse.join('');
                     return;
                 }
@@ -63,6 +67,11 @@ async function readResponse(response) {
     }
 }
 
+
+darkModeToggle.addEventListener('click', () => {
+    document.body.classList.toggle('dark');
+});
+
 // Event listeners
 sendButton.addEventListener('click', async () => {
     outputArea.innerHTML = '';
diff --git a/src/index.html b/src/index.html
index 5c90f38..c2b29f5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,17 +3,54 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LLM Interaction WebApp</title>
+    <title>voidGPT</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#1e293b',
+                    },
+                },
+            },
+        };
+    </script>
 </head>
-<body class="bg-gray-100 flex items-center justify-center min-h-screen">
-    <div class="bg-white shadow-md rounded-lg p-6 w-full max-w-lg">
-        <h1 class="text-2xl font-bold mb-4 text-gray-800">Interact with LLM</h1>
-        <textarea id="userInput" rows="4" class="w-full border border-gray-300 rounded-lg p-2 focus:ring focus:ring-blue-500" placeholder="Type your prompt here..."></textarea>
-        <button id="sendButton" class="mt-4 w-full bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600">Send</button>
-        <div id="outputArea" class="mt-6 bg-gray-100 border border-gray-300 rounded-lg p-4 h-48 overflow-y-auto"></div>
-    </div>
+<body class="bg-gray-100 dark:bg-secondary flex items-center justify-center min-h-screen">
+    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 w-full max-w-lg">
+        <!-- Header with Dark Mode Toggle -->
+        <div class="flex justify-between items-center mb-6">
+            <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Interact with LLM</h1>
+            <button id="darkModeToggle" 
+                class="bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 p-2 rounded-full">
+                🌙
+            </button>
+        </div>
 
-    <script src="./assets/js/main.js"></script>
+        <!-- Prompt Input Area -->
+        <textarea id="userInput" rows="4" 
+            class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-lg p-3 focus:ring focus:ring-primary focus:outline-none" 
+            placeholder="Type your prompt here..."></textarea>
+
+        <!-- Send Button -->
+        <button id="sendButton" 
+            class="mt-4 w-full bg-primary text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600">
+            Send
+        </button>
+
+        <!-- Output Area -->
+        <div id="outputArea" 
+            class="mt-6 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg p-4 h-48 overflow-y-auto text-gray-800 dark:text-gray-100">
+        </div>
+
+        <!-- Loading Spinner -->
+        <div id="loadingSpinner" 
+            class="hidden mt-4 flex justify-center items-center">
+            <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+        </div>
+    </div>
 </body>
 </html>
