diff --git a/Queries/CronJob/index.js b/Queries/CronJob/index.js
new file mode 100644
index 0000000..b6ae41d
--- /dev/null
+++ b/Queries/CronJob/index.js
@@ -0,0 +1,24 @@
+import apiClient from '../../utlis/apiClient';
+import { ENVIRONMENT_ENDPOINT } from '../../utlis/apiEndpoints';
+
+const url = ENVIRONMENT_ENDPOINT;
+
+export const getCronJobs = async (id) => {
+  const updatedUrl = `${url}/${id}/deploymentspace/cronjob`;
+  try {
+    const data = await apiClient.get(updatedUrl);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch cron jobs');
+  }
+};
+
+export const getCronByName = async (id, name) => {
+  const updatedUrl = `${url}/${id}/deploymentspace/cronjob/${name}`;
+  try {
+    const data = await apiClient.get(updatedUrl);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch cron job details');
+  }
+};
diff --git a/Queries/Deployment/index.js b/Queries/Deployment/index.js
new file mode 100644
index 0000000..9fbcd12
--- /dev/null
+++ b/Queries/Deployment/index.js
@@ -0,0 +1,24 @@
+import apiClient from '../../utlis/apiClient';
+import { ENVIRONMENT_ENDPOINT } from '../../utlis/apiEndpoints';
+
+const url = ENVIRONMENT_ENDPOINT;
+
+export const getDeployment = async (id) => {
+  const updatedUrl = `${url}/${id}/deploymentspace/deployment`;
+  try {
+    const data = await apiClient.get(updatedUrl);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch deployment');
+  }
+};
+
+export const getDeploymentByName = async (id, name) => {
+  const updatedUrl = `${url}/${id}/deploymentspace/deployment/${name}`;
+  try {
+    const data = await apiClient.get(updatedUrl);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch deployment details');
+  }
+};
diff --git a/Queries/Pods/index.js b/Queries/Pods/index.js
new file mode 100644
index 0000000..c3f8340
--- /dev/null
+++ b/Queries/Pods/index.js
@@ -0,0 +1,24 @@
+import apiClient from '../../utlis/apiClient';
+import { ENVIRONMENT_ENDPOINT } from '../../utlis/apiEndpoints';
+
+const url = ENVIRONMENT_ENDPOINT;
+
+export const getPods = async (id) => {
+  const updatedUrl = `${url}/${id}/deploymentspace/pod`;
+  try {
+    const data = await apiClient.get(updatedUrl);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch pods');
+  }
+};
+
+export const getPodByName = async (id, name) => {
+  const updatedUrl = `${url}/${id}/deploymentspace/pod/${name}`;
+  try {
+    const data = await apiClient.get(updatedUrl);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch pod details');
+  }
+};
diff --git a/Queries/Service/index.js b/Queries/Service/index.js
new file mode 100644
index 0000000..e4b2f4b
--- /dev/null
+++ b/Queries/Service/index.js
@@ -0,0 +1,24 @@
+import apiClient from '../../utlis/apiClient';
+import { ENVIRONMENT_ENDPOINT } from '../../utlis/apiEndpoints';
+
+const url = ENVIRONMENT_ENDPOINT;
+
+export const getService = async (id) => {
+  const updatedUrl = `${url}/${id}/deploymentspace/service`;
+  try {
+    const data = await apiClient.get(updatedUrl);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch services');
+  }
+};
+
+export const getServiceByName = async (id, name) => {
+  const updatedUrl = `${url}/${id}/deploymentspace/service/${name}`;
+  try {
+    const data = await apiClient.get(updatedUrl);
+    return data;
+  } catch (error) {
+    throw new Error(error.response?.data?.error?.message || 'Failed to fetch service details');
+  }
+};
diff --git a/README.md b/README.md
index 1e99ce3..d34e2a3 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ Zop is a comprehensive tool for managing cloud infrastructure. It consists of th
 Run the following command to pull and start the Docker image for the zop-api:
 
 ```bash
-    docker run -d -p 8000:8000 --name zop-api zopdev/zop-api:v0.0.2
+    docker run -d -p 8000:8000 --name zop-api zopdev/zop-api:v0.0.3
 ```
 
 #### zop-ui
@@ -32,7 +32,7 @@ Run the following command to pull and start the Docker image for the zop-api:
 Run the following command to pull and start the Docker image for the zop-ui:
 
 ```bash
-    docker run -d -p 3000:3000 -e NEXT_PUBLIC_API_BASE_URL='http://localhost:8000' --name zop-ui zopdev/zop-ui:v0.0.2
+    docker run -d -p 3000:3000 -e NEXT_PUBLIC_API_BASE_URL='http://localhost:8000' --name zop-ui zopdev/zop-ui:v0.0.3
 ```
 
 > **Note:** The environment variable `NEXT_PUBLIC_API_BASE_URL` is used by zop-ui to connect to the
diff --git a/components/Button/IconButton/index.js b/components/Button/IconButton/index.js
new file mode 100644
index 0000000..af3e4c2
--- /dev/null
+++ b/components/Button/IconButton/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const IconButton = ({ disabled, onClick, children, style, ...rest }) => {
+  return (
+    <button
+      type="button"
+      className={`inline-flex items-center justify-center p-2 rounded-full ${
+        disabled ? 'opacity-50' : 'hover:bg-gray-200 focus:outline-none focus:bg-gray-200'
+      } ${style}`}
+      onClick={onClick}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default IconButton;
diff --git a/components/Cards/applicationCard.js b/components/Cards/applicationCard.js
index 4665ab5..0740dfc 100644
--- a/components/Cards/applicationCard.js
+++ b/components/Cards/applicationCard.js
@@ -12,7 +12,7 @@ const ApplicationCard = ({ data, view }) => {
   }, [data?.id, router]);
 
   const handleRedirect = () => {
-    router.push(`/applications/${data?.id}/deploymentSpace`);
+    router.push(`/applications/${data?.id}/environment`);
   };
 
   return (
diff --git a/components/FullScreenDrawer/index.js b/components/FullScreenDrawer/index.js
new file mode 100644
index 0000000..4fa630c
--- /dev/null
+++ b/components/FullScreenDrawer/index.js
@@ -0,0 +1,104 @@
+'use client';
+
+import React, { useState, Fragment } from 'react';
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import IconButton from '../Button/IconButton';
+
+export function FullScreenDrawer({
+  title,
+  RenderIcon,
+  RenderComponent,
+  disabled,
+  isIcon,
+  handleMenuItemClose = () => {},
+  formData,
+}) {
+  const [open, setOpen] = useState(false);
+
+  const handleClickOpen = (e) => {
+    e.stopPropagation();
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleSuccess = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      {isIcon && (
+        // <Tooltip title={tooltipTitle}>
+        <IconButton onClick={(e) => handleClickOpen(e)} disabled={disabled}>
+          {RenderIcon}
+        </IconButton>
+        // </Tooltip>
+      )}
+
+      <Transition show={open} as={Fragment}>
+        <Dialog className="relative z-10" onClose={handleClose}>
+          <TransitionChild
+            as={Fragment}
+            enter="ease-in-out duration-500"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in-out duration-500"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-800 bg-opacity-10 backdrop-blur transition-opacity" />
+          </TransitionChild>
+
+          <div className="fixed inset-0 overflow-hidden">
+            <div className="absolute inset-0 overflow-hidden">
+              <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full xs:pl-0 md:pl-10">
+                <TransitionChild
+                  as={Fragment}
+                  enter="transform transition ease-in-out duration-500 sm:duration-700"
+                  enterFrom="translate-x-full"
+                  enterTo="translate-x-0"
+                  leave="transform transition ease-in-out duration-500 sm:duration-700"
+                  leaveFrom="translate-x-0"
+                  leaveTo="translate-x-full"
+                >
+                  <DialogPanel className="pointer-events-auto w-screen xs:min-w-screen md:max-w-3xl ">
+                    <div className="flex h-full flex-col bg-gray-50  shadow-xl">
+                      <div className="px-4 sm:px-8 bg-primary-500 py-3">
+                        <div className="flex items-start justify-between ">
+                          <DialogTitle className="font-semibold !text-white  sm:text-2xl xs:text-xl leading-6 ">
+                            {title}
+                          </DialogTitle>
+                          <div className="ml-3 flex h-7 items-center">
+                            <IconButton
+                              onClick={() => {
+                                handleClose();
+                                handleMenuItemClose();
+                              }}
+                            >
+                              <XMarkIcon className="h-6 w-6 text-gray-600" aria-hidden="true" />
+                            </IconButton>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="relative mt-4 pb-4 flex-1 px-4 sm:px-2 overflow-y-scroll">
+                        <RenderComponent
+                          formData={formData}
+                          handleClose={handleClose}
+                          setOpen={handleSuccess}
+                        />
+                      </div>
+                    </div>
+                  </DialogPanel>
+                </TransitionChild>
+              </div>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+}
diff --git a/components/Table/table.js b/components/Table/table.js
index a1ffe5a..d74f134 100644
--- a/components/Table/table.js
+++ b/components/Table/table.js
@@ -2,15 +2,24 @@ import React from 'react';
 import TableHeader from './tableHeader';
 import TableBody from './tableBody';
 
-const Table = ({ headers, data, onEdit, onDelete, action }) => {
+const Table = ({
+  headers,
+  data,
+  onEdit,
+  onDelete,
+  action,
+  handleRowClick = () => {},
+  renderComponent,
+  enableRowClick,
+}) => {
   return (
-    <div className="-mx-4 mt-8 flow-root sm:mx-0">
-      <table className="min-w-full">
+    <div className="-mx-4 mt-4 min-w-full h-[75vh] overflow-auto flow-root sm:mx-0">
+      <table className="table-auto w-full border-collapse">
         <colgroup>
           {headers.map((header) => (
             <col key={header.key} className={header.colClassName || ''} />
           ))}
-          <col className="w-auto" />
+          <col className=" w-[100vw]" />
         </colgroup>
         <TableHeader headers={headers} action={action} />
         <TableBody
@@ -19,6 +28,9 @@ const Table = ({ headers, data, onEdit, onDelete, action }) => {
           onEdit={onEdit}
           onDelete={onDelete}
           action={action}
+          handleRowClick={handleRowClick}
+          renderComponent={renderComponent}
+          enableRowClick={enableRowClick}
         />
       </table>
     </div>
diff --git a/components/Table/tableBody.js b/components/Table/tableBody.js
index 1fa356d..1a6e12a 100644
--- a/components/Table/tableBody.js
+++ b/components/Table/tableBody.js
@@ -1,16 +1,32 @@
 import React from 'react';
+import { FullScreenDrawer } from '../FullScreenDrawer';
+import { DocumentChartBarIcon } from '@heroicons/react/24/outline';
 
-const TableBody = ({ data, headers, onEdit, onDelete, action = true }) => {
+const TableBody = ({
+  data,
+  headers,
+  onEdit,
+  onDelete,
+  action = true,
+  handleRowClick = () => {},
+  renderComponent,
+  enableRowClick = false,
+}) => {
   return (
     <tbody>
       {data?.map((row, rowIndex) => (
-        <tr key={row.id || rowIndex} className="border-b border-gray-200">
+        <tr
+          key={row.id || rowIndex}
+          className={`border-b border-gray-200 group ${enableRowClick && 'hover:bg-gray-50 cursor-pointer'}`}
+          onClick={() => enableRowClick && handleRowClick(row)}
+        >
           {headers.map((header) => (
             <td
               key={header.key}
-              className={`px-3 py-5 text-sm ${
+              className={`px-3 py-5 text-sm  ${
                 header.align === 'right' ? 'text-right' : 'text-left'
-              } text-gray-500`}
+              } text-gray-500 ${header.colClassName}`}
+              style={{ minWidth: 175, flexGrow: 1 }}
             >
               {/* Allow React components or plain text */}
               {typeof row[header.key] === 'function' ? row[header.key]() : row[header.key]}
@@ -18,15 +34,32 @@ const TableBody = ({ data, headers, onEdit, onDelete, action = true }) => {
           ))}
           {action && (
             <td className="px-3 py-5 text-right">
-              <div className="flex gap-2 justify-end">
+              <div className="flex gap-2 justify-center">
                 {onEdit && (
                   <button onClick={() => onEdit(row)} className="text-blue-500 hover:text-blue-700">
                     Edit
                   </button>
                 )}
-                <button onClick={() => onDelete(row)} className="text-red-500 hover:text-red-700">
-                  Delete
-                </button>
+                {onDelete && (
+                  <button onClick={() => onDelete(row)} className="text-red-500 hover:text-red-700">
+                    Delete
+                  </button>
+                )}
+                {renderComponent && (
+                  <FullScreenDrawer
+                    // tooltipTitle={row?.name}
+                    isIcon
+                    RenderIcon={
+                      <DocumentChartBarIcon
+                        className="-ml-0.5 h-6 w-6 text-gray-600"
+                        aria-hidden="true"
+                      />
+                    }
+                    title={row?.name}
+                    RenderComponent={renderComponent}
+                    formData={row}
+                  />
+                )}
               </div>
             </td>
           )}
diff --git a/components/Table/tableHeader.js b/components/Table/tableHeader.js
index ffa02df..e71966d 100644
--- a/components/Table/tableHeader.js
+++ b/components/Table/tableHeader.js
@@ -8,7 +8,7 @@ const TableHeader = ({ headers, action = true }) => {
           <th
             key={header.key}
             scope="col"
-            className={`px-3 py-3.5 text-sm font-semibold text-gray-900 ${
+            className={`px-3 py-3.5 text-sm font-semibold text-gray-900 whitespace-nowrap ${
               header.align === 'right' ? 'text-right' : 'text-left'
             } ${header.className || ''}`}
           >
@@ -16,7 +16,7 @@ const TableHeader = ({ headers, action = true }) => {
           </th>
         ))}
         {action && (
-          <th className="px-3 py-3.5 text-sm font-semibold text-gray-900 text-right">Actions</th>
+          <th className="px-3 py-3.5 text-sm font-semibold text-gray-900 text-center">Actions</th>
         )}
       </tr>
     </thead>
diff --git a/hooks/cronJob/getCronJobDetails.js b/hooks/cronJob/getCronJobDetails.js
new file mode 100644
index 0000000..7ccdc7c
--- /dev/null
+++ b/hooks/cronJob/getCronJobDetails.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { getCronByName } from '../../Queries/CronJob';
+
+const useCronJobDetails = (formData) => {
+  const params = useParams();
+  const [cronJob, setCronJob] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchCronJobDetails = async () => {
+      try {
+        const data = await getCronByName(params?.['environment-id'], formData?.name);
+        setCronJob(data);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCronJobDetails();
+  }, []);
+
+  return { cronJob, loading, error };
+};
+
+export default useCronJobDetails;
diff --git a/hooks/cronJob/getCronJobList.js b/hooks/cronJob/getCronJobList.js
new file mode 100644
index 0000000..2e31eda
--- /dev/null
+++ b/hooks/cronJob/getCronJobList.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { getCronJobs } from '../../Queries/CronJob';
+import { useParams } from 'next/navigation';
+
+const useCronJobList = () => {
+  const params = useParams();
+  const [cronJob, setCronJob] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchCronJob = async () => {
+      try {
+        const data = await getCronJobs(params?.['environment-id']);
+        setCronJob(data);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCronJob();
+  }, []);
+
+  return { cronJob, loading, error };
+};
+
+export default useCronJobList;
diff --git a/hooks/deployment/getDeployment.js b/hooks/deployment/getDeployment.js
new file mode 100644
index 0000000..a6652b6
--- /dev/null
+++ b/hooks/deployment/getDeployment.js
@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+import { getService } from '../../Queries/Service';
+import { useParams } from 'next/navigation';
+import { getDeployment } from '../../Queries/Deployment';
+
+const useDeploymentList = () => {
+  const params = useParams();
+  const [deployment, setDeployment] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchDeployment = async () => {
+      try {
+        const data = await getDeployment(params?.['environment-id']);
+        setDeployment(data);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDeployment();
+  }, []);
+
+  return { deployment, loading, error };
+};
+
+export default useDeploymentList;
diff --git a/hooks/deployment/getDeploymentDetails.js b/hooks/deployment/getDeploymentDetails.js
new file mode 100644
index 0000000..267ed2d
--- /dev/null
+++ b/hooks/deployment/getDeploymentDetails.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { getDeploymentByName } from '../../Queries/Deployment';
+
+const useDeploymentDetails = (formData) => {
+  const params = useParams();
+  const [deployment, setDeployment] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchDeploymentDetails = async () => {
+      try {
+        const data = await getDeploymentByName(params?.['environment-id'], formData?.name);
+        setDeployment(data);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDeploymentDetails();
+  }, []);
+
+  return { deployment, loading, error };
+};
+
+export default useDeploymentDetails;
diff --git a/hooks/deploymentSpace/addDeploymentSpace.js b/hooks/deploymentSpace/addDeploymentSpace.js
index b658fc3..c4ca4a6 100644
--- a/hooks/deploymentSpace/addDeploymentSpace.js
+++ b/hooks/deploymentSpace/addDeploymentSpace.js
@@ -5,7 +5,6 @@ import { addDeploymentConfig } from '../../Queries/DeploymentSpace';
 const useAddDeploymentConfig = () => {
   const router = useRouter();
   const params = useParams();
-  //   const [values, setValues] = useState({ name: '' });
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
 
@@ -16,7 +15,7 @@ const useAddDeploymentConfig = () => {
     try {
       const data = await addDeploymentConfig(id, values);
       setError(null);
-      router.push(`/applications/${params?.['application-id']}/deploymentSpace`);
+      router.push(`/applications/${params?.['application-id']}/environment`);
       return data;
     } catch (error) {
       setError(error.message);
@@ -26,8 +25,6 @@ const useAddDeploymentConfig = () => {
   };
 
   return {
-    // values,
-    // setValues,
     handleSubmit,
     isLoading,
     error,
diff --git a/hooks/deploymentSpace/getDeploymentSpace.js b/hooks/deploymentSpace/getDeploymentSpace.js
index 4581ed4..9429f56 100644
--- a/hooks/deploymentSpace/getDeploymentSpace.js
+++ b/hooks/deploymentSpace/getDeploymentSpace.js
@@ -2,83 +2,6 @@ import { useEffect, useState } from 'react';
 import { getApplicationById } from '../../Queries/Application';
 import { useParams } from 'next/navigation';
 
-const datas = {
-  data: {
-    id: 1,
-    name: 'application_1',
-    environments: [
-      {
-        id: 1,
-        name: 'prod',
-        level: 1,
-        applicationID: 1,
-        deploymentSpace: null,
-        createdAt: '2024-12-15T18:11:52Z',
-        updatedAt: '2024-12-15T18:11:52Z',
-      },
-      {
-        id: 2,
-        name: 'test',
-        level: 3,
-        applicationID: 1,
-        deploymentSpace: null,
-        createdAt: '2024-12-15T18:11:52Z',
-        updatedAt: '2024-12-15T18:11:52Z',
-      },
-      {
-        id: 3,
-        name: 'stage',
-        level: 2,
-        applicationID: 1,
-        deploymentSpace: null,
-        createdAt: '2024-12-15T18:11:52Z',
-        updatedAt: '2024-12-15T18:11:52Z',
-      },
-      {
-        id: 4,
-        name: 'env3',
-        level: 0,
-        applicationID: 1,
-        deploymentSpace: null,
-        createdAt: '2024-12-15T18:12:07Z',
-        updatedAt: '2024-12-15T18:12:07Z',
-      },
-      {
-        id: 5,
-        name: 'Test-env',
-        level: 4,
-        applicationID: 1,
-        deploymentSpace: null,
-        createdAt: '2024-12-16T06:29:49Z',
-        updatedAt: '2024-12-16T06:29:49Z',
-      },
-      {
-        id: 6,
-        name: 'stage',
-        level: 1,
-        applicationId: 1,
-        deploymentSpace: {
-          name: 'exampleName',
-          next: {
-            name: 'gke',
-            next: {
-              name: 'test-gcp-04dec',
-              next: {
-                name: 'monitoring',
-                next: null,
-              },
-            },
-          },
-        },
-        createdAt: '2024-12-15T16:05:06Z',
-        updatedAt: '2024-12-15T16:05:06Z',
-      },
-    ],
-    createdAt: '2024-12-15T18:11:52Z',
-    updatedAt: '2024-12-15T18:11:52Z',
-  },
-};
-
 const useGetDeploymentSpace = () => {
   const params = useParams();
 
diff --git a/hooks/environment/addEnvironment.js b/hooks/environment/addEnvironment.js
index eec065e..911ce5e 100644
--- a/hooks/environment/addEnvironment.js
+++ b/hooks/environment/addEnvironment.js
@@ -16,7 +16,7 @@ const useAddEnvironment = () => {
     try {
       const data = await addEnvironment(id, values);
       setError(null);
-      router.push(`/applications/${params?.['application-id']}/deploymentSpace`);
+      router.push(`/applications/${params?.['application-id']}/environment`);
       return data;
     } catch (error) {
       setError(error.message);
diff --git a/hooks/pods/getPodDetails.js b/hooks/pods/getPodDetails.js
new file mode 100644
index 0000000..9d7b770
--- /dev/null
+++ b/hooks/pods/getPodDetails.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { getPodByName } from '../../Queries/Pods';
+
+const usePodDetails = (formData) => {
+  const params = useParams();
+  const [pod, setPod] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchPodDetails = async () => {
+      try {
+        const data = await getPodByName(params?.['environment-id'], formData?.name);
+        setPod(data);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPodDetails();
+  }, []);
+
+  return { pod, loading, error };
+};
+
+export default usePodDetails;
diff --git a/hooks/pods/getPodsList.js b/hooks/pods/getPodsList.js
new file mode 100644
index 0000000..5a08069
--- /dev/null
+++ b/hooks/pods/getPodsList.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { getPods } from '../../Queries/Pods';
+
+const usePodList = () => {
+  const params = useParams();
+  const [pods, setPods] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchPods = async () => {
+      try {
+        const data = await getPods(params?.['environment-id']);
+        setPods(data);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPods();
+  }, []);
+
+  return { pods, loading, error };
+};
+
+export default usePodList;
diff --git a/hooks/service/getServiceDetails.js b/hooks/service/getServiceDetails.js
new file mode 100644
index 0000000..8c1ec75
--- /dev/null
+++ b/hooks/service/getServiceDetails.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { getServiceByName } from '../../Queries/Service';
+import { useParams } from 'next/navigation';
+
+const useServiceDetails = (formData) => {
+  const params = useParams();
+  const [service, setService] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchServiceDetails = async () => {
+      try {
+        const data = await getServiceByName(params?.['environment-id'], formData?.name);
+        setService(data);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchServiceDetails();
+  }, []);
+
+  return { service, loading, error };
+};
+
+export default useServiceDetails;
diff --git a/hooks/service/getServiceList.js b/hooks/service/getServiceList.js
new file mode 100644
index 0000000..cb0f286
--- /dev/null
+++ b/hooks/service/getServiceList.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { getService } from '../../Queries/Service';
+import { useParams } from 'next/navigation';
+
+const useServiceList = () => {
+  const params = useParams();
+  const [services, setServices] = useState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchServices = async () => {
+      try {
+        const data = await getService(params?.['environment-id']);
+        setServices(data);
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchServices();
+  }, []);
+
+  return { services, loading, error };
+};
+
+export default useServiceList;
diff --git a/partials/cronJob/cronJobDetails.js b/partials/cronJob/cronJobDetails.js
new file mode 100644
index 0000000..f277f71
--- /dev/null
+++ b/partials/cronJob/cronJobDetails.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import { calculateAge } from '../../utlis/helperFunc';
+import useCronJobDetails from '../../hooks/cronJob/getCronJobDetails';
+import ErrorComponent from '../../components/ErrorComponent';
+import CustomLinearProgress from '../../components/Loaders/LinearLoader';
+
+const CronJobDetails = ({ formData }) => {
+  const { cronJob, loading, error } = useCronJobDetails(formData);
+
+  return (
+    <>
+      <CustomLinearProgress isLoading={loading} classNames={{ root: 'my-2' }} />
+      {!loading && !error && (
+        <div className="px-6">
+          <div className="sm:px-0 ">
+            <h3 className="text-base/7 font-semibold text-gray-900">Properties</h3>
+            <p className="mt-1 max-w-2xl text-sm/6 text-gray-500">
+              This section provides key CronJob details, including creation time, namespace, name,
+              schedule, labels, annotations, active instances, suspension status, and last scheduled
+              time.
+            </p>
+          </div>
+          <div className="mt-6 border-t border-b border-gray-200">
+            <dl className="divide-y divide-gray-200">
+              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt className="text-sm/6 font-medium text-gray-900">Created</dt>
+                <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  {calculateAge(cronJob?.data?.metadata?.creationTimestamp)} ago
+                </dd>
+              </div>
+              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt className="text-sm/6 font-medium text-gray-900">Name</dt>
+                <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  {cronJob?.data?.metadata?.name}
+                </dd>
+              </div>
+              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt className="text-sm/6 font-medium text-gray-900">Namespace</dt>
+                <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  {cronJob?.data?.metadata?.namespace}
+                </dd>
+              </div>
+              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt className="text-sm/6 font-medium text-gray-900">Labels</dt>
+                <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  <div className="flex flex-wrap gap-2">
+                    {cronJob?.data?.metadata?.labels &&
+                      Object?.entries(cronJob?.data?.metadata?.labels).map(([key, value]) => (
+                        <span
+                          key={key}
+                          className="inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300"
+                        >
+                          {`${key}=${value}`}
+                        </span>
+                      ))}
+                  </div>
+                </dd>
+              </div>
+              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt className="text-sm/6 font-medium text-gray-900">Annotations</dt>
+                <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  <div className="flex flex-wrap gap-2">
+                    {cronJob?.data?.metadata?.annotations &&
+                      Object?.entries(cronJob?.data?.metadata?.annotations).map(([key, value]) => (
+                        <span
+                          key={key}
+                          className="inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300"
+                        >
+                          {`${key}=${value}`}
+                        </span>
+                      ))}
+                  </div>
+                </dd>
+              </div>
+              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt className="text-sm/6 font-medium text-gray-900">Schedule</dt>
+                <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  <div className="flex flex-wrap gap-2">{cronJob?.data?.spec?.schedule}</div>
+                </dd>
+              </div>
+              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt className="text-sm/6 font-medium text-gray-900">Active</dt>
+                <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  <div className="flex flex-wrap gap-2">
+                    {cronJob?.data?.status?.active?.length}
+                  </div>
+                </dd>
+              </div>
+              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt className="text-sm/6 font-medium text-gray-900">Suspend</dt>
+                <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  <div className="flex flex-wrap gap-2">
+                    {cronJob?.data?.spec?.suspend.toString()}
+                  </div>
+                </dd>
+              </div>
+              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt className="text-sm/6 font-medium text-gray-900">Last schedule</dt>
+                <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  <div className="flex flex-wrap gap-2">
+                    {calculateAge(cronJob?.data?.status?.lastScheduleTime)}
+                  </div>
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      )}
+      {error && (
+        <ErrorComponent errorText={error || 'Something went wrong !'} className={' !p-2'} />
+      )}
+    </>
+  );
+};
+
+export default CronJobDetails;
diff --git a/partials/deployments/deploymentDetails.js b/partials/deployments/deploymentDetails.js
new file mode 100644
index 0000000..5f40f91
--- /dev/null
+++ b/partials/deployments/deploymentDetails.js
@@ -0,0 +1,150 @@
+import React from 'react';
+import useDeploymentDetails from '../../hooks/deployment/getDeploymentDetails';
+import { calculateAge } from '../../utlis/helperFunc';
+import CustomLinearProgress from '../../components/Loaders/LinearLoader';
+import ErrorComponent from '../../components/ErrorComponent';
+
+const StatusColorCode = {
+  AVAILABLE: 'text-green-700 bg-green-50 ring-green-300',
+  PROGRESSING: 'text-primary-700 bg-primary-50 ring-primary-300',
+};
+
+const DeploymentDetails = ({ formData }) => {
+  const { deployment, loading, error } = useDeploymentDetails(formData);
+  return (
+    <>
+      <CustomLinearProgress isLoading={loading} classNames={{ root: 'my-2' }} />
+      {!loading && !error && (
+        <div className="px-6">
+          <>
+            <div className="sm:px-0 ">
+              <h3 className="text-base/7 font-semibold text-gray-900">Properties</h3>
+              <p className="mt-1 max-w-2xl text-sm/6 text-gray-500">
+                The Properties section summarizes the deployment's configuration and state,
+                including creation time, name, namespace, labels, annotations, replicas, selectors,
+                strategy type, and status conditions.
+              </p>
+            </div>
+            <div className="mt-6 border-t border-b border-gray-200">
+              <dl className="divide-y divide-gray-200">
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Created</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {calculateAge(deployment?.data?.metadata?.creationTimestamp)} ago
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Name</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {deployment?.data?.metadata?.name}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Namespace</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {deployment?.data?.metadata?.namespace}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Labels</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {deployment?.data?.metadata?.labels &&
+                        Object?.entries(deployment?.data?.metadata?.labels).map(([key, value]) => (
+                          <span
+                            key={key}
+                            className="inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300"
+                          >
+                            {`${key}=${value}`}
+                          </span>
+                        ))}
+                    </div>
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Annotations</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {deployment?.data?.metadata?.annotations &&
+                        Object?.entries(deployment?.data?.metadata?.annotations).map(
+                          ([key, value]) => (
+                            <span
+                              key={key}
+                              className="inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300"
+                            >
+                              {`${key}=${value}`}
+                            </span>
+                          ),
+                        )}
+                    </div>
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Replicas</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {deployment?.data?.status?.replicas} desired,{' '}
+                      {deployment?.data?.status?.availableReplicas} available,{' '}
+                      {deployment?.data?.status?.replicas -
+                        deployment?.data?.status?.availableReplicas}{' '}
+                      unavailable
+                    </div>
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Selectors</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {deployment?.data?.spec?.selector?.matchLabels &&
+                        Object?.entries(deployment?.data?.spec?.selector?.matchLabels).map(
+                          ([key, value]) => (
+                            <span
+                              key={key}
+                              className="inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300"
+                            >
+                              {`${key}=${value}`}
+                            </span>
+                          ),
+                        )}
+                    </div>
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Strategy Type</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {deployment?.data?.spec?.strategy?.type}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Conditions</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {deployment?.data?.status?.conditions &&
+                        Object?.entries(deployment?.data?.status?.conditions).map(
+                          ([key, value]) => (
+                            <span
+                              key={key}
+                              className={`${
+                                StatusColorCode[value?.type.toUpperCase()]
+                              } inline-block rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset`}
+                            >
+                              {`${value?.type}`}
+                            </span>
+                          ),
+                        )}
+                    </div>
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </>
+        </div>
+      )}
+      {error && (
+        <ErrorComponent errorText={error || 'Something went wrong !'} className={' !p-2'} />
+      )}
+    </>
+  );
+};
+
+export default DeploymentDetails;
diff --git a/partials/pods/podsDetails.js b/partials/pods/podsDetails.js
new file mode 100644
index 0000000..314f995
--- /dev/null
+++ b/partials/pods/podsDetails.js
@@ -0,0 +1,313 @@
+import React from 'react';
+import usePodDetails from '../../hooks/pods/getPodDetails';
+import CustomLinearProgress from '../../components/Loaders/LinearLoader';
+import ErrorComponent from '../../components/ErrorComponent';
+
+const PodsDetails = ({ formData }) => {
+  const { pod, loading, error } = usePodDetails(formData);
+  return (
+    <>
+      <CustomLinearProgress isLoading={loading} classNames={{ root: 'my-2' }} />
+      {!loading && !error && (
+        <div className="px-6">
+          <>
+            <div className="sm:px-0 ">
+              <h3 className="text-base/7 font-semibold text-gray-900">Properties</h3>
+              <p className="mt-1 max-w-2xl text-sm/6 text-gray-500">
+                The Properties section offers a concise overview of the Pod's metadata,
+                configuration, and status, including creation details, labels, annotations, and
+                operational insights for easy management.
+              </p>
+            </div>
+            <div className="mt-6 border-t border-b border-gray-200">
+              <dl className="divide-y divide-gray-200">
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Created</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {pod?.data?.metadata?.creationTimestamp}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Name</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {pod?.data?.metadata?.name}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Namespace</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {pod?.data?.metadata?.namespace}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Labels</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {pod?.data?.metadata?.labels &&
+                        Object?.entries(pod?.data?.metadata?.labels).map(([key, value]) => (
+                          <span
+                            key={key}
+                            className="inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300"
+                          >
+                            {`${key}=${value}`}
+                          </span>
+                        ))}
+                    </div>
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Annotations</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {pod?.data?.metadata?.annotations &&
+                        Object?.entries(pod?.data?.metadata?.annotations).map(([key, value]) => (
+                          <span
+                            key={key}
+                            className="inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300"
+                          >
+                            {`${key}=${value}`}
+                          </span>
+                        ))}
+                    </div>
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Controlled By</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {pod?.data?.metadata?.ownerReferences?.[0]?.kind}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Node</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {pod?.data?.spec?.nodeName}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Pod IP</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {pod?.data?.status?.podIP}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Service Account</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {pod?.data?.spec?.serviceAccountName}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Conditions</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {pod?.data?.status?.conditions.map((container, index) => (
+                        <div
+                          key={index}
+                          className={`inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300`}
+                        >
+                          {container.type}
+                        </div>
+                      ))}
+                    </div>
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </>
+          <div className="mt-10 ">
+            <div className="sm:px-0 pb-4">
+              <h3 className="text-base/7 font-semibold  text-gray-900">Containers</h3>
+              <p className="mt-1 max-w-2xl text-sm/6 text-gray-500">
+                This section provides detailed insights into each container's configuration,
+                including runtime settings, resource allocations, environment variables, ports, and
+                volume mounts.
+              </p>
+            </div>
+
+            {pod?.data?.spec?.containers?.map((container, index) => {
+              return (
+                <div key={index} className="mt-4 border-t py-4">
+                  <div className="flex gap-2 items-center">
+                    <div
+                      className={`w-4 h-4 ${container.ready ? 'bg-green-500' : 'bg-orange-500'} rounded-full group-hover`}
+                    ></div>
+                    <h3 className="text-base/7 font-semibold text-gray-900 ">{container.name}</h3>
+                  </div>
+                  <div className="mt-6 border-t border-gray-200">
+                    <dl className="divide-y divide-gray-200">
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Status</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          {pod?.data?.status?.containerStatuses &&
+                            pod?.data?.status?.containerStatuses?.map((item, containerIndex) => {
+                              const stateKeys = Object?.keys(item.state).join(', ');
+                              return <span key={containerIndex}>{stateKeys}</span>;
+                            })}
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Image</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          {container?.image}
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">ImagePullPolicy</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          {container?.imagePullPolicy}
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Ports</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          <div className="flex flex-wrap gap-2">
+                            {container?.ports?.map((item, index) => (
+                              <span
+                                key={index}
+                                className="inline-block bg-green-50 text-green-700 text-xs font-medium px-2 py-1 rounded-full border border-green-300"
+                              >
+                                {`${item.name}:${item.containerPort}/${item.protocol}`}
+                              </span>
+                            ))}
+                          </div>
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Environments</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          <div className="flex flex-wrap gap-2">
+                            <div className="flex gap-2 flex-wrap">
+                              {container?.env.map((env, index) => (
+                                <div
+                                  key={index}
+                                  className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300"
+                                >
+                                  <strong>{env.name}:</strong> {env.value || 'N/A'}
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Mounts</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          <div className="flex flex-wrap gap-2">
+                            <div className="flex gap-2 flex-wrap">
+                              {container?.volumeMounts.map((mount, index) => (
+                                <div
+                                  key={index}
+                                  className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300"
+                                >
+                                  <strong>{mount.name}:</strong> {mount.mountPath || 'N/A'}
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Liveness</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          <div className="flex flex-wrap gap-2">
+                            <div className="flex gap-2 flex-wrap">
+                              {container?.livenessProbe?.httpGet?.path && (
+                                <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                  {container?.livenessProbe?.httpGet?.path}
+                                </div>
+                              )}
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                delay={container?.livenessProbe?.initialDelaySeconds}
+                              </div>
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                timeout={container?.livenessProbe?.timeoutSeconds}
+                              </div>
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                period={container?.livenessProbe?.periodSeconds}
+                              </div>
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                #success={container?.livenessProbe?.successThreshold}
+                              </div>
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                #failure={container?.livenessProbe?.failureThreshold}
+                              </div>
+                            </div>
+                          </div>
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Readiness</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          <div className="flex flex-wrap gap-2">
+                            <div className="flex gap-2 flex-wrap">
+                              {container?.readinessProbe?.httpGet?.path && (
+                                <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                  {container?.readinessProbe?.httpGet?.path}
+                                </div>
+                              )}
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                delay={container?.readinessProbe?.initialDelaySeconds}
+                              </div>
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                timeout={container?.readinessProbe?.timeoutSeconds}
+                              </div>
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                period={container?.readinessProbe?.periodSeconds}
+                              </div>
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                #success={container?.readinessProbe?.successThreshold}
+                              </div>
+                              <div className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300">
+                                #failure={container?.readinessProbe?.failureThreshold}
+                              </div>
+                            </div>
+                          </div>
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Arguments</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          <div className="flex flex-wrap gap-2">
+                            <div className="flex gap-2 flex-wrap">
+                              {container?.args &&
+                                container?.args.map((arg, index) => (
+                                  <div
+                                    key={index}
+                                    className="px-3 py-1 bg-gray-100 text-gray-700 rounded-md border border-gray-300"
+                                  >
+                                    {arg}
+                                  </div>
+                                ))}
+                            </div>
+                          </div>
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Requests</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          CPU - {container?.resources?.requests?.cpu} , Memory -{' '}
+                          {container?.resources?.requests?.memory}
+                        </dd>
+                      </div>
+                      <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                        <dt className="text-sm/6 font-medium text-gray-900">Limits</dt>
+                        <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                          CPU - {container?.resources?.limits?.cpu} , Memory -{' '}
+                          {container?.resources?.limits?.memory}
+                        </dd>
+                      </div>
+                    </dl>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+      {error && (
+        <ErrorComponent errorText={error || 'Something went wrong !'} className={' !p-2'} />
+      )}
+    </>
+  );
+};
+
+export default PodsDetails;
diff --git a/partials/service/serviceDetail.js b/partials/service/serviceDetail.js
new file mode 100644
index 0000000..38bdb92
--- /dev/null
+++ b/partials/service/serviceDetail.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import useServiceDetails from '../../hooks/service/getServiceDetails';
+import CustomLinearProgress from '../../components/Loaders/LinearLoader';
+import ErrorComponent from '../../components/ErrorComponent';
+import { calculateAge } from '../../utlis/helperFunc';
+
+const ServiceDetails = ({ formData }) => {
+  const { service, loading, error } = useServiceDetails(formData);
+  return (
+    <>
+      <CustomLinearProgress isLoading={loading} classNames={{ root: 'my-2' }} />
+      {!loading && !error && (
+        <div className="px-6">
+          <>
+            <div className="sm:px-0 ">
+              <h3 className="text-base/7 font-semibold text-gray-900">Properties</h3>
+              <p className="mt-1 max-w-2xl text-sm/6 text-gray-500">
+                The Properties section provides key details about the service, including its
+                creation time, name, namespace, labels, selectors, type, and session affinity. It
+                offers a clear overview of the service's configuration, role, and behavior, aiding
+                in monitoring and management.
+              </p>
+            </div>
+            <div className="mt-6 border-t border-b border-gray-200">
+              <dl className="divide-y divide-gray-200">
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Created</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {calculateAge(service?.data?.metadata?.creationTimestamp)}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Name</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {service?.data?.metadata?.name}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Namespace</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {service?.data?.metadata?.namespace}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Labels</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {service?.data?.metadata?.labels &&
+                        Object?.entries(service?.data?.metadata?.labels).map(([key, value]) => (
+                          <span
+                            key={key}
+                            className="inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300"
+                          >
+                            {`${key}=${value}`}
+                          </span>
+                        ))}
+                    </div>
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Selectors</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {service?.data?.spec?.selector &&
+                        Object?.entries(service?.data?.spec?.selector).map(([key, value]) => (
+                          <span
+                            key={key}
+                            className="inline-block bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full border border-primary-300"
+                          >
+                            {`${key}=${value}`}
+                          </span>
+                        ))}
+                    </div>
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Type</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {service?.data?.spec?.type}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Session Affinity</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {service?.data?.spec?.sessionAffinity}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </>
+          <div className="mt-10 ">
+            <div className="sm:px-0">
+              <h3 className="text-base/7 font-semibold text-gray-900">Connection</h3>
+              <p className="mt-1 max-w-2xl text-sm/6 text-gray-500">
+                The Connection section details the service's network setup, including its Cluster IP
+                for internal routing and port mappings with target ports and protocols. It provides
+                a clear view of the service's accessibility and network configuration.
+              </p>
+            </div>
+            <div className="mt-6 border-t border-gray-200">
+              <dl className="divide-y divide-gray-200">
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Cluster IP</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    {service?.data?.spec?.clusterIP}
+                  </dd>
+                </div>
+                <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                  <dt className="text-sm/6 font-medium text-gray-900">Ports</dt>
+                  <dd className="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+                    <div className="flex flex-wrap gap-2">
+                      {service?.data?.spec?.ports?.map((item, index) => (
+                        <span
+                          key={index}
+                          className="inline-block bg-green-50 text-green-700 text-xs font-medium px-2 py-1 rounded-full border border-green-300"
+                        >
+                          {`${item.port}:${item.targetPort}/${item.protocol}`}
+                        </span>
+                      ))}
+                    </div>
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </div>
+        </div>
+      )}
+      {error && (
+        <ErrorComponent errorText={error || 'Something went wrong !'} className={' !p-2'} />
+      )}
+    </>
+  );
+};
+
+export default ServiceDetails;
diff --git a/partials/sideBar/index.js b/partials/sideBar/index.js
index ca478a1..567c63d 100644
--- a/partials/sideBar/index.js
+++ b/partials/sideBar/index.js
@@ -1,25 +1,13 @@
 import { useEffect, useState, useRef } from 'react';
-// import {
-//   Alerts,
-//   AuditLog,
-//   Databases,
-//   Infra,
-//   LogSvg,
-//   Metrics,
-//   Permission,
-//   Services,
-//   Settings,
-//   SummaryIcon,
-//   TracesIcon,
-// } from '../svg/sidebar';
 
 import Link from 'next/link';
-import { useParams, usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useParams, usePathname, useRouter } from 'next/navigation';
 import { ConfigDiff } from '../../svg/configDiff';
-import { DeploymentSpace } from '../../svg/deploymentSpace';
-// import CronJob from '../svg/sidebar/cronJob';
-// import HelmPackageIcon from '../svg/sidebar/helm_package';
-// import { Profile } from '../svg/sidebar/profile';
+import { Environment } from '../../svg/environment';
+import { Services } from '../../svg/services';
+import DeploymentIcon from '../../svg/deployment';
+import { Cron } from '../../svg/cron';
+import { Pods } from '../../svg/pods';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -76,9 +64,9 @@ export default function Sidebar({ showMobileBar }) {
   const appOption = [
     {
       accessTo: 'all',
-      link: `applications/${searchParams['application-id']}/deploymentSpace`,
-      text: 'Deployment Space',
-      icon: DeploymentSpace,
+      link: `applications/${searchParams['application-id']}/environment`,
+      text: 'Environment',
+      icon: Environment,
     },
     {
       accessTo: 'all',
@@ -86,128 +74,39 @@ export default function Sidebar({ showMobileBar }) {
       text: 'Config Diff',
       icon: ConfigDiff,
     },
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/cron-jobs`,
-    //   text: 'Cron Jobs',
-    //   //   icon: CronJob,
-    // },
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/datastore`,
-    //   text: 'Data Store',
-    //   //   icon: Databases,
-    // },
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/helm-package`,
-    //   text: 'Helm Package',
-    //   //   icon: HelmPackageIcon,
-    // },
-    // {
-    //   accessTo: 'all',
-    //   heading: true,
-    //   headingTitle: 'Observability',
-    // },
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/logs`,
-    //   text: 'Logs',
-    //   //   icon: LogSvg,
-    // },
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/traces`,
-    //   text: 'Traces',
-    //   //   icon: TracesIcon,
-    // },
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/metric`,
-    //   text: 'Metrics',
-    //   //   icon: Metrics,
-    // },
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/alerts`,
-    //   text: 'Alerts',
-    //   //   icon: Alerts,
-    // },
-    // {
-    //   accessTo: 'all',
-    //   heading: true,
-    //   headingTitle: '',
-    //   divider: true,
-    // },
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/audit-log`,
-    //   text: 'Audit Log',
-    //   //   icon: AuditLog,
-    // },
-
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/permissions`,
-    //   text: 'Permissions',
-    //   //   icon: Permission,
-    // },
-
-    // {
-    //   accessTo: 'all',
-    //   link: `applications/${searchParams['application-id']}/settings`,
-    //   text: 'Settings',
-    //   //   icon: Settings,
-    // },
   ];
-  //   const observabilityOption = [
-  //     {
-  //       accessTo: 'all',
-  //       link: `observability`,
-  //       text: 'Observability',
-  //       icon: TracesIcon,
-  //     },
-
-  //     // {
-  //     //   accessTo: 'all',
-  //     //   link: `observability/integrations`,
-  //     //   text: 'Integrations',
-  //     //   icon: Settings,
-  //     // },
-  //   ];
 
-  //   const settingsOption = [
-  //     {
-  //       accessTo: 'all',
-  //       // link: `cloud-accounts/${searchParams['cloud-account-id']}/infrastructure`,
-  //       text: 'Profile',
-  //       icon: Profile,
-  //       current: true,
-  //     },
-  //     {
-  //       accessTo: 'all',
-  //       // link: `cloud-accounts/${searchParams['cloud-account-id']}/audit-log`,
-  //       text: 'Audit Log',
-  //       icon: AuditLog,
-  //     },
-  //     {
-  //       accessTo: 'all',
-  //       // link: `cloud-accounts/${searchParams['cloud-account-id']}/permissions`,
-  //       text: 'Permissions',
-  //       icon: Permission,
-  //     },
-
-  //     {
-  //       accessTo: 'all',
-  //       // link: `cloud-accounts/${searchParams['cloud-account-id']}/settings`,
-  //       text: 'Settings',
-  //       icon: Settings,
-  //     },
-  //   ];
+  const serviceOption = [
+    {
+      accessTo: 'all',
+      link: `applications/${searchParams['application-id']}/environment/${searchParams['environment-id']}/services`,
+      text: 'Service',
+      icon: Services,
+    },
+    {
+      accessTo: 'all',
+      link: `applications/${searchParams['application-id']}/environment/${searchParams['environment-id']}/cron-job`,
+      text: 'Cron Job',
+      icon: Cron,
+    },
+    {
+      accessTo: 'all',
+      link: `applications/${searchParams['application-id']}/environment/${searchParams['environment-id']}/deployments`,
+      text: 'Deployments',
+      icon: DeploymentIcon,
+    },
+    {
+      accessTo: 'all',
+      link: `applications/${searchParams['application-id']}/environment/${searchParams['environment-id']}/pods`,
+      text: 'Pods',
+      icon: Pods,
+    },
+  ];
 
   const SideBarView = {
     // cloudView: cloudOption,
     appView: appOption,
+    serviceView: serviceOption,
     // observability: observabilityOption,
     // setting: settingsOption,
     Null: [],
@@ -223,14 +122,13 @@ export default function Sidebar({ showMobileBar }) {
       searchParams['cloud-account-id'] === undefined &&
       searchParams['application-id'] !== undefined
     ) {
-      setSelectedView('appView');
+      if (searchParams['environment-id'] !== undefined) {
+        setSelectedView('serviceView');
+      } else {
+        setSelectedView('appView');
+      }
     }
-    // else if (router.pathname.includes('observability')) {
-    //   setSelectedView('observability');
-    // } else if (router.pathname.includes('setting')) {
-    //   setSelectedView('setting');
-    // }
-  }, [router]);
+  }, [router, searchParams]);
 
   useEffect(() => {
     const list = SideBarView[selectedView].map(function (ele) {
@@ -249,87 +147,93 @@ export default function Sidebar({ showMobileBar }) {
     setValue(DashboardView);
   }, [pathname, selectedView]);
 
-  return showMobileBar ? (
-    <div className="border-b border-gray-200 border-opacity-5 overflow-x-auto overflow-y-hidden md:hidden">
-      <nav className="-mb flex items-center px-2 max-w-full" aria-label="Tabs">
-        {SideBarView[selectedView].map((item, index) => {
-          return (
-            !item?.heading && (
-              <Link
-                key={index}
-                href={`/${item?.link}`}
-                className={classNames(
-                  value === index
-                    ? ' text-primary-500 bg-primary-selected rounded-md'
-                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-                  'group flex items-center border-b-2 py-2 px-2 text-sm font-medium !p-[1rem]',
-                )}
-                aria-current={value === index ? 'page' : undefined}
-                ref={value === index ? selectedTabRef : null}
-              >
-                <item.icon
-                  className={classNames('mr-2 h-5 w-5 ')}
-                  color="currentColor"
-                  aria-hidden="true"
-                />
-
-                <span className="whitespace-nowrap">{item.text}</span>
-              </Link>
-            )
-          );
-        })}
-      </nav>
-    </div>
-  ) : (
-    <div className="md:flex grow flex-col gap-y-5 overflow-y-auto  p-8  border-t border-r border-gray-200 bg-white xs:hidden min-h-full   ">
-      <nav className="flex flex-1 flex-col">
-        <ul role="list" className="flex flex-1 flex-col gap-y-7">
-          <li>
-            <ul role="list" className="-mx-2 space-y-1">
-              {SideBarView[selectedView].map((item, index) => {
-                return item?.heading ? (
-                  item?.divider ? (
-                    <div key={index} className="space-y-0 !mb-6 !mt-6">
-                      <div className="border-b border-b-gray-200 border-opacity-30 "></div>
-                      <div className="border-t border-t-gray-200 border-opacity-95"></div>
-                    </div>
-                  ) : (
-                    <li key={index} className="text-left">
-                      <div className="text-xs font-semibold leading-6 text-gray-400 mt-6 mb-0 p-2">
-                        {item?.headingTitle}
+  return (
+    <>
+      {/* Mobile SideBar */}
+
+      <div className="border-b border-gray-200 border-opacity-5 overflow-x-auto overflow-y-hidden md:hidden">
+        <nav className="-mb flex items-center px-2 max-w-full" aria-label="Tabs">
+          {SideBarView[selectedView].map((item, index) => {
+            return (
+              !item?.heading && (
+                <Link
+                  key={index}
+                  href={`/${item?.link}`}
+                  className={classNames(
+                    value === index
+                      ? ' text-primary-500 bg-primary-selected rounded-md'
+                      : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+                    'group flex items-center py-2 px-2 text-sm font-medium !p-[1rem]',
+                  )}
+                  aria-current={value === index ? 'page' : undefined}
+                  ref={value === index ? selectedTabRef : null}
+                >
+                  <item.icon
+                    className={classNames('mr-2 h-5 w-5 ')}
+                    color="currentColor"
+                    aria-hidden="true"
+                  />
+
+                  <span className="whitespace-nowrap">{item.text}</span>
+                </Link>
+              )
+            );
+          })}
+        </nav>
+      </div>
+
+      {/* fullscreen SideBar */}
+
+      <div className="md:flex grow flex-col gap-y-5 overflow-y-auto  p-8  border-t border-r border-gray-200 bg-white xs:hidden min-h-full   ">
+        <nav className="flex flex-1 flex-col">
+          <ul role="list" className="flex flex-1 flex-col gap-y-7">
+            <li>
+              <ul role="list" className="-mx-2 space-y-1">
+                {SideBarView[selectedView].map((item, index) => {
+                  return item?.heading ? (
+                    item?.divider ? (
+                      <div key={index} className="space-y-0 !mb-6 !mt-6">
+                        <div className="border-b border-b-gray-200 border-opacity-30 "></div>
+                        <div className="border-t border-t-gray-200 border-opacity-95"></div>
                       </div>
-                    </li>
-                  )
-                ) : (
-                  <Link key={item.text} href={`/${item?.link}`} className="text-left">
-                    <div
-                      className={classNames(
-                        value === index
-                          ? 'bg-gray-50 text-primary-600'
-                          : 'text-gray-600 hover:bg-gray-50 hover:text-primary-600',
-                        'group flex gap-x-3 rounded-md p-2 text-sm font-medium leading-6 cursor-pointer w-48 mb-4',
-                      )}
-                    >
-                      <item.icon
+                    ) : (
+                      <li key={index} className="text-left">
+                        <div className="text-xs font-semibold leading-6 text-gray-400 mt-6 mb-0 p-2">
+                          {item?.headingTitle}
+                        </div>
+                      </li>
+                    )
+                  ) : (
+                    <Link key={item.text} href={`/${item?.link}`} className="text-left">
+                      <div
                         className={classNames(
                           value === index
-                            ? 'text-primary-600'
-                            : 'text-gray-400 group-hover:text-primary-600',
-                          'h-6 w-6 shrink-0',
+                            ? 'bg-gray-50 text-primary-600'
+                            : 'text-gray-600 hover:bg-gray-50 hover:text-primary-600',
+                          'group flex gap-x-3 rounded-md p-2 text-sm font-medium leading-6 cursor-pointer w-48 mb-4',
                         )}
-                        aria-hidden="true"
-                        color="currentColor"
-                      />
-
-                      {item.text}
-                    </div>
-                  </Link>
-                );
-              })}
-            </ul>
-          </li>
-        </ul>
-      </nav>
-    </div>
+                      >
+                        <item.icon
+                          className={classNames(
+                            value === index
+                              ? 'text-primary-600'
+                              : 'text-gray-400 group-hover:text-primary-600',
+                            'h-6 w-6 shrink-0',
+                          )}
+                          aria-hidden="true"
+                          color="currentColor"
+                        />
+
+                        {item.text}
+                      </div>
+                    </Link>
+                  );
+                })}
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </>
   );
 }
diff --git a/src/app/applications/[application-id]/configDiff/page.js b/src/app/applications/[application-id]/configDiff/page.js
index 57eaf6a..c87f950 100644
--- a/src/app/applications/[application-id]/configDiff/page.js
+++ b/src/app/applications/[application-id]/configDiff/page.js
@@ -55,7 +55,7 @@ const ConfigDiff = () => {
     { name: 'Applications', link: '/applications' },
     {
       name: appData?.APPLICATION_DATA?.isSuccess ? appName?.name : 'loading...',
-      link: `/applications/${params?.['application-id']}/deploymentSpace`,
+      link: `/applications/${params?.['application-id']}/environment`,
     },
     {
       name: 'Config Diff',
diff --git a/src/app/applications/[application-id]/deploymentSpace/[environment-id]/configureDeploymentSpace/page.js b/src/app/applications/[application-id]/environment/[environment-id]/configureDeploymentSpace/page.js
similarity index 96%
rename from src/app/applications/[application-id]/deploymentSpace/[environment-id]/configureDeploymentSpace/page.js
rename to src/app/applications/[application-id]/environment/[environment-id]/configureDeploymentSpace/page.js
index 047f452..74d165b 100644
--- a/src/app/applications/[application-id]/deploymentSpace/[environment-id]/configureDeploymentSpace/page.js
+++ b/src/app/applications/[application-id]/environment/[environment-id]/configureDeploymentSpace/page.js
@@ -20,7 +20,7 @@ const AddDeploymentSpace = () => {
     { name: 'Applications', link: '/applications' },
     {
       name: appData?.APPLICATION_DATA?.isSuccess ? data?.name : 'loading...',
-      link: `/applications/${params?.['application-id']}/deploymentSpace`,
+      link: `/applications/${params?.['application-id']}/environment`,
     },
     {
       name: 'Configure Deployment Space',
diff --git a/src/app/applications/[application-id]/environment/[environment-id]/cron-job/page.js b/src/app/applications/[application-id]/environment/[environment-id]/cron-job/page.js
new file mode 100644
index 0000000..ea414b1
--- /dev/null
+++ b/src/app/applications/[application-id]/environment/[environment-id]/cron-job/page.js
@@ -0,0 +1,98 @@
+'use client';
+
+import React, { useContext } from 'react';
+import HeadingComponent from '../../../../../../../components/HeaderComponents';
+import CustomLinearProgress from '../../../../../../../components/Loaders/LinearLoader';
+import Table from '../../../../../../../components/Table/table';
+import ErrorComponent from '../../../../../../../components/ErrorComponent';
+import { calculateAge } from '../../../../../../../utlis/helperFunc';
+import BreadCrumbComp from '../../../../../../../components/BreadCrumb';
+import { useParams } from 'next/navigation';
+import { AppContext } from '../../../../../../../libs/context';
+import useCronJobList from '../../../../../../../hooks/cronJob/getCronJobList';
+import CronJobDetails from '../../../../../../../partials/cronJob/cronJobDetails';
+
+const headers = [
+  { key: 'name', label: 'Name', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+  { key: 'schedule', label: 'Schedule', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+  { key: 'suspend', label: 'Suspend', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+  { key: 'active', label: 'Active', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+  {
+    key: 'last_schedule',
+    label: 'Last Schedule',
+    align: 'left',
+    colClassName: 'sm:!min-w-[175px]',
+  },
+  { key: 'age', label: 'Age', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+];
+
+const CronJobs = () => {
+  const { cronJob, loading, error } = useCronJobList();
+  const { appData } = useContext(AppContext);
+  const params = useParams();
+
+  const data = appData?.APPLICATION_DATA?.data?.filter(
+    (item) => item.id === Number(params?.['application-id']),
+  )?.[0];
+
+  const bodyData = cronJob?.data?.cronjobs?.map((item) => {
+    return {
+      name: item.metadata.name,
+      schedule: item.spec.schedule,
+      suspend: item.spec.suspend.toString(),
+      active: 0,
+      last_schedule: calculateAge(item.status.active.lastScheduleTime),
+      age: calculateAge(item.metadata.creationTimestamp),
+    };
+  });
+
+  const breadcrumbList = [
+    { name: 'Applications', link: '/applications' },
+    {
+      name: appData?.APPLICATION_DATA?.isSuccess ? data?.name : 'loading...',
+      link: `/applications/${params?.['application-id']}/environment`,
+    },
+    {
+      name: cronJob?.metadata?.environmentName ? cronJob?.metadata?.environmentName : 'loading...',
+      link: `/applications/${params?.['application-id']}/environment/${params?.['environment-id']}/services`,
+    },
+    {
+      name: 'Cron Jobs',
+      link: `#`,
+      disable: true,
+    },
+  ];
+
+  return (
+    <>
+      <BreadCrumbComp breadcrumbList={breadcrumbList} />
+      <HeadingComponent
+        title={'Cron Jobs'}
+        // actions={
+        //   <Link
+        //     // href={`${pathname}/addEnvironment`}
+        //     href={'#'}
+        //     className={`inline-flex items-center gap-x-1.5 rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600'}
+
+        //   `}
+        //   >
+        //     {<PlusCircleIcon className="-ml-0.5 h-5 w-5" aria-hidden="true" />}
+        //     Add Cron Job
+        //   </Link>
+        // }
+      />
+      <CustomLinearProgress isLoading={loading} />
+      <div>
+        {!error && (
+          <Table headers={headers} data={bodyData} action={true} renderComponent={CronJobDetails} />
+        )}
+      </div>
+
+      {error && (
+        <ErrorComponent errorText={error || 'Something went wrong !'} className={' !p-2'} />
+      )}
+    </>
+  );
+};
+
+export default CronJobs;
diff --git a/src/app/applications/[application-id]/environment/[environment-id]/deployments/page.js b/src/app/applications/[application-id]/environment/[environment-id]/deployments/page.js
new file mode 100644
index 0000000..e7d06d6
--- /dev/null
+++ b/src/app/applications/[application-id]/environment/[environment-id]/deployments/page.js
@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useContext } from 'react';
+import HeadingComponent from '../../../../../../../components/HeaderComponents';
+import CustomLinearProgress from '../../../../../../../components/Loaders/LinearLoader';
+import Table from '../../../../../../../components/Table/table';
+import useDeploymentList from '../../../../../../../hooks/deployment/getDeployment';
+import ErrorComponent from '../../../../../../../components/ErrorComponent';
+import { calculateAge } from '../../../../../../../utlis/helperFunc';
+import DeploymentDetails from '../../../../../../../partials/deployments/deploymentDetails';
+import BreadCrumbComp from '../../../../../../../components/BreadCrumb';
+import { useParams } from 'next/navigation';
+import { AppContext } from '../../../../../../../libs/context';
+
+const headers = [
+  { key: 'name', label: 'Name', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+  { key: 'pods', label: 'Pods', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+  { key: 'replica', label: 'Replicas', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+  { key: 'age', label: 'Age', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+  { key: 'condition', label: 'Conditions', align: 'left', colClassName: 'sm:!min-w-[175px]' },
+];
+
+const Deployments = () => {
+  const { deployment, loading, error } = useDeploymentList();
+  const { appData } = useContext(AppContext);
+  const params = useParams();
+
+  const data = appData?.APPLICATION_DATA?.data?.filter(
+    (item) => item.id === Number(params?.['application-id']),
+  )?.[0];
+
+  const bodyData = deployment?.data?.deployments?.map((item) => {
+    return {
+      name: item.metadata.name,
+      pods: `${item.status.readyReplicas}/${item.spec.replicas}`,
+      replica: item.spec.replicas,
+      age: calculateAge(item.metadata.creationTimestamp),
+      condition: (
+        <p className=" whitespace-nowrap">
+          {item.status.conditions
+            .map((condition) => condition.type)
+            .reverse()
+            .join(' ')}
+        </p>
+      ),
+    };
+  });
+
+  const breadcrumbList = [
+    { name: 'Applications', link: '/applications' },
+    {
+      name: appData?.APPLICATION_DATA?.isSuccess ? data?.name : 'loading...',
+      link: `/applications/${params?.['application-id']}/environment`,
+    },
+    {
+      name: deployment?.metadata?.environmentName
+        ? deployment?.metadata?.environmentName
+        : 'loading...',
+      link: `/applications/${params?.['application-id']}/environment/${params?.['environment-id']}/services`,
+    },
+    {
+      name: 'Deployments',
+      link: `#`,
+      disable: true,
+    },
+  ];
+
+  return (
+    <>
+      <BreadCrumbComp breadcrumbList={breadcrumbList} />
+      <HeadingComponent
+        title={'Deployments'}
+        // actions={
+        //   <Link
+        //     // href={`${pathname}/addEnvironment`}
+        //     href={'#'}
+        //     className={`inline-flex items-center gap-x-1.5 rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600'}
+
+        //   `}
+        //   >
+        //     {<PlusCircleIcon className="-ml-0.5 h-5 w-5" aria-hidden="true" />}
+        //     Add Deployment
+        //   </Link>
+        // }
+      />
+      <CustomLinearProgress isLoading={loading} />
+      <div>
+        {!error && (
+          <Table
+            headers={headers}
+            data={bodyData}
+            action={true}
+            renderComponent={DeploymentDetails}
+          />
+        )}
+      </div>
+
+      {error && (
+        <ErrorComponent errorText={error || 'Something went wrong !'} className={' !p-2'} />
+      )}
+    </>
+  );
+};
+
+export default Deployments;
diff --git a/src/app/applications/[application-id]/environment/[environment-id]/pods/page.js b/src/app/applications/[application-id]/environment/[environment-id]/pods/page.js
new file mode 100644
index 0000000..76386bb
--- /dev/null
+++ b/src/app/applications/[application-id]/environment/[environment-id]/pods/page.js
@@ -0,0 +1,124 @@
+'use client';
+
+import React, { useContext } from 'react';
+import HeadingComponent from '../../../../../../../components/HeaderComponents';
+import CustomLinearProgress from '../../../../../../../components/Loaders/LinearLoader';
+import Table from '../../../../../../../components/Table/table';
+import { calculateAge } from '../../../../../../../utlis/helperFunc';
+import ErrorComponent from '../../../../../../../components/ErrorComponent';
+import BreadCrumbComp from '../../../../../../../components/BreadCrumb';
+import { useParams } from 'next/navigation';
+import { AppContext } from '../../../../../../../libs/context';
+import usePodList from '../../../../../../../hooks/pods/getPodsList';
+import PodsDetails from '../../../../../../../partials/pods/podsDetails';
+
+const headers = [
+  { key: 'name', label: 'Name', align: 'left', colClassName: 'sm:!min-w-[300px]' },
+  { key: 'container', label: 'Container', align: 'left', colClassName: 'sm:!min-w-[200px]' },
+  { key: 'restart', label: 'Restart', align: 'left', colClassName: 'sm:!min-w-[200px]' },
+  {
+    key: 'controlled',
+    label: 'Controlled By',
+    align: 'left',
+    colClassName: 'sm:!min-w-[200px] whitespace-nowrap',
+  },
+  //   { key: 'Qos', label: 'Qos', align: 'left', colClassName: 'sm:!min-w-[200px]' },
+  { key: 'age', label: 'Age', align: 'left', colClassName: ' sm:!min-w-[200px] whitespace-nowrap' },
+  { key: 'state', label: 'Status', align: 'end', colClassName: 'sm:!min-w-[200px]' },
+];
+
+const StatusBoxes = ({ data }) => {
+  return (
+    <div className="flex space-x-2">
+      {data.map((container, index) => (
+        <div
+          key={index}
+          className={`w-4 h-4 ${container.ready ? 'bg-green-500' : 'bg-orange-500'} rounded-full group-hover`}
+          title={container.name} // Optional: shows container name on hover
+        ></div>
+      ))}
+    </div>
+  );
+};
+
+const Services = () => {
+  const { pods, loading, error } = usePodList();
+  const { appData } = useContext(AppContext);
+  const params = useParams();
+
+  const data = appData?.APPLICATION_DATA?.data?.filter(
+    (item) => item.id === Number(params?.['application-id']),
+  )?.[0];
+
+  const bodyData = pods?.data?.pods?.map((item) => {
+    return {
+      name: item.metadata.name,
+      container: <StatusBoxes data={item?.status?.containerStatuses} />,
+      restart: item?.status?.containerStatuses?.reduce((acc, curr) => acc + curr.restartCount, 0),
+      controlled: item?.metadata?.ownerReferences?.[0]?.kind,
+      age: calculateAge(item.metadata.creationTimestamp),
+      state:
+        item.status.phase === 'Running' || item.status.phase === 'Succeeded' ? (
+          <p
+            className={` inline-block text-green-700 bg-green-50 ring-green-600/20 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset`}
+          >
+            {item.status.phase}
+          </p>
+        ) : (
+          <p
+            className={` inline-block text-red-700 bg-red-50 ring-red-600/10 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset`}
+          >
+            {item.status.phase}
+          </p>
+        ),
+    };
+  });
+
+  const breadcrumbList = [
+    { name: 'Applications', link: '/applications' },
+    {
+      name: appData?.APPLICATION_DATA?.isSuccess ? data?.name : 'loading...',
+      link: `/applications/${params?.['application-id']}/environment`,
+    },
+    {
+      name: pods?.metadata?.environmentName ? pods?.metadata?.environmentName : 'loading...',
+      link: `/applications/${params?.['application-id']}/environment/${params?.['environment-id']}/services`,
+    },
+    {
+      name: 'Pods',
+      link: `#`,
+      disable: true,
+    },
+  ];
+
+  return (
+    <>
+      <BreadCrumbComp breadcrumbList={breadcrumbList} />
+      <HeadingComponent
+        title={'Pods'}
+        // actions={
+        //   <Link
+        //     href={'#'}
+        //     className={`inline-flex items-center gap-x-1.5 rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600'}
+
+        //   `}
+        //   >
+        //     {<PlusCircleIcon className="-ml-0.5 h-5 w-5" aria-hidden="true" />}
+        //     Add Pod
+        //   </Link>
+        // }
+      />
+      <CustomLinearProgress isLoading={loading} />
+      <div>
+        {!error && (
+          <Table headers={headers} data={bodyData} action={true} renderComponent={PodsDetails} />
+        )}
+      </div>
+      {error && (
+        <ErrorComponent errorText={error || 'Something went wrong !'} className={' !p-2'} />
+      )}
+    </>
+  );
+};
+
+export default Services;
diff --git a/src/app/applications/[application-id]/environment/[environment-id]/services/page.js b/src/app/applications/[application-id]/environment/[environment-id]/services/page.js
new file mode 100644
index 0000000..2cc148e
--- /dev/null
+++ b/src/app/applications/[application-id]/environment/[environment-id]/services/page.js
@@ -0,0 +1,96 @@
+'use client';
+
+import React, { useContext } from 'react';
+import HeadingComponent from '../../../../../../../components/HeaderComponents';
+import CustomLinearProgress from '../../../../../../../components/Loaders/LinearLoader';
+import Table from '../../../../../../../components/Table/table';
+import { formatTime } from '../../../../../../../utlis/helperFunc';
+import useServiceList from '../../../../../../../hooks/service/getServiceList';
+import ErrorComponent from '../../../../../../../components/ErrorComponent';
+import BreadCrumbComp from '../../../../../../../components/BreadCrumb';
+import { useParams } from 'next/navigation';
+import { AppContext } from '../../../../../../../libs/context';
+import ServiceDetails from '../../../../../../../partials/service/serviceDetail';
+
+const headers = [
+  { key: 'name', label: 'Name', align: 'left', colClassName: 'sm:w-1/4' },
+  { key: 'loadBalancerIP', label: 'Load Balance IP', align: 'left', colClassName: 'sm:w-1/4' },
+  { key: 'timestamps', label: 'Timestamps', align: 'left', colClassName: 'sm:w-1/3' },
+  { key: 'status', label: 'Status', align: 'end', colClassName: 'sm:w-1/4' },
+];
+
+const Services = () => {
+  const { services, loading, error } = useServiceList();
+  const { appData } = useContext(AppContext);
+  const params = useParams();
+
+  const data = appData?.APPLICATION_DATA?.data?.filter(
+    (item) => item.id === Number(params?.['application-id']),
+  )?.[0];
+
+  const bodyData = services?.data?.services?.map((item) => {
+    return {
+      name: item.metadata.name,
+      loadBalancerIP: item.spec.loadBalancerIP,
+      timestamps: formatTime(item.metadata.creationTimestamp),
+      status: item.status.loadBalancer.ingress ? (
+        <p
+          className={` inline-block text-green-700 bg-green-50 ring-green-600/20 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset`}
+        >
+          Active
+        </p>
+      ) : (
+        <p
+          className={` inline-block text-red-700 bg-red-50 ring-red-600/10 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset`}
+        >
+          Inactive
+        </p>
+      ),
+    };
+  });
+
+  const breadcrumbList = [
+    { name: 'Applications', link: '/applications' },
+    {
+      name: appData?.APPLICATION_DATA?.isSuccess ? data?.name : 'loading...',
+      link: `/applications/${params?.['application-id']}/environment`,
+    },
+    {
+      name: 'Services',
+      link: `#`,
+      disable: true,
+    },
+  ];
+
+  return (
+    <>
+      <BreadCrumbComp breadcrumbList={breadcrumbList} />
+      <HeadingComponent
+        title={'Services'}
+        // actions={
+        //   <Link
+        //     // href={`${pathname}/addEnvironment`}
+        //     href={'#'}
+        //     className={`inline-flex items-center gap-x-1.5 rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600'}
+
+        //   `}
+        //   >
+        //     {<PlusCircleIcon className="-ml-0.5 h-5 w-5" aria-hidden="true" />}
+        //     Add Service
+        //   </Link>
+        // }
+      />
+      <CustomLinearProgress isLoading={loading} />
+      <div>
+        {!error && (
+          <Table headers={headers} data={bodyData} action={true} renderComponent={ServiceDetails} />
+        )}
+      </div>
+      {error && (
+        <ErrorComponent errorText={error || 'Something went wrong !'} className={' !p-2'} />
+      )}
+    </>
+  );
+};
+
+export default Services;
diff --git a/src/app/applications/[application-id]/deploymentSpace/addEnvironment/page.js b/src/app/applications/[application-id]/environment/addEnvironment/page.js
similarity index 96%
rename from src/app/applications/[application-id]/deploymentSpace/addEnvironment/page.js
rename to src/app/applications/[application-id]/environment/addEnvironment/page.js
index 6868731..96e5334 100644
--- a/src/app/applications/[application-id]/deploymentSpace/addEnvironment/page.js
+++ b/src/app/applications/[application-id]/environment/addEnvironment/page.js
@@ -19,7 +19,7 @@ const CreateEnvironment = () => {
     { name: 'Applications', link: '/applications' },
     {
       name: appData?.APPLICATION_DATA?.isSuccess ? data?.name : 'loading...',
-      link: `/applications/${params?.['application-id']}/deploymentSpace`,
+      link: `/applications/${params?.['application-id']}/environment`,
     },
     {
       name: 'Add Environment',
diff --git a/src/app/applications/[application-id]/deploymentSpace/page.js b/src/app/applications/[application-id]/environment/page.js
similarity index 92%
rename from src/app/applications/[application-id]/deploymentSpace/page.js
rename to src/app/applications/[application-id]/environment/page.js
index 5604d3d..9cedd49 100644
--- a/src/app/applications/[application-id]/deploymentSpace/page.js
+++ b/src/app/applications/[application-id]/environment/page.js
@@ -26,7 +26,8 @@ const DeploymentSpace = () => {
 
   const { value, loading, error } = useGetDeploymentSpace();
 
-  const handleAddEnvConfig = (id) => {
+  const handleAddEnvConfig = (e, id) => {
+    e.stopPropagation();
     router.push(`${pathname}/${id}/configureDeploymentSpace`);
   };
 
@@ -46,10 +47,9 @@ const DeploymentSpace = () => {
       deployment_space: item?.deploymentSpace ? (
         handleDeploymentList(item.deploymentSpace)
       ) : (
-        // <DraggableList chips={chips} disableDrag={true} />
         <button
           className='className="inline-flex mt-4 items-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"'
-          onClick={() => handleAddEnvConfig(item.id)}
+          onClick={(e) => handleAddEnvConfig(e, item.id)}
         >
           <div className={`flex gap-1 items-center`}>
             <PlusIcon aria-hidden="true" className="size-5" />
@@ -67,6 +67,10 @@ const DeploymentSpace = () => {
     (item) => item.id === Number(params?.['application-id']),
   )?.[0];
 
+  const handleRowClick = (row) => {
+    router.push(`${pathname}/${row.id}/services`);
+  };
+
   const breadcrumbList = [
     { name: 'Applications', link: '/applications' },
     {
@@ -80,7 +84,7 @@ const DeploymentSpace = () => {
     <div>
       <BreadCrumbComp breadcrumbList={breadcrumbList} />
       <HeadingComponent
-        title={'Deployment Space'}
+        title={'Environments'}
         actions={
           //   <Tooltip title={currentApplication?.editTooltip}>
           <Link
@@ -103,6 +107,8 @@ const DeploymentSpace = () => {
           // onEdit={handleEdit}
           onDelete={handleDelete}
           action={false}
+          handleRowClick={handleRowClick}
+          enableRowClick={true}
         />
       </div>
 
diff --git a/src/app/applications/[application-id]/layout.js b/src/app/applications/[application-id]/layout.js
index 0007747..aa3316c 100644
--- a/src/app/applications/[application-id]/layout.js
+++ b/src/app/applications/[application-id]/layout.js
@@ -5,8 +5,8 @@ import Sidebar from '../../../../partials/sideBar';
 
 const Layout = ({ children }) => {
   return (
-    <div className=" flex h-[90vh] overflow-hidden ">
-      <div className=" w-72 !overflow-y-auto  ">
+    <div className=" xs:inline-block md:flex h-[90vh] w-[100vw] overflow-hidden ">
+      <div>
         <Sidebar />
       </div>
       <main className="px-4 sm:px-6 lg:px-8 w-full overflow-auto text-left pt-8">{children}</main>
diff --git a/src/app/globals.css b/src/app/globals.css
index c91c743..744faf0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -34,3 +34,16 @@ body {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
+@keyframes loader {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+.animate-loader {
+  animation: loader 1.5s infinite linear;
+}
diff --git a/svg/cron.js b/svg/cron.js
new file mode 100644
index 0000000..b726bda
--- /dev/null
+++ b/svg/cron.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+export const Cron = ({ color = '#9197B3', ...rest }) => {
+  return (
+    <svg
+      width="258"
+      height="256"
+      viewBox="0 0 258 256"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M212.978 79.7166L208.28 59.1351C207.787 56.9712 206.334 55.15 204.334 54.187L121.925 14.5006C119.925 13.5376 117.596 13.5376 115.596 14.5006L33.1862 54.187C31.1865 55.15 29.7342 56.9712 29.2403 59.1351L8.88678 148.31C8.39289 150.473 8.91123 152.744 10.2951 154.48L67.3243 225.992C68.7082 227.727 70.8069 228.738 73.0264 228.738H97.3885"
+        stroke={color}
+        strokeWidth="15.9671"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M190.277 244.549C223.172 244.549 249.838 217.882 249.838 184.988C249.838 152.093 223.172 125.427 190.277 125.427C157.383 125.427 130.716 152.093 130.716 184.988C130.716 217.882 157.383 244.549 190.277 244.549Z"
+        stroke={color}
+        strokeWidth="15.0976"
+      />
+      <path
+        d="M195.537 157.714V183.731L219.376 197.495C222.177 199.112 223.137 202.694 221.52 205.495C219.903 208.296 216.321 209.255 213.52 207.638L187.077 192.371C185.262 191.324 184.221 189.452 184.152 187.501C184.13 187.301 184.119 187.097 184.119 186.891V157.714C184.119 154.561 186.675 152.005 189.828 152.005C192.981 152.005 195.537 154.561 195.537 157.714Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
diff --git a/svg/deployment.js b/svg/deployment.js
new file mode 100644
index 0000000..8b5aafb
--- /dev/null
+++ b/svg/deployment.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const DeploymentIcon = ({ color = '#9197B3', ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke={color}
+      className="w-2 h-2"
+      {...rest}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
+      />
+    </svg>
+  );
+};
+
+export default DeploymentIcon;
diff --git a/svg/deploymentSpace.js b/svg/environment.js
similarity index 94%
rename from svg/deploymentSpace.js
rename to svg/environment.js
index 95e447f..4aaea2d 100644
--- a/svg/deploymentSpace.js
+++ b/svg/environment.js
@@ -1,11 +1,11 @@
 import React from 'react';
 
-export const DeploymentSpace = ({ color = '#9197B3', ...rest }) => {
+export const Environment = ({ color = '#9197B3', ...rest }) => {
   return (
     <svg
-      width="22px"
-      height="22px"
-      viewBox="0 0 22 22"
+      width="23px"
+      height="23px"
+      viewBox="0 0 23 23"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
diff --git a/svg/pods.js b/svg/pods.js
new file mode 100644
index 0000000..beea4b3
--- /dev/null
+++ b/svg/pods.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Pods = ({ color = '#9197B3', ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 28 28"
+      strokeWidth={1.5}
+      stroke={color}
+      className="h-5 w-5"
+      {...rest}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z"
+      />
+    </svg>
+  );
+};
diff --git a/svg/services.js b/svg/services.js
new file mode 100644
index 0000000..061df64
--- /dev/null
+++ b/svg/services.js
@@ -0,0 +1,49 @@
+import React from 'react';
+
+export const Services = ({ color = '#9197B3', ...rest }) => {
+  return (
+    <>
+      <svg
+        width="23px"
+        height="23px"
+        viewBox="0 0 23 23"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        {...rest}
+      >
+        <g id="New-Layout-" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+          <g id="Application--Summary-page" transform="translate(-30, -312)">
+            <g id="Services" transform="translate(30, 312)">
+              <path
+                d="M18.3992378,11.9863757 L17.3053378,10.7555757 C16.7094378,10.0852757 15.6621378,10.0852757 15.0663378,10.7555757 L13.9723378,11.9863757 L12.3595378,12.3183757 C11.4810378,12.4991757 10.9574378,13.4062757 11.2400378,14.2573757 L11.7589378,15.8201757 L11.2400378,17.3829757 C10.9574378,18.2340757 11.4810378,19.1411757 12.3595378,19.3219757 L13.9723378,19.6539757 L15.0663378,20.8847757 C15.6621378,21.5550757 16.7094378,21.5550757 17.3053378,20.8847757 L18.3992378,19.6539757 L20.0121378,19.3219757 C20.8905378,19.1411757 21.4142378,18.2340757 21.1315378,17.3829757 L20.9626378,16.8741757 M17.6915378,15.8201757 C17.6915378,16.6517757 17.0174378,17.3258757 16.1858378,17.3258757 C15.3542378,17.3258757 14.6800378,16.6517757 14.6800378,15.8201757 C14.6800378,14.9885757 15.3542378,14.3144757 16.1858378,14.3144757 C17.0174378,14.3144757 17.6915378,14.9885757 17.6915378,15.8201757 Z"
+                id="Shape"
+                stroke={color}
+                strokeWidth="1.49777"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M13.9728378,19.6541758 L15.0667378,20.8849758 C15.6625378,21.5553758 16.7099378,21.5553758 17.3057378,20.8849758 L18.3997378,19.6541758 L20.0125378,19.3222758 C20.8910378,19.1413758 21.4146378,18.2343758 21.1320378,17.3831758 L20.6131378,15.8204758 L21.1320378,14.2576758 C21.4146378,13.4064758 20.8910378,12.4994758 20.0125378,12.3186758 L18.3997378,11.9866758 L17.3057378,10.7558758 C16.7099378,10.0855758 15.6625378,10.0855758 15.0667378,10.7558758 L13.9728378,11.9866758 L12.3599378,12.3186758 C11.4815378,12.4994758 10.9578378,13.4064758 11.2404378,14.2576758 L11.4094378,14.7664758 M14.6805378,15.8204757 C14.6805378,14.9888757 15.3546378,14.3146757 16.1862378,14.3146757 C17.0178378,14.3146757 17.6920378,14.9888757 17.6920378,15.8204757 C17.6920378,16.6520757 17.0178378,17.3261757 16.1862378,17.3261757 C15.3546378,17.3261757 14.6805378,16.6520757 14.6805378,15.8204757 Z"
+                id="Shape"
+                stroke={color}
+                strokeWidth="1.49777"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M21.5990378,8.31151575 C20.6090378,7.32144575 19.2517378,6.92235575 17.9656378,7.11425575 C17.8387378,5.59732575 17.1948378,4.11552575 16.0342378,2.95484575 C13.4277378,0.34838475 9.20182775,0.34838475 6.59535775,2.95484575 C4.78882775,4.76138575 4.23439775,7.34588575 4.93207775,9.62993575 C3.89156775,9.30841575 2.71219775,9.55946575 1.88856775,10.3830758 C0.70381075,11.5678758 0.70381075,13.4886758 1.88856775,14.6734758 C2.48094775,15.2658758 3.25735775,15.5620758 4.03375775,15.5620758 L7.67426775,15.5620758"
+                id="Path"
+                stroke={color}
+                strokeWidth="1.49777"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <rect id="Rectangle" x={0} y={0} width={22} height={22} />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </>
+  );
+};
diff --git a/utlis/apiEndpoints.js b/utlis/apiEndpoints.js
index 07b98fc..ba7f966 100644
--- a/utlis/apiEndpoints.js
+++ b/utlis/apiEndpoints.js
@@ -1,3 +1,4 @@
 export const CLOUD_ACCOUNT_ENDPOINT = '/cloud-accounts';
 export const APPLICATION_ENDPOINT = '/applications';
 export const ENVIRONMENT_ENDPOINT = '/environments';
+export const DEPLOYMENT_ENDPOINT = '/deploymentspace/deployment';
diff --git a/utlis/helperFunc.js b/utlis/helperFunc.js
index 35a878a..ce78586 100644
--- a/utlis/helperFunc.js
+++ b/utlis/helperFunc.js
@@ -2,10 +2,12 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import isBetween from 'dayjs/plugin/isBetween';
+import duration from 'dayjs/plugin/duration';
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
 dayjs.extend(isBetween); // Extend dayjs with the isBetween plugin
+dayjs.extend(duration);
 
 const getOrdinalSuffix = (day) => {
   if (day > 3 && day < 21) return 'th'; // Covers 11th, 12th, 13th, etc.
@@ -52,6 +54,24 @@ export const formatTime = (time, type) => {
   }
 };
 
+export const calculateAge = (creationTimestamp) => {
+  const now = dayjs();
+  const creationTime = dayjs(creationTimestamp);
+  const diffInMs = now.diff(creationTime);
+
+  // Calculate days, hours, minutes
+  const days = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((diffInMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((diffInMs % (1000 * 60 * 60)) / (1000 * 60));
+
+  let result = '';
+  if (days > 0) result += `${days}d`;
+  if (hours > 0) result += `${result ? ' ' : ''}${hours}h`;
+  if (minutes > 0) result += `${result ? ' ' : ''}${minutes}m`;
+
+  return result || '0m'; // Default to "0m" if the difference is negligible
+};
+
 export function ParseJSON(str) {
   try {
     if (typeof str !== 'string') {