worked on the about

worked on the aboutus component edit functionlity
worked on the module of the aboutus and services
2025-02-25 13:58:13 +05:30 · 2025-02-14 15:00:43 +05:30 · 2025-02-12 19:00:47 +05:30 · 2025-02-12 16:38:28 +05:30 · 2025-02-12 16:27:49 +05:30 · 2025-02-12 15:35:38 +05:30
107 changed files with 5823 additions and 1342 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1,5 @@
+VITE_API_URL='https://ssa.betadelivery.com/apia/v1'
+# VITE_API_URL='http://192.16.50.44/seo-backend/apia/v1'
+VITE_USER_NAME="Admin"
+VITE_PASSWORD="71%@L%es^bUX94`J9XT*@bh,._WWM{$%^^&&"
+VITE_APP_NAME=MyViteApp
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    "revision": "3ca0b8505b4bec776b69afdba2768812"
  }, {
    "url": "index.html",
-    "revision": "0.57smkc9q598"
+    "revision": "0.ch9snbb3598"
  }], {});
  workbox.cleanupOutdatedCaches();
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,20 +11,26 @@
        "@chakra-ui/react": "^3.2.3",
        "@emotion/react": "^11.14.0",
        "@emotion/styled": "^11.14.0",
+        "@reduxjs/toolkit": "^2.5.1",
+        "axios": "^1.7.9",
        "chart.js": "^4.4.7",
        "framer-motion": "^11.18.0",
+        "js-cookie": "^3.0.5",
        "next-themes": "^0.4.4",
        "react": "^18.3.1",
        "react-chartjs-2": "^5.3.0",
        "react-dom": "^18.3.1",
        "react-hook-form": "^7.54.2",
        "react-icons": "^5.4.0",
+        "react-quill": "^2.0.0",
+        "react-redux": "^9.2.0",
        "react-router-dom": "^7.1.1",
        "vite-plugin-pwa": "^0.21.1"
      },
      "devDependencies": {
        "@chakra-ui/cli": "^3.2.3",
        "@eslint/js": "^9.17.0",
+        "@types/js-cookie": "^3.0.6",
        "@types/react": "^18.3.18",
        "@types/react-dom": "^18.3.5",
        "@vitejs/plugin-react": "^4.3.4",
@@ -1670,7 +1676,6 @@
    },
    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
      "version": "1.3.0",
-      "dev": true,
      "inBundle": true,
      "license": "MIT",
      "engines": {
@@ -2722,6 +2727,30 @@
        "node": ">=14"
      }
    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.5.1.tgz",
+      "integrity": "sha512-UHhy3p0oUpdhnSxyDjaRDYaw8Xra75UiLbCiRozVPHjfDwNYkh0TsVm/1OmTW8Md+iDAJmYPWUKMvsMc2GtpNg==",
+      "license": "MIT",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3222,6 +3251,13 @@
      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
      "license": "MIT"
    },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.15",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3246,14 +3282,23 @@
      "version": "15.7.14",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
+    "node_modules/@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "license": "MIT",
+      "dependencies": {
+        "parchment": "^1.1.2"
+      }
+    },
    "node_modules/@types/react": {
      "version": "18.3.18",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@types/prop-types": "*",
@@ -3282,6 +3327,12 @@
      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
      "license": "MIT"
    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "8.18.2",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.18.2.tgz",
@@ -4537,6 +4588,12 @@
      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
      "license": "MIT"
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
    "node_modules/at-least-node": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -4561,6 +4618,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/babel-plugin-macros": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -5290,6 +5358,15 @@
        "node": ">= 0.2.0"
      }
    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5318,6 +5395,18 @@
        "node": ">=0.1.90"
      }
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/commander": {
      "version": "12.1.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
@@ -5504,6 +5593,26 @@
        }
      }
    },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -5554,6 +5663,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -6006,12 +6124,30 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "license": "MIT"
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "license": "MIT"
    },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "license": "Apache-2.0"
+    },
    "node_modules/fast-glob": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -6228,6 +6364,26 @@
        "tabbable": "^6.2.0"
      }
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -6254,6 +6410,20 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/formdata-polyfill": {
      "version": "4.0.10",
      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
@@ -6710,6 +6880,16 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -6767,6 +6947,22 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-array-buffer": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -7235,6 +7431,15 @@
        "node": ">=10"
      }
    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7496,6 +7701,27 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -7676,6 +7902,22 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/object-keys": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -7795,6 +8037,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "license": "BSD-3-Clause"
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8008,6 +8256,12 @@
      "integrity": "sha512-y44MCkgtZUCT9tZGuE278fB7PWVf7fRYy0vbRXAts2o5F0EfC4fIQrvQQGBJo1WJbFcVLXzApOscyJuZqHQc1w==",
      "license": "MIT"
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
    "node_modules/proxy-memoize": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/proxy-memoize/-/proxy-memoize-3.0.1.tgz",
@@ -8047,6 +8301,34 @@
      ],
      "license": "MIT"
    },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
    "node_modules/randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -8122,6 +8404,44 @@
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
      "license": "MIT"
    },
+    "node_modules/react-quill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
+      "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/quill": "^1.3.10",
+        "lodash": "^4.17.4",
+        "quill": "^1.3.7"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.14.2",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -8198,6 +8518,21 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
    "node_modules/reflect.getprototypeof": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -8329,6 +8664,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
    "node_modules/resolve": {
      "version": "1.22.10",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -9461,6 +9802,15 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/vite": {
      "version": "6.0.6",
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.6.tgz",
@@ -10080,20 +10430,6 @@
      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
      "license": "ISC"
    },
-    "node_modules/yaml": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
-      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -13,20 +13,26 @@
    "@chakra-ui/react": "^3.2.3",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
+    "@reduxjs/toolkit": "^2.5.1",
+    "axios": "^1.7.9",
    "chart.js": "^4.4.7",
    "framer-motion": "^11.18.0",
+    "js-cookie": "^3.0.5",
    "next-themes": "^0.4.4",
    "react": "^18.3.1",
    "react-chartjs-2": "^5.3.0",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.54.2",
    "react-icons": "^5.4.0",
+    "react-quill": "^2.0.0",
+    "react-redux": "^9.2.0",
    "react-router-dom": "^7.1.1",
    "vite-plugin-pwa": "^0.21.1"
  },
  "devDependencies": {
    "@chakra-ui/cli": "^3.2.3",
    "@eslint/js": "^9.17.0",
+    "@types/js-cookie": "^3.0.6",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,21 +1,47 @@
-import { useContext } from 'react';
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
-import GlobalStateContext from './Contexts/GlobalStateContext';
-import DefaultLayout from './Layouts/DefaultLayout';
-import Login from './Pages/Login';
-import { RouteLink } from './Routes/Routes';
+import { useContext, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import GlobalStateContext from "./Contexts/GlobalStateContext";
+import DefaultLayout from "./Layouts/DefaultLayout";
+import Login from "./Pages/Login";
+import { RouteLink } from "./Routes/Routes";

-function App() { 
+function App() {   
  const context = useContext(GlobalStateContext); 
-  if (!context) throw new Error('App must be used within a GlobalStateProvider'); 
-  const { isAuthenticate } = context; 
+  if (!context) throw new Error("App must be used within a GlobalStateProvider"); 
+  
+  const { isAuthenticate, setIsAuthenticate } = context; 
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    setIsAuthenticate(!!token); // Converts token to boolean
+  }, [setIsAuthenticate]);
+
+  console.log("Auth Status:", isAuthenticate);

  return ( 
    <Router> 
      <Routes> 
-        <Route path="/login" element={<Login />} /> 
-        <Route path="/*" element={isAuthenticate === true ? (<DefaultLayout><Routes>{RouteLink.map(({ path, Component }, index) => (<Route key={index} path={path} element={<Component />} />))}</Routes></DefaultLayout>) : (<Login />)} /> 
-        <Route path="*" element={<Login />} /> 
+        {/* Redirect logged-in users away from login */}
+        <Route path="/login" element={isAuthenticate && localStorage.getItem("token") ? <Navigate to="/" /> : <Login />} /> 
+
+        {/* Protected Routes */}
+        <Route 
+          path="/*" 
+          element={isAuthenticate && localStorage.getItem("token")  ? (
+            <DefaultLayout>
+              <Routes>
+                {RouteLink.map(({ path, Component }, index) => (
+                  <Route key={index} path={path} element={<Component />} />
+                ))}
+              </Routes>
+            </DefaultLayout>
+          ) : (
+            <Navigate to="/login" />
+          )} 
+        /> 
+
+        {/* Catch-all route to prevent unauthorized access */}
+        <Route path="*" element={<Navigate to="/login" />} /> 
      </Routes> 
    </Router> 
  ); 
--- a/src/Contexts/GlobalStateContext.tsx
+++ b/src/Contexts/GlobalStateContext.tsx
@@ -2,11 +2,12 @@
 import { createContext, Dispatch, SetStateAction } from 'react';

 // Define the shape of your context value
-type GlobalStateContextType = {
+export interface GlobalStateContextType {
  isAuthenticate: boolean;
  setIsAuthenticate: Dispatch<SetStateAction<boolean>>;
-};
-
+  isBarLoading: boolean;
+  setIsBarLoading: Dispatch<SetStateAction<boolean>>;
+}
 // Create the context with a default value of `undefined`
 const GlobalStateContext = createContext<GlobalStateContextType | undefined>(undefined);

--- a/src/Contexts/GlobalStateProvider.tsx
+++ b/src/Contexts/GlobalStateProvider.tsx
@@ -1,14 +1,21 @@
-import  { ReactNode, useState } from 'react';
-import GlobalStateContext from './GlobalStateContext';
+import { ReactNode, useState } from "react";
+import GlobalStateContext from "./GlobalStateContext";



-
-const GlobalStateProvider = ({ children }:{children:ReactNode}) => {
+const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
  const [isAuthenticate, setIsAuthenticate] = useState<boolean>(true);
+  const [isBarLoading, setIsBarLoading] = useState<boolean>(false); // ✅ Fixed typo
+
+ 

  return (
-    <GlobalStateContext.Provider value={{ isAuthenticate, setIsAuthenticate }}>
+    <GlobalStateContext.Provider value={{
+      isAuthenticate,
+      setIsAuthenticate,
+      isBarLoading,
+      setIsBarLoading, // ✅ Fixed typo
+    }}>
      {children}
    </GlobalStateContext.Provider>
  );
--- a/src/Layouts/DefaultLayout.tsx
+++ b/src/Layouts/DefaultLayout.tsx
@@ -1,39 +1,78 @@
 import { HStack, Image, Text, VStack } from "@chakra-ui/react";
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import { RiNotificationLine } from "react-icons/ri";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { nav } from "../Routes/Nav";
 import logo from '../assets/logo.svg';
 import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
 import { Avatar } from "../components/ui/avatar";
+import { LuLogOut } from "react-icons/lu";
+import { logout } from "../Redux/Service/authSlice";
+import { useDispatch } from "react-redux";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
+import { useLogOutMutation } from "../Redux/Service/apiSlice";
+import ProgressBar from "../components/ProgressBar/ProgressBar";

 const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
+
+  const dispatch = useDispatch()
  const navigate = useNavigate()
  const location = useLocation()


+  const context = useContext(GlobalStateContext);
+  if (!context) {
+    throw new Error('App must be used within a GlobalStateProvider');
+  }
+  const { setIsAuthenticate, isBarLoading } = context;
+  const [ logOutAdmin ] = useLogOutMutation()


+  // Logout function
+  const handleLogout = async () => {
+    try {
+      // ✅ Call mutation and wait for the response
+      const res = await logOutAdmin().unwrap(); 
+      console.log("Logout Success:", res);
+  
+      // ✅ Clear local storage & update authentication state
+      dispatch(logout());
+      localStorage.removeItem("token"); 
+      setIsAuthenticate(false); 
+      // ✅ Redirect to login page
+      navigate("/login");
+    } catch (error) {
+      console.error("Logout Failed:", error);
+    }
+  };
+
  return (
-    <HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={0}>
-    
-      <VStack  zIndex={1} gap={0} rounded={'lg'} h="100%" w="16%" overflow={'scroll'} >
-        <HStack w={'100%'} p={3} h={'8%'} justifyContent={'center'}>
+    <VStack gap={0} w="100%" h="100vh" bg="#F2F2F2">
+    <ProgressBar isLoading={isBarLoading}  />
+    <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="calc(100% - 4px)"  p={0}>
+      
+      <VStack pt={0} zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" overflow={'auto'} >
+        <HStack w={'100%'} p={3} h={'7%'} justifyContent={'center'}>
          <Image w={55} src={logo} />
        </HStack>
-        <VStack w={'100%'} p={4} pt={0}>
-          {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
-            <NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
-            <AccordionRoot bg={'#fff'} rounded={'lg'} collapsible>
-              <AccordionItem boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
+        <VStack  w={'100%'} p={2} pt={0}>
+          {nav?.map(({ title, path, Icon, type, children, initPath }, index) => type === 'single' ?
+            <NavLink  className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
+            <AccordionRoot border={location?.pathname.startsWith(initPath ?? path) ? "1px solid #02A0A0" : '1px' } key={index} bg={'#fff'} rounded={'lg'} collapsible>
+              <AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
                <AccordionItemTrigger className="Oxygen" color={'#fff'}   onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
                {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
              </AccordionItem>
            </AccordionRoot>)}
        </VStack>
+        <VStack w={'100%'} p={3} pt={0}>
+        <HStack onClick={handleLogout} className="link"  style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
+        </VStack>
      </VStack>
-      <VStack gap={0} h="100%" w="85%" >
-        <HStack h={'8%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
+      <VStack  gap={0} h="100%" w="85%" >
+     
+        <HStack h={'11%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
+        
          <NavLink to={'/manage-notification'}><RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} /></NavLink>
          <HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
            <Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
@@ -46,6 +85,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
        {children}
      </VStack>
    </HStack>
+    </VStack>
  );
 };

--- a/src/Pages/Dashboard/AgencyName.tsx
+++ b/src/Pages/Dashboard/AgencyName.tsx
@@ -0,0 +1,103 @@
+import { Box, HStack, Image, Input, Stack, Text } from "@chakra-ui/react";
+import React, { useState, useEffect } from "react";
+import { Button } from "../../components/ui/button";
+import { IoAddSharp } from "react-icons/io5";
+import delateIcon from "../../assets/deleteIcon.png";
+import { FaClockRotateLeft } from "react-icons/fa6";
+
+interface Todo {
+  id: number;
+  text: string;
+  completed: boolean;
+  timestamp: string;
+}
+
+const AgencyName: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [input, setInput] = useState<string>("");
+
+  
+  const getCurrentTime = () => {
+    const now = new Date();
+    return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+
+
+  const addTodo = () => {
+    if (input.trim() === "") return;
+    setTodos([...todos, { id: Date.now(), text: input, completed: false, timestamp: getCurrentTime() }]);
+    setInput(""); 
+  };
+
+  // Delete a task
+  const deleteTodo = (id: number) => {
+    setTodos(todos.filter((todo) => todo.id !== id));
+  };
+
+  useEffect(() => {
+    const savedTodos = localStorage.getItem("todos");
+    if (savedTodos) {
+      setTodos(JSON.parse(savedTodos));
+    }
+  }, []); // Runs only on mount
+
+  // 🔹 Save todos to localStorage whenever they change
+  useEffect(() => {
+    if (todos.length > 0) {
+      localStorage.setItem("todos", JSON.stringify(todos));
+    }
+  }, [todos]); // Runs when `todos` changes
+
+
+  return (
+    <Box p={"10px"}>
+      <HStack justifyContent={"space-between"} mb={5}>
+        <Text fontSize={"xs"} fontWeight={500}>
+          Add Agency Name
+        </Text>
+        <Button
+          bg={"#fff"}
+          color={"#222222CC"}
+          px={3}
+          fontSize={"12px"}
+          h={"28px"}
+          onClick={addTodo}
+        >
+          <IoAddSharp /> Add
+        </Button>
+      </HStack>
+      <Input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Add a task..."
+        backgroundColor={"#fff"}
+        size={"sm"}
+        w={"100%"}
+        p={2}
+        mb={4}
+      />
+      {todos.map((todo) => (
+        <HStack key={todo.id} backgroundColor={"#fff"} rounded={5} mb={3} p={4} justifyContent={'space-between'} alignItems={'inherit'}>
+          <Text fontSize={'sm'} color={'#222222bd'} fontWeight={400}>{todo.text}</Text>
+          <Stack display={'flex'} alignItems={'end'} w={'130px'}>
+            <Box display={'flex'} alignItems={'center'} gap={2}>
+                <FaClockRotateLeft fontSize={'10px'} style={{fontSize:'13px',color:'#222222bd'}} /> 
+                <Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
+            </Box>
+            <Box
+              onClick={() => deleteTodo(todo.id)}
+              bg={"none"}
+              color={"#22222299"}
+              cursor={'pointer'}
+            >
+              <Image w={"16px"} src={delateIcon} />
+            </Box>
+          </Stack>
+        </HStack>
+      ))}
+    </Box>
+  );
+};
+
+export default AgencyName;
--- a/src/Pages/Dashboard/Dashboard.tsx
+++ b/src/Pages/Dashboard/Dashboard.tsx
@@ -3,37 +3,73 @@ import {
  createListCollection,
  Heading,
  HStack,
-  Stack,
  Status,
  Tabs,
  Text,
 } from "@chakra-ui/react";
-import MainFrame from "../../components/MainFrame";
 import BarChart from "../../components/Charts/BarChart";
+import CircularApp from "../../components/Charts/CircularProgress";
+import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
+import MainFrame from "../../components/MainFrame";
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemTrigger,
+  AccordionRoot,
+} from "../../components/ui/accordion";
+import { Button } from "../../components/ui/button";
 import {
  SelectContent,
  SelectItem,
-  SelectLabel,
  SelectRoot,
  SelectTrigger,
-  SelectValueText,
+  SelectValueText
 } from "../../components/ui/select";
-import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
+import AgencyName from "./AgencyName";
+import { Spinner } from "../../components/Sipnner/Spinner";

 const Dashboard = () => {
  const frameworks = createListCollection({
    items: [
-      { label: "React.js", value: "react" },
-      { label: "Vue.js", value: "vue" },
-      { label: "Angular", value: "angular" },
-      { label: "Svelte", value: "svelte" },
+      { label: "Today", value: "Today" },
+      { label: "Week", value: "Week" },
+      { label: "Month", value: "Month" },
+      { label: "Year", value: "Year" },
    ],
  });

+  const accItems = [
+    {
+      value: "1",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "2",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "3",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "4",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "5",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+  ];
+
  return (
    <MainFrame>
-      <Box display={"flex"} p={"20px"} gap={5}>
-        <Box w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
+      <Box display={"flex"} p={"20px"} pt={'8px'} gap={5}>
+        <Box rounded={'lg'} w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
          <Heading fontSize={"sm"} p={2}>
            Total Users
          </Heading>
@@ -47,16 +83,28 @@ const Dashboard = () => {
            mb={6}
          >
            <Tabs.List>
-              <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
-              <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
-              <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+              <Tabs.Trigger fontSize={"xs"} value="tab-1">
+                Past 24 hrs
+              </Tabs.Trigger>
+              <Tabs.Trigger fontSize={"xs"} value="tab-2">
+                Total Users
+              </Tabs.Trigger>
+              <Tabs.Trigger fontSize={"xs"} value="tab-3">
+                New Signups
+              </Tabs.Trigger>
            </Tabs.List>
          </Tabs.Root>
          <Box>
            <SemiDoughnutChart />
          </Box>

-          <Box w={'80%'} m={'auto'} display={'flex'} justifyContent={'space-between'} mt={8}>
+          <Box
+            w={"80%"}
+            m={"auto"}
+            display={"flex"}
+            justifyContent={"space-between"}
+            mt={8}
+          >
            <Status.Root colorPalette="blue">
              <Status.Indicator />
              Recruiter <Text fontWeight={500}>2554</Text>
@@ -70,6 +118,7 @@ const Dashboard = () => {
        <Box
          p={"20px"}
          w={"50%"}
+          rounded={'lg'}
          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
        >
          <HStack alignItems={"center"} mb={4}>
@@ -92,12 +141,53 @@ const Dashboard = () => {
        <Box
          w={"20%"}
          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
-        ></Box>
+          p={'10px'}
+          rounded={'lg'}
+        >
+          <Text fontSize={"sm"} fontWeight={500} pt={3}>Number Of Groups created</Text>
+          <CircularApp />
+        </Box>
      </Box>
-      <Box p={"20px"} display={"flex"} gap={5}>
-        <Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
-        <Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
+      <Box p={"20px"} pt={0} display={"flex"} gap={5}>
+        <Box  w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} p={"10px"} overflow={'auto'}>
+          <HStack justifyContent={"space-between"} mb={5}>
+            <Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
+            <Button
+              bg={"#fff"}
+              color={"#222222CC"}
+              px={3}
+              fontSize={"12px"}
+              h={"28px"}
+            >
+              View ALL
+            </Button>
+          </HStack>
+          <AccordionRoot collapsible defaultValue={["b"]}>
+            {accItems.map((item, index) => (
+              <AccordionItem
+                key={index}
+                value={item.value}
+                bg={"#fff"}
+                mb={2}
+                p={"12px"}
+                rounded={5}
+                borderBottom={0}
+              >
+                <AccordionItemTrigger fontSize={"sm"} >
+                  {item.title}
+                </AccordionItemTrigger>
+                <AccordionItemContent fontSize={"xs"} color={'#222222CC'} pt={2}>
+                  {item.text}
+                </AccordionItemContent>
+              </AccordionItem>
+            ))}
+          </AccordionRoot>
+        </Box>
+        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} overflow={'auto'}>
+          <AgencyName />
+        </Box>
      </Box>
+     
    </MainFrame>
  );
 };
--- a/src/Pages/ForgetPassword.tsx
+++ b/src/Pages/ForgetPassword.tsx
@@ -0,0 +1,65 @@
+import { Field, Input, Stack, Text } from "@chakra-ui/react";
+import { Button } from "../components/ui/button";
+import {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../components/ui/dialog";
+function ForgetPassword() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Text w={"100%"} textAlign={"end"} mt={2} cursor={"pointer"}>
+          Forgot password?
+        </Text>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        p={2}
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white" pt={3} pb={2}>
+          <DialogTitle
+            alignSelf="center"
+            color="black"
+            fontSize="18px"
+            textAlign={"center"}
+          >
+            Forgot Password
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white" pt={5}>
+          <Stack p={2}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Please Enter Email Address
+              </Field.Label>
+              <Input
+                color="black"
+                p={2}
+                fontSize="sm"
+                type="text"
+                border="1px solid grey"
+                size={"sm"}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" mt={2} p={2}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Reset Password
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default ForgetPassword;
--- a/src/Pages/Login.tsx
+++ b/src/Pages/Login.tsx
@@ -1,96 +1,195 @@
-import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"
-import { useContext, useState } from "react"
-import { useForm } from "react-hook-form"
-import GlobalStateContext from "../Contexts/GlobalStateContext"
-import logo from '../assets/logo.svg'
-import { Button } from "../components/ui/button"
-import { Field } from "../components/ui/field"
-import { Toaster, toaster } from "../components/ui/toaster"
+import {
+  Box,
+  Center,
+  HStack,
+  Image,
+  Input,
+  Text,
+  Theme,
+  VStack,
+} from "@chakra-ui/react";
+import axios from "axios";
+import { useContext, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useDispatch } from "react-redux";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
+import { setToken } from "../Redux/Service/authSlice";
+import logo from "../assets/logo.svg";
+import { Button } from "../components/ui/button";
+import { Field } from "../components/ui/field";
+import { toaster, Toaster } from "../components/ui/toaster";
+import { PasswordInput } from "../components/ui/password-input";
+import { useNavigate } from "react-router-dom";
+import ForgetPassword from "./ForgetPassword";

 interface FormValues {
-  mobileNumber: number
+  mobileNumber: number;
+  password: string;
 }

 const Login = () => {
-
-  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
  const context = useContext(GlobalStateContext);
  if (!context) {
-    throw new Error('App must be used within a GlobalStateProvider');
+    throw new Error("App must be used within a GlobalStateProvider");
  }
  const { setIsAuthenticate } = context;
  const {
    register,
    handleSubmit,
    formState: { errors },
-  } = useForm<FormValues>()
+  } = useForm<FormValues>();

+  const onSubmit = handleSubmit(async (data) => {
+    setIsLoading(true);
+    // Encode Basic Auth Credentials
+    const username = import.meta.env.VITE_USER_NAME || ""; // Replace with actual username
+    const password = import.meta.env.VITE_PASSWORD || ""; // Replace with actual password
+    const basicAuth = `${username} : ${password}`; // Encode to Base64

-  const onSubmit = handleSubmit((data) => {
-    setIsLoading(true)
-    if (data?.mobileNumber === 1234567890) {
-      setTimeout(() => {
+    try {
+      const res = await axios.post(
+        `${import.meta.env.VITE_API_URL}/login`,
+        {
+          mobile_number: Number(data.mobileNumber),
+          password: data.password,
+        },
+        {
+          headers: {
+            Authorization: `Basic ${basicAuth}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      console.log("============",res);
+      
+
+      if (res.data) {
        setIsAuthenticate(true);
-        setIsLoading(false)
-      }, 3000); // 3-second delay
-
-    } else {
-      toaster.create({
-        title: `Invalid Credentials`,
-        type: "error",
-      })
-      setIsLoading(false)
+        console.log("====================================");
+        console.log(res.data?.data);
+        console.log("====================================");
+        navigate("/dashboard");
+        dispatch(setToken(String(res.data?.data["access-token"])));
+      } else {
+        console.log("====================================");
+        console.log(res);
+        console.log("====================================");
+      }
+    } catch (error) {
+      console.log('error', error);
+      
+      if (error) {
+        toaster.create({
+          // title: error?.response?.data?.message,
+          title: "Something Went Wrong",
+          type: "info",
+        })
+        // console.log("Login failed", error?.response?.data?.message);
+        setIsLoading(false);
+      }
    }
  });

-
  return (

-
-    <VStack
-      w={'100%'} h={'100vh'} bg={'#ffffff'}  >
-
-      <HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8}  h={'7%'} justifyContent={'flex-start'}>
-      <Image w={50} src={logo} />
-
+    <VStack appearance={'light'} w={"100%"} h={"100vh"} bg={"#ffffff"}>
+      <HStack
+        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+        w={"100%"}
+        ps={8}
+        h={"7%"}
+        justifyContent={"flex-start"}
+      >
+        <Image w={50} src={logo} />
      </HStack>

-
-      <HStack
-        w={'100%'} h={'93%'} p={8} gap={8}>
-
-
-
-
-        <Center display={{ base: 'none', md: 'flex' }} bg={'#02A0A033'} w={'50%'} h={'100%'} rounded={'3xl'}>
+      <HStack w={"100%"} h={"93%"} p={8} gap={8}>
+        <Center
+          display={{ base: "none", md: "flex" }}
+          bg={"#02A0A033"}
+          w={"50%"}
+          h={"100%"}
+          rounded={"3xl"}
+        >
          <Image w={250} src={logo} />
        </Center>

+        <Box
+          as={"form"}
+          onSubmit={onSubmit}
+          p={{ base: 4, md: 16 }}
+          w={{ base: "100%", md: "50%" }}
+          h={"100%"}
+        >
+          <VStack gap={2} w={"100%"}>
+            <Text
+              w={"100%"}
+              textAlign={"center"}
+              fontSize={"24px"}
+              fontWeight={"normal"}
+              color={"#313039"}
+            >
+              LOGIN
+            </Text>

-
-
-
-        <Center as={'form'} onSubmit={onSubmit} p={{ base: 4, md: 16 }} w={{ base: '100%', md: '50%' }} h={'100%'}>
-          <VStack gap={2} w={'100%'} alignItems={'flex-start'}>
-            <Text w={'100%'} textAlign={'center'} fontSize={'24px'} fontWeight={'normal'} color={'#313039'}>LOGIN</Text>
-
-            <VStack mt={6} gap={4} w={'full'}>
-              <Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.mobileNumber} errorText={errors.mobileNumber?.message} >
-                <Input ps={3} {...register("mobileNumber", { required: "Mobile Number address is required" })} placeholder="Mobile Number Address" />
-                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text> */}
+            <Box mt={6} gap={4} w={"full"}>
+              <Field
+                color={"#313039"}
+                label={"Enter Mobile Number"}
+                w={"100%"}
+                invalid={!!errors.mobileNumber}
+                errorText={errors.mobileNumber?.message}
+                mb={4}
+              >
+                <Input
+                  type="number"
+                  ps={3}
+                  {...register("mobileNumber", {
+                    required: "Mobile Number address is required",
+                  })}
+                  placeholder="Mobile Number Address"
+                />
+                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
              </Field>
-              <Button loading={isLoading} mt={4} size={'sm'} bg={'#02A0A0'} rounded={'md'} w={'100%'} color={'#ffffff'} type="submit">Send OTP</Button>
-
-              <Text>Forgot password</Text>
-            </VStack>
-
+              <Field
+                color={"#313039"}
+                label={"Enter password."}
+                w={"100%"}
+                invalid={!!errors.password}
+                errorText={errors.password?.message}
+                mb={2}
+              >
+                <PasswordInput
+                  ps={3}
+                  {...register("password", { required: "Pasword is required" })}
+                  placeholder="Enter password"
+                />
+                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
+              </Field>
+              <Button
+                loading={isLoading}
+                mt={4}
+                size={"sm"}
+                bg={"#02A0A0"}
+                rounded={"md"}
+                w={"100%"}
+                color={"#ffffff"}
+                type="submit"
+              >
+                Login
+              </Button>

+              <ForgetPassword />
+            </Box>
          </VStack>
-        </Center>
+        </Box>
        <Toaster />
      </HStack>
    </VStack>
-  )
-}
+  );
+};

-export default Login
+export default Login;
--- a/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
@@ -1,38 +1,132 @@
-import { Box, HStack, Text } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame"
-import { p } from "framer-motion/client";
-import AboutUsAddModel from "../../../components/AboutUsAddModel";
+// import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
+// import MainFrame from "../../../components/MainFrame"
+// import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
+// import { Spinner } from "../../../components/Sipnner/Spinner";
+// import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+// import { useContext, useEffect } from "react";
+// import AboutUsAddModel from "./AboutUsAddModel";


+
+// const AboutUs = () => {
+
+//   const { data, isLoading, isFetching } = useGetAboutUsQuery();
+
+//   // const content = data?.data
+//   console.log('====================================');
+//   console.log(data);
+//   console.log('====================================');
+
+//   const context = useContext(GlobalStateContext);
+//   if (!context) throw new Error('App must be used within a GlobalStateProvider');
+
+//   const { setIsBarLoading } = context;
+//   useEffect(() => {
+//     setIsBarLoading(isFetching)
+//   }, [data])
+
+//   return (
+//     <MainFrame transperant={true}>
+//       <VStack gap={4} pb={4} pt={0}>
+//         {isLoading || isFetching ?
+//           <Spinner /> : data?.data?.map(({ id, content, about_language }) => <VStack bg={'#fff'}
+//             boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+//             <HStack
+//               w={"100%"}
+//               justifyContent={"space-between"}
+
+//               py={0}
+//               px={0}
+//             >
+//               <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+//                 About Us <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {about_language?.language_name}</Badge>
+//               </Text>
+
+//               {/* <AboutUsAddModel /> */}
+//               <AboutUsAddModel/>
+//             </HStack>
+//             <Text
+//               as="p"
+//               fontSize="sm"
+//               fontWeight={400}
+//               color="#1D1D1D"
+//             >
+//               {content}
+//             </Text>
+
+//           </VStack>)}
+//       </VStack>
+//     </MainFrame>
+//   )
+// }
+// export default AboutUs
+
+import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
+import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
+import { Spinner } from "../../../components/Sipnner/Spinner";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";
+import AboutUsAddModel from "./AboutUsAddModel";
+
 const AboutUs = () => {
+  const { data, isLoading, isFetching } = useGetAboutUsQuery();
+
+  console.log("Fetched About Us Data:", data);
+
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error("App must be used within a GlobalStateProvider");
+
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching);
+  }, [isFetching, setIsBarLoading]);
+
  return (
+    <MainFrame transperant={true}>
+      <VStack gap={4} pb={4} pt={0}>
+        <Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}><Text color={"black"} textAlign={"left"} fontWeight={"600"} >             About Us
+        </Text></Stack>

-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-           AboutUs
-          </Text>
+        {isLoading || isFetching ? (
+          <Spinner />
+        ) : (
+          data?.data?.map(({ id, content, about_language }) => (
+            <VStack
+              bg={"#fff"}
+              boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+              rounded={"lg"}
+              p={3}
+              key={id}
+            >

-          <HStack mr={5}>
-            
-            <AboutUsAddModel />
-          </HStack>
-        </HStack>
-        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-        <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-     </Box>
+              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
+                <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                  <Badge
+                    variant={"surface"}
+                    colorPalette="cyan"
+                    ms={2}
+                    size={"sm"}
+                    fontSize={"xs"}
+                    px={2}
+                  >
+                    🎓 {about_language?.language_name}
+                  </Badge>
+                </Text>
+
+                {/* Pass Data to AboutUsAddModel */}
+                <AboutUsAddModel aboutUsData={{ id, content, about_language }} />
+              </HStack>
+              <Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
+                {/* {content} */}
+                <div dangerouslySetInnerHTML={{ __html: content }} />
+              </Text>
+            </VStack>
+          ))
+        )}
+      </VStack>
    </MainFrame>
-  )
-}
-export default AboutUs
+  );
+};
+
+export default AboutUs;
--- a/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
@@ -0,0 +1,142 @@
+import { FaRegEdit } from "react-icons/fa";
+import {
+    DialogBody,
+    DialogCloseTrigger,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogRoot,
+    DialogTitle,
+    DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css"; // Import the styles
+import { useState } from "react";
+import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";
+import { useForm, Controller } from "react-hook-form"; // Import React Hook Form
+
+function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    // RTK Query Mutation Hook
+    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation();
+
+    // React Hook Form
+    const {
+        control,
+        handleSubmit,
+        reset,
+        setValue,
+    } = useForm({
+        defaultValues: {
+            content: "",
+            languageCode: "",
+        },
+    });
+
+    // Function to handle edit click (pre-fill the editor)
+    const handleEditClick = (data: any) => {
+        setValue("content", data.content); // Pre-fill the content field
+        setValue("languageCode", data.about_language.language_code); // Pre-fill the language code
+        setIsOpen(true); // Open dialog
+    };
+
+    // Function to handle update submission
+    const onSubmit = async (formData: any) => {
+        if (!formData.content.trim()) return; // Prevent empty updates
+
+        try {
+            await updateAboutUs({
+                id: aboutUsData.id,
+                content: formData.content,
+                language_code: formData.languageCode,
+            }).unwrap();
+            setIsOpen(false); // Close dialog on success
+            reset(); // Reset the form
+        } catch (error) {
+            console.error("Update failed:", error);
+        }
+    };
+
+    return (
+        <DialogRoot placement="center" open={isOpen}>
+            <DialogTrigger asChild>
+                <Button
+                    bgColor="#EEEEEE"
+                    pl={3}
+                    pr={3}
+                    size="xs"
+                    color="#000"
+                    onClick={() => handleEditClick(aboutUsData)} // Set content before opening modal
+                >
+                    <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
+                    <Text color="#000" mt={1}>Edit</Text>
+                </Button>
+            </DialogTrigger>
+
+            <DialogContent bg="#fff" w={{ base: "90%", md: "1200px" }} height="auto" p={3}>
+                <DialogHeader bg="white">
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">
+                        Edit About Us
+                    </DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3} mb={8}>
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">
+                                About Us Content
+                            </Field.Label>
+                            {/* Use Controller to integrate ReactQuill with React Hook Form */}
+                            <Controller
+                                name="content"
+                                control={control}
+                                render={({ field }) => (
+                                    <ReactQuill
+                                        value={field.value}
+                                        onChange={field.onChange}
+                                        placeholder="Enter About Us content"
+                                        modules={{
+                                            toolbar: [
+                                                [{ 'header': [1, 2, false] }],
+                                                ['bold', 'italic', 'underline', 'strike'],
+                                                ['link', 'image'],
+                                                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+                                                ['clean']
+                                            ],
+                                        }}
+                                        formats={[
+                                            'header',
+                                            'bold', 'italic', 'underline', 'strike',
+                                            'list', 'bullet',
+                                            'link', 'image'
+                                        ]}
+                                        style={{ color: "black", border: "none", fontSize: "12px", height: "170px", width: "100%" }}
+                                    />
+                                )}
+                            />
+                        </Field.Root>
+                    </Stack>
+                </DialogBody>
+
+                <DialogFooter display="flex" justifyContent="center" pt="2">
+                    <Button
+                        w="100%"
+                        bg="#02A0A0"
+                        color="#fff"
+                        // isLoading={isLoading}
+                        onClick={handleSubmit(onSubmit)} // Use handleSubmit to trigger form submission
+                    >
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+            </DialogContent>
+        </DialogRoot>
+    );
+}
+
+export default AboutUsAddModel;
--- a/src/Pages/ManageCMS/FAQ/EditDetails.tsx
+++ b/src/Pages/ManageCMS/FAQ/EditDetails.tsx
@@ -0,0 +1,167 @@
+// import { Button } from "../../../components/ui/button";
+// import {
+//   DialogBody,
+//   DialogCloseTrigger,
+//   DialogContent,
+//   DialogFooter,
+//   DialogHeader,
+//   DialogRoot,
+//   DialogTitle,
+//   DialogTrigger,
+// } from "../../../components/ui/dialog";
+// import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+// import Edit from "../../../components/ActionIcons/Edit";
+// function EditDetails() {
+//   return (
+//     <DialogRoot placement="center">
+//       <DialogTrigger asChild>
+//         {/*  */}
+//         <Button bg={"#fff"} color={"black"}><Edit /></Button>
+
+//       </DialogTrigger>
+
+//       <DialogContent
+//         bg={"#fff"}
+//         // w={{ lg: "60%", md: "230px" }}
+//         w={{ base: "90%", md: "400px" }}
+//         height={"auto"}
+//         p={3} // Reduced padding
+//         bgSize={"md"}
+//       >
+//         <DialogHeader bg="white">
+//           <DialogTitle alignSelf="center" color="black" fontSize="14px">
+//             Edit Details
+//           </DialogTitle>
+//         </DialogHeader>
+
+//         <DialogBody bg="white">
+//           <Stack py={3}>
+//             <Field.Root>
+//               <Field.Label color="black" pt={1} fontSize="12px">
+//                 Questions
+//               </Field.Label>
+//               <Input
+//                 placeholder="Questions"
+//                 bgColor="#EEEEEE"
+//                 color="black"
+//                 border="none"
+//                 pl={1}
+//                 fontSize="12px"
+//                 height="30px"
+//               />
+
+//               <Field.Label color="black" pt={1} fontSize="12px">
+//                 Answer
+//               </Field.Label>
+//               <Textarea
+//                 placeholder="Answer"
+//                 bgColor="#EEEEEE"
+//                 color="black"
+//                 border="none"
+//                 pl={1}
+//                 fontSize="12px"
+//                 height="30px"
+//                 pt={1.5}
+//               />
+//             </Field.Root>
+//           </Stack>
+//         </DialogBody>
+//         <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+//           <Button w="100%" bg="#02A0A0" color={"#fff"}>
+//             Save
+//           </Button>
+//         </DialogFooter>
+
+//         <DialogCloseTrigger color="black" />
+//       </DialogContent>
+//     </DialogRoot>
+//   );
+// }
+
+// export default EditDetails;
+
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
+
+function EditDetails(rowData: any) {
+
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+
+
+
+        <Button bg="transparent" color={"black"} h={"18px"}>    <Edit /></Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit Details (ID: {rowData?.id})
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Question
+              </Field.Label>
+              <Input
+                placeholder="Question"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                defaultValue={rowData?.question} // Pre-fill question
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Answer
+              </Field.Label>
+              <Textarea
+                placeholder="Answer"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                pt={1.5}
+                defaultValue={rowData?.answer} // Pre-fill answer
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default EditDetails;
--- a/src/Pages/ManageCMS/FAQ/FAQ.tsx
+++ b/src/Pages/ManageCMS/FAQ/FAQ.tsx
@@ -1,13 +1,13 @@
-import { Box, Button, HStack, Image, Input, Text } from "@chakra-ui/react";
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
-import EditDetails from "../../../components/EditDetails";
+import EditDetails from "./EditDetails";
 import { InputGroup } from "../../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
 import DataTable from "../../../components/DataTable";
 import AlertDailog from "../../../components/AlertDailog";
-import { RiDeleteBin5Line } from "react-icons/ri";
 import { Switch } from "../../../components/ui/switch";
-import FaqAddModel from "../../../components/FaqAddModel";
+import FaqAddModel from "./FaqAddModel";
+import Delete from "../../../components/ActionIcons/Delete";


 // table data
@@ -27,11 +27,13 @@ const managepost: any[] = [
    "Action": (
      <HStack justifyContent="center">
        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
+          <Switch colorPalette={'teal'} size={"xs"} />
        </Box>
+        {/* <EditDetails /> */}
        <EditDetails />
+
        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />}
          alertText="Delete Users"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
@@ -57,11 +59,11 @@ const FAQ = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-           FAQs
+            FAQs
          </Text>

-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup
              startElement={
                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
              }
@@ -74,7 +76,7 @@ const FAQ = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
                fontSize={"2sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
@@ -90,7 +92,7 @@ const FAQ = () => {
          tableHeadRow={tableHeadRow}
          data={managepost}
        />
-      </Box>       
+      </Box>
    </MainFrame>
  )
 }
--- a/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
+++ b/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
@@ -0,0 +1,84 @@
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react";
+import { IoMdAdd } from "react-icons/io";
+import { Button } from "../../../components/ui/button";
+
+function FaqAddModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button px={5} size={"xs"} bg={"#02A0A0"}>
+          <IoMdAdd /> <Text>Add</Text>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Questions
+              </Field.Label>
+              <Input
+                placeholder="Questions"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                _focusVisible={{outline:'none'}}
+                size={'sm'}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Answer
+              </Field.Label>
+              <Textarea
+                placeholder="Answer"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height="120px"
+                resize={'none'}
+                _focusVisible={{outline:'none'}}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default FaqAddModel;
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
@@ -1,38 +1,55 @@
-import { Box, HStack, Text } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame"
-import { p } from "framer-motion/client";
-import PrivacyPolicyAddModel from "../../../components/PrivacyPolicyAddModel";
+import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
+import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.service";
+import MainFrame from "../../../components/MainFrame";
+import { Spinner } from "../../../components/Sipnner/Spinner";
+import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";


 const PrivacyPolicy = () => {
+  const { data, isLoading, isFetching } = useGetPrivacyPolicyQuery();
+
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error('App must be used within a GlobalStateProvider');
+
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching)
+  }, [data])
+
  return (
+    <MainFrame transperant={true}>
+      <VStack gap={4} pb={4} pt={0}>
+        {isLoading || isFetching ?
+          <Spinner /> : data?.data?.map(({ id, content, privacy_language }) => <VStack bg={'#fff'}
+            boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+            <HStack
+              w={"100%"}
+              justifyContent={"space-between"}

-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Privacy Policy
-          </Text>
+              py={0}
+              px={0}
+            >
+              <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                Privacy Policy <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {privacy_language?.language_name}</Badge>
+              </Text>

-          <HStack mr={5}>
-            
-            <PrivacyPolicyAddModel />
-          </HStack>
-        </HStack>
-        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-        <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-     </Box>
+              <PrivacyPolicyAddModel />
+            </HStack>
+            <Text
+              as="p"
+              fontSize="sm"
+              fontWeight={400}
+              color="#1D1D1D"
+            >
+              {content}
+            </Text>
+
+          </VStack>)}
+      </VStack>
    </MainFrame>
-  )
-}
-export default PrivacyPolicy
+  );
+};
+
+export default PrivacyPolicy;
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
@@ -0,0 +1,80 @@
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+
+function PrivacyPolicyAddModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        {/* <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                </Button> */}
+        <Button bgColor={"#EEEEEE"} pl={3} pr={3} size={"xs"} color={"#000"}>
+          {" "}
+          <FaRegEdit
+            color="#000"
+            style={{ height: "14px", width: "14px" }}
+          />{" "}
+          <Text color={"#000"} mt={1}>
+            Edit
+          </Text>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                PrivacyPolicy
+              </Field.Label>
+              <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{outline:'none'}}
+                resize={'none'}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default PrivacyPolicyAddModel;
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx
@@ -0,0 +1,15 @@
+import { Box, Skeleton } from '@chakra-ui/react'
+
+const PrivacyPolicySkeleton = () => {
+  return (
+    <Box px={3} pb={3} w="90%">
+      <Skeleton height="20px" mb="10px" width="90%" />
+      <Skeleton height="20px" mb="15px" width="90%" />
+      <Skeleton height="20px" mb="10px" width="90%" />
+      <Skeleton height="20px" mb="10px" width="80%" />
+      <Skeleton height="20px" width="60%" />
+    </Box>
+  )
+}
+
+export default PrivacyPolicySkeleton
--- a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
@@ -1,7 +1,7 @@
 import { Box, HStack, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
 import { p } from "framer-motion/client";
-import TermsAndConditionsAddModel from "../../../components/TermsAndConditionsAddModel";
+import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";


 const TermsAndConditions = () => {
@@ -20,7 +20,7 @@ const TermsAndConditions = () => {
           Terms And Conditions
          </Text>

-          <HStack mr={5}>
+          <HStack >
            
            <TermsAndConditionsAddModel />
          </HStack>
--- a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
@@ -0,0 +1,77 @@
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+
+function TermsAndConditionsAddModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button bgColor={"#EEEEEE"} pl={3} pr={3} size={"xs"} color={"#000"}>
+          {" "}
+          <FaRegEdit
+            color="#000"
+            style={{ height: "14px", width: "14px" }}
+          />{" "}
+          <Text color={"#000"} mt={1}>
+            Edit
+          </Text>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                TermsAndConditions
+              </Field.Label>
+              <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{outline:'none'}}
+                resize={'none'}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default TermsAndConditionsAddModel;
--- a/src/Pages/ManageContact/ManageContact.tsx
+++ b/src/Pages/ManageContact/ManageContact.tsx
@@ -1,6 +1,6 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import { Box, HStack, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../components/MainFrame"
-import PendingRequests from "../../components/PendingRequests";
+import PendingRequests from "../../Pages/ManageContact/PendingRequests"
 import { InputGroup } from "../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
 import DataTable from "../../components/DataTable";
@@ -25,7 +25,6 @@ const managepost: any[] = [
    "Action": (
      <HStack justifyContent="center">
        <PendingRequests />
-       
      </HStack>
    ),
  })),
@@ -47,8 +46,8 @@ const ManageContact = () => {
          Contact Requests
          </Text>

-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup 
              startElement={
                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
              }
@@ -61,8 +60,8 @@ const ManageContact = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
                ps={8}
--- a/src/Pages/ManageContact/PendingRequests.tsx
+++ b/src/Pages/ManageContact/PendingRequests.tsx
@@ -0,0 +1,105 @@
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Badge, Field, HStack, Input, Stack, Textarea } from "@chakra-ui/react";
+function PendingRequests() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Badge fontSize={"xs"} px={2} bg={'#02a0a01f'}>
+          Answer request
+        </Badge>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Pending Requests
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Request Type
+              </Field.Label>
+              <Input
+                placeholder="Message"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Solution
+              </Field.Label>
+              <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="80px"
+                pt={1.5}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter
+          display={{ base: "block", md: "flex" }}
+          justifyContent="center"
+          gap={1}
+          pt={2}
+        >
+          <HStack mt={2} mb={3} width={"100%"} justifyContent={"space-between"}>
+            <Button
+              width={"48%"}
+              color="black"
+              _hover={{ bgColor: "white" }}
+              variant="outline"
+              borderRadius="sm"
+              border="1px solid #02A0A0"
+              size={"xs"}
+            >
+              Unresolved
+            </Button>
+            <Button
+              width={"48%"}
+              borderRadius="sm"
+              // bgColor="#007F33"
+              bgColor={"#02A0A0"}
+              color="white"
+              // colorPalette="#007F33"
+              size={"xs"}
+            >
+              Resolved
+            </Button>
+          </HStack>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default PendingRequests;
--- a/src/Pages/ManageGroups/AddGroup.tsx
+++ b/src/Pages/ManageGroups/AddGroup.tsx
@@ -8,7 +8,7 @@ function AddGroup() {

        <DialogRoot placement="center" >
            <DialogTrigger asChild>
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}><IoMdAdd /> <Text>Add</Text></Button>
+                <Button px={5} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>

            </DialogTrigger>

@@ -16,19 +16,17 @@ function AddGroup() {
                bg={"#fff"}
                // w={{ lg: "60%", md: "230px" }}
                w={{ base: '90%', md: '400px' }}
-
-
-                // height={'80vh'}
-                overflow={'scroll'}
-                p={2} // Reduced padding
+                height={"auto"}
+                // overflow={'scroll'}
+                p={3} // Reduced padding
                bgSize={'md'}
            >
-                <DialogHeader bg="white" pt={1} pb={2}>
+                <DialogHeader bg="white">
                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
-                    <Stack p={2} >
+                    <Stack py={3} >

                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="xs">Group Name</Field.Label>
@@ -41,18 +39,11 @@ function AddGroup() {
                        <Button w="30%" size={'xs'} bg="#02A0A0" mt={3} color={"#fff"}>
                            Add Member
                        </Button>
-
-
-
-
-
-
-
                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
                        <Switch />
                    </Stack>
                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
--- a/src/Pages/ManageGroups/EditDetailGroup.tsx
+++ b/src/Pages/ManageGroups/EditDetailGroup.tsx
@@ -1,85 +1,119 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
-import { FaRegEdit } from "react-icons/fa";
 import { AvatarGroup } from "../../components/ui/avatar";
+import Edit from "../../components/ActionIcons/Edit";
 function EditDetailGroups() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>

-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }} />
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit details
+          </DialogTitle>
+        </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Group Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

-            </DialogTrigger>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Description
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

-            <DialogContent
-                bg={"#fff"}
-                w={{ base: '90%', md: '400px' }}
-                overflow={'scroll'}
-                p={2} // Reduced padding
-            >
-                <DialogHeader bg="white" pt={1} pb={2}>
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit details</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>

-                <DialogBody bg="white">
-                    <Stack p={2} >
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>

-                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
-
-                            <Box
-                                bgColor="#EEEEEE"
-                                border="none"
-                                w="100%"
-                                display="flex"
-                                p={1}
-                                rounded={4}
-                            >
-                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
-                                    </Avatar.Root>
-                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
-                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
-                                    </Avatar.Root>
-                                </AvatarGroup>
-                            </Box>
-                        </Field.Root>
-                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
-                        <Switch />
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
-                    <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>   <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button size={"xs"} w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>{" "}
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default EditDetailGroups
+export default EditDetailGroups;
--- a/src/Pages/ManageGroups/ManageGroups.tsx
+++ b/src/Pages/ManageGroups/ManageGroups.tsx
@@ -1,18 +1,16 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react"
-import MainFrame from "../../components/MainFrame"
-import { InputGroup } from "../../components/ui/input-group"
-import { LuSearch } from "react-icons/lu"
-import DataTable from "../../components/DataTable"
-import AlertDailog from "../../components/AlertDailog"
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import { InputGroup } from "../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../components/DataTable";
+import AlertDailog from "../../components/AlertDailog";
 import { RiDeleteBin5Line } from "react-icons/ri";
-import AddModel from "../SubAdmin/AddModel"
-import EditSubAdmin from "../../components/EditSubAdmin"
-import ViewManageGroup from "./ViewManageGroup"
-import EditDetailGroups from "./EditDetailGroup"
-import AddGroup from "./AddGroup"
+import ViewManageGroup from "./ViewManageGroup";
+import EditDetailGroups from "./EditDetailGroup";
+import AddGroup from "./AddGroup";
+import Delete from "../../components/ActionIcons/Delete";
 // import ViewSubAdmin from "./ViewSubAdmin"

-
 // table data

 const tableHeadRow = [
@@ -28,21 +26,15 @@ const managepost: any[] = [
  ...Array.from({ length: 12 }, (_, i) => ({
    "Sr. No": i + 1,
    "Group Name": "ABC",
-    "Description": "Lorem ipsum",
-    "Date": "12/01/1987",
+    Description: "Lorem ipsum",
+    Date: "12/01/1987",
    "Group type": "Private",
-    "Action": (
+    Action: (
      <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
        <ViewManageGroup />
        <EditDetailGroups />
-
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
          alertText="Delete Users"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
@@ -56,8 +48,7 @@ const managepost: any[] = [
 ];
 const ManageGroups = () => {
  return (
-
-    <MainFrame >
+    <MainFrame>
      <Box>
        <HStack
          w={"100%"}
@@ -70,10 +61,13 @@ const ManageGroups = () => {
            Manage Groups
          </Text>

-          <HStack gap={4}>
+          <HStack>
            <InputGroup
              startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
              }
              color={"#000"}
            >
@@ -84,12 +78,12 @@ const ManageGroups = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                ps={8}
-                border={'none'}
+                border={"none"}
              />
            </InputGroup>
            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
@@ -101,7 +95,8 @@ const ManageGroups = () => {
          tableHeadRow={tableHeadRow}
          data={managepost}
        />
-      </Box>    </MainFrame>
-  )
-}
-export default ManageGroups
+      </Box>{" "}
+    </MainFrame>
+  );
+};
+export default ManageGroups;
--- a/src/Pages/ManageGroups/ViewManageGroup.tsx
+++ b/src/Pages/ManageGroups/ViewManageGroup.tsx
@@ -1,93 +1,116 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
-import { MdOutlineRemoveRedEye } from "react-icons/md";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
 import { AvatarGroup } from "../../components/ui/avatar";
+import View from "../../components/ActionIcons/View";
 function ViewManageGroup() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>

-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} />
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            View details
+          </DialogTitle>
+        </DialogHeader>

-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Group Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Description
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>

-                // height={'80vh'}
-                overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" pt={1} pb={2}>
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View details</DialogTitle>
-                </DialogHeader>
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>

-                <DialogBody bg="white">
-                    <Stack p={2} >
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>

-                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
-
-                            <Box
-                                bgColor="#EEEEEE"
-                                border="none"
-                                w="100%"
-                                display="flex"
-                                p={1}
-                                rounded={4}
-                            >
-                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
-                                    </Avatar.Root>
-                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
-                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
-                                    </Avatar.Root>
-                                </AvatarGroup>
-                            </Box>
-
-
-
-
-
-                        </Field.Root>
-                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
-                        <Switch />
-                    </Stack>
-                </DialogBody>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default ViewManageGroup
+export default ViewManageGroup;
--- a/src/Pages/ManageJobs/ManageJobs.tsx
+++ b/src/Pages/ManageJobs/ManageJobs.tsx
@@ -1,17 +1,13 @@
-import { Box, createListCollection, HStack, Image, Input, Text } from "@chakra-ui/react";
-import MainFrame from "../../components/MainFrame"
-import ViewSubAdmin from "../SubAdmin/ViewSubAdmin";
-import EditSubAdmin from "../../components/EditSubAdmin";
-import AlertDailog from "../../components/AlertDailog";
-import { InputGroup } from "../../components/ui/input-group";
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import { LuSearch } from "react-icons/lu";
-import AddModel from "../SubAdmin/AddModel";
-import DataTable from "../../components/DataTable";
 import { RiDeleteBin5Line } from "react-icons/ri";
+import AlertDailog from "../../components/AlertDailog";
+import DataTable from "../../components/DataTable";
+import MainFrame from "../../components/MainFrame";
+import { InputGroup } from "../../components/ui/input-group";
 import ManageJobsAdd from "./ManageJobsAdd";
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger, SelectValueText } from "../../components/ui/select";
 import ViewManageJob from "./ViewManageJob";
-
+import Delete from "../../components/ActionIcons/Delete";

 // table data

@@ -30,21 +26,15 @@ const managepost: any[] = [
    "Sr. No": i + 1,
    "Job Title": "Freelance content writer",
    "Workspace mode": "Onsite",
-    "Category": "IT",
+    Category: "IT",
    "Sub-category": "Flutter dev",
-    "Salary": "3.5 LPA",
-    "Action": (
+    Salary: "3.5 LPA",
+    Action: (
      <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
-        {/* <ViewDailog /> */}
        <ViewManageJob />
        <ManageJobsAdd />
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />}
          alertText="Delete Users"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
@@ -59,7 +49,6 @@ const managepost: any[] = [

 const ManageJobs = () => {
  return (
-
    <MainFrame>
      <Box>
        <HStack
@@ -73,10 +62,13 @@ const ManageJobs = () => {
            View job Posting
          </Text>

-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack>
+            <InputGroup
              startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
              }
              color={"#000"}
            >
@@ -87,10 +79,10 @@ const ManageJobs = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                ps={8}
              />
            </InputGroup>
@@ -102,8 +94,8 @@ const ManageJobs = () => {
          tableHeadRow={tableHeadRow}
          data={managepost}
        />
-      </Box>       
+      </Box>
    </MainFrame>
-  )
-}
-export default ManageJobs
+  );
+};
+export default ManageJobs;
--- a/src/Pages/ManageJobs/ManageJobsAdd.tsx
+++ b/src/Pages/ManageJobs/ManageJobsAdd.tsx
@@ -1,109 +1,261 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { createListCollection, Field, Input, SelectValueText, Stack } from "@chakra-ui/react"
+import {
+  Field,
+  Icon,
+  Input,
+  SelectValueText,
+  Stack,
+  createListCollection,
+} from "@chakra-ui/react";
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";

-import { FaRegEdit } from "react-icons/fa"
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
+import { TbEdit } from "react-icons/tb";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+} from "../../components/ui/select";
+import Edit from "../../components/ActionIcons/Edit";

 const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
+  items: [
+    { label: "React.js", value: "react" },
+    { label: "Vue.js", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+  ],
+});
 function ManageJobsAdd() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>

+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add Details
+          </DialogTitle>
+        </DialogHeader>

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }} />
-                </Button>
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                height={'80vh'}
-                overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" p={2}>
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack p={2}>
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
-                            <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
-                            <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
-                            <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
-                            <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
-                            <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
-                            <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
-                            <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job title
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Title"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace mode
+              </Field.Label>
+              <Input
+                placeholder="Enter the Workspace Mode"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Sub-Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Sub-Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Salary
+              </Field.Label>
+              <Input
+                placeholder="Enter the Salary"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Experience
+              </Field.Label>
+              <Input
+                placeholder="Enter the Experience"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Location
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Location"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                            <Input placeholder="Enter the Country Selection"   /> */}
-                            <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                                <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                                <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                    borderRadius={"5px"}>
-                                    <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                                </SelectTrigger>
-                                <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                    {frameworks.items.map((movie) => (
-                                        <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                            fontSize="12px" >
-                                            {movie.label}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </SelectRoot>
+            <SelectRoot collection={frameworks} size="sm" w={"100%"}>
+              <SelectLabel pt={1} color="black" fontSize="12px">
+                Country Selection
+              </SelectLabel>
+              <SelectTrigger
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                borderRadius={"5px"}
+              >
+                <SelectValueText
+                  placeholder="Enter the Country Selection"
+                  pb={"6px"}
+                  fontSize={"12px"}
+                />
+              </SelectTrigger>
+              <SelectContent position={"relative"} zIndex={"9999"} bg={"#fff"}>
+                {frameworks.items.map((movie) => (
+                  <SelectItem
+                    item={movie}
+                    key={movie.value}
+                    color={"black"}
+                    pl={2}
+                    p={1}
+                    _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
+                    fontSize="12px"
+                  >
+                    {movie.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </SelectRoot>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job type
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Type"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Skills required
+              </Field.Label>
+              <Input
+                placeholder="Enter the Skills Required"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Description*
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Description"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter>

-
-                            <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
-                            <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
-                            <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
-                            <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default ManageJobsAdd
+export default ManageJobsAdd;
--- a/src/Pages/ManageJobs/ViewManageJob.tsx
+++ b/src/Pages/ManageJobs/ViewManageJob.tsx
@@ -1,112 +1,276 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { createListCollection, Field, Input, SelectValueText, Stack, } from "@chakra-ui/react"
+import {
+  Field,
+  Icon,
+  Input,
+  SelectValueText,
+  Stack,
+  createListCollection,
+} from "@chakra-ui/react";
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";

-import { FaRegEdit } from "react-icons/fa"
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
-import { MdOutlineRemoveRedEye } from "react-icons/md"
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+} from "../../components/ui/select";
+import View from "../../components/ActionIcons/View";

 const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
+  items: [
+    { label: "React.js", value: "react" },
+    { label: "Vue.js", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+  ],
+});
 function ViewManageJob() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>

+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add Details
+          </DialogTitle>
+        </DialogHeader>

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }} />
-                </Button>
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                height={'80vh'}
-                overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" p={2}>
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack p={2}>
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
-                            <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
-                            <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
-                            <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
-                            <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
-                            <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
-                            <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
-                            <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job title
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Title"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace mode
+              </Field.Label>
+              <Input
+                placeholder="Enter the Workspace Mode"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Sub-Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Sub-Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Salary
+              </Field.Label>
+              <Input
+                placeholder="Enter the Salary"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Experience
+              </Field.Label>
+              <Input
+                placeholder="Enter the Experience"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Location
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Location"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                            <Input placeholder="Enter the Country Selection"   /> */}
-                            <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                                <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                                <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                    borderRadius={"5px"}>
-                                    <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                                </SelectTrigger>
-                                <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                    {frameworks.items.map((movie) => (
-                                        <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                            fontSize="12px" >
-                                            {movie.label}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </SelectRoot>
+            <SelectRoot collection={frameworks} size="sm" w={"100%"}>
+              <SelectLabel pt={1} color="black" fontSize="12px">
+                Country Selection
+              </SelectLabel>
+              <SelectTrigger
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                borderRadius={"5px"}
+              >
+                <SelectValueText
+                  placeholder="Enter the Country Selection"
+                  pb={"6px"}
+                  fontSize={"12px"}
+                />
+              </SelectTrigger>
+              <SelectContent position={"relative"} zIndex={"9999"} bg={"#fff"}>
+                {frameworks.items.map((movie) => (
+                  <SelectItem
+                    item={movie}
+                    key={movie.value}
+                    color={"black"}
+                    pl={2}
+                    p={1}
+                    _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
+                    fontSize="12px"
+                  >
+                    {movie.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </SelectRoot>

+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job type
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Type"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Skills required
+              </Field.Label>
+              <Input
+                placeholder="Enter the Skills Required"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Description*
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Description"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Upload Image
+              </Field.Label>
+              <Input
+                placeholder="Upload Image"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter>

-                            <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
-                            <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
-                            <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
-                            <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            <Field.Label pt={1} color="black" fontSize="12px">Upload Image</Field.Label>
-                            <Input placeholder="Upload Image" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default ViewManageJob
+export default ViewManageJob;
--- a/src/Pages/ManagePost/ManagePost.tsx
+++ b/src/Pages/ManagePost/ManagePost.tsx
@@ -1,14 +1,14 @@
-
-import { Box, HStack, Image, Input, Text } from '@chakra-ui/react'
-import MainFrame from '../../components/MainFrame'
-import { InputGroup } from '../../components/ui/input-group'
-import { LuSearch } from 'react-icons/lu'
-import DataTable from '../../components/DataTable'
-import AlertDailog from '../../components/AlertDailog'
-import { Switch } from '../../components/ui/switch'
-import img from "../../assets/waterfall.jpg"
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import { InputGroup } from "../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../components/DataTable";
+import AlertDailog from "../../components/AlertDailog";
+import { Switch } from "../../components/ui/switch";
+import img from "../../assets/waterfall.jpg";
 import { RiDeleteBin5Line } from "react-icons/ri";
-import ViewDailog from './ViewDailog'
+import ViewDailog from "./ViewDailog";
+import Delete from "../../components/ActionIcons/Delete";
 // import ViewDailog from './ViewDailog'

 // table data
@@ -25,31 +25,29 @@ const tableHeadRow = [
 const managepost: any[] = [
  ...Array.from({ length: 12 }, (_, i) => ({
    "Sr. No": i + 1,
-    "Images": (
+    Images: (
      // <Image w={50} src={img} />
-      <Image w={100} h={50} src={img} />
-
-
+      <Image rounded={"lg"} w={100} h={50} src={img} />
+    ),
+    Description: (
+      <Text>
+        {`Lorem ipsum dolor, sit amet consectetur adipisicing elit.}`.slice(
+          0,
+          30
+        ) + "..."}
+      </Text>
    ),
-    "Description": (<Text>
-      {`Lorem ipsum dolor, sit amet consectetur adipisicing elit.`.slice(0, 30) + '...'}
-    </Text>),
    "Publish Data": "12/01/2025",
    "Activate/Deactivate": (
-      <Box>
-        <Switch colorPalette={'teal'} />
+      <Box w={"100%"}>
+        <Switch size={"sm"} colorPalette={"teal"} />
      </Box>
    ),
-    "Action": (
+    Action: (
      <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
        <ViewDailog />
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
          alertText="Delete Users"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
@@ -79,7 +77,10 @@ const ManagePost = () => {
          <HStack>
            <InputGroup
              startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
              }
              color={"#000"}
            >
@@ -90,10 +91,10 @@ const ManagePost = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                ps={8}
              />
            </InputGroup>
@@ -106,7 +107,7 @@ const ManagePost = () => {
        />
      </Box>
    </MainFrame>
-  )
-}
+  );
+};

-export default ManagePost
+export default ManagePost;
--- a/src/Pages/ManagePost/ViewDailog.tsx
+++ b/src/Pages/ManagePost/ViewDailog.tsx
@@ -1,30 +1,29 @@
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Image, Input, Stack } from "@chakra-ui/react"
+import { Field, Icon, Image, Input, Stack } from "@chakra-ui/react"
+import { TbEdit } from "react-icons/tb"
 import img from "../../assets/waterfall.jpg"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import Edit from "../../components/ActionIcons/Edit"
+
 function ViewDailog() {
    return (

        <DialogRoot placement="center">
            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button>
+                <Edit />
            </DialogTrigger>

            <DialogContent
                w={{ base: '90%', md: '400px' }}
                bg={"#fff"}
                h="auto"
-                p={2} // Reduced padding
+                p={3} // Reduced padding
            >
-                <DialogHeader bg="white" p={2}>
+                <DialogHeader bg="white" >
                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View Details</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
-                    <Stack p={2} >
+                    <Stack py={3} >
                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Title</Field.Label>
                            <Input placeholder="Enter the Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
--- a/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx
+++ b/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx
@@ -21,7 +21,7 @@ const manageUser: any[] = [
    "Company name": "9876543210",
    "Activate/Deactivate": (
      <Box display={'flex'} justifyContent={'center'}>
-        <Switch colorPalette={'teal'} />
+        <Switch size={'sm'} colorPalette={'teal'} />
      </Box>
    ),
  })),
@@ -57,7 +57,7 @@ const DeactivatedAccounts = () => {
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
                size={"2xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
                ps={8}
--- a/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
@@ -17,104 +17,76 @@ function AddRegisterUsers() {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
-        <Button px={5} size={"xs"} bg={"#02A0A0"}>
+        <Button px={4} size={"xs"} bg={"#02A0A0"}>
          <IoMdAdd /> Add
        </Button>
      </DialogTrigger>

      <DialogContent
-        bg={"#fff"}
-        w={{ base: "90%", md: "400px" }}
-        maxW="90vw"
-        h="auto"
-        p={4}
+         bg={"#fff"}
+         w={{ base: '90%', md: '400px' }}
+         height={'80vh'}
+         overflow={'scroll'}
+         overflowX="hidden" 
+         p={3} // Reduced padding
+         bgSize={'md'}
      >
-        <DialogHeader bg="white" p={0}>
-          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+        <DialogHeader bg="white" >
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            Add User Accounts
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
-          <Stack pt={3} pb={3}>
+          <Stack py={3}>
            <Field.Root>
-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                First Name
              </Field.Label>
              <Input
-                name="Priyanka"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                Last Name
              </Field.Label>
              <Input
-                name="Joshi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                Gender
              </Field.Label>
              <Input
-                name="Female"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                DOB
              </Field.Label>
              <Input
-                name="11/02/1989"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                OTP Verified
              </Field.Label>
              <Input
-                name="Yes"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                Language
              </Field.Label>
              <Input
-                name="English, Hindi, Marathi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />
            </Field.Root>
          </Stack>
        </DialogBody>
-        <DialogFooter mt={5}>
+        <DialogFooter mt={2}>
          <DialogActionTrigger asChild>
-            <Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"}>
+            <Button w="100%" bg="#02A0A0" color={"#fff"}>
              Save
            </Button>
          </DialogActionTrigger>
--- a/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
@@ -1,5 +1,5 @@
 import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { Field, Input, Stack } from "@chakra-ui/react";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
 import {
  DialogActionTrigger,
  DialogBody,
@@ -13,100 +13,74 @@ import {
 } from "../../../components/ui/dialog";
 import { BiEdit } from "react-icons/bi";
 import { Button } from "../../../components/ui/button";
+import { TbEdit } from "react-icons/tb";
+import Edit from "../../../components/ActionIcons/Edit";

 function EditRegisterUsers() {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
-        <BiEdit style={{ cursor: "pointer", fontSize: "16px" }} />
+            <Edit/>
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
-        w={{ base: "90%", md: "400px" }}
-        maxW="90vw"
-        h="auto"
-        p={4}
+        w={{ base: '90%', md: '400px' }}
+        height={'80vh'}
+        overflow={'scroll'}
+        overflowX="hidden" 
+        p={3} // Reduced padding
+        bgSize={'md'}
      >
        <DialogHeader bg="white" p={0}>
-          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            Edit user Accounts
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
-          <Stack pt={3} pb={3}>
+          <Stack py={3}>
            <Field.Root>
-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                First Name
              </Field.Label>
              <Input
-                name="Priyanka"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                Last Name
              </Field.Label>
              <Input
-                name="Joshi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                Gender
              </Field.Label>
              <Input
-                name="Female"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                DOB
              </Field.Label>
              <Input
-                name="11/02/1989"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                OTP Verified
              </Field.Label>
              <Input
-                name="Yes"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                Language
              </Field.Label>
              <Input
-                name="English, Hindi, Marathi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
              />
            </Field.Root>
          </Stack>
--- a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
@@ -1,18 +1,15 @@
 import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame";
 import AlertDailog from "../../../components/AlertDailog";
-import { NavLink } from "react-router-dom";
 import { RiDeleteBin5Line } from "react-icons/ri";
 import DataTable from "../../../components/DataTable";
 import { Switch } from "../../../components/ui/switch";
 import { InputGroup } from "../../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
-import { BiEdit } from "react-icons/bi";
 import ViewRegisterUsers from "./ViewRegisterUsers";
 import EditRegisterUsers from "./EditRegisterUsers";
-import { Button } from "../../../components/ui/button";
-import { IoMdAdd } from "react-icons/io";
 import AddRegisterUsers from "./AddRegisterUsers";
+import Delete from "../../../components/ActionIcons/Delete";

 const tableHeadRow = [
  "Sr. No",
@@ -37,16 +34,16 @@ const registerUser: any[] = [
    "Language": "Mumbai",
    "Activate/Deactivate": (
      <Box>
-        <Switch colorPalette={'teal'} />
+        <Switch size={'sm'} colorPalette={'teal'} />
      </Box>
    ),
    "Action": (
-      <HStack justifyContent="center">  
+      <HStack justifyContent="center">
        <ViewRegisterUsers />
        <EditRegisterUsers />
        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} // Pass as function
          alertText="Delete Users"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="Are You Sure You Want To Delete This User ?"
@@ -74,7 +71,7 @@ const RegisterUsers = () => {
            Register Users
          </Text>

-          <HStack>
+          <HStack> 
            <InputGroup
              startElement={
                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
@@ -88,8 +85,8 @@ const RegisterUsers = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
                ps={8}
--- a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
@@ -1,5 +1,5 @@
 import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { Field, Input, Stack } from "@chakra-ui/react";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
 import {
  DialogBody,
  DialogCloseTrigger,
@@ -9,109 +9,103 @@ import {
  DialogTitle,
  DialogTrigger,
 } from "../../../components/ui/dialog";
+import View from "../../../components/ActionIcons/View";

 function ViewRegisterUsers() {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
-        <MdOutlineRemoveRedEye
-          color="#000"
-          style={{ cursor: "pointer", fontSize: "16px" }}
-        />
+        <View />
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
        w={{ base: "90%", md: "400px" }}
-        maxW="90vw"
-        h="auto"
-        p={4}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
      >
-        <DialogHeader bg="white" p={0}>
-          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            View Details
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
-          <Stack pt={3} pb={3}>
+          <Stack py={3}>
            <Field.Root>
-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                First Name
              </Field.Label>
              <Input
-                value="Priyanka"
                bgColor="#EEEEEE"
                color="black"
                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                pl={1}
+                fontSize="12px"
+                height="30px"
              />

-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                Last Name
              </Field.Label>
              <Input
-                value="Joshi"
                bgColor="#EEEEEE"
                color="black"
                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                pl={1}
+                fontSize="12px"
+                height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                Gender
              </Field.Label>
              <Input
-                value="Female"
                bgColor="#EEEEEE"
                color="black"
                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                pl={1}
+                fontSize="12px"
+                height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                DOB
              </Field.Label>
              <Input
-                value="11/02/1989"
                bgColor="#EEEEEE"
                color="black"
                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                pl={1}
+                fontSize="12px"
+                height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                OTP Verified
              </Field.Label>
              <Input
-                value="Yes"
                bgColor="#EEEEEE"
                color="black"
                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                pl={1}
+                fontSize="12px"
+                height="30px"
              />

-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                Language
              </Field.Label>
              <Input
-                value="English, Hindi, Marathi"
                bgColor="#EEEEEE"
                color="black"
                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                pl={1}
+                fontSize="12px"
+                height="30px"
              />
            </Field.Root>
          </Stack>
--- a/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
@@ -1,12 +1,99 @@
+import { Box, HStack, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import EditAgencyMaster from "./EditAgencyMaster";
+import ViewAgencyAddModel from "./ViewAgencyAddModel";
+import ViewAgencyMaster from "./ViewAgencyMaster";


+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Agency Name",
+  "RC no.",
+  "State",
+  "RC Status",
+  "Registered Office Address",
+  "Website/Domain",
+  "GST no.",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Agency Name": "Lorem Ipsum",
+    "RC no.": "Lorem Ipsum",
+    "State": "Lorem Ipsum",
+    "RC Status": "Active",
+    "Registered Office Address": "Lorem Ipsum",
+    "Website/Domain": "Lorem Ipsum",
+    "GST no.": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <ViewAgencyMaster/>
+        <EditAgencyMaster />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
 const AgencyMaster = () => {
-    return (
-      
-      <MainFrame>
-         AgencyMaster
-      </MainFrame>
-    )
-  }
-  export default AgencyMaster
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Agency Master
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <ViewAgencyAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default AgencyMaster
--- a/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
@@ -0,0 +1,152 @@
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
+
+function EditAgencyMaster() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Agency name
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                RC No.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                State
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Registered Office Address
+              </Field.Label>
+              <Input
+                value="Active"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Website/Domain
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                GST no.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Action
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default EditAgencyMaster;
--- a/src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx
@@ -0,0 +1,76 @@
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Field, Input, Stack, Text } from "@chakra-ui/react"
+import { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+
+function ViewAgencyAddModel() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                {/* <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                </Button> */}
+                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
+                    <IoMdAdd   /> <Text >Add</Text>
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                 bg={"#fff"}
+                 // w={{ lg: "60%", md: "230px" }}
+                 w={{ base: '90%', md: '400px' }}
+                  height={'80vh'}
+                 overflow={'scroll'}
+                 overflowX="hidden" 
+                 p={3} // Reduced padding
+                 bgSize={'md'}
+            >
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Agency Name</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            
+                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            
+                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+
+                        </Field.Root>
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default ViewAgencyAddModel
--- a/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
@@ -0,0 +1,153 @@
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Button } from "../../../components/ui/button";
+import View from "../../../components/ActionIcons/View";
+
+function ViewAgencyMaster() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Agency name
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                RC No.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                State
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Registered Office Address
+              </Field.Label>
+              <Input
+                value="Active"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Website/Domain
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                GST no.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Action
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default ViewAgencyMaster;
--- a/src/Pages/MasterModule/Country/Country.tsx
+++ b/src/Pages/MasterModule/Country/Country.tsx
@@ -1,12 +1,86 @@
+import { Box, HStack, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import CountryAddModel from "./CountryAddModel";
+import EditCountryModel from "./EditCountryModel";


+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <EditCountryModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
 const Country = () => {
-    return (
-      
-      <MainFrame>
-         Country
-      </MainFrame>
-    )
-  }
-  export default Country
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Country
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <CountryAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default Country
--- a/src/Pages/MasterModule/Country/CountryAddModel.tsx
+++ b/src/Pages/MasterModule/Country/CountryAddModel.tsx
@@ -1,9 +1,10 @@
-import { FaRegEdit } from "react-icons/fa"
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"

-function AboutUsAddModel() {
+function CountryAddModel() {
+   
    return (

        <DialogRoot placement="center">
@@ -11,31 +12,37 @@ function AboutUsAddModel() {
                {/* <Button bg={"transparent"} size="sm">
                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}> <FaRegEdit color="#000" style={{height:'14px', width:'14px'}}/> <Text color={"#000"} mt={1}>Edit</Text></Button>
+                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
+                    <IoMdAdd /> <Text>Add</Text>
+                </Button>

            </DialogTrigger>

            <DialogContent
-                bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                 bg={"#fff"}
+                 // w={{ lg: "60%", md: "230px" }}
+                 w={{ base: '90%', md: '400px' }}
+                height={'auto'}
+                 
+                 overflowX="hidden" 
+                 p={3} // Reduced padding
+                 bgSize={'md'}
            >
-                <DialogHeader bg="white" py={3} >
-                    <DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
-                    <Stack  >
+                    <Stack py={3}>

                        <Field.Root>
-                            <Field.Label color="black" pt={2}>AboutUs</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
+                            <Field.Label color="black" pt={1} fontSize="12px">Country</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root>
                    </Stack>
+
                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
@@ -48,4 +55,4 @@ function AboutUsAddModel() {
    )
 }

-export default AboutUsAddModel
+export default CountryAddModel
--- a/src/Pages/MasterModule/Country/EditCountryModel.tsx
+++ b/src/Pages/MasterModule/Country/EditCountryModel.tsx
@@ -0,0 +1,67 @@
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import Edit from "../../../components/ActionIcons/Edit";
+
+function EditCountryModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Country
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default EditCountryModel;
--- a/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
+++ b/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
@@ -0,0 +1,56 @@
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import Edit from "../../../components/ActionIcons/Edit";
+
+
+function EditJobStatusModel() {
+
+
+   
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+               <Edit />
+            </DialogTrigger>
+
+            <DialogContent
+                 bg={"#fff"}
+                 // w={{ lg: "60%", md: "230px" }}
+                 w={{ base: '90%', md: '400px' }}
+                height={'auto'}
+                 
+                 overflowX="hidden" 
+                 p={3} // Reduced padding
+                 bgSize={'md'}
+            >
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
+                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                        </Field.Root>
+                    </Stack>
+
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EditJobStatusModel
--- a/src/Pages/MasterModule/JobStatus/JobStatus.tsx
+++ b/src/Pages/MasterModule/JobStatus/JobStatus.tsx
@@ -1,12 +1,86 @@
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import JobStatusAddModel from "./JobStatusAddModel";
+import EditJobStatusModel from "./EditJobStatusModel";


+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <EditJobStatusModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
 const JobStatus = () => {
-    return (
-      
-      <MainFrame>
-         JobStatus
-      </MainFrame>
-    )
-  }
-  export default JobStatus
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Job Status
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <JobStatusAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default JobStatus
--- a/src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx
+++ b/src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx
@@ -1,9 +1,10 @@
-import { FaRegEdit } from "react-icons/fa"
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"

-function PrivacyPolicyAddModel() {
+function JobStatusAddModel() {
+   
    return (

        <DialogRoot placement="center">
@@ -11,31 +12,37 @@ function PrivacyPolicyAddModel() {
                {/* <Button bg={"transparent"} size="sm">
                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}> <FaRegEdit color="#000" style={{height:'14px', width:'14px'}}/> <Text color={"#000"} mt={1}>Edit</Text></Button>
+                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
+                    <IoMdAdd /> <Text>Add</Text>
+                </Button>

            </DialogTrigger>

            <DialogContent
-                bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                 bg={"#fff"}
+                 // w={{ lg: "60%", md: "230px" }}
+                 w={{ base: '90%', md: '400px' }}
+                height={'auto'}
+                 
+                 overflowX="hidden" 
+                 p={3} // Reduced padding
+                 bgSize={'md'}
            >
-                <DialogHeader bg="white" py={3} >
-                    <DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
-                    <Stack  >
+                    <Stack py={3}>

                        <Field.Root>
-                            <Field.Label color="black" pt={2}>PrivacyPolicy</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
+                            <Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root>
                    </Stack>
+
                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
@@ -48,4 +55,4 @@ function PrivacyPolicyAddModel() {
    )
 }

-export default PrivacyPolicyAddModel
+export default JobStatusAddModel
--- a/src/Pages/MasterModule/JobType/EditJobModel.tsx
+++ b/src/Pages/MasterModule/JobType/EditJobModel.tsx
@@ -0,0 +1,67 @@
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import Edit from "../../../components/ActionIcons/Edit";
+
+function EditJobeModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job Type
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default EditJobeModel;
--- a/src/Pages/MasterModule/JobType/JobAddModel.tsx
+++ b/src/Pages/MasterModule/JobType/JobAddModel.tsx
@@ -1,9 +1,10 @@
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
 import { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"

-function FaqAddModel() {
+function JobAddModel() {
+   
    return (

        <DialogRoot placement="center">
@@ -11,35 +12,37 @@ function FaqAddModel() {
                {/* <Button bg={"transparent"} size="sm">
                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd color="#000"  /> <Text color={"#00000099"}>Add</Text></Button>
+                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
+                    <IoMdAdd /> <Text>Add</Text>
+                </Button>

            </DialogTrigger>

            <DialogContent
-                bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                 bg={"#fff"}
+                 // w={{ lg: "60%", md: "230px" }}
+                 w={{ base: '90%', md: '400px' }}
+                height={'auto'}
+                 
+                 overflowX="hidden" 
+                 p={3} // Reduced padding
+                 bgSize={'md'}
            >
-                <DialogHeader bg="white" py={3}>
-                    <DialogTitle alignSelf="center" color="black">Add</DialogTitle>
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
-                    <Stack  >
+                    <Stack py={3}>

                        <Field.Root>
-                            <Field.Label color="black" pt={2}>Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={2} />
-
-                            <Field.Label color="black" pt={2}>Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2} />
-
+                            <Field.Label color="black" pt={1} fontSize="12px">Job Type</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root>
                    </Stack>
+
                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
@@ -52,4 +55,4 @@ function FaqAddModel() {
    )
 }

-export default FaqAddModel
+export default JobAddModel
--- a/src/Pages/MasterModule/JobType/JobType.tsx
+++ b/src/Pages/MasterModule/JobType/JobType.tsx
@@ -1,12 +1,86 @@
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import JobAddModel from "./JobAddModel";
+import EditJobeModel from "./EditJobModel";


+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <EditJobeModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
 const JobType = () => {
-    return (
-      
-      <MainFrame>
-         JobType
-      </MainFrame>
-    )
-  }
-  export default JobType
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Job Type
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <JobAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default JobType
--- a/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
+++ b/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
@@ -0,0 +1,143 @@
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import {
+  Box,
+  Field,
+  IconButton,
+  Input,
+  Stack,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import { FiUpload } from "react-icons/fi";
+import { useState } from "react";
+import { FaRegEdit } from "react-icons/fa";
+import Edit from "../../../components/ActionIcons/Edit";
+
+function EditTemplateModel() {
+  const [images, setImages] = useState<string[]>([]);
+
+  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const selectedFiles = Array.from(event.target.files);
+
+      const newImages = selectedFiles.map((file) => {
+        return URL.createObjectURL(file); // Convert to preview URL
+      });
+
+      setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
+    }
+  };
+
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Template Name
+              </Field.Label>
+              <Input
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Images
+              </Field.Label>
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+                px={3}
+                bgColor="#EEEEEE"
+                border="none"
+                width="100%"
+                height="50px"
+                cursor="pointer"
+                position="relative"
+              >
+                <Input
+                  type="file"
+                  accept="image/*"
+                  opacity={0}
+                  position="absolute"
+                  bgColor="#EEEEEE"
+                  border="none"
+                  pl={1}
+                  width="100%"
+                  height="100%"
+                  cursor="pointer"
+                  onChange={handleImageChange}
+                />
+                <Box display="flex" gap={2} overflow="hidden">
+                  {images.length > 0 ? (
+                    images.map((img, index) => (
+                      <img
+                        key={index}
+                        src={img}
+                        alt={`Uploaded ${index}`}
+                        style={{
+                          maxHeight: "40px",
+                          maxWidth: "70px",
+                          objectFit: "contain",
+                        }}
+                      />
+                    ))
+                  ) : (
+                    <Box width="70px" height="40px" /> // Placeholder to maintain layout
+                  )}
+                </Box>
+                <FiUpload color="#000" />
+              </Box>
+
+              {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default EditTemplateModel;
--- a/src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx
+++ b/src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx
@@ -0,0 +1,100 @@
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+import { FiUpload } from "react-icons/fi";
+import { useState } from "react";
+
+
+function TemplateAddModel() {
+
+    const [images, setImages] = useState<string[]>([]);
+
+    const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (event.target.files) {
+        const selectedFiles = Array.from(event.target.files);
+  
+        const newImages = selectedFiles.map((file) => {
+          return URL.createObjectURL(file); // Convert to preview URL
+        });
+  
+        setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
+      }
+    };
+
+   
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                {/* <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                </Button> */}
+                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
+                    <IoMdAdd /> <Text>Add</Text>
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                 bg={"#fff"}
+                 // w={{ lg: "60%", md: "230px" }}
+                 w={{ base: '90%', md: '400px' }}
+                height={'auto'}
+                 
+                 overflowX="hidden" 
+                 p={3} // Reduced padding
+                 bgSize={'md'}
+            >
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Template Name</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            
+                            <Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
+                            <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%"  height="50px" cursor="pointer"  position="relative">
+                            <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%"  cursor="pointer" onChange={handleImageChange}/>
+                            <Box display="flex" gap={2} overflow="hidden">
+                                {images.length > 0 ? (
+                                images.map((img, index) => (
+                                    <img
+                                    key={index}
+                                    src={img}
+                                    alt={`Uploaded ${index}`}
+                                    style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
+                                    />
+                                ))
+                                ) : (
+                                <Box width="70px" height="40px" /> // Placeholder to maintain layout
+                                )}
+                            </Box>
+                              <FiUpload color="#000" />
+                            </Box>
+                           
+                            {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
+
+                        </Field.Root>
+                    </Stack>
+
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default TemplateAddModel
--- a/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx
+++ b/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx
@@ -1,12 +1,99 @@
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import img from "../../../assets/waterfall.jpg"
+import Templateimg from "../../../assets/Template_img.png"
+import TemplateAddModel from "./TemplateAddModel";
+import EditTemplateModel from "./EditTemplateModel";


+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Images",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Images": (
+      // <Image w={50} src={img} />
+      <HStack >
+      <Image rounded={'lg'} w={100} h={50} src={img} />
+      <Image rounded={'lg'} w={100} h={50} src={Templateimg} />
+      </HStack>
+
+
+    ),
+    
+    "Action": (
+      <HStack justifyContent="center">
+        <EditTemplateModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
 const TemplateMaster = () => {
-    return (
-      
-      <MainFrame>
-         TemplateMaster
-      </MainFrame>
-    )
-  }
-  export default TemplateMaster
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Template Master
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <TemplateAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default TemplateMaster
--- a/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx
+++ b/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx
@@ -0,0 +1,76 @@
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import {
+  Box,
+  Field,
+  IconButton,
+  Input,
+  Stack,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import { FaRegEdit } from "react-icons/fa";
+import Edit from "../../../components/ActionIcons/Edit";
+
+function EditWorkModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace Mode
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default EditWorkModel;
--- a/src/Pages/MasterModule/WorkspaceMode/WorkAddModel.tsx
+++ b/src/Pages/MasterModule/WorkspaceMode/WorkAddModel.tsx
@@ -1,9 +1,10 @@
-import { FaRegEdit } from "react-icons/fa"
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"

-function TermsAndConditionsAddModel() {
+function WorkAddModel() {
+   
    return (

        <DialogRoot placement="center">
@@ -11,31 +12,37 @@ function TermsAndConditionsAddModel() {
                {/* <Button bg={"transparent"} size="sm">
                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}> <FaRegEdit color="#000" style={{height:'14px', width:'14px'}}/> <Text color={"#000"} mt={1}>Edit</Text></Button>
+                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
+                    <IoMdAdd /> <Text>Add</Text>
+                </Button>

            </DialogTrigger>

            <DialogContent
-                bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                 bg={"#fff"}
+                 // w={{ lg: "60%", md: "230px" }}
+                 w={{ base: '90%', md: '400px' }}
+                height={'auto'}
+                 
+                 overflowX="hidden" 
+                 p={3} // Reduced padding
+                 bgSize={'md'}
            >
-                <DialogHeader bg="white" py={3} >
-                    <DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
-                    <Stack  >
+                    <Stack py={3}>

                        <Field.Root>
-                            <Field.Label color="black" pt={2}>TermsAndConditions</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
+                            <Field.Label color="black" pt={1} fontSize="12px">Workspace Mode</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root>
                    </Stack>
+
                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
@@ -48,4 +55,4 @@ function TermsAndConditionsAddModel() {
    )
 }

-export default TermsAndConditionsAddModel
+export default WorkAddModel
--- a/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx
+++ b/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx
@@ -1,12 +1,86 @@
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import WorkAddModel from "./WorkAddModel";
+import EditWorkModel from "./EditWorkModel";


+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <EditWorkModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
 const WorkspaceMode = () => {
-    return (
-      
-      <MainFrame >
-         WorkspaceMode
-      </MainFrame>
-    )
-  }
-  export default WorkspaceMode
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Workspace Mode
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <WorkAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default WorkspaceMode
--- a/src/Pages/MyProfile/MyProfile.tsx
+++ b/src/Pages/MyProfile/MyProfile.tsx
@@ -2,9 +2,9 @@ import MainFrame from "../../components/MainFrame"

 const MyProfile = () => {
  return (
-    
+
    <MainFrame >
-        MyProfile
+      MyProfile
    </MainFrame>
  )
 }
--- a/src/Pages/Profile/ChangePassword.tsx
+++ b/src/Pages/Profile/ChangePassword.tsx
@@ -0,0 +1,58 @@
+
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { FaRegEdit } from "react-icons/fa";
+import { Button } from "../../components/ui/button";
+import EnterPassword from "./EnterPassword";
+function Changepassword() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+                    Change Password
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3} pb={2} >
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>CHANGE PASSWORD</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={5}>
+                    <Stack p={2} >
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterPassword />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default Changepassword
--- a/src/Pages/Profile/EnterOTP.tsx
+++ b/src/Pages/Profile/EnterOTP.tsx
@@ -0,0 +1,109 @@
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Box, Input, Stack, Text } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import { useState } from "react";
+import { BiSolidEdit } from "react-icons/bi";
+
+function EnterOTP() {
+    const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
+
+    // Handle change for OTP inputs
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
+        const value = e.target.value;
+
+        // Prevent non-numeric input
+        if (/[^0-9]/.test(value)) return;
+
+        // Update the OTP state with the new value
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+
+        // Move focus to the next input automatically
+        if (value && index < otp.length - 1) {
+            const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
+            if (nextInput) nextInput.focus();
+        }
+    };
+
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    Save
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3}>
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={2}>
+                    <Text color={"black"} textAlign={"center"}>OTP has been send to your E-mail Address</Text>
+                    <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
+                        <BiSolidEdit color="black" />
+                        <Text color="black" textAlign="center" ml={2}>9619565889</Text>
+                    </Box>
+
+
+                    <Stack direction="row" justify="center" pt={2}>
+
+                        {/* 4 OTP Inputs */}
+                        {otp.map((digit, index) => (
+                            <Input
+                                key={index}
+                                id={`otp-input-${index}`}
+                                value={digit}
+                                maxW="50px"
+                                color={"black"}
+                                textAlign="center"
+                                fontSize="20px"
+                                placeholder="0"
+                                border="1px solid grey"
+                                onChange={(e) => handleChange(e, index)}
+                                maxLength={1} // Only allows 1 character per input
+                            />
+                        ))}
+                    </Stack>
+                    <Box textAlign="center">
+                        <Text
+                            color="#4746F4"
+                            textDecoration="underline"
+                            fontWeight="bold"
+                            mt={3}
+                            cursor="pointer"
+                            display="inline-block"
+                            px={2} // Adds padding for better appearance
+                        >
+                            Resend OTP
+                        </Text>
+                    </Box>
+
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterOTP
--- a/src/Pages/Profile/EnterPassword.tsx
+++ b/src/Pages/Profile/EnterPassword.tsx
@@ -0,0 +1,55 @@
+
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Input, Stack } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import EnterOTP from "./EnterOTP";
+function EnterPassword() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    Save
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3} pb={2} >
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={5}>
+                    <Stack p={2} >
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterOTP />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterPassword
--- a/src/Pages/Profile/Profile.tsx
+++ b/src/Pages/Profile/Profile.tsx
@@ -1,10 +1,58 @@
-import MainFrame from "../../components/MainFrame"
+import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react";
+import { FaCamera } from "react-icons/fa";
+import MainFrame from "../../components/MainFrame";
+import Changepassword from "./ChangePassword";

 const Profile = () => {
  return (
    <MainFrame >
-      Profile
-    </MainFrame>
+      <Stack p={5}>
+        <Box position="relative" width="fit-content"
+          display="inline-block"
+          cursor="pointer" onClick={() => alert("Avatar clicked!")}>
+          <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
+            <Avatar.Fallback />
+            <Avatar.Image src="https://bit.ly/sage-adebayo" />
+          </Avatar.Root>
+          <Box
+            position="absolute"
+            bottom="-2px"
+            left={"39px"}
+            p="2px"
+          >
+            <FaCamera color="black" size={16} />
+          </Box>
+        </Box>
+        <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
+        <Text color="black" fontSize="12px">
+          Employee ID: <span>#1245679</span>
+        </Text>
+        <Box w={"70%"} mt={5}>
+          <SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
+              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
+              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
+          </SimpleGrid>
+          <Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
+          {/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+            Change Password
+          </Button> */}
+          <Changepassword />
+
+        </Box>
+
+      </Stack>
+
+    </MainFrame >
  )
 }

--- a/src/Pages/SubAdmin/AddModel.tsx
+++ b/src/Pages/SubAdmin/AddModel.tsx
@@ -12,7 +12,7 @@ function AddModel() {
                {/* <Button bg={"transparent"} size="sm">
                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button>
+                <Button rounded={'md'} px={4} py={2} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> Add</Button>

            </DialogTrigger>

@@ -20,19 +20,19 @@ function AddModel() {
                bg={"#fff"}
                // w={{ lg: "60%", md: "230px" }}
                w={{ base: '90%', md: '400px' }}
-
                height={'80vh'}
                overflow={'scroll'}
-                p={2} // Reduced padding
+                overflowX="hidden" 
+                p={3} // Reduced padding
                bgSize={'md'}
            >
-                <DialogHeader bg="white" pt={1} pb={2}>
+                <DialogHeader bg="white"  >
                    <DialogTitle alignSelf="center" color="black" fontSize="14px"
                    >Add Sub Admin Account</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
-                    <Stack p={2} >
+                    <Stack py={3} >

                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
@@ -64,8 +64,8 @@ function AddModel() {
                        </Grid>
                    </Stack>
                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                    <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button>
                </DialogFooter>
--- a/src/Pages/SubAdmin/SubAdmin.tsx
+++ b/src/Pages/SubAdmin/SubAdmin.tsx
@@ -8,6 +8,7 @@ import { RiDeleteBin5Line } from "react-icons/ri";
 import AddModel from "./AddModel"
 import EditSubAdmin from "../../components/EditSubAdmin"
 import ViewSubAdmin from "./ViewSubAdmin"
+import Delete from "../../components/ActionIcons/Delete"


 // table data
@@ -33,16 +34,11 @@ const managepost: any[] = [
    "Action": (
      <HStack justifyContent="center">

-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
-        {/* <ViewDailog /> */}
        <ViewSubAdmin />
        <EditSubAdmin />

-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
          alertText="Delete Users"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
@@ -70,8 +66,8 @@ const SubAdmin = () => {
            {/* Manage Post */}
          </Text>

-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack>
+            <InputGroup 
              startElement={
                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
              }
@@ -81,11 +77,11 @@ const SubAdmin = () => {
                p={3}
                w={300}
                bg={"#fff"}
-                colorPalette={"blue"}
+                colorPalette={"cyan"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
                ps={8}
--- a/src/Pages/SubAdmin/ViewSubAdmin.tsx
+++ b/src/Pages/SubAdmin/ViewSubAdmin.tsx
@@ -1,84 +1,183 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import {
+  Field,
+  Grid,
+  Heading,
+  Icon,
+  Input,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { Checkbox } from "../../components/ui/checkbox";
 import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { FaRegEdit } from "react-icons/fa";
+import View from "../../components/ActionIcons/View";
 function ViewSubAdmin() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>

-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} />
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            View Sub Admin Account
+          </DialogTitle>
+        </DialogHeader>

-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Last Name
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

+              <Field.Label color="black" pt={1} fontSize="12px">
+                ID
+              </Field.Label>
+              <Input
+                value="ID"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

+              <Field.Label color="black" pt={1} fontSize="12px">
+                DOB
+              </Field.Label>
+              <Input
+                value="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

-                height={'80vh'}
-                overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" pt={1} pb={2}>
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View Sub Admin Account</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack p={2} >
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">ID</Field.Label>
-                            <Input value="ID" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
-                            <Input value="11/02/1989" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
-                            <Input value="Male" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly
-                            />
-                            <Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>
-                        </Field.Root>
-                        <Grid templateColumns="repeat(2, 1fr)" gap={4}>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage contact us</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>manage User</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage CMS</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage Post</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage Reports</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>My profile</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}> manage feedbacks</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}>Manage community</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}> Notification</Text></Checkbox>
-                        </Grid>
-                    </Stack>
-                </DialogBody>
-                {/* <DialogFooter display="flex" justifyContent="center">
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                value="Male"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
+              <Heading mt={5} color={"#000"} fontSize={"sm"}>
+                Permissions
+              </Heading>
+            </Field.Root>
+            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Dashboard</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage contact us</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>manage User</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage CMS</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage Post</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage Reports</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>manage Sub-Admin</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>My profile</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Jobs</Text>{" "}
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}> manage feedbacks</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage community</Text>{" "}
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}> Notification</Text>
+              </Checkbox>
+            </Grid>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
-                    </Button>
-                </DialogFooter> */}
+                    </Button> */}
+        </DialogFooter>

-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default ViewSubAdmin
+export default ViewSubAdmin;
--- a/src/Redux/Service/apiSlice.tsx
+++ b/src/Redux/Service/apiSlice.tsx
@@ -0,0 +1,75 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { BaseQueryFn, FetchArgs, FetchBaseQueryError } from "@reduxjs/toolkit/query";
+import { logout } from "./authSlice"; // Import logout action from authSlice
+import { RootState } from "../Store";
+
+const baseQuery = fetchBaseQuery({
+  baseUrl: `${import.meta.env.VITE_API_URL}`,
+  prepareHeaders: (headers, { getState }) => {
+
+    const token = (getState() as RootState).auth.token; // Get token from Redux store
+    // Encode Basic Auth Credentials
+    const username = import.meta.env.VITE_USER_NAME||''; // Replace with actual username
+    const password = import.meta.env.VITE_PASSWORD||''; // Replace with actual password
+    const basicAuth = `${username} : ${password}`; // Encode to Base64
+
+    if (token) {
+      headers.set("Authorization", `Basic ${basicAuth}`);
+      headers.set("access-token", `${token}`);
+    
+    }
+    headers.set("Content-Type", "application/json");
+    return headers;
+  },
+});
+
+
+// ✅ Handle 401 Errors (Auto Logout)
+export const baseQueryWithReauth: BaseQueryFn<
+  string | FetchArgs,
+  unknown,
+  FetchBaseQueryError
+> = async (args, api, extraOptions) => {
+  const result = await baseQuery(args, api, extraOptions);
+
+  if (result.error && result.error.status === 401) {
+    api.dispatch(logout()); // Logout user on 401 error
+  }
+
+  return result;
+};
+
+
+
+
+export const dashboard = createApi({
+  reducerPath: "api",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+
+
+
+    getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+
+    
+    // 🔹 POST: Create a new post
+    logOut: builder.mutation<void, void>({
+      query: () => ({
+        url: "/logout",
+        method: "POST",
+      }),
+    }),
+
+
+
+
+  }),
+});
+
+export const { useGetPostsQuery, useLogOutMutation } = dashboard;
+
+export type Post = {
+  id: number;
+  title: string;
+  body: string;
+};
--- a/src/Redux/Service/authSlice.tsx
+++ b/src/Redux/Service/authSlice.tsx
@@ -0,0 +1,27 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+type AuthState = {
+  token: string | null;
+};
+
+const initialState: AuthState = {
+  token: localStorage.getItem("token"), // Load token from localStorage
+}; 
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    setToken: (state, action: PayloadAction<string>) => {
+      state.token = action.payload;
+      localStorage.setItem("token", action.payload); // ✅ Store token in localStorage
+    },
+    logout: (state) => {
+      state.token = null;
+      localStorage.removeItem("token"); // ✅ Remove token from localStorage on logout
+    },
+  },
+});
+
+export const { setToken, logout } = authSlice.actions;
+export default authSlice.reducer;
--- a/src/Redux/Service/deactivated.account.service.ts
+++ b/src/Redux/Service/deactivated.account.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const deactivatedAccounts = createApi({
+    reducerPath: "deactivatedAccounts",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = deactivatedAccounts;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/faqs.service.ts
+++ b/src/Redux/Service/faqs.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const faqs = createApi({
+    reducerPath: "faqs",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = faqs;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/forget.password.service.ts
+++ b/src/Redux/Service/forget.password.service.ts
@@ -0,0 +1,36 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const forgetPassword = createApi({
+  reducerPath: "aboutUs",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+
+
+
+    // 🔹 GET: Fetch all posts
+    getAboutUs: builder.query<AboutUs[], void>({
+      query: () => "/send-otp",
+    }),
+
+  }),
+});
+
+export const { 
+  useGetAboutUsQuery,  
+} = forgetPassword;
+
+// Define Post type
+export type Post = {
+  id: number;
+  title: string;
+  body: string;
+};
+
+
+export type AboutUs = {
+  id: number;
+  language_master_xid: number;
+  content: string;
+  is_active: boolean;
+};
--- a/src/Redux/Service/manage.aboutus.service.ts
+++ b/src/Redux/Service/manage.aboutus.service.ts
@@ -0,0 +1,102 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+import { AboutUsResponse } from "../../Types/aboutUsType";
+export const aboutUs = createApi({
+  reducerPath: "aboutUs",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+
+
+
+    // 🔹 GET: Fetch all posts
+    getAboutUs: builder.query<AboutUsResponse, void>({
+      query: () => "/about-us",
+    }),
+
+
+
+
+
+    // 🔹 GET: Fetch a single post by ID
+    getPostById: builder.query<Post, number>({
+      query: (id) => `/posts/${id}`,
+    }),
+
+    // 🔹 POST: Create a new post
+    createPost: builder.mutation<Post, Partial<Post>>({
+      query: (data) => ({
+        url: "/posts",
+        method: "POST",
+        body: data,
+      }),
+    }),
+    // 🔹 PUT: Update an existing post
+    // updateAboutUs: builder.mutation<UpdateAboutUsResponse, UpdateAboutUsRequest>({
+    //   query: ({ id, updatedData }) => ({
+    //     url: `/posts/${id}`,
+    //     method: "POST",
+    //     body: updatedData,
+    //   }),
+    // }),
+       // 🔹 PUT: Update an About Us entry
+       updateAboutUs: builder.mutation({
+        query: (updatedData) => ({
+          url: "/about-us/update", // ✅ Updated URL
+          method: "POST",
+          body: updatedData,
+        }),
+      }),
+    // 🔹 DELETE: Remove a post by ID
+    deletePost: builder.mutation<{ success: boolean }, number>({
+      query: (id) => ({
+        url: `/posts/${id}`,
+        method: "DELETE",
+      }),
+    }),
+  }),
+});
+
+export const { 
+  useGetAboutUsQuery, 
+  useUpdateAboutUsMutation,
+
+
+
+
+
+
+
+
+
+
+  
+  useGetPostByIdQuery, 
+  useCreatePostMutation,  
+  useDeletePostMutation 
+} = aboutUs;
+
+// Define Post type
+export type Post = {
+  id: number;
+  title: string;
+  body: string;
+};
+
+
+export type UpdateAboutUsRequest={
+  id: number; updatedData: string,language_code:string
+}
+
+
+export type UpdateAboutUsResponse={
+  id: number; updatedData: string,language_code:string
+}
+
+
+export type AboutUs = {
+  id: number;
+  language_master_xid: number;
+  content: string;
+  is_active: boolean;
+};
+
--- a/src/Redux/Service/manage.contactus.service.ts
+++ b/src/Redux/Service/manage.contactus.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const manageContactUs = createApi({
+    reducerPath: "manageContactUs",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = manageContactUs;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/manage.groups.service.ts
+++ b/src/Redux/Service/manage.groups.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const manageGroups = createApi({
+    reducerPath: "manageGroups",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = manageGroups;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/manage.jobs.service.ts
+++ b/src/Redux/Service/manage.jobs.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const manageJobs = createApi({
+    reducerPath: "manageJobs",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = manageJobs;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/manage.posts.service.ts
+++ b/src/Redux/Service/manage.posts.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const managePosts = createApi({
+    reducerPath: "managePosts",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = managePosts;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/manage.subadmin.service.ts
+++ b/src/Redux/Service/manage.subadmin.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const manageSubAdmin = createApi({
+    reducerPath: "manageSubAdmin",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = manageSubAdmin;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/master.module.service.ts
+++ b/src/Redux/Service/master.module.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const masterModule = createApi({
+    reducerPath: "masterModule",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = masterModule;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/myprofie.service.ts
+++ b/src/Redux/Service/myprofie.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const myProfile = createApi({
+    reducerPath: "myProfile",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = myProfile;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/privacy.policy.service.ts
+++ b/src/Redux/Service/privacy.policy.service.ts
@@ -0,0 +1,16 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice"; // Ensure this is correctly configured
+import { PrivacyPolicyResponse } from "../../Types/privacyPolicyTypes";
+
+export const privacyPolicy = createApi({
+  reducerPath: "privacyPolicy",
+  baseQuery: baseQueryWithReauth, // Ensure this returns a valid `BaseQueryFn`
+  endpoints: (builder) => ({
+    getPrivacyPolicy: builder.query<PrivacyPolicyResponse, void>({ // Fix types here
+      query: () => "/privacy-policy",
+    }),
+  }),
+});
+
+// Export hook
+export const { useGetPrivacyPolicyQuery } = privacyPolicy;
--- a/src/Redux/Service/privacy.service.ts
+++ b/src/Redux/Service/privacy.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const privacy = createApi({
+    reducerPath: "privacy",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = privacy;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/register.user.service.ts
+++ b/src/Redux/Service/register.user.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const registerUser = createApi({
+    reducerPath: "registerUser",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = registerUser;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Service/terms.and.condition.service.ts
+++ b/src/Redux/Service/terms.and.condition.service.ts
@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const termsAndCondition = createApi({
+    reducerPath: "api",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = termsAndCondition;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };
--- a/src/Redux/Store.tsx
+++ b/src/Redux/Store.tsx
@@ -0,0 +1,55 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { dashboard } from "./Service/apiSlice";
+import authReducer from "./Service/authSlice";
+import { registerUser } from "./Service/register.user.service";
+import { deactivatedAccounts } from "./Service/deactivated.account.service";
+import { faqs } from "./Service/faqs.service";
+import { managePosts } from "./Service/manage.posts.service";
+import { manageSubAdmin } from "./Service/manage.subadmin.service";
+import { manageJobs } from "./Service/manage.jobs.service";
+import { manageGroups } from "./Service/manage.groups.service";
+import { manageContactUs } from "./Service/manage.contactus.service";
+import { aboutUs } from "./Service/manage.aboutus.service";
+import { privacyPolicy } from "./Service/privacy.policy.service";
+import { privacy } from "./Service/privacy.service";
+import { myProfile } from "./Service/myprofie.service";
+import { masterModule } from "./Service/master.module.service";
+
+export const store = configureStore({
+  reducer: {
+    [dashboard.reducerPath]: dashboard.reducer,
+    [registerUser.reducerPath]: registerUser.reducer,
+    [deactivatedAccounts.reducerPath]: deactivatedAccounts.reducer,
+    [faqs.reducerPath]: faqs.reducer,
+    [managePosts.reducerPath]: managePosts.reducer,
+    [manageSubAdmin.reducerPath]: manageSubAdmin.reducer,
+    [manageJobs.reducerPath]: manageJobs.reducer,
+    [manageGroups.reducerPath]: manageGroups.reducer,
+    [manageContactUs.reducerPath]: manageContactUs.reducer,
+    [aboutUs.reducerPath]: aboutUs.reducer,
+    [privacyPolicy.reducerPath]: privacyPolicy.reducer,
+    [privacy.reducerPath]: privacy.reducer,
+    [myProfile.reducerPath]: myProfile.reducer,
+    [masterModule.reducerPath]: masterModule.reducer,
+    auth: authReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(
+      dashboard.middleware, 
+      deactivatedAccounts.middleware,
+      managePosts.middleware,
+      faqs.middleware,
+      manageSubAdmin.middleware,
+      manageJobs.middleware,
+      manageGroups.middleware,
+      manageContactUs.middleware,
+      aboutUs.middleware,
+      privacyPolicy.middleware,
+      privacy.middleware,
+      myProfile.middleware,
+      masterModule.middleware,
+      ),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
--- a/src/Routes/Nav.ts
+++ b/src/Routes/Nav.ts
@@ -17,18 +17,18 @@ export const nav = [
        },
        {
          title: "Manage Users",
-          path: "",
+          initPath: "/manage-users",
          Icon: BiUserPin,
          type:'multiple',
          children: [
            {
              title: "Register Users",
-              path: "/register-users",
+              path: "/manage-users/register-users",
              Icon: GoDotFill,
            },
            {
              title: "Deactivated Accounts",
-              path: "/deactivated-accounts",
+              path: "/manage-users/deactivated-accounts",
              Icon: GoDotFill,
            },
          ],
@@ -65,33 +65,33 @@ export const nav = [
        },
        {
          title: "Manage CMS",
-          path: "",
+          initPath: "/manage-cms",
          Icon: AiOutlineFileText,
          type:'multiple',
          children: [
            {
              title: "FAQs",
-              path: "/faq",
+              path: "/manage-cms/faq",
              Icon: GoDotFill,
            },
            {
              title: "About Us",
-              path: "/about-us",
+              path: "/manage-cms/about-us",
              Icon: GoDotFill,
            },
            {
              title: "Privacy Policy",
-              path: "/privacy-policy",
+              path: "/manage-cms/privacy-policy",
              Icon: GoDotFill,
            },
            {
              title: "Terms And Conditions",
-              path: "/terms-conditions",
+              path: "/manage-cms/terms-conditions",
              Icon: GoDotFill,
            },
            {
              title: "Privacy",
-              path: "/privacy",
+              path: "/manage-cms/privacy",
              Icon: GoDotFill,
            },
          ],
@@ -104,38 +104,38 @@ export const nav = [
        },
        {
          title: "Master Module",
-          path: "",
+          initPath: "/master-module",
          Icon: BsBoxes,
          type:'multiple',
          children: [
            {
              title: "Agency Master",
-              path: "/agency-master",
+              path: "/master-module/agency-master",
              Icon: GoDotFill,
            },
            {
              title: "Template Master",
-              path: "/template-master",
+              path: "/master-module/template-master",
              Icon: GoDotFill,
            },
            {
              title: "Job Type",
-              path: "/job-type",
+              path: "/master-module/job-type",
              Icon: GoDotFill,
            },
            {
              title: "Workspace Mode",
-              path: "/workspace-mode",
+              path: "/master-module/workspace-mode",
              Icon: GoDotFill,
            },
            {
              title: "Country",
-              path: "/country",
+              path: "/master-module/country",
              Icon: GoDotFill,
            },
            {
              title: "Job Status",
-              path: "/job-status",
+              path: "/master-module/job-status",
              Icon: GoDotFill,
            },
          ],
--- a/src/Routes/Routes.ts
+++ b/src/Routes/Routes.ts
@@ -22,28 +22,45 @@ import Country from "../Pages/MasterModule/Country/Country";
 import JobStatus from "../Pages/MasterModule/JobStatus/JobStatus";
 import RegisterUsers from "../Pages/ManageUsers/RegisterUsers/RegisterUsers";
 import DeactivatedAccounts from "../Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts";
+import { Spinner } from "../components/Sipnner/Spinner";

 export const RouteLink = [
    { path: "/", Component: Dashboard },
-    { path: "/register-users", Component: RegisterUsers },
-    { path: "/deactivated-accounts", Component: DeactivatedAccounts },
+    { path: "/dashboard", Component: Dashboard },
+    { path: "/manage-users/register-users", Component: RegisterUsers },
+    { path: "/manage-users/deactivated-accounts", Component: DeactivatedAccounts },
    { path: "/manage-post", Component: ManagePost },
    { path: "/sub-admin", Component: SubAdmin},
    { path: "/manage-jobs", Component: ManageJobs},
    { path: "/manage-groups", Component: ManageGroups },
    { path: "/manage-contact", Component: ManageContact},
-    { path: "/faq", Component: FAQ},
-    { path: "/about-us", Component: AboutUs},
-    { path: "/privacy-policy", Component: PrivacyPolicy},
-    { path: "/terms-conditions", Component: TermsAndConditions},
-    { path: "/privacy", Component: Privacy},
+
+
+
+    { path: "/manage-cms/faq", Component: FAQ},
+    { path: "/manage-cms/about-us", Component: AboutUs},
+    { path: "/manage-cms/privacy-policy", Component: PrivacyPolicy},
+    { path: "/manage-cms/terms-conditions", Component: TermsAndConditions},
+    { path: "/manage-cms/privacy", Component: Spinner},
+
+
+
    { path: "/my-profile", Component: MyProfile},
    { path: "/manage-notification", Component: Notification},
+
+
+
+
+
    { path: "/profile", Component: Profile},
-    { path: "/agency-master", Component: AgencyMaster},
-    { path: "/template-master", Component: TemplateMaster},
-    { path: "/job-type", Component: JobType},
-    { path: "/workspace-mode", Component: WorkspaceMode},
-    { path: "/country", Component: Country},
-    { path: "/job-status", Component: JobStatus},
+
+
+    { path: "/master-module/agency-master", Component: AgencyMaster},
+    { path: "/master-module/template-master", Component: TemplateMaster},
+    { path: "/master-module/job-type", Component: JobType},
+    { path: "/master-module/workspace-mode", Component: WorkspaceMode},
+    { path: "/master-module/country", Component: Country},
+    { path: "/master-module/job-status", Component: JobStatus},
+    // { path: "/job-status", Component: Spinner},
+
 ]
--- a/src/Types/aboutUsType.tsx
+++ b/src/Types/aboutUsType.tsx
@@ -0,0 +1,27 @@
+// First define your interface
+// export interface AboutUsResponse {
+//     data: {
+//         content: string;
+//         // other fields...
+//     }[];
+// }
+
+
+export interface AboutUsContent {
+    id: number;
+    language_master_xid: number;
+    content: string;
+    is_active: boolean;
+    about_language: {
+        id: number;
+        language_code: string;
+        language_name: string;
+    }
+}
+
+export interface AboutUsResponse {
+    status: "success" | "error"; // Assuming it can be "success" or "error"
+    status_code: number;
+    message: string;
+    data: AboutUsContent[];
+}
--- a/src/Types/privacyPolicyTypes.tsx
+++ b/src/Types/privacyPolicyTypes.tsx
@@ -0,0 +1,18 @@
+export interface PrivacyPolicyContent {
+  id: number;
+  language_master_xid: number;
+  content: string;
+  is_active: boolean;
+  privacy_language:{
+    id:number;
+    language_code:string;
+    language_name:string;
+  }
+}
+
+export interface PrivacyPolicyResponse {
+  status: "success" | "error"; // Assuming it can be "success" or "error"
+  status_code: number;
+  message: string;
+  data: PrivacyPolicyContent[];
+}
--- a/src/assets/Template_img.png
+++ b/src/assets/Template_img.png
--- a/src/components/ActionIcons/Delete.tsx
+++ b/src/components/ActionIcons/Delete.tsx
@@ -0,0 +1,34 @@
+import { Icon, Image } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { RiDeleteBin5Line } from "react-icons/ri";
+
+const Delete = () => {
+  return (
+    <Tooltip
+      content="Delete"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#fed7d7",
+          color: "#822727",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <RiDeleteBin5Line />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default Delete;
--- a/src/components/ActionIcons/Edit.tsx
+++ b/src/components/ActionIcons/Edit.tsx
@@ -0,0 +1,33 @@
+import { Icon } from "@chakra-ui/react";
+import { TbEdit } from "react-icons/tb";
+import { Tooltip } from "../ui/tooltip";
+
+const Edit = () => {
+  return (
+    <Tooltip
+      content="Edit"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#c6f6d5",
+          color: "#22543d",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+      >
+        <TbEdit />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default Edit;
--- a/src/components/ActionIcons/View.tsx
+++ b/src/components/ActionIcons/View.tsx
@@ -0,0 +1,34 @@
+import { Icon } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+
+const View = () => {
+  return (
+    <Tooltip
+      content="View"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#ccecec",
+          color: "#055757",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <MdOutlineRemoveRedEye />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default View;
--- a/src/components/AlertDailog.tsx
+++ b/src/components/AlertDailog.tsx
@@ -25,7 +25,6 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
  onConfirm,
  alertText,
  alertCaption,
-  alertIcon,
  AltertTiggerIcon,
  button,
  iconColor,
--- a/src/components/Charts/CircularProgress.tsx
+++ b/src/components/Charts/CircularProgress.tsx
@@ -0,0 +1,51 @@
+import { Box, Text } from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+
+const CircularProgress: React.FC<{ value: number; max: number }> = ({ value, max }) => {
+  const totalDots = 60; // Total number of dots in the circle
+  const filledDots = Math.round((value / max) * totalDots); // Number of filled dots
+
+  return (
+    <Box position={'relative'}>
+      <svg width="200" height="100%" viewBox="0 0 100 100">
+        {Array.from({ length: totalDots }).map((_, i) => {
+          const angle = (i / totalDots) * 360;
+          const x = 50 + 40 * Math.cos((angle * Math.PI) / 180);
+          const y = 50 + 40 * Math.sin((angle * Math.PI) / 180);
+
+          return (
+            <circle
+              key={i}
+              cx={x}
+              cy={y}
+              r="1"
+              fill={i < filledDots ? "#2563eb" : ""} // Blue for filled, Gray for empty
+              opacity={i < filledDots ? 1 : 0.1}
+            />
+          );
+        })}
+      </svg>
+      <Text position={'absolute'} left={'42%'} top={'44%'} fontSize={'md'} fontWeight={500}>{value}</Text>
+    </Box>
+  );
+};
+
+// Usage Example with Animation
+const CircularApp: React.FC = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => (prev < 350 ? prev + 20 : 350));
+    }, 300);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Box display={'flex'} justifyContent={'center'} alignItems={'center'} h={'90%'}>
+      <CircularProgress value={progress} max={450} />
+    </Box>
+  );
+};
+
+export default CircularApp;
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -94,7 +94,7 @@ const DataTable: React.FC<TableProps> = ({
              >
                {tableHeadRow.map((heading, colIndex) => (
                  <Table.Cell
-                  // className="oxygen"
+                    // className="oxygen"
                    px={4}
                    p={2}
                    key={`${index}-${colIndex}`}
--- a/src/components/EditDetails.tsx
+++ b/src/components/EditDetails.tsx
@@ -1,54 +0,0 @@
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { FaRegEdit } from "react-icons/fa";
-function EditDetails() {
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }} color="#000" />
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
-            >
-                <DialogHeader bg="white" py={3}>
-                    <DialogTitle alignSelf="center" color="black">Edit Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack  >
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={2}>Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={2} />
-
-                            <Field.Label color="black" pt={2}>Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2} />
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default EditDetails
--- a/src/components/EditSubAdmin.tsx
+++ b/src/components/EditSubAdmin.tsx
@@ -1,77 +1,161 @@
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "./ui/checkbox"
-import { FaRegEdit } from "react-icons/fa";
+import { Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react";
+import { TbEdit } from "react-icons/tb";
+import { Button } from "./ui/button";
+import { Checkbox } from "./ui/checkbox";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import Edit from "./ActionIcons/Edit";
 function EditSubAdmin() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+          {/* <FaRegEdit style={{ cursor: "pointer" }} color="#000" /> */}

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }} />
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+          <Edit />
+        {/* <Button><FaRegEdit /></Button> */}
+      </DialogTrigger>

-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit Sub Admin Account
+          </DialogTitle>
+        </DialogHeader>

-            <DialogContent
-                bg={"#fff"}
-                w={{ lg: "60%", md: "230px" }}
-                height={'80vh'}
-                overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" pt={1} pb={2}>
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Sub Admin Account</DialogTitle>
-                </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                placeholder="Enter the First Name"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                placeholder="Enter the First Name"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Last Name
+              </Field.Label>
+              <Input
+                placeholder="Enter the Last Name"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />

-                <DialogBody bg="white">
-                    <Stack p={2} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                DOB
+              </Field.Label>
+              <Input
+                placeholder="Enter the DOB"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-                            <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
-                            <Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
-                            <Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
-                            <Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            <Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>
-
-                        </Field.Root>
-                        <Grid templateColumns="repeat(2, 1fr)" gap={4}>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage contact us</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage User</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage CMS</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Post</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Reports</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>My profile</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> manage feedbacks</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage community</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> Notification</Text></Checkbox>
-                        </Grid>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                placeholder="Enter the Gender"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+              <Heading mt={5} color={"#000"} fontSize={"sm"}>
+                Permissions
+              </Heading>
+            </Field.Root>
+            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Dashboard</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage contact us</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>manage User</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage CMS</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Post</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Reports</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>manage Sub-Admin</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>My profile</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Jobs</Text>{" "}
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}> manage feedbacks</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage community</Text>{" "}
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}> Notification</Text>
+              </Checkbox>
+            </Grid>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button size={"xs"} w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default EditSubAdmin
+export default EditSubAdmin;
--- a/src/components/MainFrame.tsx
+++ b/src/components/MainFrame.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, VStack } from "@chakra-ui/react"
+import { Box, VStack } from "@chakra-ui/react"
 import { motion } from "framer-motion"
 import React, { FC } from "react"
 import { OPACITY_ON_LOAD } from "../Layouts/animations"
@@ -9,19 +9,21 @@ const MotionVStack = motion(VStack)
 interface MainFrameProps {
  children: React.ReactNode
  title?: string
+  transperant?:boolean
 }

-const MainFrame: FC<MainFrameProps> = ({ children, title }) => {
+const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
  return (
-    <MotionVStack {...OPACITY_ON_LOAD} w="100%" h="90%" p={0}  pb={0}>
+    <MotionVStack overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
      <Box
        w="100%"
-        h="100%"
-        bg="#ffffff"
-        overflow={'scroll'}
-        // rounded="md"
-        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
-        pt={3}
+        // minH="100%"
+        bg={transperant?'transperant':"#ffffff"}
+        // overflow={'scroll'}
+        rounded="lg"
+        boxShadow={transperant?'none':'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
+        pt={transperant?0:3}
+        
      >
        {children}
      </Box>
--- a/src/components/PendingRequests.tsx
+++ b/src/components/PendingRequests.tsx
@@ -1,77 +0,0 @@
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, HStack, Input, Stack, Textarea,  } from "@chakra-ui/react"
-function PendingRequests() {
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} fontSize={"xs"} color="#000000CC" fontWeight="700" textDecoration="underline">
-                    {/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} /> */}
-                    Answer request
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
-            >
-                <DialogHeader bg="white" py={3}>
-                    <DialogTitle alignSelf="center" color="black">Pending Requests</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack  >
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={2}>Request Type</Field.Label>
-                            <Input placeholder="Message" bgColor="#EEEEEE" color="black" border="none" pl={2} />
-
-                            <Field.Label color="black" pt={2}>Solution</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" height={"80px"} color="black" border="none" pl={2}  pt={2}/>
-                        </Field.Root>
-                        
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display={{base:'block', md:'flex'}} justifyContent="center" gap={1} pt={5}>
-                     
-                    <HStack mt={2} w={"100%"}>
-                        <Button
-                            width="50%"
-                            color="black"
-                            _hover={{ bgColor: "white" }}
-                            variant="outline"
-                            borderRadius="sm"
-                            border="1px solid black"
-                            size={"xs"}
-                        >
-                            Unresolved
-                        </Button>
-                        <Button
-                            borderRadius="sm"
-                            width="50%"
-                            // bgColor="#007F33"
-                            bgColor={'#02A0A0'}
-                            color="white"
-                            // colorPalette="#007F33"
-                            size={"xs"}
-                            >
-                            Resolved{" "}
-                        </Button>
-                    </HStack>
-
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default PendingRequests
--- a/src/components/ProgressBar/ProgessBar.css
+++ b/src/components/ProgressBar/ProgessBar.css
@@ -0,0 +1,20 @@
+/* HTML: <div class="progressbar"></div> */
+.progressbar {
+    height: 4px;
+    width: 100%;
+    --c: no-repeat linear-gradient(#02A0A0 0 0);
+    background: var(--c), var(--c), #B8F8F8;
+    background-size: 60% 100%;
+    animation: l16 3s infinite;
+}
+
+@keyframes l16 {
+    0%   {background-position: -150% 0, -150% 0}
+    66%  {background-position: 250% 0, -150% 0}
+    100% {background-position: 250% 0, 250% 0}
+}
+
+.progressbarInactive{
+    height: 4px;
+    width: 100%;
+}
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import './ProgessBar.css';
+
+interface ProgressBarProps {
+  isLoading: boolean;
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({ isLoading }) => {
+  return <span className={isLoading ? "progressbar" : "progressbarInactive"} />;
+};
+
+export default ProgressBar;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
parth.ramani	9b97228ec8	worked on the about	2025-02-25 13:58:13 +05:30
parth.ramani	2cb6173b81	worked on the aboutus component edit functionlity	2025-02-14 15:00:43 +05:30
parth.ramani	097d8bad99	worked on the module of the aboutus and services	2025-02-12 19:00:47 +05:30
parth.ramani	e24d48b917	worked on aboutus	2025-02-12 16:38:28 +05:30
Siddhesh.More	cd586ddf1b	update	2025-02-12 16:27:49 +05:30
Siddhesh.More	001d346426	update	2025-02-12 15:35:38 +05:30
Siddhesh.More	2ad88f91d4	update	2025-02-12 13:51:41 +05:30
Siddhesh.More	b56710d363	Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-12 13:51:37 +05:30
Siddhesh.More	22d07519ff	update	2025-02-12 13:30:02 +05:30
YasinShaikh123	68fc0bfdf5	[ Update action iocn 😉 ]	2025-02-12 13:25:22 +05:30
parth.ramani	1b27fa32ce	worked on the aboutus	2025-02-12 13:19:36 +05:30
Siddhesh.More	9579771f98	update	2025-02-12 13:18:18 +05:30
YasinShaikh123	c7de34fda2	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-12 12:51:28 +05:30
YasinShaikh123	599f320598	[ working Icon ]	2025-02-12 12:50:47 +05:30
parth.ramani	6f25a6a234	worked privacypolicy	2025-02-12 12:47:44 +05:30
Siddhesh.More	5db4c3a236	Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-12 12:45:00 +05:30
parth.ramani	dc3c861471	worked on the aboutus	2025-02-12 12:35:49 +05:30
Siddhesh.More	066238b334	updsate	2025-02-12 12:34:31 +05:30
Siddhesh.More	0bd8cc6434	update types folder	2025-02-12 12:27:53 +05:30
parth.ramani	84a64c9ae6	worked on the aboutus	2025-02-12 12:04:00 +05:30
parth.ramani	c5c3ebfedd	worked on the aboutus	2025-02-12 12:02:54 +05:30
AnsariTufail	4ab8daaaf8	update	2025-02-12 12:01:08 +05:30
AnsariTufail	dbde49fffa	Worked on the manage cms	2025-02-12 11:58:17 +05:30
Siddhesh.More	688f674062	update	2025-02-12 11:54:21 +05:30
Siddhesh.More	b960b116dc	Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-11 20:14:39 +05:30
Siddhesh.More	795643eead	updaate	2025-02-11 20:14:29 +05:30
YasinShaikh123	59df59a9d6	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-11 19:59:54 +05:30
Siddhesh.More	895516977a	update	2025-02-11 19:59:38 +05:30
YasinShaikh123	31f1c5005e	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-11 19:54:02 +05:30
Siddhesh.More	2149144d84	[ update edit delete view icon hover ]	2025-02-11 19:52:50 +05:30
YasinShaikh123	768e0ec8ae	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-11 19:48:46 +05:30
YasinShaikh123	90792de1ac	[ forget modal ]	2025-02-11 19:48:41 +05:30
YasinShaikh123	8908bacc8a	Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-11 17:32:31 +05:30
AnsariTufail	38e5185d22	update	2025-02-11 17:23:11 +05:30
AnsariTufail	663cdfc297	update	2025-02-11 17:20:36 +05:30
YasinShaikh123	e36c343cbf	[ forget modal ]	2025-02-11 17:19:32 +05:30
parth.ramani	bc1d1923d2	get called in aboutus	2025-02-11 17:18:28 +05:30
Siddhesh.More	b9b62bb034	udpate	2025-02-11 16:10:48 +05:30
Siddhesh.More	5ae4660507	update	2025-02-11 15:32:37 +05:30
YasinShaikh123	05074b6055	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-11 14:57:27 +05:30
Siddhesh.More	22f31a76cb	updated	2025-02-11 14:56:48 +05:30
AnsariTufail	1041528f1e	update	2025-02-11 14:54:12 +05:30
AnsariTufail	6a2c3ba20d	update	2025-02-11 14:47:52 +05:30
YasinShaikh123	f898f28deb	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-11 14:47:39 +05:30
YasinShaikh123	a80163d589	'Login chnges'	2025-02-11 14:47:33 +05:30
parth.ramani	7a7aeab5b8	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into parth	2025-02-11 14:00:32 +05:30
Siddhesh.More	e9fe9410ac	updaste dashboard	2025-02-11 13:53:51 +05:30
Siddhesh.More	a9cf30252b	[ route update ]	2025-02-11 12:44:43 +05:30
parth.ramani	6c7d38779a	pushed the files which comes after the pull	2025-02-11 12:17:31 +05:30
Siddhesh.More	7dcff8798d	Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-10 20:00:13 +05:30
Siddhesh.More	0d34e1bae7	UPDAATE	2025-02-10 19:54:18 +05:30
YasinShaikh123	4fa87e01b6	[ service ]	2025-02-10 19:36:14 +05:30
YasinShaikh123	943f401e63	working..........	2025-02-10 19:35:49 +05:30
Siddhesh.More	18c9ff8b78	update	2025-02-10 19:34:29 +05:30
Siddhesh.More	3aa93b358f	update	2025-02-10 19:10:04 +05:30
YasinShaikh123	027af5f93e	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-10 12:38:55 +05:30
Siddhesh.More	9822388ca3	Merge branch 'tufail' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-10 12:30:15 +05:30
YasinShaikh123	f7e76c8fc0	[ working ... ]	2025-02-10 12:30:06 +05:30
YasinShaikh123	f0fcdc14ea	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-10 12:29:50 +05:30
Siddhesh.More	d56678786b	update api	2025-02-10 12:27:51 +05:30
AnsariTufail	0c219ba1a9	Working on that Fixed alingment	2025-02-10 12:09:15 +05:30
YasinShaikh123	9e3918b2eb	[ Insall Redux ]	2025-02-10 12:06:42 +05:30
Siddhesh.More	b9a902507e	update warnings	2025-02-10 12:06:34 +05:30
Siddhesh.More	d37c8ed196	update	2025-02-10 12:04:43 +05:30
parth.ramani	cd125a5932	worked on the datatable	2025-02-10 12:01:04 +05:30
YasinShaikh123	50078e4cd7	[ update 👍 ]	2025-02-07 19:41:47 +05:30
YasinShaikh123	4cdef1270b	Merge branch 'tufail' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-07 17:27:31 +05:30
YasinShaikh123	611d416109	Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-07 17:25:56 +05:30
YasinShaikh123	7fdcab7215	[ update ]	2025-02-07 17:24:33 +05:30
parth.ramani	c47236869f	worked on the my profile	2025-02-07 16:58:35 +05:30
AnsariTufail	315eaccf50	Working on the Master Module	2025-02-07 16:38:38 +05:30
YasinShaikh123	5029837c1b	Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-06 15:16:52 +05:30
YasinShaikh123	39b16bd6e6	Merge branch 'tufail' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-06 15:16:26 +05:30