diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..a21f178
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.git
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..a20a479
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,23 @@
+# Stage 1: Build the Vue App
+FROM node:18 AS builder
+
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build -- --force
+
+
+# Stage 2: Serve the Built App Using Nginx
+FROM nginx:alpine
+
+WORKDIR /usr/share/nginx/html
+RUN rm -rf ./*
+COPY --from=builder /app/dist ./
+
+# Nginx Config
+# COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/src/App.vue b/src/App.vue
index ccbf04f..a10582c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,20 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 
-import NavBars from './components/NavBars.vue'
+
+import NavBars from '@/components/NavBars.vue'
 
 </script>
 
 <template>
-  
-  <header class="w-[100%]">
-    <NavBars/>
-    <!-- <div class="wrapper w-[100%]">
-      <nav class="text-[blue]">
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-        
-      </nav>
-    </div> -->
-  </header>
-
-  <RouterView />
+  <div class="h-screen flex flex-col ">
+    <div class="h-[10vh]">
+      <NavBars class=" w-[100%]"/>
+    </div>
+    <div class="flex-1 overflow-hidden">
+      <RouterView />
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/assets/base.css b/src/assets/base.css
index dff995a..fd40910 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,87 +1,4 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
 
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
 
-  --vt-c-indigo: #2c3e50;
 
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
 
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  
-  font-weight: normal;
-}
-
-body {
-  background-color: #2c3e50;
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/assets/main.css b/src/assets/main.css
index bf804ca..36920e1 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,14 +1,8 @@
-@import './base.css';
+/* @import './base.css'; */
 @import "tailwindcss";
 @plugin "daisyui";
 
-#app {
-  /* max-width: 1280px; */
-  width:100vw;
-  /* margin: 0 0; */
-  /* padding: 2rem; */
-  font-weight: normal;
-}
+
 
 
 
diff --git a/src/components/InputFieldCard.vue b/src/components/InputFieldCard.vue
index 4ea0233..eb1579a 100644
--- a/src/components/InputFieldCard.vue
+++ b/src/components/InputFieldCard.vue
@@ -69,8 +69,8 @@ const sendRequest = async()=>{
   searchStore.searchParams = {
     query: searchQuery.value,
     search_type: selectedSearchType.value,
-    page_num: pageNumber.value,
-    page_size: pageSize.value
+    // page_num: pageNumber.value,
+    // page_size: pageSize.value
   };
   console.log("searchStore: ", searchStore.searchParams)
   router.push("/table");
diff --git a/src/components/NavBars.vue b/src/components/NavBars.vue
index ab6010a..a0bf61c 100644
--- a/src/components/NavBars.vue
+++ b/src/components/NavBars.vue
@@ -68,9 +68,9 @@ import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuIt
 import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 
 const navigation = [
-  { name: 'Dashboard', href: '#', current: true },
-  { name: 'Team', href: '#', current: false },
-  { name: 'Projects', href: '#', current: false },
-  { name: 'Calendar', href: '#', current: false },
+  { name: 'Dashboard', href: '/', current: true },
+  // { name: 'Team', href: '#', current: false },
+  // { name: 'Projects', href: '#', current: false },
+  // { name: 'Calendar', href: '#', current: false },
 ]
 </script>
\ No newline at end of file
diff --git a/src/components/TableComp.vue b/src/components/TableComp.vue
index 53c5c65..adea9e8 100644
--- a/src/components/TableComp.vue
+++ b/src/components/TableComp.vue
@@ -1,66 +1,100 @@
 <template>
-    <div>
+    
+    <div class=" w-[100%] h-[100%]  overflow-hidden">
+        <div class="flex justify-between mb-[20px]">
+        <div>
         <div>Entity you searched for: <span class="!font-bold">{{ searchWhat || "You did not provide" }}</span></div>
         <div>Search Type: <span class="!font-bold">{{ searchStore.searchParams.search_type || "You did not provide" }}</span></div>
-    <div v-if="responseData">
-        <table class="table">
-            <thead>
-                <tr>
-
-                </tr>
-                <tr>
-                    <th v-for="item in headers">{{ item }}</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="item in responseData.data">
-                    <td>{{ item.metadata._id }}</td>
-                    <td>{{ item.metadata.title }}</td>
-                    <td>{{ item.metadata.description }}</td>
-                    <td>{{ item.metadata.date }}</td>
-                    <td>{{ item.metadata.created_by }}</td>
-                    <td>{{ item.metadata.countries }}</td>
-                    <td>{{ item.metadata.topics }}</td>
-                    <td>{{ item.metadata.organizations }}</td>
-                    <td>{{ item.metadata.persons }}</td>
-                </tr>
-            </tbody>
-        </table>
-        
-    </div>
-
+        </div>
+        <div>
+            <button @click="goToSearchPage" class="btn rounded-[10px] bg-[#0000FF] text-[white]">Back To Search Page</button>
+        </div>
+        </div>
+        <div v-if="responseData" class="pt-[0px] h-[90%] w-[100%] border border-[blue] overflow-scroll">
+            <table class="table table-pin-rows border w-full">
+                <thead class="">
+                    <!-- <tr  class=""> -->
+                        <!-- <th v-for="item in keys_of_a_data" class=" sticky top-0 z-10">{{item}}</th> -->
+                        <!-- <th colspan="52">metadata</th>
+                        <th>search</th>
+                    </tr> -->
+                    <tr class="sticky border bg-[#000C66] text-[white]">
+                        <th v-for="item in arr_col_items" class="sticky border border-gray-600">{{ item }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="item in row_values" >
+                        <td v-for="item2 in item" class="border">{{ item2 }}</td>
+                        
+                    </tr>
+                </tbody>
+            </table>
+            
+        </div>
+        <div class="h-[90%] w-[100%] flex justify-center items-center font-bold text-[red] text-[32px]" v-else>No search results</div>
     </div>
 </template>
 <script setup lang="ts">
 import {ref,reactive,onMounted,toRaw} from "vue";
 import { useSearchStore } from "@/stores/searchStore";
-import {fetchData} from "@/utils/api.js"
+import {fetchData} from "@/utils/api.ts"
+import { useRouter } from "vue-router";
 const searchStore = useSearchStore();
 
-
-const headers=["ID","Title","Description","Date","Created By","Countries","Topics","Organizations","Persons"]
 const responseData = ref("")
 const searchWhat = ref(searchStore.searchParams.query)
 
 const query={...searchStore.searchParams}
 
 const keys_of_a_data=ref()
-// const workingVar = {
-//          query: "Thailand",
-//          search_type: "precise",
-//         page_num: "2",
-//          page_size: "2"
-//        }
 
-//responseData = {data:(100)[...], pagination:{...}}
-//data =[{metadata: {...} , search: {...} },{},{}]
+const arr_col_items=ref([])
+
+const row_values = ref([])
+const router = useRouter();
+const goToSearchPage=()=>{
+    router.push ("/")
+}
+
 onMounted(()=>{
     fetchData("/search","POST",query).then(response =>{
-        console.log("response apple: ",response)
-        responseData.value = response
-        console.log("response starfish: ",Object.keys(response.data[0]))
+        
+        console.log("response kk:", response)
+        //console.log("responseData start dolphine: ", typeof responseData.value.data.length)
+        if (response.data.length===0){
+            
+            console.log("responseData.value 12: ", responseData.value)
+            responseData.value=""
+            console.log("responseData.value 13: ", responseData.value)
+        }
+        else {
+            responseData.value = response
         keys_of_a_data.value = Object.keys(response.data[0])
-        console.log("keys_of_a_data: ",keys_of_a_data)
+        
+
+        const test = Object.keys(response.data[0].metadata)
+        
+        const test2 = Object.keys(response.data[0].search)
+        
+        keys_of_a_data.value.forEach((item, index)=>{
+            
+            arr_col_items.value.push(...Object.keys(response.data[0][item]))
+        })
+        
+
+        response.data.map(item=>{
+            const values=[]
+           
+            Object.keys(item).forEach(key=>{
+                console.log("key12: ", key)
+                values.push(...Object.values(item[key]))
+            
+            })
+            
+            row_values.value.push(values)
+
+        }) }
+
         
     }).catch(error=>{
         responseData.value = "error"
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..dc179e7
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+// src/shims-vue.d.ts
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/src/utils/api.js b/src/utils/api.ts
similarity index 98%
rename from src/utils/api.js
rename to src/utils/api.ts
index d60a5a0..c2397fc 100644
--- a/src/utils/api.js
+++ b/src/utils/api.ts
@@ -15,6 +15,9 @@ export const fetchData = async(endpoints="", requestType="GET", requestBody=null
             options.body = JSON.stringify(requestBody)
             
         }
+
+        
+
         console.log("callign endpoints: ", endpoints)
         const response = await fetch(`${endpoints}`, options)
         
diff --git a/src/views/ResponseView.vue b/src/views/ResponseView.vue
index c49fc40..3580023 100644
--- a/src/views/ResponseView.vue
+++ b/src/views/ResponseView.vue
@@ -1,5 +1,5 @@
 <template>
-    <main class="flex place-content-center p-4  h-[100%]">
+    <main class="flex  p-4 w-[100%] h-[100%] overflow-hidden">
         <TableComp />
     </main>