diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index cfc7a825..28472969 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -1,5 +1,6 @@
 import { NavLink } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
+import Message from './assets/message.svg';
 import Hamburger from './assets/hamburger.svg';
 import Key from './assets/key.svg';
 import Info from './assets/info.svg';
@@ -56,6 +57,18 @@ export default function Navigation({
             />
           </button>
         </div>
+        <NavLink
+          to={'/'}
+          className={({ isActive }) =>
+            `${
+              isActive ? 'bg-gray-3000' : ''
+            } my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100`
+          }
+        >
+          <img src={Message} className="ml-2 w-5"></img>
+          <p className="my-auto text-eerie-black">Chat</p>
+        </NavLink>
+
         <div className="flex-grow border-b-2 border-gray-100"></div>
 
         <div className="flex flex-col gap-2 border-b-2 border-gray-100 py-2">
@@ -85,7 +98,11 @@ export default function Navigation({
         <div className="flex h-48 flex-col border-b-2 border-gray-100">
           <NavLink
             to="/about"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+            className={({ isActive }) =>
+              `my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100 ${
+                isActive ? 'bg-gray-3000' : ''
+              }`
+            }
           >
             <img src={Info} alt="info" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">About</p>
diff --git a/frontend/src/assets/message.svg b/frontend/src/assets/message.svg
new file mode 100644
index 00000000..927beaf2
--- /dev/null
+++ b/frontend/src/assets/message.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z" fill="black" fill-opacity="0.54"/>
+</svg>
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 9fc770fe..cc38c2a8 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -35,20 +35,20 @@ export default function Conversation() {
           return (
             <ConversationBubble
               ref={index === messages.length - 1 ? endMessageRef : null}
-              className="mb-7"
+              className={`${index === messages.length - 1 ? 'mb-20' : 'mb-7'}`}
               key={index}
               message={message.text}
               type={message.type}
             ></ConversationBubble>
           );
         })}
-        {messages.length === 0 && <Hero className="mt-24"></Hero>}
+        {messages.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
       </div>
-      <div className="fixed bottom-2 flex w-10/12 md:w-[50%]">
+      <div className="fixed bottom-14 flex w-10/12 md:bottom-12 md:w-[50%]">
         <div
           ref={inputRef}
           contentEditable
-          className={`min-h-5 border-000000 overflow-x-hidden; max-h-24 w-full overflow-y-auto rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
+          className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
         ></div>
         {status === 'loading' ? (
           <img
@@ -68,6 +68,10 @@ export default function Conversation() {
           ></img>
         )}
       </div>
+      <p className="fixed bottom-6 w-10/12 text-center text-xs text-gray-2000">
+        This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
+        questions.
+      </p>
     </div>
   );
 }
diff --git a/frontend/src/preferences/APIKeyModal.tsx b/frontend/src/preferences/APIKeyModal.tsx
index b440500a..6dc49de2 100644
--- a/frontend/src/preferences/APIKeyModal.tsx
+++ b/frontend/src/preferences/APIKeyModal.tsx
@@ -41,7 +41,7 @@ export default function APIKeyModal({
     >
       <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
         <p className="text-xl text-jet">OpenAI API Key</p>
-        <p className="text-lg leading-5 text-gray-500">
+        <p className="text-md leading-6 text-gray-500">
           Before you can start using DocsGPT we need you to provide an API key
           for llm. Currently, we support only OpenAI but soon many more. You can
           find it here.
diff --git a/frontend/src/preferences/SelectDocsModal.tsx b/frontend/src/preferences/SelectDocsModal.tsx
index 691f90c1..36919632 100644
--- a/frontend/src/preferences/SelectDocsModal.tsx
+++ b/frontend/src/preferences/SelectDocsModal.tsx
@@ -1,132 +1,132 @@
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { ActiveState } from '../models/misc';
-import {
-  setSelectedDocs,
-  setSourceDocs,
-  selectSourceDocs,
-} from './preferenceSlice';
-import { getDocs, Doc } from './selectDocsApi';
-
-export default function APIKeyModal({
-  modalState,
-  setModalState,
-  isCancellable = true,
-}: {
-  modalState: ActiveState;
-  setModalState: (val: ActiveState) => void;
-  isCancellable?: boolean;
-}) {
-  const dispatch = useDispatch();
-  const docs = useSelector(selectSourceDocs);
-  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
-  const [isDocsListOpen, setIsDocsListOpen] = useState(false);
-  const [isError, setIsError] = useState(false);
-
-  function handleSubmit() {
-    if (!localSelectedDocs) {
-      setIsError(true);
-    } else {
-      dispatch(setSelectedDocs(localSelectedDocs));
-      setModalState('INACTIVE');
-      setLocalSelectedDocs(null);
-      setIsError(false);
-    }
-  }
-
-  function handleCancel() {
-    setLocalSelectedDocs(null);
-    setIsError(false);
-    setModalState('INACTIVE');
-  }
-
-  useEffect(() => {
-    async function requestDocs() {
-      const data = await getDocs();
-      dispatch(setSourceDocs(data));
-    }
-
-    requestDocs();
-  }, []);
-
-  return (
-    <div
-      className={`${
-        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
-    >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
-        <p className="text-xl text-jet">Select Source Documentation</p>
-        <p className="text-lg leading-5 text-gray-500">
-          Please select the library of documentation that you would like to use
-          with our app.
-        </p>
-        <div className="relative">
-          <div
-            className="h-10 w-full cursor-pointer border-b-2"
-            onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-          >
-            {!localSelectedDocs ? (
-              <p className="py-3 text-gray-500">Select</p>
-            ) : (
-              <p className="py-3">
-                {localSelectedDocs.name} {localSelectedDocs.version}
-              </p>
-            )}
-          </div>
-          {isDocsListOpen && (
-            <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
-              {docs ? (
-                docs.map((doc, index) => {
-                  if (doc.model) {
-                    return (
-                      <div
-                        key={index}
-                        onClick={() => {
-                          setLocalSelectedDocs(doc);
-                          setIsDocsListOpen(false);
-                        }}
-                        className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
-                      >
-                        <p className="ml-5 py-3">
-                          {doc.name} {doc.version}
-                        </p>
-                      </div>
-                    );
-                  }
-                })
-              ) : (
-                <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
-                  <p className="ml-5 py-3">No default documentation.</p>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="flex flex-row-reverse">
-          {isCancellable && (
-            <button
-              onClick={() => handleCancel()}
-              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
-            >
-              Cancel
-            </button>
-          )}
-          <button
-            onClick={() => {
-              handleSubmit();
-            }}
-            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
-          >
-            Save
-          </button>
-          {isError && (
-            <p className="mr-auto text-sm text-red-500">
-              Please select source documentation.
-            </p>
-          )}
-        </div>
-      </article>
-    </div>
-  );
-}
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ActiveState } from '../models/misc';
+import {
+  setSelectedDocs,
+  setSourceDocs,
+  selectSourceDocs,
+} from './preferenceSlice';
+import { getDocs, Doc } from './selectDocsApi';
+
+export default function APIKeyModal({
+  modalState,
+  setModalState,
+  isCancellable = true,
+}: {
+  modalState: ActiveState;
+  setModalState: (val: ActiveState) => void;
+  isCancellable?: boolean;
+}) {
+  const dispatch = useDispatch();
+  const docs = useSelector(selectSourceDocs);
+  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
+  const [isDocsListOpen, setIsDocsListOpen] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  function handleSubmit() {
+    if (!localSelectedDocs) {
+      setIsError(true);
+    } else {
+      dispatch(setSelectedDocs(localSelectedDocs));
+      setModalState('INACTIVE');
+      setLocalSelectedDocs(null);
+      setIsError(false);
+    }
+  }
+
+  function handleCancel() {
+    setLocalSelectedDocs(null);
+    setIsError(false);
+    setModalState('INACTIVE');
+  }
+
+  useEffect(() => {
+    async function requestDocs() {
+      const data = await getDocs();
+      dispatch(setSourceDocs(data));
+    }
+
+    requestDocs();
+  }, []);
+
+  return (
+    <div
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+    >
+      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+        <p className="text-xl text-jet">Select Source Documentation</p>
+        <p className="text-md leading-6 text-gray-500">
+          Please select the library of documentation that you would like to use
+          with our app.
+        </p>
+        <div className="relative">
+          <div
+            className="h-10 w-full cursor-pointer border-b-2"
+            onClick={() => setIsDocsListOpen(!isDocsListOpen)}
+          >
+            {!localSelectedDocs ? (
+              <p className="py-3 text-gray-500">Select</p>
+            ) : (
+              <p className="py-3">
+                {localSelectedDocs.name} {localSelectedDocs.version}
+              </p>
+            )}
+          </div>
+          {isDocsListOpen && (
+            <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
+              {docs ? (
+                docs.map((doc, index) => {
+                  if (doc.model) {
+                    return (
+                      <div
+                        key={index}
+                        onClick={() => {
+                          setLocalSelectedDocs(doc);
+                          setIsDocsListOpen(false);
+                        }}
+                        className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
+                      >
+                        <p className="ml-5 py-3">
+                          {doc.name} {doc.version}
+                        </p>
+                      </div>
+                    );
+                  }
+                })
+              ) : (
+                <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
+                  <p className="ml-5 py-3">No default documentation.</p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-row-reverse">
+          {isCancellable && (
+            <button
+              onClick={() => handleCancel()}
+              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
+            >
+              Cancel
+            </button>
+          )}
+          <button
+            onClick={() => {
+              handleSubmit();
+            }}
+            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
+          >
+            Save
+          </button>
+          {isError && (
+            <p className="mr-auto text-sm text-red-500">
+              Please select source documentation.
+            </p>
+          )}
+        </div>
+      </article>
+    </div>
+  );
+}
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 73cc3eda..2eb37ff9 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -12,8 +12,10 @@ module.exports = {
         jet: '#343541',
         'gray-alpha': 'rgba(0,0,0, .1)',
         'gray-1000': '#F6F6F6',
+        'gray-2000': 'rgba(0, 0, 0, 0.5)',
+        'gray-3000': 'rgba(243, 243, 243, 1)',
         'red-1000': 'rgb(254, 202, 202)',
-        'red-2000' : '#F44336',
+        'red-2000': '#F44336',
         'red-3000': '#621B16',
       },
     },