second iteration of the new sidebar

2026-10-16 21:37:59 +00:00 · 2023-07-09 23:58:27 -07:00
parent ec26404b94
commit bdf4ebd1bc
75 changed files with 1927 additions and 1698 deletions
@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import NavHeader from "@app/components/navigation/NavHeader";
 import { Button, Input, TableContainer, Tooltip } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+import { useOrganization, useWorkspace } from "@app/context";
 import {
  useGetProjectFoldersBatch,
  useGetProjectSecretsByKey,
@@ -22,6 +22,7 @@ export const DashboardEnvOverview = () => {
  const router = useRouter();

  const { currentWorkspace, isLoading } = useWorkspace();
+  const { currentOrg } = useOrganization();
  const workspaceId = currentWorkspace?._id as string;
  const { data: latestFileKey } = useGetUserWsKey(workspaceId);
  const [searchFilter, setSearchFilter] = useState("");
@@ -29,7 +30,7 @@ export const DashboardEnvOverview = () => {

  useEffect(() => {
    if (!isLoading && !workspaceId && router.isReady) {
-      router.push("/noprojects");
+      router.push(`/org/${currentOrg?._id}/overview`);
    }
  }, [isLoading, workspaceId, router.isReady]);

@@ -36,7 +36,7 @@ import {
  UpgradePlanModal
 } from "@app/components/v2";
 import { leaveConfirmDefaultMessage } from "@app/const";
-import { useSubscription,useWorkspace } from "@app/context";
+import { useOrganization, useSubscription,useWorkspace } from "@app/context";
 import { useLeaveConfirm, usePopUp, useToggle } from "@app/hooks";
 import {
  useBatchSecretsOp,
@@ -127,12 +127,13 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
  const isRollbackMode = Boolean(snapshotId);

  const { currentWorkspace, isLoading } = useWorkspace();
+  const { currentOrg } = useOrganization();
  const workspaceId = currentWorkspace?._id as string;
  const { data: latestFileKey } = useGetUserWsKey(workspaceId);

  useEffect(() => {
    if (!isLoading && !workspaceId && router.isReady) {
-      router.push("/noprojects");
+      router.push(`/org/${currentOrg?._id}/overview`);
    }
  }, [isLoading, workspaceId, router.isReady]);

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import NavHeader from "@app/components/navigation/NavHeader";
 import { Button, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
@@ -177,10 +176,7 @@ export const IntegrationsPage = ({ frameworkIntegrations }: Props) => {
  };

  return (
-    <div className="container mx-auto max-w-7xl px-8 pb-12 text-white">
-      <div className="ml-4">
-        <NavHeader pageName={t("integrations.title")} isProjectRelated />
-      </div>
+    <div className="container mx-auto max-w-7xl pb-12 text-white">
      <IntegrationsSection
        isLoading={isIntegrationLoading}
        integrations={integrations}
@@ -37,10 +37,7 @@ export const CloudIntegrationSection = ({
        <h1 className="text-3xl font-semibold">{t("integrations.cloud-integrations")}</h1>
        <p className="text-base text-gray-400">{t("integrations.click-to-start")}</p>
      </div>
-      <div
-        className="mx-6 grid grid-flow-dense gap-4"
-        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(256px, 1fr))" }}
-      >
+      <div className="mx-6 grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
        {isLoading &&
          Array.from({ length: 12 }).map((_, index) => (
            <Skeleton className="h-32" key={`cloud-integration-skeleton-${index + 1}`} />
@@ -45,10 +45,12 @@ export const IntegrationsSection = ({
        </div>
      )}
      {!isLoading && !integrations.length && (
-        <EmptyState
-          className="mx-6 rounded-md border border-mineshaft-700 pt-8 pb-4"
-          title="No integrations found. Click on one of the below providers to sync secrets."
-        />
+        <div className="mx-6">
+          <EmptyState
+            className="rounded-md border border-mineshaft-700 pt-8 pb-4"
+            title="No integrations found. Click on one of the below providers to sync secrets."
+          />
+        </div>
      )}
      {!isLoading && (
        <div className="flex flex-col space-y-4 p-6 pt-0">
@@ -0,0 +1,238 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  decryptAssymmetric,
+  encryptAssymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import { useOrganization, useSubscription, useUser, useWorkspace } from "@app/context";
+import {
+  useAddIncidentContact,
+  useAddUserToOrg,
+  useDeleteIncidentContact,
+  useDeleteOrgMembership,
+  useGetOrgIncidentContact,
+  useGetOrgUsers,
+  useGetUserWorkspaceMemberships,
+  useGetUserWsKey,
+  useRenameOrg,
+  useUpdateOrgUserRole,
+  useUploadWsKey
+} from "@app/hooks/api";
+
+import {
+  OrgIncidentContactsTable,
+  OrgMembersTable,
+  OrgNameChangeSection,
+  OrgServiceAccountsTable
+} from "./components";
+
+export const MembersPage = () => {
+  const host = window.location.origin;
+  const router = useRouter();
+  const { action } = router.query;
+
+  const { t } = useTranslation();
+  const { currentOrg } = useOrganization();
+  const { currentWorkspace } = useWorkspace();
+  const { user } = useUser();
+  const { subscription } = useSubscription();
+  const { createNotification } = useNotificationContext();
+
+  const orgId = currentOrg?._id || "";
+
+  const { data: orgUsers, isLoading: isOrgUserLoading } = useGetOrgUsers(orgId);
+  const { data: workspaceMemberships, isLoading: IsWsMembershipLoading } =
+    useGetUserWorkspaceMemberships(orgId);
+  const { data: wsKey } = useGetUserWsKey(currentWorkspace?._id || "");
+  const { data: incidentContact, isLoading: IsIncidentContactLoading } =
+    useGetOrgIncidentContact(orgId);
+
+  const renameOrg = useRenameOrg();
+  const removeUserOrgMembership = useDeleteOrgMembership();
+  const addUserToOrg = useAddUserToOrg();
+  const updateOrgUserRole = useUpdateOrgUserRole();
+  const uploadWsKey = useUploadWsKey();
+  const addIncidentContact = useAddIncidentContact();
+  const removeIncidentContact = useDeleteIncidentContact();
+
+  const [completeInviteLink, setcompleteInviteLink] = useState<string | undefined>("");
+
+  const isMoreUsersNotAllowed = subscription?.memberLimit ? (subscription.membersUsed >= subscription.memberLimit) : false;
+
+  const onRenameOrg = async (name: string) => {
+    if (!currentOrg?._id) return;
+
+    try {
+      await renameOrg.mutateAsync({ orgId: currentOrg?._id, newOrgName: name });
+      createNotification({
+        text: "Successfully renamed organization",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to rename organization",
+        type: "error"
+      });
+    }
+  };
+
+  const onRemoveUserOrgMembership = async (membershipId: string) => {
+    if (!currentOrg?._id) return;
+
+    try {
+      await removeUserOrgMembership.mutateAsync({ orgId: currentOrg?._id, membershipId });
+      createNotification({
+        text: "Successfully removed user from org",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to remove user from the organization",
+        type: "error"
+      });
+    }
+  };
+  const onAddUserToOrg = async (email: string) => {
+    if (!currentOrg?._id) return;
+
+    try {
+      const { data } = await addUserToOrg.mutateAsync({
+        organizationId: currentOrg?._id,
+        inviteeEmail: email
+      });
+      setcompleteInviteLink(data?.completeInviteLink);
+
+      // only show this notification when email is configured. A [completeInviteLink] will not be sent if smtp is configured
+      if (!data.completeInviteLink) {
+        createNotification({
+          text: "Successfully invited user to the organization.",
+          type: "success"
+        });
+      }
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to invite user to org",
+        type: "error"
+      });
+    }
+  };
+
+  const onUpdateOrgUserRole = async (membershipId: string, role: string) => {
+    if (!currentOrg?._id) return;
+
+    try {
+      await updateOrgUserRole.mutateAsync({ organizationId: currentOrg?._id, membershipId, role });
+      createNotification({
+        text: "Successfully updated user role",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to update user role",
+        type: "error"
+      });
+    }
+  };
+
+  const onGrantUserAccess = async (userId: string, publicKey: string) => {
+    try {
+      const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+      if (!PRIVATE_KEY || !wsKey) return;
+
+      // assymmetrically decrypt symmetric key with local private key
+      const key = decryptAssymmetric({
+        ciphertext: wsKey.encryptedKey,
+        nonce: wsKey.nonce,
+        publicKey: wsKey.sender.publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      const { ciphertext, nonce } = encryptAssymmetric({
+        plaintext: key,
+        publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      await uploadWsKey.mutateAsync({
+        userId,
+        nonce,
+        encryptedKey: ciphertext,
+        workspaceId: currentWorkspace?._id || ""
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to grant access to user",
+        type: "error"
+      });
+    }
+  };
+
+  const onAddIncidentContact = async (email: string) => {
+    if (!currentOrg?._id) return;
+
+    try {
+      await addIncidentContact.mutateAsync({ orgId, email });
+      createNotification({
+        text: "Successfully added incident contact",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to add incident contact",
+        type: "error"
+      });
+    }
+  };
+
+  const onRemoveIncidentContact = async (email: string) => {
+    if (!currentOrg?._id) return;
+
+    try {
+      await removeIncidentContact.mutateAsync({ orgId, email });
+      createNotification({
+        text: "Successfully removed incident contact",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to remove incident contact",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="mb-6 w-full py-6 px-6 max-w-7xl mx-auto">
+        <p className="mr-4 mb-4 text-3xl font-semibold text-white">
+          {t("section.members.org-members")}
+        </p>
+        <OrgMembersTable
+          isLoading={isOrgUserLoading || IsWsMembershipLoading}
+          isMoreUserNotAllowed={isMoreUsersNotAllowed}
+          orgName={currentOrg?.name || ""}
+          members={orgUsers}
+          workspaceMemberships={workspaceMemberships}
+          onInviteMember={onAddUserToOrg}
+          userId={user?._id || ""}
+          onRemoveMember={onRemoveUserOrgMembership}
+          onRoleChange={onUpdateOrgUserRole}
+          onGrantAccess={onGrantUserAccess}
+          completeInviteLink={completeInviteLink}
+          setCompleteInviteLink={setcompleteInviteLink}
+        />
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,200 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import {
+  faContactBook,
+  faMagnifyingGlass,
+  faPlus,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import {
+  Button,
+  DeleteActionModal,
+  EmailServiceSetupModal,
+  EmptyState,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { IncidentContact } from "@app/hooks/api/types";
+
+type Props = {
+  isLoading?: boolean;
+  contacts?: IncidentContact[];
+  onRemoveContact: (email: string) => Promise<void>;
+  onAddContact: (email: string) => Promise<void>;
+};
+
+const addContactFormSchema = yup.object({
+  email: yup.string().email().required().label("Email").trim()
+});
+
+type TAddContactForm = yup.InferType<typeof addContactFormSchema>;
+
+export const OrgIncidentContactsTable = ({
+  contacts = [],
+  onAddContact,
+  onRemoveContact,
+  isLoading
+}: Props) => {
+  const [searchContact, setSearchContact] = useState("");
+  const {data: serverDetails } = useFetchServerStatus()
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "addContact",
+    "removeContact",
+    "setUpEmail"
+  ] as const);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<TAddContactForm>({ resolver: yupResolver(addContactFormSchema) });
+
+  const onAddIncidentContact = ({ email }: TAddContactForm) => {
+    onAddContact(email);
+    handlePopUpClose("addContact");
+    reset();
+  };
+
+  const onRemoveIncidentContact = async () => {
+    const incidentContactEmail = (popUp?.removeContact?.data as { email: string })?.email;
+    await onRemoveContact(incidentContactEmail);
+    handlePopUpClose("removeContact");
+  };
+
+  const filteredContacts = contacts.filter(({ email }) =>
+    email.toLocaleLowerCase().includes(searchContact)
+  );
+
+  return (
+    <div className="w-full">
+      <div className="mb-4 flex">
+        <div className="mr-4 flex-1">
+          <Input
+            value={searchContact}
+            onChange={(e) => setSearchContact(e.target.value)}
+            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+            placeholder="Search incident contact by email..."
+          />
+        </div>
+        <div>
+          <Button
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            onClick={() => {
+              if (serverDetails?.emailConfigured){
+                handlePopUpOpen("addContact");
+              } else {
+                handlePopUpOpen("setUpEmail");
+              }
+            }}
+          >
+            Add Contact
+          </Button>
+        </div>
+      </div>
+      <div>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Email</Th>
+                <Th aria-label="actions" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={2} key="incident-contact" />}
+              {filteredContacts?.map(({ email }) => (
+                <Tr key={email}>
+                  <Td className="w-full">{email}</Td>
+                  <Td className="mr-4">
+                    <IconButton
+                      ariaLabel="delete"
+                      colorSchema="danger"
+                      onClick={() => handlePopUpOpen("removeContact", { email })}
+                    >
+                      <FontAwesomeIcon icon={faTrash} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              ))}
+            </TBody>
+          </Table>
+          {filteredContacts?.length === 0 && !isLoading && (
+            <EmptyState title="No incident contacts found" icon={faContactBook} />
+          )}
+        </TableContainer>
+      </div>
+      <Modal
+        isOpen={popUp?.addContact?.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("addContact", isOpen);
+          reset();
+        }}
+      >
+        <ModalContent
+          title="Add an Incident Contact"
+          subTitle="This contact will be notified in the unlikely event of a severe incident."
+        >
+          <form onSubmit={handleSubmit(onAddIncidentContact)}>
+            <Controller
+              control={control}
+              defaultValue=""
+              name="email"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isSubmitting}
+                isDisabled={isSubmitting}
+              >
+                Add Incident Contact
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpClose("addContact")}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={popUp.removeContact.isOpen}
+        deleteKey="remove"
+        title="Do you want to remove this email from incident contact?"
+        onChange={(isOpen) => handlePopUpToggle("removeContact", isOpen)}
+        onDeleteApproved={onRemoveIncidentContact}
+      />
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
+      />
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";
@@ -0,0 +1,349 @@
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
+import { faCheck, faCopy, faMagnifyingGlass, faPlus, faTrash, faUsers } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import {
+  Button,
+  DeleteActionModal,
+  EmailServiceSetupModal,  EmptyState,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  Tag,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+  UpgradePlanModal} from "@app/components/v2";
+import { usePopUp, useToggle } from "@app/hooks";
+import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { OrgUser, Workspace } from "@app/hooks/api/types";
+
+type Props = {
+  members?: OrgUser[];
+  workspaceMemberships?: Record<string, Workspace[]>;
+  orgName: string;
+  isLoading?: boolean;
+  isMoreUserNotAllowed: boolean;
+  onRemoveMember: (userId: string) => Promise<void>;
+  onInviteMember: (email: string) => Promise<void>;
+  onRoleChange: (membershipId: string, role: string) => Promise<void>;
+  onGrantAccess: (userId: string, publicKey: string) => Promise<void>;
+  // the current user id to block remove org button
+  userId: string;
+  completeInviteLink: string | undefined,
+  setCompleteInviteLink: Dispatch<SetStateAction<string | undefined>>
+};
+
+const addMemberFormSchema = yup.object({
+  email: yup.string().email().required().label("Email").trim()
+});
+
+type TAddMemberForm = yup.InferType<typeof addMemberFormSchema>;
+
+export const OrgMembersTable = ({
+  members = [],
+  workspaceMemberships = {},
+  orgName,
+  isMoreUserNotAllowed,
+  onRemoveMember,
+  onInviteMember,
+  onGrantAccess,
+  onRoleChange,
+  userId,
+  isLoading,
+  completeInviteLink,
+  setCompleteInviteLink
+}: Props) => {
+  const router = useRouter();
+  const [searchMemberFilter, setSearchMemberFilter] = useState("");
+  const {data: serverDetails } = useFetchServerStatus()
+  const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "addMember",
+    "removeMember",
+    "upgradePlan",
+    "setUpEmail"
+  ] as const);
+
+  useEffect(() => {
+    if (router.query.action === "invite") {
+      handlePopUpOpen("addMember");
+    }
+  }, []);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<TAddMemberForm>({ resolver: yupResolver(addMemberFormSchema) });
+
+  const onAddMember = async ({ email }: TAddMemberForm) => {
+    await onInviteMember(email);
+      if (serverDetails?.emailConfigured){
+        handlePopUpClose("addMember");
+      }
+      
+      reset();
+  };
+
+  const onRemoveOrgMemberApproved = async () => {
+    const orgMembershipId = (popUp?.removeMember?.data as { id: string })?.id;
+    await onRemoveMember(orgMembershipId);
+    handlePopUpClose("removeMember");
+  };
+
+  const isIamOwner = useMemo(
+    () => members.find(({ user }) => userId === user?._id)?.role === "owner",
+    [userId, members]
+  );
+  
+  const filterdUser = useMemo(
+    () =>
+      members.filter(
+        ({ user, inviteEmail }) =>
+          user?.firstName?.toLowerCase().includes(searchMemberFilter) ||
+          user?.lastName?.toLowerCase().includes(searchMemberFilter) ||
+          user?.email?.toLowerCase().includes(searchMemberFilter) ||
+          inviteEmail?.includes(searchMemberFilter)
+      ),
+    [members, searchMemberFilter]
+  );
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isInviteLinkCopied) {
+      timer = setTimeout(() => setInviteLinkCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isInviteLinkCopied]);
+
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(completeInviteLink as string);
+    setInviteLinkCopied.on();
+  };
+
+  return (
+    <div className="w-full">
+      <div className="mb-4 flex">
+        <div className="mr-4 flex-1">
+          <Input
+            value={searchMemberFilter}
+            onChange={(e) => setSearchMemberFilter(e.target.value)}
+            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+            placeholder="Search members..."
+          />
+        </div>
+        <Button
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          onClick={() => {
+            if (isMoreUserNotAllowed) {
+              handlePopUpOpen("upgradePlan");
+            } else {
+              handlePopUpOpen("addMember");
+            }
+          }}
+        >
+          Add Member
+        </Button>
+      </div>
+      <div>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Name</Th>
+                <Th>Email</Th>
+                <Th>Role</Th>
+                <Th>Projects</Th>
+                <Th aria-label="actions" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={5} key="org-members" />}
+              {!isLoading &&
+                filterdUser.map(({ user, inviteEmail, role, _id: orgMembershipId, status }) => {
+                  const name = user ? `${user.firstName} ${user.lastName}` : "-";
+                  const email = user?.email || inviteEmail;
+                  const userWs = workspaceMemberships?.[user?._id];
+
+                  return (
+                    <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
+                      <Td>{name}</Td>
+                      <Td>{email}</Td>
+                      <Td>
+                        {status === "accepted" && (
+                          <Select
+                            defaultValue={role}
+                            isDisabled={userId === user?._id}
+                            className="w-40 bg-mineshaft-600"
+                            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                            onValueChange={(selectedRole) =>
+                              onRoleChange(orgMembershipId, selectedRole)
+                            }
+                          >
+                            {(isIamOwner || role === "owner") && (
+                              <SelectItem value="owner">owner</SelectItem>
+                            )}
+                            <SelectItem value="admin">admin</SelectItem>
+                            <SelectItem value="member">member</SelectItem>
+                          </Select>
+                        )}
+                        {((status === "invited" || status === "verified") && serverDetails?.emailConfigured) && (
+                          <Button className='w-40' colorSchema="primary" variant="outline_bg" onClick={() => onInviteMember(email)}>
+                            Resend Invite
+                          </Button>
+                        )}
+                        {status === "completed" && (
+                          <Button
+                            colorSchema="secondary"
+                            onClick={() => onGrantAccess(user?._id, user?.publicKey)}
+                          >
+                            Grant Access
+                          </Button>
+                        )}
+                      </Td>
+                      <Td>
+                        {userWs ? (
+                          userWs?.map(({ name: wsName, _id }) => (
+                            <Tag key={`user-${user._id}-workspace-${_id}`} className="my-1">
+                              {wsName}
+                            </Tag>
+                          ))
+                        ) : (
+                          <div className='flex flex-row'>
+                            {((status === "invited" || status === "verified") && serverDetails?.emailConfigured) 
+                            ? <Tag colorSchema="red">This user hasn&apos;t accepted the invite yet</Tag>
+                            : <Tag colorSchema="red">This user isn&apos;t part of any projects yet</Tag>}
+                            {router.query.id !== "undefined" && !((status === "invited" || status === "verified") && serverDetails?.emailConfigured) && <button 
+                              type="button"
+                              onClick={() => router.push(`/users/${router.query.id}`)}
+                              className='text-sm bg-mineshaft w-max px-1.5 py-0.5 hover:bg-primary duration-200 hover:text-black cursor-pointer rounded-sm'
+                            >
+                              <FontAwesomeIcon icon={faPlus} className="mr-1" />
+                              Add to projects
+                            </button>}
+                          </div>
+                        )}
+                      </Td>
+                      <Td>
+                        {userId !== user?._id && (
+                          <IconButton
+                            ariaLabel="delete"
+                            colorSchema="danger"
+                            isDisabled={userId === user?._id}
+                            onClick={() => handlePopUpOpen("removeMember", { id: orgMembershipId })}
+                          >
+                            <FontAwesomeIcon icon={faTrash} />
+                          </IconButton>
+                        )}
+                      </Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {!isLoading && filterdUser?.length === 0 && (
+            <EmptyState title="No project members found" icon={faUsers} />
+          )}
+        </TableContainer>
+      </div>
+      <Modal
+        isOpen={popUp?.addMember?.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("addMember", isOpen);
+          setCompleteInviteLink(undefined) 
+        }}
+      >
+        <ModalContent
+          title={`Invite others to ${orgName}`}
+          subTitle={
+            <div>
+              {!completeInviteLink && <div>
+                An invite is specific to an email address and expires after 1 day.
+                <br />
+                For security reasons, you will need to separately add members to projects.
+              </div>}
+              {completeInviteLink && "This Infisical instance does not have a email provider setup. Please share this invite link with the invitee manually"}
+            </div>
+          }
+        >
+          {!completeInviteLink && <form onSubmit={handleSubmit(onAddMember)} >
+            <Controller
+              control={control}
+              defaultValue=""
+              name="email"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isSubmitting}
+                isDisabled={isSubmitting}
+              >
+                Add Member
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpClose("addMember")}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>}
+          {
+            completeInviteLink && 
+            <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{completeInviteLink}</p>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={copyTokenToClipboard}
+            >
+              <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
+              <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">click to copy</span>
+            </IconButton>
+          </div>
+          }
+        </ModalContent>
+      </Modal>
+      <DeleteActionModal
+        isOpen={popUp.removeMember.isOpen}
+        deleteKey="remove"
+        title="Do you want to remove this user from the org?"
+        onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
+        onDeleteApproved={onRemoveOrgMemberApproved}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can add custom environments if you switch to Infisical's Team plan."
+      />
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
+      />
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { OrgMembersTable } from "./OrgMembersTable";
@@ -0,0 +1,69 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { Button, FormControl, Input } from "@app/components/v2";
+
+type Props = {
+  orgName?: string;
+  onOrgNameChange: (name: string) => Promise<void>;
+};
+
+const formSchema = yup.object({
+  name: yup.string().required().label("Project Name")
+});
+
+type FormData = yup.InferType<typeof formSchema>;
+
+export const OrgNameChangeSection = ({ onOrgNameChange, orgName }: Props): JSX.Element => {
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { isDirty, isSubmitting }
+  } = useForm<FormData>({ resolver: yupResolver(formSchema) });
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    reset({ name: orgName });
+  }, [orgName]);
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    await onOrgNameChange(name);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-3">
+        <p className="mb-4 mt-2 text-xl font-semibold">{t("common.display-name")}</p>
+        <div className="mb-2 w-full max-w-lg">
+          <Controller
+            defaultValue=""
+            render={({ field, fieldState: { error } }) => (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Input placeholder="Type your org name" {...field} />
+              </FormControl>
+            )}
+            control={control}
+            name="name"
+          />
+        </div>
+        <Button
+          isLoading={isSubmitting}
+          color="primary"
+          variant="outline_bg"
+          size="sm"
+          type="submit"
+          isDisabled={!isDirty || isSubmitting}
+          leftIcon={<FontAwesomeIcon icon={faCheck} />}
+        >
+          {t("common.save-changes")}
+        </Button>
+      </div>
+    </form>
+  );
+};
@@ -0,0 +1 @@
+export { OrgNameChangeSection } from "./OrgNameChangeSection";
@@ -0,0 +1,367 @@
+import { useEffect, useMemo,useState } from "react";
+import { Controller,useForm } from "react-hook-form";
+import { useRouter } from "next/router";
+import { 
+    faCheck, 
+    faCopy, 
+    faMagnifyingGlass, 
+    faPencil,
+    faPlus, 
+    faServer, 
+    faTrash} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { generateKeyPair } from "@app/components/utilities/cryptography/crypto";
+import {
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useOrganization, useWorkspace } from "@app/context";
+import { usePopUp, useToggle } from "@app/hooks";
+import {
+    useCreateServiceAccount,
+    useDeleteServiceAccount,
+    useGetServiceAccounts} from "@app/hooks/api";
+
+const serviceAccountExpiration = [
+  { label: "1 Day", value: 86400 },
+  { label: "7 Days", value: 604800 },
+  { label: "1 Month", value: 2592000 },
+  { label: "6 months", value: 15552000 },
+  { label: "12 months", value: 31104000 },
+  { label: "Never", value: -1 }
+];
+
+const addServiceAccountFormSchema = yup.object({
+    name: yup.string().required().label("Name").trim(),
+    expiresIn: yup.string().required().label("Service Account Expiration")
+});
+
+type TAddServiceAccountForm = yup.InferType<typeof addServiceAccountFormSchema>;
+
+export const OrgServiceAccountsTable = () => {
+    const router = useRouter();
+    const { currentOrg } = useOrganization();
+    const { currentWorkspace } = useWorkspace();
+    
+    const orgId = currentOrg?._id || "";
+    const [step, setStep] = useState(0);
+    const [isAccessKeyCopied, setIsAccessKeyCopied] = useToggle(false);
+    const [isPublicKeyCopied, setIsPublicKeyCopied] = useToggle(false);
+    const [isPrivateKeyCopied, setIsPrivateKeyCopied] = useToggle(false);
+    const [accessKey, setAccessKey] = useState("");
+    const [publicKey, setPublicKey] = useState("");
+    const [privateKey, setPrivateKey] = useState("");
+    const [searchServiceAccountFilter, setSearchServiceAccountFilter] = useState("");
+    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+        "addServiceAccount",
+        "removeServiceAccount",
+    ] as const);
+
+    const { data: serviceAccounts = [], isLoading: isServiceAccountsLoading } = useGetServiceAccounts(orgId);
+    
+    const createServiceAccount = useCreateServiceAccount();
+    const removeServiceAccount = useDeleteServiceAccount();
+    
+    useEffect(() => {
+        let timer: NodeJS.Timeout;
+        if (isAccessKeyCopied) {
+            timer = setTimeout(() => setIsAccessKeyCopied.off(), 2000);
+        }
+
+        if (isPublicKeyCopied) {
+            timer = setTimeout(() => setIsPublicKeyCopied.off(), 2000);
+        }
+
+        if (isPrivateKeyCopied) {
+            timer = setTimeout(() => setIsPrivateKeyCopied.off(), 2000);
+        }
+
+        return () => clearTimeout(timer);
+    }, [isAccessKeyCopied, isPublicKeyCopied, isPrivateKeyCopied]);
+
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<TAddServiceAccountForm>({ resolver: yupResolver(addServiceAccountFormSchema) });
+    
+    const onAddServiceAccount = async ({ name, expiresIn }: TAddServiceAccountForm) => {
+        if (!currentOrg?._id) return;
+
+        const keyPair = generateKeyPair();
+        setPublicKey(keyPair.publicKey);
+        setPrivateKey(keyPair.privateKey);
+        
+        const serviceAccountDetails = await createServiceAccount.mutateAsync({
+            name,
+            organizationId: currentOrg?._id,
+            publicKey: keyPair.publicKey,
+            expiresIn: Number(expiresIn)
+        });
+        
+        setAccessKey(serviceAccountDetails.serviceAccountAccessKey);
+
+        setStep(1);
+        reset();
+    }
+    
+    const onRemoveServiceAccount = async () => {
+        const serviceAccountId = (popUp?.removeServiceAccount?.data as { _id: string })?._id;
+        await removeServiceAccount.mutateAsync(serviceAccountId);
+        handlePopUpClose("removeServiceAccount");
+    }
+    
+    const filteredServiceAccounts = useMemo(
+        () =>
+            serviceAccounts.filter(
+                ({ name }) =>
+                    name.toLowerCase().includes(searchServiceAccountFilter)
+            ),
+        [serviceAccounts, searchServiceAccountFilter]
+    );
+    
+    const renderStep = (stepToRender: number) => {
+        switch (stepToRender) {
+            case 0:
+                return (
+                   <form onSubmit={handleSubmit(onAddServiceAccount)}>
+                        <Controller
+                            control={control}
+                            defaultValue=""
+                            name="name"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                                <Input {...field} />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="expiresIn"
+                            defaultValue={String(serviceAccountExpiration?.[0]?.value)}
+                            render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+                                return (
+                                    <FormControl
+                                        label="Expiration"
+                                        errorText={error?.message}
+                                        isError={Boolean(error)}
+                                    >
+                                        <Select
+                                            defaultValue={field.value}
+                                            {...field}
+                                            onValueChange={(e) => onChange(e)}
+                                            className="w-full"
+                                        >
+                                        {serviceAccountExpiration.map(({ label, value }) => (
+                                            <SelectItem value={String(value)} key={label}>
+                                                {label}
+                                            </SelectItem>
+                                        ))}
+                                        </Select>
+                                    </FormControl>
+                                );
+                            }}
+                        />
+                        <div className="mt-8 flex items-center">
+                            <Button
+                                className="mr-4"
+                                size="sm"
+                                type="submit"
+                                isLoading={isSubmitting}
+                                isDisabled={isSubmitting}
+                            >
+                                Create Service Account
+                            </Button>
+                            <Button
+                                colorSchema="secondary"
+                                variant="plain"
+                                onClick={() => handlePopUpClose("addServiceAccount")}
+                            >
+                                Cancel
+                            </Button>
+                        </div>
+                    </form> 
+                );
+            case 1:
+                return (
+                    <>
+                        <p>Access Key</p>
+                        <div className="flex items-center justify-end rounded-md p-2 text-base text-gray-400 bg-white/[0.07]">
+                            <p className="mr-4 break-all">{accessKey}</p>
+                            <IconButton
+                                ariaLabel="copy icon"
+                                colorSchema="secondary"
+                                className="group relative"
+                                onClick={() => {
+                                    navigator.clipboard.writeText(accessKey);
+                                    setIsAccessKeyCopied.on();
+                                }}
+                            >
+                                <FontAwesomeIcon icon={isAccessKeyCopied ? faCheck : faCopy} />
+                                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                                    Copy
+                                </span>
+                            </IconButton>
+                        </div>
+                        <p className="mt-4">Public Key</p>
+                        <div className="flex items-center justify-end rounded-md p-2 text-base text-gray-400 bg-white/[0.07]">
+                            <p className="mr-4 break-all">{publicKey}</p>
+                            <IconButton
+                                ariaLabel="copy icon"
+                                colorSchema="secondary"
+                                className="group relative"
+                                onClick={() => {
+                                    navigator.clipboard.writeText(publicKey);
+                                    setIsPublicKeyCopied.on();
+                                }}
+                            >
+                                <FontAwesomeIcon icon={isPublicKeyCopied ? faCheck : faCopy} />
+                                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                                    Copy
+                                </span>
+                            </IconButton>
+                        </div>
+                        <p className="mt-4">Private Key</p>
+                        <div className="flex items-center justify-end rounded-md p-2 text-base text-gray-400 bg-white/[0.07]">
+                            <p className="mr-4 break-all">{privateKey}</p>
+                            <IconButton
+                                ariaLabel="copy icon"
+                                colorSchema="secondary"
+                                className="group relative"
+                                onClick={() => {
+                                    navigator.clipboard.writeText(privateKey);
+                                    setIsPrivateKeyCopied.on();
+                                }}
+                            >
+                                <FontAwesomeIcon icon={isPrivateKeyCopied ? faCheck : faCopy} />
+                                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                                    Copy
+                                </span>
+                            </IconButton>
+                        </div>
+                        
+                    </>
+                );
+            default:
+                return <div />
+        }
+    }
+    
+    return (
+        <div className="w-full">
+            <div className="mb-4 flex">
+                <div className="mr-4 flex-1">
+                    <Input 
+                        value={searchServiceAccountFilter}
+                        onChange={(e) => setSearchServiceAccountFilter(e.target.value)}
+                        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+                        placeholder="Search service accounts..."
+                    />
+                </div>
+                <Button
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    onClick={() => {
+                        setStep(0);
+                        reset();
+                        handlePopUpOpen("addServiceAccount");
+                    }}
+                >
+                    Add Service Account
+                </Button>
+            </div>
+            <TableContainer>
+                <Table>
+                    <THead>
+                        <Th>Name</Th>
+                        <Th className="w-full">Valid Until</Th>
+                        <Th aria-label="actions" />
+                    </THead>
+                    <TBody>
+                        {isServiceAccountsLoading && <TableSkeleton columns={5} key="org-service-accounts" />}
+                        {!isServiceAccountsLoading && (
+                            filteredServiceAccounts.map(({
+                                name, 
+                                expiresAt, 
+                                _id: serviceAccountId 
+                            }) => {
+                                return (
+                                    <Tr key={`org-service-account-${serviceAccountId}`}>
+                                        <Td>{name}</Td>
+                                        <Td>{new Date(expiresAt).toUTCString()}</Td>
+                                        <Td>
+                                            <div className="flex">
+                                                <IconButton
+                                                    ariaLabel="edit"
+                                                    colorSchema="secondary"
+                                                    onClick={() => {
+                                                        if (currentWorkspace?._id) {
+                                                            router.push(`/settings/org/${currentWorkspace._id}/service-accounts/${serviceAccountId}`);
+                                                        }
+                                                    }}
+                                                    className="mr-2"
+                                                >
+                                                    <FontAwesomeIcon icon={faPencil} />
+                                                </IconButton>
+                                                <IconButton
+                                                    ariaLabel="delete"
+                                                    colorSchema="danger"
+                                                    onClick={() => handlePopUpOpen("removeServiceAccount", { _id: serviceAccountId })}
+                                                >
+                                                    <FontAwesomeIcon icon={faTrash} />
+                                                </IconButton>
+                                            </div>
+                                        </Td>
+                                    </Tr>
+                                );
+                            })
+                        )}
+                    </TBody>
+                </Table>
+                {!isServiceAccountsLoading && filteredServiceAccounts?.length === 0 && (
+                    <EmptyState title="No service accounts found" icon={faServer} />
+                )}
+            </TableContainer>
+            <Modal
+                isOpen={popUp?.addServiceAccount?.isOpen}
+                onOpenChange={(isOpen) => {
+                    handlePopUpToggle("addServiceAccount", isOpen);
+                    reset();
+                }}
+            >
+                <ModalContent
+                    title="Add Service Account"
+                    subTitle="A service account represents a machine identity such as a VM or application client."
+                >
+                    {renderStep(step)}
+                </ModalContent>
+            </Modal>
+            <DeleteActionModal
+                isOpen={popUp.removeServiceAccount.isOpen}
+                deleteKey="remove"
+                title="Do you want to remove this service account from the org?"
+                onChange={(isOpen) => handlePopUpToggle("removeServiceAccount", isOpen)}
+                onDeleteApproved={onRemoveServiceAccount}
+            />
+        </div>
+    );
+}
@@ -0,0 +1 @@
+export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";
@@ -0,0 +1,5 @@
+export { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";
+export { OrgMembersTable } from "./OrgMembersTable";
+export { OrgNameChangeSection } from "./OrgNameChangeSection";
+export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";
+
@@ -0,0 +1 @@
+export { MembersPage } from "./MembersPage";
@@ -1,7 +1,5 @@
 import { useTranslation } from "react-i18next";

-import NavHeader from "@app/components/navigation/NavHeader";
-
 import {
  BillingTabGroup
 } from "./components";
@@ -10,9 +8,8 @@ export const BillingSettingsPage = () => {
    const { t } = useTranslation();
    return (
      <div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
-        <div className="max-w-screen-lg w-full">
-          <NavHeader pageName={t("billing.title")} />
-          <div className="my-8">
+        <div className="max-w-7xl w-full">
+          <div className="my-6">
              <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
            <div />
          </div>
@@ -20,7 +20,7 @@ export const BillingTabGroup = () => {
                        {({ selected }) => (
                            <button 
                                type="button"
-                                className={`w-30 p-4 font-semibold outline-none ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"}`}
+                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
                            >
                                {tab.name}
                            </button>
@@ -1,10 +1,7 @@
 import { useTranslation } from "react-i18next";

-import NavHeader from "@app/components/navigation/NavHeader";
-
 import {
  OrgIncidentContactsSection,
-  OrgMembersSection,
  OrgNameChangeSection,
  OrgServiceAccountsTable
 } from "./components";
@@ -13,53 +10,16 @@ export const OrgSettingsPage = () => {
  const { t } = useTranslation();

  return (
-    <div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
-		<div className="max-w-screen-lg w-full">
-      <NavHeader pageName={t("settings.org.title")} />
-      <div className="my-8">
-        <p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
-      </div>
-        <OrgNameChangeSection />
-        <OrgMembersSection />
-        <OrgIncidentContactsSection />
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
-          <OrgServiceAccountsTable />
-        </div>
-        {/* <div className="border-l border-red pb-4 pl-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4 pt-2 max-w-6xl">
-			<p className="text-xl font-bold text-red">
-				Danger Zone
-			</p>
-			<p className="mt-4 text-md text-gray-400">
-				As soon as you delete an organization, you will
-				not be able to undo it. This will immediately
-				remove all organization members and cancel your
-				subscription. If you still want to do that,
-				please enter the name of the organization below.
-			</p>
-			<div className="max-h-28 w-full max-w-xl mr-auto mt-8 max-w-xl">
-				<InputField
-					label="Organization to be Deleted"
-					onChangeHandler={
-						setWorkspaceToBeDeletedName
-					}
-					type="varName"
-					value={workspaceToBeDeletedName}
-					placeholder=""
-					isRequired
-				/>
+    <div className="flex justify-center bg-bunker-800 text-white w-full py-6">
+		<div className="max-w-7xl w-full px-6">
+			<div className="mb-4">
+				<p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
+			</div>
+			<OrgNameChangeSection />
+			<OrgIncidentContactsSection />
+			<div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+				<OrgServiceAccountsTable />
 			</div>
-			<button
-				type="button"
-				className="mt-6 w-full max-w-xl inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-400 hover:bg-red hover:text-white hover:font-bold hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-				onClick={executeDeletingWorkspace}
-			>
-				Delete Project
-			</button>
-			<p className="mt-0.5 ml-1 text-xs text-gray-500">
-				Note: You can only delete a project in case you
-				have more than one.
-			</p>
-		</div> */}
 		</div>
    </div>
  );
@@ -17,8 +17,8 @@ export const OrgIncidentContactsSection = () => {
    ] as const);

    return (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-8">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+            <div className="flex justify-between mb-4">
                <p className="min-w-max text-xl font-semibold">
                    {t("section.incident.incident-contacts")}
                </p>
@@ -21,8 +21,8 @@ export const OrgMembersSection = () => {
    const isMoreMembersAllowed = subscription?.memberLimit ? (subscription.membersUsed < subscription.memberLimit) : true;

    return (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-8">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+            <div className="flex justify-between mb-4">
                <p className="text-xl font-semibold text-mineshaft-100">
                    Organization members
                </p>
@@ -52,9 +52,9 @@ export const OrgNameChangeSection = (): JSX.Element => {
  return (
    <form 
      onSubmit={handleSubmit(onFormSubmit)}
-      className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600"
+      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
    >
-        <p className="text-xl font-semibold text-mineshaft-100 mb-8">
+        <p className="text-xl font-semibold text-mineshaft-100 mb-4">
          Organization name
        </p>
        <div className="mb-2 max-w-md">
@@ -71,8 +71,8 @@ export const OrgNameChangeSection = (): JSX.Element => {
        </div>
        <Button
          isLoading={isLoading}
-          color="primary"
-          colorSchema="secondary"
+          colorSchema="primary"
+          variant="outline_bg"
          type="submit"
        >
          Save
@@ -277,7 +277,7 @@ export const OrgServiceAccountsTable = () => {
    
    return (
        <div className="w-full">
-            <div className="flex justify-between mb-8">
+            <div className="flex justify-between mb-4">
                <p className="text-xl font-semibold text-mineshaft-100">Service Accounts</p>
                <Button
                    colorSchema="secondary"
@@ -15,7 +15,7 @@ export const APIKeySection = () => {
    ] as const);

    return (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
            <div className="flex justify-between mb-8">
                <p className="text-xl font-semibold text-mineshaft-100">
                    {t("settings.personal.api-keys.title")}
@@ -90,7 +90,7 @@ export const ChangePasswordSection = () => {
    return (
        <form 
            onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600"
+            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
        >
            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
                Change password
@@ -54,7 +54,7 @@ export const EmergencyKitSection = () => {
    return (
        <form 
            onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600"
+            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
        >
            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
                Emergency Kit
@@ -1,16 +1,13 @@
 import { useTranslation } from "react-i18next";

-import NavHeader from "@app/components/navigation/NavHeader";
-
 import { PersonalTabGroup } from "./PersonalTabGroup";

 export const PersonalSettingsPage = () => {
    const { t } = useTranslation();
    return (
-        <div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
-            <div className="max-w-screen-lg w-full">
-                <NavHeader pageName={t("settings.personal.title")} isProjectRelated={false} />
-                <div className="my-8">
+        <div className="flex justify-center bg-bunker-800 text-white w-full px-6">
+            <div className="max-w-6xl w-full">
+                <div className="mt-6 mb-6">
                    <p className="text-3xl font-semibold text-gray-200">
                        {t("settings.personal.title")}
                    </p>
@@ -18,7 +18,7 @@ export const PersonalTabGroup = () => {
                        {({ selected }) => (
                            <button 
                                type="button"
-                                className={`w-30 p-4 font-semibold outline-none ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"}`}
+                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
                            >
                                {tab.name}
                            </button>
@@ -51,7 +51,7 @@ export const SecuritySection = () => {
  return (
    <>
    <form>
-      <div className="p-4 mb-6 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+      <div className="p-4 mb-6 bg-mineshaft-900 max-w-6xl rounded-lg border border-mineshaft-600">
        <p className="text-xl font-semibold text-mineshaft-100 mb-8">
          Two-factor Authentication
        </p>
@@ -21,7 +21,7 @@ export const SessionsSection = () => {
    }
    
    return (
-        <div className="p-4 mb-6 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="p-4 mb-6 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
            <div className="flex justify-between mb-8">
                <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
                    Sessions
@@ -1,18 +1,13 @@
 import { useTranslation } from "react-i18next";

-import NavHeader from "@app/components/navigation/NavHeader";
-
 import { ProjectTabGroup } from "./components";

 export const ProjectSettingsPage = () => {
  const { t } = useTranslation();
  return (
-    <div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
-      <div className="max-w-screen-lg w-full">
-        <div className="relative right-5 ml-4">
-          <NavHeader pageName={t("settings.project.title")} isProjectRelated />
-        </div>
-        <div className="my-8">
+    <div className="flex justify-center bg-bunker-800 text-white w-full">
+      <div className="max-w-7xl w-full px-6">
+        <div className="mt-6 mb-6">
            <p className="text-3xl font-semibold text-gray-200">
              {t("settings.project.title")}
            </p>
@@ -35,7 +35,7 @@ export const AutoCapitalizationSection = () => {
  }

  return (
-    <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
      <p className="mb-3 text-xl font-semibold">{t("settings.project.auto-capitalization")}</p>
      <Checkbox
        className="data-[state=checked]:bg-primary"
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Button, FormControl, Input } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+import { useOrganization, useWorkspace } from "@app/context";
 import { useToggle } from "@app/hooks";
 import {
    useDeleteWorkspace
@@ -14,7 +14,8 @@ export const DeleteProjectSection = () => {
    const { t } = useTranslation();
    const router = useRouter();
    const { createNotification } = useNotificationContext();
-    const { currentWorkspace, workspaces } = useWorkspace();
+    const { currentWorkspace } = useWorkspace();
+    const { currentOrg } = useOrganization()
    const [isDeleting, setIsDeleting] = useToggle();
    const [deleteProjectInput, setDeleteProjectInput] = useState("");
    const deleteWorkspace = useDeleteWorkspace();
@@ -26,12 +27,9 @@ export const DeleteProjectSection = () => {
      await deleteWorkspace.mutateAsync({ 
        workspaceID: currentWorkspace?._id
    });
-      // redirect user to first workspace user is part of
-      const ws = workspaces.find(({ _id }) => _id !== currentWorkspace?._id);
-      if (!ws) {
-        router.push("/noprojects");
-      }
-      router.push(`/dashboard/${ws?._id}`);
+      // redirect user to the org overview
+      router.push(`/org/${currentOrg?._id}/overview`);
+
      createNotification({
        text: "Successfully deleted workspace",
        type: "success"
@@ -48,7 +46,7 @@ export const DeleteProjectSection = () => {
  };

    return (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-red">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-red">
          <p className="mb-3 text-xl font-semibold text-red">{t("settings.project.danger-zone")}</p>
          <p className="text-gray-400 mb-8">{t("settings.project.danger-zone-note")}</p>
          <div className="mr-auto mt-4 max-h-28 w-full max-w-md">
@@ -93,7 +93,7 @@ export const E2EESection = () => {
    };

    return bot ? (
-      <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+      <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
        <p className="mb-3 text-xl font-semibold">End-to-End Encryption</p>
        <p className="text-gray-400 mb-8">
            Disabling, end-to-end encryption (E2EE) unlocks capabilities like native integrations to cloud providers as well as HTTP calls to get secrets back raw but enables the server to read/decrypt your secret values.
@@ -58,7 +58,7 @@ export const EnvironmentSection = () => {
  };

  return (
-    <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
      <div className="flex justify-between mb-8">
        <p className="text-xl font-semibold text-mineshaft-100">
          Environments
@@ -54,7 +54,7 @@ export const ProjectIndexSecretsSection = () => {
  };

    return (!isBlindIndexedLoading && !isBlindIndexed) ? (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
            <p className="mb-3 text-xl font-semibold">Blind Indices</p>
            <p className="text-gray-400 mb-8">
                Your project, created before the introduction of blind indexing, contains unindexed secrets. To access individual secrets by name through the SDK and public API, please enable blind indexing.
@@ -64,7 +64,7 @@ export const ProjectNameChangeSection = () => {
  return (
    <form 
      onSubmit={handleSubmit(onFormSubmit)}
-      className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600"
+      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
    >
      <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
        {t("common.display-name")}      
@@ -18,7 +18,7 @@ export const ProjectTabGroup = () => {
                        {({ selected }) => (
                            <button 
                                type="button"
-                                className={`w-30 p-4 font-semibold outline-none ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"}`}
+                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
                            >
                                {tab.name}
                            </button>
@@ -45,7 +45,7 @@ export const SecretTagsSection = (): JSX.Element => {
  };

  return (
-    <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
      <div className="flex justify-between mb-8">
        <p className="mb-3 text-xl font-semibold">Secret Tags</p>
        <Button 
@@ -43,7 +43,7 @@ export const ServiceTokenSection = () => {
  };

  return (
-    <div className="mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-2 flex justify-between">
        <p className="text-xl font-semibold text-mineshaft-100">
          {t("section.token.service-tokens")}
				`@@ -0,0 +1 @@`
				`export { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";`
				`@@ -0,0 +1 @@`
				`export { OrgMembersTable } from "./OrgMembersTable";`
				`@@ -0,0 +1 @@`
				`export { OrgNameChangeSection } from "./OrgNameChangeSection";`
				`@@ -0,0 +1 @@`
				`export { OrgServiceAccountsTable } from "./OrgServiceAccountsTable";`
				`@@ -0,0 +1 @@`
				`export { MembersPage } from "./MembersPage";`