diff --git a/package-lock.json b/package-lock.json
index 61136c553..a8497674c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,7 +49,7 @@
 				"socket.io-client": "^4.6.2",
 				"tailwind-scrollbar": "^3.0.4",
 				"tailwindcss": "^3.3.3",
-				"uuidv4": "^6.2.13",
+				"uuid": "^9.0.1",
 				"yup": "^1.2.0"
 			},
 			"devDependencies": {
@@ -59,6 +59,7 @@
 				"@types/downloadjs": "^1.4.3",
 				"@types/eslint": "^8.21.1",
 				"@types/secure-random-password": "^0.2.1",
+				"@types/uuid": "^9.0.3",
 				"@typescript-eslint/eslint-plugin": "^5.54.1",
 				"@typescript-eslint/parser": "^5.54.1",
 				"astro-eslint-parser": "^0.11.0",
@@ -222,22 +223,6 @@
 			"resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
 			"integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw=="
 		},
-		"node_modules/@astrojs/markdown-remark/node_modules/jsonc-parser": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-			"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
-		},
-		"node_modules/@astrojs/markdown-remark/node_modules/shiki": {
-			"version": "0.14.3",
-			"resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.3.tgz",
-			"integrity": "sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==",
-			"dependencies": {
-				"ansi-sequence-parser": "^1.1.0",
-				"jsonc-parser": "^3.2.0",
-				"vscode-oniguruma": "^1.7.0",
-				"vscode-textmate": "^8.0.0"
-			}
-		},
 		"node_modules/@astrojs/prism": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-2.1.2.tgz",
@@ -1353,15 +1338,6 @@
 			"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
 			"dev": true
 		},
-		"node_modules/@types/jsonwebtoken": {
-			"version": "9.0.2",
-			"resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
-			"integrity": "sha512-drE6uz7QBKq1fYqqoFKTDRdFCPHd5TCub75BM+D+cMx7NU9hUz7SESLfC2fSCXVFMO5Yj8sOWHuGqPgjc+fz0Q==",
-			"dev": true,
-			"dependencies": {
-				"@types/node": "*"
-			}
-		},
 		"node_modules/@types/mdast": {
 			"version": "3.0.12",
 			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.12.tgz",
@@ -1421,16 +1397,6 @@
 				"@types/react": "*"
 			}
 		},
-		"node_modules/@types/react-dom/node_modules/@types/react": {
-			"version": "18.2.14",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.14.tgz",
-			"integrity": "sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==",
-			"dependencies": {
-				"@types/prop-types": "*",
-				"@types/scheduler": "*",
-				"csstype": "^3.0.2"
-			}
-		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -1467,9 +1433,10 @@
 			"integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g=="
 		},
 		"node_modules/@types/uuid": {
-			"version": "8.3.4",
-			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
-			"integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
+			"version": "9.0.3",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.3.tgz",
+			"integrity": "sha512-taHQQH/3ZyI3zP8M/puluDEIEvtQHVYcC6y3N8ijFtAd28+Ey/G4sg1u2gB01S8MwybLOKAp9/yCMu/uR5l3Ug==",
+			"dev": true
 		},
 		"node_modules/@types/websocket": {
 			"version": "1.0.5",
@@ -2024,22 +1991,6 @@
 				"url": "https://github.com/sponsors/ota-meshi"
 			}
 		},
-		"node_modules/astro/node_modules/jsonc-parser": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-			"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
-		},
-		"node_modules/astro/node_modules/shiki": {
-			"version": "0.14.3",
-			"resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.3.tgz",
-			"integrity": "sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==",
-			"dependencies": {
-				"ansi-sequence-parser": "^1.1.0",
-				"jsonc-parser": "^3.2.0",
-				"vscode-oniguruma": "^1.7.0",
-				"vscode-textmate": "^8.0.0"
-			}
-		},
 		"node_modules/astrojs-compiler-sync": {
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/astrojs-compiler-sync/-/astrojs-compiler-sync-0.3.3.tgz",
@@ -2384,11 +2335,6 @@
 				"ieee754": "^1.2.1"
 			}
 		},
-		"node_modules/buffer-equal-constant-time": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-			"integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
-		},
 		"node_modules/bufferutil": {
 			"version": "4.0.7",
 			"resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
@@ -3105,14 +3051,6 @@
 			"resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
 			"integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
 		},
-		"node_modules/ecdsa-sig-formatter": {
-			"version": "1.0.11",
-			"resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-			"integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-			"dependencies": {
-				"safe-buffer": "^5.0.1"
-			}
-		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.4.484",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.484.tgz",
@@ -4262,23 +4200,6 @@
 				"tailwindcss": "^3"
 			}
 		},
-		"node_modules/flowbite-react/node_modules/flowbite": {
-			"version": "1.7.0",
-			"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.7.0.tgz",
-			"integrity": "sha512-OTTmnhRgv85Rs+mcMaVU7zB6EvRQs7BaQziyMUsZLRjW9aUpeQyqKjLmxsVMMCdr8isYPCLd6UL7X1IaSVI0WQ==",
-			"dependencies": {
-				"@popperjs/core": "^2.9.3",
-				"mini-svg-data-uri": "^1.4.3"
-			}
-		},
-		"node_modules/flowbite-react/node_modules/react-icons": {
-			"version": "4.10.1",
-			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
-			"integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
-			"peerDependencies": {
-				"react": "*"
-			}
-		},
 		"node_modules/flowbite-typography": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/flowbite-typography/-/flowbite-typography-1.0.3.tgz",
@@ -5427,46 +5348,6 @@
 			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.3.1.tgz",
 			"integrity": "sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg=="
 		},
-		"node_modules/jsonwebtoken": {
-			"version": "9.0.2",
-			"resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
-			"integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
-			"dependencies": {
-				"jws": "^3.2.2",
-				"lodash.includes": "^4.3.0",
-				"lodash.isboolean": "^3.0.3",
-				"lodash.isinteger": "^4.0.4",
-				"lodash.isnumber": "^3.0.3",
-				"lodash.isplainobject": "^4.0.6",
-				"lodash.isstring": "^4.0.1",
-				"lodash.once": "^4.0.0",
-				"ms": "^2.1.1",
-				"semver": "^7.5.4"
-			},
-			"engines": {
-				"node": ">=12",
-				"npm": ">=6"
-			}
-		},
-		"node_modules/jwa": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
-			"integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
-			"dependencies": {
-				"buffer-equal-constant-time": "1.0.1",
-				"ecdsa-sig-formatter": "1.0.11",
-				"safe-buffer": "^5.0.1"
-			}
-		},
-		"node_modules/jws": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-			"integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-			"dependencies": {
-				"jwa": "^1.4.1",
-				"safe-buffer": "^5.0.1"
-			}
-		},
 		"node_modules/kind-of": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -5580,46 +5461,16 @@
 			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
 			"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="
 		},
-		"node_modules/lodash.includes": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-			"integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
-		},
-		"node_modules/lodash.isboolean": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-			"integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
-		},
-		"node_modules/lodash.isinteger": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-			"integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
-		},
-		"node_modules/lodash.isnumber": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-			"integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
-		},
 		"node_modules/lodash.isplainobject": {
 			"version": "4.0.6",
 			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
 			"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
 		},
-		"node_modules/lodash.isstring": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-			"integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
-		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
 			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
 		},
-		"node_modules/lodash.once": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-			"integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
-		},
 		"node_modules/log-symbols": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
@@ -6900,6 +6751,44 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width-cjs": {
+			"name": "string-width",
+			"version": "4.2.3",
+			"inBundle": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width-cjs/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"inBundle": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width-cjs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"inBundle": true,
+			"license": "MIT"
+		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width-cjs/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"inBundle": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": {
 			"version": "7.1.0",
 			"inBundle": true,
@@ -6914,6 +6803,80 @@
 				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
 			}
 		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi-cjs": {
+			"name": "strip-ansi",
+			"version": "6.0.1",
+			"inBundle": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"inBundle": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs": {
+			"name": "wrap-ansi",
+			"version": "7.0.0",
+			"inBundle": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"inBundle": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"inBundle": true,
+			"license": "MIT"
+		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs/node_modules/string-width": {
+			"version": "4.2.3",
+			"inBundle": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"inBundle": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/npm/node_modules/@isaacs/string-locale-compare": {
 			"version": "1.1.0",
 			"inBundle": true,
@@ -9235,20 +9198,8 @@
 		},
 		"node_modules/npm/node_modules/string-width": {
 			"version": "4.2.3",
-			"inBundle": true,
-			"license": "MIT",
-			"dependencies": {
-				"emoji-regex": "^8.0.0",
-				"is-fullwidth-code-point": "^3.0.0",
-				"strip-ansi": "^6.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/npm/node_modules/string-width-cjs": {
-			"name": "string-width",
-			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 			"inBundle": true,
 			"license": "MIT",
 			"dependencies": {
@@ -9262,18 +9213,8 @@
 		},
 		"node_modules/npm/node_modules/strip-ansi": {
 			"version": "6.0.1",
-			"inBundle": true,
-			"license": "MIT",
-			"dependencies": {
-				"ansi-regex": "^5.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/npm/node_modules/strip-ansi-cjs": {
-			"name": "strip-ansi",
-			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
 			"inBundle": true,
 			"license": "MIT",
 			"dependencies": {
@@ -9446,24 +9387,9 @@
 			}
 		},
 		"node_modules/npm/node_modules/wrap-ansi": {
-			"version": "8.1.0",
-			"inBundle": true,
-			"license": "MIT",
-			"dependencies": {
-				"ansi-styles": "^6.1.0",
-				"string-width": "^5.0.1",
-				"strip-ansi": "^7.0.1"
-			},
-			"engines": {
-				"node": ">=12"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-			}
-		},
-		"node_modules/npm/node_modules/wrap-ansi-cjs": {
-			"name": "wrap-ansi",
 			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
 			"inBundle": true,
 			"license": "MIT",
 			"dependencies": {
@@ -10839,9 +10765,9 @@
 			}
 		},
 		"node_modules/semver": {
-			"version": "7.5.4",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-			"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+			"version": "7.5.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+			"integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
 			"dependencies": {
 				"lru-cache": "^6.0.0"
 			},
@@ -11905,22 +11831,17 @@
 			}
 		},
 		"node_modules/uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
 			"bin": {
 				"uuid": "dist/bin/uuid"
 			}
 		},
-		"node_modules/uuidv4": {
-			"version": "6.2.13",
-			"resolved": "https://registry.npmjs.org/uuidv4/-/uuidv4-6.2.13.tgz",
-			"integrity": "sha512-AXyzMjazYB3ovL3q051VLH06Ixj//Knx7QnUSi1T//Ie3io6CpsPu9nVMOx5MoLWh6xV0B9J0hIaxungxXUbPQ==",
-			"dependencies": {
-				"@types/uuid": "8.3.4",
-				"uuid": "8.3.2"
-			}
-		},
 		"node_modules/uvu": {
 			"version": "0.5.6",
 			"resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
@@ -12511,22 +12432,6 @@
 					"version": "1.5.0",
 					"resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
 					"integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw=="
-				},
-				"jsonc-parser": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-					"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
-				},
-				"shiki": {
-					"version": "0.14.3",
-					"resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.3.tgz",
-					"integrity": "sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==",
-					"requires": {
-						"ansi-sequence-parser": "^1.1.0",
-						"jsonc-parser": "^3.2.0",
-						"vscode-oniguruma": "^1.7.0",
-						"vscode-textmate": "^8.0.0"
-					}
 				}
 			}
 		},
@@ -13383,15 +13288,6 @@
 			"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
 			"dev": true
 		},
-		"@types/jsonwebtoken": {
-			"version": "9.0.2",
-			"resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
-			"integrity": "sha512-drE6uz7QBKq1fYqqoFKTDRdFCPHd5TCub75BM+D+cMx7NU9hUz7SESLfC2fSCXVFMO5Yj8sOWHuGqPgjc+fz0Q==",
-			"dev": true,
-			"requires": {
-				"@types/node": "*"
-			}
-		},
 		"@types/mdast": {
 			"version": "3.0.12",
 			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.12.tgz",
@@ -13449,18 +13345,6 @@
 			"integrity": "sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==",
 			"requires": {
 				"@types/react": "*"
-			},
-			"dependencies": {
-				"@types/react": {
-					"version": "18.2.14",
-					"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.14.tgz",
-					"integrity": "sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==",
-					"requires": {
-						"@types/prop-types": "*",
-						"@types/scheduler": "*",
-						"csstype": "^3.0.2"
-					}
-				}
 			}
 		},
 		"@types/resolve": {
@@ -13499,9 +13383,10 @@
 			"integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g=="
 		},
 		"@types/uuid": {
-			"version": "8.3.4",
-			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
-			"integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
+			"version": "9.0.3",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.3.tgz",
+			"integrity": "sha512-taHQQH/3ZyI3zP8M/puluDEIEvtQHVYcC6y3N8ijFtAd28+Ey/G4sg1u2gB01S8MwybLOKAp9/yCMu/uR5l3Ug==",
+			"dev": true
 		},
 		"@types/websocket": {
 			"version": "1.0.5",
@@ -13875,24 +13760,6 @@
 				"which-pm": "^2.0.0",
 				"yargs-parser": "^21.1.1",
 				"zod": "^3.20.6"
-			},
-			"dependencies": {
-				"jsonc-parser": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-					"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
-				},
-				"shiki": {
-					"version": "0.14.3",
-					"resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.3.tgz",
-					"integrity": "sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==",
-					"requires": {
-						"ansi-sequence-parser": "^1.1.0",
-						"jsonc-parser": "^3.2.0",
-						"vscode-oniguruma": "^1.7.0",
-						"vscode-textmate": "^8.0.0"
-					}
-				}
 			}
 		},
 		"astro-eslint-parser": {
@@ -14120,11 +13987,6 @@
 				"ieee754": "^1.2.1"
 			}
 		},
-		"buffer-equal-constant-time": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-			"integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
-		},
 		"bufferutil": {
 			"version": "4.0.7",
 			"resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
@@ -14597,14 +14459,6 @@
 			"resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
 			"integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
 		},
-		"ecdsa-sig-formatter": {
-			"version": "1.0.11",
-			"resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-			"integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-			"requires": {
-				"safe-buffer": "^5.0.1"
-			}
-		},
 		"electron-to-chromium": {
 			"version": "1.4.484",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.484.tgz",
@@ -15465,23 +15319,6 @@
 				"react-icons": "^4.10.1",
 				"react-indiana-drag-scroll": "^2.2.0",
 				"tailwind-merge": "^1.13.2"
-			},
-			"dependencies": {
-				"flowbite": {
-					"version": "1.7.0",
-					"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.7.0.tgz",
-					"integrity": "sha512-OTTmnhRgv85Rs+mcMaVU7zB6EvRQs7BaQziyMUsZLRjW9aUpeQyqKjLmxsVMMCdr8isYPCLd6UL7X1IaSVI0WQ==",
-					"requires": {
-						"@popperjs/core": "^2.9.3",
-						"mini-svg-data-uri": "^1.4.3"
-					}
-				},
-				"react-icons": {
-					"version": "4.10.1",
-					"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
-					"integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
-					"requires": {}
-				}
 			}
 		},
 		"flowbite-typography": {
@@ -16250,42 +16087,6 @@
 			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.3.1.tgz",
 			"integrity": "sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg=="
 		},
-		"jsonwebtoken": {
-			"version": "9.0.2",
-			"resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
-			"integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
-			"requires": {
-				"jws": "^3.2.2",
-				"lodash.includes": "^4.3.0",
-				"lodash.isboolean": "^3.0.3",
-				"lodash.isinteger": "^4.0.4",
-				"lodash.isnumber": "^3.0.3",
-				"lodash.isplainobject": "^4.0.6",
-				"lodash.isstring": "^4.0.1",
-				"lodash.once": "^4.0.0",
-				"ms": "^2.1.1",
-				"semver": "^7.5.4"
-			}
-		},
-		"jwa": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
-			"integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
-			"requires": {
-				"buffer-equal-constant-time": "1.0.1",
-				"ecdsa-sig-formatter": "1.0.11",
-				"safe-buffer": "^5.0.1"
-			}
-		},
-		"jws": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-			"integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-			"requires": {
-				"jwa": "^1.4.1",
-				"safe-buffer": "^5.0.1"
-			}
-		},
 		"kind-of": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -16374,46 +16175,16 @@
 			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
 			"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="
 		},
-		"lodash.includes": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-			"integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
-		},
-		"lodash.isboolean": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-			"integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
-		},
-		"lodash.isinteger": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-			"integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
-		},
-		"lodash.isnumber": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-			"integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
-		},
 		"lodash.isplainobject": {
 			"version": "4.0.6",
 			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
 			"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
 		},
-		"lodash.isstring": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-			"integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
-		},
 		"lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
 			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
 		},
-		"lodash.once": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-			"integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
-		},
 		"log-symbols": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
@@ -17193,12 +16964,86 @@
 								"strip-ansi": "^7.0.1"
 							}
 						},
+						"string-width-cjs": {
+							"version": "npm:string-width@4.2.3",
+							"bundled": true,
+							"requires": {
+								"emoji-regex": "^8.0.0",
+								"is-fullwidth-code-point": "^3.0.0",
+								"strip-ansi": "^6.0.1"
+							},
+							"dependencies": {
+								"ansi-regex": {
+									"version": "5.0.1",
+									"bundled": true
+								},
+								"emoji-regex": {
+									"version": "8.0.0",
+									"bundled": true
+								},
+								"strip-ansi": {
+									"version": "6.0.1",
+									"bundled": true,
+									"requires": {
+										"ansi-regex": "^5.0.1"
+									}
+								}
+							}
+						},
 						"strip-ansi": {
 							"version": "7.1.0",
 							"bundled": true,
 							"requires": {
 								"ansi-regex": "^6.0.1"
 							}
+						},
+						"strip-ansi-cjs": {
+							"version": "npm:strip-ansi@6.0.1",
+							"bundled": true,
+							"requires": {
+								"ansi-regex": "^5.0.1"
+							},
+							"dependencies": {
+								"ansi-regex": {
+									"version": "5.0.1",
+									"bundled": true
+								}
+							}
+						},
+						"wrap-ansi-cjs": {
+							"version": "npm:wrap-ansi@7.0.0",
+							"bundled": true,
+							"requires": {
+								"ansi-styles": "^4.0.0",
+								"string-width": "^4.1.0",
+								"strip-ansi": "^6.0.0"
+							},
+							"dependencies": {
+								"ansi-regex": {
+									"version": "5.0.1",
+									"bundled": true
+								},
+								"emoji-regex": {
+									"version": "8.0.0",
+									"bundled": true
+								},
+								"string-width": {
+									"version": "4.2.3",
+									"bundled": true,
+									"requires": {
+										"emoji-regex": "^8.0.0",
+										"is-fullwidth-code-point": "^3.0.0",
+										"strip-ansi": "^6.0.1"
+									}
+								},
+								"strip-ansi": {
+									"version": "6.0.1",
+									"bundled": true,
+									"requires": {
+										"ansi-regex": "^5.0.1"
+									}
+								}
+							}
 						}
 					}
 				},
@@ -18701,15 +18546,8 @@
 				},
 				"string-width": {
 					"version": "4.2.3",
-					"bundled": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"string-width-cjs": {
-					"version": "npm:string-width@4.2.3",
+					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 					"bundled": true,
 					"requires": {
 						"emoji-regex": "^8.0.0",
@@ -18719,13 +18557,8 @@
 				},
 				"strip-ansi": {
 					"version": "6.0.1",
-					"bundled": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"strip-ansi-cjs": {
-					"version": "npm:strip-ansi@6.0.1",
+					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
 					"bundled": true,
 					"requires": {
 						"ansi-regex": "^5.0.1"
@@ -18845,12 +18678,13 @@
 					}
 				},
 				"wrap-ansi": {
-					"version": "8.1.0",
+					"version": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+					"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
 					"bundled": true,
 					"requires": {
-						"ansi-styles": "^6.1.0",
-						"string-width": "^5.0.1",
-						"strip-ansi": "^7.0.1"
+						"ansi-styles": "^4.0.0",
+						"string-width": "^4.1.0",
+						"strip-ansi": "^6.0.0"
 					},
 					"dependencies": {
 						"ansi-regex": {
@@ -18883,15 +18717,6 @@
 						}
 					}
 				},
-				"wrap-ansi-cjs": {
-					"version": "npm:wrap-ansi@7.0.0",
-					"bundled": true,
-					"requires": {
-						"ansi-styles": "^4.0.0",
-						"string-width": "^4.1.0",
-						"strip-ansi": "^6.0.0"
-					}
-				},
 				"wrappy": {
 					"version": "1.0.2",
 					"bundled": true
@@ -19773,9 +19598,9 @@
 			}
 		},
 		"semver": {
-			"version": "7.5.4",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-			"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+			"version": "7.5.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+			"integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
 			"requires": {
 				"lru-cache": "^6.0.0"
 			},
@@ -20554,18 +20379,9 @@
 			}
 		},
 		"uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
-		},
-		"uuidv4": {
-			"version": "6.2.13",
-			"resolved": "https://registry.npmjs.org/uuidv4/-/uuidv4-6.2.13.tgz",
-			"integrity": "sha512-AXyzMjazYB3ovL3q051VLH06Ixj//Knx7QnUSi1T//Ie3io6CpsPu9nVMOx5MoLWh6xV0B9J0hIaxungxXUbPQ==",
-			"requires": {
-				"@types/uuid": "8.3.4",
-				"uuid": "8.3.2"
-			}
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
 		},
 		"uvu": {
 			"version": "0.5.6",
diff --git a/package.json b/package.json
index 68e9bae08..5f9723ea7 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
 		"socket.io-client": "^4.6.2",
 		"tailwind-scrollbar": "^3.0.4",
 		"tailwindcss": "^3.3.3",
-		"uuidv4": "^6.2.13",
+		"uuid": "^9.0.1",
 		"yup": "^1.2.0"
 	},
 	"devDependencies": {
@@ -75,6 +75,7 @@
 		"@types/downloadjs": "^1.4.3",
 		"@types/eslint": "^8.21.1",
 		"@types/secure-random-password": "^0.2.1",
+		"@types/uuid": "^9.0.3",
 		"@typescript-eslint/eslint-plugin": "^5.54.1",
 		"@typescript-eslint/parser": "^5.54.1",
 		"astro-eslint-parser": "^0.11.0",
diff --git a/public/images/profile.png b/public/images/profile.png
new file mode 100644
index 000000000..7dd8036ea
Binary files /dev/null and b/public/images/profile.png differ
diff --git a/src/api/Agent.ts b/src/api/Agent.ts
index 6e49da913..3e23c0d98 100644
--- a/src/api/Agent.ts
+++ b/src/api/Agent.ts
@@ -6,7 +6,7 @@ import { storageKeys } from "../config/CommonConstant";
 export const getAgentHealth = async (orgId:number) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.Agent.checkAgentHealth}?orgId=${orgId}`,
+    url: `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Agent.checkAgentHealth}`,
     config: {
       headers: {
         'Content-type': 'application/json',
diff --git a/src/api/Auth.ts b/src/api/Auth.ts
index d6dd14c0d..8a9820215 100644
--- a/src/api/Auth.ts
+++ b/src/api/Auth.ts
@@ -1,7 +1,4 @@
 import {axiosGet, axiosPost, axiosPut} from '../services/apiRequests'
-import { number, string } from 'yup'
-
-import type { AxiosError } from 'axios'
 import CryptoJS from "crypto-js"
 import { apiRoutes } from '../config/apiRoutes'
 import { envConfig } from '../config/envConfig'
@@ -12,7 +9,8 @@ export interface UserSignUpData {
     email: string,
 }
 export interface AddPasswordDetails {
-    password?:string
+    email:string
+    password:string 
     isPasskey:boolean
     firstName: string|null
     lastName: string|null
@@ -61,7 +59,7 @@ export const loginUser = async(payload: UserSignInData) => {
 
 export const getUserProfile = async(accessToken: string) => {
     const details = {
-        url: apiRoutes.auth.userProfile,
+        url: apiRoutes.users.userProfile,
         config : { headers: { Authorization: `Bearer ${accessToken}` } }
     }
     try{
@@ -98,7 +96,6 @@ export const updateUserProfile = async(data: object ) => {
         const err = error as Error
         return err?.message
     }
-
 }  
 
 export const verifyUserMail = async(payload: EmailVerifyData ) => {
@@ -113,14 +110,12 @@ export const verifyUserMail = async(payload: EmailVerifyData ) => {
     catch(error){
         const err = error as Error
         return err?.message
-    }
-
-   
+    } 
 }
 
 export const checkUserExist = async(payload: string) => {
     const details ={
-        url:`${apiRoutes.auth.checkUser}${payload}`,
+        url:`${apiRoutes.users.checkUser}${payload}`,
         config: { headers: { "Content-type": "application/json" } }
     }
     try{
@@ -130,15 +125,12 @@ export const checkUserExist = async(payload: string) => {
     catch(error){
         const err = error as Error
         return err?.message
-    }
-
-   
+    } 
 }
 
-export const addPasswordDetails = async(payload: AddPasswordDetails, email:string) => {
-    // Api call to add password
+export const addPasswordDetails = async(payload: AddPasswordDetails) => {
     const details ={
-        url: `${apiRoutes.auth.addDetails}${email}`,
+        url: `${apiRoutes.auth.addDetails}`,
         payload,
         config: { headers: { "Content-type": "application/json" } }
     }
@@ -149,9 +141,7 @@ export const addPasswordDetails = async(payload: AddPasswordDetails, email:strin
     catch(error){
         const err = error as Error
         return err?.message
-    }
-
-   
+    }  
 }
 
 export const addPasskeyUserDetails = async(payload: AddPassword, email:string) => {
@@ -165,18 +155,15 @@ export const addPasskeyUserDetails = async(payload: AddPassword, email:string) =
           }, }
     }
     try{
-        const response = await axiosPost(details)
+        const response = await axiosPut(details)
         return response
     }
     catch(error){
         const err = error as Error
         return err?.message
-    }
-
-   
+    }  
 }
 
-
 export const passwordEncryption = (password: string): string => {
     const CRYPTO_PRIVATE_KEY: string = `${envConfig.PUBLIC_CRYPTO_PRIVATE_KEY}`    
     const encryptedPassword: string = CryptoJS.AES.encrypt(JSON.stringify(password), CRYPTO_PRIVATE_KEY).toString()
diff --git a/src/api/Fido.ts b/src/api/Fido.ts
index 51a9a6f1e..6127403e2 100644
--- a/src/api/Fido.ts
+++ b/src/api/Fido.ts
@@ -1,13 +1,14 @@
-import type { DeviceDetails, IdeviceBody, RegistrationOptionInterface, UserEmail, verifyRegistrationObjInterface } from "../components/Profile/interfaces"
+import type { DeviceDetails, IdeviceBody, RegistrationOptionInterface, UserEmail, VerifyRegistrationObjInterface } from "../components/Profile/interfaces"
 import { storageKeys } from "../config/CommonConstant"
 import { apiRoutes } from "../config/apiRoutes"
 import { axiosDelete, axiosGet, axiosPost, axiosPut } from "../services/apiRequests"
 import { getFromLocalStorage } from "./Auth"
 
 export const generateRegistrationOption = async (payload: RegistrationOptionInterface) => {
+  const email = payload.userName;
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.fido.generateRegistration}`,
+    url: `${apiRoutes.auth.generateRegistration}/${email}`,
     payload,
     config: {
       headers: {
@@ -27,10 +28,10 @@ export const generateRegistrationOption = async (payload: RegistrationOptionInte
   }
 }
 
-export const verifyRegistration = async (payload:unknown, userEmail:string) => {
+export const verifyRegistration = async (payload:VerifyRegistrationObjInterface, email:string) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.fido.verifyRegistration}${userEmail}`,
+    url: `${apiRoutes.auth.verifyRegistration}${email}`,
     payload,
     config: {
       headers: {
@@ -51,9 +52,10 @@ export const verifyRegistration = async (payload:unknown, userEmail:string) => {
 }
 
 export const addDeviceDetails = async (payload: IdeviceBody) => {
+  const credentialId = payload.credentialId;
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.fido.userUpdate}`,
+    url: `${apiRoutes.auth.userUpdate}/${credentialId}`,
     payload,
     config: {
       headers: {
@@ -73,10 +75,10 @@ export const addDeviceDetails = async (payload: IdeviceBody) => {
   }
 }
 
-export const getUserDeviceDetails = async(userEmail:string) => {
+export const getUserDeviceDetails = async(email:string) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.fido.getDeviceList}${userEmail}`,
+    url: `${apiRoutes.auth.getDeviceList}${email}`,
     config: {
       headers: {
         'Content-type': 'application/json',
@@ -95,10 +97,10 @@ export const getUserDeviceDetails = async(userEmail:string) => {
     } 
 }
 
-export const deleteDeviceById = async(enCodedUrl:string) => {
+export const deleteDeviceById = async(credentialId:string) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.fido.fidoDevice}?credentialId=${enCodedUrl}`,
+    url: `${apiRoutes.auth.fidoDevice}/${credentialId}`,
     config: {
       headers: {
         'Content-type': 'application/json',
@@ -120,7 +122,7 @@ export const deleteDeviceById = async(enCodedUrl:string) => {
 export const generateAuthenticationOption = async (payload:UserEmail) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.fido.fidoAuthentication}`,
+    url: `${apiRoutes.auth.fidoAuthentication}`,
     payload,
     config: {
       headers: {
@@ -140,11 +142,10 @@ export const generateAuthenticationOption = async (payload:UserEmail) => {
   }
 }
 
-export const verifyAuthentication = async (payload: any, userEmail:UserEmail) => {
-  console.log("userEmail", userEmail)
+export const verifyAuthentication = async (payload: VerifyRegistrationObjInterface, email: { userName: string }) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.fido.fidoVerifyAuthentication}${userEmail?.userName}`,
+    url: `${apiRoutes.auth.fidoVerifyAuthentication}${email.userName}`,
     payload,
     config: {
       headers: {
@@ -167,7 +168,7 @@ export const verifyAuthentication = async (payload: any, userEmail:UserEmail) =>
 export const editDeviceDetails = async (payload:DeviceDetails) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.fido.updateDeviceName}?credentialId=${payload.enCodedUrl}&deviceName=${payload.updatedDeviceName}`,
+    url: `${apiRoutes.auth.updateDeviceName}/${payload.enCodedUrl}?deviceName=${payload.updatedDeviceName}`,
     payload,
     config: {
       headers: {
diff --git a/src/api/Schema.ts b/src/api/Schema.ts
index df8595d23..a86d4b49a 100644
--- a/src/api/Schema.ts
+++ b/src/api/Schema.ts
@@ -1,5 +1,5 @@
 import type { GetAllSchemaListParameter, createCredDeffFieldName, createSchema } from "../components/Resources/Schema/interfaces";
-import { axiosDelete, axiosGet, axiosPost } from "../services/apiRequests";
+import { axiosGet, axiosPost } from "../services/apiRequests";
 
 import { apiRoutes } from "../config/apiRoutes";
 import { getFromLocalStorage } from "./Auth";
@@ -8,7 +8,7 @@ import { storageKeys } from "../config/CommonConstant";
 export const getAllSchemas = async ({itemPerPage, page, allSearch }: GetAllSchemaListParameter) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.schema.getAllSchemaFromPlatform}?pageSize=${itemPerPage}&searchByText=${allSearch}&pageNumber=${page}`,
+		url: `${apiRoutes.Platform.getAllSchemaFromPlatform}?pageSize=${itemPerPage}&searchByText=${allSearch}&pageNumber=${page}`,
     config: {
       headers: {
         'Content-type': 'application/json',
@@ -30,7 +30,7 @@ export const getAllSchemas = async ({itemPerPage, page, allSearch }: GetAllSchem
 export const getAllSchemasByOrgId = async ({ search, itemPerPage, page }: GetAllSchemaListParameter, orgId: string) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.schema.getAll}?orgId=${orgId}&pageNumber=${page}&pageSize=${itemPerPage}&searchByText=${search}`,
+    url: `${apiRoutes.organizations.root}/${orgId}${apiRoutes.schema.getAll}?pageNumber=${page}&pageSize=${itemPerPage}&searchByText=${search}`,
     config: {
       headers: {
         'Content-type': 'application/json',
@@ -49,10 +49,10 @@ export const getAllSchemasByOrgId = async ({ search, itemPerPage, page }: GetAll
   }
 }
 
-export const addSchema = async (payload: createSchema) => {
+export const addSchema = async (payload: createSchema, orgId: number) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: apiRoutes.schema.create,
+    url: `${apiRoutes.organizations.root}/${orgId}${apiRoutes.schema.create}`,
     payload,
     config: {
       headers: {
@@ -72,10 +72,10 @@ export const addSchema = async (payload: createSchema) => {
   }
 }
 
-export const getSchemaById = async (id: string, orgId: number) => {
+export const getSchemaById = async (schemaId: string, orgId: number) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.schema.getSchemaById}?schemaId=${id}&orgId=${orgId}`,
+    url: `${apiRoutes.organizations.root}/${orgId}${apiRoutes.schema.getSchemaById}/${schemaId}`,
     config: {
       headers: {
         'Content-type': 'application/json',
@@ -94,10 +94,10 @@ export const getSchemaById = async (id: string, orgId: number) => {
   }
 }
 
-export const createCredentialDefinition = async (payload: createCredDeffFieldName) => {
+export const createCredentialDefinition = async (payload: createCredDeffFieldName, orgId:number) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: apiRoutes.schema.createCredentialDefinition,
+    url: `${apiRoutes.organizations.root}/${orgId}${apiRoutes.schema.createCredentialDefinition}`,
     payload,
     config: {
       headers: {
@@ -118,10 +118,10 @@ export const createCredentialDefinition = async (payload: createCredDeffFieldNam
   }
 }
 
-export const getCredDeffById = async (id: string, orgId: number) => {
+export const getCredDeffById = async (schemaId: string, orgId: number) => {
   const token = await getFromLocalStorage(storageKeys.TOKEN)
   const details = {
-    url: `${apiRoutes.schema.getCredDeffBySchemaId}?schemaId=${id}&orgId=${orgId}`,
+    url: `${apiRoutes.organizations.root}/${orgId}${apiRoutes.schema.getCredDefBySchemaId}/${schemaId}/cred-defs`,
     config: {
       headers: {
         'Content-type': 'application/json',
@@ -138,4 +138,5 @@ export const getCredDeffById = async (id: string, orgId: number) => {
     const err = error as Error
     return err?.message
   }
-}
\ No newline at end of file
+}
+
diff --git a/src/api/connection.ts b/src/api/connection.ts
index 678cd3046..5b670771b 100644
--- a/src/api/connection.ts
+++ b/src/api/connection.ts
@@ -6,7 +6,7 @@ import { getFromLocalStorage } from './Auth';
 
 export const getConnectionsByOrg = async () => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-	const url = `${apiRoutes.Issuance.getAllConnections}?orgId=${orgId}`;
+	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.getAllConnections}`;	
 	const axiosPayload = {
 		url,
 		config: await getHeaderConfigs(),
diff --git a/src/api/ecosystem.ts b/src/api/ecosystem.ts
new file mode 100644
index 000000000..bab35e7ca
--- /dev/null
+++ b/src/api/ecosystem.ts
@@ -0,0 +1,251 @@
+import { axiosGet, axiosPost, axiosPut } from '../services/apiRequests';
+
+import { apiRoutes } from '../config/apiRoutes';
+import { getFromLocalStorage } from './Auth';
+import { storageKeys } from '../config/CommonConstant';
+import { getHeaderConfigs } from '../config/GetHeaderConfigs';
+
+interface CreateEcosystemPayload {
+	name: string;
+	description: string;
+	logo: string;
+	tags?: string;
+	userId: number;
+}
+
+export interface GetEndorsementListParameter {
+	itemPerPage: number;
+	page: number;
+	search: string;
+	sortBy: string;
+	type: string;
+	status: string;
+}
+
+export const createEcosystems = async (dataPayload: CreateEcosystemPayload) => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+
+	const url = `${apiRoutes.Ecosystem.root}/${orgId}`;
+	const payload = dataPayload;
+	const axiosPayload = {
+		url,
+		payload,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosPost(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const updateEcosystem = async (dataPayload: CreateEcosystemPayload) => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const ecosystemId = await getFromLocalStorage(storageKeys.ECOSYSTEM_ID);
+
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}`;
+	const payload = dataPayload;
+
+	const axiosPayload = {
+		url,
+		payload,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosPut(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const getEcosystem = async (orgId: string) => {
+	const url = `${apiRoutes.Ecosystem.root}/${orgId}`;
+
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosGet(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const getEndorsementList = async (
+	{ search, itemPerPage, page, type, status }: GetEndorsementListParameter,
+	ecosystemId: string,
+	orgId: string,
+) => {
+	const url = `${apiRoutes.Ecosystem.root}/${orgId}/${ecosystemId}${
+		apiRoutes.Ecosystem.endorsements.list
+	}?${page ? `pageNumber=${page}` : ''}${search ? `&search=${search}` : ''}${
+		itemPerPage ? `&pageSize=${itemPerPage}` : ''
+	}${type ? `&type=${type}` : ''}${status ? `&search=${status}` : ''}`;
+
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosGet(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const createSchemaRequest = async (
+	data: object,
+	endorsementId: string,
+	orgId: number,
+) => {
+	const url = `${apiRoutes.Ecosystem.root}/${endorsementId}/${orgId}${apiRoutes.Ecosystem.endorsements.createSchemaRequest}`;
+	const payload = data;
+	const axiosPayload = {
+		url,
+		payload,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosPost(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const createCredDefRequest = async (
+	data: object,
+	ecosystemId: string,
+	orgId: number,
+) => {
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}${apiRoutes.Ecosystem.endorsements.createCredDefRequest}`;
+	const payload = data;
+	const axiosPayload = {
+		url,
+		payload,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosPost(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const SignEndorsementRequest = async (
+	ecosystemId: string,
+	orgId: string,
+	endorsementId: string,
+) => {
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}${apiRoutes.Ecosystem.endorsements.signRequest}${endorsementId}`;
+
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+	try {
+		return await axiosPost(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const SubmitEndorsementRequest = async (
+	ecosystemId: string,
+	orgId: string,
+	endorsementId: string,
+) => {
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}${apiRoutes.Ecosystem.endorsements.submitRequest}${endorsementId}`;
+
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+	try {
+		return await axiosPost(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const RejectEndorsementRequest = async (
+	ecosystemId: string,
+	orgId: string,
+	endorsementId: string,
+) => {
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}${apiRoutes.Ecosystem.endorsements.rejectRequest}${endorsementId}`;
+
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+	try {
+		return await axiosPut(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const getEcosystemDashboard = async (
+	ecosystemId: string,
+	orgId: string,
+) => {
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}/dashboard`;
+
+	const token = await getFromLocalStorage(storageKeys.TOKEN);
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`,
+		},
+	};
+	const axiosPayload = {
+		url,
+		config,
+	};
+
+	try {
+		return await axiosGet(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
+
+export const getEcosystemMemberList = async (
+	pageNumber: number,
+	pageSize: number,
+	search: string,
+) => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const ecosystemId = await getFromLocalStorage(storageKeys.ECOSYSTEM_ID);
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}${apiRoutes.Ecosystem.members}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`;
+
+	const axiosPayload = {
+		url,
+		config: await getHeaderConfigs(),
+	};
+
+	try {
+		return await axiosGet(axiosPayload);
+	} catch (error) {
+		const err = error as Error;
+		return err?.message;
+	}
+};
diff --git a/src/api/invitations.ts b/src/api/invitations.ts
index 396ae62ba..47bfbd2d5 100644
--- a/src/api/invitations.ts
+++ b/src/api/invitations.ts
@@ -1,4 +1,4 @@
-import { axiosGet, axiosPost } from "../services/apiRequests"
+import { axiosDelete, axiosGet, axiosPost, axiosPut } from "../services/apiRequests"
 
 import { apiRoutes } from "../config/apiRoutes";
 import { getFromLocalStorage } from "./Auth";
@@ -6,122 +6,320 @@ import { storageKeys } from "../config/CommonConstant";
 
 export const getOrganizationInvitations = async (pageNumber: number, pageSize: number, search = '') => {
 
-    const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
-
-    const url = `${apiRoutes.organizations.invitations}/${orgId}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
-
-    const token = await getFromLocalStorage(storageKeys.TOKEN)
-
-    const config = {
-        headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`
-        }
-    }
-    const axiosPayload = {
-        url,
-        config
-    }
-
-    try {
-        return await axiosGet(axiosPayload);
-    }
-    catch (error) {
-        const err = error as Error
-        return err?.message
-    }
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+
+	if (!orgId) {
+		return "Organization is required";
+	}
+
+	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.organizations.invitations}?&pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
+
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		config
+	}
+
+	try {
+		return await axiosGet(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
 }
 
 export const createInvitations = async (invitationList: Array<object>) => {
 
-    const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
-
-    const url = apiRoutes.organizations.invitations
-    const payload = {
-        invitations: invitationList,
-        orgId: Number(orgId)
-    }
-    const token = await getFromLocalStorage(storageKeys.TOKEN)
-
-    const config = {
-        headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`
-        }
-    }
-    const axiosPayload = {
-        url,
-        payload,
-        config
-    }
-
-    try {
-        return await axiosPost(axiosPayload);
-    }
-    catch (error) {
-        const err = error as Error
-        return err?.message
-    }
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+
+	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.organizations.invitations}`
+	const payload = {
+		invitations: invitationList,
+		orgId: Number(orgId)
+	}
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		payload,
+		config
+	}
+
+	try {
+		return await axiosPost(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
+}
+
+export const getEcosystemList = async () => {
+
+	const url = `${apiRoutes.Ecosystem.root}`
+
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		config
+	}
+
+	try {
+		return await axiosGet(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
 }
+export const createEcoSystemInvitations = async (invitationList: Array<object>, ecosystemId: string) => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}${apiRoutes.Ecosystem.invitations}`
+
+	const payload = {
+		invitations: invitationList,
+	}
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
 
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		payload,
+		config
+	}
+
+	try {
+		return await axiosPost(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
+}
 // Received Invitations by User
 export const getUserInvitations = async (pageNumber: number, pageSize: number, search = '') => {
 
-    const url = `${apiRoutes.users.invitations}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
-
-    const token = await getFromLocalStorage(storageKeys.TOKEN)
-
-    const config = {
-        headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`
-        }
-    }
-    const axiosPayload = {
-        url,
-        config
-    }
-
-    try {
-        return await axiosGet(axiosPayload);
-    }
-    catch (error) {
-        const err = error as Error
-        return err?.message
-    }
+	const url = `${apiRoutes.users.invitations}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
+
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		config
+	}
+
+	try {
+		return await axiosGet(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
+}
+
+
+export const getUserEcosystemInvitations = async (pageNumber: number, pageSize: number, search: string) => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+
+	const url = `${apiRoutes.Ecosystem.root}/${orgId}${apiRoutes.Ecosystem.usersInvitation}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
+
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		config
+	}
+
+	try {
+		return await axiosGet(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
+}
+
+// getEcosytemReceivedInvitations
+export const getEcosytemReceivedInvitations = async (pageNumber: number, pageSize: number, search = '') => {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+
+	const url = `${apiRoutes.Ecosystem.root}/${orgId}/?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
+
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		config
+	}
+
+	try {
+		return await axiosGet(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
+}
+export const getEcosystemInvitations = async (pageNumber: number, pageSize: number, search: string) => {
+	const ecosystemId = await getFromLocalStorage(storageKeys.ECOSYSTEM_ID);
+
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}${apiRoutes.Ecosystem.invitations}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
+
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		config
+	}
+
+	try {
+		return await axiosGet(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
 }
 
 // Accept/ Reject Invitations
-export const acceptRejectInvitations = async (invitationId: number,orgId: number, status: string) => {
-
-    const url = apiRoutes.users.invitations
-    
-    const payload = {
-        invitationId,
-        orgId: Number(orgId),
-        status
-    }
-    const token = await getFromLocalStorage(storageKeys.TOKEN)
-
-    const config = {
-        headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`
-        }
-    }
-    const axiosPayload = {
-        url,
-        payload,
-        config
-    }
-
-    try {
-        return await axiosPost(axiosPayload);
-    }
-    catch (error) {
-        const err = error as Error
-        return err?.message
-    }
+export const acceptRejectEcosystemInvitations = async (invitationId: string, orgId: number, status: string, orgName: string, orgDid: string) => {
+
+	const url = `${apiRoutes.Ecosystem.root}/${orgId}${apiRoutes.Ecosystem.invitations}/${invitationId}`
+
+	const payload = {
+		status,
+		orgName,
+		orgDid
+	}
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		payload,
+		config
+	}
+
+	try {
+		return await axiosPut(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
 }
 
+export const acceptRejectInvitations = async (invitationId: number, orgId: number, status: string) => {
+
+	const url = `${apiRoutes.users.invitations}/${invitationId}`
 
+	const payload = {
+		orgId: Number(orgId),
+		status
+	}
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		payload,
+		config
+	}
+
+	try {
+		return await axiosPost(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
+}
+
+export const deleteEcosystemInvitations = async (invitationId: number) => {
+
+	const ecosystemId = await getFromLocalStorage(storageKeys.ECOSYSTEM_ID);
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+	const url = `${apiRoutes.Ecosystem.root}/${ecosystemId}/${orgId}${apiRoutes.Ecosystem.invitations}/${invitationId}`
+
+	const token = await getFromLocalStorage(storageKeys.TOKEN)
+
+	const config = {
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	}
+	const axiosPayload = {
+		url,
+		config
+	}
+
+	try {
+		return await axiosDelete(axiosPayload);
+	}
+	catch (error) {
+		const err = error as Error
+		return err?.message
+	}
+}
diff --git a/src/api/issuance.ts b/src/api/issuance.ts
index 0706f5b5d..01289f2ff 100644
--- a/src/api/issuance.ts
+++ b/src/api/issuance.ts
@@ -1,13 +1,12 @@
-import type { IssueCredential } from '../common/enums';
 import { apiRoutes } from '../config/apiRoutes';
 import { storageKeys } from '../config/CommonConstant';
 import { getHeaderConfigs } from '../config/GetHeaderConfigs';
 import { axiosGet, axiosPost } from '../services/apiRequests';
 import { getFromLocalStorage } from './Auth';
 
-export const getIssuedCredentials = async (state: IssueCredential) => {
+export const getIssuedCredentials = async () => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-	const url = `${apiRoutes.Issuance.getIssuedCredentials}?orgId=${orgId}`;
+	const url= `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.getIssuedCredentials}`;
 
 	const axiosPayload = {
 		url,
@@ -23,8 +22,10 @@ export const getIssuedCredentials = async (state: IssueCredential) => {
 };
 
 export const getCredentialDefinitions = async (schemaId: string) => {
+	
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-    const url = `${apiRoutes.Issuance.getCredDefBySchemaId}?schemaId=${schemaId}&orgId=${orgId}`;
+	const url= `${apiRoutes.organizations.root}/${orgId}${apiRoutes.schema.getCredDefBySchemaId}/${schemaId}/cred-defs`;
+
 	const axiosPayload = {
 		url,
 		config: await getHeaderConfigs(),
@@ -40,8 +41,10 @@ export const getCredentialDefinitions = async (schemaId: string) => {
 
 
 export const issueCredential = async (data: object) => {
-	const url = apiRoutes.Issuance.issueCredential;
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Issuance.issueCredential}`;	
 	const payload = data;
+	
 	const axiosPayload = {
 		url,
 		payload,
diff --git a/src/api/organization.ts b/src/api/organization.ts
index e53dba9d1..56c2948dd 100644
--- a/src/api/organization.ts
+++ b/src/api/organization.ts
@@ -1,4 +1,4 @@
-import { axiosGet, axiosPost, axiosPut } from "../services/apiRequests"
+import { axiosGet, axiosPost, axiosPublicOrganisationGet, axiosPut } from "../services/apiRequests"
 
 import { apiRoutes } from "../config/apiRoutes";
 import { getFromLocalStorage } from "./Auth";
@@ -32,9 +32,9 @@ export const createOrganization = async (data: object) => {
     }
 }
 
-export const updateOrganization = async (data: object) => {
+export const updateOrganization = async (data: object, orgId:string) => {
 
-    const url = apiRoutes.organizations.update
+    const url = `${apiRoutes.organizations.update}/${orgId}`
     const payload = data
     const token = await getFromLocalStorage(storageKeys.TOKEN)
 
@@ -114,7 +114,7 @@ export const getOrganizationById = async (orgId: string) => {
 
 export const getOrgDashboard = async (orgId: string) => {
 
-    const url = `${apiRoutes.organizations.getOrgDashboard}?orgId=${Number(orgId)}`
+    const url = `${apiRoutes.organizations.getOrgDashboard}/${orgId}`
 
     const token = await getFromLocalStorage(storageKeys.TOKEN)
 
@@ -138,9 +138,9 @@ export const getOrgDashboard = async (orgId: string) => {
     }
 }
 
-export const spinupDedicatedAgent = async (data: object) => {
+export const spinupDedicatedAgent = async (data: object, orgId:number) => {
 
-    const url = apiRoutes.organizations.agentDedicatedSpinup
+    const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Agent.agentDedicatedSpinup}`
     const payload = data
 
     const token = await getFromLocalStorage(storageKeys.TOKEN)
@@ -166,9 +166,9 @@ export const spinupDedicatedAgent = async (data: object) => {
     }
 }
 
-export const spinupSharedAgent = async (data: object) => {
+export const spinupSharedAgent = async (data: object, orgId:number) => {
 
-    const url = apiRoutes.organizations.agentSharedSpinup
+    const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Agent.agentSharedSpinup}`
     const payload = data
 
     const token = await getFromLocalStorage(storageKeys.TOKEN)
@@ -226,8 +226,11 @@ export const getOrganizationRoles = async () => {
 export const getOrganizationUsers = async (pageNumber: number, pageSize: number, search = '') => {
 
     const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+    if (!orgId) {
+        return "Organization is required";
+    }
 
-    const url = `${apiRoutes.users.fetchUsers}?orgId=${orgId}&pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
+    const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.users.fetchUsers}?&pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
 
     const axiosPayload = {
         url,
@@ -248,7 +251,7 @@ export const editOrganizationUserRole = async (userId: number, roles: number[])
 
     const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
 
-    const url = apiRoutes.organizations.editUserROle
+    const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.organizations.editUserROle}/${userId}`
     const payload = {
         orgId,
         userId,
@@ -274,10 +277,8 @@ export const editOrganizationUserRole = async (userId: number, roles: number[])
 
 
 export const createConnection = async (orgName: string) => {
-
-    const url = apiRoutes.connection.create
-
     const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+    const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.connection.create}`
     
     const data = {
         label: orgName,
@@ -302,4 +303,28 @@ export const createConnection = async (orgName: string) => {
     }
 }
 
+// public profile
+
+export const getPublicOrganizations = async (pageNumber: number, pageSize: number, search :string) => {
+
+	const url = `${apiRoutes.Public.organizations}?pageNumber=${pageNumber}&pageSize=${pageSize}&search=${search}`
+
+	const config = {
+			headers: {
+					'Content-Type': 'application/json',
+			}
+	}
+	const axiosPayload = {
+			url,
+			config
+	}
+
+	try {
+			return await axiosPublicOrganisationGet(axiosPayload);
+	}
+	catch (error) {
+			const err = error as Error
+			return err?.message
+	}
+}
 
diff --git a/src/api/verification.ts b/src/api/verification.ts
index 75aef3370..177185d36 100644
--- a/src/api/verification.ts
+++ b/src/api/verification.ts
@@ -6,8 +6,8 @@ import { axiosGet, axiosPost } from '../services/apiRequests';
 import { getFromLocalStorage } from './Auth';
 
 export const verifyCredential = async (payload: any) => {
-	const url = apiRoutes.Verification.verifyCredential;
-	const axiosPayload = {
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Verification.verifyCredential}`;	const axiosPayload = {
 		url,
 		payload,
 		config: await getHeaderConfigs(),
@@ -24,7 +24,6 @@ export const verifyCredential = async (payload: any) => {
 export const getVerificationCredential = async (state: IssueCredential) => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
 	const url = `${apiRoutes.Issuance.getIssuedCredentials}?orgId=${orgId}&state=${state}`;
-
 	const axiosPayload = {
 		url,
 		config: await getHeaderConfigs(),
@@ -40,8 +39,8 @@ export const getVerificationCredential = async (state: IssueCredential) => {
 
 export const getVerificationList = async () => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-	const url = `${apiRoutes.Verification.getAllRequestList}?orgId=${orgId}`;
-
+	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Verification.verifyCredential}`
+	
 	const axiosPayload = {
 		url,
 		config: await getHeaderConfigs(),
@@ -55,10 +54,9 @@ export const getVerificationList = async () => {
 	}
 };
 
-export const verifyPresentation = async (id:string) => {
+export const verifyPresentation = async (proofId:string) => {
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-	const url = `${apiRoutes.Verification.presentationVerification}?orgId=${orgId}&id=${id}`;
-
+	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Verification.presentationVerification}/${proofId}/verify`;
 	const axiosPayload = {
 		url,
 		config: await getHeaderConfigs(),
@@ -73,10 +71,9 @@ export const verifyPresentation = async (id:string) => {
 };
 
 
-export const getProofAttributes=async (id:string)=>{
+export const getProofAttributes=async (proofId:string)=>{
 	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
-	const url = `${apiRoutes.Verification.proofRequestAttributesVerification}?id=${id}&orgId=${orgId}`;
-
+	const url = `${apiRoutes.organizations.root}/${orgId}${apiRoutes.Verification.proofRequestAttributesVerification}/${proofId}/form`;
 	const axiosPayload = {
 		url,
 		config: await getHeaderConfigs(),
@@ -91,7 +88,9 @@ export const getProofAttributes=async (id:string)=>{
 }
 
 export const getCredentialDefinitionsForVerification = async (schemaId: string) => {
-    const url = `${apiRoutes.Issuance.getCredDefBySchemaId}?schemaId=${schemaId}`;
+	const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+	const url= `${apiRoutes.Verification.verificationCredDef}/${schemaId}`;
+
 	const axiosPayload = {
 		url,
 		config: await getHeaderConfigs(),
diff --git a/src/app/LayoutSidebar.astro b/src/app/LayoutSidebar.astro
index 09f728e74..d8a364e12 100644
--- a/src/app/LayoutSidebar.astro
+++ b/src/app/LayoutSidebar.astro
@@ -1,6 +1,6 @@
 ---
+import '../common/global.css'
 import CopyrightNotice from '../components/CopyrightNotice.astro';
-import FooterSidebar from './FooterSidebar.astro';
 import LayoutCommon from './LayoutCommon.astro';
 import NavBarSidebar from './NavBarSidebar.astro';
 import SideBar from './SideBar.astro';
diff --git a/src/app/PublicProfileLayout.astro b/src/app/PublicProfileLayout.astro
new file mode 100644
index 000000000..b76adf6a6
--- /dev/null
+++ b/src/app/PublicProfileLayout.astro
@@ -0,0 +1,16 @@
+---
+import NavBarSidebar from "./NavBarSidebar.astro";
+
+---
+
+	<NavBarSidebar/>
+	<div class="flex pt-16 overflow-hidden bg-gray-50 dark:bg-gray-900">
+		<div
+			id="main-content"
+			class="relative w-full h-full overflow-y-auto bg-gray-50 lg:ml-64 dark:bg-gray-900 min-h-screen flex justify-between flex-col"
+			style="min-height: calc(100vh - 64px);"
+		>
+			<slot />
+
+		</div>
+	</div>
diff --git a/src/app/SideBar.astro b/src/app/SideBar.astro
index 0a0e7247f..62e3d9e49 100644
--- a/src/app/SideBar.astro
+++ b/src/app/SideBar.astro
@@ -1,7 +1,7 @@
 ---
-import { pathRoutes } from "../config/pathRoutes";
+import EcosystemSidebarOption from '../components/Ecosystem/EcosystemSidebarOption';
+import { pathRoutes } from '../config/pathRoutes';
 /* eslint max-lines: 'off' */
-
 ---
 
 <!-- TODO: Dynamic dropdowns -->
@@ -22,11 +22,11 @@ import { pathRoutes } from "../config/pathRoutes";
 			]}
 		>
 			<div
-				class="flex-1 px-3 space-y-1 bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"
+				class="px-3 space-y-1 bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"
 			>
 				<ul class="pb-2 space-y-2">
-					<li>
-						<form action="#" method="GET" class="lg:hidden">
+					<li class="hidden">
+						<form action="#" method="GET">
 							<label for="mobile-search" class="sr-only">Search</label>
 							<div class="relative">
 								<div
@@ -47,77 +47,118 @@ import { pathRoutes } from "../config/pathRoutes";
 									type="text"
 									name="email"
 									id="mobile-search"
-									class="bg-gray-50 border border-gray-300 text-gray-900 text-sm roundedstroke-widthhing-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-200 dark:focus:ring-primary-500 dark:focus:border-primary-500
-									placestroke-linecaph"
+									class="bg-gray-50 border border-gray-300 text-gray-900 text-sm roundedstroke-widthhing-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-200 dark:focus:ring-primary-500 dark:focus:border-primary-500 placestroke-linecaph"
 								/>
 							</div>
 						</form>
 					</li>
-				 <li>
-						
-
-					</li>
 					<li>
 						<a
 							href={pathRoutes.users.dashboard}
-						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"
+							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 
-						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" 
-						fill="none" 
-						viewBox="0 0 25 25">  
-						<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"
-						/></svg>
+							<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"
+								fill="none"
+								viewBox="0 0 25 25"
+							>
+								<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
+							>
 							<span class="ml-3" sidebar-toggle-item>Dashboard</span>
 						</a>
 					</li>
-
-
 					<li>
 						<a
 							href={pathRoutes.organizations.root}
 							class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
 						>
-							<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" 
-							fill="none" 
-							viewBox="0 0 25 25">  
-							<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"
-							/></svg>
+							<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"
+								fill="none"
+								viewBox="0 0 25 25"
+							>
+								<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
+							>
 							<span class="ml-3" sidebar-toggle-item>Organizations</span>
 						</a>
 					</li>
+					<!-- 
+						<ul id="dropdown-ecosystem" class="hidden py-2 space-y-2">
+							<li>
+								<a
+									href='featurecoming'
+									class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+									>Ecosystems</a
+								>
+							</li>
+							<li>
+								<a
+									href='featurecoming'
+									class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+									>Trust Frameworks</a
+								>
+							</li>
+							<li>
+								<a
+									href='featurecoming'
+									class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+									>Members</a
+								>
+							</li>
+							<li>
+								<a
+									href='featurecoming'
+									class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+									>Trust Registries</a
+								>
+							</li>
+						</ul>
+					</li -->
 
 					<li>
 						<a
 							href={pathRoutes.organizations.users}
 							class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
 						>
-						<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" 
-						fill="none" 
-						viewBox="0 0 28 28">  
-						<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 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"/>  
-						<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 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"
-						 /></svg>
+							<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"
+								fill="none"
+								viewBox="0 0 28 28"
+							>
+								<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"
+								></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
+							>
 							<span class="ml-3" sidebar-toggle-item>Users</span>
 						</a>
 					</li>
@@ -169,22 +210,22 @@ import { pathRoutes } from "../config/pathRoutes";
 									clip-rule="evenodd"></path></svg
 							>
 						</button> -->
-						<!--ul id="dropdown-layouts" class="hidden py-2 space-y-2"-->
-							<!-- <li>
+					<!--ul id="dropdown-layouts" class="hidden py-2 space-y-2"-->
+					<!-- <li>
 								<a
 									href={pathRoutes.organizations.root}
 									class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
 									>Organizations</a
 								>
 							</li>							 -->
-							<!-- <li>
+					<!-- <li>
 								<a
 									href={pathRoutes.organizations.users}
 									class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
 									>Users</a
 								>
 							</li> -->
-						<!-- </ul> -->
+					<!-- </ul> -->
 					<!-- </li> -->
 
 					<li>
@@ -193,24 +234,27 @@ import { pathRoutes } from "../config/pathRoutes";
 							class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
 							aria-controls="dropdown-credentials"
 							data-collapse-toggle="dropdown-credentials"
-							>
-							<svg 
-								xmlns="http://www.w3.org/2000/svg" 
+						>
+							<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" 
-								fill="none" 
-								viewBox="0 0 25 25">  
-								<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"
-								/></svg>
+								width="18"
+								height="17"
+								fill="none"
+								viewBox="0 0 25 25"
+							>
+								<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
+							>
 							<span
 								class="flex-1 ml-3 text-left whitespace-nowrap"
 								sidebar-toggle-item>Credentials</span
-							>			
+							>
 							<svg
 								sidebar-toggle-item
-								class="w-6 h-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+								class="w-6 h-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white sidebar-expand-menu-icon"
 								fill="currentColor"
 								viewBox="0 0 20 20"
 								xmlns="http://www.w3.org/2000/svg"
@@ -223,62 +267,76 @@ import { pathRoutes } from "../config/pathRoutes";
 
 						<ul id="dropdown-credentials" class="py-2 space-y-2">
 							<li>
-
 								<a
 									href={pathRoutes.organizations.issuedCredentials}
 									class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="20"
+										height="20"
+										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"
+									>
+										<path
+											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"
+										></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"
+										></path>
+										<path
+											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
 									>
-									<svg 
-										xmlns="http://www.w3.org/2000/svg" 
-										width="20" 
-										height="20" 
-										fill="none" 
-										viewBox="0 0 25 22">  
-										<path stroke="#6B7280" 
-										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"/>  
-										<path fill="#6B7280" 
-										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"/>  
-										<path stroke="#6B7280" 
-										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"
-										/></svg>
-									 <span class="ml-2" >Issuance</span>
-									 </a>
+									<span class="ml-2">Issuance</span>
+								</a>
 							</li>
 							<li>
 								<a
 									href={pathRoutes.organizations.credentials}
 									class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="20"
+										height="20"
+										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"
 									>
-									<svg 
-										xmlns="http://www.w3.org/2000/svg" 
-										width="20" 
-										height="20" 
-										fill="none" 
-										viewBox="0 0 25 25">  
-										<path fill="#6B7280" 
-										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"/>  
-										<path fill="#6B7280" 
-										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"/>  
-										<path stroke="#6B7280" 
-										stroke-linecap="round" 
-										stroke-width="1.5" 
-										d="m15.328 17.984 2.24 2.55 4.48-4.464"
-										/></svg>
-										<span class="ml-2" >Verification</span>
-										</a>
-									</li>
-
-								</ul>
-							</button>
-						</li>
+										<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"
+										></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"
+										></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
+									>
+									<span class="ml-2">Verification</span>
+								</a>
+							</li>
+						</ul>
+					</li>
+					<EcosystemSidebarOption client:load />
+				</ul>
 
-					<!-- li>
+				<!-- li>
 						<button
 							type="button"
 							class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
@@ -348,11 +406,9 @@ import { pathRoutes } from "../config/pathRoutes";
 						</ul>
 					</li -->
 
-
-
-					<li>
-						<!-- {{ if eq $page_slug "settings" }} -->
-						<!-- <a
+				<!-- <li>
+					{{ if eq $page_slug "settings" }}
+					<a
 							href="/settings"
 							class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
 						>
@@ -370,48 +426,47 @@ import { pathRoutes } from "../config/pathRoutes";
 								></path>
 							</svg>
 							<span class="ml-3" sidebar-toggle-item>Settings</span>
-						</a> -->
-					</li>
+						</a>
+				</li> -->
+			</div>
 
-				</ul>
-				
-				<div class="pt-2 space-y-2">
-					<a
-						href={'https://github.com/credebl'}
-						target="_blank"
-						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"
+			<div class="pt-2 space-y-2">
+				<a
+					href={'https://github.com/credebl'}
+					target="_blank"
+					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
 					>
-						<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
-						>
-						<span class="ml-3" sidebar-toggle-item>GitHub Repository</span>
-					</a>
-					<a
-						href={pathRoutes.documentation.root}
-						target="_blank"
-						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"
+					<span class="ml-3" sidebar-toggle-item>GitHub Repository</span>
+				</a>
+				<a
+					href={pathRoutes.documentation.root}
+					target="_blank"
+					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
 					>
-						<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
-						>
-						<span class="ml-3" sidebar-toggle-item>Documentation</span>
-					</a> 
-					<!-- <a
+					<span class="ml-3" sidebar-toggle-item>Documentation</span>
+				</a>
+				<!-- <a
 						href="/alerts"
 						target="_blank"
 						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"
@@ -427,26 +482,26 @@ import { pathRoutes } from "../config/pathRoutes";
 						>
 						<span class="ml-3" sidebar-toggle-item>FAQ's</span>
 					</a>  -->
-					 <a
-						href="https://discord.com/invite/w4hnQT7NJG"
-						target="_blank"
-						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
-						>
-						<span class="ml-3" sidebar-toggle-item>Support</span>
-					</a> 
-				</div>
+				<a
+					href="https://discord.com/invite/w4hnQT7NJG"
+					target="_blank"
+					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
+					>
+					<span class="ml-3" sidebar-toggle-item>Support</span>
+				</a>
 			</div>
 		</div>
+
 		<div
 			class="absolute bottom-0 left-0 justify-center hidden w-full p-4 space-x-4 bg-white lg:flex dark:bg-gray-800"
 			sidebar-bottom-menu
@@ -662,70 +717,70 @@ import { pathRoutes } from "../config/pathRoutes";
 				</ul>
 			</div>
 		</div>
-	</div>
-</aside>
 
-<div
-	class="fixed inset-0 z-10 hidden bg-gray-900/50 dark:bg-gray-900/90"
-	id="sidebarBackdrop"
->
-</div>
+		<div
+			class="fixed inset-0 -z-10 hidden bg-gray-900/50 dark:bg-gray-900/90"
+			id="sidebarBackdrop"
+		>
+		</div>
 
-<script>
-	const sidebar = document.getElementById('sidebar');
+		<script>
+			const sidebar = document.getElementById('sidebar');
 
-	if (sidebar) {
-		const toggleSidebarMobile = (
-			sidebar: HTMLElement,
-			sidebarBackdrop: HTMLElement,
-			toggleSidebarMobileHamburger: HTMLElement,
-			toggleSidebarMobileClose: HTMLElement,
-		) => {
-			sidebar.classList.toggle('hidden');
-			sidebarBackdrop.classList.toggle('hidden');
-			toggleSidebarMobileHamburger.classList.toggle('hidden');
-			toggleSidebarMobileClose.classList.toggle('hidden');
-		};
+			if (sidebar) {
+				const toggleSidebarMobile = (
+					sidebar: HTMLElement,
+					sidebarBackdrop: HTMLElement,
+					toggleSidebarMobileHamburger: HTMLElement,
+					toggleSidebarMobileClose: HTMLElement,
+				) => {
+					sidebar.classList.toggle('hidden');
+					sidebarBackdrop.classList.toggle('hidden');
+					toggleSidebarMobileHamburger.classList.toggle('hidden');
+					toggleSidebarMobileClose.classList.toggle('hidden');
+				};
 
-		const toggleSidebarMobileEl = document.getElementById(
-			'toggleSidebarMobile',
-		);
-		const sidebarBackdrop = document.getElementById('sidebarBackdrop')!;
-		const toggleSidebarMobileHamburger = document.getElementById(
-			'toggleSidebarMobileHamburger',
-		)!;
-		const toggleSidebarMobileClose = document.getElementById(
-			'toggleSidebarMobileClose',
-		)!;
-		const toggleSidebarMobileSearch = document.getElementById(
-			'toggleSidebarMobileSearch',
-		)!;
+				const toggleSidebarMobileEl = document.getElementById(
+					'toggleSidebarMobile',
+				);
+				const sidebarBackdrop = document.getElementById('sidebarBackdrop')!;
+				const toggleSidebarMobileHamburger = document.getElementById(
+					'toggleSidebarMobileHamburger',
+				)!;
+				const toggleSidebarMobileClose = document.getElementById(
+					'toggleSidebarMobileClose',
+				)!;
+				const toggleSidebarMobileSearch = document.getElementById(
+					'toggleSidebarMobileSearch',
+				)!;
 
-		toggleSidebarMobileSearch?.addEventListener('click', () => {
-			toggleSidebarMobile(
-				sidebar,
-				sidebarBackdrop,
-				toggleSidebarMobileHamburger,
-				toggleSidebarMobileClose,
-			);
-		});
+				toggleSidebarMobileSearch?.addEventListener('click', () => {
+					toggleSidebarMobile(
+						sidebar,
+						sidebarBackdrop,
+						toggleSidebarMobileHamburger,
+						toggleSidebarMobileClose,
+					);
+				});
 
-		toggleSidebarMobileEl?.addEventListener('click', () => {
-			toggleSidebarMobile(
-				sidebar,
-				sidebarBackdrop,
-				toggleSidebarMobileHamburger,
-				toggleSidebarMobileClose,
-			);
-		});
+				toggleSidebarMobileEl?.addEventListener('click', () => {
+					toggleSidebarMobile(
+						sidebar,
+						sidebarBackdrop,
+						toggleSidebarMobileHamburger,
+						toggleSidebarMobileClose,
+					);
+				});
 
-		sidebarBackdrop?.addEventListener('click', () => {
-			toggleSidebarMobile(
-				sidebar,
-				sidebarBackdrop,
-				toggleSidebarMobileHamburger,
-				toggleSidebarMobileClose,
-			);
-		});
-	}
-</script>
+				sidebarBackdrop?.addEventListener('click', () => {
+					toggleSidebarMobile(
+						sidebar,
+						sidebarBackdrop,
+						toggleSidebarMobileHamburger,
+						toggleSidebarMobileClose,
+					);
+				});
+			}
+		</script>
+	</div>
+</aside>
diff --git a/src/assets/Credential_Card.svg b/src/assets/Credential_Card.svg
deleted file mode 100644
index a9a4536dc..000000000
--- a/src/assets/Credential_Card.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<svg width="285" height="110" viewBox="0 0 285 110" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3915_9690)">
-<rect x="284.602" y="109.605" width="284.6" height="109.6" rx="8" transform="rotate(-180 284.602 109.605)" fill="url(#paint0_linear_3915_9690)"/>
-<path d="M293.26 115.716V126.305C293.26 132.146 288.08 136.894 281.719 136.894H182.466C172.282 136.894 164 129.295 164 119.952C164 119.952 164 48.0098 164 47.9463C164 38.6026 172.282 31.0039 182.466 31.0039H267.87C271.697 31.0039 274.794 33.8502 274.794 37.3573C274.794 40.8644 271.697 43.7107 267.87 43.7107H182.466C179.922 43.7107 177.849 45.6083 177.849 47.9463C177.849 50.2844 179.922 52.1819 182.466 52.1819H281.719C288.08 52.1819 293.26 56.93 293.26 62.7709V73.3599H270.178C257.45 73.3599 247.096 82.8604 247.096 94.5379C247.096 106.215 257.45 115.716 270.178 115.716H293.26Z" fill="url(#paint1_linear_3915_9690)"/>
-<path d="M281 87.0039V105.004H267.875C263.525 105.004 260 100.975 260 96.0039C260 91.0329 263.525 87.0039 267.875 87.0039H281Z" fill="url(#paint2_linear_3915_9690)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_3915_9690" x1="193.333" y1="67.4516" x2="461.226" y2="381.335" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="0.505256" stop-color="#FFC968"/>
-<stop offset="0.943364" stop-color="#FEB431"/>
-</linearGradient>
-<linearGradient id="paint1_linear_3915_9690" x1="228.36" y1="-174.547" x2="228.36" y2="310.263" gradientUnits="userSpaceOnUse">
-<stop offset="0.182292" stop-color="white"/>
-<stop offset="0.411458" stop-color="white"/>
-<stop offset="0.770833" stop-color="#FEB431"/>
-</linearGradient>
-<linearGradient id="paint2_linear_3915_9690" x1="271.308" y1="41.1857" x2="276.959" y2="190.699" gradientUnits="userSpaceOnUse">
-<stop offset="0.25564" stop-color="white"/>
-<stop offset="0.340692" stop-color="#FFE1AC"/>
-<stop offset="0.457391" stop-color="#FEB431"/>
-</linearGradient>
-<clipPath id="clip0_3915_9690">
-<rect width="284.6" height="109.6" fill="white" transform="matrix(-1 0 0 -1 284.602 109.605)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/Invitation_Card.svg b/src/assets/Invitation_Card.svg
deleted file mode 100644
index 04673e7df..000000000
--- a/src/assets/Invitation_Card.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-<svg width="285" height="110" viewBox="0 0 285 110" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3915_9698)">
-<rect x="284.602" y="109.605" width="284.6" height="109.6" rx="8" transform="rotate(-180 284.602 109.605)" fill="url(#paint0_linear_3915_9698)"/>
-<path d="M280.641 62.1875V75.4002L291.415 69.1668L280.641 62.1875Z" fill="url(#paint1_linear_3915_9698)"/>
-<path d="M235.187 32.8553C231.39 30.4046 225.883 30.378 222.086 32.8287L217.742 35.7057H239.599L235.187 32.8553Z" fill="url(#paint2_linear_3915_9698)"/>
-<path d="M238.84 106.236C235.898 107.941 232.341 108.873 228.681 108.846C225.021 108.846 221.43 107.941 218.488 106.236L164 74.5625V128.879C163.966 133.274 168.515 136.87 174.159 136.897H283.101C288.745 136.87 293.294 133.274 293.26 128.879V74.5625L238.84 106.236Z" fill="url(#paint3_linear_3915_9698)"/>
-<path d="M165.875 69.1731L176.307 75.2201V62.4336L165.875 69.1731Z" fill="url(#paint4_linear_3915_9698)"/>
-<path d="M183.156 41.0312V79.1777L222.492 101.98C226.152 104.058 231.18 104.058 234.84 101.98L273.799 79.3641V41.0312H183.156ZM207.442 62.3421H225.912C227.793 62.3421 229.333 63.5408 229.333 65.0059C229.333 66.4711 227.793 67.6698 225.912 67.6698H207.442C205.56 67.6698 204.021 66.4711 204.021 65.0059C204.021 63.5408 205.56 62.3421 207.442 62.3421ZM249.855 80.9891H207.442C205.56 80.9891 204.021 79.7903 204.021 78.3252C204.021 76.8601 205.56 75.6614 207.442 75.6614H249.855C251.737 75.6614 253.276 76.8601 253.276 78.3252C253.276 79.7903 251.737 80.9891 249.855 80.9891Z" fill="url(#paint5_linear_3915_9698)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_3915_9698" x1="177.301" y1="76.9672" x2="605.298" y2="261.984" gradientUnits="userSpaceOnUse">
-<stop offset="0.135417" stop-color="white"/>
-<stop offset="0.385417" stop-color="#40F783"/>
-<stop offset="0.630208" stop-color="#22C55E"/>
-</linearGradient>
-<linearGradient id="paint1_linear_3915_9698" x1="286.092" y1="45.9944" x2="286.48" y2="87.9649" gradientUnits="userSpaceOnUse">
-<stop offset="0.299087" stop-color="white"/>
-<stop offset="0.723889" stop-color="#22C55E"/>
-</linearGradient>
-<linearGradient id="paint2_linear_3915_9698" x1="228.8" y1="25.2416" x2="228.825" y2="40.178" gradientUnits="userSpaceOnUse">
-<stop offset="0.299087" stop-color="white"/>
-<stop offset="0.723889" stop-color="#22C55E"/>
-</linearGradient>
-<linearGradient id="paint3_linear_3915_9698" x1="229.398" y1="-1.83218" x2="230.118" y2="196.188" gradientUnits="userSpaceOnUse">
-<stop offset="0.299087" stop-color="white"/>
-<stop offset="0.723889" stop-color="#22C55E"/>
-</linearGradient>
-<linearGradient id="paint4_linear_3915_9698" x1="171.153" y1="46.7629" x2="171.528" y2="87.3794" gradientUnits="userSpaceOnUse">
-<stop offset="0.299087" stop-color="white"/>
-<stop offset="0.723889" stop-color="#22C55E"/>
-</linearGradient>
-<linearGradient id="paint5_linear_3915_9698" x1="229.016" y1="-35.5756" x2="230.048" y2="162.992" gradientUnits="userSpaceOnUse">
-<stop offset="0.299087" stop-color="white"/>
-<stop offset="0.723889" stop-color="#22C55E"/>
-</linearGradient>
-<clipPath id="clip0_3915_9698">
-<rect width="284.6" height="109.6" fill="white" transform="matrix(-1 0 0 -1 284.602 109.605)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/Schema_Card.svg b/src/assets/Schema_Card.svg
deleted file mode 100644
index ca9322119..000000000
--- a/src/assets/Schema_Card.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="285" height="110" viewBox="0 0 285 110" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3915_9719)">
-<rect x="284.602" y="109.605" width="284.6" height="109.6" rx="8" transform="rotate(-180 284.602 109.605)" fill="url(#paint0_linear_3915_9719)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M165.783 97.194C164.633 98.8816 163.996 100.838 164 102.873C164 106.861 166.451 110.543 170.409 112.499C182.225 118.338 199.751 126.999 212.062 133.083C222.352 138.164 234.912 138.164 245.203 133.083C257.513 126.999 275.035 118.341 286.851 112.503C290.809 110.547 293.26 106.865 293.26 102.873C293.26 100.838 292.622 98.8854 291.472 97.1978C290.37 98.8173 288.789 100.191 286.851 101.152C275.035 106.99 257.513 115.647 245.203 121.732C234.912 126.813 222.352 126.813 212.062 121.732C199.751 115.647 182.225 106.986 170.409 101.148C168.467 100.187 166.89 98.8172 165.783 97.194ZM165.783 78.2754C164.633 79.9629 163.996 81.9191 164 83.9548C164 87.9428 166.451 91.6244 170.409 93.5806C182.225 99.4189 199.751 108.08 212.062 114.164C222.352 119.246 234.912 119.246 245.203 114.164C257.513 108.08 275.035 99.4227 286.851 93.5844C290.809 91.6282 293.26 87.9466 293.26 83.9548C293.26 81.9191 292.622 79.9667 291.472 78.2792C290.37 79.8986 288.789 81.2722 286.851 82.2332C275.035 88.0715 257.513 96.7287 245.203 102.813C234.912 107.894 222.352 107.894 212.062 102.813C199.751 96.7287 182.225 88.0677 170.409 82.2294C168.467 81.2684 166.89 79.8986 165.783 78.2754ZM245.172 34.8155C234.882 29.7302 222.313 29.734 212.027 34.8231C199.721 40.9074 182.212 49.5682 170.405 55.4065C166.447 57.3627 163.996 61.0443 164 65.0361C164 69.0242 166.451 72.7058 170.409 74.662C182.225 80.5003 199.751 89.1612 212.062 95.2455C222.352 100.327 234.912 100.327 245.203 95.2455C257.513 89.1612 275.035 80.5041 286.851 74.6658C290.809 72.7096 293.26 69.028 293.26 65.0361C293.26 61.0443 290.809 57.3627 286.851 55.4065L245.172 34.8155Z" fill="url(#paint1_linear_3915_9719)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_3915_9719" x1="177.301" y1="76.9672" x2="605.298" y2="261.984" gradientUnits="userSpaceOnUse">
-<stop offset="0.0520833" stop-color="white"/>
-<stop offset="0.380208" stop-color="#5AC2E8"/>
-<stop offset="0.6875" stop-color="#0054FF"/>
-</linearGradient>
-<linearGradient id="paint1_linear_3915_9719" x1="225.5" y1="-147.496" x2="220" y2="255.004" gradientUnits="userSpaceOnUse">
-<stop offset="0.367021" stop-color="white"/>
-<stop offset="0.653734" stop-color="#25AFE1"/>
-</linearGradient>
-<clipPath id="clip0_3915_9719">
-<rect width="284.6" height="109.6" fill="white" transform="matrix(-1 0 0 -1 284.602 109.605)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/User_Card.svg b/src/assets/User_Card.svg
deleted file mode 100644
index 0bd383669..000000000
--- a/src/assets/User_Card.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<svg width="285" height="110" viewBox="0 0 285 110" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3915_9665)">
-<rect x="284.602" y="109.602" width="284.6" height="109.6" rx="8" transform="rotate(180 284.602 109.602)" fill="url(#paint0_linear_3915_9665)"/>
-<path d="M274.606 89.0742H264.609C265.628 91.7181 266.185 94.5714 266.185 97.5453V133.352C266.185 134.592 265.957 135.782 265.543 136.889H282.07C288.243 136.889 293.265 132.129 293.265 126.278V106.758C293.266 97.0074 284.895 89.0742 274.606 89.0742Z" fill="url(#paint1_linear_3915_9665)"/>
-<path d="M191.081 97.5453C191.081 94.5712 191.637 91.7181 192.656 89.0742H182.66C172.371 89.0742 164 97.0074 164 106.759V126.278C164 132.129 169.022 136.889 175.196 136.889H191.723C191.308 135.782 191.081 134.592 191.081 133.352V97.5453Z" fill="url(#paint2_linear_3915_9665)"/>
-<path d="M240.044 79.8438H217.191C206.902 79.8438 198.531 87.777 198.531 97.5281V133.335C198.531 135.288 200.202 136.872 202.263 136.872H254.972C257.033 136.872 258.704 135.288 258.704 133.335V97.5281C258.704 87.777 250.333 79.8438 240.044 79.8438Z" fill="url(#paint3_linear_3915_9665)"/>
-<path d="M229.081 31.0039C216.707 31.0039 206.641 40.5445 206.641 52.2718C206.641 60.2263 211.273 67.1735 218.114 70.8209C221.359 72.5508 225.1 73.5395 229.081 73.5395C233.062 73.5395 236.803 72.5508 240.048 70.8209C246.889 67.1735 251.522 60.2261 251.522 52.2718C251.522 40.5448 241.455 31.0039 229.081 31.0039Z" fill="url(#paint4_linear_3915_9665)"/>
-<path d="M189.212 52.793C179.958 52.793 172.43 59.928 172.43 68.6984C172.43 77.4688 179.958 84.6038 189.212 84.6038C191.56 84.6038 193.795 84.143 195.825 83.3146C199.336 81.8821 202.231 79.3463 204.022 76.17C205.279 73.9408 205.995 71.3976 205.995 68.6984C205.995 59.9282 198.466 52.793 189.212 52.793Z" fill="url(#paint5_linear_3915_9665)"/>
-<path d="M268.017 52.793C258.763 52.793 251.234 59.928 251.234 68.6984C251.234 71.3978 251.95 73.941 253.207 76.17C254.998 79.3466 257.893 81.8824 261.404 83.3146C263.434 84.143 265.669 84.6038 268.017 84.6038C277.271 84.6038 284.799 77.4688 284.799 68.6984C284.799 59.928 277.271 52.793 268.017 52.793Z" fill="url(#paint6_linear_3915_9665)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_3915_9665" x1="177.301" y1="76.9633" x2="605.298" y2="261.98" gradientUnits="userSpaceOnUse">
-<stop offset="0.119792" stop-color="white"/>
-<stop offset="0.463542" stop-color="#2F80ED"/>
-<stop offset="0.640625" stop-color="#1F4EAD"/>
-</linearGradient>
-<linearGradient id="paint1_linear_3915_9665" x1="278.646" y1="30.0099" x2="278.646" y2="187.984" gradientUnits="userSpaceOnUse">
-<stop offset="0.287143" stop-color="white"/>
-<stop offset="0.659769" stop-color="#1F4EAD"/>
-</linearGradient>
-<linearGradient id="paint2_linear_3915_9665" x1="178.037" y1="30.0096" x2="178.037" y2="187.984" gradientUnits="userSpaceOnUse">
-<stop offset="0.287143" stop-color="white"/>
-<stop offset="0.659769" stop-color="#1F4EAD"/>
-</linearGradient>
-<linearGradient id="paint3_linear_3915_9665" x1="228.007" y1="9.39841" x2="228.007" y2="197.812" gradientUnits="userSpaceOnUse">
-<stop offset="0.287143" stop-color="white"/>
-<stop offset="0.659769" stop-color="#1F4EAD"/>
-</linearGradient>
-<linearGradient id="paint4_linear_3915_9665" x1="228.625" y1="-21.5394" x2="228.625" y2="118.993" gradientUnits="userSpaceOnUse">
-<stop offset="0.287143" stop-color="white"/>
-<stop offset="0.659769" stop-color="#1F4EAD"/>
-</linearGradient>
-<linearGradient id="paint5_linear_3915_9665" x1="188.871" y1="13.4977" x2="188.871" y2="118.597" gradientUnits="userSpaceOnUse">
-<stop offset="0.287143" stop-color="white"/>
-<stop offset="0.659769" stop-color="#1F4EAD"/>
-</linearGradient>
-<linearGradient id="paint6_linear_3915_9665" x1="267.676" y1="13.4977" x2="267.676" y2="118.597" gradientUnits="userSpaceOnUse">
-<stop offset="0.287143" stop-color="white"/>
-<stop offset="0.659769" stop-color="#1F4EAD"/>
-</linearGradient>
-<clipPath id="clip0_3915_9665">
-<rect width="284.6" height="109.6" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/cred-icon.svg b/src/assets/cred-icon.svg
new file mode 100644
index 000000000..ac3261b70
--- /dev/null
+++ b/src/assets/cred-icon.svg
@@ -0,0 +1,16 @@
+<svg width="156" height="100" viewBox="0 0 156 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M155.262 101.512V114.201C155.262 121.2 149.055 126.89 141.432 126.89H22.495C10.2915 126.89 0.367188 117.784 0.367188 106.588C0.367188 106.588 0.367188 20.3785 0.367188 20.3024C0.367188 9.10563 10.2915 0 22.495 0H124.836C129.422 0 133.134 3.4108 133.134 7.6134C133.134 11.816 129.422 15.2268 124.836 15.2268H22.495C19.4469 15.2268 16.9631 17.5007 16.9631 20.3024C16.9631 23.1041 19.4469 25.378 22.495 25.378H141.432C149.055 25.378 155.262 31.0677 155.262 38.067V50.756H127.602C112.351 50.756 99.9424 62.1406 99.9424 76.134C99.9424 90.1274 112.351 101.512 127.602 101.512H155.262Z" fill="url(#paint0_linear_6429_9301)"/>
+<path d="M140.571 67.1055V88.6752H124.843C119.631 88.6752 115.406 83.8472 115.406 77.8903C115.406 71.9335 119.631 67.1055 124.843 67.1055H140.571Z" fill="url(#paint1_linear_6429_9301)"/>
+<defs>
+<linearGradient id="paint0_linear_6429_9301" x1="77.4914" y1="-246.316" x2="77.4914" y2="334.641" gradientUnits="userSpaceOnUse">
+<stop offset="0.182292" stop-color="white"/>
+<stop offset="0.411458" stop-color="white"/>
+<stop offset="0.770833" stop-color="#FEB431"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6429_9301" x1="128.956" y1="12.2007" x2="135.728" y2="191.366" gradientUnits="userSpaceOnUse">
+<stop offset="0.25564" stop-color="white"/>
+<stop offset="0.340692" stop-color="#FFE1AC"/>
+<stop offset="0.457391" stop-color="#FEB431"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/endorser-icon.svg b/src/assets/endorser-icon.svg
new file mode 100644
index 000000000..a1c8aefb9
--- /dev/null
+++ b/src/assets/endorser-icon.svg
@@ -0,0 +1,24 @@
+<svg width="122" height="126" viewBox="0 0 122 126" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.4857 1.16807C39.2653 1.40842 36.6502 2.4042 34.7324 3.3313C27.7588 6.66198 22.8075 12.6709 20.7154 20.2251C19.7739 23.5901 19.8437 29.9081 20.8549 33.3418C23.7838 43.5055 31.8384 50.579 42.4383 52.3645C45.2975 52.8452 46.3785 52.8452 49.2377 52.5362C55.5837 51.7807 60.7791 49.3428 65.2073 44.9134C69.0429 41.1363 71.2744 37.0159 72.4251 31.7623C73.2271 28.0196 72.8784 22.1823 71.6929 18.6456C68.6942 9.88965 61.7554 3.53732 52.864 1.30541C49.5863 0.481327 43.9028 0.412655 40.4857 1.16807Z" fill="url(#paint0_linear_5954_11156)"/>
+<path d="M32.5389 63.6881C29.0115 64.2822 25.9682 65.1591 22.4754 66.5736C18.3255 68.2709 15.4552 69.9683 12.0661 72.7689C5.66839 78.0308 1.72601 84.9051 0.861448 92.3451C0.688537 94.0142 0.515625 102.586 0.515625 111.412V127.48H21.9567H43.3977V115.09C43.3977 104.34 43.4669 102.642 43.9511 102.077C44.4698 101.454 44.5044 101.454 55.467 101.454C65.6688 101.454 66.4987 101.483 67.0175 101.964C67.3633 102.246 67.6054 102.727 67.6054 102.982C67.6054 103.463 67.8475 103.491 69.9224 103.293C75.1097 102.84 78.8446 101.285 80.0896 99.1063C81.0579 97.3241 80.9542 94.1557 79.7092 89.1485C78.4988 84.2827 78.4296 82.8116 79.3288 81.1709C80.1934 79.6715 82.0608 78.8229 84.5507 78.8229H86.3144L84.8274 77.0406C81.0579 72.5709 73.9685 67.8183 67.882 65.7532C61.4843 63.5466 60.5506 63.4618 47.0289 63.3769C37.7262 63.3203 34.3717 63.3769 32.5389 63.6881Z" fill="url(#paint1_linear_5954_11156)"/>
+<path d="M83.1319 82.872C82.8207 83.4378 82.959 84.4279 83.8927 88.1904C85.4143 94.4706 85.4489 97.7239 84.0656 100.27C81.9215 104.117 77.6679 106.069 70.0252 106.776L67.7773 106.974V120.695V134.415L71.7197 135.49C81.714 138.206 86.5901 138.913 95.6161 138.941C103.19 138.941 105.991 138.659 111.766 137.216C115.466 136.311 117.887 134.585 119.651 131.614C121.345 128.729 121.622 126.862 121.484 119.535C121.38 112.378 121.138 111.614 118.613 109.521C115.985 107.399 115.155 107.257 106.337 107.342C99.9043 107.427 98.4519 107.371 97.864 107.003C97.2069 106.607 97.1723 106.182 96.9994 98.1482C96.7919 88.4733 96.7228 88.247 93.5412 85.5029C91.4663 83.6924 88.6651 82.5891 85.6564 82.3345C83.6161 82.1648 83.5123 82.1648 83.1319 82.872Z" fill="url(#paint2_linear_5954_11156)"/>
+<path d="M47.5469 120.833V136.816H55.5008H63.4548V120.833V104.849H55.5008H47.5469V120.833Z" fill="url(#paint3_linear_5954_11156)"/>
+<defs>
+<linearGradient id="paint0_linear_5954_11156" x1="46.7685" y1="116.612" x2="47.9994" y2="-48.9153" gradientUnits="userSpaceOnUse">
+<stop offset="0.299087" stop-color="white"/>
+<stop offset="0.723889" stop-color="#22C55E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5954_11156" x1="43.9249" y1="206.067" x2="45.0722" y2="2.36873" gradientUnits="userSpaceOnUse">
+<stop offset="0.299087" stop-color="white"/>
+<stop offset="0.723889" stop-color="#22C55E"/>
+</linearGradient>
+<linearGradient id="paint2_linear_5954_11156" x1="94.9654" y1="208.431" x2="96.3976" y2="28.3181" gradientUnits="userSpaceOnUse">
+<stop offset="0.299087" stop-color="white"/>
+<stop offset="0.723889" stop-color="#22C55E"/>
+</linearGradient>
+<linearGradient id="paint3_linear_5954_11156" x1="55.5954" y1="175.994" x2="57.1329" y2="74.4651" gradientUnits="userSpaceOnUse">
+<stop offset="0.299087" stop-color="white"/>
+<stop offset="0.723889" stop-color="#22C55E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/member-icon.svg b/src/assets/member-icon.svg
new file mode 100644
index 000000000..1a8e09262
--- /dev/null
+++ b/src/assets/member-icon.svg
@@ -0,0 +1,9 @@
+<svg width="156" height="125" viewBox="0 0 156 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.0742 8.56171C69.4992 13.2234 52.1625 18.0984 47.6227 19.3781L39.3047 21.7242V37.2023V52.7109H55.7578H72.2109V99.7852V146.859H67.6406H63.0703V104.355V61.8516L43.9664 61.9125L24.832 62.0039L24.7406 104.416L24.6797 146.859H15.3867H6.09375V151.43V156H78H149.906V151.43V146.859H145.184H140.461V90.7969V34.7344H133.148H125.836V90.7969V146.859H121.266H116.695V73.4297C116.695 33.0281 116.604 -1.52588e-05 116.482 0.0304565C116.33 0.0609283 102.68 3.86952 86.0742 8.56171ZM98.8711 51.9492V61.0898L94.3922 61.1812L89.8828 61.2727V51.9492V42.6258L94.3922 42.7172L98.8711 42.8086V51.9492ZM48.4453 85.6172V94.7578H43.875H39.3047V85.6172V76.4766H43.875H48.4453V85.6172ZM99.0234 85.6172V94.7578H94.4531H89.8828V85.6172V76.4766H94.4531H99.0234V85.6172ZM48.4453 119.133V128.273H43.875H39.3047V119.133V109.992H43.875H48.4453V119.133ZM99.0234 119.133V128.273H94.4531H89.8828V119.133V109.992H94.4531H99.0234V119.133Z" fill="url(#paint0_linear_6417_9102)"/>
+<defs>
+<linearGradient id="paint0_linear_6417_9102" x1="76.5401" y1="348.666" x2="76.5401" y2="-166.639" gradientUnits="userSpaceOnUse">
+<stop offset="0.443541" stop-color="#1F4EAD"/>
+<stop offset="0.75795" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/schema-icon.svg b/src/assets/schema-icon.svg
new file mode 100644
index 000000000..65e0e4b8c
--- /dev/null
+++ b/src/assets/schema-icon.svg
@@ -0,0 +1,9 @@
+<svg width="129" height="107" viewBox="0 0 129 107" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.77626 77.5087C0.63072 79.4848 -0.00426882 81.7756 2.16008e-05 84.1593C2.16008e-05 88.8293 2.4413 93.1405 6.3842 95.4312C18.1528 102.268 35.6106 112.41 47.8727 119.534C58.1225 125.485 70.6332 125.485 80.8831 119.534C93.1451 112.41 110.599 102.272 122.367 95.4356C126.31 93.1449 128.751 88.8338 128.751 84.1593C128.751 81.7756 128.116 79.4893 126.971 77.5132C125.872 79.4096 124.298 81.018 122.367 82.1434C110.599 88.98 93.1451 99.1176 80.8831 106.242C70.6332 112.193 58.1225 112.193 47.8727 106.242C35.6106 99.1176 18.1528 88.9756 6.3842 82.1389C4.44922 81.0135 2.8789 79.4095 1.77626 77.5087ZM1.77626 55.355C0.63072 57.3311 -0.00426882 59.6218 2.16008e-05 62.0056C2.16008e-05 66.6756 2.4413 70.9867 6.3842 73.2774C18.1528 80.1141 35.6106 90.2561 47.8727 97.3807C58.1225 103.331 70.6332 103.331 80.8831 97.3807C93.1451 90.2561 110.599 80.1185 122.367 73.2819C126.31 70.9912 128.751 66.68 128.751 62.0056C128.751 59.6218 128.116 57.3356 126.971 55.3594C125.872 57.2558 124.298 58.8642 122.367 59.9896C110.599 66.8263 93.1451 76.9638 80.8831 84.0885C70.6332 90.039 58.1225 90.039 47.8727 84.0885C35.6106 76.9638 18.1528 66.8218 6.3842 59.9852C4.44922 58.8598 2.8789 57.2558 1.77626 55.355ZM80.8531 4.4634C70.6033 -1.49153 58.0838 -1.48704 47.8382 4.47232C35.5805 11.597 18.1399 21.7388 6.37988 28.5755C2.43698 30.8662 -0.00426882 35.1774 2.16008e-05 39.8518C2.16008e-05 44.5218 2.4413 48.833 6.3842 51.1237C18.1528 57.9603 35.6106 68.1023 47.8727 75.227C58.1225 81.1775 70.6332 81.1775 80.8831 75.227C93.1451 68.1023 110.599 57.9648 122.367 51.1281C126.31 48.8374 128.751 44.5262 128.751 39.8518C128.751 35.1774 126.31 30.8662 122.367 28.5755L80.8531 4.4634Z" fill="url(#paint0_linear_6429_9297)"/>
+<defs>
+<linearGradient id="paint0_linear_6429_9297" x1="61.258" y1="-209.024" x2="53.6869" y2="262.271" gradientUnits="userSpaceOnUse">
+<stop offset="0.367021" stop-color="white"/>
+<stop offset="0.653734" stop-color="#25AFE1"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/users-icon.svg b/src/assets/users-icon.svg
new file mode 100644
index 000000000..c91d565c3
--- /dev/null
+++ b/src/assets/users-icon.svg
@@ -0,0 +1,34 @@
+<svg width="136" height="107" viewBox="0 0 136 107" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M115.639 71.2969H105.199C106.263 74.5429 106.845 78.0459 106.845 81.6969V125.657C106.845 127.179 106.607 128.641 106.174 130H123.433C129.88 130 135.125 124.156 135.125 116.973V93.0079C135.125 81.0366 126.383 71.2969 115.639 71.2969Z" fill="url(#paint0_linear_6417_9207)"/>
+<path d="M28.417 81.6969C28.417 78.0456 28.9984 74.5429 30.0625 71.2969H19.623C8.87827 71.2969 0.136719 81.0366 0.136719 93.0082V116.973C0.136719 124.156 5.38149 130 11.8285 130H29.0875C28.6549 128.64 28.417 127.179 28.417 125.657V81.6969Z" fill="url(#paint1_linear_6417_9207)"/>
+<path d="M79.5399 59.957H55.6738C44.9291 59.957 36.1875 69.6967 36.1875 81.6684V125.629C36.1875 128.027 37.9323 129.971 40.0848 129.971H95.1289C97.2813 129.971 99.0262 128.027 99.0262 125.629V81.6684C99.0262 69.6967 90.2846 59.957 79.5399 59.957Z" fill="url(#paint2_linear_6417_9207)"/>
+<path d="M68.0988 -0.00390625C55.1768 -0.00390625 44.6641 11.7092 44.6641 26.107C44.6641 35.8729 49.5018 44.402 56.6461 48.88C60.0348 51.0039 63.9416 52.2176 68.0988 52.2176C72.256 52.2176 76.1628 51.0039 79.5514 48.88C86.6961 44.402 91.5335 35.8726 91.5335 26.107C91.5335 11.7095 81.0208 -0.00390625 68.0988 -0.00390625Z" fill="url(#paint3_linear_6417_9207)"/>
+<path d="M26.4597 26.7422C16.7956 26.7422 8.93359 35.5019 8.93359 46.2695C8.93359 57.0371 16.7956 65.7968 26.4597 65.7968C28.9111 65.7968 31.2454 65.231 33.366 64.2141C37.0323 62.4554 40.0553 59.3421 41.9259 55.4426C43.2388 52.7056 43.9858 49.5833 43.9858 46.2695C43.9858 35.5022 36.1237 26.7422 26.4597 26.7422Z" fill="url(#paint4_linear_6417_9207)"/>
+<path d="M108.764 26.7422C99.1003 26.7422 91.2383 35.5019 91.2383 46.2695C91.2383 49.5836 91.9852 52.7059 93.2982 55.4426C95.1688 59.3424 98.1918 62.4556 101.858 64.2141C103.979 65.231 106.313 65.7968 108.764 65.7968C118.428 65.7968 126.29 57.0371 126.29 46.2695C126.29 35.5019 118.428 26.7422 108.764 26.7422Z" fill="url(#paint5_linear_6417_9207)"/>
+<defs>
+<linearGradient id="paint0_linear_6417_9207" x1="119.858" y1="-1.21726" x2="119.858" y2="192.729" gradientUnits="userSpaceOnUse">
+<stop offset="0.287143" stop-color="white"/>
+<stop offset="0.659769" stop-color="#1F4EAD"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6417_9207" x1="14.7958" y1="-1.21762" x2="14.7958" y2="192.73" gradientUnits="userSpaceOnUse">
+<stop offset="0.287143" stop-color="white"/>
+<stop offset="0.659769" stop-color="#1F4EAD"/>
+</linearGradient>
+<linearGradient id="paint2_linear_6417_9207" x1="66.9689" y1="-26.5297" x2="66.9689" y2="204.788" gradientUnits="userSpaceOnUse">
+<stop offset="0.287143" stop-color="white"/>
+<stop offset="0.659769" stop-color="#1F4EAD"/>
+</linearGradient>
+<linearGradient id="paint3_linear_6417_9207" x1="67.623" y1="-64.5121" x2="67.623" y2="108.022" gradientUnits="userSpaceOnUse">
+<stop offset="0.287143" stop-color="white"/>
+<stop offset="0.659769" stop-color="#1F4EAD"/>
+</linearGradient>
+<linearGradient id="paint4_linear_6417_9207" x1="26.1038" y1="-21.5011" x2="26.1038" y2="107.531" gradientUnits="userSpaceOnUse">
+<stop offset="0.287143" stop-color="white"/>
+<stop offset="0.659769" stop-color="#1F4EAD"/>
+</linearGradient>
+<linearGradient id="paint5_linear_6417_9207" x1="108.409" y1="-21.5011" x2="108.409" y2="107.531" gradientUnits="userSpaceOnUse">
+<stop offset="0.287143" stop-color="white"/>
+<stop offset="0.659769" stop-color="#1F4EAD"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/common/enums.ts b/src/common/enums.ts
index 5b52d2eb8..d8a16e7d7 100644
--- a/src/common/enums.ts
+++ b/src/common/enums.ts
@@ -36,3 +36,20 @@ export enum IssueCredentialUserText {
 	done = 'Accepted',
 	abandoned = 'Declined'
 }
+
+export enum EndorsementType {
+	schema = 'schema',
+	credDef = 'credential-definition'
+}
+
+export enum EndorsementStatus {
+    signed = "signed",
+    rejected = "declined",
+    requested = "requested",
+    submited = "submited"
+}
+
+export enum EcosystemRoles {
+	ecosystemMember = "Ecosystem Member",
+	ecosystemLead = "Ecosystem Lead"
+}
diff --git a/src/common/global.css b/src/common/global.css
new file mode 100644
index 000000000..8d2bbff13
--- /dev/null
+++ b/src/common/global.css
@@ -0,0 +1,22 @@
+.custom-shadow-blue {
+  box-shadow: -4px 0px 50px 0px rgba(31, 78, 173, 0.50);
+}
+
+.min-h-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: calc(100vh - 64px);
+}
+
+input[type="radio"] {
+  @apply !text-primary-700;
+}
+
+ul[role="tablist"] li[role="presentation"] button[aria-selected="true"] {
+  @apply text-primary-700 border-primary-700;
+}
+
+#schema-cards div[data-testid="flowbite-card"] div {
+  @apply justify-start;
+}
\ No newline at end of file
diff --git a/src/commonComponents/ConfirmPopup.tsx b/src/commonComponents/ConfirmPopup.tsx
new file mode 100644
index 000000000..6385d1bfd
--- /dev/null
+++ b/src/commonComponents/ConfirmPopup.tsx
@@ -0,0 +1,88 @@
+import { Button, Modal } from 'flowbite-react';
+
+interface IProps {
+    openModal: boolean;
+    closeModal: (flag: boolean) => void;
+    onSuccess: (flag: boolean) => void;
+    message: string
+    isProcessing: boolean
+}
+
+const ConfirmModal = (props: IProps) => {
+    return (
+        <Modal show={props.openModal} size="md">
+            <div className="relative w-full max-w-md max-h-full">
+                <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                    <button
+                        type="button"
+                        className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+                        data-modal-hide="popup-modal"
+                        onClick={() => {
+                            props.closeModal(false)
+                        }}
+                    >
+                        <svg
+                            className="w-3 h-3"
+                            aria-hidden="true"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 14 14"
+                        >
+                            <path
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+                            />
+                        </svg>
+                        <span className="sr-only">Close modal</span>
+                    </button>
+                    <div className="p-6 text-center">
+                        <svg
+                            className="mx-auto mb-4 text-yellow-300 w-12 h-12 dark:text-gray-200"
+                            aria-hidden="true"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 20 20"
+                        >
+                            <path
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+                            />
+                        </svg>
+                        <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+                            {props.message}
+                        </h3>
+                        <button
+                            data-modal-hide="popup-modal"
+                            type="button"
+                            className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+                            onClick={() => {
+                                props.closeModal(false)
+                            }}
+                        >
+                            No, cancel
+                        </button>
+                        <Button
+                            type="submit"
+                            isProcessing={props.isProcessing}
+                            disabled={props.isProcessing}
+                            onClick={() => {
+                                props.onSuccess(true)
+                            }}
+                            className="text-base bg-primary-700 hover:!bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 font-medium rounded-lg text-sm inline-flex items-center text-center ml-2"
+                        >
+                            Yes, I'm sure
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default ConfirmModal;
\ No newline at end of file
diff --git a/src/commonComponents/CredentialDefinitionCard.tsx b/src/commonComponents/CredentialDefinitionCard.tsx
index e20654453..abcab12b8 100644
--- a/src/commonComponents/CredentialDefinitionCard.tsx
+++ b/src/commonComponents/CredentialDefinitionCard.tsx
@@ -1,44 +1,70 @@
 import { Button, Card } from 'flowbite-react';
 
-const CredDeffCard = (props: { credDeffName: string, credentialDefinitionId: string, schemaId: string, revocable: boolean, onClickCallback: (schemaId: string, credentialDefinitionId: string) => void; }) => {
-  return (
-    <Card onClick={() => {
+import { Roles } from '../utils/enums/roles';
+
+interface IProps {
+  credDeffName: string,
+  userRoles?: string[],
+  credentialDefinitionId: string
+  schemaId: string
+  revocable: boolean
+  onClickCallback: (schemaId: string, credentialDefinitionId: string) => void;
+}
+
+const CredDeffCard = (props: IProps) => {
+
+  const redirectToIssuance = () => {
+    if (props?.userRoles?.includes(Roles.OWNER)
+      || props?.userRoles?.includes(Roles.ADMIN)
+      || props?.userRoles?.includes(Roles.ISSUER)) {
       props.onClickCallback(props.schemaId, props.credentialDefinitionId)
-    }} className=' cursor-pointer overflow-hidden overflow-ellipsis' style={{ maxHeight: '100%', maxWidth: '100%', overflow: 'auto' }}>
-      <div className="mb-1 lg:flex lg:items-center justify-between">
-        <div className="lg:w-1/2 md:w-2/3"> {/* This will take up 2/3 of the available width on larger screens */}
-          <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
+
+    }
+  }
+
+  return (
+    <Card onClick={redirectToIssuance} className='cursor-pointer overflow-hidden overflow-ellipsis h-full' style={{ maxHeight: '100%', maxWidth: '100%', overflow: 'auto' }}>
+      <div className="mb-1 flex items-center justify-between flex-wrap">
+        <div className="min-w-[6rem] max-w-100/8rem"> {/* This will take up 2/3 of the available width on larger screens */}
+          <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white break-words truncate line-clamp-2 max-h-[40px] whitespace-normal" style={{ display: "-webkit-box" }}>
             {props.credDeffName}
           </h5>
         </div>
-        <div className="p-2 lg:w-1/2 md:w-2/3 mt-2 lg:mt-0">
-          <Button
-            type="submit"
-            color='bg-primary-800'
-            title='Initiate Credential Issuance'
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
+        {
+          props.userRoles
+          && (props.userRoles.includes(Roles.OWNER)
+            || props.userRoles.includes(Roles.ADMIN)
+            || props.userRoles.includes(Roles.ISSUER)
+          )
+          && <div className="p-2">
+            <Button
+              type="submit"
+              color='bg-primary-800'
+              title='Initiate Credential Issuance'
+              className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
+						ring-2 text-black font-medium rounded-lg text-sm mr-2 ml-auto dark:text-white dark:hover:text-black 
 						dark:hover:bg-primary-50'
-            style={{ height: '1.5rem', width: '100%', minWidth: '2rem' }}
-          >
-            <div className='mr-2'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 23 23">  <path fill="#1F4EAD" fill-rule="evenodd" d="M21 21H2V2h9.5V0H2.556A2.563 2.563 0 0 0 0 2.556v17.888A2.563 2.563 0 0 0 2.556 23h17.888A2.563 2.563 0 0 0 23 20.444V11.5h-2V21ZM14.056 0v2H19.5l-13 13 1 1.5L21 3v5.944h2V0h-8.944Z" clip-rule="evenodd" />
-            </svg>
-            </div>
-
-            Issue
-          </Button>
-        </div>
+              style={{ height: '1.5rem', width: '100%', minWidth: '2rem' }}
+            >
+              <div className='mr-2'>
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 23 23">  <path fill="#1F4EAD" fill-rule="evenodd" d="M21 21H2V2h9.5V0H2.556A2.563 2.563 0 0 0 0 2.556v17.888A2.563 2.563 0 0 0 2.556 23h17.888A2.563 2.563 0 0 0 23 20.444V11.5h-2V21ZM14.056 0v2H19.5l-13 13 1 1.5L21 3v5.944h2V0h-8.944Z" clip-rule="evenodd" />
+                </svg>
+              </div>
+
+              Issue
+            </Button>
+          </div>
+        }
+
       </div>
-      <div className="min-w-0 flex-1">
+      <div className="min-w-0 flex-1 flex flex-col">
         <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
           ID : {props.credentialDefinitionId}
         </p>
         <p className="truncate text-sm font-medium text-gray-900 dark:text-white pt-2 pb-1">
           Schema ID:{props.schemaId}
         </p>
-        <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white overflow-hidden overflow-ellipsis">
+        <div className="mt-auto inline-flex items-center text-base font-semibold text-gray-900 dark:text-white overflow-hidden overflow-ellipsis">
           Revocable:
           <>
             <span
diff --git a/src/commonComponents/DashboardCard.tsx b/src/commonComponents/DashboardCard.tsx
new file mode 100644
index 000000000..60da6f4bd
--- /dev/null
+++ b/src/commonComponents/DashboardCard.tsx
@@ -0,0 +1,36 @@
+interface IProps {
+    icon: string
+    backgroundColor: string
+    label: string
+    value: number
+    onClickHandler?: () => void
+    classes?: string
+}
+
+const DashboardCard = ({ icon, backgroundColor, label, value, onClickHandler, classes }: IProps) => {
+    return (
+        <button
+            type="button"
+            className={`items-center justify-between p-4 border-0 border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800 transform transition duration-500 hover:scale-103 hover:bg-gray-50 cursor-pointer bg-no-repeat bg-center bg-cover min-h-[152px] bg-right-bottom bg-transparent overflow-hidden ${classes}`}
+            style={{ backgroundImage: backgroundColor }}
+            onClick={() => {
+                if (onClickHandler)
+                    onClickHandler()
+            }}
+        >
+            <div className='absolute bottom-0 -right-4 -z-10'>
+                <img className="w-[150px] h-[125px]" src={icon} alt="icon" />
+            </div>
+            <div className="w-full text-start">
+                <h3 className="text-base font-medium text-white">
+                    {label}
+                </h3>
+                <span className="text-2xl font-semi-bold leading-none text-white sm:text-3xl dark:text-white">
+                    {value}
+                </span>
+            </div>
+        </button>
+    )
+}
+
+export default DashboardCard
\ No newline at end of file
diff --git a/src/commonComponents/DeletePopup.tsx b/src/commonComponents/DeletePopup.tsx
index 5a626310c..92a7328fe 100644
--- a/src/commonComponents/DeletePopup.tsx
+++ b/src/commonComponents/DeletePopup.tsx
@@ -42,7 +42,7 @@ const DeleteModal = (props: { openModal: boolean; closeModal: (flag: boolean) =>
         </svg>
         <p className="mb-4 text-gray-500 dark:text-gray-300">
           Are you sure you want to revoke{' '}
-          <span className="dark:text-white font-bold">{props.deviceName}</span> device?
+          <span className="dark:text-white font-bold">{props.deviceName}</span> ?
         </p>
         <div className="flex justify-center items-center space-x-4">
           <button
diff --git a/src/commonComponents/DeviceDetailsCard.tsx b/src/commonComponents/DeviceDetailsCard.tsx
index afe84ccde..babaf1cad 100644
--- a/src/commonComponents/DeviceDetailsCard.tsx
+++ b/src/commonComponents/DeviceDetailsCard.tsx
@@ -1,13 +1,10 @@
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import { deleteDeviceById, editDeviceDetails } from "../api/Fido"
 import DeleteModal from "./DeletePopup"
 import EditModal from "./EditPopup";
 import { Alert } from "flowbite-react";
 import type { AxiosResponse } from "axios";
 import { apiStatusCodes } from "../config/CommonConstant";
-import BreadCrumbs from "../components/BreadCrumbs";
-import editIcon from '/images/edit.svg';
-import React from "react";
 import { dateConversion } from "../utils/DateConversion";
 import DateTooltip from "../components/Tooltip";
 
@@ -15,7 +12,7 @@ const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: stri
     const [openModal, setOpenModal] = useState<boolean>(false);
     const [openEditModel, setOpenEditModel] = useState<boolean>(false)
     const [editSuccess, setEditSuccess] = useState<string | null>(null)
-    const [editfailure, setEditFailur] = useState<string | null>(null)
+    const [editfailure, setEditFailure] = useState<string | null>(null)
     const handleDeleteModel = (flag: boolean) => {
         setOpenModal(flag)
     }
@@ -54,11 +51,11 @@ const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: stri
 
 
         } else {
-            setEditFailur(editDeviceDetailsResponse as string)
+            setEditFailure(editDeviceDetailsResponse as string)
         }
         setTimeout(() => {
             props.refreshList()
-        }, 4000);
+        }, 2000);
  
     }
 
@@ -83,24 +80,27 @@ const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: stri
                         </div>
                         <div className="flex-1 min-w-0">
                             <div className="flex">
-                                <p className="text-base font-semibold text-gray-900 truncate dark:text-white pr-1">
+                                <p className="text-base font-semibold text-gray-900 truncate dark:text-white pr-3">
                                     {props?.deviceFriendlyName}
                                 </p>
                                 <button
-                                    className="p-1 border border-gray-400 rounded hover:bg-gray-100"
-                                    onClick={() => setOpenEditModel(true)}
+                                    className="p-1 border border-gray-400 rounded hover:bg-gray-100 dark:hover:bg-black dark:text-white dark:hover:text-white"
+                                    onClick={(e) => {
+                                        e.preventDefault(); 
+                                        setOpenEditModel(true)
+                                    }}
                                 >
-                                    <img
-                                        src={editIcon}
-                                        alt="CREDEBL Logo"
-                                        style={{ width: '14px', height: '14px' }}
-                                    />
+                                    <svg className="h-4 w-4 dark:text-white dark:hover:text-white" viewBox="0 0 20 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="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>
                             </div>
                             <p className="text-sm font-normal text-gray-500 truncate dark:text-gray-400">
-                            <DateTooltip date={props.createDateTime}>
-                                    {dateConversion(new Date(props.createDateTime).toLocaleDateString('en-GB'))}
-                            </DateTooltip>                            </p>
+                            <DateTooltip date={props?.createDateTime}> {dateConversion(props?.createDateTime)} </DateTooltip>                           </p>
                             <p className="text-sm font-normal text-gray-500 truncate dark:text-gray-400">
                                 {props.credentialID}
                             </p>
@@ -109,7 +109,10 @@ const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: stri
                             <button
                                 className={`px-3 py-2 mb-3 mr-3 text-sm font-medium text-center text-gray-900 bg-white border ${props.disableRevoke ? 'border-gray-400 text-gray-400 cursor-not-allowed' : 'border-gray-300 text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-primary-300'} rounded-lg ${props.disableRevoke ? 'dark:bg-gray-800 dark:text-gray-400 dark:border-gray-400' : 'dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'}`}
                                 disabled={props.disableRevoke}
-                                onClick={() => handleDeleteModel(true)}
+                                onClick={(e) => {
+                                    e.preventDefault(); 
+                                    handleDeleteModel(true)
+                                }}
                             >
                                 Revoke
                             </button>
diff --git a/src/commonComponents/EditPopup.tsx b/src/commonComponents/EditPopup.tsx
index de41c8c29..e1ac97c72 100644
--- a/src/commonComponents/EditPopup.tsx
+++ b/src/commonComponents/EditPopup.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useState } from 'react';
 import * as yup from 'yup';
 
 const EditModal = (props: { openModal: boolean; closeModal: (flag: boolean) => void; onSucess: (name: string) => void }) => {
-  const [name, setName] = useState<nameValue | null>(null)
   interface nameValue {
     name: string;
   }
diff --git a/src/commonComponents/PasseyAddDevicePopup.tsx b/src/commonComponents/PasseyAddDevicePopup.tsx
index 691796223..d24e4741b 100644
--- a/src/commonComponents/PasseyAddDevicePopup.tsx
+++ b/src/commonComponents/PasseyAddDevicePopup.tsx
@@ -42,7 +42,7 @@ const PasskeyAddDevice = (props: {
 					}
 					const passkeyUserDetailsResp = await addPasskeyUserDetails(payload, storedEmail)
 					const { data } = passkeyUserDetailsResp as AxiosResponse
-					if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+					if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
 						setSuccess('User details updated successfully')
 						setNextFlag(true)
 					} else {
diff --git a/src/commonComponents/SchemaCard.tsx b/src/commonComponents/SchemaCard.tsx
index e141741de..daf881e7d 100644
--- a/src/commonComponents/SchemaCard.tsx
+++ b/src/commonComponents/SchemaCard.tsx
@@ -2,14 +2,26 @@ import { Card } from 'flowbite-react';
 import { dateConversion } from '../utils/DateConversion';
 import DateTooltip from '../components/Tooltip';
 
-const SchemaCard = (props: {className:string, schemaName: string, version: string, schemaId: string, issuerDid: string, attributes: [], created: string, onClickCallback: (schemaId: string, attributes: string[], issuerDid:string, created:string) => void; }) => {
+interface IProps {
+  className?: string,
+  schemaName: string,
+  version: string,
+  schemaId: string,
+  issuerDid: string,
+  attributes: [],
+  created: string,
+  onClickCallback: (schemaId: string, attributes: string[], issuerDid: string, created: string) => void;
+}
+const SchemaCard = (props: IProps) => {
   return (
     <Card onClick={() => {
       props.onClickCallback(props.schemaId, props.attributes, props.issuerDid, props.created)
-    }} className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer' style={{ maxWidth: '100%', maxHeight: '100%', overflow: 'auto' }}>
-      <div className="flex justify-between items-start">
-        <div>
-          <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
+    }}
+    id="schema-cards" 
+    className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer h-full w-full overflow-hidden'>
+      <div className="flex justify-between items-baseline">
+        <div className='min-w-[8rem] max-w-100/10rem'>
+          <h5 className="text-xl font-bold leading-[1.1] text-gray-900 dark:text-white break-words truncate line-clamp-2 max-h-[43px] whitespace-normal" style={{ display: "-webkit-box" }}>
             {props.schemaName}
           </h5>
           <p className='dark:text-white'>
@@ -18,7 +30,7 @@ const SchemaCard = (props: {className:string, schemaName: string, version: strin
         </div>
         <div className='float-right ml-auto '>
           <p className='dark:text-white'>
-          <DateTooltip date={props.created}>
+            <DateTooltip date={props.created}>
               Created: {dateConversion(props.created)}
             </DateTooltip>          </p>
         </div>
@@ -31,39 +43,40 @@ const SchemaCard = (props: {className:string, schemaName: string, version: strin
           <span className="font-semibold">Issuer DID:</span> {props.issuerDid}
         </p>
         <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
-         <span className="font-semibold">Ledger:</span> {props.issuerDid.split(":")[2]}
+          <span className="font-semibold">Ledger:</span> {props.issuerDid.split(":")[2]}
         </p>
       </div>
 
       <div className="flow-root">
         <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-          <li className="py-3 sm:py-2">
+          <li className="">
             <div className="flex items-center space-x-4">
-              <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white overflow-hidden overflow-ellipsis">
+              <div className="block text-base font-semibold text-gray-900 dark:text-white overflow-hidden overflow-ellipsis">
                 Attributes:
-                {props.attributes && props.attributes.length > 0 && (
-                  <>
-                    {props?.attributes?.slice(0, 4).map((element, index) => (
-                      <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"
-                      >
-                        {element?.attributeName}
-                      </span>
-                    ))}
-                    {props?.attributes?.length > 3 && <span>...</span>}
-                  </>
-                )}
+                <div className="flex flex-wrap items-start">
+
+                  {props.attributes && props.attributes.length > 0 && (
+                    <>
+                      {props?.attributes?.slice(0, 3).map((element, index) => (
+                        <div key={index}>
+                          <span
+                            style={{ display: 'block' }}
+                            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"
+                          >
+                            {element?.attributeName}
+                          </span>
+                        </div>
+                      ))}
+                      {props?.attributes?.length > 3 && <span>...</span>}
+                    </>
+                  )}
+                </div>
               </div>
             </div>
-
           </li>
-
         </ul>
       </div>
     </Card>
   )
 }
-
-
 export default SchemaCard
\ No newline at end of file
diff --git a/src/commonComponents/StatusTabletTag.tsx b/src/commonComponents/StatusTabletTag.tsx
new file mode 100644
index 000000000..a29f9196a
--- /dev/null
+++ b/src/commonComponents/StatusTabletTag.tsx
@@ -0,0 +1,47 @@
+import { EndorsementStatus } from "../common/enums"
+
+interface IStatusTabletTag {
+    status: string
+}
+
+const StatusTabletTag = ({ status }: IStatusTabletTag) => {
+    const color = () => {
+        switch (true) {
+            case status === EndorsementStatus.signed:
+                return {
+                    style: `bg-[#fca20033] text-[#FCA200]`,
+                    title: "Accepted"
+                }
+            case status === EndorsementStatus.rejected:
+                return {
+                    style: `bg-[#FFE4E4] text-[#EA5455]`,
+                    title: "Rejected"
+                }
+            case status === EndorsementStatus.requested:
+                return {
+                    style: `bg-[#1f4ead33] text-[#1F4EAD]`,
+                    title: "Requested"
+                }
+            case status === EndorsementStatus.submited:
+                return {
+                    style: `bg-[#70ffa01a] text-[#28C76F]`,
+                    title: "Submitted"
+                }
+            default:
+                return {
+                    style: `bg-[#FFE4E4] text-[#EA5455]`,
+                    title: "NA"
+                }
+        }
+    }
+
+    const { style, title } = color()
+
+    return (
+        <div className={`${style} w-fit py-1.5 px-3 rounded-full`}>
+            {title}
+        </div>
+    )
+}
+
+export default StatusTabletTag
\ No newline at end of file
diff --git a/src/commonComponents/backbutton/index.tsx b/src/commonComponents/backbutton/index.tsx
new file mode 100644
index 000000000..8a401a20c
--- /dev/null
+++ b/src/commonComponents/backbutton/index.tsx
@@ -0,0 +1,34 @@
+import { Button } from 'flowbite-react';
+
+const index = ({ path }: { path: string }) => {
+	return (
+		<div>
+			<Button
+				type="submit"
+				color="bg-primary-800"
+				onClick={() => {
+					window.location.href = path;
+				}}
+				className="bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white dark:hover:text-black"
+				style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
+			>
+				<svg
+					className="mr-1"
+					xmlns="http://www.w3.org/2000/svg"
+					width="22"
+					height="12"
+					fill="none"
+					viewBox="0 0 30 20"
+				>
+					<path
+						fill="#1F4EAD"
+						d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z"
+					/>
+				</svg>
+				<span className="hidden sm:block">Back</span>
+			</Button>
+		</div>
+	);
+};
+
+export default index;
diff --git a/src/commonComponents/datatable/index.tsx b/src/commonComponents/datatable/index.tsx
index ffea60152..e03116289 100644
--- a/src/commonComponents/datatable/index.tsx
+++ b/src/commonComponents/datatable/index.tsx
@@ -31,6 +31,7 @@ const DataTable: React.FC<DataTableProps> = ({ header,displaySelect, data, loadi
 										{header && header.length > 0 &&
 											header.map(ele => (
 												<th
+												  key={ele.columnName}
 													scope="col"
 													className={`p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white ${ele.width && ele.width}`}
 												>
@@ -44,10 +45,10 @@ const DataTable: React.FC<DataTableProps> = ({ header,displaySelect, data, loadi
 								<tbody className="bg-white dark:bg-gray-800">
 									{data.length ? data.map((ele, index) => (
 										
-										<tr className={`${index % 2 !== 0 ? 'bg-gray-50 dark:bg-gray-700' : ''}`} >
+										<tr key={index} className={`${index % 2 !== 0 ? 'bg-gray-50 dark:bg-gray-700' : ''}`} >
 
-											{ele.data.map(subEle => (
-												<td className={` p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white align-middle	`}>
+											{ele.data.map((subEle,index) => (
+												<td  key={index} className={` p-4 text-sm font-normal text-gray-900 whitespace-nowrap dark:text-white align-middle	`}>
 													<div>{subEle.data}</div>
 													{subEle.subData && subEle.subData}
 												</td>
diff --git a/src/components/AlertComponent/index.tsx b/src/components/AlertComponent/index.tsx
index 89d2ef8b2..28827512a 100644
--- a/src/components/AlertComponent/index.tsx
+++ b/src/components/AlertComponent/index.tsx
@@ -1,6 +1,6 @@
 import { Alert } from 'flowbite-react';
 
-export const AlertComponent = ({ message, type, viewButton, onAlertClose }: { message: string | null, type: string, viewButton?: boolean, onAlertClose: () => void }) => {
+export const AlertComponent = ({ message, type, viewButton, onAlertClose, path='' }: { message: string | null, type: string, viewButton?: boolean, path?:string, onAlertClose: () => void }) => {
 
 
     return message !== null ? <Alert
@@ -16,7 +16,7 @@ export const AlertComponent = ({ message, type, viewButton, onAlertClose }: { me
             {
                 viewButton
                 && <p className='md:w-32 lg:w-48 text-base text-primary-700 text-right'>
-                    View more...
+                  <a href={path}>View more... </a>
                 </p>
             }
            
@@ -24,4 +24,4 @@ export const AlertComponent = ({ message, type, viewButton, onAlertClose }: { me
 
     </Alert>
         : <></>
-}
\ No newline at end of file
+}
diff --git a/src/components/Authentication/FooterBar.tsx b/src/components/Authentication/FooterBar.tsx
index ebcc9fd27..537b97196 100644
--- a/src/components/Authentication/FooterBar.tsx
+++ b/src/components/Authentication/FooterBar.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 
 const FooterBar = () => {
     return (
-        <footer className="bg-white border-b border-gray-200 sm:py-2 dark:bg-gray-800 dark:border-gray-700 ">
+        <footer className="bg-white border-b border-gray-200 sm:py-2">
 
-            <div className="dark:bg-gray-700 md:flex md:items-center md:justify-between p-3">
+            <div className="md:flex md:items-center md:justify-between p-3">
                 <p className="text-sm text-center text-gray-500">
                     &copy; 2019 - {new Date().getFullYear()} -
                     <a className="hover:underline" target="_blank"
diff --git a/src/components/Authentication/RegistrationSuccess.tsx b/src/components/Authentication/RegistrationSuccess.tsx
index b3e358b5d..2b21f2eaf 100644
--- a/src/components/Authentication/RegistrationSuccess.tsx
+++ b/src/components/Authentication/RegistrationSuccess.tsx
@@ -1,72 +1,80 @@
-import { Button } from "flowbite-react";
-import React from "react";
-import NavBar from "./NavBar";
-import FooterBar from "./FooterBar";
-
-const RegistrationSuccess = () => {
-
-    const redirectSignInPage = () => {
-        window.location.href = '/authentication/sign-in'
-    }
-
-    return (
-        <div className="flex flex-col min-h-screen">
-
-            <NavBar />
-
-            <div className="flex flex-1 flex-col md:flex-row">
-                <div className="md:w-3/5 w-full bg-blue-500 bg-opacity-10 lg:p-4 md:p-4">
-                    <div className='flex justify-center mt-16'>
-
-                        <img
-                            src="/images/Passkey_Added.svg"
-                            alt="img" />
-
-                    </div>
-                </div>
-
-                <div className="md:w-2/5 w-full p-10 flex">
-
-                    <div className="w-full">
-
-                        <div className="mt-16 mb-24 flex justify-center mb-4 text-center text-primary-700 text-blue-600 font-inter text-4xl font-bold leading-10 ">
-                            Congratulations!
-                        </div>
-
-                        <div className="mt-16 flex justify-center text-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="99" height="99" viewBox="0 0 99 99" fill="none">
-                                <path d="M49.0889 0C42.6424 -9.6864e-08 36.2591 1.28035 30.3034 3.76796C24.3476 6.25557 18.9361 9.90171 14.3778 14.4982C9.81948 19.0947 6.20361 24.5516 3.73667 30.5572C1.26972 36.5628 0 42.9996 0 49.5C0 56.0004 1.26972 62.4372 3.73667 68.4428C6.20361 74.4484 9.81948 79.9053 14.3778 84.5018C18.9361 89.0983 24.3476 92.7444 30.3034 95.232C36.2591 97.7197 42.6424 99 49.0889 99C55.5353 99 61.9186 97.7197 67.8744 95.232C73.8301 92.7444 79.2416 89.0983 83.7999 84.5018C88.3583 79.9053 91.9741 74.4484 94.4411 68.4428C96.908 62.4372 98.1777 56.0004 98.1777 49.5C98.1777 42.9996 96.908 36.5628 94.4411 30.5572C91.9741 24.5516 88.3583 19.0947 83.7999 14.4982C79.2416 9.90171 73.8301 6.25557 67.8744 3.76796C61.9186 1.28035 55.5353 -9.6864e-08 49.0889 0Z" fill="#14BD5A" />
-                                <path fill-rule="evenodd" clip-rule="evenodd" d="M80.4367 34.3527C81.1905 35.2635 81.0662 36.6202 80.1593 37.3831L41.4011 69.9827C40.9543 70.3585 40.3754 70.5353 39.798 70.4722C39.2206 70.4091 38.6946 70.1116 38.3412 69.6483L21.7122 47.8438C20.9951 46.9034 21.1726 45.5525 22.1088 44.8264C23.045 44.1003 24.3853 44.274 25.1025 45.2143L40.3804 65.2472L77.4297 34.0849C78.3367 33.322 79.683 33.4419 80.4367 34.3527Z" fill="white" />
-                            </svg>
-
-                        </div>
-                        <p className="text-gray-500 mt-6 font-inter text-base font-medium leading-5 flex w-84 h-5.061 flex-col justify-center items-center flex-shrink-0">
-                            Passkey created successfully
-                        </p>
-
-                        <div className="mt-20">
-                            <Button
-                                type="submit"
-                                onClick={redirectSignInPage}
-                                className='w-full font-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'
-
-                            >
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 30 20" fill="none">
-                                    <path d="M29.8369 10.763C29.9991 10.3984 30.0415 9.99721 29.9588 9.61015C29.876 9.22309 29.6717 8.86759 29.3719 8.58861L20.7999 0.609018C20.6022 0.418485 20.3657 0.26651 20.1043 0.161959C19.8428 0.0574089 19.5616 0.00237707 19.2771 7.53215e-05C18.9925 -0.00222642 18.7103 0.0482475 18.447 0.148553C18.1836 0.248858 17.9443 0.396985 17.7431 0.584292C17.5419 0.771598 17.3828 0.994332 17.275 1.2395C17.1673 1.48466 17.1131 1.74735 17.1155 2.01223C17.118 2.27711 17.1771 2.53888 17.2894 2.78227C17.4018 3.02566 17.565 3.24578 17.7697 3.4298L22.6857 8.0061H2.14299C1.57464 8.0061 1.02956 8.21628 0.627668 8.59039C0.225779 8.96451 0 9.47192 0 10.001C0 10.5301 0.225779 11.0375 0.627668 11.4116C1.02956 11.7857 1.57464 11.9959 2.14299 11.9959H22.6857L17.7718 16.5702C17.5672 16.7542 17.4039 16.9743 17.2916 17.2177C17.1793 17.4611 17.1202 17.7229 17.1177 17.9878C17.1152 18.2526 17.1694 18.5153 17.2772 18.7605C17.3849 19.0057 17.5441 19.2284 17.7453 19.4157C17.9465 19.603 18.1858 19.7511 18.4491 19.8514C18.7125 19.9518 18.9947 20.0022 19.2792 19.9999C19.5638 19.9976 19.845 19.9426 20.1064 19.838C20.3679 19.7335 20.6043 19.5815 20.802 19.391L29.374 11.4114C29.5725 11.2257 29.7298 11.0054 29.8369 10.763Z" fill="white" />
-                                </svg>
-                                <span className="ml-2">Continue</span>
-
-                            </Button>
-                        </div>
-
-
-                    </div>
-                </div>
-            </div>
-            <FooterBar />
-
-        </div>
-    )
-}
-
-export default RegistrationSuccess;
\ No newline at end of file
+import { Button } from 'flowbite-react';
+import NavBar from './NavBar';
+import FooterBar from './FooterBar';
+
+const RegistrationSuccess = (props) => {
+	const redirectSignInPage = () => {
+		
+		window.location.href = `/authentication/sign-in?email=${props.email.email}&showmsg=true`;
+	};
+	return (
+		<div className="flex flex-col min-h-screen">
+			<NavBar />
+
+			<div className="flex flex-1 flex-col md:flex-row">
+				<div className="md:w-3/5 w-full bg-blue-500 bg-opacity-10 lg:p-4 md:p-4">
+					<div className="flex justify-center mt-16">
+						<img src="/images/Passkey_Added.svg" alt="img" />
+					</div>
+				</div>
+
+				<div className="md:w-2/5 w-full p-10 flex">
+					<div className="w-full">
+						<div className="mt-16 mb-24 flex justify-center mb-4 text-center text-primary-700 text-blue-600 font-inter text-4xl font-bold leading-10 ">
+							Congratulations!
+						</div>
+
+						<div className="mt-16 flex justify-center text-center">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="99"
+								height="99"
+								viewBox="0 0 99 99"
+								fill="none"
+							>
+								<path
+									d="M49.0889 0C42.6424 -9.6864e-08 36.2591 1.28035 30.3034 3.76796C24.3476 6.25557 18.9361 9.90171 14.3778 14.4982C9.81948 19.0947 6.20361 24.5516 3.73667 30.5572C1.26972 36.5628 0 42.9996 0 49.5C0 56.0004 1.26972 62.4372 3.73667 68.4428C6.20361 74.4484 9.81948 79.9053 14.3778 84.5018C18.9361 89.0983 24.3476 92.7444 30.3034 95.232C36.2591 97.7197 42.6424 99 49.0889 99C55.5353 99 61.9186 97.7197 67.8744 95.232C73.8301 92.7444 79.2416 89.0983 83.7999 84.5018C88.3583 79.9053 91.9741 74.4484 94.4411 68.4428C96.908 62.4372 98.1777 56.0004 98.1777 49.5C98.1777 42.9996 96.908 36.5628 94.4411 30.5572C91.9741 24.5516 88.3583 19.0947 83.7999 14.4982C79.2416 9.90171 73.8301 6.25557 67.8744 3.76796C61.9186 1.28035 55.5353 -9.6864e-08 49.0889 0Z"
+									fill="#14BD5A"
+								/>
+								<path
+									fill-rule="evenodd"
+									clip-rule="evenodd"
+									d="M80.4367 34.3527C81.1905 35.2635 81.0662 36.6202 80.1593 37.3831L41.4011 69.9827C40.9543 70.3585 40.3754 70.5353 39.798 70.4722C39.2206 70.4091 38.6946 70.1116 38.3412 69.6483L21.7122 47.8438C20.9951 46.9034 21.1726 45.5525 22.1088 44.8264C23.045 44.1003 24.3853 44.274 25.1025 45.2143L40.3804 65.2472L77.4297 34.0849C78.3367 33.322 79.683 33.4419 80.4367 34.3527Z"
+									fill="white"
+								/>
+							</svg>
+						</div>
+						<p className="text-gray-500 mt-6 font-inter text-base font-medium leading-5 flex w-84 h-5.061 flex-col justify-center items-center flex-shrink-0">
+							Passkey created successfully
+						</p>
+
+						<div className="mt-20">
+							<Button
+								type="submit"
+								onClick={redirectSignInPage}
+								className="w-full font-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"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="16"
+									height="16"
+									viewBox="0 0 30 20"
+									fill="none"
+								>
+									<path
+										d="M29.8369 10.763C29.9991 10.3984 30.0415 9.99721 29.9588 9.61015C29.876 9.22309 29.6717 8.86759 29.3719 8.58861L20.7999 0.609018C20.6022 0.418485 20.3657 0.26651 20.1043 0.161959C19.8428 0.0574089 19.5616 0.00237707 19.2771 7.53215e-05C18.9925 -0.00222642 18.7103 0.0482475 18.447 0.148553C18.1836 0.248858 17.9443 0.396985 17.7431 0.584292C17.5419 0.771598 17.3828 0.994332 17.275 1.2395C17.1673 1.48466 17.1131 1.74735 17.1155 2.01223C17.118 2.27711 17.1771 2.53888 17.2894 2.78227C17.4018 3.02566 17.565 3.24578 17.7697 3.4298L22.6857 8.0061H2.14299C1.57464 8.0061 1.02956 8.21628 0.627668 8.59039C0.225779 8.96451 0 9.47192 0 10.001C0 10.5301 0.225779 11.0375 0.627668 11.4116C1.02956 11.7857 1.57464 11.9959 2.14299 11.9959H22.6857L17.7718 16.5702C17.5672 16.7542 17.4039 16.9743 17.2916 17.2177C17.1793 17.4611 17.1202 17.7229 17.1177 17.9878C17.1152 18.2526 17.1694 18.5153 17.2772 18.7605C17.3849 19.0057 17.5441 19.2284 17.7453 19.4157C17.9465 19.603 18.1858 19.7511 18.4491 19.8514C18.7125 19.9518 18.9947 20.0022 19.2792 19.9999C19.5638 19.9976 19.845 19.9426 20.1064 19.838C20.3679 19.7335 20.6043 19.5815 20.802 19.391L29.374 11.4114C29.5725 11.2257 29.7298 11.0054 29.8369 10.763Z"
+										fill="white"
+									/>
+								</svg>
+								<span className="ml-2">Continue</span>
+							</Button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<FooterBar />
+		</div>
+	);
+};
+
+export default RegistrationSuccess;
diff --git a/src/components/Authentication/ResetPassword.tsx b/src/components/Authentication/ResetPassword.tsx
index 2112dd19f..d0fa07027 100644
--- a/src/components/Authentication/ResetPassword.tsx
+++ b/src/components/Authentication/ResetPassword.tsx
@@ -13,8 +13,8 @@ import FooterBar from './FooterBar.js';
 import NavBar from './NavBar.js';
 import { addPasskeyUserDetails, passwordEncryption, setToLocalStorage } from '../../api/Auth.js';
 import type { AxiosResponse } from 'axios';
-import React from 'react';
 import { PassInvisible, PassVisible, SignUpArrow } from './Svg.js';
+import React from 'react';
 
 interface passwordValues {
     password: string;
@@ -86,7 +86,7 @@ const ResetPassword = () => {
             const passkeyUserDetailsResp = await addPasskeyUserDetails(payload, email);
             const { data } = passkeyUserDetailsResp as AxiosResponse;
 
-            if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+            if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
                 setLoading(false);
             } else {
                 setErrMsg(passkeyUserDetailsResp as string);
diff --git a/src/components/Authentication/SignInUser.tsx b/src/components/Authentication/SignInUser.tsx
index c5cda6154..b6245b2e5 100644
--- a/src/components/Authentication/SignInUser.tsx
+++ b/src/components/Authentication/SignInUser.tsx
@@ -1,88 +1,100 @@
-import './global.css'
-
+import '../../common/global.css'
 import * as yup from 'yup';
-
-import { Button, Label, Navbar } from 'flowbite-react';
-import {
-	Field,
-	Form,
-	Formik,
-} from 'formik';
+import { Button, Label} from 'flowbite-react';
+import { Field, Form, Formik } from 'formik';
 import { getFromLocalStorage, setToLocalStorage } from '../../api/Auth';
 import { useEffect, useRef, useState } from 'react';
-import NavBar from "./NavBar"
+import NavBar from './NavBar';
 import { Alert } from 'flowbite-react';
-import React from 'react';
-import RegistrationSuccess from './RegistrationSuccess'
+import RegistrationSuccess from './RegistrationSuccess';
 import SignInUserPasskey from './SignInUserPasskey';
 import { storageKeys } from '../../config/CommonConstant';
-import FooterBar from "./FooterBar";
+import FooterBar from './FooterBar';
 interface emailValue {
 	email: string | null;
 }
 
-const resetPasswordSuccess = '?isPasswordSet=true'
+const resetPasswordSuccess = '?isPasswordSet=true';
 
 const SignInUser = () => {
-	const [email, setEmail] = useState<emailValue | null>(null)
-	const [fidoUserError, setFidoUserError] = useState("")
-	const [success, setSuccess] = useState<string | null>(null)
-	const [failure, setFailur] = useState<string | null>(null)
-	const [loading, setLoading] = useState<boolean>(false)
+	const [email, setEmail] = useState<emailValue | null>(null);
+	const [fidoUserError, setFidoUserError] = useState('');
+	const [success, setSuccess] = useState<string | null>(null);
+	const [failure, setFailur] = useState<string | null>(null);
+	const [loading, setLoading] = useState<boolean>(false);
 	const [currentComponent, setCurrentComponent] = useState<string>('email');
 	const [isEmailValid, setIsEmailValid] = useState(false);
 	const [isPasskeySuccess, setIsPasskeySuccess] = useState(false);
 	const [userLoginEmail, setUserLoginEmail] = useState<string | null>(null);
 	const nextButtonRef = useRef<HTMLButtonElement | null>(null);
 
-	useEffect(() => {
+	
 
+	useEffect(() => {
 		const fetchData = async () => {
 			try {
-				const storedEmail = await getFromLocalStorage(storageKeys.LOGIN_USER_EMAIL);
-
-				const searchParam = new URLSearchParams(window?.location?.search)
+				const storedEmail = await getFromLocalStorage(
+					storageKeys.LOGIN_USER_EMAIL,
+				);
+				const newEmail = await getFromLocalStorage(storageKeys.USER_EMAIL)
+				const searchParam = new URLSearchParams(window?.location?.search);
 				const userEmail = searchParam.get('email');
 				const signUpStatus = searchParam.get('signup');
 				const fidoFlag = searchParam.get('fidoFlag');
 				const loginMethod = searchParam.get('method');
+				const showMsg = searchParam.get('showmsg');
 
 				setUserLoginEmail(storedEmail || userEmail);
-				setEmail({ email: storedEmail || '' });
+				setEmail({ email: storedEmail || newEmail });
 
-				const entries = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];;
-				const isRefreshPage = entries.length > 0 && entries[0].type === 'reload';
+				const entries = performance.getEntriesByType(
+					'navigation',
+				) as PerformanceNavigationTiming[];
+				const isRefreshPage =
+					entries.length > 0 && entries[0].type === 'reload';
 
 				if (isRefreshPage) {
 					await setToLocalStorage(storageKeys.LOGIN_USER_EMAIL, '');
 				}
-
-				if (signUpStatus === 'true' && fidoFlag === 'false' && loginMethod === 'password') {
-					setSuccess('Congratulations!! 🎉 You have successfully registered on CREDEBL 🚀');
-				} else if (signUpStatus === 'true' && fidoFlag === 'true' && loginMethod === 'passkey') {
+				if (
+					signUpStatus === 'true' &&
+					fidoFlag === 'false' &&
+					loginMethod === 'password'
+				) {
+					setSuccess(
+						'Congratulations!! 🎉 You have successfully registered on CREDEBL 🚀',
+					);
+				} else if (showMsg === 'true') {
+					setSuccess(
+						'Congratulations!! 🎉 You have successfully registered on CREDEBL 🚀',
+					);
+				} else if (
+					signUpStatus === 'true' &&
+					fidoFlag === 'true' &&
+					loginMethod === 'passkey'
+				) {
 					setIsPasskeySuccess(true);
 				} else if (resetPasswordSuccess === window?.location?.search) {
 					setSuccess('Congratulations!! 🎉 Your new password set successfully');
 				}
 			} catch (err) {
-				console.log("ERROR-LOGIN::", err)
 			}
 		};
 
 		fetchData();
 	}, []);
 
-
 	const saveEmail = async (values: emailValue) => {
-		setEmail(values)
+		setEmail(values);
+		await localStorage.clear();
 		setCurrentComponent('password');
 		await setToLocalStorage(storageKeys.LOGIN_USER_EMAIL, values.email);
 		setIsPasskeySuccess(true);
-	}
+	};
 
 	const redirectLandingPage = () => {
-		window.location.href = '/'
-	}
+		window.location.href = '/';
+	};
 
 	useEffect(() => {
 		if (nextButtonRef.current) {
@@ -92,165 +104,180 @@ const SignInUser = () => {
 
 	return (
 		<div>
-			{currentComponent === 'email' && isPasskeySuccess ? (<RegistrationSuccess />)
-				: currentComponent === 'password' ? (
-					<SignInUserPasskey email={email?.email as string} />
-				) : (
-					<div className="flex flex-col min-h-screen">
-						<NavBar />
-						<div className="flex flex-1 flex-col md:flex-row">
-							<div className="md:w-3/5 w-full bg-blue-500 bg-opacity-10 lg:p-4 md:p-4">
-								<div className='flex justify-center'>
-									<img
-										className='hidden sm:block'
-										src='/images/signin.svg'
-										alt="img" />
-								</div>
-							</div>
-
-							<div className="md:w-2/5 w-full p-10 flex">
-								<div className="w-full">
-									{
-										(success || failure || fidoUserError) &&
-										<Alert
-											color={success ? "success" : "failure"}
-											onDismiss={() => setSuccess(null)}
-										>
-											<span>
-												<p>
-													{success || failure || fidoUserError}
-												</p>
-											</span>
-										</Alert>
-									}
-
-									<div className='flex lg:mt-16'>
-
-										<button className='flex mt-2' onClick={redirectLandingPage} >
-											<svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" viewBox="0 0 37 20" fill="none">
-												<path d="M0.201172 9.23695C0.00108337 9.60157 -0.0512199 10.0028 0.050869 10.3898C0.152962 10.7769 0.404865 11.1324 0.774712 11.4114L11.3468 19.391C11.5906 19.5815 11.8823 19.7335 12.2047 19.838C12.5272 19.9426 12.874 19.9976 13.2249 19.9999C13.5759 20.0022 13.9239 19.9518 14.2487 19.8514C14.5735 19.7511 14.8686 19.603 15.1168 19.4157C15.365 19.2284 15.5612 19.0057 15.6941 18.7605C15.827 18.5153 15.8939 18.2526 15.8908 17.9878C15.8878 17.7229 15.8149 17.4611 15.6763 17.2177C15.5378 16.9743 15.3365 16.7542 15.084 16.5702L9.02094 11.9939L34.357 11.9939C35.0579 11.9939 35.7302 11.7837 36.2259 11.4096C36.7215 11.0355 37 10.5281 37 9.999C37 9.46992 36.7215 8.96251 36.2259 8.5884C35.7302 8.21428 35.0579 8.00411 34.357 8.00411L9.02094 8.00411L15.0814 3.4298C15.3338 3.24578 15.5352 3.02565 15.6737 2.78227C15.8122 2.53888 15.8851 2.27711 15.8882 2.01223C15.8912 1.74735 15.8244 1.48466 15.6915 1.2395C15.5586 0.994335 15.3623 0.771599 15.1142 0.584293C14.866 0.396986 14.5709 0.248857 14.2461 0.148552C13.9213 0.0482464 13.5732 -0.00222778 13.2223 7.43866e-05C12.8714 0.00237656 12.5245 0.0574093 12.2021 0.161961C11.8796 0.26651 11.588 0.418484 11.3442 0.609016L0.772064 8.58861C0.527206 8.77433 0.333214 8.99464 0.201172 9.23695Z" fill="#1F4EAD" />
-											</svg>
-										</button>
-
-										<div className="w-full flex flex-col items-center justify-center ">
-
-											<h2 className="text-primary-700 text-blue-600 font-inter text-3xl font-bold leading-10">
-												Login
-											</h2>
-
-											<p className="text-gray-500 font-inter text-base font-medium leading-5 mt-2">
-												Enter your Email to login
-											</p>
-
-										</div>
-
-									</div>
-
-									<div className="lg:hidden sm:block md:hidden sm:block bg-blue-500 bg-opacity-10 mt-4" >
-
+			{currentComponent === 'email' && isPasskeySuccess ? (
+				<RegistrationSuccess email= {email} />
+			) : (
+				<div>
+					{!(currentComponent === 'email' && isPasskeySuccess) &&
+					currentComponent === 'password' ? (
+						<SignInUserPasskey email={email?.email as string} />
+					) : (
+						<div className="flex flex-col min-h-screen">
+							<NavBar />
+							<div className="flex flex-1 flex-col md:flex-row">
+								<div className="md:w-3/5 w-full bg-blue-500 bg-opacity-10 lg:p-4 md:p-4">
+									<div className="flex justify-center">
 										<img
+											className="hidden sm:block"
 											src="/images/signin.svg"
-											alt="img" />
+											alt="img"
+										/>
 									</div>
+								</div>
 
-									<Formik
-										initialValues={{
-											email: userLoginEmail ? userLoginEmail : '',
-										}}
-										validationSchema={yup.object().shape({
-											email: yup
-												.string()
-												.required('Email is required')
-												.email('Email is invalid')
-												.matches(/(\.[a-zA-Z]{2,})$/, 'Email domain is invalid')
-												.trim()
-										})}
-										validateOnBlur
-										validateOnChange
-										enableReinitialize
-										onSubmit={(values: emailValue) => saveEmail(values)
-										}
-									>
-
-										{(formikHandlers): JSX.Element => (
-											<Form className="mt-16 space-y-6" onSubmit={formikHandlers.handleSubmit}>
-												<div className="text-primary-700 font-inter text-base font-medium leading-5 mb-20">
+								<div className="md:w-2/5 w-full p-10 flex">
+									<div className="w-full">
+										{(success || failure || fidoUserError) && (
+											<Alert
+												color={success ? 'success' : 'failure'}
+												onDismiss={() => setSuccess(null)}
+											>
+												<span>
+													<p>{success || failure || fidoUserError}</p>
+												</span>
+											</Alert>
+										)}
 
-													<div className="block mb-2 text-sm font-medium  dark:text-white">
-														<Label className="text-primary-700" htmlFor="email2" value="Your Email" />
-														<span className='text-red-500 text-xs'>*</span>
-													</div>
+										<div className="flex lg:mt-16">
+											<button
+												className="flex mt-2"
+												onClick={redirectLandingPage}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													width="26"
+													height="24"
+													viewBox="0 0 37 20"
+													fill="none"
+												>
+													<path
+														d="M0.201172 9.23695C0.00108337 9.60157 -0.0512199 10.0028 0.050869 10.3898C0.152962 10.7769 0.404865 11.1324 0.774712 11.4114L11.3468 19.391C11.5906 19.5815 11.8823 19.7335 12.2047 19.838C12.5272 19.9426 12.874 19.9976 13.2249 19.9999C13.5759 20.0022 13.9239 19.9518 14.2487 19.8514C14.5735 19.7511 14.8686 19.603 15.1168 19.4157C15.365 19.2284 15.5612 19.0057 15.6941 18.7605C15.827 18.5153 15.8939 18.2526 15.8908 17.9878C15.8878 17.7229 15.8149 17.4611 15.6763 17.2177C15.5378 16.9743 15.3365 16.7542 15.084 16.5702L9.02094 11.9939L34.357 11.9939C35.0579 11.9939 35.7302 11.7837 36.2259 11.4096C36.7215 11.0355 37 10.5281 37 9.999C37 9.46992 36.7215 8.96251 36.2259 8.5884C35.7302 8.21428 35.0579 8.00411 34.357 8.00411L9.02094 8.00411L15.0814 3.4298C15.3338 3.24578 15.5352 3.02565 15.6737 2.78227C15.8122 2.53888 15.8851 2.27711 15.8882 2.01223C15.8912 1.74735 15.8244 1.48466 15.6915 1.2395C15.5586 0.994335 15.3623 0.771599 15.1142 0.584293C14.866 0.396986 14.5709 0.248857 14.2461 0.148552C13.9213 0.0482464 13.5732 -0.00222778 13.2223 7.43866e-05C12.8714 0.00237656 12.5245 0.0574093 12.2021 0.161961C11.8796 0.26651 11.588 0.418484 11.3442 0.609016L0.772064 8.58861C0.527206 8.77433 0.333214 8.99464 0.201172 9.23695Z"
+														fill="#1F4EAD"
+													/>
+												</svg>
+											</button>
+
+											<div className="w-full flex flex-col items-center justify-center ">
+												<h2 className="text-primary-700 text-blue-600 font-inter text-3xl font-bold leading-10">
+													Login
+												</h2>
+
+												<p className="text-gray-500 font-inter text-base font-medium leading-5 mt-2">
+													Enter your Email to login
+												</p>
+											</div>
+										</div>
 
-													<div className="w-full flex items-center bg-gray-200 px-4 text-gray-700 text-sm border rounded-md focus:border-blue-400 focus:ring-1 focus:ring-blue-600">
+										<div className="lg:hidden sm:block md:hidden sm:block bg-blue-500 bg-opacity-10 mt-4">
+											<img src="/images/signin.svg" alt="img" />
+										</div>
 
-														<svg
-															xmlns="http://www.w3.org/2000/svg"
-															width="24"
-															height="16"
-															viewBox="0 0 30 24"
-															fill="none"
-															className="mr-2"
-														>
-															<path
-																d="M27 0H3C1.35 0 0.015 1.35 0.015 3L0 21C0 22.65 1.35 24 3 24H27C28.65 24 30 22.65 30 21V3C30 1.35 28.65 0 27 0ZM27 6L15 13.5L3 6V3L15 10.5L27 3V6Z"
-																fill="#1F4EAD"
+										<Formik
+											initialValues={{
+												email: userLoginEmail ? userLoginEmail : '',
+											}}
+											validationSchema={yup.object().shape({
+												email: yup
+													.string()
+													.required('Email is required')
+													.email('Email is invalid')
+													.matches(
+														/(\.[a-zA-Z]{2,})$/,
+														'Email domain is invalid',
+													)
+													.trim(),
+											})}
+											validateOnBlur
+											validateOnChange
+											enableReinitialize
+											onSubmit={(values: emailValue) => saveEmail(values)}
+										>
+											{(formikHandlers): JSX.Element => (
+												<Form
+													className="mt-16 space-y-6"
+													onSubmit={formikHandlers.handleSubmit}
+												>
+													<div className="text-primary-700 font-inter text-base font-medium leading-5 mb-20">
+														<div className="block mb-2 text-sm font-medium dark:text-white">
+															<Label
+																className="text-primary-700 dark:!text-primary-700"
+																htmlFor="email2"
+																value="Your Email"
 															/>
-														</svg>
-
-
-														<Field
-															id='signinemail'
-															name='email'
-															type="email"
-															className="truncate outline-none flex-grow bg-transparent focus:outline-none border-none focus:border-none focus:ring-0"
-															placeholder="name@company.com"
-														/>
-
+															<span className="text-red-500 text-xs">*</span>
+														</div>
+
+														<div className="w-full flex items-center bg-gray-200 px-4 py-3 text-gray-700 text-sm border rounded-md focus:border-blue-400 focus:ring-1 focus:ring-blue-600">
+															<svg
+																xmlns="http://www.w3.org/2000/svg"
+																width="24"
+																height="16"
+																viewBox="0 0 30 24"
+																fill="none"
+																className="mr-2"
+															>
+																<path
+																	d="M27 0H3C1.35 0 0.015 1.35 0.015 3L0 21C0 22.65 1.35 24 3 24H27C28.65 24 30 22.65 30 21V3C30 1.35 28.65 0 27 0ZM27 6L15 13.5L3 6V3L15 10.5L27 3V6Z"
+																	fill="#1F4EAD"
+																/>
+															</svg>
+
+															<Field
+																id="signinemail"
+																name="email"
+																className="truncate outline-none flex-grow bg-transparent focus:outline-none border-none focus:border-none focus:ring-0"
+																placeholder="name@company.com"
+															/>
+														</div>
+														{!isEmailValid && formikHandlers.touched.email && (
+															<span className="text-red-500 text-xs absolute mt-1">
+																{formikHandlers.errors.email}
+															</span>
+														)}
 													</div>
-													{!isEmailValid && formikHandlers.touched.email && (
-														<span className="text-red-500 text-xs absolute mt-1">
-															{formikHandlers.errors.email}
-														</span>
-													)}
-
-												</div>
-												<div >
-
-													<Button
-														id='signinnext'
-														isProcessing={loading}
-														type="submit"
-														className='w-full font-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'
-
-													>
-														<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 30 20" fill="none">
-															<path d="M29.8369 10.763C29.9991 10.3984 30.0415 9.99721 29.9588 9.61015C29.876 9.22309 29.6717 8.86759 29.3719 8.58861L20.7999 0.609018C20.6022 0.418485 20.3657 0.26651 20.1043 0.161959C19.8428 0.0574089 19.5616 0.00237707 19.2771 7.53215e-05C18.9925 -0.00222642 18.7103 0.0482475 18.447 0.148553C18.1836 0.248858 17.9443 0.396985 17.7431 0.584292C17.5419 0.771598 17.3828 0.994332 17.275 1.2395C17.1673 1.48466 17.1131 1.74735 17.1155 2.01223C17.118 2.27711 17.1771 2.53888 17.2894 2.78227C17.4018 3.02566 17.565 3.24578 17.7697 3.4298L22.6857 8.0061H2.14299C1.57464 8.0061 1.02956 8.21628 0.627668 8.59039C0.225779 8.96451 0 9.47192 0 10.001C0 10.5301 0.225779 11.0375 0.627668 11.4116C1.02956 11.7857 1.57464 11.9959 2.14299 11.9959H22.6857L17.7718 16.5702C17.5672 16.7542 17.4039 16.9743 17.2916 17.2177C17.1793 17.4611 17.1202 17.7229 17.1177 17.9878C17.1152 18.2526 17.1694 18.5153 17.2772 18.7605C17.3849 19.0057 17.5441 19.2284 17.7453 19.4157C17.9465 19.603 18.1858 19.7511 18.4491 19.8514C18.7125 19.9518 18.9947 20.0022 19.2792 19.9999C19.5638 19.9976 19.845 19.9426 20.1064 19.838C20.3679 19.7335 20.6043 19.5815 20.802 19.391L29.374 11.4114C29.5725 11.2257 29.7298 11.0054 29.8369 10.763Z" fill="white" />
-														</svg>
-														<span className="ml-2">Next</span>
-
-													</Button>
-
-												</div>
-												<div className="text-sm font-medium text-gray-500 dark:text-gray-400 pt-6 flex flex-col md:flex-row md:justify-center items-center justify-center">
-													Don't have an account yet?
-													&nbsp;<a
-														id='navigatetosignup'
-														href="/authentication/sign-up"
-														className="text-primary-700 hover:underline dark:text-primary-500"
-													>
-														{` Create an account`}
-													</a>
-												</div>
-											</Form>
-										)}
-									</Formik>
+													<div>
+														<Button
+															id="signinnext"
+															isProcessing={loading}
+															type="submit"
+															className="w-full font-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"
+														>
+															<svg
+																xmlns="http://www.w3.org/2000/svg"
+																width="16"
+																height="16"
+																viewBox="0 0 30 20"
+																fill="none"
+															>
+																<path
+																	d="M29.8369 10.763C29.9991 10.3984 30.0415 9.99721 29.9588 9.61015C29.876 9.22309 29.6717 8.86759 29.3719 8.58861L20.7999 0.609018C20.6022 0.418485 20.3657 0.26651 20.1043 0.161959C19.8428 0.0574089 19.5616 0.00237707 19.2771 7.53215e-05C18.9925 -0.00222642 18.7103 0.0482475 18.447 0.148553C18.1836 0.248858 17.9443 0.396985 17.7431 0.584292C17.5419 0.771598 17.3828 0.994332 17.275 1.2395C17.1673 1.48466 17.1131 1.74735 17.1155 2.01223C17.118 2.27711 17.1771 2.53888 17.2894 2.78227C17.4018 3.02566 17.565 3.24578 17.7697 3.4298L22.6857 8.0061H2.14299C1.57464 8.0061 1.02956 8.21628 0.627668 8.59039C0.225779 8.96451 0 9.47192 0 10.001C0 10.5301 0.225779 11.0375 0.627668 11.4116C1.02956 11.7857 1.57464 11.9959 2.14299 11.9959H22.6857L17.7718 16.5702C17.5672 16.7542 17.4039 16.9743 17.2916 17.2177C17.1793 17.4611 17.1202 17.7229 17.1177 17.9878C17.1152 18.2526 17.1694 18.5153 17.2772 18.7605C17.3849 19.0057 17.5441 19.2284 17.7453 19.4157C17.9465 19.603 18.1858 19.7511 18.4491 19.8514C18.7125 19.9518 18.9947 20.0022 19.2792 19.9999C19.5638 19.9976 19.845 19.9426 20.1064 19.838C20.3679 19.7335 20.6043 19.5815 20.802 19.391L29.374 11.4114C29.5725 11.2257 29.7298 11.0054 29.8369 10.763Z"
+																	fill="white"
+																/>
+															</svg>
+															<span className="ml-2">Next</span>
+														</Button>
+													</div>
+													<div className="text-sm font-medium text-gray-500 dark:text-gray-400 pt-6 flex flex-col md:flex-row md:justify-center items-center justify-center">
+														Don't have an account yet? &nbsp;
+														<a
+															id="navigatetosignup"
+															href="/authentication/sign-up"
+															className="text-primary-700 hover:underline dark:text-primary-500"
+														>
+															{` Create an account`}
+														</a>
+													</div>
+												</Form>
+											)}
+										</Formik>
+									</div>
 								</div>
 							</div>
+							<FooterBar />
 						</div>
-						<FooterBar />
-
-					</div>
-				)}
+					)}
+				</div>
+			)}
 		</div>
 	);
 };
diff --git a/src/components/Authentication/SignInUserPasskey.tsx b/src/components/Authentication/SignInUserPasskey.tsx
index 37286be51..b98d98a24 100644
--- a/src/components/Authentication/SignInUserPasskey.tsx
+++ b/src/components/Authentication/SignInUserPasskey.tsx
@@ -1,282 +1,341 @@
-import './global.css'
-
+import '../../common/global.css'
 import { Alert, Button } from 'flowbite-react';
-import { UserSignInData, getUserProfile, loginUser, passwordEncryption, setToLocalStorage } from '../../api/Auth';
+import {
+	UserSignInData,
+	getUserProfile,
+	loginUser,
+	setToLocalStorage,
+} from '../../api/Auth';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
-import { generateAuthenticationOption, verifyAuthentication } from '../../api/Fido';
+import {
+	generateAuthenticationOption,
+	verifyAuthentication,
+} from '../../api/Fido';
 
-import type { AxiosResponse } from 'axios';
+import type { AxiosError, AxiosResponse } from 'axios';
 import SignInUser from './SignInUser';
 import { startAuthentication } from '@simplewebauthn/browser';
 import { useState } from 'react';
-import React from 'react';
 import SignInUserPassword from './SignInUserPassword';
 import { pathRoutes } from '../../config/pathRoutes';
-import NavBar from "./NavBar";
+import NavBar from './NavBar';
 import FooterBar from './FooterBar';
+
 interface signInUserProps {
-    email: string
+	email: string;
 }
 const SignInUserPasskey = (signInUserProps: signInUserProps) => {
-    const [loading, setLoading] = useState<boolean>(false)
-    const [showSignInUser, setShowSignInUser] = useState(true);
-    const [showSignInUserPassword, setShowSignInUserPassword] = useState(false);
-    const [fidoLoader, setFidoLoader] = useState<boolean>(false)
-    const [fidoUserError, setFidoUserError] = useState("")
-    const [failure, setFailure] = useState<string | null>(null)
-    const [success, setSuccess] = useState<string | null>(null)
-
-
-    const handleSvgClick = () => {
-        window.history.pushState(null, '', pathRoutes.auth.sinIn);
-        setShowSignInUser(!showSignInUser);
-    };
-
-    const handlePasswordButtonClick = () => {
-        setShowSignInUserPassword(true);
-        setShowSignInUser(false);
-    };
-
-    const verifyAuthenticationMethod = async (verifyAuthenticationObj: unknown, userData: { userName: string }): Promise<string | AxiosResponse> => {
-        try {
-            return await verifyAuthentication(verifyAuthenticationObj, userData);
-        } catch (error) {
-            setFidoLoader(false)
-            throw error;
-        }
-    };
-
-    const getUserDetails = async (access_token: string) => {
-        const userDetails = await getUserProfile(access_token);
-        const { data } = userDetails as AxiosResponse
-        if (data?.data?.userOrgRoles?.length > 0) {
-            const permissionArray: number | string[] = []
-            data?.data?.userOrgRoles?.forEach((element: { orgRole: { name: string } }) => permissionArray.push(element?.orgRole?.name));
-            await setToLocalStorage(storageKeys.PERMISSIONS, permissionArray)
-            await setToLocalStorage(storageKeys.USER_PROFILE, data?.data)
-            await setToLocalStorage(storageKeys.USER_EMAIL, data?.data?.email)
-
-            window.location.href = '/dashboard'
-
-        } else {
-            setFailure(userDetails as string)
-        }
-        setLoading(false)
-    }
-
-    const showFidoError = (error: unknown): void => {
-        const err = error as string
-        if (err.includes("The operation either timed out or was not allowed")) {
-            const [errorMsg] = err.split('.')
-            setFidoUserError(errorMsg)
-
-        } else {
-            setFidoUserError(err)
-
-        }
-    }
-
-    const authenticateWithPasskey = async (email: string): Promise<void> => {
-        try {
-            setFidoLoader(true)
-
-
-            const obj = { userName: email }
-
-
-            const generateAuthenticationResponse: any = await generateAuthenticationOption(obj);
-            const challangeId: string = generateAuthenticationResponse?.data?.data?.challenge;
-
-            setFidoUserError(generateAuthenticationResponse?.data?.error);
-
-            const opts = generateAuthenticationResponse?.data?.data;
-            const attResp = await startAuthentication(opts);
-            const verifyAuthenticationObj = {
-                ...attResp,
-                challangeId
-            };
-            setFidoLoader(false)
-            const verificationResp = await verifyAuthenticationMethod(verifyAuthenticationObj, { userName: email });
-            const { data } = verificationResp as AxiosResponse
-            if (data?.data.verified) {
-                const payload: UserSignInData = {
-                    email: email,
-                    isPasskey: true
-                };
-
-                const loginRsp = await loginUser(payload);
-                const { data } = loginRsp as AxiosResponse;
-                if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-                    await setToLocalStorage(storageKeys.TOKEN, data?.data?.access_token);
-                    const response = await fetch('/api/auth/signin', {
-                        method: "POST",
-                        headers: {
-                            "Content-Type": "application/json",
-                        },
-                        body: JSON.stringify(data),
-                    });
-
-                    if (response.redirected) {
-                        getUserDetails(data?.data?.access_token)
-                    }
-
-                } else if (data?.error) {
-                    setFidoLoader(false)
-                    setFidoUserError(data?.error);
-
-                }
-            }
-        } catch (error) {
-            if (error instanceof DOMException) {
-                setFidoLoader(false)
-                setFidoUserError('The operation either timed out or was not allowed.');
-            } else {
-                setFidoLoader(false)
-                showFidoError(error);
-            }
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <div>
-            {showSignInUser ? (
-
-                <div className="flex flex-col min-h-screen">
-                    <NavBar />
-                    <div className="flex flex-1 flex-col md:flex-row">
-                        <div className="md:w-3/5 w-full bg-blue-500 bg-opacity-10 lg:p-4 md:p-4">
-                            <div className='flex justify-center'>
-
-                                <img
-                                    className='hidden sm:block'
-                                    src="/images/choose-password-passkey.svg"
-                                    alt="img" />
-                            </div>
-
-
-                        </div>
-                        <div className="md:w-2/5 w-full p-10 flex">
-
-                            <div className="w-full">
-
-                                {
-                                    (success || failure || fidoUserError) &&
-                                    <Alert
-                                        color={success ? "success" : "failure"}
-                                        onDismiss={() => {
-                                            setSuccess(null)
-                                            setFailure(null)
-                                        }}
-                                    >
-                                        <span>
-                                            <p>
-                                                {success || failure || fidoUserError}
-                                            </p>
-                                        </span>
-                                    </Alert>
-                                }
-
-                                <div className='flex lg:mt-16 lg:mb-20 sm:mb-8'>
-
-                                    <button className='flex mt-2' onClick={handleSvgClick} >
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" viewBox="0 0 37 20" fill="none">
-                                            <path d="M0.201172 9.23695C0.00108337 9.60157 -0.0512199 10.0028 0.050869 10.3898C0.152962 10.7769 0.404865 11.1324 0.774712 11.4114L11.3468 19.391C11.5906 19.5815 11.8823 19.7335 12.2047 19.838C12.5272 19.9426 12.874 19.9976 13.2249 19.9999C13.5759 20.0022 13.9239 19.9518 14.2487 19.8514C14.5735 19.7511 14.8686 19.603 15.1168 19.4157C15.365 19.2284 15.5612 19.0057 15.6941 18.7605C15.827 18.5153 15.8939 18.2526 15.8908 17.9878C15.8878 17.7229 15.8149 17.4611 15.6763 17.2177C15.5378 16.9743 15.3365 16.7542 15.084 16.5702L9.02094 11.9939L34.357 11.9939C35.0579 11.9939 35.7302 11.7837 36.2259 11.4096C36.7215 11.0355 37 10.5281 37 9.999C37 9.46992 36.7215 8.96251 36.2259 8.5884C35.7302 8.21428 35.0579 8.00411 34.357 8.00411L9.02094 8.00411L15.0814 3.4298C15.3338 3.24578 15.5352 3.02565 15.6737 2.78227C15.8122 2.53888 15.8851 2.27711 15.8882 2.01223C15.8912 1.74735 15.8244 1.48466 15.6915 1.2395C15.5586 0.994335 15.3623 0.771599 15.1142 0.584293C14.866 0.396986 14.5709 0.248857 14.2461 0.148552C13.9213 0.0482464 13.5732 -0.00222778 13.2223 7.43866e-05C12.8714 0.00237656 12.5245 0.0574093 12.2021 0.161961C11.8796 0.26651 11.588 0.418484 11.3442 0.609016L0.772064 8.58861C0.527206 8.77433 0.333214 8.99464 0.201172 9.23695Z" fill="#1F4EAD" />
-                                        </svg>
-                                    </button>
-
-                                    <div className="w-full flex flex-col items-center justify-center ">
-
-                                        <h2 className="text-primary-700 text-blue-600 font-inter text-3xl font-bold leading-10">
-                                            Login
-                                        </h2>
-
-                                        <p className="text-gray-500 font-inter text-base font-medium leading-5 mt-2">
-                                            Choose authentication method to Login
-                                        </p>
-
-                                    </div>
-                                </div>
-                                <div className="lg:hidden sm:block md:hidden sm:block bg-blue-500 bg-opacity-10 mt-4 mb-8" >
-
-                                    <img
-                                        src="/images/choose-password-passkey.svg"
-                                        alt="img" />
-                                </div>
-
-                                <div className='flex mb-20 text-gray-700 font-inter text-xl font-medium leading-[1.05] justify-center items-center'>
-                                    With Passkey you don’t need to <br /> remember complex passwords
-                                </div>
-
-                                <div className="flex justify-between">
-
-                                    <button
-                                        className="w-2/5 px-4 rounded-md text-center font-medium leading-5 border-blue-600 flex items-center justify-center hover:bg-secondary-700 bg-transparent ring-2 text-black rounded-lg text-sm"
-                                        onClick={handlePasswordButtonClick}
-                                    >
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 39 39" fill="none">
-                                            <path d="M15.4505 31.8307H9.99045C8.44878 31.8307 7.16406 30.6513 7.16406 29.236V23.6338C7.16406 22.2185 8.44878 21.0391 9.99045 21.0391H27.2057" stroke="#1F4EAD" stroke-width="1.5" stroke-miterlimit="10" />
-                                            <path d="M26.6315 21.0391H34.0613C36.2097 21.0391 38 22.2185 38 23.6338V29.236C38 30.6513 36.2097 31.8307 34.0613 31.8307H10.25" stroke="#1F4EAD" stroke-width="1.5" stroke-miterlimit="10" />
-                                            <path d="M13.0297 28.1187C14.0514 28.1187 14.8797 27.2246 14.8797 26.1218C14.8797 25.019 14.0514 24.125 13.0297 24.125C12.008 24.125 11.1797 25.019 11.1797 26.1218C11.1797 27.2246 12.008 28.1187 13.0297 28.1187Z" fill="#1F4EAD" />
-                                            <path d="M18.2563 28.1187C19.278 28.1187 20.1063 27.2246 20.1063 26.1218C20.1063 25.019 19.278 24.125 18.2563 24.125C17.2345 24.125 16.4062 25.019 16.4062 26.1218C16.4062 27.2246 17.2345 28.1187 18.2563 28.1187Z" fill="#1F4EAD" />
-                                            <path d="M22.8813 28.1187C23.903 28.1187 24.7313 27.2246 24.7313 26.1218C24.7313 25.019 23.903 24.125 22.8813 24.125C21.8595 24.125 21.0312 25.019 21.0312 26.1218C21.0312 27.2246 21.8595 28.1187 22.8813 28.1187Z" fill="#1F4EAD" />
-                                            <path d="M27.5063 28.1187C28.528 28.1187 29.3563 27.2246 29.3563 26.1218C29.3563 25.019 28.528 24.125 27.5063 24.125C26.4845 24.125 25.6562 25.019 25.6562 26.1218C25.6562 27.2246 26.4845 28.1187 27.5063 28.1187Z" fill="#1F4EAD" />
-                                            <path d="M32.1312 28.1187C33.153 28.1187 33.9812 27.2246 33.9812 26.1218C33.9812 25.019 33.153 24.125 32.1312 24.125C31.1095 24.125 30.2812 25.019 30.2812 26.1218C30.2812 27.2246 31.1095 28.1187 32.1312 28.1187Z" fill="#1F4EAD" />
-                                            <path d="M24.9868 17.9689V14.5625H8.5" stroke="#1F4EAD" stroke-width="1.5" stroke-miterlimit="10" />
-                                            <path d="M22.1118 10.8079C22.1118 5.40476 18.0309 1 13.025 1C8.01912 1 3.88382 5.40476 3.88382 10.8079V14.5667H1V38H24.9956V34.1238" stroke="#1F4EAD" stroke-width="1.5" stroke-miterlimit="10" />
-                                        </svg>
-
-                                        <span className="ml-2 text-primary-700">Password</span>
-
-                                    </button>
-
-                                    <Button
-                                        id='loginwithpasskey'
-                                        isProcessing={fidoLoader}
-                                        onClick={() => {
-
-                                            authenticateWithPasskey(signInUserProps?.email)
-                                        }}
-
-                                        className='w-2/5 font-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'
-                                    >
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 37 37" fill="none">
-                                            <path d="M22.9319 8.88C22.9319 13.3701 19.292 17.01 14.8019 17.01C10.3118 17.01 6.67188 13.3701 6.67188 8.88C6.67188 4.38993 10.3118 0.75 14.8019 0.75C19.292 0.75 22.9319 4.38993 22.9319 8.88Z" stroke="white" stroke-width="1.5" />
-                                            <path d="M33.4534 23.3732C34.401 22.854 35.2173 22.1032 35.8288 21.1812C36.5894 20.0342 36.9976 18.6757 36.9996 17.284C37.0038 16.0481 36.6876 14.8337 36.0839 13.7677C35.4802 12.7018 34.6113 11.8233 33.568 11.2243C32.5247 10.6252 31.3452 10.3274 30.1528 10.3621C28.9604 10.3968 27.7989 10.7626 26.7897 11.4214C25.7804 12.0802 24.9604 13.0077 24.4154 14.1071C23.8704 15.2065 23.6204 16.4373 23.6915 17.671C23.7626 18.9047 24.1522 20.096 24.8196 21.1204C25.487 22.1448 26.4076 22.9646 27.4854 23.4943L33.4534 23.3732ZM33.4534 23.3732L33.2769 23.1903L32.7372 23.7112L33.0157 24.4076C33.1097 24.37 33.2028 24.3305 33.295 24.2891L33.4534 23.3732ZM36.2496 17.2814L36.2496 17.2829C36.2478 18.5292 35.8822 19.7437 35.2037 20.7667C34.5255 21.7894 33.5675 22.5715 32.4588 23.0148L31.4226 23.4291L32.1976 24.232L34.0544 26.1559L31.7029 28.5924L31.2002 29.1132L31.7029 29.6341L34.0544 32.0705L30.3396 35.9194L28.2354 33.7392V23.4943V23.0272L27.8162 22.8212C26.8618 22.3522 26.0431 21.6244 25.448 20.711C24.8528 19.7974 24.5039 18.7326 24.4403 17.6279C24.3766 16.5232 24.6007 15.4221 25.0874 14.4402C25.5741 13.4585 26.3046 12.6337 27.1996 12.0494C28.0944 11.4654 29.1218 11.1424 30.1746 11.1118C31.2273 11.0812 32.2702 11.3439 33.1945 11.8747C34.1191 12.4056 34.8926 13.186 35.4313 14.1373C35.9701 15.0887 36.2534 16.1747 36.2496 17.2814ZM28.4545 13.3975L28.9941 13.9183L28.4545 13.3975C28.0856 13.7797 27.8372 14.2635 27.7368 14.7864C27.6364 15.3092 27.6877 15.8513 27.8852 16.3453C28.0828 16.8395 28.4191 17.2662 28.8556 17.5683C29.2924 17.8708 29.8089 18.034 30.3396 18.034C31.052 18.034 31.7295 17.7405 32.2248 17.2274C32.7192 16.7151 32.9925 16.0258 32.9925 15.3124C32.9925 14.7799 32.8402 14.2574 32.5521 13.8106C32.2638 13.3636 31.8513 13.011 31.3636 12.8017C30.8756 12.5923 30.337 12.537 29.817 12.6442C29.2973 12.7513 28.8237 13.015 28.4545 13.3975Z" stroke="white" stroke-width="1.5" />
-                                            <path d="M17.4183 21.4688C17.4183 21.4688 17.4184 21.4688 17.4185 21.4688C18.8529 21.4695 20.2714 21.7411 21.5925 22.266C22.2661 23.5916 23.2277 24.7608 24.41 25.6964V34.7688H0.75V31.8188C0.75 29.085 1.8858 26.4559 3.9194 24.512C5.95415 22.567 8.7208 21.4688 11.6123 21.4688H17.4183Z" stroke="white" stroke-width="1.5" />
-                                        </svg>
-                                        <span className="ml-2">Passkey</span>
-
-                                    </Button>
-
-                                </div>
-                                <div className="text-sm font-medium text-gray-500 dark:text-gray-400 pt-6 flex flex-col md:flex-row md:justify-center items-center justify-center">
-                                    Don't have an account yet?
-                                    &nbsp;<a
-                                        id='navigatetosignup'
-                                        href="/authentication/sign-up"
-                                        className="text-primary-700 hover:underline dark:text-primary-500"
-                                    >
-                                        {` Create an account`}
-                                    </a>
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-                    <FooterBar />
-
-
-                </div>
-            ) : (
-
-                showSignInUserPassword ? <SignInUserPassword isPasskey={false} email={signInUserProps.email} /> : <SignInUser />
-
-            )}
-        </div>
-    );
+	const [loading, setLoading] = useState<boolean>(false);
+	const [showSignInUser, setShowSignInUser] = useState(true);
+	const [showSignInUserPassword, setShowSignInUserPassword] = useState(false);
+	const [fidoLoader, setFidoLoader] = useState<boolean>(false);
+	const [fidoUserError, setFidoUserError] = useState('');
+	const [failure, setFailure] = useState<string | null>(null);
+	const [success, setSuccess] = useState<string | null>(null);
+
+	const handleSvgClick = () => {
+		window.history.pushState(null, '', pathRoutes.auth.sinIn);
+		setShowSignInUser(!showSignInUser);
+	};
+
+	const handlePasswordButtonClick = () => {
+		setShowSignInUserPassword(true);
+		setShowSignInUser(false);
+	};
+
+	const verifyAuthenticationMethod = async (
+		verifyAuthenticationObj: unknown,
+		userData: { userName: string },
+	): Promise<string | AxiosResponse> => {
+		try {
+			const res = verifyAuthentication(verifyAuthenticationObj, userData);
+			return await res;
+		} catch (error) {
+			setFidoLoader(false);
+			throw error;
+		}
+	};
+
+	const getUserDetails = async (access_token: string) => {
+		const userDetails = await getUserProfile(access_token);
+		const { data } = userDetails as AxiosResponse;
+		if (data?.data?.userOrgRoles?.length > 0) {
+			const permissionArray: number | string[] = [];
+			data?.data?.userOrgRoles?.forEach(
+				(element: { orgRole: { name: string } }) =>
+					permissionArray.push(element?.orgRole?.name),
+			);
+			await setToLocalStorage(storageKeys.PERMISSIONS, permissionArray);
+			await setToLocalStorage(storageKeys.USER_PROFILE, data?.data);
+			await setToLocalStorage(storageKeys.USER_EMAIL, data?.data?.email);
+
+			window.location.href = '/dashboard';
+		} else {
+			setFailure(userDetails as string);
+		}
+		setLoading(false);
+	};
+
+	const showFidoError = (error: unknown): void => {
+		const err = error as AxiosError;
+		if (
+			err.message.includes('The operation either timed out or was not allowed')
+		) {
+			const [errorMsg] = err.message.split('.');
+			setFidoUserError(errorMsg);
+		} else {
+			setFidoUserError(err.message);
+		}
+	};
+
+	const authenticateWithPasskey = async (email: string): Promise<void> => {
+		try {
+			setFidoLoader(true);
+
+			const obj = { userName: email };
+
+			const generateAuthenticationResponse: any =
+				await generateAuthenticationOption(obj);
+			const challangeId: string =
+				generateAuthenticationResponse?.data?.data?.challenge;
+			setFidoUserError(generateAuthenticationResponse?.data?.error);
+
+			const opts = generateAuthenticationResponse?.data?.data;
+			const attResp = await startAuthentication(opts);
+			const verifyAuthenticationObj = {
+				...attResp,
+				challangeId,
+			};
+
+			const verificationResp = await verifyAuthenticationMethod(
+				verifyAuthenticationObj,
+				obj,
+			);
+			const { data } = verificationResp as AxiosResponse;
+
+			if (data?.data.verified) {
+				const payload: UserSignInData = {
+					email: email,
+					isPasskey: true,
+				};
+				const loginRsp = await loginUser(payload);
+				const { data } = loginRsp as AxiosResponse;
+
+				if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+					await setToLocalStorage(storageKeys.TOKEN, data?.data?.access_token);
+					const response = await fetch('/api/auth/signin', {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+						},
+						body: JSON.stringify(data),
+					});
+
+					if (response.redirected) {
+						getUserDetails(data?.data?.access_token);
+					}
+				} else if (data?.error) {
+				}
+			} else {
+				setFidoLoader(false);
+				setFidoUserError(verificationResp as string);
+			}
+		} catch (error) {
+			if (error instanceof DOMException) {
+				setFidoLoader(false);
+				setFidoUserError('The operation either timed out or was not allowed.');
+			} else {
+				setFidoLoader(false);
+				showFidoError(error);
+			}
+		} finally {
+			setLoading(false);
+		}
+	};
+	return (
+		<div>
+			{showSignInUser ? (
+				<div className="flex flex-col min-h-screen">
+					<NavBar />
+					<div className="flex flex-1 flex-col md:flex-row">
+						<div className="md:w-3/5 w-full bg-blue-500 bg-opacity-10 lg:p-4 md:p-4">
+							<div className="flex justify-center">
+								<img
+									className="hidden sm:block"
+									src="/images/choose-password-passkey.svg"
+									alt="img"
+								/>
+							</div>
+						</div>
+						<div className="md:w-2/5 w-full p-10 flex">
+							<div className="w-full">
+								{(success || failure || fidoUserError) && (
+									<Alert
+										color={success ? 'success' : 'failure'}
+										onDismiss={() => {
+											setSuccess(null);
+											setFailure(null);
+											setFidoUserError('');
+										}}
+									>
+										<span>
+											<p>{success || failure || fidoUserError}</p>
+										</span>
+									</Alert>
+								)}
+
+								<div className="flex lg:mt-16 lg:mb-20 sm:mb-8">
+									<button className="flex mt-2" onClick={handleSvgClick}>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="26"
+											height="24"
+											viewBox="0 0 37 20"
+											fill="none"
+										>
+											<path
+												d="M0.201172 9.23695C0.00108337 9.60157 -0.0512199 10.0028 0.050869 10.3898C0.152962 10.7769 0.404865 11.1324 0.774712 11.4114L11.3468 19.391C11.5906 19.5815 11.8823 19.7335 12.2047 19.838C12.5272 19.9426 12.874 19.9976 13.2249 19.9999C13.5759 20.0022 13.9239 19.9518 14.2487 19.8514C14.5735 19.7511 14.8686 19.603 15.1168 19.4157C15.365 19.2284 15.5612 19.0057 15.6941 18.7605C15.827 18.5153 15.8939 18.2526 15.8908 17.9878C15.8878 17.7229 15.8149 17.4611 15.6763 17.2177C15.5378 16.9743 15.3365 16.7542 15.084 16.5702L9.02094 11.9939L34.357 11.9939C35.0579 11.9939 35.7302 11.7837 36.2259 11.4096C36.7215 11.0355 37 10.5281 37 9.999C37 9.46992 36.7215 8.96251 36.2259 8.5884C35.7302 8.21428 35.0579 8.00411 34.357 8.00411L9.02094 8.00411L15.0814 3.4298C15.3338 3.24578 15.5352 3.02565 15.6737 2.78227C15.8122 2.53888 15.8851 2.27711 15.8882 2.01223C15.8912 1.74735 15.8244 1.48466 15.6915 1.2395C15.5586 0.994335 15.3623 0.771599 15.1142 0.584293C14.866 0.396986 14.5709 0.248857 14.2461 0.148552C13.9213 0.0482464 13.5732 -0.00222778 13.2223 7.43866e-05C12.8714 0.00237656 12.5245 0.0574093 12.2021 0.161961C11.8796 0.26651 11.588 0.418484 11.3442 0.609016L0.772064 8.58861C0.527206 8.77433 0.333214 8.99464 0.201172 9.23695Z"
+												fill="#1F4EAD"
+											/>
+										</svg>
+									</button>
+
+									<div className="w-full flex flex-col items-center justify-center ">
+										<h2 className="text-primary-700 text-blue-600 font-inter text-3xl font-bold leading-10">
+											Login
+										</h2>
+
+										<p className="text-gray-500 font-inter text-base font-medium leading-5 mt-2">
+											Choose authentication method to Login
+										</p>
+									</div>
+								</div>
+								<div className="lg:hidden sm:block md:hidden sm:block bg-blue-500 bg-opacity-10 mt-4 mb-8">
+									<img src="/images/choose-password-passkey.svg" alt="img" />
+								</div>
+
+								<div className="flex mb-20 text-gray-700 font-inter text-xl font-medium leading-[1.05] justify-center items-center">
+									With Passkey you don’t need to <br /> remember complex
+									passwords
+								</div>
+
+								<div className="flex justify-between">
+									<button
+										className="w-2/5 px-4 rounded-md text-center font-medium leading-5 border-blue-600 flex items-center justify-center hover:bg-secondary-700 bg-transparent ring-2 text-black rounded-lg text-sm"
+										onClick={handlePasswordButtonClick}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="21"
+											height="21"
+											viewBox="0 0 39 39"
+											fill="none"
+										>
+											<path
+												d="M15.4505 31.8307H9.99045C8.44878 31.8307 7.16406 30.6513 7.16406 29.236V23.6338C7.16406 22.2185 8.44878 21.0391 9.99045 21.0391H27.2057"
+												stroke="#1F4EAD"
+												stroke-width="1.5"
+												stroke-miterlimit="10"
+											/>
+											<path
+												d="M26.6315 21.0391H34.0613C36.2097 21.0391 38 22.2185 38 23.6338V29.236C38 30.6513 36.2097 31.8307 34.0613 31.8307H10.25"
+												stroke="#1F4EAD"
+												stroke-width="1.5"
+												stroke-miterlimit="10"
+											/>
+											<path
+												d="M13.0297 28.1187C14.0514 28.1187 14.8797 27.2246 14.8797 26.1218C14.8797 25.019 14.0514 24.125 13.0297 24.125C12.008 24.125 11.1797 25.019 11.1797 26.1218C11.1797 27.2246 12.008 28.1187 13.0297 28.1187Z"
+												fill="#1F4EAD"
+											/>
+											<path
+												d="M18.2563 28.1187C19.278 28.1187 20.1063 27.2246 20.1063 26.1218C20.1063 25.019 19.278 24.125 18.2563 24.125C17.2345 24.125 16.4062 25.019 16.4062 26.1218C16.4062 27.2246 17.2345 28.1187 18.2563 28.1187Z"
+												fill="#1F4EAD"
+											/>
+											<path
+												d="M22.8813 28.1187C23.903 28.1187 24.7313 27.2246 24.7313 26.1218C24.7313 25.019 23.903 24.125 22.8813 24.125C21.8595 24.125 21.0312 25.019 21.0312 26.1218C21.0312 27.2246 21.8595 28.1187 22.8813 28.1187Z"
+												fill="#1F4EAD"
+											/>
+											<path
+												d="M27.5063 28.1187C28.528 28.1187 29.3563 27.2246 29.3563 26.1218C29.3563 25.019 28.528 24.125 27.5063 24.125C26.4845 24.125 25.6562 25.019 25.6562 26.1218C25.6562 27.2246 26.4845 28.1187 27.5063 28.1187Z"
+												fill="#1F4EAD"
+											/>
+											<path
+												d="M32.1312 28.1187C33.153 28.1187 33.9812 27.2246 33.9812 26.1218C33.9812 25.019 33.153 24.125 32.1312 24.125C31.1095 24.125 30.2812 25.019 30.2812 26.1218C30.2812 27.2246 31.1095 28.1187 32.1312 28.1187Z"
+												fill="#1F4EAD"
+											/>
+											<path
+												d="M24.9868 17.9689V14.5625H8.5"
+												stroke="#1F4EAD"
+												stroke-width="1.5"
+												stroke-miterlimit="10"
+											/>
+											<path
+												d="M22.1118 10.8079C22.1118 5.40476 18.0309 1 13.025 1C8.01912 1 3.88382 5.40476 3.88382 10.8079V14.5667H1V38H24.9956V34.1238"
+												stroke="#1F4EAD"
+												stroke-width="1.5"
+												stroke-miterlimit="10"
+											/>
+										</svg>
+
+										<span className="ml-2 text-primary-700">Password</span>
+									</button>
+
+									<Button
+										id="loginwithpasskey"
+										isProcessing={loading}
+										onClick={() => {
+											authenticateWithPasskey(signInUserProps?.email);
+										}}
+										className="w-2/5 font-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"
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="21"
+											height="21"
+											viewBox="0 0 37 37"
+											fill="none"
+										>
+											<path
+												d="M22.9319 8.88C22.9319 13.3701 19.292 17.01 14.8019 17.01C10.3118 17.01 6.67188 13.3701 6.67188 8.88C6.67188 4.38993 10.3118 0.75 14.8019 0.75C19.292 0.75 22.9319 4.38993 22.9319 8.88Z"
+												stroke="white"
+												stroke-width="1.5"
+											/>
+											<path
+												d="M33.4534 23.3732C34.401 22.854 35.2173 22.1032 35.8288 21.1812C36.5894 20.0342 36.9976 18.6757 36.9996 17.284C37.0038 16.0481 36.6876 14.8337 36.0839 13.7677C35.4802 12.7018 34.6113 11.8233 33.568 11.2243C32.5247 10.6252 31.3452 10.3274 30.1528 10.3621C28.9604 10.3968 27.7989 10.7626 26.7897 11.4214C25.7804 12.0802 24.9604 13.0077 24.4154 14.1071C23.8704 15.2065 23.6204 16.4373 23.6915 17.671C23.7626 18.9047 24.1522 20.096 24.8196 21.1204C25.487 22.1448 26.4076 22.9646 27.4854 23.4943L33.4534 23.3732ZM33.4534 23.3732L33.2769 23.1903L32.7372 23.7112L33.0157 24.4076C33.1097 24.37 33.2028 24.3305 33.295 24.2891L33.4534 23.3732ZM36.2496 17.2814L36.2496 17.2829C36.2478 18.5292 35.8822 19.7437 35.2037 20.7667C34.5255 21.7894 33.5675 22.5715 32.4588 23.0148L31.4226 23.4291L32.1976 24.232L34.0544 26.1559L31.7029 28.5924L31.2002 29.1132L31.7029 29.6341L34.0544 32.0705L30.3396 35.9194L28.2354 33.7392V23.4943V23.0272L27.8162 22.8212C26.8618 22.3522 26.0431 21.6244 25.448 20.711C24.8528 19.7974 24.5039 18.7326 24.4403 17.6279C24.3766 16.5232 24.6007 15.4221 25.0874 14.4402C25.5741 13.4585 26.3046 12.6337 27.1996 12.0494C28.0944 11.4654 29.1218 11.1424 30.1746 11.1118C31.2273 11.0812 32.2702 11.3439 33.1945 11.8747C34.1191 12.4056 34.8926 13.186 35.4313 14.1373C35.9701 15.0887 36.2534 16.1747 36.2496 17.2814ZM28.4545 13.3975L28.9941 13.9183L28.4545 13.3975C28.0856 13.7797 27.8372 14.2635 27.7368 14.7864C27.6364 15.3092 27.6877 15.8513 27.8852 16.3453C28.0828 16.8395 28.4191 17.2662 28.8556 17.5683C29.2924 17.8708 29.8089 18.034 30.3396 18.034C31.052 18.034 31.7295 17.7405 32.2248 17.2274C32.7192 16.7151 32.9925 16.0258 32.9925 15.3124C32.9925 14.7799 32.8402 14.2574 32.5521 13.8106C32.2638 13.3636 31.8513 13.011 31.3636 12.8017C30.8756 12.5923 30.337 12.537 29.817 12.6442C29.2973 12.7513 28.8237 13.015 28.4545 13.3975Z"
+												stroke="white"
+												stroke-width="1.5"
+											/>
+											<path
+												d="M17.4183 21.4688C17.4183 21.4688 17.4184 21.4688 17.4185 21.4688C18.8529 21.4695 20.2714 21.7411 21.5925 22.266C22.2661 23.5916 23.2277 24.7608 24.41 25.6964V34.7688H0.75V31.8188C0.75 29.085 1.8858 26.4559 3.9194 24.512C5.95415 22.567 8.7208 21.4688 11.6123 21.4688H17.4183Z"
+												stroke="white"
+												stroke-width="1.5"
+											/>
+										</svg>
+										<span className="ml-2">Passkey</span>
+									</Button>
+								</div>
+								<div className="text-sm font-medium text-gray-500 dark:text-gray-400 pt-6 flex flex-col md:flex-row md:justify-center items-center justify-center">
+									Don't have an account yet? &nbsp;
+									<a
+										id="navigatetosignup"
+										href="/authentication/sign-up"
+										className="text-primary-700 hover:underline dark:text-primary-500"
+									>
+										{` Create an account`}
+									</a>
+								</div>
+							</div>
+						</div>
+					</div>
+					<FooterBar />
+				</div>
+			) : showSignInUserPassword ? (
+				<SignInUserPassword isPasskey={false} email={signInUserProps.email} />
+			) : (
+				<SignInUser />
+			)}
+		</div>
+	);
 };
 
-export default SignInUserPasskey;
\ No newline at end of file
+export default SignInUserPasskey;
diff --git a/src/components/Authentication/SignInUserPassword.tsx b/src/components/Authentication/SignInUserPassword.tsx
index 8ad30e955..632a9dc30 100644
--- a/src/components/Authentication/SignInUserPassword.tsx
+++ b/src/components/Authentication/SignInUserPassword.tsx
@@ -1,4 +1,4 @@
-import './global.css'
+import '../../common/global.css'
 
 import * as yup from 'yup';
 
@@ -47,23 +47,22 @@ const SignInUserPassword = (signInUserProps: SignInUser3Props) => {
 
 
 	const getUserDetails = async (access_token: string) => {
+		
 		const userDetails = await getUserProfile(access_token);
 		const { data } = userDetails as AxiosResponse
 		if (data?.data?.userOrgRoles?.length > 0) {
+			
 			const permissionArray: number | string[] = []
 			data?.data?.userOrgRoles?.forEach((element: { orgRole: { name: string } }) => permissionArray.push(element?.orgRole?.name));
-			await setToLocalStorage(storageKeys.PERMISSIONS, permissionArray)
 			await setToLocalStorage(storageKeys.USER_PROFILE, data?.data)
 			await setToLocalStorage(storageKeys.USER_EMAIL, data?.data?.email)
-
 			window.location.href = '/dashboard'
 		} else {
 			setFailure(userDetails as string)
 		}
+	
 		setLoading(false)
 	}
-
-
 	const signInUser = async (values: passwordValue) => {
 		const payload: SignInUser3Props = {
 			email: email,
@@ -73,10 +72,8 @@ const SignInUserPassword = (signInUserProps: SignInUser3Props) => {
 		setLoading(true)
 		const loginRsp = await loginUser(payload)
 		const { data } = loginRsp as AxiosResponse
-
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
 			await setToLocalStorage(storageKeys.TOKEN, data?.data?.access_token)
-
 			const response = await fetch('/api/auth/signin', {
 				method: "POST",
 				headers: {
@@ -88,7 +85,6 @@ const SignInUserPassword = (signInUserProps: SignInUser3Props) => {
 			if (response.redirected) {
 				getUserDetails(data?.data?.access_token)
 			}
-
 		} else {
 			setLoading(false)
 			setFailure(loginRsp as string)
@@ -212,7 +208,7 @@ const SignInUserPassword = (signInUserProps: SignInUser3Props) => {
 												<div className="text-primary-700 font-inter text-base font-medium leading-5 ">
 
 													<div className="block mb-2 text-sm font-medium  dark:text-white">
-														<Label className="text-primary-700" htmlFor="email2" value="Your Password" />
+														<Label className="text-primary-700 dark:!text-primary-700" htmlFor="email2" value="Your Password" />
 														<span className='text-red-500 text-xs'>*</span>
 													</div>
 
diff --git a/src/components/Authentication/SignUpUser.tsx b/src/components/Authentication/SignUpUser.tsx
index 8a4949a75..e18751a36 100644
--- a/src/components/Authentication/SignUpUser.tsx
+++ b/src/components/Authentication/SignUpUser.tsx
@@ -12,7 +12,6 @@ import {
 import { checkUserExist, sendVerificationMail, setToLocalStorage } from '../../api/Auth.js';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant.js';
 import { useEffect, useState } from 'react';
-import React from 'react';
 import SignUpUserName from './SignUpUserName'
 import FooterBar from './FooterBar.js';
 import NavBar from './NavBar.js';
@@ -48,7 +47,7 @@ const SignUpUser = () => {
 			setVerifyLoader(true)
 			const userRsp = await sendVerificationMail(payload);
 			const { data } = userRsp as AxiosResponse;
-			if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
 
 				setVerificationSuccess(data?.message)
 				setVerifyLoader(false)
@@ -68,12 +67,14 @@ const SignUpUser = () => {
 		const userRsp = await checkUserExist(values?.email)
 		const { data } = userRsp as AxiosResponse
 		setLoading(false)
+		console.log("data:56576", data)
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-			if (data.data === 'New User') {
+			if (data?.data?.isExist === false) {
+				console.log('email data::', data.data)
 				setEmail(values?.email)
 				await VerifyMail(values?.email)
 			}
-			else if (data.data.isEmailVerified === true && data?.data?.isKeycloak !== true) {
+			else if (data.data.isEmailVerified === true && data?.data?.isSupabase!== true) {
 				setEmail(values?.email)
 				await setToLocalStorage(storageKeys.USER_EMAIL, values?.email)
 				setNextFlag(true)
@@ -181,11 +182,11 @@ const SignUpUser = () => {
 											<div className="text-primary-700 font-inter text-base font-medium leading-5 mb-20">
 
 												<div className="block mb-2 text-sm font-medium  dark:text-white">
-													<Label className="text-primary-700" htmlFor="email2" value="Your Email" />
+													<Label className="text-primary-700 dark:!text-primary-700" htmlFor="email2" value="Your Email" />
 													<span className='text-red-500 text-xs'>*</span>
 												</div>
 
-												<div className="w-full flex items-center bg-gray-200 px-4 text-gray-700 text-sm border rounded-md focus:border-blue-400 focus:ring-1 focus:ring-blue-600">
+												<div className="w-full flex items-center bg-gray-200 px-4 py-3 text-gray-700 text-sm border rounded-md focus:border-blue-400 focus:ring-1 focus:ring-blue-600">
 
 													<svg
 														xmlns="http://www.w3.org/2000/svg"
@@ -203,7 +204,6 @@ const SignUpUser = () => {
 
 													<Field id='Signupemail'
 														name='email'
-														type="email"
 														className="truncate outline-none flex-grow bg-transparent focus:outline-none border-none focus:border-none focus:ring-0"
 														placeholder="name@company.com" />
 
diff --git a/src/components/Authentication/SignUpUserName.tsx b/src/components/Authentication/SignUpUserName.tsx
index dd244cd66..c91195775 100644
--- a/src/components/Authentication/SignUpUserName.tsx
+++ b/src/components/Authentication/SignUpUserName.tsx
@@ -52,12 +52,6 @@ const SignUpUserName = () => {
 		setGoingBack(false);
 	};
 
-	const handleSkipClick = () => {
-		setSkipped(true);
-	};
-
-
-
 	return (
 		<div>
 			{skipped ? (
@@ -130,11 +124,13 @@ const SignUpUserName = () => {
 									validationSchema={yup.object().shape({
 										firstName: yup
 											.string()
+											.required('First name is required')
 											.min(2, 'First name must be at least 2 characters')
 											.max(50, 'First name must be at most 255 characters')
 											.trim(),
 										lastName: yup
 											.string()
+											.required('Last name is required')
 											.min(2, 'Last name must be at least 2 characters')
 											.max(50, 'Last name must be at most 255 characters')
 											.trim()
@@ -160,7 +156,8 @@ const SignUpUserName = () => {
 													<div className="text-primary-700 font-inter text-base font-medium leading-5">
 
 														<div className="block mb-2 text-sm font-medium  dark:text-white">
-															<Label className="text-primary-700" htmlFor="firstName" value="First name" />
+															<Label className="text-primary-700 dark:!text-primary-700" htmlFor="firstName" value="First name" />
+															<span className='text-red-500 text-xs'>*</span>
 														</div>
 														<Field
 															id="signupfirstname"
@@ -176,7 +173,8 @@ const SignUpUserName = () => {
 													<div className="text-primary-700 font-inter text-base font-medium leading-5 mt-6">
 
 														<div className="block mb-2 text-sm font-medium  dark:text-white">
-															<Label className="text-primary-700" htmlFor="lastName" value="Last name" />
+															<Label className="text-primary-700 dark:!text-primary-700" htmlFor="lastName" value="Last name" />
+															<span className='text-red-500 text-xs'>*</span>
 														</div>
 														<Field
 															id="signuplastname"
@@ -189,15 +187,6 @@ const SignUpUserName = () => {
 															<span className="text-red-500 text-xs">{formikHandlers?.errors?.lastName}</span>
 														}
 													</div>
-
-													<div className="text-lg flex justify-end font-medium text-gray-500 dark:text-gray-400 text-primary-700  dark:text-primary-500  ml-auto pt-4">
-														<span className='hover:underline cursor-pointer'
-															onClick={handleSkipClick}>
-
-															{`Skip`}
-														</span>
-													</div>
-
 													<div className="flex mt-8">
 
 														<Button
diff --git a/src/components/Authentication/SignUpUserPasskey.tsx b/src/components/Authentication/SignUpUserPasskey.tsx
index 7abee556e..7db3d1a92 100644
--- a/src/components/Authentication/SignUpUserPasskey.tsx
+++ b/src/components/Authentication/SignUpUserPasskey.tsx
@@ -2,33 +2,31 @@ import 'react-toastify/dist/ReactToastify.css';
 
 import { Alert, Button } from 'flowbite-react';
 import type { AxiosError, AxiosResponse } from 'axios';
-import type { IdeviceBody, RegistrationOptionInterface } from '../Profile/interfaces/index.js';
+import type { IdeviceBody, RegistrationOptionInterface, VerifyRegistrationObjInterface} from '../Profile/interfaces/index.js';
 import { addDeviceDetails, generateRegistrationOption, verifyRegistration } from '../../api/Fido.js';
 import { AddPasswordDetails, addPasswordDetails, getFromLocalStorage, passwordEncryption } from '../../api/Auth.js';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant.js';
 import { useEffect, useState } from 'react';
-
 import SignUpUserPassword from './SignUpUserPassword.jsx';
 import { startRegistration } from '@simplewebauthn/browser';
-import React from 'react';
 import SignUpUserName from './SignUpUserName.js';
 import { v4 as uuidv4 } from 'uuid';
 import NavBar from './NavBar.js';
 import FooterBar from './FooterBar.js';
-
+  
 interface passwordValues {
 
     password: string,
     confirmPassword: string
 }
 
-const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastName: string }) => {
+const SignUpUserPasskey = ({ email, firstName, lastName }: { email: string, firstName: string; lastName: string }) => {
 
     const [loading, setLoading] = useState<boolean>(false)
     const [erroMsg, setErrMsg] = useState<string | null>(null)
     const [verificationSuccess, setVerificationSuccess] = useState<string>('')
     const [addSuccess, setAddSuccess] = useState<string | null>(null)
-    const [addfailure, setAddFailur] = useState<string | null>(null)
+    const [addfailure, setAddFailure] = useState<string | null>(null)
     const [emailAutoFill, setEmailAutoFill] = useState<string>('')
     const [fidoError, setFidoError] = useState("")
     const [currentComponent, setCurrentComponent] = useState<string>('email');
@@ -44,40 +42,41 @@ const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastNam
     }, [])
 
     const showFidoError = (error: unknown): void => {
-        const err = error as AxiosError
-        if (err.message.includes("The operation either timed out or was not allowed")) {
-            const [errorMsg] = err.message.split('.')
-            setFidoError(errorMsg)
-            setTimeout(() => {
-                setFidoError("")
-            })
-        } else {
-            setFidoError(err.message)
-            setTimeout(() => {
-                setFidoError("")
-            })
-        }
-    }
-
-    const submit = async (fidoFlag: boolean, passwordDetails?: passwordValues,) => {
+		const err = error as AxiosError;
+		if (
+			err.message.includes('The operation either timed out or was not allowed')
+		) {
+			const [errorMsg] = err.message.split('.');
+			setFidoError(errorMsg);
+		} else {
+			setFidoError(err.message);
+		}
+	};
+
+
+    const submit = async (fidoFlag: boolean, passwordDetails?: passwordValues) => {
         const userEmail = await getFromLocalStorage(storageKeys.USER_EMAIL)
         const password: string = uuidv4();
         let payload: AddPasswordDetails = {
+            email: userEmail,
             isPasskey: fidoFlag,
             firstName: firstName,
             lastName: lastName,
             password: passwordEncryption(password)
         };
         if (!fidoFlag) {
-            payload.password = passwordDetails?.password;
+            payload.password = passwordDetails?.password || '';
         }
+
         setLoading(true)
 
-        const userRsp = await addPasswordDetails(payload, userEmail)
+        const userRsp = await addPasswordDetails(payload)
+
         const { data } = userRsp as AxiosResponse
         setLoading(false)
         if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
             window.location.href = `/authentication/sign-in?signup=true&fidoFlag=${fidoFlag}&method=passkey`
+
         } else {
             setErrMsg(userRsp as string)
         }
@@ -93,7 +92,7 @@ const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastNam
             }
             const generateRegistrationResponse = await generateRegistrationOption(RegistrationOption)
             const { data } = generateRegistrationResponse as AxiosResponse
-            if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+            if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
                 const opts = data?.data
                 const challangeId = data?.data?.challenge
 
@@ -106,7 +105,7 @@ const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastNam
                 }
                 setLoading(false)
                 const attResp = await startRegistration(opts)
-                const verifyRegistrationObj = {
+                const verifyRegistrationObj: VerifyRegistrationObjInterface = {
                     ...attResp,
                     challangeId
                 }
@@ -119,12 +118,13 @@ const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastNam
             showFidoError(error)
         }
     }
-    const verifyRegistrationMethod = async (verifyRegistrationObj: any, OrgUserEmail: string) => {
+
+    let credentialID = '';
+    const verifyRegistrationMethod = async (verifyRegistrationObj: VerifyRegistrationObjInterface, OrgUserEmail: string) => {
         try {
             const verificationRegisterResp = await verifyRegistration(verifyRegistrationObj, OrgUserEmail)
             const { data } = verificationRegisterResp as AxiosResponse
-
-            const credentialID = data?.data?.newDevice?.credentialID
+            credentialID = encodeURIComponent(data?.data?.newDevice?.credentialID)
             if (data?.data?.verified) {
                 let platformDeviceName = ''
 
@@ -138,7 +138,6 @@ const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastNam
                     userName: OrgUserEmail,
                     credentialId: credentialID,
                     deviceFriendlyName: platformDeviceName
-
                 }
                 await addDeviceDetailsMethod(deviceBody)
             }
@@ -156,11 +155,11 @@ const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastNam
             if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
                 submit(true)
             } else {
-                setAddFailur(deviceDetailsResp as string)
+                setAddFailure(deviceDetailsResp as string)
             }
             setTimeout(() => {
                 setAddSuccess('')
-                setAddFailur('')
+                setAddFailure('')
             });
         } catch (error) {
             showFidoError(error)
@@ -194,14 +193,18 @@ const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastNam
 
                             <div className="w-full">
                                 {
-                                    (verificationSuccess || erroMsg) &&
+                                    (verificationSuccess || erroMsg || fidoError) &&
                                     <Alert
                                         color={verificationSuccess ? "success" : "failure"}
-                                        onDismiss={() => setErrMsg(null)}
+                                        onDismiss={() => {
+                                            setAddSuccess(null)
+                                            setFidoError('')
+                                            setErrMsg('')
+                                        }}
                                     >
                                         <span>
                                             <p>
-                                                {verificationSuccess || erroMsg}
+                                                {verificationSuccess || erroMsg || fidoError}
                                             </p>
                                         </span>
                                     </Alert>
@@ -278,7 +281,7 @@ const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastNam
 
                                     <Button
                                         id='signupcreatepasskey'
-                                        isProcessing={''}
+                                        isProcessing={loading}
                                         onClick={() => {
                                             registerWithPasskey(true)
                                         }}
@@ -311,12 +314,13 @@ const SignUpUserPasskey = ({ firstName, lastName }: { firstName: string; lastNam
                             </div>
                         </div>
                     </div>
-                   <FooterBar/>
+                    <FooterBar />
 
                 </div>}
             {
                 currentComponent === 'password' && (
                     <SignUpUserPassword
+                        email={email}
                         firstName={firstName}
                         lastName={lastName}
                     />
diff --git a/src/components/Authentication/SignUpUserPassword.tsx b/src/components/Authentication/SignUpUserPassword.tsx
index 08d129bf5..87d021e38 100644
--- a/src/components/Authentication/SignUpUserPassword.tsx
+++ b/src/components/Authentication/SignUpUserPassword.tsx
@@ -24,14 +24,17 @@ import PasswordSuggestionBox from './PasswordSuggestionBox.js';
 import { PassInvisible, PassVisible, SignUpArrow } from './Svg.js';
 
 interface passwordValues {
+	email: string;
 	password: string;
 	confirmPassword: string;
 }
 
 const SignUpUserPassword = ({
+	email,
 	firstName,
 	lastName,
 }: {
+	email: string,
 	firstName: string;
 	lastName: string;
 }) => {
@@ -44,20 +47,23 @@ const SignUpUserPassword = ({
 	const [showSuggestion, setShowSuggestion] = useState(false);
 
 	const submit = async (passwordDetails: passwordValues, fidoFlag: boolean) => {
+		const userEmail = await getFromLocalStorage(storageKeys.USER_EMAIL);
 		const payload = {
+			email: userEmail,
 			password: passwordEncryption(passwordDetails?.password),
 			isPasskey: false,
 			firstName,
 			lastName,
 		};
+
 		setLoading(true);
 
-		const userEmail = await getFromLocalStorage(storageKeys.USER_EMAIL);
-		const userRsp = await addPasswordDetails(payload, userEmail);
+		const userRsp = await addPasswordDetails(payload);
 		const { data } = userRsp as AxiosResponse;
 		setLoading(false);
 		if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
-			window.location.href = `/authentication/sign-in?signup=true?fidoFlag=${fidoFlag}`;
+			window.location.href = `/authentication/sign-in?signup=true&email=${userEmail}&fidoFlag=${fidoFlag}&method=password`
+
 		} else {
 			setErrMsg(userRsp as string);
 		}
@@ -69,6 +75,7 @@ const SignUpUserPassword = ({
 	};
 
 	const initialValues = {
+		email: email,
 		firstName: '',
 		lastName: '',
 		password: '',
@@ -89,7 +96,7 @@ const SignUpUserPassword = ({
 	return (
 		<div>
 			{showSignUpUser ? (
-				<SignUpUserPasskey firstName={firstName} lastName={lastName} />
+				<SignUpUserPasskey email={email} firstName={firstName} lastName={lastName} />
 			) : (
 				<div className="flex flex-col min-h-screen">
 					<NavBar />
@@ -167,7 +174,7 @@ const SignUpUserPassword = ({
 												<div className="text-primary-700 font-inter text-base font-medium leading-5">
 													<div className="block mb-2 text-sm font-medium  dark:text-white">
 														<Label
-															className="text-primary-700"
+															className="text-primary-700 dark:!text-primary-700"
 															htmlFor="password"
 															value="Password"
 														/>
@@ -223,7 +230,7 @@ const SignUpUserPassword = ({
 												<div className="text-primary-700 font-inter text-base font-medium leading-5 mt-8">
 													<div className="block mb-2 text-sm font-medium  dark:text-white">
 														<Label
-															className="text-primary-700"
+															className="text-primary-700 dark:!text-primary-700"
 															htmlFor="confirmPassword"
 															value="Confirm Password"
 														/>
diff --git a/src/components/Authentication/global.css b/src/components/Authentication/global.css
deleted file mode 100644
index 2da98382e..000000000
--- a/src/components/Authentication/global.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.custom-shadow-blue {
-  box-shadow: -4px 0px 50px 0px rgba(31, 78, 173, 0.50);
-}
-
-.min-h-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  min-height: calc(100vh - 64px);
-}
\ No newline at end of file
diff --git a/src/components/BreadCrumbs/index.tsx b/src/components/BreadCrumbs/index.tsx
index e3796e53d..104c3c669 100644
--- a/src/components/BreadCrumbs/index.tsx
+++ b/src/components/BreadCrumbs/index.tsx
@@ -47,12 +47,15 @@ export default function BreadCrumbs() {
             </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}
                     >
-                        {crumb.text.charAt(0).toUpperCase() + crumb.text.slice(1)}
+                        {routes}
                     </Breadcrumb.Item>
                 );
             })}
diff --git a/src/components/CreateEcosystemOrgModal/index.tsx b/src/components/CreateEcosystemOrgModal/index.tsx
new file mode 100644
index 000000000..5ebda9078
--- /dev/null
+++ b/src/components/CreateEcosystemOrgModal/index.tsx
@@ -0,0 +1,405 @@
+
+
+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, storageKeys } from '../../config/CommonConstant'
+import { calculateSize, dataURItoBlob } from "../../utils/CompressImage";
+import { useEffect, useState } from "react";
+import { AlertComponent } from "../AlertComponent";
+import type { AxiosResponse } from 'axios';
+import { asset } from '../../lib/data.js';
+import { createOrganization } from "../../api/organization";
+import { getFromLocalStorage } from "../../api/Auth";
+import { createEcosystems } from "../../api/ecosystem";
+import { getOrgDetails } from "../../config/ecosystem";
+
+interface Values {
+    name: string;
+    description: string;
+}
+
+interface ILogoImage {
+    logoFile: string | File
+    imagePreviewUrl: string | ArrayBuffer | null | File,
+    fileName: string
+}
+interface EcoValues {
+    name: string;
+    description: string;
+}
+
+interface IProps {
+    openModal: boolean;
+    isorgModal: boolean;
+    setMessage?: (message: string) => void;
+    setOpenModal: (flag: boolean) => void
+}
+
+const CreateEcosystemOrgModal = (props: IProps) => {
+
+    const [logoImage, setLogoImage] = useState<ILogoImage>({
+        logoFile: "",
+        imagePreviewUrl: "",
+        fileName: ''
+    })
+
+    const [loading, setLoading] = useState<boolean>(false)
+    const [formData, setFormData] = useState({
+        name: '',
+        description: '',
+    })
+    const [errMsg, setErrMsg] = useState<string | null>(null)
+
+    const [imgError, setImgError] = useState('')
+
+    const initialFormData = formData
+    useEffect(() => {
+        setFormData({
+            name: '',
+            description: '',
+        })
+        setLogoImage({
+            ...logoImage,
+            logoFile: "",
+            imagePreviewUrl: ""
+        })
+    }, [props.openModal])
+
+
+    const ProcessImg = (e: any): string | undefined => {
+
+        const imgfile = e?.target.files[0]
+        if (!imgfile) { return }
+
+        const imgreader = new FileReader()
+        imgreader.readAsDataURL(imgfile)
+
+        imgreader.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 = imgfile
+                    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, imgfile.type)
+                        const blob = dataURItoBlob(srcEncoded, imgfile.type)
+                        fileUpdated = new File([blob], imgfile.name, { type: imgfile.type, lastModified: new Date().getTime() })
+                        setLogoImage({
+                            logoFile: fileUpdated,
+                            imagePreviewUrl: srcEncoded,
+                            fileName: imgfile.name
+                        })
+                    }
+                }
+            }
+        }
+    }
+
+    const isEmpty = (object: any): boolean => {
+
+        return true
+    }
+    const handleImageChange = (event: any): void => {
+        setImgError('')
+        const reader = new FileReader()
+        const file = event?.target?.files
+
+        const imgfieSize = 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 (imgfieSize <= 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")
+        }
+    }
+
+    const submitCreateOrganization = async (values: Values) => {
+        setLoading(true)
+
+        const orgData = {
+            name: values.name,
+            description: values.description,
+            logo: logoImage?.imagePreviewUrl as string || "",
+            website: ""
+        }
+        const resCreateOrg = await createOrganization(orgData)
+
+        const { data } = resCreateOrg as AxiosResponse
+        setLoading(false)
+
+        if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+            if (props.setMessage) {
+                props.setMessage(data?.message)
+            }
+            props.setOpenModal(false)
+
+        } else {
+            setErrMsg(resCreateOrg as string)
+        }
+    }
+    const submitCreateEcosystem = async (values: EcoValues) => {
+        try {
+            setLoading(true)
+            const orgDetails = await getOrgDetails()
+            const user_data = JSON.parse(await getFromLocalStorage(storageKeys.USER_PROFILE))
+            const ecoData = {
+                name: values.name,
+                description: values.description,
+                logo: logoImage?.imagePreviewUrl as string || "",
+                tags: "",
+                userId: Number(user_data?.id),
+                orgName: orgDetails?.orgName,
+                orgDid: orgDetails?.orgDid
+            }
+            const resCreateEco = await createEcosystems(ecoData)
+
+            const { data } = resCreateEco as AxiosResponse
+            setLoading(false)
+
+            if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+                if (props.setMessage) {
+                    props.setMessage(data?.message)
+                }
+                props.setOpenModal(false)
+            } else {
+                setErrMsg(resCreateEco as string)
+            }
+        }
+        catch (error) {
+            console.error("An error occurred:", error);
+            setLoading(false);
+        }
+    }
+
+
+    const submit = (values: EcoValues | Values) => {
+        if (props.isorgModal) {
+            submitCreateOrganization(values)
+        } else {
+            submitCreateEcosystem(values)
+        }
+
+    }
+
+    const orgErrorMsg = {
+        name: yup
+            .string()
+            .min(2, 'Organization name must be at least 2 characters')
+            .max(50, 'Organization name must be at most 50 characters')
+            .required('Organization 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'),
+    };
+
+    const ecoErrorMsg = {
+        name: yup
+            .string()
+            .min(2, 'Ecosystem name must be at least 2 characters')
+            .max(50, 'Ecosystem name must be at most 50 characters')
+            .required('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'),
+    };
+    const renderEcosystemModal = () => {
+        const popupName = props.isorgModal ? "Organization" : "Ecosystem"
+        return (
+            <Modal show={props.openModal} onClose={() => {
+                setLogoImage({
+                    logoFile: " ",
+                    imagePreviewUrl: " ",
+                    fileName: ' '
+                })
+                setFormData({
+                    name:" ",
+                    description:" "
+                })
+                props.setOpenModal(false)
+            }
+            }>
+                <Modal.Header>Create {popupName}</Modal.Header>
+                <Modal.Body>
+                    <AlertComponent
+                        message={errMsg}
+                        type={'failure'}
+                        onAlertClose={() => {
+                            setErrMsg(null)
+                        }}
+                    />
+                    <Formik
+                        initialValues={formData}
+
+                        validationSchema={yup.object().shape({
+                            name: props.isorgModal ? orgErrorMsg.name : ecoErrorMsg.name,
+                            description: props.isorgModal ? orgErrorMsg.description : ecoErrorMsg.description,
+                        })}
+
+                        validateOnBlur
+                        validateOnChange
+                        enableReinitialize
+                        onSubmit={async (
+                            values: Values,
+                            { resetForm }: FormikHelpers<Values>
+                        ) => {
+                            submit(values)
+                            resetForm();
+
+                        }}
+                    >
+                        {(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"
+                                    >
+                                        {
+                                            typeof (logoImage.logoFile) === "string" ?
+                                                <Avatar
+                                                    size="lg"
+                                                /> :
+                                                <img
+                                                    className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
+                                                    src={typeof (logoImage.logoFile) === "string" ? asset('images/users/bonnie-green-2x.png') : URL.createObjectURL(logoImage.logoFile)}
+                                                    alt="Jese picture"
+                                                />
+                                        }
+
+                                        <div>
+                                            <h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
+                                                {popupName} 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="organizationlogo">
+                                                        <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="organizationlogo" 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 || 'No File Chosen'}</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 ${popupName} Name`} />
+                                    {
+                                        (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 ${popupName} Description`} />
+                                    {
+                                        (formikHandlers?.errors?.description && formikHandlers?.touched?.description) &&
+                                        <span className="text-red-500 text-xs">{formikHandlers?.errors?.description}</span>
+                                    }
+                                </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'
+
+                                ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
+                                        <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+                                    </svg>
+
+                                    Create
+                                </Button>
+                            </Form>
+                        )}
+
+                    </Formik>
+                </Modal.Body>
+
+            </Modal>
+        )
+    }
+
+    return (
+        <>
+            {renderEcosystemModal()}
+        </>
+
+    )
+
+}
+
+export default CreateEcosystemOrgModal;
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 8d1ee1e12..800f2ab1b 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { Button } from 'flowbite-react';
-import CreateOrgFormModal from "./organization/CreateOrgFormModal.js";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import CreateEcosystemOrgModal from './CreateEcosystemOrgModal';
 
 export default function Dashboard() {
 
@@ -13,7 +13,7 @@ export default function Dashboard() {
         props.setOpenModal(true)
     }
 
-    
+
     return (
         <div className="px-4 pt-6">
             <div>
@@ -31,9 +31,11 @@ export default function Dashboard() {
 
                     {
                         props.openModal &&
-                        <CreateOrgFormModal 
-                    openModal={props.openModal}
-                    setOpenModal= {props.setOpenModal} />
+                        <CreateEcosystemOrgModal
+                            openModal={props.openModal}
+                            setOpenModal={props.setOpenModal}
+                            isorgModal={true}
+                        />
                     }
                 </div>
             </div>
diff --git a/src/components/Ecosystem/Dashboard.tsx b/src/components/Ecosystem/Dashboard.tsx
new file mode 100644
index 000000000..c4600b5c2
--- /dev/null
+++ b/src/components/Ecosystem/Dashboard.tsx
@@ -0,0 +1,517 @@
+import type { IEcosystem } from './interfaces';
+import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
+import { useEffect, useState } from 'react';
+import { Features } from '../../utils/enums/features';
+import type { AxiosResponse } from 'axios';
+import BreadCrumbs from '../BreadCrumbs';
+import CustomAvatar from '../Avatar';
+import CustomSpinner from '../CustomSpinner';
+import endorseIcon from '../../assets/endorser-icon.svg';
+import memberIcon from '../../assets/member-icon.svg';
+import MemberList from './MemberList';
+import { getEcosystem, getEcosystemDashboard } from '../../api/ecosystem';
+import { EmptyListMessage } from '../EmptyListComponent';
+import CreateEcosystemOrgModal from '../CreateEcosystemOrgModal';
+import { AlertComponent } from '../AlertComponent';
+import {
+    ICheckEcosystem,
+    checkEcosystem,
+    getEcosystemId,
+} from '../../config/ecosystem';
+import { Button, Dropdown } from 'flowbite-react';
+import EditPopupModal from '../EditEcosystemOrgModal';
+import {
+    getFromLocalStorage,
+    removeFromLocalStorage,
+    setToLocalStorage,
+} from '../../api/Auth';
+import { getUserEcosystemInvitations } from '../../api/invitations';
+import { pathRoutes } from '../../config/pathRoutes';
+import type { EcosystemDashboard } from '../organization/interfaces';
+import { dateConversion } from '../../utils/DateConversion';
+import DateTooltip from '../Tooltip';
+import DashboardCard from '../../commonComponents/DashboardCard';
+
+interface IRoleTablet {
+    role: string;
+}
+
+const initialPageState = {
+    pageNumber: 1,
+    pageSize: 10,
+    total: 0,
+};
+
+export const RoleTablet = ({ role }: IRoleTablet) => (
+    <div className="bg-primary-100 text-primary-800 dark:bg-gray-900 dark:text-primary-400 border border-primary-100 dark:border-primary-500 mr-2 px-2.5 py-1 rounded-md m-1">
+        {role}
+    </div>
+);
+
+const Dashboard = () => {
+    const [ecosystemDetails, setEcosystemDetails] = useState<IEcosystem | null>();
+    const [success, setSuccess] = useState<string | null>(null);
+    const [failure, setFailure] = useState<string | null>(null);
+    const [message, setMessage] = useState<string | null>(null);
+    const [loading, setLoading] = useState<boolean | null>(true);
+    const [editOpenModal, setEditOpenModal] = useState<boolean>(false);
+    const [dropdownOpen, setDropdownOpen] = useState(true);
+    const [leadOrg, setLeadOrg] = useState("")
+    const [error, setError] = useState<string | null>(null);
+    const [openModal, setOpenModal] = useState<boolean>(false);
+    const [viewButton, setViewButton] = useState<boolean>(false);
+    const [currentPage, setCurrentPage] = useState(initialPageState);
+    const [isEcosystemLead, setIsEcosystemLead] = useState(false);
+    const [ecosystemDashboard, setEcosystemDashboard] =
+        useState<EcosystemDashboard | null>(null);
+    const [ecosystemDetailsNotFound, setEcosystemDetailsNotFound] =
+        useState(false);
+    const [orgId, setOrgId] = useState('');
+    const [isOrgModal, setIsOrgModal] = useState(false);
+
+    const createEcosystemModel = () => {
+        setOpenModal(true);
+    };
+
+    const EditEcosystemOrgModal = () => {
+        setEditOpenModal(true);
+    };
+
+    const handleEditModalClose = () => {
+        setEditOpenModal(false);
+        setDropdownOpen(false);
+        fetchEcosystemDetails();
+    };
+
+    const getAllEcosystemInvitations = async () => {
+        setLoading(true);
+        const response = await getUserEcosystemInvitations(
+            currentPage.pageNumber,
+            currentPage.pageSize,
+            '',
+        );
+        const { data } = response as AxiosResponse;
+
+        if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+            const totalPages = data?.data?.totalPages;
+
+            const invitationPendingList = data?.data?.invitations.filter(
+                (invitation: { status: string }) => {
+                    return invitation.status === 'pending';
+                },
+            );
+
+            if (invitationPendingList.length > 0) {
+                setMessage(`You have received invitation to join ecosystem `);
+                setViewButton(true);
+            }
+            setCurrentPage({
+                ...currentPage,
+                total: totalPages,
+            });
+        } else {
+            setError(response as string);
+        }
+        setLoading(false);
+    };
+
+    const fetchEcosystemDetails = async () => {
+        setLoading(true);
+        const id = await getFromLocalStorage(storageKeys.ORG_ID);
+        setOrgId(id);
+        if (id) {
+            const response = await getEcosystem(id);
+            const { data } = response as AxiosResponse;
+
+            if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+                const ecosystemData = data?.data[0];
+                if (ecosystemData) {
+                    await setToLocalStorage(storageKeys.ECOSYSTEM_ID, ecosystemData?.id);
+                    const ecosystemOrg =
+                        ecosystemData?.ecosystemOrgs &&
+                        ecosystemData?.ecosystemOrgs.length > 0 &&
+                        ecosystemData?.ecosystemOrgs[0];
+                    setEcosystemDetails({
+                        logoUrl: ecosystemData?.logoUrl,
+                        name: ecosystemData?.name,
+                        description: ecosystemData?.description,
+                        joinedDate:
+                            ecosystemOrg && ecosystemOrg?.createDateTime
+                                ? ecosystemOrg?.createDateTime
+                                : '',
+                        role:
+                            ecosystemOrg && ecosystemOrg?.ecosystemRole?.name
+                                ? ecosystemOrg?.ecosystemRole?.name
+                                : '',
+                    });
+                } else {
+                    await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID);
+                }
+            } else {
+                await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID);
+                setEcosystemDetailsNotFound(true);
+            }
+        }
+        setLoading(false);
+    };
+
+    const fetchEcosystemDashboard = async () => {
+        setLoading(true);
+
+        const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+        const ecosystemId = await getEcosystemId();
+
+        if (ecosystemId && orgId) {
+            const response = await getEcosystemDashboard(ecosystemId, orgId);
+
+            const { data } = response as AxiosResponse;
+
+            if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+                setEcosystemDashboard(data?.data);
+                setLeadOrg(data?.data?.ecosystemLead?.orgName || "")
+            } else {
+                setFailure(response as string);
+                setFailure(response as string);
+                setLoading(false);
+            }
+        }
+        setLoading(false);
+    };
+
+    const checkOrgId = async () => {
+        const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+        if (orgId) {
+            await getAllEcosystemInvitations();
+        }
+    };
+
+    const getDashboardData = async () => {
+        await checkOrgId();
+        await fetchEcosystemDetails();
+        await fetchEcosystemDashboard();
+    };
+
+    const navigateToInvitation = () => {
+        window.location.href = pathRoutes.ecosystem.sentinvitation;
+    };
+
+    useEffect(() => {
+        getDashboardData();
+
+        const checkEcosystemData = async () => {
+            const data: ICheckEcosystem = await checkEcosystem();
+            setIsEcosystemLead(data.isEcosystemLead);
+        };
+        checkEcosystemData();
+    }, []);
+
+    useEffect(() => {
+        setDropdownOpen(!editOpenModal);
+    }, [editOpenModal]);
+
+    return (
+        <div className="px-4 pt-6">
+            <div className="mb-4 col-span-full xl:mb-2">
+                <BreadCrumbs />
+            </div>
+
+            {error ? (
+                <>
+                    {' '}
+                    {(success || failure) && (
+                        <AlertComponent
+                            message={success ?? failure}
+                            type={success ? 'success' : 'failure'}
+                            onAlertClose={() => {
+                                setSuccess(null);
+                                setFailure(null);
+                            }}
+                        />
+                    )}
+                </>
+            ) : (
+                <>
+                    <div className="cursor-pointer">
+                        {
+                            <AlertComponent
+                                message={message || error}
+                                type={
+                                    message
+                                        ? message === 'Ecosystem invitations sent successfully'
+                                            ? 'success'
+                                            : 'warning'
+                                        : 'failure'
+                                }
+                                viewButton={
+                                    message === 'Ecosystem invitations sent successfully'
+                                        ? false
+                                        : true
+                                }
+                                path={pathRoutes.ecosystem.invitation}
+                                onAlertClose={() => {
+                                    setMessage(null);
+                                    setError(null);
+                                }}
+                            />
+                        }
+                    </div>
+
+                    {(success || failure) && (
+                        <AlertComponent
+                            message={success ?? failure}
+                            type={success ? 'success' : 'failure'}
+                            onAlertClose={() => {
+                                setSuccess(null);
+                                setFailure(null);
+                            }}
+                        />
+                    )}
+                </>
+            )}
+
+            {ecosystemDetailsNotFound && (
+                <AlertComponent
+                    message="Ecosystem details not found."
+                    type="failure"
+                    onAlertClose={() => {
+                        setEcosystemDetailsNotFound(false);
+                        setFailure(null);
+                    }}
+                />
+            )}
+
+            {ecosystemDetails ? (
+                <div>
+                    <div
+                        className={`mt-4 flex-wrap items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 ${isEcosystemLead ? 'w-full block' : 'flex'
+                            }`}
+                    >
+                        <div
+                            className={`flex flex-wrap ${!isEcosystemLead ? 'w-full items-start' : 'items-center'
+                                }`}
+                        >
+                            <div className="mr-4">
+                                {ecosystemDetails?.logoUrl ? (
+                                    <CustomAvatar size="80" src={ecosystemDetails?.logoUrl} />
+                                ) : (
+                                    <CustomAvatar size="90" name={ecosystemDetails?.name} />
+                                )}
+                            </div>
+                            {ecosystemDetails ? (
+                                <div className="w-full sm:w-100/22rem min-w-[12rem]">
+                                    <h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
+                                        {ecosystemDetails?.name}
+                                    </h3>
+
+                                    <p className="mb-1 text-base font-normal text-gray-900 dark:text-white">
+                                        {ecosystemDetails?.description}
+                                    </p>
+                                    {!isEcosystemLead ? (
+                                        <div className="text-md font-semibold mt-6">
+                                            <div className="flex">
+                                                <span className="text-[#3D3D3D] dark:text-white min-w-[10rem]">
+                                                    Ecosystem Owner
+                                                </span>
+                                                <span className="dark:text-white">:</span>{' '}
+                                                <span className="text-[#5E5972] dark:text-white ml-2">
+                                                    {leadOrg}
+                                                </span>
+                                            </div>
+                                            <div className="flex">
+                                                <span className="text-[#3D3D3D] dark:text-white min-w-[10rem]">
+                                                    Ecosystem Lead
+                                                </span>{' '}
+                                                <span className="dark:text-white">:</span>
+                                                <span className="text-[#5E5972] dark:text-white ml-2">
+                                                    {leadOrg}
+                                                </span>
+                                            </div>
+                                            <div className="flex">
+                                                <span className="text-[#3D3D3D] dark:text-white min-w-[10rem]">
+                                                    Joined since
+                                                </span>{' '}
+                                                <span className="dark:text-white">:</span>
+                                                <span className="text-[#5E5972] dark:text-white ml-2">
+                                                    <DateTooltip date={ecosystemDetails.joinedDate}>
+                                                        {dateConversion(ecosystemDetails.joinedDate || '')}
+                                                    </DateTooltip>
+                                                </span>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="flex items-center">
+                                            <span className="dark:text-white">Role: </span>{' '}
+                                            <RoleTablet role={ecosystemDetails?.role || ''} />
+                                        </div>
+                                    )}
+                                </div>
+                            ) : (
+                                <CustomSpinner />
+                            )}
+
+                            {!isEcosystemLead && (
+                                <div className="flex items-center ml-auto">
+                                    <span className="dark:text-white">Role: </span>{' '}
+                                    <RoleTablet role={ecosystemDetails?.role || ''} />
+                                </div>
+                            )}
+
+                            {isEcosystemLead && (
+                                <div className="inline-flex items-center ml-auto">
+                                    <Button
+                                        onClick={navigateToInvitation}
+                                        className='text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
+                                    >
+                                        <svg
+                                            className="pr-2"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            width="36"
+                                            height="18"
+                                            fill="none"
+                                            viewBox="0 0 42 24"
+                                        >
+                                            <path
+                                                fill="#fff"
+                                                d="M37.846 0H9.231a3.703 3.703 0 0 0-3.693 3.692v1.385c0 .508.416.923.924.923a.926.926 0 0 0 .923-.923V3.692c0-.184.046-.369.092-.554L17.815 12 7.477 20.861a2.317 2.317 0 0 1-.092-.553v-1.385A.926.926 0 0 0 6.462 18a.926.926 0 0 0-.924.923v1.385A3.703 3.703 0 0 0 9.231 24h28.615a3.703 3.703 0 0 0 3.693-3.692V3.692A3.703 3.703 0 0 0 37.846 0ZM8.862 1.892c.092-.046.23-.046.369-.046h28.615c.139 0 .277 0 .37.046L24.137 13.938a.97.97 0 0 1-1.2 0L8.863 1.893Zm28.984 20.262H9.231c-.139 0-.277 0-.37-.046L19.247 13.2l2.492 2.17a2.67 2.67 0 0 0 1.8.691 2.67 2.67 0 0 0 1.8-.692l2.493-2.169 10.384 8.908c-.092.046-.23.046-.369.046Zm1.846-1.846c0 .184-.046.369-.092.553L29.262 12 39.6 3.138c.046.185.092.37.092.554v16.616ZM2.77 9.692c0-.507.416-.923.923-.923h5.539c.507 0 .923.416.923.923a.926.926 0 0 1-.923.923h-5.54a.926.926 0 0 1-.923-.923Zm6.462 5.539H.923A.926.926 0 0 1 0 14.308c0-.508.415-.923.923-.923h8.308c.507 0 .923.415.923.923a.926.926 0 0 1-.923.923Z"
+                                            />
+                                        </svg>
+                                        Invitations
+                                    </Button>
+                                    {dropdownOpen ? (
+                                        <Dropdown
+                                            label={'test'}
+                                            renderTrigger={() => (
+                                                <svg
+                                                    className="ml-4 w-4 h-4 text-gray-800 cursor-pointer dark:text-white"
+                                                    aria-hidden="true"
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    fill="currentColor"
+                                                    viewBox="0 0 4 15"
+                                                >
+                                                    <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+                                                </svg>
+                                            )}
+                                            dismissOnClick={true}
+                                        >
+                                            <Dropdown.Item
+                                                onClick={() => {
+                                                    EditEcosystemOrgModal();
+                                                }}
+                                            >
+                                                <div>Edit Ecosystem</div>
+                                            </Dropdown.Item>
+                                            {/* <Dropdown.Item>
+                                                <div>Enable/Disable Ecosystem</div>
+                                            </Dropdown.Item> */}
+                                            {/* <Dropdown.Item>
+                                                <div>Manual Registration</div>
+                                            </Dropdown.Item> */}
+                                        </Dropdown>
+                                    ) : (
+                                        <svg
+                                            className="ml-4 w-4 h-4 text-gray-800 cursor-pointer dark:text-white"
+                                            aria-hidden="true"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            fill="currentColor"
+                                            viewBox="0 0 4 15"
+                                        >
+                                            <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+                                        </svg>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                            <div className="mt-4 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="grid w-full grid-cols-1 gap-4 mt-0 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2">
+                                    <DashboardCard
+                                        icon={memberIcon}
+                                        backgroundColor="linear-gradient(279deg, #FFF -18.24%, #2F80ED -0.8%, #1F4EAD 61.45%)"
+                                        label="Member"
+                                        value={ecosystemDashboard?.membersCount ?? 0}
+                                    />
+                                    <DashboardCard
+                                        icon={endorseIcon}
+                                        backgroundColor="linear-gradient(279deg, #FFF -15.85%, #40F683 22.4%, #22C55E 59.86%)"
+                                        label="Endorsements"
+                                        value={ecosystemDashboard?.endorsementsCount ?? 0}
+                                    />
+                                </div>
+                            </div>
+                            <div>
+                                <MemberList />
+                            </div>
+                            <EditPopupModal
+                                openModal={editOpenModal}
+                                setOpenModal={setEditOpenModal}
+                                setMessage={(value) => {
+                                    setSuccess(value);
+                                }}
+                                isOrganization={false}
+                                onEditSuccess={handleEditModalClose}
+                                entityData={ecosystemDetails}
+                            />
+                </div>
+            ) : (
+                <div>
+                    {!ecosystemDetails && loading ? (
+                        <div className="min-h-100/18rem flex justify-center items-center">
+                            <CustomSpinner />
+                        </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-center mb-4">
+                                <CreateEcosystemOrgModal
+                                    openModal={openModal}
+                                    setOpenModal={setOpenModal}
+                                    setMessage={(value) => {
+                                        setSuccess(value);
+                                        if (isOrgModal && value) {
+                                            setTimeout(() => {
+                                                window.location.reload();
+                                            }, 2000);
+                                        } else {
+                                            getDashboardData();
+                                        }
+                                    }}
+                                    isorgModal={isOrgModal}
+                                />
+                                <EmptyListMessage
+                                    feature={!orgId ? Features.CRETAE_ORG : ''}
+                                    message={'No Ecosystem found'}
+                                    description={`Get started by creating ${!orgId
+                                            ? 'a new Organization to set up your Ecosystem'
+                                            : 'an Ecosystem'
+                                        }`}
+                                    buttonContent={`${!orgId ? '' : 'Create Ecosystem'}`}
+                                    svgComponent={
+                                        <svg
+                                            className="pr-2 mr-1"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            width="24"
+                                            height="15"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                        >
+                                            <path
+                                                fill="#fff"
+                                                d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"
+                                            />
+                                        </svg>
+                                    }
+                                    onClick={() => {
+                                        setIsOrgModal(Boolean(!orgId));
+                                        createEcosystemModel();
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Dashboard;
diff --git a/src/components/Ecosystem/EcosystemSidebarOption.tsx b/src/components/Ecosystem/EcosystemSidebarOption.tsx
new file mode 100644
index 000000000..0fc019aae
--- /dev/null
+++ b/src/components/Ecosystem/EcosystemSidebarOption.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react'
+import { ICheckEcosystem, checkEcosystem } from '../../config/ecosystem'
+import { pathRoutes } from '../../config/pathRoutes'
+import React from 'react';
+
+const EcosystemSidebarOption = () => {
+    const [isEcosystemEnabled, setIsEcosystemEnabled] = useState(false);
+    const [showSubMenus, setShowSubMenus] = useState(true);
+
+    useEffect(() => {
+        const checkEcosystemData = async () => {
+            const data: ICheckEcosystem = await checkEcosystem();
+            setIsEcosystemEnabled(data.isEnabledEcosystem)
+        }
+        checkEcosystemData();
+    }, [])
+
+    if (isEcosystemEnabled) {
+        return (
+            <li>
+                <button
+                    type="button"
+                    className="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                    aria-controls="dropdown-ecosystems"
+                    data-collapse-toggle="dropdown-ecosystems"
+                    onClick={() => setShowSubMenus(!showSubMenus)}
+                >
+                    <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="flex-1 ml-3 text-left whitespace-nowrap"
+                    >
+                        Ecosystem
+                    </span>
+                    <svg
+                        className="w-6 h-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white sidebar-expand-menu-icon"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            fillRule="evenodd"
+                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                            clipRule="evenodd"
+                        />
+                    </svg>
+                </button>
+                {
+                    showSubMenus &&
+                    <ul id="dropdown-ecosystems" className="py-2 space-y-2">
+                        <li>
+                            <a
+                                href={pathRoutes.ecosystem.root}
+                                className="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" className='flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white'>
+                                    <path d="M12.4689 11.226C14.9817 11.226 17.0277 9.17995 17.0277 6.66719C17.0277 4.15443 14.9817 2.10547 12.4689 2.10547C9.95618 2.10547 7.91016 4.15149 7.91016 6.66425C7.91016 9.17701 9.95618 11.226 12.4689 11.226ZM12.4689 3.27966C14.3359 3.27966 15.8535 4.79729 15.8535 6.66425C15.8535 8.53121 14.3359 10.0488 12.4689 10.0488C10.602 10.0488 9.08434 8.53121 9.08434 6.66425C9.08434 4.80023 10.602 3.27966 12.4689 3.27966Z" fill="currentColor" />
+                                    <path d="M20.9984 20.5578V16.7887C20.9984 14.1614 18.8614 12.0273 16.2371 12.0273H8.69883C6.07159 12.0273 3.9375 14.1644 3.9375 16.7887V20.5578C3.9375 20.8807 4.20169 21.1449 4.52459 21.1449H20.4143C20.7372 21.1449 20.9984 20.8807 20.9984 20.5578ZM19.8243 19.9707H5.11169V16.7887C5.11169 14.8102 6.72032 13.2015 8.69883 13.2015H16.2371C18.2156 13.2015 19.8243 14.8102 19.8243 16.7887V19.9707Z" fill="currentColor" />
+                                </svg>
+                                <span className="ml-2">Profile</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a
+                                href={pathRoutes.ecosystem.endorsements}
+                                className="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" className='flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white'>
+                                    <path d="M9.44322 0.737955C7.93853 0.93483 6.58385 2.04577 6.09166 3.48014C5.54791 5.05983 5.95572 6.69577 7.18385 7.86295C9.17135 9.74733 12.4526 9.15202 13.6948 6.6817C13.9526 6.17077 14.0698 5.69264 14.0932 5.03639C14.1307 4.10827 13.962 3.43795 13.4885 2.63639C13.2917 2.30358 12.626 1.62389 12.2557 1.38483C11.4588 0.864517 10.3713 0.616079 9.44322 0.737955ZM10.6573 1.33327C11.3135 1.45983 11.8854 1.75045 12.3963 2.2192C13.1557 2.90827 13.5448 3.7942 13.5448 4.83014C13.5448 6.25514 12.7807 7.46452 11.501 8.0692C10.976 8.31764 10.5776 8.40202 9.95885 8.40202C8.98385 8.39733 8.22447 8.08327 7.51666 7.38483C6.78072 6.65358 6.42447 5.83795 6.41978 4.86764C6.4151 2.61295 8.45416 0.91608 10.6573 1.33327Z" fill="currentColor" stroke="currentColor" stroke-width="0.5" />
+                                    <path d="M8.32933 9.61523C6.39339 9.91055 4.7387 11.1012 3.8762 12.8215C3.63714 13.2949 3.50589 13.6652 3.36058 14.2512C3.27152 14.6309 3.26214 14.8043 3.24808 17.9168C3.22933 21.1652 3.22933 21.184 3.32308 21.2777C3.42152 21.3762 3.45433 21.3762 6.51527 21.3762H9.60902V22.0465C9.60902 22.6746 9.61839 22.7262 9.70745 22.8105C9.8012 22.8949 9.90433 22.8996 11.1981 22.9137C12.07 22.923 12.6418 22.909 12.7168 22.8809C12.8059 22.848 12.8528 22.7871 12.8715 22.6887C12.8903 22.6137 12.9043 22.548 12.909 22.548C12.9184 22.548 13.0778 22.6043 13.27 22.6699C13.7856 22.848 14.77 23.0918 15.3512 23.1855C16.0637 23.3027 17.4184 23.3027 18.07 23.1855C18.7028 23.0684 19.2934 22.8949 19.5465 22.7496C19.8887 22.548 20.2262 22.1684 20.4371 21.7418C20.7325 21.1371 20.7746 20.8465 20.7559 19.473L20.7418 18.3012L20.5637 17.9449C20.3621 17.5324 20.0621 17.2324 19.6496 17.0309C19.3871 16.8996 19.3637 16.8996 18.4121 16.8855L17.4418 16.8715L17.4278 15.6668C17.4137 14.5324 17.4043 14.448 17.3012 14.1902C17.1418 13.7871 16.8043 13.3699 16.4715 13.1496C16.2887 13.0324 16.1528 12.9012 16.1012 12.798C16.059 12.709 15.8856 12.4277 15.7168 12.1746C15.0512 11.1668 13.9778 10.3277 12.8434 9.91523C12.0325 9.62461 11.8309 9.60117 10.1481 9.58242C9.29964 9.57773 8.47933 9.5918 8.32933 9.61523ZM11.559 10.1777C12.9887 10.3746 14.3621 11.209 15.1825 12.3762L15.4262 12.7277L15.1262 12.7559C14.7559 12.7887 14.5965 12.8824 14.4793 13.1402C14.3621 13.4074 14.3668 13.5715 14.5309 14.4199C14.709 15.3199 14.7231 15.8027 14.5778 16.1074C14.3996 16.4684 13.9918 16.6793 13.2934 16.7777C13.0965 16.8059 12.9231 16.8293 12.909 16.8293C12.8996 16.8293 12.8903 16.7918 12.8903 16.7496C12.8903 16.7074 12.8575 16.6324 12.8106 16.5855C12.7403 16.5059 12.6278 16.5012 11.259 16.5012C9.9512 16.5012 9.76839 16.5105 9.69339 16.5809C9.6137 16.6512 9.60902 16.7824 9.60902 18.7371V20.8137H6.70277H3.79652V17.9871C3.8012 15.1277 3.81995 14.7434 3.97933 14.1105C4.50902 12.0809 6.29495 10.4777 8.36683 10.1777C8.77933 10.1168 11.1371 10.1168 11.559 10.1777ZM15.9465 13.4918C16.3075 13.6699 16.5559 13.923 16.7293 14.2934C16.8512 14.5559 16.8512 14.5652 16.8746 15.9246C16.8934 17.1293 16.9075 17.3027 16.9778 17.373C17.0481 17.4434 17.1934 17.4527 18.1731 17.4574L19.2887 17.4621L19.509 17.5887C19.809 17.7668 20.0528 18.0668 20.1371 18.3668C20.1981 18.573 20.2075 18.8262 20.1934 19.773C20.17 21.0809 20.1418 21.2262 19.8043 21.7277C19.5653 22.084 19.2981 22.2855 18.9043 22.4074C17.2637 22.9137 15.4543 22.8199 13.3825 22.1121L12.9137 21.9527L12.8996 19.6746L12.8903 17.3965L13.1106 17.3684C14.0903 17.2512 14.6762 16.9934 14.9668 16.5527C15.2856 16.0746 15.3184 15.5074 15.0981 14.373C14.9481 13.6277 14.9246 13.4027 14.9903 13.3418C15.009 13.323 15.1637 13.3137 15.3325 13.323C15.5575 13.3324 15.7168 13.3793 15.9465 13.4918ZM12.3278 19.7121V22.3605H11.2496H10.1715V19.7121V17.0637H11.2496H12.3278V19.7121Z" fill="currentColor" stroke="currentColor" stroke-width="0.5" />
+                                </svg>
+                                <span className="ml-2">Endorsements</span>
+                            </a>
+                        </li>
+                    </ul>
+                }
+            </li>
+        )
+    }
+
+    return <></>
+}
+
+export default EcosystemSidebarOption
\ No newline at end of file
diff --git a/src/components/Ecosystem/Endorsement/EndorsementCard.tsx b/src/components/Ecosystem/Endorsement/EndorsementCard.tsx
new file mode 100644
index 000000000..2c4e5678f
--- /dev/null
+++ b/src/components/Ecosystem/Endorsement/EndorsementCard.tsx
@@ -0,0 +1,167 @@
+import { Card } from 'flowbite-react';
+import { dateConversion } from '../../../utils/DateConversion';
+import DateTooltip from '../../../components/Tooltip';
+import { EndorsementStatus, EndorsementType } from '../../../common/enums';
+import StatusTabletTag from '../../../commonComponents/StatusTabletTag';
+import { ICheckEcosystem, checkEcosystem } from '../../../config/ecosystem';
+import { useEffect, useState } from 'react';
+
+interface IProps {
+    data: any,
+    fromEndorsementList?: boolean,
+    cardTransitionDisabled?: boolean
+    allAttributes?: boolean
+    onClickCallback?: (data: any) => void;
+}
+
+const EndorsementCard = ({ fromEndorsementList, data, onClickCallback, cardTransitionDisabled, allAttributes }: IProps) => {
+    const [isEcosystemLead, setIsEcosystemLead] = useState(false);
+    const isSchema = data?.type === EndorsementType.schema
+
+    useEffect(() => {
+        const checkEcosystemData = async () => {
+            const data: ICheckEcosystem = await checkEcosystem();
+            setIsEcosystemLead(data.isEcosystemLead)
+        }
+        checkEcosystemData();
+    }, [])
+
+    const getAttributes = () => {
+        try {
+            switch (true) {
+                case isSchema:
+                    if (requestData?.attr_names && requestData?.attr_names.length > 0) {
+                        if (allAttributes) {
+                            return requestData?.attr_names
+                        }
+                        return requestData?.attr_names?.slice(0, 3)
+                    }
+                    return []
+                case !isSchema:
+                    if (data?.requestBody && data?.requestBody?.schemaDetails && data?.requestBody?.schemaDetails?.attributes && data?.requestBody?.schemaDetails?.attributes.length > 0) {
+                        if (allAttributes) {
+                            return data?.requestBody?.schemaDetails?.attributes
+                        }
+                        return data?.requestBody?.schemaDetails?.attributes?.slice(0, 3)
+                    }
+                    return []
+                default:
+                    return []
+            }
+        } catch (err) {
+            console.log("Attribute Error::", err)
+        }
+    }
+
+    const enableAction = (!fromEndorsementList && data?.status === EndorsementStatus.signed) || Boolean(fromEndorsementList)
+
+    const requestPayload = data?.requestPayload && JSON.parse(data?.requestPayload)
+
+    const requestData = isSchema ? requestPayload?.operation?.data : requestPayload?.operation
+    const attributesData = getAttributes()
+
+    return (
+        <Card onClick={() => {
+            if (enableAction && onClickCallback) {
+                onClickCallback(data)
+            }
+        }}
+id="schema-cards"
+className={`${cardTransitionDisabled ? "" : "transform transition duration-500 hover:scale-105 hover:bg-gray-50 min-[w-320px]: cursor-default"}  ${enableAction && "lg:cursor-pointer cursor-default" }${ cardTransitionDisabled ? "cursor-default" : "lg:cursor-not-allowed cursor-default"} ${cardTransitionDisabled && "shadow-none"} m-3 h-full`}
+        >
+            <div className="flex justify-between items-start">
+            <div className='min-w-[6rem] max-w-100/13rem'>
+                    <h5 className="text-xl font-bold leading-[1.1] text-gray-900 dark:text-white break-words truncate line-clamp-2 max-h-[43px] whitespace-normal" style={{ display: "-webkit-box" }}>
+                        {isSchema ? requestData?.name : requestData?.tag}
+                    </h5>
+                    {
+                        isSchema &&
+                        <p className='dark:text-white'>
+                            Version: {requestData?.version}
+                        </p>
+                    }
+                </div>
+                <div className='float-right ml-auto'>
+                    <p className='dark:text-white'>
+                        <DateTooltip date={data?.createDateTime}>
+                            Requested: {dateConversion(data?.createDateTime)}
+                        </DateTooltip >
+                    </p >
+                </div >
+            </div >
+            <div className='flex flex-wrap justify-between items-center'>
+                {
+                    data?.status &&
+                    <div className='flex items-center mt-3 mr-2'>
+                        <div className='dark:text-white'>
+                            Status:
+                        </div>
+                        <div className='ml-4'>
+                            <StatusTabletTag status={data?.status} />
+                        </div>
+                    </div>
+                }
+                <div className={`${isSchema ? "text-primary-700 bg-primary-100" : "bg-green-100 text-green-800"} w-fit py-1.5 px-3 rounded-md text-sm h-fit mt-3`}>
+                    {isSchema ? "Schema" : "Credential Definition"}
+                </div>
+            </div>
+            < div className="min-w-0 flex-none" >
+                {!isSchema &&
+                    <>
+                        <p className="truncate text-sm font-medium text-gray-900 dark:text-white pb-2">
+                            <span className="font-semibold">Schema Name:</span> {data?.requestBody?.schemaDetails?.name || "-"}
+                        </p>
+                        <p className="truncate text-sm font-medium text-gray-900 dark:text-white pb-2">
+                            <span className="font-semibold">Schema Version:</span> {data?.requestBody?.schemaDetails?.version || "-"}
+                        </p>
+                    </>
+                }
+                <p className="truncate text-sm font-medium text-gray-900 dark:text-white pb-2">
+                    <span className="font-semibold">Author DID:</span> {data?.authorDid}
+                </p>
+                <p className="truncate text-sm font-medium text-gray-900 dark:text-white pb-2">
+                    <span className="font-semibold">Endorser DID:</span> {data?.endorserDid}
+                </p>
+                <p className="truncate text-sm font-medium text-gray-900 dark:text-white pb-2">
+                    <span className="font-semibold">Ledger:</span> {data?.authorDid ? data?.authorDid?.split(":")[2] : "-"}
+                </p>
+                {isEcosystemLead &&
+                    <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
+                        <span className="font-semibold">Organization:</span> {data?.ecosystemOrgs?.orgName}
+                    </p>
+                }
+            </div>
+            {attributesData && attributesData.length > 0 &&
+                <div className="flow-root mt-auto">
+                    <ul className="divide-y divide-gray-200 dark:divide-gray-700">
+                        <li className="">
+                            <div className="flex items-center space-x-4">
+                                <div className="block text-base font-semibold text-gray-900 dark:text-white">
+                                    Attributes:
+                                </div>
+                                <div className="flex flex-wrap items-start overflow-hidden overflow-ellipsis">
+
+                                    {attributesData.map((element: string | { attributeName: string }) => {
+                                        const attribute = typeof element === "string" ? element : element?.attributeName
+                                        return (
+                                            <div key={`schema-card-attributes${attribute}`}>
+                                                <span
+                                                    style={{ display: 'block' }}
+                                                    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"
+                                                >
+                                                    {attribute}
+                                                </span>
+                                            </div>
+                                        )
+                                    })}
+                                    {!allAttributes && attributesData.length === 3 && <span>...</span>}
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            }
+        </Card >
+    )
+}
+export default EndorsementCard
diff --git a/src/components/Ecosystem/Endorsement/EndorsementPopup.tsx b/src/components/Ecosystem/Endorsement/EndorsementPopup.tsx
new file mode 100644
index 000000000..83c4137d4
--- /dev/null
+++ b/src/components/Ecosystem/Endorsement/EndorsementPopup.tsx
@@ -0,0 +1,280 @@
+import { Button, Modal, Spinner } from 'flowbite-react';
+import { EndorsementStatus, EndorsementType } from '../../../common/enums';
+import {
+	ICheckEcosystem,
+	checkEcosystem,
+	getEcosystemId,
+} from '../../../config/ecosystem';
+import EndorsementCard from './EndorsementCard';
+import { useEffect, useState } from 'react';
+import { apiStatusCodes, storageKeys } from '../../../config/CommonConstant';
+import { RejectEndorsementRequest, SignEndorsementRequest, SubmitEndorsementRequest } from '../../../api/ecosystem';
+import type { AxiosResponse } from 'axios';
+import { AlertComponent } from '../../AlertComponent';
+import { getFromLocalStorage } from '../../../api/Auth';
+
+const EndorsementPopup = (props: {
+	openModal: boolean;
+	closeModal: () => void;
+	isAccepted: (flag: boolean) => void;
+	setMessage: (message: string) => void;
+	endorsementData: any;
+	onAlertClose: boolean;
+}) => {
+	const [loading, setLoading] = useState<boolean>(false);
+	const [loadingReject, setLoadingReject] = useState<boolean>(false);
+	const [errMsg, setErrMsg] = useState<string | null>(null);
+	const [isEcosystemData, setIsEcosystemData] = useState<ICheckEcosystem>();
+
+	useEffect(() => {
+		const checkEcosystemData = async () => {
+			const data: ICheckEcosystem = await checkEcosystem();
+			setIsEcosystemData(data);
+		};
+		checkEcosystemData();
+	}, []);
+
+	useEffect(() => {
+		props.setMessage("");
+	}, [props.onAlertClose]);
+
+	const SignEndorsement = async (endorsementId: string) => {
+		try {
+			setLoading(true);
+			const organizationId = await getFromLocalStorage(storageKeys.ORG_ID);
+			const ecoId = await getEcosystemId();
+			const SignEndorsementrequest = await SignEndorsementRequest(
+				ecoId,
+				organizationId,
+				endorsementId,
+			);
+
+			const response = SignEndorsementrequest as AxiosResponse;
+			if (response?.data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+				props.isAccepted(true);
+				props.setMessage(response?.data.message);
+			} else {
+				setErrMsg(response as unknown as string);
+			}
+			setLoading(false);
+		} catch (error) {
+			setLoading(false);
+			console.error('Error while Sign schema:', error);
+		}
+	};
+
+	const SubmitEndorsement = async (endorsementId: string) => {
+		try {
+			setLoading(true);
+			const organizationId = await getFromLocalStorage(storageKeys.ORG_ID);
+			const ecoId = await getEcosystemId();
+			const SubmitEndorsementrequest = await SubmitEndorsementRequest(
+				ecoId,
+				organizationId,
+				endorsementId,
+			);
+
+			const response = SubmitEndorsementrequest as AxiosResponse;
+			if (response?.data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+				props.isAccepted(true);
+				props.setMessage(response?.data.message);
+			} else {
+				setErrMsg(response as unknown as string);
+			}
+			setLoading(false);
+		} catch (error) {
+			setLoading(false);
+			console.error('Error while Submit schema:', error);
+		}
+	};
+
+	const RejectEndorsement = async (endorsementId: string) => {
+		try {
+			setLoadingReject(true);
+			const organizationId = await getFromLocalStorage(storageKeys.ORG_ID);
+			const ecoId = await getEcosystemId();
+			const RejectEndorsementrequest = await RejectEndorsementRequest(
+				ecoId,
+				organizationId,
+				endorsementId,
+			);
+
+			const response = RejectEndorsementrequest as AxiosResponse;
+			if (response?.data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+				props.isAccepted(true);
+				props.setMessage(response?.data.message);
+			} else {
+				setErrMsg(response as unknown as string);
+			}
+			setLoadingReject(false);
+		} catch (error) {
+			setLoadingReject(false);
+			console.error('Error while Reject schema:', error);
+		}
+	};
+
+	return (
+		<Modal
+		className='h-full'
+		 show={props.openModal} onClose={() => {
+			props.closeModal()
+			setErrMsg(null)
+		}} size="xl">
+			<Modal.Header>
+				{isEcosystemData?.isEcosystemLead ? (
+					<div>Requested {props.endorsementData?.type === EndorsementType.credDef ? "Credential Definition" : "Schema" }</div>
+				) : (
+					<div>View {props.endorsementData?.type === EndorsementType.credDef ? "Credential Definition" : "Schema"}</div>
+				)}
+			</Modal.Header>
+			<div className="mt-3 mx-3 -mb-3">
+				<AlertComponent
+					message={errMsg}
+					type={'failure'}
+					onAlertClose={() => {
+						setErrMsg(null);
+					}}
+				/>
+			</div>
+			<EndorsementCard
+				cardTransitionDisabled={true}
+				data={props.endorsementData}
+				allAttributes={true}
+			/>
+
+			<div className="justify-between">
+				<div className="flex justify-end">
+					{isEcosystemData?.isEcosystemLead &&
+						props.endorsementData?.status === EndorsementStatus.requested ? (
+						<div className="flex gap-3 pt-1 pb-3">
+							<button
+								onClick={() => RejectEndorsement(props.endorsementData.id)}
+								disabled={loadingReject}
+								className="hover:bg-secondary-700  !ring-2 dark:text-white text-primary-700 font-medium rounded-lg text-sm dark:hover:text-primary-700 "
+							>
+								<span className='flex items-center rounded-md text-sm px-4 py-2'>
+									{
+										loadingReject &&
+										<Spinner
+											className='mr-2'
+											color={'info'}
+											size={'md'}
+
+										/>
+									}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="24"
+										height="24"
+										viewBox="0 0 24 24"
+										fill="none"
+									>
+										<path
+											d="M20.4848 3.51515C18.2172 1.24747 15.2071 0 12 0C8.79293 0 5.78283 1.24747 3.51515 3.51515C1.24747 5.78283 0 8.79293 0 12C0 15.2071 1.24747 18.2172 3.51515 20.4848C5.78283 22.7525 8.79293 24 12 24C15.2071 24 18.2172 22.7525 20.4848 20.4848C22.7525 18.2172 24 15.2071 24 12C24 8.79293 22.7525 5.78283 20.4848 3.51515ZM19.5202 19.5202C17.5101 21.5303 14.8384 22.6364 12 22.6364C9.16162 22.6364 6.4899 21.5303 4.4798 19.5202C0.333333 15.3737 0.333333 8.62626 4.4798 4.4798C6.4899 2.4697 9.16162 1.36364 12 1.36364C14.8384 1.36364 17.5101 2.4697 19.5202 4.4798C23.6667 8.62626 23.6667 15.3737 19.5202 19.5202Z"
+											fill="#1F4EAD"
+										/>
+										<path
+											d="M17.2882 6.71248C17.0206 6.4448 16.5913 6.4448 16.3236 6.71248L12.0004 11.0357L7.67712 6.71248C7.40945 6.4448 6.98015 6.4448 6.71248 6.71248C6.4448 6.98015 6.4448 7.40945 6.71248 7.67712L11.0357 12.0004L6.71248 16.3236C6.4448 16.5913 6.4448 17.0206 6.71248 17.2882C6.84379 17.4195 7.02056 17.4903 7.19227 17.4903C7.36399 17.4903 7.54076 17.4246 7.67207 17.2882L11.9953 12.965L16.3185 17.2882C16.4499 17.4195 16.6266 17.4903 16.7983 17.4903C16.9751 17.4903 17.1468 17.4246 17.2781 17.2882C17.5458 17.0206 17.5458 16.5913 17.2781 16.3236L12.965 12.0004L17.2882 7.67712C17.5559 7.40945 17.5559 6.98015 17.2882 6.71248Z"
+											fill="#1F4EAD"
+										/>
+									</svg>
+									<span className="ml-2 mr-2">Reject</span>
+								</span>
+							</button>
+
+							<Button
+								isProcessing={loading}
+								color="bg-primary-800"
+								disabled={loading}
+								className="text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 mr-3"
+								onClick={() => {
+									SignEndorsement(props.endorsementData.id);
+								}}
+							>
+								<svg
+									className="h-8 w-8 text-white"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth="1"
+										d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+								<span className='ml-2 mr-2'>
+									Accept
+								</span>
+							</Button>
+						</div>
+					) : (
+						<>
+							{!isEcosystemData?.isEcosystemLead &&
+								isEcosystemData?.isEcosystemMember &&
+								props.endorsementData?.status === EndorsementStatus.signed ? (
+								<div className="flex gap-3 pt-1 pb-3">
+									<Button
+										isProcessing={loading}
+										color="bg-primary-800"
+										disabled={loading}
+										className="text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 mr-3"
+										onClick={() => {
+											SubmitEndorsement(props.endorsementData.id);
+										}}
+									>
+										<svg
+											className="h-8 w-8 text-white"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												strokeWidth="1"
+												d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+											/>
+										</svg>
+										<span className='ml-2 mr-2'>
+											Submit
+										</span>
+									</Button>
+								</div>
+							) : (
+								<div className="flex gap-3 pt-1 pb-3 mr-3">
+									<Button
+										onClick={() => props.closeModal()}
+										class="text-primary-700 hover:bg-secondary-700 bg-transparent ring-2 font-medium rounded-lg text-sm dark:text-white dark:hover:text-primary-700 "
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="24"
+											height="24"
+											viewBox="0 0 24 24"
+											fill="none"
+										>
+											<path
+												d="M20.4848 3.51515C18.2172 1.24747 15.2071 0 12 0C8.79293 0 5.78283 1.24747 3.51515 3.51515C1.24747 5.78283 0 8.79293 0 12C0 15.2071 1.24747 18.2172 3.51515 20.4848C5.78283 22.7525 8.79293 24 12 24C15.2071 24 18.2172 22.7525 20.4848 20.4848C22.7525 18.2172 24 15.2071 24 12C24 8.79293 22.7525 5.78283 20.4848 3.51515ZM19.5202 19.5202C17.5101 21.5303 14.8384 22.6364 12 22.6364C9.16162 22.6364 6.4899 21.5303 4.4798 19.5202C0.333333 15.3737 0.333333 8.62626 4.4798 4.4798C6.4899 2.4697 9.16162 1.36364 12 1.36364C14.8384 1.36364 17.5101 2.4697 19.5202 4.4798C23.6667 8.62626 23.6667 15.3737 19.5202 19.5202Z"
+												fill="#1F4EAD"
+											/>
+											<path
+												d="M17.2882 6.71248C17.0206 6.4448 16.5913 6.4448 16.3236 6.71248L12.0004 11.0357L7.67712 6.71248C7.40945 6.4448 6.98015 6.4448 6.71248 6.71248C6.4448 6.98015 6.4448 7.40945 6.71248 7.67712L11.0357 12.0004L6.71248 16.3236C6.4448 16.5913 6.4448 17.0206 6.71248 17.2882C6.84379 17.4195 7.02056 17.4903 7.19227 17.4903C7.36399 17.4903 7.54076 17.4246 7.67207 17.2882L11.9953 12.965L16.3185 17.2882C16.4499 17.4195 16.6266 17.4903 16.7983 17.4903C16.9751 17.4903 17.1468 17.4246 17.2781 17.2882C17.5458 17.0206 17.5458 16.5913 17.2781 16.3236L12.965 12.0004L17.2882 7.67712C17.5559 7.40945 17.5559 6.98015 17.2882 6.71248Z"
+												fill="#1F4EAD"
+											/>
+										</svg>
+
+										<span className="ml-2 mr-2">Close</span>
+									</Button>
+								</div>
+							)}
+						</>
+					)}
+				</div>
+			</div>
+		</Modal >
+	);
+};
+
+export default EndorsementPopup;
diff --git a/src/components/Ecosystem/Endorsement/index.tsx b/src/components/Ecosystem/Endorsement/index.tsx
new file mode 100644
index 000000000..0ad712257
--- /dev/null
+++ b/src/components/Ecosystem/Endorsement/index.tsx
@@ -0,0 +1,378 @@
+'use client';
+
+import { Alert, Pagination } from 'flowbite-react';
+import { ChangeEvent, useEffect, useState } from 'react';
+import { apiStatusCodes, storageKeys } from '../../../config/CommonConstant';
+import EndorsementPopup from './EndorsementPopup';
+import type { AxiosResponse } from 'axios';
+import BreadCrumbs from '../../BreadCrumbs';
+import CustomSpinner from '../../CustomSpinner';
+import { EmptyListMessage } from '../../EmptyListComponent';
+import SearchInput from '../../SearchInput';
+import { getFromLocalStorage } from '../../../api/Auth';
+import { pathRoutes } from '../../../config/pathRoutes';
+import { getOrganizationById } from '../../../api/organization';
+import {
+	ICheckEcosystem,
+	checkEcosystem,
+	getEcosystemId,
+} from '../../../config/ecosystem';
+import type { IAttributes } from '../../Resources/Schema/interfaces';
+import EndorsementCard from './EndorsementCard';
+import {
+	GetEndorsementListParameter,
+	getEndorsementList,
+} from '../../../api/ecosystem';
+import { EndorsementStatus, EndorsementType } from '../../../common/enums';
+import { AlertComponent } from '../../AlertComponent';
+import { Features } from '../../../utils/enums/features';
+
+interface ISelectedRequest {
+	attribute: IAttributes[];
+	issuerDid: string;
+	createdDate: string;
+	schemaId: string;
+}
+
+interface IEndorsementList {
+	id: string;
+	endorserDid: string;
+	authorDid: string;
+	status: string;
+	type: string;
+	ecosystemOrgs: {
+		orgId: number;
+	};
+	requestPayload: string;
+	responsePayload: string;
+	createDateTime: string;
+}
+
+const EndorsementList = () => {
+	const [schemaList, setSchemaList] = useState<IEndorsementList[]>([]);
+	const [schemaListErr, setSchemaListErr] = useState<string | null>('');
+	const [loading, setLoading] = useState<boolean>(true);
+	const [alertClose, setAlertClose] = useState<boolean>(true);
+	const [orgId, setOrgId] = useState<string>('');
+	const [endorsementListAPIParameter, setEndorsementListAPIParameter] =
+		useState({
+			itemPerPage: 9,
+			page: 1,
+			search: '',
+			sortBy: 'id',
+			sortingOrder: 'DESC',
+			type: '',
+			status: '',
+		});
+	const [totalPages, setTotalPages] = useState(0);
+	const [walletStatus, setWalletStatus] = useState(false);
+	const [showPopup, setShowPopup] = useState(false);
+	const [selectedRequest, setSelectedRequest] = useState<ISelectedRequest>();
+	const [isEcosystemLead, setIsEcosystemLead] = useState(false);
+	const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+	const options = [
+		{
+			name: 'Select Status',
+			value: '',
+		},
+		{
+			name: 'Accepted',
+			value: EndorsementStatus.signed,
+		},
+		{
+			name: 'Requested',
+			value: EndorsementStatus.requested,
+		},
+		{
+			name: 'Rejected',
+			value: EndorsementStatus.rejected,
+		},
+		{
+			name: 'Submitted',
+			value: EndorsementStatus.submited,
+		},
+	];
+
+	const typeOptions = [
+		{
+			name: 'Select Type',
+			value: '',
+		},
+		{
+			name: 'Schema',
+			value: EndorsementType.schema,
+		},
+		{
+			name: 'Credential-definition',
+			value: EndorsementType.credDef,
+		},
+	];
+
+	const getEndorsementListData = async (
+		endorsementListAPIParameter: GetEndorsementListParameter,
+	) => {
+		try {
+			const organizationId = await getFromLocalStorage(storageKeys.ORG_ID);
+			setOrgId(organizationId);
+			const id = await getEcosystemId();
+			if (id && organizationId) {
+				const endorsementList = await getEndorsementList(
+					endorsementListAPIParameter,
+					organizationId,
+					id,
+				);
+
+				const { data } = endorsementList as AxiosResponse;
+
+				if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+					if (data?.data?.transactions) {
+						setSchemaList(data?.data?.transactions);
+						setTotalPages(data?.data?.totalPages);
+						setLoading(false);
+					} else {
+						setLoading(false);
+					}
+				} else {
+					setLoading(false);
+				}
+			}
+		} catch (error) {
+			console.error('Error while fetching schema list:', error);
+		}
+	};
+
+	const onPageChange = (page: number) => {
+		setEndorsementListAPIParameter({
+			...endorsementListAPIParameter,
+			page,
+		});
+	};
+
+	useEffect(() => {
+		getEndorsementListData(endorsementListAPIParameter);
+	}, [endorsementListAPIParameter]);
+
+	const onSearch = async (
+		event: ChangeEvent<HTMLInputElement>,
+	): Promise<void> => {
+		event.preventDefault();
+		setEndorsementListAPIParameter({
+			...endorsementListAPIParameter,
+			search: event.target.value,
+		});
+	};
+
+	const requestSelectionCallback = (data: any) => {
+		setSelectedRequest(data);
+		setShowPopup(true);
+	};
+
+	const handleFilter = (
+		e: React.ChangeEvent<HTMLSelectElement>,
+		filter: 'typeFilter' | 'statusFilter',
+	) => {
+		const updateFilter = endorsementListAPIParameter;
+		if (filter === 'typeFilter') {
+			updateFilter['type'] = e.target.value;
+		}
+		if (filter === 'statusFilter') {
+			updateFilter['status'] = e.target.value;
+		}
+		setEndorsementListAPIParameter(updateFilter);
+		getEndorsementListData(updateFilter);
+	};
+
+	const fetchOrganizationDetails = async () => {
+		setLoading(true);
+		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+		const response = await getOrganizationById(orgId);
+		const { data } = response as AxiosResponse;
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			if (data?.data?.org_agents && data?.data?.org_agents?.length > 0) {
+				setWalletStatus(true);
+			}
+		}
+		setLoading(false);
+	};
+
+	const hidePopup = () => {
+		setShowPopup(false);
+	};
+
+	useEffect(() => {
+		fetchOrganizationDetails();
+
+		const checkEcosystemData = async () => {
+			const data: ICheckEcosystem = await checkEcosystem();
+			setIsEcosystemLead(data.isEcosystemLead);
+		};
+		checkEcosystemData();
+	}, []);
+
+	return (
+		<div className="px-4 pt-6">
+			<div className="mb-4 col-span-full xl:mb-2">
+				<BreadCrumbs />
+				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
+					Endorsements
+				</h1>
+			</div>
+			<div>
+				<div>
+					<div className="flex flex-col items-center justify-between mb-4 pr-4 sm:flex-row">
+						<div
+							id="schemasSearchInput"
+							className="mb-2 pl-0 sm:pl-2 flex space-x-2 items-end"
+						>
+							<SearchInput onInputChange={onSearch} />
+							<select
+								onChange={(e) => handleFilter(e, 'statusFilter')}
+								id="statusfilter"
+								className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-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-blue-500 dark:focus:border-blue-500 h-11"
+							>
+								{options.map((opt) => (
+									<option key={opt.value} className="" value={opt.value}>
+										{opt.name}
+									</option>
+								))}
+							</select>
+							<select
+								onChange={(e) => handleFilter(e, 'typeFilter')}
+								id="typefilter"
+								className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-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-blue-500 dark:focus:border-blue-500 h-11"
+							>
+								{typeOptions.map((opt) => (
+									<option key={opt.value} className="" value={opt.value}>
+										{opt.name}
+									</option>
+								))}
+							</select>
+						</div>
+					</div>
+				</div>
+				{successMessage && (
+					<AlertComponent
+						message={successMessage}
+						type={'success'}
+						onAlertClose={() => setAlertClose(!alertClose)}
+					/>
+				)}
+				{schemaListErr && (
+					<Alert color="failure" onDismiss={() => setSchemaListErr(null)}>
+						<span>
+							<p>{schemaListErr}</p>
+						</span>
+					</Alert>
+				)}
+				{schemaList && schemaList.length > 0 ? (
+					<div
+						className="Flex-wrap"
+						style={{ display: 'flex', flexDirection: 'column' }}
+					>
+						<div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
+							{schemaList.map((item: IEndorsementList) => (
+								<div className="px-0 sm:px-2" key={`endorsement-cards${item.id}`}>
+									<EndorsementCard
+										fromEndorsementList={true}
+										data={item}
+										onClickCallback={requestSelectionCallback}
+									/>
+								</div>
+							))}
+						</div>
+						{
+							totalPages > 1 &&
+							<div
+								className="flex items-center justify-end mb-4"
+								id="schemasPagination"
+							>
+								<Pagination
+									currentPage={endorsementListAPIParameter.page}
+									onPageChange={onPageChange}
+									totalPages={totalPages}
+								/>
+							</div>
+						}
+					</div>
+				) : (
+					<div>
+						{!(schemaList && schemaList.length > 0) && loading ? (
+							<div className="flex items-center justify-center mb-4 min-h-100/25rem">
+								<CustomSpinner />
+							</div>
+						) : (
+							<div>
+								{orgId ? (
+									<EmptyListMessage
+										message={'No Endorsement Requests'}
+										description={"You don't have any endorsement requests"}
+										buttonContent={''}
+										svgComponent={
+											<svg
+												className="pr-2 mr-1"
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="15"
+												fill="none"
+												viewBox="0 0 24 24"
+											>
+												<path
+													fill="#fff"
+													d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"
+												/>
+											</svg>
+										}
+										onClick={() => {
+											window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`;
+										}}
+									/>
+								) : (
+									<EmptyListMessage
+										message={'No Organization'}
+										description={'Get started by creating a Organization'}
+										buttonContent={''}
+										feature={Features.CRETAE_ORG}
+										svgComponent={
+											<svg
+												className="pr-2 mr-1"
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="15"
+												fill="none"
+												viewBox="0 0 24 24"
+											>
+												<path
+													fill="#fff"
+													d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"
+												/>
+											</svg>
+										}
+										onClick={() => {
+											window.location.href = `${pathRoutes.organizations.dashboard}?OrgId=${orgId}`;
+										}}
+									/>
+								)}
+							</div>
+						)}
+					</div>
+				)}
+			</div>
+			<EndorsementPopup
+				openModal={showPopup}
+				closeModal={hidePopup}
+				isAccepted={(flag: boolean) => {
+					if (flag) {
+						getEndorsementListData(endorsementListAPIParameter);
+						setShowPopup(false);
+					}
+				}}
+				onAlertClose={alertClose}
+				endorsementData={selectedRequest}
+				setMessage={setSuccessMessage}
+			/>
+		</div>
+	);
+};
+
+export default EndorsementList;
diff --git a/src/components/Ecosystem/MemberList.tsx b/src/components/Ecosystem/MemberList.tsx
new file mode 100644
index 000000000..43125b5be
--- /dev/null
+++ b/src/components/Ecosystem/MemberList.tsx
@@ -0,0 +1,196 @@
+import { useEffect, useState } from 'react';
+import { getEcosystemMemberList } from '../../api/ecosystem';
+import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
+import type { AxiosResponse } from 'axios';
+import DataTable from '../../commonComponents/datatable';
+import type { TableData } from '../../commonComponents/datatable/interface';
+import DateTooltip from '../Tooltip';
+import { dateConversion } from '../../utils/DateConversion';
+import { AlertComponent } from '../AlertComponent';
+import { Pagination } from 'flowbite-react';
+import { getFromLocalStorage } from '../../api/Auth';
+
+const initialPageState = {
+	pageNumber: 1,
+	pageSize: 10,
+	total: 0,
+};
+
+const MemberList = () => {
+	const [loading, setLoading] = useState<boolean>(false);
+	const [memberList, setMemberList] = useState<TableData[]>([]);
+	const [error, setError] = useState<string | null>(null);
+	const [currentPage, setCurrentPage] = useState(initialPageState);
+
+	const getEcosystemMembers = async () => {
+		const userOrgId = await getFromLocalStorage(storageKeys.ORG_ID);
+		setLoading(true);
+		const response = await getEcosystemMemberList(
+			currentPage.pageNumber,
+			currentPage.pageSize,
+			'',
+		);
+		const { data } = response as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			const totalPages = data?.data?.totalPages;
+
+			const compareMembers = (
+				firstMember: { ecosystemRole: { name: string } },
+				secondMember: { ecosystemRole: { name: string } },
+			) => {
+				const firstName = firstMember?.ecosystemRole?.name;
+				const secondName = secondMember?.ecosystemRole?.name;
+
+				switch (true) {
+					case firstName > secondName:
+						return 1;
+					case secondName > firstName:
+						return -1;
+					default:
+						return 0;
+				}
+			};
+			const sortedMemberList = data?.data?.members?.sort(compareMembers);
+			const membersData = sortedMemberList?.map(
+				(member: {
+					orgId: string;
+					ecosystem: { createDateTime: string };
+					ecosystemRole: { name: string };
+					orgName: string;
+					orgDid: string;
+					role: string;
+					createDateTime: any;
+					status: string;
+				}) => {
+					return {
+						data: [
+							{
+								data: member.orgName || 'Not available',
+							},
+							{
+								data:
+									(
+										<DateTooltip date={member?.createDateTime}>
+											{dateConversion(member?.createDateTime)}{' '}
+										</DateTooltip>
+									) || 'Not available',
+							},
+							{
+								data: member.orgDid ? (
+									<span className="text-sm mr-2 px-2.5 py-1 rounded-md">
+										{member?.orgDid}
+									</span>
+								) : (
+									<span className="text-sm mr-2 px-2.5 py-1 rounded-md">
+										Not available
+									</span>
+								),
+							},
+							{
+								data: member.ecosystemRole.name ? (
+									<span className="text-sm px-2.5 py-1 rounded-md">
+										<span
+											className={`${
+												member.ecosystemRole.name === 'Ecosystem Lead'
+													? 'bg-primary-100 text-primary-800 dark:bg-gray-900 dark:text-primary-400 border border-primary-100 dark:border-primary-500'
+													: 'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border border-green-100 dark:border-green-500'
+											} text-sm font-medium mr-1 px-2.5 py-1 rounded-md`}
+										>
+											{member?.ecosystemRole?.name}
+										</span>
+										{member?.orgId === userOrgId ? '(You)' : ''}
+									</span>
+								) : (
+									'Not available'
+								),
+							},
+							{
+								data: member.status ? (
+									<span
+										className={`${
+											member.status === 'SUSPENDED'
+												? 'bg-red-100 text-red-800 rounded dark:bg-gray-900 dark:text-red-300  border-red-100 dark:border-red-500 border'
+												: 'bg-green-100 text-green-700 dark:bg-gray-700 dark:text-green-400 rounded border border-green-100 dark:border-green-500'
+										} text-sm font-medium mr-2 px-2.5 py-1 rounded-md`}
+									>
+										{member.status.charAt(0) +
+											member.status.slice(1).toLowerCase()}
+									</span>
+								) : (
+									'Not available'
+								),
+							},
+						],
+					};
+				},
+			);
+
+			setMemberList(membersData);
+
+			setCurrentPage({
+				...currentPage,
+				total: totalPages,
+			});
+		} else {
+			setError(response as string);
+		}
+		setLoading(false);
+	};
+
+	const onPageChange = (page: number) => {
+		setCurrentPage({
+			...currentPage,
+			pageNumber: page,
+		});
+	};
+
+	useEffect(() => {
+		getEcosystemMembers();
+	}, []);
+
+	const header = [
+		{ columnName: 'Organization' },
+		{ columnName: 'Member Since' },
+		{ columnName: 'Organization Did', width: 'w-1.5 pl-6' },
+		{ columnName: 'Role', width: 'pl-7' },
+		{ columnName: 'Status' },
+	];
+
+	return (
+		<div
+			id="ecosystem-datable"
+			className="p-4 mt-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 justify-between p-2 mb-4">
+				<h2 className="text-xl dark:text-white font-medium font-body">
+					Ecosystem Members
+				</h2>
+			</div>
+			<AlertComponent
+				message={error}
+				type={'failure'}
+				onAlertClose={() => {
+					setError(null);
+				}}
+			/>
+			<DataTable
+				header={header}
+				data={memberList}
+				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>
+	);
+};
+
+export default MemberList;
diff --git a/src/components/Ecosystem/interfaces/index.ts b/src/components/Ecosystem/interfaces/index.ts
new file mode 100644
index 000000000..bd8f6c334
--- /dev/null
+++ b/src/components/Ecosystem/interfaces/index.ts
@@ -0,0 +1,21 @@
+export interface IEcosystem {
+    name: string
+    description: string
+    logoUrl: string
+    joinedDate?: string
+    role?: string
+}
+
+export interface Ecosystem {
+    id: number
+    createDateTime: string
+    createdBy: number
+    lastChangedDateTime: string
+    lastChangedBy: number
+    name: string
+    description: string
+    logoUrl: string
+    website: string
+    roles: string[] 
+    logoFile:string
+}
\ No newline at end of file
diff --git a/src/components/EcosystemInvite/EcoInvitationList.tsx b/src/components/EcosystemInvite/EcoInvitationList.tsx
new file mode 100644
index 000000000..c53d46b1f
--- /dev/null
+++ b/src/components/EcosystemInvite/EcoInvitationList.tsx
@@ -0,0 +1,76 @@
+interface InvitationProps {
+	invitationId: string;
+	ecosytem: [];
+}
+
+const EcoInvitationList = (props: InvitationProps) => {
+	const { invitationId, ecosytem } = props;
+
+	const { name } = ecosytem;
+
+	return (
+			<div className="flex space-x-4">
+				<svg
+					width="60"
+					height="60"
+					viewBox="0 0 398 398"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<g clip-path="url(#clip0_3892_5729)">
+						<path
+							d="M350.828 117.051V166.651L382.328 143.251L350.828 117.051Z"
+							fill="#6B7280"
+						/>
+						<path
+							d="M217.922 6.9502C206.822 -2.2498 190.722 -2.3498 179.622 6.8502L166.922 17.6502H230.822L217.922 6.9502Z"
+							fill="#6B7280"
+						/>
+						<path
+							d="M228.629 282.451C220.029 288.851 209.629 292.351 198.929 292.251C188.229 292.251 177.729 288.851 169.129 282.451L9.82869 163.551V367.451C9.72869 383.951 23.0287 397.451 39.5287 397.551H358.029C374.529 397.451 387.829 383.951 387.729 367.451V163.551L228.629 282.451Z"
+							fill="#6B7280"
+						/>
+						<path
+							d="M15.3281 143.249L45.8281 165.949V117.949L15.3281 143.249Z"
+							fill="#6B7280"
+						/>
+						<path
+							d="M65.8281 37.6484V180.848L180.828 266.448C191.528 274.248 206.228 274.248 216.928 266.448L330.828 181.548V37.6484H65.8281ZM136.828 117.648H190.828C196.328 117.648 200.828 122.148 200.828 127.648C200.828 133.148 196.328 137.648 190.828 137.648H136.828C131.328 137.648 126.828 133.148 126.828 127.648C126.828 122.148 131.328 117.648 136.828 117.648ZM260.828 187.648H136.828C131.328 187.648 126.828 183.148 126.828 177.648C126.828 172.148 131.328 167.648 136.828 167.648H260.828C266.328 167.648 270.828 172.148 270.828 177.648C270.828 183.148 266.328 187.648 260.828 187.648Z"
+							fill="#6B7280"
+						/>
+					</g>
+					<defs>
+						<clipPath id="clip0_3892_5729">
+							<rect width="397.55" height="397.55" fill="white" />
+						</clipPath>
+					</defs>
+				</svg>
+
+				<div className="flex-1 min-w-0">
+					<p className="text-base font-semibold text-gray-900 leading-none truncate mb-0.5 dark:text-white">
+						{name}
+					</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">
+										Role:{' '}
+										<span
+											key={invitationId}
+											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"
+										>
+											Ecosystem Member
+										</span>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+	);
+};
+
+export default EcoInvitationList;
diff --git a/src/components/EcosystemInvite/EcoSystemInvitation.tsx b/src/components/EcosystemInvite/EcoSystemInvitation.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/EcosystemInvite/EcoSystemReceivedInvitations.tsx b/src/components/EcosystemInvite/EcoSystemReceivedInvitations.tsx
new file mode 100644
index 000000000..85bb62408
--- /dev/null
+++ b/src/components/EcosystemInvite/EcoSystemReceivedInvitations.tsx
@@ -0,0 +1,381 @@
+import { Button, Card, Pagination } from 'flowbite-react';
+import { useEffect, useState } from 'react';
+import {
+	acceptRejectEcosystemInvitations,
+	getUserEcosystemInvitations,
+} from '../../api/invitations';
+import { AlertComponent } from '../AlertComponent';
+import type { AxiosResponse } from 'axios';
+import BreadCrumbs from '../BreadCrumbs';
+import type { Organisation } from '../organization/interfaces';
+import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
+import { pathRoutes } from '../../config/pathRoutes';
+import { EmptyListMessage } from '../EmptyListComponent';
+import CustomSpinner from '../CustomSpinner';
+import { getFromLocalStorage } from '../../api/Auth';
+import { getOrganizationById, getOrganizations } from '../../api/organization';
+import EcoInvitationList from './EcoInvitationList';
+import { getOrgDetails } from '../../config/ecosystem';
+import BackButton from '../../commonComponents/backbutton'
+
+const initialPageState = {
+	pageNumber: 1,
+	pageSize: 10,
+	total: 0,
+};
+
+interface IOrgData {
+	orgDid: string
+	orgName: string
+}
+
+export interface EcosystemInvitation {
+	ecosystem: []
+	id: string
+	createDateTime: string
+	createdBy: number
+	lastChangedDateTime: string
+	lastChangedBy: number
+	deletedAt: any
+	userId: string
+	orgId: string
+	status: string
+	email: string
+	selected?: boolean
+	orgData?: IOrgData
+}
+
+
+const ReceivedInvitations = () => {
+	const [openModal, setOpenModal] = useState<boolean>(false);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [message, setMessage] = useState<string | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [organizationsList, setOrganizationsList] = useState<Array<Organisation> | null>(null);
+	const [currentPage, setCurrentPage] = useState(initialPageState);
+	const [selectedId, setSelectedId] = useState<number>();
+	const [searchText, setSearchText] = useState('');
+	const [invitationsData, setInvitationsData] = useState<Array<EcosystemInvitation> | null>(null);
+	const [getOrgError, setGetOrgError] = useState<string | null>(null);
+
+	const onPageChange = (page: number) => {
+		setCurrentPage({
+			...currentPage,
+			pageNumber: page,
+		});
+	};
+
+	const getAllOrganizationsForEcosystem = async () => {
+		setLoading(true);
+		const response = await getOrganizations(
+			currentPage.pageNumber,
+			currentPage.pageSize,
+			searchText,
+		);
+		const { data } = response as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			const totalPages = data?.data?.totalPages;
+
+			const orgList = data?.data?.organizations.map((userOrg: Organisation) => {
+				const roles: string[] = userOrg.userOrgRoles.map(
+					(role) => role.orgRole.name,
+				);
+				userOrg.roles = roles;
+				return userOrg;
+			});
+
+			setOrganizationsList(orgList);
+			setCurrentPage({
+				...currentPage,
+				total: totalPages,
+			});
+		} else {
+			setError(response as string);
+		}
+		setLoading(false);
+	};
+
+	const getAllInvitations = async () => {
+		setLoading(true);
+		const response = await getUserEcosystemInvitations(
+			currentPage.pageNumber,
+			currentPage.pageSize,
+			searchText,
+		);
+		const { data } = response as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			const totalPages = data?.data?.totalPages;
+
+			const invitationList = data?.data?.invitations?.filter((invitation: { status: string; }) => {
+				return invitation.status === 'pending'
+			})
+			setInvitationsData(invitationList);
+			setCurrentPage({
+				...currentPage,
+				total: totalPages,
+			});
+		} else {
+			setError(response as string);
+		}
+
+		setLoading(false);
+	};
+
+	useEffect(() => {
+		let getData: NodeJS.Timeout;
+		getAllOrganizationsForEcosystem();
+		if (searchText.length >= 1) {
+			getData = setTimeout(() => {
+				getAllInvitations();
+			}, 1000);
+		} else {
+			getAllInvitations();
+		}
+
+		return () => clearTimeout(getData);
+	}, [searchText, openModal, currentPage.pageNumber]);
+
+	const respondToEcosystemInvitations = async (
+		invite: EcosystemInvitation,
+		status: string,
+	) => {
+		try {
+			const orgDid = invite?.orgData?.orgDid || ""
+			const orgName = invite?.orgData?.orgName || ""
+			if (orgDid) {
+				const response = await acceptRejectEcosystemInvitations(
+					invite.id,
+					Number(selectedId),
+					status,
+					orgName,
+					orgDid
+				);
+				setLoading(false)
+				const { data } = response as AxiosResponse;
+				if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+					setMessage(data?.message);
+					getAllInvitations()
+				} else {
+					setError(response as string);
+				}
+			}
+			setLoading(false)
+		} catch (err) {
+			console.log("ERROR - Accept/Reject Ecosystem::", err)
+		}
+	};
+
+	const getSelectedOrgDetails = async (orgId: string): Promise<IOrgData | null> => {
+		try {
+			const response = await getOrganizationById(orgId);
+			const { data } = response as AxiosResponse;
+			const orgData = data?.data
+			if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+				if (orgData.org_agents[0]?.orgDid) {
+					setGetOrgError(null)
+					return {
+						orgDid: orgData.org_agents[0]?.orgDid || "",
+						orgName: orgData.name
+					}
+				} else {
+					setGetOrgError("Please create your wallet for this organization to accept the invitation.")
+					return null
+				}
+			}
+			return null
+		} catch (err) {
+			console.log("ERROR::", err)
+			return null
+		}
+	}
+
+	const handleDropdownChange = async (e: { target: { value: any } }, id: string) => {
+		const value = e.target.value;
+		const orgData: IOrgData | null | undefined = await getSelectedOrgDetails(value)
+		const updateInvitationData = invitationsData && invitationsData.length > 0 ? invitationsData.map((item) => {
+			if (id === item.id) {
+				return {
+					...item,
+					orgId: value,
+					selected: true,
+					orgData: orgData || undefined
+				}
+			}
+			return {
+				...item,
+				selected: false
+			}
+		}) : null
+		setInvitationsData(updateInvitationData)
+		setSelectedId(value);
+	};
+
+	const getOrgId = async () => {
+		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+		if (orgId) {
+			setSelectedId(Number(orgId));
+		}
+	};
+
+	useEffect(() => {
+		getOrgId();
+	}, []);
+
+	const rejectEnv =
+		<svg
+			className="mr-1 h-6 w-6 text-primary-700"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M6 18L18 6M6 6l12 12"
+			/>
+		</svg>
+
+	const acceptEnv = <svg
+		className="mr-1 h-6 w-6 text-white"
+		width="20"
+		height="20"
+		viewBox="0 0 24 24"
+		stroke-width="2"
+		stroke="currentColor"
+		fill="none"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" />
+		<path d="M5 12l5 5l10 -10" />
+	</svg>
+
+	return (
+		<div className="px-4 pt-6">
+			<div className="mb-4 col-span-full xl:mb-2">
+				<div className="flex justify-between items-center">
+					<BreadCrumbs />
+					<BackButton path={pathRoutes.ecosystem.root} />
+				</div>
+				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
+					Received Ecosystem Invitations
+				</h1>
+			</div>
+			<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">
+					<AlertComponent
+						message={message || error}
+						type={message ? 'success' : 'failure'}
+						onAlertClose={() => {
+							setMessage(null);
+							setError(null);
+						}}
+					/>
+
+					{loading ? (
+						<div className="flex items-center justify-center px-12">
+							<CustomSpinner />
+						</div>
+					) : invitationsData && invitationsData?.length > 0 ? (
+						<div id={selectedId?.toString()} className="p-2 mb-4 bg-white 2xl:col-span-2 dark:border-gray-700 sm:p-3 dark:bg-gray-800">
+							<div id={selectedId?.toString()} className="flow-root">
+								<ul id={selectedId?.toString()}>
+									{invitationsData.map((invitation) => (
+										<Card key={invitation.id} className="p-2 mb-4">
+											<div id={invitation.email} className="flex flex-wrap justify-between 2xl:flex align-center">
+												<div id={invitation.email} className=" xl:mb-4 2xl:mb-0">
+													<EcoInvitationList
+														invitationId={invitation.id}
+														ecosytem={invitation.ecosystem}
+													/>
+
+													<div id={invitation.email} className="flex">
+														<Button
+															onClick={() =>
+																respondToEcosystemInvitations(
+																	invitation,
+																	'rejected',
+																)
+															}
+															id={invitation.id}
+															color="bg-white"
+															className='mx-5 mt-5 text-base font-medium text-center text-gray-00 bg-secondary-700 hover:!bg-secondary-800 rounded-lg focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600  dark:focus:ring-primary-800 dark:bg-gray-800"'
+														>
+															{rejectEnv}
+															Reject
+														</Button>
+														<Button
+															onClick={() =>
+																respondToEcosystemInvitations(
+																	invitation,
+																	'accepted',
+																)
+															}
+															disabled={!invitation?.orgData}
+															id={invitation.id}
+															className='mx-5 mt-5 text-base font-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 sm:w-auto dark:bg-primary-700 dark:hover:!bg-primary-800 dark:focus:ring-primary-800"'
+														>
+															{acceptEnv}
+															Accept
+														</Button>
+													</div>
+												</div>
+												<div className='flex items-center h-fit'>
+													<select
+														className="ml-3 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 pl-10 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"
+														id="dropdown"
+														onChange={(e) => handleDropdownChange(e, invitation.id)}
+														value={invitation.orgId || ""}
+													>
+														<option value="">Select Organization</option>
+														{organizationsList &&
+															organizationsList.length > 0 &&
+															organizationsList.map((orgs) => {
+																return (
+																	<option key={orgs.id} value={orgs.id.toString()}>{orgs.name}</option>
+																);
+															})}
+													</select>
+												</div>
+											</div>
+											{
+												invitation.selected &&
+												<AlertComponent
+													message={getOrgError}
+													type={'failure'}
+													onAlertClose={() => {
+														setGetOrgError(null);
+													}}
+												/>
+											}
+										</Card>
+									))}
+								</ul>
+							</div>
+						</div>
+					) : (
+						invitationsData && (
+							<EmptyListMessage
+								message={'No Invitations'}
+								description={`You don't have any invitation`}
+							/>
+						)
+					)}
+
+					{currentPage.total > 1 && <div className="flex items-center justify-end mb-4">
+						<Pagination
+							currentPage={currentPage.pageNumber}
+							onPageChange={onPageChange}
+							totalPages={currentPage.total}
+						/>
+					</div>}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ReceivedInvitations;
diff --git a/src/components/EcosystemInvite/SentInvitations.tsx b/src/components/EcosystemInvite/SentInvitations.tsx
new file mode 100644
index 000000000..8f77d434b
--- /dev/null
+++ b/src/components/EcosystemInvite/SentInvitations.tsx
@@ -0,0 +1,311 @@
+import { Button, Pagination } from 'flowbite-react';
+import { useEffect, useState } from 'react';
+import {
+	getEcosystemInvitations,
+	deleteEcosystemInvitations,
+} from '../../api/invitations';
+import { AlertComponent } from '../AlertComponent';
+import type { AxiosResponse } from 'axios';
+import BreadCrumbs from '../BreadCrumbs';
+import type { Invitation } from '../organization/interfaces/invitations';
+import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
+import { EmptyListMessage } from '../EmptyListComponent';
+import CustomSpinner from '../CustomSpinner';
+import RoleViewButton from '../RoleViewButton';
+import SendInvitationModal from '../organization/invitations/SendInvitationModal';
+import { getFromLocalStorage } from '../../api/Auth';
+import { Features } from '../../utils/enums/features';
+
+const initialPageState = {
+	pageNumber: 1,
+	pageSize: 10,
+	total: 0,
+};
+
+const SentInvitations = () => {
+	const [loading, setLoading] = useState<boolean>(true);
+	const [message, setMessage] = useState<string | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [currentPage, setCurrentPage] = useState(initialPageState);
+	const [searchText, setSearchText] = useState<string>('');
+	const [invitationsList, setInvitationsList] =
+		useState<Array<Invitation> | null>(null);
+	const [ecosystemId, setEcosystemId] = useState<string>('');
+	const [openModal, setOpenModal] = useState<boolean>(false);
+
+	const onPageChange = (page: number) => {
+		setCurrentPage({
+			...currentPage,
+			pageNumber: page,
+		});
+	};
+
+	const getAllSentInvitations = async () => {
+		const ecosystemId = await getFromLocalStorage(storageKeys.ECOSYSTEM_ID);
+		setEcosystemId(ecosystemId);
+		setLoading(true);
+		const response = await getEcosystemInvitations(
+			currentPage.pageNumber,
+			currentPage.pageSize,
+			searchText,
+		);
+		const { data } = response as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			const totalPages = data?.data?.totalPages;
+			const invitationList = data?.data?.invitations;
+
+			setInvitationsList(invitationList);
+			setCurrentPage({
+				...currentPage,
+				total: totalPages,
+			});
+		} else {
+			setError(response as string);
+		}
+		setLoading(false);
+	};
+
+	const deletInvitations = async (invitationId: number) => {
+		const response = await deleteEcosystemInvitations(invitationId);
+		const { data } = response as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			setLoading(true);
+			await getAllSentInvitations();
+			setMessage('Invitation deleted successfully');
+		} else {
+			setError(response as string);
+		}
+		setLoading(false);
+	};
+
+	const createInvitationsModel = () => {
+		setOpenModal(true);
+	};
+
+	useEffect(() => {
+		let getData: NodeJS.Timeout;
+
+		if (searchText.length >= 1) {
+			getData = setTimeout(() => {
+				getAllSentInvitations();
+			}, 1000);
+		} else {
+			getAllSentInvitations();
+		}
+		return () => clearTimeout(getData);
+	}, [searchText, currentPage.pageNumber]);
+
+	return (
+		<div className="px-4 pt-6">
+			<div className="mb-4 col-span-full xl:mb-2">
+				<BreadCrumbs />
+			</div>
+			<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 justify-between items-center mb-4">
+						<h1 className="text-xl font-semibold items-center text-gray-900 sm:text-2xl dark:text-white">
+							Sent Ecosystem Invitations
+						</h1>
+						<div className="inline-flex items-center ml-auto">
+							<SendInvitationModal
+							  getAllSentInvitations={getAllSentInvitations}
+								flag={true}
+								ecosystemId={ecosystemId}
+								openModal={openModal}
+								setMessage={(data) => setMessage(data)}
+								setOpenModal={setOpenModal}
+							/>
+							<RoleViewButton
+								buttonTitle="Invite"
+								feature={Features.SEND_INVITATION}
+								svgComponent={
+									<svg
+										className="pr-2"
+										xmlns="http://www.w3.org/2000/svg"
+										width="36"
+										height="18"
+										fill="none"
+										viewBox="0 0 42 24"
+									>
+										<path
+											fill="#fff"
+											d="M37.846 0H9.231a3.703 3.703 0 0 0-3.693 3.692v1.385c0 .508.416.923.924.923a.926.926 0 0 0 .923-.923V3.692c0-.184.046-.369.092-.554L17.815 12 7.477 20.861a2.317 2.317 0 0 1-.092-.553v-1.385A.926.926 0 0 0 6.462 18a.926.926 0 0 0-.924.923v1.385A3.703 3.703 0 0 0 9.231 24h28.615a3.703 3.703 0 0 0 3.693-3.692V3.692A3.703 3.703 0 0 0 37.846 0ZM8.862 1.892c.092-.046.23-.046.369-.046h28.615c.139 0 .277 0 .37.046L24.137 13.938a.97.97 0 0 1-1.2 0L8.863 1.893Zm28.984 20.262H9.231c-.139 0-.277 0-.37-.046L19.247 13.2l2.492 2.17a2.67 2.67 0 0 0 1.8.691 2.67 2.67 0 0 0 1.8-.692l2.493-2.169 10.384 8.908c-.092.046-.23.046-.369.046Zm1.846-1.846c0 .184-.046.369-.092.553L29.262 12 39.6 3.138c.046.185.092.37.092.554v16.616ZM2.77 9.692c0-.507.416-.923.923-.923h5.539c.507 0 .923.416.923.923a.926.926 0 0 1-.923.923h-5.54a.926.926 0 0 1-.923-.923Zm6.462 5.539H.923A.926.926 0 0 1 0 14.308c0-.508.415-.923.923-.923h8.308c.507 0 .923.415.923.923a.926.926 0 0 1-.923.923Z"
+										/>
+									</svg>
+								}
+								onClickEvent={createInvitationsModel}
+							/>
+						</div>
+					</div>
+
+					<AlertComponent
+						message={message ? message : error}
+						type={message ? 'success' : 'failure'}
+						onAlertClose={() => {
+							setMessage(null);
+							setError(null);
+						}}
+					/>
+
+					{invitationsList && invitationsList?.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">
+									{invitationsList.map((invitation) => (
+										<li
+											key={invitation.id}
+											className="p-4 min-[320px]:h-52 sm:h-48 md:h-[150px] items-center"
+										>
+											<div className="flex flex-wrap justify-between align-middle 2xl:flex items-center 2xl:space-x-4">
+												<div className=" xl:mb-4 2xl:mb-0">
+													<div className="flex space-x-4">
+														<svg
+															width="60"
+															height="60"
+															viewBox="0 0 398 398"
+															fill="none"
+															xmlns="http://www.w3.org/2000/svg"
+														>
+															<g clip-path="url(#clip0_3892_5729)">
+																<path
+																	d="M350.828 117.051V166.651L382.328 143.251L350.828 117.051Z"
+																	fill="#6B7280"
+																/>
+																<path
+																	d="M217.922 6.9502C206.822 -2.2498 190.722 -2.3498 179.622 6.8502L166.922 17.6502H230.822L217.922 6.9502Z"
+																	fill="#6B7280"
+																/>
+																<path
+																	d="M228.629 282.451C220.029 288.851 209.629 292.351 198.929 292.251C188.229 292.251 177.729 288.851 169.129 282.451L9.82869 163.551V367.451C9.72869 383.951 23.0287 397.451 39.5287 397.551H358.029C374.529 397.451 387.829 383.951 387.729 367.451V163.551L228.629 282.451Z"
+																	fill="#6B7280"
+																/>
+																<path
+																	d="M15.3281 143.249L45.8281 165.949V117.949L15.3281 143.249Z"
+																	fill="#6B7280"
+																/>
+																<path
+																	d="M65.8281 37.6484V180.848L180.828 266.448C191.528 274.248 206.228 274.248 216.928 266.448L330.828 181.548V37.6484H65.8281ZM136.828 117.648H190.828C196.328 117.648 200.828 122.148 200.828 127.648C200.828 133.148 196.328 137.648 190.828 137.648H136.828C131.328 137.648 126.828 133.148 126.828 127.648C126.828 122.148 131.328 117.648 136.828 117.648ZM260.828 187.648H136.828C131.328 187.648 126.828 183.148 126.828 177.648C126.828 172.148 131.328 167.648 136.828 167.648H260.828C266.328 167.648 270.828 172.148 270.828 177.648C270.828 183.148 266.328 187.648 260.828 187.648Z"
+																	fill="#6B7280"
+																/>
+															</g>
+															<defs>
+																<clipPath id="clip0_3892_5729">
+																	<rect
+																		width="397.55"
+																		height="397.55"
+																		fill="white"
+																	/>
+																</clipPath>
+															</defs>
+														</svg>
+														<div className="flex-1 min-w-0">
+															<p className="text-base font-semibold text-gray-900 leading-none truncate mb-0.5 dark:text-white">
+																{invitation.email}
+															</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">
+																				Role:{' '}
+																				<span
+																					key={invitation.id}
+																					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"
+																				>
+																					Ecosystem Member
+																				</span>
+																			</div>
+																		</div>
+																	</li>
+																</ul>
+															</div>
+														</div>
+													</div>
+												</div>
+
+												<div>
+													<div className="dark:text-white flex items-center justify-end">
+														Status:
+														<span
+															key={invitation.id}
+															className={`${
+																invitation.status === 'pending'
+																	? 'bg-orange-100 text-orange-800 border border-orange-100 dark:bg-gray-700 dark:border-orange-300 dark:text-orange-300'
+																	: invitation.status === 'accepted'
+																	? 'bg-green-100 text-green-700 dark:bg-gray-700 dark:text-green-400 rounded border border-green-100 dark:border-green-500'
+																	: 'bg-red-100 text-red-800 rounded dark:bg-gray-900 dark:text-red-300  border-red-100 dark:border-red-500 border'
+															} m-1 text-sm font-medium px-2.5 py-0.5 rounded-md`}
+														>
+															{invitation?.status?.charAt(0).toUpperCase() +
+																invitation?.status?.slice(1)}
+														</span>
+													</div>
+													{invitation.status === 'pending' && (
+														<div className="flex">
+															<Button
+																onClick={() => deletInvitations(invitation.id)}
+																color="bg-white"
+																className="ml-5 font-normal items-center mt-5 text-xl text-primary-700 border border-blue-700 text-center hover:!bg-primary-800 hover:text-white rounded-lg focus:ring-4 focus:ring-primary-300 sm:w-auto dark:hover:bg-primary-700 dark:text-white dark:bg-primary-700 dark:focus:ring-blue-800"
+															>
+																<svg
+																	className="w-6 h-6"
+																	aria-hidden="true"
+																	xmlns="http://www.w3.org/2000/svg"
+																	fill="none"
+																	viewBox="0 0 20 20"
+																>
+																	<path
+																		stroke="currentColor"
+																		stroke-linecap="round"
+																		stroke-linejoin="round"
+																		stroke-width="1.5"
+																		d="m13 7-6 6m0-6 6 6m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+																	/>
+																</svg>
+																<span className="text-lg ml-2">
+																	Delete Invitation
+																</span>
+															</Button>
+														</div>
+													)}
+												</div>
+											</div>
+										</li>
+									))}
+								</ul>
+							</div>
+						</div>
+					) : (
+						<div>
+							{!(invitationsList && invitationsList?.length > 0) && loading ? (
+								<div className="flex items-center justify-center mb-4">
+									<CustomSpinner />
+								</div>
+							) : (
+								<EmptyListMessage
+									message={'No Sent Invitations'}
+									description={`You don't have any sent invitation`}
+								/>
+							)}
+						</div>
+					)}
+
+					{currentPage.total > 1 && (
+						<div className="flex items-center justify-end mb-4">
+							<Pagination
+								currentPage={currentPage.pageNumber}
+								onPageChange={onPageChange}
+								totalPages={currentPage.total}
+							/>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default SentInvitations;
diff --git a/src/components/EditEcosystemOrgModal/index.tsx b/src/components/EditEcosystemOrgModal/index.tsx
new file mode 100644
index 000000000..b2ec9e95c
--- /dev/null
+++ b/src/components/EditEcosystemOrgModal/index.tsx
@@ -0,0 +1,336 @@
+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 type { AxiosResponse } from 'axios';
+import { updateOrganization } from "../../api/organization";
+import { updateEcosystem } from "../../api/ecosystem";
+import type { Organisation } from "../organization/interfaces";
+import type { Ecosystem } from "../Ecosystem/interfaces";
+import React, { useEffect, useState } from "react";
+
+interface EditEntityModalProps {
+    openModal: boolean;
+    setMessage: (message: string) => void;
+    setOpenModal: (flag: boolean) => void;
+    onEditSuccess?: () => void;
+    entityData: Organisation | Ecosystem | null;
+    isOrganization: boolean; 
+}
+
+interface EditEntityValues {
+    name: string;
+    description: string;
+}
+
+interface ILogoImage {
+    logoFile: string | File;
+    imagePreviewUrl: string | ArrayBuffer | null | File;
+    fileName: string;
+}
+
+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 ?? "",
+            });
+            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('');
+
+
+    useEffect(() => {
+        if (!props.openModal) {
+            setInitialEntityData({
+                name: "",
+                description: "",
+            });
+
+            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 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 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();
+
+        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 isEmpty = (object: any): boolean => {
+
+        return true;
+    };
+
+    const submitUpdateEntity = async (values: EditEntityValues) => {
+        setLoading(true);
+
+        const entityData = {
+            id: props?.entityData?.id,
+            name: values.name,
+            description: values.description,
+            logo: logoImage?.imagePreviewUrl as string || props?.entityData?.logoUrl,
+
+        };
+
+        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 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`}
+                                />
+                                {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`}
+                                />
+                                {formikHandlers?.errors?.description && formikHandlers?.touched?.description && (
+                                    <span className="text-red-500 text-xs">{formikHandlers?.errors?.description}</span>
+                                )}
+                            </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;
diff --git a/src/components/EmptyListComponent/index.tsx b/src/components/EmptyListComponent/index.tsx
index a3b29005e..c3b7c2309 100644
--- a/src/components/EmptyListComponent/index.tsx
+++ b/src/components/EmptyListComponent/index.tsx
@@ -11,7 +11,7 @@ export const EmptyListMessage = ({ message, description, buttonContent, svgCompo
         onClick?: () => void,
     }) => {
     return (
-        <div className='flex mt-20 justify-start items-center flex-col'>
+        <div className='flex mt-20 mb-16 justify-start items-center flex-col'>
             <p className='text-2xl font-bold mb-4 text-gray-900 dark:text-white'>{message}</p>
             <p className='text-lg mb-4 text-gray-900 dark:text-white'>{description}</p>
             {
diff --git a/src/components/Issuance/Connections.tsx b/src/components/Issuance/Connections.tsx
index 97dc09c3c..d7c3e316c 100644
--- a/src/components/Issuance/Connections.tsx
+++ b/src/components/Issuance/Connections.tsx
@@ -10,6 +10,8 @@ import { pathRoutes } from "../../config/pathRoutes";
 import BreadCrumbs from "../BreadCrumbs";
 import ConnectionList from "./ConnectionList";
 import EmailList from "./EmailList";
+import BackButton from '../../commonComponents/backbutton'
+
 
 const Connections = () => {
 	const [selectedConnectionList, setSelectedConnectionList] = useState<TableData[]>([])
@@ -36,23 +38,7 @@ const Connections = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.issuance.credDef}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
-						dark:hover:bg-primary-50'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="min-[320px]:hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes?.back?.issuance?.credDef}/>
 				</div>
 			</div>
 
diff --git a/src/components/Issuance/CredDefSelection.tsx b/src/components/Issuance/CredDefSelection.tsx
index 4e49ca23f..1e835f1a9 100644
--- a/src/components/Issuance/CredDefSelection.tsx
+++ b/src/components/Issuance/CredDefSelection.tsx
@@ -15,9 +15,10 @@ import SchemaCard from "../../commonComponents/SchemaCard";
 import type { TableData } from "../../commonComponents/datatable/interface";
 import { dateConversion } from "../../utils/DateConversion";
 import { getCredentialDefinitions } from "../../api/issuance";
-import { getSchemaById } from "../../api/Schema";
 import { pathRoutes } from "../../config/pathRoutes";
 import DateTooltip from "../Tooltip";
+import BackButton from  '../../commonComponents/backbutton'
+
 
 const CredDefSelection = () => {
 	const [schemaState, setSchemaState] = useState({ schemaName: '', version: '' })
@@ -61,13 +62,14 @@ const CredDefSelection = () => {
 	const header = [
 		{ columnName: 'Name' },
 		{ columnName: 'Created on' },
-		{ columnName: 'Revocable?' }
+		{ columnName: 'Revocable?' },
+		{ columnName: ' ' }
 	]
 
-	//Fetch credential definitions against schemaId
 	const getCredDefs = async (schemaId: string) => {
 		setLoading(true)
 		const response = await getCredentialDefinitions(schemaId);
+		
 		const { data } = response as AxiosResponse
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
@@ -108,20 +110,7 @@ const CredDefSelection = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 				<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.issuance.schemas}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-           <span className="min-[320px]:hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes.back.issuance.schemas}/>
 				</div>
 
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
@@ -144,7 +133,6 @@ const CredDefSelection = () => {
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Credential definitions
 				</h1>
-				{/* <div className='flex space-x-2'> */}
 							<Button
 								id='createSchemaButton'
 								onClick={() => {
@@ -158,7 +146,6 @@ const CredDefSelection = () => {
 								</svg>
 								Create
 							</Button>
-						{/* </div> */}
 			</div>
 			<AlertComponent
 				message={error}
diff --git a/src/components/Issuance/Issuance.tsx b/src/components/Issuance/Issuance.tsx
index 42240123a..ae7f6491f 100644
--- a/src/components/Issuance/Issuance.tsx
+++ b/src/components/Issuance/Issuance.tsx
@@ -5,10 +5,9 @@ import * as Yup from 'yup';
 import { Alert, Button, Card } from 'flowbite-react';
 import { ErrorMessage, Field, Form, Formik } from 'formik';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
-import { getCredDeffById, getSchemaById } from '../../api/Schema';
 import { getFromLocalStorage, removeFromLocalStorage } from '../../api/Auth';
 import { useEffect, useState } from 'react';
-
+import BackButton from '../../commonComponents/backbutton'
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../BreadCrumbs';
 import CustomSpinner from '../CustomSpinner';
@@ -134,25 +133,26 @@ const IssueCred = () => {
 		return JSON.parse(selectedUsers);
 	};
 
+	const createAttributeValidationSchema = (dataType: string) => {
+		let attributeSchema;
+	
+		if (dataType === 'string') {
+			attributeSchema = Yup.string().typeError('Value must be a string');
+		} else if (dataType === 'number') {
+			attributeSchema = Yup.number().typeError('Value must be a number');
+		} else if (dataType === 'date') {
+			attributeSchema = Yup.date().typeError('Value must be a valid date');
+		} else {
+			attributeSchema = Yup.mixed();
+		}
+		return Yup.object().shape({
+			value: attributeSchema,
+		});
+	};
+	
 	const validationSchema = Yup.object().shape({
 		attributes: Yup.array().of(
-			Yup.object().shape({
-				value: Yup.mixed().test(
-					'matchDataType',
-					'Value must match the specified data type',
-					function (value) {
-						const dataType = this.parent.dataType;
-						if (dataType === 'string') {
-							return typeof value === 'string';
-						} else if (dataType === 'number') {
-							return typeof value === 'number';
-						} else if (dataType === 'date') {
-							return !isNaN(Date.parse(value));
-						}
-						return true;
-					},
-				),
-			}),
+			Yup.lazy(({ dataType }) => createAttributeValidationSchema(dataType))
 		),
 	});
 
@@ -191,23 +191,7 @@ const IssueCred = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href =`${pathRoutes.back.issuance.connections}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
-						dark:hover:bg-primary-50'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="min-[320px]:hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes.back.issuance.connections} />
 				</div>
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Issuance
diff --git a/src/components/Issuance/IssuedCrdentials.tsx b/src/components/Issuance/IssuedCrdentials.tsx
index 6987fbd9d..70c934289 100644
--- a/src/components/Issuance/IssuedCrdentials.tsx
+++ b/src/components/Issuance/IssuedCrdentials.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ChangeEvent, useEffect, useState } from 'react';
-import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
+import { IssueCredential, IssueCredentialUserText } from '../../common/enums';
 
 import { AlertComponent } from '../AlertComponent';
 import type { AxiosResponse } from 'axios';
@@ -9,15 +9,18 @@ import BreadCrumbs from '../BreadCrumbs';
 import { Button } from 'flowbite-react';
 import CustomSpinner from '../CustomSpinner';
 import DataTable from '../../commonComponents/datatable';
+import DateTooltip from '../Tooltip';
 import { EmptyListMessage } from '../EmptyListComponent';
-import { IssueCredential, IssueCredentialUserText } from '../../common/enums';
+import { Features } from '../../utils/enums/features';
 import React from 'react';
+import RoleViewButton from '../RoleViewButton';
 import SearchInput from '../SearchInput';
 import type { TableData } from '../../commonComponents/datatable/interface';
+import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
 import { dateConversion } from '../../utils/DateConversion';
 import { getIssuedCredentials } from '../../api/issuance';
 import { pathRoutes } from '../../config/pathRoutes';
-import DateTooltip from '../Tooltip';
+import { getFromLocalStorage } from '../../api/Auth';
 
 interface IssuedCredential {
 	metadata: { [x: string]: { schemaId: string } };
@@ -33,76 +36,76 @@ const CredentialList = () => {
 	const [issuedCredList, setIssuedCredList] = useState<TableData[]>([]);
 
 	const getIssuedCredDefs = async () => {
-		setLoading(true);
-		const response = await getIssuedCredentials(
-			IssueCredential.credentialIssued,
-		);
-		const { data } = response as AxiosResponse;
-
-		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-			const credentialList = data?.data?.map(
-				(issuedCredential: IssuedCredential) => {
-					const schemaName = issuedCredential.metadata['_anoncreds/credential']
-						.schemaId
-						? issuedCredential.metadata['_anoncreds/credential'].schemaId
+		setLoading(true)
+		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+		if (orgId) {
+			const response = await getIssuedCredentials();
+
+			const { data } = response as AxiosResponse;
+
+			if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+
+				const credentialList = data?.data?.map(
+					(issuedCredential: IssuedCredential) => {
+						const schemaName = issuedCredential.metadata['_anoncreds/credential']
+							.schemaId
+							? issuedCredential.metadata['_anoncreds/credential'].schemaId
 								.split(':')
 								.slice(2)
 								.join(':')
-						: 'Not available';
-					return {
-						data: [
-							{
-								data: issuedCredential.connectionId
-									? issuedCredential.connectionId
-									: 'Not available',
-							},
-							{ data: schemaName },
-							{ data: <DateTooltip date={issuedCredential.updatedAt}> {dateConversion(issuedCredential.updatedAt)} </DateTooltip> },
-							{
-								data: (
-									<span
-										className={` ${
-											issuedCredential.state === IssueCredential.offerSent &&
-											'bg-orange-100 text-orange-800 border border-orange-100 dark:bg-gray-700 dark:border-orange-300 dark:text-orange-300'
-										} ${
-											issuedCredential?.state === IssueCredential.done &&
-											'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border border-green-100 dark:border-green-500'
-										} ${
-											issuedCredential?.state === IssueCredential.abandoned &&
-											'bg-red-100 text-red-800 border border-red-100 dark:border-red-400 dark:bg-gray-700 dark:text-red-400'
-										} text-xs font-medium mr-0.5 px-0.5 py-0.5 rounded-md border flex justify-center min-[320]:w-full xl:w-9/12 2xl:w-6/12`}
-									>
-										{issuedCredential.state === IssueCredential.offerSent
-											? IssueCredentialUserText.offerSent
-											: issuedCredential.state === IssueCredential.done
-											? IssueCredentialUserText.done
-											: issuedCredential.state === IssueCredential.abandoned
-											? IssueCredentialUserText.abandoned :''}
-									</span>
-								),
-							},
-							{
-								data: issuedCredential?.isRevocable ? (
-									<Button
-										disabled
-										className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
-									>
-										Revoke
-									</Button>
-								) : (
-									<span className="text-gray-400">Non revocable</span>
-								),
-							},
-						],
-					};
-				},
-			);
-
-			setIssuedCredList(credentialList)
-		} else {
-			setError(response as string)
+							: 'Not available';
+
+						return {
+							data: [
+								{
+									data: issuedCredential.connectionId
+										? issuedCredential.connectionId
+										: 'Not available',
+								},
+								{ data: schemaName },
+								{ data: <DateTooltip date={issuedCredential.updatedAt}> {dateConversion(issuedCredential.updatedAt)} </DateTooltip> },
+								{
+									data: (
+										<span
+											className={` ${issuedCredential.state === IssueCredential.offerSent &&
+												'bg-orange-100 text-orange-800 border border-orange-100 dark:bg-gray-700 dark:border-orange-300 dark:text-orange-300'
+												} ${issuedCredential?.state === IssueCredential.done &&
+												'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border border-green-100 dark:border-green-500'
+												} ${issuedCredential?.state === IssueCredential.abandoned &&
+												'bg-red-100 text-red-800 border border-red-100 dark:border-red-400 dark:bg-gray-700 dark:text-red-400'
+												} text-xs font-medium mr-0.5 px-0.5 py-0.5 rounded-md border flex justify-center min-[320]:w-full xl:w-9/12 2xl:w-6/12`}
+										>
+											{issuedCredential.state === IssueCredential.offerSent
+												? IssueCredentialUserText.offerSent
+												: issuedCredential.state === IssueCredential.done
+													? IssueCredentialUserText.done
+													: issuedCredential.state === IssueCredential.abandoned
+														? IssueCredentialUserText.abandoned : ''}
+										</span>
+									),
+								},
+								{
+									data: issuedCredential?.isRevocable ? (
+										<Button
+											disabled
+											className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
+										>
+											Revoke
+										</Button>
+									) : (
+										<span className="text-gray-400">Non revocable</span>
+									),
+								},
+							],
+						};
+					},
+				);
+
+				setIssuedCredList(credentialList)
+			} else {
+				setError(response as string)
+			}
 		}
-
 		setLoading(false)
 	}
 
@@ -142,36 +145,27 @@ const CredentialList = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 				<BreadCrumbs />
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
-					Credential Issued
+					Credentials
 				</h1>
 			</div>
 
 			<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="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-end mb-4">
-						<Button
-							onClick={schemeSelection}
-							className='text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
-						>
-							<svg
-								className="pr-2"
-								xmlns="http://www.w3.org/2000/svg"
-								width="30"
-								height="25"
-								fill="none"
-								viewBox="0 0 25 18"
-							>
-								<path
-									fill="#fff"
-									d="M.702 10.655a.703.703 0 1 0-.001-1.406.703.703 0 0 0 .001 1.406Z"
-								/>
-								<path
-									fill="#fff"
-									d="m24.494 5.965-5.8-5.8a.562.562 0 0 0-.795 0l-2.06 2.06H8.884c-1.602 0-3.128.73-4.137 1.966H3.652V3.35a.562.562 0 0 0-.562-.562H.562a.562.562 0 0 0 0 1.123h1.966v7.866H.562a.562.562 0 0 0 0 1.124H3.09c.31 0 .562-.252.562-.562v-1.404h1.096A5.358 5.358 0 0 0 8.885 12.9h.653l4.01 4.01a.56.56 0 0 0 .795 0l10.15-10.15a.562.562 0 0 0 0-.795ZM5.478 10.04a.562.562 0 0 0-.455-.231h-1.37V5.315h1.37c.18 0 .349-.086.455-.23a4.23 4.23 0 0 1 3.407-1.736h5.83L11.38 6.682a5.675 5.675 0 0 1-1.238-1.243.562.562 0 0 0-.908.66 6.74 6.74 0 0 0 4.429 2.71.633.633 0 0 1-.197 1.25 8 8 0 0 1-4.14-1.974.562.562 0 0 0-.755.833c.1.091.204.18.308.266l-1.132 1.131a.562.562 0 0 0 0 .795l.637.636a4.235 4.235 0 0 1-2.907-1.705Zm8.468 5.677L8.94 10.713l.86-.86a9.16 9.16 0 0 0 3.492 1.316 1.759 1.759 0 0 0 2.008-1.46 1.758 1.758 0 0 0-1.461-2.01 5.69 5.69 0 0 1-1.454-.432l5.911-5.91 5.006 5.005-9.356 9.356Z"
-								/>
-							</svg>
-							Issue
-						</Button>
+
+						<RoleViewButton
+							buttonTitle='Issue'
+							feature={Features.ISSUENCE}
+							svgComponent={
+								<svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="30" height="25" fill="none" viewBox="0 0 25 18">
+									<path fill="#fff" d="M.702 10.655a.703.703 0 1 0-.001-1.406.703.703 0 0 0 .001 1.406Z" />
+									<path fill="#fff" d="m24.494 5.965-5.8-5.8a.562.562 0 0 0-.795 0l-2.06 2.06H8.884c-1.602 0-3.128.73-4.137 1.966H3.652V3.35a.562.562 0 0 0-.562-.562H.562a.562.562 0 0 0 0 1.123h1.966v7.866H.562a.562.562 0 0 0 0 1.124H3.09c.31 0 .562-.252.562-.562v-1.404h1.096A5.358 5.358 0 0 0 8.885 12.9h.653l4.01 4.01a.56.56 0 0 0 .795 0l10.15-10.15a.562.562 0 0 0 0-.795ZM5.478 10.04a.562.562 0 0 0-.455-.231h-1.37V5.315h1.37c.18 0 .349-.086.455-.23a4.23 4.23 0 0 1 3.407-1.736h5.83L11.38 6.682a5.675 5.675 0 0 1-1.238-1.243.562.562 0 0 0-.908.66 6.74 6.74 0 0 0 4.429 2.71.633.633 0 0 1-.197 1.25 8 8 0 0 1-4.14-1.974.562.562 0 0 0-.755.833c.1.091.204.18.308.266l-1.132 1.131a.562.562 0 0 0 0 .795l.637.636a4.235 4.235 0 0 1-2.907-1.705Zm8.468 5.677L8.94 10.713l.86-.86a9.16 9.16 0 0 0 3.492 1.316 1.759 1.759 0 0 0 2.008-1.46 1.758 1.758 0 0 0-1.461-2.01 5.69 5.69 0 0 1-1.454-.432l5.911-5.91 5.006 5.005-9.356 9.356Z" />
+								</svg>
+							}
+							onClickEvent={schemeSelection}
+						/>
+
 					</div>
 					<AlertComponent
 						message={error}
diff --git a/src/components/Profile/AddPasskey.tsx b/src/components/Profile/AddPasskey.tsx
index 25a7ed872..05c582106 100644
--- a/src/components/Profile/AddPasskey.tsx
+++ b/src/components/Profile/AddPasskey.tsx
@@ -1,285 +1,274 @@
+import { Alert, Button } from 'flowbite-react';
 import { useEffect, useState } from 'react';
-import { startRegistration } from '@simplewebauthn/browser'
-import type { AxiosError, AxiosResponse } from 'axios';
-import { addDeviceDetails, generateRegistrationOption, getUserDeviceDetails, verifyRegistration } from '../../api/Fido';
 import DeviceDetails from '../../commonComponents/DeviceDetailsCard';
-import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
-import { getFromLocalStorage, getUserProfile } from '../../api/Auth';
-import BreadCrumbs from '../BreadCrumbs';
-import { Alert } from 'flowbite-react';
-import type { IDeviceData, IdeviceBody, RegistrationOptionInterface, UserProfile, verifyRegistrationObjInterface } from './interfaces';
-import DisplayUserProfile from './DisplayUserProfile';
-import UpdateUserProfile from './EditUserProfile';
-import CustomSpinner from '../CustomSpinner';
 import PasskeyAddDevice from '../../commonComponents/PasseyAddDevicePopup';
+import {
+	addDeviceDetails,
+	generateRegistrationOption,
+	getUserDeviceDetails,
+	verifyRegistration,
+} from '../../api/Fido';
+import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
 import { apiRoutes } from '../../config/apiRoutes';
-import React from 'react';
+import { startRegistration } from '@simplewebauthn/browser';
+import { getFromLocalStorage } from '../../api/Auth';
+import CustomSpinner from '../CustomSpinner';
+import type {
+	IDeviceData,
+	IdeviceBody,
+	RegistrationOptionInterface,
+	VerifyRegistrationObjInterface,
+} from './interfaces';
+import type { AxiosError, AxiosResponse } from 'axios';
 
 const AddPasskey = () => {
-  const [fidoError, setFidoError] = useState("")
-  const [fidoLoader, setFidoLoader] = useState(true)
-  const [OrgUserEmail, setOrgUserEmail] = useState<string>('')
-  const [deviceList, setDeviceList] = useState<IDeviceData[]>([])
-  const [addSuccess, setAddSuccess] = useState<string | null>(null)
-  const [addfailure, setAddFailur] = useState<string | null>(null)
-  const [isEditProfileOpen, setIsEditProfileOpen] = useState(false);
-  const [prePopulatedUserProfile, setPrePopulatedUserProfile] = useState<UserProfile | null>(null);
-  const [disableFlag, setDisableFlag] = useState<boolean>(false)
-
-
-  const [openModel, setOpenModel] = useState<boolean>(false)
-
-  const props = { openModel, setOpenModel };
-  const fetchUserProfile = async () => {
-    try {
-      const token = await getFromLocalStorage(storageKeys.TOKEN);
-      const userDetailsResponse = await getUserProfile(token);
-      const { data } = userDetailsResponse as AxiosResponse;
-
-      if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-        setPrePopulatedUserProfile(data?.data);
-      }
-    } catch (error) {
-    }
-  };
-
-  const toggleEditProfile = async () => {
-    await fetchUserProfile()
-    setIsEditProfileOpen(!isEditProfileOpen);
-  };
-
-  const showFidoError = (error: unknown): void => {
-    const err = error as AxiosError
-    if (err.message.includes("The operation either timed out or was not allowed")) {
-      const [errorMsg] = err.message.split('.')
-      setFidoError(errorMsg)
-    } else {
-      setFidoError(err.message)
-    }
-  }
-
-  const addDevice = async (): Promise<void> => {
-    try {
-      setOpenModel(true)
-    } catch (error) {
-      setFidoLoader(false)
-    }
-  }
-  const setProfile = async () => {
-    const UserEmail = await getFromLocalStorage(storageKeys.USER_EMAIL)
-    setOrgUserEmail(UserEmail)
-    return UserEmail
-  }
-
-  useEffect(() => {
-    fetchUserProfile();
-  }, []);
-
-  const registerWithPasskey = async (flag: boolean): Promise<void> => {
-    try {
-      const RegistrationOption: RegistrationOptionInterface = {
-        userName: OrgUserEmail,
-        deviceFlag: flag
-      }
-      // Generate Registration Option
-      const generateRegistrationResponse = await generateRegistrationOption(RegistrationOption)
-      const { data } = generateRegistrationResponse as AxiosResponse
-      const opts = data?.data
-      const challangeId = data?.data?.challenge
-      if (opts) {
-        opts.authenticatorSelection = {
-          residentKey: "preferred",
-          requireResidentKey: false,
-          userVerification: "preferred"
-        }
-      }
-      setOpenModel(false)
-      const attResp = await startRegistration(opts)
-
-      const verifyRegistrationObj = {
-        ...attResp,
-        challangeId
-      }
-      console.log("verifyRegistrationObj::::", verifyRegistrationObj)
-      await verifyRegistrationMethod(verifyRegistrationObj, OrgUserEmail);
-    } catch (error) {
-      showFidoError(error)
-    }
-  }
-
-  const verifyRegistrationMethod = async (verifyRegistrationObj, OrgUserEmail: string) => {
-    try {
-      const verificationRegisterResp = await verifyRegistration(verifyRegistrationObj, OrgUserEmail)
-      const { data } = verificationRegisterResp as AxiosResponse
-      const credentialID = data?.data?.newDevice?.credentialID
-
-      if (data?.data?.verified) {
-        let platformDeviceName = ''
-
-        if (verifyRegistrationObj?.authenticatorAttachment === "cross-platform") {
-          platformDeviceName = 'Passkey'
-        } else {
-          platformDeviceName = navigator.platform
-        }
-
-        const deviceBody: IdeviceBody = {
-          userName: OrgUserEmail,
-          credentialId: credentialID,
-          deviceFriendlyName: platformDeviceName
-        }
-        await addDeviceDetailsMethod(deviceBody)
-      }
-    } catch (error) {
-      showFidoError(error)
-    }
-  }
-
-  const addDeviceDetailsMethod = async (deviceBody: IdeviceBody) => {
-    try {
-      const deviceDetailsResp = await addDeviceDetails(deviceBody)
-      const { data } = deviceDetailsResp as AxiosResponse
-      if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-        setAddSuccess("Device added successfully")
-        userDeviceDetails()
-        window.location.href = `${apiRoutes.auth.profile}`
-      } else {
-        setAddFailur(deviceDetailsResp as string)
-      }
-    } catch (error) {
-      showFidoError(error)
-    }
-  }
-
-  //userDeviceDetails on page reload
-  const userDeviceDetails = async (): Promise<void> => {
-    try {
-      setFidoLoader(true)
-
-      const userDeviceDetailsResp = await getUserDeviceDetails(OrgUserEmail)
-      const { data } = userDeviceDetailsResp as AxiosResponse
-      setFidoLoader(false)
-      if (userDeviceDetailsResp) {
-        const deviceDetails = Object.keys(data)?.length > 0 ?
-          userDeviceDetailsResp?.data?.data.map((data) => {
-            data.lastChangedDateTime = data.lastChangedDateTime ? data.lastChangedDateTime : "-"
-            return data
-          })
-          : []
-          if (data?.data?.length === 1){
-            setDisableFlag(true)
-          }
-        setDeviceList(deviceDetails)
-      }
-    } catch (error) {
-      setAddFailur("Error while fetching the device details")
-      setFidoLoader(false)
-    }
-  }
-
-  useEffect(() => {
-    if (OrgUserEmail) {
-      userDeviceDetails();
-    } else {
-      setProfile();
-    }
-  }, [OrgUserEmail]);
-
-  const updatePrePopulatedUserProfile = (updatedProfile: UserProfile) => {
-    setPrePopulatedUserProfile(updatedProfile);
-  };
-
-  return (
-
-    <div className="mb-4 col-span-full xl:mb-2 p-4">
-      <BreadCrumbs />
-      <h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
-        User's Profile
-      </h1>
-
-      {fidoLoader
-        ? <div className="flex items-center justify-center mb-4">
-
-          <CustomSpinner />
-        </div>
-        :
-
-        <div className="lg:flex max-sm p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800 grid-cols-2 gap-10 mt-6">
-
-          {/* first section */}
-          <div className='lg:w-1/3'>
-
-            {!isEditProfileOpen && prePopulatedUserProfile && (
-              <DisplayUserProfile
-                toggleEditProfile={toggleEditProfile}
-                userProfileInfo={prePopulatedUserProfile}
-              />
-            )}
-
-            {isEditProfileOpen && prePopulatedUserProfile && (
-              <UpdateUserProfile
-                toggleEditProfile={toggleEditProfile}
-                userProfileInfo={prePopulatedUserProfile}
-                updateProfile={updatePrePopulatedUserProfile}
-              />
-            )}
-
-          </div>
-
-          {/* second section */}
-          <div className="flow-root w-2/3">
-            <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='divide-y'>
-                {deviceList && deviceList.length > 0 &&
-                  deviceList.map((element, key) => (
-                    <DeviceDetails deviceFriendlyName={element['deviceFriendlyName']} createDateTime={element['createDateTime']} credentialID={element['credentialId']} refreshList={userDeviceDetails} disableRevoke={disableFlag} />
-                  ))}
-              </div>
-
-              <div>
-
-                <button onClick={addDevice} type="button" className="ml-2 mt-2 text-white bg-primary-700 hover:!bg-primary-800 focus:ring-4 focus:outline-none focus:ring-[#3b5998]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#3b5998]/55 mr-2 mb-2">
-                  <svg className='mr-2 pr-2' xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                    <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
-                  </svg>
-                  Create Passkey
-                </button>
-                {
-                  (addSuccess || addfailure || fidoError) &&
-                  <div className='p-2'>
-                    <Alert
-                      color={addSuccess ? "success" : "failure"}
-                      onDismiss={() => {
-                        setAddSuccess(null)
-                        setFidoError('')
-                        setAddFailur('')
-                      }}
-                    >
-                      <span>
-                        <p>
-                          {addSuccess || addfailure || fidoError}
-                        </p>
-                      </span>
-                    </Alert>
-                  </div>
-                }
-              </div>
-            </div>
-
-          </div>
-
-          <PasskeyAddDevice openModal={openModel} setOpenModel={props.setOpenModel} closeModal={function (flag: boolean): void {
-            throw new Error('Function not implemented.');
-          }
-          }
-            registerWithPasskey={registerWithPasskey}
-          />
-        </div>
-      }
-    </div>
-  );
+	const [fidoError, setFidoError] = useState('');
+	const [fidoLoader, setFidoLoader] = useState(true);
+	const [OrgUserEmail, setOrgUserEmail] = useState<string>('');
+	const [deviceList, setDeviceList] = useState<IDeviceData[]>([]);
+	const [addSuccess, setAddSuccess] = useState<string | null>(null);
+	const [addfailure, setAddFailure] = useState<string | null>(null);
+	const [disableFlag, setDisableFlag] = useState<boolean>(false);
+
+	const [openModel, setOpenModel] = useState<boolean>(false);
+
+	const props = { openModel, setOpenModel };
+	const setProfile = async () => {
+		const UserEmail = await getFromLocalStorage(storageKeys.USER_EMAIL);
+		setOrgUserEmail(UserEmail);
+		return UserEmail;
+	};
+
+	const showFidoError = (error: unknown): void => {
+		const err = error as AxiosError;
+		if (
+			err.message.includes('The operation either timed out or was not allowed')
+		) {
+			const [errorMsg] = err.message.split('.');
+			setFidoError(errorMsg);
+		} else {
+			setFidoError(err.message);
+		}
+	};
+
+	const addDevice = async (): Promise<void> => {
+		try {
+			setOpenModel(true);
+		} catch (error) {
+			setFidoLoader(false);
+		}
+	};
+
+	const registerWithPasskey = async (flag: boolean): Promise<void> => {
+		try {
+			const RegistrationOption: RegistrationOptionInterface = {
+				userName: OrgUserEmail,
+				deviceFlag: flag,
+			};
+			// Generate Registration Option
+			const generateRegistrationResponse = await generateRegistrationOption(
+				RegistrationOption,
+			);
+			const { data } = generateRegistrationResponse as AxiosResponse;
+			const opts = data?.data;
+			const challangeId = data?.data?.challenge;
+			if (opts) {
+				opts.authenticatorSelection = {
+					residentKey: 'preferred',
+					requireResidentKey: false,
+					userVerification: 'preferred',
+				};
+			}
+			setOpenModel(false);
+			const attResp = await startRegistration(opts);
+
+			const verifyRegistrationObj = {
+				...attResp,
+				challangeId,
+			};
+			await verifyRegistrationMethod(verifyRegistrationObj, OrgUserEmail);
+		} catch (error) {
+			showFidoError(error);
+		}
+	};
+
+	const verifyRegistrationMethod = async (
+		verifyRegistrationObj: VerifyRegistrationObjInterface,
+		OrgUserEmail: string,
+	) => {
+		try {
+			const verificationRegisterResp = await verifyRegistration(
+				verifyRegistrationObj,
+				OrgUserEmail,
+			);
+			const { data } = verificationRegisterResp as AxiosResponse;
+			const credentialID = data?.data?.newDevice?.credentialID;
+
+			if (data?.data?.verified) {
+				let platformDeviceName = '';
+
+				if (
+					verifyRegistrationObj?.authenticatorAttachment === 'cross-platform'
+				) {
+					platformDeviceName = 'Passkey';
+				} else {
+					platformDeviceName = navigator.platform;
+				}
+
+				const deviceBody: IdeviceBody = {
+					userName: OrgUserEmail,
+					credentialId: encodeURIComponent(credentialID),
+					deviceFriendlyName: platformDeviceName,
+				};
+				await addDeviceDetailsMethod(deviceBody);
+			}
+		} catch (error) {
+			showFidoError(error);
+		}
+	};
+
+	const addDeviceDetailsMethod = async (deviceBody: IdeviceBody) => {
+		try {
+			const deviceDetailsResp = await addDeviceDetails(deviceBody);
+			const { data } = deviceDetailsResp as AxiosResponse;
+			if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+				setAddSuccess('Device added successfully');
+				userDeviceDetails();
+			} else {
+				setAddFailure(deviceDetailsResp as string);
+			}
+		} catch (error) {
+			showFidoError(error);
+		}
+	};
+
+	//userDeviceDetails on page reload
+	const userDeviceDetails = async (): Promise<void> => {
+		try {
+			setFidoLoader(true);
+
+			const userDeviceDetailsResp = await getUserDeviceDetails(OrgUserEmail);
+			const { data } = userDeviceDetailsResp as AxiosResponse;
+			setFidoLoader(false);
+			if (userDeviceDetailsResp) {
+				const deviceDetails =
+					Object.keys(data)?.length > 0
+						? userDeviceDetailsResp?.data?.data.map((data) => {
+								data.lastChangedDateTime = data.lastChangedDateTime
+									? data.lastChangedDateTime
+									: '-';
+								return data;
+						  })
+						: [];
+				if (data?.data?.length === 1) {
+					setDisableFlag(true);
+				} else {
+					setDisableFlag(false);
+				}
+				setDeviceList(deviceDetails);
+			}
+		} catch (error) {
+			setAddFailure('Error while fetching the device details');
+			setFidoLoader(false);
+		}
+	};
+	useEffect(() => {
+		if (OrgUserEmail) {
+			userDeviceDetails();
+		} else {
+			setProfile();
+		}
+	}, [OrgUserEmail]);
+
+	return (
+		<div className="h-full">
+			{(addSuccess || addfailure || fidoError) && (
+				<div className="p-2">
+					<Alert
+						color={addSuccess ? 'success' : 'failure'}
+						onDismiss={() => {
+							setAddSuccess(null);
+							setFidoError('');
+							setAddFailure('');
+						}}
+					>
+						<span>
+							<p>{addSuccess || addfailure || fidoError}</p>
+						</span>
+					</Alert>
+				</div>
+			)}
+			<div className="page-container relative h-full flex flex-auto flex-col py-3 sm:py-4">
+				<div className="container mx-auto bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
+					<div className="px-6 py-6">
+						{fidoLoader ? (
+							<div className="flex items-center justify-center mb-4">
+								<CustomSpinner />
+							</div>
+						) : (
+							<form action="#">
+								<div className="form-container">
+									<div>
+										<h1 className="text-gray-500 text-xl font-medium font-montserrat dark:text-white">
+											Add Passkey
+										</h1>
+										<p className="mt-2 text-gray-700 font-montserrat text-sm font-normal font-light leading-normal dark:text-white">
+											With Passkey, no complex passwords to remember.
+										</p>
+									</div>
+
+									{deviceList &&
+										deviceList.length > 0 &&
+										deviceList.map((element, key) => (
+											<DeviceDetails
+												deviceFriendlyName={element['deviceFriendlyName']}
+												createDateTime={element['createDateTime']}
+												credentialID={element['credentialId']}
+												refreshList={userDeviceDetails}
+												disableRevoke={disableFlag}
+											/>
+										))}
+
+									<div>
+										<Button
+											onClick={addDevice}
+											type="button"
+											color="bg-primary-800"
+											className='mt-10 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												className="mr-4"
+												width="18"
+												height="18"
+												fill="none"
+												viewBox="0 0 18 18"
+											>
+												<path
+													stroke="#fff"
+													d="M11.03 4.32a3.82 3.82 0 1 1-7.64 0 3.82 3.82 0 0 1 7.64 0Zm6.473 4.047a2.94 2.94 0 0 1-.486 1.62c-.315.476-.76.838-1.273 1.044l-.691.276.517.535.812.842-1.053 1.091-.335.348.335.347 1.053 1.091-1.619 1.678-.888-.92v-5.241l-.28-.138a2.774 2.774 0 0 1-1.098-.98 2.958 2.958 0 0 1-.168-2.917c.226-.455.566-.838.98-1.109a2.65 2.65 0 0 1 2.775-.081 2.79 2.79 0 0 1 1.038 1.05c.25.443.383.948.38 1.463Zm-1.55-1.761-.42.27.42-.27a1.434 1.434 0 0 0-.638-.542 1.396 1.396 0 0 0-1.566.32 1.491 1.491 0 0 0-.305 1.578c.105.265.286.494.52.656a1.403 1.403 0 0 0 1.813-.183 1.484 1.484 0 0 0 .175-1.83Zm-7.48 3.934c.664 0 1.32.122 1.934.359a5.18 5.18 0 0 0 1.332 1.626v4.213H.5v-1.3c0-1.291.537-2.535 1.5-3.456a5.284 5.284 0 0 1 3.649-1.443h2.824Z"
+												/>
+											</svg>
+											Add Passkey
+										</Button>
+									</div>
+
+									<PasskeyAddDevice
+										openModal={openModel}
+										setOpenModel={props.setOpenModel}
+										closeModal={function (flag: boolean): void {
+											throw new Error('Function not implemented.');
+										}}
+										registerWithPasskey={registerWithPasskey}
+									/>
+								</div>
+							</form>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export default AddPasskey;
diff --git a/src/components/Profile/DisplayProfileImg.tsx b/src/components/Profile/DisplayProfileImg.tsx
index fe73aecd7..6bab045d2 100644
--- a/src/components/Profile/DisplayProfileImg.tsx
+++ b/src/components/Profile/DisplayProfileImg.tsx
@@ -6,15 +6,12 @@ import { getFromLocalStorage } from "../../api/Auth";
 import { storageKeys } from "../../config/CommonConstant";
 
 const DisplayProfileImg = () => {
-
     const [userObj, setUserObj] = useState<UserProfile | null>(null)
-
     const getUserDetails = async () => {
         const userProfile = await getFromLocalStorage(storageKeys.USER_PROFILE)
         const orgRoles = await getFromLocalStorage(storageKeys.ORG_ROLES)
         const parsedUser = JSON.parse(userProfile)
         parsedUser.roles = orgRoles
-
         setUserObj(parsedUser)
     }
 
@@ -22,7 +19,6 @@ const DisplayProfileImg = () => {
         getUserDetails()
     }, [])
 
-
     return (
         <>
             {(userObj?.profileImg) ?
diff --git a/src/components/Profile/DisplayUserProfile.tsx b/src/components/Profile/DisplayUserProfile.tsx
index cce777def..599ff86b6 100644
--- a/src/components/Profile/DisplayUserProfile.tsx
+++ b/src/components/Profile/DisplayUserProfile.tsx
@@ -1,82 +1,92 @@
 import type { UserProfile } from "./interfaces";
 import CustomAvatar from '../Avatar'
+import { Button } from "flowbite-react";
 
 interface DisplayUserProfileProps {
     toggleEditProfile: () => void;
     userProfileInfo: UserProfile | null;
-  }
-  
-  const DisplayUserProfile = ({ toggleEditProfile, userProfileInfo }: DisplayUserProfileProps) => {
-
-    return (
-        <div className="max-w-lg mx-auto pl-2 pt-2 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 md:p-8 dark:bg-gray-800">
-
-            <div className="flow-root">
-                <ul>
-
-                    <li className="flex items-start justify-between pb-4">
-                        {(userProfileInfo?.profileImg) ? 
-                        <CustomAvatar 
-                        className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
-                        size="90"
-                        src={userProfileInfo?.profileImg} 
-                        /> :
-                         <CustomAvatar                          
-                         size="90"
-                        name={userProfileInfo?.firstName} />}
-
-
-                        <button
-                            type="button"
-                            className=""
-                            onClick={toggleEditProfile}
-                        >
-                            <svg aria-hidden="true"
-                                className="-ml-1 w-5 h-5"
-
-                                fill="currentColor"
-                                viewBox="0 0 20 20"
-                                xmlns="http://www.w3.org/2000/svg"
-                                color='#3558A8'
-                            >
-                                <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" clip-rule="evenodd"></path></svg>
-
-                        </button>
-
-
-                    </li>
-
-                    <li className="py-3">
-                        <div className="flex items-center space-x-4">
-                            <div className="flex-1 min-w-0">
-                                <p className="text-lg font-normal text-gray-500 truncate dark:text-gray-400">
-                                    Name
-                                </p>
-                                <p className="text-lg text-black truncate dark:text-white">
-                                {userProfileInfo?.firstName} {userProfileInfo?.lastName}
-                                </p>
-                            </div>
-
-                        </div>
-                    </li>
-                    <li className="py-3">
-                        <div className="flex items-center space-x-4">
-
-                            <div className="flex-1 min-w-0">
-                                <p className="text-lg font-normal text-gray-500 truncate dark:text-gray-400">
-                                    Email
-                                </p>
-                                <p className="text-lg text-black truncate dark:text-white">
-
-                                    {userProfileInfo?.email}
-                                </p>
-                            </div>
+}
+const DisplayUserProfile = ({ toggleEditProfile, userProfileInfo }: DisplayUserProfileProps) => {
+   return (
+        <div>
+            <div className='h-full'>
+                <div className='page-container relative h-full flex flex-auto flex-col px-4 py-4 sm:py-6'>
+                    <div className='container mx-auto bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700'>
+                        <div className="px-6 py-6">
+
+                            <form action="#">
+                                <div className="form-container">
+                                    <div className="flex items-center justify-between">
+
+                                        <div>
+                                            <h1 className="text-gray-500 text-xl font-medium font-montserrat dark:text-white">General</h1>
+                                            <p className="mt-2 text-gray-700 font-montserrat text-sm font-normal font-light leading-normal dark:text-white">Basic info, like your first name, last name and profile image that will be displayed</p>
+                                        </div>
+
+                                        <Button
+                                            type="button"
+                                            title="Add new credential-definition on ledger"
+                                            color='bg-primary-800'
+                                            onClick={toggleEditProfile}
+                                            className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
+                                        >
+                                            <svg className="h-5 w-6 mr-1 text-white" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="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>
+                                            Edit
+                                        </Button>
+
+                                    </div>
+
+                                    <div className="grid md:grid-cols-3 gap-4 py-8 border-b border-gray-200 dark:border-gray-600 items-center">
+                                        <div className="text-base text-gray-600 font-montserrat font-normal dark:text-white">First Name</div>
+                                        <div className="col-span-2 font-medium text-gray-900 dark:text-white">
+                                            {userProfileInfo?.firstName ? (
+                                                userProfileInfo.firstName
+                                            ) : (
+                                                "N/A"
+                                            )}
+
+                                        </div>
+                                    </div>
+                                    <div className="grid md:grid-cols-3 gap-4 py-8 border-b border-gray-200 dark:border-gray-600 items-center">
+                                        <div className="text-base text-gray-600 font-montserrat font-normal dark:text-white">Last Name</div>
+                                        <div className="col-span-2 font-medium text-gray-900 dark:text-white">
+                                            {userProfileInfo?.lastName ? (
+                                                userProfileInfo.lastName
+                                            ) : (
+                                                "N/A"
+                                            )}
+
+                                        </div>
+                                    </div>
+                                    <div className="grid md:grid-cols-3 gap-4 py-8 border-gray-200 dark:border-gray-600 items-center">
+                                        <div className="text-base text-gray-600 font-montserrat font-normal dark:text-white">Profile Image</div>
+                                        <div className="focus:ring-indigo-600 col-span-2 w-full focus-within:ring-indigo-600 focus-within:border-indigo-600 focus:border-indigo-600">
+                                            <div className="flex items-center gap-4 space-x-4">
+
+                                                {(userProfileInfo?.profileImg) ?
+                                                    <CustomAvatar
+                                                        className="mb-4 rounded-full w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
+                                                        size="90"
+                                                        src={userProfileInfo?.profileImg}
+                                                    /> :
+                                                    <CustomAvatar
+                                                        className="mb-4 border border-b rounded-full w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
+                                                        size="90"
+                                                        src={userProfileInfo?.firstName || '../../public/images/profile.png'}
+                                                        name={userProfileInfo?.firstName} />}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </form>
                         </div>
-                    </li>
-                </ul>
+                    </div>
+                </div>
             </div>
         </div>
     );
diff --git a/src/components/Profile/EditUserProfile.tsx b/src/components/Profile/EditUserProfile.tsx
index 29969e217..2c31e0660 100644
--- a/src/components/Profile/EditUserProfile.tsx
+++ b/src/components/Profile/EditUserProfile.tsx
@@ -1,20 +1,20 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { UserProfile } from "./interfaces";
-import { getFromLocalStorage, getUserProfile, updateUserProfile } from "../../api/Auth";
-import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, apiStatusCodes, imageSizeAccepted, storageKeys } from "../../config/CommonConstant";
+import { setToLocalStorage, updateUserProfile } from "../../api/Auth";
+import { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, imageSizeAccepted, storageKeys} from "../../config/CommonConstant";
 import type { AxiosResponse } from "axios";
 import CustomAvatar from '../Avatar'
 import { calculateSize, dataURItoBlob } from "../../utils/CompressImage";
-import { Avatar, Button, Label } from "flowbite-react";
-import { Field, Form, Formik, FormikHelpers } from "formik";
-import { asset } from "../../lib/data";
+import { Alert,Button} from "flowbite-react";
+import { Form, Formik, FormikHelpers } from "formik";
 import * as yup from "yup"
+import React from "react";
 
 interface Values {
   profileImg: string;
   firstName: string;
   lastName: string;
-  email:string;
+  email: string;
 }
 
 interface ILogoImage {
@@ -28,10 +28,13 @@ interface EditUserProfileProps {
   updateProfile: (updatedProfile: UserProfile) => void;
 }
 
-const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }: EditUserProfileProps) => {
+const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile}: EditUserProfileProps) => {
 
   const [loading, setLoading] = useState<boolean>(false)
   const [isImageEmpty, setIsImageEmpty] = useState(true)
+  const [success, setSuccess] = useState<string | null>(null)
+  const [failure, setFailure] = useState<string | null>(null)
+
   const [initialProfileData, setInitialProfileData] = useState({
     profileImg: userProfileInfo?.profileImg || "",
     firstName: userProfileInfo?.firstName || "",
@@ -45,15 +48,23 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
     fileName: ''
   })
 
+  const firstNameInputRef = useRef(null);
+
+  useEffect(() => {
+    if (firstNameInputRef.current) {
+      firstNameInputRef.current.focus();
+    }
+  }, []); 
+
+
   useEffect(() => {
 
     if (userProfileInfo) {
       setInitialProfileData({
         profileImg: userProfileInfo?.profileImg || "",
-        firstName: userProfileInfo.firstName || '',
-        lastName: userProfileInfo.lastName || '',
+        firstName: userProfileInfo.firstName || "",
+        lastName: userProfileInfo.lastName || "",
         email: userProfileInfo?.email,
-
       });
 
       setLogoImage({
@@ -121,7 +132,7 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
       ...logoImage,
       imagePreviewUrl: '',
     });
-  
+
     const reader = new FileReader()
     const file = event?.target?.files
 
@@ -145,197 +156,219 @@ const UpdateUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile }
 
 
   const updateUserDetails = async (values: Values) => {
-
-    console.log(`Image::`, logoImage?.imagePreviewUrl);
-
-
     setLoading(true)
 
     const userData = {
-      id: userProfileInfo?.id,
       firstName: values.firstName,
       lastName: values.lastName,
       email: values.email,
       profileImg: logoImage?.imagePreviewUrl as string || values?.profileImg
-
     }
-
     const resUpdateUserDetails = await updateUserProfile(userData)
 
     const { data } = resUpdateUserDetails as AxiosResponse
+		 setToLocalStorage(storageKeys.USER_PROFILE, userData)
 
     updateProfile(userData);
-
+    await setToLocalStorage(storageKeys.USER_PROFILE, userData);
+    window.location.reload();
     setLoading(false)
-
   }
 
   const validationSchema = yup.object().shape({
     firstName: yup.string()
-                  .required("First Name is required")
-                  .min(2, 'First name must be at least 2 characters')
-                  .max(255, 'First name must be at most 255 characters'),
+      .required("First Name is required")
+      .min(2, 'First name must be at least 2 characters')
+      .max(255, 'First name must be at most 255 characters'),
 
     lastName: yup.string()
-                 .required("Last Name is required")
-                 .min(2, 'Last name must be at least 2 characters')
-                 .max(255, 'Last name must be at most 255 characters')
+      .required("Last Name is required")
+      .min(2, 'Last name must be at least 2 characters')
+      .max(255, 'Last name must be at most 255 characters')
 
   });
 
-
   return (
-    <div
-      className="mb-4 md:p-8 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 md:p-8 dark:bg-gray-800"
-    >
-      <div className="flow-root">
-        <Formik
-          initialValues={initialProfileData}
-          onSubmit={async (
-            values: Values, 
-            { resetForm }: FormikHelpers<Values>
-            ) => {
-            if (!values.firstName || !values.lastName) {
-              return;
-            }
-        
-            updateUserDetails(values);
-            toggleEditProfile();
-          }}
-        
-          validationSchema={validationSchema}>
-          {(formikHandlers): JSX.Element => (
-            <Form onSubmit={
-              formikHandlers.handleSubmit
-            }>
-              <div
-                className="max-w-lg mx-auto mb-4 sm:p-6 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="relative justify-center sm:px-2 sm:py-2 sm:flex xl:block 2xl:flex sm:space-x-4 xl:space-x-0 2xl:space-x-4"
+    <div>
+      <div className='h-full'>
+        <div className='page-container relative h-full flex flex-auto flex-col py-4 sm:py-6'>
+          <div className='container mx-auto bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700'>
+            <div className="px-6 py-6">
+
+              {
+                (success === "Profile Updated Successfully" || failure) &&
+                <Alert
+                  color={success ? "success" : "failure"}
+                  onDismiss={() => {
+                    setSuccess(null)
+                    setFailure(null)
+                  }}
                 >
+                  <span>
+                    <p>
+                      {success || failure}
+                    </p>
+                  </span>
+                </Alert>
+              }
+
+
+              <Formik
+                initialValues={initialProfileData}
+                onSubmit={async (
+                  values: Values,
+                  { resetForm }: FormikHelpers<Values>
+                ) => {
+                 await updateUserDetails(values);
+                  toggleEditProfile();
+                }}
+
+                validationSchema={validationSchema}>
+                {(formikHandlers): JSX.Element => (
+                  <Form onSubmit={
+                    formikHandlers.handleSubmit
+                  }>
+
+                    <div>
+                      <div className="flex items-center justify-between">
+
+                        <div>
+                          <h1 className="text-gray-500 text-xl font-medium font-montserrat dark:text-white">General</h1>
+                          <p className="mt-2 text-gray-700 font-montserrat text-sm font-normal font-light leading-normal dark:text-white">Basic info, like your first name, last name and profile image that will be displayed</p>
+                        </div>
 
-                  {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="Profile Picture"
-                    />
-
-                  ) : (
-                    <CustomAvatar                          
-                    size="90"
-                   name={userProfileInfo?.firstName} />                  )}
-
-                  <div>
-                    <h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
-                      Profile Image
-                    </h3>
-                    <div className="mb-4 text-sm text-gray-500 dark:text-gray-400">
-                      JPG, JPEG and PNG . Max size of 1MB
+                      </div>
                     </div>
-                    <div className="flex items-center space-x-4">
-
-                      <div>
-                        <label htmlFor="organizationlogo">
-                          <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="organizationlogo" title=""
-                            onChange={(event): void => handleImageChange(event)} />
-                          {imgError ? <div className="text-red-500">{imgError}</div> : <span className="mt-1">{logoImage.fileName || 'No File Chosen'}</span>}
-                        </label>
+                    <div className="grid md:grid-cols-3 gap-4 py-8 border-b border-gray-200 dark:border-gray-600 items-center">
+                      <div className="text-base text-gray-700 font-montserrat dark:text-white">
+                        First Name
+                        <span className='text-red-500 text-xs'>*</span>
 
                       </div>
 
+                      <div className="focus:ring-indigo-600 col-span-2 w-full focus:ring-primary-500 focus:border-primary-500">
+                        <div className="flex flex-col">
+                          <input
+                            type="text"
+                            name="firstName"
+                            placeholder="Enter your first name"
+                            value={formikHandlers.values.firstName}
+                            onChange={formikHandlers.handleChange}
+                            onBlur={formikHandlers.handleBlur}
+                            ref={firstNameInputRef}
+                            className="bg-gray-50 py-3 px-4 font-medium text-gray-900 border border-gray-300 w-full rounded-md focus:ring-primary-500 focus:border-primary-500 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 max-w-100/6rem" />
+                          {(formikHandlers?.errors?.firstName && formikHandlers?.touched?.firstName) && (
+                            <span className="text-red-500 text-xs mt-1">
+                              {formikHandlers?.errors?.firstName}
+                            </span>
+                          )}
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                  <button
-                  type="button"
-                  className="absolute top-0 right-0  w-6 h-6 m-2 "
-                  onClick={toggleEditProfile}
-                >
-                  <svg className="-top-1 -right-6 mr-1 w-6 h-6 mb-20"
-                    width="24" height="24"
-                    viewBox="0 0 24 24"
-                    stroke-width="2"
-                    stroke="currentColor"
-                    fill="none"
-                    stroke-linecap="round"
-                    stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                    <line x1="5" y1="12" x2="11" y2="18" />
-                    <line x1="5" y1="12" x2="11" y2="6" />
-                  </svg>
-
-                </button>
-
-
-                </div>
-
-
-              </div>
-              <div className="mx-2">
-                <div
-                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                >
-                  <Label
-                    htmlFor="name"
-                    value="First Name"
-                  />
-                  <span className='text-red-500 text-xs'>*</span>
-
-                </div>
-                <Field
-                  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"
-                  type="text" id="firstName" name="firstName" />
-                {
-                  (formikHandlers?.errors?.firstName && formikHandlers?.touched?.firstName) &&
-                  <span className="text-red-500 text-xs">{formikHandlers?.errors?.firstName}</span>
-                }
-              </div>
-
-              <div className="mx-2">
-                <div
-                  className="block mb-2 mt-2 text-sm font-medium text-gray-900 dark:text-white"
-                >
 
-                  <Label
-                    htmlFor="name"
-                    value="Last Name"
-                  />
-                  <span className='text-red-500 text-xs'>*</span>
-                </div>
-                <Field
-                  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"
-
-                  type="text" id="lastName" name="lastName" />
-                {
-                  (formikHandlers?.errors?.lastName && formikHandlers?.touched?.lastName) &&
-                  <span className="text-red-500 text-xs">{formikHandlers?.errors?.lastName}</span>
-                }
-              </div>
-
-              <div className="flex flex-col items-center sm:flex-row sm:justify-end">
-                <Button type="submit"
-                  isProcessing={loading}
-                  onClick={toggleEditProfile}
-                  className='mt-4 mb-4 float-right text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
-
-                ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 18 18">
-								<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 1v12l-4-2-4 2V1h8ZM3 17h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z"/>
-							</svg>
-                  Save
-                </Button>
-              </div>
-            </Form>
-          )}
-        </Formik>
+                    <div className="grid md:grid-cols-3 gap-4 py-8 border-b border-gray-200 dark:border-gray-600 items-center">
+                      <div className="text-base text-gray-700 font-montserrat dark:text-white">
+                        Last Name
+                        <span className='text-red-500 text-xs'>*</span>
+                      </div>
 
+                      <div className="focus:ring-indigo-600 col-span-2 w-full focus:ring-primary-500 focus:border-primary-500">
+                        <div className="flex flex-col">
+                          <input
+                            name="lastName"
+                            placeholder="Enter your last name"
+                            value={formikHandlers.values.lastName}
+                            onChange={formikHandlers.handleChange}
+                            onBlur={formikHandlers.handleBlur}
+                            className="bg-gray-50 py-3 px-4 font-medium text-gray-900 border border-gray-300 w-full rounded-md focus:ring-primary-500 focus:border-primary-500 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 max-w-100/6rem" />
+                          {(formikHandlers?.errors?.lastName && formikHandlers?.touched?.lastName) && (
+                            <span className="text-red-500 text-xs mt-1">
+                              {formikHandlers?.errors?.lastName}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="grid md:grid-cols-3 gap-4 py-8 border-gray-200 dark:border-gray-600 items-center">
+                      <div className="text-base text-gray-600 font-montserrat font-normal dark:text-white">Profile Image</div>
+                      <div className="focus:ring-indigo-600 col-span-2 w-full focus-within:ring-indigo-600 focus-within:border-indigo-600 focus:border-indigo-600">
+                        <div className="flex items-center gap-4 space-x-4">
+                          {logoImage.imagePreviewUrl ? (
+                            <img
+                              className="mb-4 rounded-full w-24 h-24 sm:mb-0 xl:mb-4 2xl:mb-0"
+                              src={logoImage.imagePreviewUrl}
+                              alt="Profile Picture"
+                            />
+                          ) : (
+                            <CustomAvatar
+                              className="mb-4 rounded-full w-24 h-24 sm:mb-0 xl:mb-4 2xl:mb-0"
+                              size="90"
+                              name={userProfileInfo?.firstName} />)}
+
+                          <div className="flex flex-col mt-2">
+                            <label htmlFor="organizationlogo">
+                              <div className="px-4 py-1 bg-primary-700 hover:bg-primary-800 text-white text-center font-montserrat rounded-md">Choose file</div>
+                              <input type="file" accept="image/*" name="file"
+                                className="hidden"
+                                id="organizationlogo" title=""
+                                onChange={(event): void => handleImageChange(event)} />
+                              {imgError ? <div className="text-red-500">{imgError}</div> : <span className="mt-1 ml-2 text-sm text-gray-500 dark:text-white">{logoImage.fileName || 'No File Chosen'}</span>}
+                            </label>
+
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="mb-16">
+                    <div className='float-right p-2'>
+                      <Button
+                        type="submit"
+                        isProcessing={loading}
+                        fill="none"
+                        className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:!bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 px-3'
+                      >
+                        <svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="22" fill="none" viewBox="0 0 18 18">
+                            <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 1v12l-4-2-4 2V1h8ZM3 17h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z" />
+                          </svg>                     
+                          Save
+                      </Button>
+                    </div>
+                    <div className='float-right p-3'>
+                      <Button
+                        type="reset"
+                        color='bg-primary-800'
+                        className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-3 mr-2 ml-auto dark:text-white'
+                        onClick= {() => toggleEditProfile()}
+                        style={{ height: '2.5rem', width: '7rem', minWidth: '4rem' }}
+                      >
+                         <svg className="h-6 w-6 text-primary-700 mr-1"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            stroke-width="2"
+                            stroke="currentColor"
+                            fill="none"
+                            stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" />
+                            <line x1="18" y1="6" x2="6" y2="18" />
+                            <line x1="6" y1="6" x2="18" y2="18" />
+                          </svg>
+ 
+                        Cancel
+                      </Button>
+                    </div>
+                    </div>
+                  </Form>
+                )}
+              </Formik>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
 };
 
-export default UpdateUserProfile;
+export default EditUserProfile;
diff --git a/src/components/Profile/UserProfile.tsx b/src/components/Profile/UserProfile.tsx
new file mode 100644
index 000000000..d5c8e3cfc
--- /dev/null
+++ b/src/components/Profile/UserProfile.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import type { AxiosResponse } from 'axios';
+import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
+import { getFromLocalStorage, getUserProfile } from '../../api/Auth';
+import BreadCrumbs from '../BreadCrumbs';
+import type { UserProfile } from './interfaces';
+import DisplayUserProfile from './DisplayUserProfile';
+import React from 'react';
+import AddPasskey from './AddPasskey';
+import EditUserProfile from './EditUserProfile';
+
+const UserProfile = () => {
+  const [isEditProfileOpen, setIsEditProfileOpen] = useState(false);
+  const [prePopulatedUserProfile, setPrePopulatedUserProfile] = useState<UserProfile | null>(null);
+
+  const fetchUserProfile = async () => {
+    try {
+      const token = await getFromLocalStorage(storageKeys.TOKEN);
+      const userDetailsResponse = await getUserProfile(token);
+      const { data } = userDetailsResponse as AxiosResponse;
+
+      if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+        setPrePopulatedUserProfile(data?.data);
+      }
+    } catch (error) {
+    }
+  };
+
+  const toggleEditProfile = async () => {
+    await fetchUserProfile()
+    setIsEditProfileOpen(!isEditProfileOpen);
+  };
+
+
+  useEffect(() => {
+    fetchUserProfile();
+  }, []);
+
+
+  const updatePrePopulatedUserProfile = (updatedProfile: UserProfile) => {
+    setPrePopulatedUserProfile(updatedProfile);
+  };
+
+  return (
+
+    <div className="mb-4 col-span-full xl:mb-2 p-4">
+      <BreadCrumbs />
+      <h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
+        User's Profile
+      </h1>
+
+      <div>
+        <div className=' h-full flex flex-auto flex-col justify-between'>
+          <div className="mb-4 border-b border-gray-200 dark:border-gray-700">
+            <ul className="pl-5 flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+              <li className="mr-2" role="presentation">
+                <button
+                  className="text-xl inline-block p-4 border-b-2 rounded-t-lg text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                  id="profile-tab"
+                  data-tabs-target="#profile"
+                  type="button"
+                  role="tab"
+                  aria-controls="profile"
+                  aria-selected="false">
+                  Profile
+                </button>
+              </li>
+              <li className="mr-2" role="presentation">
+                <button
+                  className="inline-block p-4 border-b-2 rounded-t-lg text-gray-500 hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-xl"
+                  id="passkey-tab"
+                  data-tabs-target="#dashboard"
+                  type="button"
+                  role="tab"
+                  aria-controls="dashboard"
+                  aria-selected="false"
+                >
+                  Passkey
+                </button>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+        <div id="myTabContent">
+          <div className="rounded-lg bg-gray-50 dark:bg-gray-800" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+
+            {!isEditProfileOpen && prePopulatedUserProfile && (
+              <DisplayUserProfile
+                toggleEditProfile={toggleEditProfile}
+                userProfileInfo={prePopulatedUserProfile}
+              />
+            )}
+
+            {isEditProfileOpen && prePopulatedUserProfile && (
+              <EditUserProfile
+                toggleEditProfile={toggleEditProfile}
+                userProfileInfo={prePopulatedUserProfile}
+                updateProfile={updatePrePopulatedUserProfile}
+              />
+            )}
+
+          </div>
+          <div className="hidden rounded-lg bg-gray-50 dark:bg-gray-800" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
+            <AddPasskey />
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  );
+};
+
+export default UserProfile;
diff --git a/src/components/Profile/interfaces/index.ts b/src/components/Profile/interfaces/index.ts
index 799a152b5..6ed2fa620 100644
--- a/src/components/Profile/interfaces/index.ts
+++ b/src/components/Profile/interfaces/index.ts
@@ -7,23 +7,15 @@ export interface RegistrationOptionInterface {
 export interface AddPassword {
   password: string,
 }
-export interface verifyRegistrationObjInterface {
+export interface VerifyRegistrationObjInterface{
   id: string;
   rawId: string;
-  response: {
-    attestationObject: string;
-    clientDataJSON: string;
-    transports: string[];
-  };
-  type: string;
-  clientExtensionResults: {
-    credProps: {
-      rk: boolean;
-    };
-  };
-  authenticatorAttachment: string;
+  response: object;
+  authenticatorAttachment?: AuthenticatorAttachment;
+  clientExtensionResults: AuthenticationExtensionsClientOutputs;
+  type: PublicKeyCredentialType;
   challangeId: string;
-}
+};
 
 export interface IDeviceData {
   createDateTime: string
@@ -43,16 +35,18 @@ export interface DeviceDetails {
 }
 
 export interface UserEmail {
-  userName: string
+  email: string
 }
 
 export interface UserProfile {
   id: number
-  profileImg: string
-  username: string
+  profileImg?: string
+  username?: string
   email: string
   firstName: string
   lastName: string
-  isEmailVerified: boolean
-  keycloakUserId: string
-}
\ No newline at end of file
+  isEmailVerified?: boolean
+  keycloakUserId?: string
+  publicProfile?: boolean
+  isPublic?:boolean
+}
diff --git a/src/components/Resources/Schema/Create.tsx b/src/components/Resources/Schema/Create.tsx
index 9be7de13e..23d6830cc 100644
--- a/src/components/Resources/Schema/Create.tsx
+++ b/src/components/Resources/Schema/Create.tsx
@@ -2,519 +2,565 @@
 
 import * as yup from 'yup';
 
-import { Alert, Button, Card, Label, Table } from 'flowbite-react';
+import { Alert, Button, Card, Label } from 'flowbite-react';
 import { Field, FieldArray, Form, Formik } from 'formik';
-import {
-	apiStatusCodes,
-	schemaVersionRegex,
-	storageKeys,
-} from '../../../config/CommonConstant';
+import { apiStatusCodes, schemaVersionRegex, storageKeys } from '../../../config/CommonConstant';
 import { useEffect, useState } from 'react';
-
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../../BreadCrumbs';
-import type { FieldName, Values } from './interfaces';
-import SchemaCard from '../../../commonComponents/SchemaCard';
+import type { FieldName } from './interfaces';
 import { addSchema } from '../../../api/Schema';
 import { getFromLocalStorage } from '../../../api/Auth';
 import { pathRoutes } from '../../../config/pathRoutes';
+import { ICheckEcosystem, checkEcosystem, getEcosystemId } from '../../../config/ecosystem';
+import { createSchemaRequest } from '../../../api/ecosystem';
+import ConfirmModal from '../../../commonComponents/ConfirmPopup';
 
 const options = [
-	{ value: 'string', label: 'String' },
-	{ value: 'number', label: 'Number' },
-	{ value: 'date', label: 'Date' },
+    { value: 'string', label: 'String' },
+    { value: 'number', label: 'Number' },
+    { value: 'date', label: 'Date' },
 ];
 
+interface IAttributes {
+    id?: string
+    attributeName: string
+    schemaDataType: string
+    displayName: string
+}
+interface IFormData {
+    schemaName: string
+    schemaVersion: string
+    attribute: IAttributes[]
+}
+
+
 const CreateSchema = () => {
-	const [failure, setFailure] = useState<string | null>(null);
-	const [orgId, setOrgId] = useState<number>(0);
-	const [orgDid, setOrgDid] = useState<string>('');
-	const [createloader, setCreateLoader] = useState<boolean>(false);
-
-	useEffect(() => {
-		const fetchData = async () => {
-			const organizationId = await getFromLocalStorage(storageKeys.ORG_ID);
-			setOrgId(Number(organizationId));
-		};
-
-		fetchData();
-	}, []);
-
-	const submit = async (values: Values) => {
-		setCreateLoader(true);
-		const schemaFieldName: FieldName = {
-			schemaName: values.schemaName,
-			schemaVersion: values.schemaVersion,
-			attributes: values.attribute,
-			orgId: orgId,
-		};
-
-		const createSchema = await addSchema(schemaFieldName);
-		const { data } = createSchema as AxiosResponse;
-		if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
-			if (data?.data) {
-				setCreateLoader(false);
-				window.location.href = pathRoutes.organizations.schemas;
-			} else {
-				setFailure(createSchema as string);
-				setCreateLoader(false);
-			}
-		} else {
-			setCreateLoader(false);
-			setFailure(createSchema as string);
-			setTimeout(() => {
-				setFailure(null);
-			}, 4000);
-		}
-	};
-
-	return (
-		<div className="px-4 pt-6">
-			<div className="pl-6 mb-4 col-span-full xl:mb-2"> 
-				<BreadCrumbs />
-				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
-					Create Schema
-				</h1>
-			</div>
-			<div>
-				<Card className="p-6 m-6" id="createSchemaCard">
-					<div>
-						<Formik
-							initialValues={{
-								schemaName: '',
-								schemaVersion: '',
-								attribute: [
-									{
-										attributeName: '',
-										schemaDataType: 'string',
-										displayName: '',
-									},
-								],
-							}}
-							validationSchema={yup.object().shape({
-								schemaName: yup.string().trim().required('Schema is required'),
-								schemaVersion: yup
-									.string()
-									.matches(schemaVersionRegex, 'Enter valid schema version (eg. 0.1 or 0.0.1)')
-									.required('Schema version is required'),
-								attribute: yup.array().of(
-									yup.object().shape({
-										attributeName: yup
-											.mixed()
-											.required('Attribute name is required'),
-										displayName: yup
-											.mixed()
-											.required('Display name is required'),
-									}),
-								),
-							})}
-							validateOnBlur
-							validateOnChange
-							enableReinitialize
-							onSubmit={async (values): Promise<void> => {
-								values.attribute.forEach((element: any) => {
-									if (!element.schemaDataType) {
-										element.schemaDataType = 'string';
-									}
-								});
-								const updatedAttribute: Array<Number> = [];
-								values.attribute.forEach((element) => {
-									updatedAttribute.push(Number(element));
-								});
-								submit(values);
-							}}
-						>
-							{(formikHandlers): JSX.Element => (
-								<Form onSubmit={formikHandlers.handleSubmit}>
-									<div className=" md:flex items-center space-x-4 ">
-										<div className="md:w-1/3 sm:w-full md:w-96  flex-col md:flex">
-											<div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-												<Label htmlFor="schema" value="Schema" />
-												<span className="text-red-600">*</span>
-											</div>
-											<div className="md:flex flex-col lg:mr-4 sm:mr-0">
-												{' '}
-												<Field
-													id="schemaName"
-													name="schemaName"
-													placeholder="Schema Name eg. PAN CARD"
-													className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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"
-												/>
-												{formikHandlers.errors &&
-												formikHandlers.touched.schemaName &&
-												formikHandlers.errors.schemaName ? (
-													<label className="pt-1 text-red-500 text-xs h-5">
-														{formikHandlers.errors.schemaName}
-													</label>
-												) : (
-													<label className="pt-1 text-red-500 text-xs h-5"></label>
-												)}
-											</div>
-										</div>
-										<div
-											className="md:w-1/3 sm:w-full md:w-96  flex-col md:flex"
-											style={{ marginLeft: 0 }}
-										>
-											<div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-												<Label htmlFor="schema" value="Version" />
-												<span className="text-red-600">*</span>
-											</div>
-											<div className="md:flex flex-col">
-												{' '}
-												<Field
-													id="schemaVersion"
-													name="schemaVersion"
-													placeholder="eg. 0.1 or 0.0.1"
-													className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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"
-												/>
-												{formikHandlers.errors &&
-												formikHandlers.touched.schemaVersion &&
-												formikHandlers.errors.schemaVersion ? (
-													<label className="pt-1 text-red-500 text-xs h-5">
-														{formikHandlers.errors.schemaVersion}
-													</label>
-												) : (
-													<label className="pt-1 text-red-500 text-xs h-5"></label>
-												)}
-											</div>
-										</div>
-									</div>
-									<div className="pt-8">
-										<FieldArray name="attribute">
-											{(fieldArrayProps: any): JSX.Element => {
-												const { form, remove, push } = fieldArrayProps;
-												const { values } = form;
-												const { attribute } = values;
-
-												const areFirstInputsSelected =
-													values.schemaName && values.schemaVersion;
-
-												return (
-													<>
-														<div className="dark:text-white d-flex justify-content-center align-items-center mb-1">
-															Attributes <span className="dark:text-white text-red-600">*</span>
-														</div>
-														<div className="flex flex-col">
-															{attribute.map((element: any, index: number) => (
-																<div
-																	key={`attributeList-${index}`}
-																	className="mt-5"
-																>
-																	<label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white pl-1">
-																		Attribute: {index + 1}
-																	</label>
-																	<div key={index} className="md:flex pl-1">
-																		<div className="md:w-3/12 sm:w-full md:w-96  flex-col md:flex m-2">
-																			<Field
-																				id={`attribute[${index}]`}
-																				name={`attribute.${index}.attributeName`}
-																				placeholder="Attribute eg. NAME, ID"
-																				disabled={!areFirstInputsSelected}
-																				className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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"
-																			/>
-																			{formikHandlers.touched.attribute &&
-																			attribute[index] &&
-																			formikHandlers?.errors?.attribute &&
-																			formikHandlers?.errors?.attribute[
-																				index
-																			] &&
-																			formikHandlers?.touched?.attribute[index]
-																				?.attributeName &&
-																			formikHandlers?.errors?.attribute[index]
-																				?.attributeName ? (
-																				<label className="pt-1 text-red-500 text-xs h-5">
-																					{
-																						formikHandlers?.errors?.attribute[
-																							index
-																						]?.attributeName
-																					}
-																				</label>
-																			) : (
-																				<label className="pt-1 text-red-500 text-xs h-5"></label>
-																			)}
-																		</div>
-
-																		<div className="md:w-3/12 sm:w-full md:w-96  flex-col md:flex m-2 ">
-																			<Field
-																				component="select"
-																				id={`attribute[${index}]`}
-																				name={`attribute.${index}.schemaDataType`}
-																				placeholder="Select"
-																				disabled={!areFirstInputsSelected}
-																				className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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 "
-																			>
-																				{options.map((opt) => {
-																					return (
-																						<option
-																							className=""
-																							value={opt.value}
-																						>
-																							{opt.label}
-																						</option>
-																					);
-																				})}
-																			</Field>
-																			{formikHandlers?.touched?.attribute &&
-																			attribute[index] &&
-																			formikHandlers?.errors?.attribute &&
-																			formikHandlers?.errors?.attribute[
-																				index
-																			] &&
-																			formikHandlers?.touched?.attribute[index]
-																				?.schemaDataType &&
-																			formikHandlers?.errors?.attribute[index]
-																				?.schemaDataType ? (
-																				<label className="pt-1 text-red-500 text-xs h-5">
-																					{
-																						formikHandlers?.errors?.attribute[
-																							index
-																						]?.schemaDataType
-																					}
-																				</label>
-																			) : (
-																				<label className="pt-1 text-red-500 text-xs h-5"></label>
-																			)}
-																		</div>
-																		<div className="md:w-3/12 sm:w-full flex-col md:flex m-2">
-																			<Field
-																				id={`attribute[${index}]`}
-																				name={`attribute.${index}.displayName`}
-																				placeholder="Display Name"
-																				disabled={!areFirstInputsSelected}
-																				className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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 "
-																			/>
-
-																			{formikHandlers?.touched?.attribute &&
-																			attribute[index] &&
-																			formikHandlers?.errors?.attribute &&
-																			formikHandlers?.errors?.attribute[
-																				index
-																			] &&
-																			formikHandlers?.touched?.attribute[index]
-																				?.displayName &&
-																			formikHandlers?.errors?.attribute[index]
-																				?.displayName ? (
-																				<label className="pt-1 text-red-500 text-xs h-5">
-																					{
-																						formikHandlers?.errors?.attribute[
-																							index
-																						]?.displayName
-																					}
-																				</label>
-																			) : (
-																				<label className="pt-1 text-red-500 text-xs h-5"></label>
-																			)}
-																		</div>
-																		{index === 0 && attribute.length === 1 ? (
-																			''
-																		) : (
-																			<div key={index} className="text-red-600">
-																				<Button
-																					data-testid="deleteBtn"
-																					type="button"
-																					color="danger"
-																					className="mt-2"
-																					onClick={() => remove(index)}
-																					disabled={
-																						index === 0 &&
-																						attribute.length === 1
-																					}
-																				>
-																					<svg
-																						xmlns="http://www.w3.org/2000/svg"
-																						fill="none"
-																						viewBox="0 0 24 24"
-																						strokeWidth={1.5}
-																						stroke="currentColor"
-																						className="w-6 h-6"
-																					>
-																						<path
-																							strokeLinecap="round"
-																							strokeLinejoin="round"
-																							d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-																						/>
-																					</svg>
-																				</Button>
-																			</div>
-																		)}
-																		{index === attribute.length - 1 && (
-																			<Button
-																				id="addSchemaButton"
-																				className="sm:w-full md:w-1/12 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 mt-2 ml-2"
-																				type="button"
-																				color="bg-primary-700"
-																				onClick={() => push('')}
-																				outline
-																				disabled={
-																					!formikHandlers.isValid ||
-																					!formikHandlers.dirty
-																				}
-																			>
-																				<svg
-																					xmlns="http://www.w3.org/2000/svg"
-																					width="24"
-																					height="24"
-																					fill="none"
-																					viewBox="0 0 24 24"
-																					strokeWidth={2.5}
-																					stroke="currentColor"
-																					className="mr-2"
-																				>
-																					<path
-																						fill="#fff"
-																						stroke-linecap="round"
-																						stroke-linejoin="round"
-																						d="M12 4.5v15m7.5-7.5h-15"
-																					/>
-																				</svg>
-																				Add
-																			</Button>
-																		)}
-																	</div>
-																</div>
-															))}
-														</div>
-													</>
-												);
-											}}
-										</FieldArray>
-									</div>
-
-									{failure && (
-										<div className="pt-1">
-											<Alert color="failure" onDismiss={() => setFailure(null)}>
-												<span>
-													<p>{failure}</p>
-												</span>
-											</Alert>
-										</div>
-									)}
-									<div className="float-right p-2">
-										<Button
-											data-modal-target="popup-modal"
-											data-modal-toggle="popup-modal"
-											type="button"
-											color="bg-primary-700"
-											disabled={
-												!formikHandlers.isValid || !formikHandlers.dirty
-											}
-											className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
-										>
-											<svg
-												className="pr-2"
-												xmlns="http://www.w3.org/2000/svg"
-												width="24"
-												height="24"
-												fill="none"
-												viewBox="0 0 24 24"
-											>
-												<path
-													fill="#fff"
-													d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"
-												/>
-											</svg>
-											Create
-										</Button>
-									</div>
-
-									<div>
-										<div
-											id="popup-modal"
-											tabindex="-1"
-											className="fixed top-0 left-0 right-0 z-50 hidden p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full"
-										>
-											<div className="relative w-full max-w-md max-h-full">
-												<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
-													<button
-														type="button"
-														className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
-														data-modal-hide="popup-modal"
-													>
-														<svg
-															className="w-3 h-3"
-															aria-hidden="true"
-															xmlns="http://www.w3.org/2000/svg"
-															fill="none"
-															viewBox="0 0 14 14"
-														>
-															<path
-																stroke="currentColor"
-																stroke-linecap="round"
-																stroke-linejoin="round"
-																stroke-width="2"
-																d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-															/>
-														</svg>
-														<span className="sr-only">Close modal</span>
-													</button>
-													<div className="p-6 text-center">
-														<svg
-															className="mx-auto mb-4 text-yellow-300 w-12 h-12 dark:text-gray-200"
-															aria-hidden="true"
-															xmlns="http://www.w3.org/2000/svg"
-															fill="none"
-															viewBox="0 0 20 20"
-														>
-															<path
-																stroke="currentColor"
-																stroke-linecap="round"
-																stroke-linejoin="round"
-																stroke-width="2"
-																d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-															/>
-														</svg>
-														<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
-															Would you like to proceed? Keep in mind that this
-															action cannot be undone.
-														</h3>
-														<button
-															data-modal-hide="popup-modal"
-															type="button"
-															className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
-														>
-															No, cancel
-														</button>
-														<Button
-															type="submit"
-															isProcessing={createloader}
-															disabled={createloader}
-															className="text-base bg-primary-700 hover:!bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 font-medium rounded-lg text-sm inline-flex items-center text-center ml-2"
-														>
-															Yes, I'm sure
-														</Button>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-
-									<div className="float-right p-2">
-									<Button
-                        type="reset"
-                        color='bg-primary-800'
-                        onClick={() => {
-                          setCredDefAuto('')
-                        }}
-                        disabled={createloader}
-                        className='dark:text-white bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto'
-
-                        style={{ height: '2.6rem', width: '6rem', minWidth: '2rem' }}
-                      >
-                        <svg xmlns="http://www.w3.org/2000/svg" className= 'mr-2' width="18" height="18" fill="none" viewBox="0 0 20 20">
-                          <path fill="#1F4EAD" d="M19.414 9.414a.586.586 0 0 0-.586.586c0 4.868-3.96 8.828-8.828 8.828-4.868 0-8.828-3.96-8.828-8.828 0-4.868 3.96-8.828 8.828-8.828 1.96 0 3.822.635 5.353 1.807l-1.017.18a.586.586 0 1 0 .204 1.153l2.219-.392a.586.586 0 0 0 .484-.577V1.124a.586.586 0 0 0-1.172 0v.928A9.923 9.923 0 0 0 10 0a9.935 9.935 0 0 0-7.071 2.929A9.935 9.935 0 0 0 0 10a9.935 9.935 0 0 0 2.929 7.071A9.935 9.935 0 0 0 10 20a9.935 9.935 0 0 0 7.071-2.929A9.935 9.935 0 0 0 20 10a.586.586 0 0 0-.586-.586Z" />
-                        </svg>
-
-                        Reset
-                      </Button>
-									</div>
-								</Form>
-							)}
-						</Formik>
-					</div>
-				</Card>
-			</div>
-		</div>
-	);
+    const [failure, setFailure] = useState<string | null>(null);
+    const [orgId, setOrgId] = useState<number>(0);
+    const [createloader, setCreateLoader] = useState<boolean>(false);
+    const [showPopup, setShowPopup] = useState(false)
+    const [isEcosystemData, setIsEcosystemData] = useState<ICheckEcosystem>();
+
+    const initFormData: IFormData = {
+        schemaName: '',
+        schemaVersion: '',
+        attribute: [
+            {
+                attributeName: '',
+                schemaDataType: 'string',
+                displayName: '',
+            }
+        ]
+    }
+    const [formData, setFormData] = useState(initFormData)
+    useEffect(() => {
+        const fetchData = async () => {
+            const organizationId = await getFromLocalStorage(
+                storageKeys.ORG_ID);
+            setOrgId(Number(organizationId));
+        };
+
+        fetchData();
+
+        const checkEcosystemData = async () => {
+            const data: ICheckEcosystem = await checkEcosystem();
+            setIsEcosystemData(data)
+        }
+
+        checkEcosystemData();
+
+    }, []);
+
+    const submit = async (values: IFormData) => {
+        setCreateLoader(true);
+        const schemaFieldName: FieldName = {
+            schemaName: values.schemaName,
+            schemaVersion: values.schemaVersion,
+            attributes: values.attribute,
+            orgId: orgId,
+        };
+
+        const createSchema = await addSchema(schemaFieldName, orgId);
+        const { data } = createSchema as AxiosResponse;
+        if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+
+            if (data?.data) {
+                setCreateLoader(false);
+                window.location.href = pathRoutes.organizations.schemas;
+
+            } else {
+                setFailure(createSchema as string);
+                setCreateLoader(false);
+            }
+        } else {
+            setCreateLoader(false);
+            setFailure(createSchema as string);
+            setTimeout(() => {
+                setFailure(null);
+            }, 4000);
+        }
+    };
+
+    const submitSchemaCreationRequest = async (values: IFormData) => {
+        setCreateLoader(true);
+        const schemaFieldName = {
+            endorse: true,
+            attributes: values.attribute,
+            version: values.schemaVersion,
+            name: values.schemaName,
+        }
+
+        const id = await getEcosystemId()
+
+        const createSchema = await createSchemaRequest(schemaFieldName, id, orgId);
+        const { data } = createSchema as AxiosResponse;
+        if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+            setCreateLoader(false);
+            window.location.href = pathRoutes.ecosystem.endorsements;
+        } else {
+            setCreateLoader(false);
+            setFailure(createSchema as string);
+            setTimeout(() => {
+                setFailure(null);
+            }, 4000);
+        }
+        setShowPopup(false)
+    };
+
+
+    const formTitle = isEcosystemData?.isEcosystemMember ? "Schema Endorsement" : "Create Schema"
+    const submitButtonTitle = isEcosystemData?.isEcosystemMember ? {
+        title: "Request Endorsement",
+        svg: <svg className='mr-2 mt-1' xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 25 25">
+            <path fill="currentColor" d="M21.094 0H3.906A3.906 3.906 0 0 0 0 3.906v12.5a3.906 3.906 0 0 0 3.906 3.907h.781v3.906a.781.781 0 0 0 1.335.553l4.458-4.46h10.614A3.906 3.906 0 0 0 25 16.407v-12.5A3.907 3.907 0 0 0 21.094 0Zm2.343 16.406a2.343 2.343 0 0 1-2.343 2.344H10.156a.782.782 0 0 0-.553.228L6.25 22.333V19.53a.781.781 0 0 0-.781-.781H3.906a2.344 2.344 0 0 1-2.344-2.344v-12.5a2.344 2.344 0 0 1 2.344-2.344h17.188a2.343 2.343 0 0 1 2.343 2.344v12.5Zm-3.184-5.951a.81.81 0 0 1-.17.254l-3.125 3.125a.781.781 0 0 1-1.105-1.106l1.792-1.79h-7.489a2.343 2.343 0 0 0-2.344 2.343.781.781 0 1 1-1.562 0 3.906 3.906 0 0 1 3.906-3.906h7.49l-1.793-1.79a.78.78 0 0 1 .254-1.277.781.781 0 0 1 .852.17l3.125 3.125a.79.79 0 0 1 .169.852Z" />
+        </svg>
+    } : {
+        title: "Create",
+        svg: <div className='pr-3'>
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+            </svg>
+        </div>
+    }
+
+    const confirmCreateSchema = () => {
+        if (isEcosystemData?.isEnabledEcosystem && isEcosystemData?.isEcosystemMember) {
+            console.log("Submitted for endorsement by ecosystem member")
+            submitSchemaCreationRequest(formData)
+        } else {
+            formData.attribute.forEach((element: any) => {
+                if (!element.schemaDataType) {
+                    element.schemaDataType = 'string';
+                }
+            });
+            const updatedAttribute: Array<Number> = [];
+            formData.attribute.forEach((element) => {
+                updatedAttribute.push(Number(element));
+            });
+            submit(formData);
+        }
+    }
+
+    return (
+        <div className="px-4 pt-6">
+            <div className="pl-6 mb-4 col-span-full xl:mb-2">
+                <BreadCrumbs />
+                <h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
+                    {formTitle}
+                </h1>
+            </div>
+            <div>
+                <Card className="p-6 m-6" id="createSchemaCard">
+                    <div>
+                        <Formik
+                            initialValues={formData}
+                            validationSchema={yup.object().shape({
+                                schemaName: yup.string().trim().required('Schema is required'),
+                                schemaVersion: yup
+                                    .string()
+                                    .matches(schemaVersionRegex, 'Enter valid schema version (eg. 0.1 or 0.0.1)')
+                                    .required('Schema version is required'),
+                                attribute: yup.array().of(
+                                    yup.object().shape({
+                                        attributeName: yup
+                                            .mixed()
+                                            .required('Attribute name is required'),
+                                        displayName: yup
+                                            .mixed()
+                                            .required('Display name is required'),
+                                    }),
+                                ),
+                            })}
+                            validateOnBlur
+                            validateOnChange
+                            enableReinitialize
+                            onSubmit={async (values): Promise<void> => {
+                                setFormData(values)
+                                setShowPopup(true)
+                            }}
+                        >
+                            {(formikHandlers): JSX.Element => (
+                                <Form onSubmit={formikHandlers.handleSubmit}>
+
+                                    <div className=" md:flex items-center space-x-4 ">
+                                        <div className="md:w-1/3 sm:w-full md:w-96  flex-col md:flex">
+                                            <div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                                <Label htmlFor="schema" value="Schema" />
+                                                <span className="text-red-600">*</span>
+
+                                            </div>
+                                            <div className="md:flex flex-col lg:mr-4 sm:mr-0">
+                                                {' '}
+                                                <Field
+                                                    id="schemaName"
+                                                    name="schemaName"
+                                                    placeholder="Schema Name eg. PAN CARD"
+                                                    className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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"
+                                                />
+                                                {formikHandlers.errors &&
+                                                    formikHandlers.touched.schemaName &&
+                                                    formikHandlers.errors.schemaName ? (
+                                                    <label className="pt-1 text-red-500 text-xs h-5">
+                                                        {formikHandlers.errors.schemaName}
+                                                    </label>
+                                                ) : (
+                                                    <label className="pt-1 text-red-500 text-xs h-5"></label>
+                                                )}
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="md:w-1/3 sm:w-full md:w-96  flex-col md:flex"
+                                            style={{ marginLeft: 0 }}
+                                        >
+                                            <div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                                                <Label htmlFor="schema" value="Version" />
+                                                <span className="text-red-600">*</span>
+
+                                            </div>
+                                            <div className="md:flex flex-col">
+                                                {' '}
+                                                <Field
+                                                    id="schemaVersion"
+                                                    name="schemaVersion"
+                                                    placeholder="eg. 0.1 or 0.0.1"
+                                                    className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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"
+                                                />
+                                                {formikHandlers.errors &&
+                                                    formikHandlers.touched.schemaVersion &&
+                                                    formikHandlers.errors.schemaVersion ? (
+
+                                                    <label className="pt-1 text-red-500 text-xs h-5">
+                                                        {formikHandlers.errors.schemaVersion}
+
+                                                    </label>
+                                                ) : (
+                                                    <label className="pt-1 text-red-500 text-xs h-5"></label>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="pt-8">
+                                        <FieldArray name="attribute">
+                                            {(fieldArrayProps: any): JSX.Element => {
+                                                const { form, remove, push } = fieldArrayProps;
+                                                const { values } = form;
+                                                const { attribute } = values;
+
+                                                const areFirstInputsSelected =
+                                                    values.schemaName && values.schemaVersion;
+
+                                                return (
+                                                    <>
+                                                        <div className="dark:text-white d-flex justify-content-center align-items-center mb-1">
+                                                            Attributes <span className="text-red-600">*</span>
+
+                                                        </div>
+                                                        <div className="flex flex-col">
+                                                            {attribute.map((element: IAttributes, index: number) => (
+                                                                <div
+                                                                    key={`attributeList-${index}`}
+                                                                    className="mt-5"
+                                                                >
+                                                                    <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white pl-1">
+                                                                        Attribute: {index + 1}
+                                                                    </label>
+                                                                    <Card className='cursor-pointer overflow-hidden overflow-ellipsis' style={{ overflow: 'auto' }}>
+                                                                        <div key={element.id} className="grid min-[320]:grid-cols-1 sm:grid-cols-4 md:grid-cols-4 gap-2">
+                                                                            <div className="sm:w-full m-2 p-2">
+                                                                                <Field
+                                                                                    id={`attribute[${index}]`}
+                                                                                    name={`attribute.${index}.attributeName`}
+
+                                                                                    placeholder="Attribute eg. NAME, ID"
+                                                                                    disabled={!areFirstInputsSelected}
+
+                                                                                    className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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"
+                                                                                />
+                                                                                {formikHandlers.touched.attribute &&
+                                                                                    attribute[index] &&
+                                                                                    formikHandlers?.errors?.attribute &&
+                                                                                    formikHandlers?.errors?.attribute[
+                                                                                    index
+                                                                                    ] &&
+                                                                                    formikHandlers?.touched?.attribute[index]
+                                                                                        ?.attributeName &&
+                                                                                    formikHandlers?.errors?.attribute[index]
+
+                                                                                        ?.attributeName ? (
+                                                                                    <label className="pt-1 text-red-500 text-xs h-5">
+                                                                                        {
+                                                                                            formikHandlers?.errors?.attribute[
+
+                                                                                                index
+                                                                                            ]?.attributeName
+                                                                                        }
+                                                                                    </label>
+                                                                                ) : (
+                                                                                    <label className="pt-1 text-red-500 text-xs h-5"></label>
+                                                                                )}
+                                                                            </div>
+
+                                                                            <div className="sm:w-full m-2 p-2">
+                                                                                <Field
+                                                                                    component="select"
+                                                                                    id={`attribute[${index}]`}
+                                                                                    name={`attribute.${index}.schemaDataType`}
+                                                                                    placeholder="Select"
+                                                                                    disabled={!areFirstInputsSelected}
+
+                                                                                    className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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 "
+                                                                                >
+                                                                                    {options.map((opt) => {
+                                                                                        return (
+                                                                                            <option
+                                                                                                key={opt.value}
+                                                                                                className=""
+                                                                                                value={opt.value}
+                                                                                            >
+                                                                                                {opt.label}
+                                                                                            </option>
+                                                                                        );
+                                                                                    })}
+                                                                                </Field>
+                                                                                {formikHandlers?.touched?.attribute &&
+                                                                                    attribute[index] &&
+                                                                                    formikHandlers?.errors?.attribute &&
+                                                                                    formikHandlers?.errors?.attribute[
+                                                                                    index
+                                                                                    ] &&
+                                                                                    formikHandlers?.touched?.attribute[index]
+                                                                                        ?.schemaDataType &&
+                                                                                    formikHandlers?.errors?.attribute[index]
+
+                                                                                        ?.schemaDataType ? (
+                                                                                    <label className="pt-1 text-red-500 text-xs h-5">
+                                                                                        {
+                                                                                            formikHandlers?.errors?.attribute[
+
+                                                                                                index
+                                                                                            ]?.schemaDataType
+                                                                                        }
+                                                                                    </label>
+                                                                                ) : (
+                                                                                    <label className="pt-1 text-red-500 text-xs h-5"></label>
+                                                                                )}
+                                                                            </div>
+                                                                            <div className="sm:w-full m-2 p-2">
+                                                                                <Field
+                                                                                    id={`attribute[${index}]`}
+                                                                                    name={`attribute.${index}.displayName`}
+
+                                                                                    placeholder="Display Name"
+                                                                                    disabled={!areFirstInputsSelected}
+
+                                                                                    className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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 "
+                                                                                />
+
+                                                                                {formikHandlers?.touched?.attribute &&
+                                                                                    attribute[index] &&
+                                                                                    formikHandlers?.errors?.attribute &&
+                                                                                    formikHandlers?.errors?.attribute[
+                                                                                    index
+                                                                                    ] &&
+                                                                                    formikHandlers?.touched?.attribute[index]
+                                                                                        ?.displayName &&
+                                                                                    formikHandlers?.errors?.attribute[index]
+
+                                                                                        ?.displayName ? (
+                                                                                    <label className="pt-1 text-red-500 text-xs h-5">
+                                                                                        {
+                                                                                            formikHandlers?.errors?.attribute[
+
+                                                                                                index
+                                                                                            ]?.displayName
+                                                                                        }
+                                                                                    </label>
+                                                                                ) : (
+                                                                                    <label className="pt-1 text-red-500 text-xs h-5"></label>
+                                                                                )}
+                                                                            </div>
+
+
+
+                                                                            <div className='sm:w-full items-center flex flex-wrap min-[320]:justify-between min-[320]:space-x-2 xl:space-x-6 m-2 py-2'>
+                                                                                {index === 0 && attribute.length === 1 ? (
+                                                                                    <div key={element.id} className="sm:w-0.5/3 text-red-600 hidden">
+                                                                                        <Button
+                                                                                            data-testid="deleteBtn"
+                                                                                            type="button"
+                                                                                            color="danger"
+                                                                                            onClick={() => remove(index)}
+                                                                                            disabled={
+                                                                                                index === 0 &&
+                                                                                                attribute.length === 1
+                                                                                            }
+                                                                                        >
+                                                                                            <svg
+                                                                                                xmlns="http://www.w3.org/2000/svg"
+                                                                                                fill="none"
+                                                                                                viewBox="0 0 24 24"
+                                                                                                strokeWidth={1.5}
+                                                                                                stroke="currentColor"
+                                                                                                className="w-6 h-6"
+                                                                                            >
+                                                                                                <path
+                                                                                                    strokeLinecap="round"
+                                                                                                    strokeLinejoin="round"
+                                                                                                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                                                                                                />
+                                                                                            </svg>
+                                                                                        </Button>
+                                                                                    </div>
+                                                                                ) : (
+
+                                                                                    <div key={element.id} className="sm:w-0.5/3 text-red-600">
+                                                                                        <Button
+                                                                                            data-testid="deleteBtn"
+                                                                                            type="button"
+                                                                                            color="danger"
+                                                                                            onClick={() => remove(index)}
+                                                                                            disabled={
+                                                                                                index === 0 &&
+                                                                                                attribute.length === 1
+                                                                                            }
+                                                                                        >
+                                                                                            <svg
+                                                                                                xmlns="http://www.w3.org/2000/svg"
+                                                                                                fill="none"
+                                                                                                viewBox="0 0 24 24"
+                                                                                                strokeWidth={1.5}
+                                                                                                stroke="currentColor"
+                                                                                                className="w-6 h-6"
+                                                                                            >
+                                                                                                <path
+                                                                                                    strokeLinecap="round"
+                                                                                                    strokeLinejoin="round"
+                                                                                                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                                                                                                />
+                                                                                            </svg>
+                                                                                        </Button>
+                                                                                    </div>
+                                                                                )}
+
+                                                                                {index === attribute.length - 1 && (
+                                                                                    <div key={element.id} className="justify-end sm:w-2.5/3 text-red-600 sm:ml-0 md:ml-0 lg:ml-0">
+
+                                                                                        <Button
+                                                                                            id="addSchemaButton"
+                                                                                            className="text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+                                                                                            type="button"
+                                                                                            color="bg-primary-700"
+                                                                                            onClick={() => push('')}
+                                                                                            outline
+                                                                                            disabled={
+                                                                                                !formikHandlers.isValid ||
+                                                                                                !formikHandlers.dirty
+                                                                                            }
+                                                                                        >
+                                                                                            <svg
+                                                                                                xmlns="http://www.w3.org/2000/svg"
+                                                                                                width="22"
+                                                                                                height="22"
+                                                                                                fill="none"
+                                                                                                viewBox="0 0 24 24"
+                                                                                                strokeWidth={2.5}
+                                                                                                stroke="currentColor"
+                                                                                            >
+                                                                                                <path
+                                                                                                    fill="#fff"
+                                                                                                    stroke-linecap="round"
+                                                                                                    stroke-linejoin="round"
+                                                                                                    d="M12 4.5v15m7.5-7.5h-15"
+                                                                                                />
+                                                                                            </svg>
+                                                                                            <span className="hidden xl:inline-block ml-2">
+                                                                                                Add
+                                                                                            </span>
+                                                                                        </Button>
+                                                                                    </div>
+                                                                                )}
+                                                                            </div>
+                                                                        </div>
+                                                                    </Card>
+                                                                </div>
+                                                            ))}
+                                                        </div>
+                                                    </>
+                                                );
+                                            }}
+                                        </FieldArray>
+                                    </div>
+
+                                    {failure && (
+                                        <div className="pt-4">
+                                            <Alert color="failure" onDismiss={() => setFailure(null)}>
+                                                <span>
+                                                    <p>{failure}</p>
+                                                </span>
+                                            </Alert>
+                                        </div>
+                                    )}
+                                    <div className="float-right p-2">
+                                        <Button
+                                            type="submit"
+                                            color="bg-primary-700"
+                                            disabled={
+                                                !formikHandlers.isValid
+                                            }
+                                            className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto mt-2 min-w-[6rem] h-[2.6rem]'
+                                        >
+                                            {submitButtonTitle.svg}
+                                            {submitButtonTitle.title}
+                                        </Button>
+                                    </div>
+
+                                    <ConfirmModal openModal={showPopup} closeModal={() => setShowPopup(false)} onSuccess={confirmCreateSchema} message={"Would you like to proceed? Keep in mind that this action cannot be undone."} isProcessing={createloader} />
+
+                                    <div className="float-right p-2 mt-2">
+                                        <Button
+                                            type="reset"
+                                            color='bg-primary-800'
+                                            disabled={createloader}
+                                            className='dark:text-white bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto dark:hover:text-black'
+
+                                            style={{ height: '2.6rem', width: '6rem', minWidth: '2rem' }}
+                                        >
+                                            <svg xmlns="http://www.w3.org/2000/svg" className='mr-2 dark:text-white dark:group-hover:text-primary-700' width="18" height="18" fill="none" viewBox="0 0 20 20">
+                                                <path fill="currentColor" d="M19.414 9.414a.586.586 0 0 0-.586.586c0 4.868-3.96 8.828-8.828 8.828-4.868 0-8.828-3.96-8.828-8.828 0-4.868 3.96-8.828 8.828-8.828 1.96 0 3.822.635 5.353 1.807l-1.017.18a.586.586 0 1 0 .204 1.153l2.219-.392a.586.586 0 0 0 .484-.577V1.124a.586.586 0 0 0-1.172 0v.928A9.923 9.923 0 0 0 10 0a9.935 9.935 0 0 0-7.071 2.929A9.935 9.935 0 0 0 0 10a9.935 9.935 0 0 0 2.929 7.071A9.935 9.935 0 0 0 10 20a9.935 9.935 0 0 0 7.071-2.929A9.935 9.935 0 0 0 20 10a.586.586 0 0 0-.586-.586Z" />
+                                            </svg>
+
+                                            Reset
+                                        </Button>
+                                    </div>
+                                </Form>
+                            )}
+                        </Formik>
+                    </div>
+                </Card>
+            </div>
+        </div>
+    );
 };
 
 export default CreateSchema;
diff --git a/src/components/Resources/Schema/SchemasList.tsx b/src/components/Resources/Schema/SchemasList.tsx
index 445e56ee0..f2ac944e2 100644
--- a/src/components/Resources/Schema/SchemasList.tsx
+++ b/src/components/Resources/Schema/SchemasList.tsx
@@ -1,19 +1,24 @@
 'use client';
 
-import { Alert, Button, Card, Pagination, Table, } from 'flowbite-react';
+import { Alert, Pagination } from 'flowbite-react';
 import { ChangeEvent, useEffect, useState } from 'react';
 import type { GetAllSchemaListParameter, PaginationData } from './interfaces';
 import { apiStatusCodes, storageKeys } from '../../../config/CommonConstant';
+import { getAllSchemas, getAllSchemasByOrgId } from '../../../api/Schema';
+
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../../BreadCrumbs';
+import CustomSpinner from '../../CustomSpinner';
+import { EmptyListMessage } from '../../EmptyListComponent';
+import { Features } from '../../../utils/enums/features';
+import RoleViewButton from '../../RoleViewButton';
 import SchemaCard from '../../../commonComponents/SchemaCard';
+import type { SchemaDetails } from '../../Verification/interface';
 import SearchInput from '../../SearchInput';
-import { getAllSchemasByOrgId, getAllSchemas } from '../../../api/Schema';
 import { getFromLocalStorage } from '../../../api/Auth';
 import { pathRoutes } from '../../../config/pathRoutes';
-import { EmptyListMessage } from '../../EmptyListComponent';
-import type { SchemaDetails } from '../../Verification/interface';
-import CustomSpinner from '../../CustomSpinner';
+import { getOrganizationById } from '../../../api/organization';
+import { ICheckEcosystem, checkEcosystem } from '../../../config/ecosystem';
 
 const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaDetails: SchemaDetails) => void; }) => {
 	const [schemaList, setSchemaList] = useState([])
@@ -28,9 +33,11 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 		sortBy: "id",
 		sortingOrder: "DESC",
 		allSearch: ""
-
 	})
+	const [walletStatus, setWalletStatus] = useState(false)
 	const [totalItem, setTotalItem] = useState(0)
+	const [isEcosystemData, setIsEcosystemData] = useState<ICheckEcosystem>();
+
 	const getSchemaList = async (schemaListAPIParameter: GetAllSchemaListParameter, flag: boolean) => {
 		try {
 			const organizationId = await getFromLocalStorage(storageKeys.ORG_ID);
@@ -107,9 +114,11 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 		}
 		props.schemaSelectionCallback(schemaId, schemaDetails)
 	}
+
 	const options = ["All schemas"]
 
 	const handleFilter = (e: React.ChangeEvent<HTMLSelectElement>) => {
+		console.log("Handle filter", e.target.value)
 		if (e.target.value === 'All schemas') {
 			setAllSchemaFlag(true)
 		}
@@ -119,6 +128,43 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 		}
 	};
 
+	const fetchOrganizationDetails = async () => {
+		setLoading(true)
+		const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+		const response = await getOrganizationById(orgId);
+		const { data } = response as AxiosResponse
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			if (data?.data?.org_agents && data?.data?.org_agents?.length > 0) {
+				setWalletStatus(true)
+			}
+		}
+		setLoading(false)
+	}
+
+	useEffect(() => {
+		fetchOrganizationDetails()
+		const checkEcosystemData = async () => {
+			const data: ICheckEcosystem = await checkEcosystem();
+			setIsEcosystemData(data)
+		}
+
+		checkEcosystemData();
+	}, [])
+
+	const schemaEndorsement = <svg className='mr-2 mt-1' xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 25 25">
+	<path fill="#fff" d="M21.094 0H3.906A3.906 3.906 0 0 0 0 3.906v12.5a3.906 3.906 0 0 0 3.906 3.907h.781v3.906a.781.781 0 0 0 1.335.553l4.458-4.46h10.614A3.906 3.906 0 0 0 25 16.407v-12.5A3.907 3.907 0 0 0 21.094 0Zm2.343 16.406a2.343 2.343 0 0 1-2.343 2.344H10.156a.782.782 0 0 0-.553.228L6.25 22.333V19.53a.781.781 0 0 0-.781-.781H3.906a2.344 2.344 0 0 1-2.344-2.344v-12.5a2.344 2.344 0 0 1 2.344-2.344h17.188a2.343 2.343 0 0 1 2.343 2.344v12.5Zm-3.184-5.951a.81.81 0 0 1-.17.254l-3.125 3.125a.781.781 0 0 1-1.105-1.106l1.792-1.79h-7.489a2.343 2.343 0 0 0-2.344 2.343.781.781 0 1 1-1.562 0 3.906 3.906 0 0 1 3.906-3.906h7.49l-1.793-1.79a.78.78 0 0 1 .254-1.277.781.781 0 0 1 .852.17l3.125 3.125a.79.79 0 0 1 .169.852Z" />
+</svg>
+
+const create = <div className='pr-3'>
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+	<path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+</svg>
+</div>
+
+	const createSchemaTitle = isEcosystemData?.isEcosystemMember ? { title: "Schema Endorsement", svg: schemaEndorsement	} : { title: "Create", svg: create }
+	const emptyListTitle = "No Schemas"
+	const emptyListDesc = "Get started by creating a new Schema"
+	const emptyListBtn = isEcosystemData?.isEcosystemMember ? { title: "Schema Endorsement", svg: schemaEndorsement	} : { title: "Create Schema", svg: create }
 	return (
 		<div className="px-4 pt-6">
 			<div className="mb-4 col-span-full xl:mb-2">
@@ -132,12 +178,13 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 					className=""
 				>
 					<div className="flex flex-col items-center justify-between mb-4 pr-4 sm:flex-row">
-						<div id='schemasSearchInput' className='mb-2 pl-2 flex space-x-2 items-end'>
+						<div id='schemasSearchInput' className='mb-2 pl-0 sm:pl-2 flex space-x-2 items-end'>
 							<SearchInput
 								onInputChange={onSearch}
 							/>
-							<select onChange={handleFilter} id="schamfilter" 
-							className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-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-blue-500 dark:focus:border-blue-500 h-11">
+
+							<select onChange={handleFilter} id="schamfilter"
+								className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-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-blue-500 dark:focus:border-blue-500 h-11">
 								<option selected>Organization's schema</option>
 								{options.map((opt) => (
 									<option
@@ -149,21 +196,30 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 									</option>
 								))}
 							</select>
+
 						</div>
 						<div className='flex space-x-2'>
-							<Button
-								id='createSchemaButton'
-								onClick={() => {
+							{walletStatus ? <RoleViewButton
+								buttonTitle={createSchemaTitle.title}
+								feature={Features.CRETAE_SCHEMA}
+								svgComponent={
+									createSchemaTitle.svg
+								}
+								onClickEvent={() => {
 									window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
 								}}
-								className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:!bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
-								title='Create New Schema'
-							>
-								<svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
-									<path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
-								</svg>
-								Create
-							</Button>
+							/>
+								:
+								<RoleViewButton
+									buttonTitle={createSchemaTitle.title}
+									feature={Features.CRETAE_SCHEMA}
+									svgComponent={
+										createSchemaTitle.svg
+									}
+									onClickEvent={() => {
+										window.location.href = `${pathRoutes.organizations.dashboard}?OrgId=${orgId}`
+									}}
+								/>}
 						</div>
 					</div>
 				</div>
@@ -180,18 +236,13 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 						</span>
 					</Alert>
 				}
-				{loading
-					? (<div className="flex items-center justify-center mb-4">
-						
-						<CustomSpinner/>
-					</div>)
-					:
+				{
 					schemaList && schemaList.length > 0 ? (
 						<div className='Flex-wrap' style={{ display: 'flex', flexDirection: 'column' }}>
 							<div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
 								{schemaList && schemaList.length > 0 &&
 									schemaList.map((element, key) => (
-										<div className='p-2' key={key}>
+										<div className='px-0 sm:px-2' key={`SchemaList-${key}`}>
 											<SchemaCard schemaName={element['name']} version={element['version']} schemaId={element['schemaLedgerId']} issuerDid={element['issuerId']} attributes={element['attributes']} created={element['createDateTime']}
 												onClickCallback={schemaSelectionCallback} />
 										</div>
@@ -199,7 +250,7 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 							</div>
 							<div className="flex items-center justify-end mb-4" id="schemasPagination">
 
-								{schemaList.length> 0 &&(<Pagination
+								{schemaList.length > 0 && (<Pagination
 									currentPage={schemaListAPIParameter?.page}
 									onPageChange={(page) => {
 										setSchemaListAPIParameter(prevState => ({
@@ -210,17 +261,30 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 									totalPages={Math.ceil(totalItem / schemaListAPIParameter?.itemPerPage)}
 								/>)}
 							</div>
-						</div>) : (<EmptyListMessage
-							message={'No Schemas'}
-							description={'Get started by creating a new Schema'}
-							buttonContent={'Create Schema'}
-							svgComponent={<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
-								<path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
-							</svg>}
-							onClick={() => {
-								window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
-							}}
-						/>)
+						</div>)
+						:
+						(
+							<div>
+								{
+									!(schemaList && schemaList.length > 0) && loading ?
+										(<div className="flex items-center justify-center mb-4">
+											<CustomSpinner />
+										</div>)
+										:
+										(
+											<EmptyListMessage
+												message={emptyListTitle}
+												description={emptyListDesc}
+												buttonContent={emptyListBtn.title}
+												svgComponent={emptyListBtn.svg}
+												onClick={() => {
+													window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
+												}}
+											/>
+										)
+								}
+							</div>
+						)
 				}
 			</div>
 		</div>
@@ -230,4 +294,4 @@ const SchemaList = (props: { schemaSelectionCallback: (schemaId: string, schemaD
 }
 
 
-export default SchemaList
\ No newline at end of file
+export default SchemaList
diff --git a/src/components/Resources/Schema/ViewSchema.tsx b/src/components/Resources/Schema/ViewSchema.tsx
index 6d23faa25..831ed31f5 100644
--- a/src/components/Resources/Schema/ViewSchema.tsx
+++ b/src/components/Resources/Schema/ViewSchema.tsx
@@ -1,20 +1,23 @@
+import * as yup from 'yup';
 
 import { Alert, Button, Card, Label, Pagination } from 'flowbite-react';
 import { Field, Form, Formik } from 'formik';
-import { useEffect, useState } from 'react';
-import BreadCrumbs from '../../BreadCrumbs';
-import * as yup from 'yup';
 import { apiStatusCodes, storageKeys } from '../../../config/CommonConstant';
-import CredDeffCard from '../../../commonComponents/CredentialDefinitionCard';
 import { createCredentialDefinition, getCredDeffById, getSchemaById } from '../../../api/Schema';
+import { getFromLocalStorage, setToLocalStorage } from '../../../api/Auth';
+import { useEffect, useState } from 'react';
+import BackButton from '../../../commonComponents/backbutton'
 import type { AxiosResponse } from 'axios';
+import BreadCrumbs from '../../BreadCrumbs';
+import CredDeffCard from '../../../commonComponents/CredentialDefinitionCard';
 import type { CredDeffFieldNameType } from './interfaces';
-import { getFromLocalStorage, setToLocalStorage } from '../../../api/Auth';
+import CustomSpinner from '../../CustomSpinner';
 import { EmptyListMessage } from '../../EmptyListComponent';
+import { Roles } from '../../../utils/enums/roles';
 import { nanoid } from 'nanoid';
 import { pathRoutes } from '../../../config/pathRoutes';
-import CustomSpinner from '../../CustomSpinner';
-import React from 'react';
+import { ICheckEcosystem, checkEcosystem, getEcosystemId } from '../../../config/ecosystem';
+import { createCredDefRequest } from '../../../api/ecosystem';
 
 interface Values {
   tagName: string;
@@ -36,10 +39,17 @@ type SchemaData = {
   };
 };
 
+interface ICredDefCard {
+  tag: string,
+  credentialDefinitionId: string
+  schemaLedgerId: string
+  revocable: boolean
+}
+
 
 
 const ViewSchemas = () => {
-  const [schemaDetails, setSchemaDetails] = useState<SchemaData>(null);
+  const [schemaDetails, setSchemaDetails] = useState<SchemaData | null>(null);
   const [credDeffList, setCredDeffList] = useState<any>([]);
   const [loading, setLoading] = useState<boolean>(true)
   const [createloader, setCreateLoader] = useState<boolean>(false)
@@ -47,14 +57,19 @@ const ViewSchemas = () => {
   const [success, setSuccess] = useState<string | null>(null)
   const [credDefListErr, setCredDefListErr] = useState<string | null>(null)
   const [schemaDetailErr, setSchemaDetailErr] = useState<string | null>(null)
-  const [failure, setFailur] = useState<string | null>(null)
+  const [failure, setFailure] = useState<string | null>(null)
   const [orgId, setOrgId] = useState<number>(0)
   const [credDefAuto, setCredDefAuto] = useState<string>('')
+  const [isEcosystemData, setIsEcosystemData] = useState<ICheckEcosystem>();
 
-  const getSchemaDetails = async (id: string, organizationId: number) => {
+
+  const [userRoles, setUserRoles] = useState<string[]>([])
+
+
+  const getSchemaDetails = async (SchemaId: string, organizationId: number) => {
     try {
       setLoading(true);
-      const SchemaDetails = await getSchemaById(id, organizationId);
+      const SchemaDetails = await getSchemaById(SchemaId, organizationId);
       const { data } = SchemaDetails as AxiosResponse;
 
       if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
@@ -109,28 +124,74 @@ const ViewSchemas = () => {
     fetchData();
   }, []);
 
+  const getUserRoles = async () => {
+    const orgRoles = await getFromLocalStorage(storageKeys.ORG_ROLES)
+    const roles = orgRoles.split(',')
+    setUserRoles(roles)
+  }
+
+  useEffect(() => {
+    getUserRoles()
+    const checkEcosystemData = async () => {
+      const data: ICheckEcosystem = await checkEcosystem();
+      setIsEcosystemData(data)
+    }
+
+    checkEcosystemData();
+  }, [])
+
 
   const submit = async (values: Values) => {
-    setCreateLoader(true)
-    const CredDeffFieldName: CredDeffFieldNameType = {
-      tag: values?.tagName,
-      revocable: values?.revocable,
-      orgId: orgId,
-      schemaLedgerId: schemaDetails?.schemaId
+    if (isEcosystemData?.isEnabledEcosystem && isEcosystemData?.isEcosystemMember) {
+      console.log("Submitted for endorsement by ecosystem member")
+      setCreateLoader(true)
+      const schemaId = schemaDetails?.schemaId || ""
+      const requestPayload = {
+        endorse: true,
+        tag: values?.tagName,
+        schemaId,
+        schemaDetails: {
+          name: schemaDetails?.schema?.name,
+          version: schemaDetails?.schema?.version,
+          attributes: schemaDetails?.schema?.attrNames
+        }
+      }
 
-    }
+      const ecoId = await getEcosystemId()
 
-    const createCredDeff = await createCredentialDefinition(CredDeffFieldName);
-    const { data } = createCredDeff as AxiosResponse
-    if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
-      setCreateLoader(false)
-      setSuccess(data?.message)
-    }
-    else {
-      setFailur(createCredDeff as string)
-      setCreateLoader(false)
+      const createCredDeff = await createCredDefRequest(requestPayload, ecoId, orgId);
+      const { data } = createCredDeff as AxiosResponse
+      if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+        setCreateLoader(false)
+        setSuccess(data?.message)
+      }
+      else {
+        setFailure(createCredDeff as string)
+        setCreateLoader(false)
+      }
+      getCredentialDefinitionList(schemaId, orgId)
+    } else {
+      setCreateLoader(true)
+      const schemaId = schemaDetails?.schemaId || ""
+      const CredDeffFieldName: CredDeffFieldNameType = {
+        tag: values?.tagName,
+        revocable: values?.revocable,
+        orgId: orgId,
+        schemaLedgerId: schemaId
+      }
+
+      const createCredDeff = await createCredentialDefinition(CredDeffFieldName, orgId);
+      const { data } = createCredDeff as AxiosResponse
+      if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+        setCreateLoader(false)
+        setSuccess(data?.message)
+      }
+      else {
+        setFailure(createCredDeff as string)
+        setCreateLoader(false)
+      }
+      getCredentialDefinitionList(schemaId, orgId)
     }
-    getCredentialDefinitionList(schemaDetails?.schemaId, orgId)
   }
 
   const credDefSelectionCallback = async (schemaId: string, credentialDefinitionId: string) => {
@@ -138,77 +199,72 @@ const ViewSchemas = () => {
     window.location.href = `${pathRoutes.organizations.Issuance.connections}`
   }
 
+  const formTitle = isEcosystemData?.isEcosystemMember ? "Credential Definition Endorsement" : "Create Credential Definition"
+  const submitButtonTitle = isEcosystemData?.isEcosystemMember ? {
+    title: "Request Endorsement", svg: <svg className='mr-2 mt-1' xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 25 25">
+      <path fill="#fff" d="M21.094 0H3.906A3.906 3.906 0 0 0 0 3.906v12.5a3.906 3.906 0 0 0 3.906 3.907h.781v3.906a.781.781 0 0 0 1.335.553l4.458-4.46h10.614A3.906 3.906 0 0 0 25 16.407v-12.5A3.907 3.907 0 0 0 21.094 0Zm2.343 16.406a2.343 2.343 0 0 1-2.343 2.344H10.156a.782.782 0 0 0-.553.228L6.25 22.333V19.53a.781.781 0 0 0-.781-.781H3.906a2.344 2.344 0 0 1-2.344-2.344v-12.5a2.344 2.344 0 0 1 2.344-2.344h17.188a2.343 2.343 0 0 1 2.343 2.344v12.5Zm-3.184-5.951a.81.81 0 0 1-.17.254l-3.125 3.125a.781.781 0 0 1-1.105-1.106l1.792-1.79h-7.489a2.343 2.343 0 0 0-2.344 2.343.781.781 0 1 1-1.562 0 3.906 3.906 0 0 1 3.906-3.906h7.49l-1.793-1.79a.78.78 0 0 1 .254-1.277.781.781 0 0 1 .852.17l3.125 3.125a.79.79 0 0 1 .169.852Z" />
+    </svg>
+  } : {
+    title: "Create", svg: <div className='pr-3'>
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+        <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+      </svg>
+    </div>
+  }
+
   return (
     <div className="px-4 pt-6">
       <div className="mb-4 col-span-full xl:mb-2">
         <BreadCrumbs />
 
-        <div className='flex items-center content-between'>
+        <div className='flex items-center justify-between'>
           <h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
             Schemas
           </h1>
-          <Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.schema.schemas}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
-						dark:hover:bg-primary-50'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-
-            <span className="min-[320px]:hidden sm:block"> Back</span>
-          </Button>
+          <BackButton path={pathRoutes.back.schema.schemas} />
         </div>
-
       </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 flex-col sm:flex-row'>
-          <Card className='h-64 sm:w-1/2 p-2 mr-1 mb-1' id="viewSchemaDetailsCard">
+          <Card className='sm:w-1/2 mr-1' id="viewSchemaDetailsCard">
             {loading ? (
               <div className="flex items-center justify-center mb-4">
                 <CustomSpinner />
               </div>
             ) : (
-              <div className='pt-4'>
-                <div className='flex space-between'>
-                  <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white p-1 pb-2">
-                    Schema Details
-                  </h5>
-                  <div className='ml-auto'>
-                    <a
-                      className="text-sm font-medium hover:underline"
-                      href={`http://test.bcovrin.vonx.io/browse/domain?query=${schemaDetails?.schemaId}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <Button
-                        type="submit"
-                        color='bg-primary-800'
-                        title='View schema details on ledger'
-                        className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
-												ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
-												lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
+              <div className='overflow-hidden overflow-ellipsis' style={{ overflow: 'auto' }}>
+                <div className='mb-1 lg:flex lg:items-center justify-between'>
+                  <div className="lg:w-1/2 md:w-2/3 ">
+                    <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white p-1 pb-2">
+                      Schema Details
+                    </h5>
+                  </div>
+                  <div className='p-2 lg:w-2/3 md:w-2/3 lg:mt-0 '>                    <a
+                    className="text-sm font-medium hover:underline"
+                    href={`http://test.bcovrin.vonx.io/browse/domain?query=${schemaDetails?.schemaId}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Button
+                      type="submit"
+                      color='bg-primary-800'
+                      title='View schema details on ledger'
+                      className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
+												ring-2 text-black font-medium rounded-lg text-sm mr-2 ml-auto dark:text-white dark:hover:text-black 
 												dark:hover:bg-primary-50'
-                        style={{ height: '1.5rem', width: '13rem', minWidth: '2rem' }}
-                      >
-                        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" className='mr-2' fill="none" viewBox="0 0 17 17">
-                          <path fill="#1F4EAD" d="M15.749 6.99c-.334-.21-.813-.503-.813-.697.01-.397.113-.786.3-1.136.277-.69.561-1.395.204-1.915-.358-.519-1.122-.462-1.853-.405-.358.082-.73.082-1.089 0a2.74 2.74 0 0 1-.374-1.087c-.162-.739-.333-1.501-.942-1.704-.61-.203-1.154.3-1.699.811-.309.276-.723.65-.934.65-.212 0-.634-.374-.943-.65C7.07.362 6.51-.14 5.908.046c-.602.187-.805.933-.967 1.671-.05.383-.18.75-.382 1.08a2.295 2.295 0 0 1-1.09 0c-.722-.066-1.478-.13-1.844.405-.365.535-.081 1.225.195 1.914.19.35.295.739.31 1.136-.066.195-.521.487-.854.698C.65 7.34 0 7.76 0 8.41c0 .649.65 1.07 1.276 1.468.333.211.812.495.853.69-.014.4-.12.791-.309 1.144-.276.69-.56 1.395-.195 1.914.366.52 1.122.463 1.845.398a2.441 2.441 0 0 1 1.089.04c.2.33.33.697.382 1.08.162.738.333 1.508.934 1.711a.86.86 0 0 0 .277.106 2.439 2.439 0 0 0 1.422-.812c.308-.275.731-.657.942-.657.212 0 .626.382.935.657.544.487 1.105.998 1.698.812.593-.187.813-.974.943-1.712a2.69 2.69 0 0 1 .374-1.08 2.472 2.472 0 0 1 1.089-.04c.73.065 1.479.138 1.852-.397.374-.536.073-1.225-.203-1.915a2.585 2.585 0 0 1-.3-1.144c.056-.194.511-.478.812-.69C16.35 9.587 17 9.174 17 8.517c0-.658-.618-1.136-1.251-1.526Zm-.431 2.248c-.537.332-1.04.649-1.195 1.135a2.73 2.73 0 0 0 .325 1.68c.155.373.399.99.293 1.151-.106.163-.731.09-1.113.057a2.393 2.393 0 0 0-1.626.203 2.594 2.594 0 0 0-.682 1.55c-.082.365-.236 1.054-.406 1.111-.171.057-.667-.422-.894-.625a2.585 2.585 0 0 0-1.48-.868c-.58.11-1.105.417-1.486.868-.22.203-.756.674-.894.625-.138-.049-.325-.746-.407-1.111a2.594 2.594 0 0 0-.674-1.55 1.522 1.522 0 0 0-.95-.243 7.016 7.016 0 0 0-.708.04c-.374 0-1.008.09-1.105-.056-.098-.146.097-.78.26-1.112.285-.51.4-1.1.325-1.68-.146-.486-.65-.81-1.186-1.135-.358-.227-.902-.568-.902-.811 0-.244.544-.552.902-.811.536-.333 1.04-.658 1.186-1.136a2.754 2.754 0 0 0-.325-1.688c-.163-.348-.398-.973-.284-1.127.113-.154.73-.09 1.105-.057.549.122 1.123.05 1.625-.203.392-.427.629-.972.674-1.55.082-.364.236-1.054.407-1.11.17-.058.674.421.894.624.381.45.907.753 1.487.86a2.569 2.569 0 0 0 1.479-.86c.227-.203.756-.673.894-.625.138.049.325.747.406 1.112.048.578.288 1.123.682 1.55a2.397 2.397 0 0 0 1.626.202c.382 0 1.007-.09 1.113.057.106.146-.138.811-.292 1.144a2.755 2.755 0 0 0-.326 1.687c.155.479.659.811 1.195 1.136.357.227.902.568.902.811 0 .243-.488.527-.845.755Z" />
-                          <path fill="#1F4EAD" d="m11.253 6.126-3.78 3.943-1.687-1.403a.473.473 0 0 0-.149-.08.556.556 0 0 0-.352 0 .473.473 0 0 0-.148.08.377.377 0 0 0-.101.12.306.306 0 0 0 0 .284.377.377 0 0 0 .101.12l2.002 1.7a.459.459 0 0 0 .152.083.548.548 0 0 0 .181.027.601.601 0 0 0 .19-.043.499.499 0 0 0 .153-.097l4.105-4.284a.312.312 0 0 0 .074-.265.365.365 0 0 0-.174-.234.55.55 0 0 0-.632.049h.065Z" />
-                        </svg>
-
-                        Check on ledger
-                      </Button>
-                    </a>
+                      style={{ height: '1.5rem', minWidth: '2rem' }}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" className='mr-2' fill="none" viewBox="0 0 17 17">
+                        <path fill="#1F4EAD" d="M15.749 6.99c-.334-.21-.813-.503-.813-.697.01-.397.113-.786.3-1.136.277-.69.561-1.395.204-1.915-.358-.519-1.122-.462-1.853-.405-.358.082-.73.082-1.089 0a2.74 2.74 0 0 1-.374-1.087c-.162-.739-.333-1.501-.942-1.704-.61-.203-1.154.3-1.699.811-.309.276-.723.65-.934.65-.212 0-.634-.374-.943-.65C7.07.362 6.51-.14 5.908.046c-.602.187-.805.933-.967 1.671-.05.383-.18.75-.382 1.08a2.295 2.295 0 0 1-1.09 0c-.722-.066-1.478-.13-1.844.405-.365.535-.081 1.225.195 1.914.19.35.295.739.31 1.136-.066.195-.521.487-.854.698C.65 7.34 0 7.76 0 8.41c0 .649.65 1.07 1.276 1.468.333.211.812.495.853.69-.014.4-.12.791-.309 1.144-.276.69-.56 1.395-.195 1.914.366.52 1.122.463 1.845.398a2.441 2.441 0 0 1 1.089.04c.2.33.33.697.382 1.08.162.738.333 1.508.934 1.711a.86.86 0 0 0 .277.106 2.439 2.439 0 0 0 1.422-.812c.308-.275.731-.657.942-.657.212 0 .626.382.935.657.544.487 1.105.998 1.698.812.593-.187.813-.974.943-1.712a2.69 2.69 0 0 1 .374-1.08 2.472 2.472 0 0 1 1.089-.04c.73.065 1.479.138 1.852-.397.374-.536.073-1.225-.203-1.915a2.585 2.585 0 0 1-.3-1.144c.056-.194.511-.478.812-.69C16.35 9.587 17 9.174 17 8.517c0-.658-.618-1.136-1.251-1.526Zm-.431 2.248c-.537.332-1.04.649-1.195 1.135a2.73 2.73 0 0 0 .325 1.68c.155.373.399.99.293 1.151-.106.163-.731.09-1.113.057a2.393 2.393 0 0 0-1.626.203 2.594 2.594 0 0 0-.682 1.55c-.082.365-.236 1.054-.406 1.111-.171.057-.667-.422-.894-.625a2.585 2.585 0 0 0-1.48-.868c-.58.11-1.105.417-1.486.868-.22.203-.756.674-.894.625-.138-.049-.325-.746-.407-1.111a2.594 2.594 0 0 0-.674-1.55 1.522 1.522 0 0 0-.95-.243 7.016 7.016 0 0 0-.708.04c-.374 0-1.008.09-1.105-.056-.098-.146.097-.78.26-1.112.285-.51.4-1.1.325-1.68-.146-.486-.65-.81-1.186-1.135-.358-.227-.902-.568-.902-.811 0-.244.544-.552.902-.811.536-.333 1.04-.658 1.186-1.136a2.754 2.754 0 0 0-.325-1.688c-.163-.348-.398-.973-.284-1.127.113-.154.73-.09 1.105-.057.549.122 1.123.05 1.625-.203.392-.427.629-.972.674-1.55.082-.364.236-1.054.407-1.11.17-.058.674.421.894.624.381.45.907.753 1.487.86a2.569 2.569 0 0 0 1.479-.86c.227-.203.756-.673.894-.625.138.049.325.747.406 1.112.048.578.288 1.123.682 1.55a2.397 2.397 0 0 0 1.626.202c.382 0 1.007-.09 1.113.057.106.146-.138.811-.292 1.144a2.755 2.755 0 0 0-.326 1.687c.155.479.659.811 1.195 1.136.357.227.902.568.902.811 0 .243-.488.527-.845.755Z" />
+                        <path fill="#1F4EAD" d="m11.253 6.126-3.78 3.943-1.687-1.403a.473.473 0 0 0-.149-.08.556.556 0 0 0-.352 0 .473.473 0 0 0-.148.08.377.377 0 0 0-.101.12.306.306 0 0 0 0 .284.377.377 0 0 0 .101.12l2.002 1.7a.459.459 0 0 0 .152.083.548.548 0 0 0 .181.027.601.601 0 0 0 .19-.043.499.499 0 0 0 .153-.097l4.105-4.284a.312.312 0 0 0 .074-.265.365.365 0 0 0-.174-.234.55.55 0 0 0-.632.049h.065Z" />
+                      </svg>
+
+                      Check on ledger
+                    </Button>
+                  </a>
                   </div>
                 </div>
                 <div className="">
@@ -231,13 +287,13 @@ const ViewSchemas = () => {
                 </div>
                 <div className="flow-root overflow-y-auto">
                   <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-                    <li className="py-3 sm:py-4">
+                    <li className="pt-3 sm:pt-4">
                       <div className="flex items-center space-x-4">
                         <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white flex-wrap p-1">
                           Attributes:
                           {schemaDetails?.schema?.attrNames && schemaDetails?.schema?.attrNames?.length > 0 &&
                             schemaDetails?.schema?.attrNames.map((element: string) => (
-                              <span 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'> {element}</span>
+                              <span key={`schema-details-${element}`} 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'> {element}</span>
                             ))}
                         </div>
                       </div>
@@ -247,181 +303,195 @@ const ViewSchemas = () => {
               </div>
             )}
           </Card>
-          <Card className='h-64 sm:w-1/2 p-2 ml-1' id="credentialDefinitionCard">
-            <div>
-              <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
-                Create Credential Definition
-              </h5>
-            </div>
-            <div>
-              <Formik
-                initialValues={{
-                  tagName: '',
-                  revocable: false
-                }}
-                validationSchema={yup.object().shape({
-                  tagName: yup
-                    .string()
-                    .trim()
-                    .required('Credential Definition is required'),
-                  evocable: yup
-                    .bool()
-
-                })}
-                validateOnBlur
-                validateOnChange
-                enableReinitialize
-                onSubmit={async (values, formikHandlers): Promise<void> => {
-                  await submit(values)
-                  formikHandlers.resetForm();
+          {
+            (userRoles.includes(Roles.OWNER)
+              || userRoles.includes(Roles.ADMIN))
+
+            && <Card className='sm:w-1/2 p-2 ml-1 overflow-hidden overflow-ellipsis'
+              style={{ overflow: 'auto' }}
+              id="credentialDefinitionCard">
+              <div>
+                <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
+                  {formTitle}
+                </h5>
+              </div>
+              <div>
+                <Formik
+                  initialValues={{
+                    tagName: '',
+                    revocable: false
+                  }}
+                  validationSchema={yup.object().shape({
+                    tagName: yup
+                      .string()
+                      .trim()
+                      .required('Credential Definition is required'),
+                    evocable: yup
+                      .bool()
+
+                  })}
+                  validateOnBlur
+                  validateOnChange
+                  enableReinitialize
+                  onSubmit={async (values, formikHandlers): Promise<void> => {
+                    await submit(values)
+                    formikHandlers.resetForm();
 
-                }}
-              >
-                {(formikHandlers): JSX.Element => (
-                  <Form onSubmit={formikHandlers.handleSubmit}>
-                    <div className=" flex items-center space-x-4">
-                      <div className='w-full'>
-                        <div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                          <Label htmlFor="credential-definition" value="Name" />
-                          <span className='text-red-600'>*</span>
+                  }}
+                >
+                  {(formikHandlers): JSX.Element => (
+                    <Form onSubmit={formikHandlers.handleSubmit}>
+                      <div className=" flex items-center space-x-4">
+                        <div className='w-full'>
+                          <div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                            <Label htmlFor="credential-definition" value="Name" />
+                            <span className='text-red-600'>*</span>
+                          </div>
+                          <Field
+                            id="tagName"
+                            name="tagName"
+                            placeholder="Enter Credential definition"
+                            className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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"
+                            disabled={createloader}
+                          />
+                          {
+                            (formikHandlers?.errors?.tagName && formikHandlers?.touched?.tagName) &&
+                            <span className="text-red-500 text-xs">{formikHandlers?.errors?.tagName}</span>
+                          }
                         </div>
-                        <Field
-                          id="tagName"
-                          name="tagName"
-                          placeholder="Enter Credential definition"
-                          className="w-full bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block 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"
-                          disabled={createloader}
-                        />
-                        {
-                          (formikHandlers?.errors?.tagName && formikHandlers?.touched?.tagName) &&
-                          <span className="text-red-500 text-xs">{formikHandlers?.errors?.tagName}</span>
-                        }
                       </div>
-                    </div>
 
-                    <div className='flex items-center'>
-                      <div className="custom-control custom-checkbox d-flex align-items-center pt-4 p-2">
+                      <div className='flex items-center'>
+                        {/* <div className="custom-control custom-checkbox d-flex align-items-center pt-4 p-2"> */}
                         {/* <Field type="checkbox" id="Revocable" name="revocable" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" /> */}
                         {/* <Label className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300" >
                           Revocable
                         </Label> */}
+                        {/* </div> */}
+                        {createloader && <div className='ml-auto'>
+                          <p className='text-gray-500 text-sm italic ml-5'>
+                            <svg className='animate-spin mr-1 h-4 w-4 text-blue-600 inline-block' xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.86 3.182 8.009l2.01-2.01zM12 20a8 8 0 008-8h-4a4 4 0 11-8 0H0a8 8 0 008 8v-4a4 4 0 018 0v4z"></path>
+                            </svg>
+                            Hold your coffee, this might take a moment...
+                          </p>
+                        </div>}
                       </div>
-                      {createloader && <div className='ml-auto'>
-                        <p className='text-gray-500 text-sm italic ml-5'>
-                          <svg className='animate-spin mr-1 h-4 w-4 text-blue-600 inline-block' xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.86 3.182 8.009l2.01-2.01zM12 20a8 8 0 008-8h-4a4 4 0 11-8 0H0a8 8 0 008 8v-4a4 4 0 018 0v4z"></path>
+                      {
+                        (success || failure) &&
+                        <div className='py-3'>
+                          <Alert
+                            color={success ? "success" : "failure"}
+                            onDismiss={() => {
+                              setSuccess(null)
+                              setFailure(null)
+                            }}
+                          >
+                            <span>
+                              <p>
+                                {success || failure}
+                              </p>
+                            </span>
+                          </Alert>
+                        </div>
+                      }
+                      <div className='float-right py-4'>
+                        <Button
+                          type="submit"
+                          title="Add new credential-definition on ledger"
+                          isProcessing={createloader}
+                          color='bg-primary-800'
+                          disabled={createloader}
+                          className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
+                        >
+                          {submitButtonTitle.svg}
+                          {submitButtonTitle.title}
+                        </Button>
+                      </div>
+
+                      <div className='float-right py-4 px-2'>
+                        <Button
+                          type="reset"
+                          color='bg-primary-800'
+                          onClick={() => {
+                            setCredDefAuto('')
+                          }}
+                          disabled={createloader}
+                          className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black dark:hover:bg-primary-50'
+
+                          style={{ height: '2.6rem', width: '6rem', minWidth: '2rem' }}
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" className='mr-2' width="18" height="18" fill="none" viewBox="0 0 20 20">
+                            <path fill="#1F4EAD" d="M19.414 9.414a.586.586 0 0 0-.586.586c0 4.868-3.96 8.828-8.828 8.828-4.868 0-8.828-3.96-8.828-8.828 0-4.868 3.96-8.828 8.828-8.828 1.96 0 3.822.635 5.353 1.807l-1.017.18a.586.586 0 1 0 .204 1.153l2.219-.392a.586.586 0 0 0 .484-.577V1.124a.586.586 0 0 0-1.172 0v.928A9.923 9.923 0 0 0 10 0a9.935 9.935 0 0 0-7.071 2.929A9.935 9.935 0 0 0 0 10a9.935 9.935 0 0 0 2.929 7.071A9.935 9.935 0 0 0 10 20a9.935 9.935 0 0 0 7.071-2.929A9.935 9.935 0 0 0 20 10a.586.586 0 0 0-.586-.586Z" />
                           </svg>
-                          Hold your coffee, this might take a moment...
-                        </p>
-                      </div>}
-                    </div>
-                    {
-                      (success || failure) &&
-                      <Alert
-                        color={success ? "success" : "failure"}
-                        onDismiss={() => setSuccess(null)}
-                      >
-                        <span>
-                          <p>
-                            {success || failure}
-                          </p>
-                        </span>
-                      </Alert>
-                    }
-                    {/* <div > */}
-                    <div className='float-right p-2'>
-                      <Button
-                        type="submit"
-                        title="Add new credential-definition on ledger"
-                        isProcessing={createloader}
-                        color='bg-primary-800'
-                        disabled={createloader}
-                        className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
-                      >
-                        <svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                          <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
-                        </svg>
-                        Create
-                      </Button>
-                    </div>
-
-                    <div className='float-right p-2'>
-                      <Button
-                        type="reset"
-                        color='bg-primary-800'
-                        onClick={() => {
-                          setCredDefAuto('')
-                        }}
-                        disabled={createloader}
-                        className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black dark:hover:bg-primary-50'
-
-                        style={{ height: '2.6rem', width: '6rem', minWidth: '2rem' }}
-                      >
-                        <svg xmlns="http://www.w3.org/2000/svg" className='mr-2' width="18" height="18" fill="none" viewBox="0 0 20 20">
-                          <path fill="#1F4EAD" d="M19.414 9.414a.586.586 0 0 0-.586.586c0 4.868-3.96 8.828-8.828 8.828-4.868 0-8.828-3.96-8.828-8.828 0-4.868 3.96-8.828 8.828-8.828 1.96 0 3.822.635 5.353 1.807l-1.017.18a.586.586 0 1 0 .204 1.153l2.219-.392a.586.586 0 0 0 .484-.577V1.124a.586.586 0 0 0-1.172 0v.928A9.923 9.923 0 0 0 10 0a9.935 9.935 0 0 0-7.071 2.929A9.935 9.935 0 0 0 0 10a9.935 9.935 0 0 0 2.929 7.071A9.935 9.935 0 0 0 10 20a9.935 9.935 0 0 0 7.071-2.929A9.935 9.935 0 0 0 20 10a.586.586 0 0 0-.586-.586Z" />
-                        </svg>
-
-                        Reset
-                      </Button>
-                    </div>
-                  </Form>
-                )}
-              </Formik>
-            </div>
-          </Card >
+
+                          Reset
+                        </Button>
+                      </div>
+                    </Form>
+                  )}
+                </Formik>
+              </div>
+            </Card >
+
+          }
         </div>
       </div>
-      <>
-        <div className='p-4'>
-          {schemaDetailErr && (
-            <Alert color="failure" onDismiss={() => setSchemaDetailErr(null)}>
-              <span>
-                <p>
-                  {schemaDetailErr}
-                </p>
-              </span>
-            </Alert>
-          )}
-        </div>
-        <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white p-4">
-          Credential Definitions
-        </h5>
-
-        {loading ? (<div className="flex items-center justify-center mb-4">
-
-          <CustomSpinner />
-        </div>)
-          : credDeffList && credDeffList.length > 0 ? (
-            <div className='Flex-wrap' style={{ display: 'flex', flexDirection: 'column' }}>
-              <div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
-                {credDeffList && credDeffList.length > 0 &&
-                  credDeffList.map((element, key) => (
-                    <div className='p-2' key={key}>
-                      <CredDeffCard credDeffName={element['tag']} credentialDefinitionId={element['credentialDefinitionId']} schemaId={element['schemaLedgerId']} revocable={element['revocable']} onClickCallback={credDefSelectionCallback} />
-                    </div>
-                  ))
-                }
-              </div>
-              <div className="flex items-center justify-end mb-4">
-                <Pagination
-                  currentPage={1}
-                  onPageChange={() => {
-                  }}
-                  totalPages={0}
-                />
-              </div>
-            </div>) : (<EmptyListMessage
-              message={'No credential definition'}
-              description={'Get started by creating a new credential definition'}
-              buttonContent={''}
-              svgComponent={<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
-                <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
-              </svg>}
-              onClick={() => { }}
-            />)
-        }
-      </>
+      <div className='p-4'>
+        {schemaDetailErr && (
+          <Alert color="failure" onDismiss={() => setSchemaDetailErr(null)}>
+            <span>
+              <p>
+                {schemaDetailErr}
+              </p>
+            </span>
+          </Alert>
+        )}
+      </div>
+      <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white p-4">
+        Credential Definitions
+      </h5>
+
+      {loading ? (<div className="flex items-center justify-center mb-4">
+        <CustomSpinner />
+      </div>)
+        : credDeffList && credDeffList.length > 0 ? (
+          <div className='Flex-wrap' style={{ display: 'flex', flexDirection: 'column' }}>
+            <div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
+              {credDeffList && credDeffList.length > 0 &&
+                credDeffList.map((element: ICredDefCard, index: number) => (
+                  <div className='p-2' key={`view-schema-cred-def-card-${element['credentialDefinitionId']}`}>
+                    <CredDeffCard
+                      credDeffName={element['tag']}
+                      credentialDefinitionId={element['credentialDefinitionId']}
+                      schemaId={element['schemaLedgerId']}
+                      revocable={element['revocable']}
+                      onClickCallback={credDefSelectionCallback}
+                      userRoles={userRoles}
+                    />
+                  </div>
+                ))
+              }
+            </div>
+            <div className="flex items-center justify-end mb-4">
+              <Pagination
+                currentPage={1}
+                onPageChange={() => {
+                }}
+                totalPages={0}
+              />
+            </div>
+          </div>) : (<EmptyListMessage
+            message={'No credential definition'}
+            description={'Get started by creating a new credential definition'}
+            buttonContent={''}
+            svgComponent={<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+              <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+            </svg>}
+            onClick={() => { }}
+          />)
+      }
     </div>
   )
 }
diff --git a/src/components/Resources/Schema/interfaces/index.ts b/src/components/Resources/Schema/interfaces/index.ts
index a0a81e1df..d4dd1d444 100644
--- a/src/components/Resources/Schema/interfaces/index.ts
+++ b/src/components/Resources/Schema/interfaces/index.ts
@@ -1,74 +1,74 @@
 import { Pagination } from 'flowbite-react';
 export interface GetAllSchemaListParameter {
-    itemPerPage: number,
-    page: number,
-    search: string,
-    sortBy: string,
-    allSearch: string
+  itemPerPage: number,
+  page: number,
+  search: string,
+  sortBy: string,
+  allSearch: string
+}
+
+export interface IAttributes {
+  attributeName: string
+  schemaDataType: string
+  displayName: string
 }
 export interface Values {
-	schemaName: string;
-	schemaVersion: string;
-	attribute: [];
+  schemaName: string;
+  schemaVersion: string;
+  attribute: IAttributes[]
 }
 
 
 type DataItem = {
-    createDateTime: string;
-    name: string;
-    version: string;
-    attributes: string[];
-    schemaLedgerId: string;
-    createdBy: number;
-    publisherDid: string;
-    orgId: number;
-    issuerId: string;
-  };
-  
-  export type DataResponse = {
-    totalItems: number;
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-    nextPage: number;
-    previousPage: number;
-    lastPage: number;
-    data: DataItem[];
-  };
+  createDateTime: string;
+  name: string;
+  version: string;
+  attributes: string[];
+  schemaLedgerId: string;
+  createdBy: number;
+  publisherDid: string;
+  orgId: number;
+  issuerId: string;
+};
+
+export type DataResponse = {
+  totalItems: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  nextPage: number;
+  previousPage: number;
+  lastPage: number;
+  data: DataItem[];
+};
+
+export type PaginationData = {
+  totalItems: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  nextPage: number;
+  previousPage: number;
+  lastPage: number;
+};
 
- export type PaginationData = {
-    totalItems: number;
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-    nextPage: number;
-    previousPage: number;
-    lastPage: number;
-  };
+export interface CredDeffFieldNameType {
+  tag: string;
+  revocable: boolean;
+  orgId: number;
+  schemaLedgerId: string;
+}
 
-  export interface CredDeffFieldNameType {
-    tag: string;
-    revocable: boolean;
-    orgId: number; 
-    schemaLedgerId: string; 
-  }
+export interface FieldName {
+  schemaName: string;
+  schemaVersion: string;
+  attributes: IAttributes[]
+  orgId: number;
 
-  export interface FieldName {
-		schemaName: string;
-		schemaVersion: string;
-		attributes: [
-			{
-				attributeName: string;
-				schemaDataType: string;
-				displayName: string;
-			},
-		];
-		orgId: number;
-	
 }
 
 export interface createSchema {
   schemaName: string;
   schemaVersion: string;
-  attributes: string[];
+  attributes: IAttributes[]
   orgId: number;
 }
 
diff --git a/src/components/RoleViewButton/index.tsx b/src/components/RoleViewButton/index.tsx
index 4ed94b180..1c2f0616b 100644
--- a/src/components/RoleViewButton/index.tsx
+++ b/src/components/RoleViewButton/index.tsx
@@ -32,7 +32,23 @@ const RoleViewButton = ({ buttonTitle, svgComponent, onClickEvent, feature }: Ro
 
         if(feature === Features.CRETAE_ORG){
             return true
-        } else if (userRoles.includes(Roles.OWNER) || userRoles.includes(Roles.ADMIN)) {
+        } else if (feature === Features.ISSUENCE) {
+            if (userRoles.includes(Roles.OWNER) 
+            || userRoles.includes(Roles.ADMIN)
+            || userRoles.includes(Roles.ISSUER)
+            ) {
+                return true
+            }
+            return false
+        }else if (feature === Features.VERIFICATION) {
+            if (userRoles.includes(Roles.OWNER) 
+            || userRoles.includes(Roles.ADMIN)
+            || userRoles.includes(Roles.VERIFIER)
+            ) {
+                return true
+            }
+            return false
+        }else if (userRoles.includes(Roles.OWNER) || userRoles.includes(Roles.ADMIN)) {
             return true
         } else {
             return false
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index ecb244868..912a20ba3 100644
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -4,14 +4,17 @@ import { dateConversion } from '../../utils/DateConversion';
 import type { ChildrenType } from 'react-tooltip';
 
 interface DateProps {
-  date?: Date
+  date: string
   id?: string
   children?: any
 }
 
 const DateTooltip = ({date, children}: DateProps) => {
 
-  const formattedDate = date ? moment(date).format("MMM DD, YYYY, h:mm A z") : '';
+
+  const updatedDate = new Date(date);
+  const formattedDate = date ? moment(updatedDate).format("MMM DD, YYYY, h:mm A z") : '';
+
 
   return (
     <Tooltip 
diff --git a/src/components/User/UserDashBoard.tsx b/src/components/User/UserDashBoard.tsx
index 9bbe9ce17..74d7af343 100644
--- a/src/components/User/UserDashBoard.tsx
+++ b/src/components/User/UserDashBoard.tsx
@@ -1,19 +1,22 @@
-import { useEffect, useState } from "react";
-
-import { AlertComponent } from "../AlertComponent";
-import type { AxiosResponse } from "axios";
-import CustomAvatar from '../Avatar'
-import { EmptyListMessage } from "../EmptyListComponent";
-import type { Organisation } from "../organization/interfaces";
-import type { UserActivity } from "./interfaces";
-import { apiStatusCodes, storageKeys } from "../../config/CommonConstant";
-import { getOrganizations } from "../../api/organization";
-import { getUserActivity } from "../../api/users";
-import { getUserInvitations } from "../../api/invitations";
-import { pathRoutes } from "../../config/pathRoutes";
-import { setToLocalStorage } from "../../api/Auth";
-import { dateConversion } from "../../utils/DateConversion";
-import DateTooltip from "../Tooltip";
+import { useEffect, useState } from 'react';
+
+import { AlertComponent } from '../AlertComponent';
+import type { AxiosResponse } from 'axios';
+import CustomAvatar from '../Avatar';
+import { EmptyListMessage } from '../EmptyListComponent';
+import type { Organisation } from '../organization/interfaces';
+import type { UserActivity } from './interfaces';
+import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
+import { getOrganizations } from '../../api/organization';
+import { getUserActivity } from '../../api/users';
+import {
+	getUserEcosystemInvitations,
+	getUserInvitations,
+} from '../../api/invitations';
+import { pathRoutes } from '../../config/pathRoutes';
+import { getFromLocalStorage, setToLocalStorage } from '../../api/Auth';
+import { dateConversion } from '../../utils/DateConversion';
+import DateTooltip from '../Tooltip';
 
 const initialPageState = {
 	pageNumber: 1,
@@ -22,100 +25,132 @@ const initialPageState = {
 };
 
 const UserDashBoard = () => {
-
-	const [message, setMessage] = useState<string | null>(null)
-	const [viewButton, setViewButton] = useState<boolean>(false)
-	const [error, setError] = useState<string | null>(null)
+	const [message, setMessage] = useState<string | null>(null);
+	const [ecoMessage, setEcoMessage] = useState<string | null>(null);
+	const [viewButton, setViewButton] = useState<boolean>(false);
+	const [error, setError] = useState<string | null>(null);
 	const [currentPage, setCurrentPage] = useState(initialPageState);
-	const [loading, setLoading] = useState<boolean>(false)
-	const [organizationsList, setOrganizationList] = useState<Array<Organisation> | null>(null)
-	const [activityList, setActivityList] = useState<Array<UserActivity> | null>(null)
+	const [loading, setLoading] = useState<boolean>(false);
+	const [organizationsList, setOrganizationList] =
+		useState<Array<Organisation> | null>(null);
+	const [activityList, setActivityList] = useState<Array<UserActivity> | null>(
+		null,
+	);
 
 	const getAllInvitations = async () => {
-
-		setLoading(true)
-		const response = await getUserInvitations(currentPage.pageNumber, currentPage.pageSize, '');
-		const { data } = response as AxiosResponse
+		setLoading(true);
+		const response = await getUserInvitations(
+			currentPage.pageNumber,
+			currentPage.pageSize,
+			'',
+		);
+		const { data } = response as AxiosResponse;
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-
 			const totalPages = data?.data?.totalPages;
-
-			const invitationList = data?.data?.invitations
-
+			const invitationList = data?.data?.invitations;
 			if (invitationList.length > 0) {
-				setMessage('You have some pending received invitations')
-				setViewButton(true)
+				setMessage(`You have received invitations to join organisation`);
+				setViewButton(true);
 			}
-
 			setCurrentPage({
 				...currentPage,
-				total: totalPages
-			})
+				total: totalPages,
+			});
 		} else {
-			setError(response as string)
+			setError(response as string);
 		}
+		setLoading(false);
+	};
 
-		setLoading(false)
-	}
+	const getAllEcosystemInvitations = async () => {
+		setLoading(true);
+		const response = await getUserEcosystemInvitations(
+			currentPage.pageNumber,
+			currentPage.pageSize,
+			'',
+		);
+		const { data } = response as AxiosResponse;
 
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			const totalPages = data?.data?.totalPages;
+			const invitationPendingList = data?.data?.invitations && data?.data?.invitations?.filter(
+				(invitation: { status: string }) => {
+					return invitation.status === 'pending';
+				},
+			);
+
+			if (invitationPendingList && invitationPendingList.length > 0) {
+				setEcoMessage(`You have received invitation to join ecosystem `);
+				setViewButton(true);
+			}
+			setCurrentPage({
+				...currentPage,
+				total: totalPages,
+			});
+		} else {
+			setError(response as string);
+		}
+
+		setLoading(false);
+	};
 	//Fetch the user organization list
 	const getAllOrganizations = async () => {
-
-		setLoading(true)
-		const response = await getOrganizations(currentPage.pageNumber, currentPage.pageSize, '');
-		const { data } = response as AxiosResponse
+		setLoading(true);
+		const response = await getOrganizations(
+			currentPage.pageNumber,
+			currentPage.pageSize,
+			'',
+		);
+		const { data } = response as AxiosResponse;
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-
 			const totalPages = data?.data?.totalPages;
 
-			const orgList = data?.data?.organizations.filter((userOrg: Organisation, index: number) => index < 3)
+			const orgList = data?.data?.organizations.filter(
+				(userOrg: Organisation, index: number) => index < 3,
+			);
 
-			setOrganizationList(orgList)
+			setOrganizationList(orgList);
 			setCurrentPage({
 				...currentPage,
-				total: totalPages
-			})
+				total: totalPages,
+			});
 		} else {
-			setError(response as string)
+			setError(response as string);
 		}
 
-		setLoading(false)
-	}
-
+		setLoading(false);
+	};
 
 	//Fetch the user recent activity
 	const getUserRecentActivity = async () => {
-
-		setLoading(true)
+		setLoading(true);
 		const response = await getUserActivity(5);
-		const { data } = response as AxiosResponse
+		const { data } = response as AxiosResponse;
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-
 			const activityList = data?.data;
 
 			setActivityList(activityList);
-
 		} else {
-			setError(response as string)
+			setError(response as string);
 		}
 
-		setLoading(false)
-	}
-
-
-
+		setLoading(false);
+	};
+	const checkOrgId = async () => {
+		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+		if (orgId) {
+			await getAllEcosystemInvitations();
+		}
+	};
 	useEffect(() => {
-		getAllInvitations()
-		getAllOrganizations()
-		getUserRecentActivity()
-	}, [])
-
-	const redirectToInvitations = () => {
-		window.location.href = pathRoutes.users.invitations
-	}
+		getAllInvitations();
+		getAllOrganizations();
+		getUserRecentActivity();
+		checkOrgId();
+	}, []);
 
 	const goToOrgDashboard = async (orgId: number, roles: string[]) => {
 		await setToLocalStorage(storageKeys.ORG_ID, orgId.toString());
@@ -124,79 +159,84 @@ const UserDashBoard = () => {
 
 	return (
 		<div className="px-4 pt-6">
-			<div className="cursor-pointer" onClick={redirectToInvitations}>
+			<div className="cursor-pointer">
 				<AlertComponent
 					message={message ? message : error}
 					type={message ? 'warning' : 'failure'}
 					viewButton={viewButton}
+					path={pathRoutes.users.invitations}
 					onAlertClose={() => {
-						setMessage(null)
-						setError(null)
+						setMessage(null);
+						setError(null);
 					}}
 				/>
 			</div>
-
-			<div
-				className="grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3"
-			>
-
-				<div
-					className=" justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800"
-				>
-				<div className="w-full" >
-						<h2 className="text-base font-bold text-gray-500 dark:text-gray-400">
+			<div className="cursor-pointer">
+				<AlertComponent
+					message={ecoMessage}
+					type={'warning'}
+					viewButton={viewButton}
+					path={pathRoutes.ecosystem.invitation}
+					onAlertClose={() => {
+						setEcoMessage(null);
+						setError(null);
+					}}
+				/>
+			</div>
+			<div className="grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
+				<div className=" justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800">
+					<div className="w-full">
+						<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
 							Organizations
 						</h2>
 
-						{/* {
-							organizationsList
-							&& organizationsList.map(org => {
-								return <div className="pt-4 flex">
-
-									{(org.logoUrl) ? <CustomAvatar size='30' src={org.logoUrl} /> : <CustomAvatar size='30' name={org.name} />}
-
-									<h3 className="pl-2.5 text-lg font-semibold text-gray-900 dark:text-white">
-										{org.name}
-									</h3>
-
-								</div>
-							})
-						} */}
-						
-
-							{organizationsList?.map((org) => {
-							const roles: string[] = org.userOrgRoles.map(role => role.orgRole.name)
-							org.roles = roles
+						{organizationsList?.map((org) => {
+							const roles: string[] = org.userOrgRoles.map(
+								(role) => role.orgRole.name,
+							);
+							org.roles = roles;
 							return (
-								<div onClick={() => goToOrgDashboard(org?.id, org?.roles)}>
+								<div
+									key={org?.id}
+									onClick={() => goToOrgDashboard(org?.id, org?.roles)}
+								>
 									<a
 										href="#"
-										className="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+										className="flex items-center py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
 									>
 										{org.logoUrl ? (
-											<CustomAvatar className='dark:text-white' size="25" src={org?.logoUrl} round />
+											<CustomAvatar
+												className="dark:text-white"
+												size="25"
+												src={org?.logoUrl}
+												round
+											/>
 										) : (
-											<CustomAvatar className='dark:text-white' size="25" name={org?.name} round />
+											<CustomAvatar
+												className="dark:text-white"
+												size="25"
+												name={org?.name}
+												round
+											/>
 										)}
 
-										<span className="ml-3 text-base font-bold text-gray-500 dark:text-white">{org?.name}</span>
+										<span className="ml-3 text-base font-bold text-gray-500 dark:text-white">
+											{org?.name}
+										</span>
 									</a>
 								</div>
-							)
-						})
-						}
-
-						{
-							organizationsList && organizationsList?.length > 0 && (
-								<a
-							href="/organizations"
-							className="float-right inline-flex items-center p-2 text-sm font-medium rounded-lg text-primary-700 hover:bg-gray-100 dark:text-primary-500 dark:hover:bg-gray-700"
-						>
-							View More..
-						</a>
-							)}
+							);
+						})}
+
+						{organizationsList && organizationsList?.length > 0 && (
+							<a
+								href="/organizations"
+								className="float-right inline-flex items-center p-2 text-sm font-medium rounded-lg text-primary-700 hover:bg-gray-100 dark:text-primary-500 dark:hover:bg-gray-700"
+							>
+								View More..
+							</a>
+						)}
 					</div>
-
 				</div>
 				{/* <div
 					className="justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800"
@@ -229,68 +269,62 @@ const UserDashBoard = () => {
 			</div>
 
 			<div className="">
-				<div
-					className="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 xl:mb-0"
-				>
-					<div className="flex items-center justify-between mb-4">
-						<h3 className="pl-12 text-lg font-semibold text-gray-900 dark:text-white">
+				<div className="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 xl:mb-0">
+					<div className="items-start justify-start mb-4">
+						<h3 className="text-xl font-semibold text-gray-900 dark:text-white ">
 							Recent Activity
-							{
-								activityList && activityList?.length===0 && (
-									<div className="px-2 py-1 text-black-800  text-xs">
-										Looks like there are no activities to display at the moment.
-									</div>
-								)
-							}
-						</h3> 
+						</h3>
+						{activityList && activityList?.length === 0 && (
+							<div className="py-1 text-black-800 dark:text-white text-xs flex items-center" >
+								Looks like there is no activity to display at the moment.
+							</div>
+						)}
 					</div>
-					{
-						activityList
-							? <ol className="relative border-l pl-8 border-gray-200 dark:border-gray-700">
-								{
-									activityList
-									&& activityList.map(activity => {
-										return <li className="mb-10 ml-4">
-											<div
-												className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-800 dark:bg-gray-700"
-											>
-											</div>
-											<time
-												className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
-											>
-												<DateTooltip date={activity.createDateTime}>
-												{dateConversion(activity.createDateTime)}
-												</DateTooltip>
-											</time>
-											<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-												{activity.action}
-											</h3>
-											<p
-												className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400"
-											>
-												{activity.details}
-											</p>
-
-										</li>
-									})
-								}
-
-							</ol>
-							: activityList && (<EmptyListMessage
+					{activityList ? (
+						<ol className="relative border-l pl-8 border-gray-200 dark:border-gray-700">
+							{activityList.map((activity) => (
+								<li className="mb-10 ml-4" key={activity.id}>
+									<div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-800 dark:bg-gray-700"></div>
+									<time className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+										<DateTooltip date={activity.createDateTime}>
+											{dateConversion(activity.createDateTime)}
+										</DateTooltip>
+									</time>
+									<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+										{activity.action}
+									</h3>
+									<p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+										{activity.details}
+									</p>
+								</li>
+							)
+							)}
+						</ol>
+					) : (
+						activityList && (
+							<EmptyListMessage
 								message={'No Users activity'}
 								description={'Get started by creating a new Organization'}
-								svgComponent={<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
-									<path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
-								</svg>} />)
-
-					}
-
+								svgComponent={
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="15"
+										height="15"
+										fill="none"
+										viewBox="0 0 24 24"
+									>
+										<path
+											fill="#fff"
+											d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"
+										/>
+									</svg>
+								}
+							/>
+						)
+					)}
 				</div>
-
 			</div>
-
 		</div>
-
-	)
-}
-export default UserDashBoard;
\ No newline at end of file
+	);
+};
+export default UserDashBoard;
diff --git a/src/components/Verification/AttributesListData.tsx b/src/components/Verification/AttributesListData.tsx
index 635fa1b96..845682abe 100644
--- a/src/components/Verification/AttributesListData.tsx
+++ b/src/components/Verification/AttributesListData.tsx
@@ -10,12 +10,12 @@ interface AttributesListProps {
 				<Card >
 					<div className="flex h-full flex-col justify-center gap-0 sm:p-0">
 						<div className="flex border-b">
-							<div className="w-5/12 font-semibold flex justify-start truncate md:pl-1 sm:mr-8 md:mr-0 text-primary-700 dark:bg-gray-800 text-xl">
+							<div className="w-5/12 font-semibold flex truncate md:pl-1 sm:mr-8 md:mr-0 text-primary-700 dark:bg-gray-800 text-xl">
 								Attributes
 							</div>
 							<div className="w-1/12 font-semibold flex justify-start truncate md:pl-1 sm:mr-8 md:mr-0 text-primary-700 dark:bg-gray-800 text-xl">
 							</div>
-							<div className="w-6/12 font-semibold flex justify-start truncate sm:pl-4 text-primary-700 dark:bg-gray-800 text-xl">
+							<div className="w-6/12 font-semibold flex truncate sm:pl-4 text-primary-700 dark:bg-gray-800 text-xl">
 								{' '}
 								Values
 							</div>
@@ -25,18 +25,18 @@ interface AttributesListProps {
 							attributeDataList?.map((item, index) => (
 								<div
 									key={item?.entity + 1}
-									className="flex justify-start w-full"
+									className="flex w-full"
 								>
 									<div
 										className={`flex w-full text-lg`}
 									>
-										<div className="w-5/12 m-1 p-1 flex justify-start items-center text-gray-700 text-lg">
+										<div className="w-5/12 m-1 p-1 text-start text-gray-700 dark:text-white text-lg">
 											{item?.entity}
 										</div>
-										<div className="w-1/12 m-1 p-1 flex  items-center text-gray-700 text-lg">
+										<div className="w-1/12 m-1 p-1 flex  items-center text-gray-700 dark:text-white text-lg">
 											:
 										</div>
-										<div className="w-6/12 m-1 truncate p-1 flex flex-start items-center text-gray-700 text-lg">
+										<div className="w-6/12 m-1 truncate p-1 flex justify-start text-gray-700 dark:text-white text-lg">
 											{item?.properties.join(', ')}
 										</div>
 									</div>
diff --git a/src/components/Verification/Connections.tsx b/src/components/Verification/Connections.tsx
index c5e05bbd5..34d211f4c 100644
--- a/src/components/Verification/Connections.tsx
+++ b/src/components/Verification/Connections.tsx
@@ -10,6 +10,7 @@ import { pathRoutes } from "../../config/pathRoutes";
 import BreadCrumbs from "../BreadCrumbs";
 import ConnectionList from "./ConnectionList";
 import EmailList from "./EmailList";
+import BackButton from '../../commonComponents/backbutton'
 
 const Connections = () => {
 	const [selectedConnectionList, setSelectedConnectionList] = useState<TableData[]>([])
@@ -35,20 +36,7 @@ const Connections = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.verification.credDef}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="min-[320px]:hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes.back.verification.credDef}/>
 				</div>
 			</div>
 
diff --git a/src/components/Verification/CredDefSelection.tsx b/src/components/Verification/CredDefSelection.tsx
index d4d76c72c..a52a4950e 100644
--- a/src/components/Verification/CredDefSelection.tsx
+++ b/src/components/Verification/CredDefSelection.tsx
@@ -14,6 +14,7 @@ import type { TableData } from "../../commonComponents/datatable/interface";
 import DataTable from "../../commonComponents/datatable";
 import { getCredentialDefinitionsForVerification } from "../../api/verification";
 import CustomSpinner from "../CustomSpinner";
+import BackButton from  '../../commonComponents/backbutton'
 
 const CredDefSelection = () => {
 	const [schemaState, setSchemaState] = useState({ schemaName: '', version: '' })
@@ -63,14 +64,13 @@ const CredDefSelection = () => {
 		{ columnName: 'check' }
 	]
 
-	//Fetch credential definitions against schemaId
 	const getCredDefs = async (schemaId: string) => {
 		setLoading(true)
 		const response = await getCredentialDefinitionsForVerification(schemaId);
+		
 		const { data } = response as AxiosResponse
-
 		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-			const credDefs = data?.data?.data.map((ele: CredDefData) => {
+			const credDefs = data?.data?.map((ele: CredDefData) => {
 				return {
 					data: [{ data: ele?.tag ? ele?.tag : 'Not available' }, { data: ele?.credentialDefinitionId ? ele?.credentialDefinitionId : 'Not available' },
 					{ data: ele?.revocable === true ? <span className="text-blue-700 dark:text-white">Yes</span> : <span className="text-cyan-500 dark:text-white">No</span> },
@@ -98,9 +98,10 @@ const CredDefSelection = () => {
 			if (credDefs?.length === 0) {
 				setError('No Data Found')
 			}
-
+            setLoading(false)
 			setCredDefList(credDefs)
 		} else {
+			setLoading(false)
 			setError(response as string)
 		}
 
@@ -124,20 +125,7 @@ const CredDefSelection = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.verification.schemas}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="min-[320px]:hidden sm:block"> Back</span>
-          </Button>
+					<BackButton path={pathRoutes.back.verification.schemas}/>
 				</div>
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Schema
diff --git a/src/components/Verification/ProofRequestPopup.tsx b/src/components/Verification/ProofRequestPopup.tsx
index f89220a28..19329043a 100644
--- a/src/components/Verification/ProofRequestPopup.tsx
+++ b/src/components/Verification/ProofRequestPopup.tsx
@@ -91,7 +91,7 @@ const ProofRequest = (props: {
 							<span className="sr-only">Close modal</span>
 						</button>
 						<div className="sm:p-2 lg:p-6 m-4">
-							<p className="text-xl text-gray-700 pb-2 dark:bg-gray-800 font-semibold flex flex-start">
+							<p className="text-xl text-gray-700 pb-2 dark:bg-gray-800 dark:text-white font-semibold flex flex-start">
 								{' '}
 								Verification Details
 							</p>
@@ -102,7 +102,7 @@ const ProofRequest = (props: {
 								</div>
 							) : (
 								<div className=" text-gray-500 dark:text-gray-300 w-full">
-									<div className="mt-1">
+									<div className="mt-1 ">
 										<AttributesListData 
 										attributeDataList = {aggregatedData}
 										/>									
@@ -118,7 +118,7 @@ const ProofRequest = (props: {
 								className="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400"
 								role="alert"
 							>
-								<span className="font-medium">Success alert! </span> {succesMsg}
+								{succesMsg}
 							</div>
 						)}
 
@@ -178,7 +178,7 @@ const ProofRequest = (props: {
 							<span className="sr-only">Close modal</span>
 						</button>
 						<div className="sm:p-2 lg:p-6 m-4">
-							<p className="text-xl font-semibold text-gray-700 dark:bg-gray-800 flex flex-start pb-2">
+							<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 ? (
diff --git a/src/components/Verification/SchemaCredDefDetails.tsx b/src/components/Verification/SchemaCredDefDetails.tsx
index 15c08b10e..f0251d8a5 100644
--- a/src/components/Verification/SchemaCredDefDetails.tsx
+++ b/src/components/Verification/SchemaCredDefDetails.tsx
@@ -7,18 +7,29 @@ const SchemaCredDefDetails = ({ schemaCredDefList }: SchemaCredDefProps) => {
 
     return (
         <>
-            {schemaCredDefList.map((item, index) => (
+            {schemaCredDefList.map((item) => (
                 <div key={Object.values(item)[2]} className="flex justify-start ml-2 w-full mt-6">
                     <div className="w-full">
-                        <div className="flex flex-start mb-2 w-full ">
-                            <div className=" w-3/12 font-semibold text-primary-700 dark:bg-gray-800 m-1 p-1 flex justify-start items-center">
-                                Schema Id
-                            </div>
-                            <div className=" flex items-center p-1 m-1 ">:</div>{' '}
-                            <div className="w-9/12 m-1 flex justify-start truncate text-gray-600  items-center">
-                                {Object.values(item)[2]}
+                      
+                        {Object.values(item)[2] ? (
+                            <div className="flex flex-start mb-2 w-full ">
+                                <div className="w-3/12 font-semibold text-primary-700 dark:bg-gray-800 m-1 p-1 text-start">
+                                    {Object.values(item)[2] ? 'Schema Id' : ''}
+                                </div>{' '}
+                                <div className=" p-1 m-1">
+                                    {' '}
+                                    :
+                                </div>{' '}
+                                <div className="w-9/12 m-1 text-start text-gray-600 dark:text-white items-center cursor-pointer overflow-auto">
+                                    {Object.values(item)[2]
+                                        ? Object.values(item)[2]
+                                        : ''}
+                                </div>
                             </div>
-                        </div>
+                        ) : (
+                            ''
+                        )}
+
                         {Object.values(item)[1] ? (
                             <div className="flex flex-start mb-2 w-full ">
                                 <div className="w-3/12 font-semibold text-primary-700 dark:bg-gray-800 m-1 p-1 flex justify-start items-center">
@@ -28,9 +39,9 @@ const SchemaCredDefDetails = ({ schemaCredDefList }: SchemaCredDefProps) => {
                                     {' '}
                                     :
                                 </div>{' '}
-                                <div className="w-9/12 m-1 flex justify-start truncate text-gray-600  items-center">
+                                <div className="w-9/12 m-1 text-start text-gray-600 dark:text-white items-center cursor-pointer overflow-auto">
                                     {Object.values(item)[1]
-                                        ? Object.values(item)[1].slice(0, 36)
+                                        ? Object.values(item)[1]
                                         : ''}
                                 </div>
                             </div>
diff --git a/src/components/Verification/Verification.tsx b/src/components/Verification/Verification.tsx
index ddd9919e8..8d0365a04 100644
--- a/src/components/Verification/Verification.tsx
+++ b/src/components/Verification/Verification.tsx
@@ -10,6 +10,8 @@ import DataTable from "../../commonComponents/datatable";
 import type { TableData } from "../../commonComponents/datatable/interface";
 import { verifyCredential } from "../../api/verification";
 import { pathRoutes } from "../../config/pathRoutes";
+import CustomSpinner from "../CustomSpinner";
+import BackButton from '../../commonComponents/backbutton'
 
 interface SchemaDetails {
 	schemaName: string,
@@ -27,7 +29,7 @@ interface VerifyCredentialPayload {
 	connectionId: string;
 	attributes: Array<{
 		attributeName: string;
-		credDefId: string;
+		credDefId?: string  ;
 	}>;
 	comment: string;
 	orgId: number;
@@ -41,7 +43,7 @@ const VerificationCred = () => {
 	const [schemaDetails, setSchemaDetails] = useState<SchemaDetails>({
 		schemaName: '', version: '', schemaId: '', credDefId: ''
 	})
-	const [loading, setLoading] = useState<boolean>(false)
+	const [loading, setLoading] = useState<boolean>(true)
 	const [schemaAttributes, setSchemaAttributes] = useState<string[]>([]);
 	const [selectedUsersData, setSelectedUsersData] = useState<Array<{ name: string, selected: boolean }>>([]);
 	const [requestLoader, setRequestLoader] = useState<boolean>(false)
@@ -55,7 +57,9 @@ const VerificationCred = () => {
 				const schemaAttributes = await getFromLocalStorage(storageKeys.SCHEMA_ATTR)
 				const parsedSchemaDetails = JSON.parse(schemaAttributes) || [];
 				const attributes = parsedSchemaDetails.attribute.map((ele: any) => {
-					const attributes = ele.attributeName ? ele.attributeName : 'Not available';
+					const attributesName = ele.attributeName ? ele.attributeName : 'Not available';
+					const displayName = ele.displayName ? ele.displayName : 'Not available';
+
 					return {
 						data: [
 							{
@@ -66,7 +70,7 @@ const VerificationCred = () => {
 											type="checkbox"
 											onClick={(event: React.MouseEvent<HTMLInputElement>) => {
 												const inputElement = event?.target as HTMLInputElement;
-												selectConnection(attributes, inputElement?.checked);
+												selectConnection(attributesName, inputElement?.checked);
 											}}
 											value=""
 											className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer"
@@ -74,7 +78,7 @@ const VerificationCred = () => {
 									</div>
 								)
 							},
-							{ data: attributes },
+							{ data: displayName },
 						]
 					};
 				});
@@ -150,7 +154,7 @@ const VerificationCred = () => {
 	
 			const attributes = await selectedUsersData.map(user => ({
 				attributeName: user.name,
-				credDefId: credDefId,
+    ...(credDefId ? { credDefId } : {}),
 				schemaId: schemaId
 			}));
 			const verifyCredentialPayload: VerifyCredentialPayload = {
@@ -165,16 +169,12 @@ const VerificationCred = () => {
 				if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
 					setProofReqSuccess(data?.message);
 					setRequestLoader(false);
-					await clearLocalStorage()
+					clearLocalStorage()
 					setTimeout(()=>{
 						window.location.href = '/organizations/verification'
-		
-					}, 5000)
-					
-					
+					}, 2000)
 				} else {
 					setErrMsg(response as string);
-					
 				}
 			}
 			setTimeout(()=>{
@@ -201,25 +201,17 @@ const VerificationCred = () => {
 			<div className="mb-4 col-span-full xl:mb-2">
 			<div className="flex justify-between items-center">
 					<BreadCrumbs />
-					<Button
-            type="submit"
-            color='bg-primary-800'
-            onClick={() => {
-              window.location.href = `${pathRoutes.back.verification.verification}`
-            }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white'
-            style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
-          >
-            <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
-              <path fill="#1F4EAD" d="M.163 9.237a1.867 1.867 0 0 0-.122 1.153c.083.387.287.742.587 1.021l8.572 7.98c.198.19.434.343.696.447a2.279 2.279 0 0 0 1.657.013c.263-.1.503-.248.704-.435.201-.188.36-.41.468-.655a1.877 1.877 0 0 0-.014-1.543 1.999 1.999 0 0 0-.48-.648l-4.917-4.576h20.543c.568 0 1.113-.21 1.515-.584.402-.374.628-.882.628-1.411 0-.53-.226-1.036-.628-1.41a2.226 2.226 0 0 0-1.515-.585H7.314l4.914-4.574c.205-.184.368-.404.48-.648a1.878 1.878 0 0 0 .015-1.542 1.99 1.99 0 0 0-.468-.656A2.161 2.161 0 0 0 11.55.15a2.283 2.283 0 0 0-1.657.013 2.154 2.154 0 0 0-.696.447L.626 8.589a1.991 1.991 0 0 0-.463.648Z" />
-            </svg>
-						<span className="min-[320px]:hidden sm:block"> Back</span> 
-          </Button>
+					<BackButton path={pathRoutes.back.verification.verification} />
 				</div>
 				<h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
 					Verification
 				</h1>
 			</div>
+			{loading ? 
+				<div className="flex items-center justify-center mb-4">
+					<CustomSpinner/>
+					</div>
+					:
 			<Card className='transform transition duration-500 hover:scale-105 hover:bg-gray-50' style={{ width: '470px', height: '140px', maxWidth: '100%', maxHeight: '100%', overflow: 'auto' }}>
 				<div className="flex justify-between items-start">
 					<div>
@@ -242,6 +234,7 @@ const VerificationCred = () => {
 					</p>
 				</div>
 			</Card>
+			}
 			{
 				(proofReqSuccess || errMsg) &&
 				<div className="p-2">
@@ -257,7 +250,7 @@ const VerificationCred = () => {
 				</Alert>
 				</div>
 			}
-			<div className="font-montserrat text-base font-semibold leading-6 tracking-normal text-left p-4">
+			<div className="font-montserrat text-base font-semibold leading-6 tracking-normal text-left dark:text-white p-4">
 				Attribute List
 			</div>
 			<div
diff --git a/src/components/Verification/VerificationCredentialList.tsx b/src/components/Verification/VerificationCredentialList.tsx
index 3049fc108..ed011c083 100644
--- a/src/components/Verification/VerificationCredentialList.tsx
+++ b/src/components/Verification/VerificationCredentialList.tsx
@@ -1,7 +1,11 @@
 'use client';
 
-import { Alert, Button, Pagination } from 'flowbite-react';
+import { Alert, Button } from 'flowbite-react';
 import { ChangeEvent, useEffect, useState } from 'react';
+import {
+	ProofRequestState,
+	ProofRequestStateUserText,
+} from '../../common/enums';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
 import {
 	getProofAttributes,
@@ -12,22 +16,20 @@ import {
 import { AlertComponent } from '../AlertComponent';
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../BreadCrumbs';
+import CustomSpinner from '../CustomSpinner';
 import DataTable from '../../commonComponents/datatable';
+import DateTooltip from '../Tooltip';
 import { EmptyListMessage } from '../EmptyListComponent';
+import { Features } from '../../utils/enums/features';
 import ProofRequest from './ProofRequestPopup';
-import {
-	ProofRequestState,
-	ProofRequestStateUserText,
-} from '../../common/enums';
 import React from 'react';
 import type { RequestProof } from './interface';
+import RoleViewButton from '../RoleViewButton';
 import SearchInput from '../SearchInput';
 import type { TableData } from '../../commonComponents/datatable/interface';
 import { dateConversion } from '../../utils/DateConversion';
 import { pathRoutes } from '../../config/pathRoutes';
-import { removeFromLocalStorage } from '../../api/Auth';
-import CustomSpinner from '../CustomSpinner';
-import DateTooltip from '../Tooltip';
+import { getFromLocalStorage, removeFromLocalStorage } from '../../api/Auth';
 
 const VerificationCredentialList = () => {
 	const [loading, setLoading] = useState<boolean>(true);
@@ -64,127 +66,127 @@ const VerificationCredentialList = () => {
 		setLoading(true);
 
 		try {
-			const response = await getVerificationList();
-			const { data } = response as AxiosResponse;
+			const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+			if (orgId) {
+				const response = await getVerificationList();
+				const { data } = response as AxiosResponse;
 
-			if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-				const credentialList = data?.data?.map((requestProof: RequestProof) => {
-					return {
-						data: [
-							{ data: requestProof?.id ? requestProof?.id : 'Not available' },
-							{
-								data: requestProof?.connectionId
-									? requestProof?.connectionId
-									: 'Not available',
-							},
-							{ data: <DateTooltip date={requestProof.updatedAt}> {dateConversion(requestProof.updatedAt)} </DateTooltip> },
-							{
-								data: (
-									<span
-										className={`${
-											requestProof?.state === ProofRequestState.requestSent &&
-											'bg-orange-100 text-orange-800 border border-orange-100 dark:bg-gray-700 dark:border-orange-300 dark:text-orange-300'
-										} ${
-											requestProof?.state === ProofRequestState.done &&
-											'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border border-green-100 dark:border-green-500'
-										} ${
-											requestProof?.state === ProofRequestState.abandoned &&
-											'bg-red-100 text-red-800 border border-red-100 dark:border-red-400 dark:bg-gray-700 dark:text-red-400'
-										} ${
-											requestProof?.state === ProofRequestState.presentationReceived &&
-											'bg-secondary-700 text-primary-600 border border-secondary-100 dark:border-secondary-700 dark:bg-gray-700 dark:text-secondary-800'
-										}	text-xs font-medium sm:mr-0 md:mr-2 min-[320]:px-1 sm:px-0 lg:px-0.5 py-0.5 rounded-md flex justify-center min-[320]:w-full 2xl:w-8/12`}
-									>
-										{requestProof?.state === ProofRequestState.requestSent
-											? ProofRequestStateUserText.requestSent
-											: requestProof?.state ===
-											  ProofRequestState.presentationReceived
-											? ProofRequestStateUserText.requestReceived
-											: requestProof?.state === ProofRequestState.done
-											? ProofRequestStateUserText.done
-											: requestProof?.state === ProofRequestState.abandoned
-											? ProofRequestStateUserText.abandoned
-											: ''}
-									</span>
-								),
-							},
-							{
-								data: (
-									<Button
-										disabled={
-											(
-												requestProof.state !==
-												ProofRequestState.presentationReceived
-											) && requestProof?.state !== 'done'
-										}
-										className='text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
-										style={{ height: '2.5rem', minWidth: '4rem' }}
-										onClick={() => {
-											openProofRequestModel(
-												true,
-												requestProof?.id,
-												requestProof.state,
-											);
+				if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+
+					const credentialList = data?.data?.map((requestProof: RequestProof) => {
+						return {
+							data: [
+								{ data: requestProof?.id ? requestProof?.id : 'Not available' },
+								{
+									data: requestProof?.connectionId
+										? requestProof?.connectionId
+										: 'Not available',
+								},
+								{ data: <DateTooltip date={requestProof.updatedAt}> {dateConversion(requestProof.updatedAt)} </DateTooltip> },
+								{
+									data: (
+										<span
+											className={`${requestProof?.state === ProofRequestState.requestSent &&
+												'bg-orange-100 text-orange-800 border border-orange-100 dark:bg-gray-700 dark:border-orange-300 dark:text-orange-300'
+												} ${requestProof?.state === ProofRequestState.done &&
+												'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border border-green-100 dark:border-green-500'
+												} ${requestProof?.state === ProofRequestState.abandoned &&
+												'bg-red-100 text-red-800 border border-red-100 dark:border-red-400 dark:bg-gray-700 dark:text-red-400'
+												} ${requestProof?.state === ProofRequestState.presentationReceived &&
+												'bg-secondary-700 text-primary-600 border border-secondary-100 dark:border-secondary-700 dark:bg-gray-700 dark:text-secondary-800'
+												}	text-xs font-medium sm:mr-0 md:mr-2 min-[320]:px-1 sm:px-0 lg:px-0.5 py-0.5 rounded-md flex justify-center min-[320]:w-full 2xl:w-8/12`}
+										>
+											{requestProof?.state === ProofRequestState.requestSent
+												? ProofRequestStateUserText.requestSent
+												: requestProof?.state ===
+													ProofRequestState.presentationReceived
+													? ProofRequestStateUserText.requestReceived
+													: requestProof?.state === ProofRequestState.done
+														? ProofRequestStateUserText.done
+														: requestProof?.state === ProofRequestState.abandoned
+															? ProofRequestStateUserText.abandoned
+															: ''}
+										</span>
+									),
+								},
+								{
+									data: (
+										<Button
+											disabled={
+												(
+													requestProof.state !==
+													ProofRequestState.presentationReceived
+												) && requestProof?.state !== 'done'
+											}
+											className='text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
+											style={{ height: '2.5rem', minWidth: '4rem' }}
+											onClick={() => {
+												openProofRequestModel(
+													true,
+													requestProof?.id,
+													requestProof.state,
+												);
 												getProofPresentationData(requestProof?.id);
-										}}
-									>
-										{requestProof?.state === 'done' ? (
-											<p className="pr-1 flex text-center justify-center item-center">
-												{' '}
-												<svg
-													className="pr-1 mt-0.5 flex items-center"
-													xmlns="http://www.w3.org/2000/svg"
-													width="24"
-													height="15"
-													fill="none"
-													viewBox="0 0 24 15"
-												>
-													 {' '}
-													<path
-														fill="#fff"
-														d="M23.385 7.042C23.175 6.755 18.165 0 11.767 0 5.37 0 .36 6.755.15 7.042a.777.777 0 0 0 0 .916C.36 8.245 5.37 15 11.767 15c6.398 0 11.408-6.755 11.618-7.042.2-.273.2-.643 0-.916Zm-11.618 6.406c-4.713 0-8.795-4.483-10.003-5.949 1.207-1.466 5.28-5.947 10.003-5.947 4.713 0 8.794 4.482 10.003 5.949-1.207 1.466-5.28 5.947-10.003 5.947Z"
-													/>
-													 {' '}
-													<path
-														fill="#fff"
-														d="M11.772 2.84a4.66 4.66 0 0 0-4.655 4.655 4.66 4.66 0 0 0 4.655 4.655 4.66 4.66 0 0 0 4.656-4.655 4.66 4.66 0 0 0-4.656-4.655Zm0 7.758A3.107 3.107 0 0 1 8.67 7.495a3.107 3.107 0 0 1 3.103-3.103 3.107 3.107 0 0 1 3.104 3.103 3.107 3.107 0 0 1-3.104 3.103Z"
-													/>
-												</svg>
-												<span className="pl-1">View</span>{' '}
-											</p>
-										) : (
-											<p className="flex items-center justify-center">
-												{' '}
-												<svg
-													className="pr-2 flex items-center"
-													xmlns="http://www.w3.org/2000/svg"
-													width="25"
-													height="25"
-													fill="none"
-													viewBox="0 0 17 17"
-												>
-													<path
-														fill="#fff"
-														d="M15.749 6.99c-.334-.21-.813-.503-.813-.697.01-.397.113-.786.3-1.136.277-.69.561-1.395.204-1.915-.358-.519-1.122-.462-1.853-.405-.358.082-.73.082-1.089 0a2.74 2.74 0 0 1-.374-1.087c-.162-.739-.333-1.501-.942-1.704-.61-.203-1.154.3-1.699.811-.309.276-.723.65-.934.65-.212 0-.634-.374-.943-.65C7.07.362 6.51-.14 5.908.046c-.602.187-.805.933-.967 1.671-.05.383-.18.75-.382 1.08a2.295 2.295 0 0 1-1.09 0c-.722-.066-1.478-.13-1.844.405-.365.535-.081 1.225.195 1.914.19.35.295.739.31 1.136-.066.195-.521.487-.854.698C.65 7.34 0 7.76 0 8.41c0 .649.65 1.07 1.276 1.468.333.211.812.495.853.69-.014.4-.12.791-.309 1.144-.276.69-.56 1.395-.195 1.914.366.52 1.122.463 1.845.398a2.441 2.441 0 0 1 1.089.04c.2.33.33.697.382 1.08.162.738.333 1.508.934 1.711a.86.86 0 0 0 .277.106 2.439 2.439 0 0 0 1.422-.812c.308-.275.731-.657.942-.657.212 0 .626.382.935.657.544.487 1.105.998 1.698.812.593-.187.813-.974.943-1.712a2.69 2.69 0 0 1 .374-1.08 2.472 2.472 0 0 1 1.089-.04c.73.065 1.479.138 1.852-.397.374-.536.073-1.225-.203-1.915a2.585 2.585 0 0 1-.3-1.144c.056-.194.511-.478.812-.69C16.35 9.587 17 9.174 17 8.517c0-.658-.618-1.136-1.251-1.526Zm-.431 2.248c-.537.332-1.04.649-1.195 1.135a2.73 2.73 0 0 0 .325 1.68c.155.373.399.99.293 1.151-.106.163-.731.09-1.113.057a2.393 2.393 0 0 0-1.626.203 2.594 2.594 0 0 0-.682 1.55c-.082.365-.236 1.054-.406 1.111-.171.057-.667-.422-.894-.625a2.585 2.585 0 0 0-1.48-.868c-.58.11-1.105.417-1.486.868-.22.203-.756.674-.894.625-.138-.049-.325-.746-.407-1.111a2.594 2.594 0 0 0-.674-1.55 1.522 1.522 0 0 0-.95-.243 7.016 7.016 0 0 0-.708.04c-.374 0-1.008.09-1.105-.056-.098-.146.097-.78.26-1.112.285-.51.4-1.1.325-1.68-.146-.486-.65-.81-1.186-1.135-.358-.227-.902-.568-.902-.811 0-.244.544-.552.902-.811.536-.333 1.04-.658 1.186-1.136a2.754 2.754 0 0 0-.325-1.688c-.163-.348-.398-.973-.284-1.127.113-.154.73-.09 1.105-.057.549.122 1.123.05 1.625-.203.392-.427.629-.972.674-1.55.082-.364.236-1.054.407-1.11.17-.058.674.421.894.624.381.45.907.753 1.487.86a2.569 2.569 0 0 0 1.479-.86c.227-.203.756-.673.894-.625.138.049.325.747.406 1.112.048.578.288 1.123.682 1.55a2.397 2.397 0 0 0 1.626.202c.382 0 1.007-.09 1.113.057.106.146-.138.811-.292 1.144a2.755 2.755 0 0 0-.326 1.687c.155.479.659.811 1.195 1.136.357.227.902.568.902.811 0 .243-.488.527-.845.755Z"
-													/>
-													<path
-														fill="#fff"
-														d="m11.253 6.126-3.78 3.943-1.687-1.403a.473.473 0 0 0-.149-.08.556.556 0 0 0-.352 0 .473.473 0 0 0-.148.08.377.377 0 0 0-.101.12.306.306 0 0 0 0 .284.377.377 0 0 0 .101.12l2.002 1.7a.459.459 0 0 0 .152.083.548.548 0 0 0 .181.027.601.601 0 0 0 .19-.043.499.499 0 0 0 .153-.097l4.105-4.284a.312.312 0 0 0 .074-.265.365.365 0 0 0-.174-.234.55.55 0 0 0-.632.049h.065Z"
-													/>
-												</svg>
-												<span>Verify</span>
-											</p>
-										)}
-									</Button>
-								),
-							},
-						],
-					};
-				});
+											}}
+										>
+											{requestProof?.state === 'done' ? (
+												<p className="pr-1 flex text-center justify-center item-center">
+													{' '}
+													<svg
+														className="pr-1 mt-0.5 flex items-center"
+														xmlns="http://www.w3.org/2000/svg"
+														width="24"
+														height="15"
+														fill="none"
+														viewBox="0 0 24 15"
+													>
+														{' '}
+														<path
+															fill="#fff"
+															d="M23.385 7.042C23.175 6.755 18.165 0 11.767 0 5.37 0 .36 6.755.15 7.042a.777.777 0 0 0 0 .916C.36 8.245 5.37 15 11.767 15c6.398 0 11.408-6.755 11.618-7.042.2-.273.2-.643 0-.916Zm-11.618 6.406c-4.713 0-8.795-4.483-10.003-5.949 1.207-1.466 5.28-5.947 10.003-5.947 4.713 0 8.794 4.482 10.003 5.949-1.207 1.466-5.28 5.947-10.003 5.947Z"
+														/>
+														{' '}
+														<path
+															fill="#fff"
+															d="M11.772 2.84a4.66 4.66 0 0 0-4.655 4.655 4.66 4.66 0 0 0 4.655 4.655 4.66 4.66 0 0 0 4.656-4.655 4.66 4.66 0 0 0-4.656-4.655Zm0 7.758A3.107 3.107 0 0 1 8.67 7.495a3.107 3.107 0 0 1 3.103-3.103 3.107 3.107 0 0 1 3.104 3.103 3.107 3.107 0 0 1-3.104 3.103Z"
+														/>
+													</svg>
+													<span className="pl-1">View</span>{' '}
+												</p>
+											) : (
+												<p className="flex items-center justify-center">
+													{' '}
+													<svg
+														className="pr-2 flex items-center"
+														xmlns="http://www.w3.org/2000/svg"
+														width="25"
+														height="25"
+														fill="none"
+														viewBox="0 0 17 17"
+													>
+														<path
+															fill="#fff"
+															d="M15.749 6.99c-.334-.21-.813-.503-.813-.697.01-.397.113-.786.3-1.136.277-.69.561-1.395.204-1.915-.358-.519-1.122-.462-1.853-.405-.358.082-.73.082-1.089 0a2.74 2.74 0 0 1-.374-1.087c-.162-.739-.333-1.501-.942-1.704-.61-.203-1.154.3-1.699.811-.309.276-.723.65-.934.65-.212 0-.634-.374-.943-.65C7.07.362 6.51-.14 5.908.046c-.602.187-.805.933-.967 1.671-.05.383-.18.75-.382 1.08a2.295 2.295 0 0 1-1.09 0c-.722-.066-1.478-.13-1.844.405-.365.535-.081 1.225.195 1.914.19.35.295.739.31 1.136-.066.195-.521.487-.854.698C.65 7.34 0 7.76 0 8.41c0 .649.65 1.07 1.276 1.468.333.211.812.495.853.69-.014.4-.12.791-.309 1.144-.276.69-.56 1.395-.195 1.914.366.52 1.122.463 1.845.398a2.441 2.441 0 0 1 1.089.04c.2.33.33.697.382 1.08.162.738.333 1.508.934 1.711a.86.86 0 0 0 .277.106 2.439 2.439 0 0 0 1.422-.812c.308-.275.731-.657.942-.657.212 0 .626.382.935.657.544.487 1.105.998 1.698.812.593-.187.813-.974.943-1.712a2.69 2.69 0 0 1 .374-1.08 2.472 2.472 0 0 1 1.089-.04c.73.065 1.479.138 1.852-.397.374-.536.073-1.225-.203-1.915a2.585 2.585 0 0 1-.3-1.144c.056-.194.511-.478.812-.69C16.35 9.587 17 9.174 17 8.517c0-.658-.618-1.136-1.251-1.526Zm-.431 2.248c-.537.332-1.04.649-1.195 1.135a2.73 2.73 0 0 0 .325 1.68c.155.373.399.99.293 1.151-.106.163-.731.09-1.113.057a2.393 2.393 0 0 0-1.626.203 2.594 2.594 0 0 0-.682 1.55c-.082.365-.236 1.054-.406 1.111-.171.057-.667-.422-.894-.625a2.585 2.585 0 0 0-1.48-.868c-.58.11-1.105.417-1.486.868-.22.203-.756.674-.894.625-.138-.049-.325-.746-.407-1.111a2.594 2.594 0 0 0-.674-1.55 1.522 1.522 0 0 0-.95-.243 7.016 7.016 0 0 0-.708.04c-.374 0-1.008.09-1.105-.056-.098-.146.097-.78.26-1.112.285-.51.4-1.1.325-1.68-.146-.486-.65-.81-1.186-1.135-.358-.227-.902-.568-.902-.811 0-.244.544-.552.902-.811.536-.333 1.04-.658 1.186-1.136a2.754 2.754 0 0 0-.325-1.688c-.163-.348-.398-.973-.284-1.127.113-.154.73-.09 1.105-.057.549.122 1.123.05 1.625-.203.392-.427.629-.972.674-1.55.082-.364.236-1.054.407-1.11.17-.058.674.421.894.624.381.45.907.753 1.487.86a2.569 2.569 0 0 0 1.479-.86c.227-.203.756-.673.894-.625.138.049.325.747.406 1.112.048.578.288 1.123.682 1.55a2.397 2.397 0 0 0 1.626.202c.382 0 1.007-.09 1.113.057.106.146-.138.811-.292 1.144a2.755 2.755 0 0 0-.326 1.687c.155.479.659.811 1.195 1.136.357.227.902.568.902.811 0 .243-.488.527-.845.755Z"
+														/>
+														<path
+															fill="#fff"
+															d="m11.253 6.126-3.78 3.943-1.687-1.403a.473.473 0 0 0-.149-.08.556.556 0 0 0-.352 0 .473.473 0 0 0-.148.08.377.377 0 0 0-.101.12.306.306 0 0 0 0 .284.377.377 0 0 0 .101.12l2.002 1.7a.459.459 0 0 0 .152.083.548.548 0 0 0 .181.027.601.601 0 0 0 .19-.043.499.499 0 0 0 .153-.097l4.105-4.284a.312.312 0 0 0 .074-.265.365.365 0 0 0-.174-.234.55.55 0 0 0-.632.049h.065Z"
+														/>
+													</svg>
+													<span>Verify</span>
+												</p>
+											)}
+										</Button>
+									),
+								},
+							],
+						};
+					});
 
-				setVerificationList(credentialList);
-			} else {
-				setErrMsg(response as string);
+					setVerificationList(credentialList);
+				} else {
+					setErrMsg(response as string);
+				}
 			}
 		} catch (error) {
 			setErrMsg('An error occurred while fetching the proof request list');
@@ -240,7 +242,7 @@ const VerificationCredentialList = () => {
 		let getData: NodeJS.Timeout
 
 		if (searchText.length >= 1) {
-			getData = setTimeout(() => {}, 1000);
+			getData = setTimeout(() => { }, 1000);
 		} else {
 			getproofRequestList()
 		}
@@ -273,43 +275,35 @@ const VerificationCredentialList = () => {
 				</h1>
 			</div>
 			<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="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-end mb-4">
-						<Button
-							onClick={schemeSelection}
-							className='text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
-						>
-							<svg
-								className="mr-2 mt-1"
-								xmlns="http://www.w3.org/2000/svg"
-								width="20"
-								height="20"
-								fill="none"
-								viewBox="0 0 25 25"
-							>
-								<path
-									fill="#fff"
-									d="M21.094 0H3.906A3.906 3.906 0 0 0 0 3.906v12.5a3.906 3.906 0 0 0 3.906 3.907h.781v3.906a.781.781 0 0 0 1.335.553l4.458-4.46h10.614A3.906 3.906 0 0 0 25 16.407v-12.5A3.907 3.907 0 0 0 21.094 0Zm2.343 16.406a2.343 2.343 0 0 1-2.343 2.344H10.156a.782.782 0 0 0-.553.228L6.25 22.333V19.53a.781.781 0 0 0-.781-.781H3.906a2.344 2.344 0 0 1-2.344-2.344v-12.5a2.344 2.344 0 0 1 2.344-2.344h17.188a2.343 2.343 0 0 1 2.343 2.344v12.5Zm-3.184-5.951a.81.81 0 0 1-.17.254l-3.125 3.125a.781.781 0 0 1-1.105-1.106l1.792-1.79h-7.489a2.343 2.343 0 0 0-2.344 2.343.781.781 0 1 1-1.562 0 3.906 3.906 0 0 1 3.906-3.906h7.49l-1.793-1.79a.78.78 0 0 1 .254-1.277.781.781 0 0 1 .852.17l3.125 3.125a.79.79 0 0 1 .169.852Z"
-								/>
-							</svg>
-							Request
-						</Button>
+						<RoleViewButton
+							buttonTitle='Request'
+							feature={Features.VERIFICATION}
+							svgComponent={
+								<svg className='mr-2 mt-1' xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 25 25">
+									<path fill="#fff" d="M21.094 0H3.906A3.906 3.906 0 0 0 0 3.906v12.5a3.906 3.906 0 0 0 3.906 3.907h.781v3.906a.781.781 0 0 0 1.335.553l4.458-4.46h10.614A3.906 3.906 0 0 0 25 16.407v-12.5A3.907 3.907 0 0 0 21.094 0Zm2.343 16.406a2.343 2.343 0 0 1-2.343 2.344H10.156a.782.782 0 0 0-.553.228L6.25 22.333V19.53a.781.781 0 0 0-.781-.781H3.906a2.344 2.344 0 0 1-2.344-2.344v-12.5a2.344 2.344 0 0 1 2.344-2.344h17.188a2.343 2.343 0 0 1 2.343 2.344v12.5Zm-3.184-5.951a.81.81 0 0 1-.17.254l-3.125 3.125a.781.781 0 0 1-1.105-1.106l1.792-1.79h-7.489a2.343 2.343 0 0 0-2.344 2.343.781.781 0 1 1-1.562 0 3.906 3.906 0 0 1 3.906-3.906h7.49l-1.793-1.79a.78.78 0 0 1 .254-1.277.781.781 0 0 1 .852.17l3.125 3.125a.79.79 0 0 1 .169.852Z" />
+								</svg>
+							}
+							onClickEvent={schemeSelection}
+						/>
 					</div>
 					{
-					(proofReqSuccess || errMsg) && (
-						<div className="p-2">
-							<Alert
-								color={proofReqSuccess ? 'success' : 'failure'}
-								onDismiss={() => setErrMsg(null)}
-							>
-								<span>
-									<p>
-										{proofReqSuccess || errMsg}
-									</p>
-								</span>
-							</Alert>
-						</div>
-					)}
+						(proofReqSuccess || errMsg) && (
+							<div className="p-2">
+								<Alert
+									color={proofReqSuccess ? 'success' : 'failure'}
+									onDismiss={() => setErrMsg(null)}
+								>
+									<span>
+										<p>
+											{proofReqSuccess || errMsg}
+										</p>
+									</span>
+								</Alert>
+							</div>
+						)}
 					{loading ? (
 						<div className="flex items-center justify-center mb-4">
 							<CustomSpinner />
diff --git a/src/components/organization/CreateOrgFormModal.tsx b/src/components/organization/CreateOrgFormModal.tsx
deleted file mode 100644
index 5883ef79a..000000000
--- a/src/components/organization/CreateOrgFormModal.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-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 { useEffect, useRef, useState } from "react";
-
-import { AlertComponent } from "../AlertComponent";
-import type { AxiosResponse } from 'axios';
-import { asset } from '../../lib/data.js';
-import { createOrganization } from "../../api/organization";
-
-interface Values {
-    name: string;
-    description: string;
-}
-
-interface ILogoImage {
-    logoFile: string | File
-    imagePreviewUrl: string | ArrayBuffer | null | File,
-    fileName: string
-}
-
-
-const CreateOrgFormModal = (props: { openModal: boolean; setMessage: (message: string)=> void ; setOpenModal: (flag: boolean) => void }) => {
-
-    const [logoImage, setLogoImage] = useState<ILogoImage>({
-        logoFile: "",
-        imagePreviewUrl: "",
-        fileName: ''
-    })
-
-    const [loading, setLoading] = useState<boolean>(false)
-
-    const [isImageEmpty, setIsImageEmpty] = useState(true)
-    const [initialOrgData, setOrgData] = useState({
-        name: '',
-        description: '',
-    })
-    const [erroMsg, setErrMsg] = useState<string | null>(null)
-
-    const [imgError, setImgError] = useState('')
-
-    useEffect(() => {
-        setOrgData({
-            name: '',
-            description: '',
-        })
-        setLogoImage({
-            ...logoImage,
-            logoFile: "",
-            imagePreviewUrl: ""
-        })
-    }, [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 => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, guard-for-in
-        for (const property in object) {
-            setIsImageEmpty(false)
-            return false
-        }
-        setIsImageEmpty(true)
-        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")
-        }
-    }
-
-    const sumitCreateOrganization = async (values: Values) => {
-        setLoading(true)
-
-        const orgData = {
-            name: values.name,
-            description: values.description,
-            logo: logoImage?.imagePreviewUrl as string || "",
-            website: ""
-        }
-
-        const resCreateOrg = await createOrganization(orgData)
-
-        const { data } = resCreateOrg as AxiosResponse
-        setLoading(false)
-
-        if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
-            props.setMessage(data?.message)
-            props.setOpenModal(false)
-
-        } else {
-            setErrMsg(resCreateOrg as string)
-        }
-    }
-
-    return (
-        <Modal show={props.openModal} onClose={() => {
-            setLogoImage({
-                logoFile: "",
-                imagePreviewUrl: "",
-                fileName: ''
-            })
-            setOrgData(initialOrgData)
-            props.setOpenModal(false)
-        }
-        }>
-            <Modal.Header>Create Organization</Modal.Header>
-            <Modal.Body>
-                 <AlertComponent
-                    message={erroMsg}
-                    type={'failure'}
-                    onAlertClose = {() => {
-                        setErrMsg(null)
-                    }}
-                    />
-                <Formik
-                    initialValues={initialOrgData}
-                    validationSchema={
-                        yup.object().shape({
-                            name: yup
-                                .string()
-                                .min(2, 'Organization name must be at least 2 characters')
-                                .max(50, 'Organization name must be at most 50 characters')
-                                .required('Organization name is required')
-                                .trim(),
-                            description: yup
-                                .string()
-                                .min(2, 'Organization name must be at least 2 characters')
-                                .max(255, 'Organization name must be at most 255 characters')
-                                .required('Description is required')
-                        })}
-                    validateOnBlur
-                    validateOnChange
-                    enableReinitialize
-                    onSubmit={async (
-                        values: Values,
-                        { resetForm }: FormikHelpers<Values>
-                    ) => {
-
-                        sumitCreateOrganization(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"
-                                >
-                                    {
-                                        typeof (logoImage.logoFile) === "string" ?
-                                            <Avatar
-                                                size="lg"
-                                            /> :
-                                            <img
-                                                className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
-                                                src={typeof (logoImage.logoFile) === "string" ? asset('images/users/bonnie-green-2x.png') : URL.createObjectURL(logoImage.logoFile)}
-                                                alt="Jese picture"
-                                            />
-                                    }
-
-                                    <div>
-                                        <h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
-                                            Organization 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="organizationlogo">
-                                                    <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="organizationlogo" title=""
-                                                        onChange={(event): void => handleImageChange(event)} />
-                                                    {/* <span>{selectedImage || 'No File Chosen'}</span> */}
-                                                    {imgError ? <div className="text-red-500">{imgError}</div> : <span className="mt-1  text-sm text-gray-500 dark:text-gray-400">{logoImage.fileName || 'No File Chosen'}</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 Organization Name" />
-                                {
-                                    (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 Organization Description" />
-                                {
-                                    (formikHandlers?.errors?.description && formikHandlers?.touched?.description) &&
-                                    <span className="text-red-500 text-xs">{formikHandlers?.errors?.description}</span>
-                                }
-                            </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'
-																
-                            ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
-                            <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
-                          </svg>
-                          
-                                Create
-                            </Button>
-                        </Form>
-                    )}
-
-                </Formik>
-            </Modal.Body>
-
-        </Modal>
-    )
-}
-
-export default CreateOrgFormModal;
diff --git a/src/components/organization/Dashboard.tsx b/src/components/organization/Dashboard.tsx
index 3505dbf13..69c1a7eb1 100644
--- a/src/components/organization/Dashboard.tsx
+++ b/src/components/organization/Dashboard.tsx
@@ -6,18 +6,18 @@ import { useEffect, useState } from 'react';
 import { Alert } from 'flowbite-react';
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../BreadCrumbs';
-import Credential_Card from '../../assets/Credential_Card.svg';
+import credIcon from '../../assets/cred-icon.svg';
 import CustomAvatar from '../Avatar';
 import CustomSpinner from '../CustomSpinner';
 import EditOrgdetailsModal from './EditOrgdetailsModal';
-import Invitation_Card from '../../assets/Invitation_Card.svg';
 import OrganizationDetails from './OrganizationDetails';
 import { Roles } from '../../utils/enums/roles';
-import Schema_Card from '../../assets/Schema_Card.svg';
-import User_Card from '../../assets/User_Card.svg';
+import schemaCard from '../../assets/schema-icon.svg';
+import userCard from '../../assets/users-icon.svg';
 import WalletSpinup from './WalletSpinup';
 import { getFromLocalStorage } from '../../api/Auth';
 import { pathRoutes } from '../../config/pathRoutes';
+import DashboardCard from '../../commonComponents/DashboardCard';
 
 const Dashboard = () => {
     const [orgData, setOrgData] = useState<Organisation | null>(null);
@@ -47,12 +47,12 @@ const Dashboard = () => {
     const getUserRoles = async () => {
         const orgRoles = await getFromLocalStorage(storageKeys.ORG_ROLES)
         const roles = orgRoles.split(',')
-        setUserRoles(roles)        
+        setUserRoles(roles)
     }
 
     useEffect(() => {
         getUserRoles()
-    },[])
+    }, [])
 
 
 
@@ -145,35 +145,48 @@ const Dashboard = () => {
                     <div
                         className="items-center flex flex-wrap"
                     >
+
                         <div className='mr-4'>
-                            {(orgData?.logoUrl) ? <CustomAvatar size='60' src={orgData?.logoUrl} /> : <CustomAvatar size='60' name={orgData?.name} />}
+                            {(orgData?.logoUrl) ? <CustomAvatar size='80' src={orgData?.logoUrl} /> : <CustomAvatar size='90' name={orgData?.name} />}
                         </div>
-                        <div>
-                            <h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
-                                {orgData?.name}
-                            </h3>
+                        {orgData ?
+                            <div>
+                                <h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
+                                    {orgData?.name}
+                                </h3>
 
-                            <p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
-                                {orgData?.description}
-                            </p>
+                                <p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
+                                    {orgData?.description}
+                                </p>
 
-                        </div>
+                                <p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
+                                    Profile view :
+                                    <span className='font-semibold'>
+                                        {orgData?.publicProfile ? " Public" : "Private"}
+                                    </span>
+                                </p>
+
+                            </div>
+                            :
+                            <CustomSpinner />
+                        }
                     </div>
+
                     {
-                        (userRoles.includes(Roles.OWNER) || userRoles.includes(Roles.ADMIN)) 
-                        &&  <div className="inline-flex items-center">
-                        <button type="button" 
-                        >
-                            <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" color='#3558A8'
-                                onClick={EditOrgDetails}><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" clip-rule="evenodd"></path></svg>
-
-                        </button>
-                    </div>
-                    }                 
+                        (userRoles.includes(Roles.OWNER) || userRoles.includes(Roles.ADMIN))
+                        && <div className="inline-flex items-center">
+                            <button type="button"
+                            >
+                                <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" color='#3558A8'
+                                    onClick={EditOrgDetails}><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" clip-rule="evenodd"></path></svg>
+
+                            </button>
+                        </div>
+                    }
 
                     <EditOrgdetailsModal
                         orgData={orgData}
@@ -198,58 +211,14 @@ const Dashboard = () => {
                     <div
                         className="grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-3 2xl:grid-cols-3"
                     >
-                        <div
-                            className="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800 transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer bg-no-repeat bg-center bg-cover" style={{ backgroundImage: `url(${User_Card})`, minHeight: '133px' }}
-                        >
-                            <div className="w-full" onClick={redirectOrgUsers}>
-                                <h3 className="text-base font-medium text-white">
-                                    Users
-                                </h3>
-                                <span
-                                    className="text-2xl font-semi-bold leading-none text-white sm:text-3xl dark:text-white"
-                                >{orgDashboard?.usersCount}</span
-                                >
-
-                            </div>
-                        </div>
-
-                        <div
-                            className={`items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800 transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer bg-no-repeat bg-center bg-cover ${!walletStatus ? 'pointer-events-none' : ''}`}
-                            style={{ backgroundImage: `url(${Schema_Card})`, minHeight: '133px' }}
-                            onClick={() => {
-                                if (walletStatus) {
-                                    window.location.href = pathRoutes.organizations.schemas;
-                                }
-                            }}
-                        > 
-                            <div className="w-full">
-                                <h3 className="text-base font-medium text-white">
-                                    Schemas
-                                </h3>
-                                <span className="text-2xl font-semi-bold leading-none text-white sm:text-3xl dark:text-white">
-                                    {orgDashboard?.schemasCount}
-                                </span>
-                            </div>
-                        </div>
-                        <div
-
-                            className="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800 transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer bg-no-repeat bg-center bg-cover" style={{ backgroundImage: `url(${Credential_Card})`, minHeight: '133px' }}
-                        >
-
-                            <div className="w-full" >
-
-                                <h3 className="text-base font-medium text-white">
-
-                                    Credentials
-                                </h3>
-                                <span
-
-                                    className="text-2xl font-semi-semi-bold leading-none text-white sm:text-3xl dark:text-white"
-                                >{orgDashboard?.credentialsCount}</span
-                                >
-
-                            </div>
-                        </div>
+                        <DashboardCard icon={userCard} backgroundColor="linear-gradient(279deg, #FFF -18.24%, #2F80ED -0.8%, #1F4EAD 61.45%)" label="Users" value={orgDashboard?.usersCount ?? 0} onClickHandler={redirectOrgUsers} />
+
+                        <DashboardCard icon={schemaCard} classes={!walletStatus ? 'pointer-events-none' : ''} backgroundColor="linear-gradient(279deg, #FFF -28.6%, #5AC2E8 21.61%, #0054FF 68.63%)" label="Schemas" value={orgDashboard?.schemasCount ?? 0} onClickHandler={() => {
+                            if (walletStatus) {
+                                window.location.href = pathRoutes.organizations.schemas;
+                            }
+                        }} />
+                        <DashboardCard icon={credIcon} backgroundColor="linear-gradient(279deg, #FFF -34.06%, #FFC968 43.71%, #FEB431 111.13%)" label="Credentials" value={orgDashboard?.credentialsCount ?? 0} />
                     </div>
                 </div>
 
@@ -268,14 +237,14 @@ const Dashboard = () => {
                 }
                 {
                     loading
-                        ? (<div className="flex items-center justify-center m-4">                           
-                            <CustomSpinner/>
+                        ? (<div className="flex items-center justify-center m-4">
+                            <CustomSpinner />
                         </div>)
                         : walletStatus === true
                             ? (<OrganizationDetails orgData={orgData} />)
                             : ((userRoles.includes(Roles.OWNER) || userRoles.includes(Roles.ADMIN))
-                        && <WalletSpinup orgName={orgData?.name} setWalletSpinupStatus={(flag: boolean) => setWalletSpinupStatus(flag)} />)
-                            
+                                && <WalletSpinup orgName={orgData?.name} setWalletSpinupStatus={(flag: boolean) => setWalletSpinupStatus(flag)} />)
+
 
                 }
 
diff --git a/src/components/organization/DedicatedIllustrate.tsx b/src/components/organization/DedicatedIllustrate.tsx
index 3686b3e4d..6b4c9ba53 100644
--- a/src/components/organization/DedicatedIllustrate.tsx
+++ b/src/components/organization/DedicatedIllustrate.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import DedicatedIcon from '../../assets/dedicated.svg';
 
 const DedicatedIllustrate = () => {
diff --git a/src/components/organization/EditOrgdetailsModal.tsx b/src/components/organization/EditOrgdetailsModal.tsx
index 57d742a48..997179817 100644
--- a/src/components/organization/EditOrgdetailsModal.tsx
+++ b/src/components/organization/EditOrgdetailsModal.tsx
@@ -2,16 +2,17 @@ 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 { IMG_MAX_HEIGHT, IMG_MAX_WIDTH, apiStatusCodes, imageSizeAccepted, storageKeys } from '../../config/CommonConstant'
 import { calculateSize, dataURItoBlob } from "../../utils/CompressImage";
 import { useEffect, useState } from "react";
+
 import { AlertComponent } from "../AlertComponent";
 import type { AxiosResponse } from 'axios';
-// import { asset } from '../../lib/data.js';
 import { updateOrganization } from "../../api/organization";
 import type { Organisation } from "./interfaces";
 
 interface Values {
+		website: any;
     name: string;
     description: string;
 }
@@ -26,58 +27,64 @@ interface EditOrgdetailsModalProps {
     openModal: boolean;
     setMessage: (message: string) => void;
     setOpenModal: (flag: boolean) => void;
-    onEditSucess?:() =>void;
-    orgData: Organisation | null; 
-  }
+    onEditSucess?: () => void;
+    orgData: Organisation | null;
+
+}
 
-const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
+const EditOrgdetailsModal = (props: EditOrgdetailsModalProps) => {
     const [logoImage, setLogoImage] = useState<ILogoImage>({
         logoFile: "",
         imagePreviewUrl: props?.orgData?.logoUrl || "",
-        fileName: ''
-    })
-
+        fileName: '' ,
 
+    })
     const [loading, setLoading] = useState<boolean>(false)
-
     const [isImageEmpty, setIsImageEmpty] = useState(true)
+    const [isPublic, setIsPublic] = useState(true)
 
     const [initialOrgData, setOrgData] = useState({
         name: props?.orgData?.name || "",
         description: props?.orgData?.description || "",
+				website: props?.orgData?.website || "",
     })
 
     useEffect(() => {
-        
+
         if (props.orgData) {
-          setOrgData({
-            name: props.orgData.name || '',
-            description: props.orgData.description || '',
-          });
-          
-          setLogoImage({
-            logoFile: "",
-            imagePreviewUrl: props.orgData.logoUrl || "",
-            fileName: ''
-          });
+            setOrgData({
+                name: props.orgData.name || '',
+                description: props.orgData.description || '',
+								website: props?.orgData?.website || "",
+            });
+
+            setLogoImage({
+                logoFile: "",
+                imagePreviewUrl: props.orgData.logoUrl || "",
+                fileName: ''
+            });
         }
-      }, [props.orgData]);
-    
+    }, [props]);
+
 
     const [erroMsg, setErrMsg] = useState<string | null>(null)
 
     const [imgError, setImgError] = useState('')
 
     useEffect(() => {
-        setOrgData({
-            name: '',
-            description: '',
-        })
-        setLogoImage({
-            ...logoImage,
-            logoFile: "",
-            imagePreviewUrl: ""
-        })
+        if (props.openModal === false) {
+            setOrgData({
+                name: '',
+                description: '',
+								website:''
+            })
+
+            setLogoImage({
+                ...logoImage,
+                logoFile: "",
+                imagePreviewUrl: ""
+            })
+        }
     }, [props.openModal])
 
 
@@ -122,7 +129,6 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
     }
 
     const isEmpty = (object: any): boolean => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars, guard-for-in
         for (const property in object) {
             setIsImageEmpty(false)
             return false
@@ -130,9 +136,7 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
         setIsImageEmpty(true)
         return true
     }
-
-
-    const handleImageChange = (event: any): void => {
+      const handleImageChange = (event: any): void => {
         setImgError('')
         const reader = new FileReader()
         const file = event?.target?.files
@@ -155,33 +159,34 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
         }
     }
 
-        const submitUpdateOrganization = async (values: Values) => {
-            setLoading(true)
+    const submitUpdateOrganization = async (values: Values) => {
 
-            const orgData = {
-                orgId: props?.orgData?.id,
-                name: values.name,
-                description: values.description,
-                logo: logoImage?.imagePreviewUrl as string || props?.orgData?.logoUrl,
-                website: ""
-            }
+        setLoading(true)
 
-            const resUpdateOrg = await updateOrganization(orgData)
+        const orgData = {
+            orgId: props?.orgData?.id,
+            name: values.name,
+            description: values.description,
+            logo: logoImage?.imagePreviewUrl as string || props?.orgData?.logoUrl,
+            website: values.website,
+            isPublic: isPublic
+        }
 
-            const { data } = resUpdateOrg as AxiosResponse
-            setLoading(false)
+        const resUpdateOrg = await updateOrganization(orgData, orgData.orgId?.toString() as string)
 
-            if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-                if(props?.onEditSucess){
-                    props?.onEditSucess()
-                }
-                props.setOpenModal(false)
+        const { data } = resUpdateOrg as AxiosResponse
+        setLoading(false)
 
-            } else {
-                setErrMsg(resUpdateOrg as string)
+        if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+            if (props?.onEditSucess) {
+                props?.onEditSucess()
             }
+            props.setOpenModal(false)
+        } else {
+            setErrMsg(resUpdateOrg as string)
         }
-        
+    }
+
     return (
         <Modal show={props.openModal} onClose={() => {
             setLogoImage({
@@ -195,19 +200,16 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
         }>
             <Modal.Header>Edit Organization</Modal.Header>
             <Modal.Body>
-                 <AlertComponent
+                <AlertComponent
                     message={erroMsg}
                     type={'failure'}
-                    onAlertClose = {() => {
+                    onAlertClose={() => {
                         setErrMsg(null)
                     }}
-                    />
+                />
                 <Formik
                     initialValues={
-                        {
-                            name:props?.orgData?.name || "",
-                        description:props?.orgData?.description || "",
-                        }
+                        initialOrgData
                     }
                     validationSchema={
                         yup.object().shape({
@@ -219,8 +221,8 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
                                 .trim(),
                             description: yup
                                 .string()
-                                .min(2, 'Organization name must be at least 2 characters')
-                                .max(255, 'Organization name must be at most 255 characters')
+                                .min(2, 'Description must be at least 2 characters')
+                                .max(255, 'Description must be at most 255 characters')
                                 .required('Description is required')
                         })}
                     validateOnBlur
@@ -230,9 +232,8 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
                         values: Values,
                         { resetForm }: FormikHelpers<Values>
                     ) => {
-
                         submitUpdateOrganization(values)
-
+                        window.location.reload();
                     }}
                 >
                     {(formikHandlers): JSX.Element => (
@@ -249,24 +250,22 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
 
 
                                     {
-                                       (typeof (logoImage.logoFile) === "string" && props?.orgData?.logoUrl) ?
-                                        <img
-                                        className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
-                                        src={props?.orgData?.logoUrl}
-                                        alt="Jese picture"
-                                    />
-                                    : typeof (logoImage.logoFile) === "string" ?
-                                            <Avatar
-                                                size="lg"
-                                            /> :
+                                        (typeof (logoImage.logoFile) === "string" && props?.orgData?.logoUrl) ?
                                             <img
                                                 className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
-                                                src={URL.createObjectURL(logoImage?.logoFile)}
+                                                src={props?.orgData?.logoUrl}
                                                 alt="Jese picture"
                                             />
+                                            : typeof (logoImage.logoFile) === "string" ?
+                                                <Avatar
+                                                    size="lg"
+                                                /> :
+                                                <img
+                                                    className="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
+                                                    src={URL.createObjectURL(logoImage?.logoFile)}
+                                                    alt="Jese picture"
+                                                />
                                     }
-
-
                                     <div>
                                         <h3 className="mb-1 text-xl font-bold text-gray-900 dark:text-white">
                                             Organization Logo
@@ -278,7 +277,7 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
 
                                             <div>
                                                 <label htmlFor="organizationlogo">
-																								<div className="px-4 py-2 bg-primary-700 hover:bg-primary-800 text-white text-center rounded-lg">Choose file</div>
+                                                    <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="organizationlogo" title=""
@@ -316,6 +315,7 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
                                 }
 
                             </div>
+
                             <div>
                                 <div
                                     className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@@ -340,17 +340,73 @@ const EditOrgdetailsModal = (props: EditOrgdetailsModalProps)=> {
                                     <span className="text-red-500 text-xs">{formikHandlers?.errors?.description}</span>
                                 }
                             </div>
+                            <div>
+                                <div
+                                    className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                                >
+                                    <Label
+                                        htmlFor="website"
+                                        value="Website URL"
+                                    />
 
+                                </div>
+                                <Field
+                                    id="website"
+                                    name="website"
+                                    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="Add org URL" />
+
+                            </div>
+                            <div className="mx-2 grid ">
+
+                                <div>
+                                    <div
+                                        className="block mb-2 mt-2 text-sm font-medium text-gray-900 dark:text-white"
+                                    >
+                                        <Label
+                                            htmlFor="name"
+                                            value=""
+                                        />
+                                    </div>
+                                    <input
+                                        className=""
+                                        type="radio"
+                                        checked={isPublic === false}
+                                        onChange={() => setIsPublic(false)}
+                                        id="private"
+                                        name="private"
+                                    /><span className="ml-2 text-gray-900 dark:text-white">Private<span className="block pl-6 text-gray-500 text-sm">Only the connected organization can see your organization details</span></span>
+                                </div>
+                                <div>
+                                    <div
+                                        className="block mb-2 mt-2 text-sm font-medium text-gray-900 dark:text-white"
+                                    >
+                                        <Label
+                                            htmlFor="name"
+                                            value=""
+                                        />
+                                    </div>
+                                    <input
+                                        className=""
+                                        type="radio"
+                                        onChange={() => setIsPublic(true)}
+                                        checked={isPublic === true}
+                                        id="public"
+                                        name="public"
+                                    />
+                                    <span className="ml-2 text-gray-900 dark:text-white">Public
+                                        <span className="block pl-6 text-gray-500 text-sm">Your profile and organization details can be seen by everyone</span></span>
+                                </div>
+                            </div>
                             <Button type="submit"
                                 isProcessing={loading}
-                                
-                                className='float-right text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:!bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
-                             
-                             ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 18 18">
-														 <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 1v12l-4-2-4 2V1h8ZM3 17h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z"/>
-													 </svg>
-													 
-                               Save
+                                className='mb-2 float-right text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:!bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
+
+                            ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 18 18">
+                                    <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 1v12l-4-2-4 2V1h8ZM3 17h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z" />
+                                </svg>
+
+                                Save
                             </Button>
                         </Form>
                     )}
diff --git a/src/components/organization/OrgDropDown.tsx b/src/components/organization/OrgDropDown.tsx
index 740fef4f0..4169a7abb 100644
--- a/src/components/organization/OrgDropDown.tsx
+++ b/src/components/organization/OrgDropDown.tsx
@@ -1,5 +1,5 @@
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
-import { getFromLocalStorage, setToLocalStorage } from '../../api/Auth';
+import { getFromLocalStorage, removeFromLocalStorage, setToLocalStorage } from '../../api/Auth';
 import { useEffect, useState } from 'react';
 
 import type { AxiosResponse } from 'axios';
@@ -27,6 +27,8 @@ const OrgDropDown = () => {
 	};
 
 	const goToOrgDashboard = async (org: Organisation) => {
+		await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID)
+		await removeFromLocalStorage(storageKeys.ECOSYSTEM_ROLE)
 
 		await setOrgRoleDetails(org)
 		window.location.href = pathRoutes.organizations.dashboard;
@@ -36,7 +38,7 @@ const OrgDropDown = () => {
 
 		await setToLocalStorage(storageKeys.ORG_ID, org.id.toString());
 		const roles: string[] = org?.userOrgRoles.map(role => role.orgRole.name)
-		
+
 		await setToLocalStorage(storageKeys.ORG_ROLES, roles.toString());
 	}
 
@@ -45,6 +47,7 @@ const OrgDropDown = () => {
 		let activeOrg: Organisation | null = null
 
 		const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+
 		if (orgId) {
 			activeOrg = organizations?.find(org => org.id === Number(orgId)) as Organisation
 			setactiveOrg(activeOrg || null)
@@ -100,7 +103,7 @@ const OrgDropDown = () => {
 			>
 				{orgList?.length > 0 ? (
 					<ul
-						className="max-h-48 py-2 overflow-y-auto text-gray-700 dark:text-gray-200 text-sm"
+						className="max-h-48 py-2 overflow-y-auto text-gray-700 dark:text-gray-200 text-sm scrollbar scrollbar-w-3 scrollbar-thumb-rounded-[0.25rem] scrollbar-track-slate-200 scrollbar-thumb-gray-400 dark:scrollbar-track-gray-900 dark:scrollbar-thumb-gray-700"
 						aria-labelledby="dropdownUsersButton"
 					>
 						{orgList?.map((org) => {
diff --git a/src/components/organization/OrganizationDetails.tsx b/src/components/organization/OrganizationDetails.tsx
index b272990ac..274417a85 100644
--- a/src/components/organization/OrganizationDetails.tsx
+++ b/src/components/organization/OrganizationDetails.tsx
@@ -21,9 +21,10 @@ const OrganizationDetails = ({ orgData }: { orgData: Organisation | null }) => {
 
         setLoading(true)
         const response = await createConnection(orgData?.name as string);
+				
         const { data } = response as AxiosResponse
 
-        if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+        if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
 
             setConnectionData(data?.data)
 
@@ -210,4 +211,4 @@ const OrganizationDetails = ({ orgData }: { orgData: Organisation | null }) => {
 
 }
 
-export default OrganizationDetails
\ No newline at end of file
+export default OrganizationDetails
diff --git a/src/components/organization/OrganizationsList.tsx b/src/components/organization/OrganizationsList.tsx
index 57e1eb4fd..7736e68f9 100644
--- a/src/components/organization/OrganizationsList.tsx
+++ b/src/components/organization/OrganizationsList.tsx
@@ -1,13 +1,12 @@
 'use client';
 
-import { Button, Card, Pagination } from 'flowbite-react';
+import { Card, Pagination } from 'flowbite-react';
 import { ChangeEvent, useEffect, useState } from 'react';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
 
 import { AlertComponent } from '../AlertComponent';
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../BreadCrumbs';
-import CreateOrgFormModal from "./CreateOrgFormModal";
 import CustomAvatar from '../Avatar'
 import { Features } from '../../utils/enums/features';
 import type { Organisation } from './interfaces'
@@ -18,7 +17,7 @@ import { pathRoutes } from '../../config/pathRoutes';
 import { setToLocalStorage } from '../../api/Auth';
 import { EmptyListMessage } from '../EmptyListComponent';
 import CustomSpinner from '../CustomSpinner';
-import React from 'react';
+import CreateEcosystemOrgModal from '../CreateEcosystemOrgModal';
 
 const initialPageState = {
   pageNumber: 1,
@@ -71,7 +70,7 @@ const OrganizationsList = () => {
         total: totalPages
       })
     }
-    else{
+    else {
       setError(response as string)
 
     }
@@ -114,12 +113,12 @@ const OrganizationsList = () => {
 
   const redirectOrgDashboard = async (activeOrg: Organisation) => {
 
-    	await setToLocalStorage(storageKeys.ORG_ID, activeOrg.id.toString());
-			const roles: string[] = activeOrg?.userOrgRoles.map(role => role.orgRole.name)
-			activeOrg.roles = roles
+    await setToLocalStorage(storageKeys.ORG_ID, activeOrg.id.toString());
+    const roles: string[] = activeOrg?.userOrgRoles.map(role => role.orgRole.name)
+    activeOrg.roles = roles
 
-			await setToLocalStorage(storageKeys.ORG_ROLES, roles.toString());
-      window.location.href = pathRoutes.organizations.dashboard
+    await setToLocalStorage(storageKeys.ORG_ROLES, roles.toString());
+    window.location.href = pathRoutes.organizations.dashboard
   }
 
 
@@ -151,15 +150,16 @@ const OrganizationsList = () => {
                 </div>
               }
               onClickEvent={createOrganizationModel}
-            />    
+            />
           </div>
 
-          <CreateOrgFormModal
+          <CreateEcosystemOrgModal
             openModal={props.openModal}
             setMessage={(data) => setMessage(data)}
             setOpenModal={
               props.setOpenModal
-            } />
+            }
+            isorgModal={true} />
 
           <AlertComponent
             message={message ? message : error}
@@ -171,8 +171,8 @@ const OrganizationsList = () => {
           />
 
           {loading
-            ? <div className="flex items-center justify-center mb-4 ">             
-              <CustomSpinner/>
+            ? <div className="flex items-center justify-center mb-4 ">
+              <CustomSpinner />
             </div>
             : organizationsList && organizationsList?.length > 0 ? (<div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
               {
@@ -222,7 +222,7 @@ const OrganizationsList = () => {
                 buttonContent={'Create Organization'}
                 onClick={createOrganizationModel}
                 feature={Features.CRETAE_ORG}
-                svgComponent={<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+                svgComponent={<svg className='pr-2 mr-1' xmlns="http://www.w3.org/2000/svg" width="24" height="15" fill="none" viewBox="0 0 24 24">
                   <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
                 </svg>} />)
           }
@@ -230,11 +230,11 @@ const OrganizationsList = () => {
           <div className="flex items-center justify-end mb-4">
 
             {organizationsList && organizationsList?.length > 0 && (
-            <Pagination
-            currentPage={currentPage.pageNumber}
-            onPageChange={onPageChange}
-            totalPages={currentPage.total}
-            />
+              <Pagination
+                currentPage={currentPage.pageNumber}
+                onPageChange={onPageChange}
+                totalPages={currentPage.total}
+              />
             )
             }
           </div>
diff --git a/src/components/organization/WalletSpinup.tsx b/src/components/organization/WalletSpinup.tsx
index 8808ef589..8028e0f2e 100644
--- a/src/components/organization/WalletSpinup.tsx
+++ b/src/components/organization/WalletSpinup.tsx
@@ -55,7 +55,7 @@ const WalletSpinup = (props: {
 
 	const [seeds, setSeeds] = useState<string>('');
 
-    const [isCopied, setIsCopied] = useState(false);
+	const [isCopied, setIsCopied] = useState(false);
 
 
 	const generateWalletname = () => {
@@ -86,17 +86,16 @@ const WalletSpinup = (props: {
 	};
 
 	const submitDedicatedWallet = async (values: Values) => {
-		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
 
 		const payload = {
 			walletName: values.name,
 			seed: seeds,
-			orgId: Number(orgId),
 			walletPassword: passwordEncryption(values.password),
 			clientSocketId: SOCKET.id,
 		};
 		setLoading(true);
-		const spinupRes = await spinupDedicatedAgent(payload);
+		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
+		const spinupRes = await spinupDedicatedAgent(payload, parseInt(orgId));
 		const { data } = spinupRes as AxiosResponse;
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
@@ -113,16 +112,15 @@ const WalletSpinup = (props: {
 
 	const submitSharedWallet = async (values: ValuesShared) => {
 		setLoading(true);
-		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
 
 		const payload = {
 			label: values.label,
 			seed: seeds,
-			orgId: Number(orgId),
 			clientSocketId: SOCKET.id,
 		};
+		const orgId = await getFromLocalStorage(storageKeys.ORG_ID);
 
-		const spinupRes = await spinupSharedAgent(payload);
+		const spinupRes = await spinupSharedAgent(payload, parseInt(orgId));
 		const { data } = spinupRes as AxiosResponse;
 
 		if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
@@ -173,7 +171,7 @@ const WalletSpinup = (props: {
 			setWalletSpinStep(6);
 			props.setWalletSpinupStatus(true);
 		}, 3000);
-        window.location.href= "/organizations/dashboard"
+		window.location.href = "/organizations/dashboard"
 		console.log(`invitation-url-creation-success`, JSON.stringify(data));
 	});
 
@@ -293,21 +291,26 @@ const WalletSpinup = (props: {
 		</Formik>
 	);
 
+	const orgName = props?.orgName ? props?.orgName?.split(" ").reduce((s, c) => (s.charAt(0).toUpperCase() + s.slice(1)) + (c.charAt(0).toUpperCase() + c.slice(1))
+	) : ""
+
 	const SharedAgentForm = () => (
 		<Formik
 			initialValues={{
 				seed: '',
-				label: props.orgName,
+				label: orgName,
 			}}
 			validationSchema={yup.object().shape({
 				label: yup.string()
-				.required('Wallet label is required')
-				.trim()
-				.test('no-spaces', 'Spaces are not allowed', value => !value || !value.includes(' '))
-				.matches(
+					.required('Wallet label is required')
+					.trim()
+					.test('no-spaces', 'Spaces are not allowed', value => !value || !value.includes(' '))
+					.matches(
 						/^[A-Za-z0-9-][^ !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]*$/,
 						'Wallet label must be alphanumeric only',
-				),
+					)
+					.min(2, 'Wallet label must be at least 2 characters')
+					.max(25, 'Wallet label must be at most 25 characters'),
 			})}
 			validateOnBlur
 			validateOnChange
@@ -325,22 +328,22 @@ const WalletSpinup = (props: {
 						</div>
 						<div className="flex align-center block mb-1 text-sm text-gray-900 dark:text-white">
 							{seeds}
-								<span
-							className="text-base font-semibold text-gray-900 truncate dark:text-white"
-						>
-							<button
-								className=
-								{`${isCopied}`} onClick={copyTextVal}
+							<span
+								className="text-base font-semibold text-gray-900 truncate dark:text-white"
+							>
+								<button
+									className=
+									{`${isCopied}`} onClick={copyTextVal}
 								>
-								{isCopied
-									? <svg className="h-6 w-6 text-white ml-2 text-base" width="25" height="25" viewBox="0 0 24 24" stroke-width="2" stroke="green" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z" />  <path d="M5 12l5 5l10 -10" /></svg>
-									: <svg className="h-6 w-6 text-green ml-2 text-base" width="25" height="25" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z" />  <rect x="8" y="8" width="12" height="12" rx="2" />  <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" /></svg>
-								}
+									{isCopied
+										? <svg className="h-6 w-6 text-white ml-2 text-base" width="25" height="25" viewBox="0 0 24 24" stroke-width="2" stroke="green" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z" />  <path d="M5 12l5 5l10 -10" /></svg>
+										: <svg className="h-6 w-6 text-green ml-2 text-base" width="25" height="25" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z" />  <rect x="8" y="8" width="12" height="12" rx="2" />  <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" /></svg>
+									}
 
-							</button>
-						</span>
+								</button>
+							</span>
 						</div>
-					
+
 					</div>
 					<div>
 						<div className="mb-1 block">
@@ -368,15 +371,15 @@ const WalletSpinup = (props: {
 						className='float-right text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
 					>
 						<svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
-									<path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
-								</svg>
+							<path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+						</svg>
 						Create
 					</Button>
 				</Form>
 			)}
 		</Formik>
 	);
-	
+
 	return (
 		<div className="mt-4 flex-col p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800">
 			<div className="items-center sm:flex xl:block 2xl:flex sm:space-x-4 xl:space-x-0 2xl:space-x-4">
@@ -392,7 +395,7 @@ const WalletSpinup = (props: {
 						</Alert>
 					)}
 					<h3 className="mb-1 mt-1 text-xl font-bold text-gray-900 dark:text-white">
-						 Create Wallet
+						Create Wallet
 					</h3>
 				</div>
 			</div>
@@ -404,34 +407,34 @@ const WalletSpinup = (props: {
 							<ul className="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
 								<li className="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
 									<div className="flex items-center pl-3">
-										<input
-											id="horizontal-list-radio-license"
-											type="radio"
-											checked={agentType === AgentType.SHARED ? true : false}
-											value=""
-											onChange={() => onRadioSelect(AgentType.SHARED)}
-											name="list-radio"
-											className="cursor-pointer w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
-										/>
-										<label className="w-full py-3 ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+										<label className="w-full py-3 text-sm font-medium text-gray-900 dark:text-gray-300 flex items-center">
+											<input
+												id="horizontal-list-radio-license"
+												type="radio"
+												checked={agentType === AgentType.SHARED}
+												value=""
+												onChange={() => onRadioSelect(AgentType.SHARED)}
+												name="list-radio"
+												className="cursor-pointer w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 mr-2"
+											/>
 											Shared
 										</label>
 									</div>
 								</li>
 								<li className="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
 									<div className="flex items-center pl-3">
-										<input
-											id="horizontal-list-radio-id"
-											type="radio"
-											value=""
-											onChange={() => onRadioSelect(AgentType.DEDICATED)}
-											checked={agentType === AgentType.DEDICATED ? true : false}
-											name="list-radio"
-											disabled
-											className="cursor-pointer w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
-										/>
-										<label className="w-full py-3 ml-2 text-sm font-medium text-gray-400 dark:text-gray-300">
-											Dedicated{' '}
+										<label className="w-full py-3 text-sm font-medium text-gray-400 dark:text-gray-300 cursor-not-allowed flex items-center">
+											<input
+												id="horizontal-list-radio-id"
+												type="radio"
+												value=""
+												onChange={() => onRadioSelect(AgentType.DEDICATED)}
+												checked={agentType === AgentType.DEDICATED}
+												name="list-radio"
+												disabled
+												className="cursor-pointer w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 disabled:cursor-not-allowed mr-2"
+											/>
+											Dedicated
 										</label>
 									</div>
 								</li>
@@ -510,7 +513,7 @@ const WalletSteps = (props: { steps: number; agentSpinupCall: boolean }) => {
 						<span className="absolute flex items-center justify-center w-8 h-8 bg-gray-900 rounded-full -left-4 ring-4 ring-white dark:ring-gray-900 dark:bg-gray-700"></span>
 					)}
 					<h3 className="font-medium leading-tight">
-					Wallet creation is in progress
+						Wallet creation is in progress
 					</h3>
 				</li>
 				<li className="mb-10 ml-6">
diff --git a/src/components/organization/interfaces/index.ts b/src/components/organization/interfaces/index.ts
index 0e1cfb184..6ed124adb 100644
--- a/src/components/organization/interfaces/index.ts
+++ b/src/components/organization/interfaces/index.ts
@@ -7,6 +7,7 @@ export interface UserOrgRole {
 }
 
 export interface Organisation {
+    logoFile: string
     id: number
     createDateTime: string
     createdBy: number
@@ -19,6 +20,8 @@ export interface Organisation {
     roles: string[]
     userOrgRoles: UserOrgRole[]
     org_agents: OrgAgent[]
+    publicProfile: boolean
+    
 }
 
 export interface OrgRole {
@@ -105,3 +108,8 @@ export interface Connection {
     lastChangedDateTime: string
     lastChangedBy: number
   }
+
+  export interface EcosystemDashboard {
+    membersCount: number
+    endorsementsCount: number
+  }
diff --git a/src/components/organization/interfaces/invitations.ts b/src/components/organization/interfaces/invitations.ts
index 4378939ab..45da32baf 100644
--- a/src/components/organization/interfaces/invitations.ts
+++ b/src/components/organization/interfaces/invitations.ts
@@ -1,6 +1,7 @@
 import type { OrgRole, Organisation } from "."
 
 export interface Invitation {
+		ecosystem: any
     id: number
     createDateTime: string
     createdBy: number
@@ -13,4 +14,4 @@ export interface Invitation {
     orgRoles: OrgRole[]
     email: string
     organisation: Organisation
-}
\ No newline at end of file
+}
diff --git a/src/components/organization/invitations/Invitations.tsx b/src/components/organization/invitations/Invitations.tsx
index d3e288051..652eb640a 100644
--- a/src/components/organization/invitations/Invitations.tsx
+++ b/src/components/organization/invitations/Invitations.tsx
@@ -157,7 +157,7 @@ const Invitations = () => {
                                                 className="flex flex-wrap justify-between align-center"
                                             >
                                                 <div className="flex min-w-[40%] space-x-4 xl:mb-4 2xl:mb-0">
-                                                    <div>
+                                                    <div className='dark:text-white'>
                                                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" width="60px" height="60px">
                                                             <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                                                         </svg>
@@ -221,12 +221,12 @@ const Invitations = () => {
                                                 </span>
 
 
-                                                <p
-                                                    className="mr-2 flex items-center text-sm font-medium text-gray-500 dark:text-gray-400"
+                                                <p 
+                                                className="mr-2 flex items-center text-sm font-medium text-gray-500 dark:text-gray-400"
                                                 >
-                                                    Invited On: <DateTooltip date={invitation.createDateTime}> {dateConversion(invitation.createDateTime)} </DateTooltip>                                                
-                                                    </p>
-                                                    
+                                                    Invited On: &nbsp;<DateTooltip date={invitation.createDateTime}>{dateConversion(invitation.createDateTime)}</DateTooltip>
+                                                </p>          
+
                                             </div>
                                         </li>
                                     ))
diff --git a/src/components/organization/invitations/ReceivedInvitations.tsx b/src/components/organization/invitations/ReceivedInvitations.tsx
index 916d0b62c..65ae411ec 100644
--- a/src/components/organization/invitations/ReceivedInvitations.tsx
+++ b/src/components/organization/invitations/ReceivedInvitations.tsx
@@ -94,8 +94,7 @@ const ReceivedInvitations = () => {
         setLoading(true)
         const response = await acceptRejectInvitations(invite.id, invite.orgId, status);
         const { data } = response as AxiosResponse
-
-        if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+        if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
             setMessage(data?.message)
             setLoading(false)
             window.location.href = pathRoutes.organizations.root
@@ -136,9 +135,9 @@ const ReceivedInvitations = () => {
                         } />
 
                     <AlertComponent
-                        message={message ? message : error}
-                        type={message ? 'success' : 'failure'}
-                        onAlertClose={() => {
+                         message={message ? message : error}
+												 type={message ? 'success' : 'failure'}
+                         onAlertClose={() => {
                             setMessage(null)
                             setError(null)
                         }}
diff --git a/src/components/organization/invitations/SendInvitationModal.tsx b/src/components/organization/invitations/SendInvitationModal.tsx
index a66b17410..aa1bd45f3 100644
--- a/src/components/organization/invitations/SendInvitationModal.tsx
+++ b/src/components/organization/invitations/SendInvitationModal.tsx
@@ -1,274 +1,375 @@
-import * as yup from "yup"
+import * as yup from 'yup';
 
-import { Avatar, Button, Label, Modal } from 'flowbite-react';
+import { Button, Label, Modal } from 'flowbite-react';
 import { Field, Form, Formik, FormikHelpers } from 'formik';
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from 'react';
 
-import { AlertComponent } from "../../AlertComponent";
+import { AlertComponent } from '../../AlertComponent';
 import type { AxiosResponse } from 'axios';
-import { apiStatusCodes } from "../../../config/CommonConstant";
-import { createInvitations } from "../../../api/invitations";
-import { getOrganizationRoles } from "../../../api/organization";
+import { apiStatusCodes, storageKeys } from '../../../config/CommonConstant';
+import {
+	createEcoSystemInvitations,
+	createInvitations,
+} from '../../../api/invitations';
+import { getOrganizationRoles } from '../../../api/organization';
+import { getFromLocalStorage } from '../../../api/Auth';
 
 interface Values {
-    email: string;
+	email: string;
 }
 
 interface Invitations {
-    email: string;
-    role: string;
-    roleId: number;
+	email: string;
+	role: string;
+	roleId: number;
 }
 
-
 interface RoleI {
-    id: number
-    name: string
+	id: number;
+	name: string;
 }
 
-
-const SendInvitationModal = (props: { openModal: boolean; setMessage: (message: string) => void; setOpenModal: (flag: boolean) => void }) => {
-
-    const [loading, setLoading] = useState<boolean>(false)
-
-    const [invitations, setInvitations] = useState<Invitations[]>([])
-
-    const [memberRole, setMemberRole] = useState<RoleI | null>(null)
-
-    const [initialInvitationData, setInvitationData] = useState({
-        email: '',
-    })
-    const [erroMsg, setErrMsg] = useState<string | null>(null)
-
-    const getRoles = async () => {
-
-        const resRoles = await getOrganizationRoles()
-
-        const { data } = resRoles as AxiosResponse
-
-        if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-
-            const roles: Array<RoleI> = data?.data.response
-
-            const memberRole = roles.find(role => role.name === 'member')
-            setMemberRole(memberRole as RoleI)
-        } else {
-            setErrMsg(resRoles as string)
-        }
-    }
-
-    useEffect(() => {
-        setInvitationData({
-            email: '',
-        })
-
-        setInvitations([])
-        getRoles()
-
-    }, [props.openModal])
-
-
-    const includeInvitation = async (values: Values) => {
-        setInvitations([
-            ...invitations as Invitations[],
-            {
-                email: values.email,
-                role: memberRole?.name as string,
-                roleId: memberRole?.id as number
-            }
-
-        ])
-    }
-
-    const removeInvitation = (email: string) => {
-
-        const invitationList = invitations.filter(item => email !== item.email)
-
-        setInvitations(invitationList)
-    }
-
-    const sendInvitations = async () => {
-
-        setLoading(true)
-
-        const invitationPayload = invitations.map(invitation => {
-            return {
-                email: invitation.email,
-                orgRoleId: [invitation.roleId]
-            }
-        })
-
-        const resCreateOrg = await createInvitations(invitationPayload)
-
-        const { data } = resCreateOrg as AxiosResponse
-
-        if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
-            props.setMessage(data?.message)
-            props.setOpenModal(false)
-
-        } else {
-            setErrMsg(resCreateOrg as string)
-        }
-        setLoading(false)
-
-    }
-
-    return (
-        <Modal
-            size="2xl"
-            show={props.openModal} onClose={() => {
-                setInvitations([])
-                setInvitationData(initialInvitationData)
-                props.setOpenModal(false)
-            }
-            }>
-            <Modal.Header>Send Invitations</Modal.Header>
-            <Modal.Body>
-                <AlertComponent
-                    message={erroMsg}
-                    type={'error'}
-                    onAlertClose={() => {
-                        setErrMsg(null)
-                    }}
-                />
-                <Formik
-                    initialValues={initialInvitationData}
-                    validationSchema={
-                        yup.object().shape({
-                            email: yup
-                                .string()
-                                .required('Email is required')
-                                .email('Email is invalid')
-                                .trim(),
-
-                        })}
-                    validateOnBlur
-                    validateOnChange
-                    enableReinitialize
-                    onSubmit={async (
-                        values: Values,
-                        { resetForm }: FormikHelpers<Values>
-                    ) => {
-                        await includeInvitation(values)
-                        resetForm({ values: initialInvitationData })
-                    }}
-                >
-                    {(formikHandlers): JSX.Element => (
-
-                        <Form className="mt-2 space-y-6" onSubmit={
-                            formikHandlers.handleSubmit
-                        }>
-
-                            <div className="flex items-center justify-between">
-
-                                <div className="w-2/3">
-                                    <div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                                        <Label htmlFor="email2" value="Email" />
-                                        <span className='text-red-500 text-xs'>*</span>
-                                    </div>
-                                    <Field
-                                        id="email"
-                                        name="email"
-                                        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"
-                                        type="email"
-                                    />
-                                    {
-                                        (formikHandlers?.errors?.email && formikHandlers?.touched?.email) 
-                                        ? <span className="text-red-500 text-xs">{formikHandlers?.errors?.email}</span>
-                                        : <span className="invisible text-xs">Error</span>
-                                    }
-                                </div>
-
-                                <div className="w-1/3">
-                                    <Button type="submit"
-                                        className='mt-2 ml-4 text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
-                                    ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
-                                            <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
-                                        </svg>
-
-                                        ADD
-                                    </Button>
-                                </div>
-
-
-                            </div>
-
-                        </Form>
-                    )}
-
-                </Formik>
-
-                <div>
-                    {
-                        invitations.length > 0 && <div
-                            className="p-2 my-2 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-2 dark:bg-gray-800"
-                        >
-                            <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-                                {
-                                    invitations.map((invitation) => (
-
-                                        <li className="p-2">
-                                            <div
-                                                className="flex justify-between xl:block 2xl:flex align-center 2xl:space-x-4"
-                                            >
-                                                <div className="flex flex-wrap space-x-4 xl:mb-4 2xl:mb-0">
-                                                    <div>
-                                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" width="40px" height="40px">
-                                                            <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
-                                                        </svg>
-                                                    </div>
-                                                    <div className="flex-1 min-w-0">
-                                                        <p
-                                                            className="text-base font-semibold text-gray-900 leading-none truncate mb-0.5 dark:text-white"
-                                                        >
-                                                            {invitation.email}
-                                                        </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: Member
-                                                                        </div>
-
-                                                                    </div>
-                                                                </li>
-                                                            </ul>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <span className="cursor-pointer" onClick={() => removeInvitation(invitation.email)}>
-                                                    <svg className="text-red-400 dark:text-gray-500 w-6 h-8  mb-3.5 mx-auto" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
-                                                </span>
-
-                                            </div>
-                                        </li>
-                                    ))
-                                }
-                            </ul>
-                        </div>
-                    }
-
-                    <div className="mt-4 flex justify-end">
-                        <Button
-                            onClick={sendInvitations}
-                            disabled={invitations.length === 0}
-                            isProcessing={loading}
-                            className='text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
-                        ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 30 30">
-												<path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.201 17.792 28.546 1.454m-15.88 17.073 3.706 7.413c.896 1.79 1.344 2.687 1.908 2.927.49.208 1.05.17 1.506-.102.527-.314.85-1.261 1.498-3.157l7.003-20.507c.564-1.652.845-2.477.652-3.024a1.668 1.668 0 0 0-1.016-1.016c-.547-.193-1.372.089-3.024.652L4.391 8.716c-1.895.647-2.843.97-3.156 1.498a1.667 1.667 0 0 0-.102 1.506c.24.564 1.136 1.012 2.927 1.908l7.413 3.706c.295.148.443.221.57.32.114.087.216.19.303.302.099.128.172.276.32.571Z"/>
-											</svg>
-											
-                            Send
-                        </Button>
-                    </div>
-                </div>
-
-            </Modal.Body>
-
-        </Modal>
-    )
-}
+const SendInvitationModal = (props: {
+	getAllSentInvitations?: () => void;
+	ecosystemId?: string;
+	flag?: boolean;
+	openModal: boolean;
+	setMessage: (message: string) => void;
+	setOpenModal: (flag: boolean) => void;
+}) => {
+	const [loading, setLoading] = useState<boolean>(false);
+	const [selfEmail, setSelfEmail] = useState({
+		email: "",
+		error: ""
+	});
+
+	const [invitations, setInvitations] = useState<Invitations[]>([]);
+
+	const [memberRole, setMemberRole] = useState<RoleI | null>(null);
+	const [initialData, setInitialData] = useState({
+		email: '',
+	});
+	const [initialInvitationData, setInitialInvitationData] = useState({
+		email: '',
+	});
+	const [erroMsg, setErrMsg] = useState<string | null>(null);
+
+	const getRoles = async () => {
+		const resRoles = await getOrganizationRoles();
+
+		const { data } = resRoles as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+			const roles: Array<RoleI> = data?.data.response;
+
+			const memberRole = roles.find((role) => role.name === 'member');
+			setMemberRole(memberRole as RoleI);
+		} else {
+			setErrMsg(resRoles as string);
+		}
+	};
+
+	useEffect(() => {
+		setInitialInvitationData({
+			email: '',
+		});
+		setInitialData({
+			email: '',
+		});
+
+		setInvitations([]);
+		getRoles();
+	}, [props.openModal]);
+
+	const includeInvitation = async (values: Values) => {
+		setInvitations([
+			...(invitations as Invitations[]),
+			{
+				email: values.email,
+				role: memberRole?.name as string,
+				roleId: memberRole?.id as number,
+			},
+		]);
+	};
+
+	const removeInvitation = (email: string) => {
+		const invitationList = invitations.filter((item) => email !== item.email);
+
+		setInvitations(invitationList);
+	};
+
+	const sendInvitations = async () => {
+		setLoading(true);
+
+		const invitationPayload = invitations.map((invitation) => {
+			return {
+				email: invitation.email,
+				orgRoleId: [invitation.roleId],
+			};
+		});
+
+		const resCreateOrg = await createInvitations(invitationPayload);
+
+		const { data } = resCreateOrg as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+			props.setMessage(data?.message);
+			props.setOpenModal(false);
+		} else {
+			setErrMsg(resCreateOrg as string);
+		}
+		setLoading(false);
+	};
+
+	const sendEcoSystemInvitations = async () => {
+
+		setLoading(true);
+		const invitationPayload = invitations.map((invitation) => {
+			return {
+				email: invitation.email,
+			};
+		});
+
+		const resCreateOrg = await createEcoSystemInvitations(
+			invitationPayload,
+			props?.ecosystemId,
+		);
+
+		const { data } = resCreateOrg as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+
+			props?.setMessage(data?.message);
+			props?.setOpenModal(false);
+			props?.getAllSentInvitations()
+
+		} else {
+			setErrMsg(resCreateOrg as string);
+		}
+		setLoading(false);
+	};
+
+	useEffect(() => {
+		const getEmail = async () => {
+			const email = await getFromLocalStorage(storageKeys.USER_EMAIL)
+			setSelfEmail({
+				...selfEmail,
+				email
+			})
+		}
+		getEmail()
+	}, [])
+
+	return (
+		<Modal
+			size="2xl"
+			show={props.openModal}
+			onClose={() => {
+				setInvitations([]);
+				setInitialInvitationData({
+					email: " ",
+				});
+				props.setOpenModal(false);
+			}}
+		>
+			<Modal.Header>Send Invitation(s)</Modal.Header>
+			<Modal.Body>
+				<AlertComponent
+					message={erroMsg}
+					type={'failure'}
+					onAlertClose={() => {
+						setErrMsg(null);
+					}}
+				/>
+				<Formik
+					initialValues={initialInvitationData}
+					validationSchema={yup.object().shape({
+						email: yup
+							.string()
+							.required('Email is required')
+							.email('Email is invalid')
+							.trim(),
+					})}
+					validateOnBlur
+					validateOnChange
+					enableReinitialize
+					onSubmit={async (
+						values: Values,
+						{ resetForm }: FormikHelpers<Values>,
+					) => {
+						if(values.email === selfEmail.email){
+							setSelfEmail({
+								...selfEmail,
+								error: "You can't send invitation to self."
+							})
+							return
+						}
+						setSelfEmail({
+							...selfEmail,
+							error: ""
+						})
+						await includeInvitation(values);
+						resetForm({ values: initialInvitationData });
+					}}
+				>
+					{(formikHandlers): JSX.Element => (
+						<Form
+							className="mt-2 space-y-6"
+							onSubmit={formikHandlers.handleSubmit}
+						>
+							<div className="flex items-center justify-between">
+								<div className="w-full">
+									<div className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+										<Label htmlFor="email2" value="Email" />
+										<span className="text-red-500 text-xs">*</span>
+									</div>
+									<Field
+										id="email"
+										name="email"
+										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"
+										onChange={(e) => {
+											formikHandlers.handleChange(e)
+										}}
+									/>
+									{formikHandlers?.errors?.email &&
+										formikHandlers?.touched?.email ? (
+										<span className="text-red-500 text-xs">
+											{formikHandlers?.errors?.email}
+										</span>
+									) : selfEmail.error ?
+										<span className="text-red-500 text-xs">
+											{selfEmail.error}
+										</span>
+										:
+										(
+											<span className="invisible text-xs">Error</span>
+										)}
+								</div>
+
+								<div className="">
+									<Button
+										type="submit"
+										className="mt-2 ml-4 text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+									>
+										<svg
+											className="pr-2"
+											xmlns="http://www.w3.org/2000/svg"
+											width="20"
+											height="20"
+											fill="none"
+											viewBox="0 0 24 24"
+										>
+											<path
+												fill="#fff"
+												d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"
+											/>
+										</svg>
+										ADD
+									</Button>
+								</div>
+							</div>
+						</Form>
+					)}
+				</Formik>
+
+				<div>
+					{invitations.length > 0 && (
+						<div className="p-2 my-2 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-2 dark:bg-gray-800">
+							<ul className="divide-y divide-gray-200 dark:divide-gray-700">
+								{invitations.map((invitation) => (
+									<li key={invitation.email} className="p-2">
+										<div className="flex justify-between 2xl:flex align-center 2xl:space-x-4">
+											<div className="flex flex-wrap space-x-4 xl:mb-4 2xl:mb-0 dark:text-white">
+												<div>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														strokeWidth={1.5}
+														stroke="currentColor"
+														width="40px"
+														height="40px"
+													>
+														<path
+															strokeLinecap="round"
+															strokeLinejoin="round"
+															d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+														/>
+													</svg>
+												</div>
+												<div className="flex-1 min-w-0">
+													<p className="text-base font-semibold text-gray-900 leading-none truncate mb-0.5 dark:text-white">
+														{invitation.email}
+													</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">
+																		Role: Member
+																	</div>
+																</div>
+															</li>
+														</ul>
+													</div>
+												</div>
+											</div>
+											<span
+												className="cursor-pointer"
+												onClick={() => removeInvitation(invitation.email)}
+											>
+												<svg
+													className="text-red-400 dark:text-red-500 w-6 h-8 mb-3.5 mx-auto"
+													aria-hidden="true"
+													fill="currentColor"
+													viewBox="0 0 20 20"
+													xmlns="http://www.w3.org/2000/svg"
+												>
+													<path
+														fill-rule="evenodd"
+														d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+														clip-rule="evenodd"
+													></path>
+												</svg>
+											</span>
+										</div>
+									</li>
+								))}
+							</ul>
+						</div>
+					)}
+
+					<div className="mt-4 flex justify-end">
+						<Button
+							onClick={props.flag ? sendEcoSystemInvitations : sendInvitations}
+							disabled={invitations.length === 0}
+							isProcessing={loading}
+							className='text-base font-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 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
+						>
+							<svg
+								className="pr-2"
+								xmlns="http://www.w3.org/2000/svg"
+								width="25"
+								height="25"
+								fill="none"
+								viewBox="0 0 30 30"
+							>
+								<path
+									stroke="#fff"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12.201 17.792 28.546 1.454m-15.88 17.073 3.706 7.413c.896 1.79 1.344 2.687 1.908 2.927.49.208 1.05.17 1.506-.102.527-.314.85-1.261 1.498-3.157l7.003-20.507c.564-1.652.845-2.477.652-3.024a1.668 1.668 0 0 0-1.016-1.016c-.547-.193-1.372.089-3.024.652L4.391 8.716c-1.895.647-2.843.97-3.156 1.498a1.667 1.667 0 0 0-.102 1.506c.24.564 1.136 1.012 2.927 1.908l7.413 3.706c.295.148.443.221.57.32.114.087.216.19.303.302.099.128.172.276.32.571Z"
+								/>
+							</svg>
+							Send
+						</Button>
+					</div>
+				</div>
+			</Modal.Body>
+		</Modal>
+	);
+};
 
 export default SendInvitationModal;
diff --git a/src/components/organization/users/EditUserRolesModal.tsx b/src/components/organization/users/EditUserRolesModal.tsx
index e4be018ac..af813a2ff 100644
--- a/src/components/organization/users/EditUserRolesModal.tsx
+++ b/src/components/organization/users/EditUserRolesModal.tsx
@@ -142,7 +142,7 @@ const EditUserRoleModal = (props: { openModal: boolean; user: User; setMessage:
             <Modal.Body>
 
                 <div
-                    className="mb-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800"
+                    className="mb-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 dark:text-white sm:p-6 dark:bg-gray-800"
                 >
 
                     <div className="space-y-6">
@@ -182,8 +182,9 @@ const EditUserRoleModal = (props: { openModal: boolean; user: User; setMessage:
                                                             disabled={role.disabled}
                                                             checked={role.checked}
                                                             onChange={(event: any) => onRoleChanged(event, role.id)}
+                                                            className={`mr-2 ${role.disabled ? 'text-gray-500' : ''}`}
                                                         />
-                                                        <span className={`ml-3 ${role.disabled ? 'text-gray-500' : ''}`}>{TextTittlecase(role.name)}</span>
+                                                        <span className={`ml-3 ${role.disabled ? 'text-gray-500 ' : ''}`}>{TextTittlecase(role.name)}</span>
                                                     </label>
                                                 </div>
                                             ))
diff --git a/src/components/organization/users/index.tsx b/src/components/organization/users/index.tsx
index 6f1d00c49..eec2e9e3e 100644
--- a/src/components/organization/users/index.tsx
+++ b/src/components/organization/users/index.tsx
@@ -7,6 +7,7 @@ import BreadCrumbs from '../../BreadCrumbs';
 import Invitations from '../invitations/Invitations';
 import { MdDashboard } from 'react-icons/md';
 import Members from './Members';
+import React from 'react';
 
 const initialPageState = {
     pageNumber: 1,
diff --git a/src/components/publicProfile/OrgUserInfoLayout.astro b/src/components/publicProfile/OrgUserInfoLayout.astro
new file mode 100644
index 000000000..169294fbf
--- /dev/null
+++ b/src/components/publicProfile/OrgUserInfoLayout.astro
@@ -0,0 +1,65 @@
+---
+interface UserDetails {
+  profileImg: string;
+	lastName: string;
+	firstName: string;
+	email: string;
+	publicProfile: boolean;
+	id: number;
+	username: string;
+}
+import CustomAvatar from "../../components/Avatar"
+const { orgUsersData } = Astro.props;
+---
+{orgUsersData &&
+<div class="grid lg:grid-cols-2 sm:grid-cols-1 gap-2 rounded">
+	<div
+		class="px-6 py-4 col-span-1 bg-gradient-to-r from-white via-white to-gray-50 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-gray-300 dark:focus:ring-gray-800 shadow-lg shadow-gray-500/50 dark:shadow-lg dark:shadow-gray-800/80 rounded-lg"
+	>
+		{
+			orgUsersData &&
+				orgUsersData?.map((orgUser: UserDetails) => {
+					return (
+						<>
+							<div class=" flex items-center">
+							{orgUser.firstName &&
+
+      <span>
+         {	orgUser?.profileImg ? (
+					<CustomAvatar className="mb-2 rounded-full shadow-lg" size="30" src={orgUser?.profileImg} client:load />
+				  ) : (
+					<CustomAvatar className="mb-2 rounded-full shadow-lg" size="30" name={orgUser?.firstName} client:load />
+				 )}
+	    </span>
+								<div class="font-bold text-xl pl-2 mb-2">
+									{orgUser.firstName} {orgUser.lastName}
+								</div>
+							}
+							</div>
+
+							<div class="flex items-center">
+							{orgUser.email &&	
+								<svg
+									class="w-6 h-6 text-gray-800 dark:text-white m-1"
+									aria-hidden="true"
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 20 16"
+								>
+									<path
+										stroke="currentColor"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="m19 2-8.4 7.05a1 1 0 0 1-1.2 0L1 2m18 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1m18 0v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2"
+									/>
+								</svg>
+								<p class="text-gray-700 text-xl mb-1.5 pl-2">{orgUser.email}</p>
+								}
+							</div>
+						</>
+					);
+				})
+		}
+	</div>
+</div>}
diff --git a/src/components/publicProfile/OrganisationPublicProfile.tsx b/src/components/publicProfile/OrganisationPublicProfile.tsx
new file mode 100644
index 000000000..533deda82
--- /dev/null
+++ b/src/components/publicProfile/OrganisationPublicProfile.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import { ChangeEvent, useEffect, useState } from 'react';
+import { getPublicOrganizations } from '../../api/organization';
+import type { AxiosResponse } from 'axios';
+import { apiStatusCodes } from '../../config/CommonConstant';
+import SearchInput from '../SearchInput';
+import { Card, Pagination } from 'flowbite-react';
+import CustomSpinner from '../CustomSpinner';
+import CustomAvatar from '../Avatar';
+import { EmptyListMessage } from '../EmptyListComponent';
+import { AlertComponent } from '../AlertComponent';
+
+const OrganisationPublicProfile = () => {
+	const initialPageState = {
+		pageNumber: 1,
+		pageSize: 10,
+		total: 0,
+	};
+
+	const [organizationsList, setOrganizationList] = useState([]);
+
+	const [loading, setLoading] = useState<boolean>(true);
+	const [error, setError] = useState<string | null>(null);
+	const [searchText, setSearchText] = useState('');
+	const [currentPage, setCurrentPage] = useState(initialPageState);
+	const onPageChange = (page: number) => {
+		setCurrentPage({
+			...currentPage,
+			pageNumber: page,
+		});
+	};
+
+	const getAllOrganizations = async () => {
+		setLoading(true);
+		const response = await getPublicOrganizations(
+			currentPage?.pageNumber,
+			currentPage?.pageSize,
+			searchText,
+		);
+
+		const { data } = response as AxiosResponse;
+
+		if (data?.statusCode === apiStatusCodes?.API_STATUS_SUCCESS) {
+			const totalPages = data?.data?.totalPages;
+
+			const orgList = data?.data?.organizations.map((userOrg: any) => {
+				return userOrg;
+			});
+
+			setOrganizationList(orgList);
+			setCurrentPage({
+				...currentPage,
+				total: totalPages,
+			});
+		} else {
+			setError(response as string);
+		}
+		setLoading(false);
+	};
+
+	useEffect(() => {
+		let getData: NodeJS.Timeout;
+
+		if (searchText?.length >= 1) {
+			getData = setTimeout(() => {
+				getAllOrganizations();
+			}, 1000);
+		} else {
+			getAllOrganizations();
+		}
+
+		return () => clearTimeout(getData);
+	}, [searchText, currentPage.pageNumber]);
+
+	const searchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setSearchText(e.target.value);
+	};
+
+	return (
+		<div>
+			<AlertComponent
+				message={error}
+				type={'failure'}
+				onAlertClose={() => {
+					setError(null);
+				}}
+			/>
+			<div className="flex items-center justify-between mb-4 p-2 pl-0">
+				<SearchInput onInputChange={searchInputChange} />
+			</div>
+
+			<div className="flex flex-wrap">
+				{loading ? (
+					<div className="flex items-center justify-center mb-4 ">
+						<CustomSpinner />
+					</div>
+				) : organizationsList && organizationsList?.length > 0 ? (
+					<div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2">
+						{organizationsList?.map(
+							(org: {
+								logoUrl: string;
+								name: string;
+								description: string;
+								id: number;
+								orgSlug: string;
+							}) => (
+								<Card
+									onClick={() => {
+										window.location.href = `/org/${org?.orgSlug}`;
+									}}
+									className="transform transition duration-500 hover:scale-[1.02] hover:bg-gray-50 cursor-pointer"
+								>
+									<div className="flex items-center">
+										{org.logoUrl ? (
+											<CustomAvatar size="80" src={org?.logoUrl} />
+										) : (
+											<CustomAvatar size="80" name={org?.name} />
+										)}
+
+										<div className="ml-4">
+											<h5 className="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
+												<p>{org?.name}</p>
+											</h5>
+											<div className="flow-root h-auto">
+												<ul className="divide-y divide-gray-200 dark:divide-gray-700">
+													<li className="py-3 sm:py-4 overflow-auto">
+														<div className="flex items-center space-x-4">
+															<div className="inline-flex items-center text-base text-lg text-gray-900 dark:text-white">
+																{org?.description}
+															</div>
+														</div>
+													</li>
+												</ul>
+											</div>
+										</div>
+									</div>
+								</Card>
+							),
+						)}
+					</div>
+				) : (
+					<div className="flex justify-center items-center">
+					{organizationsList && (
+						<div className="flex justify-center items-center">
+							<EmptyListMessage
+								message={'No Matching Organization'}
+								description={''}
+							/>
+						</div>
+					)}
+					</div>
+				)}
+
+				<div className="flex items-center justify-end mb-4">
+					{organizationsList && organizationsList?.length > 0 && (
+						<Pagination
+							currentPage={currentPage?.pageNumber}
+							onPageChange={onPageChange}
+							totalPages={currentPage?.total}
+						/>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default OrganisationPublicProfile;
diff --git a/src/components/publicProfile/ProfileDesign.astro b/src/components/publicProfile/ProfileDesign.astro
new file mode 100644
index 000000000..21f4038eb
--- /dev/null
+++ b/src/components/publicProfile/ProfileDesign.astro
@@ -0,0 +1,29 @@
+---
+const {orgData} = Astro.props
+import CustomAvatar from "../../components/Avatar"
+---
+
+
+<div class="min-[320]:h-auto md:h-screen col-span-1 border-white box-border items-center">
+	<div class="w-full h-full bg-white rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 items-center">
+		<div class="flex flex-col items-center pb-10 mx-auto">
+
+				{orgData?.logoUrl ? (
+					<CustomAvatar className="my-4 rounded-full shadow-lg" size="100" src={orgData?.logoUrl} client:load />
+				) : (
+					<CustomAvatar className="my-4 rounded-full shadow-lg" size="180" name={orgData?.name} client:load />
+				)}
+
+				<h3 class="mb-1 text-3xl font-medium text-gray-900 dark:text-white pt-4">{orgData?.name}</h3>
+				<div class="flex text-center align-middle ">
+					{orgData?.website &&
+					<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
+						<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
+					</svg>
+				<a href={orgData?.website} target="_blank">	<span class="text-2xl text-gray-500 dark:text-gray-400 pl-2 ">{orgData?.website}</span></a>
+					 }
+				</div>
+				<p class="pt-2 p-4 flex items-center justify-center flex-wrap">{orgData?.description}</p>
+		</div>
+	</div>
+</div>
diff --git a/src/components/publicProfile/PublicProfiles.tsx b/src/components/publicProfile/PublicProfiles.tsx
new file mode 100644
index 000000000..830243c03
--- /dev/null
+++ b/src/components/publicProfile/PublicProfiles.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import OrganisationPublicProfile from './OrganisationPublicProfile';
+
+const PublicProfile = () => {
+	return (
+		<div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-800 shadow-sm">
+			<div className="pt-6">
+				<div className="mb-4 border-b border-gray-200 dark:border-gray-700">
+					<ul
+						className="pl-5 flex flex-wrap -mb-px text-sm font-medium text-center"
+						id="myTab"
+						data-tabs-toggle="#myTabContent"
+						role="tablist"
+					>
+						<li className="mr-2" role="presentation">
+							<button
+								className="text-xl inline-block p-4 border-b-2 rounded-t-lg "
+								id="profile-tab"
+								data-tabs-target="#profile"
+								type="button"
+								role="tab"
+								aria-controls="profile"
+								aria-selected="true"
+							>
+								Organisations
+							</button>
+						</li>
+					</ul>
+				</div>
+				<div id="myTabContent">
+					<div
+						className="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
+						id="profile"
+						role="tabpanel"
+						aria-labelledby="profile-tab"
+					>
+						<OrganisationPublicProfile />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default PublicProfile;
diff --git a/src/components/publicProfile/PublicUserList.tsx b/src/components/publicProfile/PublicUserList.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/publicProfile/WalletDetailQRLayout.astro b/src/components/publicProfile/WalletDetailQRLayout.astro
new file mode 100644
index 000000000..c44893c49
--- /dev/null
+++ b/src/components/publicProfile/WalletDetailQRLayout.astro
@@ -0,0 +1,95 @@
+---
+import CustomQRCode from "../../commonComponents/QRcode";
+import { EmptyListMessage } from "../EmptyListComponent";
+const {orgData} = Astro.props
+interface UserObject {
+	orgDid:string
+	ledgers:{
+		name:string
+	  networkType:string
+	}
+	networkType:string
+	walletName:string
+	createDateTime:string
+}
+---
+
+<div class="min-[320]:inline-block w-full md:flex rounded gap-2 bg-white">
+	<div class="w-2/3 mb-4 sm:mb-0 sm:pr-4 p-2">
+		<h1 class="font-semibold text-2xl p-3">Wallet Details</h1>
+
+	{	orgData?.org_agents.length > 0 ?
+	<div class=" flex justify-start align-middle items-center p-3">
+		<ul class="space-y-6">
+			{orgData?.org_agents ? 
+			orgData?.org_agents?.map((agentData:UserObject) => (
+				<li class="flex z-10 items-center text-xl">
+					<span class="z-10 w-52">DID</span>
+												<span class="mx-2">:</span>
+												<span class="ml-9 text-gray-600">{agentData?.orgDid} </span>
+		<button id="myButton" class={`${false }`} >
+		{false
+			? <svg class="h-6 w-6 text-white ml-3 text-base" width="25" height="25" viewBox="0 0 24 24" stroke-width="2" stroke="green" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z" />  <path d="M5 12l5 5l10 -10" /></svg>
+			: <svg class="h-6 w-6 text-green ml-3 text-base" width="25" height="25" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z" />  <rect x="8" y="8" width="12" height="12" rx="2" />  <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" /></svg>
+		}
+	</button>
+				</li>
+				<li class="flex items-center text-xl">
+					<span class=" w-52">Ledger</span>
+												<span class="mx-2">:</span>
+												 <span class="ml-9 text-gray-600">{agentData?.ledgers?.name}</span>
+				</li>
+				<li class="flex items-center text-xl">
+					<span class=" w-52">Network</span>
+												<span class="mx-2">:</span>
+												<span class="ml-9 text-gray-600">{agentData?.ledgers?.networkType}</span>
+				</li>
+				<li class="flex items-center text-xl">
+					<span class=" w-52">WalletName</span>
+												<span class="mx-2">:</span>
+												<span class="ml-9 text-gray-600">{agentData?.walletName}</span>
+				</li>
+				<li class="flex items-center text-xl">
+					<span class=" w-52">CreationDate</span>
+												<span class="mx-2">:</span>
+												<span class="ml-9 text-gray-600">{agentData?.createDateTime}</span>
+				</li>
+			))
+		:
+		<ul>
+			Wallet details are not avilable. Need to create wallet.
+			</ul>
+
+		}
+	</ul>
+	</div>:
+	<div class="flex justify-center items-center">
+	    <EmptyListMessage
+				 message={'No Wallet Details Found'}
+				 description={'The owner is required to create a wallet'}
+				  buttonContent={''}
+			/>
+	</div>
+	}
+	</div>
+{orgData?.org_agents.length > 0 ?
+	<div class="w-1/3 flex flex-col justify-center text-wrap p-2">
+		<div class="h-auto flex-col items-center p-4">
+		{	orgData?.org_agents &&
+			<div
+					class="bg-white p-4 border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 overflow-hidden">
+					<CustomQRCode
+					client:load
+							size={180}
+							value={orgData?.org_agents[0]?.agent_invitations[0]?.connectionInvitation}
+					/>
+			</div>
+		}
+	</div>
+	</div>
+	:
+   ''
+	 }
+</div>
+
+
diff --git a/src/config/CommonConstant.ts b/src/config/CommonConstant.ts
index acc9c90aa..07975899d 100644
--- a/src/config/CommonConstant.ts
+++ b/src/config/CommonConstant.ts
@@ -27,5 +27,8 @@ export const storageKeys = {
     SCHEMA_ATTR:'schema_attr',
 	CRED_DEF_ID:'cred_def_id',
     SCHEMA_DID: 'schema_did',
-    LOGIN_USER_EMAIL: 'login_user_email'
+    LOGIN_USER_EMAIL: 'login_user_email',
+	ECOSYSTEM_ID: "ecosystem_id",
+    ORG_DETAILS: "org_details",
+    ECOSYSTEM_ROLE: "ecosystem_role"
 }
diff --git a/src/config/apiRoutes.ts b/src/config/apiRoutes.ts
index b34fe5dd2..a58a16acc 100644
--- a/src/config/apiRoutes.ts
+++ b/src/config/apiRoutes.ts
@@ -1,70 +1,85 @@
-import { verifyPresentation } from "../api/verification";
-
 export const apiRoutes = {
-    auth:{
-        sendMail: '/users/send-mail',
-        sinIn: '/users/login',
-        verifyEmail:'/users/verify',
-        userProfile: 'users/profile',
-        checkUser:'/users/check-user/',
-        addDetails:'/users/add/',
-        passkeyUserDetails:'/users/password/',
-        profile:'/profile'
-    },
-    users:{
-        invitations: '/users/invitations',
-        fetchUsers: '/users',
-        update: '/users',
-        recentActivity: '/users/activity',
-    },
-    organizations: {
-        create: '/organization',
-        update: '/organization',
-        getAll: '/organization',
-        getById: '/organization',
-        getOrgDashboard: '/organization/dashboard',
-        agentDedicatedSpinup: '/agent-service/spinup',
-        agentSharedSpinup: '/agent-service/tenant',
-        invitations: '/organization/invitations',
-        orgRoles: '/organization/roles',
-        editUserROle: '/organization/user-roles'
-    },
-    connection: {
-        create: '/connections',
-    },
-    schema: {
-        create: '/schemas',
-        getAll: '/schemas',
-        getSchemaById:'/schemas/id',
-        createCredentialDefinition: '/credential-definitions',
-        getCredDeffBySchemaId: '/schemas/credential-definitions',
-        getAllSchemaFromPlatform: `/schemas/platform`
-    },
-    fido: {
-        generateRegistration: 'fido/generate-registration-options',
-        verifyRegistration: 'fido/verify-registration/',
-        getDeviceList: 'fido/user-details/',
-        updateDeviceName: 'fido/device-name',
-        userUpdate: 'fido/user-update',
-        fidoDevice: 'fido/device',
-        fidoAuthentication: 'Fido/generate-authentication-options',
-        fidoVerifyAuthentication: 'Fido/verify-authentication/'
-
-    },
-		Issuance:{
-			getIssuedCredentials:'/issue-credentials',
-			getCredDefBySchemaId :'/schemas/credential-definitions',
-			getAllConnections:'/connections',
-			issueCredential:'/issue-credentials/create-offer'
+	auth: {
+		sendMail: '/auth/verification-mail',
+		sinIn: '/auth/signin',
+		verifyEmail: '/auth/verify',
+		addDetails: '/auth/signup',
+		passkeyUserDetails: '/users/password/',
+		profile: '/profile',
+		generateRegistration: 'auth/passkey/generate-registration',
+		verifyRegistration: 'auth/passkey/verify-registration/',
+		getDeviceList: 'auth/passkey/',
+		updateDeviceName: 'auth/passkey',
+		userUpdate: 'auth/passkey/user-details',
+		fidoDevice: 'auth/passkey',
+		fidoAuthentication: 'auth/passkey/authentication-options',
+		fidoVerifyAuthentication: 'auth/passkey/verify-authentication/',
+	},
+	users: {
+		userProfile: '/users/profile',
+		checkUser: '/users/',
+		invitations: '/users/org-invitations',
+		fetchUsers: '/users',
+		update: '/users',
+		recentActivity: '/users/activity',
+	},
+	organizations: {
+		root: '/orgs',
+		create: '/orgs',
+		update: '/orgs',
+		getAll: '/orgs',
+		getById: '/orgs',
+		getOrgDashboard: '/orgs/dashboard',
+		invitations: '/invitations',
+		orgRoles: '/orgs/roles',
+		editUserROle: '/user-roles',
+	},
+	connection: {
+		create: '/connections',
+	},
+	schema: {
+		create: '/schemas',
+		getAll: '/schemas',
+		getSchemaById: '/schemas',
+		createCredentialDefinition: '/cred-defs',
+		getCredDefBySchemaId: '/schemas',
+	},
+	Issuance: {
+		getIssuedCredentials: '/credentials',
+		getAllConnections: '/connections',
+		issueCredential: '/credentials/offer',
+	},
+	Verification: {
+		getAllRequestList: '/credentials/proofs',
+		verifyCredential: '/proofs',
+		presentationVerification: '/proofs',
+		proofRequestAttributesVerification: '/proofs',
+		verificationCredDef: '/verifiation/cred-defs'
+	},
+	Agent: {
+		checkAgentHealth: '/agents/health',
+		agentDedicatedSpinup: '/agents/spinup',
+		agentSharedSpinup: '/agents/wallet',
+	},
+	Platform: {
+		getAllSchemaFromPlatform: '/platform/schemas',
+	},
+	Public: {
+		organizations: '/orgs/public-profile',
+	},
+	Ecosystem: {
+		root: '/ecosystem',
+		endorsements: {
+			list: '/endorsement-transactions',
+			createSchemaRequest: '/transaction/schema',
+			createCredDefRequest: '/transaction/cred-def',
+			signRequest: '/transaction/sign/',
+			submitRequest: '/transaction/sumbit/',
+			rejectRequest: '/transactions/',
+			transactionApproval: '/transaction-approval/',
 		},
-        Verification:{
-			getAllRequestList: '/proofs',
-			verifyCredential:'/proofs/request-proof',
-            presentationVerification:'/proofs/verify-presentation',
-		    proofRequestAttributesVerification:'/proofs/form-data'
-		},
-        Agent:{
-			checkAgentHealth: '/agent-service/health',
-		}
-
-}
+		invitations: '/invitations',
+		usersInvitation: '/users/invitations',
+		members: '/members',
+	},
+};
diff --git a/src/config/ecosystem.ts b/src/config/ecosystem.ts
new file mode 100644
index 000000000..deb0dbed9
--- /dev/null
+++ b/src/config/ecosystem.ts
@@ -0,0 +1,114 @@
+import type { AxiosResponse } from "axios"
+import { getFromLocalStorage, setToLocalStorage } from "../api/Auth"
+import { getEcosystem } from "../api/ecosystem"
+import { EcosystemRoles } from "../common/enums"
+import { apiStatusCodes, storageKeys } from "./CommonConstant"
+import { getOrganizationById } from "../api/organization"
+
+export interface ICheckEcosystem {
+    isEnabledEcosystem: boolean;
+    isEcosystemMember: boolean;
+    isEcosystemLead: boolean;
+}
+
+export interface IOrgDetails {
+    orgName: string
+    orgDid: string
+}
+
+const ecosystemId = async () => {
+    const id = await getFromLocalStorage(storageKeys.ECOSYSTEM_ID)
+    return id
+}
+
+const getOrgData = async () => {
+    const data = await getFromLocalStorage(storageKeys.ORG_DETAILS)
+    return data
+}
+
+const getEcosystemRole = async () => {
+    const data = await getFromLocalStorage(storageKeys.ECOSYSTEM_ROLE)
+    return data
+}
+
+const getOrgId = async () => {
+    const id = await getFromLocalStorage(storageKeys.ORG_ID)
+    return id
+}
+
+const getUserProfile = async () => {
+    const userProfile = await getFromLocalStorage(storageKeys.USER_PROFILE)
+    const userDetails = userProfile && await JSON.parse(userProfile)
+    return userDetails
+}
+
+const checkEcosystem = async (): Promise<ICheckEcosystem> => {
+    await getEcosystemId()
+    const userData = await getUserProfile()
+    const role = await getEcosystemRole()
+
+    const isEnabledEcosystem = userData?.enableEcosystem
+    const ecosystemRole = role || EcosystemRoles.ecosystemLead
+    
+    return {
+        isEnabledEcosystem,
+        isEcosystemMember: ecosystemRole === EcosystemRoles.ecosystemMember && isEnabledEcosystem,
+        isEcosystemLead: ecosystemRole === EcosystemRoles.ecosystemLead && isEnabledEcosystem
+    }
+}
+
+const getEcosystemId = async (): Promise<string> => {
+    const ecoId = await ecosystemId()
+    const ecoRole = await getEcosystemRole()
+    const orgId = await getOrgId()
+    if (!ecoId || !ecoRole) {
+        try {
+            if(orgId){
+                const { data } = await getEcosystem(orgId) as AxiosResponse
+
+                if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS && data?.data && data?.data.length > 0) {
+                    const response = data?.data[0]
+                    const id = response?.id
+                    const role = response?.ecosystemOrgs && response?.ecosystemOrgs.length > 0 && response?.ecosystemOrgs[0]?.ecosystemRole?.name
+                    await setToLocalStorage(storageKeys.ECOSYSTEM_ID, id);
+                    if(role){
+                        await setToLocalStorage(storageKeys.ECOSYSTEM_ROLE, role);
+                    }
+                    return id
+                }
+            }
+        } catch (err) {
+            console.log("ERROR-Get Ecosystem", err)
+        }
+    }
+    return ecoId
+}
+
+const getOrgDetails = async (): Promise<IOrgDetails> => {
+    const orgId = await getOrgId()
+    const org = await getOrgData()
+    const orgData: IOrgDetails = org && JSON.parse(org)
+    const isOrgData = Object.keys(orgData).length > 0
+    const isOrgDid = orgData?.orgDid
+    if (!isOrgData || !isOrgDid) {
+        try {
+            if(orgId){
+                const { data } = await getOrganizationById(orgId) as AxiosResponse
+    
+                if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+                    const orgData: IOrgDetails = {
+                        orgName: data?.data?.name,
+                        orgDid: data?.data && data?.data?.org_agents?.length > 0 ? data?.data?.org_agents[0]?.orgDid : ""
+                    }
+                    await setToLocalStorage(storageKeys.ORG_DETAILS, JSON.stringify(orgData));
+                    return orgData
+                }
+            }
+        } catch (err) {
+            console.log("ERROR-Get ORG Details", err)
+        }
+    }
+    return orgData
+}
+
+export { checkEcosystem, getEcosystemId, getOrgDetails }
\ No newline at end of file
diff --git a/src/config/pathRoutes.ts b/src/config/pathRoutes.ts
index b6a0dca75..0472b3f1b 100644
--- a/src/config/pathRoutes.ts
+++ b/src/config/pathRoutes.ts
@@ -2,7 +2,7 @@ export const pathRoutes = {
     auth: {
         signUp: '/authentication/sign-up',
         sinIn: '/authentication/sign-in',
-        verifyEmail: '/users/verify',
+        verifyEmail: '/auth/verify',
     },
     users: {
         dashboard: '/dashboard',
@@ -16,33 +16,30 @@ export const pathRoutes = {
         users: '/organizations/users',
         schemas: `/organizations/schemas`,
         dashboard: '/organizations/dashboard',
-        issuedCredentials: '/organizations/credentials-issued',
+        issuedCredentials: '/organizations/credentials',
         credentials: '/organizations/verification',
         createSchema: '/organizations/schemas/create',
         viewSchema: '/organizations/schemas/view-schema',
-
         Issuance: {
-            schema: '/organizations/credentials-issued/schemas',
-            credDef:'/organizations/credentials-issued/schemas/cred-defs',
-            connections:'/organizations/credentials-issued/schemas/cred-defs/connections',
-            issuance:'/organizations/credentials-issued/schemas/cred-defs/connections/issuance'
+            schema: '/organizations/credentials/schemas',
+            credDef: '/organizations/credentials/schemas/cred-defs',
+            connections: '/organizations/credentials/schemas/cred-defs/connections',
+            issuance: '/organizations/credentials/schemas/cred-defs/connections/issuance'
         },
         verification: {
             schema: '/organizations/verification/schemas',
-            credDef:'/organizations/verification/schemas/cred-defs',
-            connections:'/organizations/verification/schemas/cred-defs/connections',
-            verify:'/organizations/verification/schemas/cred-defs/connections/verification'
+            credDef: '/organizations/verification/schemas/cred-defs',
+            connections: '/organizations/verification/schemas/cred-defs/connections',
+            verify: '/organizations/verification/schemas/cred-defs/connections/verification'
         },
     },
-   
-    // ecosystems: {
-    //     root: '/ecosystems',
-    //     frameworks: '/ecosystems/frameworks',
-    //     members: '/ecosystems/members',
-    //     registries: '/ecosystems/registries',
-    //     users: '/organizations/users',
-    //     credentials: '/organizations/credentials'
-    // },
+    ecosystem: {
+        root: '/ecosystem',
+        profile: "/ecosystem/profile",
+        endorsements: "/ecosystem/endorsement",
+        invitation:"/ecosystem/invitation",
+				sentinvitation:'/ecosystem/invitations'
+    },
     documentation: {
         root: 'https://docs.credebl.id'
     },
@@ -53,20 +50,19 @@ export const pathRoutes = {
         createCredentialDefinition: '/credential-definitions',
         getCredDeffBySchemaId: '/schemas/credential-definitions'
     },
-
-		back:{
-			schema:{
-				schemas:'/organizations/schemas'
-			},
-			verification:{
-				credDef:'/organizations/credentials-issued/schemas/cred-defs',
-				schemas:'/organizations/verification/schemas',
-				verification:'/organizations/verification/schemas/cred-defs/connections',
-			},
-			issuance:{
-				credDef:'/organizations/credentials-issued/schemas/cred-defs',
-				schemas:'/organizations/credentials-issued/schemas',
-				connections: '/organizations/credentials-issued/schemas/cred-defs/connections'
-			}
-		}
+    back: {
+        schema: {
+            schemas: '/organizations/schemas'
+        },
+        verification: {
+            credDef: '/organizations/verification/schemas/cred-defs',
+            schemas: '/organizations/verification/schemas',
+            verification: '/organizations/verification/schemas/cred-defs/connections',
+        },
+        issuance: {
+            credDef: '/organizations/credentials/schemas/cred-defs',
+            schemas: '/organizations/credentials/schemas',
+            connections: '/organizations/credentials/schemas/cred-defs/connections'
+        }
+    }
 }
diff --git a/src/pages/ecosystem/endorsement/index.astro b/src/pages/ecosystem/endorsement/index.astro
new file mode 100644
index 000000000..a8da51be7
--- /dev/null
+++ b/src/pages/ecosystem/endorsement/index.astro
@@ -0,0 +1,8 @@
+---
+import LayoutSidebar from '../../../app/LayoutSidebar.astro';
+import EndorsementList from '../../../components/Ecosystem/Endorsement';
+---
+
+<LayoutSidebar>
+	<EndorsementList client:load />
+</LayoutSidebar>
diff --git a/src/pages/ecosystem/index.astro b/src/pages/ecosystem/index.astro
new file mode 100644
index 000000000..b555bbece
--- /dev/null
+++ b/src/pages/ecosystem/index.astro
@@ -0,0 +1,16 @@
+---
+import LayoutSidebar from '../../app/LayoutSidebar.astro';
+import Dashboard from '../../components/Ecosystem/Dashboard';
+import { checkUserSession } from '../../utils/check-session';
+import { pathRoutes } from '../../config/pathRoutes';
+
+const response = await checkUserSession(Astro.cookies);
+const route: string = pathRoutes.auth.sinIn
+if (!response) {
+	return Astro.redirect(route);
+}
+---
+
+<LayoutSidebar>
+	<Dashboard client:visible/>
+</LayoutSidebar>
diff --git a/src/pages/ecosystem/invitation.astro b/src/pages/ecosystem/invitation.astro
new file mode 100644
index 000000000..ab1fc836f
--- /dev/null
+++ b/src/pages/ecosystem/invitation.astro
@@ -0,0 +1,20 @@
+---
+import LayoutSidebar from '../../app/LayoutSidebar.astro';
+import { checkUserSession } from '../../utils/check-session';
+import { pathRoutes } from '../../config/pathRoutes';
+import EcoSystemReceivedInvitations from '../../components/EcosystemInvite/EcoSystemReceivedInvitations'
+
+const response = await checkUserSession(Astro.cookies);
+const route = pathRoutes.auth.sinIn
+if (!response) {
+	return Astro.redirect(route);
+}
+---
+
+<LayoutSidebar>
+	<EcoSystemReceivedInvitations client:visible/>
+</LayoutSidebar>
+
+
+
+
diff --git a/src/pages/ecosystem/invitations.astro b/src/pages/ecosystem/invitations.astro
new file mode 100644
index 000000000..e1edcb51e
--- /dev/null
+++ b/src/pages/ecosystem/invitations.astro
@@ -0,0 +1,20 @@
+---
+import LayoutSidebar from '../../app/LayoutSidebar.astro';
+import { checkUserSession } from '../../utils/check-session';
+import { pathRoutes } from '../../config/pathRoutes';
+import SentInvitations from '../../components/EcosystemInvite/SentInvitations'
+
+const response = await checkUserSession(Astro.cookies);
+const route = pathRoutes.auth.sinIn
+if (!response) {
+	return Astro.redirect(route);
+}
+---
+
+<LayoutSidebar>
+	<SentInvitations client:visible/>
+</LayoutSidebar>
+
+
+
+
diff --git a/src/pages/explore.astro b/src/pages/explore.astro
new file mode 100644
index 000000000..a4d4a52d2
--- /dev/null
+++ b/src/pages/explore.astro
@@ -0,0 +1,10 @@
+---
+import PublicProfile from "../components/publicProfile/PublicProfiles"
+import LayoutCommon from "../app/LayoutCommon.astro";
+
+---
+<LayoutCommon>
+
+	<PublicProfile client:load/>
+
+<LayoutCommon>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6b8b2f88b..b858243e4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,6 +11,7 @@ import { pathRoutes } from '../config/pathRoutes';
 				<div
 					class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl"
 				>
+				<div class="flex">
 					<a href="/" class="flex items-center">
 						<img
 							src="/images/CREDEBL_ICON.png"
@@ -23,7 +24,14 @@ import { pathRoutes } from '../config/pathRoutes';
 							CREDEBL</span
 						>
 					</a>
+					<a
+					href="/explore"
+					class="text-gray-600 py-2 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-md px-4 lg:px-5 lg:py-2.5 ml-4 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
+					>Explore Organizations</a
+				>
+				</div>				
 					<div class="flex items-center lg:order-2">
+						
 						<a href="https://github.com/credebl" class="mr-3" target="_blank">
 							<svg
 								class="w-6 h-6 text-gray-800 dark:text-white"
diff --git a/src/pages/org/[org].astro b/src/pages/org/[org].astro
new file mode 100644
index 000000000..615e3c04e
--- /dev/null
+++ b/src/pages/org/[org].astro
@@ -0,0 +1,59 @@
+---
+import { pathRoutes } from '../../config/pathRoutes';
+import ProfileDesign from '../../components/publicProfile/ProfileDesign.astro';
+import WalletDetailQRLayout from '../../components/publicProfile/WalletDetailQRLayout.astro';
+import OrgUserInfoLayout from '../../components/publicProfile/OrgUserInfoLayout.astro';
+
+const { org } = Astro.params;
+const baseUrl = process.env.PUBLIC_BASE_URL || import.meta.env.PUBLIC_BASE_URL
+const response = await fetch(
+	`${baseUrl}/orgs/public-profiles/${org}`,
+);
+const data = await response?.json();
+const orgData = data?.data;
+const orgUsersFilterByRole = orgData?.userOrgRoles?.filter(
+	(users: { orgRole: {name:string}; }) => {
+	return users?.orgRole.name === "owner"
+	},
+);
+
+const orgUsersData = orgUsersFilterByRole?.map(
+	(users: { user: { firstName: string } }) => {
+		return users?.user;
+	},
+);
+---
+
+<div class="max-h-fit">
+	<div class="w-full mx-0">
+		<div class="flex px-3 py-2 justify-start">
+			<div class="flex items-center justify-start">
+				<a href={pathRoutes?.users?.dashboard} class="flex ml-2 md:mr-24">
+					<img
+						src="/images/CREDEBL_ICON.png"
+						class="h-8 mr-3"
+						alt="CREDEBL Logo"
+					/>
+					<span
+						class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"
+						>CREDEBL</span
+					>
+				</a>
+			</div>
+		</div>
+	</div>
+
+	<div class="grid grid-cols-3 gap-2 p-2 bg-gray-100">
+		<div class="h-screen col-span-1 border">
+			<ProfileDesign orgData={orgData} />
+		</div>
+
+		<div class="col-span-2 grid grid-rows-2 gap-4 bg-gray-100">
+			<WalletDetailQRLayout orgData={orgData} />
+			<div class="p-2 rounded bg-white">
+				<h1 class="font-bold text-2xl p-2">Users</h1>
+				<OrgUserInfoLayout orgUsersData={orgUsersData} />
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/pages/organizations/credentials-issued/index.astro b/src/pages/organizations/credentials/index.astro
similarity index 100%
rename from src/pages/organizations/credentials-issued/index.astro
rename to src/pages/organizations/credentials/index.astro
diff --git a/src/pages/organizations/credentials-issued/schemas/cred-defs/connections/index.astro b/src/pages/organizations/credentials/schemas/cred-defs/connections/index.astro
similarity index 100%
rename from src/pages/organizations/credentials-issued/schemas/cred-defs/connections/index.astro
rename to src/pages/organizations/credentials/schemas/cred-defs/connections/index.astro
diff --git a/src/pages/organizations/credentials-issued/schemas/cred-defs/connections/issuance.astro b/src/pages/organizations/credentials/schemas/cred-defs/connections/issuance.astro
similarity index 100%
rename from src/pages/organizations/credentials-issued/schemas/cred-defs/connections/issuance.astro
rename to src/pages/organizations/credentials/schemas/cred-defs/connections/issuance.astro
diff --git a/src/pages/organizations/credentials-issued/schemas/cred-defs/index.astro b/src/pages/organizations/credentials/schemas/cred-defs/index.astro
similarity index 100%
rename from src/pages/organizations/credentials-issued/schemas/cred-defs/index.astro
rename to src/pages/organizations/credentials/schemas/cred-defs/index.astro
diff --git a/src/pages/organizations/credentials-issued/schemas/index.astro b/src/pages/organizations/credentials/schemas/index.astro
similarity index 100%
rename from src/pages/organizations/credentials-issued/schemas/index.astro
rename to src/pages/organizations/credentials/schemas/index.astro
diff --git a/src/pages/profile.astro b/src/pages/profile.astro
index 007222d0c..ea58791c9 100644
--- a/src/pages/profile.astro
+++ b/src/pages/profile.astro
@@ -1,6 +1,6 @@
 ---
 import LayoutSidebar from '../app/LayoutSidebar.astro';
-import AddPasskey from '../components/Profile/AddPasskey';
+import UserProfile from '../components/Profile/UserProfile';
 import { pathRoutes } from '../config/pathRoutes';
 import { checkUserSession } from '../utils/check-session';
 
@@ -12,5 +12,5 @@ if (!response) {
 ---
 
 <LayoutSidebar>
-	<AddPasskey client:visible/>
+	<UserProfile client:visible/>
 </LayoutSidebar>
diff --git a/src/pages/user/[user].astro b/src/pages/user/[user].astro
new file mode 100644
index 000000000..89de7bad5
--- /dev/null
+++ b/src/pages/user/[user].astro
@@ -0,0 +1,141 @@
+---
+import CustomAvatar from '../../components/Avatar';
+import { pathRoutes } from '../../config/pathRoutes';
+
+const { user } = Astro.params;
+const baseUrl = process.env.PUBLIC_BASE_URL || import.meta.env.PUBLIC_BASE_URL
+const response = await fetch(`${baseUrl}/users/public-profiles/${user}`);
+const data = await response.json();
+const userData = data?.data;
+---
+
+<div class="p-0 m-0">
+	<div class="w-full mx-0">
+		<div>
+			<div class="w-full mx-0">
+				<div class="flex px-3 py-2 justify-start">
+					<div class="flex items-center justify-start">
+						<a href={pathRoutes.users.dashboard} class="flex ml-2 md:mr-24">
+							<img
+								src="/images/CREDEBL_ICON.png"
+								class="h-8 mr-3"
+								alt="CREDEBL Logo"
+							/>
+							<span
+								class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"
+								>CREDEBL</span
+							>
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="grid sm:grid-cols-1 lg:grid-cols-3 mt-3 m-0 p-0 bg-gray-200">
+				<div class="sm:h-auto lg:h-screen grid-cols-1 m-2">
+					<div
+						class="w-full h-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
+					>
+						<div class="flex flex-col items-center pb-10">
+							{
+								userData?.logoUrl ? (
+									<CustomAvatar
+										className=" w-56 h-56 my-4 rounded-full shadow-lg"
+										size="80"
+										src={userData?.logoUrl}
+										client:load
+									/>
+								) : (
+									<CustomAvatar
+										className=" w-56 h-56 my-4 rounded-full shadow-lg"
+										size="120"
+										name={userData?.firstName}
+										client:load
+									/>
+								)
+							}
+							<h3 class="mb-1 text-3xl font-medium text-gray-900 dark:text-white p-2 flex items-center">
+								{userData?.firstName}{' '}{userData?.lastName}
+							</h3>
+							<div class="flex text-center align-middle">
+								<svg
+									class="w-6 h-6 text-gray-800 dark:text-white m-0.5"
+									aria-hidden="true"
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 20 16"
+								>
+									<path
+										stroke="currentColor"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="m19 2-8.4 7.05a1 1 0 0 1-1.2 0L1 2m18 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1m18 0v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2"
+									></path>
+								</svg>
+								<span class="text-2xl text-gray-500 dark:text-gray-400 pl-2"
+									>{userData?.email}</span
+								>
+							</div>
+						</div>
+					</div>
+				</div>
+
+		
+				<div class="grid min-h-screen col-span-2 my-2 bg-white">
+		
+					<div class="grid h-screen sm:grid-cols-1 lg:grid-cols-2 gap-4 max-h-3">
+						{
+							userData?.userOrgRoles?.map(
+								(userOrg: {
+									organisation: {
+										name: string;
+										description: string;
+										logoUrl: string;
+										id: number;
+										orgSlug:string
+									};
+									name: string;
+								}) => {
+									return (
+										userOrg?.organisation?.name && (
+											
+											<div class=" justify-between mx-4 mt-2 mb-0 bg-white border border-t-0 border-gray-100 rounded-lg shadow-md shadow-gray-400 sm:flex dark:border-gray-700 sm:p-2 dark:bg-gray-800">
+												<div class="w-full ">
+													<div class="flex align-middle items-center p-0">
+														<div class="relative w-8 h-8 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
+															<img
+																class=" w-56 h-56 my-4 rounded-full shadow-lg"
+																src={userOrg?.organisation?.logoUrl}
+																alt={userOrg?.name}
+															/>
+														</div>
+														<h2 class="text-2xl p-2 font-bold text-gray-500 dark:text-gray-400 ">
+															{userOrg?.organisation?.name &&
+																userOrg?.organisation?.name }
+														</h2>
+													</div>
+													<div>
+														<p class="text-base text-gray-500 dark:text-gray-400 pl-6  ml-4 line-clamp-3">
+															{userOrg?.organisation?.description &&
+																userOrg?.organisation?.description}
+														</p>
+													</div>
+	
+												{userData?.publicProfile &&	<a
+														href={`/publicorg/${userOrg?.organisation?.orgSlug}`}
+														class="float-right inline-flex items-center p-2 text-sm font-medium rounded-lg text-primary-700 hover:bg-gray-100 dark:text-primary-500 dark:hover:bg-gray-700"
+													>
+														View More..
+													</a>}
+												</div>
+											</div>
+										)
+									);
+								},
+							)
+						}
+					</div>
+				</div>
+		</div>
+	</div>
+</div>
diff --git a/src/services/apiRequests.ts b/src/services/apiRequests.ts
index aaf5e4fcc..020da1c86 100644
--- a/src/services/apiRequests.ts
+++ b/src/services/apiRequests.ts
@@ -18,6 +18,30 @@ export const axiosGet = async ({ url, config }: APIParameters): Promise<AxiosRes
         return HandleResponse(err.response ? err.response : err)
     }
 }
+export const axiosPublicUserGet = async ({ url }: APIParameters): Promise<AxiosResponse> => {
+	try {
+			const response = await axiosUser.get(url);
+
+			return response
+	}
+	catch (error) {
+			const err = error as AxiosError
+			return HandleResponse(err.response ? err.response : err)
+	}
+}
+
+export const axiosPublicOrganisationGet = async ({ url }: APIParameters): Promise<AxiosResponse> => {
+	try {
+			const response = await axiosUser.get(url);
+
+			return response
+	}
+	catch (error) {
+			const err = error as AxiosError
+			return HandleResponse(err.response ? err.response : err)
+	}
+}
+
 
 export const axiosPost = async ({ url, payload, config }: APIParameters): Promise<AxiosResponse> => {
     try {
diff --git a/src/utils/enums/features.ts b/src/utils/enums/features.ts
index bd1fe8aee..6347715de 100644
--- a/src/utils/enums/features.ts
+++ b/src/utils/enums/features.ts
@@ -1,6 +1,11 @@
 
 
+
 export enum Features {
-    SEND_INVITATION = 'send_invitations',
-    CRETAE_ORG = 'create_org'
+  SEND_INVITATION = 'send_invitations',
+  CRETAE_ORG = 'create_org',
+  CRETAE_SCHEMA = 'create_schema',
+  ISSUENCE = 'issuence',
+  VERIFICATION = 'verification',
+  CREATE_ECOSYSTEMS = "CREATE_ECOSYSTEMS"
 }
\ No newline at end of file
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 4fb0836d4..7dfc192ae 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,13 +1,13 @@
 /* eslint-disable global-require */
 /** @type {import('tailwindcss').Config} */
 
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
 	content: [
 		'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
 		'./node_modules/flowbite/**/*.js',
-		'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
+		'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}',
 	],
 
 	darkMode: 'class',
@@ -16,41 +16,41 @@ module.exports = {
 		extend: {
 			colors: {
 				accentColor: '#20ACDF',
-				
-				primary: {  
-					DEFAULT: '#1F4EAD',  
-					50: '#DCE6F9',  
-					100: '#CBD9F6', 
-					200: '#A9C0F0', 
-					300: '#86A7E9',  
-					400: '#638EE3',  
-					500: '#4174DD',  
-					600: '#255ED0',  
-					700: '#1F4EAD',  
-					800: '#16397D',  
-					900: '#0E234E',  
-					950: '#0A1836'
+
+				primary: {
+					DEFAULT: '#1F4EAD',
+					50: '#DCE6F9',
+					100: '#CBD9F6',
+					200: '#A9C0F0',
+					300: '#86A7E9',
+					400: '#638EE3',
+					500: '#4174DD',
+					600: '#255ED0',
+					700: '#1F4EAD',
+					800: '#16397D',
+					900: '#0E234E',
+					950: '#0A1836',
 				},
 
-				secondary: {  
-					DEFAULT: '#D6F5F5',  
-					50: '#FFFFFF',  
-					100: '#FFFFFF', 
-					200: '#FFFFFF', 
-					300: '#FFFFFF',  
-					400: '#FFFFFF',  
-					500: '#FFFFFF',  
-					600: '#F7FDFD',  
-					700: '#D6F5F5',  
-					800: '#A9EAEA',  
-					900: '#7CDFDF',  
-					950: '#65DADA'
+				secondary: {
+					DEFAULT: '#D6F5F5',
+					50: '#FFFFFF',
+					100: '#FFFFFF',
+					200: '#FFFFFF',
+					300: '#FFFFFF',
+					400: '#FFFFFF',
+					500: '#FFFFFF',
+					600: '#F7FDFD',
+					700: '#D6F5F5',
+					800: '#A9EAEA',
+					900: '#7CDFDF',
+					950: '#65DADA',
 				},
 			},
 			fontFamily: {
 				sans: [
 					...defaultTheme.fontFamily.sans,
-					'Inter var', 
+					'Inter var',
 					'ui-sans-serif',
 					'system-ui',
 					'-apple-system',
@@ -98,9 +98,28 @@ module.exports = {
 				width: 'width',
 			},
 			textDecoration: ['active'],
+			width: {
+				'100/22rem': 'calc(100% - 22rem)',
+			},
 			minWidth: {
 				kanban: '28rem',
 			},
+			maxWidth: {
+				'100/6rem': 'calc(100% - 6rem)',
+				'100/13rem': 'calc(100% - 13rem)',
+				'100/10rem': 'calc(100% - 10rem)',
+				'100/8rem': 'calc(100% - 8rem)'
+			},
+			minHeight: {
+				'100/18rem': 'calc(100vh - 18rem)',
+				'100/25rem': 'calc(100vh - 25rem)',
+			},
+			maxHeight: {
+				'[90vh]': 'fit-content !important',
+			},
+			scale: {
+				103: '1.03',
+			},
 		},
 	},