diff --git a/public/images/person_FILL1_wght400_GRAD0_opsz24.svg b/public/images/person_FILL1_wght400_GRAD0_opsz24.svg
new file mode 100644
index 000000000..68ca62f89
--- /dev/null
+++ b/public/images/person_FILL1_wght400_GRAD0_opsz24.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="65" height="65" fill="none" viewBox="0 0 65 65">
+  <path stroke="#6B7280" stroke-width="4.5" d="M32.499 30.249c-2.378 0-4.357-.82-6.06-2.524-1.703-1.703-2.524-3.682-2.524-6.06 0-2.377.82-4.357 2.524-6.06 1.703-1.703 3.682-2.523 6.06-2.523 2.377 0 4.357.82 6.06 2.523 1.703 1.703 2.523 3.683 2.523 6.06 0 2.378-.82 4.358-2.523 6.06-1.703 1.703-3.683 2.524-6.06 2.524ZM13.082 51.915v-5.333a5.69 5.69 0 0 1 .852-3.054c.579-.942 1.322-1.634 2.252-2.118 2.65-1.324 5.33-2.31 8.04-2.967a35.01 35.01 0 0 1 8.273-.986c2.8 0 5.557.329 8.272.986 2.71.657 5.39 1.643 8.04 2.967a5.65 5.65 0 0 1 2.252 2.118 5.68 5.68 0 0 1 .852 3.054v5.333H13.082Z"/>
+</svg>
diff --git a/src/app/SideBar.astro b/src/app/SideBar.astro
index 1ca03c146..6fa2ffe24 100644
--- a/src/app/SideBar.astro
+++ b/src/app/SideBar.astro
@@ -59,17 +59,18 @@ import { pathRoutes } from '../config/pathRoutes';
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								class="flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-								width="17"
-								height="17"
+								class="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+								width="18"
+								height="18"
 								fill="none"
-								viewBox="0 0 25 25"
+								viewBox="0 0 18 18"
 							>
 								<path
 									fill="currentColor"
-									d="M16.28 25c1.566 0 2.91-.082 4.033-.332 1.138-.253 2.124-.693 2.893-1.462.769-.77 1.21-1.755 1.462-2.893.25-1.123.332-2.467.332-4.033V12.5a2.5 2.5 0 0 0-2.5-2.5h-10a2.5 2.5 0 0 0-2.5 2.5v10a2.5 2.5 0 0 0 2.5 2.5h3.78ZM0 16.28c0 1.566.082 2.91.332 4.033.253 1.138.693 2.124 1.462 2.893.77.769 1.755 1.21 2.892 1.462.11.024.219.047.329.068 1.355.262 2.485-.885 2.485-2.266V12.5A2.5 2.5 0 0 0 5 10H2.5A2.5 2.5 0 0 0 0 12.5v3.78ZM8.72 0C7.153 0 5.81.082 4.686.332c-1.137.253-2.123.693-2.892 1.462-.77.77-1.21 1.755-1.462 2.892l-.06.281C.006 6.341 1.174 7.5 2.573 7.5H22.47c1.38 0 2.528-1.13 2.266-2.485a11.98 11.98 0 0 0-.068-.329c-.253-1.137-.694-2.123-1.463-2.892-.769-.769-1.755-1.21-2.892-1.462C19.19.082 17.846 0 16.279 0H8.72Z"
-								></path></svg
-							>
+									d="M2 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 0 16V2C0 1.45.196.98.588.587A1.926 1.926 0 0 1 2 0h14c.55 0 1.02.196 1.413.588C17.803.979 18 1.45 18 2v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 18H2Zm5-2v-6H2v6h5Zm2 0h7v-6H9v6ZM2 8h14V2H2v6Z"
+								></path>
+							</svg>
+
 							<span class="ml-3" sidebar-toggle-item>Dashboard</span>
 						</a>
 					</li>
@@ -80,17 +81,21 @@ import { pathRoutes } from '../config/pathRoutes';
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								class="flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-								width="17"
-								height="17"
+								class="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+								width="22"
+								height="20"
 								fill="none"
-								viewBox="0 0 25 25"
+								viewBox="0 0 22 20"
 							>
 								<path
-									fill="currentColor"
-									d="M19.898 14.073h3.54c.854 0 1.562.707 1.562 1.561v7.805c0 .854-.708 1.561-1.563 1.561h-7.812a1.572 1.572 0 0 1-1.563-1.561v-7.805c0-.854.708-1.56 1.563-1.56h2.759v-.928H6.59v.927h2.784c.855 0 1.563.707 1.563 1.561v7.805c0 .854-.708 1.561-1.563 1.561H1.562A1.572 1.572 0 0 1 0 23.439v-7.805c0-.854.708-1.56 1.563-1.56h3.515V12.61c0-.537.684-.805 1.294-.805h5.371v-.878h-3.37a1.572 1.572 0 0 1-1.562-1.561V1.56A1.572 1.572 0 0 1 8.373 0h7.813c.855 0 1.562.707 1.562 1.561v7.805a1.57 1.57 0 0 1-1.562 1.56h-2.881v.903c2.026 0 3.272-.024 5.297-.024.61 0 1.294.244 1.294.805v1.463h.002Z"
-								></path></svg
-							>
+									stroke="currentColor"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="1.8"
+									d="M1.25 19h19.5m-18-18v18m10.5-18v18m6-13.5V19M5.75 4.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M5.75 19v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V19M2 1h12m-.75 4.5H20m-3.75 3.75h.008v.008h-.008V9.25Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z"
+								></path>
+							</svg>
+
 							<span class="ml-3" sidebar-toggle-item>Organizations</span>
 						</a>
 					</li>
@@ -134,31 +139,18 @@ import { pathRoutes } from '../config/pathRoutes';
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								class="flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-								width="18"
-								height="17"
+								class="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+								width="22"
+								height="16"
 								fill="none"
-								viewBox="0 0 28 28"
+								viewBox="0 0 22 16"
 							>
 								<path
 									fill="currentColor"
-									fill-rule="evenodd"
-									d="M4.4 6.8a6.8 6.8 0 1 1 14.399 0 6.8 6.8 0 0 1-14.4 0Z"
-									clip-rule="evenodd"></path>
-								<path
-									fill="currentColor"
-									d="M18.78 11.303a.316.316 0 0 0 .084.402 5.6 5.6 0 1 0 0-9.008.316.316 0 0 0-.083.403 8.76 8.76 0 0 1 1.012 4.102 8.76 8.76 0 0 1-1.012 4.1Z"
+									d="M0 16v-2.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 1.6 10.55a14.844 14.844 0 0 1 3.15-1.163A13.759 13.759 0 0 1 8 9c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.162 1.087.292.476.438.996.438 1.563V16H0Zm18 0v-3c0-.733-.204-1.438-.613-2.113-.408-.675-.987-1.254-1.737-1.737a12.513 12.513 0 0 1 4.5 1.4c.6.333 1.058.704 1.375 1.112.317.409.475.855.475 1.338v3h-4ZM8 8c-1.1 0-2.042-.392-2.825-1.175C4.392 6.042 4 5.1 4 4s.392-2.042 1.175-2.825C5.958.392 6.9 0 8 0s2.042.392 2.825 1.175C11.608 1.958 12 2.9 12 4s-.392 2.042-1.175 2.825C10.042 7.608 9.1 8 8 8Zm10-4c0 1.1-.392 2.042-1.175 2.825C16.042 7.608 15.1 8 14 8a4.81 4.81 0 0 1-.7-.063 6.122 6.122 0 0 1-.7-.137 5.947 5.947 0 0 0 1.037-1.775C13.88 5.375 14 4.7 14 4s-.12-1.375-.363-2.025A5.947 5.947 0 0 0 12.6.2a3.04 3.04 0 0 1 .7-.163C13.533.014 13.767 0 14 0c1.1 0 2.042.392 2.825 1.175C17.608 1.958 18 2.9 18 4ZM2 14h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C9.804 5.021 10 4.55 10 4c0-.55-.196-1.02-.588-1.413A1.926 1.926 0 0 0 8 2c-.55 0-1.02.196-1.412.587A1.926 1.926 0 0 0 6 4c0 .55.196 1.02.588 1.412C6.979 5.804 7.45 6 8 6Z"
 								></path>
-								<path
-									fill="currentColor"
-									fill-rule="evenodd"
-									d="M4.216 17.119C6.187 16.263 8.775 16 11.99 16c3.218 0 5.807.264 7.78 1.121 2.148.934 3.454 2.526 4.138 4.773A1.631 1.631 0 0 1 22.348 24H1.635a1.633 1.633 0 0 1-1.563-2.11c.686-2.247 1.994-3.838 4.144-4.771Z"
-									clip-rule="evenodd"></path>
-								<path
-									fill="currentColor"
-									d="M20.5 15.458c-.662.041-.7.93-.092 1.196 1.668.725 2.924 1.793 3.825 3.155.738 1.118 1.886 1.99 3.226 1.99h2.85c1.13 0 1.957-1.124 1.558-2.222a7.076 7.076 0 0 0-.07-.188c-.549-1.384-1.488-2.402-2.878-3.051-1.306-.61-2.94-.861-4.865-.937l-.032-.001h-.031c-1.134 0-2.319-.015-3.49.058Z"
-								></path></svg
-							>
+							</svg>
+
 							<span class="ml-3" sidebar-toggle-item>Users</span>
 						</a>
 					</li>
@@ -261,17 +253,21 @@ import { pathRoutes } from '../config/pathRoutes';
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
-								class="flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-								width="18"
-								height="17"
+								class="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+								width="22"
+								height="18"
 								fill="none"
-								viewBox="0 0 25 25"
+								viewBox="0 0 22 18"
 							>
 								<path
-									fill="currentColor"
-									d="M23 9.487h-5.27V8.184a.997.997 0 0 0-.999-.999h-1.895v-.818c.872-.685 1.376-1.665 1.376-2.708C16.212 1.64 14.326 0 12.005 0 9.683 0 7.798 1.64 7.798 3.659c0 1.043.504 2.023 1.376 2.708v.818H7.278a.998.998 0 0 0-.999 1v1.302H1a.998.998 0 0 0-.999 1V23A.996.996 0 0 0 1 24h22c.554 0 1-.446 1-1V10.487a1 1 0 0 0-1-.999ZM10.669 4.971c-.549-.318-.877-.808-.877-1.312 0-.901 1.009-1.66 2.209-1.66 1.195 0 2.209.759 2.209 1.66 0 .504-.328.999-.877 1.312a1 1 0 0 0-.5.867V7.18h-1.665V5.838c0-.357-.19-.685-.5-.867ZM8.273 9.184h7.46v2.566h-7.46V9.184Zm13.729 12.818H1.998h14.733L19.5 22l2.497.002h.005Z"
-								></path></svg
-							>
+									stroke="currentColor"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="1.8"
+									d="M14 6h3.75M14 9h3.75M14 12h3.75M3.5 16.5h15a2.25 2.25 0 0 0 2.25-2.25V3.75A2.25 2.25 0 0 0 18.5 1.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 3.5 16.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336c-.976.52-2.065.79-3.17.789a6.72 6.72 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"
+								></path>
+							</svg>
+
 							<span
 								class="flex-1 ml-3 text-left whitespace-nowrap"
 								sidebar-toggle-item>Credentials</span
@@ -297,31 +293,32 @@ import { pathRoutes } from '../config/pathRoutes';
 								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
-										width="20"
-										height="20"
+										class="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+										width="26"
+										height="19"
 										fill="none"
-										viewBox="0 0 25 22"
-										class="flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+										viewBox="0 0 26 19"
 									>
 										<path
+											fill="currentColor"
 											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="1.25"
-											d="M4 4h3.125M4 6.885h3.125M1 1h15.702M4.695 10h.962m1.453 0h.96m1.422 0h.962m1.452 0h.962M17 1v4.952m0 3.715V13H1V1"
+											stroke-width=".5"
+											d="M23.4 1H10.6A1.6 1.6 0 0 0 9 2.6v8c.002.298.088.59.25.84l-.77.501c-.26.17-.563.26-.874.259H7.29a.797.797 0 0 0-.689-.4H1.8a.8.8 0 0 0-.8.8v4.8a.8.8 0 0 0 .8.8h4.8a.797.797 0 0 0 .689-.4h8.875a2.412 2.412 0 0 0 2.146-1.325l2.137-4.275H23.4a1.6 1.6 0 0 0 1.6-1.6v-8A1.6 1.6 0 0 0 23.4 1ZM1.8 17.4v-4.8h4.8v4.8H1.8Zm15.794-1.28a1.606 1.606 0 0 1-1.43.88H7.4v-4h.206a2.4 2.4 0 0 0 1.31-.389l6.617-4.303a.713.713 0 0 1 .864.095.696.696 0 0 1 .013.97l-3.387 3.76-.003.003-.717.796a.399.399 0 0 0 .029.565.4.4 0 0 0 .565-.029l.602-.668h2.717a1.193 1.193 0 0 0 .935-.448l.924-1.152h1.48l-1.961 3.92ZM14.94 12.2h2.11l-.52.65a.397.397 0 0 1-.314.15h-1.997l.72-.8Zm9.26-1.6a.8.8 0 0 1-.8.8h-7.74l.72-.8h3.42a.4.4 0 1 0 0-.8h-2.714A1.483 1.483 0 0 0 17 7.883V7.8a.4.4 0 0 0-.4-.4.392.392 0 0 0-.234.084 1.509 1.509 0 0 0-1.268.153l-.116.075a.394.394 0 0 0-.665-.195.4.4 0 0 0-.117.283v.42l-4.284 2.787A.79.79 0 0 1 9.8 10.6v-8a.8.8 0 0 1 .8-.8h12.8a.8.8 0 0 1 .8.8v8Z"
 										></path>
 										<path
 											fill="currentColor"
-											d="M14 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm-3.816 0a1.316 1.316 0 1 0 2.632 0 1.316 1.316 0 0 0-2.633 0Z"
+											stroke="currentColor"
+											stroke-width=".1"
+											d="M13.05 3.3v-.05h-.85a.45.45 0 0 0-.45.45v.45h1.3V3.3ZM11.8 4.85h-.05v.45a.45.45 0 0 0 .45.45h.85v-.9H11.8Zm1.95.85v.05h.85a.45.45 0 0 0 .45-.45V3.7a.45.45 0 0 0-.45-.45h-.85V5.7ZM12.2 2.55h2.4a1.15 1.15 0 0 1 1.15 1.15v1.6a1.15 1.15 0 0 1-1.15 1.15h-2.4a1.15 1.15 0 0 1-1.15-1.15V3.7a1.15 1.15 0 0 1 1.15-1.15Z"
 										></path>
 										<path
+											fill="currentColor"
 											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="1.25"
-											d="M7.164 13.647v1.47h7.53m-6.024.589v2.353h6.526m-4.518.294V21h11.044l3.263-1.177m0 0v-9.705m0 9.705h3.012m-3.012-9.705L23.48 8.353 16.2 6l-1.004.588-.25 1.47.501 1.177 3.263.883.502 1.764 1.004 1.765h1.506m3.263-3.53h3.012"
-										></path></svg
-									>
+											stroke-width=".2"
+											d="M11.4 7.297a.4.4 0 0 0-.4.4v.8a.4.4 0 1 0 .8 0v-.8a.4.4 0 0 0-.4-.4Zm1.602 0a.4.4 0 0 0-.4.4v.4a.4.4 0 1 0 .8 0v-.4a.4.4 0 0 0-.4-.4Zm5.198 0a.4.4 0 0 0-.4.4v.8a.4.4 0 1 0 .8 0v-.8a.4.4 0 0 0-.4-.4Zm1.598 0a.4.4 0 0 0-.4.4v.8a.4.4 0 0 0 .8 0v-.8a.4.4 0 0 0-.4-.4Z"
+										></path>
+									</svg>
+
 									<span class="ml-2">Issuance</span>
 								</a>
 							</li>
@@ -332,26 +329,22 @@ import { pathRoutes } from '../config/pathRoutes';
 								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
-										width="20"
-										height="20"
+										class="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+										width="24"
+										height="24"
 										fill="none"
-										viewBox="0 0 25 25"
-										class="flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+										viewBox="0 0 24 24"
 									>
 										<path
 											fill="currentColor"
-											d="M19.322 8.824h-4.427V7.612c0-.515-.375-.93-.84-.93h-1.592v-.76a3.335 3.335 0 0 0 1.156-2.52C13.62 1.527 12.035 0 10.085 0 8.135 0 6.55 1.526 6.55 3.403c0 .97.424 1.881 1.157 2.519v.76H6.114c-.465 0-.84.415-.84.93v1.212H.84c-.465 0-.839.414-.839.93v11.638c0 .515.374.93.84.93h12.78l-.993-1.86 7.534-7.962V9.753c0-.51-.374-.93-.84-.93Zm-10.36-4.2c-.461-.296-.737-.752-.737-1.221 0-.838.848-1.544 1.856-1.544 1.004 0 1.855.706 1.855 1.544 0 .47-.275.93-.736 1.22a.952.952 0 0 0-.42.807v1.248H9.381V5.43a.958.958 0 0 0-.42-.806ZM6.948 8.54h6.267v2.141H6.949v-2.14Zm5.678 11.922H1.68v-9.78h16.804l.065 1.37 1.21.447h.403l-7.534 7.963Z"
+											d="M3.25 21a2.2 2.2 0 0 1-1.59-.64A2.07 2.07 0 0 1 1 18.817V7.364c0-.6.22-1.114.66-1.541a2.2 2.2 0 0 1 1.59-.641h4.725A3.288 3.288 0 0 1 9.198 3.6c.572-.4 1.214-.6 1.927-.6.713 0 1.355.2 1.927.6.571.4.98.927 1.223 1.582H19c.619 0 1.148.213 1.59.64.44.428.66.942.66 1.542v11.454c0 .6-.22 1.114-.66 1.541A2.206 2.206 0 0 1 19 21H3.25Zm0-2.182H19V7.364H3.25v11.454Zm7.875-12.273a.833.833 0 0 0 .605-.231.78.78 0 0 0 .239-.587.782.782 0 0 0-.24-.586.833.833 0 0 0-.604-.232.833.833 0 0 0-.605.232.782.782 0 0 0-.239.586c0 .237.08.432.24.587.159.154.36.231.604.231Z"
 										></path>
 										<path
 											fill="currentColor"
-											d="M24.997 17.854c0 3.945-2.889 7.143-6.452 7.143s-6.451-3.198-6.451-7.143 2.888-7.143 6.451-7.143c3.563 0 6.452 3.198 6.452 7.143Zm-11.292 0c0 2.96 2.167 5.358 4.84 5.358s4.84-2.399 4.84-5.358c0-2.96-2.167-5.359-4.84-5.359s-4.84 2.4-4.84 5.359Z"
+											d="m14.031 20.297-.89-1.5-1.688-.375.164-1.735-1.148-1.312 1.148-1.313-.164-1.734 1.688-.375.89-1.5 1.594.68 1.594-.68.89 1.5 1.688.375-.164 1.735 1.148 1.312-1.148 1.313.164 1.734-1.688.375-.89 1.5-1.594-.68-1.594.68Zm.399-1.195 1.195-.516 1.219.516.656-1.125 1.29-.305-.118-1.313.867-.984-.867-1.008.117-1.312-1.289-.282-.68-1.125-1.195.516-1.219-.516-.656 1.125-1.29.282.118 1.312-.867 1.008.867.984-.117 1.336 1.289.282.68 1.125Zm.703-2.063 2.648-2.648-.656-.68-1.992 1.992-1.008-.984-.656.656 1.664 1.664Z"
 										></path>
-										<path
-											stroke="currentColor"
-											stroke-linecap="round"
-											stroke-width="1.5"
-											d="m15.328 17.984 2.24 2.55 4.48-4.464"></path></svg
-									>
+									</svg>
+
 									<span class="ml-2">Verification</span>
 								</a>
 							</li>
@@ -461,16 +454,21 @@ import { pathRoutes } from '../config/pathRoutes';
 					class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
 				>
 					<svg
-						aria-hidden="true"
-						class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-						fill="currentColor"
 						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 496 512"
-						><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
-						<path
-							d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-						></path></svg
+						class="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+						width="24"
+						height="24"
+						fill="none"
+						viewBox="0 0 24 24"
 					>
+						<path
+							fill="currentColor"
+							stroke="currentColor"
+							stroke-width=".5"
+							d="M11.296 2.012c-.074.007-.304.035-.508.058-.844.094-2.024.419-2.775.763a9.912 9.912 0 0 0-3.185 2.25c-3.467 3.57-3.784 9.14-.743 13.04 1.607 2.058 3.838 3.368 6.45 3.783.785.125 2.145.125 2.93 0 2.174-.344 4.077-1.302 5.602-2.828 3.267-3.254 3.87-8.242 1.481-12.22-.715-1.197-1.853-2.386-3.017-3.168a10.1 10.1 0 0 0-4.182-1.608c-.376-.055-1.771-.106-2.053-.07Zm1.994 1.247c1.43.22 2.806.806 4.022 1.714.453.336 1.305 1.181 1.634 1.611.785 1.045 1.328 2.152 1.614 3.302.825 3.305-.297 6.708-2.935 8.907a9.241 9.241 0 0 1-2.35 1.396l-.344.137v-1.334c0-1.463-.035-1.823-.21-2.26a1.682 1.682 0 0 1-.09-.255c.003-.004.171-.063.375-.13 1.884-.63 3.087-1.955 3.447-3.798.078-.383.067-1.47-.02-1.877-.136-.677-.359-1.248-.687-1.756l-.2-.313.047-.247c.07-.367.063-1.322-.015-1.666-.137-.602-.426-.978-.829-1.068-.508-.113-1.298.145-2.306.747l-.313.188-.45-.094c-1.16-.242-2.508-.223-3.564.047l-.219.055-.3-.176c-.446-.262-.982-.528-1.287-.63-.402-.137-.875-.196-1.098-.133-.371.106-.657.489-.79 1.064-.078.344-.085 1.299-.015 1.666l.047.247-.2.313c-.328.508-.55 1.08-.687 1.756-.086.407-.098 1.494-.02 1.877.36 1.843 1.563 3.169 3.447 3.799.204.066.372.125.376.129.004.004-.032.113-.086.238-.051.13-.118.356-.149.509-.05.266-.059.274-.207.328-.246.09-.747.075-.938-.023a1.432 1.432 0 0 1-.57-.536c-.419-.618-.743-.939-1.185-1.17a2.073 2.073 0 0 0-.84-.222h-.18l.05.536c.024.297.048.563.051.586 0 .028.04.051.09.051.16 0 .473.18.653.376.098.105.262.32.367.477.106.16.301.391.43.52.5.497 1.357.759 2.049.626l.164-.031v1.584l-.34-.137c-3.792-1.526-6.047-5.414-5.465-9.423.22-1.502.813-2.883 1.79-4.182.329-.43 1.181-1.275 1.634-1.611 1.388-1.04 2.838-1.6 4.628-1.788.32-.031 1.58.016 1.974.074ZM7.896 6.854c.274.086.61.25 1.075.528.238.141.48.282.543.305.164.075.434.063.907-.043a6.47 6.47 0 0 1 1.849-.168c.492.02.762.047 1.118.125.59.133.938.16 1.094.09.067-.027.317-.172.563-.32.512-.306.973-.517 1.204-.556l.16-.023.035.187c.05.31.027 1.103-.043 1.37-.117.45-.086.59.211.993.254.344.485.833.614 1.31.09.345.105.466.105.998.004.641-.066 1.036-.258 1.479-.422.966-1.29 1.728-2.392 2.096-.414.137-.707.204-1.43.32a37.76 37.76 0 0 0-.614.106c-.012.016.278.454.614.927.328.462.41.626.465.92.027.14.043.805.043 1.701v1.471l-.282.047a9.863 9.863 0 0 1-1.477.121c-.45 0-1.032-.047-1.473-.121l-.286-.047v-1.447c0-.81.02-1.561.04-1.702.05-.305.132-.47.468-.943s.626-.91.614-.927a22.41 22.41 0 0 0-.614-.105c-.723-.117-1.016-.184-1.43-.32-1.102-.369-1.97-1.131-2.392-2.098-.192-.442-.262-.837-.258-1.478 0-.532.015-.653.105-.998a4.14 4.14 0 0 1 .614-1.31c.297-.403.328-.544.211-.994-.07-.266-.094-1.06-.043-1.365.035-.207.059-.215.34-.129Z"
+						></path>
+					</svg>
+
 					<span class="ml-3" sidebar-toggle-item>GitHub Repository</span>
 				</a>
 				<a
@@ -479,15 +477,19 @@ import { pathRoutes } from '../config/pathRoutes';
 					class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
 				>
 					<svg
-						class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-						fill="currentColor"
-						viewBox="0 0 20 20"
 						xmlns="http://www.w3.org/2000/svg"
-						><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path
-							fill-rule="evenodd"
-							d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
-							clip-rule="evenodd"></path></svg
+						class="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+						width="24"
+						height="24"
+						fill="none"
+						viewBox="0 0 24 24"
 					>
+						<path
+							fill="currentColor"
+							d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h4.2a3.01 3.01 0 0 1 1.088-1.45A2.857 2.857 0 0 1 12 1c.633 0 1.204.183 1.713.55.508.367.87.85 1.087 1.45H19c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Zm2-2h7v-2H7v2Zm0-4h10v-2H7v2Zm0-4h10V7H7v2Zm5-4.75a.728.728 0 0 0 .75-.75.728.728 0 0 0-.75-.75.728.728 0 0 0-.75.75.728.728 0 0 0 .75.75Z"
+						></path>
+					</svg>
+
 					<span class="ml-3" sidebar-toggle-item>Documentation</span>
 				</a>
 				<!-- <a
@@ -512,15 +514,19 @@ import { pathRoutes } from '../config/pathRoutes';
 					class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
 				>
 					<svg
-						class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-						fill="currentColor"
-						viewBox="0 0 20 20"
 						xmlns="http://www.w3.org/2000/svg"
-						><path
-							fill-rule="evenodd"
-							d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z"
-							clip-rule="evenodd"></path></svg
+						class="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+						width="24"
+						height="24"
+						fill="none"
+						viewBox="0 0 24 24"
 					>
+						<path
+							fill="currentColor"
+							d="m12 22-.25-3h-.25c-2.367 0-4.375-.825-6.025-2.475C3.825 14.875 3 12.867 3 10.5c0-2.367.825-4.375 2.475-6.025C7.125 2.825 9.133 2 11.5 2a8.28 8.28 0 0 1 3.313.663 8.585 8.585 0 0 1 4.524 4.525A8.28 8.28 0 0 1 20 10.5c0 1.25-.204 2.45-.613 3.6a12.739 12.739 0 0 1-1.675 3.2 14.164 14.164 0 0 1-2.524 2.675A15.65 15.65 0 0 1 12 22Zm2-3.65c1.183-1 2.146-2.17 2.887-3.513A8.822 8.822 0 0 0 18 10.5c0-1.817-.63-3.354-1.887-4.612C14.854 4.629 13.317 4 11.5 4c-1.817 0-3.354.63-4.612 1.888C5.629 7.146 5 8.683 5 10.5c0 1.817.63 3.354 1.888 4.613C8.146 16.37 9.683 17 11.5 17H14v1.35Zm-2.525-2.375c.283 0 .525-.1.725-.3.2-.2.3-.442.3-.725s-.1-.525-.3-.725c-.2-.2-.442-.3-.725-.3s-.525.1-.725.3c-.2.2-.3.442-.3.725s.1.525.3.725c.2.2.442.3.725.3ZM10.75 12.8h1.5c0-.5.05-.85.15-1.05.1-.2.417-.567.95-1.1.3-.3.55-.625.75-.975.2-.35.3-.725.3-1.125 0-.85-.287-1.488-.863-1.913C12.963 6.213 12.284 6 11.5 6c-.733 0-1.35.204-1.85.612-.5.409-.85.905-1.05 1.488l1.4.55a2.32 2.32 0 0 1 .475-.838c.233-.275.575-.412 1.025-.412.45 0 .787.125 1.012.375.226.25.338.525.338.825 0 .283-.083.537-.25.763a6.207 6.207 0 0 1-.6.687c-.583.5-.938.896-1.063 1.188-.124.291-.187.812-.187 1.562Z"
+						></path>
+					</svg>
+
 					<span class="ml-3" sidebar-toggle-item>Support</span>
 				</a>
 			</div>
diff --git a/src/components/BreadCrumbs/index.tsx b/src/components/BreadCrumbs/index.tsx
index 104c3c669..ee276da45 100644
--- a/src/components/BreadCrumbs/index.tsx
+++ b/src/components/BreadCrumbs/index.tsx
@@ -6,62 +6,71 @@ import { Breadcrumb } from 'flowbite-react';
 import { HiHome } from 'react-icons/hi';
 
 interface BreadCrumbI {
-    href: string;
-    text: string;
+	href: string;
+	text: string;
 }
 
 export default function BreadCrumbs() {
+	const [breadcrumbList, setBreadcrumbList] = useState<BreadCrumbI[]>([]);
 
-    const [breadcrumbList, setBreadcrumbs] = useState<BreadCrumbI[]>([]) 
+	useEffect(() => {
+		const pathUrl = window.location.pathname;
+		const asPathNestedRoutes = pathUrl.split('/').filter((v) => v.length > 0);
 
-    useEffect(() => {
+		const crumblist = asPathNestedRoutes.map((subpath, idx) => {
+			const href = `/${asPathNestedRoutes.slice(0, idx + 1).join('/')}`;
+			return { href, text: subpath };
+		});
 
-        const pathUrl = window.location.pathname
-       const asPathNestedRoutes = pathUrl
-        .split('/')
-        .filter((v) => v.length > 0);
+		setBreadcrumbList(crumblist);
+	}, []);
 
-      const crumblist = asPathNestedRoutes.map((subpath, idx) => {
-        const href = `/${asPathNestedRoutes.slice(0, idx + 1).join('/')}`;
-        return { href, text: subpath };
-      });
+	return (
+		<Breadcrumb
+			aria-label="Solid background breadcrumb example"
+			className="bg-gray-50 py-3 dark:bg-gray-900"
+		>
+			<div className="flex flex-wrap">
+				<Breadcrumb.Item href="/dashboard">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path
+							fill="#6B7280"
+							d="M6 19h3v-6h6v6h3v-9l-6-4.5L6 10v9Zm-2 2V9l8-6 8 6v12h-7v-6h-2v6H4Z"
+						/>
+					</svg>
 
-      setBreadcrumbs(crumblist)
+					<p>Home</p>
+				</Breadcrumb.Item>
 
-    }, [])
-
-    return (
-        <Breadcrumb
-            aria-label="Solid background breadcrumb example"
-            className="bg-gray-50 py-3 dark:bg-gray-900"
-        >
-
-           <div className='flex flex-wrap'>
-					 <Breadcrumb.Item
-                href="/dashboard"
-                icon={HiHome}
-            >
-                <p>
-                    Home
-                </p>
-            </Breadcrumb.Item>
-
-            {breadcrumbList.map((crumb, idx) => {
-                const crumbData = crumb.text.charAt(0).toUpperCase() + crumb.text.slice(1)
-                const routes = crumbData ? crumbData?.split("-").reduce((s, c) => (s.charAt(0).toUpperCase() + s.slice(1)) + " " + (c.charAt(0).toUpperCase() + c.slice(1))
-                ) : ""
-                return (
-                    <Breadcrumb.Item
-                    href={crumb.href}
-                        key={idx}
-                    >
-                        {routes}
-                    </Breadcrumb.Item>
-                );
-            })}
-					 </div>
-        </Breadcrumb>
-    )
+				{breadcrumbList.map((crumb, idx) => {
+					console.log("crumb",);
+					
+					const crumbData =
+						crumb.text.charAt(0).toUpperCase() + crumb.text.slice(1);
+					const routes = crumbData
+						? crumbData
+								?.split('-')
+								.reduce(
+									(s, c) =>
+										s.charAt(0).toUpperCase() +
+										s.slice(1) +
+										' ' +
+										(c.charAt(0).toUpperCase() + c.slice(1)),
+								)
+						: '';
+					return (
+						<Breadcrumb.Item href={crumb.href} key={crumb.text}>
+							{routes}
+						</Breadcrumb.Item>
+					);
+				})}
+			</div>
+		</Breadcrumb>
+	);
 }
-
-
diff --git a/src/components/ColorModeSwitcher.astro b/src/components/ColorModeSwitcher.astro
index af692ab5b..0b0c503d6 100644
--- a/src/components/ColorModeSwitcher.astro
+++ b/src/components/ColorModeSwitcher.astro
@@ -6,25 +6,35 @@
 >
 	<svg
 		id="theme-toggle-dark-icon"
-		class="hidden w-5 h-5"
-		fill="currentColor"
-		viewBox="0 0 20 20"
+		class="hidden"
 		xmlns="http://www.w3.org/2000/svg"
-		><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
+		width="24"
+		height="24"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		<path
+			fill="#6B7280"
+			d="M12 21c-2.5 0-4.625-.875-6.375-2.625S3 14.5 3 12s.875-4.625 2.625-6.375S9.5 3 12 3a9.304 9.304 0 0 1 1.35.1 5.292 5.292 0 0 0-1.637 1.887A5.31 5.31 0 0 0 11.1 7.5c0 1.5.525 2.775 1.575 3.825C13.725 12.375 15 12.9 16.5 12.9a5.28 5.28 0 0 0 2.525-.613A5.322 5.322 0 0 0 20.9 10.65 8.505 8.505 0 0 1 21 12c0 2.5-.875 4.625-2.625 6.375S14.5 21 12 21Zm0-2c1.467 0 2.783-.404 3.95-1.212a7.012 7.012 0 0 0 2.55-3.163c-.333.083-.667.15-1 .2-.333.05-.667.075-1 .075-2.05 0-3.796-.72-5.238-2.162C9.821 11.296 9.1 9.55 9.1 7.5c0-.333.025-.667.075-1 .05-.333.117-.667.2-1a7.013 7.013 0 0 0-3.162 2.55C5.404 9.217 5 10.533 5 12c0 1.933.683 3.583 2.05 4.95C8.417 18.317 10.067 19 12 19Z"
 		></path></svg
 	>
+
 	<svg
 		id="theme-toggle-light-icon"
-		class="hidden w-5 h-5"
-		fill="currentColor"
-		viewBox="0 0 20 20"
+		class="hidden "
+		width="24"
+		height="24"
+		fill="none"
+		viewBox="0 0 24 24"
 		xmlns="http://www.w3.org/2000/svg"
-		><path
-			d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-			fill-rule="evenodd"
-			clip-rule="evenodd"></path></svg
 	>
-</button>
+		<path
+			fill="#6B7280"
+			d="M12 15c.833 0 1.542-.292 2.125-.875A2.893 2.893 0 0 0 15 12c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 12 9c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 9 12c0 .833.292 1.542.875 2.125A2.893 2.893 0 0 0 12 15Zm0 2c-1.383 0-2.563-.488-3.537-1.463C7.488 14.563 7 13.383 7 12s.487-2.563 1.463-3.537C9.438 7.488 10.617 7 12 7s2.563.487 3.537 1.463C16.512 9.438 17 10.617 17 12s-.488 2.563-1.463 3.537C14.563 16.512 13.383 17 12 17ZM2 13a.967.967 0 0 1-.712-.287A.968.968 0 0 1 1 12a.97.97 0 0 1 .288-.713A.967.967 0 0 1 2 11h2c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.967.967 0 0 1 4 13H2Zm18 0a.968.968 0 0 1-.712-.287A.968.968 0 0 1 19 12a.97.97 0 0 1 .288-.713A.968.968 0 0 1 20 11h2a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 22 13h-2Zm-8-8a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 4V2a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 1a.97.97 0 0 1 .713.288A.968.968 0 0 1 13 2v2c0 .283-.096.52-.287.713A.968.968 0 0 1 12 5Zm0 18a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 22v-2a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 19a.97.97 0 0 1 .713.288A.968.968 0 0 1 13 20v2a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 23ZM5.65 7.05 4.575 6a.87.87 0 0 1-.288-.7 1.09 1.09 0 0 1 .288-.725c.2-.2.442-.3.725-.3s.517.1.7.3L7.05 5.65c.183.2.275.433.275.7 0 .267-.092.5-.275.7a.856.856 0 0 1-.688.288 1.07 1.07 0 0 1-.712-.288ZM18 19.425l-1.05-1.075a1.019 1.019 0 0 1-.275-.713c0-.274.092-.504.275-.687a.856.856 0 0 1 .688-.287c.274.008.512.104.712.287L19.425 18a.87.87 0 0 1 .287.7 1.085 1.085 0 0 1-.287.725c-.2.2-.442.3-.725.3a.908.908 0 0 1-.7-.3ZM16.95 7.05a.856.856 0 0 1-.287-.688 1.07 1.07 0 0 1 .287-.712L18 4.575a.87.87 0 0 1 .7-.288c.283.009.525.105.725.288.2.2.3.442.3.725s-.1.517-.3.7L18.35 7.05c-.2.183-.433.275-.7.275-.267 0-.5-.092-.7-.275ZM4.575 19.425c-.2-.2-.3-.442-.3-.725s.1-.517.3-.7l1.075-1.05c.2-.183.438-.275.712-.275.276 0 .505.092.688.275.2.183.296.413.288.688a1.07 1.07 0 0 1-.288.712L6 19.425a.87.87 0 0 1-.7.287 1.085 1.085 0 0 1-.725-.287Z"
+		></path>
+	</svg></button
+>
+
 <div
 	id="tooltip-toggle"
 	role="tooltip"
diff --git a/src/components/CreateEcosystemOrgModal/index.tsx b/src/components/CreateEcosystemOrgModal/index.tsx
index 967e5500e..178aafa81 100644
--- a/src/components/CreateEcosystemOrgModal/index.tsx
+++ b/src/components/CreateEcosystemOrgModal/index.tsx
@@ -14,8 +14,7 @@ import { createOrganization } from "../../api/organization";
 import { getFromLocalStorage } from "../../api/Auth";
 import { createEcosystems } from "../../api/ecosystem";
 import { getOrgDetails } from "../../config/ecosystem";
-import React from "react";
-
+import defaultUserIcon from "../../../public/images/person_FILL1_wght400_GRAD0_opsz24.svg"
 interface Values {
     name: string;
     description: string;
@@ -291,6 +290,7 @@ const CreateEcosystemOrgModal = (props: IProps) => {
                                             typeof (logoImage.logoFile) === "string" ?
                                                 <Avatar
                                                     size="lg"
+                                                    img={defaultUserIcon}
                                                 /> :
                                                 <img
                                                     className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
diff --git a/src/components/Ecosystem/EcosystemSidebarOption.tsx b/src/components/Ecosystem/EcosystemSidebarOption.tsx
index 4904e4005..6aa95f574 100644
--- a/src/components/Ecosystem/EcosystemSidebarOption.tsx
+++ b/src/components/Ecosystem/EcosystemSidebarOption.tsx
@@ -1,45 +1,52 @@
-import { useEffect, useState } from 'react'
-import { ICheckEcosystem, checkEcosystem } from '../../config/ecosystem'
-import { pathRoutes } from '../../config/pathRoutes'
+import { useEffect, useState } from 'react';
+import { ICheckEcosystem, checkEcosystem } from '../../config/ecosystem';
+import { pathRoutes } from '../../config/pathRoutes';
 
 const EcosystemSidebarOption = () => {
-    const [isEcosystemEnabled, setIsEcosystemEnabled] = useState(false);
+	const [isEcosystemEnabled, setIsEcosystemEnabled] = useState(false);
 
-    useEffect(() => {
-        const checkEcosystemData = async () => {
-            const data: ICheckEcosystem = await checkEcosystem();
-            setIsEcosystemEnabled(data.isEnabledEcosystem)
-        }
-        checkEcosystemData();
-    }, [])
+	useEffect(() => {
+		const checkEcosystemData = async () => {
+			const data: ICheckEcosystem = await checkEcosystem();
+			setIsEcosystemEnabled(data.isEnabledEcosystem);
+		};
+		checkEcosystemData();
+	}, []);
 
-    if (isEcosystemEnabled) {
-        return (
-            <li>
-                <a
-                    href={pathRoutes.ecosystem.root}
-                    className="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-                        width="17" height="17" viewBox="0 0 25 25" fill="none">
-                        <path d="M10.0153 0.127968C9.87275 0.200114 9.6963 0.350964 9.62843 0.469021C9.45198 0.751046 9.45198 1.26263 9.62843 1.54465C9.77774 1.79388 10.2121 2.02344 10.5107 2.02344C10.8093 2.02344 11.2436 1.79388 11.3929 1.54465C11.4812 1.41348 11.5287 1.21672 11.5287 1.00684C11.5287 0.593637 11.3522 0.298495 10.9925 0.121409C10.6532 -0.0425587 10.3478 -0.0425587 10.0153 0.127968Z" fill="currentColor" />
-                        <path d="M6.00754 4.13364L2.75 6.10782L2.75679 6.73746L2.76357 7.36053L3.8087 7.99673C4.48736 8.40993 4.9217 8.63948 5.04385 8.63948C5.17959 8.63948 5.26102 8.69195 5.34246 8.81657C5.41033 8.93463 6.09577 9.39374 7.31735 10.1349L9.18365 11.2695L9.3601 11.1121C9.62478 10.8694 9.95053 10.7317 10.3442 10.6924C10.7988 10.6465 11.1925 10.758 11.5657 11.0334L11.8711 11.2564L13.7306 10.1283C14.9658 9.38062 15.6309 8.94119 15.6987 8.82313C15.7802 8.69195 15.8616 8.63948 15.9973 8.63948C16.1263 8.63948 16.5403 8.42305 17.1918 8.02952C18.1826 7.43268 18.1894 7.42612 18.1419 7.22936C18.074 6.97357 18.074 6.49478 18.1419 6.24555L18.1894 6.04879L14.9862 4.10085C11.8168 2.17914 11.7761 2.15291 11.6404 2.27753C11.0839 2.78255 9.95732 2.78255 9.40082 2.27753C9.26509 2.15947 9.21758 2.1857 6.00754 4.13364ZM10.7785 5.42571C11.1789 5.66183 11.016 6.08158 10.5206 6.08158C10.0252 6.08158 9.86231 5.66183 10.2695 5.42571C10.3849 5.35357 10.5002 5.29454 10.5206 5.29454C10.541 5.29454 10.6563 5.35357 10.7785 5.42571ZM9.06149 6.47511C9.23794 6.65875 9.13614 6.90142 8.81718 7.07851C8.505 7.24904 8.23353 7.20312 8.17245 6.96701C8.12495 6.77681 8.21996 6.64563 8.51857 6.46199C8.78324 6.31114 8.91219 6.31114 9.06149 6.47511ZM12.4751 6.43575C12.7737 6.58661 12.9163 6.77681 12.8687 6.96045C12.8077 7.20312 12.5362 7.24904 12.224 7.07851C11.9051 6.90142 11.8033 6.65875 11.9797 6.47511C12.1222 6.3177 12.224 6.31114 12.4751 6.43575ZM7.11375 7.56385C7.33092 7.70815 7.30378 7.94426 7.04589 8.13446C6.69977 8.38369 6.59797 8.39681 6.41474 8.21973C6.19757 8.00985 6.25865 7.8262 6.61155 7.62288C6.94409 7.43268 6.92373 7.43268 7.11375 7.56385ZM14.4229 7.62288C14.7826 7.8262 14.8436 8.00985 14.6265 8.21973C14.4432 8.39681 14.3414 8.38369 14.0021 8.13446C13.7374 7.94426 13.7103 7.70815 13.9274 7.56385C14.1175 7.43268 14.0903 7.42612 14.4229 7.62288Z" fill="currentColor" />
-                        <path d="M0.495418 5.90059C0.264675 6.04488 0 6.49087 0 6.74666C0 7.00245 0.264675 7.455 0.502205 7.59929C0.651509 7.68456 0.848319 7.73047 1.06549 7.73047C2.09026 7.73047 2.49066 6.46464 1.63556 5.9137C1.33016 5.71694 0.800813 5.71038 0.495418 5.90059Z" fill="currentColor" />
-                        <path d="M19.1308 6.00553C18.4115 6.6614 18.8458 7.73047 19.8299 7.73047C20.3931 7.73047 20.8343 7.29759 20.8343 6.74666C20.8343 6.16294 20.3999 5.76285 19.762 5.76285C19.443 5.76285 19.3752 5.78909 19.1308 6.00553Z" fill="currentColor" />
-                        <path d="M2.13446 8.05356C2.07338 8.11915 1.88336 8.23065 1.72048 8.28968L1.42188 8.40117V12.0544V15.7076L1.72727 15.8191C2.12089 15.9699 2.59595 16.475 2.71132 16.8685C2.75883 17.0324 2.77918 17.3276 2.76561 17.5244L2.73847 17.8785L5.98244 19.8461L9.23319 21.8203L9.50466 21.6301C9.65396 21.5252 9.86434 21.4202 9.97971 21.4006L10.1765 21.3546V19.9248C10.1765 19.0394 10.1494 18.4754 10.1087 18.4491C10.0204 18.3967 10.0204 18.1081 10.1087 18.0556C10.1494 18.0294 10.1765 17.2817 10.1765 16.0355V14.0548L9.84398 13.9105C9.14497 13.5957 8.70384 12.8611 8.78528 12.1528L8.81921 11.8248L6.97327 10.7098C5.95529 10.0999 5.03911 9.5883 4.93052 9.57518C4.82872 9.55551 4.69299 9.4768 4.63191 9.39154C4.5369 9.25381 2.43986 7.92239 2.31091 7.92239C2.28377 7.92239 2.20233 7.98142 2.13446 8.05356ZM5.16126 10.6574C5.30378 10.8148 5.26985 11.3329 5.12054 11.4444C4.94409 11.5625 4.83551 11.5494 4.67942 11.3985C4.50976 11.2345 4.49618 10.8017 4.65227 10.6508C4.788 10.5131 5.04589 10.5196 5.16126 10.6574ZM5.16126 12.625C5.30378 12.7824 5.26985 13.3005 5.12054 13.412C4.94409 13.5301 4.83551 13.517 4.67942 13.3661C4.53011 13.2218 4.49618 12.8545 4.61155 12.6381C4.69978 12.4807 5.03232 12.4741 5.16126 12.625ZM5.12733 14.5073C5.43273 14.9992 5.43951 15.0189 5.36486 15.1763C5.29699 15.3206 5.1952 15.3665 4.95088 15.3403C4.79479 15.3206 4.54369 15.0189 4.54369 14.8353C4.54369 14.6123 4.78122 14.3958 4.97124 14.4549C5.05268 14.4745 5.12054 14.5008 5.12733 14.5073ZM7.00721 15.8256C7.28545 16.0093 7.33975 16.2323 7.14972 16.4094C7.00042 16.5537 6.85111 16.5405 6.57287 16.3569C6.28783 16.1667 6.21318 15.9896 6.3557 15.7994C6.48464 15.6158 6.69502 15.6289 7.00721 15.8256ZM8.87351 16.9734C9.1789 17.1833 9.23319 17.3538 9.04996 17.5244C8.90744 17.6686 8.73778 17.6555 8.45274 17.4916C8.15413 17.3276 8.07269 17.0849 8.24236 16.9078C8.41202 16.7307 8.54775 16.7439 8.87351 16.9734Z" fill="currentColor" />
-                        <path d="M17.5431 8.60449C16.9866 8.94555 16.4708 9.29316 16.3894 9.38498C16.3079 9.4768 16.1654 9.56207 16.0704 9.57518C15.9754 9.59486 15.0728 10.1064 14.0616 10.7164L12.2292 11.8248L12.236 12.2839C12.2428 13.0447 11.8288 13.6809 11.1502 13.9302L10.8516 14.0417V16.029C10.8516 17.2817 10.8787 18.0294 10.9194 18.0556C10.9601 18.0753 10.9873 18.1671 10.9873 18.2524C10.9873 18.3376 10.9601 18.4295 10.9194 18.4491C10.8787 18.4754 10.8516 19.0394 10.8516 19.9248V21.3546L11.0484 21.4006C11.1637 21.4202 11.3741 21.5252 11.5234 21.6301L11.7949 21.8203L14.5638 20.1413C16.084 19.2165 17.5499 18.3311 17.8146 18.1737L18.2964 17.8851L18.2625 17.3997C18.2353 16.9669 18.2489 16.8685 18.4186 16.5471C18.6154 16.1536 19.0633 15.7666 19.4094 15.6945L19.6062 15.6486V12.015C19.6062 8.493 19.5994 8.3815 19.4773 8.3815C19.4094 8.3815 19.1719 8.28968 18.9615 8.18474C18.7511 8.07324 18.5679 7.98798 18.5611 7.98798C18.5611 7.98798 18.0996 8.27 17.5431 8.60449ZM16.3758 10.6508C16.5319 10.8017 16.5183 11.2345 16.3487 11.3985C16.1926 11.5494 16.1247 11.5559 15.9347 11.4641C15.8329 11.4051 15.8057 11.3198 15.8057 11.0509C15.8057 10.8607 15.8397 10.6705 15.8872 10.6246C16.0026 10.5131 16.2537 10.5262 16.3758 10.6508ZM16.4165 12.6381C16.5862 12.9464 16.4097 13.4973 16.1383 13.4973C15.9008 13.4973 15.8057 13.3596 15.8057 13.0185C15.8057 12.8283 15.8397 12.6381 15.8872 12.5922C16.0161 12.4676 16.3351 12.4938 16.4165 12.6381ZM16.3487 14.5467C16.4233 14.6188 16.4844 14.7631 16.4844 14.8615C16.4844 15.2813 15.8261 15.5305 15.6632 15.1829C15.5411 14.9271 15.86 14.4483 16.1654 14.4221C16.1926 14.4155 16.274 14.4745 16.3487 14.5467ZM14.6724 15.7994C14.8149 15.9896 14.7403 16.1667 14.4552 16.3569C14.177 16.5405 14.0277 16.5537 13.8784 16.4094C13.6883 16.2323 13.7426 16.0093 14.0209 15.8256C14.3331 15.6289 14.5434 15.6158 14.6724 15.7994ZM12.7857 16.9078C12.9554 17.0849 12.874 17.3276 12.5753 17.4916C12.2903 17.6555 12.1206 17.6686 11.9781 17.5244C11.7949 17.3538 11.8492 17.1833 12.1546 16.9734C12.4803 16.7439 12.6161 16.7307 12.7857 16.9078Z" fill="currentColor" />
-                        <path d="M10.0419 11.4898C9.30895 11.8636 9.30895 12.8999 10.0419 13.254C10.9581 13.7 11.8946 12.7425 11.406 11.8636C11.2703 11.6144 10.8088 11.3389 10.517 11.3389C10.4152 11.3389 10.2048 11.4045 10.0419 11.4898Z" fill="currentColor" />
-                        <path d="M19.6162 16.3257C19.2293 16.4766 18.9375 16.8832 18.9375 17.2767C18.9375 18.0244 19.8808 18.5491 20.4984 18.1359C20.8785 17.8932 21.0074 17.6637 21.0006 17.2702C21.0006 17.0013 20.9599 16.8766 20.8242 16.693C20.5188 16.3126 20.0369 16.1683 19.6162 16.3257Z" fill="currentColor" />
-                        <path d="M0.633109 16.444C0.402366 16.5358 0.130904 16.8506 0.042679 17.113C-0.174491 17.8213 0.558457 18.5428 1.29819 18.346C1.99042 18.1624 2.30939 17.3753 1.92255 16.8047C1.68502 16.4506 1.06745 16.28 0.633109 16.444Z" fill="currentColor" />
-                        <path d="M10.229 22.0247C9.76077 22.1625 9.49609 22.5035 9.49609 22.9757C9.49609 24.0055 10.833 24.3859 11.4031 23.5201C11.5117 23.3496 11.5321 23.225 11.5117 22.9233C11.4913 22.6019 11.4574 22.5166 11.2606 22.3199C11.1317 22.1953 10.9213 22.0575 10.7855 22.0247C10.5141 21.9526 10.4801 21.9526 10.229 22.0247Z" fill="currentColor" />
-                    </svg>
-                    <span className="ml-3" sidebar-toggle-item>Ecosystems</span>
-                </a>
-            </li>
-        )
-    }
+	if (isEcosystemEnabled) {
+		return (
+			<li>
+				<a
+					href={pathRoutes.ecosystem.root}
+					className="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						className="flex-shrink-0 w-6 h-6 pt-1 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+						width="24"
+						height="24"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke="currentColor"
+							strokeWidth=".8"
+							d="M7.113 12.626c.043.953.182 1.857.402 2.684a8.156 8.156 0 0 0-1.095.552 6.745 6.745 0 0 1-1.175-3.236h1.868Zm4.265-7.306v2.96a10.972 10.972 0 0 1-2.292-.356c.578-1.405 1.41-2.314 2.292-2.605ZM7.905 7.514a7.017 7.017 0 0 1-.675-.334c.415-.411.884-.77 1.394-1.063a8.1 8.1 0 0 0-.72 1.397Zm.713 10.372a6.825 6.825 0 0 1-1.387-1.06c.21-.12.435-.23.672-.333.203.506.443.974.715 1.393ZM12.623 5.32c.881.291 1.714 1.2 2.291 2.605-.71.193-1.485.315-2.291.356V5.32ZM9.086 16.08c.71-.194 1.486-.315 2.292-.357v2.962c-.881-.292-1.714-1.201-2.292-2.606Zm7.008.413c.239.104.464.215.675.334-.415.411-.883.77-1.394 1.063a8.1 8.1 0 0 0 .72-1.397Zm-.709-10.371c.507.292.973.65 1.387 1.059-.21.12-.435.23-.672.333a8.053 8.053 0 0 0-.715-1.392Zm-2.762 12.563v-2.962c.806.041 1.58.163 2.291.356-.577 1.405-1.41 2.314-2.291 2.606ZM11.38 9.526v1.858H8.354c.041-.81.16-1.578.341-2.279.839.233 1.745.377 2.683.42Zm7.374 3.097a6.745 6.745 0 0 1-1.175 3.238 8.138 8.138 0 0 0-1.095-.553c.222-.828.36-1.732.402-2.685h1.868ZM11.38 14.48a12.26 12.26 0 0 0-2.684.421 11.41 11.41 0 0 1-.34-2.278h3.023v1.857Zm-6.131-3.096a6.745 6.745 0 0 1 1.174-3.238c.34.207.708.39 1.096.552a12.54 12.54 0 0 0-.402 2.686H5.249Zm7.374 3.096v-1.857h3.024a11.46 11.46 0 0 1-.341 2.278 12.198 12.198 0 0 0-2.683-.42Zm4.267-3.099a12.707 12.707 0 0 0-.403-2.684 8.16 8.16 0 0 0 1.095-.552 6.745 6.745 0 0 1 1.175 3.236H16.89Zm-4.267.003V9.526a12.196 12.196 0 0 0 2.683-.42c.182.7.3 1.469.34 2.278h-3.023Z"
+						/>
+						<path
+							fill="currentColor"
+							d="M12 24.008c2.253 0 4.43-.63 6.327-1.811l-.321-.322A11.482 11.482 0 0 1 12 23.566C5.626 23.566.439 18.38.439 12.006c0-1.12.159-2.225.474-3.285a.22.22 0 0 0-.147-.274.218.218 0 0 0-.274.15A11.95 11.95 0 0 0 0 12.005c0 6.619 5.384 12.003 12.003 12.003H12ZM12.002.442c6.374 0 11.56 5.187 11.56 11.56 0 1.12-.158 2.225-.473 3.285a.22.22 0 0 0 .209.283.223.223 0 0 0 .212-.16c.327-1.098.492-2.246.492-3.407C24.002 5.384 18.617 0 11.999 0c-2.253 0-4.43.63-6.327 1.811l.32.322A11.482 11.482 0 0 1 12 .442h.003Zm-8.1.222L2.43 5.082 6.848 3.61 3.902.664Zm17.673 18.258-4.419 1.473 2.946 2.945 1.473-4.418Z"
+						/>
+					</svg>
+					<span className="ml-3" sidebar-toggle-item>
+						Ecosystems
+					</span>
+				</a>
+			</li>
+		);
+	}
 
-    return <></>
-}
+	return <></>;
+};
 
-export default EcosystemSidebarOption
\ No newline at end of file
+export default EcosystemSidebarOption;
diff --git a/src/components/organization/EditOrgdetailsModal.tsx b/src/components/organization/EditOrgdetailsModal.tsx
index 3e055d5a6..fd7055d7c 100644
--- a/src/components/organization/EditOrgdetailsModal.tsx
+++ b/src/components/organization/EditOrgdetailsModal.tsx
@@ -11,6 +11,7 @@ import type { AxiosResponse } from 'axios';
 import { updateOrganization } from "../../api/organization";
 import type { Organisation } from "./interfaces";
 import React from "react";
+import defaultUserIcon from '../../../public/images/person_FILL1_wght400_GRAD0_opsz24.svg'
 
 interface Values {
 		website: any;
@@ -245,8 +246,6 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
                                 <div
                                     className="items-center sm:flex 2xl:flex sm:space-x-4 xl:space-x-4 2xl:space-x-4"
                                 >
-
-
                                     {
                                         (typeof (logoImage.logoFile) === "string" && props?.orgData?.logoUrl) ?
                                             <img
@@ -257,6 +256,7 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
                                             : typeof (logoImage.logoFile) === "string" ?
                                                 <Avatar
                                                     size="lg"
+                                                    img={defaultUserIcon}
                                                 /> :
                                                 <img
                                                     className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
diff --git a/src/components/organization/users/Members.tsx b/src/components/organization/users/Members.tsx
index 7e831c5c2..677419589 100644
--- a/src/components/organization/users/Members.tsx
+++ b/src/components/organization/users/Members.tsx
@@ -8,235 +8,249 @@ import type { AxiosResponse } from 'axios';
 import CustomSpinner from '../../CustomSpinner';
 import EditUserRoleModal from './EditUserRolesModal';
 import { Pagination } from 'flowbite-react';
-import {Roles} from '../../../utils/enums/roles'
+import { Roles } from '../../../utils/enums/roles';
 import SearchInput from '../../SearchInput';
 import type { User } from '../interfaces/users';
 import { getFromLocalStorage } from '../../../api/Auth';
 import { getOrganizationUsers } from '../../../api/organization';
 
 const initialPageState = {
-    pageNumber: 1,
-    pageSize: 10,
-    total: 0,
+	pageNumber: 1,
+	pageSize: 10,
+	total: 0,
 };
 
-
 const Members = () => {
-    const [openModal, setOpenModal] = useState<boolean>(false);
-    const [loading, setLoading] = useState<boolean>(false)
-    const [message, setMessage] = useState<string | null>(null)
-    const [error, setError] = useState<string | null>(null)
-    const [userRoles, setUserRoles] = useState<string[]>([])
-    const [currentPage, setCurrentPage] = useState(initialPageState);
-    const timestamp = Date.now();
-
-    const onPageChange = (page: number) => {
-        setCurrentPage({
-            ...currentPage,
-            pageNumber: page
-        })
-    };
-    const [searchText, setSearchText] = useState("");
-
-    const [usersList, setUsersList] = useState<Array<User> | null>(null)
-    const [selectedUser, setSelectedUser] = useState<User | null>(null)
-    const props = { openModal, setOpenModal };
-
-    //Fetch the user organization list
-    const getAllUsers = async () => {
-        setLoading(true)
-
-        const response = await getOrganizationUsers(currentPage.pageNumber, currentPage.pageSize, searchText);
-        const { data } = response as AxiosResponse
-
-        if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-
-            const totalPages = data?.data?.totalPages;
-
-            const usersList = data?.data?.users.map((userOrg: User) => {
-                const roles: string[] = userOrg.userOrgRoles.map(role => role.orgRole.name)
-                userOrg.roles = roles
-                return userOrg;
-            })
-
-            if (usersList.length === 0) {
-                setError('No Data Found')
-            }
-
-            setUsersList(usersList)
-            setCurrentPage({
-                ...currentPage,
-                total: totalPages
-            })
-
-        } else {
-            setError(response as string)
-        }
-
-        setLoading(false)
-    }
-
-    //This useEffect is called when the searchText changes 
-    useEffect(() => {
-
-        // let getData: string | number | NodeJS.Timeout | undefined;
-        let getData: NodeJS.Timeout
-
-        if (searchText.length >= 1) {
-            getData = setTimeout(() => {
-                getAllUsers()
-
-            }, 1000)
-        } else {
-            getAllUsers()
-        }
-
-        return () => clearTimeout(getData)
-    }, [searchText, openModal, currentPage.pageNumber])
-
-    const getUserRoles = async () => {
-        const orgRoles = await getFromLocalStorage(storageKeys.ORG_ROLES)
-        const roles = orgRoles.split(',')
-        setUserRoles(roles)        
-    }
-
-    useEffect(() => {
-        getUserRoles()
-    },[])
-
-    //onCHnage of Search input text
-    const searchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-        setSearchText(e.target.value);
-    }
-
-    const editUserRole = (user: User) => {
-        setSelectedUser(user)
-        props.setOpenModal(true)
-    }
-
-    return (
-       
-            <div>
-                <div
-                    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"
-                >
-                    <div className="flex items-center justify-between mb-4">
-                        <SearchInput
-                            onInputChange={searchInputChange}
-                        />                     
-                    </div>
-
-                    <EditUserRoleModal
-                        openModal={props.openModal}
-                        user={selectedUser as User}
-                        setMessage={(data) => setMessage(data)}
-                        setOpenModal={
-                            props.setOpenModal
-                        } />
-
-                    <AlertComponent
-                        message={message ? message : error}
-                        type={message ? 'success' : 'failure'}
-                        onAlertClose={() => {
-                            setMessage(null)
-                            setError(null)
-                        }}
-                    />
-                    {loading
-                        ? <div className="flex items-center justify-center mb-4">
-                          
-                            <CustomSpinner/>
-                        </div>
-                        : usersList && usersList?.length > 0 && <div
-                            className="p-2 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-3 dark:bg-gray-800"
-                        >
-                            <div className="flow-root">
-                                <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-                                    {
-                                        usersList.map((user) => (
-
-                                            <li className="p-4">
-                                                <div
-                                                    className="flex flex-wrap justify-between xl:block 2xl:flex align-center 2xl:space-x-4"
-                                                >
-                                                    <div className="min-w-[40%] flex space-x-4 xl:mb-4 2xl:mb-0">
-                                                       
-                                                        <div className="flex-1">
-                                                            <p
-                                                                className="text-base font-semibold text-gray-900 leading-none truncate dark:text-white"
-                                                            >
-                                                                {user.firstName} {user.lastName}
-                                                            </p>
-
-                                                            <div className="flow-root h-auto">
-                                                                <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-                                                                    <li className="pt-3 sm:pt-3 overflow-auto">
-                                                                        <div className="items-center space-x-4">
-                                                                            <div className="inline-flex items-center text-base font-normal text-gray-900 dark:text-white">
-                                                                                Roles:
-                                                                                {user.roles &&
-                                                                                    user.roles.length > 0 &&
-                                                                                    user.roles.map((role, index: number) => {
-                                                                                        return (
-                                                                                            <span
-                                                                                                key={index}
-                                                                                                className="m-1 bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
-                                                                                            >
-                                                                                                {role.charAt(0).toUpperCase() + role.slice(1)}
-                                                                                            </span>
-                                                                                        );
-                                                                                    })}
-                                                                            </div>
-
-                                                                        </div>
-                                                                    </li>
-                                                                </ul>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-
-                                                    <span className='min-w-[35%] flex items-center justify-items-start text-gray-900 dark:text-white'>
-                                                        {
-                                                            user.email
-                                                        }
-                                                    </span>
-
-                                                    {
-                                                        !user.roles.includes(Roles.OWNER) && (userRoles.includes(Roles.OWNER) || userRoles.includes(Roles.ADMIN))
-                                                            ? <p
-                                                                onClick={() => editUserRole(user)}
-                                                                className="cursor-pointer mr-2 flex items-center text-sm font-medium text-gray-500 dark:text-gray-400"
-                                                            >
-                                                                <svg aria-hidden="true" className="mr-1 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clipRule="evenodd"></path></svg>
-                                                            </p>
-                                                            : <p
-                                                                onClick={() => editUserRole(user)}
-                                                                className="invisible cursor-pointer mr-2 flex items-center text-sm font-medium text-gray-500 dark:text-gray-400"
-                                                            >
-                                                                <svg aria-hidden="true" className="mr-1 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clipRule="evenodd"></path></svg>
-                                                            </p>
-                                                    }
-
-                                                </div>
-                                            </li>
-                                        ))
-                                    }
-                                </ul>
-                            </div>
-                        </div>
-                    }
-
-                    <div className="flex items-center justify-end mb-4">
-
-                        <Pagination
-                            currentPage={currentPage.pageNumber}
-                            onPageChange={onPageChange}
-                            totalPages={currentPage.total}
-                        />
-                    </div>
-                </div>
-            </div>
-    )
-}
-
-export default Members;
\ No newline at end of file
+	const [openModal, setOpenModal] = useState<boolean>(false);
+	const [loading, setLoading] = useState<boolean>(false);
+	const [message, setMessage] = useState<string | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [userRoles, setUserRoles] = useState<string[]>([]);
+	const [currentPage, setCurrentPage] = useState(initialPageState);
+	const timestamp = Date.now();
+
+	const onPageChange = (page: number) => {
+		setCurrentPage({
+			...currentPage,
+			pageNumber: page,
+		});
+	};
+	const [searchText, setSearchText] = useState('');
+
+	const [usersList, setUsersList] = useState<Array<User> | null>(null);
+	const [selectedUser, setSelectedUser] = useState<User | null>(null);
+	const props = { openModal, setOpenModal };
+
+	//Fetch the user organization list
+	const getAllUsers = async () => {
+		setLoading(true);
+
+		const response = await getOrganizationUsers(
+			currentPage.pageNumber,
+			currentPage.pageSize,
+			searchText,
+		);
+		const { data } = response as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			const totalPages = data?.data?.totalPages;
+
+			const usersList = data?.data?.users.map((userOrg: User) => {
+				const roles: string[] = userOrg.userOrgRoles.map(
+					(role) => role.orgRole.name,
+				);
+				userOrg.roles = roles;
+				return userOrg;
+			});
+
+			if (usersList.length === 0) {
+				setError('No Data Found');
+			}
+
+			setUsersList(usersList);
+			setCurrentPage({
+				...currentPage,
+				total: totalPages,
+			});
+		} else {
+			setError(response as string);
+		}
+
+		setLoading(false);
+	};
+
+	//This useEffect is called when the searchText changes
+	useEffect(() => {
+		// let getData: string | number | NodeJS.Timeout | undefined;
+		let getData: NodeJS.Timeout;
+
+		if (searchText.length >= 1) {
+			getData = setTimeout(() => {
+				getAllUsers();
+			}, 1000);
+		} else {
+			getAllUsers();
+		}
+
+		return () => clearTimeout(getData);
+	}, [searchText, openModal, currentPage.pageNumber]);
+
+	const getUserRoles = async () => {
+		const orgRoles = await getFromLocalStorage(storageKeys.ORG_ROLES);
+		const roles = orgRoles.split(',');
+		setUserRoles(roles);
+	};
+
+	useEffect(() => {
+		getUserRoles();
+	}, []);
+
+	//onCHnage of Search input text
+	const searchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setSearchText(e.target.value);
+	};
+
+	const editUserRole = (user: User) => {
+		setSelectedUser(user);
+		props.setOpenModal(true);
+	};
+
+	return (
+		<div>
+			<div 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">
+				<div className="flex items-center justify-between mb-4">
+					<SearchInput onInputChange={searchInputChange} />
+				</div>
+
+				<EditUserRoleModal
+					openModal={props.openModal}
+					user={selectedUser as User}
+					setMessage={(data) => setMessage(data)}
+					setOpenModal={props.setOpenModal}
+				/>
+
+				<AlertComponent
+					message={message ? message : error}
+					type={message ? 'success' : 'failure'}
+					onAlertClose={() => {
+						setMessage(null);
+						setError(null);
+					}}
+				/>
+				{loading ? (
+					<div className="flex items-center justify-center mb-4">
+						<CustomSpinner />
+					</div>
+				) : (
+					usersList &&
+					usersList?.length > 0 && (
+						<div className="p-2 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-3 dark:bg-gray-800">
+							<div className="flow-root">
+								<ul className="divide-y divide-gray-200 dark:divide-gray-700">
+									{usersList.map((user) => (
+										<li className="p-4">
+											<div className="flex flex-wrap justify-between xl:block 2xl:flex align-center 2xl:space-x-4">
+												<div className="min-w-[40%] flex space-x-4 xl:mb-4 2xl:mb-0">
+													<div className="flex-1">
+														<p className="text-base font-semibold text-gray-900 leading-none truncate dark:text-white">
+															{user.firstName} {user.lastName}
+														</p>
+
+														<div className="flow-root h-auto">
+															<ul className="divide-y divide-gray-200 dark:divide-gray-700">
+																<li className="pt-3 sm:pt-3 overflow-auto">
+																	<div className="items-center space-x-4">
+																		<div className="inline-flex items-center text-base font-normal text-gray-900 dark:text-white">
+																			Roles:
+																			{user.roles &&
+																				user.roles.length > 0 &&
+																				user.roles.map(
+																					(role, index: number) => {
+																						return (
+																							<span
+																								key={index}
+																								className="m-1 bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
+																							>
+																								{role.charAt(0).toUpperCase() +
+																									role.slice(1)}
+																							</span>
+																						);
+																					},
+																				)}
+																		</div>
+																	</div>
+																</li>
+															</ul>
+														</div>
+													</div>
+												</div>
+
+												<span className="min-w-[35%] flex items-center justify-items-start text-gray-900 dark:text-white">
+													{user.email}
+												</span>
+
+												{!user.roles.includes(Roles.OWNER) &&
+												(userRoles.includes(Roles.OWNER) ||
+													userRoles.includes(Roles.ADMIN)) ? (
+													<button
+														onClick={() => editUserRole(user)}
+														className="cursor-pointer mr-2 flex items-center text-sm font-medium text-gray-500 dark:text-gray-400"
+													>
+														<svg
+															className="h-5 w-6 mr-1 text-black dark:text-white"
+															viewBox="0 0 24 24"
+															strokeWidth="2"
+															stroke="currentColor"
+															fill="none"
+															strokeLinecap="round"
+															strokeLinejoin="round"
+														>
+															<path stroke="none" d="M0 0h24v24H0z" />
+															<path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
+															<path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
+															<line x1="16" y1="5" x2="19" y2="8" />
+														</svg>{''}
+													</button>
+												) : (
+													<button
+														onClick={() => editUserRole(user)}
+														className="invisible cursor-pointer mr-2 flex items-center text-sm font-medium text-gray-500 dark:text-gray-400"
+													>
+														<svg
+															aria-hidden="true"
+															className="mr-1 -ml-1 w-5 h-5"
+															fill="currentColor"
+															viewBox="0 0 20 20"
+															xmlns="http://www.w3.org/2000/svg"
+														>
+															<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+															<path
+																fillRule="evenodd"
+																d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+																clipRule="evenodd"
+															></path>
+														</svg>
+													</button>
+												)}
+											</div>
+										</li>
+									))}
+								</ul>
+							</div>
+						</div>
+					)
+				)}
+
+				<div className="flex items-center justify-end mb-4">
+					<Pagination
+						currentPage={currentPage.pageNumber}
+						onPageChange={onPageChange}
+						totalPages={currentPage.total}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Members;