diff --git a/src/components/ConnectionsList/index.tsx b/src/components/ConnectionsList/index.tsx
index da6c8b87f..f0e1b2d6b 100644
--- a/src/components/ConnectionsList/index.tsx
+++ b/src/components/ConnectionsList/index.tsx
@@ -1,60 +1,74 @@
 'use client';
 
-import type { AxiosResponse } from "axios";
-import {  useEffect, useState } from "react";
-import { 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 BreadCrumbs from "../BreadCrumbs";
+import type { AxiosResponse } from 'axios';
+import { useEffect, useState } from 'react';
+import { 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 BreadCrumbs from '../BreadCrumbs';
+import CustomSpinner from '../CustomSpinner';
+import { EmptyListMessage } from '../EmptyListComponent';
 
 const ConnectionList = () => {
-	const [connectionList, setConnectionList] = useState<TableData[]>([])
-	const [loading, setLoading] = useState<boolean>(false)
-	const [error, setError] = useState<string | null>(null)
+	const [connectionList, setConnectionList] = useState<TableData[]>([]);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [error, setError] = useState<string | null>(null);
 
 	useEffect(() => {
-		getConnections()
-	}, [])
+		getConnections();
+	}, []);
 
 	const getConnections = async () => {
-		setLoading(true)
+		setLoading(true);
 		const response = await getConnectionsByOrg();
-		const { data } = response as AxiosResponse
+		const { data } = response as AxiosResponse;
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-			const connections = data?.data?.map((ele: { theirLabel: string; id: string; createdAt: string; }) => {
-				const userName = ele?.theirLabel ? ele.theirLabel : 'Not available';
-				const connectionId = ele.id ? ele.id : 'Not available'
-				const createdOn = ele?.createdAt ? ele?.createdAt : 'Not available'
-				return {
-					data: [
-					{ data: userName }, 
-					{ data: connectionId }, 
-					{data:<DateTooltip date={createdOn} id="issuance_connection_list">  {dateConversion(createdOn)}  </DateTooltip>},
-					]
-				}
-			})
-			setConnectionList(connections)
+			const connections = data?.data?.map(
+				(ele: { theirLabel: string; id: string; createdAt: string }) => {
+					const userName = ele?.theirLabel ? ele.theirLabel : 'Not available';
+					const connectionId = ele.id ? ele.id : 'Not available';
+					const createdOn = ele?.createdAt ? ele?.createdAt : 'Not available';
+					return {
+						data: [
+							{ data: userName },
+							{ data: connectionId },
+							{
+								data: (
+									<DateTooltip date={createdOn} id="issuance_connection_list">
+										{' '}
+										{dateConversion(createdOn)}{' '}
+									</DateTooltip>
+								),
+							},
+						],
+					};
+				},
+			);
+			setConnectionList(connections);
 		} else {
-			setError(response as string)
+			setError(response as string);
 		}
-		setLoading(false)
-	}
+		setLoading(false);
+	};
 
 	const header = [
 		{ columnName: 'User' },
 		{ columnName: 'Connection ID' },
-		{ columnName: 'Created on' }
-	]
+		{ columnName: 'Created on' },
+	];
 
 	return (
-		<div className='p-4' id="issuance_connection_list">
-			<BreadCrumbs/>
-			<div className="flex items-center justify-between mb-4" id="issued-credentials-list">
+		<div className="p-4" id="connection_list">
+			<BreadCrumbs />
+			<div
+				className="flex items-center justify-between mb-4"
+				id="connection-list"
+			>
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Connections
 				</h1>
@@ -63,15 +77,35 @@ const ConnectionList = () => {
 				message={error}
 				type={'failure'}
 				onAlertClose={() => {
-					setError(null)
+					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>
+
+			{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>
+				</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={''}
+						description={"There isn't any data available"}
+					/>
+				</div>
+			)}
 		</div>
-	)
-}
+	);
+};
 
-export default ConnectionList
+export default ConnectionList;