diff --git a/src/components/apis/default.ts b/src/components/apis/default.ts
index 2d23f3d..616e3e0 100644
--- a/src/components/apis/default.ts
+++ b/src/components/apis/default.ts
@@ -36,12 +36,12 @@ export async function apiRequest({ method, path, body, header }: apiRequesProps)
     } else if (method === 'DELETE') {
       res = await customAxios.delete(path, body)
     }
-    console.log(res)
+    // console.log(res)
     return { status: res?.status || res?.data?.status, message: res?.data }
   } catch (error) {
-    console.log(error)
+    // console.log(error)
     if (axios.isAxiosError(error)) {
-      console.log(error.response?.data?.message)
+      // console.log(error.response?.data?.message)
       return {
         status: error?.response?.status,
         message: error?.response?.data?.message,
diff --git a/src/components/user-dashboard/DataTable.tsx b/src/components/user-dashboard/DataTable.tsx
index 75cefeb..9a31b0d 100644
--- a/src/components/user-dashboard/DataTable.tsx
+++ b/src/components/user-dashboard/DataTable.tsx
@@ -19,11 +19,7 @@ interface DataTableProps<TData, TValue> {
 }
 
 // Define the DataTable component as a functional component
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  queryData,
-}: DataTableProps<TData, TValue>) {
+export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
   // Initialize a table instance using useReactTable
   const table = useReactTable({
     data, // Data to display
@@ -34,7 +30,7 @@ export function DataTable<TData, TValue>({
   return (
     <div
       className={`${
-        queryData ? 'opacity-100 visible' : 'invisible opacity-0'
+        data ? 'opacity-100 visible' : 'invisible opacity-0'
       } rounded-md w-full transition ease-linear duration-1000`}
     >
       <Table>
diff --git a/src/components/user-dashboard/FullScreenSearchBar.tsx b/src/components/user-dashboard/FullScreenSearchBar.tsx
index 6654b1f..467f65a 100644
--- a/src/components/user-dashboard/FullScreenSearchBar.tsx
+++ b/src/components/user-dashboard/FullScreenSearchBar.tsx
@@ -8,6 +8,7 @@ interface FullScreenSearchBarProps {
   setQuery: Dispatch<React.SetStateAction<string>> // Function to update the search query
   fetchDataOnEnter: React.FormEventHandler
   queryData: object
+  toggle: boolean
 }
 
 // Create a functional component named FullScreenSearchBar and provide the expected props
@@ -15,7 +16,8 @@ export const FullScreenSearchBar: FC<FullScreenSearchBarProps> = ({
   query,
   setQuery,
   fetchDataOnEnter,
-  queryData,
+  // queryData,
+  toggle,
 }) => {
   // Function to handle input changes and update the query and focus state
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -26,14 +28,14 @@ export const FullScreenSearchBar: FC<FullScreenSearchBarProps> = ({
     <>
       <div
         className={`pt-10 w-full ${
-          queryData ? 'translate-y-0' : '2xl:translate-y-[200%] xl:translate-y-[175%]'
+          toggle ? 'translate-y-0' : '2xl:translate-y-[200%] xl:translate-y-[175%]'
         } transition duration-700`}
       >
         <div className={`w-full text-center`}>
           <form onSubmit={fetchDataOnEnter}>
             <Input
               className={`px-5 ${
-                queryData ? 'scale-75' : ''
+                toggle ? 'scale-75' : ''
               }  rounded-full transition-all sm:py-10 py-6 text-xl sm:text-3xl duration-500 hover:shadow-md`}
               type="text"
               placeholder="Search for the service here"
diff --git a/src/pages/user-dashboard/index.tsx b/src/pages/user-dashboard/index.tsx
index b407788..b1775e4 100644
--- a/src/pages/user-dashboard/index.tsx
+++ b/src/pages/user-dashboard/index.tsx
@@ -3,13 +3,19 @@
 // import { columns } from '@/components/user-dashboard/columns'
 // import { DummyData } from '@/lib/utils/UserDashboardData'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Modal } from '@/components/ui/modal'
 import { useRouter } from 'next/router'
 import { getCookies, setCookie } from 'cookies-next'
 // import { useQuery } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 import { selectAuthState } from '@/store/authSlice'
+import { FullScreenSearchBar } from '@/components/user-dashboard/FullScreenSearchBar'
+import { DataTable } from '@/components/user-dashboard/DataTable'
+import { TUserDashboardTable, columns } from '@/components/user-dashboard/columns'
+import { DummyData } from '@/lib/utils/UserDashboardData'
+import { apiRequest } from '@/components/apis/default'
+import { METHODS } from '@/lib/utils/ApiMethods'
 
 interface IndexProps {
   consent: boolean
@@ -20,17 +26,106 @@ interface ServerSideProps {
   req: NextApiRequest
 }
 
+type ServiceAvailability = {
+  availability: string
+  date_created: string
+  description: string
+  pricing: number
+  provider_id: number
+  service_id: number
+  service_type_id: number
+}
+
 export default function Index({ consent }: IndexProps): JSX.Element {
   const [cookieModal, setCookieModal] = useState(false)
   // Remove the below when unecessary -1Solon
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [query, setQuery] = useState('')
   const [fetchedData, setFetchedData] = useState({})
+  const [serviceData, setServiceData] = useState<ServiceAvailability[]>()
+  const [servicesToBeUsed, setServicesTobeUsed] = useState<TUserDashboardTable[]>([])
+  const [serviceDataFromSearchInput, setServiceDataFromSearchInput] =
+    useState<ServiceAvailability[]>()
+  const [providerName, setProviderName] = useState('')
+
+  const serviceDataFromSearch: TUserDashboardTable[] = useMemo(() => {
+    return []
+  }, [])
+
+  const regularServiceData: TUserDashboardTable[] = useMemo(() => {
+    return []
+  }, [])
+
   // Remove the below when unecessary -1Solon
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const router = useRouter()
   const authState = useSelector(selectAuthState)
 
+  const getServiceData = async () => {
+    try {
+      const serviceData = await apiRequest({ method: METHODS.GET, path: '/services' })
+      setServiceData(serviceData?.message)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  const getProviderNameFromId = async (providerId: number) => {
+    try {
+      const provider = await apiRequest({
+        method: METHODS.GET,
+        path: `/users/${String(providerId)}`,
+      })
+      setProviderName(provider?.message?.username)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  const getServicesUsingSearch = async (searchQuery: string) => {
+    try {
+      const serviceData = await apiRequest({ method: METHODS.GET, path: `/search/${searchQuery}` })
+      setServiceDataFromSearchInput(serviceData)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  useEffect(() => {
+    if (!serviceData) getServiceData()
+  }, [serviceData])
+
+  useEffect(() => {
+    serviceDataFromSearchInput?.message?.searchResult?.map((service: ServiceAvailability) => {
+      getProviderNameFromId(service.provider_id)
+      serviceDataFromSearch?.push({
+        short_description: service?.description,
+        provider: providerName,
+        availability: service?.availability,
+        pricing: String(service?.pricing),
+      })
+    })
+    console.log(serviceDataFromSearch)
+  }, [providerName, serviceDataFromSearch, serviceDataFromSearchInput?.message?.searchResult])
+
+  useEffect(() => {
+    serviceData?.map(service => {
+      getProviderNameFromId(service.provider_id)
+      regularServiceData?.push({
+        availability: service.availability,
+        pricing: String(service.pricing),
+        provider: providerName,
+        short_description: service.description,
+      })
+      console.log(regularServiceData)
+    })
+  }, [serviceData])
+
+  useEffect(() => {
+    if (serviceDataFromSearch.length === 0) setServicesTobeUsed(regularServiceData)
+    else setServicesTobeUsed(serviceDataFromSearch)
+  }, [serviceDataFromSearch, regularServiceData])
+
   /* Cookie-consent check & Modal */
   useEffect(() => {
     if (JSON.stringify(consent) === '{}') {
@@ -54,8 +149,7 @@ export default function Index({ consent }: IndexProps): JSX.Element {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const fetchDataOnEnter = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
-    const formData = new FormData(event.currentTarget)
-    setFetchedData(formData)
+    getServicesUsingSearch(query)
   }
 
   useEffect(() => {
@@ -64,7 +158,7 @@ export default function Index({ consent }: IndexProps): JSX.Element {
 
   // useEffect to check user authentication and redirect if not authenticated
   useEffect(() => {
-    // if (!authState) router.push("user-login");
+    // if (!authState) router.push('user-login')
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [authState])
 
@@ -86,19 +180,19 @@ export default function Index({ consent }: IndexProps): JSX.Element {
 
       <div className="relative h-screen">
         <div>
-          {/* <FullScreenSearchBar
+          <FullScreenSearchBar
             queryData={fetchedData}
             query={query}
             setQuery={setQuery}
             fetchDataOnEnter={fetchDataOnEnter}
-          /> */}
-
-          {/* <DataTable
+            toggle={DummyData ? true : false}
+          />
+          <DataTable
             columns={columns}
-            data={DummyData}
+            data={servicesToBeUsed}
             query={query}
             queryData={fetchedData}
-          /> */}
+          />
         </div>
       </div>
     </main>