diff --git a/README.md b/README.md
index 7b463925..92ac028f 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ Watch usage videos [Usage Videos](https://www.youtube.com/watch?v=DCBefhJUUh4&ab
 
 Watch settings videos [Usage Videos](https://www.youtube.com/watch?v=7KwR2vdt1t4&t=63s&ab_channel=ParisNeo)
 
-![image](https://user-images.githubusercontent.com/827993/231911545-750c8293-58e4-4fac-8b34-f5c0d57a2f7d.png)
+![image](https://user-images.githubusercontent.com/58695202/233015758-2396925c-1721-4a0e-81d1-dcc181a6017b.png)
 
 GPT4All is an exceptional language model, designed and developed by Nomic-AI, a proficient company dedicated to natural language processing. The app uses Nomic-AI's advanced library to communicate with the cutting-edge GPT4All model, which operates locally on the user's PC, ensuring seamless and efficient communication.
 
diff --git a/static/js/discussions.js b/static/js/discussions.js
index 54194dd4..81c20cb8 100644
--- a/static/js/discussions.js
+++ b/static/js/discussions.js
@@ -54,10 +54,10 @@ function populate_discussions_list()
       discussions.forEach(discussion => {
         const buttonWrapper = document.createElement('div');
         //buttonWrapper.classList.add('flex', 'space-x-2', 'mt-2');
-        buttonWrapper.classList.add('drop-shadow-sm', 'p-1', 'mx-2', 'my-2', 'flex', 'flex-row', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-800', 'hover:bg-gray-700', 'transition-colors', 'duration-300', 'text-left');
+        buttonWrapper.classList.add('drop-shadow-sm', 'p-1', 'mx-2', 'my-2', 'flex', 'flex-row', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-200', 'dark:bg-gray-800', 'transition-colors', 'duration-300', 'text-left');
         
         const renameButton = document.createElement('button');
-        renameButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
+        renameButton.classList.add('bg-gray-400', 'hover:bg-gray-800', 'dark:hover:bg-gray-700', 'text-white', 'dark:text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
         const renameImg = document.createElement('img');
         renameImg.src = "/static/images/edit_discussion.png";
         renameButton.title = "Rename discussion";
@@ -86,7 +86,7 @@ function populate_discussions_list()
           });
 
           const renameConfirmButton = document.createElement('button');
-          renameConfirmButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-1', 'px-0', 'rounded', 'ml-2');
+          renameConfirmButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'dark:text-white', 'font-bold', 'py-1', 'px-0', 'rounded', 'ml-2');
           renameConfirmButton.textContent = 'Rename';
           renameConfirmButton.addEventListener('click', () => {
             const newTitle = inputField.value;
@@ -122,7 +122,7 @@ function populate_discussions_list()
           dialog.showModal();
         });
         const deleteButton = document.createElement('button');
-        deleteButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
+        deleteButton.classList.add('bg-gray-400', 'hover:bg-gray-800', 'dark:hover:bg-gray-700', 'text-black', 'dark:text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10");
         const deleteImg = document.createElement('img');
         deleteImg.src = "/static/images/delete_discussion.png";
         deleteButton.title = "Delete discussion";
@@ -156,7 +156,7 @@ function populate_discussions_list()
         });
 
         const discussionButton = document.createElement('button');
-        discussionButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full');
+        discussionButton.classList.add('bg-gray-400', 'hover:bg-gray-800', 'dark:hover:bg-gray-700', 'text-black', 'dark:text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full');
         discussionButton.textContent = discussion.title;
         discussionButton.title = "Open discussion";
         discussionButton.addEventListener('click', () => {
diff --git a/templates/extensions.html b/templates/extensions.html
index ce856e95..1c6daa23 100644
--- a/templates/extensions.html
+++ b/templates/extensions.html
@@ -1,12 +1,12 @@
 
-<form id="model-params-form" class="bg-gray-700 shadow-md rounded px-8 py-8 pt-6 pb-8 mb-4 text-white">
+<form id="model-params-form" class="bg-gray-50 dark:bg-gray-700 shadow-md rounded px-8 py-8 pt-6 pb-8 mb-4 text-black dark:text-white">
     <div></div>
     <div class="mb-4">
         <button type="submit" id="submit-model-params" class="my-1 mx-1 outline-none px-4 bg-accent rounded-md bg-gray-500 hover:bg-gray-300 transition-colors ease-in-out">save extensions settings</button>
     </div>
 </form>
 
-<footer class="bottom-0">
+<footer class="bottom-0 text-black dark:text-white">
     This section is under development. Stay tuned.<br>
     To have a glimpse of what extensions and options will be added, please look at my chatgpt-personality-selector google chrome extension:<br>
     <br>
diff --git a/templates/help.html b/templates/help.html
index 27ab7301..9bf5bb78 100644
--- a/templates/help.html
+++ b/templates/help.html
@@ -16,7 +16,7 @@
 
 <body>
   <!-- Navbar -->
-  <nav class="flex justify-between items-center bg-gray-200 dark:bg-gray-900 text-white p-4">
+  <nav class="flex justify-between items-center bg-gray-200 dark:bg-gray-900 text-black dark:text-white p-4">
     <a href="/" class="text-lg font-bold">GPT4All-ui</a>
     <!-- Dropdown menu -->
     <div class="relative">
@@ -38,13 +38,13 @@
   </nav>
 
   <!-- Credits section -->
-  <section id="credits" class="mb-8">
+  <section id="credits" class="mb-8 ml-4 text-black dark:text-white">
     <h2 class="text-2xl font-bold mb-4">Credits</h2>
     <p class="mb-4">Here are the developers who worked on this website:</p>
     <ul class="list-disc list-inside mb-4">
       <li>@ParisNeo : Creator of the project and Lead developer</li>
       <li>@AndriyMulyar : CEO of Nomic-ai who offered to link the project as their official ui for GPT4All</li>
-      <li><a href="https://github.com/nomic-ai/gpt4all-ui/graphs/contributors" class="text-blue-100">A number of very talented open-source developers without whom this project wouldn't be as awesome as it is.</a></li>
+      <li><a href="https://github.com/nomic-ai/gpt4all-ui/graphs/contributors" target="_blank" class="text-blue-900 dark:text-blue-600">A number of very talented open-source developers without whom this project wouldn't be as awesome as it is.</a></li>
       <li> We also appreciate the support of the users of this tool who have helped us in various ways.</li>
     </ul>
 
@@ -59,7 +59,7 @@
   </section>
 
   <!-- How to use section -->
-  <section id="how-to-use" class="mb-8">
+  <section id="how-to-use" class="mb-8 ml-4 text-black dark:text-white">
     <h2 class="text-2xl font-bold mb-4">How to use</h2>
     <ol class="list-decimal list-inside mb-4">
       <li>Step 1: Write your prompt.</li>
@@ -78,8 +78,8 @@
 
   <!-- FAQ section -->
   <section id="faq">
-    <h2 class="text-2xl font-bold mb-4">Frequently Asked Questions (FAQ)</h2>
-    <dl class="mb-8">
+    <h2 class="text-2xl font-bold mb-4 ml-4 text-black dark:text-white">Frequently Asked Questions (FAQ)</h2>
+    <dl class="mb-8 ml-4 text-black dark:text-white">
       <div class="mb-4">
         <dt class="font-bold">How to install?</dt>
         <dd>Download the model from the github then use install.bat for windows and install.sh for linux/macOsX.</dd>
@@ -87,8 +87,8 @@
     </dl>
   </section>
   <section id="examples">
-    <h2 class="text-2xl font-bold mb-4">Usage examples</h2>
-    <dl class="mb-8">
+    <h2 class="text-2xl font-bold mb-4 ml-4 text-black dark:text-white">Usage examples</h2>
+    <dl class="mb-8 ml-4 text-black dark:text-white">
       <div class="mb-4">
         <dt class="font-bold">Casual discussion</dt>
         <dd>Hello, my name is (put your name here).</dd>
diff --git a/templates/index.html b/templates/index.html
index 129411ca..78f9e4be 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -15,7 +15,7 @@
     <div class="flex">
       <div class="w-12 h-12"><a href="#main"><img src="{{ url_for('static', filename='images/icon.png') }}"></a></div>
       <div class="contents">
-        <button id="theme-toggle" type="button" class="ml-5 bg-gray-200 border-black border-2 dark:bg-gray-700 dark:border-white hover:bg-gray-300 dark:hover:bg-gray-500 rounded-lg text-sm p-2.5">
+        <button id="theme-toggle" type="button" class="ml-5 bg-gray-200 dark:bg-gray-900 hover:bg-gray-300 dark:hover:bg-gray-500 rounded-lg text-sm p-2.5">
           <img id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" src="{{ url_for('static', filename='images/dark.svg') }}"></img>
           <img id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" src="{{ url_for('static', filename='images/light.svg') }}"></img>
         </button>
@@ -23,23 +23,23 @@
     </div>
     <h1 class="text-2xl text-black dark:text-white">GPT4ALL - WEBUI</h1>
   </div>
-  <div class="content-center items-center">
+  <div class="content-center items-center mt-4">
     <ul class="flex
     content-center items-center">
       <li class="mr-1">
-        <a href="#main" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="main-link">Main</a>
+        <a href="#main" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="main-link">Main</a>
       </li>
       <li class="mr-1">
-        <a href="#settings" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="settings-link">Settings</a>
+        <a href="#settings" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="settings-link">Settings</a>
       </li>
       <li class="mr-1">
-        <a href="#extensions" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="extensions-link">Extensions</a>
+        <a href="#extensions" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="extensions-link">Extensions</a>
       </li>
       <li class="mr-1">
-        <a href="#training" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="training-link">Training</a>
+        <a href="#training" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="training-link">Training</a>
       </li>
       <li class="mr-1">
-        <a href="#help" class="border-t-4 border-l-2 border-r-2 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="help-link">Help</a>
+        <a href="#help" class="bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-200 py-2 px-4 rounded-t-md font-medium hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black" id="help-link">Help</a>
       </li>
     </ul>
   </div>
diff --git a/templates/main.html b/templates/main.html
index 3cb14067..7cc75f5b 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -1,16 +1,16 @@
 <div class="flex h-screen w-screen">
-    <div class="w-1/4 flex flex-col border-black dark:border-gray-600 border-r-4 border-t-4 rounded bg-gray-50 dark:bg-gray-700 text-white h-full overflow-hidden">
+    <div class="w-1/4 flex flex-col rounded bg-gray-50 dark:bg-gray-700 text-white h-full overflow-hidden">
       <div id="action-buttons" class="flex-shrink-0 h-10 ml-1.5 mt-2 mb-4">
-        <button id="new-discussion-btn" class="px-4 py-4 rounded border-black border-2 bg-gray-400 dark:bg-gray-700 dark:border-transparent hover:bg-gray-600 dark:hover:bg-gray-600">
+        <button id="new-discussion-btn" class="px-4 py-4 rounded bg-gray-400 dark:bg-gray-700 hover:bg-gray-600 dark:hover:bg-gray-600">
           <img src="/static/images/new_message.png" class="w-5 h-5">
         </button>
-        <button id="reset-discussions-btn" class="px-4 py-4 rounded border-black border-2 bg-gray-400 dark:bg-gray-700 dark:border-transparent hover:bg-gray-600 dark:hover:bg-gray-600">
+        <button id="reset-discussions-btn" class="px-4 py-4 rounded bg-gray-400 dark:bg-gray-700 hover:bg-gray-600 dark:hover:bg-gray-600">
           <img src="/static/images/reset_db.png" class="w-5 h-5">
         </button>
-        <button value="Export" id="export-button" class="px-4 py-4 rounded border-black border-2 bg-gray-400 dark:bg-gray-700 dark:border-transparent hover:bg-gray-600 dark:hover:bg-gray-600">
+        <button value="Export" id="export-button" class="px-4 py-4 rounded bg-gray-400 dark:bg-gray-700 hover:bg-gray-600 dark:hover:bg-gray-600">
           <img src="/static/images/export_database.png" class="w-5 h-5">
         </button>
-        <button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded border-black border-2 bg-gray-400 dark:bg-gray-700 dark:border-transparent hover:bg-gray-600 dark:hover:bg-gray-600">
+        <button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded bg-gray-400 dark:bg-gray-700 hover:bg-gray-600 dark:hover:bg-gray-600">
           <img src="/static/images/export_discussion.png" class="w-5 h-5">
         </button>
       </div>
@@ -23,19 +23,22 @@
       </div>
     </div>
     <div class="flex-1 flex flex-col overflow-hidden">
-      <div class="border-t-4 border-l-4 border-black dark:border-gray-600 flex-shrink-0 p-4 bg-gray-50 dark:bg-gray-700 text-black dark:text-white">
+      <div class="flex-shrink-0 p-4 bg-gray-50 dark:bg-gray-700 pl-7 text-black dark:text-white">
         <h1 class="font-bold font-large">Chat box</h1>
       </div>
-      <div class="flex-grow overflow-y-auto p-0 border-4 border-t-0 border-black dark:border-gray-600 bg-gray-50 dark:bg-gray-700 rounded">
+      <div class="flex-grow overflow-y-auto p-0 bg-gray-50 dark:bg-gray-700 rounded">
         <div id="chat-window" class="pb-96">
         </div>
       </div>
     </div>
   </div>
-  <div class="w-full mx-2 flex flex-row bottom-0 fixed rounded-md shadow shadow-white border-4 border-black dark:border-gray-800 bg-gray-300 dark:bg-gray-500 flex-wrap">
-    <form id="chat-form" class="w-full flex-row text-white mr-15 p-15">
-      <input type="text" id="user-input" placeholder="Type your message..." class="dark:bg-gray-600 px-2 py-1 my-1 mx-1 text-black dark:text-white outline-none drop-shadow-sm w-full rounded-md flex-1">
-      <div id="wait-animation" style="display: none;" class="lds-facebook bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"><div></div><div></div><div></div></div>
-      <input type="submit" value="Send" id="submit-input" class="my-1 mx-1 outline-none px-4 dark:bg-gray-900 text-black dark:text-white rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1]  transition-colors ease-in-out">
-    </form>
+  <div class="w-full flex justify-center">
+    <div class="w-full flex bottom-0 fixed rounded-sm shadow shadow-white bg-gray-300 p-1 dark:bg-gray-500 flex-wrap">
+      <form id="chat-form" class="w-full flex-row text-white mr-15 p-15">
+        <input type="text" id="user-input" placeholder="Type your message..." class="dark:bg-gray-600 pl-1 pr-1 py-1 my-1 mr-2 text-black dark:text-white outline-none drop-shadow-sm w-full rounded-md flex-1">
+        <div id="wait-animation" style="display: none;" class="lds-facebook bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"><div></div><div></div><div></div></div>
+        <input type="submit" value="Send" id="submit-input" class="my-1 mx-1 outline-none px-4 dark:bg-gray-900 text-black dark:text-white rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1]  transition-colors ease-in-out">
+      </form>
+    </div>
   </div>
+  
diff --git a/templates/settings.html b/templates/settings.html
index bfebe91f..c664530a 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -1,29 +1,29 @@
 <div class="h-full overflow-y-auto">
-    <form id="model-params-form" class="bg-gray-700 shadow-md rounded px-8 py-8 pt-6 pb-8 mb-4 text-white">
+    <form id="model-params-form" class="bg-gray-50 dark:bg-gray-700 shadow-md rounded px-8 py-8 pt-6 pb-8 mb-4 text-black dark:text-white">
     <div class="mb-4 flex-row">
         <label class="font-bold" for="model">Model</label>
-        <select class="bg-gray-700 w-96 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="model" name="model"  value="gpt4all-lora-quantized.bin">
+        <select class="bg-gray-200 dark:bg-gray-700 w-96 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline">
         </select>
     </div>
     <div class="mb-4 flex-row">
         <label class="font-bold mb-2" for="model">Personalities</label>
-        <select class="bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="personalities" name="personalities"  value="gpt4all_chatbot.yaml">
+        <select class="bg-gray-200 dark:bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="personalities" name="personalities"  value="gpt4all_chatbot.yaml">
         </select>
     </div>
     <div class="mb-4 flex-row">
         <label class="font-bold mb-2" for="model">Language</label>
-        <select class="bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="language" name="language"  value="english">
+        <select class="bg-gray-200 dark:bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="language" name="language"  value="english">
         </select>
     </div>
     <div class="mb-4 flex-row">
         <label class="font-bold mb-2" for="model">Voice</label>
-        <select class="bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="voice" name="voice"  value="english">
+        <select class="bg-gray-200 dark:bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="voice" name="voice"  value="english">
         </select>
     </div>
     
     <div class="mb-4 flex-row">
         <label class="font-bold mb-2" for="seed">Seed</label>
-        <input class="bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="seed" type="text" name="seed" value="0">
+        <input class="bg-gray-200 dark:bg-gray-700 shadow appearance-none border rounded py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="seed" type="text" name="seed" value="0">
     </div>
     <div class="mb-4 flex-row">
         <label class="font-bold mb-2" for="temp" id="temperature-value">Temperature (0.1)</label>
@@ -50,7 +50,7 @@
         <input class="slider-value" id="repeat-last-n" type="range" min="0" max="100" step="1" value="40" name="repeat-last-n">
     </div>
     <div class="mb-4">
-        <button type="submit" id="submit-model-params" class="my-1 mx-1 outline-none px-4 bg-accent rounded-md bg-gray-500 hover:bg-gray-300 transition-colors ease-in-out">Update parameters</button>
+        <button type="submit" id="submit-model-params" class="my-1 mx-1 outline-none px-4 bg-accent rounded-md bg-gray-200 hover:bg-gray-300 py-1 dark:bg-gray-500 dark:hover:bg-gray-300 transition-colors ease-in-out">Update parameters</button>
     </div>
     </form>
 </div>