diff --git a/.github/workflows/push-image.yaml b/.github/workflows/push-image.yaml
index 5e126f12d7..ec2e54b46c 100644
--- a/.github/workflows/push-image.yaml
+++ b/.github/workflows/push-image.yaml
@@ -38,6 +38,8 @@ env:
   GAR_REGISTRY: asia-docker.pkg.dev
   GO_VERSION: 1.21.10
   GO_BUILD_CONCURRENCY: 4 # Set the same number of apps to build.
+  NODE_VERSION: "22.1"
+
 
 jobs:
   setup:
@@ -81,6 +83,9 @@ jobs:
       - uses: actions/setup-go@v5
         with:
           go-version: ${{ env.GO_VERSION }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
       - name: Install go dependencies
         run: make vendor
       - name: Build web and go applications
diff --git a/ui/dashboard/package.json b/ui/dashboard/package.json
index e0fb581609..f42b6a11bb 100644
--- a/ui/dashboard/package.json
+++ b/ui/dashboard/package.json
@@ -21,16 +21,23 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@tailwindcss/forms": "^0.5.7",
+    "@tanstack/react-query": "^5.55.4",
+    "@tanstack/react-query-devtools": "^5.56.2",
+    "@tanstack/react-table": "^8.20.5",
     "@testing-library/jest-dom": "^6.4.8",
     "@types/js-cookie": "^3.0.6",
     "axios": "^1.7.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.6.1",
@@ -41,11 +48,13 @@
     "query-string": "^9.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.2",
     "react-i18next": "^15.0.1",
     "react-icons-material-design": "^1.0.4",
     "react-router-dom": "^6.26.0",
     "tailwind-merge": "^2.4.0",
+    "timeago.js": "^4.0.2",
     "web-vitals": "^4.2.3",
     "yup": "^1.4.0"
   },
@@ -75,6 +84,7 @@
     "lint-staged": "^15.2.8",
     "postcss": "^8.4.41",
     "prettier-plugin-tailwindcss": "^0.6.5",
+    "react-hot-toast": "^2.4.1",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.9",
     "typescript": "^5.5.3",
diff --git a/ui/dashboard/public/locales/en/common.json b/ui/dashboard/public/locales/en/common.json
index 9214d45e51..7533962469 100644
--- a/ui/dashboard/public/locales/en/common.json
+++ b/ui/dashboard/public/locales/en/common.json
@@ -1,6 +1,9 @@
 {
+  "active": "Active",
+  "archived": "Archived",
   "continue": "Continue",
   "projects": "Projects",
+  "environment": "Environment",
   "environments": "Environments",
   "organizations": "Organizations",
   "members": "Members",
@@ -13,6 +16,29 @@
   "settings": "Settings",
   "integrations": "Integrations",
   "access": "Access",
+  "documentation": "Documentation",
+  "save": "Save",
+  "cancel": "Cancel",
+  "delete": "Delete",
+  "filter": "Filter",
+  "filters": "Filters",
+  "add-filter": "Add Filter",
+  "maintainer": "Maintainer",
+  "name": "Name",
+  "email": "Email",
+  "role": "Role",
+  "users": "Users",
+  "new-project": "New Project",
+  "update-project": "Update Project",
+  "create-project": "Create Project",
+  "new-org": "New Organization",
+  "update-org": "Update Organization",
+  "create-org": "Create Organization",
+  "new-env": "New Environment",
+  "update-env": "Update Environment",
+  "create-env": "Create Environment",
+  "organization-subtitle": "You can see all your clients data",
+  "setting-subtitle": "Manage settings about the current organization",
   "navigation": {
     "my-projects": "My projects",
     "audit-logs": "Audit logs",
diff --git a/ui/dashboard/public/locales/en/form.json b/ui/dashboard/public/locales/en/form.json
new file mode 100644
index 0000000000..8bcaeeb42b
--- /dev/null
+++ b/ui/dashboard/public/locales/en/form.json
@@ -0,0 +1,26 @@
+{
+  "general-info": "General Information",
+  "placeholder-name": "Enter name",
+  "placeholder-desc": "Enter description",
+  "placeholder-code": "Enter url code",
+  "placeholder-email": "Enter email",
+  "placeholder-role": "Select role",
+  "placeholder-url": "Enter URL",
+  "placeholder-prj-id": "Enter project id",
+  "placeholder-search-type": "Search notification type",
+  "placeholder-firebase": "Enter firebase cloud messaging API key",
+  "placeholder-tags": "Select",
+  "placeholder-search-input": "Search Input",
+  "url-code": "URL Code",
+  "owner-email": "Owner's email",
+  "project-id": "Project ID",
+  "description": "Description",
+  "optional": "Optional",
+  "require-comments-flag": "Require comments for flag changes",
+  "invite-member": "Invite Member",
+  "user-details": "User Details",
+  "add-to-env": "Add to Environment",
+  "env-access": "Environment Access",
+  "env-settings": "Environment Settings",
+  "trial": "Trial"
+}
diff --git a/ui/dashboard/public/locales/en/table.json b/ui/dashboard/public/locales/en/table.json
new file mode 100644
index 0000000000..077c28bf16
--- /dev/null
+++ b/ui/dashboard/public/locales/en/table.json
@@ -0,0 +1,26 @@
+{
+  "flags": "Flags",
+  "created-at": "Created At",
+  "popover": {
+    "edit-project": "Edit Project",
+    "archive-project": "Archive Project",
+    "edit-env": "Edit Environment",
+    "archive-env": "Archive Environment",
+    "edit-org": "Edit Organization",
+    "archive-org": "Archive Organization",
+    "unarchive-org": "UnArchive Organization",
+    "edit-user": "Edit User",
+    "archive-user": "Archive User"
+  },
+  "empty": {
+    "project-title": "No registered projects",
+    "project-desc": "There are no registered projects. Add a new one to start managing.",
+    "project-org-desc": "There are no registered projects for this organization.",
+    "org-title": "No registered organizations",
+    "org-desc": "There are no registered organizations. Add a new one to start managing.",
+    "env-title": "No registered environments",
+    "env-desc": "There are no registered environments for this organization.",
+    "user-title": "No registered users",
+    "user-desc": "There are no registered users for this organization."
+  }
+}
diff --git a/ui/dashboard/public/locales/ja/common.json b/ui/dashboard/public/locales/ja/common.json
index 9214d45e51..7533962469 100644
--- a/ui/dashboard/public/locales/ja/common.json
+++ b/ui/dashboard/public/locales/ja/common.json
@@ -1,6 +1,9 @@
 {
+  "active": "Active",
+  "archived": "Archived",
   "continue": "Continue",
   "projects": "Projects",
+  "environment": "Environment",
   "environments": "Environments",
   "organizations": "Organizations",
   "members": "Members",
@@ -13,6 +16,29 @@
   "settings": "Settings",
   "integrations": "Integrations",
   "access": "Access",
+  "documentation": "Documentation",
+  "save": "Save",
+  "cancel": "Cancel",
+  "delete": "Delete",
+  "filter": "Filter",
+  "filters": "Filters",
+  "add-filter": "Add Filter",
+  "maintainer": "Maintainer",
+  "name": "Name",
+  "email": "Email",
+  "role": "Role",
+  "users": "Users",
+  "new-project": "New Project",
+  "update-project": "Update Project",
+  "create-project": "Create Project",
+  "new-org": "New Organization",
+  "update-org": "Update Organization",
+  "create-org": "Create Organization",
+  "new-env": "New Environment",
+  "update-env": "Update Environment",
+  "create-env": "Create Environment",
+  "organization-subtitle": "You can see all your clients data",
+  "setting-subtitle": "Manage settings about the current organization",
   "navigation": {
     "my-projects": "My projects",
     "audit-logs": "Audit logs",
diff --git a/ui/dashboard/public/locales/ja/form.json b/ui/dashboard/public/locales/ja/form.json
new file mode 100644
index 0000000000..8bcaeeb42b
--- /dev/null
+++ b/ui/dashboard/public/locales/ja/form.json
@@ -0,0 +1,26 @@
+{
+  "general-info": "General Information",
+  "placeholder-name": "Enter name",
+  "placeholder-desc": "Enter description",
+  "placeholder-code": "Enter url code",
+  "placeholder-email": "Enter email",
+  "placeholder-role": "Select role",
+  "placeholder-url": "Enter URL",
+  "placeholder-prj-id": "Enter project id",
+  "placeholder-search-type": "Search notification type",
+  "placeholder-firebase": "Enter firebase cloud messaging API key",
+  "placeholder-tags": "Select",
+  "placeholder-search-input": "Search Input",
+  "url-code": "URL Code",
+  "owner-email": "Owner's email",
+  "project-id": "Project ID",
+  "description": "Description",
+  "optional": "Optional",
+  "require-comments-flag": "Require comments for flag changes",
+  "invite-member": "Invite Member",
+  "user-details": "User Details",
+  "add-to-env": "Add to Environment",
+  "env-access": "Environment Access",
+  "env-settings": "Environment Settings",
+  "trial": "Trial"
+}
diff --git a/ui/dashboard/public/locales/ja/table.json b/ui/dashboard/public/locales/ja/table.json
new file mode 100644
index 0000000000..077c28bf16
--- /dev/null
+++ b/ui/dashboard/public/locales/ja/table.json
@@ -0,0 +1,26 @@
+{
+  "flags": "Flags",
+  "created-at": "Created At",
+  "popover": {
+    "edit-project": "Edit Project",
+    "archive-project": "Archive Project",
+    "edit-env": "Edit Environment",
+    "archive-env": "Archive Environment",
+    "edit-org": "Edit Organization",
+    "archive-org": "Archive Organization",
+    "unarchive-org": "UnArchive Organization",
+    "edit-user": "Edit User",
+    "archive-user": "Archive User"
+  },
+  "empty": {
+    "project-title": "No registered projects",
+    "project-desc": "There are no registered projects. Add a new one to start managing.",
+    "project-org-desc": "There are no registered projects for this organization.",
+    "org-title": "No registered organizations",
+    "org-desc": "There are no registered organizations. Add a new one to start managing.",
+    "env-title": "No registered environments",
+    "env-desc": "There are no registered environments for this organization.",
+    "user-title": "No registered users",
+    "user-desc": "There are no registered users for this organization."
+  }
+}
diff --git a/ui/dashboard/src/@api/account/accounts-fetcher.ts b/ui/dashboard/src/@api/account/accounts-fetcher.ts
new file mode 100644
index 0000000000..c71d59009a
--- /dev/null
+++ b/ui/dashboard/src/@api/account/accounts-fetcher.ts
@@ -0,0 +1,22 @@
+import axiosClient from '@api/axios-client';
+import pickBy from 'lodash/pickBy';
+import { AccountCollection, CollectionParams } from '@types';
+import { isNotEmpty } from 'utils/data-type';
+
+export interface AccountsFetcherParams extends CollectionParams {
+  organizationId?: string;
+  organizationRole?: number;
+  environmentId?: string;
+  environmentRole?: number;
+}
+
+export const accountsFetcher = async (
+  params?: AccountsFetcherParams
+): Promise<AccountCollection> => {
+  return axiosClient
+    .post<AccountCollection>(
+      '/v1/account/list_accounts',
+      pickBy(params, v => isNotEmpty(v))
+    )
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@api/account/index.ts b/ui/dashboard/src/@api/account/index.ts
index 736785fb44..fca1f7dc00 100644
--- a/ui/dashboard/src/@api/account/index.ts
+++ b/ui/dashboard/src/@api/account/index.ts
@@ -1,2 +1,3 @@
 export * from './account-organizations-fetcher';
 export * from './account-me-fetcher';
+export * from './accounts-fetcher';
diff --git a/ui/dashboard/src/@api/axios-client.ts b/ui/dashboard/src/@api/axios-client.ts
index c2964825e9..2b790f24b3 100644
--- a/ui/dashboard/src/@api/axios-client.ts
+++ b/ui/dashboard/src/@api/axios-client.ts
@@ -42,6 +42,7 @@ axiosClient.interceptors.response.use(
           const newAccessToken = response.token.accessToken;
           setTokenStorage(response.token);
           originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+          return axiosClient(originalRequest);
         })
         .catch(err => {
           clearOrgIdStorage();
@@ -49,7 +50,6 @@ axiosClient.interceptors.response.use(
           window.location.href = PAGE_PATH_ROOT;
           return Promise.reject(err);
         });
-      return axiosClient(originalRequest);
     }
     return Promise.reject(error);
   }
diff --git a/ui/dashboard/src/@api/organization/index.ts b/ui/dashboard/src/@api/organization/index.ts
new file mode 100644
index 0000000000..d4b79893e7
--- /dev/null
+++ b/ui/dashboard/src/@api/organization/index.ts
@@ -0,0 +1,6 @@
+export * from './organizations-fetcher';
+export * from './organization-creator';
+export * from './organization-archive';
+export * from './organization-unarchive';
+export * from './organization-updater';
+export * from './organization-details-fetcher';
diff --git a/ui/dashboard/src/@api/organization/organization-archive.ts b/ui/dashboard/src/@api/organization/organization-archive.ts
new file mode 100644
index 0000000000..ec64d71ceb
--- /dev/null
+++ b/ui/dashboard/src/@api/organization/organization-archive.ts
@@ -0,0 +1,15 @@
+import axiosClient from '@api/axios-client';
+import { AnyObject } from 'yup';
+
+export interface OrganizationArchiveParams {
+  id: string;
+  command: AnyObject;
+}
+
+export const organizationArchive = async (
+  params?: OrganizationArchiveParams
+) => {
+  return axiosClient
+    .post('/v1/environment/archive_organization', params)
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@api/organization/organization-creator.ts b/ui/dashboard/src/@api/organization/organization-creator.ts
new file mode 100644
index 0000000000..2085c2f46b
--- /dev/null
+++ b/ui/dashboard/src/@api/organization/organization-creator.ts
@@ -0,0 +1,23 @@
+import axiosClient from '@api/axios-client';
+import { Organization } from '@types';
+
+export interface OrganizationCreatorCommand {
+  name: string;
+  urlCode: string;
+  description?: string;
+  isTrial?: boolean;
+  isSystemAdmin: boolean;
+  ownerEmail: string;
+}
+
+export interface OrganizationResponse {
+  organization: Array<Organization>;
+}
+
+export const organizationCreator = async (
+  params?: OrganizationCreatorCommand
+): Promise<OrganizationResponse> => {
+  return axiosClient
+    .post<OrganizationResponse>('/v1/environment/create_organization', params)
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@api/organization/organization-details-fetcher.ts b/ui/dashboard/src/@api/organization/organization-details-fetcher.ts
new file mode 100644
index 0000000000..4e3a779d45
--- /dev/null
+++ b/ui/dashboard/src/@api/organization/organization-details-fetcher.ts
@@ -0,0 +1,20 @@
+import axiosClient from '@api/axios-client';
+import { Organization } from '@types';
+
+export interface OrganizationDetailsFetcherParams {
+  id: string;
+}
+export interface OrganizationDetailsResponse {
+  organization: Organization;
+}
+
+export const organizationDetailsFetcher = async (
+  params?: OrganizationDetailsFetcherParams
+): Promise<OrganizationDetailsResponse> => {
+  return axiosClient
+    .post<OrganizationDetailsResponse>(
+      '/v1/environment/get_organization',
+      params
+    )
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@api/organization/organization-unarchive.ts b/ui/dashboard/src/@api/organization/organization-unarchive.ts
new file mode 100644
index 0000000000..6d24a04215
--- /dev/null
+++ b/ui/dashboard/src/@api/organization/organization-unarchive.ts
@@ -0,0 +1,15 @@
+import axiosClient from '@api/axios-client';
+import { AnyObject } from 'yup';
+
+export interface OrganizationUnArchiveParams {
+  id: string;
+  command: AnyObject;
+}
+
+export const organizationUnArchive = async (
+  params?: OrganizationUnArchiveParams
+) => {
+  return axiosClient
+    .post('/v1/environment/unarchive_organization', params)
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@api/organization/organization-updater.ts b/ui/dashboard/src/@api/organization/organization-updater.ts
new file mode 100644
index 0000000000..443170d545
--- /dev/null
+++ b/ui/dashboard/src/@api/organization/organization-updater.ts
@@ -0,0 +1,22 @@
+import axiosClient from '@api/axios-client';
+
+export interface OrganizationUpdateParams {
+  id: string;
+  renameCommand: {
+    name: string;
+  };
+  changeDescriptionCommand: {
+    description?: string;
+  };
+  changeOwnerEmailCommand: {
+    ownerEmail: string;
+  };
+}
+
+export const organizationUpdater = async (
+  params?: OrganizationUpdateParams
+) => {
+  return axiosClient
+    .post('/v1/environment/update_organization', params)
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@api/organization/organizations-fetcher.ts b/ui/dashboard/src/@api/organization/organizations-fetcher.ts
new file mode 100644
index 0000000000..c1312d1fe0
--- /dev/null
+++ b/ui/dashboard/src/@api/organization/organizations-fetcher.ts
@@ -0,0 +1,18 @@
+import axiosClient from '@api/axios-client';
+import pickBy from 'lodash/pickBy';
+import { CollectionParams, OrganizationCollection } from '@types';
+import { isNotEmpty } from 'utils/data-type';
+
+export interface OrganizationsFetcherParams extends CollectionParams {
+  archived?: boolean;
+}
+
+export const organizationsFetcher = async (
+  _params?: OrganizationsFetcherParams
+): Promise<OrganizationCollection> => {
+  const params = pickBy(_params, v => isNotEmpty(v));
+
+  return axiosClient
+    .post<OrganizationCollection>('/v1/environment/list_organizations', params)
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@api/project/index.ts b/ui/dashboard/src/@api/project/index.ts
new file mode 100644
index 0000000000..11f7cdb9c5
--- /dev/null
+++ b/ui/dashboard/src/@api/project/index.ts
@@ -0,0 +1,3 @@
+export * from './projects-fetcher';
+export * from './project-creator';
+export * from './project-updater';
diff --git a/ui/dashboard/src/@api/project/project-creator.ts b/ui/dashboard/src/@api/project/project-creator.ts
new file mode 100644
index 0000000000..0a69819ac2
--- /dev/null
+++ b/ui/dashboard/src/@api/project/project-creator.ts
@@ -0,0 +1,25 @@
+import axiosClient from '@api/axios-client';
+import { Project } from '@types';
+
+export interface ProjectCreatorCommand {
+  id: string;
+  name: string;
+  urlCode: string;
+  description: string;
+}
+
+export interface ProjectCreatorParams {
+  command: ProjectCreatorCommand;
+}
+
+export interface ProjectResponse {
+  project: Array<Project>;
+}
+
+export const projectCreator = async (
+  params?: ProjectCreatorParams
+): Promise<ProjectResponse> => {
+  return axiosClient
+    .post<ProjectResponse>('/v1/environment/create_project', params)
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@api/project/project-updater.ts b/ui/dashboard/src/@api/project/project-updater.ts
new file mode 100644
index 0000000000..523ef0b46f
--- /dev/null
+++ b/ui/dashboard/src/@api/project/project-updater.ts
@@ -0,0 +1,17 @@
+import axiosClient from '@api/axios-client';
+
+export interface ProjectUpdaterParams {
+  id: string;
+  changeDescriptionCommand: {
+    description: string;
+  };
+  renameCommand: {
+    name: string;
+  };
+}
+
+export const projectUpdater = async (params?: ProjectUpdaterParams) => {
+  return axiosClient
+    .post('/v1/environment/update_project', params)
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@api/project/projects-fetcher.ts b/ui/dashboard/src/@api/project/projects-fetcher.ts
new file mode 100644
index 0000000000..d1cf630134
--- /dev/null
+++ b/ui/dashboard/src/@api/project/projects-fetcher.ts
@@ -0,0 +1,20 @@
+import axiosClient from '@api/axios-client';
+import pickBy from 'lodash/pickBy';
+import { CollectionParams, ProjectCollection } from '@types';
+import { isNotEmpty } from 'utils/data-type';
+
+export interface ProjectsFetcherParams extends CollectionParams {
+  organizationIds?: string[];
+  archived?: boolean;
+}
+
+export const projectsFetcher = async (
+  params?: ProjectsFetcherParams
+): Promise<ProjectCollection> => {
+  return axiosClient
+    .post<ProjectCollection>(
+      '/v1/environment/list_projects_v2',
+      pickBy(params, v => isNotEmpty(v))
+    )
+    .then(response => response.data);
+};
diff --git a/ui/dashboard/src/@icons/customized-icons/checked.svg b/ui/dashboard/src/@icons/customized-icons/checked.svg
new file mode 100644
index 0000000000..4d25bee166
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/checked.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M1 4L4.33333 7L11 1" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/ui/dashboard/src/@icons/customized-icons/close.svg b/ui/dashboard/src/@icons/customized-icons/close.svg
new file mode 100644
index 0000000000..73a8107d1b
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/close.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 1L1 11M1 1L11 11" stroke="#64748B" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/ui/dashboard/src/@icons/customized-icons/sorting-down.svg b/ui/dashboard/src/@icons/customized-icons/sorting-down.svg
new file mode 100644
index 0000000000..21645d1b23
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/sorting-down.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9L5 13L9 9H1Z" fill="#94A3B8" stroke="#94A3B8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 5L5 1L0.999999 5L9 5Z" fill="#E2E8F0" stroke="#E2E8F0" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/ui/dashboard/src/@icons/customized-icons/sorting-up.svg b/ui/dashboard/src/@icons/customized-icons/sorting-up.svg
new file mode 100644
index 0000000000..a6f7ced435
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/sorting-up.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9L5 13L9 9H1Z" fill="#E2E8F0" stroke="#E2E8F0" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 5L5 1L0.999999 5L9 5Z" fill="#94A3B8" stroke="#94A3B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/ui/dashboard/src/@icons/customized-icons/sorting.svg b/ui/dashboard/src/@icons/customized-icons/sorting.svg
new file mode 100644
index 0000000000..e0f7b3c709
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/sorting.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9L5 13L9 9H1Z" fill="#E2E8F0" stroke="#E2E8F0" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 5L5 1L0.999999 5L9 5Z" fill="#E2E8F0" stroke="#E2E8F0" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/ui/dashboard/src/@icons/customized-icons/toast-error.svg b/ui/dashboard/src/@icons/customized-icons/toast-error.svg
new file mode 100644
index 0000000000..daf159fcd6
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/toast-error.svg
@@ -0,0 +1,5 @@
+<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#EB1726" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M12 8V12" stroke="#EB1726" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M11.9999 16H12.0099" stroke="#EB1726" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/ui/dashboard/src/@icons/customized-icons/toast-info.svg b/ui/dashboard/src/@icons/customized-icons/toast-info.svg
new file mode 100644
index 0000000000..f40ebf31d8
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/toast-info.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" fill="#399CE4" />
+	<path d="M7.3334 8H8.00006V10.6667H8.66673" fill="#399CE4" />
+	<path d="M7.3334 8H8.00006V10.6667H8.66673" fill="#399CE4" />
+	<path d="M7.3334 8H8.00006V10.6667H8.66673" fill="#399CE4" />
+	<path d="M7.3335 8.00063H8.00016V10.6673H8.66683" fill="#399CE4" />
+	<path d="M8.0001 5.33398H8.00676M7.3335 8.00063H8.00016V10.6673H8.66683" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/ui/dashboard/src/@icons/customized-icons/toast-success.svg b/ui/dashboard/src/@icons/customized-icons/toast-success.svg
new file mode 100644
index 0000000000..d35f092807
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/toast-success.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M6.99949 10.0004L8.99949 12.0004L12.9995 8.00042M2.99936 5.20046C2.99936 4.61698 3.23115 4.05741 3.64373 3.64483C4.05631 3.23225 4.61589 3.00046 5.19936 3.00046H6.19936C6.78026 3.00013 7.33745 2.77006 7.74936 2.36046L8.44936 1.66046C8.65381 1.45486 8.89688 1.2917 9.1646 1.18037C9.43233 1.06903 9.71941 1.01172 10.0094 1.01172C10.2993 1.01172 10.5864 1.06903 10.8541 1.18037C11.1218 1.2917 11.3649 1.45486 11.5694 1.66046L12.2694 2.36046C12.6814 2.77046 13.2394 3.00046 13.8194 3.00046H14.8194C15.4028 3.00046 15.9624 3.23225 16.375 3.64483C16.7876 4.05741 17.0194 4.61698 17.0194 5.20046V6.20046C17.0194 6.78046 17.2494 7.33846 17.6594 7.75046L18.3594 8.45046C18.565 8.65491 18.7281 8.89798 18.8395 9.1657C18.9508 9.43342 19.0081 9.72051 19.0081 10.0105C19.0081 10.3004 18.9508 10.5875 18.8395 10.8552C18.7281 11.1229 18.565 11.366 18.3594 11.5705L17.6594 12.2705C17.2498 12.6824 17.0197 13.2396 17.0194 13.8205V14.8205C17.0194 15.4039 16.7876 15.9635 16.375 16.3761C15.9624 16.7887 15.4028 17.0205 14.8194 17.0205H13.8194C13.2385 17.0208 12.6813 17.2509 12.2694 17.6605L11.5694 18.3605C11.3649 18.5661 11.1218 18.7292 10.8541 18.8406C10.5864 18.9519 10.2993 19.0092 10.0094 19.0092C9.71941 19.0092 9.43233 18.9519 9.1646 18.8406C8.89688 18.7292 8.65381 18.5661 8.44936 18.3605L7.74936 17.6605C7.33745 17.2509 6.78026 17.0208 6.19936 17.0205H5.19936C4.61589 17.0205 4.05631 16.7887 3.64373 16.3761C3.23115 15.9635 2.99936 15.4039 2.99936 14.8205V13.8205C2.99903 13.2396 2.76896 12.6824 2.35936 12.2705L1.65936 11.5705C1.45376 11.366 1.2906 11.1229 1.17927 10.8552C1.06794 10.5875 1.01062 10.3004 1.01062 10.0105C1.01062 9.72051 1.06794 9.43342 1.17927 9.1657C1.2906 8.89798 1.45376 8.65491 1.65936 8.45046L2.35936 7.75046C2.76896 7.33855 2.99903 6.78136 2.99936 6.20046V5.20046Z" stroke="#40BF42" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/ui/dashboard/src/@icons/customized-icons/toast-warning.svg b/ui/dashboard/src/@icons/customized-icons/toast-warning.svg
new file mode 100644
index 0000000000..5b4885e179
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/toast-warning.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M14.4864 11.9999L9.15304 2.66653C9.03675 2.46133 8.86811 2.29066 8.66433 2.17191C8.46054 2.05316 8.2289 1.9906 7.99304 1.9906C7.75718 1.9906 7.52555 2.05316 7.32176 2.17191C7.11797 2.29066 6.94933 2.46133 6.83304 2.66653L1.49971 11.9999C1.38216 12.2034 1.32053 12.4345 1.32105 12.6695C1.32157 12.9046 1.38423 13.1354 1.50267 13.3384C1.62112 13.5415 1.79114 13.7096 1.99551 13.8258C2.19987 13.9419 2.43131 14.002 2.66638 13.9999H13.333C13.567 13.9996 13.7967 13.9378 13.9992 13.8207C14.2017 13.7036 14.3699 13.5353 14.4867 13.3326C14.6036 13.13 14.6651 12.9001 14.665 12.6662C14.6649 12.4323 14.6033 12.2025 14.4864 11.9999Z" fill="#FFB802" />
+	<path d="M8 6V8.66667" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M8 11.3344H8.00667" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/ui/dashboard/src/@icons/customized-icons/trash.svg b/ui/dashboard/src/@icons/customized-icons/trash.svg
new file mode 100644
index 0000000000..627dffaa63
--- /dev/null
+++ b/ui/dashboard/src/@icons/customized-icons/trash.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M3.33398 5.83333H16.6673M8.33398 9.16667V14.1667M11.6673 9.16667V14.1667M4.16732 5.83333L5.00065 15.8333C5.00065 16.2754 5.17625 16.6993 5.48881 17.0118C5.80137 17.3244 6.22529 17.5 6.66732 17.5H13.334C13.776 17.5 14.1999 17.3244 14.5125 17.0118C14.8251 16.6993 15.0007 16.2754 15.0007 15.8333L15.834 5.83333M7.50065 5.83333V3.33333C7.50065 3.11232 7.58845 2.90036 7.74473 2.74408C7.90101 2.5878 8.11297 2.5 8.33398 2.5H11.6673C11.8883 2.5 12.1003 2.5878 12.2566 2.74408C12.4129 2.90036 12.5007 3.11232 12.5007 3.33333V5.83333" stroke="#94A3B8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/ui/dashboard/src/@icons/index.tsx b/ui/dashboard/src/@icons/index.tsx
index b20dcf97ab..6eae5d02a3 100644
--- a/ui/dashboard/src/@icons/index.tsx
+++ b/ui/dashboard/src/@icons/index.tsx
@@ -1,8 +1,18 @@
 import IconBackspace from './customized-icons/backspace.svg?react';
+import IconChecked from './customized-icons/checked.svg?react';
 import IconChevronRight from './customized-icons/chevron-right.svg?react';
+import IconClose from './customized-icons/close.svg?react';
 import IconEmail from './customized-icons/email.svg?react';
 import IconInfo from './customized-icons/info.svg?react';
 import IconSearch from './customized-icons/search.svg?react';
+import IconSortingDown from './customized-icons/sorting-down.svg?react';
+import IconSortingUp from './customized-icons/sorting-up.svg?react';
+import IconSorting from './customized-icons/sorting.svg?react';
+import IconToastError from './customized-icons/toast-error.svg?react';
+import IconToastInfo from './customized-icons/toast-info.svg?react';
+import IconToastSuccess from './customized-icons/toast-success.svg?react';
+import IconToastWarning from './customized-icons/toast-warning.svg?react';
+import IconTrash from './customized-icons/trash.svg?react';
 import IconUnion from './customized-icons/union.svg?react';
 import IconBuilding from './sidebar-icons/building.svg?react';
 import IconDebugger from './sidebar-icons/debugger.svg?react';
@@ -48,6 +58,16 @@ export {
   IconInfo,
   IconUnion,
   IconEmail,
+  IconChecked,
+  IconToastError,
+  IconToastInfo,
+  IconToastSuccess,
+  IconToastWarning,
+  IconClose,
+  IconSorting,
+  IconSortingUp,
+  IconSortingDown,
+  IconTrash,
   // Special icons
   IconGoal,
   IconGoogle,
diff --git a/ui/dashboard/src/@queries/accounts.ts b/ui/dashboard/src/@queries/accounts.ts
new file mode 100644
index 0000000000..c7a2338803
--- /dev/null
+++ b/ui/dashboard/src/@queries/accounts.ts
@@ -0,0 +1,53 @@
+import { accountsFetcher, AccountsFetcherParams } from '@api/account';
+import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { AccountCollection, QueryOptionsRespond } from '@types';
+
+type QueryOptions = QueryOptionsRespond<AccountCollection> & {
+  params?: AccountsFetcherParams;
+};
+
+export const ACCOUNTS_QUERY_KEY = 'accounts';
+
+export const useQueryAccounts = (options?: QueryOptions) => {
+  const { params, ...queryOptions } = options || {};
+  const query = useQuery({
+    queryKey: [ACCOUNTS_QUERY_KEY, params],
+    queryFn: async () => {
+      return accountsFetcher(params);
+    },
+    ...queryOptions
+  });
+  return query;
+};
+
+export const usePrefetchAccounts = (options?: QueryOptions) => {
+  const { params, ...queryOptions } = options || {};
+  const queryClient = useQueryClient();
+  queryClient.prefetchQuery({
+    queryKey: [ACCOUNTS_QUERY_KEY, params],
+    queryFn: async () => {
+      return accountsFetcher(params);
+    },
+    ...queryOptions
+  });
+};
+
+export const prefetchAccounts = (
+  queryClient: QueryClient,
+  options?: QueryOptions
+) => {
+  const { params, ...queryOptions } = options || {};
+  queryClient.prefetchQuery({
+    queryKey: [ACCOUNTS_QUERY_KEY, params],
+    queryFn: async () => {
+      return accountsFetcher(params);
+    },
+    ...queryOptions
+  });
+};
+
+export const invalidateAccounts = (queryClient: QueryClient) => {
+  queryClient.invalidateQueries({
+    queryKey: [ACCOUNTS_QUERY_KEY]
+  });
+};
diff --git a/ui/dashboard/src/@queries/organization-details.ts b/ui/dashboard/src/@queries/organization-details.ts
new file mode 100644
index 0000000000..3cdfde4a5d
--- /dev/null
+++ b/ui/dashboard/src/@queries/organization-details.ts
@@ -0,0 +1,57 @@
+import {
+  organizationDetailsFetcher,
+  OrganizationDetailsFetcherParams,
+  OrganizationDetailsResponse
+} from '@api/organization';
+import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { QueryOptionsRespond } from '@types';
+
+type QueryOptions = QueryOptionsRespond<OrganizationDetailsResponse> & {
+  params?: OrganizationDetailsFetcherParams;
+};
+
+export const ORGANIZATION_DETAILS_QUERY_KEY = 'organization-details';
+
+export const useQueryOrganizationDetails = (options?: QueryOptions) => {
+  const { params, ...queryOptions } = options || {};
+  const query = useQuery({
+    queryKey: [ORGANIZATION_DETAILS_QUERY_KEY, params],
+    queryFn: async () => {
+      return organizationDetailsFetcher(params);
+    },
+    ...queryOptions
+  });
+  return query;
+};
+
+export const usePrefetchOrganizationDetails = (options?: QueryOptions) => {
+  const { params, ...queryOptions } = options || {};
+  const queryClient = useQueryClient();
+  queryClient.prefetchQuery({
+    queryKey: [ORGANIZATION_DETAILS_QUERY_KEY, params],
+    queryFn: async () => {
+      return organizationDetailsFetcher(params);
+    },
+    ...queryOptions
+  });
+};
+
+export const prefetchOrganizationDetails = (
+  queryClient: QueryClient,
+  options?: QueryOptions
+) => {
+  const { params, ...queryOptions } = options || {};
+  queryClient.prefetchQuery({
+    queryKey: [ORGANIZATION_DETAILS_QUERY_KEY, params],
+    queryFn: async () => {
+      return organizationDetailsFetcher(params);
+    },
+    ...queryOptions
+  });
+};
+
+export const invalidateOrganizationDetails = (queryClient: QueryClient) => {
+  queryClient.invalidateQueries({
+    queryKey: [ORGANIZATION_DETAILS_QUERY_KEY]
+  });
+};
diff --git a/ui/dashboard/src/@queries/organizations.ts b/ui/dashboard/src/@queries/organizations.ts
new file mode 100644
index 0000000000..14044dabc5
--- /dev/null
+++ b/ui/dashboard/src/@queries/organizations.ts
@@ -0,0 +1,56 @@
+import {
+  organizationsFetcher,
+  OrganizationsFetcherParams
+} from '@api/organization';
+import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { OrganizationCollection, QueryOptionsRespond } from '@types';
+
+type QueryOptions = QueryOptionsRespond<OrganizationCollection> & {
+  params?: OrganizationsFetcherParams;
+};
+
+export const ORGANIZATIONS_QUERY_KEY = 'organizations';
+
+export const useQueryOrganizations = (options?: QueryOptions) => {
+  const { params, ...queryOptions } = options || {};
+  const query = useQuery({
+    queryKey: [ORGANIZATIONS_QUERY_KEY, params],
+    queryFn: async () => {
+      return organizationsFetcher(params);
+    },
+    ...queryOptions
+  });
+  return query;
+};
+
+export const usePrefetchOrganizations = (options?: QueryOptions) => {
+  const { params, ...queryOptions } = options || {};
+  const queryClient = useQueryClient();
+  queryClient.prefetchQuery({
+    queryKey: [ORGANIZATIONS_QUERY_KEY, params],
+    queryFn: async () => {
+      return organizationsFetcher(params);
+    },
+    ...queryOptions
+  });
+};
+
+export const prefetchOrganizations = (
+  queryClient: QueryClient,
+  options?: QueryOptions
+) => {
+  const { params, ...queryOptions } = options || {};
+  queryClient.prefetchQuery({
+    queryKey: [ORGANIZATIONS_QUERY_KEY, params],
+    queryFn: async () => {
+      return organizationsFetcher(params);
+    },
+    ...queryOptions
+  });
+};
+
+export const invalidateOrganizations = (queryClient: QueryClient) => {
+  queryClient.invalidateQueries({
+    queryKey: [ORGANIZATIONS_QUERY_KEY]
+  });
+};
diff --git a/ui/dashboard/src/@queries/projects.ts b/ui/dashboard/src/@queries/projects.ts
new file mode 100644
index 0000000000..1ffc95499d
--- /dev/null
+++ b/ui/dashboard/src/@queries/projects.ts
@@ -0,0 +1,53 @@
+import { projectsFetcher, ProjectsFetcherParams } from '@api/project';
+import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { ProjectCollection, QueryOptionsRespond } from '@types';
+
+type QueryOptions = QueryOptionsRespond<ProjectCollection> & {
+  params?: ProjectsFetcherParams;
+};
+
+export const PROJECTS_QUERY_KEY = 'projects';
+
+export const useQueryProjects = (options?: QueryOptions) => {
+  const { params, ...queryOptions } = options || {};
+  const query = useQuery({
+    queryKey: [PROJECTS_QUERY_KEY, params],
+    queryFn: async () => {
+      return projectsFetcher(params);
+    },
+    ...queryOptions
+  });
+  return query;
+};
+
+export const usePrefetchProjects = (options?: QueryOptions) => {
+  const { params, ...queryOptions } = options || {};
+  const queryClient = useQueryClient();
+  queryClient.prefetchQuery({
+    queryKey: [PROJECTS_QUERY_KEY, params],
+    queryFn: async () => {
+      return projectsFetcher(params);
+    },
+    ...queryOptions
+  });
+};
+
+export const prefetchProjects = (
+  queryClient: QueryClient,
+  options?: QueryOptions
+) => {
+  const { params, ...queryOptions } = options || {};
+  queryClient.prefetchQuery({
+    queryKey: [PROJECTS_QUERY_KEY, params],
+    queryFn: async () => {
+      return projectsFetcher(params);
+    },
+    ...queryOptions
+  });
+};
+
+export const invalidateProjects = (queryClient: QueryClient) => {
+  queryClient.invalidateQueries({
+    queryKey: [PROJECTS_QUERY_KEY]
+  });
+};
diff --git a/ui/dashboard/src/@types/account.ts b/ui/dashboard/src/@types/account.ts
new file mode 100644
index 0000000000..036c8071e0
--- /dev/null
+++ b/ui/dashboard/src/@types/account.ts
@@ -0,0 +1,35 @@
+import { EnvironmentRoleType } from './auth';
+import { OrganizationRole } from './organization';
+
+export interface Account {
+  email: string;
+  name: string;
+  avatarImageUrl: string;
+  organizationId: string;
+  organizationRole: OrganizationRole;
+  environmentRoles: [
+    {
+      environmentId: string;
+      role: EnvironmentRoleType;
+    }
+  ];
+  disabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+  searchFilters: [
+    {
+      id: string;
+      name: string;
+      query: string;
+      filterTargetType: unknown;
+      environmentId: string;
+      defaultFilter: boolean;
+    }
+  ];
+}
+
+export interface AccountCollection {
+  accounts: Array<Account>;
+  cursor: string;
+  totalCount: string;
+}
diff --git a/ui/dashboard/src/@types/app.ts b/ui/dashboard/src/@types/app.ts
index 61c679a0a9..a61f847ca7 100644
--- a/ui/dashboard/src/@types/app.ts
+++ b/ui/dashboard/src/@types/app.ts
@@ -1,3 +1,5 @@
+export type AddonSlot = 'left' | 'right';
+
 // Theme
 export type Color =
   | 'primary-600'
@@ -57,4 +59,13 @@ export type AvatarColor =
   | 'orange'
   | 'red';
 
-export type IconSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type IconSize =
+  | 'fit'
+  | 'xxs'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl';
diff --git a/ui/dashboard/src/@types/collection.ts b/ui/dashboard/src/@types/collection.ts
new file mode 100644
index 0000000000..16744ec777
--- /dev/null
+++ b/ui/dashboard/src/@types/collection.ts
@@ -0,0 +1,36 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+
+export type QueryOptionsRespond<T> = Omit<UseQueryOptions<T>, 'queryKey'>;
+
+export type OrderBy =
+  | 'DEFAULT'
+  | 'ID'
+  | 'CREATED_AT'
+  | 'UPDATED_AT'
+  | 'NAME'
+  | 'URL_CODE'
+  | 'FEATURE_COUNT'
+  | 'ENVIRONMENT_COUNT'
+  | 'PROJECT_COUNT'
+  | 'USER_COUNT'
+  | 'ROLE'
+  | 'EMAIL';
+
+export type OrderDirection = 'ASC' | 'DESC';
+
+export type CollectionStatusType = 'ACTIVE' | 'ARCHIVED';
+
+export interface Collection<T> {
+  data: T[];
+  cursor: string;
+  totalCount: string;
+}
+
+export interface CollectionParams {
+  pageSize: number;
+  cursor: string;
+  orderBy?: OrderBy;
+  orderDirection?: OrderDirection;
+  searchKeyword?: string;
+  disabled?: boolean;
+}
diff --git a/ui/dashboard/src/@types/environment.ts b/ui/dashboard/src/@types/environment.ts
index cab8c21297..18a55db146 100644
--- a/ui/dashboard/src/@types/environment.ts
+++ b/ui/dashboard/src/@types/environment.ts
@@ -10,3 +10,9 @@ export interface Environment {
   updatedAt: string;
   urlCode: string;
 }
+
+export interface EnvironmentCollection {
+  environments: Array<Environment>;
+  cursor: string;
+  totalCount: string;
+}
diff --git a/ui/dashboard/src/@types/index.ts b/ui/dashboard/src/@types/index.ts
index 67ae4b0768..73a12a3c68 100644
--- a/ui/dashboard/src/@types/index.ts
+++ b/ui/dashboard/src/@types/index.ts
@@ -3,3 +3,5 @@ export * from './auth';
 export * from './organization';
 export * from './project';
 export * from './environment';
+export * from './collection';
+export * from './account';
diff --git a/ui/dashboard/src/@types/organization.ts b/ui/dashboard/src/@types/organization.ts
index aa669981f7..d149fbae9c 100644
--- a/ui/dashboard/src/@types/organization.ts
+++ b/ui/dashboard/src/@types/organization.ts
@@ -13,7 +13,17 @@ export interface Organization {
   disabled: boolean;
   archived: boolean;
   trial: boolean;
-  createdAt: number;
-  updatedAt: number;
+  createdAt: string;
+  updatedAt: string;
   systemAdmin: boolean;
+  environmentCount: number;
+  projectCount: number;
+  userCount: number;
+  ownerEmail: string;
+}
+
+export interface OrganizationCollection {
+  Organizations: Array<Organization>;
+  cursor: string;
+  totalCount: string;
 }
diff --git a/ui/dashboard/src/@types/project.ts b/ui/dashboard/src/@types/project.ts
index f5eeb22d0a..c6c4808cac 100644
--- a/ui/dashboard/src/@types/project.ts
+++ b/ui/dashboard/src/@types/project.ts
@@ -6,7 +6,15 @@ export interface Project {
   id: string;
   name: string;
   organizationId: string;
+  environmentCount: number;
+  featureFlagCount: number;
   trial: boolean;
   updatedAt: string;
   urlCode: string;
 }
+
+export interface ProjectCollection {
+  projects: Array<Project>;
+  cursor: string;
+  totalCount: string;
+}
diff --git a/ui/dashboard/src/app/index.tsx b/ui/dashboard/src/app/index.tsx
index d84602623b..7933170a06 100644
--- a/ui/dashboard/src/app/index.tsx
+++ b/ui/dashboard/src/app/index.tsx
@@ -1,4 +1,5 @@
 import { memo, useCallback, useEffect, useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
 import {
   BrowserRouter,
   Route,
@@ -6,6 +7,7 @@ import {
   useParams,
   useNavigate
 } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   AuthCallbackPage,
   AuthProvider,
@@ -18,19 +20,26 @@ import {
   PAGE_PATH_AUTH_SIGNIN,
   PAGE_PATH_FEATURES,
   PAGE_PATH_NEW,
+  PAGE_PATH_ORGANIZATIONS,
+  PAGE_PATH_PROJECTS,
   PAGE_PATH_ROOT,
-  PAGE_PATH_ROOT_ALL
+  PAGE_PATH_ROOT_ALL,
+  PAGE_PATH_SETTINGS
 } from 'constants/routing';
+import { i18n } from 'i18n';
 import { getTokenStorage } from 'storage/token';
 import { v4 as uuid } from 'uuid';
 import { ConsoleAccount } from '@types';
-import DashboardPage from 'pages/dashboard';
+import FeatureFlagsPage from 'pages/feature-flags';
 import NotFoundPage from 'pages/not-found';
+import ProjectsPage from 'pages/projects';
+import SettingsPage from 'pages/settings';
 import SignInPage from 'pages/signin';
 import SignInEmailPage from 'pages/signin/email';
 import SelectOrganizationPage from 'pages/signin/organization';
 import Navigation from 'components/navigation';
 import Spinner from 'components/spinner';
+import { OrganizationsRoot } from './routers';
 
 export const AppLoading = () => (
   <div className="flex items-center justify-center h-screen w-full">
@@ -38,20 +47,38 @@ export const AppLoading = () => (
   </div>
 );
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30 * 60 * 1000 // Set the global stale time to 30 minutes
+    }
+  }
+});
+
 function App() {
   return (
-    <BrowserRouter basename="/v3">
-      <AuthProvider>
-        <Routes>
-          <Route
-            path={PAGE_PATH_AUTH_CALLBACK}
-            element={<AuthCallbackPage />}
-          />
-          <Route path={PAGE_PATH_AUTH_SIGNIN} element={<SignInEmailPage />} />
-          <Route path={PAGE_PATH_ROOT_ALL} element={<Root />} />
-        </Routes>
-      </AuthProvider>
-    </BrowserRouter>
+    <I18nextProvider i18n={i18n}>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter basename="/v3">
+          <AuthProvider>
+            <Routes>
+              <Route
+                path={PAGE_PATH_AUTH_CALLBACK}
+                element={<AuthCallbackPage />}
+              />
+              <Route
+                path={PAGE_PATH_AUTH_SIGNIN}
+                element={<SignInEmailPage />}
+              />
+              <Route path={PAGE_PATH_ROOT_ALL} element={<Root />} />
+            </Routes>
+          </AuthProvider>
+        </BrowserRouter>
+        {/* {process.env.NODE_ENV === 'development' && (
+          <ReactQueryDevtools initialIsOpen={false} />
+        )} */}
+      </QueryClientProvider>
+    </I18nextProvider>
   );
 }
 
@@ -73,8 +100,14 @@ export const Root = memo(() => {
     return (
       <div className="flex flex-row w-full h-full">
         <Navigation onClickNavLink={handleChangePageKey} />
-        <div className="flex-grow ml-[248px] shadow-lg overflow-y-auto">
+        <div className="w-full ml-[248px] shadow-lg overflow-y-auto">
           <Routes>
+            {consoleAccount.isSystemAdmin && (
+              <Route
+                path={`${PAGE_PATH_ORGANIZATIONS}/*`}
+                element={<OrganizationsRoot />}
+              />
+            )}
             <Route
               key={pageKey}
               path={'/:envUrlCode?/*'}
@@ -115,7 +148,9 @@ export const EnvironmentRoot = memo(
             <h3>{`403 Access denied`}</h3>
           </Route>
         )}
-        <Route path={`${PAGE_PATH_FEATURES}`} element={<DashboardPage />} />
+        <Route path={`${PAGE_PATH_FEATURES}`} element={<FeatureFlagsPage />} />
+        <Route path={`${PAGE_PATH_SETTINGS}`} element={<SettingsPage />} />
+        <Route path={`${PAGE_PATH_PROJECTS}`} element={<ProjectsPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     );
diff --git a/ui/dashboard/src/app/routers.tsx b/ui/dashboard/src/app/routers.tsx
new file mode 100644
index 0000000000..f7b545f058
--- /dev/null
+++ b/ui/dashboard/src/app/routers.tsx
@@ -0,0 +1,12 @@
+import { Route, Routes } from 'react-router-dom';
+import OrganizationDetailPage from 'pages/organization-details';
+import OrganizationsPage from 'pages/organizations';
+
+export const OrganizationsRoot = () => {
+  return (
+    <Routes>
+      <Route index element={<OrganizationsPage />} />
+      <Route path=":organizationId/*" element={<OrganizationDetailPage />} />
+    </Routes>
+  );
+};
diff --git a/ui/dashboard/src/assets/empty-state/error.svg b/ui/dashboard/src/assets/empty-state/error.svg
new file mode 100644
index 0000000000..303ab2148f
--- /dev/null
+++ b/ui/dashboard/src/assets/empty-state/error.svg
@@ -0,0 +1,6 @@
+<svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="64" height="64" rx="28" fill="#F9F9FB"/>
+<rect x="8" y="8.5" width="48" height="48" rx="24" fill="#F1EFF6"/>
+<path d="M39.4881 25.6392V29.1752H35.9531H39.4881" stroke="#573792" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.027 29.175C37.67 26.688 35.032 25 32 25C27.582 25 24 28.582 24 33C24 37.418 27.582 41 32 41C36.418 41 40 37.418 40 33" stroke="#573792" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/ui/dashboard/src/assets/empty-state/no-data.svg b/ui/dashboard/src/assets/empty-state/no-data.svg
new file mode 100644
index 0000000000..bd984b59ba
--- /dev/null
+++ b/ui/dashboard/src/assets/empty-state/no-data.svg
@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" rx="28" fill="#F9F9FB"/>
+<rect x="8" y="8" width="48" height="48" rx="24" fill="#F1EFF6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9982 31H24C23.3934 31 22.8195 31.2753 22.4399 31.7485C22.0603 32.2218 21.916 32.8417 22.0476 33.4339L23.1588 38.4339C23.3621 39.3489 24.1737 40 25.1111 40H38.757C39.6759 40 40.4766 39.3738 40.698 38.4819L41.9393 33.4819C42.0876 32.8847 41.9527 32.2525 41.5736 31.7679C41.1946 31.2832 40.6135 31 39.9982 31Z" stroke="#573792" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41 31.2714V28.94C41 27.8354 40.1046 26.94 39 26.94H32.5291C32.1981 26.94 31.8886 26.7762 31.7024 26.5025L30.2974 24.4375C30.1111 24.1638 29.8016 24 29.4705 24H25C23.8954 24 23 24.8954 23 26V31.2714" stroke="#573792" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/ui/dashboard/src/assets/empty-state/no-search.svg b/ui/dashboard/src/assets/empty-state/no-search.svg
new file mode 100644
index 0000000000..c1e75dff81
--- /dev/null
+++ b/ui/dashboard/src/assets/empty-state/no-search.svg
@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" rx="28" fill="#F9F9FB"/>
+<rect x="8" y="8" width="48" height="48" rx="24" fill="#F1EFF6"/>
+<path d="M41 41L35 35M37 30C37 33.866 33.866 37 30 37C26.134 37 23 33.866 23 30C23 26.134 26.134 23 30 23C33.866 23 37 26.134 37 30Z" stroke="#573792" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/ui/dashboard/src/components/button/index.tsx b/ui/dashboard/src/components/button/index.tsx
index 5ca1032c1f..c8a2daa563 100644
--- a/ui/dashboard/src/components/button/index.tsx
+++ b/ui/dashboard/src/components/button/index.tsx
@@ -5,7 +5,7 @@ import { cn } from 'utils/style';
 import Spinner from 'components/spinner';
 
 const buttonVariants = cva(
-  'inline-flex animate-fade gap-2 items-center justify-center duration-300 ease-out',
+  'inline-flex animate-fade gap-2 items-center justify-center duration-300 ease-out whitespace-nowrap',
   {
     variants: {
       variant: {
@@ -13,7 +13,7 @@ const buttonVariants = cva(
           'bg-primary-500 text-gray-50',
           'rounded-lg px-6 py-2',
           'hover:bg-primary-700',
-          'disabled:bg-primary-100 disabled:text-primary-50'
+          'disabled:bg-primary-200 disabled:text-primary-50'
         ],
         secondary: [
           'text-primary-500 shadow-border-primary-500',
@@ -93,4 +93,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   }
 );
 
-export { Button };
+export default Button;
diff --git a/ui/dashboard/src/components/checkbox/index.tsx b/ui/dashboard/src/components/checkbox/index.tsx
new file mode 100644
index 0000000000..3d2eccf513
--- /dev/null
+++ b/ui/dashboard/src/components/checkbox/index.tsx
@@ -0,0 +1,76 @@
+import { forwardRef, Ref, useMemo } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { v4 as uuid } from 'uuid';
+import { cn } from 'utils/style';
+import { IconChecked } from '@icons';
+import Icon from 'components/icon';
+
+type CheckboxProps = CheckboxPrimitive.CheckboxProps & {
+  title?: string;
+  description?: string;
+  isExpand?: boolean;
+  isReverse?: boolean;
+};
+
+const Checkbox = forwardRef(
+  (
+    {
+      checked,
+      title,
+      description,
+      isExpand,
+      isReverse,
+      onCheckedChange,
+      ...props
+    }: CheckboxProps,
+    ref: Ref<HTMLButtonElement>
+  ) => {
+    const inputId = useMemo(() => uuid(), []);
+
+    return (
+      <div
+        className={cn('flex w-fit items-center gap-x-2', {
+          'w-full justify-between': isExpand,
+          'flex-row-reverse': isReverse
+        })}
+      >
+        <div className="flex-center size-5">
+          <CheckboxPrimitive.Root
+            {...props}
+            className={cn(
+              'flex-center size-[18px] rounded border border-gray-500 transition-colors duration-200',
+              {
+                'border-primary-500 bg-primary-500': checked
+              }
+            )}
+            checked={checked}
+            id={inputId}
+            ref={ref}
+            onCheckedChange={onCheckedChange}
+          >
+            <CheckboxPrimitive.Indicator
+              className={cn('flex-center size-full opacity-0', {
+                'opacity-100': checked
+              })}
+              forceMount={true}
+            >
+              <Icon icon={IconChecked} size={'fit'} />
+            </CheckboxPrimitive.Indicator>
+          </CheckboxPrimitive.Root>
+        </div>
+        {title && (
+          <label className="flex flex-col gap-y-2 text-left" htmlFor={inputId}>
+            <span className="typo-para-medium text-gray-700">{title}</span>
+            {description && (
+              <span className="typo-para-small text-additional-gray-500">
+                {description}
+              </span>
+            )}
+          </label>
+        )}
+      </div>
+    );
+  }
+);
+
+export default Checkbox;
diff --git a/ui/dashboard/src/components/dropdown/index.tsx b/ui/dashboard/src/components/dropdown/index.tsx
index f5d98c4d11..10a8d2cff2 100644
--- a/ui/dashboard/src/components/dropdown/index.tsx
+++ b/ui/dashboard/src/components/dropdown/index.tsx
@@ -1,117 +1,220 @@
-import type { FunctionComponent, ReactNode } from 'react';
+import {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  forwardRef,
+  FunctionComponent,
+  ReactNode
+} from 'react';
 import { IconExpandMoreRound } from 'react-icons-material-design';
-import clsx from 'clsx';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import type { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cva } from 'class-variance-authority';
 import { cn } from 'utils/style';
+import { IconSearch } from '@icons';
 import Icon from 'components/icon';
-import styles from './styles.module.css';
+import Input, { InputProps } from 'components/input';
 
-export type DropdownOption<DropdownValue> = {
-  value: DropdownValue | undefined;
-  icon?: FunctionComponent;
-  label: string;
-  description?: string;
-};
+export type DropdownValue = number | string;
 
-export type DropdownProps<DropdownValue> = {
-  align?: DropdownMenuContentProps['align'];
-  expand?: 'full';
-  addonSlot?: 'left' | 'right';
-  placeholder?: string;
+export type DropdownOption = {
+  label: string;
+  value: DropdownValue;
   icon?: FunctionComponent;
-  title?: string;
-  options: DropdownOption<DropdownValue>[];
-  action?: ReactNode;
-  disabled?: boolean;
-  value?: DropdownValue | undefined;
-  onChange?: (value: DropdownValue, event?: Event) => void;
-  defaultValue?: DropdownValue | undefined;
-  readOnly?: boolean;
-  modal?: boolean;
-  className?: string;
+  description?: boolean;
+  haveCheckbox?: boolean;
 };
 
-const Dropdown = <DropdownValue extends number | string>({
-  align = 'start',
-  expand,
-  placeholder = 'Select...',
-  icon,
-  title,
-  value,
-  onChange,
-  addonSlot,
-  options,
-  action,
-  disabled,
-  modal = false,
-  className
-}: DropdownProps<DropdownValue>) => {
-  const selected = options.find(o => o.value === value);
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-  return (
-    <DropdownMenu.Root modal={modal}>
-      <DropdownMenu.Trigger
-        className={clsx(
-          styles.trigger,
-          addonSlot === 'left' && styles['pad-left'],
-          addonSlot === 'right' && styles['pad-right'],
-          expand === 'full' && styles.full
-        )}
-        disabled={disabled}
-      >
-        {icon && (
-          <span className={styles.icon}>
-            <Icon icon={icon} color="gray-300" />
-          </span>
-        )}
-        {selected ? (
-          <span className={styles.selected}>{selected.label}</span>
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const triggerVariants = cva(
+  [
+    'flex items-center px-3 py-[11px] gap-x-3 w-fit border rounded-lg bg-white',
+    'disabled:cursor-not-allowed disabled:border-gray-400 disabled:bg-gray-100 disabled:!shadow-none'
+  ],
+  {
+    variants: {
+      variant: {
+        primary:
+          'border-primary-500 hover:shadow-border-primary-500 [&>*]:text-primary-500',
+        secondary:
+          'border-gray-400 hover:shadow-border-gray-400 [&_p]:text-gray-700 [&_span]:text-gray-600 [&>i]:text-gray-500'
+      }
+    },
+    defaultVariants: {
+      variant: 'secondary'
+    }
+  }
+);
+
+const DropdownMenuTrigger = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> & {
+    label?: string;
+    description?: string;
+    isExpand?: boolean;
+    placeholder?: string;
+    variant?: 'primary' | 'secondary';
+    showArrow?: boolean;
+    trigger?: ReactNode;
+  }
+>(
+  (
+    {
+      className,
+      variant,
+      label,
+      description,
+      isExpand,
+      placeholder = '',
+      showArrow = true,
+      trigger,
+      ...props
+    },
+    ref
+  ) => (
+    <DropdownMenuPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        triggerVariants({
+          variant
+        }),
+        {
+          'justify-between w-full': isExpand
+        },
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center w-full justify-between typo-para-medium">
+        {trigger ? (
+          trigger
+        ) : label ? (
+          <p>
+            {label} {description && <span>{description}</span>}
+          </p>
         ) : (
-          <span className={styles.placeholder}>{placeholder}</span>
+          <p className={'!text-gray-500'}>{placeholder}</p>
         )}
-        <span className={styles.arrow}>
-          <Icon icon={IconExpandMoreRound} />
-        </span>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          className={cn(styles.content, className)}
-          align={align}
-        >
-          {title && (
-            <DropdownMenu.Label className={styles.label}>
-              {title}
-            </DropdownMenu.Label>
-          )}
-          <DropdownMenu.Group className={styles.group}>
-            {options.map((option, index) => (
-              <DropdownMenu.Item
-                key={index}
-                className={clsx(
-                  styles.item,
-                  value === option.value && styles['item-active'],
-                  option.icon && styles['item-icon']
-                )}
-                onSelect={
-                  onChange ? event => onChange(option.value!, event) : undefined
-                }
-              >
-                {option.icon && <Icon icon={option.icon} />}
-                {option.label}
-                {option.description && (
-                  <div className={styles['item-description']}>
-                    {option.description}
-                  </div>
-                )}
-              </DropdownMenu.Item>
-            ))}
-            {action && <div className={styles.action}>{action}</div>}
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+      </div>
+
+      {showArrow && <Icon icon={IconExpandMoreRound} size={'md'} />}
+    </DropdownMenuPrimitive.Trigger>
+  )
+);
+
+const DropdownMenuContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    isExpand?: boolean;
+  }
+>(({ className, sideOffset = 4, isExpand, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[196px] max-h-[252px] overflow-x-hidden overflow-y-auto rounded-lg border bg-white p-1 shadow-dropdown small-scroll',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        { 'dropdown-menu-expand': isExpand },
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+
+const DropdownMenuItem = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    icon?: FunctionComponent;
+    isMultiselect?: boolean;
+    selected?: boolean;
+    label?: string;
+    value: DropdownValue;
+    description?: string;
+    closeWhenSelected?: boolean;
+    onSelectOption?: (value: DropdownValue, event: Event) => void;
+  }
+>(
+  (
+    {
+      className,
+      icon,
+      label,
+      value,
+      description,
+      closeWhenSelected = true,
+      onSelectOption,
+      ...props
+    },
+    ref
+  ) => (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative flex items-center w-full cursor-pointer select-none rounded-[5px] p-2 gap-x-2 outline-none transition-colors hover:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )}
+      onSelect={
+        onSelectOption
+          ? event => {
+              if (!closeWhenSelected) event.preventDefault();
+              return onSelectOption(value, event);
+            }
+          : undefined
+      }
+      {...props}
+    >
+      {icon && (
+        <div className="flex-center size-5">
+          <Icon icon={icon} size={'xs'} color="gray-600" />
+        </div>
+      )}
+
+      <div className="flex flex-col gap-y-1.5">
+        <p className="typo-para-medium leading-5 text-gray-700">{label}</p>
+        {description && (
+          <p className="typo-para-small leading-[14px] text-gray-500">
+            {description}
+          </p>
+        )}
+      </div>
+    </DropdownMenuPrimitive.Item>
+  )
+);
+
+type DropdownSearchProps = InputProps;
+
+const DropdownMenuSearch = ({
+  value,
+  onChange,
+  ...props
+}: DropdownSearchProps) => {
+  return (
+    <div className="sticky top-0 left-0 right-0 flex items-center w-full px-3 py-[11.5px] gap-x-2 border-b border-gray-200 bg-white z-50">
+      <div className="flex-center size-5">
+        <Icon icon={IconSearch} size={'xs'} color="gray-500" />
+      </div>
+      <Input
+        {...props}
+        value={value}
+        onChange={onChange}
+        className="p-0 border-none"
+        autoFocus={true}
+      />
+    </div>
   );
 };
 
-export default Dropdown;
+export {
+  DropdownMenu,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSearch
+};
diff --git a/ui/dashboard/src/components/dropdown/styles.module.css b/ui/dashboard/src/components/dropdown/styles.module.css
deleted file mode 100644
index b39d815f58..0000000000
--- a/ui/dashboard/src/components/dropdown/styles.module.css
+++ /dev/null
@@ -1,75 +0,0 @@
-button.trigger {
-  @apply typo-para-medium flex items-center rounded-lg border border-gray-400 bg-gray-50 p-3 text-gray-500;
-}
-button.trigger.pad-left {
-  @apply pl-10;
-}
-button.trigger.pad-right {
-  @apply pr-10;
-}
-
-.icon {
-  @apply mr-2 flex;
-}
-.arrow {
-  @apply ml-2 flex items-center;
-}
-.full {
-  @apply flex w-full justify-between;
-}
-.content {
-  @apply max-h-[260px] overflow-auto bg-gray-50 py-4 shadow-menu;
-  min-width: 304px;
-}
-.label {
-  @apply typo-head-bold-small mb-4 px-4 text-center text-gray-600;
-}
-.selected {
-  @apply flex-1 truncate text-left text-gray-600;
-}
-.placeholder {
-  @apply flex-1 truncate text-left;
-}
-.item {
-  @apply typo-para-medium cursor-pointer px-6 py-2 text-gray-600;
-}
-.item:hover {
-  @apply bg-primary-50 text-primary-500;
-}
-.item-active {
-  @apply typo-head-semi-small text-primary-500;
-}
-.item-icon {
-  @apply typo-para-medium flex items-center text-gray-600;
-}
-.item-icon i {
-  @apply mr-2;
-}
-.item-icon.item-active {
-  @apply typo-para-medium;
-}
-.item-icon > i {
-  @apply text-gray-50;
-}
-.item-icon:hover > i {
-  @apply text-primary-500;
-}
-.item-description {
-  @apply typo-para-small mt-1;
-}
-
-/* Action */
-.action {
-  @apply mt-2 flex items-center px-6 py-2;
-}
-
-button.trigger:focus,
-button.trigger:focus-visible {
-  @apply shadow-border-gray-300;
-}
-button.trigger:hover {
-  @apply text-gray-600 shadow-border-gray-300;
-}
-button.trigger[data-state='open'] {
-  @apply bg-gray-50 outline-gray-50;
-}
diff --git a/ui/dashboard/src/components/form/form-label.tsx b/ui/dashboard/src/components/form/form-label.tsx
index 65ae510095..5db0766b0e 100644
--- a/ui/dashboard/src/components/form/form-label.tsx
+++ b/ui/dashboard/src/components/form/form-label.tsx
@@ -1,16 +1,19 @@
 import React, { HTMLAttributes, Ref } from 'react';
+import { useTranslation } from 'i18n';
 import { cn } from 'utils/style';
 import { useFormField } from 'components/form';
 
 interface FormLabelProps extends HTMLAttributes<HTMLDivElement> {
   required?: boolean;
+  optional?: boolean;
 }
 
 const FormLabel = React.forwardRef(
   (
-    { className, children, required, ...props }: FormLabelProps,
+    { className, children, required, optional, ...props }: FormLabelProps,
     ref: Ref<HTMLDivElement>
   ) => {
+    const { t } = useTranslation(['form']);
     const { formItemId } = useFormField();
 
     return (
@@ -21,6 +24,9 @@ const FormLabel = React.forwardRef(
         {...props}
       >
         {children}
+        {optional && (
+          <span className="text-gray-500 ml-2">({t(`optional`)})</span>
+        )}
         {required && <span className="text-accent-red-500 ml-0.5">*</span>}
       </div>
     );
diff --git a/ui/dashboard/src/components/form/form-message.tsx b/ui/dashboard/src/components/form/form-message.tsx
index f628f3a345..090ba2ae20 100644
--- a/ui/dashboard/src/components/form/form-message.tsx
+++ b/ui/dashboard/src/components/form/form-message.tsx
@@ -17,7 +17,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn('typo-para-small text-accent-red-500', className)}
+      className={cn('typo-para-small text-accent-red-500 mt-0.5', className)}
       {...props}
     >
       {body}
diff --git a/ui/dashboard/src/components/icon/index.tsx b/ui/dashboard/src/components/icon/index.tsx
index c559bd0b65..02e04fb276 100644
--- a/ui/dashboard/src/components/icon/index.tsx
+++ b/ui/dashboard/src/components/icon/index.tsx
@@ -6,6 +6,7 @@ import type { Color, IconSize } from '@types';
 export interface IconProps {
   color?: Color;
   size?: IconSize | IconSize[];
+  className?: string;
   icon: FunctionComponent;
 }
 
@@ -15,13 +16,14 @@ const getSizeCls = (size: IconSize | IconSize[]) => {
   return cls.join(' ');
 };
 
-const Icon = ({ color, size = 'md', icon: SvgIcon }: IconProps) => {
+const Icon = ({ color, size = 'md', icon: SvgIcon, className }: IconProps) => {
   return (
     <i
       className={clsx(
         'inline-flex',
         color && COLOR_MAPPING[color],
-        getSizeCls(size)
+        getSizeCls(size),
+        className
       )}
     >
       <SvgIcon />
diff --git a/ui/dashboard/src/components/modal/dialog.tsx b/ui/dashboard/src/components/modal/dialog.tsx
index ff5d8b78c0..28fb9718a2 100644
--- a/ui/dashboard/src/components/modal/dialog.tsx
+++ b/ui/dashboard/src/components/modal/dialog.tsx
@@ -2,31 +2,31 @@ import { ReactNode, useCallback } from 'react';
 import { IconCloseRound } from 'react-icons-material-design';
 import * as Dialog from '@radix-ui/react-dialog';
 import { cn } from 'utils/style';
-import { Button } from 'components/button';
+import Button from 'components/button';
 import Divider from 'components/divider';
 import Icon from 'components/icon';
 
 export type ModalSize = 'sm' | 'md';
-
-const widthBySize: Record<ModalSize, number> = { sm: 496, md: 780 };
+export type ModalProps = {
+  size?: ModalSize;
+  title: string;
+  isOpen: boolean;
+  onClose: () => void;
+  closeOnPressEscape?: boolean;
+  closeOnClickOutside?: boolean;
+  children?: ReactNode;
+  className?: string;
+};
 
 const DialogModal = ({
-  size = 'sm',
   title,
   isOpen,
   onClose,
   closeOnPressEscape = true,
   closeOnClickOutside = true,
-  children
-}: {
-  size?: ModalSize;
-  title: string;
-  isOpen: boolean;
-  onClose: () => void;
-  closeOnPressEscape?: boolean;
-  closeOnClickOutside?: boolean;
-  children: ReactNode;
-}) => {
+  children,
+  className
+}: ModalProps) => {
   const onOpenChange = useCallback((v: boolean) => {
     if (v === false) onClose();
   }, []);
@@ -36,15 +36,15 @@ const DialogModal = ({
       <Dialog.Portal>
         <Dialog.Overlay
           className={cn(
-            'fixed inset-0 grid h-full w-full animate-fade',
+            'fixed inset-0 grid h-full w-full animate-fade z-50',
             'place-items-center overflow-y-auto bg-overlay'
           )}
         >
           <Dialog.Content
-            className="relative mx-4 my-8 animate-zoom rounded-lg bg-gray-50"
-            style={{
-              maxWidth: widthBySize[size]
-            }}
+            className={cn(
+              'relative mx-4 my-8 animate-zoom rounded-lg bg-gray-50',
+              className
+            )}
             onEscapeKeyDown={
               closeOnPressEscape ? undefined : event => event.preventDefault()
             }
@@ -59,6 +59,7 @@ const DialogModal = ({
                 <Dialog.Title className="typo-head-bold-huge">
                   {title}
                 </Dialog.Title>
+                <Dialog.Description className="hidden" />
                 <Dialog.Close asChild>
                   <Button size="icon-sm" variant="grey" onClick={onClose}>
                     <Icon icon={IconCloseRound} />
diff --git a/ui/dashboard/src/components/modal/slide.tsx b/ui/dashboard/src/components/modal/slide.tsx
index cdc661fe1d..fb54e05b82 100644
--- a/ui/dashboard/src/components/modal/slide.tsx
+++ b/ui/dashboard/src/components/modal/slide.tsx
@@ -2,10 +2,21 @@ import { ReactNode, useCallback } from 'react';
 import { IconCloseRound } from 'react-icons-material-design';
 import * as Dialog from '@radix-ui/react-dialog';
 import { cn } from 'utils/style';
-import { Button } from 'components/button';
+import Button from 'components/button';
 import Divider from 'components/divider';
 import Icon from 'components/icon';
 
+export type SliderType = 'create' | 'edit';
+
+export type SliderProps = {
+  direction?: 'slide-up' | 'slide-left';
+  title: string;
+  isOpen: boolean;
+  children?: ReactNode;
+  shouldCloseOnOverlayClick?: boolean;
+  onClose: () => void;
+};
+
 const SlideModal = ({
   direction = 'slide-left',
   title,
@@ -13,14 +24,7 @@ const SlideModal = ({
   onClose,
   children,
   shouldCloseOnOverlayClick = true
-}: {
-  direction?: 'slide-up' | 'slide-left';
-  title: string;
-  isOpen: boolean;
-  onClose: () => void;
-  children: ReactNode;
-  shouldCloseOnOverlayClick?: boolean;
-}) => {
+}: SliderProps) => {
   const onOpenChange = useCallback((v: boolean) => {
     if (v === false && shouldCloseOnOverlayClick) onClose();
   }, []);
@@ -28,11 +32,11 @@ const SlideModal = ({
   return (
     <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 h-full w-full animate-fade bg-overlay" />
+        <Dialog.Overlay className="fixed inset-0 z-50 h-full w-full animate-fade bg-overlay" />
         <Dialog.Content>
           <div
             className={cn(
-              'fixed flex h-full w-full flex-col rounded-l-lg bg-gray-50 max-w-[542px]',
+              'fixed z-50 flex h-full w-full flex-col rounded-l-lg bg-gray-50 max-w-[542px]',
               direction === 'slide-left' && 'right-0 top-0 animate-slide-left',
               direction === 'slide-up' && 'bottom-0 left-0 animate-slide-up'
             )}
@@ -44,6 +48,7 @@ const SlideModal = ({
                 <Dialog.Title className="typo-head-bold-huge">
                   {title}
                 </Dialog.Title>
+                <Dialog.Description className="hidden" />
                 <Dialog.Close asChild>
                   <Button size="icon-sm" variant="grey" onClick={onClose}>
                     <Icon icon={IconCloseRound} />
diff --git a/ui/dashboard/src/components/navigation/index.tsx b/ui/dashboard/src/components/navigation/index.tsx
index 3ebfb73ff5..54e6438636 100644
--- a/ui/dashboard/src/components/navigation/index.tsx
+++ b/ui/dashboard/src/components/navigation/index.tsx
@@ -1,17 +1,11 @@
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import logo from 'assets/logos/logo-white.svg';
 import { useAuth, getCurrentEnvironment } from 'auth';
-import {
-  PAGE_PATH_AUDIT_LOGS,
-  PAGE_PATH_FEATURES,
-  PAGE_PATH_ROOT,
-  PAGE_PATH_USER_SEGMENTS,
-  PAGE_PATH_DEBUGGER,
-  PAGE_PATH_GOALS,
-  PAGE_PATH_EXPERIMENTS
-} from 'constants/routing';
+import * as ROUTING from 'constants/routing';
 import { useToggleOpen } from 'hooks';
 import { useTranslation } from 'i18n';
+import compact from 'lodash/compact';
+import flatMapDeep from 'lodash/flatMapDeep';
 import { cn } from 'utils/style';
 import * as IconSystem from '@icons';
 import Divider from 'components/divider';
@@ -22,15 +16,125 @@ import UserMenu from './user-menu';
 
 const Navigation = ({ onClickNavLink }: { onClickNavLink: () => void }) => {
   const { t } = useTranslation(['common']);
-  const [isOpenSetting, onOpenSetting, onCloseSetting] = useToggleOpen(false);
+  const { pathname } = useLocation();
   const { consoleAccount } = useAuth();
+
   const currentEnvironment = getCurrentEnvironment(consoleAccount!);
-  const environmentUrlCode = currentEnvironment.urlCode;
+  const envUrlCode = currentEnvironment.urlCode;
+
+  const settingMenuSections = [
+    {
+      title: t('general'),
+      menus: compact([
+        consoleAccount?.isSystemAdmin && {
+          label: t(`organizations`),
+          icon: IconSystem.IconBuilding,
+          href: ROUTING.PAGE_PATH_ORGANIZATIONS
+        },
+        {
+          label: t(`settings`),
+          icon: IconSystem.IconSetting,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_SETTINGS}`
+        },
+        {
+          label: t(`projects`),
+          icon: IconSystem.IconFolder,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_PROJECTS}`
+        },
+        {
+          label: t(`usage`),
+          icon: IconSystem.IconUsage,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_USAGE}`
+        }
+      ])
+    },
+    {
+      title: t('access'),
+      menus: [
+        {
+          label: t(`members`),
+          icon: IconSystem.IconMember,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_MEMBERS}`
+        },
+        {
+          label: t(`API-keys`),
+          icon: IconSystem.IconKey,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_APIKEYS}`
+        }
+      ]
+    },
+    {
+      title: t('integrations'),
+      menus: [
+        {
+          label: `Slack`,
+          icon: IconSystem.IconSlack,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_INTEGRATION_SLACK}`
+        },
+        {
+          label: `FCM`,
+          icon: IconSystem.IconFCM,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_INTEGRATION_FCM}`
+        }
+      ]
+    }
+  ];
+
+  const mainMenuSections = [
+    {
+      title: t('management'),
+      menus: [
+        {
+          label: t(`navigation.audit-logs`),
+          icon: IconSystem.IconLogs,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_AUDIT_LOGS}`
+        },
+        {
+          label: t(`navigation.feature-flags`),
+          icon: IconSystem.IconSwitch,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_FEATURES}`
+        },
+        {
+          label: t(`navigation.user-segment`),
+          icon: IconSystem.IconUser,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_USER_SEGMENTS}`
+        },
+        {
+          label: t(`navigation.debugger`),
+          icon: IconSystem.IconDebugger,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_DEBUGGER}`
+        }
+      ]
+    },
+    {
+      title: t('analysis'),
+      menus: [
+        {
+          label: t(`navigation.goals`),
+          icon: IconSystem.IconNote,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_GOALS}`
+        },
+        {
+          label: t(`navigation.experiments`),
+          icon: IconSystem.IconProton,
+          href: `/${envUrlCode}${ROUTING.PAGE_PATH_EXPERIMENTS}`
+        }
+      ]
+    }
+  ];
+
+  const settingPaths = flatMapDeep(
+    settingMenuSections.map(section => section.menus)
+  ).map(item => item.href);
+
+  const [isOpenSetting, onOpenSetting, onCloseSetting] = useToggleOpen(
+    settingPaths.includes(pathname)
+  );
 
   return (
     <div className="fixed h-screen w-[248px] bg-primary-500 z-50 py-8 px-6">
       <div className="flex flex-col h-full relative overflow-hidden">
-        <Link to={PAGE_PATH_ROOT}>
+        <Link to={ROUTING.PAGE_PATH_ROOT}>
           <img src={logo} alt="Bucketer" />
         </Link>
 
@@ -49,63 +153,14 @@ const Navigation = ({ onClickNavLink }: { onClickNavLink: () => void }) => {
               <span>{t(`navigation.back-to-main`)}</span>
             </button>
             <Divider className="my-5 bg-primary-50 opacity-10" />
-            <SectionMenu
-              title={t('general')}
-              items={[
-                {
-                  label: t(`organizations`),
-                  icon: IconSystem.IconBuilding,
-                  href: '/organizations'
-                },
-                {
-                  label: t(`settings`),
-                  icon: IconSystem.IconSetting,
-                  href: '/settings'
-                },
-                {
-                  label: t(`projects`),
-                  icon: IconSystem.IconFolder,
-                  href: '/projects'
-                },
-                {
-                  label: t(`usage`),
-                  icon: IconSystem.IconUsage,
-                  href: '/usage'
-                }
-              ]}
-            />
-            <SectionMenu
-              title={t(`access`)}
-              className="mt-5"
-              items={[
-                {
-                  label: t(`members`),
-                  icon: IconSystem.IconMember,
-                  href: '/members'
-                },
-                {
-                  label: t(`API-keys`),
-                  icon: IconSystem.IconKey,
-                  href: '/api-keys'
-                }
-              ]}
-            />
-            <SectionMenu
-              title={t(`integrations`)}
-              className="mt-5"
-              items={[
-                {
-                  label: `Slack`,
-                  icon: IconSystem.IconSlack,
-                  href: '/integrations/slack'
-                },
-                {
-                  label: `FCM`,
-                  icon: IconSystem.IconFCM,
-                  href: '/integrations/fcm'
-                }
-              ]}
-            />
+            {settingMenuSections.map((item, index) => (
+              <SectionMenu
+                key={index}
+                className="first:mt-0 mt-4"
+                title={item.title}
+                items={item.menus}
+              />
+            ))}
           </div>
           <div
             className={cn(
@@ -118,48 +173,15 @@ const Navigation = ({ onClickNavLink }: { onClickNavLink: () => void }) => {
             </div>
             <MyProjects />
             <Divider className="my-5 bg-primary-50 opacity-10" />
-            <SectionMenu
-              title={t(`management`)}
-              items={[
-                {
-                  label: t(`navigation.audit-logs`),
-                  icon: IconSystem.IconLogs,
-                  href: `/${environmentUrlCode}${PAGE_PATH_AUDIT_LOGS}`
-                },
-                {
-                  label: t(`navigation.feature-flags`),
-                  icon: IconSystem.IconSwitch,
-                  href: `/${environmentUrlCode}${PAGE_PATH_FEATURES}`
-                },
-                {
-                  label: t(`navigation.user-segment`),
-                  icon: IconSystem.IconUser,
-                  href: `/${environmentUrlCode}${PAGE_PATH_USER_SEGMENTS}`
-                },
-                {
-                  label: t(`navigation.debugger`),
-                  icon: IconSystem.IconDebugger,
-                  href: `/${environmentUrlCode}${PAGE_PATH_DEBUGGER}`
-                }
-              ]}
-              onClickNavLink={onClickNavLink}
-            />
-            <SectionMenu
-              title={t(`analysis`)}
-              className="mt-4"
-              items={[
-                {
-                  label: t(`navigation.goals`),
-                  icon: IconSystem.IconNote,
-                  href: `/${environmentUrlCode}${PAGE_PATH_GOALS}`
-                },
-                {
-                  label: t(`navigation.experiments`),
-                  icon: IconSystem.IconProton,
-                  href: `/${environmentUrlCode}${PAGE_PATH_EXPERIMENTS}`
-                }
-              ]}
-            />
+            {mainMenuSections.map((item, index) => (
+              <SectionMenu
+                key={index}
+                className="first:mt-0 mt-4"
+                title={item.title}
+                items={item.menus}
+                onClickNavLink={onClickNavLink}
+              />
+            ))}
           </div>
         </div>
 
diff --git a/ui/dashboard/src/components/pagination/index.tsx b/ui/dashboard/src/components/pagination/index.tsx
new file mode 100644
index 0000000000..e8db67733c
--- /dev/null
+++ b/ui/dashboard/src/components/pagination/index.tsx
@@ -0,0 +1,43 @@
+import { LIST_PAGE_SIZE } from 'constants/app';
+import PaginationActions from './pagination-actions';
+import PaginationCell from './pagination-cell';
+import PaginationCount from './pagination-count';
+import PaginationGroup from './pagination-group';
+
+export type PaginationProps = {
+  page: number;
+  pageSize?: number;
+  totalCount: number;
+  onChange: (page: number) => void;
+};
+
+const Pagination = ({
+  pageSize = LIST_PAGE_SIZE,
+  totalCount,
+  page,
+  onChange
+}: PaginationProps) => {
+  const cursor = pageSize * (page - 1);
+
+  return (
+    <div className="flex items-center justify-between">
+      <PaginationCount
+        totalItems={totalCount}
+        value={totalCount < pageSize ? totalCount : pageSize}
+      />
+      <PaginationActions
+        pageIndex={cursor === 0 ? 1 : cursor / pageSize + 1}
+        totalItems={totalCount}
+        itemsPerPage={pageSize}
+        onPageChange={onChange}
+      />
+    </div>
+  );
+};
+
+Pagination.Cell = PaginationCell;
+Pagination.Group = PaginationGroup;
+Pagination.Actions = PaginationActions;
+Pagination.Count = PaginationCount;
+
+export default Pagination;
diff --git a/ui/dashboard/src/components/pagination/pagination-actions.tsx b/ui/dashboard/src/components/pagination/pagination-actions.tsx
new file mode 100644
index 0000000000..2cdc9c5855
--- /dev/null
+++ b/ui/dashboard/src/components/pagination/pagination-actions.tsx
@@ -0,0 +1,127 @@
+import { useState } from 'react';
+import PaginationCell from './pagination-cell';
+import PaginationGroup from './pagination-group';
+
+export type PaginationActionsProps = {
+  pageIndex: number;
+  totalItems: number;
+  itemsPerPage: number;
+  onPageChange?: (page: number) => void;
+};
+
+const PaginationActions = ({
+  totalItems,
+  itemsPerPage,
+  pageIndex,
+  onPageChange
+}: PaginationActionsProps) => {
+  const [currentPage, setCurrentPage] = useState(pageIndex);
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const maxVisibleButtons = 5;
+
+  const cells = () => {
+    let startPage, endPage;
+
+    if (totalPages <= maxVisibleButtons) {
+      startPage = 1;
+      endPage = totalPages;
+    } else {
+      const maxPagesBeforeCurrentPage = Math.floor(maxVisibleButtons / 2);
+      const maxPagesAfterCurrentPage = Math.ceil(maxVisibleButtons / 2) - 1;
+
+      if (currentPage <= maxPagesBeforeCurrentPage) {
+        startPage = 1;
+        endPage = maxVisibleButtons;
+      } else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {
+        startPage = totalPages - maxVisibleButtons + 1;
+        endPage = totalPages;
+      } else {
+        startPage = currentPage - maxPagesBeforeCurrentPage;
+        endPage = currentPage + maxPagesAfterCurrentPage;
+      }
+    }
+
+    const pages = [];
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    if (startPage > 1) {
+      pages.unshift('...');
+      pages.unshift(1);
+    }
+
+    if (endPage < totalPages) {
+      pages.push('...');
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  const handleNext = () => handlePageChange(currentPage + 1);
+
+  const handlePrevious = () => handlePageChange(currentPage - 1);
+
+  const handlePageChange = (page?: number) => {
+    if (page) {
+      if (page < 1 || page > totalPages) return;
+      setCurrentPage(page);
+      if (onPageChange) onPageChange(page);
+    }
+  };
+
+  const handleLast = () => handlePageChange(totalPages);
+
+  const handleFirst = () => handlePageChange(1);
+
+  const renderCell = cells();
+
+  return (
+    <div className="flex gap-4">
+      <PaginationGroup>
+        <PaginationCell
+          variant="first"
+          onClick={handleFirst}
+          disabled={currentPage === 1}
+        />
+        <PaginationCell
+          variant="previous"
+          onClick={handlePrevious}
+          disabled={currentPage === 1}
+        />
+      </PaginationGroup>
+      <PaginationGroup>
+        {renderCell.map((value, index) =>
+          typeof value === 'string' ? (
+            <span key={`${value}${index}`} className="text-gray-500">
+              ...
+            </span>
+          ) : (
+            <PaginationCell
+              key={value}
+              value={value}
+              checked={currentPage === value}
+              onClick={handlePageChange}
+            />
+          )
+        )}
+      </PaginationGroup>
+      <PaginationGroup>
+        <PaginationCell
+          variant="next"
+          onClick={handleNext}
+          disabled={currentPage === totalPages}
+        />
+        <PaginationCell
+          variant="last"
+          onClick={handleLast}
+          disabled={currentPage === totalPages}
+        />
+      </PaginationGroup>
+    </div>
+  );
+};
+
+export default PaginationActions;
diff --git a/ui/dashboard/src/components/pagination/pagination-cell.tsx b/ui/dashboard/src/components/pagination/pagination-cell.tsx
new file mode 100644
index 0000000000..e39d8a241a
--- /dev/null
+++ b/ui/dashboard/src/components/pagination/pagination-cell.tsx
@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+import type { FunctionComponent } from 'react';
+import {
+  IconKeyboardArrowLeftFilled,
+  IconKeyboardArrowRightFilled,
+  IconKeyboardDoubleArrowLeftFilled,
+  IconKeyboardDoubleArrowRightFilled
+} from 'react-icons-material-design';
+import { cva } from 'class-variance-authority';
+import { cn } from 'utils/style';
+import Icon from 'components/icon';
+
+const cellVariant = cva(
+  ['size-8 rounded-lg flex items-center justify-center text-gray-500'],
+  {
+    variants: {
+      variant: {
+        number: ['bg-white'],
+        next: ['border'],
+        previous: ['border'],
+        first: ['border'],
+        last: ['border']
+      }
+    },
+    defaultVariants: {
+      variant: 'number'
+    }
+  }
+);
+
+export type PaginationCellType =
+  | 'number'
+  | 'next'
+  | 'first'
+  | 'previous'
+  | 'last';
+
+export type PaginationCellProps = {
+  checked?: boolean;
+  value?: number;
+  variant?: PaginationCellType;
+  disabled?: boolean;
+  onClick?: (value?: number) => void;
+};
+
+const PaginationIcon = ({ icon }: { icon: FunctionComponent }) => (
+  <div className="flex-center text-gray-500">
+    <Icon icon={icon} />
+  </div>
+);
+
+const PaginationCell = ({
+  checked,
+  value,
+  variant = 'number',
+  disabled = false,
+  onClick
+}: PaginationCellProps) => {
+  const variantRender = useMemo(() => {
+    switch (variant) {
+      case 'number':
+        return value;
+      case 'next':
+        return <PaginationIcon icon={IconKeyboardArrowRightFilled} />;
+      case 'previous':
+        return <PaginationIcon icon={IconKeyboardArrowLeftFilled} />;
+      case 'first':
+        return <PaginationIcon icon={IconKeyboardDoubleArrowLeftFilled} />;
+      case 'last':
+        return <PaginationIcon icon={IconKeyboardDoubleArrowRightFilled} />;
+    }
+  }, [variant]);
+
+  return (
+    <button
+      className={cn(
+        cellVariant({ variant }),
+        checked && 'bg-primary-500 text-white typo-para-medium',
+        disabled && 'cursor-not-allowed opacity-80'
+      )}
+      onClick={() => !disabled && onClick && onClick(value)}
+    >
+      {variantRender}
+    </button>
+  );
+};
+
+export default PaginationCell;
diff --git a/ui/dashboard/src/components/pagination/pagination-count.tsx b/ui/dashboard/src/components/pagination/pagination-count.tsx
new file mode 100644
index 0000000000..30b6d4882f
--- /dev/null
+++ b/ui/dashboard/src/components/pagination/pagination-count.tsx
@@ -0,0 +1,14 @@
+export type PaginationCountProps = {
+  totalItems: number;
+  value?: number;
+};
+
+const PaginationCount = ({ totalItems, value = 0 }: PaginationCountProps) => {
+  return (
+    <p className="text-gray-600 typo-para-medium">
+      Showing <span>{value}</span> of <span>{totalItems}</span> results
+    </p>
+  );
+};
+
+export default PaginationCount;
diff --git a/ui/dashboard/src/components/pagination/pagination-group.tsx b/ui/dashboard/src/components/pagination/pagination-group.tsx
new file mode 100644
index 0000000000..546db573e4
--- /dev/null
+++ b/ui/dashboard/src/components/pagination/pagination-group.tsx
@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+const PaginationGroup = ({ children }: PropsWithChildren) => {
+  return <div className="flex gap-2">{children}</div>;
+};
+
+export default PaginationGroup;
diff --git a/ui/dashboard/src/components/popover/index.tsx b/ui/dashboard/src/components/popover/index.tsx
new file mode 100644
index 0000000000..30a7d0b5cb
--- /dev/null
+++ b/ui/dashboard/src/components/popover/index.tsx
@@ -0,0 +1,133 @@
+import React, {
+  forwardRef,
+  ReactNode,
+  Ref,
+  useRef,
+  type FunctionComponent
+} from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type { PopoverContentProps } from '@radix-ui/react-popover';
+import { AddonSlot } from '@types';
+import { cn } from 'utils/style';
+import PopoverItem from './popover-item';
+
+export type PopoverOption<PopoverValue> = {
+  value: PopoverValue;
+  icon?: FunctionComponent;
+  label: string;
+  description?: string;
+};
+
+export type PopoverValue = number | string;
+
+const PopoverRoot = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'max-h-[260px] min-w-[167px] overflow-auto rounded-lg bg-gray-50 p-1 shadow-menu',
+      className
+    )}
+    {...props}
+  />
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const PopoverClose = PopoverPrimitive.Close;
+
+export type PopoverProps<PopoverValue> = {
+  align?: PopoverContentProps['align'];
+  expand?: 'full';
+  addonSlot?: AddonSlot;
+  trigger?: ReactNode;
+  triggerLabel?: string;
+  icon?: FunctionComponent;
+  options: PopoverOption<PopoverValue>[];
+  disabled?: boolean;
+  value?: PopoverValue | undefined;
+  modal?: boolean;
+  className?: string;
+  closeWhenSelected?: boolean;
+  onClick?: (value: PopoverValue) => void;
+};
+
+const Popover = forwardRef(
+  (
+    {
+      align = 'start',
+      expand,
+      trigger,
+      triggerLabel = '',
+      icon,
+      addonSlot,
+      options,
+      disabled,
+      modal = false,
+      className,
+      closeWhenSelected = true,
+      onClick
+    }: PopoverProps<PopoverValue>,
+    ref: Ref<HTMLDivElement>
+  ) => {
+    const popoverCloseRef = useRef<HTMLButtonElement>(null);
+
+    const handleSelectItem = (value: PopoverValue) => {
+      onClick!(value);
+      if (closeWhenSelected) popoverCloseRef?.current?.click();
+    };
+
+    return (
+      <PopoverRoot modal={modal}>
+        <PopoverTrigger
+          className={cn(
+            'typo-para-small flex items-center justify-center gap-x-2 text-gray-700 hover:text-gray-600 hover:drop-shadow',
+            {
+              'flex-row-reverse': addonSlot === 'right',
+              'w-full justify-between': expand === 'full'
+            }
+          )}
+          disabled={disabled}
+        >
+          {trigger ? (
+            trigger
+          ) : (
+            <PopoverItem
+              type="trigger"
+              addonSlot={addonSlot}
+              icon={icon}
+              label={triggerLabel}
+            />
+          )}
+        </PopoverTrigger>
+        <PopoverPrimitive.Portal>
+          <PopoverContent
+            ref={ref}
+            hideWhenDetached={true}
+            className={className}
+            align={align}
+          >
+            <PopoverClose ref={popoverCloseRef} className="hidden" />
+            {options.map((item, index) => (
+              <PopoverItem
+                type="item"
+                key={index}
+                addonSlot={addonSlot}
+                icon={item.icon}
+                label={item.label}
+                onClick={() => onClick && handleSelectItem(item.value)}
+              />
+            ))}
+          </PopoverContent>
+        </PopoverPrimitive.Portal>
+      </PopoverRoot>
+    );
+  }
+);
+
+export { PopoverRoot, PopoverTrigger, PopoverClose, PopoverContent, Popover };
diff --git a/ui/dashboard/src/components/popover/popover-item.tsx b/ui/dashboard/src/components/popover/popover-item.tsx
new file mode 100644
index 0000000000..4a0e750f03
--- /dev/null
+++ b/ui/dashboard/src/components/popover/popover-item.tsx
@@ -0,0 +1,64 @@
+import { FunctionComponent } from 'react';
+import { PropsWithChildren } from 'react';
+import { AddonSlot } from '@types';
+import { cn } from 'utils/style';
+import Icon from 'components/icon';
+
+type PopoverItemWrapperProps = PropsWithChildren & {
+  type: 'trigger' | 'item';
+  addonSlot?: AddonSlot;
+  onClick?: () => void;
+};
+const PopoverItemWrapper = ({
+  type,
+  children,
+  addonSlot,
+  onClick
+}: PopoverItemWrapperProps) => {
+  if (type === 'trigger') return <>{children}</>;
+  return (
+    <div
+      className={cn(
+        'flex cursor-pointer items-center gap-x-2 p-2 text-gray-700',
+        'hover:bg-primary-50 [&>*]:hover:text-primary-500',
+        {
+          'flex-row-reverse': addonSlot === 'right'
+        }
+      )}
+      onClick={onClick && onClick}
+    >
+      {children}
+    </div>
+  );
+};
+
+export type PopoverItemProps = {
+  type: 'trigger' | 'item';
+  addonSlot?: AddonSlot;
+  icon?: FunctionComponent;
+  label?: string;
+  onClick?: () => void;
+};
+
+const PopoverItem = ({
+  type,
+  addonSlot,
+  icon,
+  label,
+  onClick
+}: PopoverItemProps) => {
+  return (
+    <PopoverItemWrapper type={type} addonSlot={addonSlot} onClick={onClick}>
+      {icon && (
+        <span
+          className={'flex size-5 items-center justify-center text-gray-600'}
+        >
+          <Icon icon={icon} size={type === 'item' ? 'xxs' : 'sm'} />
+        </span>
+      )}
+      {label && <span className={'typo-para-small select-none'}>{label}</span>}
+    </PopoverItemWrapper>
+  );
+};
+
+export default PopoverItem;
diff --git a/ui/dashboard/src/components/search-input/index.tsx b/ui/dashboard/src/components/search-input/index.tsx
index dc7a3ca72f..ea49e3c63b 100644
--- a/ui/dashboard/src/components/search-input/index.tsx
+++ b/ui/dashboard/src/components/search-input/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { IconSearch } from '@icons';
 import Icon from 'components/icon';
 import Input from 'components/input';
@@ -7,15 +7,17 @@ import InputGroup from 'components/input-group';
 export interface SearchBarProps {
   placeholder: string;
   value: string;
-  onChange: (value: string) => void;
   disabled?: boolean;
+  onChange: (value: string) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
 }
 
 const SearchInput = ({
   placeholder,
   value: defaultValue,
+  disabled,
   onChange,
-  disabled
+  onKeyDown
 }: SearchBarProps) => {
   const [searchValue, setSearchValue] = useState(defaultValue);
   const searchValueRef = useRef(false);
@@ -53,8 +55,9 @@ const SearchInput = ({
         <Input
           placeholder={placeholder}
           value={searchValue}
-          onChange={setSearchValue}
           disabled={disabled}
+          onChange={setSearchValue}
+          onKeyDown={e => onKeyDown && onKeyDown(e)}
         />
       </InputGroup>
     </form>
diff --git a/ui/dashboard/src/components/table/index.tsx b/ui/dashboard/src/components/table/index.tsx
new file mode 100644
index 0000000000..8cd4ea96ae
--- /dev/null
+++ b/ui/dashboard/src/components/table/index.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { cn } from 'utils/style';
+
+const TableRoot = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ ...props }, ref) => (
+  <table
+    className="border-separate border-spacing-y-2 w-full mb-6"
+    ref={ref}
+    {...props}
+  />
+));
+TableRoot.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ ...props }, ref) => <thead ref={ref} {...props} />);
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ ...props }, ref) => <tbody ref={ref} {...props} />);
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ ...props }, ref) => <tfoot ref={ref} {...props} />);
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ ...props }, ref) => <tr ref={ref} {...props} />);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ align, className, ...props }, ref) => (
+  <th
+    className={cn(
+      'text-gray-500 p-4 whitespace-nowrap typo-para-small uppercase',
+      className
+    )}
+    ref={ref}
+    {...props}
+    align={align ? align : 'left'}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ ...props }, ref) => (
+  <td
+    className="px-4 py-2 h-[60px] first:rounded-l-lg last:rounded-r-lg"
+    ref={ref}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ ...props }, ref) => <caption ref={ref} {...props} />);
+TableCaption.displayName = 'TableCaption';
+
+const Table = {
+  Root: TableRoot,
+  Header: TableHeader,
+  Head: TableHead,
+  Body: TableBody,
+  Row: TableRow,
+  Footer: TableFooter,
+  Cell: TableCell,
+  Caption: TableCaption
+};
+
+export default Table;
diff --git a/ui/dashboard/src/components/tabs-link/index.tsx b/ui/dashboard/src/components/tabs-link/index.tsx
new file mode 100644
index 0000000000..1d1c5849cd
--- /dev/null
+++ b/ui/dashboard/src/components/tabs-link/index.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { NavLink, NavLinkProps } from 'react-router-dom';
+import { cn } from 'utils/style';
+
+const Tabs = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex-1 flex h-full flex-col', className)}
+    {...props}
+  />
+));
+
+const TabsList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'inline-flex w-full border-b border-gray-300 items-center',
+      className
+    )}
+    {...props}
+  />
+));
+
+const TabsLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
+  ({ className, to, ...props }, ref) => (
+    <NavLink
+      to={to}
+      className={cn(
+        'flex-center whitespace-nowrap typo-para-medium text-gray-500',
+        'py-1 px-4 border-b-2 border-transparent transition-all tab-item',
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  )
+);
+
+const TabsContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('mt-4 flex flex-col flex-1', className)}
+    {...props}
+  />
+));
+
+export { Tabs, TabsList, TabsLink, TabsContent };
diff --git a/ui/dashboard/src/components/tabs/index.tsx b/ui/dashboard/src/components/tabs/index.tsx
new file mode 100644
index 0000000000..3a93e7ea13
--- /dev/null
+++ b/ui/dashboard/src/components/tabs/index.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from 'utils/style';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex w-full border-b border-gray-300 items-center',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex-center whitespace-nowrap typo-para-medium text-gray-500',
+      'border-b-2 data-[state=active]:border-primary-500',
+      'disabled:opacity-50 border-transparent py-1 px-4',
+      'transition-all data-[state=active]:text-primary-500',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-4 flex flex-col flex-1 focus-visible:outline-none',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/ui/dashboard/src/components/textarea/index.tsx b/ui/dashboard/src/components/textarea/index.tsx
new file mode 100644
index 0000000000..bc89c85097
--- /dev/null
+++ b/ui/dashboard/src/components/textarea/index.tsx
@@ -0,0 +1,37 @@
+import { forwardRef, FunctionComponent, MouseEvent, Ref } from 'react';
+import Icon from 'components/icon';
+
+export type TextAreaProps = React.DetailedHTMLProps<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+> & {
+  iconLeft?: FunctionComponent;
+  onClickIcon?: (e: MouseEvent) => void;
+};
+
+const TextArea = forwardRef(
+  (
+    { id, iconLeft: IconLeft, onClickIcon, ...props }: TextAreaProps,
+    ref: Ref<HTMLTextAreaElement>
+  ) => {
+    return (
+      <div className="relative w-full">
+        <textarea
+          ref={ref}
+          {...props}
+          id={id}
+          className="p-3 border border-gray-400 rounded-lg w-full text-gray-700 typo-para-medium resize-none"
+        />
+        {IconLeft && (
+          <button onClick={onClickIcon}>
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
+              <Icon icon={IconLeft} size="sm" />
+            </div>
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+export default TextArea;
diff --git a/ui/dashboard/src/components/toast/index.tsx b/ui/dashboard/src/components/toast/index.tsx
new file mode 100644
index 0000000000..cf24edca28
--- /dev/null
+++ b/ui/dashboard/src/components/toast/index.tsx
@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { cva } from 'class-variance-authority';
+import { NotifyProps } from 'hooks/use-toast';
+import { cn } from 'utils/style';
+import {
+  IconChevronRight,
+  IconClose,
+  IconToastError,
+  IconToastInfo,
+  IconToastSuccess,
+  IconToastWarning
+} from '@icons';
+import Icon from 'components/icon';
+
+const otherToastCls = 'px-4 py-2 border-l-4 rounded';
+
+const toastVariants = cva(
+  'flex flex-col w-fit max-w-[90%] typo-para-medium select-none',
+  {
+    variants: {
+      toastType: {
+        toast: 'sm:max-w-[460px] p-4 rounded-xl border text-gray-700',
+        'info-message': cn(otherToastCls, 'sm:max-w-[490px] gap-y-2'),
+        'prerequisite-message': cn(otherToastCls, 'sm:max-w-[79.5%] gap-y-3')
+      },
+      messageType: {
+        success: 'bg-accent-green-50 border-accent-green-500',
+        error: 'bg-accent-red-50 border-accent-red-500',
+        info: 'bg-accent-blue-50 border-accent-blue-500 text-accent-blue-500',
+        warning:
+          'bg-accent-yellow-50 border-accent-yellow-500 text-accent-yellow-500'
+      }
+    }
+  }
+);
+
+const ToastMessage = ({
+  toastType,
+  messageType,
+  message,
+  t,
+  toastChildren
+}: NotifyProps) => {
+  const [isExpand, setIsExpand] = useState(false);
+  const icon =
+    messageType === 'success'
+      ? IconToastSuccess
+      : messageType === 'error'
+        ? IconToastError
+        : messageType === 'info'
+          ? IconToastInfo
+          : IconToastWarning;
+  return (
+    <div className={toastVariants({ toastType, messageType })}>
+      <div
+        className={cn('flex gap-x-2', {
+          'items-center': ['info-message', 'prerequisite-message'].includes(
+            toastType
+          )
+        })}
+      >
+        <div className="flex-center size-6">
+          <Icon icon={icon} size={'fit'} />
+        </div>
+        <div>{message}</div>
+        {['success', 'error'].includes(messageType) && (
+          <div
+            className="flex-center size-5 hover:cursor-pointer"
+            onClick={() => toast.dismiss(t?.id)}
+          >
+            <Icon icon={IconClose} size={'fit'} />
+          </div>
+        )}
+      </div>
+      {toastType === 'info-message' && <>{toastChildren}</>}
+      {toastType === 'prerequisite-message' && (
+        <div className="flex flex-col w-full pl-6">
+          <div
+            className="flex items-center gap-x-2 text-gray-700 cursor-pointer"
+            onClick={() => setIsExpand(!isExpand)}
+          >
+            <p className="typo-para-medium">See more</p>
+            <div
+              className={cn(
+                'flex-center size-fit rotate-90 transition-transform duration-200',
+                {
+                  '-rotate-90': isExpand
+                }
+              )}
+            >
+              <Icon icon={IconChevronRight} size={'sm'} />
+            </div>
+          </div>
+          <div
+            className={cn('h-0 pt-0 opacity-0 transition-all duration-200', {
+              'h-fit pt-3 opacity-100': isExpand
+            })}
+          >
+            {toastChildren}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ToastMessage;
diff --git a/ui/dashboard/src/components/tooltip/index.tsx b/ui/dashboard/src/components/tooltip/index.tsx
new file mode 100644
index 0000000000..217087b10d
--- /dev/null
+++ b/ui/dashboard/src/components/tooltip/index.tsx
@@ -0,0 +1,65 @@
+import React, { forwardRef, ReactNode, Ref } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from 'utils/style';
+
+export type TooltipProps = {
+  content?: string;
+  trigger: ReactNode;
+  className?: string;
+};
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const TooltipRoot = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipPortal = TooltipPrimitive.Portal;
+const TooltipArrow = TooltipPrimitive.Arrow;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 5, ...props }, ref) => (
+  <TooltipPortal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none rounded-md px-3 py-1.5 text-para-medium will-change-[transform,opacity] bg-additional-gray-150 text-white',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPortal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+const Tooltip = forwardRef(
+  ({ content, trigger, className }: TooltipProps, ref: Ref<HTMLDivElement>) => {
+    return (
+      <TooltipProvider>
+        <TooltipRoot>
+          <TooltipTrigger type="button" asChild>
+            {trigger}
+          </TooltipTrigger>
+          {content && (
+            <TooltipContent ref={ref} className={className} sideOffset={5}>
+              {content}
+              <TooltipArrow className="fill-additional-gray-150" />
+            </TooltipContent>
+          )}
+        </TooltipRoot>
+      </TooltipProvider>
+    );
+  }
+);
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipArrow,
+  TooltipPortal
+};
diff --git a/ui/dashboard/src/constants/app.ts b/ui/dashboard/src/constants/app.ts
new file mode 100644
index 0000000000..7af82b12b3
--- /dev/null
+++ b/ui/dashboard/src/constants/app.ts
@@ -0,0 +1 @@
+export const LIST_PAGE_SIZE = 50;
diff --git a/ui/dashboard/src/constants/collection.ts b/ui/dashboard/src/constants/collection.ts
new file mode 100644
index 0000000000..b9a72ec033
--- /dev/null
+++ b/ui/dashboard/src/constants/collection.ts
@@ -0,0 +1,20 @@
+import { OrderBy } from '@types';
+
+interface SortingListFields {
+  [x: string]: OrderBy;
+}
+
+export const sortingListFields: SortingListFields = {
+  default: 'DEFAULT',
+  id: 'ID',
+  name: 'NAME',
+  email: 'EMAIL',
+  role: 'ROLE',
+  urlCode: 'URL_CODE',
+  createdAt: 'CREATED_AT',
+  updatedAt: 'UPDATED_AT',
+  userCount: 'USER_COUNT',
+  environmentCount: 'ENVIRONMENT_COUNT',
+  projectCount: 'PROJECT_COUNT',
+  featureFlagCount: 'FEATURE_COUNT'
+};
diff --git a/ui/dashboard/src/constants/routing.ts b/ui/dashboard/src/constants/routing.ts
index 27e015c2e9..64aa86e265 100644
--- a/ui/dashboard/src/constants/routing.ts
+++ b/ui/dashboard/src/constants/routing.ts
@@ -10,6 +10,8 @@ export const PAGE_PATH_GOALS = '/goals';
 export const PAGE_PATH_APIKEYS = '/api-keys';
 export const PAGE_PATH_USER_SEGMENTS = '/segments';
 export const PAGE_PATH_USERS = '/users';
+export const PAGE_PATH_USAGE = '/usage';
+export const PAGE_PATH_MEMBERS = '/members';
 export const PAGE_PATH_AUDIT_LOGS = '/audit-logs';
 export const PAGE_PATH_DEBUGGER = '/debugger';
 export const PAGE_PATH_ACCOUNTS = '/accounts';
@@ -18,6 +20,8 @@ export const PAGE_PATH_SETTINGS = '/settings';
 export const PAGE_PATH_PUSHES = '/pushes';
 export const PAGE_PATH_NOTIFICATIONS = '/notifications';
 export const PAGE_PATH_PROJECTS = '/projects';
+export const PAGE_PATH_PROJECT_DETAILS = '/project/:projectId';
+export const PAGE_PATH_ORGANIZATIONS = '/organizations';
 export const PAGE_PATH_ENVIRONMENTS = '/environments';
 
 export const PAGE_PATH_FEATURE_CLONE = '/clone';
@@ -32,3 +36,6 @@ export const PAGE_PATH_FEATURE_HISTORY = '/history';
 
 export const PAGE_PATH_AUTH_CALLBACK = '/auth/callback';
 export const PAGE_PATH_AUTH_SIGNIN = '/auth/signin';
+
+export const PAGE_PATH_INTEGRATION_SLACK = '/integration/slack';
+export const PAGE_PATH_INTEGRATION_FCM = '/integration/fcm';
diff --git a/ui/dashboard/src/constants/styles.ts b/ui/dashboard/src/constants/styles.ts
index 4ba9e55d8b..8477869c3b 100644
--- a/ui/dashboard/src/constants/styles.ts
+++ b/ui/dashboard/src/constants/styles.ts
@@ -1,4 +1,5 @@
 export const ICON_SIZE_MAPPING = {
+  fit: 'icon-size-fit',
   xxs: 'icon-size-xxs',
   xs: 'icon-size-xs',
   sm: 'icon-size-sm',
diff --git a/ui/dashboard/src/elements/collection/collection-empty/index.tsx b/ui/dashboard/src/elements/collection/collection-empty/index.tsx
new file mode 100644
index 0000000000..77bdffdd1b
--- /dev/null
+++ b/ui/dashboard/src/elements/collection/collection-empty/index.tsx
@@ -0,0 +1,45 @@
+import type { ReactElement } from 'react';
+import EmptyState from 'elements/empty-state';
+
+type CollectionEmptyProps<Data extends object> = {
+  data: Data[];
+  empty: ReactElement;
+  searchQuery?: string;
+  onClear?: () => void;
+};
+
+export const NoResultsCollection = ({ onClear }: { onClear?: () => void }) => {
+  return (
+    <EmptyState.Root variant="no-search" size="lg">
+      <EmptyState.Illustration />
+      <EmptyState.Body>
+        <EmptyState.Title>{`No results found`}</EmptyState.Title>
+        <EmptyState.Description>{`We couldn't find what you're looking for`}</EmptyState.Description>
+      </EmptyState.Body>
+      {onClear && (
+        <EmptyState.Actions>
+          <EmptyState.ActionButton variant="primary" onClick={onClear}>
+            {`Clear search & filters`}
+          </EmptyState.ActionButton>
+        </EmptyState.Actions>
+      )}
+    </EmptyState.Root>
+  );
+};
+
+const CollectionEmpty = <Data extends object>({
+  data,
+  empty,
+  searchQuery,
+  onClear
+}: CollectionEmptyProps<Data>) => {
+  if (data.length === 0) {
+    return searchQuery ? (
+      <NoResultsCollection onClear={onClear} />
+    ) : (
+      <div className="h-full flex-center">{empty}</div>
+    );
+  }
+};
+
+export default CollectionEmpty;
diff --git a/ui/dashboard/src/elements/data-table/index.tsx b/ui/dashboard/src/elements/data-table/index.tsx
new file mode 100644
index 0000000000..e6738b1e09
--- /dev/null
+++ b/ui/dashboard/src/elements/data-table/index.tsx
@@ -0,0 +1,129 @@
+import { ReactElement, useCallback, useState } from 'react';
+import {
+  type ColumnDef,
+  type TableState,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  SortingState,
+  getSortedRowModel,
+  Updater
+} from '@tanstack/react-table';
+import { cn } from 'utils/style';
+import { IconSorting, IconSortingDown, IconSortingUp } from '@icons';
+import Table from 'components/table';
+import PageLayout from 'elements/page-layout';
+
+export interface DataTableProps<TData, TValue> {
+  data: TData[];
+  columns: ColumnDef<TData, TValue>[];
+  state?: Partial<TableState>;
+  emptyCollection?: ReactElement;
+  isLoading?: boolean;
+  onRowClick?: (data: TData) => void;
+  onSortingChange?: (v: SortingState) => void;
+}
+
+export const DataTable = <TData, TValue>({
+  data,
+  columns,
+  state,
+  emptyCollection,
+  isLoading,
+  onRowClick,
+  onSortingChange
+}: DataTableProps<TData, TValue>) => {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const onSortingChangeHandler = useCallback(
+    (updater: Updater<SortingState>) => {
+      const newSorting =
+        typeof updater === 'function' ? updater(sorting) : updater;
+
+      setSorting(newSorting);
+      if (data.length > 0) onSortingChange?.(newSorting);
+    },
+    [sorting, onSortingChange]
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { ...state, sorting },
+    onSortingChange: onSortingChangeHandler,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    manualSorting: true
+  });
+
+  return (
+    <Table.Root>
+      <Table.Header>
+        {table.getHeaderGroups().map(headerGroup => (
+          <Table.Row key={headerGroup.id}>
+            {headerGroup.headers.map(header => (
+              <Table.Head
+                key={header.id}
+                onClick={header.column.getToggleSortingHandler()}
+                style={{ width: header.column.columnDef.size }}
+                className={cn({
+                  'cursor-pointer select-none':
+                    header.column.columnDef.enableSorting !== false
+                })}
+              >
+                {header.isPlaceholder ? null : (
+                  <div className="flex items-center gap-3">
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {header.column.columnDef.enableSorting !== false &&
+                      {
+                        asc: <IconSortingUp />,
+                        desc: <IconSortingDown />,
+                        false: <IconSorting />
+                      }[header.column.getIsSorted() as string]}
+                  </div>
+                )}
+              </Table.Head>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Header>
+      <Table.Body>
+        {isLoading ? (
+          <Table.Row>
+            <Table.Cell colSpan={columns.length}>
+              <PageLayout.LoadingState className="py-10" />
+            </Table.Cell>
+          </Table.Row>
+        ) : table.getRowModel().rows?.length ? (
+          table.getRowModel().rows.map(row => (
+            <Table.Row
+              key={row.id}
+              data-state={row.getIsSelected() && 'selected'}
+              data-hoverable={!!onRowClick}
+              onClick={() => onRowClick?.(row.original)}
+              className="shadow-card rounded-lg bg-white"
+            >
+              {row.getVisibleCells().map(cell => (
+                <Table.Cell
+                  key={cell.id}
+                  style={{ width: cell.column.columnDef.size }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))
+        ) : (
+          <Table.Row>
+            <Table.Cell className="pt-32" colSpan={columns.length}>
+              {emptyCollection}
+            </Table.Cell>
+          </Table.Row>
+        )}
+      </Table.Body>
+    </Table.Root>
+  );
+};
diff --git a/ui/dashboard/src/elements/empty-state/error.tsx b/ui/dashboard/src/elements/empty-state/error.tsx
new file mode 100644
index 0000000000..a5b197fe00
--- /dev/null
+++ b/ui/dashboard/src/elements/empty-state/error.tsx
@@ -0,0 +1,32 @@
+import EmptyState, { type EmptyStateProps } from 'elements/empty-state';
+
+interface ErrorStateProps {
+  size?: EmptyStateProps['size'];
+  title?: string;
+  description?: string;
+  onRetry?: () => void;
+}
+
+export const ErrorState = ({
+  size = 'lg',
+  title = `Oops! Something went wrong`,
+  description = `We're on it. Please try again later.`,
+  onRetry
+}: ErrorStateProps) => {
+  return (
+    <EmptyState.Root variant="error" size={size}>
+      <EmptyState.Illustration />
+      <EmptyState.Body>
+        <EmptyState.Title>{title}</EmptyState.Title>
+        <EmptyState.Description>{description}</EmptyState.Description>
+      </EmptyState.Body>
+      <EmptyState.Actions>
+        {onRetry && (
+          <EmptyState.ActionButton variant="primary" onClick={onRetry}>
+            {`Retry`}
+          </EmptyState.ActionButton>
+        )}
+      </EmptyState.Actions>
+    </EmptyState.Root>
+  );
+};
diff --git a/ui/dashboard/src/elements/empty-state/index.tsx b/ui/dashboard/src/elements/empty-state/index.tsx
new file mode 100644
index 0000000000..b0ee010a0b
--- /dev/null
+++ b/ui/dashboard/src/elements/empty-state/index.tsx
@@ -0,0 +1,90 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import emptyStateError from 'assets/empty-state/error.svg';
+import emptyStateNoData from 'assets/empty-state/no-data.svg';
+import emptyStateNoSearch from 'assets/empty-state/no-search.svg';
+import { createContext } from 'utils/create-context';
+import Button, { type ButtonProps } from 'components/button';
+
+export interface EmptyStateProps {
+  variant: 'error' | 'no-data' | 'no-search';
+  size: 'sm' | 'md' | 'lg';
+  children: ReactNode;
+}
+
+type EmptyStateContextValue = Omit<EmptyStateProps, 'children'>;
+
+const [EmptyStateProvider, useEmptyState] =
+  createContext<EmptyStateContextValue>({
+    name: 'EmptyStateProvider',
+    errorMessage: `useEmptyState returned is 'undefined'. Seems you forgot to wrap the components in "<EmptyState.Root />" `
+  });
+
+const EmptyStateRoot = ({ variant, size, children }: EmptyStateProps) => {
+  return (
+    <EmptyStateProvider value={{ variant, size }}>
+      <div className="flex flex-col items-center gap-4">{children}</div>
+    </EmptyStateProvider>
+  );
+};
+
+const EmptyStateIllustration = () => {
+  const { variant } = useEmptyState();
+
+  switch (variant) {
+    case 'error':
+      return <img alt="Error" className="w-fit" src={emptyStateError} />;
+
+    case 'no-data':
+      return <img alt="No Data" className="w-fit" src={emptyStateNoData} />;
+
+    case 'no-search':
+      return <img alt="No Search" className="w-fit" src={emptyStateNoSearch} />;
+  }
+};
+
+const EmptyStateBody = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="max-w-[350px] flex flex-col gap-2 text-center mx-auto">
+      {children}
+    </div>
+  );
+};
+
+const EmptyStateTitle = ({ children }: { children: string }) => {
+  return <div className="text-gray-900 typo-head-bold-medium">{children}</div>;
+};
+
+const EmptyStateDescription = ({ children }: { children: string }) => {
+  return <div className="text-gray-600 typo-para-small">{children}</div>;
+};
+
+const EmptyStateActions = ({ children }: PropsWithChildren) => {
+  return <div className="flex justify-center mt-3 gap-3">{children}</div>;
+};
+
+const EmptyStateActionButton = (props: Omit<ButtonProps, 'size'>) => {
+  const { size } = useEmptyState();
+  return (
+    <Button variant="primary" size={size === 'lg' ? 'md' : 'sm'} {...props} />
+  );
+};
+
+const Root = EmptyStateRoot;
+const Illustration = EmptyStateIllustration;
+const Body = EmptyStateBody;
+const Actions = EmptyStateActions;
+const Title = EmptyStateTitle;
+const Description = EmptyStateDescription;
+const ActionButton = EmptyStateActionButton;
+
+const EmptyState = {
+  Root,
+  Illustration,
+  Body,
+  Actions,
+  Title,
+  Description,
+  ActionButton
+};
+
+export default EmptyState;
diff --git a/ui/dashboard/src/elements/empty-state/no-data.tsx b/ui/dashboard/src/elements/empty-state/no-data.tsx
new file mode 100644
index 0000000000..caabda16ab
--- /dev/null
+++ b/ui/dashboard/src/elements/empty-state/no-data.tsx
@@ -0,0 +1,34 @@
+import EmptyState, { type EmptyStateProps } from 'elements/empty-state';
+
+interface NoDataStateProps {
+  size?: EmptyStateProps['size'];
+  title?: string;
+  description?: string;
+  onAdd?: () => void;
+}
+
+export const NoDataState = ({
+  size = 'md',
+  title = `No Data`,
+  description = `Your data will appear here!`,
+  onAdd
+}: NoDataStateProps) => {
+  return (
+    <EmptyState.Root variant="no-data" size={size}>
+      <EmptyState.Illustration />
+      <EmptyState.Body>
+        <EmptyState.Title>{title}</EmptyState.Title>
+        {description && (
+          <EmptyState.Description>{description}</EmptyState.Description>
+        )}
+        {onAdd && (
+          <EmptyState.Actions>
+            <EmptyState.ActionButton onClick={onAdd}>
+              {`Add`}
+            </EmptyState.ActionButton>
+          </EmptyState.Actions>
+        )}
+      </EmptyState.Body>
+    </EmptyState.Root>
+  );
+};
diff --git a/ui/dashboard/src/elements/filter/index.tsx b/ui/dashboard/src/elements/filter/index.tsx
new file mode 100644
index 0000000000..7b5eebb966
--- /dev/null
+++ b/ui/dashboard/src/elements/filter/index.tsx
@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import {
+  IconLaunchOutlined,
+  IconFilterListOutlined
+} from 'react-icons-material-design';
+import { useTranslation } from 'i18n';
+import Button from 'components/button';
+import Icon from 'components/icon';
+import SearchInput from 'components/search-input';
+
+interface FilterProps {
+  action?: ReactNode;
+  searchValue: string;
+  filterCount?: number;
+  onSearchChange: (value: string) => void;
+  onOpenFilter?: () => void;
+}
+
+const Filter = ({
+  action,
+  searchValue,
+  filterCount,
+  onSearchChange,
+  onOpenFilter
+}: FilterProps) => {
+  const { t } = useTranslation(['common', 'form']);
+  return (
+    <div className="flex lg:items-center justify-between flex-col lg:flex-row">
+      <div className="w-full lg:w-[365px]">
+        <SearchInput
+          placeholder={`${t('form:placeholder-search-input')}`}
+          value={searchValue}
+          onChange={onSearchChange}
+        />
+      </div>
+      <div className="flex items-center gap-4 mt-3 lg:mt-0">
+        <Button variant="text" className="flex-1 lg:flex-none">
+          <Icon icon={IconLaunchOutlined} size="sm" />
+          {t('documentation')}
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={onOpenFilter}
+          className="text-gray-600 shadow-border-gray-400 flex-1 lg:flex-none"
+        >
+          <Icon icon={IconFilterListOutlined} size="sm" />
+          {t('filter')}
+          {filterCount && (
+            <div className="size-5 flex-center rounded-full bg-gray-200 text-[11px] text-gray-700">
+              {filterCount}
+            </div>
+          )}
+        </Button>
+        {action}
+      </div>
+    </div>
+  );
+};
+
+export default Filter;
diff --git a/ui/dashboard/src/elements/page-details-header/index.tsx b/ui/dashboard/src/elements/page-details-header/index.tsx
new file mode 100644
index 0000000000..b630f927fd
--- /dev/null
+++ b/ui/dashboard/src/elements/page-details-header/index.tsx
@@ -0,0 +1,39 @@
+import {
+  IconAccessTimeOutlined,
+  IconArrowBackFilled
+} from 'react-icons-material-design';
+import { cn } from 'utils/style';
+import Icon from 'components/icon';
+
+export type PageDetailsHeaderProps = {
+  title: string;
+  description: string;
+  onBack: () => void;
+};
+
+const PageDetailsHeader = ({
+  title,
+  description,
+  onBack
+}: PageDetailsHeaderProps) => {
+  return (
+    <header className="grid pt-7 px-6">
+      <button
+        className={cn(
+          'size-6 flex-center rounded hover:shadow-border-gray-500',
+          'shadow-border-gray-400 text-gray-600'
+        )}
+        onClick={onBack}
+      >
+        <Icon icon={IconArrowBackFilled} size="xxs" />
+      </button>
+      <div className="text-gray-500 flex items-center gap-1.5 mt-4">
+        <Icon icon={IconAccessTimeOutlined} size="xxs" />
+        <p className="typo-para-small">{description}</p>
+      </div>
+      <h1 className="text-gray-900 typo-head-bold-huge mt-2">{title}</h1>
+    </header>
+  );
+};
+
+export default PageDetailsHeader;
diff --git a/ui/dashboard/src/elements/page-header/index.tsx b/ui/dashboard/src/elements/page-header/index.tsx
new file mode 100644
index 0000000000..b2d0fea0a3
--- /dev/null
+++ b/ui/dashboard/src/elements/page-header/index.tsx
@@ -0,0 +1,32 @@
+import {
+  IconHelpOutlineOutlined,
+  IconNotificationsNoneOutlined
+} from 'react-icons-material-design';
+import Icon from 'components/icon';
+import PageLayout from 'elements/page-layout';
+
+interface PageHeaderProps {
+  title: string;
+  description: string;
+}
+
+const PageHeader = ({ title, description }: PageHeaderProps) => {
+  return (
+    <PageLayout.Header>
+      <div className="flex justify-between items-center">
+        <h1 className="text-gray-900 typo-head-bold-huge">{title}</h1>
+        <div className="flex items-center gap-3 text-gray-500">
+          <button>
+            <Icon icon={IconHelpOutlineOutlined} size="sm" />
+          </button>
+          <button>
+            <Icon icon={IconNotificationsNoneOutlined} size="sm" />
+          </button>
+        </div>
+      </div>
+      <p className="text-gray-600 mt-3 text-sm">{description}</p>
+    </PageLayout.Header>
+  );
+};
+
+export default PageHeader;
diff --git a/ui/dashboard/src/elements/page-layout/context.ts b/ui/dashboard/src/elements/page-layout/context.ts
new file mode 100644
index 0000000000..56fb9fe0ed
--- /dev/null
+++ b/ui/dashboard/src/elements/page-layout/context.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'utils/create-context';
+import type { PageLayoutProps } from '.';
+
+type PageLayoutContextValue = Pick<PageLayoutProps, 'title'>;
+
+export const [PageLayoutProvider, usePageLayout] =
+  createContext<PageLayoutContextValue>({
+    name: 'PageLayoutProvider',
+    errorMessage: `usePageLayout returned is 'undefined'. Seems you forgot to wrap the components in "<PageLayout.Root />" `
+  });
diff --git a/ui/dashboard/src/elements/page-layout/index.tsx b/ui/dashboard/src/elements/page-layout/index.tsx
new file mode 100644
index 0000000000..c24890a617
--- /dev/null
+++ b/ui/dashboard/src/elements/page-layout/index.tsx
@@ -0,0 +1,86 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+import { cn } from 'utils/style';
+import Spinner from 'components/spinner';
+import { ErrorState } from '../empty-state/error';
+import { PageLayoutProvider } from './context';
+
+export interface PageLayoutProps {
+  title: string;
+  children: ReactNode;
+}
+
+export interface PageLayoutErrorState {
+  onRetry?: () => void;
+  className?: string;
+}
+
+export interface PageLayoutContentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const PageLayoutRoot = ({ title, children }: PageLayoutProps) => {
+  return (
+    <PageLayoutProvider value={{ title }}>
+      <div className="flex flex-col min-h-screen">
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              fallbackRender={({ resetErrorBoundary }) => (
+                <PageLayout.ErrorState onRetry={resetErrorBoundary} />
+              )}
+              onReset={reset}
+            >
+              {children}
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>
+      </div>
+    </PageLayoutProvider>
+  );
+};
+
+const PageLayoutLoadingState = ({ className }: { className?: string }) => {
+  return (
+    <div className={cn('w-full flex-center py-20', className)}>
+      <Spinner />
+    </div>
+  );
+};
+
+const PageLayoutErrorState = ({ onRetry, className }: PageLayoutErrorState) => {
+  return (
+    <div className={cn('h-full flex-grow flex-center', className)}>
+      <ErrorState onRetry={onRetry} />
+    </div>
+  );
+};
+
+const PageLayoutEmptyState = ({ children }: PropsWithChildren) => {
+  return <div className="h-full flex-grow flex-center">{children}</div>;
+};
+
+const PageLayoutHeader = ({ children }: PropsWithChildren) => {
+  return <div className="p-6 border-b border-gray-200">{children}</div>;
+};
+
+const PageLayoutContent = ({ children, className }: PageLayoutContentProps) => {
+  return (
+    <div className={cn('p-6 flex flex-1 flex-col h-full', className)}>
+      {children}
+    </div>
+  );
+};
+
+const PageLayout = {
+  Root: PageLayoutRoot,
+  Header: PageLayoutHeader,
+  Content: PageLayoutContent,
+  LoadingState: PageLayoutLoadingState,
+  ErrorState: PageLayoutErrorState,
+  EmptyState: PageLayoutEmptyState
+};
+
+export default PageLayout;
diff --git a/ui/dashboard/src/hooks/index.ts b/ui/dashboard/src/hooks/index.ts
index 23cd4c22fb..c134cf92be 100644
--- a/ui/dashboard/src/hooks/index.ts
+++ b/ui/dashboard/src/hooks/index.ts
@@ -1,2 +1,4 @@
 export * from './use-toggle-open';
 export * from './use-submit';
+export * from './use-toast';
+export * from './use-partial-state';
diff --git a/ui/dashboard/src/hooks/use-partial-state.ts b/ui/dashboard/src/hooks/use-partial-state.ts
new file mode 100644
index 0000000000..5a6b01596f
--- /dev/null
+++ b/ui/dashboard/src/hooks/use-partial-state.ts
@@ -0,0 +1,10 @@
+import { useCallback, useState } from 'react';
+
+export const usePartialState = <T extends object>(initialFilters: T) => {
+  const [state, setState] = useState<T>(initialFilters);
+  const onChange = useCallback((values: Partial<T>) => {
+    setState(old => ({ ...old, ...values }));
+  }, []);
+
+  return [state, onChange] as [T, (values: Partial<T>) => void];
+};
diff --git a/ui/dashboard/src/hooks/use-toast.tsx b/ui/dashboard/src/hooks/use-toast.tsx
new file mode 100644
index 0000000000..4da7424f5c
--- /dev/null
+++ b/ui/dashboard/src/hooks/use-toast.tsx
@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import toast, { Toast } from 'react-hot-toast';
+import ToastMessage from 'components/toast';
+
+type ToastType = 'toast' | 'info-message' | 'prerequisite-message';
+type MessageType = 'success' | 'info' | 'warning' | 'error';
+
+export type NotifyProps = {
+  toastType: ToastType;
+  messageType: MessageType;
+  message: ReactNode;
+  t?: Toast;
+  duration?: number;
+  toastChildren?: ReactNode;
+};
+
+export const useToast = () => {
+  const notify = ({
+    toastType,
+    messageType,
+    message,
+    duration = 5000,
+    toastChildren
+  }: NotifyProps) =>
+    toast.custom(
+      t => (
+        <ToastMessage
+          toastType={toastType}
+          messageType={messageType}
+          message={message}
+          t={t}
+          toastChildren={toastChildren}
+        />
+      ),
+      {
+        duration
+      }
+    );
+  return {
+    notify
+  };
+};
diff --git a/ui/dashboard/src/i18n/types.ts b/ui/dashboard/src/i18n/types.ts
index 58f45cbefd..726ef3ebe4 100644
--- a/ui/dashboard/src/i18n/types.ts
+++ b/ui/dashboard/src/i18n/types.ts
@@ -1,6 +1,6 @@
-export enum LanguageTypes {
+export enum Language {
   JAPANESE = 'ja',
   ENGLISH = 'en'
 }
 
-export type Namespace = 'common' | 'auth';
+export type Namespace = 'common' | 'auth' | 'form' | 'table';
diff --git a/ui/dashboard/src/i18n/utils.ts b/ui/dashboard/src/i18n/utils.ts
index a7949df083..dac3b598c1 100644
--- a/ui/dashboard/src/i18n/utils.ts
+++ b/ui/dashboard/src/i18n/utils.ts
@@ -1,4 +1,4 @@
 import i18n from './i18n';
-import { LanguageTypes } from './types';
+import { Language } from './types';
 
-export const getLanguage = () => i18n.language as LanguageTypes;
+export const getLanguage = () => i18n.language as Language;
diff --git a/ui/dashboard/src/index.css b/ui/dashboard/src/index.css
index eaeb654c2f..829741518b 100644
--- a/ui/dashboard/src/index.css
+++ b/ui/dashboard/src/index.css
@@ -71,4 +71,8 @@
   .sidebar-menu.active {
     @apply bg-primary-400 opacity-100;
   }
+
+  .tab-item.active {
+    @apply border-primary-500 text-primary-500;
+  }
 }
diff --git a/ui/dashboard/src/main.tsx b/ui/dashboard/src/main.tsx
index b769d9ccd6..90813f1e2e 100644
--- a/ui/dashboard/src/main.tsx
+++ b/ui/dashboard/src/main.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
+import { Toaster } from 'react-hot-toast';
 import 'unfonts.css';
 import App from 'app';
 import './index.css';
@@ -11,5 +12,6 @@ const root = ReactDOM.createRoot(
 root.render(
   <Suspense>
     <App />
+    <Toaster />
   </Suspense>
 );
diff --git a/ui/dashboard/src/pages/dashboard/index.tsx b/ui/dashboard/src/pages/dashboard/index.tsx
index 21e53975db..1568f325ea 100644
--- a/ui/dashboard/src/pages/dashboard/index.tsx
+++ b/ui/dashboard/src/pages/dashboard/index.tsx
@@ -11,7 +11,7 @@ import * as yup from 'yup';
 import { IconGoal } from '@icons';
 import { AvatarIcon, AvatarImage } from 'components/avatar';
 import { Badge } from 'components/badge';
-import { Button } from 'components/button';
+import Button from 'components/button';
 import { ButtonBar } from 'components/button-bar';
 import Divider from 'components/divider';
 import Form from 'components/form';
diff --git a/ui/dashboard/src/pages/feature-flags/index.tsx b/ui/dashboard/src/pages/feature-flags/index.tsx
new file mode 100644
index 0000000000..d64744f97c
--- /dev/null
+++ b/ui/dashboard/src/pages/feature-flags/index.tsx
@@ -0,0 +1,14 @@
+import PageHeader from 'elements/page-header';
+
+const FeatureFlagsPage = () => {
+  return (
+    <div className="flex flex-col size-full overflow-auto">
+      <PageHeader
+        title="Feature Flags"
+        description="Select a flag to manage the environment-specific targeting and rollout rules"
+      />
+    </div>
+  );
+};
+
+export default FeatureFlagsPage;
diff --git a/ui/dashboard/src/pages/members/collection-layout/data-collection.tsx b/ui/dashboard/src/pages/members/collection-layout/data-collection.tsx
new file mode 100644
index 0000000000..82402a5edd
--- /dev/null
+++ b/ui/dashboard/src/pages/members/collection-layout/data-collection.tsx
@@ -0,0 +1,96 @@
+import { IconMoreHorizOutlined } from 'react-icons-material-design';
+import type { ColumnDef } from '@tanstack/react-table';
+import { useTranslation } from 'i18n';
+import { Project } from '@types';
+import { useFormatDateTime } from 'utils/date-time';
+import Icon from 'components/icon';
+
+export const useColumns = (): ColumnDef<Project>[] => {
+  const { t } = useTranslation(['common', 'table']);
+  const formatDateTime = useFormatDateTime();
+
+  return [
+    {
+      accessorKey: 'name',
+      header: `${t('name')}`,
+      size: 250,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="underline text-primary-500 typo-para-medium">
+            {project.name}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'creatorEmail',
+      header: `${t('maintainer')}`,
+      size: 350,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {project.creatorEmail}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'environmentCount',
+      header: `${t('environments')}`,
+      size: 120,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {project.environmentCount}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'featureFlagCount',
+      header: t('table:flags'),
+      size: 100,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {project.featureFlagCount}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'createdAt',
+      header: `${t('table:created-at')}`,
+      size: 160,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {formatDateTime(project.createdAt)}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'action',
+      size: 60,
+      header: '',
+      meta: {
+        align: 'center',
+        style: { textAlign: 'center', fitContent: true }
+      },
+      enableSorting: false,
+      cell: () => {
+        return (
+          <button className="flex-center text-gray-600">
+            <Icon icon={IconMoreHorizOutlined} size="sm" />
+          </button>
+        );
+      }
+    }
+  ];
+};
diff --git a/ui/dashboard/src/pages/members/collection-layout/empty-collection.tsx b/ui/dashboard/src/pages/members/collection-layout/empty-collection.tsx
new file mode 100644
index 0000000000..2c94b9afab
--- /dev/null
+++ b/ui/dashboard/src/pages/members/collection-layout/empty-collection.tsx
@@ -0,0 +1,30 @@
+import { IconAddOutlined } from 'react-icons-material-design';
+import { useTranslation } from 'i18n';
+import EmptyState from 'elements/empty-state';
+
+export const EmptyCollection = ({ onAdd }: { onAdd?: () => void }) => {
+  const isProjectManagement = onAdd !== undefined;
+  const { t } = useTranslation(['common', 'table']);
+
+  return (
+    <EmptyState.Root variant="no-data" size="lg">
+      <EmptyState.Illustration />
+      <EmptyState.Body>
+        <EmptyState.Title>{t(`table:empty.project-title`)}</EmptyState.Title>
+        <EmptyState.Description>
+          {isProjectManagement
+            ? t(`table:empty.project-desc`)
+            : t(`table:empty.project-org-desc`)}
+        </EmptyState.Description>
+      </EmptyState.Body>
+      {isProjectManagement && (
+        <EmptyState.Actions>
+          <EmptyState.ActionButton variant="primary" onClick={onAdd}>
+            <IconAddOutlined />
+            {t(`new-project`)}
+          </EmptyState.ActionButton>
+        </EmptyState.Actions>
+      )}
+    </EmptyState.Root>
+  );
+};
diff --git a/ui/dashboard/src/pages/members/collection-loader/index.tsx b/ui/dashboard/src/pages/members/collection-loader/index.tsx
new file mode 100644
index 0000000000..9d8b1eec59
--- /dev/null
+++ b/ui/dashboard/src/pages/members/collection-loader/index.tsx
@@ -0,0 +1,76 @@
+import { SortingState } from '@tanstack/react-table';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { sortingListFields } from 'constants/collection';
+import Pagination from 'components/pagination';
+import CollectionEmpty from 'elements/collection/collection-empty';
+import { DataTable } from 'elements/data-table';
+import PageLayout from 'elements/page-layout';
+import { useColumns } from '../collection-layout/data-collection';
+import { EmptyCollection } from '../collection-layout/empty-collection';
+import { ProjectsFilters } from '../types';
+import { useFetchProjects } from './use-fetch-projects';
+
+const CollectionLoader = ({
+  onAdd,
+  filters,
+  setFilters
+}: {
+  onAdd?: () => void;
+  filters: ProjectsFilters;
+  setFilters: (values: Partial<ProjectsFilters>) => void;
+}) => {
+  const columns = useColumns();
+  const {
+    data: collection,
+    isLoading,
+    refetch,
+    isError
+  } = useFetchProjects({ ...filters });
+
+  const onSortingChangeHandler = (sorting: SortingState) => {
+    const updateOrderBy =
+      sorting.length > 0
+        ? sortingListFields[sorting[0].id]
+        : sortingListFields.default;
+
+    setFilters({
+      orderBy: updateOrderBy,
+      orderDirection: sorting[0]?.desc ? 'DESC' : 'ASC'
+    });
+  };
+
+  const projects = collection?.projects || [];
+  const totalCount = Number(collection?.totalCount) || 0;
+
+  const emptyState = (
+    <CollectionEmpty
+      data={projects}
+      searchQuery={filters.searchQuery}
+      onClear={() => setFilters({ searchQuery: '' })}
+      empty={<EmptyCollection onAdd={onAdd} />}
+    />
+  );
+
+  return isError ? (
+    <PageLayout.ErrorState onRetry={refetch} />
+  ) : (
+    <>
+      <DataTable
+        isLoading={isLoading}
+        data={projects}
+        columns={columns}
+        onSortingChange={onSortingChangeHandler}
+        emptyCollection={emptyState}
+      />
+      {totalCount > LIST_PAGE_SIZE && !isLoading && (
+        <Pagination
+          page={filters.page}
+          totalCount={totalCount}
+          onChange={page => setFilters({ page })}
+        />
+      )}
+    </>
+  );
+};
+
+export default CollectionLoader;
diff --git a/ui/dashboard/src/pages/members/collection-loader/use-fetch-projects.ts b/ui/dashboard/src/pages/members/collection-loader/use-fetch-projects.ts
new file mode 100644
index 0000000000..2e5e1eb3d9
--- /dev/null
+++ b/ui/dashboard/src/pages/members/collection-loader/use-fetch-projects.ts
@@ -0,0 +1,32 @@
+import { useQueryProjects } from '@queries/projects';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { OrderBy, OrderDirection } from '@types';
+
+export const useFetchProjects = ({
+  page = 1,
+  pageSize,
+  orderBy,
+  searchQuery,
+  orderDirection,
+  organizationIds
+}: {
+  pageSize?: number;
+  page?: number;
+  searchQuery?: string;
+  orderBy?: OrderBy;
+  orderDirection?: OrderDirection;
+  organizationIds?: string[];
+} = {}) => {
+  const cursor = (page - 1) * LIST_PAGE_SIZE;
+
+  return useQueryProjects({
+    params: {
+      pageSize: pageSize || LIST_PAGE_SIZE,
+      cursor: String(cursor),
+      orderBy,
+      orderDirection,
+      searchKeyword: searchQuery,
+      organizationIds
+    }
+  });
+};
diff --git a/ui/dashboard/src/pages/members/index.tsx b/ui/dashboard/src/pages/members/index.tsx
new file mode 100644
index 0000000000..63d1ffc5cb
--- /dev/null
+++ b/ui/dashboard/src/pages/members/index.tsx
@@ -0,0 +1,14 @@
+import PageHeader from 'elements/page-header';
+
+const ProjectsPage = () => {
+  return (
+    <div className="flex flex-col size-full overflow-auto">
+      <PageHeader
+        title="Projects"
+        description="Manage all projects for this environment."
+      />
+    </div>
+  );
+};
+
+export default ProjectsPage;
diff --git a/ui/dashboard/src/pages/members/types.ts b/ui/dashboard/src/pages/members/types.ts
new file mode 100644
index 0000000000..bbc859cbd6
--- /dev/null
+++ b/ui/dashboard/src/pages/members/types.ts
@@ -0,0 +1,17 @@
+import { SortingState } from '@tanstack/react-table';
+import { OrderBy, OrderDirection, Project } from '@types';
+
+export interface ProjectsFilters {
+  page: number;
+  orderBy: OrderBy;
+  orderDirection: OrderDirection;
+  searchQuery: string;
+  disabled?: boolean;
+  organizationIds?: string[];
+}
+
+export interface CollectionProps {
+  isLoading?: boolean;
+  onSortingChange: (v: SortingState) => void;
+  projects: Project[];
+}
diff --git a/ui/dashboard/src/pages/not-found/index.tsx b/ui/dashboard/src/pages/not-found/index.tsx
index 2241098300..a34bb1c263 100644
--- a/ui/dashboard/src/pages/not-found/index.tsx
+++ b/ui/dashboard/src/pages/not-found/index.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { PAGE_PATH_ROOT } from 'constants/routing';
-import { Button } from 'components/button';
+import Button from 'components/button';
 
 const NotFoundPage = () => {
   const navigate = useNavigate();
diff --git a/ui/dashboard/src/pages/organization-details/index.tsx b/ui/dashboard/src/pages/organization-details/index.tsx
new file mode 100644
index 0000000000..a693b4dc7e
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/index.tsx
@@ -0,0 +1,15 @@
+import { useTranslation } from 'i18n';
+import PageLayout from 'elements/page-layout';
+import PageLoader from './page-loader';
+
+const OrganizationDetails = () => {
+  const { t } = useTranslation(['common']);
+
+  return (
+    <PageLayout.Root title={t('organizations')}>
+      <PageLoader />
+    </PageLayout.Root>
+  );
+};
+
+export default OrganizationDetails;
diff --git a/ui/dashboard/src/pages/organization-details/members/collection-layout/data-collection.tsx b/ui/dashboard/src/pages/organization-details/members/collection-layout/data-collection.tsx
new file mode 100644
index 0000000000..f2c7a52832
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/members/collection-layout/data-collection.tsx
@@ -0,0 +1,88 @@
+import { IconMoreHorizOutlined } from 'react-icons-material-design';
+import type { ColumnDef } from '@tanstack/react-table';
+import { useTranslation } from 'i18n';
+import { Account } from '@types';
+import { useFormatDateTime } from 'utils/date-time';
+import Icon from 'components/icon';
+
+export const useColumns = (): ColumnDef<Account>[] => {
+  const { t } = useTranslation(['common', 'table']);
+  const formatDateTime = useFormatDateTime();
+
+  return [
+    {
+      accessorKey: 'email',
+      header: `${t('name')}`,
+      size: 350,
+      cell: ({ row }) => {
+        const account = row.original;
+        return (
+          <div className="flex flex-col gap-0.5">
+            <div className="underline text-primary-500 typo-para-medium">
+              {account.name}
+            </div>
+            <div className="typo-para-medium text-gray-700">
+              {account.email}
+            </div>
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'organizationRole',
+      header: `${t('role')}`,
+      size: 300,
+      cell: ({ row }) => {
+        const account = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {String(account.organizationRole).split('_')[1]}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'environmentCount',
+      header: `${t('environments')}`,
+      size: 120,
+      cell: ({ row }) => {
+        const account = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {account.environmentRoles.length}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'createdAt',
+      header: `${t('table:created-at')}`,
+      size: 180,
+      cell: ({ row }) => {
+        const account = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {formatDateTime(account.createdAt)}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'action',
+      size: 60,
+      header: '',
+      meta: {
+        align: 'center',
+        style: { textAlign: 'center', fitContent: true }
+      },
+      enableSorting: false,
+      cell: () => {
+        return (
+          <button className="flex-center text-gray-600">
+            <Icon icon={IconMoreHorizOutlined} size="sm" />
+          </button>
+        );
+      }
+    }
+  ];
+};
diff --git a/ui/dashboard/src/pages/organization-details/members/collection-layout/empty-collection.tsx b/ui/dashboard/src/pages/organization-details/members/collection-layout/empty-collection.tsx
new file mode 100644
index 0000000000..767038d880
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/members/collection-layout/empty-collection.tsx
@@ -0,0 +1,18 @@
+import { useTranslation } from 'i18n';
+import EmptyState from 'elements/empty-state';
+
+export const EmptyCollection = () => {
+  const { t } = useTranslation(['common', 'table']);
+
+  return (
+    <EmptyState.Root variant="no-data" size="lg">
+      <EmptyState.Illustration />
+      <EmptyState.Body>
+        <EmptyState.Title>{t(`table:empty.user-title`)}</EmptyState.Title>
+        <EmptyState.Description>
+          {t(`table:empty.user-desc`)}
+        </EmptyState.Description>
+      </EmptyState.Body>
+    </EmptyState.Root>
+  );
+};
diff --git a/ui/dashboard/src/pages/organization-details/members/collection-loader/index.tsx b/ui/dashboard/src/pages/organization-details/members/collection-loader/index.tsx
new file mode 100644
index 0000000000..62549217f9
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/members/collection-loader/index.tsx
@@ -0,0 +1,74 @@
+import { SortingState } from '@tanstack/react-table';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { sortingListFields } from 'constants/collection';
+import { OrganizationMembersFilters } from 'pages/organization-details/types';
+import Pagination from 'components/pagination';
+import CollectionEmpty from 'elements/collection/collection-empty';
+import { DataTable } from 'elements/data-table';
+import PageLayout from 'elements/page-layout';
+import { useColumns } from '../collection-layout/data-collection';
+import { EmptyCollection } from '../collection-layout/empty-collection';
+import { useFetchUsers } from './use-fetch-users';
+
+const CollectionLoader = ({
+  filters,
+  setFilters
+}: {
+  filters: OrganizationMembersFilters;
+  setFilters: (values: Partial<OrganizationMembersFilters>) => void;
+}) => {
+  const columns = useColumns();
+  const {
+    data: collection,
+    isLoading,
+    refetch,
+    isError
+  } = useFetchUsers({ ...filters });
+
+  const onSortingChangeHandler = (sorting: SortingState) => {
+    const updateOrderBy =
+      sorting.length > 0
+        ? sortingListFields[sorting[0].id]
+        : sortingListFields.default;
+
+    setFilters({
+      orderBy: updateOrderBy,
+      orderDirection: sorting[0]?.desc ? 'DESC' : 'ASC'
+    });
+  };
+
+  const accounts = collection?.accounts || [];
+  const totalCount = Number(collection?.totalCount) || 0;
+
+  const emptyState = (
+    <CollectionEmpty
+      data={accounts}
+      searchQuery={filters.searchQuery}
+      onClear={() => setFilters({ searchQuery: '' })}
+      empty={<EmptyCollection />}
+    />
+  );
+
+  return isError ? (
+    <PageLayout.ErrorState onRetry={refetch} />
+  ) : (
+    <>
+      <DataTable
+        isLoading={isLoading}
+        data={accounts}
+        columns={columns}
+        onSortingChange={onSortingChangeHandler}
+        emptyCollection={emptyState}
+      />
+      {totalCount > LIST_PAGE_SIZE && !isLoading && (
+        <Pagination
+          page={filters.page}
+          totalCount={totalCount}
+          onChange={page => setFilters({ page })}
+        />
+      )}
+    </>
+  );
+};
+
+export default CollectionLoader;
diff --git a/ui/dashboard/src/pages/organization-details/members/collection-loader/use-fetch-users.ts b/ui/dashboard/src/pages/organization-details/members/collection-loader/use-fetch-users.ts
new file mode 100644
index 0000000000..e06541fe8a
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/members/collection-loader/use-fetch-users.ts
@@ -0,0 +1,32 @@
+import { useQueryAccounts } from '@queries/accounts';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { OrderBy, OrderDirection } from '@types';
+
+export const useFetchUsers = ({
+  page = 1,
+  pageSize,
+  orderBy,
+  searchQuery,
+  orderDirection,
+  organizationId
+}: {
+  pageSize?: number;
+  page?: number;
+  searchQuery?: string;
+  orderBy?: OrderBy;
+  orderDirection?: OrderDirection;
+  organizationId?: string;
+} = {}) => {
+  const cursor = (page - 1) * LIST_PAGE_SIZE;
+
+  return useQueryAccounts({
+    params: {
+      pageSize: pageSize || LIST_PAGE_SIZE,
+      cursor: String(cursor),
+      orderBy,
+      orderDirection,
+      searchKeyword: searchQuery,
+      organizationId
+    }
+  });
+};
diff --git a/ui/dashboard/src/pages/organization-details/members/index.tsx b/ui/dashboard/src/pages/organization-details/members/index.tsx
new file mode 100644
index 0000000000..87f9ea393d
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/members/index.tsx
@@ -0,0 +1,41 @@
+import { useParams } from 'react-router-dom';
+import { usePartialState } from 'hooks';
+import pickBy from 'lodash/pickBy';
+import { OrderBy, OrderDirection } from '@types';
+import { isNotEmpty } from 'utils/data-type';
+import { useSearchParams } from 'utils/search-params';
+import Filter from 'elements/filter';
+import { OrganizationMembersFilters } from '../types';
+import CollectionLoader from './collection-loader';
+
+const OrganizationMembers = () => {
+  const { organizationId } = useParams();
+  const { searchOptions, onChangSearchParams } = useSearchParams();
+
+  const [filters, setFilters] = usePartialState<OrganizationMembersFilters>({
+    page: Number(searchOptions.page) || 1,
+    orderBy: (searchOptions.orderBy as OrderBy) || 'CREATED_AT',
+    orderDirection: (searchOptions.orderDirection as OrderDirection) || 'DESC',
+    searchQuery: (searchOptions.searchQuery as string) || ''
+  });
+
+  const onChangeFilters = (values: Partial<OrganizationMembersFilters>) => {
+    const options = pickBy({ ...filters, ...values }, v => isNotEmpty(v));
+    onChangSearchParams(options);
+    setFilters({ ...values });
+  };
+
+  const filterParams = { ...filters, organizationId };
+
+  return (
+    <>
+      <Filter
+        searchValue={filters.searchQuery}
+        onSearchChange={searchQuery => onChangeFilters({ searchQuery })}
+      />
+      <CollectionLoader filters={filterParams} setFilters={onChangeFilters} />
+    </>
+  );
+};
+
+export default OrganizationMembers;
diff --git a/ui/dashboard/src/pages/organization-details/page-content.tsx b/ui/dashboard/src/pages/organization-details/page-content.tsx
new file mode 100644
index 0000000000..29e59f4d85
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/page-content.tsx
@@ -0,0 +1,70 @@
+import { Navigate, Route, Routes, useParams } from 'react-router-dom';
+import {
+  PAGE_PATH_MEMBERS,
+  PAGE_PATH_ORGANIZATIONS,
+  PAGE_PATH_PROJECTS,
+  PAGE_PATH_SETTINGS
+} from 'constants/routing';
+import { useTranslation } from 'i18n';
+import { Organization } from '@types';
+import { Tabs, TabsList, TabsContent, TabsLink } from 'components/tabs-link';
+import PageLayout from 'elements/page-layout';
+import OrganizationUsers from './members';
+import OrganizationProjects from './projects';
+import OrganizationSettings from './settings';
+import { TabItem } from './types';
+
+const PageContent = ({ organization }: { organization: Organization }) => {
+  const { t } = useTranslation(['common']);
+  const { organizationId } = useParams();
+  const url = `${PAGE_PATH_ORGANIZATIONS}/${organizationId}`;
+
+  const organizationTabs: Array<TabItem> = [
+    {
+      title: t(`projects`),
+      to: PAGE_PATH_PROJECTS
+    },
+    {
+      title: t(`members`),
+      to: PAGE_PATH_MEMBERS
+    },
+    {
+      title: t(`settings`),
+      to: PAGE_PATH_SETTINGS
+    }
+  ];
+
+  return (
+    <PageLayout.Content className="pt-4">
+      <Tabs>
+        <TabsList>
+          {organizationTabs.map((item, index) => (
+            <TabsLink key={index} to={`${url}${item.to}`}>
+              {item.title}
+            </TabsLink>
+          ))}
+        </TabsList>
+
+        <TabsContent className="pt-2">
+          <Routes>
+            <Route
+              index
+              element={<Navigate to={`${url}${PAGE_PATH_PROJECTS}`} replace />}
+            />
+            <Route
+              path={PAGE_PATH_PROJECTS}
+              element={<OrganizationProjects />}
+            />
+            <Route path={PAGE_PATH_MEMBERS} element={<OrganizationUsers />} />
+            <Route
+              path={PAGE_PATH_SETTINGS}
+              element={<OrganizationSettings organization={organization} />}
+            />
+          </Routes>
+        </TabsContent>
+      </Tabs>
+    </PageLayout.Content>
+  );
+};
+
+export default PageContent;
diff --git a/ui/dashboard/src/pages/organization-details/page-loader.tsx b/ui/dashboard/src/pages/organization-details/page-loader.tsx
new file mode 100644
index 0000000000..2bfdb6c7e2
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/page-loader.tsx
@@ -0,0 +1,41 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { useQueryOrganizationDetails } from '@queries/organization-details';
+import { PAGE_PATH_ORGANIZATIONS } from 'constants/routing';
+import { useFormatDateTime } from 'utils/date-time';
+import PageDetailsHeader from 'elements/page-details-header';
+import PageLayout from 'elements/page-layout';
+import PageContent from './page-content';
+
+const PageLoader = () => {
+  const navigate = useNavigate();
+  const formatDateTime = useFormatDateTime();
+  const { organizationId } = useParams();
+
+  const { data, isLoading, refetch, isError } = useQueryOrganizationDetails({
+    params: { id: organizationId! }
+  });
+
+  const organization = data?.organization;
+  const isErrorState = isError || !organization;
+
+  return (
+    <>
+      {isLoading ? (
+        <PageLayout.LoadingState />
+      ) : isErrorState ? (
+        <PageLayout.ErrorState onRetry={refetch} />
+      ) : (
+        <>
+          <PageDetailsHeader
+            title={organization.name}
+            description={`Created ${formatDateTime(organization.createdAt)}`}
+            onBack={() => navigate(`${PAGE_PATH_ORGANIZATIONS}`)}
+          />
+          <PageContent organization={organization} />
+        </>
+      )}
+    </>
+  );
+};
+
+export default PageLoader;
diff --git a/ui/dashboard/src/pages/organization-details/projects/index.tsx b/ui/dashboard/src/pages/organization-details/projects/index.tsx
new file mode 100644
index 0000000000..3f4172f1b7
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/projects/index.tsx
@@ -0,0 +1,45 @@
+import { useParams } from 'react-router-dom';
+import { usePartialState } from 'hooks';
+import pickBy from 'lodash/pickBy';
+import { OrderBy, OrderDirection } from '@types';
+import { isNotEmpty } from 'utils/data-type';
+import { useSearchParams } from 'utils/search-params';
+import CollectionLoader from 'pages/projects/collection-loader';
+import { ProjectsFilters } from 'pages/projects/types';
+import Filter from 'elements/filter';
+import { OrganizationProjectFilters } from '../types';
+
+const OrganizationProjects = () => {
+  const { organizationId } = useParams();
+  const { searchOptions, onChangSearchParams } = useSearchParams();
+
+  const [filters, setFilters] = usePartialState<OrganizationProjectFilters>({
+    page: Number(searchOptions.page) || 1,
+    orderBy: (searchOptions.orderBy as OrderBy) || 'CREATED_AT',
+    orderDirection: (searchOptions.orderDirection as OrderDirection) || 'DESC',
+    searchQuery: (searchOptions.searchQuery as string) || ''
+  });
+
+  const onChangeFilters = (values: Partial<OrganizationProjectFilters>) => {
+    const options = pickBy({ ...filters, ...values }, v => isNotEmpty(v));
+    onChangSearchParams(options);
+    setFilters({ ...values });
+  };
+
+  const filterParams: ProjectsFilters = {
+    ...filters,
+    organizationIds: [organizationId!]
+  };
+
+  return (
+    <>
+      <Filter
+        searchValue={filters.searchQuery}
+        onSearchChange={searchQuery => onChangeFilters({ searchQuery })}
+      />
+      <CollectionLoader filters={filterParams} setFilters={onChangeFilters} />
+    </>
+  );
+};
+
+export default OrganizationProjects;
diff --git a/ui/dashboard/src/pages/organization-details/settings/index.tsx b/ui/dashboard/src/pages/organization-details/settings/index.tsx
new file mode 100644
index 0000000000..3a8af57936
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/settings/index.tsx
@@ -0,0 +1,199 @@
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+import { organizationUpdater } from '@api/organization';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useQueryAccounts } from '@queries/accounts';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { useToast } from 'hooks';
+import { useTranslation } from 'i18n';
+import * as yup from 'yup';
+import { Organization } from '@types';
+import Button from 'components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from 'components/dropdown';
+import Form from 'components/form';
+import Input from 'components/input';
+import TextArea from 'components/textarea';
+
+const formSchema = yup.object().shape({
+  name: yup.string().required(),
+  urlCode: yup.string().required(),
+  description: yup.string(),
+  ownerEmail: yup.string().required()
+});
+
+export interface OrganizationSettingsForm {
+  name: string;
+  urlCode: string;
+  description?: string;
+  ownerEmail: string;
+}
+
+const OrganizationSettings = ({
+  organization
+}: {
+  organization: Organization;
+}) => {
+  const { notify } = useToast();
+  const { organizationId } = useParams();
+  const { t } = useTranslation(['common', 'form']);
+  const { data: accounts } = useQueryAccounts({
+    params: {
+      cursor: String(0),
+      pageSize: LIST_PAGE_SIZE,
+      organizationId
+    }
+  });
+
+  const form = useForm({
+    resolver: yupResolver(formSchema),
+    defaultValues: {
+      name: organization.name,
+      urlCode: organization.urlCode,
+      description: organization.description,
+      ownerEmail: organization.ownerEmail
+    }
+  });
+
+  const onSubmit: SubmitHandler<OrganizationSettingsForm> = values => {
+    return organizationUpdater({
+      id: organizationId!,
+      changeDescriptionCommand: {
+        description: values.description
+      },
+      renameCommand: {
+        name: values.name
+      },
+      changeOwnerEmailCommand: {
+        ownerEmail: values.ownerEmail
+      }
+    }).then(() => {
+      notify({
+        toastType: 'toast',
+        messageType: 'success',
+        message: (
+          <span>
+            <b>{values.name}</b> {`has been successfully updated!`}
+          </span>
+        )
+      });
+    });
+  };
+
+  return (
+    <div className="p-5 shadow-card rounded-lg bg-white">
+      <p className="text-gray-800 typo-head-bold-small">
+        {t('form:general-info')}
+      </p>
+      <FormProvider {...form}>
+        <Form onSubmit={form.handleSubmit(onSubmit)}>
+          <Form.Field
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <Form.Item>
+                <Form.Label required>{t('name')}</Form.Label>
+                <Form.Control>
+                  <Input
+                    placeholder={`${t('form:placeholder-name')}`}
+                    {...field}
+                  />
+                </Form.Control>
+                <Form.Message />
+              </Form.Item>
+            )}
+          />
+          <Form.Field
+            control={form.control}
+            name="urlCode"
+            render={({ field }) => (
+              <Form.Item>
+                <Form.Label required>{t('form:url-code')}</Form.Label>
+                <Form.Control>
+                  <Input
+                    disabled
+                    placeholder={`${t('form:placeholder-code')}`}
+                    {...field}
+                  />
+                </Form.Control>
+                <Form.Message />
+              </Form.Item>
+            )}
+          />
+          <Form.Field
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <Form.Item>
+                <Form.Label optional>{t('form:description')}</Form.Label>
+                <Form.Control>
+                  <TextArea
+                    placeholder={t('form:placeholder-desc')}
+                    rows={4}
+                    {...field}
+                  />
+                </Form.Control>
+                <Form.Message />
+              </Form.Item>
+            )}
+          />
+          <Form.Field
+            control={form.control}
+            name="ownerEmail"
+            render={({ field }) => (
+              <Form.Item>
+                <Form.Label required>{t('form:owner-email')}</Form.Label>
+                <Form.Control className="w-full">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      placeholder={t('form:owner-email')}
+                      label={
+                        accounts?.accounts.find(
+                          item => item.email === field.value
+                        )?.email
+                      }
+                      variant="secondary"
+                      className="w-full"
+                    />
+                    <DropdownMenuContent
+                      className="w-[400px]"
+                      align="start"
+                      {...field}
+                    >
+                      {accounts?.accounts?.map((item, index) => (
+                        <DropdownMenuItem
+                          {...field}
+                          key={index}
+                          value={item.email}
+                          label={item.email}
+                          onSelectOption={value => {
+                            field.onChange(value);
+                          }}
+                        />
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </Form.Control>
+                <Form.Message />
+              </Form.Item>
+            )}
+          />
+          <Button
+            loading={form.formState.isSubmitting}
+            disabled={!form.formState.isDirty}
+            type="submit"
+            className="w-fit mt-6"
+          >
+            {t(`save`)}
+          </Button>
+        </Form>
+      </FormProvider>
+    </div>
+  );
+};
+
+export default OrganizationSettings;
diff --git a/ui/dashboard/src/pages/organization-details/types.ts b/ui/dashboard/src/pages/organization-details/types.ts
new file mode 100644
index 0000000000..0e3f84dd10
--- /dev/null
+++ b/ui/dashboard/src/pages/organization-details/types.ts
@@ -0,0 +1,21 @@
+import { OrderBy, OrderDirection } from '@types';
+
+export interface OrganizationProjectFilters {
+  page: number;
+  orderBy: OrderBy;
+  orderDirection: OrderDirection;
+  searchQuery: string;
+}
+
+export interface OrganizationMembersFilters {
+  page: number;
+  orderBy: OrderBy;
+  orderDirection: OrderDirection;
+  searchQuery: string;
+  organizationId?: string;
+}
+
+export interface TabItem {
+  readonly title: string;
+  readonly to: string;
+}
diff --git a/ui/dashboard/src/pages/organizations/collection-layout/data-collection.tsx b/ui/dashboard/src/pages/organizations/collection-layout/data-collection.tsx
new file mode 100644
index 0000000000..702f60c419
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/collection-layout/data-collection.tsx
@@ -0,0 +1,132 @@
+import {
+  IconArchiveOutlined,
+  IconEditOutlined,
+  IconMoreHorizOutlined
+} from 'react-icons-material-design';
+import { Link } from 'react-router-dom';
+import type { ColumnDef } from '@tanstack/react-table';
+import { useTranslation } from 'i18n';
+import { Organization } from '@types';
+import { useFormatDateTime } from 'utils/date-time';
+import { useSearchParams } from 'utils/search-params';
+import { Popover } from 'components/popover';
+
+export const useColumns = ({
+  onActionHandler
+}: {
+  onActionHandler: (type: string, v: Organization) => void;
+}): ColumnDef<Organization>[] => {
+  const { searchOptions } = useSearchParams();
+  const { t } = useTranslation(['common', 'table']);
+  const formatDateTime = useFormatDateTime();
+
+  return [
+    {
+      accessorKey: 'name',
+      header: `${t('name')}`,
+      size: 400,
+      cell: ({ row }) => {
+        const organization = row.original;
+        return (
+          <Link
+            to={`${organization.id}`}
+            className="underline text-primary-500 typo-para-medium"
+          >
+            {organization.name}
+          </Link>
+        );
+      }
+    },
+    {
+      accessorKey: 'projectCount',
+      header: `${t('projects')}`,
+      size: 170,
+      cell: ({ row }) => {
+        const organization = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {organization.projectCount}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'environmentCount',
+      header: `${t('environments')}`,
+      size: 170,
+      cell: ({ row }) => {
+        const organization = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {organization.environmentCount}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'userCount',
+      header: `${t('users')}`,
+      size: 160,
+      cell: ({ row }) => {
+        const organization = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {organization.userCount}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'createdAt',
+      header: `${t('table:created-at')}`,
+      size: 180,
+      cell: ({ row }) => {
+        const organization = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {formatDateTime(organization.createdAt)}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'action',
+      size: 60,
+      header: '',
+      meta: {
+        align: 'center',
+        style: { textAlign: 'center', fitContent: true }
+      },
+      enableSorting: false,
+      cell: ({ row }) => {
+        const organization = row.original;
+
+        return (
+          <Popover
+            options={[
+              {
+                label: `${t('table:popover.edit-org')}`,
+                icon: IconEditOutlined,
+                value: 'EDIT_ORGANIZATION'
+              },
+              searchOptions.status === 'ARCHIVED'
+                ? {
+                    label: `${t('table:popover.unarchive-org')}`,
+                    icon: IconArchiveOutlined,
+                    value: 'UNARCHIVE_ORGANIZATION'
+                  }
+                : {
+                    label: `${t('table:popover.archive-org')}`,
+                    icon: IconArchiveOutlined,
+                    value: 'ARCHIVED_ORGANIZATION'
+                  }
+            ]}
+            icon={IconMoreHorizOutlined}
+            onClick={value => onActionHandler(value as string, organization)}
+            align="end"
+          />
+        );
+      }
+    }
+  ];
+};
diff --git a/ui/dashboard/src/pages/organizations/collection-layout/empty-collection.tsx b/ui/dashboard/src/pages/organizations/collection-layout/empty-collection.tsx
new file mode 100644
index 0000000000..20678d1ed9
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/collection-layout/empty-collection.tsx
@@ -0,0 +1,25 @@
+import { IconAddOutlined } from 'react-icons-material-design';
+import { useTranslation } from 'i18n';
+import EmptyState from 'elements/empty-state';
+
+export const EmptyCollection = ({ onAdd }: { onAdd: () => void }) => {
+  const { t } = useTranslation(['common', 'table']);
+
+  return (
+    <EmptyState.Root variant="no-data" size="lg">
+      <EmptyState.Illustration />
+      <EmptyState.Body>
+        <EmptyState.Title>{t(`table:empty.org-title`)}</EmptyState.Title>
+        <EmptyState.Description>
+          {t(`table:empty.org-desc`)}
+        </EmptyState.Description>
+      </EmptyState.Body>
+      <EmptyState.Actions>
+        <EmptyState.ActionButton variant="primary" onClick={onAdd}>
+          <IconAddOutlined />
+          {t(`new-org`)}
+        </EmptyState.ActionButton>
+      </EmptyState.Actions>
+    </EmptyState.Root>
+  );
+};
diff --git a/ui/dashboard/src/pages/organizations/collection-loader/index.tsx b/ui/dashboard/src/pages/organizations/collection-loader/index.tsx
new file mode 100644
index 0000000000..18cf903bd0
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/collection-loader/index.tsx
@@ -0,0 +1,79 @@
+import { SortingState } from '@tanstack/react-table';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { sortingListFields } from 'constants/collection';
+import { Organization } from '@types';
+import Pagination from 'components/pagination';
+import CollectionEmpty from 'elements/collection/collection-empty';
+import { DataTable } from 'elements/data-table';
+import PageLayout from 'elements/page-layout';
+import { useColumns } from '../collection-layout/data-collection';
+import { EmptyCollection } from '../collection-layout/empty-collection';
+import { OrganizationFilters } from '../types';
+import { useFetchOrganizations } from './use-fetch-organizations';
+
+const CollectionLoader = ({
+  onAdd,
+  filters,
+  setFilters,
+  onActionHandler
+}: {
+  onAdd: () => void;
+  filters: OrganizationFilters;
+  setFilters: (values: Partial<OrganizationFilters>) => void;
+  onActionHandler: (type: string, v: Organization) => void;
+}) => {
+  const columns = useColumns({ onActionHandler });
+  const {
+    data: collection,
+    isLoading,
+    refetch,
+    isError
+  } = useFetchOrganizations({ ...filters });
+
+  const onSortingChangeHandler = (sorting: SortingState) => {
+    const updateOrderBy =
+      sorting.length > 0
+        ? sortingListFields[sorting[0].id]
+        : sortingListFields.default;
+
+    setFilters({
+      orderBy: updateOrderBy,
+      orderDirection: sorting[0]?.desc ? 'DESC' : 'ASC'
+    });
+  };
+
+  const organizations = collection?.Organizations || [];
+  const totalCount = Number(collection?.totalCount) || 0;
+
+  const emptyState = (
+    <CollectionEmpty
+      data={organizations}
+      searchQuery={filters.searchQuery}
+      onClear={() => setFilters({ searchQuery: '' })}
+      empty={<EmptyCollection onAdd={onAdd} />}
+    />
+  );
+
+  return isError ? (
+    <PageLayout.ErrorState onRetry={refetch} />
+  ) : (
+    <>
+      <DataTable
+        isLoading={isLoading}
+        data={organizations}
+        columns={columns}
+        onSortingChange={onSortingChangeHandler}
+        emptyCollection={emptyState}
+      />
+      {totalCount > LIST_PAGE_SIZE && !isLoading && (
+        <Pagination
+          page={filters.page}
+          totalCount={totalCount}
+          onChange={page => setFilters({ page })}
+        />
+      )}
+    </>
+  );
+};
+
+export default CollectionLoader;
diff --git a/ui/dashboard/src/pages/organizations/collection-loader/use-fetch-organizations.ts b/ui/dashboard/src/pages/organizations/collection-loader/use-fetch-organizations.ts
new file mode 100644
index 0000000000..87d7594fd7
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/collection-loader/use-fetch-organizations.ts
@@ -0,0 +1,35 @@
+import { useQueryOrganizations } from '@queries/organizations';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { CollectionStatusType, OrderBy, OrderDirection } from '@types';
+
+export const useFetchOrganizations = ({
+  page = 1,
+  pageSize,
+  orderBy,
+  status,
+  disabled,
+  searchQuery,
+  orderDirection
+}: {
+  pageSize?: number;
+  page?: number;
+  searchQuery?: string;
+  orderBy?: OrderBy;
+  disabled?: boolean;
+  status?: CollectionStatusType;
+  orderDirection?: OrderDirection;
+} = {}) => {
+  const cursor = (page - 1) * LIST_PAGE_SIZE;
+
+  return useQueryOrganizations({
+    params: {
+      pageSize: pageSize || LIST_PAGE_SIZE,
+      cursor: String(cursor),
+      orderBy,
+      orderDirection,
+      disabled,
+      searchKeyword: searchQuery,
+      archived: status ? status === 'ARCHIVED' : undefined
+    }
+  });
+};
diff --git a/ui/dashboard/src/pages/organizations/index.tsx b/ui/dashboard/src/pages/organizations/index.tsx
new file mode 100644
index 0000000000..8a29bf2fc2
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/index.tsx
@@ -0,0 +1,20 @@
+import { useTranslation } from 'i18n';
+import PageHeader from 'elements/page-header';
+import PageLayout from 'elements/page-layout';
+import PageLoader from './page-loader';
+
+const OrganizationsPage = () => {
+  const { t } = useTranslation(['common']);
+
+  return (
+    <PageLayout.Root title={t('organizations')}>
+      <PageHeader
+        title={t('organizations')}
+        description={t('organization-subtitle')}
+      />
+      <PageLoader />
+    </PageLayout.Root>
+  );
+};
+
+export default OrganizationsPage;
diff --git a/ui/dashboard/src/pages/organizations/organization-modal/add-organization-modal/index.tsx b/ui/dashboard/src/pages/organizations/organization-modal/add-organization-modal/index.tsx
new file mode 100644
index 0000000000..130f7f61e8
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/organization-modal/add-organization-modal/index.tsx
@@ -0,0 +1,208 @@
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { organizationCreator } from '@api/organization';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { invalidateOrganizations } from '@queries/organizations';
+import { useQueryClient } from '@tanstack/react-query';
+import { useToast } from 'hooks';
+import { useTranslation } from 'i18n';
+import * as yup from 'yup';
+import { onGenerateSlug } from 'utils/converts';
+import Button from 'components/button';
+import { ButtonBar } from 'components/button-bar';
+import Checkbox from 'components/checkbox';
+import Form from 'components/form';
+import Input from 'components/input';
+import SlideModal from 'components/modal/slide';
+import TextArea from 'components/textarea';
+
+interface AddOrganizationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export interface AddOrganizationForm {
+  name: string;
+  urlCode: string;
+  ownerEmail: string;
+  isTrial?: boolean;
+  description?: string;
+}
+
+const formSchema = yup.object().shape({
+  name: yup.string().required(),
+  urlCode: yup
+    .string()
+    .required()
+    .matches(
+      /^[a-zA-Z0-9][a-zA-Z0-9-]*$/,
+      "urlCode must start with a letter or number and only contain letters, numbers, or '-'"
+    ),
+  description: yup.string(),
+  ownerEmail: yup.string().email().required(),
+  isTrial: yup.bool()
+});
+
+const AddOrganizationModal = ({
+  isOpen,
+  onClose
+}: AddOrganizationModalProps) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation(['common', 'form']);
+  const { notify } = useToast();
+
+  const form = useForm({
+    resolver: yupResolver(formSchema),
+    defaultValues: {
+      name: '',
+      urlCode: '',
+      description: '',
+      ownerEmail: '',
+      isTrial: true
+    }
+  });
+
+  const onSubmit: SubmitHandler<AddOrganizationForm> = values => {
+    return organizationCreator({
+      ...values,
+      isSystemAdmin: false
+    }).then(() => {
+      notify({
+        toastType: 'toast',
+        messageType: 'success',
+        message: (
+          <span>
+            <b>{values.name}</b> {`has been successfully created!`}
+          </span>
+        )
+      });
+      invalidateOrganizations(queryClient);
+      onClose();
+    });
+  };
+
+  return (
+    <SlideModal title={t('new-org')} isOpen={isOpen} onClose={onClose}>
+      <div className="w-full p-5">
+        <p className="text-gray-800 typo-head-bold-small">
+          {t('form:general-info')}
+        </p>
+        <FormProvider {...form}>
+          <Form onSubmit={form.handleSubmit(onSubmit)}>
+            <Form.Field
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label required>{t('name')}</Form.Label>
+                  <Form.Control>
+                    <Input
+                      placeholder={`${t('form:placeholder-name')}`}
+                      {...field}
+                      onChange={value => {
+                        const isUrlCodeDirty =
+                          form.getFieldState('urlCode').isDirty;
+                        const urlCode = form.getValues('urlCode');
+                        field.onChange(value);
+                        form.setValue(
+                          'urlCode',
+                          isUrlCodeDirty ? urlCode : onGenerateSlug(value)
+                        );
+                      }}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="urlCode"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label required>{t('form:url-code')}</Form.Label>
+                  <Form.Control>
+                    <Input
+                      placeholder={`${t('form:placeholder-code')}`}
+                      {...field}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label optional>{t('form:description')}</Form.Label>
+                  <Form.Control>
+                    <TextArea
+                      placeholder={t('form:placeholder-desc')}
+                      rows={4}
+                      {...field}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="ownerEmail"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label required>{t('form:owner-email')}</Form.Label>
+                  <Form.Control className="w-full">
+                    <Input
+                      placeholder={`${t('form:placeholder-email')}`}
+                      {...field}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="isTrial"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Control>
+                    <Checkbox
+                      onCheckedChange={checked => field.onChange(checked)}
+                      checked={field.value}
+                      title={`${t(`form:trial`)}`}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+
+            <div className="absolute left-0 bottom-0 bg-gray-50 w-full rounded-b-lg">
+              <ButtonBar
+                primaryButton={
+                  <Button variant="secondary" onClick={onClose}>
+                    {t(`common:cancel`)}
+                  </Button>
+                }
+                secondaryButton={
+                  <Button
+                    type="submit"
+                    disabled={!form.formState.isDirty}
+                    loading={form.formState.isSubmitting}
+                  >
+                    {t(`create-org`)}
+                  </Button>
+                }
+              />
+            </div>
+          </Form>
+        </FormProvider>
+      </div>
+    </SlideModal>
+  );
+};
+
+export default AddOrganizationModal;
diff --git a/ui/dashboard/src/pages/organizations/organization-modal/edit-organization-modal/index.tsx b/ui/dashboard/src/pages/organizations/organization-modal/edit-organization-modal/index.tsx
new file mode 100644
index 0000000000..eab05b4523
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/organization-modal/edit-organization-modal/index.tsx
@@ -0,0 +1,218 @@
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { organizationUpdater } from '@api/organization';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useQueryAccounts } from '@queries/accounts';
+import { invalidateOrganizations } from '@queries/organizations';
+import { useQueryClient } from '@tanstack/react-query';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { useToast } from 'hooks';
+import { useTranslation } from 'i18n';
+import * as yup from 'yup';
+import { Organization } from '@types';
+import Button from 'components/button';
+import { ButtonBar } from 'components/button-bar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from 'components/dropdown';
+import Form from 'components/form';
+import Input from 'components/input';
+import SlideModal from 'components/modal/slide';
+import TextArea from 'components/textarea';
+
+interface EditOrganizationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  organization: Organization;
+}
+
+export interface EditOrganizationForm {
+  name: string;
+  ownerEmail: string;
+  description?: string;
+}
+
+const formSchema = yup.object().shape({
+  name: yup.string().required(),
+  description: yup.string(),
+  ownerEmail: yup.string().email().required()
+});
+
+const EditOrganizationModal = ({
+  isOpen,
+  onClose,
+  organization
+}: EditOrganizationModalProps) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation(['common', 'form']);
+  const { notify } = useToast();
+
+  const form = useForm({
+    resolver: yupResolver(formSchema),
+    defaultValues: {
+      name: organization.name,
+      description: organization.description,
+      ownerEmail: organization.ownerEmail
+    }
+  });
+
+  const { data: accounts } = useQueryAccounts({
+    params: {
+      cursor: String(0),
+      pageSize: LIST_PAGE_SIZE,
+      organizationId: organization.id
+    }
+  });
+
+  const onSubmit: SubmitHandler<EditOrganizationForm> = values => {
+    return organizationUpdater({
+      id: organization.id,
+      changeDescriptionCommand: {
+        description: values.description
+      },
+      renameCommand: {
+        name: values.name
+      },
+      changeOwnerEmailCommand: {
+        ownerEmail: values.ownerEmail
+      }
+    }).then(() => {
+      notify({
+        toastType: 'toast',
+        messageType: 'success',
+        message: (
+          <span>
+            <b>{values.name}</b> {`has been successfully updated!`}
+          </span>
+        )
+      });
+      invalidateOrganizations(queryClient);
+      onClose();
+    });
+  };
+
+  return (
+    <SlideModal title={t('update-org')} isOpen={isOpen} onClose={onClose}>
+      <div className="w-full p-5">
+        <p className="text-gray-800 typo-head-bold-small">
+          {t('form:general-info')}
+        </p>
+        <FormProvider {...form}>
+          <Form onSubmit={form.handleSubmit(onSubmit)}>
+            <Form.Field
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label required>{t('name')}</Form.Label>
+                  <Form.Control>
+                    <Input
+                      placeholder={`${t('form:placeholder-name')}`}
+                      {...field}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+
+            <Form.Item>
+              <Form.Label required>{t('form:url-code')}</Form.Label>
+              <Form.Control>
+                <Input
+                  value={organization.urlCode}
+                  placeholder={`${t('form:placeholder-code')}`}
+                  disabled
+                />
+              </Form.Control>
+              <Form.Message />
+            </Form.Item>
+
+            <Form.Field
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label optional>{t('form:description')}</Form.Label>
+                  <Form.Control>
+                    <TextArea
+                      placeholder={t('form:placeholder-desc')}
+                      rows={4}
+                      {...field}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+
+            <Form.Field
+              control={form.control}
+              name="ownerEmail"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label required>{t('form:owner-email')}</Form.Label>
+                  <Form.Control className="w-full">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger
+                        placeholder={t('form:owner-email')}
+                        label={
+                          accounts?.accounts.find(
+                            item => item.email === field.value
+                          )?.email
+                        }
+                        variant="secondary"
+                        className="w-full"
+                      />
+                      <DropdownMenuContent
+                        className="w-[500px]"
+                        align="start"
+                        {...field}
+                      >
+                        {accounts?.accounts?.map((item, index) => (
+                          <DropdownMenuItem
+                            {...field}
+                            key={index}
+                            value={item.email}
+                            label={item.email}
+                            onSelectOption={value => {
+                              field.onChange(value);
+                            }}
+                          />
+                        ))}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+
+            <div className="absolute left-0 bottom-0 bg-gray-50 w-full rounded-b-lg">
+              <ButtonBar
+                primaryButton={
+                  <Button variant="secondary" onClick={onClose}>
+                    {t(`common:cancel`)}
+                  </Button>
+                }
+                secondaryButton={
+                  <Button
+                    type="submit"
+                    disabled={!form.formState.isDirty}
+                    loading={form.formState.isSubmitting}
+                  >
+                    {t(`update-org`)}
+                  </Button>
+                }
+              />
+            </div>
+          </Form>
+        </FormProvider>
+      </div>
+    </SlideModal>
+  );
+};
+
+export default EditOrganizationModal;
diff --git a/ui/dashboard/src/pages/organizations/organization-modal/filter-organization-modal/index.tsx b/ui/dashboard/src/pages/organizations/organization-modal/filter-organization-modal/index.tsx
new file mode 100644
index 0000000000..383afec7db
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/organization-modal/filter-organization-modal/index.tsx
@@ -0,0 +1,159 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'i18n';
+import { isNotEmpty } from 'utils/data-type';
+import { OrganizationFilters } from 'pages/organizations/types';
+import Button from 'components/button';
+import { ButtonBar } from 'components/button-bar';
+import Divider from 'components/divider';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from 'components/dropdown';
+import DialogModal from 'components/modal/dialog';
+
+export type FilterProps = {
+  onSubmit: (v: Partial<OrganizationFilters>) => void;
+  isOpen: boolean;
+  onClose: () => void;
+  onClearFilters: () => void;
+  filters?: Partial<OrganizationFilters>;
+};
+
+export interface Option {
+  value: string;
+  label: string;
+}
+
+export enum FilterTypes {
+  ENABLED = 'enabled'
+}
+
+export const filterOptions: Option[] = [
+  {
+    value: FilterTypes.ENABLED,
+    label: 'Enabled'
+  }
+];
+
+export const enabledOptions: Option[] = [
+  {
+    value: 'yes',
+    label: 'Yes'
+  },
+  {
+    value: 'no',
+    label: 'No'
+  }
+];
+
+const FilterOrganizationModal = ({
+  onSubmit,
+  isOpen,
+  onClose,
+  onClearFilters,
+  filters
+}: FilterProps) => {
+  const { t } = useTranslation(['common']);
+  const [selectedFilterType, setSelectedFilterType] = useState<Option>();
+  const [valueOption, setValueOption] = useState<Option>();
+
+  const onConfirmHandler = () => {
+    switch (selectedFilterType?.value) {
+      case FilterTypes.ENABLED:
+        onSubmit({
+          disabled: valueOption?.value === 'no'
+        });
+        return;
+    }
+  };
+
+  useEffect(() => {
+    if (isNotEmpty(filters?.disabled)) {
+      setSelectedFilterType(filterOptions[0]);
+      setValueOption(enabledOptions[filters?.disabled ? 1 : 0]);
+    } else {
+      setSelectedFilterType(undefined);
+      setValueOption(undefined);
+    }
+  }, [filters]);
+
+  return (
+    <DialogModal
+      className="w-[665px]"
+      title={t('filters')}
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <div className="flex flex-col w-full items-start p-5 gap-y-4">
+        <div className="flex items-center w-full h-12 gap-x-4">
+          <div className="typo-para-small text-center py-[3px] px-4 rounded text-accent-pink-500 bg-accent-pink-50">
+            {`If`}
+          </div>
+          <Divider vertical={true} className="border-primary-500" />
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              placeholder={`Select type`}
+              label={selectedFilterType?.label}
+              variant="secondary"
+              className="w-full"
+            />
+            <DropdownMenuContent className="w-[235px]" align="start">
+              {filterOptions.map((item, index) => (
+                <DropdownMenuItem
+                  key={index}
+                  value={item.value}
+                  label={item.label}
+                  onSelectOption={() => setSelectedFilterType(item)}
+                />
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <p className="typo-para-medium text-gray-600">{`is`}</p>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              placeholder={`Select value`}
+              label={valueOption?.label}
+              variant="secondary"
+              className="w-full"
+            />
+            <DropdownMenuContent className="w-[235px]" align="start">
+              {enabledOptions.map((item, index) => (
+                <DropdownMenuItem
+                  key={index}
+                  value={item.value}
+                  label={item.label}
+                  onSelectOption={() => setValueOption(item)}
+                />
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* <Button variant={'text'} size={'icon'} className="p-0 size-5">
+            <Icon icon={IconTrash} size={'fit'} />
+          </Button> */}
+        </div>
+
+        {/* <Button variant={'text'} size={'sm'} className="px-0 typo-para-medium">
+          <Icon icon={IconAddOutlined} size="sm" />
+          {t('add-filter')}
+        </Button> */}
+      </div>
+
+      <ButtonBar
+        secondaryButton={
+          <Button onClick={onConfirmHandler}>{`Confirm`}</Button>
+        }
+        primaryButton={
+          <Button
+            onClick={onClearFilters}
+            variant="secondary"
+          >{`Clear`}</Button>
+        }
+      />
+    </DialogModal>
+  );
+};
+
+export default FilterOrganizationModal;
diff --git a/ui/dashboard/src/pages/organizations/page-content.tsx b/ui/dashboard/src/pages/organizations/page-content.tsx
new file mode 100644
index 0000000000..3ca551edc1
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/page-content.tsx
@@ -0,0 +1,144 @@
+import { useEffect } from 'react';
+import { IconAddOutlined } from 'react-icons-material-design';
+import { organizationArchive, organizationUnArchive } from '@api/organization';
+import { invalidateOrganizations } from '@queries/organizations';
+import { useQueryClient } from '@tanstack/react-query';
+import { usePartialState, useToggleOpen } from 'hooks';
+import { useTranslation } from 'i18n';
+import pickBy from 'lodash/pickBy';
+import { CollectionStatusType, Organization } from '@types';
+import { isEmptyObject, isNotEmpty } from 'utils/data-type';
+import { useSearchParams } from 'utils/search-params';
+import Button from 'components/button';
+import Icon from 'components/icon';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/tabs';
+import Filter from 'elements/filter';
+import PageLayout from 'elements/page-layout';
+import CollectionLoader from './collection-loader';
+import FilterOrganizationModal from './organization-modal/filter-organization-modal';
+import { OrganizationFilters } from './types';
+
+const PageContent = ({
+  onAdd,
+  onEdit
+}: {
+  onAdd: () => void;
+  onEdit: (v: Organization) => void;
+}) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation(['common']);
+
+  // NOTE: Need improve search options
+  const { searchOptions, onChangSearchParams } = useSearchParams();
+  const searchFilters: Partial<OrganizationFilters> = searchOptions;
+
+  const defaultFilters = {
+    page: 1,
+    orderBy: 'CREATED_AT',
+    orderDirection: 'DESC',
+    status: 'ACTIVE',
+    ...searchFilters
+  } as OrganizationFilters;
+
+  const [openFilterModal, onOpenFilterModal, onCloseFilterModal] =
+    useToggleOpen(false);
+
+  const [filters, setFilters] =
+    usePartialState<OrganizationFilters>(defaultFilters);
+
+  const onChangeFilters = (values: Partial<OrganizationFilters>) => {
+    const options = pickBy({ ...filters, ...values }, v => isNotEmpty(v));
+    onChangSearchParams(options);
+    setFilters({ ...values });
+  };
+
+  const onArchivedOrganization = (organization: Organization) => {
+    organizationArchive({
+      id: organization.id,
+      command: {}
+    }).then(() => {
+      invalidateOrganizations(queryClient);
+    });
+  };
+
+  const onUnArchiveOrganization = (organization: Organization) => {
+    organizationUnArchive({
+      id: organization.id,
+      command: {}
+    }).then(() => {
+      invalidateOrganizations(queryClient);
+    });
+  };
+
+  const onActionHandler = (type: string, organization: Organization) => {
+    if (type === 'ARCHIVED_ORGANIZATION') {
+      onArchivedOrganization(organization);
+    } else if (type === 'UNARCHIVE_ORGANIZATION') {
+      onUnArchiveOrganization(organization);
+    } else {
+      onEdit(organization);
+    }
+  };
+
+  useEffect(() => {
+    if (isEmptyObject(searchOptions)) {
+      setFilters({ ...defaultFilters });
+    }
+  }, [searchOptions]);
+
+  return (
+    <PageLayout.Content>
+      <Filter
+        onOpenFilter={onOpenFilterModal}
+        action={
+          <Button className="flex-1 lg:flex-none" onClick={onAdd}>
+            <Icon icon={IconAddOutlined} size="sm" />
+            {t(`new-org`)}
+          </Button>
+        }
+        searchValue={filters.searchQuery}
+        filterCount={isNotEmpty(filters.disabled) ? 1 : undefined}
+        onSearchChange={searchQuery => onChangeFilters({ searchQuery })}
+      />
+      {openFilterModal && (
+        <FilterOrganizationModal
+          isOpen={openFilterModal}
+          filters={filters}
+          onClose={onCloseFilterModal}
+          onSubmit={value => {
+            onChangeFilters(value);
+            onCloseFilterModal();
+          }}
+          onClearFilters={() => {
+            onChangeFilters({ disabled: undefined });
+            onCloseFilterModal();
+          }}
+        />
+      )}
+      <Tabs
+        className="flex-1 flex h-full flex-col mt-6"
+        value={filters.status}
+        onValueChange={value => {
+          const status = value as CollectionStatusType;
+          onChangeFilters({ status, searchQuery: '', disabled: undefined });
+        }}
+      >
+        <TabsList>
+          <TabsTrigger value="ACTIVE">{t(`active`)}</TabsTrigger>
+          <TabsTrigger value="ARCHIVED">{t(`archived`)}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value={filters.status}>
+          <CollectionLoader
+            onAdd={onAdd}
+            filters={filters}
+            setFilters={onChangeFilters}
+            onActionHandler={onActionHandler}
+          />
+        </TabsContent>
+      </Tabs>
+    </PageLayout.Content>
+  );
+};
+
+export default PageContent;
diff --git a/ui/dashboard/src/pages/organizations/page-loader.tsx b/ui/dashboard/src/pages/organizations/page-loader.tsx
new file mode 100644
index 0000000000..933128339d
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/page-loader.tsx
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { useToggleOpen } from 'hooks/use-toggle-open';
+import { Organization } from '@types';
+import PageLayout from 'elements/page-layout';
+import { EmptyCollection } from './collection-layout/empty-collection';
+import { useFetchOrganizations } from './collection-loader/use-fetch-organizations';
+import AddOrganizationModal from './organization-modal/add-organization-modal';
+import EditOrganizationModal from './organization-modal/edit-organization-modal';
+import PageContent from './page-content';
+
+const PageLoader = () => {
+  const {
+    data: collection,
+    isLoading,
+    refetch,
+    isError
+  } = useFetchOrganizations({ pageSize: 1 });
+
+  const [selectedOrganization, setSelectedOrganization] =
+    useState<Organization>();
+
+  const [isOpenAddModal, onOpenAddModal, onCloseAddModal] =
+    useToggleOpen(false);
+  const [isOpenEditModal, onOpenEditModal, onCloseEditModal] =
+    useToggleOpen(false);
+
+  const isEmpty = collection?.Organizations.length === 0;
+
+  return (
+    <>
+      {isLoading ? (
+        <PageLayout.LoadingState />
+      ) : isError ? (
+        <PageLayout.ErrorState onRetry={refetch} />
+      ) : isEmpty ? (
+        <PageLayout.EmptyState>
+          <EmptyCollection onAdd={onOpenAddModal} />
+        </PageLayout.EmptyState>
+      ) : (
+        <>
+          <PageContent
+            onAdd={onOpenAddModal}
+            onEdit={value => {
+              setSelectedOrganization(value);
+              onOpenEditModal();
+            }}
+          />
+          {isOpenAddModal && (
+            <AddOrganizationModal
+              isOpen={isOpenAddModal}
+              onClose={onCloseAddModal}
+            />
+          )}
+          {isOpenEditModal && (
+            <EditOrganizationModal
+              isOpen={isOpenEditModal}
+              onClose={onCloseEditModal}
+              organization={selectedOrganization!}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+export default PageLoader;
diff --git a/ui/dashboard/src/pages/organizations/types.ts b/ui/dashboard/src/pages/organizations/types.ts
new file mode 100644
index 0000000000..39e2699ca2
--- /dev/null
+++ b/ui/dashboard/src/pages/organizations/types.ts
@@ -0,0 +1,22 @@
+import { SortingState } from '@tanstack/react-table';
+import {
+  CollectionStatusType,
+  OrderBy,
+  OrderDirection,
+  Organization
+} from '@types';
+
+export interface OrganizationFilters {
+  page: number;
+  orderBy: OrderBy;
+  orderDirection: OrderDirection;
+  status: CollectionStatusType;
+  searchQuery: string;
+  disabled: boolean;
+}
+
+export interface CollectionProps {
+  isLoading?: boolean;
+  onSortingChange: (v: SortingState) => void;
+  organizations: Organization[];
+}
diff --git a/ui/dashboard/src/pages/projects/collection-layout/data-collection.tsx b/ui/dashboard/src/pages/projects/collection-layout/data-collection.tsx
new file mode 100644
index 0000000000..82402a5edd
--- /dev/null
+++ b/ui/dashboard/src/pages/projects/collection-layout/data-collection.tsx
@@ -0,0 +1,96 @@
+import { IconMoreHorizOutlined } from 'react-icons-material-design';
+import type { ColumnDef } from '@tanstack/react-table';
+import { useTranslation } from 'i18n';
+import { Project } from '@types';
+import { useFormatDateTime } from 'utils/date-time';
+import Icon from 'components/icon';
+
+export const useColumns = (): ColumnDef<Project>[] => {
+  const { t } = useTranslation(['common', 'table']);
+  const formatDateTime = useFormatDateTime();
+
+  return [
+    {
+      accessorKey: 'name',
+      header: `${t('name')}`,
+      size: 250,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="underline text-primary-500 typo-para-medium">
+            {project.name}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'creatorEmail',
+      header: `${t('maintainer')}`,
+      size: 350,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {project.creatorEmail}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'environmentCount',
+      header: `${t('environments')}`,
+      size: 120,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {project.environmentCount}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'featureFlagCount',
+      header: t('table:flags'),
+      size: 100,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {project.featureFlagCount}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'createdAt',
+      header: `${t('table:created-at')}`,
+      size: 160,
+      cell: ({ row }) => {
+        const project = row.original;
+        return (
+          <div className="text-gray-700 typo-para-medium">
+            {formatDateTime(project.createdAt)}
+          </div>
+        );
+      }
+    },
+    {
+      accessorKey: 'action',
+      size: 60,
+      header: '',
+      meta: {
+        align: 'center',
+        style: { textAlign: 'center', fitContent: true }
+      },
+      enableSorting: false,
+      cell: () => {
+        return (
+          <button className="flex-center text-gray-600">
+            <Icon icon={IconMoreHorizOutlined} size="sm" />
+          </button>
+        );
+      }
+    }
+  ];
+};
diff --git a/ui/dashboard/src/pages/projects/collection-layout/empty-collection.tsx b/ui/dashboard/src/pages/projects/collection-layout/empty-collection.tsx
new file mode 100644
index 0000000000..2c94b9afab
--- /dev/null
+++ b/ui/dashboard/src/pages/projects/collection-layout/empty-collection.tsx
@@ -0,0 +1,30 @@
+import { IconAddOutlined } from 'react-icons-material-design';
+import { useTranslation } from 'i18n';
+import EmptyState from 'elements/empty-state';
+
+export const EmptyCollection = ({ onAdd }: { onAdd?: () => void }) => {
+  const isProjectManagement = onAdd !== undefined;
+  const { t } = useTranslation(['common', 'table']);
+
+  return (
+    <EmptyState.Root variant="no-data" size="lg">
+      <EmptyState.Illustration />
+      <EmptyState.Body>
+        <EmptyState.Title>{t(`table:empty.project-title`)}</EmptyState.Title>
+        <EmptyState.Description>
+          {isProjectManagement
+            ? t(`table:empty.project-desc`)
+            : t(`table:empty.project-org-desc`)}
+        </EmptyState.Description>
+      </EmptyState.Body>
+      {isProjectManagement && (
+        <EmptyState.Actions>
+          <EmptyState.ActionButton variant="primary" onClick={onAdd}>
+            <IconAddOutlined />
+            {t(`new-project`)}
+          </EmptyState.ActionButton>
+        </EmptyState.Actions>
+      )}
+    </EmptyState.Root>
+  );
+};
diff --git a/ui/dashboard/src/pages/projects/collection-loader/index.tsx b/ui/dashboard/src/pages/projects/collection-loader/index.tsx
new file mode 100644
index 0000000000..9d8b1eec59
--- /dev/null
+++ b/ui/dashboard/src/pages/projects/collection-loader/index.tsx
@@ -0,0 +1,76 @@
+import { SortingState } from '@tanstack/react-table';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { sortingListFields } from 'constants/collection';
+import Pagination from 'components/pagination';
+import CollectionEmpty from 'elements/collection/collection-empty';
+import { DataTable } from 'elements/data-table';
+import PageLayout from 'elements/page-layout';
+import { useColumns } from '../collection-layout/data-collection';
+import { EmptyCollection } from '../collection-layout/empty-collection';
+import { ProjectsFilters } from '../types';
+import { useFetchProjects } from './use-fetch-projects';
+
+const CollectionLoader = ({
+  onAdd,
+  filters,
+  setFilters
+}: {
+  onAdd?: () => void;
+  filters: ProjectsFilters;
+  setFilters: (values: Partial<ProjectsFilters>) => void;
+}) => {
+  const columns = useColumns();
+  const {
+    data: collection,
+    isLoading,
+    refetch,
+    isError
+  } = useFetchProjects({ ...filters });
+
+  const onSortingChangeHandler = (sorting: SortingState) => {
+    const updateOrderBy =
+      sorting.length > 0
+        ? sortingListFields[sorting[0].id]
+        : sortingListFields.default;
+
+    setFilters({
+      orderBy: updateOrderBy,
+      orderDirection: sorting[0]?.desc ? 'DESC' : 'ASC'
+    });
+  };
+
+  const projects = collection?.projects || [];
+  const totalCount = Number(collection?.totalCount) || 0;
+
+  const emptyState = (
+    <CollectionEmpty
+      data={projects}
+      searchQuery={filters.searchQuery}
+      onClear={() => setFilters({ searchQuery: '' })}
+      empty={<EmptyCollection onAdd={onAdd} />}
+    />
+  );
+
+  return isError ? (
+    <PageLayout.ErrorState onRetry={refetch} />
+  ) : (
+    <>
+      <DataTable
+        isLoading={isLoading}
+        data={projects}
+        columns={columns}
+        onSortingChange={onSortingChangeHandler}
+        emptyCollection={emptyState}
+      />
+      {totalCount > LIST_PAGE_SIZE && !isLoading && (
+        <Pagination
+          page={filters.page}
+          totalCount={totalCount}
+          onChange={page => setFilters({ page })}
+        />
+      )}
+    </>
+  );
+};
+
+export default CollectionLoader;
diff --git a/ui/dashboard/src/pages/projects/collection-loader/use-fetch-projects.ts b/ui/dashboard/src/pages/projects/collection-loader/use-fetch-projects.ts
new file mode 100644
index 0000000000..2e5e1eb3d9
--- /dev/null
+++ b/ui/dashboard/src/pages/projects/collection-loader/use-fetch-projects.ts
@@ -0,0 +1,32 @@
+import { useQueryProjects } from '@queries/projects';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { OrderBy, OrderDirection } from '@types';
+
+export const useFetchProjects = ({
+  page = 1,
+  pageSize,
+  orderBy,
+  searchQuery,
+  orderDirection,
+  organizationIds
+}: {
+  pageSize?: number;
+  page?: number;
+  searchQuery?: string;
+  orderBy?: OrderBy;
+  orderDirection?: OrderDirection;
+  organizationIds?: string[];
+} = {}) => {
+  const cursor = (page - 1) * LIST_PAGE_SIZE;
+
+  return useQueryProjects({
+    params: {
+      pageSize: pageSize || LIST_PAGE_SIZE,
+      cursor: String(cursor),
+      orderBy,
+      orderDirection,
+      searchKeyword: searchQuery,
+      organizationIds
+    }
+  });
+};
diff --git a/ui/dashboard/src/pages/projects/index.tsx b/ui/dashboard/src/pages/projects/index.tsx
new file mode 100644
index 0000000000..63d1ffc5cb
--- /dev/null
+++ b/ui/dashboard/src/pages/projects/index.tsx
@@ -0,0 +1,14 @@
+import PageHeader from 'elements/page-header';
+
+const ProjectsPage = () => {
+  return (
+    <div className="flex flex-col size-full overflow-auto">
+      <PageHeader
+        title="Projects"
+        description="Manage all projects for this environment."
+      />
+    </div>
+  );
+};
+
+export default ProjectsPage;
diff --git a/ui/dashboard/src/pages/projects/types.ts b/ui/dashboard/src/pages/projects/types.ts
new file mode 100644
index 0000000000..bbc859cbd6
--- /dev/null
+++ b/ui/dashboard/src/pages/projects/types.ts
@@ -0,0 +1,17 @@
+import { SortingState } from '@tanstack/react-table';
+import { OrderBy, OrderDirection, Project } from '@types';
+
+export interface ProjectsFilters {
+  page: number;
+  orderBy: OrderBy;
+  orderDirection: OrderDirection;
+  searchQuery: string;
+  disabled?: boolean;
+  organizationIds?: string[];
+}
+
+export interface CollectionProps {
+  isLoading?: boolean;
+  onSortingChange: (v: SortingState) => void;
+  projects: Project[];
+}
diff --git a/ui/dashboard/src/pages/settings/index.tsx b/ui/dashboard/src/pages/settings/index.tsx
new file mode 100644
index 0000000000..1d5cca6ee1
--- /dev/null
+++ b/ui/dashboard/src/pages/settings/index.tsx
@@ -0,0 +1,24 @@
+import { useTranslation } from 'i18n';
+import PageHeader from 'elements/page-header';
+import PageLayout from 'elements/page-layout';
+import PageLoader from './page-loader';
+
+export interface SettingsPageForm {
+  name: string;
+  urlCode: string;
+  description?: string;
+  ownerEmail: string;
+}
+
+const SettingsPage = () => {
+  const { t } = useTranslation(['common']);
+
+  return (
+    <PageLayout.Root title={t('settings')}>
+      <PageHeader title={t(`settings`)} description={t(`setting-subtitle`)} />
+      <PageLoader />
+    </PageLayout.Root>
+  );
+};
+
+export default SettingsPage;
diff --git a/ui/dashboard/src/pages/settings/page-content.tsx b/ui/dashboard/src/pages/settings/page-content.tsx
new file mode 100644
index 0000000000..e249a7943f
--- /dev/null
+++ b/ui/dashboard/src/pages/settings/page-content.tsx
@@ -0,0 +1,198 @@
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+import { organizationUpdater } from '@api/organization';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useQueryAccounts } from '@queries/accounts';
+import { LIST_PAGE_SIZE } from 'constants/app';
+import { useToast } from 'hooks';
+import { useTranslation } from 'i18n';
+import * as yup from 'yup';
+import { Organization } from '@types';
+import Button from 'components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from 'components/dropdown';
+import Form from 'components/form';
+import Input from 'components/input';
+import TextArea from 'components/textarea';
+import PageLayout from 'elements/page-layout';
+
+const formSchema = yup.object().shape({
+  name: yup.string().required(),
+  urlCode: yup.string().required(),
+  description: yup.string(),
+  ownerEmail: yup.string().required()
+});
+
+export interface PageContentForm {
+  name: string;
+  urlCode: string;
+  description?: string;
+  ownerEmail: string;
+}
+
+const PageContent = ({ organization }: { organization: Organization }) => {
+  const { notify } = useToast();
+  const { organizationId } = useParams();
+  const { t } = useTranslation(['common', 'form']);
+  const { data: accounts } = useQueryAccounts({
+    params: {
+      cursor: String(0),
+      pageSize: LIST_PAGE_SIZE,
+      organizationId
+    }
+  });
+
+  const form = useForm({
+    resolver: yupResolver(formSchema),
+    defaultValues: {
+      name: organization.name,
+      urlCode: organization.urlCode,
+      description: organization.description,
+      ownerEmail: organization.ownerEmail
+    }
+  });
+
+  const onSubmit: SubmitHandler<PageContentForm> = values => {
+    return organizationUpdater({
+      id: organizationId!,
+      changeDescriptionCommand: {
+        description: values.description
+      },
+      renameCommand: {
+        name: values.name
+      },
+      changeOwnerEmailCommand: {
+        ownerEmail: values.ownerEmail
+      }
+    }).then(() => {
+      notify({
+        toastType: 'toast',
+        messageType: 'success',
+        message: (
+          <span>
+            <b>{values.name}</b> {`has been successfully updated!`}
+          </span>
+        )
+      });
+    });
+  };
+
+  return (
+    <PageLayout.Content>
+      <div className="p-5 shadow-card rounded-lg bg-white">
+        <p className="text-gray-800 typo-head-bold-small">
+          {t('form:general-info')}
+        </p>
+        <FormProvider {...form}>
+          <Form onSubmit={form.handleSubmit(onSubmit)}>
+            <Form.Field
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label required>{t('name')}</Form.Label>
+                  <Form.Control>
+                    <Input
+                      placeholder={`${t('form:placeholder-name')}`}
+                      {...field}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="urlCode"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label required>{t('form:url-code')}</Form.Label>
+                  <Form.Control>
+                    <Input
+                      disabled
+                      placeholder={`${t('form:placeholder-code')}`}
+                      {...field}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label optional>{t('form:description')}</Form.Label>
+                  <Form.Control>
+                    <TextArea
+                      placeholder={t('form:placeholder-desc')}
+                      rows={4}
+                      {...field}
+                    />
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="ownerEmail"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label required>{t('form:owner-email')}</Form.Label>
+                  <Form.Control className="w-full">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger
+                        placeholder={t('form:owner-email')}
+                        label={
+                          accounts?.accounts.find(
+                            item => item.email === field.value
+                          )?.email
+                        }
+                        variant="secondary"
+                        className="w-full"
+                      />
+                      <DropdownMenuContent
+                        className="w-[400px]"
+                        align="start"
+                        {...field}
+                      >
+                        {accounts?.accounts?.map((item, index) => (
+                          <DropdownMenuItem
+                            {...field}
+                            key={index}
+                            value={item.email}
+                            label={item.email}
+                            onSelectOption={value => {
+                              field.onChange(value);
+                            }}
+                          />
+                        ))}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Form.Control>
+                  <Form.Message />
+                </Form.Item>
+              )}
+            />
+            <Button
+              loading={form.formState.isSubmitting}
+              disabled={!form.formState.isDirty}
+              type="submit"
+              className="w-fit mt-6"
+            >
+              {t(`save`)}
+            </Button>
+          </Form>
+        </FormProvider>
+      </div>
+    </PageLayout.Content>
+  );
+};
+
+export default PageContent;
diff --git a/ui/dashboard/src/pages/settings/page-loader.tsx b/ui/dashboard/src/pages/settings/page-loader.tsx
new file mode 100644
index 0000000000..cd170d0029
--- /dev/null
+++ b/ui/dashboard/src/pages/settings/page-loader.tsx
@@ -0,0 +1,28 @@
+import { useQueryOrganizationDetails } from '@queries/organization-details';
+import { getOrgIdStorage } from 'storage/organization';
+import PageLayout from 'elements/page-layout';
+import PageContent from './page-content';
+
+const PageLoader = () => {
+  const organizationId = getOrgIdStorage();
+
+  const { data, isLoading, refetch, isError } = useQueryOrganizationDetails({
+    params: { id: organizationId! }
+  });
+
+  const organization = data?.organization;
+
+  return (
+    <>
+      {isLoading ? (
+        <PageLayout.LoadingState />
+      ) : isError || !organization ? (
+        <PageLayout.ErrorState onRetry={refetch} />
+      ) : (
+        <PageContent organization={organization} />
+      )}
+    </>
+  );
+};
+
+export default PageLoader;
diff --git a/ui/dashboard/src/pages/signin/email.tsx b/ui/dashboard/src/pages/signin/email.tsx
index b62b90e099..b155910377 100644
--- a/ui/dashboard/src/pages/signin/email.tsx
+++ b/ui/dashboard/src/pages/signin/email.tsx
@@ -18,7 +18,7 @@ import { useTranslation } from 'i18n';
 import * as yup from 'yup';
 import { SignInForm } from '@types';
 import { IconBackspace } from '@icons';
-import { Button } from 'components/button';
+import Button from 'components/button';
 import Form from 'components/form';
 import Icon from 'components/icon';
 import Input from 'components/input';
diff --git a/ui/dashboard/src/pages/signin/index.tsx b/ui/dashboard/src/pages/signin/index.tsx
index cf45007aa4..96f8b86c6b 100644
--- a/ui/dashboard/src/pages/signin/index.tsx
+++ b/ui/dashboard/src/pages/signin/index.tsx
@@ -8,7 +8,7 @@ import { setCookieState } from 'cookie';
 import { useSubmit } from 'hooks';
 import { useTranslation } from 'i18n';
 import { IconEmail, IconGoogle } from '@icons';
-import { Button } from 'components/button';
+import Button from 'components/button';
 import Icon from 'components/icon';
 import AuthWrapper from './elements/auth-wrapper';
 
diff --git a/ui/dashboard/src/pages/signin/information.tsx b/ui/dashboard/src/pages/signin/information.tsx
index aaf4460c2f..c65c7c0ee0 100644
--- a/ui/dashboard/src/pages/signin/information.tsx
+++ b/ui/dashboard/src/pages/signin/information.tsx
@@ -3,7 +3,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useTranslation } from 'i18n';
 import * as yup from 'yup';
 import { UserInfoForm } from '@types';
-import { Button } from 'components/button';
+import Button from 'components/button';
 import Form from 'components/form';
 import Input from 'components/input';
 import AuthWrapper from './elements/auth-wrapper';
diff --git a/ui/dashboard/src/pages/signin/organization.tsx b/ui/dashboard/src/pages/signin/organization.tsx
index 835879d816..f0a7b4b455 100644
--- a/ui/dashboard/src/pages/signin/organization.tsx
+++ b/ui/dashboard/src/pages/signin/organization.tsx
@@ -6,8 +6,13 @@ import { PAGE_PATH_ROOT } from 'constants/routing';
 import { useTranslation } from 'i18n';
 import { setOrgIdStorage } from 'storage/organization';
 import * as yup from 'yup';
-import { Button } from 'components/button';
-import Dropdown from 'components/dropdown';
+import Button from 'components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from 'components/dropdown';
 import Form from 'components/form';
 import AuthWrapper from './elements/auth-wrapper';
 
@@ -49,24 +54,34 @@ const SelectOrganization = () => {
           <Form.Field
             control={form.control}
             name="organization"
-            render={() => (
+            render={({ field }) => (
               <Form.Item>
                 <Form.Label required>{t(`organization`)}</Form.Label>
                 <Form.Control>
-                  <Dropdown
-                    expand="full"
-                    className="w-[442px]"
-                    placeholder={t(`organization-placeholder`)}
-                    options={myOrganizations.map(org => ({
-                      label: org.name,
-                      value: org.id
-                    }))}
-                    onChange={i => {
-                      form.clearErrors();
-                      form.setValue('organization', i);
-                    }}
-                    value={form.getValues('organization')}
-                  />
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      label={
+                        myOrganizations.find(
+                          org => org.id === form.getValues('organization')
+                        )?.name || t(`organization-placeholder`)
+                      }
+                      isExpand
+                    />
+                    <DropdownMenuContent className="w-[442px]">
+                      {myOrganizations.map((org, index) => (
+                        <DropdownMenuItem
+                          {...field}
+                          key={index}
+                          label={org.name}
+                          value={org.id}
+                          onSelectOption={value => {
+                            form.clearErrors();
+                            form.setValue('organization', value as string);
+                          }}
+                        />
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </Form.Control>
                 <Form.Message />
               </Form.Item>
diff --git a/ui/dashboard/src/utils/converts.ts b/ui/dashboard/src/utils/converts.ts
new file mode 100644
index 0000000000..7faa6fdd64
--- /dev/null
+++ b/ui/dashboard/src/utils/converts.ts
@@ -0,0 +1,17 @@
+export const onGenerateSlug = (value: string) => {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-+|-+$/g, '');
+};
+
+export const onValidSlug = (value: string) => {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+};
diff --git a/ui/dashboard/src/utils/create-context.ts b/ui/dashboard/src/utils/create-context.ts
new file mode 100644
index 0000000000..cdb5888e2c
--- /dev/null
+++ b/ui/dashboard/src/utils/create-context.ts
@@ -0,0 +1,57 @@
+import {
+  createContext as createReactContext,
+  useContext as useReactContext
+} from 'react';
+
+export interface CreateContextOptions<T> {
+  strict?: boolean;
+  hookName?: string;
+  providerName?: string;
+  errorMessage?: string;
+  name?: string;
+  defaultValue?: T;
+}
+
+export type CreateContextReturn<T> = [
+  React.Provider<T>,
+  () => T,
+  React.Context<T>
+];
+
+function getErrorMessage(hook: string, provider: string) {
+  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
+}
+
+export function createContext<T extends object>(
+  options: CreateContextOptions<T> = {}
+) {
+  const {
+    name,
+    strict = true,
+    hookName = 'useContext',
+    providerName = 'Provider',
+    errorMessage,
+    defaultValue
+  } = options;
+
+  const Context = createReactContext<T | undefined>(defaultValue);
+
+  Context.displayName = name;
+
+  function useContext() {
+    const context = useReactContext(Context);
+
+    if (!context && strict) {
+      const error = new Error(
+        errorMessage ?? getErrorMessage(hookName, providerName)
+      );
+      error.name = 'ContextError';
+      Error.captureStackTrace?.(error, useContext);
+      throw error;
+    }
+
+    return context;
+  }
+
+  return [Context.Provider, useContext, Context] as CreateContextReturn<T>;
+}
diff --git a/ui/dashboard/src/utils/data-type.ts b/ui/dashboard/src/utils/data-type.ts
index 8a996081ba..03e97c63f7 100644
--- a/ui/dashboard/src/utils/data-type.ts
+++ b/ui/dashboard/src/utils/data-type.ts
@@ -1,8 +1,12 @@
-export const isEmpty = (data: number | string | undefined | null) =>
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+
+export const isEmpty = (data: number | string | undefined | null | boolean) =>
   data === undefined || data === '' || data === null;
 
-export const isNotEmpty = (data: number | string | undefined | null) =>
-  data !== undefined && data !== '' && data !== null;
+export const isNotEmpty = (
+  data: number | string | undefined | null | boolean | string[]
+) => data !== undefined && data !== '' && data !== null;
 
 export const isEmptyObject = (data: object) => Object.keys(data).length === 0;
 
@@ -16,3 +20,53 @@ export const toNumber = (value: string | undefined) => {
   const number = Number(value);
   return Number.isNaN(number) ? 0 : number;
 };
+
+export const pickValues = <T extends object>(
+  response: T,
+  values: object
+): Partial<T> => pick(response, Object.keys(values));
+
+export const omitValues = <T extends object>(
+  response: T,
+  values: object
+): Partial<T> => omit(response, Object.keys(values));
+
+type Keys<T> = Array<keyof T>;
+
+type Values<T> = {
+  [K in keyof T]: T[K];
+}[keyof T][];
+
+type ValuesNonNullable<T> = {
+  [K in keyof T]: NonNullable<T[K]>;
+}[keyof T][];
+
+export type Entries<T> = {
+  [K in keyof T]: [K, T[K]];
+}[keyof T][];
+
+export type ListEntries<T> = {
+  [K in keyof T]: [number, NonNullable<T[K]>];
+}[keyof T][];
+
+export const getObjectKeys = <T extends object>(obj: T) =>
+  Object.keys(obj) as Keys<T>;
+
+export const getObjectValues = <T extends object>(obj: T) =>
+  Object.values(obj) as Values<T>;
+
+export const getObjectEntries = <T extends object>(obj: T) =>
+  Object.entries(obj) as Entries<T>;
+
+export const getListKeys = <T extends object>(obj: T) =>
+  getObjectKeys(obj)
+    .filter(key => obj[key] !== null)
+    .map(key => Number(key));
+
+export const getListValues = <T extends object>(obj: T) =>
+  Object.values(obj).filter(item => item !== null) as ValuesNonNullable<T>;
+
+export const getListEntries = <T extends object>(obj: T) =>
+  Object.entries(obj)
+    .filter(([, item]) => item !== null)
+    .map(([id, item]) => [Number(id), item]) as ListEntries<T>;
diff --git a/ui/dashboard/src/utils/date-time.ts b/ui/dashboard/src/utils/date-time.ts
new file mode 100644
index 0000000000..e4e8adbaf4
--- /dev/null
+++ b/ui/dashboard/src/utils/date-time.ts
@@ -0,0 +1,51 @@
+import { Locale } from 'date-fns';
+import { enUS as enCH, ja as jaCH } from 'date-fns/locale';
+import { Language, getLanguage } from 'i18n';
+import { format } from 'timeago.js';
+
+export type FormatDateTimeOptions = { pattern: DTPattern };
+
+export enum DTPattern {
+  /**
+   * Format: MM/dd/yyyy HH:mm
+   */
+  FullDateTime
+}
+
+const locales: Record<Language, Locale> = {
+  en: enCH,
+  ja: jaCH
+};
+
+const patterns: Record<DTPattern, Record<Language, string>> = {
+  [DTPattern.FullDateTime]: { en: 'dd.MM.yyyy HH:mm', ja: 'dd.MM.yyyy HH:mm' }
+};
+
+export const getDateTimePattern = (pattern: DTPattern) => {
+  const language = getLanguage();
+  return patterns[pattern][language] || '';
+};
+
+export type FormatDateTime = (
+  value: string,
+  overrideOptions?: FormatDateTimeOptions
+) => string;
+
+export const useFormatDateTime = () => {
+  const formatDateTime = (value: string) => {
+    try {
+      const date = new Date(Number(value) * 1000);
+
+      return format(date);
+    } catch (e) {
+      console.error(e);
+      return value;
+    }
+  };
+
+  return formatDateTime;
+};
+
+export const getDateTimeLocale = (language: Language) => {
+  return locales[language];
+};
diff --git a/ui/dashboard/src/utils/search-params.ts b/ui/dashboard/src/utils/search-params.ts
new file mode 100644
index 0000000000..d38eaa6fc0
--- /dev/null
+++ b/ui/dashboard/src/utils/search-params.ts
@@ -0,0 +1,27 @@
+import { useCallback, useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import queryString, { ParsedQuery } from 'query-string';
+
+export type SearchParams = ParsedQuery<string>;
+
+export function useSearchParams() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const searchOptions = useMemo<SearchParams>((): SearchParams => {
+    return queryString.parse(location.search);
+  }, [location.search]);
+
+  const onChangSearchParams = useCallback(
+    (options: Record<string, string | number | boolean>) => {
+      navigate(`${location.pathname}?${stringifySearchParams(options)}`, {
+        replace: true
+      });
+    },
+    [navigate]
+  );
+
+  return { searchOptions, onChangSearchParams };
+}
+
+export const stringifySearchParams = queryString.stringify;
diff --git a/ui/dashboard/tailwind.config.ts b/ui/dashboard/tailwind.config.ts
index 8899aaf8c3..797c9b84f0 100644
--- a/ui/dashboard/tailwind.config.ts
+++ b/ui/dashboard/tailwind.config.ts
@@ -121,14 +121,20 @@ const theme = {
   colors,
   boxShadow: {
     DEFAULT: '0px 2px 2px rgba(136, 135, 135, 0.25)',
-    menu: '0px 3px 12px 0px rgba(0, 0, 0, 0.08)',
+    menu: '0px 8px 12px rgba(0, 0, 0, 0.08)',
+    card: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)',
+    dropdown: '0px 4px 8px rgba(35, 35, 35, 0.1)',
     'border-primary-500': `inset 0 0 0 1px ${colors.primary[500]}`,
     'border-primary-600': `inset 0 0 0 1px ${colors.primary[600]}`,
+    'border-primary-700': `inset 0 0 0 1px ${colors.primary[700]}`,
     'border-gray-200': `inset 0 0 0 1px ${colors.gray[200]}`,
     'border-gray-300': `inset 0 0 0 1px ${colors.gray[300]}`,
+    'border-gray-400': `inset 0 0 0 1px ${colors.gray[400]}`,
     'border-gray-500': `inset 0 0 0 1px ${colors.gray[500]}`,
     'border-accent-red-500': `inset 0 0 0 1px ${colors.accent.red[500]}`,
-    none: 'none'
+    none: 'none',
+    tooltip:
+      'rgba(29, 29, 29, 0.35) 0px 10px 38px -10px, rgba(29, 29, 29, 0.20) 0px 10px 20px -15px'
   },
   fontFamily: {
     'sofia-pro': ['Sofia Pro', 'sans-serif']
@@ -231,6 +237,11 @@ const container = plugin(({ addComponents }) => {
     'size-120': {
       width: '120px',
       height: '120px'
+    },
+    '.flex-center': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
   };
 
@@ -348,6 +359,10 @@ const typography = plugin(({ addComponents }) => {
 
 const iconSize = plugin(({ addComponents }) => {
   const components = {
+    '.icon-size-fit': {
+      width: 'fit-content',
+      height: 'fit-content'
+    },
     '.icon-size-xxs': {
       width: '16px',
       height: '16px',
diff --git a/ui/dashboard/tsconfig.app.json b/ui/dashboard/tsconfig.app.json
index e2b2520806..c9a136d9dc 100644
--- a/ui/dashboard/tsconfig.app.json
+++ b/ui/dashboard/tsconfig.app.json
@@ -10,7 +10,6 @@
     ],
     "module": "ESNext",
     "skipLibCheck": true,
-    "importsNotUsedAsValues": "error",
     "ignoreDeprecations": "5.0",
     /* Bundler mode */
     "moduleResolution": "bundler",
diff --git a/ui/dashboard/yarn.lock b/ui/dashboard/yarn.lock
index 11001c4db4..f093dfd735 100644
--- a/ui/dashboard/yarn.lock
+++ b/ui/dashboard/yarn.lock
@@ -20,34 +20,34 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
-  integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.25.7.tgz#438f2c524071531d643c6f0188e1e28f130cebc7"
+  integrity sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==
   dependencies:
-    "@babel/highlight" "^7.24.7"
+    "@babel/highlight" "^7.25.7"
     picocolors "^1.0.0"
 
-"@babel/compat-data@^7.25.2":
-  version "7.25.4"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.4.tgz#7d2a80ce229890edcf4cc259d4d696cb4dae2fcb"
-  integrity sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==
+"@babel/compat-data@^7.25.7":
+  version "7.25.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.8.tgz#0376e83df5ab0eb0da18885c0140041f0747a402"
+  integrity sha512-ZsysZyXY4Tlx+Q53XdnOFmqwfB9QDTHYxaZYajWRoBLuLEAwI2UIbtxOjWh/cFaa9IKUlcB+DDuoskLuKu56JA==
 
-"@babel/core@^7.21.3", "@babel/core@^7.24.5":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.2.tgz#ed8eec275118d7613e77a352894cd12ded8eba77"
-  integrity sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==
+"@babel/core@^7.21.3", "@babel/core@^7.25.2":
+  version "7.25.8"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.8.tgz#a57137d2a51bbcffcfaeba43cb4dd33ae3e0e1c6"
+  integrity sha512-Oixnb+DzmRT30qu9d3tJSQkxuygWm32DFykT4bRoORPa9hZ/L4KhVB/XiRm6KG+roIEM7DBQlmg27kw2HZkdZg==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.24.7"
-    "@babel/generator" "^7.25.0"
-    "@babel/helper-compilation-targets" "^7.25.2"
-    "@babel/helper-module-transforms" "^7.25.2"
-    "@babel/helpers" "^7.25.0"
-    "@babel/parser" "^7.25.0"
-    "@babel/template" "^7.25.0"
-    "@babel/traverse" "^7.25.2"
-    "@babel/types" "^7.25.2"
+    "@babel/code-frame" "^7.25.7"
+    "@babel/generator" "^7.25.7"
+    "@babel/helper-compilation-targets" "^7.25.7"
+    "@babel/helper-module-transforms" "^7.25.7"
+    "@babel/helpers" "^7.25.7"
+    "@babel/parser" "^7.25.8"
+    "@babel/template" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.8"
     convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
@@ -63,24 +63,24 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.23.0", "@babel/generator@^7.25.0", "@babel/generator@^7.25.6":
-  version "7.25.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c"
-  integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==
+"@babel/generator@^7.23.0", "@babel/generator@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.7.tgz#de86acbeb975a3e11ee92dd52223e6b03b479c56"
+  integrity sha512-5Dqpl5fyV9pIAD62yK9P7fcA768uVPUyrQmqpqstHWgMma4feF1x/oFysBCVZLY5wJ2GkMUCdsNDnGZrPoR6rA==
   dependencies:
-    "@babel/types" "^7.25.6"
+    "@babel/types" "^7.25.7"
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.25"
-    jsesc "^2.5.1"
+    jsesc "^3.0.2"
 
-"@babel/helper-compilation-targets@^7.25.2":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz#e1d9410a90974a3a5a66e84ff55ef62e3c02d06c"
-  integrity sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==
+"@babel/helper-compilation-targets@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.7.tgz#11260ac3322dda0ef53edfae6e97b961449f5fa4"
+  integrity sha512-DniTEax0sv6isaw6qSQSfV4gVRNtw2rte8HHM45t9ZR0xILaufBRNkpMifCRiAPyvL4ACD6v0gfCwCmtOQaV4A==
   dependencies:
-    "@babel/compat-data" "^7.25.2"
-    "@babel/helper-validator-option" "^7.24.8"
-    browserslist "^4.23.1"
+    "@babel/compat-data" "^7.25.7"
+    "@babel/helper-validator-option" "^7.25.7"
+    browserslist "^4.24.0"
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
@@ -106,36 +106,36 @@
   dependencies:
     "@babel/types" "^7.24.7"
 
-"@babel/helper-module-imports@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz#f2f980392de5b84c3328fc71d38bd81bbb83042b"
-  integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
+"@babel/helper-module-imports@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.7.tgz#dba00d9523539152906ba49263e36d7261040472"
+  integrity sha512-o0xCgpNmRohmnoWKQ0Ij8IdddjyBFE4T2kagL/x6M3+4zUgc+4qTOUBoNe4XxDskt1HPKO007ZPiMgLDq2s7Kw==
   dependencies:
-    "@babel/traverse" "^7.24.7"
-    "@babel/types" "^7.24.7"
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
 
-"@babel/helper-module-transforms@^7.25.2":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz#ee713c29768100f2776edf04d4eb23b8d27a66e6"
-  integrity sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==
+"@babel/helper-module-transforms@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.7.tgz#2ac9372c5e001b19bc62f1fe7d96a18cb0901d1a"
+  integrity sha512-k/6f8dKG3yDz/qCwSM+RKovjMix563SLxQFo0UhRNo239SP6n9u5/eLtKD6EAjwta2JHJ49CsD8pms2HdNiMMQ==
   dependencies:
-    "@babel/helper-module-imports" "^7.24.7"
-    "@babel/helper-simple-access" "^7.24.7"
-    "@babel/helper-validator-identifier" "^7.24.7"
-    "@babel/traverse" "^7.25.2"
+    "@babel/helper-module-imports" "^7.25.7"
+    "@babel/helper-simple-access" "^7.25.7"
+    "@babel/helper-validator-identifier" "^7.25.7"
+    "@babel/traverse" "^7.25.7"
 
-"@babel/helper-plugin-utils@^7.24.7":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
-  integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
+"@babel/helper-plugin-utils@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.7.tgz#8ec5b21812d992e1ef88a9b068260537b6f0e36c"
+  integrity sha512-eaPZai0PiqCi09pPs3pAFfl/zYgGaE6IdXtYvmf0qlcDTd3WCtO7JWCcRd64e0EQrcYgiHibEZnOGsSY4QSgaw==
 
-"@babel/helper-simple-access@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz#bcade8da3aec8ed16b9c4953b74e506b51b5edb3"
-  integrity sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==
+"@babel/helper-simple-access@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.25.7.tgz#5eb9f6a60c5d6b2e0f76057004f8dacbddfae1c0"
+  integrity sha512-FPGAkJmyoChQeM+ruBGIDyrT2tKfZJO8NcxdC+CWNJi7N8/rZpSxK7yvBJ5O/nF1gfu5KzN7VKG3YVSLFfRSxQ==
   dependencies:
-    "@babel/traverse" "^7.24.7"
-    "@babel/types" "^7.24.7"
+    "@babel/traverse" "^7.25.7"
+    "@babel/types" "^7.25.7"
 
 "@babel/helper-split-export-declaration@^7.22.6":
   version "7.24.7"
@@ -144,75 +144,75 @@
   dependencies:
     "@babel/types" "^7.24.7"
 
-"@babel/helper-string-parser@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
-  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+"@babel/helper-string-parser@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz#d50e8d37b1176207b4fe9acedec386c565a44a54"
+  integrity sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==
 
-"@babel/helper-validator-identifier@^7.16.7", "@babel/helper-validator-identifier@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
-  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+"@babel/helper-validator-identifier@^7.16.7", "@babel/helper-validator-identifier@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz#77b7f60c40b15c97df735b38a66ba1d7c3e93da5"
+  integrity sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==
 
-"@babel/helper-validator-option@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz#3725cdeea8b480e86d34df15304806a06975e33d"
-  integrity sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==
+"@babel/helper-validator-option@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.7.tgz#97d1d684448228b30b506d90cace495d6f492729"
+  integrity sha512-ytbPLsm+GjArDYXJ8Ydr1c/KJuutjF2besPNbIZnZ6MKUxi/uTA22t2ymmA4WFjZFpjiAMO0xuuJPqK2nvDVfQ==
 
-"@babel/helpers@^7.25.0":
-  version "7.25.6"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.25.6.tgz#57ee60141829ba2e102f30711ffe3afab357cc60"
-  integrity sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==
+"@babel/helpers@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.25.7.tgz#091b52cb697a171fe0136ab62e54e407211f09c2"
+  integrity sha512-Sv6pASx7Esm38KQpF/U/OXLwPPrdGHNKoeblRxgZRLXnAtnkEe4ptJPDtAZM7fBLadbc1Q07kQpSiGQ0Jg6tRA==
   dependencies:
-    "@babel/template" "^7.25.0"
-    "@babel/types" "^7.25.6"
+    "@babel/template" "^7.25.7"
+    "@babel/types" "^7.25.7"
 
-"@babel/highlight@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
-  integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==
+"@babel/highlight@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.7.tgz#20383b5f442aa606e7b5e3043b0b1aafe9f37de5"
+  integrity sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.24.7"
+    "@babel/helper-validator-identifier" "^7.25.7"
     chalk "^2.4.2"
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.5", "@babel/parser@^7.20.7", "@babel/parser@^7.23.0", "@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
-  version "7.25.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
-  integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.5", "@babel/parser@^7.20.7", "@babel/parser@^7.23.0", "@babel/parser@^7.25.7", "@babel/parser@^7.25.8":
+  version "7.25.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.8.tgz#f6aaf38e80c36129460c1657c0762db584c9d5e2"
+  integrity sha512-HcttkxzdPucv3nNFmfOOMfFf64KgdJVqm1KaCm25dPGMLElo9nsLvXeJECQg8UzPuBGLyTSA0ZzqCtDSzKTEoQ==
   dependencies:
-    "@babel/types" "^7.25.6"
+    "@babel/types" "^7.25.8"
 
-"@babel/plugin-transform-react-jsx-self@^7.24.5":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz#66bff0248ea0b549972e733516ffad577477bdab"
-  integrity sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==
+"@babel/plugin-transform-react-jsx-self@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.7.tgz#3d11df143131fd8f5486a1f7d3839890f88f8c85"
+  integrity sha512-JD9MUnLbPL0WdVK8AWC7F7tTG2OS6u/AKKnsK+NdRhUiVdnzyR1S3kKQCaRLOiaULvUiqK6Z4JQE635VgtCFeg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/plugin-transform-react-jsx-source@^7.24.1":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz#1198aab2548ad19582013815c938d3ebd8291ee3"
-  integrity sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==
+"@babel/plugin-transform-react-jsx-source@^7.24.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.7.tgz#a0d8372310d5ea5b0447dfa03a8485f960eff7be"
+  integrity sha512-S/JXG/KrbIY06iyJPKfxr0qRxnhNOdkNXYBl/rmwgDd72cQLH9tEGkDm/yJPGvcSIUoikzfjMios9i+xT/uv9w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.7"
 
-"@babel/runtime@^7.23.2", "@babel/runtime@^7.24.8":
-  version "7.25.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
-  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.25.0":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
+  integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.24.7", "@babel/template@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
-  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
+"@babel/template@^7.24.7", "@babel/template@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.7.tgz#27f69ce382855d915b14ab0fe5fb4cbf88fa0769"
+  integrity sha512-wRwtAgI3bAS+JGU2upWNL9lSlDcRCqD05BZ1n3X2ONLH1WilFP6O1otQjeMK/1g0pvYcXC7b/qVUB1keofjtZA==
   dependencies:
-    "@babel/code-frame" "^7.24.7"
-    "@babel/parser" "^7.25.0"
-    "@babel/types" "^7.25.0"
+    "@babel/code-frame" "^7.25.7"
+    "@babel/parser" "^7.25.7"
+    "@babel/types" "^7.25.7"
 
 "@babel/traverse@7.23.2":
   version "7.23.2"
@@ -230,16 +230,16 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.24.7", "@babel/traverse@^7.25.2":
-  version "7.25.6"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
-  integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==
+"@babel/traverse@^7.25.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.7.tgz#83e367619be1cab8e4f2892ef30ba04c26a40fa8"
+  integrity sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==
   dependencies:
-    "@babel/code-frame" "^7.24.7"
-    "@babel/generator" "^7.25.6"
-    "@babel/parser" "^7.25.6"
-    "@babel/template" "^7.25.0"
-    "@babel/types" "^7.25.6"
+    "@babel/code-frame" "^7.25.7"
+    "@babel/generator" "^7.25.7"
+    "@babel/parser" "^7.25.7"
+    "@babel/template" "^7.25.7"
+    "@babel/types" "^7.25.7"
     debug "^4.3.1"
     globals "^11.1.0"
 
@@ -251,13 +251,13 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.17.0", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.23.0", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6":
-  version "7.25.6"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
-  integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
+"@babel/types@^7.0.0", "@babel/types@^7.17.0", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.23.0", "@babel/types@^7.24.7", "@babel/types@^7.25.7", "@babel/types@^7.25.8":
+  version "7.25.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.8.tgz#5cf6037258e8a9bcad533f4979025140cb9993e1"
+  integrity sha512-JWtuCu8VQsMladxVz/P4HzHUGCAwpuqacmowgXFs5XjxIgKuNjnLokQzuVjlTvIzODaDmpjT3oxcC48vyk9EWg==
   dependencies:
-    "@babel/helper-string-parser" "^7.24.8"
-    "@babel/helper-validator-identifier" "^7.24.7"
+    "@babel/helper-string-parser" "^7.25.7"
+    "@babel/helper-validator-identifier" "^7.25.7"
     to-fast-properties "^2.0.0"
 
 "@esbuild/aix-ppc64@0.21.5":
@@ -383,9 +383,9 @@
     eslint-visitor-keys "^3.3.0"
 
 "@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.11.0":
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
-  integrity sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.1.tgz#a547badfc719eb3e5f4b556325e542fbe9d7a18f"
+  integrity sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==
 
 "@eslint/config-array@^0.18.0":
   version "0.18.0"
@@ -396,6 +396,11 @@
     debug "^4.3.1"
     minimatch "^3.1.2"
 
+"@eslint/core@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.6.0.tgz#9930b5ba24c406d67a1760e94cdbac616a6eb674"
+  integrity sha512-8I2Q8ykA4J0x0o7cg67FPVnehcqWTBehu/lmY+bolPFHGjh49YzGBMXTvpqVgEbBdvNCSxj6iFgiIyHzf03lzg==
+
 "@eslint/eslintrc@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.1.0.tgz#dbd3482bfd91efa663cbe7aa1f506839868207b6"
@@ -411,57 +416,77 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@9.9.1", "@eslint/js@^9.8.0":
-  version "9.9.1"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.9.1.tgz#4a97e85e982099d6c7ee8410aacb55adaa576f06"
-  integrity sha512-xIDQRsfg5hNBqHz04H1R3scSVwmI+KUbqjsQKHKQ1DAUSaUjYPReZZmS/5PNiKu1fUvzDd6H7DEDKACSEhu+TQ==
+"@eslint/js@9.12.0", "@eslint/js@^9.8.0":
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.12.0.tgz#69ca3ca9fab9a808ec6d67b8f6edb156cbac91e1"
+  integrity sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==
 
 "@eslint/object-schema@^2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
   integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
 
+"@eslint/plugin-kit@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.2.0.tgz#8712dccae365d24e9eeecb7b346f85e750ba343d"
+  integrity sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==
+  dependencies:
+    levn "^0.4.1"
+
 "@floating-ui/core@^1.6.0":
-  version "1.6.7"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.7.tgz#7602367795a390ff0662efd1c7ae8ca74e75fb12"
-  integrity sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
   dependencies:
-    "@floating-ui/utils" "^0.2.7"
+    "@floating-ui/utils" "^0.2.8"
 
 "@floating-ui/dom@^1.0.0":
-  version "1.6.10"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.10.tgz#b74c32f34a50336c86dcf1f1c845cf3a39e26d6f"
-  integrity sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.11.tgz#8631857838d34ee5712339eb7cbdfb8ad34da723"
+  integrity sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==
   dependencies:
     "@floating-ui/core" "^1.6.0"
-    "@floating-ui/utils" "^0.2.7"
+    "@floating-ui/utils" "^0.2.8"
 
 "@floating-ui/react-dom@^2.0.0":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz#cca58b6b04fc92b4c39288252e285e0422291fb0"
-  integrity sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
+  integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
-"@floating-ui/utils@^0.2.7":
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.7.tgz#d0ece53ce99ab5a8e37ebdfe5e32452a2bfc073e"
-  integrity sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
 "@hookform/resolvers@^3.9.0":
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.9.0.tgz#cf540ac21c6c0cd24a40cf53d8e6d64391fb753d"
   integrity sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==
 
+"@humanfs/core@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.0.tgz#08db7a8c73bb07673d9ebd925f2dad746411fcec"
+  integrity sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==
+
+"@humanfs/node@^0.16.5":
+  version "0.16.5"
+  resolved "https://registry.yarnpkg.com/@humanfs/node/-/node-0.16.5.tgz#a9febb7e7ad2aff65890fdc630938f8d20aa84ba"
+  integrity sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==
+  dependencies:
+    "@humanfs/core" "^0.19.0"
+    "@humanwhocodes/retry" "^0.3.0"
+
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/retry@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.0.tgz#6d86b8cb322660f03d3f0aa94b99bdd8e172d570"
-  integrity sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==
+"@humanwhocodes/retry@^0.3.0", "@humanwhocodes/retry@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.1.tgz#c72a5c76a9fbaf3488e231b13dc52c0da7bab42a"
+  integrity sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==
 
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
@@ -546,7 +571,7 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+"@nodelib/fs.walk@^1.2.3":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -581,6 +606,20 @@
   dependencies:
     "@radix-ui/react-primitive" "2.0.0"
 
+"@radix-ui/react-checkbox@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz#6465b800420923ecc39cbeaa8f357b5f09dbfd52"
+  integrity sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
 "@radix-ui/react-collection@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.0.tgz#f18af78e46454a2360d103c2251773028b7724ed"
@@ -601,35 +640,40 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8"
   integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
 
-"@radix-ui/react-dialog@^1.1.1":
+"@radix-ui/react-context@1.1.1":
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz#4906507f7b4ad31e22d7dad69d9330c87c431d44"
-  integrity sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
+  integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
+
+"@radix-ui/react-dialog@^1.1.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz#d9345575211d6f2d13e209e84aec9a8584b54d6c"
+  integrity sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==
   dependencies:
     "@radix-ui/primitive" "1.1.0"
     "@radix-ui/react-compose-refs" "1.1.0"
-    "@radix-ui/react-context" "1.1.0"
-    "@radix-ui/react-dismissable-layer" "1.1.0"
-    "@radix-ui/react-focus-guards" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-focus-guards" "1.1.1"
     "@radix-ui/react-focus-scope" "1.1.0"
     "@radix-ui/react-id" "1.1.0"
-    "@radix-ui/react-portal" "1.1.1"
-    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-slot" "1.1.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
     aria-hidden "^1.1.1"
-    react-remove-scroll "2.5.7"
+    react-remove-scroll "2.6.0"
 
 "@radix-ui/react-direction@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
   integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
 
-"@radix-ui/react-dismissable-layer@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz#2cd0a49a732372513733754e6032d3fb7988834e"
-  integrity sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==
+"@radix-ui/react-dismissable-layer@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz#cbdcb739c5403382bdde5f9243042ba643883396"
+  integrity sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==
   dependencies:
     "@radix-ui/primitive" "1.1.0"
     "@radix-ui/react-compose-refs" "1.1.0"
@@ -638,22 +682,22 @@
     "@radix-ui/react-use-escape-keydown" "1.1.0"
 
 "@radix-ui/react-dropdown-menu@^2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.1.tgz#3dc578488688250dbbe109d9ff2ca28a9bca27ec"
-  integrity sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.2.tgz#acc49577130e3c875ef0133bd1e271ea3392d924"
+  integrity sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==
   dependencies:
     "@radix-ui/primitive" "1.1.0"
     "@radix-ui/react-compose-refs" "1.1.0"
-    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
     "@radix-ui/react-id" "1.1.0"
-    "@radix-ui/react-menu" "2.1.1"
+    "@radix-ui/react-menu" "2.1.2"
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
-"@radix-ui/react-focus-guards@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz#8e9abb472a9a394f59a1b45f3dd26cfe3fc6da13"
-  integrity sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==
+"@radix-ui/react-focus-guards@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
+  integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
 
 "@radix-ui/react-focus-scope@1.1.0":
   version "1.1.0"
@@ -671,50 +715,50 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-menu@2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.1.tgz#bd623ace0e1ae1ac78023a505fec0541d59fb346"
-  integrity sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==
+"@radix-ui/react-menu@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.2.tgz#91f6815845a4298dde775563ed2d80b7ad667899"
+  integrity sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==
   dependencies:
     "@radix-ui/primitive" "1.1.0"
     "@radix-ui/react-collection" "1.1.0"
     "@radix-ui/react-compose-refs" "1.1.0"
-    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
     "@radix-ui/react-direction" "1.1.0"
-    "@radix-ui/react-dismissable-layer" "1.1.0"
-    "@radix-ui/react-focus-guards" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-focus-guards" "1.1.1"
     "@radix-ui/react-focus-scope" "1.1.0"
     "@radix-ui/react-id" "1.1.0"
     "@radix-ui/react-popper" "1.2.0"
-    "@radix-ui/react-portal" "1.1.1"
-    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-roving-focus" "1.1.0"
     "@radix-ui/react-slot" "1.1.0"
     "@radix-ui/react-use-callback-ref" "1.1.0"
     aria-hidden "^1.1.1"
-    react-remove-scroll "2.5.7"
+    react-remove-scroll "2.6.0"
 
 "@radix-ui/react-popover@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.1.tgz#604b783cdb3494ed4f16a58c17f0e81e61ab7775"
-  integrity sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.1.2.tgz#a0cab25f69aa49ad0077d91e9e9dcd323758020c"
+  integrity sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==
   dependencies:
     "@radix-ui/primitive" "1.1.0"
     "@radix-ui/react-compose-refs" "1.1.0"
-    "@radix-ui/react-context" "1.1.0"
-    "@radix-ui/react-dismissable-layer" "1.1.0"
-    "@radix-ui/react-focus-guards" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-focus-guards" "1.1.1"
     "@radix-ui/react-focus-scope" "1.1.0"
     "@radix-ui/react-id" "1.1.0"
     "@radix-ui/react-popper" "1.2.0"
-    "@radix-ui/react-portal" "1.1.1"
-    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-slot" "1.1.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
     aria-hidden "^1.1.1"
-    react-remove-scroll "2.5.7"
+    react-remove-scroll "2.6.0"
 
 "@radix-ui/react-popper@1.2.0":
   version "1.2.0"
@@ -732,18 +776,18 @@
     "@radix-ui/react-use-size" "1.1.0"
     "@radix-ui/rect" "1.1.0"
 
-"@radix-ui/react-portal@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.1.tgz#1957f1eb2e1aedfb4a5475bd6867d67b50b1d15f"
-  integrity sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==
+"@radix-ui/react-portal@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.2.tgz#51eb46dae7505074b306ebcb985bf65cc547d74e"
+  integrity sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==
   dependencies:
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-presence@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.0.tgz#227d84d20ca6bfe7da97104b1a8b48a833bfb478"
-  integrity sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==
+"@radix-ui/react-presence@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.1.tgz#98aba423dba5e0c687a782c0669dcd99de17f9b1"
+  integrity sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
@@ -771,16 +815,16 @@
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
 "@radix-ui/react-scroll-area@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.1.0.tgz#50b24b0fc9ada151d176395bcf47b2ec68feada5"
-  integrity sha512-9ArIZ9HWhsrfqS765h+GZuLoxaRHD/j0ZWOWilsCvYTpYJp8XwCqNG7Dt9Nu/TItKOdgLGkOPCodQvDc+UMwYg==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.0.tgz#d09fd693728b09c50145935bec6f91efc2661729"
+  integrity sha512-q2jMBdsJ9zB7QG6ngQNzNwlvxLQqONyL58QbEGwuyRZZb/ARQwk3uQVbCF7GvQVOtV6EU/pDxAw3zRzJZI3rpQ==
   dependencies:
     "@radix-ui/number" "1.1.0"
     "@radix-ui/primitive" "1.1.0"
     "@radix-ui/react-compose-refs" "1.1.0"
-    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
     "@radix-ui/react-direction" "1.1.0"
-    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-presence" "1.1.1"
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
@@ -792,6 +836,38 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.0"
 
+"@radix-ui/react-tabs@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.1.tgz#698bd97923f6bcd629738198a73beebcc4c88b30"
+  integrity sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-roving-focus" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
+"@radix-ui/react-tooltip@^1.1.2":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.3.tgz#4250b14723f2d8477e7a3d0526c169f91d1f2f74"
+  integrity sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-visually-hidden" "1.1.0"
+
 "@radix-ui/react-use-callback-ref@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
@@ -816,6 +892,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
   integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
 
+"@radix-ui/react-use-previous@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c"
+  integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==
+
 "@radix-ui/react-use-rect@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz#13b25b913bd3e3987cc9b073a1a164bb1cf47b88"
@@ -830,104 +911,111 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-visually-hidden@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz#ad47a8572580f7034b3807c8e6740cd41038a5a2"
+  integrity sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/rect@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
   integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
 
-"@remix-run/router@1.19.1":
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.19.1.tgz#984771bfd1de2715f42394c87fb716c1349e014f"
-  integrity sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==
+"@remix-run/router@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.20.0.tgz#03554155b45d8b529adf635b2f6ad1165d70d8b4"
+  integrity sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==
 
 "@rollup/pluginutils@^5.0.5":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
-  integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.2.tgz#d3bc9f0fea4fd4086aaac6aa102f3fa587ce8bd9"
+  integrity sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==
   dependencies:
     "@types/estree" "^1.0.0"
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rollup/rollup-android-arm-eabi@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz#8b613b9725e8f9479d142970b106b6ae878610d5"
-  integrity sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==
-
-"@rollup/rollup-android-arm64@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz#654ca1049189132ff602bfcf8df14c18da1f15fb"
-  integrity sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==
-
-"@rollup/rollup-darwin-arm64@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz#6d241d099d1518ef0c2205d96b3fa52e0fe1954b"
-  integrity sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==
-
-"@rollup/rollup-darwin-x64@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz#42bd19d292a57ee11734c980c4650de26b457791"
-  integrity sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz#f23555ee3d8fe941c5c5fd458cd22b65eb1c2232"
-  integrity sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==
-
-"@rollup/rollup-linux-arm-musleabihf@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz#f3bbd1ae2420f5539d40ac1fde2b38da67779baa"
-  integrity sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==
-
-"@rollup/rollup-linux-arm64-gnu@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz#7abe900120113e08a1f90afb84c7c28774054d15"
-  integrity sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==
-
-"@rollup/rollup-linux-arm64-musl@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz#9e655285c8175cd44f57d6a1e8e5dedfbba1d820"
-  integrity sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==
-
-"@rollup/rollup-linux-powerpc64le-gnu@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz#9a79ae6c9e9d8fe83d49e2712ecf4302db5bef5e"
-  integrity sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==
-
-"@rollup/rollup-linux-riscv64-gnu@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz#67ac70eca4ace8e2942fabca95164e8874ab8128"
-  integrity sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==
-
-"@rollup/rollup-linux-s390x-gnu@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz#9f883a7440f51a22ed7f99e1d070bd84ea5005fc"
-  integrity sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==
-
-"@rollup/rollup-linux-x64-gnu@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz#70116ae6c577fe367f58559e2cffb5641a1dd9d0"
-  integrity sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==
-
-"@rollup/rollup-linux-x64-musl@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz#f473f88219feb07b0b98b53a7923be716d1d182f"
-  integrity sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==
-
-"@rollup/rollup-win32-arm64-msvc@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz#4349482d17f5d1c58604d1c8900540d676f420e0"
-  integrity sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==
-
-"@rollup/rollup-win32-ia32-msvc@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz#a6fc39a15db618040ec3c2a24c1e26cb5f4d7422"
-  integrity sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==
-
-"@rollup/rollup-win32-x64-msvc@4.22.4":
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz#3dd5d53e900df2a40841882c02e56f866c04d202"
-  integrity sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==
+"@rollup/rollup-android-arm-eabi@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz#1661ff5ea9beb362795304cb916049aba7ac9c54"
+  integrity sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==
+
+"@rollup/rollup-android-arm64@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz#2ffaa91f1b55a0082b8a722525741aadcbd3971e"
+  integrity sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==
+
+"@rollup/rollup-darwin-arm64@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz#627007221b24b8cc3063703eee0b9177edf49c1f"
+  integrity sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==
+
+"@rollup/rollup-darwin-x64@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz#0605506142b9e796c370d59c5984ae95b9758724"
+  integrity sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz#62dfd196d4b10c0c2db833897164d2d319ee0cbb"
+  integrity sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==
+
+"@rollup/rollup-linux-arm-musleabihf@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz#53ce72aeb982f1f34b58b380baafaf6a240fddb3"
+  integrity sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==
+
+"@rollup/rollup-linux-arm64-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz#1632990f62a75c74f43e4b14ab3597d7ed416496"
+  integrity sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==
+
+"@rollup/rollup-linux-arm64-musl@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz#8c03a996efb41e257b414b2e0560b7a21f2d9065"
+  integrity sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz#5b98729628d5bcc8f7f37b58b04d6845f85c7b5d"
+  integrity sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==
+
+"@rollup/rollup-linux-riscv64-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz#48e42e41f4cabf3573cfefcb448599c512e22983"
+  integrity sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==
+
+"@rollup/rollup-linux-s390x-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz#e0b4f9a966872cb7d3e21b9e412a4b7efd7f0b58"
+  integrity sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==
+
+"@rollup/rollup-linux-x64-gnu@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz#78144741993100f47bd3da72fce215e077ae036b"
+  integrity sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==
+
+"@rollup/rollup-linux-x64-musl@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz#d9fe32971883cd1bd858336bd33a1c3ca6146127"
+  integrity sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==
+
+"@rollup/rollup-win32-arm64-msvc@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz#71fa3ea369316db703a909c790743972e98afae5"
+  integrity sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==
+
+"@rollup/rollup-win32-ia32-msvc@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz#653f5989a60658e17d7576a3996deb3902e342e2"
+  integrity sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==
+
+"@rollup/rollup-win32-x64-msvc@4.24.0":
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz#0574d7e87b44ee8511d08cc7f914bcb802b70818"
+  integrity sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"
@@ -1018,12 +1106,48 @@
     svg-parser "^2.0.4"
 
 "@tailwindcss/forms@^0.5.7":
-  version "0.5.8"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.8.tgz#1067d82d9562abe3f8de9abfd528965f7fa116a9"
-  integrity sha512-DJs7B7NPD0JH7BVvdHWNviWmunlFhuEkz7FyFxE4japOWYMLl9b1D6+Z9mivJJPWr6AEbmlPqgiFRyLwFB1SgQ==
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.9.tgz#b495c12575d6eae5865b2cbd9876b26d89f16f61"
+  integrity sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
+"@tanstack/query-core@5.59.13":
+  version "5.59.13"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.59.13.tgz#8c962980af174bbd446b7e9b9999f7432897df80"
+  integrity sha512-Oou0bBu/P8+oYjXsJQ11j+gcpLAMpqW42UlokQYEz4dE7+hOtVO9rVuolJKgEccqzvyFzqX4/zZWY+R/v1wVsQ==
+
+"@tanstack/query-devtools@5.58.0":
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.58.0.tgz#5c68ce90562e154004de4372bc0a28fcd94cdf31"
+  integrity sha512-iFdQEFXaYYxqgrv63ots+65FGI+tNp5ZS5PdMU1DWisxk3fez5HG3FyVlbUva+RdYS5hSLbxZ9aw3yEs97GNTw==
+
+"@tanstack/react-query-devtools@^5.56.2":
+  version "5.59.15"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.59.15.tgz#bfec8a2615ac99153b53e92887403e5c57d267e5"
+  integrity sha512-rX28KTivkA2XEn3Fj9ckDtnTPY8giWYgssySSAperpVol4+th+NCij/MhLylfB+Mfg2JfCxOcwnM/fwzS8iSog==
+  dependencies:
+    "@tanstack/query-devtools" "5.58.0"
+
+"@tanstack/react-query@^5.55.4":
+  version "5.59.15"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.59.15.tgz#fa1c5b4d96e6a148ec761f214304bbf5ac1906be"
+  integrity sha512-QbVlAkTI78wB4Mqgf2RDmgC0AOiJqer2c5k9STOOSXGv1S6ZkY37r/6UpE8DbQ2Du0ohsdoXgFNEyv+4eDoPEw==
+  dependencies:
+    "@tanstack/query-core" "5.59.13"
+
+"@tanstack/react-table@^8.20.5":
+  version "8.20.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.20.5.tgz#19987d101e1ea25ef5406dce4352cab3932449d8"
+  integrity sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==
+  dependencies:
+    "@tanstack/table-core" "8.20.5"
+
+"@tanstack/table-core@8.20.5":
+  version "8.20.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.20.5.tgz#3974f0b090bed11243d4107283824167a395cf1d"
+  integrity sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==
+
 "@testing-library/jest-dom@^6.4.8":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz#50484da3f80fb222a853479f618a9ce5c47bfe54"
@@ -1087,10 +1211,10 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
-"@types/estree@1.0.5", "@types/estree@^1.0.0":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
-  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+"@types/estree@1.0.6", "@types/estree@^1.0.0", "@types/estree@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
 
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.6"
@@ -1112,9 +1236,9 @@
     "@types/istanbul-lib-report" "*"
 
 "@types/jest@^29.5.12":
-  version "29.5.12"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.12.tgz#7f7dc6eb4cf246d2474ed78744b05d06ce025544"
-  integrity sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==
+  version "29.5.13"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.13.tgz#8bc571659f401e6a719a7bf0dbcb8b78c71a8adc"
+  integrity sha512-wd+MVEZCHt23V0/L642O5APvspWply/rGY5BcW4SUETo2UzPU3Z26qr8jC2qxpimI2jjx9h7+2cj2FwIr01bXg==
   dependencies:
     expect "^29.0.0"
     pretty-format "^29.0.0"
@@ -1124,34 +1248,39 @@
   resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.6.tgz#a04ca19e877687bd449f5ad37d33b104b71fdf95"
   integrity sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==
 
+"@types/json-schema@^7.0.15":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
 "@types/lodash@^4.17.7":
-  version "4.17.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.7.tgz#2f776bcb53adc9e13b2c0dfd493dfcbd7de43612"
-  integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.10.tgz#64f3edf656af2fe59e7278b73d3e62404144a6e6"
+  integrity sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==
 
 "@types/node@*", "@types/node@^22.1.0":
-  version "22.5.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.5.2.tgz#e42344429702e69e28c839a7e16a8262a8086793"
-  integrity sha512-acJsPTEqYqulZS/Yp/S3GgeE6GZ0qYODUR8aVr/DkhHQ8l9nd4j5x1/ZJy9/gHrRlFMqkO6i0I3E27Alu4jjPg==
+  version "22.7.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.7.5.tgz#cfde981727a7ab3611a481510b473ae54442b92b"
+  integrity sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==
   dependencies:
     undici-types "~6.19.2"
 
 "@types/prop-types@*":
-  version "15.7.12"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
-  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
+  version "15.7.13"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
+  integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
 
 "@types/react-dom@^18.3.0":
-  version "18.3.0"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
-  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07"
+  integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==
   dependencies:
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^18.3.3":
-  version "18.3.5"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.5.tgz#5f524c2ad2089c0ff372bbdabc77ca2c4dbadf8f"
-  integrity sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==
+  version "18.3.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.11.tgz#9d530601ff843ee0d7030d4227ea4360236bd537"
+  integrity sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
@@ -1178,62 +1307,62 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@8.3.0", "@typescript-eslint/eslint-plugin@^8.0.1":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.3.0.tgz#726627fad16d41d20539637efee8c2329fe6be32"
-  integrity sha512-FLAIn63G5KH+adZosDYiutqkOkYEx0nvcwNNfJAf+c7Ae/H35qWwTYvPZUKFj5AS+WfHG/WJJfWnDnyNUlp8UA==
+"@typescript-eslint/eslint-plugin@8.9.0", "@typescript-eslint/eslint-plugin@^8.0.1":
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.9.0.tgz#bf0b25305b0bf014b4b194a6919103d7ac2a7907"
+  integrity sha512-Y1n621OCy4m7/vTXNlCbMVp87zSd7NH0L9cXD8aIpOaNlzeWxIK4+Q19A68gSmTNRZn92UjocVUWDthGxtqHFg==
   dependencies:
     "@eslint-community/regexpp" "^4.10.0"
-    "@typescript-eslint/scope-manager" "8.3.0"
-    "@typescript-eslint/type-utils" "8.3.0"
-    "@typescript-eslint/utils" "8.3.0"
-    "@typescript-eslint/visitor-keys" "8.3.0"
+    "@typescript-eslint/scope-manager" "8.9.0"
+    "@typescript-eslint/type-utils" "8.9.0"
+    "@typescript-eslint/utils" "8.9.0"
+    "@typescript-eslint/visitor-keys" "8.9.0"
     graphemer "^1.4.0"
     ignore "^5.3.1"
     natural-compare "^1.4.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/parser@8.3.0", "@typescript-eslint/parser@^8.0.1":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.3.0.tgz#3c72c32bc909cb91ce3569e7d11d729ad84deafa"
-  integrity sha512-h53RhVyLu6AtpUzVCYLPhZGL5jzTD9fZL+SYf/+hYOx2bDkyQXztXSc4tbvKYHzfMXExMLiL9CWqJmVz6+78IQ==
+"@typescript-eslint/parser@8.9.0", "@typescript-eslint/parser@^8.0.1":
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.9.0.tgz#0cecda6def8aef95d7c7098359c0fda5a362d6ad"
+  integrity sha512-U+BLn2rqTTHnc4FL3FJjxaXptTxmf9sNftJK62XLz4+GxG3hLHm/SUNaaXP5Y4uTiuYoL5YLy4JBCJe3+t8awQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "8.3.0"
-    "@typescript-eslint/types" "8.3.0"
-    "@typescript-eslint/typescript-estree" "8.3.0"
-    "@typescript-eslint/visitor-keys" "8.3.0"
+    "@typescript-eslint/scope-manager" "8.9.0"
+    "@typescript-eslint/types" "8.9.0"
+    "@typescript-eslint/typescript-estree" "8.9.0"
+    "@typescript-eslint/visitor-keys" "8.9.0"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.3.0.tgz#834301d2e70baf924c26818b911bdc40086f7468"
-  integrity sha512-mz2X8WcN2nVu5Hodku+IR8GgCOl4C0G/Z1ruaWN4dgec64kDBabuXyPAr+/RgJtumv8EEkqIzf3X2U5DUKB2eg==
+"@typescript-eslint/scope-manager@8.9.0":
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.9.0.tgz#c98fef0c4a82a484e6a1eb610a55b154d14d46f3"
+  integrity sha512-bZu9bUud9ym1cabmOYH9S6TnbWRzpklVmwqICeOulTCZ9ue2/pczWzQvt/cGj2r2o1RdKoZbuEMalJJSYw3pHQ==
   dependencies:
-    "@typescript-eslint/types" "8.3.0"
-    "@typescript-eslint/visitor-keys" "8.3.0"
+    "@typescript-eslint/types" "8.9.0"
+    "@typescript-eslint/visitor-keys" "8.9.0"
 
-"@typescript-eslint/type-utils@8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.3.0.tgz#c1ae6af8c21a27254321016b052af67ddb44a9ac"
-  integrity sha512-wrV6qh//nLbfXZQoj32EXKmwHf4b7L+xXLrP3FZ0GOUU72gSvLjeWUl5J5Ue5IwRxIV1TfF73j/eaBapxx99Lg==
+"@typescript-eslint/type-utils@8.9.0":
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.9.0.tgz#aa86da3e4555fe7c8b42ab75e13561c4b5a8dfeb"
+  integrity sha512-JD+/pCqlKqAk5961vxCluK+clkppHY07IbV3vett97KOV+8C6l+CPEPwpUuiMwgbOz/qrN3Ke4zzjqbT+ls+1Q==
   dependencies:
-    "@typescript-eslint/typescript-estree" "8.3.0"
-    "@typescript-eslint/utils" "8.3.0"
+    "@typescript-eslint/typescript-estree" "8.9.0"
+    "@typescript-eslint/utils" "8.9.0"
     debug "^4.3.4"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/types@8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.3.0.tgz#378e62447c2d7028236e55a81d3391026600563b"
-  integrity sha512-y6sSEeK+facMaAyixM36dQ5NVXTnKWunfD1Ft4xraYqxP0lC0POJmIaL/mw72CUMqjY9qfyVfXafMeaUj0noWw==
+"@typescript-eslint/types@8.9.0":
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.9.0.tgz#b733af07fb340b32e962c6c63b1062aec2dc0fe6"
+  integrity sha512-SjgkvdYyt1FAPhU9c6FiYCXrldwYYlIQLkuc+LfAhCna6ggp96ACncdtlbn8FmnG72tUkXclrDExOpEYf1nfJQ==
 
-"@typescript-eslint/typescript-estree@8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.3.0.tgz#3e3d38af101ba61a8568f034733b72bfc9f176b9"
-  integrity sha512-Mq7FTHl0R36EmWlCJWojIC1qn/ZWo2YiWYc1XVtasJ7FIgjo0MVv9rZWXEE7IK2CGrtwe1dVOxWwqXUdNgfRCA==
+"@typescript-eslint/typescript-estree@8.9.0":
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.9.0.tgz#1714f167e9063062dc0df49c1d25afcbc7a96199"
+  integrity sha512-9iJYTgKLDG6+iqegehc5+EqE6sqaee7kb8vWpmHZ86EqwDjmlqNNHeqDVqb9duh+BY6WCNHfIGvuVU3Tf9Db0g==
   dependencies:
-    "@typescript-eslint/types" "8.3.0"
-    "@typescript-eslint/visitor-keys" "8.3.0"
+    "@typescript-eslint/types" "8.9.0"
+    "@typescript-eslint/visitor-keys" "8.9.0"
     debug "^4.3.4"
     fast-glob "^3.3.2"
     is-glob "^4.0.3"
@@ -1241,32 +1370,32 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/utils@8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.3.0.tgz#b10972319deac5959c7a7075d0cf2b5e1de7ec08"
-  integrity sha512-F77WwqxIi/qGkIGOGXNBLV7nykwfjLsdauRB/DOFPdv6LTF3BHHkBpq81/b5iMPSF055oO2BiivDJV4ChvNtXA==
+"@typescript-eslint/utils@8.9.0":
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.9.0.tgz#748bbe3ea5bee526d9786d9405cf1b0df081c299"
+  integrity sha512-PKgMmaSo/Yg/F7kIZvrgrWa1+Vwn036CdNUvYFEkYbPwOH4i8xvkaRlu148W3vtheWK9ckKRIz7PBP5oUlkrvQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
-    "@typescript-eslint/scope-manager" "8.3.0"
-    "@typescript-eslint/types" "8.3.0"
-    "@typescript-eslint/typescript-estree" "8.3.0"
+    "@typescript-eslint/scope-manager" "8.9.0"
+    "@typescript-eslint/types" "8.9.0"
+    "@typescript-eslint/typescript-estree" "8.9.0"
 
-"@typescript-eslint/visitor-keys@8.3.0":
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.3.0.tgz#320d747d107af1eef1eb43fbc4ccdbddda13068b"
-  integrity sha512-RmZwrTbQ9QveF15m/Cl28n0LXD6ea2CjkhH5rQ55ewz3H24w+AMCJHPVYaZ8/0HoG8Z3cLLFFycRXxeO2tz9FA==
+"@typescript-eslint/visitor-keys@8.9.0":
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.9.0.tgz#5f11f4d9db913f37da42776893ffe0dd1ae78f78"
+  integrity sha512-Ht4y38ubk4L5/U8xKUBfKNYGmvKvA1CANoxiTRMM+tOLk3lbF3DvzZCxJCRSE+2GdCMSh6zq9VZJc3asc1XuAA==
   dependencies:
-    "@typescript-eslint/types" "8.3.0"
+    "@typescript-eslint/types" "8.9.0"
     eslint-visitor-keys "^3.4.3"
 
 "@vitejs/plugin-react@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz#d0be6594051ded8957df555ff07a991fb618b48e"
-  integrity sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.3.2.tgz#1e13f666fe3135b477220d3c13b783704636b6e4"
+  integrity sha512-hieu+o05v4glEBucTcKMK3dlES0OeJlD9YVOAPraVMOInBCwzumaIFiUjr4bHK7NPgnAHgiskUoceKercrN8vg==
   dependencies:
-    "@babel/core" "^7.24.5"
-    "@babel/plugin-transform-react-jsx-self" "^7.24.5"
-    "@babel/plugin-transform-react-jsx-source" "^7.24.1"
+    "@babel/core" "^7.25.2"
+    "@babel/plugin-transform-react-jsx-self" "^7.24.7"
+    "@babel/plugin-transform-react-jsx-source" "^7.24.7"
     "@types/babel__core" "^7.20.5"
     react-refresh "^0.14.2"
 
@@ -1303,9 +1432,9 @@ ansi-regex@^5.0.1:
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
 ansi-regex@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
-  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.1.0.tgz#95ec409c69619d6cb1b8b34f14b660ef28ebd654"
+  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
 
 ansi-styles@^3.2.1:
   version "3.2.1"
@@ -1362,11 +1491,9 @@ aria-hidden@^1.1.1:
     tslib "^2.0.0"
 
 aria-query@^5.0.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
-  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
-  dependencies:
-    dequal "^2.0.3"
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
 
 array-buffer-byte-length@^1.0.1:
   version "1.0.1"
@@ -1515,13 +1642,13 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.23.1, browserslist@^4.23.3:
-  version "4.23.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.3.tgz#debb029d3c93ebc97ffbc8d9cbb03403e227c800"
-  integrity sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==
+browserslist@^4.23.3, browserslist@^4.24.0:
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.0.tgz#a1325fe4bc80b64fda169629fc01b3d6cecd38d4"
+  integrity sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==
   dependencies:
-    caniuse-lite "^1.0.30001646"
-    electron-to-chromium "^1.5.4"
+    caniuse-lite "^1.0.30001663"
+    electron-to-chromium "^1.5.28"
     node-releases "^2.0.18"
     update-browserslist-db "^1.1.0"
 
@@ -1551,10 +1678,10 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001646:
-  version "1.0.30001655"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz#0ce881f5a19a2dcfda2ecd927df4d5c1684b982f"
-  integrity sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==
+caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001663:
+  version "1.0.30001668"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz#98e214455329f54bf7a4d70b49c9794f0fbedbed"
+  integrity sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==
 
 chalk@^2.4.2:
   version "2.4.2"
@@ -1806,12 +1933,17 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
 debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.6:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b"
-  integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
   dependencies:
-    ms "2.1.2"
+    ms "^2.1.3"
 
 decode-uri-component@^0.4.1:
   version "0.4.1"
@@ -1846,11 +1978,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-dequal@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
-  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
-
 detect-node-es@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
@@ -1926,10 +2053,10 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
-electron-to-chromium@^1.5.4:
-  version "1.5.13"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz#1abf0410c5344b2b829b7247e031f02810d442e6"
-  integrity sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==
+electron-to-chromium@^1.5.28:
+  version "1.5.39"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.39.tgz#5cbe5200b43dff7b7c2bcb6bdacf65d514c76bb2"
+  integrity sha512-4xkpSR6CjuiaNyvwiWDI85N9AxsvbPawB8xc7yzLPonYTuP19BVgYweKyUMFtHEZgIcHWMt1ks5Cqx2m+6/Grg==
 
 emoji-regex@^10.3.0:
   version "10.4.0"
@@ -2028,9 +2155,9 @@ es-errors@^1.2.1, es-errors@^1.3.0:
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
 es-iterator-helpers@^1.0.19:
-  version "1.0.19"
-  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz#117003d0e5fec237b4b5c08aded722e0c6d50ca8"
-  integrity sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.1.0.tgz#f6d745d342aea214fe09497e7152170dc333a7a6"
+  integrity sha512-/SurEfycdyssORP/E+bj4sEu1CWw4EmLDsHynHwSXQ7utgbrMRWW195pTrCjFgFCddf/UkYm3oqKPRq5i8bJbw==
   dependencies:
     call-bind "^1.0.7"
     define-properties "^1.2.1"
@@ -2039,12 +2166,12 @@ es-iterator-helpers@^1.0.19:
     es-set-tostringtag "^2.0.3"
     function-bind "^1.1.2"
     get-intrinsic "^1.2.4"
-    globalthis "^1.0.3"
+    globalthis "^1.0.4"
     has-property-descriptors "^1.0.2"
     has-proto "^1.0.3"
     has-symbols "^1.0.3"
     internal-slot "^1.0.7"
-    iterator.prototype "^1.1.2"
+    iterator.prototype "^1.1.3"
     safe-array-concat "^1.1.2"
 
 es-object-atoms@^1.0.0:
@@ -2108,7 +2235,7 @@ esbuild@^0.21.3:
     "@esbuild/win32-ia32" "0.21.5"
     "@esbuild/win32-x64" "0.21.5"
 
-escalade@^3.1.2:
+escalade@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
   integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
@@ -2147,14 +2274,14 @@ eslint-plugin-react-hooks@^5.1.0-rc.0:
   integrity sha512-xsiRwaDNF5wWNC4ZHLut+x/YcAxksUd9Rizt7LaEn3bV8VyYRpXnRJQlLOfYaVy9esk4DFP4zPPnoNVjq5Gc0w==
 
 eslint-plugin-react-refresh@^0.4.9:
-  version "0.4.11"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.11.tgz#e450761a2bdb260aa10cfb73f846209a737827cb"
-  integrity sha512-wrAKxMbVr8qhXTtIKfXqAn5SAtRZt0aXxe5P23Fh4pUAdC6XEsybGLB8P0PI4j1yYqOgUEUlzKAGDfo7rJOjcw==
+  version "0.4.12"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.12.tgz#73d61c7fcbe3f7280edb6579380b4350d2f547ed"
+  integrity sha512-9neVjoGv20FwYtCP6CB1dzR1vr57ZDNOXst21wd2xJ/cTlM2xLq0GWVlSNTdMn/4BtP6cHYBMCSp1wFBJ9jBsg==
 
 eslint-plugin-react@^7.35.0:
-  version "7.35.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz#00b1e4559896710e58af6358898f2ff917ea4c41"
-  integrity sha512-v501SSMOWv8gerHkk+IIQBkcGRGrO2nfybfj5pLxuJNFTPxxA3PSryhXTK+9pNbtkggheDdsC0E9Q8CuPk6JKA==
+  version "7.37.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.1.tgz#56493d7d69174d0d828bc83afeffe96903fdadbd"
+  integrity sha512-xwTnwDqzbDRA8uJ7BMxPs/EXRB3i8ZfnOIp8BsxEQkT0nHPp+WWceqGgo6rKb9ctNi8GJLDT4Go5HAWELa/WMg==
   dependencies:
     array-includes "^3.1.8"
     array.prototype.findlast "^1.2.5"
@@ -2176,22 +2303,22 @@ eslint-plugin-react@^7.35.0:
     string.prototype.repeat "^1.0.0"
 
 eslint-plugin-tailwindcss@^3.17.4:
-  version "3.17.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.4.tgz#363d2a5d15e80b4cb1bb67054430a8a6e562c014"
-  integrity sha512-gJAEHmCq2XFfUP/+vwEfEJ9igrPeZFg+skeMtsxquSQdxba9XRk5bn0Bp9jxG1VV9/wwPKi1g3ZjItu6MIjhNg==
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz#6bf9403e77a5f3f930fb3444a3e22b29cd0fee07"
+  integrity sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==
   dependencies:
     fast-glob "^3.2.5"
     postcss "^8.4.4"
 
 eslint-plugin-unused-imports@^4.1.2:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-4.1.3.tgz#079ef6f51914a981e657b3834935a6a417bf3f45"
-  integrity sha512-lqrNZIZjFMUr7P06eoKtQLwyVRibvG7N+LtfKtObYGizAAGrcqLkc3tDx+iAik2z7q0j/XI3ihjupIqxhFabFA==
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-4.1.4.tgz#62ddc7446ccbf9aa7b6f1f0b00a980423cda2738"
+  integrity sha512-YptD6IzQjDardkl0POxnnRBhU1OEePMV0nd6siHaRBbd+lyh6NAhFEobiznKU7kTsSsDeSD62Pe7kAM1b7dAZQ==
 
-eslint-scope@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.0.2.tgz#5cbb33d4384c9136083a71190d548158fe128f94"
-  integrity sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==
+eslint-scope@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.1.0.tgz#70214a174d4cbffbc3e8a26911d8bf51b9ae9d30"
+  integrity sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
@@ -2201,32 +2328,36 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.3:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint-visitor-keys@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz#e3adc021aa038a2a8e0b2f8b0ce8f66b9483b1fb"
-  integrity sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==
+eslint-visitor-keys@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz#1f785cc5e81eb7534523d85922248232077d2f8c"
+  integrity sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==
 
 eslint@^9.8.0:
-  version "9.9.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.9.1.tgz#147ac9305d56696fb84cf5bdecafd6517ddc77ec"
-  integrity sha512-dHvhrbfr4xFQ9/dq+jcVneZMyRYLjggWjk6RVsIiHsP8Rz6yZ8LvZ//iU4TrZF+SXWG+JkNF2OyiZRvzgRDqMg==
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.12.0.tgz#54fcba2876c90528396da0fa44b6446329031e86"
+  integrity sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.11.0"
     "@eslint/config-array" "^0.18.0"
+    "@eslint/core" "^0.6.0"
     "@eslint/eslintrc" "^3.1.0"
-    "@eslint/js" "9.9.1"
+    "@eslint/js" "9.12.0"
+    "@eslint/plugin-kit" "^0.2.0"
+    "@humanfs/node" "^0.16.5"
     "@humanwhocodes/module-importer" "^1.0.1"
-    "@humanwhocodes/retry" "^0.3.0"
-    "@nodelib/fs.walk" "^1.2.8"
+    "@humanwhocodes/retry" "^0.3.1"
+    "@types/estree" "^1.0.6"
+    "@types/json-schema" "^7.0.15"
     ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^8.0.2"
-    eslint-visitor-keys "^4.0.0"
-    espree "^10.1.0"
+    eslint-scope "^8.1.0"
+    eslint-visitor-keys "^4.1.0"
+    espree "^10.2.0"
     esquery "^1.5.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
@@ -2236,24 +2367,21 @@ eslint@^9.8.0:
     ignore "^5.2.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    is-path-inside "^3.0.3"
     json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
     optionator "^0.9.3"
-    strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-espree@^10.0.1, espree@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-10.1.0.tgz#8788dae611574c0f070691f522e4116c5a11fc56"
-  integrity sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==
+espree@^10.0.1, espree@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.2.0.tgz#f4bcead9e05b0615c968e85f83816bc386a45df6"
+  integrity sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==
   dependencies:
     acorn "^8.12.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^4.0.0"
+    eslint-visitor-keys "^4.1.0"
 
 esquery@^1.5.0:
   version "1.6.0"
@@ -2394,9 +2522,9 @@ flatted@^3.2.9:
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 follow-redirects@^1.15.6:
-  version "1.15.6"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
-  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -2414,9 +2542,9 @@ foreground-child@^3.1.0:
     signal-exit "^4.0.1"
 
 form-data@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
-  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48"
+  integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.8"
@@ -2458,9 +2586,9 @@ gensync@^1.0.0-beta.2:
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
 get-east-asian-width@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz#5e6ebd9baee6fb8b7b6bd505221065f0cd91f64e"
-  integrity sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz#21b4071ee58ed04ee0db653371b55b4299875389"
+  integrity sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==
 
 get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
   version "1.2.4"
@@ -2529,11 +2657,11 @@ globals@^14.0.0:
   integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
 
 globals@^15.9.0:
-  version "15.9.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-15.9.0.tgz#e9de01771091ffbc37db5714dab484f9f69ff399"
-  integrity sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==
+  version "15.11.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-15.11.0.tgz#b96ed4c6998540c6fb824b24b5499216d2438d6e"
+  integrity sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==
 
-globalthis@^1.0.3:
+globalthis@^1.0.3, globalthis@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
   integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
@@ -2546,6 +2674,11 @@ globrex@^0.1.2:
   resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
   integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
 
+goober@^2.1.10:
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.16.tgz#7d548eb9b83ff0988d102be71f271ca8f9c82a95"
+  integrity sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -2622,9 +2755,9 @@ human-signals@^5.0.0:
   integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
 
 husky@^9.1.4:
-  version "9.1.5"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.5.tgz#2b6edede53ee1adbbd3a3da490628a23f5243b83"
-  integrity sha512-rowAVRUBfI0b4+niA4SJMhfQwc107VLkBUgEYYAOQAbqDCnra1nYh83hF/MDmhYs9t9n1E3DuKOrs2LYNC+0Ag==
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.6.tgz#e23aa996b6203ab33534bdc82306b0cf2cb07d6c"
+  integrity sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==
 
 i18next-browser-languagedetector@^8.0.0:
   version "8.0.0"
@@ -2634,16 +2767,16 @@ i18next-browser-languagedetector@^8.0.0:
     "@babel/runtime" "^7.23.2"
 
 i18next-http-backend@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.6.1.tgz#186c3a1359e10245c9119a13129f9b5bf328c9a7"
-  integrity sha512-rCilMAnlEQNeKOZY1+x8wLM5IpYOj10guGvEpeC59tNjj6MMreLIjIW8D1RclhD3ifLwn6d/Y9HEM1RUE6DSog==
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.6.2.tgz#b25516446ae6f251ce8231e70e6ffbca833d46a5"
+  integrity sha512-Hp/kd8/VuoxIHmxsknJXjkTYYHzivAyAF15pzliKzk2TiXC25rZCEerb1pUFoxz4IVrG3fCvQSY51/Lu4ECV4A==
   dependencies:
     cross-fetch "4.0.0"
 
 i18next@^23.14.0:
-  version "23.14.0"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.14.0.tgz#d415a858390cc849f3db0df539cb2bbfe24a3cdb"
-  integrity sha512-Y5GL4OdA8IU2geRrt2+Uc1iIhsjICdHZzT9tNwQ3TVqdNzgxHToGCKf/TPRP80vTCAP6svg2WbbJL+Gx5MFQVA==
+  version "23.16.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.16.0.tgz#6127b49a30c19ba5caf0de8aeb3e15df60f7f01e"
+  integrity sha512-Ni3CG6c14teOogY19YNRl+kYaE/Rb59khy0VyHVn4uOZ97E2E/Yziyi6r3C3s9+wacjdLZiq/LLYyx+Cgd+FCw==
   dependencies:
     "@babel/runtime" "^7.23.2"
 
@@ -2819,11 +2952,6 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
-is-path-inside@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
-  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
-
 is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
@@ -2900,10 +3028,10 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-iterator.prototype@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
-  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+iterator.prototype@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.3.tgz#016c2abe0be3bbdb8319852884f60908ac62bf9c"
+  integrity sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==
   dependencies:
     define-properties "^1.2.1"
     get-intrinsic "^1.2.1"
@@ -3004,6 +3132,11 @@ jsesc@^2.5.1:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
+jsesc@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
+
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
@@ -3086,9 +3219,9 @@ lint-staged@^15.2.8:
     yaml "~2.5.0"
 
 listr2@~8.2.4:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.2.4.tgz#486b51cbdb41889108cb7e2c90eeb44519f5a77f"
-  integrity sha512-opevsywziHd3zHCVQGAj8zu+Z3yHNkkoYhWIGnq54RrCVwLz0MozotJEDnKsIBLvkfLGN6BLOyAeRrYI0pKA4g==
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.2.5.tgz#5c9db996e1afeb05db0448196d3d5f64fec2593d"
+  integrity sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==
   dependencies:
     cli-truncate "^4.0.0"
     colorette "^2.0.20"
@@ -3230,10 +3363,10 @@ minimatch@^9.0.4:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
-ms@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
 mz@^2.7.0:
   version "2.7.0"
@@ -3371,9 +3504,9 @@ onetime@^7.0.0:
     mimic-function "^5.0.0"
 
 option-t@^49.1.0:
-  version "49.1.0"
-  resolved "https://registry.yarnpkg.com/option-t/-/option-t-49.1.0.tgz#6b016e4b972bf460ec6cbb41eb38d21c70d435b1"
-  integrity sha512-K5o4+D8rSE1VcmfwrieRZWyShPxX27NEGuZPT11S4CbvjE73YUDR/sanKAYnhVRj6Hn1mKcjfhjhbOCD2ef3qg==
+  version "49.2.1"
+  resolved "https://registry.yarnpkg.com/option-t/-/option-t-49.2.1.tgz#075f3d072157f16cd3328905ddcba3efa9699a6a"
+  integrity sha512-ueUhVyOyiNJ7Bd0Qkv5HWaqfCX331ZoslSTYq7xhlu8pP+8YKcKzGHVGcDZOpjXlehyS0rPd9w8OXFRfL1d52Q==
 
 optionator@^0.9.3:
   version "0.9.4"
@@ -3402,9 +3535,9 @@ p-locate@^5.0.0:
     p-limit "^3.0.2"
 
 package-json-from-dist@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz#e501cd3094b278495eb4258d4c9f6d5ac3019f00"
-  integrity sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
 
 parent-module@^1.0.0:
   version "1.0.1"
@@ -3456,12 +3589,7 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-picocolors@^1.0.0, picocolors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
-  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
-
-picocolors@^1.1.0:
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
   integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
@@ -3557,9 +3685,9 @@ prettier-linter-helpers@^1.0.0:
     fast-diff "^1.1.2"
 
 prettier-plugin-tailwindcss@^0.6.5:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz#93e524d3c30f3fb45dc9e99de985b2a584ff063f"
-  integrity sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz#8a178e1679e3f941cc9de396f109c6cffea676d8"
+  integrity sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==
 
 prettier@^3.3.3:
   version "3.3.3"
@@ -3600,9 +3728,9 @@ punycode@^2.1.0:
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
 query-string@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-9.1.0.tgz#5f12a4653a4ba56021e113b5cf58e56581823e7a"
-  integrity sha512-t6dqMECpCkqfyv2FfwVS1xcB6lgXW/0XZSaKdsCNGYkqMO76AFiJEg4vINzoDKcZa6MS7JX+OHIjwh06K5vczw==
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-9.1.1.tgz#dbfebb4196aeb2919915f2b2b81b91b965cf03a0"
+  integrity sha512-MWkCOVIcJP9QSKU52Ngow6bsAWAPlPK2MludXvcrS2bGZSl+T1qX9MZvRIkqUIkGLJquMJHWfsT6eRqUpp4aWg==
   dependencies:
     decode-uri-component "^0.4.1"
     filter-obj "^5.1.0"
@@ -3621,17 +3749,31 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-error-boundary@^4.0.13:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.1.0.tgz#7f6cb4ed1df6b820c35ab69aeae257493fc73ed7"
+  integrity sha512-GFnM3kyswd+9Oy7oX1lxdr39ANHD3ty6cyAK4Kyku+w8Aq9fnK7+yRytKOaPLzOhgtGq18AfTXmDtwlojBPTRg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-hook-form@^7.52.2:
   version "7.53.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"
   integrity sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-i18next@^15.0.1:
-  version "15.0.1"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-15.0.1.tgz#fc662d93829ecb39683fe2757a47ebfbc5c912a0"
-  integrity sha512-NwxLqNM6CLbeGA9xPsjits0EnXdKgCRSS6cgkgOdNcPXqL+1fYNl8fBg1wmnnHvFy812Bt4IWTPE9zjoPmFj3w==
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-15.0.3.tgz#01606062f7f81f9b3a88f388e0a8097f8230f5d4"
+  integrity sha512-BlO1P+oLKjjIxDBQ0GkAIMacgjfMbnvops+3Y5nZXF7UJ99v4KCWr0Na1azJXC8AMiNWp4kgUcFCJM7U9ZsUDg==
   dependencies:
-    "@babel/runtime" "^7.24.8"
+    "@babel/runtime" "^7.25.0"
     html-parse-stringify "^3.0.1"
 
 react-icons-material-design@^1.0.4:
@@ -3654,7 +3796,7 @@ react-refresh@^0.14.2:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
-react-remove-scroll-bar@^2.3.4:
+react-remove-scroll-bar@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
   integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
@@ -3662,31 +3804,31 @@ react-remove-scroll-bar@^2.3.4:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
-react-remove-scroll@2.5.7:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"
-  integrity sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==
+react-remove-scroll@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07"
+  integrity sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==
   dependencies:
-    react-remove-scroll-bar "^2.3.4"
+    react-remove-scroll-bar "^2.3.6"
     react-style-singleton "^2.2.1"
     tslib "^2.1.0"
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
 react-router-dom@^6.26.0:
-  version "6.26.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.26.1.tgz#a408892b41767a49dc94b3564b0e7d8e3959f623"
-  integrity sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==
+  version "6.27.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.27.0.tgz#8d7972a425fd75f91c1e1ff67e47240c5752dc3f"
+  integrity sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==
   dependencies:
-    "@remix-run/router" "1.19.1"
-    react-router "6.26.1"
+    "@remix-run/router" "1.20.0"
+    react-router "6.27.0"
 
-react-router@6.26.1:
-  version "6.26.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.26.1.tgz#88c64837e05ffab6899a49df2a1484a22471e4ce"
-  integrity sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==
+react-router@6.27.0:
+  version "6.27.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.27.0.tgz#db292474926c814c996c0ff3ef0162d1f9f60ed4"
+  integrity sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==
   dependencies:
-    "@remix-run/router" "1.19.1"
+    "@remix-run/router" "1.20.0"
 
 react-style-singleton@^2.2.1:
   version "2.2.1"
@@ -3745,14 +3887,14 @@ regenerator-runtime@^0.14.0:
   integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
 
 regexp.prototype.flags@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
-  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz#b3ae40b1d2499b8350ab2c3fe6ef3845d3a96f42"
+  integrity sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==
   dependencies:
-    call-bind "^1.0.6"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
     es-errors "^1.3.0"
-    set-function-name "^2.0.1"
+    set-function-name "^2.0.2"
 
 resolve-from@^4.0.0:
   version "4.0.0"
@@ -3796,28 +3938,28 @@ rfdc@^1.4.1:
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
 rollup@^4.20.0:
-  version "4.22.4"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.22.4.tgz#4135a6446671cd2a2453e1ad42a45d5973ec3a0f"
-  integrity sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==
+  version "4.24.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.24.0.tgz#c14a3576f20622ea6a5c9cad7caca5e6e9555d05"
+  integrity sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==
   dependencies:
-    "@types/estree" "1.0.5"
+    "@types/estree" "1.0.6"
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.22.4"
-    "@rollup/rollup-android-arm64" "4.22.4"
-    "@rollup/rollup-darwin-arm64" "4.22.4"
-    "@rollup/rollup-darwin-x64" "4.22.4"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.22.4"
-    "@rollup/rollup-linux-arm-musleabihf" "4.22.4"
-    "@rollup/rollup-linux-arm64-gnu" "4.22.4"
-    "@rollup/rollup-linux-arm64-musl" "4.22.4"
-    "@rollup/rollup-linux-powerpc64le-gnu" "4.22.4"
-    "@rollup/rollup-linux-riscv64-gnu" "4.22.4"
-    "@rollup/rollup-linux-s390x-gnu" "4.22.4"
-    "@rollup/rollup-linux-x64-gnu" "4.22.4"
-    "@rollup/rollup-linux-x64-musl" "4.22.4"
-    "@rollup/rollup-win32-arm64-msvc" "4.22.4"
-    "@rollup/rollup-win32-ia32-msvc" "4.22.4"
-    "@rollup/rollup-win32-x64-msvc" "4.22.4"
+    "@rollup/rollup-android-arm-eabi" "4.24.0"
+    "@rollup/rollup-android-arm64" "4.24.0"
+    "@rollup/rollup-darwin-arm64" "4.24.0"
+    "@rollup/rollup-darwin-x64" "4.24.0"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.24.0"
+    "@rollup/rollup-linux-arm-musleabihf" "4.24.0"
+    "@rollup/rollup-linux-arm64-gnu" "4.24.0"
+    "@rollup/rollup-linux-arm64-musl" "4.24.0"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.24.0"
+    "@rollup/rollup-linux-riscv64-gnu" "4.24.0"
+    "@rollup/rollup-linux-s390x-gnu" "4.24.0"
+    "@rollup/rollup-linux-x64-gnu" "4.24.0"
+    "@rollup/rollup-linux-x64-musl" "4.24.0"
+    "@rollup/rollup-win32-arm64-msvc" "4.24.0"
+    "@rollup/rollup-win32-ia32-msvc" "4.24.0"
+    "@rollup/rollup-win32-x64-msvc" "4.24.0"
     fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
@@ -3941,12 +4083,7 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
-source-map-js@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
-  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
-
-source-map-js@^1.2.1:
+source-map-js@^1.0.1, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -3973,16 +4110,8 @@ string-argv@~0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4063,14 +4192,8 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4152,22 +4275,22 @@ svgo@^3.3.2:
     picocolors "^1.0.0"
 
 synckit@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.1.tgz#febbfbb6649979450131f64735aa3f6c14575c88"
-  integrity sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.2.tgz#a3a935eca7922d48b9e7d6c61822ee6c3ae4ec62"
+  integrity sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==
   dependencies:
     "@pkgr/core" "^0.1.0"
     tslib "^2.6.2"
 
 tailwind-merge@^2.4.0:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.2.tgz#000f05a703058f9f9f3829c644235f81d4c08a1f"
-  integrity sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.4.tgz#4bf574e81fa061adeceba099ae4df56edcee78d1"
+  integrity sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==
 
 tailwindcss@^3.4.9:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.10.tgz#70442d9aeb78758d1f911af29af8255ecdb8ffef"
-  integrity sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==
+  version "3.4.14"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.14.tgz#6dd23a7f54ec197b19159e91e3bb1e55e7aa73ac"
+  integrity sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
@@ -4211,6 +4334,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+timeago.js@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
+  integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==
+
 tiny-case@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
@@ -4249,14 +4377,14 @@ ts-interface-checker@^0.1.9:
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
 tsconfck@^3.0.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/tsconfck/-/tsconfck-3.1.3.tgz#a8202f51dab684c426314796cdb0bbd0fe0cdf80"
-  integrity sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/tsconfck/-/tsconfck-3.1.4.tgz#de01a15334962e2feb526824339b51be26712229"
+  integrity sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==
 
 tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.6.2:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
-  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
+  integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -4315,18 +4443,18 @@ typed-array-length@^1.0.6:
     possible-typed-array-names "^1.0.0"
 
 typescript-eslint@^8.0.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-8.3.0.tgz#f4d9c5ba71f6bead03ec41ecb2bece1de511e49f"
-  integrity sha512-EvWjwWLwwKDIJuBjk2I6UkV8KEQcwZ0VM10nR1rIunRDIP67QJTZAHBXTX0HW/oI1H10YESF8yWie8fRQxjvFA==
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-8.9.0.tgz#20a9b8125c57f3de962080ebebf366697f75bf79"
+  integrity sha512-AuD/FXGYRQyqyOBCpNLldMlsCGvmDNxptQ3Dp58/NXeB+FqyvTfXmMyba3PYa0Vi9ybnj7G8S/yd/4Cw8y47eA==
   dependencies:
-    "@typescript-eslint/eslint-plugin" "8.3.0"
-    "@typescript-eslint/parser" "8.3.0"
-    "@typescript-eslint/utils" "8.3.0"
+    "@typescript-eslint/eslint-plugin" "8.9.0"
+    "@typescript-eslint/parser" "8.9.0"
+    "@typescript-eslint/utils" "8.9.0"
 
 typescript@^5.5.3:
-  version "5.5.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
-  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
+  integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"
@@ -4352,21 +4480,20 @@ unplugin-fonts@^1.1.1:
     unplugin "^1.3.1"
 
 unplugin@^1.3.1:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.12.3.tgz#35cc4088b553c0b4cfbdd308c3e947f3efe23f36"
-  integrity sha512-my8DH0/T/Kx33KO+6QXAqdeMYgyy0GktlOpdQjpagfHKw5DrD0ctPr7SHUyOT3g4ZVpzCQGt/qcpuoKJ/pniHA==
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.14.1.tgz#c76d6155a661e43e6a897bce6b767a1ecc344c1a"
+  integrity sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==
   dependencies:
     acorn "^8.12.1"
-    webpack-sources "^3.2.3"
     webpack-virtual-modules "^0.6.2"
 
 update-browserslist-db@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz#7ca61c0d8650766090728046e416a8cde682859e"
-  integrity sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
   dependencies:
-    escalade "^3.1.2"
-    picocolors "^1.0.1"
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
 
 uri-js@^4.2.2:
   version "4.4.1"
@@ -4419,9 +4546,9 @@ vite-tsconfig-paths@^5.0.1:
     tsconfck "^3.0.3"
 
 vite@^5.4.6:
-  version "5.4.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.6.tgz#85a93a1228a7fb5a723ca1743e337a2588ed008f"
-  integrity sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==
+  version "5.4.9"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.9.tgz#215c80cbebfd09ccbb9ceb8c0621391c9abdc19c"
+  integrity sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==
   dependencies:
     esbuild "^0.21.3"
     postcss "^8.4.43"
@@ -4444,11 +4571,6 @@ webidl-conversions@^3.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
   integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
 
-webpack-sources@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
-  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
-
 webpack-virtual-modules@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
@@ -4556,10 +4678,15 @@ yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
-yaml@^2.3.4, yaml@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.0.tgz#c6165a721cf8000e91c36490a41d7be25176cf5d"
-  integrity sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==
+yaml@^2.3.4:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.0.tgz#14059ad9d0b1680d0f04d3a60fe00f3a857303c3"
+  integrity sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==
+
+yaml@~2.5.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"
+  integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==
 
 yocto-queue@^0.1.0:
   version "0.1.0"