diff --git a/application/app.py b/application/app.py
index bbfc0604..95ac4a2b 100644
--- a/application/app.py
+++ b/application/app.py
@@ -52,6 +52,7 @@ def api_answer():
     result['answer'] = result['answer'].replace("\\n", "<br>")
     result['answer'] = result['answer'].replace("SOURCES:", "")
 
+
     return result
 
 
diff --git a/application/static/dist/css/output.css b/application/static/dist/css/output.css
index c2ecec57..47f390b3 100644
--- a/application/static/dist/css/output.css
+++ b/application/static/dist/css/output.css
@@ -525,6 +525,26 @@ video {
   bottom: 0px;
 }
 
+.right-0 {
+  right: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.left-10 {
+  left: 2.5rem;
+}
+
+.right-10 {
+  right: 2.5rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -545,26 +565,10 @@ video {
   display: flex;
 }
 
-.hidden {
-  display: none;
-}
-
 .h-5\/6 {
   height: 83.333333%;
 }
 
-.h-1\/2 {
-  height: 50%;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.h-screen {
-  height: 100vh;
-}
-
 .max-h-screen {
   max-height: 100vh;
 }
@@ -573,22 +577,10 @@ video {
   min-height: 100vh;
 }
 
-.w-3\/4 {
-  width: 75%;
-}
-
 .w-full {
   width: 100%;
 }
 
-.w-\[46rem\] {
-  width: 46rem;
-}
-
-.w-1\/4 {
-  width: 25%;
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -597,6 +589,10 @@ video {
   align-items: center;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -609,6 +605,10 @@ video {
   align-self: flex-end;
 }
 
+.justify-self-stretch {
+  justify-self: stretch;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -628,21 +628,6 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
 .p-2 {
   padding: 0.5rem;
 }
@@ -671,39 +656,18 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-#chat-container {
-  height: 44rem;
-  background-color: white;
-  padding: 10px;
-  overflow: auto;
-}
+@media screen and (max-width: 1024px) {
+  .text-lg {
+    font-size: 3.125rem;
+    margin: 2rem;
+    line-height: inherit;
+  }
 
-.bg-gray-200 {
-  background-color: #edf2f7;
-}
-
-.bg-gray-900 {
-  background-color: #1a202c;
-}
-
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
-.shadow {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-.text-gray-700 {
-  color: #4a5568;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-}
-
-.p-4 {
-  padding: 1.5rem;
+  .text-sm {
+    font-size: 2.5rem;
+    margin: 1.5rem;
+    line-height: inherit;
+  }
 }
 
 .loader {
@@ -732,4 +696,42 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+@media (min-width: 640px) {
+  @media not all and (min-width: 1024px) {
+    .sm\:max-lg\:mb-12 {
+      margin-bottom: 3rem;
+    }
+
+    .sm\:max-lg\:mb-\[12rem\] {
+      margin-bottom: 12rem;
+    }
+
+    .sm\:max-lg\:hidden {
+      display: none;
+    }
+
+    .sm\:max-lg\:p-5 {
+      padding: 1.25rem;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:w-3\/4 {
+    width: 75%;
+  }
+
+  .lg\:w-\[46rem\] {
+    width: 46rem;
+  }
+
+  .lg\:w-1\/4 {
+    width: 25%;
+  }
+}
+
 
diff --git a/application/static/src/input.css b/application/static/src/input.css
index 8d6c99b5..a17532fe 100644
--- a/application/static/src/input.css
+++ b/application/static/src/input.css
@@ -2,43 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
-#chat-container {
-    height: 44rem;
-    background-color: white;
-    padding: 10px;
-    overflow: auto;
+
+
+@media screen and (max-width: 1024px) {
+  .text-lg {
+    font-size: 3.125rem;
+    margin: 2rem;
+    line-height: inherit;
+  }
+  .text-sm {
+    font-size: 2.5rem;
+    margin: 1.5rem;
+    line-height: inherit;
+  }
+
 }
 
 
-
-.bg-gray-200 {
-    background-color: #edf2f7;
-  }
-
-  .bg-gray-900 {
-    background-color: #1a202c;
-  }
-
-  .rounded-lg {
-    border-radius: 0.5rem;
-  }
-
-  .shadow {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  }
-
-  .text-gray-700 {
-    color: #4a5568;
-  }
-
-  .text-sm {
-    font-size: 0.875rem;
-  }
-
-  .p-4 {
-    padding: 1.5rem;
-  }
-
 .loader {
   border: 16px solid #f3f3f3; /* Light grey */
   border-top: 16px solid #3498db; /* Blue */
diff --git a/application/templates/index.html b/application/templates/index.html
index 7277c01d..b3368182 100644
--- a/application/templates/index.html
+++ b/application/templates/index.html
@@ -10,14 +10,14 @@
   <body>
     <header class="bg-white p-2 flex justify-between items-center">
       <h1 class="text-lg font-medium">DocsGPT 🦖 Very early Preview</h1>
-      <a href="https://github.com/arc53/docsgpt" class="text-blue-500 hover:text-blue-800">About</a>
+      <a href="https://github.com/arc53/docsgpt" class="text-blue-500 hover:text-blue-800 text-sm">About</a>
     </header>
-    <div class="flex">
-      <div class="w-3/4 min-h-screen max-h-screen">
+    <div class="lg:flex ml-2 mr-2">
+      <div class="lg:w-3/4 min-h-screen max-h-screen">
         <div class="w-full flex flex-col h-5/6">
-          <div id="messages-container" style="overflow: auto;" class="">
+          <div id="messages-container" style="overflow: auto;" class="sm:max-lg:mb-[12rem]">
 
-            <div id="messages" class="w-full flex flex-col" >
+            <div id="messages" class="w-full flex flex-col mt-2" >
               <div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start">
                 <p class="text-sm">Hello, ask me anything about this library. Im here to help</p>
               </div>
@@ -36,17 +36,17 @@ This will return a new DataFrame with all the columns from both tables, and only
           </div>
         </div>
 
-        <div class="fixed bottom-0 w-full mt-4 mb-2">
-        <form id="message-form" autocomplete="off">
-          <input autocomplete="off" id="message-input" class="bg-white p-2 rounded-lg ml-2 w-[46rem]" type="text" placeholder="Type your message here...">
-          <button id="button-submit" class="bg-blue-500 text-white p-2 rounded-lg ml-2 mr-2 ml-2" type="submit">Send</button>
+        <div class="fixed bottom-0 w-full mt-4 mb-2 lg:w-3/4">
+        <form id="message-form" autocomplete="off" class="flex items-stretch">
+          <input autocomplete="off" id="message-input" class="bg-white p-2 rounded-lg ml-2 text-sm w-full" type="text" placeholder="Type your message here...">
+          <button id="button-submit" class="bg-blue-500 text-white p-2 rounded-lg ml-2 mr-2 text-sm sm:max-lg:p-5" type="submit">Send</button>
         </form>
         </div>
 
 
     </div>
         </div>
-        <div class="w-1/4 p-2">
+        <div class="lg:w-1/4 p-2 sm:max-lg:hidden">
           <p class="text-sm">This is a chatbot that uses the GPT-3, Faiss and <a href="https://github.com/hwchase17/langchain" class="text-blue-500 hover:text-blue-800">LangChain</a> to answer questions</p>
           <br>
           <p class="text-sm">The source code is available on <a href="https://github.com/arc53/docsgpt" class="text-blue-500 hover:text-blue-800">Github</a></p><br>