diff --git a/application/app.py b/application/app.py
index a509ed63..73f860ea 100644
--- a/application/app.py
+++ b/application/app.py
@@ -1,5 +1,6 @@
 import os
 import json
+import traceback
 
 import dotenv
 import requests
@@ -86,7 +87,6 @@ def api_answer():
 
     # use try and except  to check for exception
     try:
-
         # check if the vectorstore is set
         if "active_docs" in data:
             vectorstore = "vectors/" + data["active_docs"]
@@ -144,6 +144,8 @@ def api_answer():
         # }
         return result
     except Exception as e:
+        # print whole traceback
+        traceback.print_exc()
         print(str(e))
         return bad_request(500,str(e))
 
@@ -185,4 +187,4 @@ def after_request(response):
 
 
 if __name__ == "__main__":
-    app.run(debug=True)
+    app.run(debug=True, port=5001)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 797ec5b9..c83f4ace 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -37,7 +37,7 @@
         "prettier-plugin-tailwindcss": "^0.2.2",
         "tailwindcss": "^3.2.4",
         "typescript": "^4.9.5",
-        "vite": "^4.1.0"
+        "vite": "^4.1.4"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -5678,9 +5678,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.1.tgz",
-      "integrity": "sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz",
+      "integrity": "sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.16.14",
@@ -9724,9 +9724,9 @@
       "dev": true
     },
     "vite": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.1.tgz",
-      "integrity": "sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz",
+      "integrity": "sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==",
       "dev": true,
       "requires": {
         "esbuild": "^0.16.14",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index aaaf5b34..29b1b60c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -19,7 +19,7 @@ export default function App() {
       />
       <div
         className={`transition-all duration-200 ${
-          navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-60' : ' ml-0 md:ml-16'
+          navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-60' : 'ml-0 md:ml-16'
         }`}
       >
         <Routes>
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index bf3b1e40..55ece9d2 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -45,8 +45,8 @@ export default function Navigation({
     <>
       <div
         className={`${
-          navState === 'INACTIVE' && '-ml-96 md:-ml-[14rem] lg:-ml-80'
-        } fixed z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all duration-200 lg:w-60`}
+          navState === 'INACTIVE' && '-ml-96 md:-ml-[14rem]'
+        } duration-20 fixed z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all`}
       >
         <div className={'h-16 w-full border-b-2'}>
           <button
@@ -80,7 +80,7 @@ export default function Navigation({
         <div className="flex flex-grow flex-col-reverse border-b-2">
           <div className="relative my-4 px-6">
             <div
-              className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2"
+              className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2 bg-white"
               onClick={() => setIsDocsListOpen(!isDocsListOpen)}
             >
               {selectedDocs && (
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index c9845638..3dc49f31 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -30,7 +30,7 @@ export default function Conversation() {
 
   return (
     <div className="flex justify-center p-6">
-      <div className="flex mt-20 w-10/12 flex-col transition-all md:w-1/2">
+      <div className="mt-20 flex w-10/12 flex-col transition-all md:w-1/2">
         {messages.map((message, index) => {
           return (
             <ConversationBubble
diff --git a/frontend/src/conversation/conversationApi.ts b/frontend/src/conversation/conversationApi.ts
index 20302847..dfa5a147 100644
--- a/frontend/src/conversation/conversationApi.ts
+++ b/frontend/src/conversation/conversationApi.ts
@@ -1,29 +1,49 @@
 import { Answer } from './conversationModels';
+import { Doc } from '../preferences/preferenceApi';
 
 export function fetchAnswerApi(
   question: string,
   apiKey: string,
+  selectedDocs: Doc,
 ): Promise<Answer> {
-  // a mock answer generator, this is going to be replaced with real http call
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      let result = '';
-      const characters =
-        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-      const charactersLength = characters.length;
-      let counter = 0;
-      while (counter < 5) {
-        result += characters.charAt(
-          Math.floor(Math.random() * charactersLength),
-        );
-        counter += 1;
+  let namePath = selectedDocs.name;
+  if (selectedDocs.language === namePath) {
+    namePath = '.project';
+  }
+
+  const docPath =
+    selectedDocs.language +
+    '/' +
+    namePath +
+    '/' +
+    selectedDocs.version +
+    '/' +
+    selectedDocs.model;
+
+  return fetch('https://docsgpt.arc53.com/api/answer', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      question: question,
+      api_key: apiKey,
+      embeddings_key: apiKey,
+      history: localStorage.getItem('chatHistory'),
+      active_docs: docPath,
+    }),
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      } else {
+        Promise.reject(response);
       }
-      const randNum = getRandomInt(0, 10);
-      randNum < 5
-        ? reject()
-        : resolve({ answer: result, query: question, result });
-    }, 3000);
-  });
+    })
+    .then((data) => {
+      const result = data.answer;
+      return { answer: result, query: question, result };
+    });
 }
 
 function getRandomInt(min: number, max: number) {
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index bd6929e8..a822a380 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -14,7 +14,12 @@ export const fetchAnswer = createAsyncThunk<
   { state: RootState }
 >('fetchAnswer', async ({ question }, { getState }) => {
   const state = getState();
-  const answer = await fetchAnswerApi(question, state.preference.apiKey);
+
+  const answer = await fetchAnswerApi(
+    question,
+    state.preference.apiKey,
+    state.preference.selectedDocs!,
+  );
   return answer;
 });
 
diff --git a/frontend/src/preferences/preferenceApi.ts b/frontend/src/preferences/preferenceApi.ts
index 6ede1b41..9ffdc7ba 100644
--- a/frontend/src/preferences/preferenceApi.ts
+++ b/frontend/src/preferences/preferenceApi.ts
@@ -46,4 +46,20 @@ export function setLocalApiKey(key: string): void {
 
 export function setLocalRecentDocs(doc: Doc): void {
   localStorage.setItem('DocsGPTRecentDocs', JSON.stringify(doc));
+  let namePath = doc.name;
+  if (doc.language === namePath) {
+    namePath = '.project';
+  }
+
+  const docPath =
+    doc.language + '/' + namePath + '/' + doc.version + '/' + doc.model;
+  fetch('https://docsgpt.arc53.com/api/docs_check', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      docs: docPath,
+    }),
+  }).then((response) => response.json());
 }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 5a33944a..627a3196 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});