diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 3c1f409..a721158 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -20,6 +20,8 @@ jobs:
         run: |
           cd backend
           pip install -r requirements.txt
+          touch .env
+          echo "DATABASE_PATH=chroma_db \n COLLECTION_NAME=langchain" >> .env
 
       - name: Start FastAPI app
         run: |
diff --git a/frontend/.vscode/extensions.json b/.vscode/extensions.json
similarity index 100%
rename from frontend/.vscode/extensions.json
rename to .vscode/extensions.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..2cc09ff
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,15 @@
+{
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "eslint.validate": ["javascript", "vue", "typescript", "vue"],
+
+  "[python]": {
+    "editor.defaultFormatter": "ms-python.autopep8",
+    "editor.formatOnSave": true
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": ["source.fixAll.eslint"]
+  }
+}
diff --git a/backend/embeddings/ingest.py b/backend/embeddings/ingest.py
index e80d449..ed4ec2a 100644
--- a/backend/embeddings/ingest.py
+++ b/backend/embeddings/ingest.py
@@ -5,18 +5,22 @@
 # from langchain_core.runnables import RunnablePassthrough
 # from langchain_core.documents import Document
 
+import os
 from langchain_community.document_loaders import PyPDFLoader
+from langchain_community.embeddings import OllamaEmbeddings
 from langchain_text_splitters import RecursiveCharacterTextSplitter
-
 from langchain_chroma import Chroma
-from langchain_community.embeddings import OllamaEmbeddings
-import os
-import argparse
-
 import chromadb
+from dotenv import load_dotenv
+
+load_dotenv()
 
-parser = argparse.ArgumentParser(description="Averroes - Chatbot")
-parser.add_argument("indexing", type=int, help="indexing")
+# Get the path value from .env file
+relative_path = os.getenv("DATABASE_PATH")
+# Get directory of script
+script_dir = os.path.dirname(os.path.abspath(__file__))
+# Append the relative path to the script directory
+persist_directory = os.path.join(script_dir, relative_path)
 
 
 def create_vectorstore():
@@ -37,23 +41,25 @@ def create_vectorstore():
             documents.extend(document_split)
 
     Chroma.from_documents(
-        collection_name="kardex",
+        collection_name=os.environ.get("COLLECTION_NAME"),
         documents=documents,
         embedding=OllamaEmbeddings(model="mxbai-embed-large"),
-        persist_directory="./vectorstore/chroma_db",
+        persist_directory=persist_directory,
     )
 
     print("vectorstore created...")
 
 
 def get_vectorstore():
-    persistent_client = chromadb.PersistentClient(path="./vectorstore/chroma_db")
+    persistent_client = chromadb.PersistentClient(path=persist_directory)
+
     langchain_chroma = Chroma(
         client=persistent_client,
-        collection_name="kardex",
+        collection_name=os.environ.get("COLLECTION_NAME"),
         embedding_function=OllamaEmbeddings(model="mxbai-embed-large"),
     )
-    # print("There are", langchain_chroma._collection.count(), "in the collection")
+    print("There are", langchain_chroma._collection.count(), "in the collection")
+
     # print("There are", langchain_chroma.similarity_search("bmw?"))
     return langchain_chroma.as_retriever(
         search_type="mmr", search_kwargs={"k": 3, "lambda_mult": 0.25}
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
deleted file mode 100644
index b3bb1e4..0000000
--- a/frontend/.vscode/settings.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "editor.bracketPairColorization.enabled": true,
-  "editor.guides.bracketPairs": true,
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": [
-    "source.fixAll.eslint"
-  ],
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "vue"
-  ]
-}
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 9d64101..5506cb3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,7 +2,7 @@
   "name": "raggi",
   "version": "0.0.1",
   "description": "rag app for small business",
-  "productName": "rag app for small business",
+  "productName": "Aora Ask, Discover, Decide",
   "author": "tmeftah <sudtechnics@gmail.com>",
   "private": true,
   "scripts": {
diff --git a/frontend/src/components/EssentialLink.vue b/frontend/src/components/EssentialLink.vue
index b02b059..500b101 100644
--- a/frontend/src/components/EssentialLink.vue
+++ b/frontend/src/components/EssentialLink.vue
@@ -1,6 +1,5 @@
 <template>
-
-  <q-item clickable tag="a" :href="props.link" class="q-py-md" >
+  <q-item clickable tag="a" :to="props.link" exact class="q-py-md">
     <q-item-section v-if="props.icon" avatar>
       <q-icon :name="props.icon" />
     </q-item-section>
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index c63c532..e7d703a 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -1,28 +1,21 @@
 <template>
-  <q-layout view="FHh Lpr lFf">
-    <q-header dark bordered class="bg-darkblue-1 text-white-8">
+  <q-layout view="hHh lpR fFf">
+    <q-header dark bordered class="bg-white text-grey-8">
       <q-toolbar>
-        <q-btn
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
-        <q-toolbar-title>  DOC-INFO </q-toolbar-title>
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title
+          class="text-bold text-weight-bolder text-h3"
+          style="color: #507295"
+        >
+          Aora.
+        </q-toolbar-title>
+        <!-- Orion Inova -->
       </q-toolbar>
     </q-header>
 
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-      width="220"
-    >
-
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered :width="220">
       <q-list>
-
         <EssentialLink
           v-for="link in linksList"
           :key="link.title"
@@ -50,19 +43,19 @@ const linksList = [
     title: "Dashboard",
     caption: "overview",
     icon: "line_axis",
-    link: "1",
+    link: "/",
   },
   {
     title: "Ask a question",
     caption: "chat with docs",
     icon: "chat_bubble_outline",
-    link: "2",
+    link: "/query",
   },
   {
     title: "Alle Dokumente",
     caption: "chat with docs",
     icon: "folder_open",
-    link: "/",
+    link: "documents",
   },
 ];
 
diff --git a/frontend/src/pages/1Page.vue b/frontend/src/pages/1Page.vue
deleted file mode 100644
index 56d283f..0000000
--- a/frontend/src/pages/1Page.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <q-page padding>
-    <q-card>
-      <q-card-section>
-        <div class="text-h6">Dashboard</div>
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-section>
-        <q-gutter class="q-mb-md">
-          <q-card>
-            <q-card-section>
-              Widget 1
-            </q-card-section>
-          </q-card>
-
-          <q-card>
-            <q-card-section>
-              Widget 2
-            </q-card-section>
-          </q-card>
-        </q-gutter>
-      </q-card-section>
-    </q-card>
-  </q-page>
-</template>
-
-
-<script setup>
-defineOptions({
-  name: "1Page",
-});
-</script>
-
-<style scoped>
-/* Add any custom styles for the dashboard here */
-</style>
diff --git a/frontend/src/pages/2Page.vue b/frontend/src/pages/2Page.vue
deleted file mode 100644
index df23320..0000000
--- a/frontend/src/pages/2Page.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="q-pa-md example-row-equal-width">
-    <div class="row">
-      <div class="col">
-        <q-card>
-          <q-card-section>
-              <q-input
-                outlined
-                bottom-slots
-                v-model="question"
-                label="ask a question..."
-                type="textarea"
-                autogrow
-              >
-                <template v-slot:after>
-                  <q-btn dense flat icon="send" @click="MainStore.sendQA(question)" />
-                </template>
-              </q-input>
-
-              <q-input
-                v-if="solution.length"
-                v-model="solution"
-                outlined
-                autogrow
-                type="textarea"
-                :loading="loading"
-              />
-          </q-card-section>
-        </q-card>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { storeToRefs } from "pinia";
-import { useMainStore } from "../stores/main-store";
-
-defineOptions({
-  name: "2Page",
-});
-
-const MainStore = useMainStore();
-const { loading, solution, question } = storeToRefs(MainStore);
-</script>
diff --git a/frontend/src/pages/DocumentsPage.vue b/frontend/src/pages/DocumentsPage.vue
new file mode 100644
index 0000000..c59c976
--- /dev/null
+++ b/frontend/src/pages/DocumentsPage.vue
@@ -0,0 +1,88 @@
+<template>
+  <q-page>
+    <div class="q-pa-md">
+      <div class="row q-mb-xl">
+        <div class="col">
+          <span class="text-h4">Documents</span>
+          <p class="q-mt-sm text-caption text-weight-light">
+            All documents related to
+          </p>
+        </div>
+        <div class="col-grow q-gutter-sm">
+          <q-btn color="secondary" label="Upload" icon="upload" />
+        </div>
+      </div>
+      <q-table :rows="rows" :columns="columns" row-key="name" flat bordered>
+        <template v-slot:top-right>
+          <q-input
+            dense
+            debounce="300"
+            placeholder="Filter by filename"
+            outlined
+          >
+            <template v-slot:prepend>
+              <q-icon name="filter_list" class="q-mr-sm" />
+            </template>
+          </q-input>
+        </template>
+        <template v-slot:body-cell-status="props">
+          <q-td :props="props">
+            <div>
+              <q-badge :color="props.row.status_text" :label="props.value" />
+            </div>
+            <div class="my-table-details">
+              {{ props.row.details }}
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+defineOptions({
+  name: "IndexPage",
+});
+
+const columns = [
+  {
+    name: "name",
+    required: true,
+    label: "Name",
+    align: "left",
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+  },
+  {
+    name: "date",
+    align: "center",
+    label: "Date",
+    field: "date",
+    sortable: true,
+  },
+  {
+    name: "status",
+    align: "center",
+    label: "Status",
+    field: "status",
+    sortable: true,
+  },
+];
+
+const rows = [
+  {
+    name: "Document 01",
+    date: "12/05/2024",
+    status: "done",
+    status_text: "green",
+  },
+  {
+    name: "Document 02",
+    date: "01/08/2024",
+    status: "on progress",
+    status_text: "purple",
+  },
+];
+</script>
diff --git a/frontend/src/pages/IndexPage.vue b/frontend/src/pages/IndexPage.vue
index 3fb583f..b634e58 100644
--- a/frontend/src/pages/IndexPage.vue
+++ b/frontend/src/pages/IndexPage.vue
@@ -1,9 +1,36 @@
 <template>
-  <q-page class="flex flex-center"> index page </q-page>
+  <q-page padding>
+    <q-card flat bordered>
+      <q-card-section>
+        <div class="text-h6">Dashboard</div>
+      </q-card-section>
+
+      <q-separator />
+      <div class="q-pa-md row items-start q-gutter-md">
+        <q-card class="q-mb-sm">
+          <q-card-section>
+            <div class="text-h6">Active Users</div>
+            <div class="text-h2 text-center text-bold">100</div></q-card-section
+          >
+        </q-card>
+
+        <q-card>
+          <q-card-section>
+            <div class="text-h6">Number of Documents</div>
+            <div class="text-center text-h2 text-bold">3524</div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </q-card>
+  </q-page>
 </template>
 
 <script setup>
 defineOptions({
-  name: "IndexPage",
+  name: "1Page",
 });
 </script>
+
+<style scoped>
+/* Add any custom styles for the dashboard here */
+</style>
diff --git a/frontend/src/pages/QueryPage.vue b/frontend/src/pages/QueryPage.vue
new file mode 100644
index 0000000..21ce1a5
--- /dev/null
+++ b/frontend/src/pages/QueryPage.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="q-pa-md example-row-equal-width">
+    <div class="row">
+      <div class="col col-sm-6">
+        <q-input
+          @keydown.enter.prevent="MainStore.sendQA(question)"
+          outlined
+          v-model="question"
+          placeholder="ask a question..."
+          type="text"
+          dense
+        >
+          <template v-slot:prepend>
+            <q-icon
+              name="search"
+              class="q-mr-sm"
+              @click="MainStore.sendQA(question)"
+            />
+          </template>
+        </q-input>
+
+        <q-card flat bordered class="q-mt-sm column" v-if="solution || loading">
+          <q-input
+            v-model="solution"
+            autogrow
+            borderless
+            dense
+            :loading="loading"
+            class="text-weight-bolder text-body1 q-mx-sm"
+          />
+
+          <div
+            class="q-ma-sm q-gutter-y-md items-start"
+            v-if="!loading && solution"
+          >
+            <q-btn-group push>
+              <q-btn size="xs" icon="thumb_up" />
+              <q-btn
+                size="xs"
+                icon="thumb_down"
+                style="border-left: 1px black solid"
+              />
+            </q-btn-group>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from "pinia";
+import { useMainStore } from "../stores/main-store";
+
+defineOptions({
+  name: "2Page",
+});
+
+const MainStore = useMainStore();
+const { loading, solution, question } = storeToRefs(MainStore);
+</script>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index dffa6ec..4ffb9fb 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -3,9 +3,12 @@ const routes = [
     path: "/",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/IndexPage.vue") },
-      { path: "1", component: () => import("pages/1Page.vue") },
-      { path: "2", component: () => import("pages/2Page.vue") },
+      { path: "/", component: () => import("pages/IndexPage.vue") },
+      { path: "/query", component: () => import("pages/QueryPage.vue") },
+      {
+        path: "/documents",
+        component: () => import("pages/DocumentsPage.vue"),
+      },
     ],
   },