diff --git a/src/api/BulkIssuance.ts b/src/api/BulkIssuance.ts
index 64f18a7dd..1d5d0ebdf 100644
--- a/src/api/BulkIssuance.ts
+++ b/src/api/BulkIssuance.ts
@@ -6,6 +6,7 @@ import {
 } from '../config/GetHeaderConfigs';
 import { axiosGet, axiosPost } from '../services/apiRequests';
 import { getFromLocalStorage } from './Auth';
+import type { IConnectionListAPIParameter } from './connection';
 
 export const getSchemaCredDef = async () => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
@@ -40,7 +41,10 @@ export const DownloadCsvTemplate = async (credDefId: string) => {
 	}
 };
 
-export const uploadCsvFile = async (payload: {file: Uint8Array | Blob, fileName:string}, credefId: string) => {	
+export const uploadCsvFile = async (
+	payload: { file: Uint8Array | Blob; fileName: string },
+	credefId: string,
+) => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
 	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.bulk.uploadCsv}?credDefId=${credefId}`;
 
@@ -80,7 +84,10 @@ export const getCsvFileData = async (
 	}
 };
 
-export const issueBulkCredential = async (requestId: string, clientId: string) => {
+export const issueBulkCredential = async (
+	requestId: string,
+	clientId: string,
+) => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
 	const url = `${apiRoutes.organizations.root}/${orgId}/${requestId}${apiRoutes.Issuance.bulk.bulk}`;
 
@@ -88,8 +95,8 @@ export const issueBulkCredential = async (requestId: string, clientId: string) =
 		url,
 		config: await getHeaderConfigs(),
 		payload: {
-			clientId
-		}
+			clientId,
+		},
 	};
 
 	try {
@@ -100,31 +107,33 @@ export const issueBulkCredential = async (requestId: string, clientId: string) =
 	}
 };
 
-export const retryBulkIssuance = async (fileId:string, clientId:string) => {	 
-		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-		const url = `${apiRoutes.organizations.root}/${orgId}/${fileId}${apiRoutes.Issuance.bulk.retry}`;
-	
-		const axiosPayload = {
-			url,
-			payload:{clientId:clientId},
-			config: await getHeaderConfigs(),
-		};		
-	
-		try {
-			return await axiosPost(axiosPayload);
-		} catch (error) {
-			const err = error as Error;
-			return err?.message;
-		}
+export const retryBulkIssuance = async (fileId: string, clientId: string) => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const url = `${apiRoutes.organizations.root}/${orgId}/${fileId}${apiRoutes.Issuance.bulk.retry}`;
+
+	const axiosPayload = {
+		url,
+		payload: { clientId: clientId },
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosPost(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
 };
 
-export const getFilesHistory = async (
-	pageNumber: number,
-	pageSize: number,
-	search: string,
-) => {
+export const getFilesHistory = async ({
+	page,
+	itemPerPage,
+	search,
+	sortBy,
+	sortingOrder,
+}: IConnectionListAPIParameter) => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.bulk.files}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`;
+	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.bulk.files}?pageSize=${itemPerPage}&pageNumber=${page}&searchByText=${search}&sortBy=${sortingOrder}&sortField=${sortBy}`;
 
 	const axiosPayload = {
 		url,
@@ -141,13 +150,14 @@ export const getFilesHistory = async (
 
 export const getFilesDataHistory = async (
 	requestId: string,
-	pageNumber: number,
-	pageSize: number,
+	itemPerPage: number,
+	page: number,
 	search: string,
-	sortBy:string
+	sortingOrder: string,
+	sortBy: string,
 ) => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-	const url = `${apiRoutes.organizations.root}/${orgId}/${requestId}${apiRoutes.Issuance.bulk.filesData}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}&sortBy=${sortBy}`;
+	const url = `${apiRoutes.organizations.root}/${orgId}/${requestId}${apiRoutes.Issuance.bulk.filesData}?pageSize=${itemPerPage}&pageNumber=${page}&searchByText=${search}&sortBy=${sortBy}&sortField=${sortingOrder}`;
 
 	const axiosPayload = {
 		url,
diff --git a/src/app/NavBarSidebar.astro b/src/app/NavBarSidebar.astro
index 1f55009d7..a776d5259 100644
--- a/src/app/NavBarSidebar.astro
+++ b/src/app/NavBarSidebar.astro
@@ -13,14 +13,12 @@ import { getFromCookies } from '../api/Auth';
 import { RolePermissions } from '../config/permissions';
 
 const { hideOrgAgent } = Astro.props;
-console.log(3242, hideOrgAgent)
 
 const role = getFromCookies(Astro.cookies, 'role');
 
 const permittedPages = RolePermissions.find(
 	(item) => item.role === role,
 )?.pages;
-
 ---
 
 <nav
@@ -30,40 +28,47 @@ const permittedPages = RolePermissions.find(
 		<div class="flex items-center justify-between">
 			<div class="flex items-center justify-start">
 				{
-					!hideOrgAgent &&
-					<button
-						id="toggleSidebarMobile"
-						aria-expanded="true"
-						aria-controls="sidebar"
-						class="p-2 text-gray-600 rounded cursor-pointer lg:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-					>
-						<svg
-							id="toggleSidebarMobileHamburger"
-							class="w-6 h-6"
-							fill="currentColor"
-							viewBox="0 0 20 20"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-								clip-rule="evenodd"></path>
-						</svg>
-						<svg
-							id="toggleSidebarMobileClose"
-							class="hidden w-6 h-6"
-							fill="currentColor"
-							viewBox="0 0 20 20"
-							xmlns="http://www.w3.org/2000/svg"
+					!hideOrgAgent && (
+						<button
+							id="toggleSidebarMobile"
+							aria-expanded="true"
+							aria-controls="sidebar"
+							class="p-2 text-gray-600 rounded cursor-pointer lg:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
 						>
-							<path
-								fill-rule="evenodd"
-								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-								clip-rule="evenodd"></path>
-						</svg>
-					</button>
+							<svg
+								id="toggleSidebarMobileHamburger"
+								class="w-6 h-6"
+								fill="currentColor"
+								viewBox="0 0 20 20"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							<svg
+								id="toggleSidebarMobileClose"
+								class="hidden w-6 h-6"
+								fill="currentColor"
+								viewBox="0 0 20 20"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</button>
+					)
 				}
-				<a href={permittedPages && permittedPages[0] || pathRoutes.users.dashboard} class="flex ml-2 md:mr-24">
+				<a
+					href={(permittedPages && permittedPages[0]) ||
+						pathRoutes.users.dashboard}
+					class="flex ml-2 md:mr-24"
+				>
 					<img
 						src="/images/CREDEBL_ICON.png"
 						class="h-8 mr-3"
@@ -87,7 +92,6 @@ const permittedPages = RolePermissions.find(
 								<div class="hidden sm:block mr-5">
 									<OrgDropDwon client:visible />
 								</div>
-
 							</>
 						)
 					}
@@ -392,9 +396,21 @@ const permittedPages = RolePermissions.find(
 					>
 						<span class="sr-only">View</span>
 						<!-- Icon -->
-						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-							<path stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.047 16.473c-1.204-1.473-2.053-2.223-2.053-6.285 0-3.72-1.9-5.044-3.463-5.688a.835.835 0 0 1-.466-.495C13.79 3.072 13.022 2.25 12 2.25s-1.791.823-2.063 1.756a.827.827 0 0 1-.466.494c-1.565.645-3.463 1.965-3.463 5.688-.002 4.062-.852 4.812-2.056 6.285-.499.61-.062 1.527.81 1.527h14.48c.867 0 1.301-.92.805-1.527ZM15 18v.75a3 3 0 0 1-6 0V18"/>
-						  </svg>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="24"
+							height="24"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke="#6B7280"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="1.5"
+								d="M20.047 16.473c-1.204-1.473-2.053-2.223-2.053-6.285 0-3.72-1.9-5.044-3.463-5.688a.835.835 0 0 1-.466-.495C13.79 3.072 13.022 2.25 12 2.25s-1.791.823-2.063 1.756a.827.827 0 0 1-.466.494c-1.565.645-3.463 1.965-3.463 5.688-.002 4.062-.852 4.812-2.056 6.285-.499.61-.062 1.527.81 1.527h14.48c.867 0 1.301-.92.805-1.527ZM15 18v.75a3 3 0 0 1-6 0V18"
+							></path>
+						</svg>
 					</button>
 					<!-- Dropdown menu -->
 					<div
@@ -426,13 +442,28 @@ const permittedPages = RolePermissions.find(
 						id="dropdown-2"
 					>
 						<DisplayUser client:load />
-						<ul class="py-1" role="none">
+						<ul class="py-1 divide-y" role="none">
 							<li>
 								<a
 									href={pathRoutes.users.profile}
-									class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-									role="menuitem">Profile</a
-								>
+									class="flex space-x-2 px-4 py-2 my-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+									role="menuitem"
+									><svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="20"
+										height="21"
+										viewBox="0 0 20 21"
+										fill="none"
+										class="text-gray-700 dark:text-white"
+									>
+										<path
+											fill-rule="evenodd"
+											clip-rule="evenodd"
+											d="M16.5626 18.2002H3.43818C2.73179 18.2002 2.21016 17.5032 2.47658 16.8622C3.71277 13.8982 6.61694 12.2002 9.99986 12.2002C13.3838 12.2002 16.288 13.8982 17.5242 16.8622C17.7906 17.5032 17.269 18.2002 16.5626 18.2002ZM5.91667 6.20019C5.91667 3.99418 7.749 2.20018 9.99986 2.20018C12.2517 2.20018 14.0831 3.99418 14.0831 6.20019C14.0831 8.40619 12.2517 10.2002 9.99986 10.2002C7.749 10.2002 5.91667 8.40619 5.91667 6.20019ZM19.9557 17.8362C19.2136 14.4772 16.8923 11.9982 13.837 10.8732C15.456 9.59616 16.4003 7.53114 16.0532 5.27013C15.651 2.64713 13.4236 0.548173 10.7348 0.242172C7.02322 -0.180828 3.87508 2.64918 3.87508 6.20019C3.87508 8.09019 4.7693 9.77417 6.16371 10.8732C3.10744 11.9982 0.787165 14.4772 0.044024 17.8362C-0.225466 19.0572 0.778999 20.2002 2.05398 20.2002H17.9457C19.2217 20.2002 20.2262 19.0572 19.9557 17.8362Z"
+											fill="currentColor"></path>
+									</svg>
+									<span>Profile</span>
+								</a>
 							</li>
 							<li>
 								<SignOutButton client:load />
diff --git a/src/common/enums.ts b/src/common/enums.ts
index e3ebf2630..2613bd443 100644
--- a/src/common/enums.ts
+++ b/src/common/enums.ts
@@ -64,6 +64,13 @@ export enum OrganizationRoles {
 	organizationVerifier = "verifier"
 }
 
+export enum OrganizationRoles {
+	organizationMember = "member",
+	organizationOwner = "owner",
+	organizationIssuer = "issuer",
+	organizationVerifier = "verifier"
+}
+
 export enum PlatformRoles {
 	platformAdmin = "platform_admin"
 }
diff --git a/src/commonComponents/PasseyAddDevicePopup.tsx b/src/commonComponents/PasseyAddDevicePopup.tsx
index a6a7707e9..a80c7f30c 100644
--- a/src/commonComponents/PasseyAddDevicePopup.tsx
+++ b/src/commonComponents/PasseyAddDevicePopup.tsx
@@ -18,7 +18,8 @@ interface PasswordValue {
 }
 
 const PasskeyAddDevice = (props: {
-	setOpenModel(arg0: boolean): unknown; openModal: boolean; closeModal: (flag: boolean) => void; registerWithPasskey: (flag: boolean) => Promise<void>
+	setOpenModel(arg0: boolean): unknown; openModal: boolean; closeModal: (flag: boolean) => void; 
+	registerWithPasskey: (flag: boolean) => Promise<void>
 }
 ) => {
 	const [fidoUserError, setFidoUserError] = useState<string | null>(null)
diff --git a/src/commonComponents/datatable/SortDataTable.tsx b/src/commonComponents/datatable/SortDataTable.tsx
index 33ebfe2d0..fefc37d94 100644
--- a/src/commonComponents/datatable/SortDataTable.tsx
+++ b/src/commonComponents/datatable/SortDataTable.tsx
@@ -2,7 +2,7 @@ import type { IDataTable } from './interface';
 import CustomSpinner from '../../components/CustomSpinner';
 import SearchInput from '../../components/SearchInput';
 import { Pagination } from 'flowbite-react';
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import { EmptyListMessage } from '../../components/EmptyListComponent';
 
 const SortDataTable: React.FC<IDataTable> = ({
@@ -34,7 +34,9 @@ const SortDataTable: React.FC<IDataTable> = ({
 	const handleSortByValues = (event: { target: { value: any } }) => {
 		const newSelectedValue = event.target.value;
 		setSelectedValue(newSelectedValue);
-		searchSortByValue(newSelectedValue);
+		if(searchSortByValue){
+			searchSortByValue(newSelectedValue);
+		}
 	};
 
 	const {
@@ -53,9 +55,9 @@ const SortDataTable: React.FC<IDataTable> = ({
 	const sortValues = [
 		{
 			label: 'Descending',
-			value: 'DESC',
+			value: 'desc',
 		},
-		{ label: 'Ascending', value: 'ASC' },
+		{ label: 'Ascending', value: 'asc' },
 	];
 
 	return (
diff --git a/src/commonComponents/formikerror/index.tsx b/src/commonComponents/formikerror/index.tsx
new file mode 100644
index 000000000..2a8ad083d
--- /dev/null
+++ b/src/commonComponents/formikerror/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+
+const ErrorMessage = ({ error, touched }) => {
+	return touched && <span className="text-red-500 text-xs">{error}</span>;
+};
+export default ErrorMessage;
diff --git a/src/components/ConnectionsList/index.tsx b/src/components/ConnectionsList/index.tsx
index b891faf89..099e2d4c9 100644
--- a/src/components/ConnectionsList/index.tsx
+++ b/src/components/ConnectionsList/index.tsx
@@ -22,7 +22,7 @@ const initialPageState = {
 	page: 1,
 	search: '',
 	sortBy: 'createDateTime',
-	sortingOrder: 'DESC',
+	sortingOrder: 'desc',
 	allSearch: '',
 };
 const ConnectionList = () => {
diff --git a/src/components/Ecosystem/Endorsement/index.tsx b/src/components/Ecosystem/Endorsement/index.tsx
index 05fc2cead..231e5e417 100644
--- a/src/components/Ecosystem/Endorsement/index.tsx
+++ b/src/components/Ecosystem/Endorsement/index.tsx
@@ -61,7 +61,7 @@ const EndorsementList = () => {
 			page: 1,
 			search: '',
 			sortBy: 'id',
-			sortingOrder: 'DESC',
+			sortingOrder: 'desc',
 			type: '',
 			status: '',
 		});
diff --git a/src/components/Ecosystem/interfaces/index.ts b/src/components/Ecosystem/interfaces/index.ts
index a1939c6fb..29f782a9c 100644
--- a/src/components/Ecosystem/interfaces/index.ts
+++ b/src/components/Ecosystem/interfaces/index.ts
@@ -26,4 +26,24 @@ export interface Ecosystem {
     website: string
     roles: string[] 
     logoFile:string
-}
\ No newline at end of file
+}
+
+export interface EditEntityModalProps {
+	openModal: boolean;
+	setMessage: (message: string) => void;
+	setOpenModal: (flag: boolean) => void;
+	onEditSuccess?: () => void;
+	entityData: Ecosystem | null;
+	isOrganization: boolean;
+}
+
+export interface EditEntityValues {
+	name: string;
+	description: string;
+}
+
+export interface ILogoImage {
+	logoFile: string | File;
+	imagePreviewUrl: string | ArrayBuffer | null | File;
+	fileName: string;
+}
diff --git a/src/components/EditEcosystemOrgModal/index.tsx b/src/components/EditEcosystemOrgModal/index.tsx
index 549fc273d..e649fd707 100644
--- a/src/components/EditEcosystemOrgModal/index.tsx
+++ b/src/components/EditEcosystemOrgModal/index.tsx
@@ -1,396 +1,366 @@
-import * as yup from "yup";
+import * as yup from 'yup';
 import { Avatar, Button, Label, Modal } from 'flowbite-react';
 import { Field, Form, Formik, FormikHelpers } from 'formik';
-import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, apiStatusCodes, imageSizeAccepted } from '../../config/CommonConstant';
-import { calculateSize, dataURItoBlob } from "../../utils/CompressImage";
-import { AlertComponent } from "../AlertComponent";
+import { apiStatusCodes } from '../../config/CommonConstant';
+import { AlertComponent } from '../AlertComponent';
 import type { AxiosResponse } from 'axios';
-import { updateOrganization } from "../../api/organization";
-import { updateEcosystem } from "../../api/ecosystem";
-import type { Ecosystem } from "../Ecosystem/interfaces";
-import React, { useEffect, useState } from "react";
-import EndorsementTooltip from "../../commonComponents/EndorsementTooltip";
-
-interface EditEntityModalProps {
-    openModal: boolean;
-    setMessage: (message: string) => void;
-    setOpenModal: (flag: boolean) => void;
-    onEditSuccess?: () => void;
-    entityData: Ecosystem | null;
-    isOrganization: boolean; 
-    
-}
-
-interface EditEntityValues {
-    name: string;
-    description: string;
-}
-
-interface ILogoImage {
-    logoFile: string | File;
-    imagePreviewUrl: string | ArrayBuffer | null | File;
-    fileName: string;
-}
+import { updateOrganization } from '../../api/organization';
+import { updateEcosystem } from '../../api/ecosystem';
+import type {
+	EditEntityModalProps,
+	EditEntityValues,
+	ILogoImage,
+} from '../Ecosystem/interfaces';
+import React, { useEffect, useState } from 'react';
+import EndorsementTooltip from '../../commonComponents/EndorsementTooltip';
+import { processImage } from '../../utils/processImage';
+import FormikErrorMessage from '../../commonComponents/formikerror/index'
 
 const EditPopupModal = (props: EditEntityModalProps) => {
-    const [logoImage, setLogoImage] = useState<ILogoImage>({
-        logoFile: "",
-        imagePreviewUrl: props?.entityData?.logoUrl ?? "",
-        fileName: '',
-    });
-
-    const [loading, setLoading] = useState<boolean>(false);
-    const [isImageEmpty, setIsImageEmpty] = useState(true);
-    const [initialEntityData, setInitialEntityData] = useState<EditEntityValues>({
-        name: "",
-        description: ""
-    });
-
-    useEffect(() => {
-                if (props.openModal && props.entityData) {
-            setInitialEntityData({
-                name: props.entityData.name ?? "",
-                description: props.entityData.description ?? "",
-            });
-            SetisAutoEndorse(props.entityData.autoEndorsement)
-            setLogoImage({
-                logoFile: "",
-                imagePreviewUrl: props.entityData.logoUrl ?? "",
-                fileName: props.entityData.logoFile ?? "",
-            });
-        }
-    }, [props.entityData, props.openModal]);
-
-    const [errMsg, setErrMsg] = useState<string | null>(null);
-    const [imgError, setImgError] = useState('');
-    const [isAutoEndorse, SetisAutoEndorse] = useState(false)
+	const [logoImage, setLogoImage] = useState<ILogoImage>({
+		logoFile: '',
+		imagePreviewUrl: props?.entityData?.logoUrl ?? '',
+		fileName: '',
+	});
 
+	const [loading, setLoading] = useState<boolean>(false);
+	const [initialEntityData, setInitialEntityData] = useState<EditEntityValues>({
+		name: '',
+		description: '',
+	});
 
-    useEffect(() => {
-        if (!props.openModal) {
-            setInitialEntityData({
-                name: "",
-                description: "",
-            });
+	useEffect(() => {
+		if (props.openModal && props.entityData) {
+			setInitialEntityData({
+				name: props.entityData.name ?? '',
+				description: props.entityData.description ?? '',
+			});
+			setIsAutoEndorse(props.entityData.autoEndorsement);
+			setLogoImage({
+				logoFile: '',
+				imagePreviewUrl: props.entityData.logoUrl ?? '',
+				fileName: props.entityData.logoFile ?? '',
+			});
+		}
+	}, [props.entityData, props.openModal]);
 
-            setLogoImage({
-                                logoFile: "",
-                imagePreviewUrl: "",
-                fileName: "",
-            });
-            setImgError('');
-            setErrMsg(null);
-            setLoading(false);
-        }
-    }, [props.openModal]);
- 
-    const processImage = (e: any): string | undefined => {
-        const file = e?.target?.files[0];
-        if (!file) return;
+	const [errMsg, setErrMsg] = useState<string | null>(null);
+	const [imgError, setImgError] = useState('');
+	const [isAutoEndorse, setIsAutoEndorse] = useState(false);
 
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
+	useEffect(() => {
+		if (!props.openModal) {
+			setInitialEntityData({
+				name: '',
+				description: '',
+			});
 
-        reader.onload = (event): void => {
-            const imgElement = document.createElement("img");
-            if (imgElement) {
-                imgElement.src = typeof event?.target?.result === 'string' ? event.target.result : "";
-                imgElement.onload = (e): void => {
-                    let fileUpdated: File | string = file;
-                    let srcEncoded = '';
-                    const canvas = document.createElement("canvas");
+			setLogoImage({
+				logoFile: '',
+				imagePreviewUrl: '',
+				fileName: '',
+			});
+			setImgError('');
+			setErrMsg(null);
+			setLoading(false);
+		}
+	}, [props.openModal]);
 
-                    const { width, height, ev } = calculateSize(imgElement, IMG_MAX_WIDTH, IMG_MAX_HEIGHT);
-                    canvas.width = width;
-                    canvas.height = height;
+	const handleImageChange = (event: any): void => {
+		setImgError('');
+		processImage(event, (result: any, error: any) => {
+			if (result) {
+				setLogoImage({
+					logoFile: '',
+					imagePreviewUrl: result,
+					fileName: event.target.files[0].name,
+				});
+			} else {
+				setImgError(error || 'An error occurred while processing the image.');
+			}
+		});
+	};
 
-                    const ctx = canvas.getContext("2d");
-                    if (ctx && e?.target) {
-                        ctx.imageSmoothingEnabled = true;
-                        ctx.imageSmoothingQuality = "high";
-                        ctx.drawImage(ev, 0, 0, canvas.width, canvas.height);
-                        srcEncoded = ctx.canvas.toDataURL(ev, file.type);
-                        const blob = dataURItoBlob(srcEncoded, file.type);
-                        fileUpdated = new File([blob], file.name, { type: file.type, lastModified: new Date().getTime() });
-                        setLogoImage({
-                            logoFile: fileUpdated,
-                            imagePreviewUrl: srcEncoded,
-                            fileName: file.name
-                        });
-                    }
-                };
-            }
-        };
-    };
- 
-    const handleImageChange = (event: any): void => {
-        setImgError('');
-        const reader = new FileReader();
-        const file = event?.target?.files;
-       
-        const fileSize = Number((file[0]?.size / 1024 / 1024)?.toFixed(2));
-        const extension = file[0]?.name?.substring(file[0]?.name?.lastIndexOf(".") + 1)?.toLowerCase();
+	const submitUpdateEntity = async (values: EditEntityValues) => {
+		setLoading(true);
 
-        if (extension === "png" || extension === "jpeg" || extension === "jpg") {
-            if (fileSize <= imageSizeAccepted) {
-                reader.onloadend = (): void => {
-                    processImage(event);
-                    setIsImageEmpty(false);
-                };
-                reader.readAsDataURL(file[0]);
-                event.preventDefault();
-            } else {
-                setImgError("Please check image size");
-            }
-        } else {
-            setImgError("Invalid image type");
-        }
-    };
+		const entityData = {
+			id: props?.entityData?.id,
+			name: values.name,
+			description: values.description,
+			logo:
+				(logoImage?.imagePreviewUrl as string) || props?.entityData?.logoUrl,
+			autoEndorsement: isAutoEndorse,
+		};
 
-    const isEmpty = (object: any): boolean => {
+		try {
+			if (props.isOrganization) {
+				const response = await updateOrganization(
+					entityData,
+					entityData.id?.toString() as string,
+				);
+				const { data } = response as AxiosResponse;
+				if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+					if (props?.onEditSuccess) {
+						props?.onEditSuccess();
+					}
+					props.setOpenModal(false);
+					props.setMessage(data?.message);
+				} else {
+					setErrMsg(response as string);
+					setLoading(false);
+				}
+			} else {
+				const response = await updateEcosystem(entityData);
+				const { data } = response as AxiosResponse;
 
-        return true;
-    };
+				if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+					if (props?.onEditSuccess) {
+						props?.onEditSuccess();
+					}
+					props.setOpenModal(false);
+					props.setMessage(data?.message);
+				} else {
+					setErrMsg(response as string);
+					setLoading(false);
+				}
+			}
+		} catch (error) {
+			console.error('An error occurred:', error);
+			setLoading(false);
+		}
+	};
 
-    const submitUpdateEntity = async (values: EditEntityValues) => {
-        setLoading(true);
+	return (
+		<Modal
+			size={'3xl'}
+			show={props.openModal}
+			onClose={() => {
+				setLogoImage({
+					logoFile: '',
+					imagePreviewUrl: '',
+					fileName: '',
+				});
+				setInitialEntityData({
+					name: '',
+					description: '',
+				});
+				props.setOpenModal(false);
+			}}
+		>
+			<Modal.Header>
+				Edit {props.isOrganization ? 'Organization' : 'Ecosystem'}
+			</Modal.Header>
+			<Modal.Body>
+				<AlertComponent
+					message={errMsg}
+					type={'failure'}
+					onAlertClose={() => {
+						setErrMsg(null);
+					}}
+				/>
+				<Formik
+					initialValues={initialEntityData}
+					validationSchema={yup.object().shape({
+						name: yup
+							.string()
+							.min(
+								2,
+								`${
+									props.isOrganization ? 'Organization' : 'Ecosystem'
+								} name must be at least 2 characters`,
+							)
+							.max(
+								50,
+								`${
+									props.isOrganization ? 'Organization' : 'Ecosystem'
+								} name must be at most 50 characters`,
+							)
+							.required(
+								`${
+									props.isOrganization ? 'Organization' : 'Ecosystem'
+								} name is required`,
+							)
+							.trim(),
+						description: yup
+							.string()
+							.min(2, 'Description must be at least 2 characters')
+							.max(255, 'Description must be at most 255 characters')
+							.required('Description is required'),
+					})}
+					validateOnBlur
+					validateOnChange
+					enableReinitialize
+					onSubmit={async (
+						values: EditEntityValues,
+						{ resetForm }: FormikHelpers<EditEntityValues>,
+					) => {
+						await submitUpdateEntity(values);
+					}}
+				>
+					{(formikHandlers): JSX.Element => (
+						<Form className="space-y-6" onSubmit={formikHandlers.handleSubmit}>
+							<div className="mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
+								<div className="items-center sm:flex 2xl:flex sm:space-x-4 xl:space-x-4 2xl:space-x-4">
+									{logoImage.imagePreviewUrl ? (
+										<img
+											className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
+											src={logoImage?.imagePreviewUrl || ''}
+											alt={`${
+												props.isOrganization ? 'Organization' : 'Ecosystem'
+											} Logo`}
+										/>
+									) : (
+										<Avatar size="lg" />
+									)}
 
-        const entityData = {
-            id: props?.entityData?.id,
-            name: values.name,
-            description: values.description,
-            logo: logoImage?.imagePreviewUrl as string || props?.entityData?.logoUrl,
-            autoEndorsement:isAutoEndorse
-        };
-
-        try {
-            if (props.isOrganization) {
-                const response = await updateOrganization(entityData, entityData.id?.toString() as string);
-                const { data } = response as AxiosResponse;
-                if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-                    if (props?.onEditSuccess) {
-                        props?.onEditSuccess();
-                    }
-                    props.setOpenModal(false);
-                } else {
-                    setErrMsg(data?.message as string);
-                }
-            } else {
-                const response = await updateEcosystem(entityData);
-                const { data } = response as AxiosResponse;
-
-                if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-                    if (props?.onEditSuccess) {
-                        props?.onEditSuccess();
-                    }
-                    props.setOpenModal(false);
-                } else {
-                    setErrMsg(data?.message as string);
-                }
-            }
-        } catch (error) {
-            console.error("An error occurred:", error);
-            setLoading(false);
-        }
-    };
-    return (
-        <Modal 
-		size={'3xl'}
-		show={props.openModal} onClose={() => {
-            setLogoImage({
-                logoFile: "",
-                imagePreviewUrl: "",
-                fileName: ''
-            });
-            setInitialEntityData({
-                name: "",
-                description: ""               
-            });
-            props.setOpenModal(false);
-        }}>
-            <Modal.Header>Edit {props.isOrganization ? "Organization" : "Ecosystem"}</Modal.Header>
-            <Modal.Body>
-                <AlertComponent
-                    message={errMsg}
-                    type={'failure'}
-                    onAlertClose={() => {
-                        setErrMsg(null);
-                    }}
-                />
-                <Formik
-                    initialValues={initialEntityData}
-                    validationSchema={yup.object().shape({
-                        name: yup
-                            .string()
-                            .min(2, `${props.isOrganization ? "Organization" : "Ecosystem"} name must be at least 2 characters`)
-                            .max(50, `${props.isOrganization ? "Organization" : "Ecosystem"} name must be at most 50 characters`)
-                            .required(`${props.isOrganization ? "Organization" : "Ecosystem"} name is required`)
-                            .trim(),
-                        description: yup
-                            .string()
-                            .min(2, 'Description must be at least 2 characters')
-                            .max(255, 'Description must be at most 255 characters')
-                            .required('Description is required'),
-                    })}
-                    validateOnBlur
-                    validateOnChange
-                    enableReinitialize
-                    onSubmit={async (
-                        values: EditEntityValues,
-                        { resetForm }: FormikHelpers<EditEntityValues>
-                    ) => {
-                        await submitUpdateEntity(values);
-                    }}
-                >
-                    {(formikHandlers): JSX.Element => (
-                        <Form className="space-y-6" onSubmit={formikHandlers.handleSubmit}>
-                            <div className="mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
-                                <div className="items-center sm:flex 2xl:flex sm:space-x-4 xl:space-x-4 2xl:space-x-4">
-                                {logoImage.imagePreviewUrl ? (
-                                        <img
-                                            className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
-                                            src={logoImage?.imagePreviewUrl || ""}
-                                            alt={`${props.isOrganization ? "Organization" : "Ecosystem"} Logo`}
-                                        />
-                                    ) : (
-                                        <Avatar size="lg" />
-                                    )}
-                                    
-                                    <div>
-                                        <h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
-                                            {props.isOrganization ? "Organization Logo" : "Ecosystem Logo"}
-                                        </h3>
-                                        <div className="mb-4 text-sm text-gray-500 dark:text-gray-400">
-                                            JPG, JPEG and PNG. Max size of 1MB
-                                        </div>
-                                        <div className="flex items-center space-x-4">
-                                            <div>
-                                                <label htmlFor="entityLogo">
-                                                    <div className="px-4 py-2 bg-primary-700 hover:bg-primary-800 text-white text-center rounded-lg">Choose file</div>
-                                                    <input
-                                                        type="file"
-                                                        accept="image/*"
-                                                        name="file"
-                                                        className="hidden"
-                                                        id="entityLogo"
-                                                        title=""
-                                                        onChange={(event): void => handleImageChange(event)}
-                                                    />
-                                                    {imgError ? (
-                                                        <div className="text-red-500">{imgError}</div>
-                                                    ) : (
-                                                        <span className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                                                            {logoImage.fileName}
-                                                        </span>
-                                                    )}
-                                                </label>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div>
-                                <div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                                    <Label htmlFor="name" value="Name" />
-                                    <span className='text-red-500 text-xs'>*</span>
-                                </div>
-                                <Field
-                                    id="name"
-                                    name="name"
-                                    value={formikHandlers.values.name}
-                                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                                    placeholder={`Enter ${props.isOrganization ? "Organization" : "Ecosystem"} Name`}
-                                    onChange={(e) => {
-                                        const value = e.target.value;
-                                        formikHandlers.setFieldValue('name', value);
-                                        formikHandlers.setFieldTouched('name', true, false);
-                                    
-                                        if (value.length > 50) {
-                                          formikHandlers.setFieldError('name', props.isOrganization ? 'Organization name must be at most 50 characters' : 'Ecosystem name must be at most 50 characters');
-                                        }
-                                      }}
-
-                                />
-                                {formikHandlers?.errors?.name && formikHandlers?.touched?.name && (
-                                    <span className="text-red-500 text-xs">{formikHandlers?.errors?.name}</span>
-                                )}
-                            </div>
-                            <div>
-                                <div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                                    <Label htmlFor="description" value="Description" />
-                                    <span className='text-red-500 text-xs'>*</span>
-                                </div>
-                                <Field
-                                    id="description"
-                                    name="description"
-                                    value={formikHandlers.values.description}
-                                    as='textarea'
-                                    className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
-                                    placeholder={`Enter ${props.isOrganization ? "Organization" : "Ecosystem"} Description`}
-                                    onChange={(e) => {
-                                        const value = e.target.value;
-                                        formikHandlers.setFieldValue('description', value);
-                                        formikHandlers.setFieldTouched('description', true, false);
-                                    
-                                        if (value.length > 50) {
-                                          formikHandlers.setFieldError('description', 'Description must be at most 255 characters');
-                                        }
-                                      }}
-
-                                />
-                                {formikHandlers?.errors?.description && formikHandlers?.touched?.description && (
-                                    <span className="text-red-500 text-xs">{formikHandlers?.errors?.description}</span>
-                                )}
-                            </div>
-                            <div>
-							<div className="flex items-center">
-											<Label htmlFor="name" value="Endorsement Flow" />
-											<EndorsementTooltip />
+									<div>
+										<h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
+											{props.isOrganization
+												? 'Organization Logo'
+												: 'Ecosystem Logo'}
+										</h3>
+										<div className="mb-4 text-sm text-gray-500 dark:text-gray-400">
+											JPG, JPEG and PNG. Max size of 1MB
+										</div>
+										<div className="flex items-center space-x-4">
+											<div>
+												<label htmlFor="entityLogo">
+													<div className="px-4 py-2 bg-primary-700 hover:bg-primary-800 text-white text-center rounded-lg">
+														Choose file
+													</div>
+													<input
+														type="file"
+														accept="image/*"
+														name="file"
+														className="hidden"
+														id="entityLogo"
+														title=""
+														onChange={(event): void => handleImageChange(event)}
+													/>
+													{imgError ? (
+														<div className="text-red-500">{imgError}</div>
+													) : (
+														<span className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+															{logoImage.fileName}
+														</span>
+													)}
+												</label>
+											</div>
 										</div>
-                                               <div>
-                                             <input
-												className=""
-												type="radio"
-												id="sign"
-												name="autoEndorsement"
-                                                checked={isAutoEndorse === false}
-                                                onChange={() => SetisAutoEndorse(false)}
-											/>
-											<span className="ml-2 text-gray-900 dark:text-white text-sm">
-												Sign
-												
-											</span>
-                                           </div>
-										<div>
-										<input
-												className=""
-												type="radio"
-												id="sign-submit"
-												name="autoEndorsement"
-                                                checked={isAutoEndorse === true}
-                                                onChange={() => SetisAutoEndorse(true)}
-											/>
-											<span className="ml-2 text-gray-900 dark:text-white text-sm">
-												Sign and Submit
-												
-											</span>
-											</div>	
-									
 									</div>
-                            <Button
-                                type="submit"
-                                isProcessing={loading}
-                                className='float-right text-base font-medium text-center text-white bg-primary-700 hover:!bg-primary-800 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-700 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
-                            >
+								</div>
+							</div>
+							<div>
+								<div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+									<Label htmlFor="name" value="Name" />
+									<span className="text-red-500 text-xs">*</span>
+								</div>
+								<Field
+									id="name"
+									name="name"
+									value={formikHandlers.values.name}
+									className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+									placeholder={`Enter ${
+										props.isOrganization ? 'Organization' : 'Ecosystem'
+									} Name`}
+									onChange={(e) => {
+										const value = e.target.value;
+										formikHandlers.setFieldValue('name', value);
+										formikHandlers.setFieldTouched('name', true, false);
+
+										if (value.length > 50) {
+											formikHandlers.setFieldError(
+												'name',
+												props.isOrganization
+													? 'Organization name must be at most 50 characters'
+													: 'Ecosystem name must be at most 50 characters',
+											);
+										}
+									}}
+								/>
+								<FormikErrorMessage
+									error={formikHandlers?.errors?.name}
+									touched={formikHandlers?.touched?.name}
+								/>
+							</div>
+							<div>
+								<div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+									<Label htmlFor="description" value="Description" />
+									<span className="text-red-500 text-xs">*</span>
+								</div>
+								<Field
+									id="description"
+									name="description"
+									value={formikHandlers.values.description}
+									as="textarea"
+									className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+									placeholder={`Enter ${
+										props.isOrganization ? 'Organization' : 'Ecosystem'
+									} Description`}
+									onChange={(e) => {
+										const value = e.target.value;
+										formikHandlers.setFieldValue('description', value);
+										formikHandlers.setFieldTouched('description', true, false);
 
-                                Update
-                            </Button>
-                        </Form>
-                    )}
-                </Formik>
-            </Modal.Body>
-        </Modal>
-    );
+										if (value.length > 50) {
+											formikHandlers.setFieldError(
+												'description',
+												'Description must be at most 255 characters',
+											);
+										}
+									}}
+								/>
+								<FormikErrorMessage
+									error={formikHandlers?.errors?.description}
+									touched={formikHandlers?.touched?.description}
+								/>
+							</div>
+							<div>
+								<div className="flex items-center">
+									<Label htmlFor="name" value="Endorsement Flow" />
+									<EndorsementTooltip />
+								</div>
+								<div>
+									<input
+										className=""
+										type="radio"
+										id="sign"
+										name="autoEndorsement"
+										checked={isAutoEndorse === false}
+										onChange={() => setIsAutoEndorse(false)}
+									/>
+									<span className="ml-2 text-gray-900 dark:text-white text-sm">
+										Sign
+									</span>
+								</div>
+								<div>
+									<input
+										className=""
+										type="radio"
+										id="sign-submit"
+										name="autoEndorsement"
+										checked={isAutoEndorse === true}
+										onChange={() => setIsAutoEndorse(true)}
+									/>
+									<span className="ml-2 text-gray-900 dark:text-white text-sm">
+										Sign and Submit
+									</span>
+								</div>
+							</div>
+							<Button
+								type="submit"
+								isProcessing={loading}
+								className="float-right text-base font-medium text-center text-white bg-primary-700 hover:!bg-primary-800 rounded-lg hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-700 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+							>
+								Update
+							</Button>
+						</Form>
+					)}
+				</Formik>
+			</Modal.Body>
+		</Modal>
+	);
 };
 
-export default EditPopupModal;
\ No newline at end of file
+export default EditPopupModal;
diff --git a/src/components/Issuance/ConnectionList.tsx b/src/components/Issuance/ConnectionList.tsx
index 60a0493f2..253faba28 100644
--- a/src/components/Issuance/ConnectionList.tsx
+++ b/src/components/Issuance/ConnectionList.tsx
@@ -6,23 +6,20 @@ import {
 	IConnectionListAPIParameter,
 	getConnectionsByOrg,
 } from '../../api/connection';
-import DataTable from '../../commonComponents/datatable';
 import type { TableData } from '../../commonComponents/datatable/interface';
 import { apiStatusCodes } from '../../config/CommonConstant';
 import { AlertComponent } from '../AlertComponent';
 import { dateConversion } from '../../utils/DateConversion';
 import DateTooltip from '../Tooltip';
-import SearchInput from '../SearchInput';
-import { Pagination } from 'flowbite-react';
-import type { IConnectionList } from './interface'
-
+import type { IConnectionList } from './interface';
+import NewDataTable from '../../commonComponents/datatable/SortDataTable';
 
 const initialPageState = {
 	itemPerPage: 10,
 	page: 1,
 	search: '',
 	sortBy: 'createDateTime',
-	sortingOrder: 'DESC',
+	sortingOrder: 'desc',
 	allSearch: '',
 };
 const ConnectionList = (props: {
@@ -37,13 +34,26 @@ const ConnectionList = (props: {
 	const [loading, setLoading] = useState<boolean>(false);
 	const [totalItem, setTotalItem] = useState(0);
 	const [error, setError] = useState<string | null>(null);
+	const [pageInfo, setPageInfo] = useState({
+		totalItem: '',
+		nextPage: '',
+		lastPage: '',
+	});
 
-	//This useEffect is called when the searchText changes
 	useEffect(() => {
-		getConnections(listAPIParameter);
+		let getData: NodeJS.Timeout;
+
+		if (listAPIParameter?.search?.length >= 1) {
+			getData = setTimeout(() => {
+				getConnections(listAPIParameter);
+			}, 1000);
+			return () => clearTimeout(getData);
+		} else {
+			getConnections(listAPIParameter);
+		}
+		return () => clearTimeout(getData);
 	}, [listAPIParameter]);
 
-	//Fetch the connection list against organization id
 	const getConnections = async (apiParameter: IConnectionListAPIParameter) => {
 		setLoading(true);
 		try {
@@ -51,55 +61,58 @@ const ConnectionList = (props: {
 			const { data } = response as AxiosResponse;
 
 			if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+				const { totalItems, nextPage, lastPage } = data.data;
 				setTotalItem(data?.data.totalItems);
-				const connections = data?.data?.data?.map(
-					(ele: IConnectionList) => {
-						const userName = ele?.theirLabel ? ele.theirLabel : 'Not available';
-						const connectionId = ele.connectionId
-							? ele.connectionId
-							: 'Not available';
-						const createdOn = ele?.createDateTime
-							? ele?.createDateTime
-							: 'Not available';
-						return {
-							data: [
-								{
-									data: (
-										<div className="flex items-center" id="issuance_checkbox">
-											<input
-												id="default-checkbox"
-												type="radio"
-												name="connection"
-												onClick={(
-													event: React.MouseEvent<HTMLInputElement>,
-												) => {
-													const inputElement = event.target as HTMLInputElement;
-													selectConnection(
-														userName,
-														connectionId,
-														inputElement.checked,
-													);
-												}}
-												value=""
-												className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-lg dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 cursor-pointer"
-											/>
-										</div>
-									),
-								},
-								{ data: userName },
-								{ data: connectionId },
-								{
-									data: (
-										<DateTooltip date={createdOn} id="issuance_connection_list">
-											{' '}
-											{dateConversion(createdOn)}{' '}
-										</DateTooltip>
-									),
-								},
-							],
-						};
-					},
-				);
+
+				setPageInfo({
+					totalItem: totalItems,
+					nextPage: nextPage,
+					lastPage: lastPage,
+				});
+				const connections = data?.data?.data?.map((ele: IConnectionList) => {
+					const createdOn = ele?.createDateTime
+					? ele?.createDateTime
+					: 'Not available';
+					const connectionId = ele.connectionId
+					? ele.connectionId
+					: 'Not available';
+					const userName = ele?.theirLabel ? ele.theirLabel : 'Not available';
+					return {
+						data: [
+							{
+								data: (
+									<div className="flex items-center" id="issuance_checkbox">
+										<input
+											id="default-checkbox"
+											type="radio"
+											name="connection"
+											onClick={(event: React.MouseEvent<HTMLInputElement>) => {
+												const inputElement = event.target as HTMLInputElement;
+												selectConnection(
+													userName,
+													connectionId,
+													inputElement.checked,
+												);
+											}}
+											value=""
+											className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-lg dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 cursor-pointer"
+										/>
+									</div>
+								),
+							},
+							{ data: userName },
+							{ data: connectionId },
+							{
+								data: (
+									<DateTooltip date={createdOn} id="issuance_connection_list">
+										{' '}
+										{dateConversion(createdOn)}{' '}
+									</DateTooltip>
+								),
+							},
+						],
+					};
+				});
 
 				setConnectionList(connections);
 				setError(null);
@@ -169,6 +182,19 @@ const ConnectionList = (props: {
 		}
 	};
 
+	const searchSortByValue = (value: any) => {
+		setListAPIParameter({
+			...listAPIParameter,
+			page: 1,
+			sortingOrder: value,
+		});
+	};
+
+	const refreshPage = () => {
+		setSelectedConnectionList([]);
+		getConnections(listAPIParameter);
+	};
+
 	useEffect(() => {
 		props.selectConnection(selectedConnectionList);
 	}, [selectedConnectionList]);
@@ -182,9 +208,6 @@ const ConnectionList = (props: {
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Connection List
 				</h1>
-				<div>
-					<SearchInput onInputChange={searchInputChange} />
-				</div>
 			</div>
 			<AlertComponent
 				message={error}
@@ -193,30 +216,29 @@ const ConnectionList = (props: {
 					setError(null);
 				}}
 			/>
-			<div
-				id="issuance_datatable"
-				className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
-			>
-				<DataTable
-					header={header}
-					data={connectionList}
-					loading={loading}
-				></DataTable>
-			</div>
-			{Math.ceil(totalItem / listAPIParameter?.itemPerPage) > 1 && (
-				<div className="flex items-center justify-end my-4">
-					<Pagination
-						currentPage={listAPIParameter?.page}
-						onPageChange={(page) => {
-							setListAPIParameter((prevState) => ({
-								...prevState,
-								page: page,
-							}));
-						}}
-						totalPages={Math.ceil(totalItem / listAPIParameter?.itemPerPage)}
-					/>
-				</div>
-			)}
+			<NewDataTable
+				isHeader={true}
+				isSearch={true}
+				isRefresh={true}
+				isSort={true}
+				onInputChange={searchInputChange}
+				refresh={refreshPage}
+				header={header}
+				data={connectionList}
+				loading={loading}
+				currentPage={listAPIParameter?.page}
+				onPageChange={(page: number) => {
+					setListAPIParameter((prevState) => ({
+						...prevState,
+						page,
+					}));
+				}}
+				totalPages={Math.ceil(totalItem / listAPIParameter?.itemPerPage)}
+				pageInfo={pageInfo}
+				searchSortByValue={searchSortByValue}
+				message={'No Connections'}
+				discription={"You don't have any connections yet"}
+			></NewDataTable>
 		</div>
 	);
 };
diff --git a/src/components/Issuance/History.tsx b/src/components/Issuance/History.tsx
index 27c9859eb..c85863da1 100644
--- a/src/components/Issuance/History.tsx
+++ b/src/components/Issuance/History.tsx
@@ -2,19 +2,15 @@
 import 'react-toastify/dist/ReactToastify.css';
 import type { AxiosResponse } from 'axios';
 import { ChangeEvent, useEffect, useState } from 'react';
-import DataTable from '../../commonComponents/datatable';
 import type { TableData } from '../../commonComponents/datatable/interface';
 import { apiStatusCodes } from '../../config/CommonConstant';
 import { AlertComponent } from '../AlertComponent';
 import { dateConversion } from '../../utils/DateConversion';
 import DateTooltip from '../Tooltip';
 import BreadCrumbs from '../BreadCrumbs';
-import CustomSpinner from '../CustomSpinner';
-import { EmptyListMessage } from '../EmptyListComponent';
 import BackButton from '../../commonComponents/backbutton';
 import { pathRoutes } from '../../config/pathRoutes';
-import SearchInput from '../SearchInput';
-import { Button, Pagination } from 'flowbite-react';
+import { Button } from 'flowbite-react';
 import { getFilesHistory, retryBulkIssuance } from '../../api/BulkIssuance';
 import SOCKET from '../../config/SocketConfig';
 import {
@@ -23,33 +19,38 @@ import {
 } from '../../common/enums';
 import { ToastContainer, toast } from 'react-toastify';
 import React from 'react';
+import SortDataTable from '../../commonComponents/datatable/SortDataTable';
+import type { IConnectionListAPIParameter } from '../../api/connection';
 
 const HistoryBulkIssuance = () => {
 	const initialPageState = {
-		pageNumber: 1,
-		pageSize: 9,
-		total: 0,
+		itemPerPage: 10,
+		page: 1,
+		search: '',
+		sortBy: 'createDateTime',
+		sortingOrder: 'desc',
 	};
-
+	const [listAPIParameter, setListAPIParameter] = useState(initialPageState);
 	const [connectionList, setConnectionList] = useState<TableData[]>([]);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [error, setError] = useState<string | null>(null);
 	const [currentPage, setCurrentPage] = useState(initialPageState);
 	const [failure, setFailure] = useState<string | null>(null);
 	const [success, setSuccess] = useState<string | null>(null);
-
-	const onPageChange = (page: number) => {
-		setCurrentPage({
-			...currentPage,
-			pageNumber: page,
-		});
-	};
-	const [searchText, setSearchText] = useState('');
+	const [totalItem, setTotalItem] = useState(0);
+	const [pageInfo, setPageInfo] = useState({
+		totalItem: '',
+		nextPage: '',
+		lastPage: '',
+	});
 
 	const searchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-		setSearchText(e.target.value);
+		setListAPIParameter({
+			...listAPIParameter,
+			search: e.target.value,
+			page: 1,
+		});
 	};
-
 	const handleRetry = async (fileId: string) => {
 		setSuccess('Issuance process reinitiated. Please wait a moment.');
 		setLoading(true);
@@ -59,7 +60,7 @@ const HistoryBulkIssuance = () => {
 		if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
 			if (data?.data) {
 				setLoading(false);
-				getConnections();
+				getHistory(listAPIParameter);
 			} else {
 				setLoading(false);
 			}
@@ -72,6 +73,14 @@ const HistoryBulkIssuance = () => {
 		}
 	};
 
+	const searchSortByValue = (value: any) => {
+		setListAPIParameter({
+			...listAPIParameter,
+			page: 1,
+			sortingOrder: value,
+		});
+	};
+
 	useEffect(() => {
 		SOCKET.emit('bulk-connection');
 		SOCKET.on('bulk-issuance-process-retry-completed', () => {
@@ -87,7 +96,7 @@ const HistoryBulkIssuance = () => {
 				progress: undefined,
 				theme: 'colored',
 			});
-			getConnections();
+			getHistory(listAPIParameter);
 		});
 
 		SOCKET.on('error-in-bulk-issuance-retry-process', () => {
@@ -103,34 +112,37 @@ const HistoryBulkIssuance = () => {
 				progress: undefined,
 				theme: 'colored',
 			});
-			getConnections();
+			getHistory(listAPIParameter);
 		});
 
 		let getData: NodeJS.Timeout;
 
-		if (searchText.length >= 1) {
+		if (listAPIParameter.search.length >= 1) {
 			getData = setTimeout(() => {
-				getConnections();
+				getHistory(listAPIParameter);
 			}, 1000);
 			return () => clearTimeout(getData);
 		} else {
-			getConnections();
+			getHistory(listAPIParameter);
 		}
 
 		return () => clearTimeout(getData);
-	}, [searchText, currentPage.pageNumber]);
+	}, [listAPIParameter]);
 
-	const getConnections = async () => {
+	const getHistory = async (apiParameter: IConnectionListAPIParameter) => {
 		setLoading(true);
-		const response = await getFilesHistory(
-			currentPage.pageNumber,
-			currentPage.pageSize,
-			searchText,
-		);
+		const response = await getFilesHistory(apiParameter	);
 
 		const { data } = response as AxiosResponse;
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-			const totalPages = data?.data?.lastPage;
+			setTotalItem(data?.data.totalItems);
+			const { totalItems, nextPage, lastPage } = data.data;
+
+			setPageInfo({
+				totalItem: totalItems,
+				nextPage: nextPage,
+				lastPage: lastPage,
+			});
 			const connections = data?.data?.data?.map(
 				(ele: {
 					totalRecords: any;
@@ -255,10 +267,6 @@ const HistoryBulkIssuance = () => {
 				},
 			);
 			setConnectionList(connections);
-			setCurrentPage({
-				...currentPage,
-				total: totalPages,
-			});
 		} else {
 			if (response?.toString()?.toLowerCase() !== 'history not found') {
 				setFailure(response as string);
@@ -277,6 +285,10 @@ const HistoryBulkIssuance = () => {
 		{ columnName: 'Action' },
 	];
 
+	const refreshPage = () => {
+		getHistory(listAPIParameter);
+	};
+
 	return (
 		<div className="p-4" id="connection_list">
 			<ToastContainer />
@@ -284,21 +296,6 @@ const HistoryBulkIssuance = () => {
 				<BreadCrumbs />
 
 				<div className="flex items-center">
-					<button onClick={() => getConnections()}>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="40"
-							height="40"
-							viewBox="0 0 24 24"
-							fill="none"
-							className="mr-3"
-						>
-							<path
-								d="M12 20C9.76667 20 7.875 19.225 6.325 17.675C4.775 16.125 4 14.2333 4 12C4 9.76667 4.775 7.875 6.325 6.325C7.875 4.775 9.76667 4 12 4C13.15 4 14.25 4.2375 15.3 4.7125C16.35 5.1875 17.25 5.86667 18 6.75V4H20V11H13V9H17.2C16.6667 8.06667 15.9375 7.33333 15.0125 6.8C14.0875 6.26667 13.0833 6 12 6C10.3333 6 8.91667 6.58333 7.75 7.75C6.58333 8.91667 6 10.3333 6 12C6 13.6667 6.58333 15.0833 7.75 16.25C8.91667 17.4167 10.3333 18 12 18C13.2833 18 14.4417 17.6333 15.475 16.9C16.5083 16.1667 17.2333 15.2 17.65 14H19.75C19.2833 15.7667 18.3333 17.2083 16.9 18.325C15.4667 19.4417 13.8333 20 12 20Z"
-								fill="#1F4EAD"
-							/>
-						</svg>
-					</button>
 
 					<BackButton path={pathRoutes.organizations.Issuance.connections} />
 				</div>
@@ -313,9 +310,6 @@ const HistoryBulkIssuance = () => {
 					</p>
 					<p className="text-sm text-gray-400">Bulk Issuance History</p>
 				</h1>
-				<div className="flex items-center justify-between mb-4">
-					<SearchInput onInputChange={searchInputChange} />
-				</div>
 			</div>
 
 			{(success || failure) && (
@@ -330,39 +324,29 @@ const HistoryBulkIssuance = () => {
 				/>
 			)}
 
-			{loading ? (
-				<div className="flex items-center justify-center mt-36 mb-4">
-					<CustomSpinner />
-				</div>
-			) : connectionList && connectionList?.length > 0 ? (
-				<div
-					id="issuance_datatable"
-					className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
-				>
-					<DataTable
-						header={header}
-						data={connectionList}
-						loading={loading}
-					></DataTable>
-
-					{currentPage.total > 1 && (
-						<div className="flex items-center justify-end mb-4">
-							<Pagination
-								currentPage={currentPage.pageNumber}
-								onPageChange={onPageChange}
-								totalPages={currentPage.total}
-							/>
-						</div>
-					)}
-				</div>
-			) : (
-				<div className="bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
-					<EmptyListMessage
-						message={'No History Found'}
-						description={"You don't have any history"}
-					/>
-				</div>
-			)}
+			<SortDataTable
+				onInputChange={searchInputChange}
+				refresh={refreshPage}
+				header={header}
+				data={connectionList}
+				loading={loading}
+				currentPage={currentPage?.page}
+				onPageChange={(page: number) => {
+					setCurrentPage((prevState) => ({
+						...prevState,
+						page,
+					}));
+				}}
+				searchSortByValue={searchSortByValue}
+				totalPages={Math.ceil(totalItem / listAPIParameter?.itemPerPage)}
+				pageInfo={pageInfo}
+				isHeader={true}
+				isSearch={true}
+				isRefresh={true}
+				isSort={true}
+				message={'No History'}
+				discription={"You don't have any activities yet"}
+			></SortDataTable>
 		</div>
 	);
 };
diff --git a/src/components/Issuance/HistoryDetails.tsx b/src/components/Issuance/HistoryDetails.tsx
index fbf5b52df..e7b206f71 100644
--- a/src/components/Issuance/HistoryDetails.tsx
+++ b/src/components/Issuance/HistoryDetails.tsx
@@ -1,20 +1,17 @@
 'use client';
 
 import { ChangeEvent, useEffect, useState } from 'react';
-import DataTable from '../../commonComponents/datatable';
 import type { TableData } from '../../commonComponents/datatable/interface';
 import { apiStatusCodes } from '../../config/CommonConstant';
 import { AlertComponent } from '../AlertComponent';
 import BreadCrumbs from '../BreadCrumbs';
-import CustomSpinner from '../CustomSpinner';
-import { EmptyListMessage } from '../EmptyListComponent';
 import { pathRoutes } from '../../config/pathRoutes';
 import BackButton from '../../commonComponents/backbutton';
-import SearchInput from '../SearchInput';
 import { getFilesDataHistory } from '../../api/BulkIssuance';
 import type { AxiosResponse } from 'axios';
-import { Pagination } from 'flowbite-react';
 import { BulkIssuanceStatus } from '../../common/enums';
+import SortDataTable from '../../commonComponents/datatable/SortDataTable';
+import type { IConnectionListAPIParameter } from '../../api/connection';
 
 interface IProps {
 	requestId: string;
@@ -22,76 +19,55 @@ interface IProps {
 
 const HistoryDetails = ({ requestId }: IProps) => {
 	const initialPageState = {
-		pageNumber: 1,
-		pageSize: 10,
-		total: 0,
+		itemPerPage: 10,
+		page: 1,
+		search: '',
+		sortBy: 'createDateTime',
+		sortingOrder: 'desc',
 	};
+
+	const [listAPIParameter, setListAPIParameter] = useState(initialPageState);
 	const [historyList, setHistoryList] = useState<TableData[]>([]);
-	const [options, setOptions] = useState(['All', 'Successful', 'Failed']);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [error, setError] = useState<string | null>(null);
-	const [currentPage, setCurrentPage] = useState(initialPageState);
-	const [searchText, setSearchText] = useState('');
-	const [sortBy, setSortBy] = useState('All');
-
-	const onPageChange = (page: number) => {
-		setCurrentPage({
-			...currentPage,
-			pageNumber: page,
-		});
-	};
-	useEffect(() => {
-		let getData: NodeJS.Timeout;
-
-		if (searchText.length >= 1) {
-			getData = setTimeout(() => {
-				getHistoryDetails();
-			}, 1000);
-			return () => clearTimeout(getData);
-		} else {
-			getHistoryDetails();
-		}
-
-		return () => clearTimeout(getData);
-	}, [searchText, currentPage.pageNumber]);
+	const [totalItem, setTotalItem] = useState(0);
+	const [pageInfo, setPageInfo] = useState({
+		totalItem: '',
+		nextPage: '',
+		lastPage: '',
+	});
 
 	useEffect(() => {
 		let getData: NodeJS.Timeout;
 
-		if (sortBy !== 'All') {
+		if (listAPIParameter.search.length >= 1) {
 			getData = setTimeout(() => {
-				getHistoryDetails();
+				getHistoryDetails(listAPIParameter);
 			}, 1000);
+			return () => clearTimeout(getData);
 		} else {
-			getHistoryDetails();
+			getHistoryDetails(listAPIParameter);
 		}
 
 		return () => clearTimeout(getData);
-	}, [sortBy]);
-
-	const searchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-		setSearchText(e.target.value);
-	};
+	}, [listAPIParameter]);
 
-	const handleFilter = async (e: React.ChangeEvent<HTMLSelectElement>) => {
-		setSortBy(e.target.value);
-	};
-
-	const getHistoryDetails = async () => {
+	const getHistoryDetails = async (apiParameter: IConnectionListAPIParameter) => {
 		setLoading(true);
-		const response = await getFilesDataHistory(
-			requestId,
-			currentPage.pageNumber,
-			currentPage.pageSize,
-			searchText,
-			sortBy,
-		);
+		const response = await getFilesDataHistory(requestId, apiParameter.itemPerPage, apiParameter.page, apiParameter.search, apiParameter.sortBy, apiParameter.sortingOrder);
 
 		const { data } = response as AxiosResponse;
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
 			const totalPages = data?.data?.lastPage;
+			setTotalItem(data?.data.totalItems);
+			const { totalItems, nextPage, lastPage } = data.data;
 
+			setPageInfo({
+				totalItem: totalItems,
+				nextPage: nextPage,
+				lastPage: lastPage,
+			});
 			const historyData = data?.data?.data?.map(
 				(history: {
 					isError: any;
@@ -116,13 +92,17 @@ const HistoryDetails = ({ requestId }: IProps) => {
 												: 'bg-red-100 text-red-800 border border-red-100 dark:border-red-400 dark:bg-gray-700 dark:text-red-400'
 										}	text-md font-medium sm:mr-0 md:mr-2 min-[320]:px-3 sm:px-3 lg:px-3 py-0.5 rounded-md flex justify-center max-w-[120px]`}
 									>
-										{history?.isError === false ? BulkIssuanceStatus.successful : BulkIssuanceStatus.failed}
+										{history?.isError === false
+											? BulkIssuanceStatus.successful
+											: BulkIssuanceStatus.failed}
 									</p>
 								),
 							},
 							{
 								data: history?.error
-									? history?.error === 'Http Exception' ? 'Credential Issuance failed due to error in Wallet Agent' : history?.error?.replace(/[[\]"{},]/g, ' ')
+									? history?.error === 'Http Exception'
+										? 'Credential Issuance failed due to error in Wallet Agent'
+										: history?.error?.replace(/[[\]"{},]/g, ' ')
 									: '-',
 							},
 						],
@@ -130,16 +110,31 @@ const HistoryDetails = ({ requestId }: IProps) => {
 				},
 			);
 			setHistoryList(historyData);
-			setCurrentPage({
-				...currentPage,
-				total: totalPages,
-			});
 		} else {
 			setError(response as string);
 		}
 		setLoading(false);
 	};
 
+	const searchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setListAPIParameter({
+			...listAPIParameter,
+			search: e.target.value,
+			page: 1,
+		});
+	};
+
+	const searchSortByValue = (value: any) => {
+		setListAPIParameter({
+			...listAPIParameter,
+			page: 1,
+			sortingOrder: value,
+		});
+	};
+
+	const refreshPage = () => {
+		getHistoryDetails(listAPIParameter);
+	};
 	const header = [
 		{ columnName: 'User' },
 		{ columnName: 'Status' },
@@ -163,24 +158,6 @@ const HistoryDetails = ({ requestId }: IProps) => {
 					<p className="text-sm text-gray-400">Bulk Issuance History Details</p>
 				</h1>
 			</div>
-			<div
-				id="schemasSearchInput"
-				className="mb-2 flex space-x-2 items-end justify-between"
-			>
-				<SearchInput onInputChange={searchInputChange} />
-
-				<select
-					onChange={handleFilter}
-					id="schamfilter"
-					className="bg-gray-50 h-select-input border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 h-11"
-				>
-					{options.map((opt) => (
-						<option key={opt} className="" value={opt}>
-							{opt}
-						</option>
-					))}
-				</select>
-			</div>
 			<AlertComponent
 				message={error}
 				type={'failure'}
@@ -189,38 +166,29 @@ const HistoryDetails = ({ requestId }: IProps) => {
 				}}
 			/>
 
-			{loading ? (
-				<div className="flex items-center justify-center mt-36 mb-4">
-					<CustomSpinner />
-				</div>
-			) : historyList && historyList?.length > 0 ? (
-				<div
-					id="issuance_datatable"
-					className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
-				>
-					<DataTable
-						header={header}
-						data={historyList}
-						loading={loading}
-					></DataTable>
-					{currentPage.total > 1 && (
-						<div className="flex items-center justify-end mb-4">
-							<Pagination
-								currentPage={currentPage.pageNumber}
-								onPageChange={onPageChange}
-								totalPages={currentPage.total}
-							/>
-						</div>
-					)}
-				</div>
-			) : (
-				<div className="bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
-					<EmptyListMessage
-						message={'No Records Found'}
-						description={"You don't have any data"}
-					/>
-				</div>
-			)}
+			<SortDataTable
+				onInputChange={searchInputChange}
+				refresh={refreshPage}
+				header={header}
+				data={historyList}
+				loading={loading}
+				currentPage={listAPIParameter?.page}
+				onPageChange={(page: number) => {
+					setListAPIParameter((prevState) => ({
+						...prevState,
+						page,
+					}));
+				}}
+				searchSortByValue={searchSortByValue}
+				totalPages={Math.ceil(totalItem / listAPIParameter?.itemPerPage)}
+				pageInfo={pageInfo}
+				isHeader={true}
+				isSearch={true}
+				isRefresh={true}
+				isSort={true}
+				message={'No History'}
+				discription={"You don't have any activities yet"}
+			></SortDataTable>
 		</div>
 	);
 };
diff --git a/src/components/Issuance/IssuedCrdentials.tsx b/src/components/Issuance/IssuedCrdentials.tsx
index bba369239..e605abe66 100644
--- a/src/components/Issuance/IssuedCrdentials.tsx
+++ b/src/components/Issuance/IssuedCrdentials.tsx
@@ -27,7 +27,7 @@ const initialPageState = {
 	page: 1,
 	search: '',
 	sortBy: 'createDateTime',
-	sortingOrder: 'DESC',
+	sortingOrder: 'desc',
 	allSearch: '',
 };
 
diff --git a/src/components/Profile/AddPasskey.tsx b/src/components/Profile/AddPasskey.tsx
index 184ee14e5..8485daaf8 100644
--- a/src/components/Profile/AddPasskey.tsx
+++ b/src/components/Profile/AddPasskey.tsx
@@ -58,7 +58,13 @@ const AddPasskey = ({ responseMessages }: { responseMessages: (value: IResponseM
 
 	const addDevice = async (): Promise<void> => {
 		try {
-			setOpenModel(true);
+			if(deviceList?.length > 0){
+				registerWithPasskey(true)
+				setOpenModel(false);
+			}else{
+				setOpenModel(true);
+
+			}
 		} catch (error) {
 			setFidoLoader(false);
 		}
diff --git a/src/components/Profile/DisplayUser.tsx b/src/components/Profile/DisplayUser.tsx
index b8af4dc59..120d9848d 100644
--- a/src/components/Profile/DisplayUser.tsx
+++ b/src/components/Profile/DisplayUser.tsx
@@ -27,16 +27,16 @@ const DisplayUser = () => {
                 userObj &&
                 <>
                     <p
-                        className="text-sm font-medium text-gray-900 truncate dark:text-gray-300"
+                        className="text-xl font-medium text-gray-900 truncate dark:text-gray-300 mb-1"
                         role="none"
                     >
                         {userObj['firstName']}
                     </p>
-                    <p className="text-sm text-gray-900 dark:text-white" role="none">
+                    <p className="text-sm text-gray-900 dark:text-white mb-1" role="none">
                         {userObj['email']}
                     </p>
                     <p
-                        className="text-sm font-medium text-gray-900 truncate dark:text-gray-300"
+                        className="text-base font-medium text-gray-900 truncate dark:text-gray-300"
                         role="none"
                     >
                         {TextTittlecase(userObj['roles'])}
@@ -49,4 +49,4 @@ const DisplayUser = () => {
     )
 }
 
-export default DisplayUser
\ No newline at end of file
+export default DisplayUser
diff --git a/src/components/Resources/Schema/SchemasList.tsx b/src/components/Resources/Schema/SchemasList.tsx
index f03b7073f..48e89bd15 100644
--- a/src/components/Resources/Schema/SchemasList.tsx
+++ b/src/components/Resources/Schema/SchemasList.tsx
@@ -36,7 +36,7 @@ const SchemaList = (props: {
 		page: 1,
 		search: '',
 		sortBy: 'id',
-		sortingOrder: 'DESC',
+		sortingOrder: 'desc',
 		allSearch: '',
 	});
 	const [walletStatus, setWalletStatus] = useState(false);
diff --git a/src/components/SignOutButton/index.tsx b/src/components/SignOutButton/index.tsx
index 91172287c..13e1ba46f 100644
--- a/src/components/SignOutButton/index.tsx
+++ b/src/components/SignOutButton/index.tsx
@@ -1,34 +1,57 @@
-import { removeFromLocalStorage } from "../../api/Auth"
-import { storageKeys } from "../../config/CommonConstant"
+import { removeFromLocalStorage } from '../../api/Auth';
+import { storageKeys } from '../../config/CommonConstant';
 
 const SignOutButton = () => {
+	const signOut = async () => {
+		await removeFromLocalStorage(storageKeys.TOKEN);
+		await removeFromLocalStorage(storageKeys.USER_EMAIL);
+		await removeFromLocalStorage(storageKeys.ORG_ID);
+		await removeFromLocalStorage(storageKeys.ORG_ROLES);
+		await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID);
+		await removeFromLocalStorage(storageKeys.ECOSYSTEM_ROLE);
+		await removeFromLocalStorage(storageKeys.USER_PROFILE);
 
-    const signOut = async () => {
+		const response = await fetch('/api/auth/signout', {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		});
 
-        await removeFromLocalStorage(storageKeys.TOKEN)
-        await removeFromLocalStorage(storageKeys.USER_EMAIL)
-        await removeFromLocalStorage(storageKeys.ORG_ID)
-        await removeFromLocalStorage(storageKeys.ORG_ROLES)
-        await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID)
-        await removeFromLocalStorage(storageKeys.ECOSYSTEM_ROLE)
-        await removeFromLocalStorage(storageKeys.USER_PROFILE)
+		if (response.redirected) {
+			window.location.assign(response.url);
+		}
+	};
+	return (
+		<button
+			onClick={signOut}
+			className="w-full text-start cursor-pointer block px-4 py-2 my-2 text-sm text-gray-700 dark:text-white hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white flex space-x-2"
+			role="menuitem"
+		>
+			{' '}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="20"
+				viewBox="0 0 16 20"
+				fill="text-gray-700 dark:text-white"
+			>
+				<path
+					d="M10.4912 16.3968C10.377 16.3974 10.2636 16.3748 10.1581 16.3303C10.0525 16.2858 9.95675 16.2204 9.87649 16.1379C9.71364 15.9725 9.62213 15.7482 9.62213 15.5143C9.62213 15.2805 9.71364 15.0561 9.87649 14.8907L13.9011 10.8078L9.87649 6.72488C9.79101 6.64409 9.72246 6.54666 9.67491 6.43841C9.62735 6.33016 9.60184 6.2133 9.59975 6.09481C9.59766 5.97633 9.61923 5.85863 9.66296 5.74874C9.70669 5.63886 9.77175 5.53904 9.85445 5.45524C9.93703 5.37144 10.0354 5.30539 10.1437 5.26101C10.252 5.21662 10.368 5.19482 10.4848 5.19692C10.6016 5.199 10.7168 5.22494 10.8235 5.27317C10.9302 5.3214 11.0262 5.39094 11.1059 5.47765L15.7453 10.1842C15.9082 10.3496 15.9996 10.574 15.9996 10.8078C15.9996 11.0417 15.9082 11.266 15.7453 11.4314L11.1059 16.1379C11.0257 16.2204 10.9298 16.2858 10.8243 16.3303C10.7188 16.3748 10.6054 16.3974 10.4912 16.3968Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M7.07692 19.5973H3.38462C2.95783 19.6135 2.53166 19.5545 2.13047 19.4237C1.72929 19.293 1.36098 19.0931 1.04662 18.8353C0.732246 18.5775 0.477994 18.267 0.298412 17.9216C0.118818 17.5762 0.0174154 17.2026 0 16.8223V3.17754C0.0174154 2.79717 0.118818 2.42359 0.298412 2.07818C0.477994 1.73277 0.732246 1.42231 1.04662 1.16456C1.36098 0.906815 1.72929 0.706838 2.13047 0.576083C2.53166 0.445318 2.95783 0.38634 3.38462 0.402519H7.07692C7.32174 0.402519 7.55653 0.489191 7.72964 0.643463C7.90274 0.797745 8 1.00698 8 1.22515C8 1.44334 7.90274 1.65257 7.72964 1.80684C7.55653 1.96113 7.32174 2.04779 7.07692 2.04779H3.38462C3.01916 2.01947 2.65551 2.1176 2.36907 2.32181C2.08262 2.52603 1.89537 2.82068 1.84615 3.14463V16.8223C1.89537 17.1463 2.08262 17.4409 2.36907 17.6451C2.65551 17.8493 3.01916 17.9475 3.38462 17.9191H7.07692C7.32174 17.9191 7.55653 18.0059 7.72964 18.1601C7.90274 18.3144 8 18.5236 8 18.7417C8 18.96 7.90274 19.1692 7.72964 19.3235C7.55653 19.4777 7.32174 19.5644 7.07692 19.5644V19.5973Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M15.4244 11.6H6.97639C6.82363 11.6 6.67712 11.5157 6.5691 11.3657C6.46108 11.2157 6.40039 11.0122 6.40039 10.8C6.40039 10.5878 6.46108 10.3843 6.5691 10.2343C6.67712 10.0843 6.82363 10 6.97639 10H15.4244C15.5771 10 15.7237 10.0843 15.8317 10.2343C15.9397 10.3843 16.0004 10.5878 16.0004 10.8C16.0004 11.0122 15.9397 11.2157 15.8317 11.3657C15.7237 11.5157 15.5771 11.6 15.4244 11.6Z"
+					fill="currentColor"
+				/>
+			</svg>
+			<span> Sign out</span>
+		</button>
+	);
+};
 
-        const response = await fetch('/api/auth/signout', {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-            }
-        });
-
-        if (response.redirected) {
-            window.location.assign(response.url);
-        }
-    }
-    return (
-        <button onClick={signOut}
-            className="w-full text-start cursor-pointer block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-            role="menuitem">Sign out</button>
-    )
-}
-
-export default SignOutButton
\ No newline at end of file
+export default SignOutButton;
diff --git a/src/components/User/UserDashBoard.tsx b/src/components/User/UserDashBoard.tsx
index d250c5be6..d808ce07c 100644
--- a/src/components/User/UserDashBoard.tsx
+++ b/src/components/User/UserDashBoard.tsx
@@ -66,7 +66,7 @@ const UserDashBoard = () => {
 		page: 1,
 		search: '',
 		sortBy: 'id',
-		sortingOrder: 'DESC',
+		sortingOrder: 'desc',
 		allSearch: '',
 	});
 	const [ecoCount, setEcoCount] = useState(0);
@@ -531,10 +531,10 @@ const UserDashBoard = () => {
 								<div className="flex text-start items-center">
 									<div>
 										<p className="text-xl font-medium dark:text-white">
-											Wallet lets you create schemas and credential-definitions
+											Wallet lets you create schemas and credential definitions
 										</p>
 										<span className="flex justify-start items-start text-sm font-normal text-gray-500 dark:text-gray-400">
-											Please create wallet for your organisation which would
+											Please create wallet for your organization which would
 											help you to issue and verify credentials for your users.
 										</span>
 									</div>
diff --git a/src/components/Verification/ConnectionList.tsx b/src/components/Verification/ConnectionList.tsx
index f56d9dfc6..134a4fe5b 100644
--- a/src/components/Verification/ConnectionList.tsx
+++ b/src/components/Verification/ConnectionList.tsx
@@ -6,22 +6,20 @@ import {
 	IConnectionListAPIParameter,
 	getConnectionsByOrg,
 } from '../../api/connection';
-import DataTable from '../../commonComponents/datatable';
 import type { TableData } from '../../commonComponents/datatable/interface';
 import { apiStatusCodes } from '../../config/CommonConstant';
 import { AlertComponent } from '../AlertComponent';
 import { dateConversion } from '../../utils/DateConversion';
 import DateTooltip from '../Tooltip';
-import SearchInput from '../SearchInput';
-import { Pagination } from 'flowbite-react';
 import type { IConnectionList } from './interface';
+import SortDataTable from '../../commonComponents/datatable/SortDataTable';
 
 const initialPageState = {
 	itemPerPage: 10,
 	page: 1,
 	search: '',
 	sortBy: 'createDateTime',
-	sortingOrder: 'DESC',
+	sortingOrder: 'desc',
 	allSearch: '',
 };
 
@@ -32,19 +30,32 @@ const ConnectionList = (props: {
 	const [selectedConnectionList, setSelectedConnectionList] = useState<
 		TableData[]
 	>([]);
-
 	const [loading, setLoading] = useState<boolean>(false);
 	const [listAPIParameter, setListAPIParameter] =
 		useState<IConnectionListAPIParameter>(initialPageState);
 	const [totalItem, setTotalItem] = useState(0);
 	const [error, setError] = useState<string | null>(null);
+	const [pageInfo, setPageInfo] = useState({
+		totalItem: '',
+		nextPage: '',
+		lastPage: '',
+	});
 
 	//This useEffect is called when the searchText changes 
 	useEffect(() => {
-		getConnectionsVerification(listAPIParameter);
-	}, [listAPIParameter]);
+		let getData: NodeJS.Timeout;
 
-	//onChange of Search input text
+		if (listAPIParameter?.search?.length >= 1) {
+			getData = setTimeout(() => {
+				getConnectionsVerification(listAPIParameter);
+			}, 1000);
+			return () => clearTimeout(getData);
+		} else {
+			getConnectionsVerification(listAPIParameter);
+		}
+		return () => clearTimeout(getData);
+	}, [listAPIParameter]);
+	
 	const searchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
 		setListAPIParameter({
 			...listAPIParameter,
@@ -62,6 +73,13 @@ const ConnectionList = (props: {
 			const { data } = response as AxiosResponse;
 			if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
 				setTotalItem(data?.data.totalItems);
+				const { totalItems, nextPage, lastPage } = data.data;
+
+				setPageInfo({
+					totalItem: totalItems,
+					nextPage: nextPage,
+					lastPage: lastPage,
+				});
 				const connections = data?.data?.data?.map(
 					(ele: IConnectionList) => {
 						const userName = ele?.theirLabel
@@ -163,6 +181,21 @@ const ConnectionList = (props: {
 		}
 	};
 
+	const searchSortByValue = (value: any) => {
+		setListAPIParameter({
+			...listAPIParameter,
+			page: 1,
+			sortingOrder: value,
+		});
+	};
+
+
+	const refreshPage = () => {
+		setSelectedConnectionList([]);
+		getConnectionsVerification(listAPIParameter);
+	};
+
+
 	useEffect(() => {
 		props.selectConnection(selectedConnectionList);
 	}, [selectedConnectionList]);
@@ -179,9 +212,6 @@ const ConnectionList = (props: {
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Connection List
 				</h1>
-				<div>
-					<SearchInput onInputChange={searchInputChange} />
-				</div>
 			</div>
 			<AlertComponent
 				message={error}
@@ -190,30 +220,30 @@ const ConnectionList = (props: {
 					setError(null);
 				}}
 			/>
-			<div
-				id="verification_datatable"
-				className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
-			>
-				<DataTable
-					header={verification_header}
-					data={connectionList}
-					loading={loading}
-				></DataTable>
-			</div>
-			{Math.ceil(totalItem / listAPIParameter?.itemPerPage) > 1 && (
-				<div className="flex items-center justify-end my-4">
-					<Pagination
-						currentPage={listAPIParameter?.page}
-						onPageChange={(page: number) => {
-							setListAPIParameter((prevState) => ({
-								...prevState,
-								page,
-							}));
-						}}
-						totalPages={Math.ceil(totalItem / listAPIParameter?.itemPerPage)}
-					/>
-				</div>
-			)}
+			<SortDataTable
+				onInputChange={searchInputChange}
+				refresh={refreshPage}
+				header={verification_header}
+				data={connectionList}
+				loading={loading}
+				currentPage={listAPIParameter?.page}
+				onPageChange={(page: number) => {
+					setListAPIParameter((prevState) => ({
+						...prevState,
+						page,
+					}));
+				}}
+				totalPages={Math.ceil(totalItem / listAPIParameter?.itemPerPage)}
+				pageInfo={pageInfo}
+				searchSortByValue={searchSortByValue}
+				isHeader={true}
+				isSearch={true}
+				isRefresh={true}
+				isSort={true}
+				isPagination={true}
+				message={'No Connections'}
+				discription={"You don't have any connections yet"}
+			></SortDataTable>
 		</div>
 	);
 };
diff --git a/src/components/Verification/ProofRequestPopup.tsx b/src/components/Verification/ProofRequestPopup.tsx
index 170225a95..83d0af8c9 100644
--- a/src/components/Verification/ProofRequestPopup.tsx
+++ b/src/components/Verification/ProofRequestPopup.tsx
@@ -14,6 +14,7 @@ const ProofRequest = (props: IProofRrquestDetails) => {
 	const [navigation, setNavigation] = useState(false);
 	const [succesMsg, setSuccesMsg] = useState('');
 	const [error, setError] = useState('');
+	
 	const handleConfirmClick = async (id: string) => {
 		try {
 			setButtonLoader(true);
@@ -85,7 +86,7 @@ const ProofRequest = (props: IProofRrquestDetails) => {
 								{' '}
 								Verification Details
 							</p>
-							{!props.userData ? (
+							{props.verifyLoading ? (
 								<div className="flex items-center justify-center m-4">
 									<CustomSpinner />
 								</div>
@@ -189,7 +190,7 @@ const ProofRequest = (props: IProofRrquestDetails) => {
 							<p className="text-xl font-semibold text-gray-700 dark:bg-gray-800 dark:text-white flex flex-start pb-2">
 								Verified Details
 							</p>
-							{!props.userData ? (
+							{props.verifyLoading ? (
 								<div className="flex items-center justify-center m-4">
 									<CustomSpinner />
 								</div>
@@ -206,16 +207,17 @@ const ProofRequest = (props: IProofRrquestDetails) => {
 							)}
 						</div>
 						<div className="flex justify-center items-center space-x-4">
-							<button
+							<Button
 								onClick={() => {
 									setButtonLoader(false);
 									props.closeModal(false, '', false);
 								}}
+								disabled={props.verifyLoading}
 								className="py-1 px-2 medium text-center text-white bg-primary-700 hover:!bg-primary-800 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
 								style={{ height: '2.5rem', minWidth: '100px' }}
 							>
 								Close
-							</button>
+							</Button>
 						</div>
 					</div>
 				</Modal>
diff --git a/src/components/Verification/VerificationCredentialList.tsx b/src/components/Verification/VerificationCredentialList.tsx
index 9263aa087..b88477837 100644
--- a/src/components/Verification/VerificationCredentialList.tsx
+++ b/src/components/Verification/VerificationCredentialList.tsx
@@ -36,7 +36,7 @@ const initialPageState = {
 	page: 1,
 	search: '',
 	sortBy: 'createDateTime',
-	sortingOrder: 'DESC',
+	sortingOrder: 'desc',
 	allSearch: '',
 };
 
@@ -47,13 +47,13 @@ const VerificationCredentialList = () => {
 	const [requestId, setRequestId] = useState<string>('');
 	const [errMsg, setErrMsg] = useState<string | null>(null);
 	const [proofReqSuccess, setProofReqSuccess] = useState<string>('');
-	const [verifyLoader, setVerifyloader] = useState<boolean>(false);
 	const [userData, setUserData] = useState(null);
 	const [view, setView] = useState(false);
 	const [walletCreated, setWalletCreated] = useState(false);
 	const [listAPIParameter, setListAPIParameter] =
 		useState<IConnectionListAPIParameter>(initialPageState);
 	const [totalItem, setTotalItem] = useState(0);
+	const [verifyLoading, setVerifyLoading]= useState(true)
 	const [pageInfo, setPageInfo] = useState({
 		totalItem: '',
 		nextPage: '',
@@ -62,14 +62,17 @@ const VerificationCredentialList = () => {
 
 	const getProofPresentationData = async (proofId: string) => {
 		try {
+			setVerifyLoading(true)
 			const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
 			const response = await getVerifiedProofDetails(proofId, orgId);
 
 			const { data } = response as AxiosResponse;
 			if (data?.statusCode === apiStatusCodes?.API_STATUS_SUCCESS) {
 				setUserData(data?.data);
+				setVerifyLoading(false)
 			} else {
 				setErrMsg(response as string);
+				setVerifyLoading(false)
 			}
 		} catch (error) {
 			throw error;
@@ -104,8 +107,6 @@ const VerificationCredentialList = () => {
 				const { data } = response as AxiosResponse;
 				if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
 					const { totalItems, nextPage, lastPage } = data.data;
-					console.log('data.data', data.data);
-
 					setPageInfo({
 						totalItem: totalItems,
 						nextPage: nextPage,
@@ -263,14 +264,14 @@ const VerificationCredentialList = () => {
 			if (data?.statusCode === apiStatusCodes?.API_STATUS_CREATED) {
 				setOpenModal(false);
 				setProofReqSuccess(data.message);
-				setVerifyloader(false);
+				setVerifyLoading(false);
 				setTimeout(() => {
 					getproofRequestList(listAPIParameter);
 				}, 2000);
 			} else {
 				setOpenModal(false);
 				setErrMsg(response as string);
-				setVerifyloader(false);
+				setVerifyLoading(false);
 			}
 			setTimeout(() => {
 				setProofReqSuccess('');
@@ -278,7 +279,7 @@ const VerificationCredentialList = () => {
 			}, 4000);
 		} catch (error) {
 			setOpenModal(false);
-			setVerifyloader(false);
+			setVerifyLoading(false);
 			console.error('An error occurred:', error);
 			setErrMsg('An error occurred while processing the presentation.');
 		}
@@ -437,11 +438,12 @@ const VerificationCredentialList = () => {
 					{userData && (
 						<ProofRequest
 							openModal={openModal}
-							closeModal={() => openProofRequestModel(false, '', '')}
+							closeModal={() => {openProofRequestModel(false, '', '')}}
 							onSucess={requestProof}
 							requestId={requestId}
 							userData={userData}
 							view={view}
+							verifyLoading={verifyLoading}
 						/>
 					)}
 				</div>
diff --git a/src/components/Verification/interface.ts b/src/components/Verification/interface.ts
index a49940da6..7bb0d1ea1 100644
--- a/src/components/Verification/interface.ts
+++ b/src/components/Verification/interface.ts
@@ -38,6 +38,7 @@ export interface SchemaDetails {
 }
   
 export interface IProofRrquestDetails {
+	verifyLoading: boolean;
 	openModal: boolean;
 	closeModal: (flag: boolean, id: string, state: boolean) => void;
 	onSucess: (verifyPresentationId: string) => void;
diff --git a/src/components/organization/Dashboard.tsx b/src/components/organization/Dashboard.tsx
index 89ab9a7e6..f8d45615a 100644
--- a/src/components/organization/Dashboard.tsx
+++ b/src/components/organization/Dashboard.tsx
@@ -2,7 +2,6 @@ import type { OrgDashboard, Organisation } from './interfaces';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
 import { getOrgDashboard, getOrganizationById } from '../../api/organization';
 import { useEffect, useState } from 'react';
-
 import { Alert } from 'flowbite-react';
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../BreadCrumbs';
@@ -19,28 +18,22 @@ import { getFromLocalStorage } from '../../api/Auth';
 import { getOrganizationById } from '../../api/organization';
 import { pathRoutes } from '../../config/pathRoutes';
 import DashboardCard from '../../commonComponents/DashboardCard';
+import { AlertComponent } from '../AlertComponent';
+import React from 'react';
 
 const Dashboard = () => {
 	const [orgData, setOrgData] = useState<Organisation | null>(null);
-
 	const [walletStatus, setWalletStatus] = useState<boolean>(false);
-
 	const [orgDashboard, setOrgDashboard] = useState<OrgDashboard | null>(null);
 	const [success, setSuccess] = useState<string | null>(null);
 	const [failure, setFailure] = useState<string | null>(null);
-
 	const [loading, setLoading] = useState<boolean | null>(true);
 	const [userRoles, setUserRoles] = useState<string[]>([]);
-
+	const [orgSuccess, setOrgSuccess] = useState<string | null>(null);
 	const [openModal, setOpenModal] = useState<boolean>(false);
-	const props = { openModal, setOpenModal };
 
 	const EditOrgDetails = () => {
-		props.setOpenModal(true);
-	};
-
-	const updateOrganizationData = (updatedData: Organisation) => {
-		setOrgData(updatedData);
+		setOpenModal(true);
 	};
 
 	const getUserRoles = async () => {
@@ -55,11 +48,8 @@ const Dashboard = () => {
 
 	const fetchOrganizationDetails = async () => {
 		setLoading(true);
-
 		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-
 		const response = await getOrganizationById(orgId as string);
-
 		const { data } = response as AxiosResponse;
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
@@ -75,11 +65,8 @@ const Dashboard = () => {
 
 	const fetchOrganizationDashboard = async () => {
 		setLoading(true);
-
 		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-
 		const response = await getOrgDashboard(orgId as string);
-
 		const { data } = response as AxiosResponse;
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
@@ -95,6 +82,11 @@ const Dashboard = () => {
 		fetchOrganizationDashboard();
 	}, []);
 
+	const handleEditModalClose = () => {
+		setOpenModal(false);
+		fetchOrganizationDetails();
+	};
+
 	useEffect(() => {
 		setTimeout(() => {
 			setSuccess(null);
@@ -102,10 +94,6 @@ const Dashboard = () => {
 		}, 3000);
 	}, [success !== null, failure !== null]);
 
-	const redirectDashboardInvitations = () => {
-		window.location.href = '/organizations/invitations';
-	};
-
 	const setWalletSpinupStatus = (status: boolean) => {
 		setSuccess('Wallet created successfully');
 		fetchOrganizationDetails();
@@ -120,6 +108,19 @@ const Dashboard = () => {
 			<div className="col-span-full xl:mb-2">
 				<BreadCrumbs />
 			</div>
+			<div className="w-full">
+				{orgSuccess && (
+					<div className="w-full" role="alert">
+						<AlertComponent
+							message={orgSuccess}
+							type={'success'}
+							onAlertClose={() => {
+								setOrgSuccess(null);
+							}}
+						/>
+					</div>
+				)}
+			</div>
 			<div className="mt-4 w-full">
 				<div className="flex flex-wrap w-full items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex-row sm:items-center sm:w-full sm:p-6 dark:border-gray-700 dark:bg-gray-800">
 					<div className="relative w-full">
@@ -181,13 +182,13 @@ const Dashboard = () => {
 					</div>
 
 					<EditOrgdetailsModal
-						orgData={orgData}
 						openModal={openModal}
-						setOpenModal={props.setOpenModal}
-						onEditSucess={fetchOrganizationDetails}
+						setOpenModal={setOpenModal}
+						onEditSucess={handleEditModalClose}
 						setMessage={(message: string) => {
-							throw new Error('Function not implemented.');
+							setOrgSuccess(message);
 						}}
+						orgData={orgData}
 					/>
 				</div>
 
diff --git a/src/components/organization/EditOrgdetailsModal.tsx b/src/components/organization/EditOrgdetailsModal.tsx
index b7d528f99..24aba5a4b 100644
--- a/src/components/organization/EditOrgdetailsModal.tsx
+++ b/src/components/organization/EditOrgdetailsModal.tsx
@@ -2,36 +2,16 @@ import * as yup from 'yup';
 import { Avatar, Button, Label, Modal } from 'flowbite-react';
 import { Field, Form, Formik, FormikHelpers } from 'formik';
 import {
-	IMG_MAX_HEIGHT,
-	IMG_MAX_WIDTH,
 	apiStatusCodes,
-	imageSizeAccepted,
 } from '../../config/CommonConstant';
-import { calculateSize, dataURItoBlob } from '../../utils/CompressImage';
 import React, { useEffect, useState } from 'react';
 import { AlertComponent } from '../AlertComponent';
 import type { AxiosResponse } from 'axios';
 import { updateOrganization } from '../../api/organization';
-import type { Organisation } from './interfaces';
+import type { EditOrgdetailsModalProps, ILogoImage, Organisation, Values } from './interfaces';
 import defaultUserIcon from '../../../public/images/person_FILL1_wght400_GRAD0_opsz24.svg';
-
-interface Values {
-	website: any;
-	name: string;
-	description: string;
-}
-interface ILogoImage {
-	logoFile: string | File;
-	imagePreviewUrl: string | ArrayBuffer | null | File;
-	fileName: string;
-}
-interface EditOrgdetailsModalProps {
-	openModal: boolean;
-	setMessage: (message: string) => void;
-	setOpenModal: (flag: boolean) => void;
-	onEditSucess?: () => void;
-	orgData: Organisation | null;
-}
+import { processImage } from '../../utils/processImage';
+import FormikErrorMessage from '../../commonComponents/formikerror/index'
 
 const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
 	const [logoImage, setLogoImage] = useState<ILogoImage>({
@@ -48,7 +28,7 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
 	});
 
 	useEffect(() => {
-		if (props.orgData) {
+		if (props.openModal && props.orgData) {
 			setInitialOrgData({
 				name: props.orgData.name ?? '',
 				description: props.orgData.description ?? '',
@@ -63,14 +43,14 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
 
 			setIsPublic(props?.orgData?.publicProfile);
 		}
-	}, [props]);
+	}, [props.orgData, props.openModal]);
 
 	const [erroMsg, setErrMsg] = useState<string | null>(null);
 
 	const [imgError, setImgError] = useState('');
 
 	useEffect(() => {
-		if (props.openModal === false) {
+		if (!props.openModal) {
 			setInitialOrgData({
 				name: '',
 				description: '',
@@ -85,86 +65,20 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
 		}
 	}, [props.openModal]);
 
-	const ProcessImg = (e: any): string | undefined => {
-		const file = e?.target.files[0];
-		if (!file) {
-			return;
-		}
-
-		const reader = new FileReader();
-		reader.readAsDataURL(file);
-
-		reader.onload = (event): void => {
-			const imgElement = document.createElement('img');
-			if (imgElement) {
-				imgElement.src =
-					typeof event?.target?.result === 'string' ? event.target.result : '';
-				imgElement.onload = (e): void => {
-					let fileUpdated: File | string = file;
-					let srcEncoded = '';
-					const canvas = document.createElement('canvas');
-
-					const { width, height, ev } = calculateSize(
-						imgElement,
-						IMG_MAX_WIDTH,
-						IMG_MAX_HEIGHT,
-					);
-					canvas.width = width;
-					canvas.height = height;
-
-					const ctx = canvas.getContext('2d');
-					if (ctx && e?.target) {
-						ctx.imageSmoothingEnabled = true;
-						ctx.imageSmoothingQuality = 'high';
-						ctx.drawImage(ev, 0, 0, canvas.width, canvas.height);
-						srcEncoded = ctx.canvas.toDataURL(ev, file.type);
-						const blob = dataURItoBlob(srcEncoded, file.type);
-						fileUpdated = new File([blob], file.name, {
-							type: file.type,
-							lastModified: new Date().getTime(),
-						});
-						setLogoImage({
-							logoFile: fileUpdated,
-							imagePreviewUrl: srcEncoded,
-							fileName: file.name,
-						});
-					}
-				};
-			}
-		};
-	};
-
-	const isEmpty = (object: any): boolean => {
-		for (const property in object) {
-			return false;
-		}
-		return true;
-	};
 	const handleImageChange = (event: any): void => {
-		setImgError('');
-		const reader = new FileReader();
-		const file = event?.target?.files;
-
-		const fieSize = Number((file[0]?.size / 1024 / 1024)?.toFixed(2));
-		const extension = file[0]?.name
-			?.substring(file[0]?.name?.lastIndexOf('.') + 1)
-			?.toLowerCase();
-		if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
-			if (fieSize <= imageSizeAccepted) {
-				reader.onloadend = (): void => {
-					ProcessImg(event);
-					isEmpty(reader.result);
-				};
-				reader.readAsDataURL(file[0]);
-				event.preventDefault();
-			} else {
-				setImgError('Please check image size');
-			}
-		} else {
-			setImgError('Invalid image type');
-		}
-	};
-
+    setImgError('');
+    processImage(event, (result, error) => {
+      if (result) {
+        setLogoImage({
+          logoFile: '',
+          imagePreviewUrl: result,
+          fileName: event.target.files[0].name,
+        });
+      } else {
+        setImgError(error || 'An error occurred while processing the image.');
+      }
+    });
+  };
 	const submitUpdateOrganization = async (values: Values) => {
 		setLoading(true);
 
@@ -176,22 +90,26 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
 			website: values.website,
 			isPublic: isPublic,
 		};
-
-		const resUpdateOrg = await updateOrganization(
-			orgData,
-			orgData.orgId?.toString() as string,
-		);
-
-		const { data } = resUpdateOrg as AxiosResponse;
-		setLoading(false);
-
-		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-			if (props?.onEditSucess) {
-				props?.onEditSucess();
+		try {
+			const response = await updateOrganization(
+				orgData,
+				orgData.orgId?.toString() as string,
+			);
+			const { data } = response as AxiosResponse;
+			if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+				if (props?.onEditSucess) {
+					props?.onEditSucess();
+				}
+				props.setOpenModal(false);
+				props.setMessage(data?.message);
+				setLoading(false);
+			} else {
+				setErrMsg(response as string);
+				setLoading(false);
 			}
-			props.setOpenModal(false);
-		} else {
-			setErrMsg(resUpdateOrg as string);
+		} catch (error) {
+			console.error('An error occurred:', error);
+			setLoading(false);
 		}
 	};
 
@@ -204,6 +122,11 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
 					imagePreviewUrl: '',
 					fileName: '',
 				});
+				setInitialOrgData({
+					name: props?.orgData?.name ?? '',
+					description: props?.orgData?.description ?? '',
+					website: props?.orgData?.website ?? '',
+				});
 				props.setOpenModal(false);
 			}}
 		>
@@ -239,18 +162,16 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
 						{ resetForm }: FormikHelpers<Values>,
 					) => {
 						submitUpdateOrganization(values);
-						window.location.reload();
 					}}
 				>
 					{(formikHandlers): JSX.Element => (
 						<Form className="space-y-6" onSubmit={formikHandlers.handleSubmit}>
 							<div className="mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
 								<div className="flex flex-col items-center sm:flex-row 2xl:flex-row p-2 gap-0 sm:gap-4">
-									{typeof logoImage.logoFile === 'string' &&
-									props?.orgData?.logoUrl ? (
+									{logoImage?.imagePreviewUrl ? (
 										<img
 											className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
-											src={props?.orgData?.logoUrl}
+											src={logoImage?.imagePreviewUrl}
 											alt="Jese picture"
 										/>
 									) : typeof logoImage.logoFile === 'string' ? (
@@ -321,13 +242,10 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
 										}
 									}}
 								/>
-								{formikHandlers?.errors &&
-									formikHandlers?.errors?.name &&
-									formikHandlers?.touched?.name && (
-										<span className="text-red-500 text-xs">
-											{formikHandlers?.errors?.name}
-										</span>
-									)}
+									<FormikErrorMessage
+									error={formikHandlers?.errors?.name}
+									touched={formikHandlers?.touched?.name}
+								/>
 							</div>
 
 							<div>
@@ -358,14 +276,10 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
 										}
 									}}
 								/>
-								{formikHandlers?.errors &&
-									formikHandlers?.errors?.description &&
-									formikHandlers?.touched &&
-									formikHandlers?.touched?.description && (
-										<span className="text-red-500 text-xs">
-											{formikHandlers?.errors?.description}
-										</span>
-									)}
+									<FormikErrorMessage
+									error={formikHandlers?.errors?.description}
+									touched={formikHandlers?.touched?.description}
+								/>
 							</div>
 							<div>
 								<div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
diff --git a/src/components/organization/interfaces/index.ts b/src/components/organization/interfaces/index.ts
index 0d7cf3e33..799113826 100644
--- a/src/components/organization/interfaces/index.ts
+++ b/src/components/organization/interfaces/index.ts
@@ -188,4 +188,20 @@ export interface IOrgData {
 export interface IExploreOrg {
     orgData: IOrgData
 }
-
+export interface Values {
+	website: any;
+	name: string;
+	description: string;
+}
+export interface ILogoImage {
+	logoFile: string | File;
+	imagePreviewUrl: string | ArrayBuffer | null | File;
+	fileName: string;
+}
+export interface EditOrgdetailsModalProps {
+	openModal: boolean;
+	setMessage: (message: string) => void;
+	setOpenModal: (flag: boolean) => void;
+	onEditSucess?: () => void;
+	orgData: Organisation | null;
+}
diff --git a/src/utils/processImage.ts b/src/utils/processImage.ts
new file mode 100644
index 000000000..3939e193a
--- /dev/null
+++ b/src/utils/processImage.ts
@@ -0,0 +1,29 @@
+import type { ChangeEvent } from 'react';
+import {
+	imageSizeAccepted,
+} from '../config/CommonConstant';
+
+export const processImage = (event: ChangeEvent<HTMLInputElement>, callback:any) => {
+  const reader = new FileReader();
+  const file = event?.target?.files;
+if(file){
+  const fileSize = Number((file[0]?.size / 1024 / 1024)?.toFixed(2));
+  const extension = file[0]?.name
+    ?.substring(file[0]?.name?.lastIndexOf('.') + 1)
+    ?.toLowerCase();
+
+  if (
+    (extension === 'png' || extension === 'jpeg' || extension === 'jpg') &&
+    fileSize <= imageSizeAccepted
+  ) {
+    reader.onloadend = () => {
+      callback(reader.result);
+    };
+    reader.readAsDataURL(file[0]);
+    event.preventDefault();
+  } else {
+    callback(null, extension === 'png' || extension === 'jpeg' || extension === 'jpg' ? 'Please check image size' : 'Invalid image type');
+  }
+}
+
+};